:root{
    --brand:#2AA0DD; --brand-deep:#1B7AAD; --brand-soft:#EAF5FC; --brand-glow:#7FCBF0;
    --ink:#0E2033; --ink-2:#3C5266; --bg:#FFFFFF; --bg-2:#F5F9FC; --card:#FFFFFF;
    --line:#E1E9F0; --ok:#1E9E6A; --warn:#D96A3F; --star:#F2B01E;
    --r:16px; --header-h:70px;
    --shadow:0 10px 30px -12px rgba(14,32,51,.18);
    --shadow-lg:0 30px 60px -30px rgba(14,32,51,.35);
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  [hidden]{display:none !important;}
  html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 20px);}
  body{background:var(--bg);color:var(--ink);font-family:'IBM Plex Sans',system-ui,sans-serif;line-height:1.62;-webkit-font-smoothing:antialiased;}
  h1,h2,h3{font-family:'Sora',sans-serif;font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--ink);}
  a{color:inherit;text-decoration:none;}
  .wrap{max-width:960px;margin:0 auto;padding:0 22px;}

  .header{position:sticky;top:0;z-index:40;height:var(--header-h);background:rgba(255,255,255,.85);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);}
  .header-inner{max-width:1140px;margin:0 auto;padding:0 22px;height:100%;display:flex;align-items:center;gap:28px;}
  .logo{display:flex;align-items:center;gap:10px;flex-shrink:0;}
  .logo img{height:36px;width:auto;display:block;}
  .logo .word{font-family:'Sora',sans-serif;font-weight:800;font-size:19px;letter-spacing:.06em;color:var(--brand-deep);}
  .nav{display:flex;align-items:center;gap:4px;margin-left:auto;}
  .nav a{font-size:14.5px;font-weight:500;color:var(--ink-2);padding:8px 14px;border-radius:9px;transition:color .15s ease, background .15s ease;}
  .nav a:hover{color:var(--brand-deep);background:var(--brand-soft);}
  .nav a.active{color:var(--brand-deep);}
  .nav .nav-cta{background:var(--brand);color:#fff;font-weight:600;padding:10px 18px;margin-left:8px;box-shadow:0 6px 16px -8px rgba(42,160,221,.8);}
  .nav .nav-cta:hover{background:var(--brand-deep);color:#fff;}
  .burger{display:none;margin-left:auto;background:none;border:0;color:var(--ink);font-size:24px;cursor:pointer;padding:6px;line-height:1;}
  @media(max-width:820px){
    .nav{display:none;position:absolute;top:var(--header-h);left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;background:#fff;border-bottom:1px solid var(--line);padding:10px;box-shadow:var(--shadow);}
    .nav.open{display:flex;}
    .nav .nav-cta{margin:6px 0 0;text-align:center;}
    .burger{display:block;}
  }

  .hero{text-align:center;padding:72px 0 30px;position:relative;background:radial-gradient(60% 90% at 50% -10%, var(--brand-soft) 0%, rgba(234,245,252,0) 62%);}
  .eyebrow{display:inline-block;font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-deep);background:var(--brand-soft);border:1px solid #CFE7F6;border-radius:999px;padding:7px 15px;margin-bottom:22px;}
  .hero h1{font-size:clamp(32px,5.4vw,54px);max-width:820px;margin:0 auto;}
  .hero h1 em{font-style:normal;color:var(--brand-deep);}
  .hero .sub{color:var(--ink-2);font-size:18px;max-width:620px;margin:20px auto 0;}
  .badges{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:26px;}
  .badge{font-size:13px;color:var(--ink-2);background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 15px;box-shadow:var(--shadow);}
  .badge b{color:var(--ink);}

  /* Primjeri predavanja (varijanta 1a): jedan veliki video nosi sekciju,
     dva manja ispod njega (na telefonu sve jedno pod drugim).
     YouTube plejer se pravi tek na klik, do tada stoji samo sličica. */
  .primjeri{display:flex;flex-direction:column;gap:24px;margin-top:18px;}
  .primjeri-feature{display:flex;flex-direction:column;gap:10px;}
  .primjeri-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;}
  .pcard{display:flex;flex-direction:column;gap:10px;}
  /* plejer uz dno kartice: kad je jedan naslov duži (dva reda), oba plejera
     ipak ostanu u istoj ravni */
  .pcard .lite-yt{margin-top:auto;}
  .pcard .plabel{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--brand);}
  .pcard h3{font-size:clamp(15px,1.8vw,21px);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
  .primjeri-note{color:var(--ink-2);font-size:clamp(13px,1.5vw,16px);line-height:1.5;}
  .lite-yt{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;cursor:pointer;background:repeating-linear-gradient(135deg,#eef2f6 0 9px,#e4eaef 9px 18px);}
  .lite-yt:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
  .lite-yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
  .lite-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
  .lite-yt .play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:clamp(48px,6vw,68px);aspect-ratio:1;border-radius:999px;background:rgba(14,32,51,.74);}
  .lite-yt .play:before{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #fff;}

  .cta-row{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:34px 0 8px;}
  .btn{font-family:'IBM Plex Sans',sans-serif;font-size:15.5px;font-weight:600;padding:15px 28px;border-radius:12px;border:1.5px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:transform .14s ease,background .14s ease,border-color .14s ease,box-shadow .14s ease;}
  .btn:hover{transform:translateY(-2px);}
  .btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
  .btn-primary{background:var(--brand);color:#fff;box-shadow:0 10px 24px -10px rgba(42,160,221,.9);}
  .btn-primary:hover{background:var(--brand-deep);}
  .btn-primary:disabled{opacity:.6;cursor:default;transform:none;}
  .btn-ghost{background:#fff;color:var(--brand-deep);border-color:#CFE7F6;}
  .btn-ghost:hover{border-color:var(--brand);background:var(--brand-soft);}
  .cta-note{text-align:center;color:var(--ink-2);font-size:13.5px;max-width:580px;margin:0 auto;}
  .deadline{display:inline-block;margin-top:14px;font-size:13px;color:#B4542E;background:#FCEEE7;border:1px solid #F3D3C4;border-radius:999px;padding:7px 15px;font-weight:500;}

  .synapse{display:block;margin:60px auto;opacity:.9;}
  section{scroll-margin-top:90px;}
  .band{background:var(--bg-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
  .sec{padding:52px 0;}
  .sec-head{text-align:center;margin-bottom:32px;}
  .sec-head h2{font-size:clamp(26px,3.6vw,36px);}
  .sec-head p{color:var(--ink-2);max-width:600px;margin:12px auto 0;}

  .grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;}
  .grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;}
  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:var(--shadow);transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;}
  .card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:#CFE7F6;}
  .card .tag{display:inline-block;font-size:11.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-deep);background:var(--brand-soft);padding:4px 10px;border-radius:999px;margin-bottom:14px;}
  .card h3{font-size:18px;margin-bottom:6px;}
  .card p{color:var(--ink-2);font-size:14.5px;}
  .card ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:8px;}
  .card ul li{position:relative;padding-left:24px;font-size:14px;color:var(--ink-2);}
  .card ul li:before{content:"✓";position:absolute;left:0;color:var(--brand);font-weight:700;}

  .checklist{max-width:620px;margin:0 auto;list-style:none;display:grid;gap:14px;}
  .checklist li{padding-left:32px;position:relative;font-size:16px;color:var(--ink);}
  .checklist li:before{content:"✓";position:absolute;left:0;top:0;color:var(--brand);font-weight:700;font-size:18px;}

  .note-line{text-align:center;color:var(--ink-2);font-size:14px;margin-top:26px;}

  /* pricing */
  .price-wrap{max-width:470px;margin:0 auto;}
  .price-card{background:#fff;border:2px solid var(--brand);border-radius:var(--r);padding:36px 32px;box-shadow:var(--shadow-lg);text-align:center;}
  .price-tag{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--brand-deep);background:var(--brand-soft);padding:5px 12px;border-radius:999px;margin-bottom:16px;}
  .price-num{font-family:'Sora',sans-serif;font-size:56px;font-weight:800;color:var(--ink);line-height:1;}
  .price-num span{font-size:22px;color:var(--ink-2);font-weight:600;}
  .price-list{list-style:none;text-align:left;margin:22px 0;display:grid;gap:11px;}
  .price-list li{padding-left:28px;position:relative;color:var(--ink);font-size:15px;}
  .price-list li:before{content:"✓";position:absolute;left:0;color:var(--brand);font-weight:700;}
  .price-compare{color:var(--ink-2);font-size:13.5px;margin:8px 0 20px;}
  .price-card .btn{width:100%;justify-content:center;}
  .price-sub{color:var(--ink-2);font-size:12.5px;margin-top:14px;}

  /* instruktori */
  .inst{display:flex;gap:16px;align-items:flex-start;}
  .inst .av{width:54px;height:54px;border-radius:50%;flex-shrink:0;background:var(--brand-soft);color:var(--brand-deep);display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:800;font-size:18px;border:1px solid #CFE7F6;}
  .inst h3{font-size:17px;margin-bottom:3px;}
  .inst .role{font-size:12.5px;color:var(--brand-deep);font-weight:600;margin-bottom:8px;}
  .inst p{font-size:14px;color:var(--ink-2);}

  /* FAQ */
  .faq{max-width:720px;margin:0 auto;display:grid;gap:12px;}
  .faq details{background:#fff;border:1px solid var(--line);border-radius:12px;padding:2px 20px;box-shadow:var(--shadow);}
  .faq summary{cursor:pointer;font-weight:600;padding:16px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px;font-size:15.5px;}
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary:after{content:"+";color:var(--brand);font-size:24px;font-weight:400;line-height:1;}
  .faq details[open] summary:after{content:"–";}
  .faq details p{color:var(--ink-2);font-size:14.5px;padding:0 0 18px;}

  /* utisci */
  .rating-bar{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:38px;}
  .rating-num{font-family:'Sora',sans-serif;font-size:46px;font-weight:800;color:var(--ink);}
  .rating-meta{color:var(--ink-2);font-size:14px;}
  .stars{display:flex;gap:3px;}
  .star{width:17px;height:17px;fill:#D8E2EC;}
  .star.on{fill:var(--star);}
  .t-card p.q{font-size:14.8px;margin-bottom:16px;color:var(--ink);}
  .t-who{display:flex;align-items:center;gap:10px;}
  .t-av{width:38px;height:38px;border-radius:50%;flex-shrink:0;background:var(--brand-soft);color:var(--brand-deep);display:flex;align-items:center;justify-content:center;font-family:'Sora',sans-serif;font-weight:700;font-size:13px;border:1px solid #CFE7F6;}
  .t-name{font-size:14px;font-weight:600;}
  .t-role{font-size:12.5px;color:var(--ink-2);}
  .review-cta{text-align:center;margin-top:34px;}
  .empty-note{text-align:center;color:var(--ink-2);font-size:14.5px;padding:10px 0 4px;}

  .overlay{position:fixed;inset:0;background:rgba(14,32,51,.55);backdrop-filter:blur(4px);display:none;align-items:center;justify-content:center;padding:20px;z-index:60;}
  .overlay.open{display:flex;}
  .modal{background:#fff;border:1px solid var(--line);border-radius:var(--r);max-width:440px;width:100%;padding:34px;position:relative;max-height:92vh;overflow-y:auto;box-shadow:var(--shadow-lg);}
  .modal h3{font-size:22px;margin-bottom:6px;}
  .modal .msub{color:var(--ink-2);font-size:14px;margin-bottom:22px;}
  .x{position:absolute;top:16px;right:16px;background:none;border:0;color:var(--ink-2);font-size:24px;cursor:pointer;line-height:1;padding:4px;}
  .x:hover{color:var(--ink);}
  .field{margin-bottom:15px;}
  .field label{display:block;font-size:13px;color:var(--ink-2);margin-bottom:6px;font-weight:500;}
  .field input,.field textarea{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:14.5px;font-family:'IBM Plex Sans',sans-serif;}
  .field textarea{resize:vertical;min-height:92px;}
  .field input:focus,.field textarea:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent;}
  .modal .btn-primary{width:100%;justify-content:center;margin-top:6px;}
  .status{font-size:13.5px;margin-top:12px;text-align:center;min-height:18px;}
  .status.err{color:var(--warn);}
  .status.ok{color:var(--ok);}
  .star-pick{display:flex;gap:6px;}
  .star-pick button{background:none;border:0;cursor:pointer;padding:2px;line-height:0;}
  .star-pick svg{width:28px;height:28px;fill:#D8E2EC;transition:fill .12s ease;}
  .star-pick button.on svg{fill:var(--star);}
  .pay-info{background:var(--brand-soft);border:1px solid #CFE7F6;border-radius:12px;padding:18px 20px;margin-top:4px;}
  .pay-info .row{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px dashed #CFE7F6;font-size:14px;}
  .pay-info .row:last-child{border-bottom:0;}
  .pay-info .k{color:var(--ink-2);}
  .pay-info .v{font-weight:600;color:var(--ink);text-align:right;}

  footer{text-align:center;color:var(--ink-2);font-size:13px;padding:56px 0 64px;border-top:1px solid var(--line);background:var(--bg-2);}
  footer .logo{justify-content:center;margin-bottom:14px;}
  footer .logo img{height:28px;}
  @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;}.btn,.card,.nav a{transition:none;}}

  .inst .av{overflow:hidden;padding:0;}
  .inst .av img{width:100%;height:100%;object-fit:cover;display:block;}

/* ======================= dodato: zajednicki dijelovi ======================= */
.drop{position:relative;}
.drop-btn{font-family:'IBM Plex Sans',sans-serif;font-size:14.5px;font-weight:500;color:var(--ink-2);background:none;border:0;padding:8px 14px;border-radius:9px;cursor:pointer;display:flex;align-items:center;gap:6px;}
.drop-btn:hover,.drop.open .drop-btn{color:var(--brand-deep);background:var(--brand-soft);}
.drop-menu{display:none;position:absolute;top:calc(100% + 8px);left:0;min-width:260px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow-lg);padding:6px;z-index:60;}
.drop.open .drop-menu{display:block;}
.drop-menu a{display:block;padding:11px 14px;border-radius:8px;font-size:14px;color:var(--ink-2);line-height:1.35;}
.drop-menu a b{display:block;color:var(--ink);font-weight:600;font-size:14.5px;}
.drop-menu a:hover{background:var(--brand-soft);}
.drop-menu a:hover b{color:var(--brand-deep);}
@media(max-width:900px){
  .drop{width:100%;}
  .drop-btn{display:none;}
  .drop-menu{display:block;position:static;border:0;box-shadow:none;padding:0;min-width:0;}
  .drop-menu a{padding:9px 14px;}
  .drop-menu a b{display:inline;}
  .drop-menu a b::after{content:' · ';font-weight:400;color:var(--ink-2);}
}
.kcard.off{opacity:1;}
.kcard.off h3,.kcard.off p,.kcard.off .meta{opacity:.72;}
.kcard.off .meta a{opacity:1;}
.price-sub a,.kcard .meta a{color:var(--brand-deep);text-decoration:underline;text-underline-offset:2px;font-weight:600;}
.price-row{display:flex;align-items:baseline;justify-content:center;gap:12px;flex-wrap:nowrap;}
.price-old{font-family:'Sora',sans-serif;font-weight:700;font-size:26px;color:var(--ink-2);text-decoration:line-through;text-decoration-thickness:2px;opacity:.75;}
.price-now{font-family:'Sora',sans-serif;font-weight:800;font-size:40px;color:var(--brand-deep);line-height:1;}
.price-card .price-row{margin-bottom:4px;}
.price-card .price-old{font-size:24px;}
.price-card .price-now{font-size:56px;color:var(--ink);}
@media(max-width:420px){.price-row{gap:10px;}.price-old{font-size:22px;}.price-now{font-size:34px;}.price-card .price-old{font-size:21px;}.price-card .price-now{font-size:44px;}}
.save{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:#1E7A4E;background:#E7F6EE;border:1px solid #BFE6CF;border-radius:999px;padding:6px 13px;}
.terms{max-width:720px;margin:0 auto;display:grid;gap:10px;}
.term{display:flex;gap:18px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 20px;box-shadow:var(--shadow);}
.term .n{font-family:'Sora',sans-serif;font-weight:800;font-size:14px;color:var(--brand);min-width:30px;padding-top:2px;letter-spacing:.04em;}
.term .t{font-size:15.5px;color:var(--ink);font-weight:500;line-height:1.45;}
.term.extra{background:var(--bg-2);border-style:dashed;box-shadow:none;}
.term.extra .t{color:var(--ink-2);font-weight:400;}
.soon{max-width:720px;margin:0 auto;text-align:center;background:#fff;border:1px dashed var(--line);border-radius:var(--r);padding:40px 26px;box-shadow:var(--shadow);}
.soon .big{font-family:'Sora',sans-serif;font-weight:800;font-size:clamp(20px,3vw,26px);color:var(--ink);}
.soon p{color:var(--ink-2);font-size:14.5px;margin-top:10px;}
footer .links{display:flex;gap:18px;justify-content:center;flex-wrap:wrap;margin-top:12px;font-size:14px;}
footer .links a{color:var(--brand-deep);font-weight:500;}
footer .links a:hover{text-decoration:underline;}
/* kartice kurseva na pocetnoj */
.kstat{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;padding:5px 11px;border-radius:999px;margin-bottom:12px;}
.kstat.live{color:var(--brand-deep);background:var(--brand-soft);border:1px solid #CFE7F6;}
.kstat.ready{color:#1E7A4E;background:#E7F6EE;border:1px solid #BFE6CF;}
.kstat.soon{color:var(--ink-2);background:var(--bg-2);border:1px solid var(--line);}
.kcard{display:flex;flex-direction:column;}
.kcard .meta{color:var(--ink-2);font-size:13.5px;margin-top:10px;}
.kcard .go{margin-top:auto;padding-top:18px;}
.kcard .go span{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14.5px;color:var(--brand-deep);border:1.5px solid var(--brand);background:var(--brand-soft);border-radius:999px;padding:9px 18px;transition:background .15s,color .15s;}
.kcard:hover .go span,.kcard:focus-visible .go span{background:var(--brand);color:#fff;}
.kcard.off{opacity:.72;box-shadow:none;}
.kcard.off:hover{transform:none;box-shadow:none;border-color:var(--line);}
/* istaknuta kartica aktuelnog kursa */
.featured{background:#fff;border:2px solid var(--brand);border-radius:var(--r);padding:34px 30px;box-shadow:var(--shadow-lg);max-width:720px;margin:0 auto;}
.featured h3{font-size:clamp(20px,2.6vw,26px);margin-bottom:6px;}
.featured .lead{color:var(--ink-2);font-size:15px;}
.featured ul{list-style:none;margin:20px 0;display:grid;gap:10px;}
.featured ul li{position:relative;padding-left:28px;font-size:15px;color:var(--ink);}
.featured ul li:before{content:"✓";position:absolute;left:0;color:var(--brand);font-weight:700;}
.featured .btn{width:100%;justify-content:center;}
/* tim */
.tim{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px;}
.tim .card{display:flex;gap:18px;align-items:flex-start;}
.tim .av{width:72px;height:72px;border-radius:50%;overflow:hidden;flex-shrink:0;border:1px solid #CFE7F6;}
.tim .av img{width:100%;height:100%;object-fit:cover;display:block;}
.tim .role{font-size:11.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--brand-deep);margin:2px 0 8px;}
/* forma za upit */
.upit-form{max-width:620px;margin:0 auto;display:grid;gap:4px;}
.upit-form .btn{width:100%;justify-content:center;margin-top:10px;}
.upit-form textarea{min-height:120px;}
/* hero video na pocetnoj */
.hero-video{max-width:720px;margin:30px auto 0;}
.hero-video .cap{color:var(--ink-2);font-size:13.5px;margin-top:10px;text-align:center;}

/* Cetiri kartice: 2+2 umjesto 3+1, jer cetiri u red ne stanu u sirinu sadrzaja. */
@media(min-width:640px){.grid.g4{grid-template-columns:repeat(2,1fr);}}
/* Na telefonu sekcije stoje blize jedna drugoj. */
@media(max-width:700px){.sec{padding:40px 0;}.sec-head{margin-bottom:26px;}}

/* Stranica Elektrostatike nosi tirkiznu boju, da se na prvi pogled razlikuje
   od Elektromagnetizma. Mijenjaju se samo cetiri promjenljive, sve ostalo prati. */
.tema-tirkiz{
  --brand:#14A294; --brand-deep:#0B7A6E; --brand-soft:#E6F7F4; --brand-glow:#7FDCD0;
}

/* Dugme "Upisi se" blago zatreperi kad se otvori stranica kursa, tri puta pa stane. */
@keyframes puls{
  0%{box-shadow:0 0 0 0 var(--brand-glow);}
  70%{box-shadow:0 0 0 16px rgba(0,0,0,0);}
  100%{box-shadow:0 0 0 0 rgba(0,0,0,0);}
}
.puls{animation:puls 1.6s ease-out .7s 3;}
@media(prefers-reduced-motion:reduce){.puls{animation:none;}}

/* Poruka "nemas da platis, javi se": topla zlatna boja, da se ne pomijesa
   ni sa plavom/tirkiznom bojom kursa ni sa narandzastim rokom cijene. */
.besplatno{display:flex;gap:14px;align-items:flex-start;max-width:560px;margin:24px auto 0;
  background:#FFF7E3;border:1.5px solid #F2B01E;border-radius:16px;padding:18px 20px;text-align:left;}
.besplatno .ik{font-size:24px;line-height:1.2;flex:none;}
.besplatno .bn-n{font-family:'Sora',sans-serif;font-weight:700;font-size:17px;color:#7A4E00;margin:0 0 3px;}
.besplatno .bn-t{margin:0;color:var(--ink);font-size:14.5px;line-height:1.5;}
.besplatno a{display:inline-block;margin-top:10px;font-weight:700;font-size:14px;color:#3D2A00;
  background:#F2B01E;border-radius:999px;padding:8px 16px;text-decoration:none;}
.besplatno a:hover,.besplatno a:focus-visible{background:#E0A10F;}
.featured .besplatno{max-width:none;margin-top:18px;}

/* Interaktivni prikaz gustine naelektrisanja (/gustina/) */
.gu-m{font-family:"STIX Two Text",Georgia,"Times New Roman",serif;font-size:1.08em;}
.gu-m i{font-style:italic;}
.gu-hero{padding-bottom:6px;}
.gu-sec{padding-top:28px;}
.gu-tabs{display:flex;gap:4px;background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:5px;max-width:560px;margin:0 auto 22px;}
.gu-tabs button{flex:1;border:0;background:transparent;border-radius:999px;padding:10px 6px;font:600 14px 'IBM Plex Sans',sans-serif;color:var(--ink-2);cursor:pointer;white-space:nowrap;}
.gu-tabs button .gu-m{font-size:18px;margin-right:2px;}
.gu-tabs button[aria-pressed="true"]{background:var(--brand);color:#fff;}
.gu-tabs button:focus-visible{outline:2px solid var(--brand-deep);outline-offset:2px;}
.gu-panel{display:grid;gap:20px;grid-template-columns:1fr;}
@media(min-width:900px){.gu-panel{grid-template-columns:1.2fr 1fr;align-items:start;}}
.gu-fig{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px;box-shadow:var(--shadow);}
.gu-fig svg{display:block;width:100%;height:auto;}
.gu-ctrl{display:grid;gap:12px;margin-top:16px;}
.gu-ctrl label{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:14px;color:var(--ink-2);font-weight:600;}
.gu-ctrl output{font-family:"STIX Two Text",Georgia,serif;font-size:17px;color:var(--ink);font-weight:400;white-space:nowrap;}
.gu-ctrl input[type=range]{width:100%;accent-color:var(--brand);height:30px;margin:0;}
.gu-rez{background:var(--brand-soft);border:1px solid var(--line);border-radius:14px;padding:16px 18px;font-size:16px;line-height:1.8;}
.gu-rez b{color:var(--brand-deep);font-size:20px;}
.gu-info{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;}
.gu-info h2{font-size:20px;margin:0 0 6px;}
.gu-info p{color:var(--ink-2);margin:0 0 14px;font-size:15px;}
.gu-info dl{display:grid;grid-template-columns:max-content 1fr;gap:9px 16px;margin:0;}
.gu-info dt{color:var(--ink-2);font-size:13px;font-weight:600;padding-top:3px;}
.gu-info dd{margin:0;font-size:15px;}
.gu-svg-t{font:600 15px 'IBM Plex Sans',sans-serif;fill:var(--ink-2);}
.gu-svg-m{font:24px "STIX Two Text",Georgia,serif;fill:var(--ink);}
.gu-tijelo{fill:var(--brand-soft);stroke:var(--brand);stroke-width:2;}
.gu-lopta{fill:var(--brand-soft);}
.gu-tacka{fill:var(--brand-deep);}
.gu-komad{fill:rgba(242,176,30,.28);stroke:#E0A10F;stroke-width:2.5;}
.gu-mjera{fill:none;stroke:var(--ink-2);stroke-width:1.5;}
.gu-centar{fill:var(--ink);}
.gu-tabela-omot{overflow-x:auto;}
.gu-tabela{width:100%;min-width:520px;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.gu-tabela th,.gu-tabela td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);}
.gu-tabela thead th{font-size:13px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.06em;}
.gu-tabela tbody th{font-weight:600;}
.gu-tabela tr:last-child th,.gu-tabela tr:last-child td{border-bottom:0;}
.gu-napomena{max-width:720px;margin:18px auto 0;color:var(--ink-2);text-align:center;}
.gu-cta{max-width:720px;margin:0 auto;text-align:center;background:#fff;border:2px solid var(--brand);border-radius:var(--r);padding:30px 24px;box-shadow:var(--shadow-lg);}
.gu-cta h2{margin:6px 0 10px;}
.gu-cta p{color:var(--ink-2);margin:0 0 20px;}
.gu-rezim{display:inline-flex;gap:4px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:4px;margin-bottom:12px;}
.gu-rezim button{border:0;background:transparent;border-radius:7px;padding:7px 14px;font:600 13.5px 'IBM Plex Sans',sans-serif;color:var(--ink-2);cursor:pointer;}
.gu-rezim button[aria-pressed="true"]{background:var(--brand-soft);color:var(--brand-deep);box-shadow:inset 0 0 0 1.5px var(--brand);}
.gu-rez sub,.gu-rez sup,.gu-tabela sub{font-size:.68em;}
.gu-savjet{max-width:720px;margin:22px auto 0;background:#fff;border:1px solid var(--line);border-left:5px solid var(--brand);border-radius:14px;padding:18px 20px;}
.gu-savjet p{margin:0 0 10px;color:var(--ink-2);}
.gu-savjet p:last-child{margin-bottom:0;}
.gu-savjet .gu-savjet-n{font-weight:700;color:var(--brand-deep);margin-bottom:6px;}
.gu-savjet ul{margin:0 0 10px;padding-left:20px;color:var(--ink-2);}
.gu-savjet li{margin:4px 0;}
.gu-halo{paint-order:stroke;stroke:#fff;stroke-width:6px;stroke-linejoin:round;}
.gu-rezim-opis{margin:-4px 0 12px;font-size:13.5px;color:var(--ink-2);line-height:1.5;}
.gu-rezim-opis b{color:var(--ink);}

/* Kondenzatori i Gausov zakon (/kondenzatori/, /gausov-zakon/) */
.gu-linija{stroke:var(--brand-deep);stroke-width:2;opacity:.55;}
.gu-linija-vrh{fill:var(--brand-deep);opacity:.55;}
.gu-polje{stroke:#C47F00;stroke-width:3;}
.gu-polje-vrh{fill:#C47F00;}
.gu-ploca{fill:var(--ink-2);}
.gu-znak{font:700 22px 'IBM Plex Sans',sans-serif;text-anchor:middle;}
.gu-plus{fill:var(--brand-deep);}
.gu-minus{fill:var(--ink-2);}
.gu-zica{fill:none;stroke:var(--ink);stroke-width:3;stroke-linejoin:round;}
.gu-kplate{stroke:var(--brand-deep);stroke-width:7;stroke-linecap:round;}
.gu-cvor{fill:#fff;stroke:var(--ink);stroke-width:3;}
.gu-istak{fill:var(--brand-deep);font-weight:600;}
.gu-gaus{fill:rgba(242,176,30,.10);stroke:#E0A10F;stroke-width:2.5;stroke-dasharray:7 5;}
.gu-gaus-l{fill:none;stroke:#E0A10F;stroke-width:2.5;stroke-dasharray:7 5;}
.gu-stap{stroke:var(--brand);stroke-width:12;stroke-linecap:round;opacity:.5;}
.gu-osa{fill:none;stroke:var(--ink-2);stroke-width:1.6;}
.gu-kriva{fill:none;stroke:var(--brand-deep);stroke-width:3;}
.gu-trag{stroke:#E0A10F;stroke-width:1.6;stroke-dasharray:4 4;}
.gu-tacka-g{fill:#F2B01E;stroke:#fff;stroke-width:2;}
.gu-jos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;max-width:760px;margin:0 auto;}
.gu-jos-k{display:flex;flex-direction:column;}
.gu-jos-k h3{margin:4px 0 6px;}
.gu-jos-k p{color:var(--ink-2);font-size:14.5px;margin:0 0 12px;}
.gu-jos-go{margin-top:auto;font-weight:600;color:var(--brand-deep);}
.term .gu-term-link{font-weight:600;color:var(--brand-deep);white-space:nowrap;margin-left:6px;font-size:.92em;}
/* Potencijal i napon (/potencijal-i-napon/) */
.gu-ekvi{fill:none;stroke:var(--brand);stroke-width:1.6;stroke-dasharray:3 6;opacity:.7;}
.gu-naboj-p{fill:var(--brand-deep);}
.gu-naboj-m{fill:var(--ink-2);}
.gu-naboj-z{fill:#fff;font-size:24px;}
.gu-putanja{fill:none;stroke:var(--ink-2);stroke-width:2;stroke-dasharray:2 6;stroke-linecap:round;}
.gu-zagrada{fill:none;stroke:var(--brand-deep);stroke-width:2.5;}