/* Hasznaltgumi.net tema a premium sablonhoz (App\Support\BoltTema 'hg', config/bolt_tema.php, docs/116-hasznaltguminet.md).
   A teli-nyari.css UTAN toltodik: ugyanaz a felepites, de a logo kekje (#1A60AB) es grafitja (#2D2D2B), Barlow Condensed
   cimbetu (a logo keskeny, felkover irasa), es a hasznalt gumihoz illo meleg borostyan kiemeles (profilmelyseg, ar).
   Hasonlo stilus, mint a Teli-Nyari es a Kocsigumi, de nem ugyanolyan (Adam, 2026-10-26). Csak valtozok + celzott felulirás. */

body.tema-hg {
  /* sotet feluletek (hos, lablec, sav): grafitos mely kek - a logo grafitja es kekje kozott */
  --ej: #0D1826;
  --ej-2: #15263B;
  --ej-3: #1F3A5C;
  --sf-alap: #0D1826;
  --sf-kartya: #13223A;
  --sf-felugro: #1B2E4A;
  /* hideg kiemeles: a logo kekje */
  --jeg: #4B93DB;
  --jeg-s: #1A60AB;
  --jeg-h: #E8F0F9;
  /* meleg kiemeles: borostyan (profilmelyseg-jelveny, akcio) */
  --nap: #E8A013;
  --nap-s: #B87A08;
  --nap-h: #FDF4E1;
  --ibolya: #1A60AB;
  --kek: #1A60AB;
  --kek-s: #134C89;
  --kek-h: #E8F0F9;
  --narancs-s: #9A6406; /* AA-kontraszt szovegkent feheren */
  --tinta: #1C2230;
  --hatter: #F3F5F8;
  --vonal: #E1E6EE;
  --vonal-e: #C8D1DE;
  --grad: linear-gradient(118deg, #3D86D1 0%, #1A60AB 55%, #E8A013 100%);
  --grad-lagy: linear-gradient(118deg, rgba(75, 147, 219, .16), rgba(26, 96, 171, .12) 50%, rgba(232, 160, 19, .14));
  /* kozepes lekerekites: a Teli-Nyari puhabb, a Kocsigumi szogletesebb formai kozott */
  --r: 12px;
  --r-s: 8px;
  --r-l: 18px;
  --disp: "Barlow Condensed", "Arial Narrow", "Segoe UI", system-ui, sans-serif;
}

/* cimek: a keskeny betu nagyobb meretet bir; a fooldali nagy cim dolt, mint a logo */
body.tema-hg h1, body.tema-hg h2, body.tema-hg h3 { letter-spacing: 0; font-weight: 800 }
body.tema-hg .tnh h1 { font-style: italic; letter-spacing: -.005em; line-height: .95 }
body.tema-hg .tk-nev, body.tema-hg .tk-ar .ertek { letter-spacing: 0 }

/* kijeloles es fokusz */
body.tema-hg ::selection { background: rgba(26, 96, 171, .24) }
body.tema-hg a:focus-visible, body.tema-hg button:focus-visible, body.tema-hg input:focus-visible,
body.tema-hg select:focus-visible, body.tema-hg textarea:focus-visible { outline-color: #1A60AB }

/* a felso vekony szines csik: kek -> borostyan */
body.tema-hg .tn-csik { background: linear-gradient(90deg, #1A60AB, #3D86D1 55%, #E8A013) }

/* fooldali hos: grafitos mely kek sotetites, enyhe kek fenyfolttal */
body.tema-hg .tnh::before {
  background: radial-gradient(60% 70% at 78% 40%, rgba(61, 134, 209, .2), transparent 70%),
              linear-gradient(90deg, rgba(13, 24, 38, .95) 0%, rgba(13, 24, 38, .78) 40%, rgba(13, 24, 38, .2) 74%, transparent),
              linear-gradient(0deg, var(--ej) 0, transparent 28%);
}
@media (max-width: 860px) {
  body.tema-hg .tnh::before { background: linear-gradient(180deg, rgba(13, 24, 38, .5), rgba(13, 24, 38, .92) 60%, var(--ej)) }
}

/* =============================================================== Hasznaltgumi.net oldalak (docs/116)
   hg_fooldal, hasznalt, hasznalt-darab, _hg_kartya. Telefon (<=640), tablet (<=1024), asztali. */

/* fejlec: Uj gumi + Nagyker XXL gomb */
body.tema-hg .hg-gomb { border: 1.5px solid var(--vonal); border-radius: 999px; padding: 0 14px; height: 42px; flex-direction: row; gap: 7px; font-weight: 700 }
body.tema-hg .hg-gomb svg { width: 19px; height: 19px }
body.tema-hg .hg-gomb .szo { font-size: 13.5px }
body.tema-hg .hg-gomb-uj { color: var(--kek) }
body.tema-hg .hg-gomb-b2b { background: var(--ej); border-color: var(--ej); color: #fff }
body.tema-hg .hg-gomb:hover { border-color: var(--kek) }
@media (max-width: 1180px) { body.tema-hg .hg-gomb .szo { display: none } body.tema-hg .hg-gomb { width: 42px; padding: 0; justify-content: center } }
@media (max-width: 640px) { body.tema-hg .hg-gomb-b2b { display: none } }

/* kozos urlapelemek */
.hg-m { display: block; min-width: 0; border: 0; padding: 0; margin: 0 }
.hg-m > span, .hg-m > legend { display: block; font-size: 12.5px; font-weight: 700; color: var(--tinta-2); margin-bottom: 6px; padding: 0 }
.hg-m input, .hg-m select { width: 100%; height: 48px; font-size: 16px; padding: 0 14px; border: 1.5px solid var(--vonal-e); border-radius: var(--r-s); background: #fff; color: var(--tinta) }
.hg-m input:focus, .hg-m select:focus { border-color: var(--kek); outline: 0; box-shadow: 0 0 0 4px rgba(26, 96, 171, .14) }
.hg-meret3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px }
.hg-chipek { display: flex; flex-wrap: wrap; gap: 8px }
.hg-chip { position: relative; cursor: pointer }
.hg-chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer }
.hg-chip span { display: inline-flex; align-items: center; height: 40px; padding: 0 15px; border-radius: 999px; border: 1.5px solid var(--vonal-e); background: #fff; font-weight: 700; font-size: 14px; color: var(--tinta-2); transition: background .2s, color .2s, border-color .2s }
.hg-chip input:checked + span { background: var(--kek); border-color: var(--kek); color: #fff }
.hg-chip input:focus-visible + span { outline: 2px solid var(--kek); outline-offset: 2px }

/* fooldali hos: szoveg + kereso panel */
.hgh { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: radial-gradient(70% 90% at 85% 10%, rgba(61, 134, 209, .35), transparent 60%), radial-gradient(50% 60% at 0% 100%, rgba(232, 160, 19, .14), transparent 70%), var(--ej) }
.hgh::after { content: ""; position: absolute; right: -140px; top: 50%; width: 560px; height: 560px; margin-top: -280px; border-radius: 50%; border: 56px solid rgba(255, 255, 255, .04); z-index: -1 }
.hgh-racs { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px; align-items: center; padding-block: 64px 72px }
.hgh-felirat { color: #9CC6F2 }
body.tema-hg .hgh h1 { color: #fff; font-size: clamp(40px, 5.4vw, 76px); line-height: .95; margin: 16px 0 18px; font-style: italic; text-wrap: balance }
.hgh-szoveg > p { color: #C4D2E6; font-size: 17.5px; line-height: 1.6; max-width: 46ch; margin: 0 }
.hgh-szamok { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 30px }
.hgh-szamok b { display: block; font-family: var(--disp); font-size: 38px; font-weight: 800; color: #fff; line-height: 1 }
.hgh-szamok span { font-size: 13.5px; color: #9FB1CB; font-weight: 600 }
.hgh-kereso { background: #fff; color: var(--tinta); border-radius: var(--r-l); padding: 26px; box-shadow: var(--arny-x); display: grid; gap: 14px }
.hgh-kereso h2 { font-size: 26px; margin: 0 }
.hgh-gyors input { height: 54px; font-size: 18px; font-weight: 700; letter-spacing: .02em }
.hgh-vagy { display: flex; align-items: center; gap: 12px; color: var(--tinta-3); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em }
.hgh-vagy::before, .hgh-vagy::after { content: ""; flex: 1; height: 1px; background: var(--vonal) }
.hgh-ket { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }

/* szekciok */
.hg-szek { padding-top: clamp(40px, 6vw, 72px) }
.hg-szek .szek-fej { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px }
.hg-szek .szek-fej h2 { font-size: clamp(26px, 3vw, 38px); margin: 8px 0 0 }
.hg-meretek { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px }
.hg-meret-k { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 16px 18px; background: #fff; border: 1px solid var(--vonal); border-radius: var(--r); transition: border-color .2s, box-shadow .3s }
.hg-meret-k b { font-family: var(--disp); font-size: 21px; font-weight: 800 }
.hg-meret-k span { font-size: 13px; font-weight: 700; color: var(--kek) }
.hg-meret-k:hover { border-color: var(--kek); box-shadow: var(--arny-e) }
.hg-lepesek { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px }
.hg-lepesek > div { background: #fff; border: 1px solid var(--vonal); border-radius: var(--r-l); padding: 22px }
.hg-lepesek i { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--kek-h); color: var(--kek); font-style: normal; font-weight: 800; font-family: var(--disp); font-size: 20px }
.hg-lepesek h3 { font-size: 21px; margin: 14px 0 6px }
.hg-lepesek p { margin: 0; color: var(--tinta-2); font-size: 14.5px; line-height: 1.55 }
.hg-atjaro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
.hg-atjaro-k { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 8px; padding: 30px; border-radius: var(--r-l); color: #fff; min-height: 230px }
.hg-atjaro-k.uj { background: linear-gradient(135deg, #1A60AB, #0F3F75) }
.hg-atjaro-k.b2b { background: linear-gradient(135deg, #2D2D2B, #0D1826) }
.hg-atjaro-k .felirat { color: rgba(255, 255, 255, .75) }
.hg-atjaro-k h3 { color: #fff; font-size: 30px; margin: 0 }
.hg-atjaro-k p { color: rgba(255, 255, 255, .82); margin: 0 0 8px; max-width: 44ch; line-height: 1.55 }
.hg-atjaro-k .g { margin-top: auto; align-self: flex-start }
.hg-gyik details { background: #fff; border: 1px solid var(--vonal); border-radius: var(--r); margin-bottom: 10px }
.hg-gyik summary { cursor: pointer; padding: 16px 20px; font-weight: 700; font-size: 16px; list-style: none }
.hg-gyik summary::after { content: "+"; float: right; color: var(--kek); font-weight: 800 }
.hg-gyik details[open] summary::after { content: "–" }
.hg-gyik details p { margin: 0; padding: 0 20px 18px; color: var(--tinta-2); line-height: 1.6 }

/* darab-kartya */
.hg-kartyak { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.hg-kartyak-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) }
.hgk { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid var(--vonal); border-radius: var(--r-l); overflow: hidden; transition: border-color .25s, box-shadow .35s, transform .35s }
.hgk:hover { border-color: rgba(26, 96, 171, .35); box-shadow: var(--arny-e); transform: translateY(-2px) }
.hgk-kep { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; background: #EEF2F7; overflow: hidden }
.hgk-kep img { width: 100%; height: 100%; object-fit: cover }
.hgk-kep .nincs { color: var(--tinta-3); font-size: 13px; font-weight: 600 }
.hgk-mm { position: absolute; left: 10px; top: 10px; display: inline-flex; align-items: baseline; gap: 3px; padding: 6px 10px; border-radius: 10px; background: #fff; color: var(--tinta); font-size: 12px; font-weight: 700; box-shadow: var(--arny) }
.hgk-mm b { font-family: var(--disp); font-size: 19px; line-height: 1 }
.hgk-mm.jo b { color: var(--zold) }
.hgk-mm.kozep b { color: var(--narancs-s) }
.hgk-mm.kopott b { color: var(--piros, #C0352B) }
.hgk-db { position: absolute; right: 10px; top: 10px; padding: 5px 9px; border-radius: 8px; background: var(--ej); color: #fff; font-size: 12px; font-weight: 800 }
.hgk-test { display: flex; flex-direction: column; gap: 5px; padding: 14px 16px 16px; flex: 1 }
.hgk-marka { font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3) }
.hgk-meret { font-family: var(--disp); font-size: 23px; font-weight: 800; line-height: 1.05 }
.hgk-meret:hover { color: var(--kek) }
.hgk-minta { font-size: 13.5px; color: var(--tinta-2); font-weight: 600 }
.hgk-jel { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px }
.hgk-jel .j { font-size: 11.5px; font-weight: 700; padding: 4px 8px; border-radius: 6px; background: var(--hatter); color: var(--tinta-2) }
.hgk-jel .j.winter { background: var(--jeg-h); color: var(--kek-s) }
.hgk-jel .j.summer { background: var(--nap-h); color: var(--narancs-s) }
.hgk-lab { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--vonal); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap }
.hgk-ar b { display: block; font-family: var(--disp); font-size: 24px; font-weight: 800; line-height: 1 }
.hgk-ar em { font-style: normal; font-size: 12px; color: var(--tinta-3); font-weight: 600 }
.hgk-kosar { display: flex; gap: 6px; align-items: center }
.hgk-kosar select { height: 44px; border: 1.5px solid var(--vonal-e); border-radius: 999px; padding: 0 10px; font-weight: 700; font-size: 15px; background: #fff }
.hgk-kosar .g, .hgk-lab > .g { height: 44px; padding: 0 16px; font-size: 14px }

/* lista oldal */
.hg-lap-fej { background: #fff; border-bottom: 1px solid var(--vonal); padding: 34px 0 26px }
body.tema-hg .hg-lap-fej h1 { font-size: clamp(30px, 4vw, 50px); margin: 10px 0 8px }
.hg-lap-fej p { color: var(--tinta-2); max-width: 70ch; margin: 0 }
.hg-lap-fej .hg-lap-db { margin-top: 10px; font-weight: 600 }
.hg-lista-racs { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 28px; align-items: start; padding-top: 26px }
.hg-szuro { position: sticky; top: 130px; display: grid; gap: 14px; background: #fff; border: 1px solid var(--vonal); border-radius: var(--r-l); padding: 20px }
.hg-szuro-fej { display: flex; justify-content: space-between; align-items: baseline }
.hg-szuro-fej h2 { font-size: 22px; margin: 0 }
.hg-szuro-fej a { color: var(--kek); font-weight: 700; font-size: 14px }
.hg-szuro .hg-meret3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px }
.hg-szuro .hg-meret3 select { padding: 0 8px }
.hg-ures { background: #fff; border: 1px solid var(--vonal); border-radius: var(--r-l); padding: 48px 24px; text-align: center }
.hg-ures h2 { font-size: 26px; margin: 0 0 8px }
.hg-ures p { color: var(--tinta-2); margin: 0 0 20px }
.hg-ures .gombok { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap }
.hg-lapozo { margin: 24px 0 8px }

/* darab oldal */
.hg-morzsa { display: flex; flex-wrap: wrap; gap: 8px; padding: 20px 0 6px; font-size: 13.5px; font-weight: 600; color: var(--tinta-3) }
.hg-morzsa a { color: var(--kek) }
.hgd { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 36px; align-items: start; padding-top: 12px }
.hgd-nagy { position: relative; aspect-ratio: 4 / 3; background: #EEF2F7; border-radius: var(--r-l); overflow: hidden; display: grid; place-items: center }
.hgd-nagy img { width: 100%; height: 100%; object-fit: contain }
.hgd-nagy .nincs { color: var(--tinta-3); font-weight: 600 }
.hgd-cimke { position: absolute; left: 14px; bottom: 14px; padding: 7px 12px; border-radius: 10px; background: rgba(13, 24, 38, .82); color: #fff; font-size: 12.5px; font-weight: 700; backdrop-filter: blur(6px) }
.hgd-bella { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px }
.hgd-b { width: 78px; height: 78px; padding: 0; border: 1.5px solid var(--vonal); border-radius: 12px; overflow: hidden; background: #fff; cursor: pointer }
.hgd-b img { width: 100%; height: 100%; object-fit: cover }
.hgd-b.on { border-color: var(--kek); box-shadow: 0 0 0 3px rgba(26, 96, 171, .18) }
.hgd-marka { margin-top: 10px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-3) }
body.tema-hg .hgd-adat h1 { font-size: clamp(36px, 4.4vw, 56px); margin: 2px 0 4px; line-height: 1 }
.hgd-al { color: var(--tinta-2); font-weight: 600; font-size: 16px; margin: 0 0 18px }
.hgd-profil { background: #fff; border: 1px solid var(--vonal); border-radius: var(--r); padding: 14px 16px; margin-bottom: 14px }
.hgd-profil .fej { display: flex; justify-content: space-between; align-items: baseline; font-weight: 700; color: var(--tinta-2) }
.hgd-profil .fej b { font-family: var(--disp); font-size: 26px; color: var(--tinta) }
.hgd-profil .sav { height: 10px; border-radius: 10px; background: var(--hatter); overflow: hidden; margin: 8px 0 6px }
.hgd-profil .sav i { display: block; height: 100%; width: var(--sz, 0%); border-radius: 10px; background: linear-gradient(90deg, #E8A013, #1A60AB) }
.hgd-profil small { color: var(--tinta-3); font-size: 12.5px; font-weight: 600 }
.hgd-vasar { background: #fff; border: 1px solid var(--vonal); border-radius: var(--r-l); padding: 20px; box-shadow: var(--arny-e); margin-bottom: 14px }
.hgd-ar b { display: block; font-family: var(--disp); font-size: 40px; font-weight: 800; line-height: 1 }
.hgd-ar span { display: block; color: var(--tinta-3); font-weight: 600; font-size: 13.5px; margin-top: 4px }
.hgd-kosar { display: flex; gap: 10px; margin-top: 16px }
.hgd-kosar select { height: 56px; border: 1.5px solid var(--vonal-e); border-radius: 999px; padding: 0 14px; font-weight: 800; font-size: 16px; background: #fff }
.hgd-kosar .g { flex: 1 }
.hgd-vasar > .g { margin-top: 16px; width: 100% }
.hgd-elony { list-style: none; margin: 16px 0 0; padding: 14px 0 0; border-top: 1px solid var(--vonal); display: grid; gap: 8px; font-size: 14px; color: var(--tinta-2); font-weight: 600 }
.hgd-elony li::before { content: "✓"; color: var(--zold); font-weight: 800; margin-right: 8px }
.hgd-tab { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--vonal); border-radius: var(--r); overflow: hidden }
.hgd-tab th, .hgd-tab td { padding: 12px 16px; font-size: 14.5px; border-bottom: 1px solid var(--vonal); text-align: left }
.hgd-tab tr:last-child th, .hgd-tab tr:last-child td { border-bottom: 0 }
.hgd-tab th { color: var(--tinta-2); font-weight: 600 }
.hgd-tab td { text-align: right; font-weight: 700 }

@media (max-width: 1024px) {
  .hgh-racs { grid-template-columns: minmax(0, 1fr); gap: 30px; padding-block: 44px 52px }
  .hg-kartyak, .hg-kartyak-4 { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .hg-meretek { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .hg-lepesek { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .hg-lista-racs { grid-template-columns: minmax(0, 1fr) }
  .hg-szuro { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .hg-szuro > .hg-szuro-fej, .hg-szuro > .g, .hg-szuro > .hg-meret3 { grid-column: 1 / -1 }
  .hgd { grid-template-columns: minmax(0, 1fr); gap: 22px }
}
@media (max-width: 640px) {
  body.tema-hg .hgh h1 { font-size: 40px }
  .hgh-kereso { padding: 18px }
  .hgh-szamok { gap: 18px }
  .hgh-szamok b { font-size: 30px }
  .hg-kartyak, .hg-kartyak-4 { grid-template-columns: minmax(0, 1fr) }
  .hg-meretek { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .hg-lepesek, .hg-atjaro { grid-template-columns: minmax(0, 1fr) }
  .hg-szuro { grid-template-columns: minmax(0, 1fr) }
  .hgh-ket { grid-template-columns: minmax(0, 1fr) }
  .hgd-kosar { flex-direction: column }
  .hgd-kosar select { width: 100% }
  .hgd-kosar .g { flex: none; width: 100% }
  .hgk-lab { flex-direction: column; align-items: stretch }
  .hgk-kosar .g { flex: 1 }
}