/* ==========================================================================
   CIKKEK: KÖZÖS SZEKCIÓ FEJLÉC + KÁRTYA KOMPONENSEK (index / ai-hirek / ai-penz)
   ========================================================================== */

/* --- Szekció fejléc: cím balra + „Összes →" link jobbra ------------------ */
.section-articles {
    margin: 40px auto;
    max-width: 1240px;
    padding: 0 24px;
}

.section-articles-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding-bottom: 12px;
    margin-bottom: 24px;
    border-bottom: 1px solid var(--steel-100);
}

.section-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--steel-900);
    margin: 0;
    letter-spacing: -0.01em;
}

.section-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-orange);
    text-decoration: none;
    transition: color 0.15s ease;
}

.section-link:hover { color: var(--accent-orange-strong); }

.section-link i[data-lucide],
.section-link svg[data-lucide] {
    width: 14px;
    height: 14px;
}

/* --- Article grid (általános) -------------------------------------------- */
.article-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    /* a listaoldali elrendezés korlátai — korábban külön blokkban duplikálva */
    max-width: 1180px;
    margin: 0 auto;
    padding: 0;
}

.article-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.article-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 900px) {
    .article-grid--3,
    .article-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    .article-grid,
    .article-grid--3,
    .article-grid--4 { grid-template-columns: 1fr; }
}

/* --- Egy cikk-kártya ----------------------------------------------------- */
.article-card {
    display: flex;
    flex-direction: column;
    background: var(--bg-card);
    border: 1px solid var(--steel-100);
    border-radius: 4px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    min-height: 340px;
}

/* Finom hover-lift: 3px emelkedés + lágy árnyék + a borító enyhe zoomja.
   Visszafogott, hogy prémium maradjon — nem "ugrál", csak jelez. */
.article-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(27, 21, 17, 0.10);
    border-color: var(--steel-200);
}
.article-card:hover .article-card-cover img {
    transform: scale(1.03);
}

.article-card-cover {
    position: relative;
    height: 180px;
    overflow: hidden;
    background: var(--bg-card-alt);
}

.article-card-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.article-card-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--steel-300);
}

.article-card-cover-placeholder i[data-lucide],
.article-card-cover-placeholder svg[data-lucide] {
    width: 32px;
    height: 32px;
}

.article-card-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px 16px;
    flex: 1;
}

.article-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--steel-900);
    line-height: 1.35;
    margin: 4px 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-card-excerpt {
    font-size: 13px;
    color: var(--steel-500);
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding-top: 8px;
    font-size: 12px;
    color: var(--steel-400);
    border-top: 1px solid var(--steel-100);
}

.article-card-views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.article-card-views i[data-lucide],
.article-card-views svg[data-lucide] {
    width: 13px;
    height: 13px;
}

/* --- Badge-ek — csiszolt sötét fém, a kategória-szín 2px-es él-csíkként
   világít át a lapka alján (ugyanaz az anyag, mint a cikk-hero és a
   felolvasó-lapka — az oldal minden kategória-badge-e egy családba tartozik) */
.article-badge {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    align-self: flex-start;
    display: inline-block;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #f2eee4;
    background: #40382f;   /* alap kategória-szín — a modifierek felülírják */
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 1px 3px rgba(13, 13, 13, 0.25);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Fém-fedés a kategória-szín fölött — alul 2px színes él-csík marad szabadon */
.article-badge::before {
    content: "";
    position: absolute;
    inset: 0 0 2px 0;
    z-index: -1;
    background:
        radial-gradient(135% 120% at 50% -30%, rgba(191, 176, 138, 0.14) 0%, rgba(191, 176, 138, 0) 60%),
        linear-gradient(180deg, rgba(46, 46, 46, 0.93) 0%, rgba(23, 23, 23, 0.95) 55%, rgba(13, 13, 13, 0.96) 100%);
    pointer-events: none;
}

/* Prémium, meleg badge-paletta — mind az orange+charcoal családba illik */
.article-badge--default   { background: #4a423a; }
.article-badge--dev       { background: var(--accent-orange); }
.article-badge--hardware  { background: #5f5f5f; }   /* acél */
.article-badge--software  { background: #7a2417; }   /* bor-vörös */
.article-badge--robotics  { background: #a82a58; }   /* meleg koral-pink */
.article-badge--policy    { background: #96700a; }   /* arany */
.article-badge--stock     { background: #2f6b3c; }   /* mély zöld */
.article-badge--crypto    { background: #5c3390; }   /* mély lila */
.article-badge--startup   { background: var(--accent-orange); }
.article-badge--ipo       { background: #24405e; }   /* mély kék */
.article-badge--market    { background: #3c5a5a; }   /* mély teal */

/* --- Magazin layout (featured + small grid) ------------------------------ */
.articles-magazine {
    display: grid;
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
    gap: 24px;
    align-items: stretch;
}

.articles-grid-small {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
}

/* desktop only layout for small magazine cards to fit next to hero */
@media (min-width: 1025px) {
    /* Ugyanaz a fix magasság, mint a kiemelt kártyáé (560px) → a két oszlop
       pontosan egy vonalban zár, a jobb oszlop nem marad rövidebb. */
    .articles-grid-small {
        min-height: 560px;
    }

    .articles-grid-small .article-card {
        position: relative;
        display: block;
        min-height: auto;
        height: 100%;
        color: #ffffff;
        border-radius: var(--radius-sharp, 4px);
        overflow: hidden;
        text-decoration: none;
    }
    
    .articles-grid-small .article-card-cover {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        z-index: 1;
        background: var(--steel-100);
    }
    
    .articles-grid-small .article-card-cover img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    
    /* Cover overlay gradient */
    .articles-grid-small .article-card::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.45) 100%);
        z-index: 2;
        pointer-events: none;
    }
    
    .articles-grid-small .article-card-body {
        position: absolute;
        left: 16px;
        right: 16px;
        bottom: 16px;
        padding: 16px 20px;
        z-index: 3;
        background: rgba(255, 255, 255, 0.07);
        backdrop-filter: blur(24px) saturate(160%);
        -webkit-backdrop-filter: blur(24px) saturate(160%);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: var(--radius-sharp, 4px);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
    }

    .articles-grid-small .article-card-title {
        font-size: 15px;
        font-weight: 800;
        color: #ffffff;
        margin: 6px 0 8px;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    
    .articles-grid-small .article-badge {
        position: absolute;
        top: 16px;
        left: 16px;
        z-index: 2;
        font-size: 10px;
        padding: 4px 8px;
        border-radius: var(--radius-sharp, 4px);
        text-shadow: none;
    }
}

@media (max-width: 1024px) {
    .articles-magazine { grid-template-columns: 1fr; }
    .articles-grid-small { 
        grid-template-columns: repeat(2, minmax(0, 1fr)); 
        grid-template-rows: auto;
    }
}

@media (max-width: 640px) {
    .articles-grid-small { grid-template-columns: 1fr; }
}

.article-card-featured {
    position: relative;
    display: block;
    /* A magazin-rács mindkét oszlopának gyerekei abszolút pozicionáltak (nincs
       saját magasságuk), ezért a magasságot fix értékkel adjuk meg — ugyanezt
       kapja a jobb oldali .articles-grid-small is (lásd lentebb), így a kettő
       PONTOSAN egy vonalban zár, semmi nem lóg ki. */
    min-height: 560px;
    border-radius: var(--radius-sharp, 4px);
    overflow: hidden;
    color: #ffffff;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: var(--steel-800);
}

.article-card-featured:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
}

.article-card-featured-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.article-card-featured:hover .article-card-featured-img { transform: scale(1.03); }

.article-card-featured-img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.35);
    background: #2a2825;
}

.article-card-featured-img--placeholder i[data-lucide],
.article-card-featured-img--placeholder svg[data-lucide] {
    width: 48px;
    height: 48px;
}

.article-card-featured-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(0, 0, 0, 0.4) 100%);
}

.article-card-featured-badge {
    position: absolute;
    top: 16px;
    left: 16px;
    z-index: 2;
}

.article-card-featured-breaking {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    padding: 3px 10px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #ffffff;
    background: var(--danger);
    border-radius: 4px;
    animation: article-breaking-pulse 2s infinite;
}

@keyframes article-breaking-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.6; }
}

.article-card-featured-body {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 20px;
    padding: 24px 28px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(24px) saturate(160%);
    -webkit-backdrop-filter: blur(24px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius-sharp, 4px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8), 0 2px 10px rgba(0, 0, 0, 0.5);
}

.article-card-featured-title {
    font-size: 28px;
    font-weight: 800;
    line-height: 1.35;
    margin: 0 0 12px;
    color: #ffffff;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-card-featured-meta {
    display: flex;
    gap: 14px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}

.article-card-featured-meta i[data-lucide],
.article-card-featured-meta svg[data-lucide] {
    width: 13px;
    height: 13px;
    vertical-align: -2px;
    margin-right: 4px;
}

/* --- Kártya "gyorshír" jelölő a kis kártyákon --------------------------- */
.article-card-breaking {
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 3px 8px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #ffffff;
    background: var(--danger);
    border-radius: 4px;
    animation: article-breaking-pulse 2s infinite;
    z-index: 2;
}

/* --- Üres állapot -------------------------------------------------------- */
.article-public-empty {
    text-align: center;
    padding: 60px 24px;
    background: #ffffff;
    border: 1px solid var(--steel-100);
    border-radius: 4px;
    color: var(--steel-500);
}

.article-public-empty--section { padding: 40px 24px; }

.article-public-empty i[data-lucide],
.article-public-empty svg[data-lucide] {
    width: 36px;
    height: 36px;
    color: var(--steel-300);
    margin-bottom: 12px;
}

.article-public-empty h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--steel-700);
    margin: 0 0 6px;
}

.article-public-empty p {
    margin: 0;
    font-size: 13.5px;
}



/* ==========================================================================
   AI HÍREK / AI PÉNZ — Frontend lista oldal
   ========================================================================== */
/* A lista-hero a közös sötét sávot használja (01-base .page-hero),
   csak kisebb alsó levegővel a szűrő-tabok előtt. */
.page-hero--articles {
    margin-bottom: 24px;
}

