/* ============================================================
   DAISYBETS — közös stílus (index, aszf, felelos-fogadas)

   SZERKEZET  a doritippek.hu-tól: egymásra pakolt, lekerekített,
              saját hátterű panelek kis réssel.
   UI-NYELV   az aisummitbudapest.hu-tól: egyetlen geometrikus sans,
              óriási 800-as címek, pill-badge-ek, és a jellegzetes
              aszimmetrikus sarok (három kerek, egy szögletes).
   SAJÁT      margaréta-arany akcens, és a --szirom sarok, ami maga is
              egy sziromforma — ez a márkajel a gombokon és felületeken.

   FONTOS: az oldal VÉGIG sötét. A világos felület nem panel-méretben
   jelenik meg, csak kis elemeken (logócsempe), különben a lap közepe
   kiugrik a rendszerből. Egyetlen világos panel van, az arany —
   az szándékos, az a kiemelés helye.

   MÉLYSÉGSKÁLA — minden felület ebből a négy szintből jön:
     s0 #0a0e19  a lap alja / hero
     s1 #111726  panel
     s2 #19203233 kártya a panelen
     s3 #222b40  emelt / hover
   ============================================================ */

:root {
  --s0: #0a0e19;
  --s1: #111726;
  --s2: #192032;
  --s3: #222b40;

  --amber: #f5b02e;
  --amber-halvany: rgba(245, 176, 46, 0.14);
  --mint: #2bb673;

  --txt: #eef2f7;
  --txt-lagy: #97a2b5;
  --txt-halk: #6c778c;

  --keret: rgba(238, 242, 247, 0.10);
  --keret-eros: rgba(238, 242, 247, 0.20);

  /* A SZIGNATÚRA: sziromsarok. Három sarok kerek, a bal alsó szögletes. */
  --szirom: 1.15rem 1.15rem 1.15rem 0;
  --szirom-nagy: 1.75rem 1.75rem 1.75rem 0;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--s0);
  color: var(--txt);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }

/* ======================= PANELEK ======================= */

/* Mobilon a beágyazott paddingek összeadódnak (panel-margó + panel-padding +
   kártya-padding), és elveszik a szövegtől a szélességet — ettől nyúlik
   magasra minden. Ezért oldalt szűkebb, függőlegesen bővebb a ritmus. */
.panel {
  margin-left: 0.375rem;
  margin-right: 0.375rem;
  border-radius: 1.35rem;
  overflow: hidden;
  position: relative;
}
@media (min-width: 768px) {
  .panel { margin-left: 1rem; margin-right: 1rem; border-radius: 2.5rem; }
}

.panel-belso { max-width: 80rem; margin: 0 auto; padding: 4.25rem 0.85rem; position: relative; }
@media (min-width: 768px) { .panel-belso { padding: 6rem 3rem; } }

.p-s0 { background: var(--s0); }
.p-s1 { background: var(--s1); }
.p-s2 { background: var(--s2); }
.p-amber { background: var(--amber); color: #14181f; }

/* Finom felső fénycsík — a paneleknek adja meg a "felület" érzetet */
.p-s1::before, .p-s2::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(238, 242, 247, .16), transparent);
  z-index: 2;
}

/* ======================= ÁTVEZETÉS PANELEK KÖZÖTT ======================= */
/* Az arany panelről a sötétre váltás vágásnak hatott. Két lépésben simítjuk:
   az arany panel alja sötétedik, a következő panel teteje pedig visszahozza
   az arany utóhangját — így a szem folyamatosnak látja a váltást. */

.p-amber::after {
  content: "";
  position: absolute; inset: auto 0 0 0; height: 45%;
  background: linear-gradient(180deg, transparent, rgba(20, 24, 31, 0.22));
  pointer-events: none;
}

.utohang::after {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 16rem;
  background: linear-gradient(180deg, rgba(245, 176, 46, 0.11), transparent 78%);
  pointer-events: none;
  z-index: 0;
}
.utohang > .panel-belso { z-index: 1; }

/* A panelek közti hézagban álló átvezető sáv */
.atmenet {
  display: flex; align-items: center; gap: 1rem;
  max-width: 80rem; margin: 0 auto;
  padding: 1.65rem 1.25rem;
}
@media (min-width: 768px) { .atmenet { padding: 2.25rem 3rem; } }

.atmenet-vonal { flex: 1; height: 1px; background: var(--keret); }

.atmenet-cimke {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--txt-halk);
  white-space: nowrap;
}
.atmenet-cimke svg { color: var(--amber); animation: lebeg 2.8s ease-in-out infinite; }
@keyframes lebeg { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(3px) } }

