/* TankAI — skupni slog.
   Izločen iz index.html 6.8.2026 zaradi delitve na 4 strani.
   Uvodni zaslon (.tk-*) NI tu — ostaja vgrajen v vsaki strani kot
   kritični CSS, sicer se do prihoda te datoteke izriše neoblikovan. */
*{box-sizing:border-box;margin:0;padding:0}
/* Osnovna pisava za CELO stran. Brez tega je vse, kar nima svojega font-family, padlo na
   privzeto brskalnikovo serifno pisavo (Times) — npr. če blokirnik oglasov prepreči Google Fonts. */
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:var(--white);color:var(--black);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
:root{
  --green:#16a97a;--green-d:#0d6b4e;--green-pale:#e6f7f1;--green-mid:#b0d9ca;
  --black:#0a0a0a;--white:#f9f9f7;--gray:#6b7280;--gray-light:#f3f3f1;--red:#e24b4a;
  --border:#e8e8e4;--border2:#f0f0ec;--card-bg:#ffffff;--input-bg:#ffffff;--input-border:#e0e0dc;
}
body.dark{
  --black:#f9f9f7;--white:#111210;--gray:#9ca3af;--gray-light:#1c1c1a;
  --green-pale:rgba(22,169,122,.12);--green-mid:rgba(22,169,122,.22);
  --border:#2a2a28;--border2:#222220;--card-bg:#1a1a18;--input-bg:#1c1c1a;--input-border:#333330;
}
body.dark .ev-card{background:var(--card-bg);border-color:var(--border)}
body.dark .calc-field input,body.dark .calc-field select{background:var(--input-bg);border-color:var(--input-border);color:var(--black)}
body.dark nav.scrolled{background:rgba(17,18,16,.97)}
body.dark nav.scrolled .nav-logo{color:var(--black)}
body.dark nav.scrolled .nav-links a{color:var(--gray)}
body.dark nav.scrolled .hamburger span{background:var(--black)}
body.dark .mobile-menu{background:var(--white);border-color:var(--border)}
body.dark .mobile-menu a{color:var(--black);border-color:var(--border2)}