.article-public-filters {
    max-width: 1180px;
    margin: 0 auto 24px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.article-public-search {
    position: relative;
    display: flex;
    gap: 8px;
}

.article-public-search i[data-lucide],
.article-public-search svg[data-lucide] {
    position: absolute;
    top: 50%;
    left: 12px;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: var(--steel-400);
    pointer-events: none;
}

.article-public-search input {
    flex: 1;
    height: 42px;
    padding: 0 14px 0 36px;
    background: #ffffff;
    border: 1px solid var(--steel-200);
    border-radius: 4px;
    font-size: 14px;
    color: var(--steel-800);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.article-public-search input:focus {
    border-color: var(--accent-orange);
    box-shadow: 0 0 0 3px rgba(191, 176, 138, 0.15);
}

.article-public-search button {
    height: 42px;
    padding: 0 18px;
    background: var(--steel-900);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    font-weight: 700;
    font-size: 13.5px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.article-public-search button:hover { background: var(--steel-800); }

/* A hero-sávban NINCS alkategória-linksor (2026-07 kérés): csak
   "Kategória" eyebrow + kategórianév + leírás. Az alkategóriák a fejléc
   lenyíló menüjéből érhetők el. */

/* (Az .article-grid méret-korlátai a fájl eleji alap-blokkba olvadtak.) */

/* Lapozó */
.article-public-pager {
    max-width: 1180px;
    margin: 32px auto;
    padding: 0 24px;
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}

.article-public-pager-item {
    min-width: 36px;
    height: 36px;
    padding: 0 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1px solid var(--steel-200);
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    color: var(--steel-700);
    text-decoration: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(27, 25, 23, 0.05);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, transform 0.15s ease;
}

.article-public-pager-item:hover {
    border-color: rgba(191, 176, 138, 0.45);
    color: var(--steel-900);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 3px 8px rgba(191, 176, 138, 0.12);
}

.article-public-pager-item.is-active {
    background: var(--btn-grad-orange);
    border-color: var(--accent-orange-strong);
    color: #ffffff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    box-shadow: var(--btn-gloss), 0 2px 10px rgba(191, 176, 138, 0.28);
}

/* --------------------------------------------------------------------------
   PRÉMIUM LISTA-FINOMÍTÁS (AI Hírek / AI Pénz)
   Hero-eyebrow · kiemelt vezércikk · "További cikkek" szekció-fejléc
   -------------------------------------------------------------------------- */
.page-hero-eyebrow {
    display: inline-block;
    margin-bottom: 4px;
    font-family: 'Outfit', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #bfae88;
}

/* Kiemelt vezércikk — teljes szélességű magazin-kártya a lista tetején */
.article-lead-wrap {
    max-width: 1180px;
    margin: 0 auto 16px;
    padding: 0;
}
.article-card-featured--lead {
    min-height: 440px;
}
.article-card-featured--lead .article-card-featured-title {
    font-size: 30px;
    -webkit-line-clamp: 3;
}
@media (min-width: 900px) {
    .article-card-featured--lead { min-height: 480px; }
    .article-card-featured--lead .article-card-featured-body { max-width: 640px; }
    .article-card-featured--lead .article-card-featured-title { font-size: 34px; }
}

.article-card-featured-eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #ffffff;
    background: var(--accent-orange);
    border-radius: 4px;
}
.article-card-featured-excerpt {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.92);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* "További cikkek" szekció-fejléc a vezércikk alatt */
.article-section-head {
    max-width: 1180px;
    margin: 0 auto 12px;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 16px;
}
.article-section-head h2 {
    font-size: 18px;
    font-weight: 800;
    color: var(--steel-900);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.article-section-head-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(to right,
        rgba(191, 176, 138, 0.35), var(--steel-200) 30%, var(--steel-200) 85%, transparent);
}


/* ==========================================================================
   CIKK NÉZET v3 — Prémium magazin, 2-oszlopos grid, jobb oldali ajánlósáv
   ========================================================================== */

/* Kétoszlopos rács: fő cikk + jobb oldali ajánlósáv */
.cikk-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 480px;
    gap: 40px;
    align-items: start;
    max-width: 1550px;
    margin: 32px auto 40px;
    padding: 0 24px;
}

@media (max-width: 1024px) {
    .cikk-layout {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* Fő cikk konténer */
.cikk-view {
    min-width: 0;
    margin: 0;
    padding: 0;
    max-width: none;
}

/* Cikk kártya — fehér, tiszta, finom árnyék */
.cikk-card {
    background: var(--bg-card);
    border: 1px solid var(--steel-100);
    border-radius: var(--radius-sharp, 4px);
    box-shadow: 0 1px 3px rgba(27, 25, 23, 0.05);
    overflow: hidden;
}

/* ------------------------------------------------------------
   1. HERO — kategória badge-ek sor + nagy cím + lead + forrás-strip
   ------------------------------------------------------------ */
/* Prémium hero: felső fémes narancs csík (közös --metallic-streak token)
   + alatta lágy narancs ragyogás — ugyanaz a formanyelv, mint a kiemelt
   kártyákon (model-card), így a cikkoldal is "világít" felül. */
.cikk-hero {
    padding: 42px 48px 34px;
    background:
        var(--metallic-streak) top center / 72% 2px no-repeat,
        radial-gradient(ellipse 46% 100% at 50% 0%,
            rgba(191, 176, 138, 0.12) 0%,
            rgba(191, 176, 138, 0.04) 50%,
            transparent 78%) top center / 100% 28px no-repeat,
        radial-gradient(circle at 100% 0%, rgba(191, 176, 138, 0.05) 0%, transparent 40%),
        linear-gradient(180deg, var(--bg-card-alt) 0%, var(--bg-card) 100%);
    border-bottom: 1px solid var(--steel-100);
}

@media (max-width: 768px) {
    .cikk-hero { padding: 26px 18px 22px; }
}

@media (max-width: 480px) {
    .cikk-hero { padding: 22px 14px 18px; }
}

/* Műszerfal-sor a hero tetején — EGYETLEN sor: kategória-chipek balra,
   összevont meta-lapka középen, Meghallgatom + Mentés jobbra. Keskeny
   nézetben a meta-lapka egészben törik új sorba (flex-wrap). */
.cikk-hero-badges {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    width: 100%;
}

/* Összevont meta-lapka: dátum · olvasási idő · nézettség (· 🇭🇺) egyetlen
   fém-tile-ban, belső elválasztókkal — a 3 külön lapka helyett */
.cikk-hero-meta-cluster {
    display: inline-flex;
    align-items: stretch;
    height: 38px;
    box-sizing: border-box;
    border-radius: var(--radius-sharp, 4px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        radial-gradient(135% 120% at 50% -30%, rgba(191, 176, 138, 0.16) 0%, rgba(191, 176, 138, 0) 60%),
        linear-gradient(180deg, #2e2e2e 0%, #171717 55%, #0d0d0d 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -3px 7px rgba(0, 0, 0, 0.5),
        0 3px 10px rgba(13, 13, 13, 0.28);
}
.cikk-hero-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    color: rgba(236, 231, 219, 0.7);
    text-decoration: none;
}
.cikk-hero-meta-item + .cikk-hero-meta-item {
    border-left: 1px solid rgba(255, 255, 255, 0.10);
}
.cikk-hero-meta-item i,
.cikk-hero-meta-item svg {
    width: 12px;
    height: 12px;
    color: var(--accent-on-dark);
    opacity: 0.9;
}
a.cikk-hero-meta-item--hu {
    transition: color 0.15s ease, background-color 0.15s ease;
}
a.cikk-hero-meta-item--hu:hover {
    color: #f5efdd;
    background: rgba(191, 176, 138, 0.10);
}
.cikk-hero-meta-item--hu .hu-flag-mini {
    width: 15px;
    height: 10px;
}

/* Minden hero-badge ugyanabból a csiszolt sötét fémből, mint a felolvasó-
   lapka és az AI-elemzés panel. A sor így egy összefüggő „műszerfal-csík",
   ami jobb szélén simán átfolyik az audio-tile-ba. */
.cikk-hero-badge {
    position: relative;
    isolation: isolate;   /* saját rétegkontextus — kell a kategória-fedéshez */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    box-sizing: border-box;
    padding: 0 17px;
    border-radius: var(--radius-sharp, 4px);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(236, 231, 219, 0.82);
    transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

/* A fém-felület minden badge-re a kategória-lapkát KIVÉVE (ott a kategória
   saját színe adja az alsó él-csíkot, a fémet a ::before réteg festi). */
.cikk-hero-badge:not(.article-badge) {
    background:
        radial-gradient(135% 120% at 50% -30%, rgba(191, 176, 138, 0.16) 0%, rgba(191, 176, 138, 0) 60%),
        linear-gradient(180deg, #2e2e2e 0%, #171717 55%, #0d0d0d 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -3px 7px rgba(0, 0, 0, 0.5),
        0 3px 10px rgba(13, 13, 13, 0.28);
}

.cikk-hero-badge i,
.cikk-hero-badge svg {
    width: 12px;
    height: 12px;
}

/* Elsődleges badge (AI HÍREK / AI PÉNZ) — a márka-lapka: pezsgő felirat */
.cikk-hero-badge--primary {
    color: var(--accent-on-dark);
    border-color: rgba(191, 176, 138, 0.35);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.cikk-hero-badge--primary:hover {
    transform: translateY(-1px);
    border-color: rgba(191, 176, 138, 0.65);
    color: #f5efdd;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 7px 20px rgba(191, 176, 138, 0.28),
        0 0 0 1px rgba(191, 176, 138, 0.28);
}

/* A kattintható alkategória hoverre ugyanúgy reagál, mint a fő badge */
a.cikk-hero-badge--sub:hover {
    transform: translateY(-1px);
    border-color: rgba(191, 176, 138, 0.65);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 7px 20px rgba(191, 176, 138, 0.28),
        0 0 0 1px rgba(191, 176, 138, 0.28);
}

/* Al-badge (kategória) — ugyanaz a fém, de a kategória saját színe
   2px-es él-csíkként világít át a lapka alján. A színt a `.article-badge--*`
   háttere adja: a fém-fedés csak a lapka felső részét takarja. */
.cikk-hero-badge--sub {
    height: 38px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    padding: 0 17px;
}

.cikk-hero-badge--sub.article-badge {
    align-self: auto;
    display: inline-flex;
    color: #f2eee4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 3px 10px rgba(13, 13, 13, 0.28);
}

/* A fém-fedést (::before, alul 2px kategória-csík) a globális .article-badge
   szabály adja — itt nem kell duplikálni. */

/* (A korábbi 3 külön meta-badge-et az összevont .cikk-hero-meta-cluster
   váltotta — l. fentebb.) */

/* Olvasólista-gomb — ugyanaz a fém lapka, mint a többi badge; a sor jobb
   szélére tolja magát, mentett állapotban pezsgő kitöltésű könyvjelzővel */
.cikk-save-btn {
    margin-left: auto;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    padding: 0 13px;
}

.cikk-save-btn i,
.cikk-save-btn svg {
    color: var(--accent-on-dark);
    opacity: 0.9;
    transition: fill 0.18s ease, opacity 0.18s ease;
}

.cikk-save-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(191, 176, 138, 0.55);
    color: #f5efdd;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 7px 20px rgba(191, 176, 138, 0.24),
        0 0 0 1px rgba(191, 176, 138, 0.22);
}

.cikk-save-btn:active {
    transform: translateY(0) scale(0.97);
}

.cikk-save-btn.is-saved {
    color: var(--accent-on-dark);
    border-color: rgba(191, 176, 138, 0.45);
}

.cikk-save-btn.is-saved i,
.cikk-save-btn.is-saved svg {
    fill: var(--accent-on-dark);
    opacity: 1;
    filter: drop-shadow(0 0 5px rgba(191, 176, 138, 0.45));
}

/* Szolid vonal a meta-sor alatt, kifelé halványodva */
.cikk-hero-divider {
    height: 1px;
    width: 100%;
    background: linear-gradient(to right, transparent, var(--steel-200) 15%, var(--steel-200) 85%, transparent);
    margin: 18px 0 22px;
}

/* Főcím — kiegyensúlyozott sortöréssel (nem marad árva szó a végén) */
.cikk-hero-title {
    font-size: 40px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.028em;
    color: var(--steel-900);
    margin: 0 0 20px;
    text-transform: none;
    text-wrap: balance;
}

@media (max-width: 768px) {
    .cikk-hero-title { font-size: 26px; }
}

/* Badge-sor mobilon: a kategória-chipek + Mentés az első sorban maradnak,
   a meta-lapka pedig fém-doboz NÉLKÜLI, halk szöveges sorrá válik a
   második sorban (dátum · perc · megtekintés) — a keskeny képernyő így
   nem zsúfolódik tele lapkákkal. */
@media (max-width: 640px) {
    .cikk-hero-badges {
        gap: 6px;
        row-gap: 10px;
        margin-bottom: 16px;
    }

    .cikk-hero-badge {
        height: 33px;
        padding: 0 12px;
        font-size: 11px;
    }

    .cikk-hero-badge--sub {
        height: 33px;
        padding: 0 12px;
    }

    /* Meta-lapka: teljes szélességű, csendes szöveg-sor a chipek alatt */
    .cikk-hero-meta-cluster {
        order: 10;
        flex-basis: 100%;
        height: auto;
        background: none;
        border: 0;
        box-shadow: none;
        border-radius: 0;
        gap: 14px;
        flex-wrap: wrap;
    }

    .cikk-hero-meta-item {
        padding: 0;
        color: var(--steel-500);
        font-size: 11.5px;
        letter-spacing: 0.05em;
    }

    .cikk-hero-meta-item + .cikk-hero-meta-item {
        border-left: 0;
    }

    .cikk-hero-meta-item i,
    .cikk-hero-meta-item svg {
        width: 13px;
        height: 13px;
        color: var(--steel-400);
        opacity: 1;
    }

    a.cikk-hero-meta-item--hu:hover {
        background: none;
        color: var(--steel-700);
    }

    .cikk-hero-divider {
        margin: 14px 0 16px;
    }
}

/* Lead — nagy, dőlt, magazin */
.cikk-lead {
    font-size: 20px;
    line-height: 1.6;
    color: var(--steel-600);
    font-weight: 500;
    font-style: italic;
    margin: 0 0 24px;
    text-align: justify;
}

@media (max-width: 768px) {
    .cikk-lead { font-size: 16px; }
}

/* AI-transzparencia disclaimer — diszkrét, jól olvasható, de nem figyelemfelhívó
   tájékoztató a hero AI-elemzés doboza és a forrás-sor között. Pezsgő bal-accent
   a téma nyelvén (barna/narancs TILOS), világos felület, halk szürke szöveg. */
.cikk-ai-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin: 0 0 22px;
    padding: 11px 15px;
    background: var(--bg-card-alt);
    border: 1px solid var(--steel-200);
    border-left: 3px solid var(--accent-on-dark);
    border-radius: var(--radius-sharp, 4px);
    font-size: 13px;
    line-height: 1.55;
    color: var(--steel-600);
    font-style: normal;
    text-align: left;
}

.cikk-ai-disclaimer svg {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    margin-top: 2px;
    color: var(--steel-500);
    stroke-width: 2;
}

@media (max-width: 768px) {
    .cikk-ai-disclaimer {
        font-size: 12px;
        padding: 10px 13px;
        margin-bottom: 18px;
    }
}

/* Forrás strip — az Említett modellek sáv ikertestvére (azonos címke,
   betűméret és belmagasság), több forrás támogatása */
.cikk-source-strip {
    display: inline-flex;
    align-items: stretch;
    flex-wrap: wrap;
    background: linear-gradient(180deg, #ffffff 0%, #f7f3f0 100%);
    border: 1px solid var(--steel-200);
    border-radius: var(--radius-sharp, 4px);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 3px rgba(27, 25, 23, 0.06);
    max-width: 100%;
}

.cikk-source-strip-label {
    padding: 8px 11px;
    background: linear-gradient(180deg, #383838 0%, #161616 60%, #0d0d0d 100%);
    color: var(--accent-on-dark);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 9px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border-right: 1px solid var(--steel-200);
}

.cikk-source-strip-items {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: stretch;
    min-width: 0;
}

.cikk-source-strip-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    color: var(--steel-700);
    font-weight: 700;
    text-decoration: none;
    border-left: 1px solid var(--steel-100);
    transition: color 0.15s ease, background 0.15s ease;
    font-size: 12px;
}

.cikk-source-strip-items > .cikk-source-strip-link:first-child {
    border-left: 0;
}

a.cikk-source-strip-link:hover {
    color: var(--steel-900);
    background: rgba(191, 176, 138, 0.08);
}

.cikk-source-strip-link i,
.cikk-source-strip-link svg {
    width: 12px;
    height: 12px;
    color: var(--steel-400);
    transition: color 0.15s ease;
}

a.cikk-source-strip-link:hover i,
a.cikk-source-strip-link:hover svg {
    color: var(--accent-orange-strong);
}

/* Említett AI-modellek — a forrás-strip családja: fém címke + chip-sor,
   a cikktörzs alján, az adatlapokra linkelve */
.cikk-models-strip {
    display: inline-flex;
    align-items: stretch;
    flex-wrap: wrap;
    margin-top: 26px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f3f0 100%);
    border: 1px solid var(--steel-200);
    border-radius: var(--radius-sharp, 4px);
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 3px rgba(27, 25, 23, 0.06);
    max-width: 100%;
}

.cikk-models-strip-label {
    padding: 8px 11px;
    background: linear-gradient(180deg, #383838 0%, #161616 60%, #0d0d0d 100%);
    color: var(--accent-on-dark);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 9px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    border-right: 1px solid var(--steel-200);
}

.cikk-models-strip-items {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: stretch;
    min-width: 0;
}

.cikk-models-strip-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    color: var(--steel-700);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    border-left: 1px solid var(--steel-100);
    transition: color 0.15s ease, background 0.15s ease;
}

.cikk-models-strip-items > .cikk-models-strip-chip:first-child {
    border-left: 0;
}

.cikk-models-strip-chip img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: var(--radius-sharp, 4px);
    flex-shrink: 0;
}

.cikk-models-strip-chip i,
.cikk-models-strip-chip svg {
    width: 14px;
    height: 14px;
    color: var(--steel-400);
    flex-shrink: 0;
    transition: color 0.15s ease, transform 0.15s ease;
}

.cikk-models-strip-arrow {
    opacity: 0.55;
}

.cikk-models-strip-chip:hover {
    color: var(--steel-900);
    background: rgba(191, 176, 138, 0.08);
}

.cikk-models-strip-chip:hover .cikk-models-strip-arrow {
    color: var(--accent-orange-strong);
    transform: translateX(2px);
    opacity: 1;
}

@media (max-width: 640px) {
    .cikk-models-strip {
        display: flex;   /* teljes szélesség, a chipek sorokba törhetnek */
    }
}

/* ------------------------------------------------------------
   2. BORÍTÓKÉP — full-bleed a kártyán belül
   ------------------------------------------------------------ */
.cikk-cover-wrap {
    margin: 0;
    padding: 0;
    background: var(--steel-100);
}

.cikk-cover {
    display: block;
    width: 100%;
    height: auto;
    max-height: 480px;
    object-fit: cover;
}

.cikk-cover-caption {
    display: block;
    padding: 8px 48px;
    font-size: 12px;
    color: var(--steel-400);
    font-style: italic;
    background: var(--bg-card-alt);
    border-bottom: 1px solid var(--steel-100);
}

/* ------------------------------------------------------------
   3. CIKK TARTALOM (tagek, törzs, share, kommentek)
   ------------------------------------------------------------ */
.cikk-content {
    padding: 36px 48px 44px;
}

@media (max-width: 768px) {
    .cikk-content { padding: 26px 22px 30px; }
}

/* Tag-ek */
.cikk-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 32px;
}

.cikk-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px 4px 8px;
    background: transparent;
    border: 1px solid var(--steel-200);
    border-radius: var(--radius-sharp, 4px);
    font-size: 12px;
    font-weight: 600;
    color: var(--steel-600);
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.cikk-tag::before {
    content: '#';
    margin-right: 3px;
    color: var(--accent-orange);
    font-weight: 700;
}

.cikk-tag:hover {
    border-color: var(--accent-orange);
    color: var(--accent-orange-strong);
    background: var(--accent-orange-soft);
}

/* Szövegtörzs — nagy tipó, drop-cap */
.cikk-body {
    font-size: 20px;
    line-height: 1.9;
    color: var(--steel-700);
}

.cikk-body > p:first-of-type::first-letter {
    float: left;
    font-size: 58px;
    line-height: 0.9;
    font-weight: 800;
    color: var(--accent-orange);
    margin: 6px 12px 0 0;
    font-family: 'Outfit', Georgia, serif;
}

.cikk-body p {
    margin: 0 0 20px;
    text-align: justify;
}
.cikk-body h2 { font-size: 30px; font-weight: 800; margin: 40px 0 14px; color: var(--steel-900); letter-spacing: -0.02em; line-height: 1.25; }
.cikk-body h3 { font-size: 24px; font-weight: 750; margin: 30px 0 12px; color: var(--steel-900); letter-spacing: -0.01em; line-height: 1.3; }
.cikk-body ul {
    list-style: none;
    padding-left: 0;
    margin: 0 0 22px 0;
}
.cikk-body ul li {
    position: relative;
    padding-left: 20px;
    margin-bottom: 8px;
    line-height: 1.7;
}
.cikk-body ul li::before {
    content: "■";
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--accent-orange);
    font-size: 11px;
}
.cikk-body ol { margin: 0 0 22px 22px; }
.cikk-body li { margin-bottom: 8px; }
.cikk-body a { color: var(--accent-orange); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--accent-orange-soft); transition: border-color 0.15s ease; }

/* Cikken belüli átvezetés — [cikk:slug] szöveg közi link nyíllal */
.cikk-body a.cikk-inline-link::after {
    content: "→";
    margin-left: 4px;
    font-size: 0.85em;
    opacity: 0.7;
}

/* [kapcsolodo:slug] — kiemelt „Kapcsolódó cikk" doboz a bekezdések között.
   A színek eredetileg SÖTÉT felülethez készültek (fehéres szöveg, 3%-os fehér
   háttér), a cikktörzs viszont világos lap — a doboz gyakorlatilag olvashatatlan
   volt. Világos felületre hangolva. */
.cikk-body a.cikk-related-callout {
    display: block;
    margin: 20px 0;
    padding: 13px 16px;
    border: 1px solid rgba(185, 168, 120, 0.42);
    border-radius: var(--radius-sharp, 4px);
    background: rgba(185, 168, 120, 0.07);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.cikk-body a.cikk-related-callout:hover {
    border-color: var(--uni-gold);
    background: rgba(185, 168, 120, 0.14);
}

.cikk-related-callout-eyebrow {
    display: block;
    margin-bottom: 4px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #8a7a52;
}

.cikk-related-callout-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--uni-ink, #1b1917);
}

.cikk-body a.cikk-related-callout .cikk-related-callout-title::after {
    content: "→";
    margin-left: 6px;
    color: #8a7a52;
}
/* ---------------------------------------------------------------------------
   CIKK KÖZEPÉBE ÉKELT AJÁNLÓ (recirkuláció) — includes/article_recirc.php
   Két szint: egy konkrét cikk ugyanabban a témában, alatta 1-3 „másik szemszög"
   átvezetés a saját, más típusú oldalainkra. A blokk a .cikk-body-n BELÜL van,
   ezért minden link-szabályt felül kell írnia (specifikusabb szelektorral,
   nem !important-tal).
--------------------------------------------------------------------------- */
.cikk-recirc {
    position: relative;
    margin: 38px 0;
    padding: 0;
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--uni-border);
    border-radius: var(--radius-sharp, 4px);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

/* Bal éli pezsgő sáv — a márka accentje, nem narancs */
.cikk-recirc-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--uni-gold);
}