/* ======================= TIPOGRÁFIA ======================= */

/* A sorköz nem mehet 1.06 alá: a magyar ékezetek (ó, á, ű) és a lelógó
   szárak (y, g) ennél szűkebben összeérnek a kétsoros címeknél. */
h1, h2, h3, h4, .cim { font-weight: 800; letter-spacing: -0.035em; line-height: 1.08; }

.cim-xl { font-size: clamp(2.6rem, 8.5vw, 5.5rem); }
.cim-l { font-size: clamp(2rem, 5vw, 3.4rem); }
.cim-m { font-size: clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing: -0.03em; }

p { line-height: 1.65; }

.rovat {
  font-weight: 800; font-size: 0.75rem; letter-spacing: 0.16em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 0.7rem; color: var(--amber);
}
.rovat::after { content: ""; height: 2px; width: 2rem; background: currentColor; opacity: .55; }

.halk { color: var(--txt-lagy); }

/* ======================= BADGE / CHIP ======================= */

.badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.4rem 0.85rem; border-radius: 999px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
}
.badge-amber { background: var(--amber); color: #14181f; }
.badge-vonal { border: 1px solid var(--keret); color: var(--txt-lagy); }
.badge-mint { background: rgba(43, 182, 115, .16); color: var(--mint); }

/* Chip: a tényadatok NEM csupasz szövegként állnak, hanem felületen */
.chip {
  display: inline-block;
  background: var(--s3);
  border: 1px solid var(--keret);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem; font-weight: 600; color: var(--txt-lagy);
}

.pont { width: .45rem; height: .45rem; border-radius: 999px; background: currentColor; animation: pont 2.4s ease-in-out infinite; }
@keyframes pont { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

/* ======================= GOMBOK ======================= */

.gomb {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  min-height: 3.25rem; padding: 0 1.6rem;
  border-radius: var(--szirom);
  font-weight: 700; font-size: 0.9375rem;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
  border: 1px solid transparent;
}
.gomb-amber { background: var(--amber); color: #14181f; }
.gomb-amber:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px rgba(245, 176, 46, .9); }

.gomb-vonal { border-color: var(--keret-eros); color: var(--txt); }
.gomb-vonal:hover { background: rgba(238, 242, 247, .07); transform: translateY(-2px); }

.gomb-sotet { background: #14181f; color: var(--amber); }
.gomb-sotet:hover { transform: translateY(-2px); }

/* ======================= NAV ======================= */

.nav-uveg {
  background: rgba(10, 14, 25, 0.84);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--keret);
}

.sziromjel { width: 1.9rem; height: 1.9rem; flex-shrink: 0; }

/* ======================= KÁRTYA — a közös felület-alap ======================= */
/* Ez szünteti meg a "csupasz HTML" hatást: minden tartalmi egység
   felületen ül, kerete van, és reagál a mutatóra. */

.kartya {
  background: var(--s2);
  border: 1px solid var(--keret);
  border-radius: var(--szirom-nagy);
  transition: transform .25s ease, border-color .25s ease, background-color .25s ease, box-shadow .25s ease;
}
a.kartya:hover, .kartya-hover:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 176, 46, .4);
  background: var(--s3);
  box-shadow: 0 26px 50px -30px rgba(0, 0, 0, .95);
}

/* ======================= IRODA-KÁRTYA ======================= */

/* Mobilon a logó és a név egy sorban ül — egymás alatt túl magas lenne. */
.iroda {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "logo nev"
    "torzs torzs"
    "cta cta";
  column-gap: 1rem;
  row-gap: 1.35rem;
  padding: 1.35rem 1.1rem;
  margin-bottom: 1rem;
  align-items: center;
}
@media (min-width: 900px) {
  .iroda {
    grid-template-columns: 9.5rem 1fr 12rem;
    grid-template-areas:
      "logo nev cta"
      "logo torzs cta";
    column-gap: 2.5rem;
    row-gap: 0.85rem;
    align-items: start;
    padding: 2rem 2.15rem;
    margin-bottom: 1.1rem;
  }
  .iroda-plakat { align-self: center; }
  .iroda-cta { align-self: center; }
}

.iroda-logo { grid-area: logo; }
.iroda-nev { grid-area: nev; }
.iroda-torzs { grid-area: torzs; }
.iroda-cta { grid-area: cta; }

.iroda-plakat {
  width: 6.75rem; height: 4.25rem;
  border-radius: var(--szirom);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  padding: 0.55rem;
  flex-shrink: 0;
}
@media (min-width: 900px) {
  .iroda-plakat { width: 9.5rem; height: 5.25rem; padding: 0.7rem; }
}
.iroda-plakat img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }

.iroda-chipek { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.1rem; }

/* ======================= HÍREK ======================= */

.vezer-kep {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--szirom-nagy) ;
  background: var(--s3);
}

.rovid { display: flex; gap: 1rem; padding: 1rem; align-items: center; }
.rovid img {
  width: 5.5rem; height: 4.5rem; object-fit: cover; border-radius: var(--szirom);
  flex-shrink: 0; background: var(--s3);
}
.rovid h3 { font-size: 1rem; line-height: 1.35; letter-spacing: -0.02em; }

/* A hírlista nem csupasz linksor: egy felületen ül, belül elválasztókkal */
.hirlista { background: var(--s2); border: 1px solid var(--keret); border-radius: var(--szirom-nagy); overflow: hidden; }
.hirtetel { display: block; padding: 1.25rem 1.35rem; border-top: 1px solid var(--keret); transition: background-color .2s ease; }
.hirtetel:first-child { border-top: none; }
.hirtetel:hover { background: var(--s3); }
.hirtetel h3 { font-size: 1rem; line-height: 1.35; letter-spacing: -0.02em; }
@media (min-width: 900px) {
  .hirlista { display: grid; grid-template-columns: 1fr 1fr; }
  .hirtetel:nth-child(2) { border-top: none; }
  .hirtetel:nth-child(even) { border-left: 1px solid var(--keret); }
}

.hir-forras {
  font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--txt-halk); margin-bottom: 0.4rem;
}

a.vezer:hover h2, a.rovid:hover h3, a.hirtetel:hover h3 { color: var(--amber); }

/* ======================= SZÖVEGES OLDALAK ======================= */

.szoveg { color: var(--txt-lagy); }
.szoveg h2 {
  color: var(--txt); font-size: 1.5rem; line-height: 1.2;
  margin: 2.5rem 0 0.9rem; padding-top: 1.35rem; border-top: 1px solid var(--keret);
}
.szoveg h2:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.szoveg h3 { color: var(--txt); font-size: 1.1rem; margin: 1.5rem 0 0.4rem; }
.szoveg p { margin-bottom: 1rem; max-width: 68ch; }
.szoveg strong { color: var(--txt); font-weight: 700; }
.szoveg a { color: var(--amber); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.szoveg ul { margin: 0 0 1rem 1.2rem; max-width: 68ch; line-height: 1.65; }
.szoveg li { margin-bottom: 0.35rem; }

/* Élesítés előtt keresd rá: "KITÖLTENDŐ" */
.kitoltendo {
  border-left: 3px solid var(--amber);
  background: var(--amber-halvany);
  border-radius: 0 var(--szirom);
  padding: 1rem 1.2rem;
  margin-bottom: 1.35rem;
  max-width: 68ch;
  font-size: 0.9375rem; line-height: 1.6; color: var(--txt);
}

.szabaly {
  background: var(--s2); border: 1px solid var(--keret); border-radius: var(--szirom);
  padding: 1.25rem 1.35rem; margin-bottom: 0.75rem;
}
.szabaly h3 { margin: 0 0 0.35rem; }
.szabaly p { margin: 0; max-width: 64ch; }
@media (min-width: 768px) {
  .szabaly { display: grid; grid-template-columns: 15rem 1fr; gap: 2rem; align-items: baseline; }
}

.kerdesek { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 0.6rem; }
.kerdesek li {
  background: var(--s2); border: 1px solid var(--keret); border-radius: var(--szirom);
  padding: 0.95rem 1.15rem 0.95rem 3rem; position: relative; max-width: 64ch;
}
.kerdesek li::before {
  content: "?"; position: absolute; left: 1.15rem; top: 0.9rem;
  font-weight: 800; font-size: 1.25rem; color: var(--amber); line-height: 1.2;
}

/* ======================= LÁBLÉC ======================= */

.lablec-link { display: inline-block; padding: 0.5rem 0; color: var(--txt); font-size: 0.9375rem; transition: color .2s; }
.lablec-link:hover { color: var(--amber); }
.lablec-cim { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--txt-halk); margin-bottom: .75rem; font-weight: 700; }

/* ======================= MEGJELENÉS GÖRGETÉSRE ======================= */

.reveal {
  opacity: 0; transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
  will-change: opacity, transform;
}
.reveal.latszik { opacity: 1; transform: none; }

a:focus-visible, button:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .pont, .atmenet-cimke svg { animation: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}