/* Hangzó kiadványok – nyilvános felület
   Arculat: kékfestő (indigó alap, fehér mintázat), hanglemez-motívum a borító nélküli albumoknál. */

@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(fonts/source-serif-4-latin-wght-normal.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: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(fonts/source-serif-4-latin-ext-wght-normal.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: "Source Serif 4"; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url(fonts/source-serif-4-cyrillic-wght-normal.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url(fonts/source-serif-4-latin-wght-italic.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: "Source Serif 4"; font-style: italic; font-weight: 200 900; font-display: swap;
  src: url(fonts/source-serif-4-latin-ext-wght-italic.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: "Commissioner"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/commissioner-latin-wght-normal.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: "Commissioner"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(fonts/commissioner-latin-ext-wght-normal.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; }

:root {
  --indigo: #1f3366;
  --indigo-mely: #142147;
  --indigo-vilagos: #3d5fae;
  --mosott: #e5eaf4;
  --papir: #f7f8fb;
  --lap: #ffffff;
  --tinta: #1c202b;
  --halvany: #5a6275;
  --vonal: #d4dae7;
  --piros: #b3312a;
  --okker: #b98a2e;
  --zold: #3d6b50;
  --szilva: #6b3d63;
  --fokusz: #3d5fae;
  --minta-szin: rgba(255,255,255,.13);

  --serif: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --sans: "Commissioner", "Segoe UI", system-ui, sans-serif;
  --szel: 1180px;
  --gutter: 16px;
  color-scheme: light;
}
@media (min-width: 720px) { :root { --gutter: 32px; } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --indigo: #1a2a55; --indigo-mely: #0f1834; --indigo-vilagos: #8fa8e6;
    --mosott: #1c2747; --papir: #10162b; --lap: #161e38; --tinta: #e6e9f2; --halvany: #a2aac0;
    --vonal: #2b3760; --piros: #e0675d; --fokusz: #8fa8e6; --minta-szin: rgba(255,255,255,.08);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --indigo: #1a2a55; --indigo-mely: #0f1834; --indigo-vilagos: #8fa8e6;
  --mosott: #1c2747; --papir: #10162b; --lap: #161e38; --tinta: #e6e9f2; --halvany: #a2aac0;
  --vonal: #2b3760; --piros: #e0675d; --fokusz: #8fa8e6; --minta-szin: rgba(255,255,255,.08);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--papir); color: var(--tinta);
  font: 400 1.0625rem/1.6 var(--serif); font-optical-sizing: auto;
  display: flex; flex-direction: column; min-height: 100vh;
}
a { color: var(--indigo-vilagos); text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--piros); }
:focus-visible { outline: 3px solid var(--fokusz); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3 { font-family: var(--sans); line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.005em; }
h1 { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.4rem); font-weight: 650; }
h2 { font-size: 1.3rem; font-weight: 620; }
h3 { font-size: 1rem; font-weight: 620; }
p { margin: 0 0 1em; }
img { max-width: 100%; height: auto; }
code { font-size: .9em; background: var(--mosott); padding: .05em .3em; border-radius: 3px; }
[hidden] { display: none !important; }
.rejtett { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ugro { position: absolute; left: -999px; top: 0; background: var(--lap); padding: .5em 1em; z-index: 10; }
.ugro:focus { left: 8px; top: 8px; }
.halvany { color: var(--halvany); }
.db { font-family: var(--sans); font-size: .8em; color: var(--halvany); font-variant-numeric: tabular-nums; font-weight: 450; }
.inline { display: inline; }

/* ---------- Fejléc: kékfestő minta ---------- */
.fejlec {
  background-color: var(--indigo);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56' viewBox='0 0 56 56'%3E%3Cg fill='%23fff' fill-opacity='.22'%3E%3Ccircle cx='28' cy='19' r='4.2'/%3E%3Ccircle cx='28' cy='37' r='4.2'/%3E%3Ccircle cx='19' cy='28' r='4.2'/%3E%3Ccircle cx='37' cy='28' r='4.2'/%3E%3Ccircle cx='28' cy='28' r='2.2'/%3E%3Ccircle cx='0' cy='0' r='2.4'/%3E%3Ccircle cx='56' cy='0' r='2.4'/%3E%3Ccircle cx='0' cy='56' r='2.4'/%3E%3Ccircle cx='56' cy='56' r='2.4'/%3E%3Ccircle cx='28' cy='3' r='1.3'/%3E%3Ccircle cx='28' cy='53' r='1.3'/%3E%3Ccircle cx='3' cy='28' r='1.3'/%3E%3Ccircle cx='53' cy='28' r='1.3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 56px 56px;
  color: #fff;
  position: relative;
}
.fejlec-belso, .fomenu ul, .tartalom, .lablec-belso { max-width: var(--szel); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.fejlec-belso { display: flex; align-items: center; gap: 1rem 2rem; padding-top: 1.1rem; padding-bottom: 1rem; flex-wrap: wrap; position: relative; z-index: 1; }
.logo { color: #fff; text-decoration: none; display: flex; align-items: center; gap: .75rem; background: var(--indigo); padding: .2rem .6rem .25rem 0; margin-right: auto; box-shadow: 1.2rem 0 1rem -.6rem var(--indigo); }
.logo:hover { color: #fff; }
.logo-jel { width: 2.4rem; height: auto; flex: none; }
.logo-szoveg { display: flex; flex-direction: column; }
.logo-cim { font: 680 1.45rem/1.1 var(--sans); letter-spacing: -.01em; }
.logo-al { font: 400 .9rem/1.3 var(--serif); font-style: italic; opacity: .85; }
.fejlec-kereso { display: flex; flex: 0 1 26rem; background: var(--lap); border-radius: 6px; overflow: hidden; box-shadow: 0 0 0 4px var(--indigo); }
.fejlec-kereso input { flex: 1; min-width: 0; border: 0; padding: .6rem .8rem; font: 1rem var(--sans); background: transparent; color: var(--tinta); }
.fejlec-kereso button { border: 0; background: var(--mosott); color: var(--indigo); font: 600 .95rem var(--sans); padding: 0 1rem; cursor: pointer; }
.fejlec-kereso button:hover { background: var(--piros); color: #fff; }
.menugomb { display: none; }
.fomenu { background: var(--indigo-mely); position: relative; z-index: 1; }
.fomenu ul { list-style: none; display: flex; gap: .2rem 1.6rem; flex-wrap: wrap; margin-top: 0; margin-bottom: 0; }
.fomenu li.jobbra { margin-left: auto; }
.fomenu a { display: block; color: #dfe5f3; text-decoration: none; font: 500 .95rem/1 var(--sans); padding: .85rem 0 .75rem; border-bottom: 3px solid transparent; }
.fomenu a:hover { color: #fff; border-bottom-color: rgba(255,255,255,.4); }
.fomenu a[aria-current="page"] { color: #fff; border-bottom-color: var(--piros); }
@media (max-width: 719px) {
  .fejlec-kereso { flex-basis: 100%; order: 3; }
  .logo { flex: 1 1 0; min-width: 0; }
  .logo-al { font-size: .8rem; }
  .fejlec-belso { flex-wrap: wrap; column-gap: .8rem; }
  .menugomb { display: inline-block; background: transparent; border: 1px solid rgba(255,255,255,.5); color: #fff; font: 500 .9rem var(--sans); padding: .4rem .8rem; border-radius: 4px; }
  .fomenu { display: none; }
  .fomenu.nyitva { display: block; }
  .fomenu ul { flex-direction: column; gap: 0; }
  .fomenu li.jobbra { margin-left: 0; }
  .fomenu a { padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.1); }
}

/* ---------- Tartalom ---------- */
.tartalom { flex: 1; width: 100%; padding-top: 2rem; padding-bottom: 4rem; }
.lapfej { margin-bottom: 1.5rem; max-width: 52rem; }
.lapfej-al { color: var(--halvany); font-size: 1.05rem; }
.lapfej-tipus { font: 500 .95rem var(--sans); color: var(--halvany); margin: 0 0 .2rem; }
.ures { padding: 1.5rem; background: var(--mosott); border-radius: 6px; max-width: 46rem; }
.uzenet { padding: .8rem 1rem; border-radius: 6px; background: #e7f2ea; color: #1e4a2c; font-family: var(--sans); max-width: 46rem; }
.uzenet-hiba { background: #f8e6e4; color: #7c1e17; }
.jelzo { display: inline-block; font: 500 .9rem var(--sans); background: #f4e7c9; color: #5a420c; padding: .25rem .6rem; border-radius: 4px; }
.cimke { font: 500 .75rem var(--sans); border: 1px solid var(--vonal); color: var(--halvany); border-radius: 3px; padding: .05rem .35rem; margin-left: .3rem; }
.tovabb { font-family: var(--sans); font-weight: 550; font-size: .95rem; }
.megjegyzes { color: var(--halvany); font-size: .95rem; font-style: italic; }
.sep::before { content: "/"; margin: 0 .45em; color: var(--vonal); }

/* gombok, űrlapelemek */
.gomb, button.gomb {
  display: inline-flex; align-items: center; gap: .4rem; font: 600 .95rem/1 var(--sans);
  padding: .7rem 1.1rem; border-radius: 6px; border: 1px solid var(--vonal); background: var(--lap); color: var(--indigo-vilagos);
  text-decoration: none; cursor: pointer;
}
.gomb:hover { border-color: var(--indigo-vilagos); color: var(--indigo-vilagos); }
.gomb-fo, button.gomb-fo { background: var(--piros); border-color: var(--piros); color: #fff; }
.gomb-fo:hover, button.gomb-fo:hover { background: #8f2620; border-color: #8f2620; color: #fff; }
.linkgomb { background: none; border: 0; padding: 0; font: inherit; color: var(--indigo-vilagos); text-decoration: underline; cursor: pointer; }
input[type=search], input[type=text], input[type=number], input[type=password], input[type=email], input:not([type]), select, textarea {
  font: 1rem var(--sans); color: var(--tinta); background: var(--lap); border: 1px solid var(--vonal); border-radius: 5px; padding: .5rem .65rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--indigo-vilagos); }
.szuro-sor { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin-bottom: 1rem; font-family: var(--sans); font-size: .95rem; }
.szuro-sor input[type=search] { flex: 1 1 16rem; max-width: 26rem; }
.szuro-sor button { font: 600 .95rem var(--sans); padding: .55rem 1rem; border-radius: 5px; border: 1px solid var(--indigo); background: var(--indigo); color: #fff; cursor: pointer; }

/* betűsor és lapozó */
.betusor { display: flex; flex-wrap: wrap; gap: 2px; margin: 0 0 1.5rem; font: 550 .95rem/1 var(--sans); }
.betusor a, .betusor span { min-width: 2.1rem; text-align: center; padding: .5rem .3rem; border-radius: 4px; text-decoration: none; }
.betusor a { background: var(--lap); border: 1px solid var(--vonal); color: var(--indigo-vilagos); }
.betusor a:hover { border-color: var(--indigo-vilagos); }
.betusor span[aria-current] { background: var(--indigo); color: #fff; border: 1px solid var(--indigo); }
.betusor .tiltott { color: var(--vonal); border: 1px solid transparent; }
.lapozo { display: flex; flex-wrap: wrap; gap: .3rem; margin: 2rem 0 0; font: 500 .95rem/1 var(--sans); align-items: center; }
.lapozo a, .lapozo span { padding: .55rem .75rem; border-radius: 4px; text-decoration: none; }
.lapozo a { border: 1px solid var(--vonal); background: var(--lap); }
.lapozo span[aria-current] { background: var(--indigo); color: #fff; }
.lapozo .tiltott { color: var(--vonal); }

/* ---------- Hanglemez (borító helyett) ---------- */
.lemez {
  --cimke: var(--indigo);
  display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle, transparent 0 31%, rgba(255,255,255,.06) 31.5% 32%, transparent 32.5%),
    repeating-radial-gradient(circle, #20222a 0 1.6px, #2c2f39 1.6px 3.2px);
  box-shadow: inset 0 0 0 2px #15161b;
  position: relative;
}
.lemez::after { /* fényvisszaverődés */
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 210deg, transparent 0 8%, rgba(255,255,255,.10) 12%, transparent 18% 58%, rgba(255,255,255,.07) 62%, transparent 68%);
}
.lemez-cimke {
  width: 38%; aspect-ratio: 1; border-radius: 50%; background: var(--cimke); color: #fff;
  display: grid; place-items: center; font: 650 clamp(.7rem, 3.2cqi, 1.6rem)/1 var(--sans); position: relative; z-index: 1;
  box-shadow: 0 0 0 3px rgba(0,0,0,.25);
}
.lemez-cimke::after { content: ""; position: absolute; width: 9%; aspect-ratio: 1; border-radius: 50%; background: #20222a; top: 45.5%; left: 45.5%; }
.lemez-1 { --cimke: var(--piros); } .lemez-2 { --cimke: var(--okker); } .lemez-3 { --cimke: var(--zold); } .lemez-4 { --cimke: var(--szilva); }
.lemez.nagy .lemez-cimke { font-size: 3rem; }
.lemez-cimke { padding-bottom: 28%; } /* a betű a lyuk fölött */
.borito { display: block; aspect-ratio: 1; object-fit: contain; border-radius: 3px; background: var(--mosott); box-shadow: 0 1px 2px rgba(0,0,0,.15); }

/* ---------- Kezdőlap ---------- */
.kezdo .tartalom { padding-top: 0; }
/* teljes szélességű sáv 100vw nélkül (a 100vw a függőleges görgetősávot is tartalmazza, és vízszintes görgetést okozna) */
.nyito { --nyito-bg: var(--indigo-mely); margin: 0 0 2.5rem; background: var(--nyito-bg); color: #fff;
  box-shadow: 0 0 0 100vmax var(--nyito-bg); clip-path: inset(0 -100vmax); }
.nyito-belso { padding: 2.5rem 0 3rem; }
.nyito-cim { font: 600 clamp(1.8rem, 1.2rem + 2.6vw, 3rem)/1.12 var(--serif); max-width: 22ch; letter-spacing: -.01em; margin-bottom: .6rem; }
.nyito-al { font-size: 1.15rem; max-width: 46rem; color: #d6dcef; }
.nagy-kereso { display: flex; max-width: 54rem; margin-top: 1.6rem; background: var(--lap); border-radius: 8px; overflow: hidden; }
.nagy-kereso input { flex: 1; min-width: 0; border: 0; border-radius: 0; padding: 1rem 1.1rem; font: 1.1rem var(--sans); background: transparent; }
.nagy-kereso button { border: 0; background: var(--piros); color: #fff; font: 650 1.05rem var(--sans); padding: 0 1.5rem; cursor: pointer; }
.nagy-kereso button:hover { background: #8f2620; }
.kezdo-racs { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .kezdo-racs { grid-template-columns: minmax(0, 1fr) 20rem; } }
.album-racs { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 1.6rem 1.2rem; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); }
.album-racs.kicsi { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
.album-csempe { display: block; text-decoration: none; color: var(--tinta); container-type: inline-size; }
.album-csempe .lemez, .album-csempe .borito { width: 100%; margin-bottom: .55rem; transition: transform .25s ease; }
.album-csempe:hover .lemez { transform: rotate(18deg); }
.album-csempe:hover .csempe-cim { color: var(--piros); }
.csempe-cim { display: block; font: 550 .95rem/1.3 var(--sans); }
.csempe-eloado { display: block; font-size: .9rem; line-height: 1.35; margin-top: .2rem; }
.kezdo-bongeszes { border-left: 1px solid var(--vonal); padding-left: 1.6rem; }
@media (max-width: 959px) { .kezdo-bongeszes { border-left: 0; padding-left: 0; border-top: 1px solid var(--vonal); padding-top: 1.5rem; } }
.kezdo-bongeszes h3 { font-size: .95rem; color: var(--halvany); font-weight: 550; margin-top: 1.4rem; }
.taj-lista, .bong-lista { list-style: none; padding: 0; margin: 0; }
.taj-lista li { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px solid var(--vonal); padding: .45rem 0; font-size: 1.1rem; }
.taj-lista a { text-decoration: none; font-weight: 550; }
.bong-lista li { padding: .25rem 0; }

/* ---------- Albumlista ---------- */
.album-lista { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--vonal); }
.album-lista li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr) auto; gap: .3rem 1rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--vonal); }
.album-lista .lemez, .album-lista .borito { width: 3.4rem; }
.album-lista .lemez-cimke { font-size: .7rem; padding-bottom: 22%; }
.al-cim { font: 560 1.02rem/1.3 var(--sans); text-decoration: none; color: var(--tinta); }
.al-cim:hover { color: var(--piros); text-decoration: underline; }
.al-eloado { font-size: .95rem; line-height: 1.4; }
.al-meta { font: .88rem/1.4 var(--sans); color: var(--halvany); text-align: right; display: flex; flex-direction: column; }
.album-lista.kicsi li { grid-template-columns: 2.6rem minmax(0,1fr) auto; padding: .45rem 0; }
.album-lista.kicsi .lemez, .album-lista.kicsi .borito { width: 2.6rem; }
@media (max-width: 600px) { .album-lista li { grid-template-columns: 3rem minmax(0,1fr); } .al-meta { grid-column: 2; text-align: left; flex-direction: row; flex-wrap: wrap; gap: 0 .8rem; } }

/* ---------- Album ---------- */
.album-fej { display: grid; gap: 1.5rem 2.5rem; grid-template-columns: minmax(0, 1fr); margin-bottom: 2.5rem; align-items: start; }
@media (min-width: 760px) { .album-fej { grid-template-columns: 17rem minmax(0, 1fr); } }
.album-kep { container-type: inline-size; max-width: 17rem; }
.album-kep .lemez, .album-kep .borito { width: 100%; }
/* az albumoldalon a borító a saját arányában, vágás nélkül jelenik meg */
.album-kep .borito { aspect-ratio: auto; height: auto; background: none; }
.sorozat { font: 550 1rem var(--sans); color: var(--halvany); margin-bottom: .3rem; }
.album-cimblokk h1 { font-family: var(--serif); font-weight: 620; font-size: clamp(1.8rem, 1.2rem + 2vw, 2.6rem); max-width: 28ch; }
.album-eloado { font-size: 1.2rem; margin-bottom: 1.2rem; }
.album-gombok { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.adatok { margin: 0; display: grid; gap: 0; align-content: start; }
.adat { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--vonal); }
.adat dt { font: 500 .9rem/1.6 var(--sans); color: var(--halvany); }
.adat dd { margin: 0; }
.adatok.tomor .adat { grid-template-columns: 9.5rem minmax(0,1fr); padding: .3rem 0; }
@media (max-width: 520px) { .adat, .adatok.tomor .adat { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.album-test { display: grid; gap: 2.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .album-test { grid-template-columns: minmax(0, 1fr) 22rem; } }
.sav-lista { list-style: none; padding: 0; margin: 0; counter-reset: sav; border-top: 2px solid var(--tinta); }
.sav { display: grid; grid-template-columns: 2.4rem minmax(0,1fr) auto 2.4rem; gap: .2rem .8rem; align-items: baseline; padding: .65rem 0; border-bottom: 1px solid var(--vonal); }
.sav.nem-publikus { opacity: .6; }
.sav.szol { background: var(--mosott); }
.sav-szam { font: 500 .95rem var(--sans); color: var(--halvany); text-align: right; font-variant-numeric: tabular-nums; }
.sav-cim { font-size: 1.05rem; color: var(--tinta); text-decoration: none; }
.sav-cim:hover { color: var(--piros); text-decoration: underline; }
.sav-al { font-size: .9rem; color: var(--halvany); line-height: 1.4; margin-top: .1rem; }
.sav-al a { color: inherit; }
.sav-hossz { font: .9rem var(--sans); color: var(--halvany); font-variant-numeric: tabular-nums; }
.sav-play { grid-column: 4; align-self: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1.5px solid var(--piros); background: transparent; color: var(--piros); cursor: pointer; font-size: .75rem; padding-left: 2px; }
.sav-play:hover, .sav.szol .sav-play { background: var(--piros); color: #fff; }
.album-leiras section { margin-bottom: 2rem; }
.album-leiras h2 { font-size: 1.05rem; }
.szoveg { font-size: 1rem; max-width: 70ch; }
.linkek { padding-left: 1.1rem; }
.kepek { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.kepek span { display: block; font: .8rem var(--sans); color: var(--halvany); }

/* ---------- Felvétel ---------- */
.morzsa { font: 500 .95rem var(--sans); margin-bottom: .8rem; display: flex; flex-wrap: wrap; gap: .3rem .8rem; color: var(--halvany); }
.felvetel-fej h1 { font-family: var(--serif); font-weight: 620; max-width: 30ch; }
.felvetel-eloado { font-size: 1.2rem; }
.felvetel-test { display: grid; gap: 2rem 3rem; grid-template-columns: minmax(0, 1fr); margin-top: 2rem; align-items: start; }
@media (min-width: 960px) { .felvetel-test { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
.vers { font-size: 1.08rem; line-height: 1.75; white-space: normal; padding: 1.2rem 1.4rem; background: var(--lap); border-left: 3px solid var(--indigo); }
.szomszedok { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; margin-top: 3rem; padding-top: 1rem; border-top: 1px solid var(--vonal); font-family: var(--sans); font-size: .95rem; }
.szomszedok .kovetkezo { text-align: right; }
.szomszedok .vissza { text-align: center; }
.szomszedok .halvany { display: block; font-size: .85rem; }
@media (max-width: 600px) { .szomszedok { grid-template-columns: 1fr 1fr; } .szomszedok .vissza { grid-column: 1 / -1; order: -1; } }

/* ---------- Keresés ---------- */
.kereso-urlap { max-width: 52rem; margin-bottom: 1.5rem; }
.kereso-sor { display: flex; border: 1.5px solid var(--indigo); border-radius: 7px; overflow: hidden; background: var(--lap); }
.kereso-sor input { flex: 1; min-width: 0; border: 0; border-radius: 0; padding: .85rem 1rem; font-size: 1.05rem; }
.kereso-sor button { border: 0; background: var(--indigo); color: #fff; font: 600 1rem var(--sans); padding: 0 1.4rem; cursor: pointer; }
.tovabbi { margin-top: .8rem; font-family: var(--sans); font-size: .95rem; }
.tovabbi summary { cursor: pointer; color: var(--indigo-vilagos); }
.tovabbi-mezok { display: flex; flex-wrap: wrap; gap: .8rem 1.2rem; margin-top: .8rem; align-items: end; }
.tovabbi-mezok label { display: flex; flex-direction: column; gap: .25rem; color: var(--halvany); }
.tovabbi-mezok input[type=number] { width: 7rem; }
.sugo { font-size: .9rem; color: var(--halvany); margin-top: .8rem; }
.aktiv-szurok { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; font-family: var(--sans); font-size: .95rem; }
.aktiv-szurok li { background: var(--mosott); border-radius: 999px; padding: .3rem .4rem .3rem .9rem; display: flex; align-items: center; gap: .4rem; }
.aktiv-szurok a { text-decoration: none; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; }
.aktiv-szurok a:hover { background: var(--piros); color: #fff; }
.talalat-racs { display: grid; gap: 2rem 3rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .talalat-racs { grid-template-columns: minmax(0, 1fr) 17rem; } }
.album-talalatok { margin-bottom: 2.5rem; }
.aspektusok section { margin-bottom: 1.6rem; }
.aspektusok h3 { font-size: .95rem; border-bottom: 2px solid var(--tinta); padding-bottom: .3rem; }
.aspektusok ul { list-style: none; padding: 0; margin: 0; font-size: .97rem; }
.aspektusok li { display: flex; justify-content: space-between; gap: .5rem; padding: .2rem 0; }
.aspektusok a { text-decoration: none; }
.aspektusok a:hover { text-decoration: underline; }
.felvetelek { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--tinta); }
.felv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); gap: .3rem 1.5rem; padding: .75rem 0; border-bottom: 1px solid var(--vonal); }
.felv-cim { font-size: 1.05rem; color: var(--tinta); text-decoration: none; font-weight: 520; }
.felv-cim:hover { color: var(--piros); text-decoration: underline; }
.felv-adatok { font-size: .92rem; color: var(--halvany); line-height: 1.45; }
.felv-adatok a { color: inherit; }
.felv-album { font: .88rem/1.4 var(--sans); }
.felv-album a { color: var(--halvany); }
@media (max-width: 700px) { .felv { grid-template-columns: 1fr; } }

/* ---------- Listák ---------- */
.nevlista { list-style: none; padding: 0; margin: 0; columns: 18rem; column-gap: 2.5rem; }
.nevlista li { break-inside: avoid; padding: .3rem 0; border-bottom: 1px solid var(--vonal); display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem; }
.nevlista .db { margin-left: auto; }
.betucsoportok { columns: 16rem; column-gap: 2.5rem; }
.betucsoportok section { break-inside: avoid-column; margin-bottom: 1.4rem; }
.betucsoportok h2 { font-size: 1.4rem; color: var(--indigo-vilagos); border-bottom: 2px solid var(--tinta); padding-bottom: .2rem; margin-bottom: .4rem; }
.betucsoportok ul { list-style: none; padding: 0; margin: 0; }
.betucsoportok li { display: flex; justify-content: space-between; gap: .5rem; padding: .15rem 0; }
.tablazat { width: 100%; border-collapse: collapse; font-size: .97rem; }
.tablazat th { text-align: left; font: 550 .88rem var(--sans); color: var(--halvany); border-bottom: 2px solid var(--tinta); padding: .4rem .6rem .4rem 0; }
.tablazat td { padding: .45rem .6rem .45rem 0; border-bottom: 1px solid var(--vonal); vertical-align: top; }
.tablazat .szam { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { .tablazat thead { display: none; } .tablazat tr { display: block; padding: .5rem 0; border-bottom: 1px solid var(--vonal); } .tablazat td { display: inline; border: 0; padding: 0 .6rem 0 0; } .tablazat td:first-child { display: block; font-weight: 550; } }
.tajak-racs { display: grid; gap: 2rem 3rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.nagytaj h2 { border-bottom: 2px solid var(--tinta); padding-bottom: .3rem; }
.nagytaj h2 a { text-decoration: none; color: var(--tinta); }
.nagytaj h3 { color: var(--halvany); font-size: .9rem; margin-top: 1rem; }
.taj-fa, .taj-fa ul { list-style: none; padding: 0; margin: 0; }
.taj-fa ul { padding-left: 1.1rem; border-left: 1px solid var(--vonal); margin: .1rem 0 .3rem .3rem; }
.taj-fa li { padding: .12rem 0; }
.vesszos { list-style: none; padding: 0; margin: 0; }
.vesszos li { display: inline; }
.vesszos li:not(:last-child)::after { content: ", "; }
.entitas section { margin-top: 2.5rem; }
.bevezeto { margin-top: 1.5rem; }
.olvasnivalo { max-width: 40rem; }
.olvasnivalo p { font-size: 1.1rem; }
.hiba-lap, .kis-urlap { max-width: 28rem; margin: 2rem 0; }
.kis-urlap form { display: flex; flex-direction: column; gap: .4rem; }
.kis-urlap label { font: 500 .95rem var(--sans); margin-top: .6rem; }
.kis-urlap button { margin-top: 1.2rem; align-self: flex-start; }

/* ---------- Lábléc ---------- */
.lablec { border-top: 1px solid var(--vonal); background: var(--lap); font: .92rem/1.5 var(--sans); color: var(--halvany); }
.lablec-belso { padding-top: 1.5rem; padding-bottom: 1.5rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; }
.lablec p { margin: 0; max-width: 40rem; }
.lablec-fiok { display: flex; flex-direction: column; gap: .4rem; }
.lablec-linkek { display: flex; gap: .4rem 1.2rem; flex-wrap: wrap; align-items: baseline; }
@media (min-width: 720px) { .lablec-fiok { align-items: flex-end; text-align: right; } .lablec-linkek { justify-content: flex-end; } }

/* ---------- Lejátszó ---------- */
.lejatszo {
  position: sticky; bottom: 0; z-index: 20; display: flex; align-items: center; gap: .6rem;
  background: var(--indigo-mely); color: #fff; padding: .6rem var(--gutter); font-family: var(--sans);
  box-shadow: 0 -4px 16px rgba(0,0,0,.2);
}
.lejatszo[hidden] { display: none; }
.lj-gomb { background: transparent; border: 0; color: #fff; font-size: 1rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; cursor: pointer; }
.lj-gomb:hover { background: rgba(255,255,255,.12); }
.lj-fo { background: var(--piros); }
.lj-fo:hover { background: #8f2620; }
.lj-info { display: flex; flex-direction: column; min-width: 0; flex: 0 1 22rem; }
.lj-cim { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 550; }
.lj-ido { font-size: .85rem; opacity: .75; font-variant-numeric: tabular-nums; }
.lj-csuszka { flex: 1; accent-color: var(--piros); min-width: 4rem; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media print { .fejlec, .fomenu, .lablec, .lejatszo, .album-gombok, .sav-play { display: none !important; } body { background: #fff; } }
.album-csempe .lemez-cimke { font-size: 1.05rem; }
@media (max-width: 759px) { .album-kep { max-width: 11rem; } .album-kep .lemez.nagy .lemez-cimke { font-size: 2rem; } }
a.sav-play { display: inline-grid; place-items: center; text-decoration: none; }
code.utvonal { word-break: break-all; font-size: .85em; }
.felallas-lista { color: var(--halvany); font-size: .92em; }
.felallas-lista a { color: inherit; }
.hangszer { color: var(--halvany); font-style: italic; }
.sugo code { white-space: nowrap; }
.kezdo-ujak .album-racs { margin-top: 1.4rem; }   /* a borítók a Böngészés első sorával egy magasságban kezdődnek */
/* települések egy tájegység, vármegye vagy nagytáj oldalán */
.telepules-racs { list-style: none; padding: 0; margin: 0 0 2rem; columns: 14rem auto; column-gap: 2rem; font-family: var(--sans); }
.telepules-racs li { break-inside: avoid; padding: .22rem 0; border-bottom: 1px solid var(--vonal); display: flex; justify-content: space-between; gap: .6rem; }
.telepules-mind summary { margin-bottom: .8rem; }
/* dalszövegek */
.dal + .dal { margin-top: 1.6rem; }
.dal-cim { font-size: 1rem; margin: 0 0 .5rem; }
.dal-jelentes { margin-top: .7rem; font-size: .95rem; }
.dal-meta { font-family: var(--sans); font-size: .88rem; margin-top: .5rem; }
.dal.nem-nyilvanos { opacity: .75; }

/* YouTube- és Spotify-lejátszó (kattintásra töltődik be) */
.beagyazasok { display: grid; gap: .75rem; margin-bottom: 2rem; }
.beagyazas-gomb { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem; width: 100%; text-align: left; padding: .8rem 1rem;
  border: 1px solid var(--vonal); border-radius: 8px; background: var(--lap, transparent); color: var(--tinta); font: inherit; cursor: pointer; }
.beagyazas-gomb:hover, .beagyazas-gomb:focus-visible { border-color: var(--tinta); }
.beagyazas-ikon { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--tinta); color: var(--papir); font-size: .8rem; }
.beagyazott { width: 100%; border: 0; border-radius: 8px; }
.beagyazott-video { aspect-ratio: 16 / 9; height: auto; }
/* YouTube-előnézet: a borító fekete 16:9-es dobozban, saját lejátszógombbal; kattintásra jön a valódi lejátszó */
.yt-elonezet { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; padding: 0; border: 0; border-radius: 8px; overflow: hidden;
  background: #000; cursor: pointer; color: #fff; }
.yt-elonezet img { display: block; height: 100%; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; }
.yt-gomb { position: absolute; left: 50%; top: 50%; width: 4.2rem; height: 4.2rem; margin: -2.1rem 0 0 -2.1rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--piros); color: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.45); transition: transform .15s ease; }
.yt-gomb svg { margin-left: 3px; }
.yt-felirat { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.4rem .9rem .6rem; font: 600 .9rem/1.2 var(--sans); text-align: left;
  background: linear-gradient(transparent, rgba(0,0,0,.75)); }
.yt-elonezet:hover .yt-gomb, .yt-elonezet:focus-visible .yt-gomb { transform: scale(1.08); }
.yt-elonezet:focus-visible { outline: 3px solid var(--tinta); outline-offset: 3px; }
.yt-megjegyzes { margin: .4rem 0 0; font: .8rem var(--sans); color: var(--halvany); }

/* hosszú, szóköz nélküli szövegek (webcímek, azonosítók) törése keskeny képernyőn */
.linkek a, .szoveg, .adatok dd, .vers, .utvonal { overflow-wrap: anywhere; }

/* ---------- Szerkesztői útmutató ---------- */
.utmutato { max-width: 46rem; }
.utmutato h2 { margin-top: 2.4rem; scroll-margin-top: 1rem; }
.utmutato li { margin-bottom: .35rem; }
.utmutato table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.4rem; font: .95rem/1.45 var(--sans); }
.utmutato th, .utmutato td { text-align: left; vertical-align: top; padding: .5rem .7rem; border-bottom: 1px solid var(--vonal); }
.utmutato th { font-weight: 650; border-bottom: 2px solid var(--tinta); }
.utmutato td:first-child { width: 34%; }
.tartalomjegyzek { background: var(--mosott, var(--lap)); border: 1px solid var(--vonal); border-radius: 8px; padding: .8rem 1.2rem; margin: 1.5rem 0 2rem; font-family: var(--sans); }
.tartalomjegyzek h2 { margin: 0 0 .4rem; font-size: 1rem; }
.tartalomjegyzek ol { margin: 0; padding-left: 1.3rem; columns: 2 16rem; }
@media (max-width: 600px) { .utmutato td:first-child { width: auto; } .utmutato th, .utmutato td { padding: .45rem .4rem; } }
.utmutato a { overflow-wrap: anywhere; }
.borito-forras { margin: .4rem 0 0; font: .78rem var(--sans); color: var(--halvany); }

/* Képnézegető (album képei) */
.nezegeto-nyitva { overflow: hidden; }
.nezegeto { position: fixed; inset: 0; z-index: 1000; background: #0d0f13; display: grid; grid-template-columns: auto minmax(0,1fr) auto;
  grid-template-rows: auto minmax(0,1fr); align-items: center; color: #fff; }
.nezegeto[hidden] { display: none; }
.nezegeto-fej { grid-column: 1 / -1; display: flex; align-items: center; gap: .8rem; padding: .5rem .75rem; font: .9rem var(--sans); }
.nezegeto-szam { font-weight: 600; white-space: nowrap; }
.nezegeto-felirat { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #d6d9e0; }
.nezegeto-kep { grid-column: 2; grid-row: 2; justify-self: center; max-width: 100%; max-height: calc(100vh - 4.25rem); max-height: calc(100dvh - 4.25rem); object-fit: contain; }
.nezegeto-gomb { display: inline-grid; place-items: center; min-width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; background: rgba(255,255,255,.12);
  color: #fff; font: 1.4rem/1 var(--sans); cursor: pointer; text-decoration: none; }
.nezegeto-gomb:hover, .nezegeto-gomb:focus-visible { background: rgba(255,255,255,.28); outline: 2px solid #fff; outline-offset: 2px; }
.nezegeto-elozo, .nezegeto-kovetkezo { grid-row: 2; margin: 0 .5rem; font-size: 2rem; }
.nezegeto-elozo { grid-column: 1; } .nezegeto-kovetkezo { grid-column: 3; }
@media (max-width: 600px) {
  .nezegeto { grid-template-columns: minmax(0,1fr); }
  .nezegeto-kep { grid-column: 1; }
  .nezegeto-elozo, .nezegeto-kovetkezo { position: absolute; bottom: 1rem; margin: 0; background: rgba(0,0,0,.55); }
  .nezegeto-elozo { left: 1rem; } .nezegeto-kovetkezo { right: 1rem; }
}
.kepek img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 3px; background: var(--mosott); }