.cikk-body a.cikk-recirc-main {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 20px 22px 20px 25px;
    border-bottom: none;
    color: inherit;
    font-weight: inherit;
    text-decoration: none;
}

/* A TELJES felület (kép + szöveg) egyetlen kattintható blokk — a hover az
   egészen fut végig, hogy ez látszódjon is. */
.cikk-body a.cikk-recirc-main:hover {
    border-bottom-color: transparent;
    background: rgba(185, 168, 120, 0.07);
}
.cikk-body a.cikk-recirc-main:hover .cikk-recirc-thumb img { transform: scale(1.04); }

.cikk-recirc-text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.cikk-recirc-eyebrow {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: #8a7a52;
}

.cikk-recirc-title {
    font-size: 19px;
    font-weight: 800;
    line-height: 1.35;
    letter-spacing: -0.01em;
    color: var(--uni-ink);
}

/* CTA: NEM gomb, csak szöveges kivezetés — a kattintható felület az egész
   .cikk-recirc-main blokk, ez pusztán jelzi, hová visz. */
.cikk-recirc-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    color: #8a7a52;
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    transition: color 0.15s ease;
}
.cikk-recirc-cta i,
.cikk-recirc-cta svg {
    width: 15px;
    height: 15px;
    transition: transform 0.15s ease;
}
.cikk-body a.cikk-recirc-main:hover .cikk-recirc-cta { color: var(--uni-ink); }
.cikk-body a.cikk-recirc-main:hover .cikk-recirc-cta svg { transform: translateX(3px); }

.cikk-recirc-thumb {
    flex: 0 0 auto;
    width: 168px;
    height: 104px;
    border-radius: var(--radius-sharp, 4px);
    overflow: hidden;
    background: var(--uni-card-soft);
    border: 1px solid var(--uni-border);
}
.cikk-body .cikk-recirc-thumb img {
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: cover;
    border-radius: 0;
    transition: transform 0.25s ease;
}
.cikk-recirc-thumb-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--uni-muted);
}
.cikk-recirc-thumb-ph svg { width: 22px; height: 22px; }

/* „Több szemszögből" sáv — átvezetés MÁS TÍPUSÚ oldalainkra */
.cikk-recirc-angles {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 14px;
    padding: 12px 22px 12px 25px;
    border-top: 1px solid var(--uni-border);
    background: var(--uni-card-soft);
}

.cikk-recirc-angles-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--uni-muted);
}

.cikk-recirc-angles-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cikk-body a.cikk-recirc-angle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--uni-border);
    border-radius: var(--radius-sharp, 4px);
    background: var(--bg-card, #ffffff);
    color: var(--steel-700);
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.cikk-body a.cikk-recirc-angle:hover {
    border-bottom-color: var(--uni-gold);
    border-color: var(--uni-gold);
    background: rgba(185, 168, 120, 0.1);
    color: var(--uni-ink);
}
.cikk-recirc-angle i,
.cikk-recirc-angle svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    color: #8a7a52;
}

@media (max-width: 640px) {
    .cikk-body a.cikk-recirc-main {
        flex-direction: column-reverse;
        align-items: stretch;
        gap: 14px;
        padding: 16px 16px 18px 19px;
    }
    .cikk-recirc-thumb { width: 100%; height: 150px; }
    .cikk-recirc-title { font-size: 17px; }
    .cikk-recirc-angles { padding: 12px 16px 12px 19px; }
}

.cikk-body a:hover { border-bottom-color: var(--accent-orange); }
.cikk-body img { max-width: 100%; height: auto; border-radius: var(--radius-sharp, 4px); margin: 24px 0; }

/* Prémium idézet-kiemelő doboz — vektor-pontos 4px narancs sáv a bal élen */
.cikk-body blockquote {
    position: relative;
    margin: 32px 0;
    padding: 22px 28px 22px 34px;
    background: linear-gradient(135deg, rgba(191, 176, 138, 0.06) 0%, rgba(191, 176, 138, 0.02) 100%);
    border-left: 4px solid var(--accent-orange);
    border-radius: 0 4px 4px 0;
    font-size: 19px;
    font-weight: 600;
    font-style: italic;
    color: var(--steel-800);
    line-height: 1.6;
}
.cikk-body blockquote p { margin: 0; }
.cikk-body blockquote p + p { margin-top: 10px; }
.cikk-body blockquote::before {
    content: "“";
    position: absolute;
    left: 26px;
    top: -6px;
    font-family: Georgia, serif;
    font-size: 54px;
    color: var(--accent-orange);
    line-height: 1;
    opacity: 0.3;
}

/* Kulcstény / definíció doboz — kézzel vagy AI-formázással: <p class="cikk-highlight"> */
.cikk-body p.cikk-highlight {
    position: relative;
    margin: 24px 0;
    padding: 16px 22px 16px 26px;
    background: rgba(191, 176, 138, 0.05);
    border-left: 4px solid var(--accent-orange);
    border-radius: 0 4px 4px 0;
    font-style: normal;
    font-weight: 700;
    text-align: left;
    color: var(--steel-800);
}

/* ============================================================
   AI ASSZISZTENS ELEMZÉS — ugyanaz a csiszolt sötét fém + pezsgő
   anyag, mint a „Meghallgatom" gomb (.cikk-ai-listen) és a lejátszó
   (.cikk-audio-player-floating). Egy család: azonos felület,
   azonos élfény, azonos csillanás, azonos pezsgő hanghullám.
   ============================================================ */
.cikk-ai-analysis {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(120% 70% at 50% -10%, rgba(191, 176, 138, 0.14) 0%, rgba(191, 176, 138, 0) 60%),
        linear-gradient(180deg, #2e2e2e 0%, #171717 55%, #0d0d0d 100%);
    border: 1px solid rgba(191, 176, 138, 0.30);
    border-radius: var(--radius-sharp, 4px);
    padding: 22px 26px 24px;
    margin: 0 0 34px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 14px 40px rgba(13, 13, 13, 0.28),
        0 0 0 1px rgba(0, 0, 0, 0.30);
    overflow: hidden;
}

/* Pezsgő élsáv a bal oldalon — a lejátszó kiemelő-színe */
.cikk-ai-analysis::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(180deg,
        var(--accent-on-dark) 0%,
        rgba(191, 176, 138, 0.55) 45%,
        rgba(191, 176, 138, 0.12) 100%);
    box-shadow: 0 0 12px rgba(191, 176, 138, 0.35);
    pointer-events: none;
    z-index: 2;
}

/* Fémsáv-csillanás — ugyanaz a mozgás, mint a felolvasó-lapkán, lassabban */
.cikk-ai-analysis-sheen {
    position: absolute;
    top: 0;
    left: -50%;
    width: 34%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
    background: linear-gradient(105deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.05) 45%,
        rgba(255, 255, 255, 0.11) 50%,
        rgba(255, 255, 255, 0.05) 55%,
        rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg);
    animation: cikkAiSheen 9s ease-in-out infinite;
}

@keyframes cikkAiSheen {
    0%, 40%  { left: -50%; }
    80%      { left: 130%; }
    100%     { left: 130%; }
}

/* --- Fejléc: fém-lapka ikon + pezsgő felirat + „Meghallgatom" --- */
.cikk-ai-analysis-header {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    background: linear-gradient(to right,
        rgba(191, 176, 138, 0.45), rgba(191, 176, 138, 0.10) 55%, transparent)
        bottom left / 100% 1px no-repeat;
}

/* Az ikon ugyanabból a fémből, mint a felolvasó-lapka — csak kicsiben */
.cikk-ai-analysis-mark {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: var(--radius-sharp, 4px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background:
        radial-gradient(135% 95% at 50% -12%, rgba(191, 176, 138, 0.28) 0%, rgba(191, 176, 138, 0) 55%),
        linear-gradient(180deg, #343434 0%, #1c1c1c 55%, #101010 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -3px 7px rgba(0, 0, 0, 0.55),
        0 3px 10px rgba(13, 13, 13, 0.45);
}

.cikk-ai-analysis-mark i,
.cikk-ai-analysis-mark svg {
    width: 16px;
    height: 16px;
    color: var(--accent-on-dark);
    filter: drop-shadow(0 0 5px rgba(191, 176, 138, 0.55));
    animation: ai-sparkle-pulse 2.6s ease-in-out infinite;
}

@keyframes ai-sparkle-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.6; transform: scale(0.9); }
}

