/*
 * Alka portal — frontend (produkcijski dizajn-jezik).
 * Topli izdavački katalog: korice nose boju, mirno uredničko sučelje.
 * Fontovi se hostaju lokalno (assets/fonts/), bez vanjskog CDN-a.
 */

/* ── Lokalni fontovi (varijabilni, težine 400–600, latin + latin-ext za HR) ── */
@font-face{
  font-family:'Newsreader'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('fonts/newsreader-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Newsreader'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('fonts/newsreader-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('fonts/ibm-plex-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'IBM Plex Sans'; font-style:normal; font-weight:400 600; font-display:swap;
  src:url('fonts/ibm-plex-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ── Dizajn-tokeni ── */
.alka-portal-body{
  --bg:#ffffff; --soft-bg:#f7f8fa; --surface:#ffffff;
  --ink:#1b2026; --soft:#586271; --faint:#66707e;
  --line:#ebedf1; --line-2:#e2e5ea;
  --blue:#0080ff; --blue-deep:#0a5fc2; --blue-tint:#eaf3ff;
  --green:#6f9e2b; --green-deep:#4c7315; --green-tint:#eef5e1;
  --doc:#1f5fae; --doc-bg:#eaf2fc; --doc-bd:#cfe0f3;
  --pdf:#bb3326; --pdf-bg:#fcebe9; --pdf-bd:#f4cdc8;
  --ppt:#9c540d; --ppt-bg:#fdf0e3; --ppt-bd:#f6d9b8;
  --xls:#2f7d35; --xls-bg:#e9f5ea; --xls-bd:#cbe6cd;
  --zip:#5b6675; --zip-bg:#eef0f3; --zip-bd:#dde1e7;
  /* Dvoslojna meka sjena u mirovanju; jači hover. */
  --card-sh:0 1px 2px rgba(20,26,38,.045), 0 5px 14px rgba(20,26,38,.05);
  --card-sh-h:0 14px 30px rgba(20,26,38,.13), 0 3px 8px rgba(20,26,38,.07);
  --cover-sh:0 3px 10px rgba(20,26,38,.10);
  /* Skala radijusa: kontrole 8 / kartice 12 / plohe 16. */
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --radius:8px; --radius-lg:12px;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'IBM Plex Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --wrap:1160px;
  /* Hero ploha — postavi na transparent za povratak na čisto bijeli hero. */
  --hero-bg:#f2f7fd;
}

/* ── Baza ── */
.alka-portal-body{margin:0; font-family:var(--sans); color:var(--ink); background:var(--bg); font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased; position:relative; overflow-x:hidden; color-scheme:light}
.alka-portal-body *{box-sizing:border-box}
.alka-portal-body a{color:inherit; text-decoration:none}
.alka-portal-body img{max-width:100%}
.alka-portal-body :focus-visible{outline:2px solid var(--blue-deep); outline-offset:2px; border-radius:4px}

/* Preskoči na sadržaj (vidljivo tek na fokus) */
.alka-skip{position:absolute; left:12px; top:-48px; z-index:50; background:var(--surface); color:var(--blue-deep); border:1px solid var(--blue-deep); border-radius:8px; padding:9px 16px; font-size:14px; font-weight:600; transition:top .12s ease}
.alka-skip:focus{top:12px}
.alka-main,.alka-single{scroll-margin-top:84px}

/* Poštuj smanjenu animaciju */
@media (prefers-reduced-motion:reduce){
  .alka-portal-body *,.alka-portal-body *::before,.alka-portal-body *::after{transition-duration:.001ms !important; animation-duration:.001ms !important; scroll-behavior:auto !important}
}
.alka-bgdeco{position:absolute; top:-170px; right:-150px; width:500px; height:500px; border-radius:50%; border:42px solid var(--blue); opacity:.035; pointer-events:none; z-index:0}
.alka-top,.alka-hero,.alka-nav,.alka-scope,.alka-main{position:relative; z-index:1}

/* ── Header ── */
.alka-top{background:#fff; border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(20,26,38,.04), 0 4px 14px rgba(20,26,38,.045); position:sticky; top:0; z-index:20}
.alka-top .bar{max-width:var(--wrap); margin:0 auto; min-height:64px; padding:10px 34px; display:flex; align-items:center; gap:22px}
.alka-brand{display:flex; align-items:center; gap:14px; flex:0 0 auto; padding-left:2px}
.alka-brand img{height:30px; width:auto; display:block}
.alka-brand .sep{width:1px; height:22px; background:var(--line-2)}
.alka-brand .nm{font-family:var(--sans); font-weight:600; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--soft)}
.alka-search{flex:1; position:relative; max-width:430px}
.alka-search input{width:100%; height:42px; border:1px solid var(--line-2); background:var(--soft-bg); border-radius:var(--radius); padding:0 14px 0 40px; font:inherit; font-size:14.5px; color:var(--ink); outline:none; transition:border-color .13s, box-shadow .13s, background .13s}
.alka-search input::placeholder{color:var(--faint)}
.alka-search input:focus{border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px rgba(0,128,255,.14)}
.alka-search .ico{position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--faint); pointer-events:none}
.alka-user{margin-left:auto; display:flex; align-items:center; gap:13px; font-size:14px; color:var(--soft); flex:0 0 auto}
.alka-user .av{width:30px; height:30px; border-radius:50%; background:var(--blue-tint); color:var(--blue-deep); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:600}
.alka-user .nm{color:var(--ink); font-weight:500}
.alka-user a{color:var(--blue-deep)} .alka-user a:hover{text-decoration:underline}

/* ── Hero ── */
/* Suptilna ploha (blagi plavi tint, zaobljen donji rub). Povratak na bijelo: --hero-bg:transparent. */
.alka-herowrap{background:var(--hero-bg); border-radius:0 0 28px 28px; position:relative; z-index:1}
.alka-hero{max-width:var(--wrap); margin:0 auto; padding:46px 30px 34px; display:flex; align-items:center; justify-content:space-between; gap:30px}
.alka-hero h1{font-family:var(--serif); font-weight:560; font-size:47px; line-height:1.04; margin:0; letter-spacing:-.016em; text-wrap:balance}
.alka-hero p{margin:13px 0 0; font-size:16.5px; color:var(--soft); max-width:560px}
.alka-hero .motif{flex:0 0 auto; opacity:.92}

/* ── Nav (toggle + dropdowni + rezultat) ── */
.alka-nav{max-width:var(--wrap); margin:0 auto; padding:24px 30px 6px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.alka-seg{display:inline-flex; background:var(--soft-bg); border:1px solid var(--line-2); border-radius:var(--radius); padding:3px}
.alka-seg button{font:inherit; font-size:14px; font-weight:500; border:0; background:transparent; color:var(--soft); padding:7px 15px; border-radius:7px; cursor:pointer; display:inline-flex; align-items:center; gap:7px}
.alka-seg button.on{background:var(--surface); color:var(--blue-deep); box-shadow:var(--card-sh)}
.alka-sel{position:relative}
.alka-sel select{appearance:none; -webkit-appearance:none; height:40px; border:1px solid var(--line-2); background:var(--surface); border-radius:var(--radius); padding:0 36px 0 14px; font:inherit; font-size:14px; font-weight:500; color:var(--ink); cursor:pointer; outline:none}
.alka-sel select:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,128,255,.12)}
.alka-sel select:disabled{opacity:.5; cursor:default; background:var(--soft-bg)}
.alka-sel .ico{position:absolute; right:12px; top:50%; transform:translateY(-50%); pointer-events:none; color:var(--soft)}
.alka-nav .res{margin-left:auto; font-size:13.5px; color:var(--faint)}
/* Dok je pretraga aktivna, filtri razreda/predmeta su nevažeći → zasivi ih.
   Zasivljuju se SAMO chipovi (kontrole); naslovi razina (.grp) ostaju u punom
   kontrastu — opacity na cijeloj sekciji spustio bi ih ispod WCAG praga. */
.alka-scope.searching{pointer-events:none}
.alka-scope.searching .chips{opacity:.5}

/* ── Scope (pregled razreda) ── */
.alka-scope{max-width:var(--wrap); margin:0 auto; padding:12px 30px 4px}
.alka-scope .grp{display:flex; align-items:center; gap:9px; font-family:var(--serif); font-size:14px; font-weight:600; color:var(--ink); margin:12px 2px 9px}
.alka-scope .grp .mk{width:7px; height:7px; background:var(--green); transform:rotate(45deg)}
.alka-scope .chips{display:flex; flex-wrap:wrap; gap:8px}
.alka-chip{display:inline-flex; align-items:center; gap:9px; height:37px; padding:0 10px 0 16px; border:1px solid var(--line-2); background:var(--surface); border-radius:var(--r-sm); font:inherit; font-size:13.5px; line-height:1; text-align:left; color:var(--ink); cursor:pointer; transition:border-color .12s, color .12s, background .12s, box-shadow .12s}
.alka-chip:hover{border-color:var(--blue-deep); color:var(--blue-deep); background:var(--blue-tint)}
.alka-chip .ct{font-size:12px; font-weight:600; color:var(--soft); background:var(--soft-bg); border-radius:6px; padding:2px 7px; font-variant-numeric:tabular-nums}
.alka-chip.on{background:var(--blue-deep); border-color:var(--blue-deep); color:#fff; box-shadow:0 2px 6px rgba(10,95,194,.28)}
.alka-chip.on:hover{color:#fff}
.alka-chip.on .ct{background:rgba(0,0,0,.24); color:#fff}
/* Bez opacity — zasivljenje sekcije (.searching .chips) već nosi tu poruku,
   a dva sloja opacity-ja složila bi se u nečitljiv tekst. */
.alka-chip:disabled{cursor:default; pointer-events:none}

/* ── Katalog (popis s koricama) ── */
.alka-main{max-width:var(--wrap); margin:0 auto; padding:8px 30px 70px}
.alka-pred{margin-top:32px}
.alka-pred .h{display:flex; align-items:center; gap:11px; margin-bottom:18px}
.alka-pred .h h2{font-family:var(--serif); font-weight:600; font-size:23px; margin:0; letter-spacing:-.008em}
.alka-pred .h .ct{font-size:12.5px; color:var(--green-deep); font-weight:600; background:var(--green-tint); border-radius:12px; padding:3px 10px; font-variant-numeric:tabular-nums}
.alka-pred .h .rule{flex:1; height:1px; background:var(--line)}

.alka-grid{display:grid; grid-template-columns:repeat(6,1fr); gap:20px}
.alka-cardlink{display:block; color:inherit}
.alka-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:12px; cursor:pointer; box-shadow:var(--card-sh); transition:transform .16s ease, box-shadow .16s ease, border-color .16s; height:100%}
.alka-cardlink:hover .alka-card{transform:translateY(-5px); box-shadow:var(--card-sh-h); border-color:#cfe0f5}
/* Normalizirane korice: fiksni 3:4, isti radijus+sjena kao single view, neutralna podloga */
.alka-cover{position:relative; aspect-ratio:3/4; border-radius:10px; overflow:hidden; background:var(--soft-bg); border:1px solid rgba(20,26,38,.07); box-shadow:var(--cover-sh)}
.alka-cover img{width:100%; height:100%; object-fit:cover; display:block}
/* Naslov uvijek rezervira 2 reda (ujednačena mreža); reže s „…" na 2. redu. */
.alka-cardlink .ttl{margin:11px 1px 0; min-height:calc(1.34em * 2); font-size:13.5px; font-weight:500; line-height:1.34; letter-spacing:-.003em; color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.alka-cardlink:hover .ttl{color:var(--blue-deep)}
.alka-cardmeta{margin:6px 1px 1px; font-size:11.5px; color:var(--faint); display:flex; align-items:center; gap:6px}
.alka-cardmeta .dot{width:5px; height:5px; border-radius:50%; background:var(--green); flex:0 0 auto}

/* Tipografski fallback za korice bez slike */
.alka-fbcover{position:relative; aspect-ratio:3/4; border-radius:10px; overflow:hidden; border:1px solid rgba(20,26,38,.08); background:#eef2f9; box-shadow:var(--cover-sh); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:16px 14px}
.alka-fbcover::before{content:""; position:absolute; inset:7px; border:1px solid rgba(58,70,96,.16); border-radius:4px}
/* #5b6884 na #eef2f9 = 4.93:1 (9.5px verzal traži ≥4.5:1; ovo je jedino
   mjesto gdje se predmet vidi na kartici bez korice). */
.alka-fbcover .tag{font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:#5b6884; margin-bottom:10px}
.alka-fbcover .ft{font-family:var(--serif); font-weight:500; font-size:14px; line-height:1.28; color:#33405c; letter-spacing:-.01em; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden}
.alka-fbcover .mk{position:absolute; bottom:11px; right:12px; font-family:var(--serif); font-weight:600; font-size:14px; color:var(--blue); line-height:1}

/* ── Pojedini materijal (single view) ── */
.alka-single{max-width:1000px; margin:0 auto; padding:22px 30px 70px}
.alka-crumb{font-size:13.5px; color:var(--faint); display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin-bottom:18px}
.alka-crumb a{color:var(--soft)} .alka-crumb a:hover{color:var(--blue-deep)} .alka-crumb .s{color:var(--line-2)}
.alka-mhead{display:flex; gap:28px; align-items:flex-start; padding-bottom:26px; border-bottom:1px solid var(--line)}
.alka-mcover{flex:0 0 auto; width:178px}
.alka-mcover img{width:100%; border-radius:10px; box-shadow:0 12px 28px rgba(20,26,38,.16), 0 3px 7px rgba(20,26,38,.09); display:block; border:1px solid rgba(20,26,38,.07)}
.alka-mcover .alka-fbcover{width:178px}
.alka-minfo{flex:1; min-width:0; padding-top:4px}
.alka-mtags{display:flex; gap:8px; margin-bottom:12px; flex-wrap:wrap}
.alka-mtag{font-size:12px; font-weight:500; color:var(--blue-deep); background:var(--blue-tint); border-radius:14px; padding:4px 11px}
.alka-mtag.g{color:var(--green-deep); background:var(--green-tint)}
.alka-minfo h1{font-family:var(--serif); font-weight:600; font-size:30px; line-height:1.12; margin:0 0 12px; letter-spacing:-.012em; text-wrap:balance}
.alka-mauthors{font-size:14.5px; color:var(--soft); margin:0 0 6px}
.alka-mdesc{font-size:15px; color:var(--soft); margin:0; max-width:560px}
.alka-mmeta{margin-top:18px; display:flex; align-items:center; gap:18px; font-size:13.5px; color:var(--faint); flex-wrap:wrap}
.alka-mmeta b{color:var(--ink); font-weight:600; font-variant-numeric:tabular-nums}

.alka-att{margin-top:28px}
.alka-att .ah{display:flex; align-items:baseline; gap:12px; margin-bottom:8px; flex-wrap:wrap}
.alka-att .ah h2{font-family:var(--serif); font-weight:600; font-size:21px; margin:0}
.alka-att .ah .c{font-size:13px; color:var(--faint)}
.alka-att .ah .pg{margin-left:auto; font-size:13px; color:var(--faint); font-variant-numeric:tabular-nums}
.alka-alist{border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); box-shadow:var(--card-sh)}
.alka-arow{display:flex; align-items:center; gap:15px; padding:11px 16px; border-bottom:1px solid var(--line)}
.alka-arow:last-child{border-bottom:0}
.alka-arow:hover{background:var(--soft-bg)}
.alka-fi{width:34px; height:42px; border-radius:6px; position:relative; flex:0 0 auto; background:var(--doc-bg); border:1px solid var(--doc-bd)}
.alka-fi .ln{position:absolute; left:8px; right:9px; top:9px; height:2px; border-radius:1px; background:var(--doc); opacity:.30; box-shadow:0 5px var(--doc), 0 10px var(--doc)}
.alka-fi .ex{position:absolute; left:0; right:0; bottom:5px; text-align:center; font-size:8.5px; font-weight:700; letter-spacing:.02em; color:var(--doc)}
.alka-fi.t-pdf{background:var(--pdf-bg); border-color:var(--pdf-bd)} .alka-fi.t-pdf .ln,.alka-fi.t-pdf .ex{color:var(--pdf); box-shadow:0 5px var(--pdf),0 10px var(--pdf)}
.alka-fi.t-ppt{background:var(--ppt-bg); border-color:var(--ppt-bd)} .alka-fi.t-ppt .ln,.alka-fi.t-ppt .ex{color:var(--ppt); box-shadow:0 5px var(--ppt),0 10px var(--ppt)}
.alka-fi.t-xls{background:var(--xls-bg); border-color:var(--xls-bd)} .alka-fi.t-xls .ln,.alka-fi.t-xls .ex{color:var(--xls); box-shadow:0 5px var(--xls),0 10px var(--xls)}
.alka-fi.t-zip{background:var(--zip-bg); border-color:var(--zip-bd)} .alka-fi.t-zip .ln,.alka-fi.t-zip .ex{color:var(--zip); box-shadow:0 5px var(--zip),0 10px var(--zip)}
.alka-fi .ln{box-shadow:0 5px var(--doc),0 10px var(--doc)}
.alka-aname{flex:1; min-width:0; font-size:14.5px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.alka-aseq{color:var(--faint); font-variant-numeric:tabular-nums; font-size:13px; flex:0 0 auto}
.alka-asize{font-size:13px; color:var(--faint); font-variant-numeric:tabular-nums; flex:0 0 auto; min-width:58px; text-align:right}
/* Primarna akcija na single view → filled plavi (specifičnost iznad a{color:inherit}) */
.alka-portal-body a.alka-dl{flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 15px; border:0; border-radius:var(--r-sm); background:var(--blue-deep); color:#fff; font-size:13.5px; font-weight:600; cursor:pointer; transition:background .12s}
.alka-portal-body a.alka-dl:hover{background:#084a9e}
/* Onemogućeno stanje za „samo pregled" korisnika (čitljivo, ne mrtav gumb) */
.alka-anote{flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px; border:1px dashed var(--line-2); border-radius:var(--r-sm); background:var(--soft-bg); color:var(--soft); font-size:12.5px; font-weight:500; white-space:nowrap}
.alka-anote svg{color:var(--faint); flex:0 0 auto}
/* grupni podnaslov unutar liste priloga (wp_alka_groups) */
.alka-ghead{padding:12px 16px 7px; font-family:var(--serif); font-weight:600; font-size:14.5px; color:var(--soft); background:var(--soft-bg); border-bottom:1px solid var(--line)}
.alka-arow + .alka-ghead{border-top:1px solid var(--line)}
/* audio (renderira se SAMO za is_audio=1) */
.alka-arow.audio{background:#f9fbff}
.alka-arow.audio audio{flex:1; min-width:0; height:38px; max-width:420px}

.alka-pager{margin-top:18px; display:flex; align-items:center; justify-content:center; gap:6px; flex-wrap:wrap}
.alka-pager a,.alka-pager .on{min-width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; padding:0 6px; border:1px solid var(--line-2); border-radius:8px; font-size:14px; color:var(--soft); cursor:pointer; font-variant-numeric:tabular-nums}
.alka-pager a:hover{border-color:var(--blue); color:var(--blue-deep)}
.alka-pager .on{background:var(--blue-deep); border-color:var(--blue-deep); color:#fff}
.alka-pager .dots{color:var(--faint); padding:0 4px; border:0}

/* ── Prazna stanja ── */
.alka-empty{max-width:760px; margin:48px auto; padding:0 30px}
.alka-empty .box{border:1px solid var(--line); border-radius:16px; background:var(--surface); padding:56px 30px; text-align:center; box-shadow:0 1px 2px rgba(20,26,38,.04)}
.alka-empty .ill{display:flex; justify-content:center; margin-bottom:22px}
.alka-empty h2{font-family:var(--serif); font-weight:600; font-size:24px; margin:0 0 10px; letter-spacing:-.008em; text-wrap:balance}
.alka-empty p{font-size:15px; color:var(--soft); margin:0 auto; max-width:440px; line-height:1.6}
.alka-empty .act{margin-top:24px; display:inline-flex; gap:10px}
.alka-btn-ghost{display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 18px; border:1px solid var(--line-2); border-radius:var(--radius); background:#fff; font:inherit; font-size:14.5px; font-weight:500; color:var(--ink); cursor:pointer}
.alka-btn-ghost:hover{border-color:var(--blue); color:var(--blue-deep)}
.alka-btn{height:42px; padding:0 18px; border:0; border-radius:var(--radius); background:var(--blue-deep); color:#fff; font:inherit; font-size:14.5px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; justify-content:center}
.alka-btn:hover{background:#084a9e}

/* ── Login ── */
.alka-login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:30px; background:var(--soft-bg)}
.alka-login{width:880px; max-width:100%; min-height:540px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 18px 50px rgba(20,26,38,.10); overflow:hidden; display:grid; grid-template-columns:1fr 1fr}
.alka-login .brandside{background:#f3f8ff; border-right:1px solid var(--line); padding:42px 40px; display:flex; flex-direction:column; position:relative; overflow:hidden}
.alka-login .brandside .deco{position:absolute; right:-110px; bottom:-120px; width:340px; height:340px; border-radius:50%; border:40px solid var(--blue); opacity:.06}
.alka-login .brandside .logo{display:flex; align-items:center; gap:13px; position:relative}
.alka-login .brandside .logo img{height:32px; width:auto} .alka-login .brandside .logo .sep{width:1px;height:24px;background:var(--line-2)} .alka-login .brandside .logo .nm{font-family:var(--sans); font-weight:600; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--soft)}
.alka-login .brandside .mid{margin:auto 0; position:relative}
.alka-login .brandside .book{margin-bottom:22px}
.alka-login .brandside h2{font-family:var(--serif); font-weight:500; font-size:27px; line-height:1.2; margin:0 0 12px; letter-spacing:-.01em; max-width:300px}
.alka-login .brandside p{font-size:15px; color:var(--soft); margin:0; max-width:290px}
.alka-login .brandside .foot{font-size:12.5px; color:var(--faint); position:relative; margin-top:auto}
.alka-login .formside{padding:54px 52px; display:flex; flex-direction:column; justify-content:center}
.alka-login .formside h1{font-family:var(--serif); font-weight:600; font-size:26px; margin:0 0 6px}
.alka-login .formside .sub{font-size:14.5px; color:var(--soft); margin:0 0 24px}
.alka-login .err{font-size:13.5px; color:var(--pdf); background:var(--pdf-bg); border:1px solid var(--pdf-bd); border-radius:var(--radius); padding:10px 14px; margin:0 0 18px}
.alka-login .field{margin-bottom:16px}
.alka-login .field label{display:block; font-size:13px; font-weight:500; color:var(--soft); margin-bottom:6px}
.alka-login .field input{width:100%; height:44px; border:1px solid var(--line-2); background:#fff; border-radius:var(--radius); padding:0 14px; font:inherit; font-size:15px; color:var(--ink); outline:none; transition:border-color .13s, box-shadow .13s}
.alka-login .field input:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,128,255,.14)}
.alka-login .rowf{display:flex; align-items:center; justify-content:space-between; margin:4px 0 22px; gap:12px; flex-wrap:wrap}
.alka-login .rowf label{display:flex; align-items:center; gap:8px; font-size:13.5px; color:var(--soft); cursor:pointer}
.alka-login .rowf input{width:16px; height:16px; accent-color:var(--blue)}
.alka-login .formside .alka-btn{width:100%; height:46px; font-size:15px}
.alka-login .note{margin-top:24px; padding-top:20px; border-top:1px solid var(--line); font-size:13px; color:var(--faint); line-height:1.55}
.alka-login .note a{color:var(--blue-deep)}

/* ── „Pregledaj" gumb (sekundarna akcija uz „Preuzmi", samo PDF) ── */
.alka-pv{flex:0 0 auto; display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface); color:var(--blue-deep); font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; transition:border-color .12s, background .12s}
.alka-pv:hover{border-color:var(--blue-deep); background:var(--blue-tint)}

/* ── PDF preglednik (overlay) ── */
.alka-pdfmodal{position:fixed; inset:0; z-index:1000; display:flex; flex-direction:column; background:radial-gradient(130% 120% at 50% -10%, rgba(40,48,64,.80), rgba(10,14,22,.90)); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
.alka-pdfmodal[hidden]{display:none}
.alka-pdfmodal .pv-bar{display:flex; align-items:center; gap:14px; padding:10px 18px; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 2px 10px rgba(10,14,22,.30); position:relative; z-index:3}
.alka-pdfmodal .pv-title{font-family:var(--serif); font-weight:600; font-size:16px; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; min-width:0}
.alka-pdfmodal .pv-ctrls{display:flex; align-items:center; gap:7px; flex:0 0 auto}
.alka-pdfmodal .pv-btn{width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line-2); border-radius:var(--r-sm); background:var(--surface); color:var(--ink); font-size:16px; line-height:1; cursor:pointer; transition:border-color .12s, background .12s, color .12s}
.alka-pdfmodal .pv-btn:hover{border-color:var(--blue-deep); color:var(--blue-deep); background:var(--blue-tint)}
.alka-pdfmodal .pv-close:hover{border-color:var(--pdf); color:var(--pdf); background:var(--pdf-bg)}
.alka-pdfmodal .pv-page{font-size:13.5px; color:var(--soft); display:inline-flex; align-items:center; gap:5px; font-variant-numeric:tabular-nums}
.alka-pdfmodal .pv-pageno{width:44px; height:32px; text-align:center; border:1px solid var(--line-2); border-radius:7px; font:inherit; font-size:13.5px; color:var(--ink); outline:none; font-variant-numeric:tabular-nums}
.alka-pdfmodal .pv-pageno:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,128,255,.14)}
.alka-pdfmodal .pv-zoom{font-size:13px; color:var(--soft); min-width:42px; text-align:center; font-variant-numeric:tabular-nums}
.alka-pdfmodal .pv-div{width:1px; height:22px; background:var(--line-2)}
.alka-pdfmodal .pv-btn:disabled{opacity:.4; cursor:default}
.alka-pdfmodal .pv-btn:disabled:hover{border-color:var(--line-2); background:var(--surface); color:var(--ink)}
/* Stage + flipbook (StPageFlip: povlačenje, klik, realistično savijanje) */
.alka-pdfmodal .pv-stage{position:relative; flex:1; overflow:hidden; display:flex; align-items:center; justify-content:center; padding:26px 78px 34px}
.alka-pdfmodal .pv-scaler{position:relative; transform-origin:center center; transition:transform .16s ease; will-change:transform; touch-action:none}
/* Uvećano (zoom>1) → scena se smije pomicati: ishodište skaliranja gore-lijevo
   pa uvećani list raste u prostor za skrolanje umjesto da se reže na rubovima.
   Klasu postavlja setZoom(); StPageFlip i dalje sam obrađuje povlačenje lista. */
.alka-pdfmodal .pv-stage.pv-pan{overflow:auto; align-items:flex-start; justify-content:flex-start}
.alka-pdfmodal .pv-stage.pv-pan .pv-scaler{transform-origin:0 0}
.alka-pdfmodal .pv-flip{margin:0 auto}
.alka-pdfmodal .pf-page{background:#fff; box-shadow:0 10px 34px rgba(0,0,0,.34); overflow:hidden}
.alka-pdfmodal .pf-page canvas{display:block; width:100%; height:100%}
.alka-pdfmodal .stf__item{border-radius:2px}
/* Bočne strelice za listanje */
.alka-pdfmodal .pv-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:6; width:50px; height:50px; border-radius:50%; border:0; background:rgba(255,255,255,.94); color:#1b2026; font-size:25px; line-height:1; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 6px 22px rgba(0,0,0,.34); transition:background .12s, transform .12s, opacity .12s}
.alka-pdfmodal .pv-arrow:hover{background:#fff; transform:translateY(-50%) scale(1.07)}
.alka-pdfmodal .pv-arrow:disabled{opacity:.3; cursor:default; transform:translateY(-50%)}
.alka-pdfmodal .pv-aleft{left:16px}
.alka-pdfmodal .pv-aright{right:16px}
.alka-pdfmodal .pv-load{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); color:#fff; font-size:14.5px; background:rgba(20,26,38,.62); padding:10px 18px; border-radius:var(--r-sm); z-index:7}
.alka-pdfmodal .pv-spin{position:absolute; top:50%; left:50%; width:32px; height:32px; margin:-16px 0 0 -16px; border:3px solid rgba(255,255,255,.30); border-top-color:#fff; border-radius:50%; animation:alka-spin .8s linear infinite; pointer-events:none; z-index:7}
.alka-pdfmodal .pv-spin[hidden]{display:none}
@keyframes alka-spin{to{transform:rotate(360deg)}}
.alka-pdfmodal .pv-prog{height:4px; background:rgba(255,255,255,.13); flex:0 0 auto; position:relative; z-index:3}
.alka-pdfmodal .pv-prog span{display:block; height:100%; width:0; background:#0080ff; border-radius:0 3px 3px 0; transition:width .3s ease}
.alka-pdfmodal .pv-hint{position:absolute; left:50%; bottom:24px; transform:translateX(-50%) translateY(6px); z-index:6; display:inline-flex; align-items:center; gap:8px; background:rgba(20,26,38,.88); color:#fff; font-size:13px; font-weight:500; padding:9px 16px; border-radius:999px; box-shadow:0 8px 24px rgba(0,0,0,.34); opacity:0; pointer-events:none; transition:opacity .4s ease, transform .4s ease}
.alka-pdfmodal .pv-hint.show{opacity:1; transform:translateX(-50%) translateY(0)}
@media (max-width:600px){
  .alka-pdfmodal .pv-stage{padding:16px 12px 26px}
  .alka-pdfmodal .pv-arrow{width:42px; height:42px; font-size:22px; background:rgba(255,255,255,.86)}
  .alka-pdfmodal .pv-aleft{left:6px} .alka-pdfmodal .pv-aright{right:6px}
}

/* ── Footer ── */
.alka-foot{max-width:var(--wrap); margin:0 auto; padding:26px 30px; border-top:1px solid var(--line); font-size:13px; color:var(--faint); text-align:center}

/* ── Responzivno ── */
@media (max-width:1100px){ .alka-grid{grid-template-columns:repeat(5,1fr)} }
@media (max-width:920px){
  .alka-grid{grid-template-columns:repeat(4,1fr)}
  .alka-hero h1{font-size:32px}
  .alka-hero .motif{display:none}
}
@media (max-width:760px){
  .alka-top .bar{flex-wrap:wrap; gap:12px; padding:12px 18px}
  .alka-search{order:3; flex-basis:100%; max-width:none}
  .alka-user{margin-left:auto}
  .alka-hero,.alka-nav,.alka-scope,.alka-main,.alka-single{padding-left:18px; padding-right:18px}
  .alka-grid{grid-template-columns:repeat(3,1fr); gap:16px}
  .alka-nav{gap:10px}
  .alka-nav .alka-seg,.alka-nav .alka-sel{flex:1 1 auto}
  .alka-nav .alka-sel select{width:100%}
  .alka-nav .res{flex-basis:100%; margin-left:0; order:5}
  .alka-mhead{flex-direction:column; gap:18px}
  .alka-mcover{width:140px} .alka-mcover .alka-fbcover{width:140px}
  .alka-minfo h1{font-size:24px}
  /* Dodirna meta ≥44px na malim ekranima */
  .alka-portal-body a.alka-dl,.alka-pv{height:auto; min-height:44px; padding:0 16px}
  .alka-login{grid-template-columns:1fr}
  .alka-login .brandside{display:none}
  .alka-login .formside{padding:40px 28px}
}
@media (max-width:480px){
  .alka-grid{grid-template-columns:repeat(2,1fr); gap:14px}
  .alka-hero h1{font-size:27px}
  .alka-arow{flex-wrap:wrap; gap:10px}
  .alka-aname{flex-basis:calc(100% - 110px)}
  .alka-att .ah .pg{margin-left:0; flex-basis:100%}
  /* PDF row: „Pregledaj" + „Preuzmi" dijele drugi red, podjednako */
  .alka-pv,.alka-portal-body a.alka-dl{flex:1 1 auto; justify-content:center}
  /* PDF preglednik na mobitelu: naslov u svoj red, kontrole zbijene */
  .alka-pdfmodal .pv-bar{flex-wrap:wrap; gap:9px; padding:10px 12px}
  .alka-pdfmodal .pv-title{flex-basis:100%; font-size:14.5px}
  .alka-pdfmodal .pv-ctrls{width:100%; justify-content:space-between; gap:5px}
  .alka-pdfmodal .pv-stage{padding:14px 8px 28px}
}