/* THEME TOGGLE */
.theme-toggle{background:none;border:1px solid rgba(255,255,255,.18);color:rgba(255,255,255,.6);border-radius:99px;padding:5px 10px;font-size:14px;cursor:pointer;transition:all .2s;line-height:1;flex-shrink:0}
nav.scrolled .theme-toggle,.mobile-menu .theme-toggle{border-color:#e0e0dc;color:#888}
.theme-toggle:hover{color:white;border-color:rgba(255,255,255,.4)}
nav.scrolled .theme-toggle:hover,.mobile-menu .theme-toggle:hover{color:var(--black);border-color:#aaa}

/* SCROLL TO TOP */
.scroll-top{position:fixed;bottom:6rem;right:1.5rem;width:40px;height:40px;border-radius:50%;background:#0a0a0a;color:white;border:none;font-size:16px;cursor:pointer;z-index:997;opacity:0;transform:translateY(8px);transition:all .3s;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.scroll-top.show{opacity:1;transform:translateY(0)}
.scroll-top:hover{background:var(--green);transform:translateY(-2px)}

/* NAV */
nav{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 2rem;position:fixed;top:0;left:0;right:0;z-index:200;transition:background .3s,border-color .3s}
nav.scrolled{background:rgba(249,249,247,.97);backdrop-filter:blur(12px);border-bottom:1px solid #e8e8e4}
.nav-logo{font-family:'Inter',sans-serif;font-weight:800;font-size:20px;color:white;letter-spacing:-.5px;text-decoration:none;transition:color .3s}
nav.scrolled .nav-logo{color:var(--black)}
.nav-logo span{color:#1aff8c;transition:color .3s}
nav.scrolled .nav-logo span{color:var(--green)}
.nav-links{display:flex;align-items:center;gap:1.75rem}
.nav-links a{font-size:13px;color:rgba(255,255,255,.65);text-decoration:none;transition:color .2s}
nav.scrolled .nav-links a{color:var(--gray)}
.nav-links a:hover{color:white}
nav.scrolled .nav-links a:hover{color:var(--black)}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;padding:4px}
.hamburger span{display:block;width:22px;height:2px;background:white;border-radius:2px;transition:all .3s}
nav.scrolled .hamburger span{background:var(--black)}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;flex-direction:column;background:var(--white);border-bottom:1px solid #e8e8e4;position:fixed;top:58px;left:0;right:0;z-index:199}
.mobile-menu.open{display:flex}
.mobile-menu a{padding:1rem 2rem;font-size:15px;color:var(--black);text-decoration:none;border-bottom:1px solid #f0f0ec}

/* HERO */
.hero{background:#0b1a14;background-image:radial-gradient(ellipse 90% 60% at 50% -5%, rgba(22,169,122,.28) 0%, transparent 65%);padding:9rem 2rem 4rem;text-align:center;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;background-image:radial-gradient(circle, rgba(255,255,255,.035) 1px, transparent 1px);background-size:40px 40px;pointer-events:none}
.hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(22,169,122,.15);color:#4dd8a5;padding:5px 14px;border-radius:99px;font-size:12px;font-weight:500;margin-bottom:1.75rem;border:1px solid rgba(22,169,122,.28)}
.hero-badge-dot{width:6px;height:6px;border-radius:50%;background:#1aff8c;animation:pulse 2s infinite;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(1.3)}}
h1{font-family:'Inter',sans-serif;font-size:clamp(2.8rem,7vw,4.8rem);font-weight:800;line-height:1.02;letter-spacing:-2px;margin-bottom:1.25rem;color:white}
h1 em{font-style:italic;color:#1aff8c}
.hero-sub{font-size:1.1rem;color:rgba(255,255,255,.55);line-height:1.7;max-width:480px;margin:0 auto 2.5rem;font-weight:300}
.hero-actions{display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap;margin-bottom:.75rem}
.btn-main{background:var(--green);color:white;padding:14px 30px;border-radius:99px;font-size:15px;font-weight:600;text-decoration:none;border:none;cursor:pointer;transition:background .2s,transform .1s;display:inline-block;font-family:'Inter',sans-serif}
.btn-main:hover{background:#1dbf8a;transform:translateY(-1px)}
.btn-sec{background:rgba(255,255,255,.08);color:rgba(255,255,255,.8);padding:14px 24px;border-radius:99px;font-size:15px;font-weight:400;border:1px solid rgba(255,255,255,.14);cursor:pointer;text-decoration:none;transition:all .2s;display:inline-block}
.btn-sec:hover{background:rgba(255,255,255,.14);color:white}
.hero-note{font-size:12px;color:rgba(255,255,255,.3);margin-bottom:3rem}

/* HERO PRICE CARDS — SLO MAIN */
.hero-prices{display:block;max-width:760px;margin:0 auto}
.hp-main{background:rgba(255,255,255,.06);border:1px solid rgba(26,255,140,.25);border-radius:24px;padding:2rem 2.25rem;text-align:left;backdrop-filter:blur(10px)}
.hp-main-header{display:flex;align-items:center;gap:14px;margin-bottom:1.25rem;padding-bottom:1.1rem;border-bottom:1px solid rgba(255,255,255,.08)}
.hp-main-flag{font-size:34px;line-height:1}
.hp-main-country{font-family:'Inter',sans-serif;font-size:1.35rem;font-weight:800;color:white;letter-spacing:-.5px;line-height:1.1}
.hp-main-sub{font-size:11px;color:rgba(26,255,140,.65);text-transform:uppercase;letter-spacing:.1em;font-weight:600;margin-top:3px}
.hp-main-fuels{display:flex;flex-direction:column;gap:.75rem}
.hp-main-fuel{display:flex;justify-content:space-between;align-items:baseline}
.hp-main-fuel-label{font-size:14px;color:rgba(255,255,255,.55);font-weight:400}
.hp-main-fuel-right{display:flex;align-items:baseline;gap:8px}
.hp-main-fuel-price{font-family:'Inter',sans-serif;font-size:1.6rem;font-weight:800;color:white;letter-spacing:-.5px}
.hp-compare-label{text-align:center;color:rgba(255,255,255,.4);font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:600;margin:1.75rem 0 .9rem}
.hp-compare-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:520px){.hp-compare-grid{grid-template-columns:repeat(2,1fr)}}
.hp-mini{background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.07);border-radius:14px;padding:.85rem .75rem;text-align:center;transition:background .2s}
.hp-mini:hover{background:rgba(255,255,255,.075)}
.hp-mini-flag{font-size:20px;margin-bottom:.35rem;line-height:1}
.hp-mini-country{font-size:10px;color:rgba(255,255,255,.45);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:.45rem}
.hp-mini-price{font-family:'Inter',sans-serif;font-size:.98rem;font-weight:700;color:rgba(255,255,255,.85);margin-bottom:.25rem;letter-spacing:-.3px}
.hp-mini-diff{font-size:11px;font-weight:700}
.hp-mini-diff.cheaper{color:#4dd8a5}
.hp-mini-diff.more{color:#f87171}
.hp-mini-diff.same{color:rgba(255,255,255,.3)}
.hp-compare-toggle{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;margin-top:1.6rem;padding:.85rem 1rem;background:rgba(255,255,255,.05);border:1px solid rgba(26,255,140,.22);border-radius:14px;color:rgba(255,255,255,.85);font-family:'Inter',sans-serif;font-size:13px;font-weight:600;letter-spacing:.02em;cursor:pointer;transition:background .2s,border-color .2s}
.hp-compare-toggle:hover{background:rgba(255,255,255,.09);border-color:rgba(26,255,140,.4)}
.hp-compare-toggle-arrow{font-size:11px;color:#1aff8c;transition:transform .25s}
.hp-compare-toggle.open .hp-compare-toggle-arrow{transform:rotate(180deg)}
.hp-compare-wrap[hidden]{display:none}
.hp-compare-wrap{animation:hpFade .3s ease}
@keyframes hpFade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* Oznaka ob LPG: pošteno pove, da cena avtoplina ni regulirana (za razliko od B95/dizla). */
.hp-neregulirano{font-size:9.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.14);border-radius:99px;padding:2px 7px;margin-left:7px;white-space:nowrap;vertical-align:middle}
.hp-trend{font-size:10px;font-weight:700;margin-left:6px}
.hp-trend.up{color:#f87171}
.hp-trend.dn{color:#4dd8a5}
.hp-trend.flat{color:rgba(255,255,255,.25)}

/* SHARE ROW */
.share-row{display:flex;justify-content:center;gap:8px;margin-top:1.5rem}
.share-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:99px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);color:rgba(255,255,255,.75);font-size:12px;font-weight:500;cursor:pointer;font-family:'Inter',sans-serif;transition:all .2s;white-space:nowrap}
.share-btn:hover{background:rgba(255,255,255,.14);color:white}

/* TOAST */
.toast{position:fixed;bottom:5rem;left:50%;transform:translateX(-50%) translateY(12px);background:#0a0a0a;color:white;padding:10px 22px;border-radius:99px;font-size:13px;font-weight:500;z-index:2000;opacity:0;transition:all .3s;pointer-events:none;font-family:'Inter',sans-serif;white-space:nowrap;border:1px solid #222}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* PRICE STRIP */
.price-strip{background:#070707;color:white;padding:.85rem 0;overflow:hidden;border-bottom:1px solid #111}
.price-strip-inner{display:flex;gap:3rem;animation:marquee 30s linear infinite;width:max-content}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.price-item{display:flex;align-items:center;gap:8px;white-space:nowrap;padding:0 .5rem}
.price-flag{font-size:13px}
.price-label{font-size:11px;color:#444}
.price-val{font-size:13px;font-weight:600;font-family:'Inter',sans-serif}
.price-val.cheap{color:#4ade80}.price-val.mid{color:#fbbf24}.price-val.exp{color:#f87171}
.price-sep{color:#1a1a1a;font-size:16px;flex-shrink:0}

/* EYEBROW */
.eyebrow{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-family:'Inter',sans-serif;color:var(--green);margin-bottom:.65rem}

/* TANK CALCULATOR */
.calc{padding:5.5rem 2rem}
.calc-inner{max-width:720px;margin:0 auto}
.calc-inner h2{font-family:'Inter',sans-serif;font-size:clamp(1.9rem,4vw,2.7rem);font-weight:800;letter-spacing:-1.5px;margin-bottom:.5rem;line-height:1.08}
.calc-inner>p{color:var(--gray);font-size:.95rem;margin-bottom:2.5rem;font-weight:300;line-height:1.65}
.calc-row{display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:2rem;align-items:flex-end}
.calc-field{display:flex;flex-direction:column;gap:6px}
.calc-field label{font-size:11px;color:var(--gray);font-weight:600;text-transform:uppercase;letter-spacing:.07em}
.calc-field input,.calc-field select{padding:11px 18px;border-radius:14px;border:1.5px solid #e0e0dc;font-size:15px;font-family:'Inter',sans-serif;background:white;color:var(--black);outline:none;transition:border-color .2s;min-width:140px}
.calc-field input:focus,.calc-field select:focus{border-color:var(--green)}
/* CALC RESULTS — SLO MAIN */
.calc-results{display:block}
.calc-main{background:white;border:2px solid var(--green);border-radius:24px;padding:2rem 2.25rem;box-shadow:0 8px 32px rgba(22,169,122,.1);margin-top:.5rem}
.calc-main-head{display:flex;align-items:center;gap:14px;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid #f0f0ec}
.calc-main-flag{font-size:36px;line-height:1}
.calc-main-label{font-size:11px;color:var(--green);text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:3px}
.calc-main-country{font-family:'Inter',sans-serif;font-size:1.35rem;font-weight:800;color:var(--black);letter-spacing:-.5px}
.calc-main-cost{font-family:'Inter',sans-serif;font-size:3rem;font-weight:800;color:var(--black);letter-spacing:-1.5px;line-height:1}
.calc-main-sub{font-size:13px;color:var(--gray);margin-top:.4rem}
.calc-compare-label{text-align:center;color:var(--gray);font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:600;margin:1.5rem 0 .75rem}
.calc-compare-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:760px){.calc-compare-grid{grid-template-columns:repeat(2,1fr)}}
.calc-mini{background:var(--gray-light);border:1px solid var(--border);border-radius:14px;padding:.9rem .85rem;text-align:center;transition:transform .15s}
.calc-mini:hover{transform:translateY(-2px)}
.calc-mini.cheaper{background:rgba(22,169,122,.08);border-color:rgba(22,169,122,.25)}
.calc-mini-flag{font-size:22px;margin-bottom:.4rem;line-height:1}
.calc-mini-country{font-size:10px;color:var(--gray);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:.45rem}
.calc-mini-cost{font-family:'Inter',sans-serif;font-size:1.1rem;font-weight:700;color:var(--black);letter-spacing:-.3px;margin-bottom:.25rem}
.calc-mini-diff{font-size:11px;font-weight:700}
.calc-mini-diff.cheaper{color:var(--green)}
.calc-mini-diff.more{color:var(--red)}
.calc-mini-diff.same{color:var(--gray)}
.calc-opomba{margin-top:14px;font-size:12.5px;line-height:1.6;color:var(--gray);background:var(--gray-light);border:1px solid var(--border);border-radius:12px;padding:.8rem 1rem}
.calc-opomba strong{color:var(--black);font-weight:600}
body.dark .calc-main{background:var(--card-bg);border-color:var(--green)}
body.dark .calc-mini{background:var(--card-bg);border-color:var(--border)}

/* MONTHLY COST CALCULATOR */
.monthly{padding:5.5rem 2rem;background:var(--gray-light);border-top:1px solid #e8e8e4}
.monthly-inner{max-width:720px;margin:0 auto}
.monthly-inner h2{font-family:'Inter',sans-serif;font-size:clamp(1.9rem,4vw,2.7rem);font-weight:800;letter-spacing:-1.5px;margin-bottom:.5rem;line-height:1.08}
.monthly-inner>p{color:var(--gray);font-size:.95rem;margin-bottom:2.5rem;font-weight:300;line-height:1.65}
/* MONTHLY RESULTS — SLO MAIN */
.monthly-results{display:block;margin-top:2rem}
.month-main{background:white;border:2px solid var(--green);border-radius:24px;padding:2rem 2.25rem;box-shadow:0 8px 32px rgba(22,169,122,.1)}
.month-main-head{display:flex;align-items:center;gap:14px;margin-bottom:1.25rem;padding-bottom:1rem;border-bottom:1px solid #f0f0ec}
.month-main-flag{font-size:36px;line-height:1}
.month-main-label{font-size:11px;color:var(--green);text-transform:uppercase;letter-spacing:.1em;font-weight:700;margin-bottom:3px}
.month-main-country{font-family:'Inter',sans-serif;font-size:1.35rem;font-weight:800;color:var(--black);letter-spacing:-.5px}
.month-main-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
@media(max-width:500px){.month-main-grid{grid-template-columns:1fr;gap:.75rem}}
.month-main-cell{text-align:left}
.month-main-cell-label{font-size:12px;color:var(--gray);font-weight:500;margin-bottom:.3rem;text-transform:uppercase;letter-spacing:.05em}
.month-main-cell-val{font-family:'Inter',sans-serif;font-size:2.4rem;font-weight:800;color:var(--black);letter-spacing:-1.2px;line-height:1}
.month-compare-label{text-align:center;color:var(--gray);font-size:11px;text-transform:uppercase;letter-spacing:.12em;font-weight:600;margin:1.5rem 0 .75rem}
.month-compare-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
@media(max-width:760px){.month-compare-grid{grid-template-columns:repeat(2,1fr)}}
.month-mini{background:var(--gray-light);border:1px solid var(--border);border-radius:14px;padding:1rem .85rem;text-align:center}
.month-mini.cheaper{background:rgba(22,169,122,.08);border-color:rgba(22,169,122,.25)}
.month-mini-flag{font-size:20px;margin-bottom:.35rem;line-height:1}
.month-mini-country{font-size:10px;color:var(--gray);text-transform:uppercase;letter-spacing:.08em;font-weight:600;margin-bottom:.5rem}
.month-mini-yearly{font-family:'Inter',sans-serif;font-size:1.1rem;font-weight:700;color:var(--black);letter-spacing:-.3px;margin-bottom:.2rem}
.month-mini-sub{font-size:11px;color:var(--gray);margin-bottom:.3rem}
.month-mini-diff{font-size:11px;font-weight:700}
.month-mini-diff.cheaper{color:var(--green)}
.month-mini-diff.more{color:var(--red)}
.month-mini-diff.same{color:var(--gray)}
body.dark .month-main{background:var(--card-bg);border-color:var(--green)}
body.dark .month-mini{background:var(--card-bg);border-color:var(--border)}

/* NEWS */
.novice{padding:5.5rem 2rem;background:var(--white);border-top:1px solid #eeeeec}
.novice-inner{max-width:860px;margin:0 auto}
.novice-inner h2{font-family:'Inter',sans-serif;font-size:clamp(1.9rem,4vw,2.7rem);font-weight:800;letter-spacing:-1.5px;margin-bottom:.5rem;line-height:1.08}
.novice-inner>p{color:var(--gray);font-size:.95rem;margin-bottom:2rem;font-weight:300;line-height:1.65}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:1.5rem}
@media(max-width:760px){.news-grid{grid-template-columns:1fr}}
.news-card{display:block;background:var(--gray-light);border-radius:18px;padding:1.25rem 1.4rem;border:1.5px solid #e8e8e4;text-decoration:none;transition:transform .2s,box-shadow .2s}
.news-card:hover{transform:translateY(-3px);box-shadow:0 8px 28px rgba(0,0,0,.07)}
.news-source-badge{display:inline-block;font-size:10px;font-weight:700;color:var(--green);background:var(--green-pale);padding:2px 8px;border-radius:99px;margin-bottom:.65rem;font-family:'Inter',sans-serif;text-transform:uppercase;letter-spacing:.04em;border:1px solid var(--green-mid)}
.news-title{font-size:14px;font-weight:600;color:var(--black);line-height:1.5;margin-bottom:.5rem;font-family:'Inter',sans-serif}
.news-date{font-size:11px;color:var(--gray)}
.news-empty{text-align:center;color:var(--gray);padding:2.5rem;grid-column:1/-1;font-size:14px}
.news-footer-note{text-align:center;font-size:11px;color:var(--gray);margin-top:1.5rem}
body.dark .news-card{background:var(--card-bg);border-color:var(--border)}
body.dark .news-card:hover{box-shadow:0 8px 28px rgba(0,0,0,.3)}

/* CHART */
.chart-section{padding:5.5rem 2rem;background:var(--gray-light);border-top:1px solid #e8e8e4}
.chart-inner{max-width:860px;margin:0 auto}
.chart-header{display:flex;align-items:flex-start;justify-content:space-between;flex-wrap:wrap;gap:1rem;margin-bottom:1.5rem}
.chart-eyebrow{font-size:11px;color:var(--gray);text-transform:uppercase;letter-spacing:.1em;margin-bottom:.4rem}
.chart-header h2{font-family:'Inter',sans-serif;font-size:clamp(1.3rem,3vw,1.8rem);font-weight:700;letter-spacing:-.5px}
.chart-ranges{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.range-btn{padding:6px 14px;border-radius:99px;font-size:12px;font-weight:600;font-family:'Inter',sans-serif;cursor:pointer;border:1.5px solid #d0d0cc;background:none;color:var(--gray);transition:all .2s}
/* color:var(--white) (ne trdo "white"): v temni temi je --black svetel, zato bi belo besedilo izginilo. */
.range-btn.active{background:var(--black);color:var(--white);border-color:var(--black)}
body.dark .range-btn{border-color:var(--input-border)}
.range-btn:hover:not(.active){border-color:var(--black);color:var(--black)}
.chart-toolbar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:1rem}
.chart-chips{display:flex;gap:6px;flex-wrap:wrap}
.chart-legend{display:flex;gap:1.5rem;margin-bottom:1rem;flex-wrap:wrap}
.legend-item{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--gray)}
.legend-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.chart-wrap{position:relative;height:300px}
.chart-stats{display:flex;flex-direction:column;gap:8px;margin-top:1.1rem}
.chart-stats-row{display:grid;grid-template-columns:auto repeat(4,1fr);gap:8px;align-items:stretch}
.chart-stat-label{display:flex;align-items:center;font-size:12px;font-weight:700;font-family:'Inter',sans-serif;color:var(--black);padding:0 10px;min-width:64px}
.chart-stat{background:var(--card-bg);border:1px solid var(--border);border-radius:12px;padding:8px 12px;text-align:center}
.chart-stat-k{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--gray);margin-bottom:2px}
.chart-stat-v{font-size:14px;font-weight:700;font-family:'Inter',sans-serif;color:var(--black)}
.chart-stat-v.up{color:var(--red)}
.chart-stat-v.down{color:var(--green)}
@media(max-width:600px){.chart-stats-row{grid-template-columns:repeat(2,1fr)}.chart-stat-label{grid-column:1/-1;padding:4px 2px 0;min-width:0}}
.chart-source{font-size:11px;color:var(--gray);margin-top:.75rem;text-align:right}
.chart-source a{color:var(--gray);text-decoration:underline;text-underline-offset:2px;transition:color .2s}
.chart-source a:hover{color:var(--black)}

/* Vsebinske sekcije (razlaga cene + nasveti) — SEO/PREPOZNAVNOST + AdSense */
.info{padding:5.5rem 2rem;background:var(--white);border-top:1px solid #eeeeec}
.info-inner{max-width:860px;margin:0 auto}
.info-inner>h2{font-family:'Inter',sans-serif;font-size:clamp(1.9rem,4vw,2.7rem);font-weight:800;letter-spacing:-1.5px;margin-bottom:.5rem;line-height:1.08}
.info-inner>.info-sub{color:var(--gray);font-size:.95rem;margin-bottom:2.4rem;font-weight:300;line-height:1.65;max-width:620px}
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.info-card{background:var(--card-bg);border:1px solid var(--border);border-radius:16px;padding:1.5rem}
.info-card .ic{font-size:1.5rem;margin-bottom:.6rem;display:block;line-height:1}
.info-card h3{font-family:'Inter',sans-serif;font-size:1.02rem;font-weight:700;margin-bottom:.4rem;color:var(--black);letter-spacing:-.3px}
.info-card p{font-size:13.5px;color:var(--gray);line-height:1.65;font-weight:300}
.info-note{margin-top:16px;font-size:13px;color:var(--gray);font-weight:300;line-height:1.6;padding:.95rem 1.15rem;background:var(--green-pale);border-radius:12px}
.info-note strong{color:var(--black);font-weight:600}
.tips{display:flex;flex-direction:column;gap:10px}
.tip{display:flex;gap:14px;align-items:flex-start;background:var(--card-bg);border:1px solid var(--border);border-radius:14px;padding:1.1rem 1.25rem}
.tip .te{font-size:1.35rem;flex-shrink:0;line-height:1.3}
.tip-b h3{font-family:'Inter',sans-serif;font-size:.98rem;font-weight:700;margin-bottom:.25rem;color:var(--black);letter-spacing:-.3px}
.tip-b p{font-size:13.5px;color:var(--gray);line-height:1.6;font-weight:300}
@media(max-width:640px){.info-grid{grid-template-columns:1fr}}
.faq{padding:5.5rem 2rem;background:var(--white)}
.faq-inner{max-width:760px;margin:0 auto}
.faq-header{text-align:center;margin-bottom:2.5rem}
.faq-header h2{font-family:'Inter',sans-serif;font-size:clamp(1.9rem,4vw,2.7rem);font-weight:800;letter-spacing:-1.5px}
.faq-item{background:var(--card-bg);border:1px solid var(--border);border-radius:14px;margin-bottom:10px;overflow:hidden}
.faq-item summary{cursor:pointer;padding:1rem 1.25rem;font-family:'Inter',sans-serif;font-weight:600;font-size:14.5px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;color:var(--black)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:18px;color:var(--green);font-weight:700;flex-shrink:0;transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:hover{color:var(--green)}
.faq-a{padding:0 1.25rem 1.1rem;font-size:13.5px;color:var(--gray);line-height:1.7;font-weight:300}
.faq-a a{color:var(--green)}

/* FOOTER */
footer{background:#060606;color:white;padding:2rem}
.footer-inner{max-width:900px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem}
.footer-logo{font-family:'Inter',sans-serif;font-weight:800;font-size:18px}
.footer-logo span{color:#1aff8c}
.footer-sub{font-size:11px;color:#9ca3af;margin-top:3px}
.footer-links{display:flex;gap:1.5rem}
.footer-links a{font-size:12px;color:#9ca3af;text-decoration:none;transition:color .2s}
.footer-links a:hover{color:white}

/* SCROLL ANIMATIONS */
.anim{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease}
.anim.in{opacity:1;transform:translateY(0)}
:target .anim{opacity:1;transform:none}
.anim.d1{transition-delay:.08s}.anim.d2{transition-delay:.16s}.anim.d3{transition-delay:.24s}
.anim.d4{transition-delay:.32s}.anim.d5{transition-delay:.40s}.anim.d6{transition-delay:.48s}
.fade-up{opacity:0;transform:translateY(20px);animation:fadeUp .65s ease forwards}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}
.d1{animation-delay:.1s}.d2{animation-delay:.2s}.d3{animation-delay:.3s}
.d4{animation-delay:.4s}.d5{animation-delay:.5s}.d6{animation-delay:.6s}

/* EV COMPARISON */
.ev-compare{padding:5.5rem 2rem;background:var(--gray-light);border-top:1px solid #e8e8e4}
.ev-compare-inner{max-width:720px;margin:0 auto}
.ev-compare-inner h2{font-family:'Inter',sans-serif;font-size:clamp(1.9rem,4vw,2.7rem);font-weight:800;letter-spacing:-1.5px;margin-bottom:.5rem;line-height:1.08}
.ev-compare-inner>p{color:var(--gray);font-size:.95rem;margin-bottom:2.5rem;font-weight:300;line-height:1.65}
.ev-results{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:2rem}
@media(max-width:480px){.ev-results{grid-template-columns:repeat(2,1fr)}}
.ev-card{background:white;border-radius:18px;padding:1.25rem 1rem;border:1.5px solid #e8e8e4;text-align:center;transition:transform .2s}
.ev-card:hover{transform:translateY(-2px)}
.ev-card.ev-winner{border-color:var(--green);box-shadow:0 0 0 4px rgba(22,169,122,.08)}
.ev-card-icon{font-size:20px;margin-bottom:.4rem}
.ev-card-label{font-size:10px;color:var(--gray);text-transform:uppercase;letter-spacing:.07em;margin-bottom:.4rem;font-weight:600}
.ev-card-cost{font-family:'Inter',sans-serif;font-size:1.25rem;font-weight:800;letter-spacing:-.5px;color:var(--black)}
.ev-card.ev-winner .ev-card-cost{color:var(--green)}
.ev-card-sub{font-size:10px;color:var(--gray);margin-top:.25rem}
.ev-card-save{font-size:10px;color:var(--green);font-weight:700;margin-top:.3rem}

/* POVABILO ZA NAMESTITEV (PWA) — cilj: da TankAI postane navada.
   Nevsiljivo: prikaže se šele po dejanski uporabi, enkrat, in si zapomni zavrnitev. */
.pwa-bar{position:fixed;left:1rem;right:1rem;bottom:1rem;max-width:520px;margin:0 auto;background:var(--card-bg);border:1px solid var(--border);border-radius:18px;box-shadow:0 12px 40px rgba(0,0,0,.22);padding:.9rem 1rem;display:flex;align-items:center;gap:.85rem;z-index:1400;transform:translateY(150%);opacity:0;transition:transform .45s cubic-bezier(.34,1.2,.64,1),opacity .3s;pointer-events:none}
.pwa-bar.show{transform:translateY(0);opacity:1;pointer-events:auto}
.pwa-ikona{width:40px;height:40px;border-radius:10px;flex-shrink:0;background:#0b1a14;display:flex;align-items:center;justify-content:center}
.pwa-ikona img{width:26px;height:26px}
.pwa-besedilo{flex:1;min-width:0}
.pwa-naslov{font-weight:700;font-size:13.5px;color:var(--black);line-height:1.3}
.pwa-opis{font-size:11.5px;color:var(--gray);line-height:1.45;margin-top:2px}
.pwa-dodaj{background:var(--green);color:#fff;border:none;border-radius:99px;padding:9px 18px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;white-space:nowrap;transition:background .2s}
.pwa-dodaj:hover{background:#1dbf8a}
.pwa-zapri{background:none;border:none;color:var(--gray);font-size:19px;cursor:pointer;padding:2px 5px;line-height:1;flex-shrink:0}
.pwa-zapri:hover{color:var(--black)}
@media(max-width:420px){.pwa-opis{display:none}.pwa-bar{padding:.75rem .85rem;gap:.6rem}}

/* COOKIE BANNER */
.cookie-banner{position:fixed;bottom:0;left:0;right:0;background:#1c1c1e;color:white;padding:1rem 1.5rem;display:flex;align-items:center;justify-content:center;gap:1rem;z-index:1500;flex-wrap:wrap;border-top:1px solid #2a2a2a;transform:translateY(100%);transition:transform .4s cubic-bezier(.34,1.2,.64,1)}
.cookie-banner.show{transform:translateY(0)}
.cookie-text{font-size:13px;color:#aaa;flex:1;min-width:200px;line-height:1.5}
.cookie-text a{color:#1D9E75;text-decoration:none}
.cookie-text a:hover{text-decoration:underline}
.cookie-btn-accept{background:#1D9E75;color:white;border:none;padding:8px 20px;border-radius:99px;font-size:13px;font-weight:600;cursor:pointer;font-family:'Inter',sans-serif;white-space:nowrap;transition:background .2s}
.cookie-btn-accept:hover{background:#1baf83}
.cookie-btn-info{background:none;border:1px solid #444;color:#aaa;padding:8px 16px;border-radius:99px;font-size:13px;cursor:pointer;font-family:'Inter',sans-serif;white-space:nowrap;text-decoration:none;display:inline-block;transition:all .2s}
.cookie-btn-info:hover{border-color:#888;color:white}

@media(max-width:640px){
  nav{padding:.85rem 1.1rem}
  .nav-links{display:none}
  .hamburger{display:flex}

  /* ── MOBILNI ZAČETNI ZASLON: CENA PRVA ───────────────────────────────────
     Povratna informacija resnične uporabnice (26.7.): »preveč informacij naenkrat,
     font prevelik«. Prej je stran porabila ~430 px za naslov/gumbe, preden se je
     pokazala prva cena — torej marketing pred podatkom, po katerega ljudje pridejo.
     Rešitev: vrstni red zamenjamo SAMO vizualno (flex `order`), HTML ostane
     nespremenjen → <h1> ostane prvi v kodi za Google in bralnike zaslona. */
  .hero{padding:4.5rem 1.25rem 2.25rem;display:flex;flex-direction:column;align-items:center}
  .hero-badge{order:1;margin-bottom:1rem}
  .hero-prices{order:2;width:100%;margin-bottom:1.4rem}
  h1{order:3;font-size:1.65rem;letter-spacing:-.6px;line-height:1.15;margin-bottom:.55rem}
  .hero-sub{order:4;font-size:.9rem;line-height:1.5;margin-bottom:1.35rem}
  .hero-actions{order:5;margin-bottom:.5rem}
  .hero-note{order:6;font-size:.75rem;margin-bottom:0}
  .share-row{order:7;margin-top:1.25rem}
  /* Zamik animacij izklopimo — sicer bi cena (prej zadnja v vrsti) utripnila nazadnje. */
  .hero .fade-up{animation-delay:0s}

  /* Drseči trak cen sosedov: isti podatek je že v gumbu »Primerjaj s sosednjimi
     državami« tik nad njim. Premikajoče se besedilo = glavni vir občutka »preveč«. */
  .price-strip{display:none}

  .hp-main{padding:1.15rem 1.15rem}
  .hp-main-flag{font-size:26px}
  .hp-main-country{font-size:1.1rem}
  .hp-main-fuel-price{font-size:1.3rem}
  .calc,.faq,.monthly,.chart-section,.novice,.info,.ev-compare{padding:2.75rem 1.25rem}
  .chart-wrap{height:220px}
}
@media(max-width:400px){
  h1{font-size:1.5rem}
  .hero-sub{font-size:.86rem}
  .hp-main-fuel-price{font-size:1.2rem}
}
/* ── AI NAPOVED — temna kartica ───────────────────────────────────────────────
   Namenoma TEMNA v obeh temah: napoved je znamčni trenutek in se mora ločiti od
   ostale strani. Barve so zato trdo vpisane (kot pri uvodnem zaslonu), ne prek
   spremenljivk — sicer bi se v svetli temi razsula.
   Prej je bila bela kartica z barvnim trakom ob LEVEM robu = vzorec Google Forms.
   Trak je odstranjen; smer nosita barva sija in puščica. */
.predict{max-width:720px;margin:3.5rem auto 0;padding:0 1.5rem}
.predict-card{position:relative;overflow:hidden;border-radius:24px;padding:2.1rem 2.2rem;color:#fff;
  background:radial-gradient(ellipse 130% 110% at 14% 0%,rgba(22,169,122,.30) 0%,transparent 62%),#0b1a14;
  border:1px solid rgba(26,255,140,.20);
  box-shadow:0 24px 60px rgba(0,0,0,.30);
  transition:background .4s ease,border-color .4s ease}
/* smer obarva sij, ne traku */
.predict-up{background:radial-gradient(ellipse 130% 110% at 14% 0%,rgba(226,75,74,.32) 0%,transparent 62%),#0b1a14;border-color:rgba(226,75,74,.26)}
.predict-down{background:radial-gradient(ellipse 130% 110% at 14% 0%,rgba(26,255,140,.26) 0%,transparent 62%),#0b1a14;border-color:rgba(26,255,140,.26)}
.predict-flat{background:radial-gradient(ellipse 130% 110% at 14% 0%,rgba(255,255,255,.10) 0%,transparent 62%),#0b1a14;border-color:rgba(255,255,255,.14)}
.predict-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.35rem}
.predict-badge{display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#1aff8c;text-transform:uppercase;letter-spacing:.07em}
.predict-badge svg{width:14px;height:14px;flex:none}
.predict-when{font-size:11px;color:rgba(255,255,255,.42);text-transform:uppercase;letter-spacing:.06em;font-weight:600;text-align:right}
.predict-body{min-height:46px}
.predict-skeleton,.predict-na-text{color:rgba(255,255,255,.55);font-size:.92rem;font-weight:300}
.predict-main{display:flex;align-items:center;gap:1.3rem}
.predict-arrow{width:88px;height:88px;flex:none;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:2.9rem;font-weight:800;line-height:1}
.predict-arrow-up{background:rgba(226,75,74,.18);color:#ff7a79;box-shadow:inset 0 0 0 1px rgba(226,75,74,.35)}
.predict-arrow-down{background:rgba(26,255,140,.14);color:#1aff8c;box-shadow:inset 0 0 0 1px rgba(26,255,140,.32)}
.predict-arrow-flat{background:rgba(255,255,255,.08);color:rgba(255,255,255,.7);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.predict-dir{font-size:1.4rem;font-weight:800;color:#fff;letter-spacing:-.5px;line-height:1.15}
.predict-up .predict-dir strong{color:#ff7a79}
.predict-down .predict-dir strong{color:#1aff8c}
.predict-flat .predict-dir strong{color:#fff}
/* BREZ text-transform:capitalize — v slovenščini poveliča vsako besedo
   ("Zaupanje V Napovedi: Visoka"). Angleški prijem na slovenskem besedilu. */
.predict-conf{font-size:12px;color:rgba(255,255,255,.5);margin-top:4px}
.predict-summary{margin-top:1.1rem;font-size:.95rem;line-height:1.6;color:rgba(255,255,255,.82);font-weight:300}
.predict-brent{display:flex;align-items:center;gap:8px;margin-top:1rem;padding-top:.85rem;border-top:1px solid rgba(255,255,255,.10);font-size:.8rem;color:rgba(255,255,255,.62)}
.predict-brent svg{width:14px;height:14px;flex:none;opacity:.75}
.predict-foot{margin-top:1.1rem;padding-top:.85rem;border-top:1px solid rgba(255,255,255,.08);font-size:11px;color:rgba(255,255,255,.38)}
@media(max-width:520px){.predict{padding:0 1rem}.predict-dir{font-size:1.2rem}.predict-card{padding:1.6rem 1.4rem}.predict-arrow{width:68px;height:68px;font-size:2.2rem}.predict-head{margin-bottom:1.1rem}}

/* ── PODSTRANI (/izracuni …) ──────────────────────────────────────────────────
   Glava podstrani nadomesti hero. Navigacija je fiksna, zato zgornji odmik. */
.podstran-glava{max-width:720px;margin:0 auto;padding:8.5rem 2rem 1rem;text-align:center}
.podstran-naslov{font-size:2.4rem;font-weight:800;letter-spacing:-1px;line-height:1.1;color:var(--black);margin-bottom:.9rem}
.podstran-uvod{font-size:1rem;font-weight:300;line-height:1.6;color:var(--gray);max-width:560px;margin:0 auto}
.nazaj-blok{max-width:720px;margin:0 auto;padding:1rem 2rem 5rem;text-align:center}
@media(max-width:640px){
  .podstran-glava{padding:6.5rem 1.25rem .5rem}
  .podstran-naslov{font-size:1.65rem;letter-spacing:-.5px}
  .podstran-uvod{font-size:.92rem}
  .nazaj-blok{padding:.5rem 1.25rem 3.5rem}
}
@media(max-width:400px){.podstran-naslov{font-size:1.5rem}}

/* ── RAZDELILNIK — povabilo z naslovnice na podstran ──────────────────────────
   Nadomešča sekcije, ki so se preselile (izračuni). Naslovnica ostane odgovor,
   podstran nosi orodja. */
.razdelilnik{padding:4.5rem 2rem;background:var(--white)}
.razdelilnik-inner{max-width:640px;margin:0 auto;text-align:center;background:var(--card-bg);border:1px solid var(--border);border-radius:16px;padding:2.5rem 2rem}
.razdelilnik-naslov{font-size:1.6rem;font-weight:800;letter-spacing:-.5px;color:var(--black);margin-bottom:.7rem}
.razdelilnik-opis{font-size:.95rem;font-weight:300;line-height:1.6;color:var(--gray);margin-bottom:1.6rem}
@media(max-width:640px){
  .razdelilnik{padding:3rem 1.25rem}
  .razdelilnik-inner{padding:2rem 1.4rem}
  .razdelilnik-naslov{font-size:1.35rem}
}
.nazaj-opomba{margin-top:1rem;font-size:.85rem;color:var(--gray)}
.nazaj-opomba a{color:var(--gray);text-decoration:underline}