.cikk-ai-analysis-title {
    font-weight: 800;
    font-size: 12.5px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1.3;
    color: var(--accent-on-dark);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* „Meghallgatom" — a fejléc jobb szélén, a hero-ikon hanghullámával */
.cikk-ai-listen {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 38px;
    padding: 0 15px;
    border-radius: var(--radius-sharp, 4px);
    border: 1px solid rgba(191, 176, 138, 0.30);
    background: rgba(191, 176, 138, 0.06);
    color: var(--accent-on-dark);
    font-family: inherit;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

.cikk-ai-listen:hover {
    border-color: rgba(191, 176, 138, 0.65);
    background: rgba(191, 176, 138, 0.14);
    color: #f5efdd;
    transform: translateY(-1px);
}

.cikk-ai-listen:active {
    transform: translateY(0) scale(0.98);
}

/* BETA-jelzés a Meghallgatom gombon — lapos pezsgő chip, sötét szöveggel
   (a korábbi hero-lapka BETA-címkéjének utódja) */
.cikk-ai-listen-beta {
    padding: 2px 6px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.3;
    color: #161616;
    background: var(--accent-on-dark);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}

/* A Meghallgatom hero-változata: az elemzés-doboz nélküli cikkeknél a
   badge-sor jobb oldalán ül, a Mentés gomb előtt */
.cikk-ai-listen--hero {
    margin-left: auto;
}

.cikk-ai-listen--hero ~ .cikk-save-btn {
    margin-left: 10px;
}

/* (A mini EQ méretezése az AUDIO CTA blokkban van, az .cikk-audio-eq
   alapszabályok UTÁN — különben azok írnák felül.) */

/* --- Számozott elemzési pontok — lapos pezsgő lapka, sötét szöveggel --- */
.cikk-ai-summary-list {
    position: relative;
    z-index: 2;
    list-style: none;
    padding-left: 0;
    margin: 0 0 18px 0;
    counter-reset: ai-point;
}

.cikk-ai-summary-list li {
    position: relative;
    padding-left: 34px;
    margin-bottom: 13px;
    font-size: 15px;
    line-height: 1.6;
    color: rgba(236, 231, 219, 0.92);
    font-weight: 500;
    counter-increment: ai-point;
}

.cikk-ai-summary-list li:last-child {
    margin-bottom: 0;
}

.cikk-ai-summary-list li::before {
    content: counter(ai-point);
    position: absolute;
    left: 0;
    top: 2px;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sharp, 4px);
    background: var(--accent-on-dark);
    color: #161616;
    font-size: 11.5px;
    font-weight: 800;
    box-shadow: 0 2px 8px rgba(191, 176, 138, 0.28);
}

/* --- Rendszer fókusz — a lejátszó belső kártyájának anyaga --- */
.cikk-ai-security-focus {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 18px;
    padding: 14px 16px;
    border-radius: var(--radius-sharp, 4px);
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(191, 176, 138, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    font-size: 13.5px;
    color: rgba(236, 231, 219, 0.72);
    line-height: 1.6;
}

.cikk-ai-security-focus i,
.cikk-ai-security-focus svg {
    width: 17px;
    height: 17px;
    color: var(--accent-on-dark);
    flex-shrink: 0;
    margin-top: 2px;
}

.cikk-ai-security-focus p {
    margin: 0;
    text-align: left;
}

.cikk-ai-security-focus strong {
    color: var(--accent-on-dark);
    font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
    .cikk-ai-analysis-sheen,
    .cikk-ai-analysis-mark i,
    .cikk-ai-analysis-mark svg {
        animation: none;
    }
}

/* AI elemzés doboz mobilon: kompaktabb, de a prémium részletek maradnak */
@media (max-width: 640px) {
    .cikk-ai-analysis {
        padding: 16px 15px 18px;
        margin-bottom: 26px;
    }

    .cikk-ai-analysis-header {
        flex-wrap: wrap;
        gap: 9px;
        margin-bottom: 14px;
        padding-bottom: 12px;
    }

    .cikk-ai-analysis-mark {
        width: 26px;
        height: 26px;
    }

    .cikk-ai-analysis-mark i,
    .cikk-ai-analysis-mark svg {
        width: 14px;
        height: 14px;
    }

    .cikk-ai-analysis-title {
        font-size: 11px;
        letter-spacing: 0.09em;
    }

    .cikk-ai-listen {
        height: 31px;
        padding: 0 11px;
        font-size: 9.5px;
    }

    .cikk-ai-listen-text {
        display: none;   /* mobilon csak a hanghullám marad — kompakt ikon-gomb */
    }

    .cikk-ai-summary-list li {
        font-size: 14.5px;
        padding-left: 30px;
        margin-bottom: 11px;
    }

    .cikk-ai-summary-list li::before {
        width: 20px;
        height: 20px;
        font-size: 11px;
    }

    .cikk-ai-security-focus {
        margin-top: 14px;
        padding: 12px 13px;
        font-size: 13px;
    }

    .cikk-source-strip {
        display: flex;   /* teljes szélesség, a linkek sorokba törhetnek */
    }
}

/* YouTube */
.cikk-youtube {
    margin: 32px 0;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-sharp, 4px);
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(27, 25, 23, 0.1);
    background: #000;
}
.cikk-youtube iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ------------------------------------------------------------
   3.5 "KÖVESS MINKET A GOOGLE HÍREKBEN" JELVÉNY (cikktörzs közepén)
   ------------------------------------------------------------ */
.google-follow-wrap {
    display: flex;
    justify-content: center;
    margin: 48px 0;
}

/* A színes "gyűrű" — 3px vastag Google-színátmenetes keret, ami már
   nyugalmi állapotban is lassan forog (élő, prémium hatás), hoverkor
   felgyorsul és fény-glow jelenik meg körülötte. */
.google-follow-ring {
    position: relative;
    display: inline-flex;
    padding: 3px;
    border-radius: 999px;
    overflow: hidden;
    z-index: 1;
    box-shadow: 0 6px 24px rgba(66, 133, 244, 0.14), 0 2px 8px rgba(27, 25, 23, 0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.google-follow-ring::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg, #4285F4, #EA4335, #FBBC05, #34A853, #4285F4);
    z-index: -1;
    opacity: 0.85;
    animation: google-follow-ring-spin 8s linear infinite;
}

.google-follow-ring:hover {
    transform: translateY(-2px);
    box-shadow:
        0 10px 34px rgba(66, 133, 244, 0.3),
        0 4px 14px rgba(234, 67, 53, 0.18),
        0 2px 8px rgba(27, 25, 23, 0.1);
}

.google-follow-ring:hover::before {
    opacity: 1;
    animation-duration: 2.2s;
}

@keyframes google-follow-ring-spin {
    to { transform: rotate(360deg); }
}

.google-follow-badge {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 17px 42px;
    border-radius: 999px;
    background: var(--bg-card);
    color: var(--steel-900);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-decoration: none;
    z-index: 2;
    transition: transform 0.15s ease;
}

.google-follow-ring:hover .google-follow-badge {
    transform: scale(1.01);
}

/* A "G" ikon nagyobb és lassan, folyamatosan forog */
.google-follow-badge-g {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    animation: google-follow-g-spin 45s linear infinite;
    filter: drop-shadow(0 1px 2px rgba(66, 133, 244, 0.25));
}

@keyframes google-follow-g-spin {
    to { transform: rotate(360deg); }
}

.google-follow-badge-arrow {
    width: 19px;
    height: 19px;
    color: var(--steel-400);
    transition: transform 0.2s ease, color 0.2s ease;
}

.google-follow-ring:hover .google-follow-badge-arrow {
    transform: translateX(5px);
    color: var(--accent-orange);
}

@media (max-width: 640px) {
    .google-follow-badge {
        font-size: 14px;
        padding: 13px 24px;
        gap: 10px;
    }
    .google-follow-badge-g { width: 20px; height: 20px; }
}

/* ------------------------------------------------------------
   4. MEGOSZTÁS — PRÉMIUM SVG IKONOS KÖR GOMBOK
   ------------------------------------------------------------ */
.cikk-share-section {
    display: flex;
    flex-direction: row; /* Override card column default */
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin: 22px 0;
    padding: 26px;
    background: linear-gradient(135deg, var(--bg-card) 0%, var(--bg-card-alt) 60%, #fff5ee 100%);
    border: 1px solid var(--steel-100);
    border-radius: var(--radius-sharp, 4px);
    box-shadow: 0 4px 20px rgba(27, 25, 23, 0.03), var(--shadow-card);
}

.cikk-share-heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 180px;
}

.cikk-share-eyebrow {
    margin: 0;
    font-size: 11px;
    font-weight: 800;
    color: var(--accent-orange);
    text-transform: uppercase;
    letter-spacing: 0.14em;
}

.cikk-share-title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--steel-900);
    letter-spacing: -0.015em;
    line-height: 1.15;
}

/* Kör gombsor */
.share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.share-btn {
    --_hover-bg-a: var(--charcoal);
    --_hover-bg-b: var(--charcoal-hover);
    --_glow: rgba(27, 25, 23, 0.12);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--bg-card);
    border: 1px solid var(--steel-200);
    border-radius: var(--radius-sharp, 4px);
    color: var(--steel-700);
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(27, 25, 23, 0.06);
    overflow: hidden;
    transition:
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.15s ease,
        box-shadow 0.25s ease;
}

.share-btn svg {
    width: 18px;
    height: 18px;
    display: block;
    position: relative;
    z-index: 2;
    transition: transform 0.2s ease;
}

.share-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--_hover-bg-a);
    opacity: 0;
    z-index: 1;
    transition: opacity 0.25s ease;
}

.share-btn:hover {
    color: #fff;
    border-color: transparent;
    transform: translateY(-3px);
    box-shadow:
        0 10px 22px rgba(27, 25, 23, 0.22),
        0 0 0 4px var(--_glow);
}

.share-btn:hover::before { opacity: 1; }
.share-btn:hover svg { transform: scale(1.1); }

.share-btn:active { transform: translateY(-1px); }

/* Márka-hover változók */
.share-btn--facebook { --_hover-bg-a: #2b8bff; --_hover-bg-b: #1877f2; --_glow: rgba(24, 119, 242, 0.25); }
.share-btn--twitter  { --_hover-bg-a: #2a2a2a; --_hover-bg-b: #0f0f0f; --_glow: rgba(0, 0, 0, 0.22); }
.share-btn--linkedin { --_hover-bg-a: #1e7ad4; --_hover-bg-b: #0a66c2; --_glow: rgba(10, 102, 194, 0.25); }
.share-btn--whatsapp  { --_hover-bg-a: #25d366; --_hover-bg-b: #128c7e; --_glow: rgba(37, 211, 102, 0.30); }
.share-btn--messenger { --_hover-bg-a: #0084ff; --_hover-bg-b: #006aff; --_glow: rgba(0, 132, 255, 0.32); }
.share-btn--copy      { --_hover-bg-a: var(--accent-orange); --_hover-bg-b: var(--accent-orange-strong); --_glow: rgba(191, 176, 138, 0.28); }

.share-btn.share-btn--copied {
    color: #fff;
    border-color: var(--success);
}
.share-btn.share-btn--copied::before {
    background: var(--success);
    opacity: 1;
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 640px) {
    .cikk-share-section {
        flex-direction: column;
        align-items: stretch;
        padding: 22px 18px;
    }
    .share-buttons { justify-content: center; }
}

/* ------------------------------------------------------------
   5. HOZZÁSZÓLÁSOK
   ------------------------------------------------------------ */

/* A rich-text szerkesztő mögötti rejtett textarea (a form ezt küldi be).
   Eddig csak az admin.css definiálta, ezért a frontenden LÁTSZOTT a nyers
   HTML-es második beviteli mező. */
textarea.hidden-textarea {
    display: none;
}

.cikk-comments-section {
    margin-top: 48px;
    padding-top: 36px;
    border-top: 1px solid var(--steel-100);
}

.comments-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 22px;
    font-weight: 800;
    color: var(--steel-900);
    margin-bottom: 24px;
    text-transform: none;
    letter-spacing: -0.015em;
}
.comments-title i, .comments-title svg { width: 22px; height: 22px; color: var(--accent-orange); }

.comments-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 22px;
    padding: 0 8px;
    background: var(--accent-orange-soft);
    color: var(--accent-orange-strong);
    border-radius: var(--radius-sharp, 4px);
    font-size: 12px;
    font-weight: 800;
}

.comment-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 32px;
    padding: 22px;
    background: linear-gradient(170deg, #ffffff 0%, rgba(191, 176, 138, 0.025) 100%);
    border: 1px solid var(--steel-100);
    border-top: 3px solid var(--accent-orange);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 6px 22px rgba(27, 25, 23, 0.07);
}

/* Űrlap fejléce: bejelentkezett felhasználó avatarja + megszólítás */
.comment-form-head {
    display: flex;
    align-items: center;
    gap: 12px;
}
.comment-form-head-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.comment-form-head-text strong {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--steel-900);
}
.comment-form-head-text span {
    font-size: 12.5px;
    color: var(--steel-400);
}

/* Űrlap lábléce: moderációs jelzés + küldés gomb egy sorban */
.comment-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.comment-form-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--steel-400);
}
.comment-form-hint i,
.comment-form-hint svg {
    width: 14px;
    height: 14px;
    color: var(--accent-orange);
}

.comment-textarea-group {
    border: 1px solid var(--steel-200);
    border-radius: var(--radius-sharp, 4px);
    background: var(--bg-card);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    margin-bottom: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.comment-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px;
    background: var(--bg-card-alt);
    border-bottom: 1px solid var(--steel-100);
}

.comment-toolbar .toolbar-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: transparent;
    border: none;
    border-radius: var(--radius-sharp, 4px);
    color: var(--steel-500);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.comment-toolbar .toolbar-btn:hover {
    background: var(--accent-orange-soft);
    color: var(--accent-orange-strong);
}

.comment-toolbar .toolbar-btn:active {
    transform: scale(0.94);
}

.comment-toolbar .toolbar-btn i,
.comment-toolbar .toolbar-btn svg {
    width: 15px;
    height: 15px;
}

/* Elválasztó vonal a formázó gombok és a színválasztó között */
.toolbar-color-dropdown {
    position: relative;
    margin-left: 6px;
    padding-left: 10px;
}

.toolbar-color-dropdown::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background: var(--steel-200);
}

.color-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    z-index: 10;
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 10px;
    background: #ffffff;
    border: 1px solid var(--steel-100);
    border-radius: var(--radius-sharp, 4px);
    box-shadow: 0 8px 24px rgba(27, 25, 23, 0.14);
}

.toolbar-color-dropdown.open .color-dropdown-menu {
    display: grid;
}

.color-dropdown-menu .color-btn {
    width: 20px;
    height: 20px;
    border: 2px solid #ffffff;
    outline: 1px solid var(--steel-200);
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.15s ease, outline-color 0.15s ease;
}

.color-dropdown-menu .color-btn:hover {
    transform: scale(1.2);
    outline-color: var(--steel-400);
}

/* Szerkesztő szövegszín-választó gombjai (korábban inline style="background:..."-ként) */
.color-btn--red    { background: red; }
.color-btn--blue   { background: blue; }
.color-btn--green  { background: green; }
.color-btn--orange { background: orange; }
.color-btn--purple { background: purple; }
.color-btn--gray   { background: gray; }
.color-btn--black  { background: black; }

.comment-form .comment-textarea {
    width: 100%;
    min-height: 110px;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.6;
    color: var(--steel-800);
    background: transparent;
    border: none;
    outline: none;
    resize: vertical;
    margin: 0;
}

.comment-editor-div {
    width: 100%;
    min-height: 110px;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.6;
    color: var(--steel-800);
    background: transparent;
    border: none;
    outline: none;
    resize: vertical;
    overflow-y: auto;
    text-align: left;
}
.comment-editor-div:empty::before {
    content: attr(placeholder);
    color: var(--steel-400);
    cursor: text;
}

.comment-textarea-group:focus-within {
    border-color: var(--accent-orange);
    box-shadow: 0 0 0 3px var(--accent-orange-soft);
}

.comment-submit-btn {
    align-self: flex-end;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    font-size: 13px;
}
.comment-submit-btn i, .comment-submit-btn svg { width: 14px; height: 14px; }

/* Vendég-prompt: prémium CTA-sáv bejelentkezés gombbal */
.comment-guest-prompt {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 32px;
    padding: 18px 22px;
    background: linear-gradient(135deg, rgba(191, 176, 138, 0.05) 0%, rgba(191, 176, 138, 0.02) 100%);
    border: 1px solid rgba(191, 176, 138, 0.18);
    border-radius: var(--radius-sharp, 4px);
    color: var(--steel-600);
    font-size: 14px;
    font-weight: 600;
}
.comment-guest-prompt i,
.comment-guest-prompt svg {
    width: 30px;
    height: 30px;
    padding: 7px;
    box-sizing: border-box;
    border-radius: 50%;
    background: var(--accent-orange-soft);
    color: var(--accent-orange-strong);
    flex-shrink: 0;
}

.comment-guest-login-link {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    padding: 9px 20px;
    border-radius: var(--radius-sharp, 4px);
    background: var(--accent-orange);
    color: #ffffff;
    font-weight: 800;
    font-size: 13.5px;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(191, 176, 138, 0.3);
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.comment-guest-login-link:hover {
    background: var(--accent-orange-strong);
    transform: translateY(-1px);
    box-shadow: 0 5px 16px rgba(191, 176, 138, 0.4);
}

.comments-list { display: flex; flex-direction: column; gap: 16px; }

.no-comments-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 36px 28px;
    text-align: center;
    color: var(--steel-400);
    background: var(--bg-card-alt);
    border: 1px dashed var(--steel-200);
    border-radius: var(--radius-sharp, 4px);
    font-size: 14px;
}
.no-comments-text i,
.no-comments-text svg {
    width: 34px;
    height: 34px;
    color: var(--accent-orange);
    opacity: 0.55;
}
.no-comments-text p { margin: 0; }

/* Komment-kártya: avatar | tartalom rács, hover-emelkedés */
.comment-item {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 14px;
    padding: 18px 20px;
    background: var(--bg-card);
    border: 1px solid var(--steel-100);
    border-radius: var(--radius-sharp, 4px);
}

/* Avatar: kép vagy márka-gradienses monogram */
.comment-avatar {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(27, 25, 23, 0.12);
}
.comment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.comment-avatar-initials {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--accent-orange);
    color: #ffffff;
    font-size: 17px;
    font-weight: 800;
}
.comment-avatar--sm {
    width: 38px;
    height: 38px;
}
.comment-avatar--sm .comment-avatar-initials { font-size: 15px; }

.comment-main { min-width: 0; }

.comment-header-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 7px;
}
.comment-item .comment-author { font-weight: 800; color: var(--steel-900); font-size: 14.5px; }
.comment-item .comment-date { color: var(--steel-400); font-size: 12.5px; white-space: nowrap; margin-left: auto; }

/* Hitelesített / szerkesztőségi jelvény */
.comment-author-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 9px;
    border-radius: 4px;
    background: var(--accent-orange-soft);
    color: var(--accent-orange-strong);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.comment-author-chip i,
.comment-author-chip svg {
    width: 12px;
    height: 12px;
}

/* Admin törlés gomb — csak hoverre erősödik fel */
.comment-delete-form { display: inline-flex; }
.comment-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sharp, 4px);
    color: var(--steel-300, #c8c2bb);
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.comment-delete-btn:hover {
    color: var(--danger);
    background: var(--danger-soft);
    border-color: var(--danger);
}
.comment-delete-btn i,
.comment-delete-btn svg {
    width: 14px;
    height: 14px;
}

.comment-text {
    font-size: 14.5px; line-height: 1.65; color: var(--steel-700);
    margin: 0; white-space: pre-wrap; word-wrap: break-word;
}
.comment-text blockquote {
    border-left: 3px solid var(--accent-orange);
    padding-left: 12px;
    margin: 10px 0;
    font-style: italic;
    color: var(--steel-600);
}
.comment-text ul {
    list-style: none;
    padding-left: 0;
    margin: 10px 0;
}
.comment-text ul li {
    position: relative;
    padding-left: 15px;
    margin-bottom: 4px;
}
.comment-text ul li::before {
    content: "■";
    position: absolute;
    left: 0;
    top: 1px;
    color: var(--accent-orange);
    font-size: 8px;
}

.comment-flagged-box {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px;
    background: var(--warning-soft); border: 1px solid var(--warning); border-radius: var(--radius-sharp, 4px);
    color: var(--warning); font-size: 13px; font-style: italic;
}
.comment-flagged-box i, .comment-flagged-box svg { width: 16px; height: 16px; flex-shrink: 0; }

/* "AI fordítva" mini-címke a lefordított hozzászólások alatt */
.comment-translated-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 3px 9px;
    border-radius: 4px;
    background: var(--bg-card-alt);
    border: 1px solid var(--steel-100);
    color: var(--steel-400);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.comment-translated-tag i,
.comment-translated-tag svg { width: 11px; height: 11px; color: var(--accent-orange); }

.alert { padding: 12px 16px; border-radius: var(--radius-sharp, 4px); font-size: 14px; margin-bottom: 16px; }
.alert--success { background: var(--success-soft); border: 1px solid var(--success); color: var(--success); }
.alert--danger  { background: var(--danger-soft);  border: 1px solid var(--danger);  color: var(--danger);  }

/* ------------------------------------------------------------
   6. JOBB OLDALI SÁV — 4 AI Pénz + 4 AI Modell
   ------------------------------------------------------------ */
.cikk-aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: sticky;
    top: 84px;
    min-width: 0;
}

/* Tableten a cikk alá kerül: a két blokk egymás MELLETT hasznosítja a
   szélességet, mobilon vissza egy oszlopba */
@media (max-width: 1024px) {
    .cikk-aside {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: start;
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .cikk-aside {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .cikk-aside-header {
        padding: 14px 14px 12px;
    }
}

/* Prémium sáv-blokk: felső fémes narancs csík + lágy ragyogás (a kiemelt
   kártyák közös formanyelve), finom réteges árnyékkal */
.cikk-aside-block {
    background:
        linear-gradient(to right, transparent, #bfb08a 25%, #bfb08a 75%, transparent) top center / 78% 2px no-repeat,
        radial-gradient(ellipse 50% 100% at 50% 0%,
            rgba(191, 176, 138, 0.12) 0%,
            rgba(191, 176, 138, 0.02) 60%,
            transparent 78%) top center / 100% 22px no-repeat,
        linear-gradient(180deg, #ffffff 0%, var(--bg-card) 100%);
    border: 1px solid rgba(191, 176, 138, 0.25);
    border-radius: var(--radius-sharp, 4px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 4px 16px rgba(43, 38, 32, 0.03),
        0 1px 3px rgba(43, 38, 32, 0.02);
    overflow: hidden;
    transition: all 0.25s ease;
}

.cikk-aside-block:hover {
    border-color: rgba(191, 176, 138, 0.45);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 8px 24px rgba(43, 38, 32, 0.07),
        0 2px 6px rgba(191, 176, 138, 0.05);
}

.cikk-aside-header {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 12px;
    padding: 16px 14px 14px;
    background:
        linear-gradient(to right,
            rgba(191, 176, 138, 0.22), rgba(191, 176, 138, 0.03) 65%, transparent)
            bottom left / 100% 1px no-repeat,
        linear-gradient(180deg, var(--bg-card-alt) 0%, rgba(255, 255, 255, 0) 100%);
    position: relative;
}

/* Fémes pezsgő-arany accent-sáv a fejléc bal élén */
.cikk-aside-header::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px;
    height: 100%;
    background: #bfb08a;
}

.cikk-aside-eyebrow {
    grid-column: 1;
    font-size: 10.5px;
    font-weight: 800;
    color: #bfae88;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
}

.cikk-aside-title {
    grid-column: 1;
    margin: 4px 0 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--steel-900);
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.cikk-aside-link {
    grid-column: 2;
    grid-row: 1 / span 2;
    font-size: 11.5px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
    color: var(--steel-600);
    text-decoration: none;
    white-space: nowrap;
    padding: 5px 12px;
    border-radius: var(--radius-sharp, 4px);
    border: 1px solid rgba(191, 176, 138, 0.3);
    background: linear-gradient(180deg, #ffffff 0%, #f6efdd 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 2px rgba(43, 38, 32, 0.03);
    transition: all 0.2s ease;
}
.cikk-aside-link:hover {
    color: #000000;
    border-color: #bfb08a;
    background: linear-gradient(180deg, #ffffff 0%, #ecdcb9 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 3px 8px rgba(191, 176, 138, 0.15);
}

/* Letisztult fejléc-variáns: csak a cím (eyebrow és "Összes →" link nélkül),
   megmarad a bal oldali arany accent-sáv. */
.cikk-aside-header--clean {
    display: flex;
    align-items: center;
    padding: 15px 18px;
}
.cikk-aside-header--clean .cikk-aside-title {
    margin: 0;
}

/* Cikk-lista (AI Pénz) */
.cikk-aside-list { list-style: none; margin: 0; padding: 0; }

.cikk-aside-item + .cikk-aside-item {
    border-top: 1px solid rgba(191, 176, 138, 0.18);
}

.cikk-aside-item-link {
    position: relative;
    display: grid;
    grid-template-columns: 74px 1fr;
    gap: 12px;
    padding: 12px 14px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}
.cikk-aside-item-link:hover { background: linear-gradient(90deg, rgba(191, 176, 138, 0.08) 0%, rgba(191, 176, 138, 0.02) 100%); }

/* Hoverre balról beúszó arany accent-sáv */
.cikk-aside-item-link::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px;
    height: 100%;
    background: #bfb08a;
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 0.2s ease;
}
.cikk-aside-item-link:hover::before { transform: scaleY(1); }

.cikk-aside-item-thumb {
    width: 74px; height: 62px;
    border-radius: var(--radius-sharp, 4px);
    overflow: hidden;
    background: var(--bg-card-alt);
    border: 1px solid var(--steel-100);
    box-shadow: inset 0 1px 2px rgba(27, 25, 23, 0.08);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

/* Népszerű most — sorszám-lapka a borítókép helyén (fém + pezsgő család) */
.cikk-aside-pop-rank {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sharp, 4px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background:
        radial-gradient(135% 120% at 50% -30%, rgba(191, 176, 138, 0.18) 0%, rgba(191, 176, 138, 0) 60%),
        linear-gradient(180deg, #2e2e2e 0%, #171717 55%, #0d0d0d 100%);
    color: var(--accent-on-dark);
    font-size: 13px;
    font-weight: 800;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 2px 8px rgba(13, 13, 13, 0.25);
    transition: border-color 0.2s ease, color 0.2s ease;
}

.cikk-aside-item-link:hover .cikk-aside-pop-rank {
    border-color: rgba(191, 176, 138, 0.55);
    color: #f5efdd;
}
.cikk-aside-item-link:hover .cikk-aside-item-thumb {
    border-color: #bfb08a;
    box-shadow: 0 3px 10px rgba(43, 38, 32, 0.06);
}

.cikk-aside-item-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform 0.3s ease;
}
.cikk-aside-item-link:hover .cikk-aside-item-thumb img { transform: scale(1.05); }

.cikk-aside-item-placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--steel-300);
}
.cikk-aside-item-placeholder i, .cikk-aside-item-placeholder svg { width: 22px; height: 22px; }

.cikk-aside-item-body {
    display: flex; flex-direction: column; gap: 4px; min-width: 0;
}

.cikk-aside-item-sub {
    display: inline-block;
    font-size: 10px; font-weight: 800;
    color: #bfae88;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
}

.cikk-aside-item-title {
    margin: 0;
    font-size: 13.5px; font-weight: 700;
    color: var(--steel-900);
    line-height: 1.35;
    letter-spacing: -0.005em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cikk-aside-item-link:hover .cikk-aside-item-title { color: #000000; }

.cikk-aside-item-date {
    margin-top: auto;
    font-size: 11.5px; color: var(--steel-400); font-weight: 500;
}

/* Modell-lista (AI Modellek) */
.cikk-aside-models { list-style: none; margin: 0; padding: 0; }
.cikk-aside-model + .cikk-aside-model {
    border-top: 1px solid rgba(191, 176, 138, 0.18);
}

.cikk-aside-model-link {
    position: relative;
    display: grid;
    grid-template-columns: 42px 1fr 16px;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    text-decoration: none;
    color: inherit;
    transition: all 0.2s ease;
}
.cikk-aside-model-link:hover { background: linear-gradient(90deg, rgba(191, 176, 138, 0.08) 0%, rgba(191, 176, 138, 0.02) 100%); }

/* Hoverre balról beúszó arany accent-sáv */
.cikk-aside-model-link::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 3px;
    height: 100%;
    background: #bfb08a;
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 0.2s ease;
}
.cikk-aside-model-link:hover::before { transform: scaleY(1); }

/* Fémes, csiszolt világos logó-tile */
.cikk-aside-model-logo {
    width: 42px; height: 42px;
    border-radius: var(--radius-sharp, 4px);
    background: linear-gradient(160deg, #ffffff 0%, #f4efec 100%);
    border: 1px solid var(--steel-200);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 3px rgba(43, 38, 32, 0.07);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.cikk-aside-model-link:hover .cikk-aside-model-logo {
    border-color: #bfb08a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 3px 10px rgba(43, 38, 32, 0.08);
    transform: translateY(-1px);
}
.cikk-aside-model-logo img { max-width: 78%; max-height: 78%; object-fit: contain; display: block; }

.cikk-aside-model-initials {
    font-size: 15px; font-weight: 800;
    color: var(--steel-700); letter-spacing: -0.02em;
}

.cikk-aside-model-body {
    display: flex; flex-direction: column; gap: 2px; min-width: 0;
}

.cikk-aside-model-name {
    margin: 0;
    font-size: 13.5px; font-weight: 800;
    color: var(--steel-900);
    letter-spacing: -0.01em; line-height: 1.2;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cikk-aside-model-cat {
    font-size: 11px; color: var(--steel-500); font-weight: 600;
    letter-spacing: 0.02em; text-transform: uppercase;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.cikk-aside-model-chev {
    color: var(--steel-300);
    width: 16px; height: 16px;
    transition: color 0.15s ease, transform 0.15s ease;
}
.cikk-aside-model-link:hover .cikk-aside-model-chev {
    color: #bfb08a;
    transform: translateX(2px);
}

/* ------------------------------------------------------------
   7. KAPCSOLÓDÓ CIKKEK — a grid alatt teljes szélesség
   ------------------------------------------------------------ */
/* ============================================================
   HASONLÓ TÉMÁBAN — világos kártya-panel a cikk alján, téma-alapú
   ajánlással. A fejléc kis fém ikon-lapkája adja a márka-akcentust
   (mint a forrás-strip címkéje), a panel maga világos marad.
   ============================================================ */
.cikk-related {
    position: relative;
    max-width: 1400px;
    margin: 0 auto 60px;
    padding: 24px 28px 28px;
    border-radius: var(--radius-sharp, 4px);
    border: 1px solid var(--steel-200);
    background: linear-gradient(180deg, #ffffff 0%, #faf8f6 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        0 8px 28px rgba(27, 25, 23, 0.07);
}

/* A sötét változat csillanás-rétege a világos panelen nem kell */
.cikk-related-sheen {
    display: none;
}

.cikk-related-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 20px;
    background: linear-gradient(to right,
        var(--steel-200), rgba(211, 206, 198, 0.25) 55%, transparent)
        bottom left / 100% 1px no-repeat;
}

.cikk-related-title {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--steel-900);
}

/* Mini fém-lapka az ikonnak — az elemzés-fejléc kistestvére */
.cikk-related-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: var(--radius-sharp, 4px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background:
        radial-gradient(135% 95% at 50% -12%, rgba(191, 176, 138, 0.28) 0%, rgba(191, 176, 138, 0) 55%),
        linear-gradient(180deg, #343434 0%, #1c1c1c 55%, #101010 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -3px 7px rgba(0, 0, 0, 0.55);
}

.cikk-related-mark i,
.cikk-related-mark svg {
    width: 15px;
    height: 15px;
    color: var(--accent-on-dark);
    filter: drop-shadow(0 0 4px rgba(191, 176, 138, 0.5));
}

.cikk-related-link {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--steel-500);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.cikk-related-link:hover {
    color: var(--accent-orange-strong);
}

/* --- Ajánló-kártyák: világos lapok, pezsgő hover-kerettel --- */
.cikk-related-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.cikk-related-card {
    display: flex;
    flex-direction: column;
    border-radius: var(--radius-sharp, 4px);
    overflow: hidden;
    text-decoration: none;
    border: 1px solid var(--steel-100);
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(27, 25, 23, 0.04);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}

.cikk-related-card:hover {
    transform: translateY(-3px);
    border-color: #bfb08a;
    box-shadow:
        0 10px 24px rgba(43, 38, 32, 0.10),
        0 2px 6px rgba(43, 38, 32, 0.04);
}

.cikk-related-cover {
    height: 130px;
    background: var(--steel-100);
    overflow: hidden;
}

.cikk-related-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.cikk-related-card:hover .cikk-related-cover img {
    transform: scale(1.04);
}

.cikk-related-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--steel-300);
}

.cikk-related-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 15px 16px;
    flex: 1;
}

.cikk-related-card-title {
    margin: 0;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--steel-900);
    transition: color 0.15s ease;
}

.cikk-related-card:hover .cikk-related-card-title {
    color: #000000;
}

.cikk-related-meta {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--steel-400);
}

.cikk-related-views {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.cikk-related-views i,
.cikk-related-views svg {
    width: 12px;
    height: 12px;
    color: var(--steel-400);
}

@media (max-width: 1024px) {
    .cikk-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .cikk-related {
        padding: 18px 15px 20px;
        margin-bottom: 40px;
    }

    .cikk-related-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Modell-mini kártyák a főoldalon ------------------------------------ */
.model-mini-card { min-height: 300px; }

.model-mini-cover {
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--bg-page) 0%, #e7e9ec 100%);
}

.model-mini-logo {
    max-width: 60%;
    max-height: 70%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.model-mini-initials {
    font-size: 36px;
    font-weight: 800;
    color: var(--steel-400);
    letter-spacing: -0.02em;
}


/* ==========================================================================
   Lista-oldal (ai-hirek / ai-penz): 2-oszlopos elrendezés + jobb sáv,
   egyszerűsített hero (csak cím, teljes szélességben alul)
   ========================================================================== */
.article-list-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 480px;
    gap: 40px;
    align-items: start;
}
.article-list-main { min-width: 0; }

.article-list-main .article-lead-wrap,
.article-list-main .article-grid,
.article-list-main .article-section-head,
.article-list-main .article-public-filters {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

/* Az .article-list-aside a .cikk-aside stílusát örökli (sticky, kártya-blokkok).
   A fejlécből kimarad az eyebrow és a "→" link — csak a cím marad. */
/* Letisztult fejléc-variáns (jelenleg nem használt): a prémium hajszálvonalat
   örökli az alap .cikk-aside-header-ből, csak az elrendezése egyszerűbb. */
.cikk-aside-header--plain {
    display: block;
    padding: 14px 16px;
    margin: 0;
}
.cikk-aside-header--plain .cikk-aside-title { margin: 0; }

@media (max-width: 1024px) {
    .article-list-layout { grid-template-columns: 1fr; gap: 32px; }
    .article-list-aside { flex-direction: row; flex-wrap: wrap; }
    .article-list-aside .cikk-aside-block { flex: 1 1 320px; }
}
@media (max-width: 640px) {
    .article-list-aside { flex-direction: column; }
}

/* Hero (vezércikk): CSAK a cím — de TELJES SZÉLESSÉGBEN, üveg (glassmorphism)
   sávként a kép alján. A `.article-card-featured--lead` ős+`--title-only` páros
   (0,2,0) felülírja a ≥900px-es `max-width: 640px` szabályt is, hogy a sáv
   tényleg végigérjen. Az üveg-hatás (blur + áttetsző fehér) visszakerül. */
.article-card-featured--lead .article-card-featured-body--title-only {
    left: 0;
    right: 0;
    bottom: 0;
    max-width: none;
    padding: 22px 32px;
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(22px) saturate(160%);
    -webkit-backdrop-filter: blur(22px) saturate(160%);
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.30);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
}
.article-card-featured-body--title-only .article-card-featured-title {
    margin: 0;
    -webkit-line-clamp: 2;
}


/* 🔥 FEJLÉC: BETA AUDIO BADGE */
.cikk-audio-player-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.cikk-audio-powered-by {
    display: flex;
    align-items: center;
    gap: 6px;
    opacity: 0.85;
}

/* 🎧 BETA AUDIO BADGE - Színes, pulzáló */
.cikk-audio-beta-badge {
    background-size: 200% 200%;
    border-radius: var(--radius-sharp, 4px);
}




@keyframes betaPulse {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes betaDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.6); }
}

/* Kép-a-képben módban elrejtjük a márkajelzést a helyhiány miatt */
.cikk-audio-player-floating--mini .cikk-audio-powered-by {
    display: none;
}



.cikk-audio-cartesia-logo {
    height: 14px;
    color: rgba(255, 255, 255, 0.7);
}

/* Eredeti ElevenLabs elemek elrejtése (ha valahol még ott maradnak) */
.elevenlabs-brand-icon,
.elevenlabs-brand-text {
    display: none;
}

.cikk-audio-close-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--steel-600, #40382f);
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    padding: 2px 4px;
}

.cikk-audio-close-btn:hover {
    opacity: 1;
    color: var(--danger, #d6341a);
}

.cikk-audio-close-btn svg, .cikk-audio-close-btn i {
    width: 12px;
    height: 12px;
}

/* Belső fehér box */
.cikk-audio-inner-card {
    background: rgba(255, 255, 255, 0.52);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--radius-sharp, 4px);
    padding: 12px;
    margin-bottom: 12px;
    box-shadow: inset 0 1px 2px rgba(255,255,255,0.8), 0 2px 6px rgba(0,0,0,0.02);
}

.cikk-audio-meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.cikk-audio-thumb-wrap {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sharp, 4px);
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    background: #fff;
    border: 1px solid var(--steel-100);
}

.cikk-audio-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cikk-audio-thumb-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--steel-100);
    color: var(--steel-400);
}

.cikk-audio-thumb-placeholder svg {
    width: 18px;
    height: 18px;
}

.cikk-audio-title-wrap {
    flex-grow: 1;
    min-width: 0;
}

.cikk-audio-article-title {
    font-size: 13.5px;
    line-height: 1.4;
    font-weight: 600;
    margin: 0;
    color: var(--steel-800, #1b1511);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Timeline & hangerő sor */
.cikk-audio-progress-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cikk-audio-time-val {
    font-size: 11px;
    font-family: monospace;
    font-weight: 500;
    color: var(--steel-600, #40382f);
    min-width: 32px;
}

.cikk-audio-slider-container {
    flex-grow: 1;
    height: 14px;
    display: flex;
    align-items: center;
    cursor: pointer;
}

.cikk-audio-progress-bar {
    position: relative;
    width: 100%;
    height: 4px;
    background: var(--steel-200, #ddd6cf);
    border-radius: 2px;
}

.cikk-audio-progress-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 0%;
    background: var(--accent-orange, #3e3a34);
    border-radius: 2px;
}

.cikk-audio-progress-knob {
    position: absolute;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--accent-orange, #3e3a34);
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
    transition: transform 0.1s ease;
}

.cikk-audio-slider-container:hover .cikk-audio-progress-knob {
    transform: translate(-50%, -50%) scale(1.2);
}

/* Hangerő csúszka */
.cikk-audio-volume-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 4px;
    position: relative;
}

.cikk-audio-mute-btn {
    background: none;
    border: none;
    color: var(--steel-600, #40382f);
    cursor: pointer;
    padding: 2px;
    opacity: 0.8;
    transition: opacity 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
}

.cikk-audio-mute-btn:hover {
    opacity: 1;
    color: var(--accent-orange, #3e3a34);
}

.cikk-audio-mute-btn svg, .cikk-audio-mute-btn i {
    width: 16px;
    height: 16px;
}

.cikk-audio-volume-bar-wrap {
    width: 0;
    overflow: hidden;
    height: 14px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: width 0.25s ease;
}

.cikk-audio-volume-wrap:hover .cikk-audio-volume-bar-wrap {
    width: 50px;
    margin-left: 2px;
}

.cikk-audio-volume-bar {
    width: 46px;
    height: 4px;
    background: var(--steel-200, #ddd6cf);
    border-radius: 2px;
    position: relative;
}

.cikk-audio-volume-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 80%;   /* alapérték — a JS állítja a tényleges hangerőre */
    background: var(--accent-orange, #3e3a34);
    border-radius: 2px;
}

/* Alsó vezérlőgombok */
.cikk-audio-controls-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cikk-audio-ctrl-left, .cikk-audio-ctrl-right {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Egyenlő, RUGALMAS oldalsávok — a középső lejátszás-gomb így pontosan
       középen marad, a jobb csoport (0.9x sebesség + minimize) pedig elfér.
       (Korábban fix width:70px volt, amiből a „0.9x" badge KILÓGOTT.) */
    flex: 1 1 0;
    min-width: 0;
}

.cikk-audio-ctrl-right {
    justify-content: flex-end;
    flex-wrap: nowrap;
}

.cikk-audio-ctrl-center {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cikk-audio-icon-btn {
    background: none;
    border: none;
    color: var(--steel-600, #40382f);
    cursor: pointer;
    padding: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.85;
    flex: none;
    transition: opacity 0.2s ease, color 0.2s ease;
}

.cikk-audio-icon-btn:hover {
    opacity: 1;
    color: var(--accent-orange, #3e3a34);
}

.cikk-audio-icon-btn svg, .cikk-audio-icon-btn i {
    width: 18px;
    height: 18px;
}

.cikk-audio-play-round-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: var(--charcoal, #161616);
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(27, 25, 23, 0.2);
    transition: all 0.2s ease;
}

.cikk-audio-play-round-btn:hover {
    background: var(--accent-orange, #3e3a34);
    transform: scale(1.05);
    box-shadow: 0 4px 12px var(--accent-orange-glow, rgba(191, 176, 138, 0.25));
}

.cikk-audio-play-round-btn svg {
    width: 20px;
    height: 20px;
}

/* Lejátszás ikon kis finomítása a kör közepén való optikai igazításhoz */
#audioIconPlay {
    transform: translateX(1.5px);
}

.cikk-audio-speed-badge {
    background: none;
    border: 1px solid var(--steel-200, #ddd6cf);
    color: var(--steel-600, #40382f);
    border-radius: var(--radius-sharp, 4px);
    font-size: 11px;
    font-weight: 700;
    padding: 3px 6px;
    cursor: pointer;
    min-width: 32px;
    text-align: center;
    flex: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.cikk-audio-speed-badge:hover {
    border-color: var(--accent-orange, #3e3a34);
    color: var(--accent-orange, #3e3a34);
    background: var(--accent-orange-soft, rgba(191, 176, 138,0.08));
}

/* ============================================================
   KÉP-A-KÉPBEN MINI MÓD (Pip gomb kattintásra)
   ============================================================ */
.cikk-audio-player-floating--mini {
    width: 220px;
    padding: 10px;
}

.cikk-audio-player-floating--mini .cikk-audio-inner-card {
    display: none; /* Cím és borító elrejtése */
}

.cikk-audio-player-floating--mini .cikk-audio-ctrl-left {
    display: none;
}

.cikk-audio-player-floating--mini .cikk-audio-ctrl-right {
    flex: 0 0 auto;
    width: auto;
}

.cikk-audio-player-floating--mini .cikk-audio-controls-row {
    justify-content: center;
    gap: 12px;
}

/* A mobilos igazítás (teljes szélességű alsó dokk a fekete lábléc-sáv fölött)
   a base lejátszó-szabályok UTÁN él — lásd a szekció végén. Itt szándékosan
   nincs, mert forrás-sorrendben a késői base szabály felülírná. */

/* ============================================================
   🔥 AUDIO EQ — a pezsgő hanghullám közös alapja. A hero fém-lapka
   (cikk-audio-cta/face/sheen) kivezetve: a lejátszó egyetlen belépője
   a „Meghallgatom" gomb (.cikk-ai-listen), amely ezt az EQ-t használja
   mini méretben.
   ============================================================ */
/* Pezsgő hanghullám — „harang" burkológörbe (középen magas), lágy lélegzés */
.cikk-audio-eq {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    height: 26px;
}

.cikk-audio-eq span {
    width: 3px;
    border-radius: var(--radius-sharp, 4px);
    background: linear-gradient(180deg, #fdf7e6 0%, #e2d3a8 30%, #bfb08a 60%, #7a7058 100%);
    box-shadow:
        0 0 6px rgba(191, 176, 138, 0.55),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
    animation: cikkAudioEq 1.5s ease-in-out infinite;
    transform-origin: center;
}

/* Burkológörbe (középen a legmagasabb sáv) + szimmetrikus, kifelé futó
   animáció-fázis — sávonként egy blokkban */
.cikk-audio-eq span:nth-child(1),
.cikk-audio-eq span:nth-child(5) { height: 40%; animation-delay: 0s; }
.cikk-audio-eq span:nth-child(2),
.cikk-audio-eq span:nth-child(4) { height: 72%; animation-delay: -0.3s; }
.cikk-audio-eq span:nth-child(3) { height: 100%; animation-delay: -0.6s; }

@keyframes cikkAudioEq {
    0%, 100% { transform: scaleY(0.42); opacity: 0.8; }
    50%      { transform: scaleY(1);    opacity: 1; }
}

/* Ugyanez a hullám kicsiben — az AI-elemzés fejlécének „Meghallgatom" gombján.
   Itt kell állnia, az .cikk-audio-eq alapszabályok után, hogy ne íródjon felül. */
.cikk-audio-eq--mini {
    height: 15px;
    gap: 2px;
}

.cikk-audio-eq--mini span {
    width: 2px;
}

/* Hoverre és lejátszás közben gyorsabb, teltebb, fényesebb kilengés */
.cikk-ai-listen:hover .cikk-audio-eq span,
.cikk-ai-listen.is-playing .cikk-audio-eq span {
    animation-duration: 0.78s;
    box-shadow:
        0 0 10px rgba(191, 176, 138, 0.9),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Lejátszás közben a „Meghallgatom" pezsgő fényt kap */
.cikk-ai-listen.is-playing {
    border-color: rgba(191, 176, 138, 0.65);
    background: rgba(191, 176, 138, 0.14);
    color: #f5efdd;
}

@media (prefers-reduced-motion: reduce) {
    .cikk-audio-eq span {
        animation: none;
        transform: scaleY(0.85);
        opacity: 1;
    }
}

/* ============================================================
   GYAKORI KÉRDÉSEK (hub-oldalak alja) — natív <details>, JS nélkül.
   Világos kártya-család (mint a forrás-strip), pezsgő nyitás-jelzéssel.
   A géppel olvasható párja a FAQPage JSON-LD (article-list-public.php).
   ============================================================ */
.hub-faq {
    margin-top: 40px;
}

/* A cikkoldali változat alul is kap térközt (a hozzászólás-blokk előtt) */
.hub-faq--cikk {
    margin-bottom: 30px;
}

.hub-faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* A kérdés-lapkák a sötét fém + pezsgő családban élnek (mint a cikk-hero
   badge-ek és az AI-elemzés panel) — a világos oldalon sötét komponensek */
.hub-faq-item {
    position: relative;
    background:
        radial-gradient(120% 80% at 50% -15%, rgba(191, 176, 138, 0.12) 0%, rgba(191, 176, 138, 0) 60%),
        linear-gradient(180deg, #2e2e2e 0%, #171717 55%, #0d0d0d 100%);
    border: 1px solid rgba(191, 176, 138, 0.25);
    border-radius: var(--radius-sharp, 4px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 4px 14px rgba(13, 13, 13, 0.18);
    overflow: hidden;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.hub-faq-item:hover {
    border-color: rgba(191, 176, 138, 0.5);
}

.hub-faq-item[open] {
    border-color: rgba(191, 176, 138, 0.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 8px 24px rgba(191, 176, 138, 0.14);
}

.hub-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 19px;
    font-size: 14.5px;
    font-weight: 700;
    color: #f2eee4;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    list-style: none;   /* alap details-marker ki */
    user-select: none;
    transition: color 0.15s ease;
}

.hub-faq-q::-webkit-details-marker {
    display: none;
}

.hub-faq-q:hover {
    color: var(--accent-on-dark);
}

.hub-faq-chev {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: rgba(191, 176, 138, 0.6);
    transition: transform 0.2s ease, color 0.2s ease;
}

.hub-faq-item[open] .hub-faq-chev {
    transform: rotate(180deg);
    color: var(--accent-on-dark);
}

.hub-faq-item[open] .hub-faq-q {
    color: var(--accent-on-dark);
    background: linear-gradient(to right,
        rgba(191, 176, 138, 0.30), rgba(191, 176, 138, 0.06) 55%, transparent)
        bottom left / 100% 1px no-repeat;
}

.hub-faq-a {
    margin: 0;
    padding: 14px 19px 17px;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(236, 231, 219, 0.75);
}

@media (max-width: 640px) {
    .hub-faq {
        margin-top: 30px;
    }

    .hub-faq-q {
        padding: 12px 14px;
        font-size: 13.5px;
    }

    .hub-faq-a {
        padding: 0 14px 14px;
        font-size: 13.5px;
    }
}

/* ============================================================
   Hanganyag-jelölő a LISTÁS kártyákon — csupasz fejhallgató-ikon
   a cím mellett, háttér-lapka nélkül. Világos kártyatesten sötét
   pezsgő, sötét overlay-es kártyán (featured / kis kártya) világos
   pezsgő + halvány vetett árnyék, hogy a fotón is látsszon.
   A jelentését a .kt-tip buborék mondja ki hoverre.
   ============================================================ */
.card-audio-flag {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: -3px;
    margin-left: 7px;
    flex-shrink: 0;
    color: #8a774a;
    transition: color 0.15s ease;
}

.card-audio-flag i,
.card-audio-flag svg {
    width: 16px;
    height: 16px;
}

.article-card:hover .card-audio-flag {
    color: #a3936c;
}

/* Sötét hátterű kártyákon világos pezsgő ikon */
.article-card-featured .card-audio-flag,
.articles-grid-small .card-audio-flag {
    color: #d9c9a0;
    filter: drop-shadow(0 1px 2px rgba(13, 13, 13, 0.55));
}

.article-card-featured:hover .card-audio-flag,
.articles-grid-small .article-card:hover .card-audio-flag {
    color: #f0e5c5;
}

.article-card-featured .card-audio-flag i,
.article-card-featured .card-audio-flag svg {
    width: 18px;
    height: 18px;
}

/* ============================================================
   🇭🇺 Mini trikolór (.hu-flag-mini) — a cikk-hero „Magyar vonatkozás"
   chipje és a /magyar-ai Radar-átvezető sávja használja.
   ============================================================ */
/* Tompított trikolór, hogy illeszkedjen a fekete/pezsgő palettához */
.hu-flag-mini {
    display: inline-block;
    width: 14px;
    height: 10px;
    border-radius: 2px;
    background: linear-gradient(
        180deg,
        #b03a35 0%, #b03a35 33.4%,
        #efece4 33.4%, #efece4 66.7%,
        #3f6449 66.7%, #3f6449 100%
    );
    box-shadow: inset 0 0 0 1px rgba(13, 13, 13, 0.25);
}

/* (A hero meta-chip trikolór méretét a .cikk-hero-meta-item--hu adja.) */

/* --- 🇭🇺 Sarok-zászló: a borító jobb felső sarkát kitöltő trikolór
   háromszög (behajtott szalag), futó fény-csillanással — keret nélkül.
   A clip-path a .hu-corner-tri-face-en él, így a wrapperre tett buborék
   (.kt-tip ::after) nem vágódik le. --- */
.hu-corner-tri {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: block;
    width: 44px;
    height: 44px;
    pointer-events: auto;
}

.hu-corner-tri-face {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%);
    background: linear-gradient(
        135deg,
        #cd2a3e 0%, #cd2a3e 34%,
        #f3f0e7 34%, #f3f0e7 67%,
        #436f4d 67%, #436f4d 100%
    );
    /* Hajszálvékony sötét él az átló mentén, hogy leváljon a fotóról */
    filter: drop-shadow(-1px 1px 2px rgba(13, 13, 13, 0.45));
    transition: filter 0.2s ease;
    overflow: hidden;
    /* Lassú lélegzés: elhalványul átlátszóig, majd visszaúszik */
    animation: huCornerFade 5.5s ease-in-out infinite;
}

.article-card:hover .hu-corner-tri-face,
.article-card-featured:hover .hu-corner-tri-face {
    filter: drop-shadow(-1px 1px 3px rgba(13, 13, 13, 0.6)) brightness(1.08);
}

@keyframes huCornerFade {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

/* Korábbi futó fény-csillanás — kikapcsolva, a halványulás váltotta */
.hu-corner-tri-sheen {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    background: linear-gradient(
        115deg,
        transparent 35%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 65%
    );
    transform: translateX(-120%);
    animation: huCornerTriSheen 4.6s ease-in-out infinite;
}

@keyframes huCornerTriSheen {
    0%, 55%  { transform: translateX(-120%); }
    80%      { transform: translateX(120%); }
    100%     { transform: translateX(120%); }
}

/* Nagy (featured) kártyán nagyobb befogó */
.article-card-featured .hu-corner-tri {
    width: 58px;
    height: 58px;
}

/* Ha a kártyán Gyorshír-címke is van (szintén jobb felül), csússzon el
   a háromszög mellől — JS nélkül, :has()-szal */
.article-card-cover:has(.hu-corner-tri) .article-card-breaking {
    right: 50px;
}

.article-card-featured:has(.hu-corner-tri) .article-card-featured-breaking {
    right: 70px;
}

@media (max-width: 640px) {
    .hu-corner-tri {
        width: 34px;
        height: 34px;
    }

    .article-card-featured .hu-corner-tri {
        width: 44px;
        height: 44px;
    }

    .article-card-cover:has(.hu-corner-tri) .article-card-breaking {
        right: 40px;
    }

    .article-card-featured:has(.hu-corner-tri) .article-card-featured-breaking {
        right: 52px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hu-corner-tri-face {
        animation: none;
    }

    .hu-corner-tri-sheen {
        animation: none;
        display: none;
    }
}

/* --- Formázott buborék (.kt-tip): fekete panel pezsgő hajszálkerettel.
   Alapból az elem FÖLÉ nyílik; a --down módosító alá (a sarok-háromszögnél
   fölfelé nem lenne hely). Csak hoverképes eszközön él — érintőn a
   sr-only szöveg + kontextus viszi az információt.
   FONTOS: a .kt-tip NEM állít position-t — a gazdaelem dolga pozicionáltnak
   lenni (.card-audio-flag: relative, .hu-corner-tri: absolute). Korábban itt
   volt egy position:relative, ami felülírta a háromszög absolute-ját, és a
   zászló nulla méretű inline elemmé esett össze → láthatatlan volt. --- */

.kt-tip::after {
    content: attr(data-tip);
    position: absolute;
    z-index: 6;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translate(-50%, 4px);
    padding: 6px 11px;
    border-radius: var(--radius-sharp, 4px);
    background: #161616;
    border: 1px solid rgba(191, 176, 138, 0.45);
    color: #ece7db;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 4px 14px rgba(13, 13, 13, 0.4);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
}

.kt-tip:hover::after,
.kt-tip:focus-visible::after {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

/* Lefelé nyíló változat — a sarok-háromszög alá, jobbra igazítva */
.kt-tip--down::after {
    bottom: auto;
    top: calc(100% + 8px);
    left: auto;
    right: 4px;
    transform: translateY(-4px);
}

.kt-tip--down:hover::after,
.kt-tip--down:focus-visible::after {
    transform: translateY(0);
}

@media (hover: none) {
    .kt-tip::after {
        display: none;
    }
}

/* ============================================================
   🔥 LEJÁTSZÓ - alapból rejtve, gombnyomásra jelenik meg
   ============================================================ */
.cikk-audio-player-floating {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 360px;
    border-radius: var(--radius-sharp, 4px);
    padding: 16px;
    z-index: 9999;
    display: none;
    /* 🔥 Alapból rejtve */
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    font-family: 'Outfit', sans-serif;
}

/* ============================================================
   🔥 BETA AUDIO BADGE - HÁTTÉR NÉLKÜL, CSAK NARANCSSÁRGA SZÖVEG
   ============================================================ */
.cikk-audio-beta-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent; /* 🔥 NINCS HÁTTÉR */
    padding: 0;
    color: var(--accent-orange, #3e3a34);
    font-weight: 800;
    font-size: 12px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    position: relative;
    box-shadow: none;
    animation: none;
}

.cikk-audio-beta-icon {
    width: 16px;
    height: 16px;
    stroke: var(--accent-orange, #3e3a34);
    stroke-width: 2.5;
}

.cikk-audio-beta-text {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--accent-orange, #3e3a34);
}

.cikk-audio-beta-pulse {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent-orange, #3e3a34);
    animation: betaDotPulse 1.2s ease-in-out infinite;
}

@keyframes betaDotPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.3; transform: scale(0.6); }
}

/* ============================================================
   🔥 POWERED BY CARTESIA - NARANCSSÁRGA
   ============================================================ */
.cikk-audio-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 0 4px 0;
    border-top: 1px solid rgba(191, 176, 138, 0.15);
    margin-top: 6px;
}

.cikk-audio-powered-text {
    font-size: 10px;
    color: var(--accent-orange, #3e3a34);
    font-weight: 400;
    letter-spacing: 0.3px;
    opacity: 0.7;
}

.cikk-audio-powered-brand {
    font-size: 13px;
    font-weight: 700;
    color: var(--accent-orange, #3e3a34);
    letter-spacing: 0.5px;
}

/* ============================================================
   🔥 LEJÁTSZÓ — PRÉMIUM SÖTÉT / PEZSGŐ (a hero felolvasó-ikonhoz igazítva)
   Sötét csiszolt fémpanel, pezsgő (--accent-on-dark) kiemelésekkel.
   A blokk a korábbi világos szabályok UTÁN áll, így forrás-sorrendben nyer.
   ============================================================ */
.cikk-audio-player-floating {
    background:
        radial-gradient(120% 60% at 50% 0%, rgba(191, 176, 138, 0.12) 0%, rgba(191, 176, 138, 0) 60%),
        linear-gradient(180deg, rgba(46, 46, 46, 0.98) 0%, rgba(23, 23, 23, 0.98) 55%, rgba(13, 13, 13, 0.99) 100%);
    backdrop-filter: blur(16px) saturate(120%);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    border: 1px solid rgba(191, 176, 138, 0.30);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 16px 48px rgba(0, 0, 0, 0.5),
        0 0 0 1px rgba(0, 0, 0, 0.4);
    color: #ece7db;
}

/* BETA AUDIO — pezsgő szöveg/ikon a sötét panelen */
.cikk-audio-player-floating .cikk-audio-beta-badge,
.cikk-audio-player-floating .cikk-audio-beta-text { color: var(--accent-on-dark); }
.cikk-audio-player-floating .cikk-audio-beta-icon { stroke: var(--accent-on-dark); }
.cikk-audio-player-floating .cikk-audio-beta-pulse { background: var(--accent-on-dark); }

/* Bezárás gomb */
.cikk-audio-player-floating .cikk-audio-close-btn { color: rgba(236, 231, 219, 0.6); }
.cikk-audio-player-floating .cikk-audio-close-btn:hover { color: #e5643f; }

/* Belső kártya — sötét, pezsgő kerettel */
.cikk-audio-player-floating .cikk-audio-inner-card {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(191, 176, 138, 0.16);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Borító thumb + placeholder */
.cikk-audio-player-floating .cikk-audio-thumb-wrap {
    background: #0f0f0f;
    border-color: rgba(191, 176, 138, 0.20);
}
.cikk-audio-player-floating .cikk-audio-thumb-placeholder {
    background: #1a1a1a;
    color: var(--accent-on-dark);
}

/* Cím + idők */
.cikk-audio-player-floating .cikk-audio-article-title { color: #f2eee4; }
.cikk-audio-player-floating .cikk-audio-time-val { color: rgba(236, 231, 219, 0.6); }

/* Idővonal + hangerő — pezsgő kitöltés */
.cikk-audio-player-floating .cikk-audio-progress-bar,
.cikk-audio-player-floating .cikk-audio-volume-bar { background: rgba(255, 255, 255, 0.14); }
.cikk-audio-player-floating .cikk-audio-progress-fill,
.cikk-audio-player-floating .cikk-audio-volume-fill {
    background: var(--accent-on-dark);
    box-shadow: 0 0 8px rgba(191, 176, 138, 0.45);
}
.cikk-audio-player-floating .cikk-audio-progress-knob {
    background: var(--accent-on-dark);
    border: 2px solid #171717;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5), 0 0 8px rgba(191, 176, 138, 0.4);
}

/* Ikon- és némítás gombok */
.cikk-audio-player-floating .cikk-audio-icon-btn,
.cikk-audio-player-floating .cikk-audio-mute-btn { color: rgba(236, 231, 219, 0.78); }
.cikk-audio-player-floating .cikk-audio-icon-btn:hover,
.cikk-audio-player-floating .cikk-audio-mute-btn:hover { color: var(--accent-on-dark); }

/* Sebesség-badge */
.cikk-audio-player-floating .cikk-audio-speed-badge {
    border: 1px solid rgba(191, 176, 138, 0.30);
    color: var(--accent-on-dark);
    background: rgba(191, 176, 138, 0.06);
}
.cikk-audio-player-floating .cikk-audio-speed-badge:hover {
    border-color: rgba(191, 176, 138, 0.6);
    background: rgba(191, 176, 138, 0.14);
    color: #f2eee4;
}

/* Lejátszás gomb — ugyanaz a fém-lapka, mint a hero-ikon, pezsgő glyph-fel */
.cikk-audio-player-floating .cikk-audio-play-round-btn {
    width: 50px;
    height: 44px;
    border-radius: var(--radius-sharp, 4px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background:
        radial-gradient(135% 95% at 50% -12%, rgba(191, 176, 138, 0.22) 0%, rgba(191, 176, 138, 0) 55%),
        linear-gradient(180deg, #2e2e2e 0%, #171717 55%, #0d0d0d 100%);
    color: var(--accent-on-dark);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -3px 7px rgba(0, 0, 0, 0.6),
        0 5px 16px rgba(13, 13, 13, 0.5);
}
.cikk-audio-player-floating .cikk-audio-play-round-btn:hover {
    transform: translateY(-1px);
    border-color: rgba(191, 176, 138, 0.6);
    background:
        radial-gradient(135% 95% at 50% -12%, rgba(191, 176, 138, 0.30) 0%, rgba(191, 176, 138, 0) 55%),
        linear-gradient(180deg, #343434 0%, #1a1a1a 55%, #0f0f0f 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 8px 22px rgba(191, 176, 138, 0.30),
        0 0 0 1px rgba(191, 176, 138, 0.28);
}
.cikk-audio-player-floating .cikk-audio-play-round-btn svg { color: var(--accent-on-dark); }

/* Footer */
.cikk-audio-player-floating .cikk-audio-footer { border-top-color: rgba(191, 176, 138, 0.15); }
.cikk-audio-player-floating .cikk-audio-powered-text { color: rgba(236, 231, 219, 0.5); opacity: 1; }
.cikk-audio-player-floating .cikk-audio-powered-brand { color: var(--accent-on-dark); }

/* ============================================================
   📱 MOBIL: a lejátszó teljes szélességű ALSÓ DOKK, pontosan a fix
   mobil lábléc-sáv (.mobile-footer-bar, 60px magas, ≤768px-en jelenik
   meg) FÖLÖTT. Ez a blokk a base (desktop) pozicionálás UTÁN áll, hogy
   forrás-sorrendben felülírja a bottom/right/width:360px szabályt —
   különben (mint korábban) a desktop szabály nyerne mobilon is.
   ============================================================ */
@media (max-width: 768px) {
    .cikk-audio-player-floating,
    .cikk-audio-player-floating--mini {
        left: 0;
        right: 0;
        width: auto;                  /* teljes szélesség, edge-to-edge */
        bottom: 60px;                 /* a fekete mobil sáv magassága fölé */
        border-radius: 4px 4px 0 0;   /* alsó dokk: csak felül kerekít */
        box-sizing: border-box;
        box-shadow:
            0 -10px 30px rgba(0, 0, 0, 0.5),
            0 0 0 1px rgba(0, 0, 0, 0.4);
    }
    /* Kényelmesebb tapintható vezérlők a full-width dokkban */
    .cikk-audio-player-floating .cikk-audio-controls-row {
        gap: 14px;
    }
}

/* ============================================================
   OLVASÁSI FOLYAMATJELZŐ (cikk.php)
   Vékony, fix sáv a viewport tetején; a cikktörzsben való haladást
   mutatja. A kitöltés transform: scaleX-szel megy (nem width-del),
   így nem okoz layout-újraszámolást görgetéskor. Kategória-színt kap
   a központi tokenekből (01-base.css :root).
   ============================================================ */
.cikk-reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1200;
    background: transparent;
    pointer-events: none;
}
.cikk-reading-progress-fill {
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    background: var(--accent-orange);
    transition: transform 0.08s linear;
}
.cikk-reading-progress--hirek .cikk-reading-progress-fill { background: var(--cat-hirek); }
.cikk-reading-progress--penz  .cikk-reading-progress-fill { background: var(--cat-penz); }

/* ============================================================
   KÖVESD A TÉMÁT — cikk végi követhető entitás-blokk (cikk.php)
   Világos skin a forrás-strip családjának nyelvén (fém címke-érzet
   nélkül, steel-tokenekből). Interakció: js/follow.js; a popover
   a kijelentkezett user bejelentkezés-buborékja.
   ============================================================ */
.kt-follow-block {
    position: relative;
    margin-top: 32px;
    padding: 18px 20px 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f7f3f0 100%);
    border: 1px solid var(--steel-200);
    border-radius: var(--radius-sharp, 4px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 1px 3px rgba(27, 25, 23, 0.06);
}
.kt-follow-block__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px;
    font-size: 0.95rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--steel-900);
}
.kt-follow-block__title-icon {
    width: 18px;
    height: 18px;
    color: var(--accent-orange);
}
.kt-follow-block__lead {
    margin: 0 0 14px;
    font-size: 0.84rem;
    line-height: 1.5;
    color: var(--steel-500);
}
.kt-follow-group + .kt-follow-group { margin-top: 14px; }
.kt-follow-group__label {
    display: block;
    margin-bottom: 6px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--steel-400);
}
.kt-follow-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.kt-follow-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: #ffffff;
    border: 1px solid var(--steel-100);
    border-radius: var(--radius-sharp, 4px);
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
.kt-follow-item + .kt-follow-item { margin-top: 6px; }
.kt-follow-item:hover {
    background: var(--steel-50);
    border-color: var(--steel-200);
}
.kt-follow-item__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    color: var(--steel-400);
}
.kt-follow-item__icon svg {
    width: 18px;
    height: 18px;
}
/* Valódi logó (unicorns / ai_models készletből), ahol van */
.kt-follow-item__logo {
    width: 22px;
    height: 22px;
    flex: 0 0 auto;
    object-fit: contain;
    border-radius: var(--radius-sharp, 4px);
}
.kt-follow-item__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--steel-900);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    transition: color 0.15s ease;
}
.kt-follow-item__name:hover { color: var(--accent-orange); }

/* Follow gomb — lapos, világos felületen (egységes gomb-rendszer) */
.kt-follow-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    color: var(--steel-700);
    background: transparent;
    border: 1px solid var(--steel-200);
    border-radius: var(--radius-sharp, 4px);
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.kt-follow-btn:hover {
    border-color: var(--steel-400);
    color: var(--steel-900);
    background: var(--steel-50);
}
.kt-follow-btn[disabled] {
    opacity: 0.6;
    cursor: wait;
}
/* Követett állapot: pezsgő kitöltés, sötét szöveg (fehér szöveg pezsgőn tilos) */
.kt-follow-btn[aria-pressed="true"] {
    background: var(--accent-on-dark);
    border-color: var(--accent-on-dark);
    color: var(--charcoal);
}
.kt-follow-btn[aria-pressed="true"] .kt-follow-btn__label::before { content: "✓ "; }
.kt-follow-btn[aria-pressed="true"]:hover {
    background: transparent;
    color: var(--steel-700);
    border-color: var(--steel-300);
}

/* Bejelentkezés-buborék (popover) — a js/follow.js pozicionálja a gombhoz */
.kt-follow-popover {
    position: absolute;
    z-index: 60;
    min-width: 230px;
    max-width: 280px;
    padding: 14px;
    background: #ffffff;
    border: 1px solid var(--steel-200);
    border-radius: var(--radius-sharp, 4px);
    box-shadow: 0 10px 26px rgba(27, 25, 23, 0.22);
}
.kt-follow-popover[hidden] { display: none; }
.kt-follow-popover__text {
    margin: 0 0 10px;
    font-size: 0.85rem;
    color: var(--steel-900);
}
.kt-follow-popover__actions {
    display: flex;
    gap: 8px;
}
.kt-follow-popover__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    border-radius: var(--radius-sharp, 4px);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
/* Elsődleges = fejléc-fekete, lapos (egységes gomb-rendszer) */
.kt-follow-popover__btn--primary {
    background: var(--charcoal);
    border: 1px solid var(--charcoal);
    color: #ffffff;
}
.kt-follow-popover__btn--primary:hover { background: var(--charcoal-hover); }
.kt-follow-popover__btn--ghost {
    background: transparent;
    border: 1px solid var(--steel-200);
    color: var(--steel-700);
}
.kt-follow-popover__btn--ghost:hover {
    border-color: var(--steel-400);
    color: var(--steel-900);
}
/* Kis nyíl a gomb felé — az irányát a follow.js kapcsolja osztállyal */
.kt-follow-popover::after {
    content: "";
    position: absolute;
    top: -6px;
    right: 24px;
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-left: 1px solid var(--steel-200);
    border-top: 1px solid var(--steel-200);
    transform: rotate(45deg);
}
.kt-follow-popover--above::after {
    top: auto;
    bottom: -6px;
    transform: rotate(225deg);
}

/* Mobilon minden elem EGY sorban marad: ikon · név · Követés gomb.
   A név ellipszissel rövidül, a gomb kompaktabb — nincs sortörés. */
@media (max-width: 640px) {
    .kt-follow-block {
        padding: 14px 12px 16px;
    }
    .kt-follow-item {
        gap: 8px;
        padding: 8px 10px;
    }
    .kt-follow-item__icon,
    .kt-follow-item__logo {
        width: 20px;
        height: 20px;
    }
    .kt-follow-item__name {
        font-size: 0.88rem;
    }
    .kt-follow-btn {
        padding: 7px 11px;
        font-size: 0.76rem;
    }
}

/* /kovetett entitás-oldal: egysoros követés-sáv a hero alatt */
.kt-follow-block--single { margin-top: 0; margin-bottom: 24px; }
.kt-follow-item__count {
    display: block;
    margin-top: 2px;
    font-size: 0.74rem;
    font-weight: 500;
    color: var(--steel-400);
}

/* ============================================================
   FORRÁS + EMLÍTETT MODELLEK — egy sorban a lead alatt:
   források balra, modellek jobbra; keskeny nézetben egymás alá törnek
   ============================================================ */
.cikk-meta-strips {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.cikk-meta-strips .cikk-models-strip {
    margin-top: 0;
    margin-left: auto;
}

@media (max-width: 640px) {
    .cikk-meta-strips {
        flex-direction: column;
        align-items: stretch;
    }

    /* Mobilon az Említett modellek sáv nem jelenik meg — a hely a tartalomé */
    .cikk-meta-strips .cikk-models-strip {
        display: none;
    }

    /* Forrás-sáv mobilon: teljes szélességű FORRÁS-fejléc, alatta a
       források fehér chip-gombokként — kattintásbarát, rendezett */
    .cikk-source-strip {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }
    .cikk-source-strip-label {
        flex-basis: 100%;
        justify-content: center;
        padding: 8px 12px;
        border-right: 0;
        border-bottom: 1px solid var(--steel-200);
    }
    .cikk-source-strip-items {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        padding: 8px;
    }
    .cikk-source-strip-link,
    .cikk-source-strip-items > .cikk-source-strip-link:first-child {
        flex: 1 1 40%;
        justify-content: center;
        padding: 9px 12px;
        background: #ffffff;
        border: 1px solid var(--steel-200);
        border-radius: var(--radius-sharp, 4px);
    }
}