/* ==========================================================================
   11. Főoldali elrendezés (Home Grid & Sidebar)
   ========================================================================== */
.home-shell {
    width: 100%;
    margin: 0 auto;
}

.home-grid {
    display: grid;
    grid-template-columns: 1fr 380px; /* Sidebar is 380px wide */
    gap: 40px;
    align-items: start;
}

.home-main {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.home-side {
    display: flex;
    flex-direction: column;
    gap: 40px; /* The two sidebar parts stacked nicely one under another */
}

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

/* Keresési találati blokkok (kereses.php) — korábban ismételt inline stílusok
   voltak a PHP-ben; ide kiemelve (nincs CSS a PHP-ben, nincs duplikáció). */
.search-section { margin-bottom: 50px; }
.search-section--tight { margin-bottom: 20px; }
.search-section .home-section-header {
    padding-bottom: 8px;
    margin-bottom: 20px;
}

/* Találatszám a szekciócím mellett — halványabb, hogy a cím maradjon a hangsúly */
.search-section-count {
    font-weight: 600;
    color: var(--steel-500);
    letter-spacing: normal;
}

/* Találatszám-jelölő a típus-füleken (Összes 12, AI Hírek 3 …) */
.catalog-tab-count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: var(--radius-sharp, 4px);
    background: var(--steel-100);
    color: var(--steel-500);
    font-size: 11.5px;
    font-weight: 700;
    text-shadow: none;
}
.catalog-tab.active .catalog-tab-count {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

/* Listás találat-sor (prompt, glosszárium-fogalom) — ezeknek nincs borítójuk,
   ezért kártya helyett tömör sor, ikonnal és a keresőszó körüli részlettel. */
.search-hit-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.search-hit {
    --hit-accent: var(--steel-400);
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--steel-200);
    border-left: 3px solid var(--hit-accent);
    border-radius: var(--radius-sharp, 4px);
    color: inherit;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.search-hit:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.07);
    border-color: var(--steel-300);
    border-left-color: var(--hit-accent);
}
.search-hit--promptok { --hit-accent: var(--cat-promptok); }
.search-hit--fogalmak { --hit-accent: var(--cat-robotika); }

.search-hit-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border-radius: var(--radius-sharp, 4px);
    background: var(--steel-100);
    color: var(--hit-accent);
}
.search-hit-icon svg { width: 17px; height: 17px; }

.search-hit-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.search-hit-title {
    font-size: 15.5px;
    font-weight: 700;
    color: var(--steel-900);
    line-height: 1.35;
}

.search-hit-snippet {
    font-size: 13px;
    line-height: 1.55;
    color: var(--steel-500);
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.search-hit-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--steel-400);
}
.search-hit-meta span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.search-hit-verified { color: var(--cat-penz); }

.search-hit-arrow {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    align-self: center;
    color: var(--steel-300);
    transition: color 0.15s ease, transform 0.15s ease;
}
.search-hit:hover .search-hit-arrow {
    color: var(--hit-accent);
    transform: translateX(2px);
}

/* Keresőszó-kiemelés a világos találati felületeken (a fejléc sötét
   legördülőjének saját .hs-item-title mark szabálya van). */
.search-page-container mark {
    background: rgba(191, 176, 138, 0.32);
    color: inherit;
    font-weight: 700;
    border-radius: 2px;
    padding: 0 1px;
}

@media (max-width: 600px) {
    .search-hit { padding: 12px; gap: 10px; }
    .search-hit-icon { width: 28px; height: 28px; }
    .search-hit-icon svg { width: 15px; height: 15px; }
    .search-hit-title { font-size: 14.5px; }
    .search-hit-arrow { display: none; }
}

/* Cím + bal oldali accent-sáv (prémium magazin-hangulat).
   A sáv színe a --section-accent változóból jön: alapból márka-narancs,
   a kategória-módosítók (--hirek/--penz/--modellek/--promptok) a központi
   kategória-tokenekre (01-base.css :root) állítják át — így a szekciócím,
   a badge és a hover szín-nyelve mindenütt ugyanaz. */
.home-section-title {
    position: relative;
    font-size: 24px;
    font-weight: 800;
    color: var(--steel-900);
    letter-spacing: -0.02em;
    margin: 0;
    padding-left: 16px;
    text-transform: uppercase;
    --section-accent: var(--accent-orange);
    --section-accent-2: var(--accent-orange-strong);
}
.home-section-title::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 22px;
    border-radius: var(--radius-sharp, 4px);
    background: linear-gradient(180deg, var(--section-accent) 0%, var(--section-accent-2) 100%);
}
.home-section-title--hirek    { --section-accent: var(--cat-hirek);    --section-accent-2: var(--cat-hirek); }
.home-section-title--penz     { --section-accent: var(--cat-penz);     --section-accent-2: var(--cat-penz); }
.home-section-title--modellek { --section-accent: var(--cat-modellek); --section-accent-2: var(--cat-modellek); }
.home-section-title--promptok { --section-accent: var(--cat-promptok); --section-accent-2: var(--cat-promptok); }
.home-section-title--robotika { --section-accent: var(--cat-robotika); --section-accent-2: var(--cat-robotika); }

/* „ÖSSZES →" link pill-gombként, hoverre narancs kitöltéssel */
.home-section-link {
    flex-shrink: 0;
    font-size: 12px;
    font-weight: 800;
    color: var(--steel-600);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 7px 14px;
    border: 1px solid var(--steel-200);
    border-radius: var(--radius-sharp, 4px);
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.home-section-link i,
.home-section-link svg {
    width: 14px;
    height: 14px;
    transition: transform 0.15s ease;
}

.home-section-link:hover {
    background: var(--accent-orange);
    border-color: var(--accent-orange);
    color: #ffffff;
}

.home-section-link:hover i,
.home-section-link:hover svg {
    transform: translateX(3px);
}

/* Szélesebb képernyő — a főoldal jobban kitölti a nagy monitorokat */
.site-main {
    max-width: 1780px;
}

/* A főoldali AI PÉNZ rács (.article-grid--4) a .home-main teljes szélességét
   töltse ki — a generikus .article-grid (listaoldalhoz szánt) 1180px-es
   max-width + középre zárását itt felülírjuk, hogy egy vonalban legyen a
   fölötte lévő AI HÍREK szekcióval. A listaoldalt ez nem érinti. */
.home-main .article-grid {
    max-width: none;
    margin: 0;
    padding: 0;
}




/* ==========================================================================
   13. AI Modellek - Oldalsáv Kártyák (model-aside-card)
   Csiszolt sötét fém + pezsgő — ugyanaz az anyag, mint a felolvasó-lapka,
   a lejátszó és az AI-elemzés panel. Csak a főoldali aside-on él, a
   katalógus-oldal kártyái világosak maradnak.
   ========================================================================== */
.models-aside-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.model-aside-card {
    position: relative;
    background:
        radial-gradient(120% 80% at 50% -15%, 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: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 128px;
    justify-content: space-between;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 6px 18px rgba(13, 13, 13, 0.22);
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.2s ease;
    text-decoration: none;
    color: inherit;
    overflow: visible; /* hogy a kategória-ikon tooltipje ne vágódjon le */
}

.model-aside-card:hover {
    transform: translateY(-3px);
    border-color: rgba(191, 176, 138, 0.65);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 10px 26px rgba(191, 176, 138, 0.22),
        0 0 0 1px rgba(191, 176, 138, 0.25);
}

.model-aside-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

/* Mini kártyán a kategória-ikonok a jobb felső sarokba, max 2 ikon/sor
   (28+6+28 = 62px), a többi szépen új sorba tördel. */
.model-aside-card .cat-icons {
    justify-content: flex-end;
    max-width: 62px;
    margin-left: auto;
    row-gap: 6px;
}

/* A logó fehér lapkán marad (a színes logók így olvashatók a sötét fémen),
   de pezsgő hajszálkeretet és mély árnyékot kap — mint a lejátszó borító-thumbja */
.model-aside-logo {
    width: 46px;
    height: 46px;
    object-fit: contain;
    border-radius: var(--radius-sharp, 4px);
    border: 1px solid rgba(191, 176, 138, 0.28);
    background: #ffffff;
    padding: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.model-aside-card:hover .model-aside-logo {
    border-color: rgba(191, 176, 138, 0.6);
}

/* Monogram-lapka logó híján — mini fém-tile pezsgő betűkkel */
.model-aside-initials {
    width: 46px;
    height: 46px;
    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%);
    color: var(--accent-on-dark);
    font-weight: 800;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sharp, 4px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        inset 0 -3px 7px rgba(0, 0, 0, 0.55);
    transition: border-color 0.2s ease;
}

.model-aside-card:hover .model-aside-initials {
    border-color: rgba(191, 176, 138, 0.6);
}

/* ==========================================================================
   AI FIGYELŐ A HÉTEN — heti entitás-mozgás doboz a főoldali oldalsávban.
   Ugyanaz a csiszolt sötét fém + pezsgő anyag, mint a modell-kártyák,
   a lejátszó és az AI-elemzés panel. Az adatok a kt_entity_weekly-ből
   jönnek (l. includes/ai_figyelo_lib.php), a markup a widget-partialból.
   ========================================================================== */
.figyelo-box {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    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: 18px 18px 8px;
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.10),
        0 10px 30px rgba(13, 13, 13, 0.25);
}

/* Lassú fémsáv-csillanás — az AI-elemzés panel mozgása */
.figyelo-box-sheen {
    position: absolute;
    top: 0;
    left: -50%;
    width: 34%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    background: linear-gradient(105deg,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.05) 45%,
        rgba(255, 255, 255, 0.10) 50%,
        rgba(255, 255, 255, 0.05) 55%,
        rgba(255, 255, 255, 0) 100%);
    transform: skewX(-18deg);
    animation: cikkAiSheen 10s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .figyelo-box-sheen { animation: none; }
}

.figyelo-box-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 6px;
    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;
}

.figyelo-box-title {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--accent-on-dark);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}

/* Mini fém-lapka a radar-ikonnak — az AI-elemzés fejlécének kistestvére */
.figyelo-box-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    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);
}

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

.figyelo-box-note {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(236, 231, 219, 0.35);
    white-space: nowrap;
}

.figyelo-rows {
    position: relative;
    z-index: 1;
    list-style: none;
    margin: 0;
    padding: 0;
}

.figyelo-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
    background: linear-gradient(to right,
        rgba(191, 176, 138, 0.14), rgba(191, 176, 138, 0.03) 60%, transparent)
        bottom left / 100% 1px no-repeat;
}

.figyelo-row:last-child {
    background: none;
}

.figyelo-row-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: var(--radius-sharp, 4px);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(191, 176, 138, 0.18);
    color: rgba(236, 231, 219, 0.72);
}

.figyelo-row-icon i,
.figyelo-row-icon svg {
    width: 15px;
    height: 15px;
}

.figyelo-row-icon--up   { color: var(--accent-on-dark); border-color: rgba(191, 176, 138, 0.4); }
.figyelo-row-icon--down { color: #e5643f; border-color: rgba(229, 100, 63, 0.35); }

.figyelo-row-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.figyelo-row-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(236, 231, 219, 0.42);
}

.figyelo-row-value {
    font-size: 14px;
    font-weight: 700;
    color: #f2eee4;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.figyelo-row-delta {
    flex-shrink: 0;
    font-size: 12.5px;
    font-weight: 800;
    color: rgba(236, 231, 219, 0.65);
    font-variant-numeric: tabular-nums;
}

.figyelo-row-delta--up   { color: var(--accent-on-dark); text-shadow: 0 0 8px rgba(191, 176, 138, 0.35); }
.figyelo-row-delta--down { color: #e5643f; }

.figyelo-empty {
    position: relative;
    z-index: 1;
    margin: 0;
    padding: 14px 0 18px;
    font-size: 13px;
    line-height: 1.6;
    color: rgba(236, 231, 219, 0.5);
}

/* Kategória-címke pill formában (pl. „LLM") */
.model-aside-rating {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--steel-500);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    background: var(--bg-card-alt);
    border: 1px solid var(--steel-100);
    padding: 4px 10px;
    border-radius: var(--radius-sharp, 4px);
}

.model-aside-rating svg {
    width: 13px;
    height: 13px;
    color: var(--accent-orange);
}

.model-aside-name {
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 750;
    color: #f2eee4;
    text-transform: none;
    line-height: 1.25;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    transition: color 0.25s ease;
}

.model-aside-card:hover .model-aside-name {
    color: var(--accent-on-dark);
}

/* Kategória-ikonok a sötét lapkán — a lejátszó belső kártyájának anyaga */
.model-aside-card .cat-icon {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(191, 176, 138, 0.20);
    color: rgba(236, 231, 219, 0.72);
}

.model-aside-card .cat-icon:hover {
    background: rgba(191, 176, 138, 0.14);
    border-color: rgba(191, 176, 138, 0.6);
    color: var(--accent-on-dark);
}

.model-aside-badge {
    align-self: flex-start;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 4px;
    font-weight: 700;
}

.model-aside-meta {
    font-size: 11px;
    color: var(--steel-400);
}

.model-aside-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--btn-h);
    background: var(--btn-grad-orange);
    color: #ffffff;
    border-radius: var(--radius-sharp);
    font-size: 13px;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
    box-shadow: var(--btn-gloss);
    transition: filter 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}
.model-aside-btn:hover {
    filter: brightness(1.06);
    box-shadow: var(--btn-gloss-hover), 0 2px 12px rgba(191, 176, 138, 0.30);
    color: #ffffff;
}

/* ==========================================================================
   14. Extra Cikk-kártya Finomhangolások (Clean mockup look, no orange top bar)
   ========================================================================== */
.article-card {
    position: relative;
    border-radius: var(--radius-sharp, 4px);
    border-top: 1px solid var(--steel-100);
    min-height: auto;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.article-card-cover:has(.article-card-cover-placeholder) {
    display: none;
}

/* .article-card-featured mérete/radiusa: lásd a fenti (KÁRTYÁK ÉS
   RÁCSRENDSZER szekció) definíciót - korábban itt egy redundáns, 2 tulajdonságos
   override volt ugyanerre a szelektorra, összevonva. */

/* ==========================================================================
   15. Reszponzív Finomhangolások
   ========================================================================== */
/* Magazin layout reszponzív kezelése squishing ellen */
@media (max-width: 1200px) {
    .articles-magazine {
        grid-template-columns: 1fr;
    }
}

/* Oldalsáv egymás alá törése ha már nagyon keskeny a képernyő */
@media (max-width: 900px) {
    .home-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
}

/* AI Katalógus kártya — nincs box-hover. */
.catalog-card {
    transition: none;
}

/* A .model-aside-card prémium hover (narancs keret + emelt árnyék) a fenti
   alap-definícióba (lásd ~242. sor) van összevonva — így nincs duplikált
   blokk és nem kell !important a saját korábbi szabály felülírásához. */

/* ============================================================
   AI KATALÓGUS — STRUKTURÁLT RENDER + ÁRVÁLTOZÁS-BADGE-EK
   ============================================================ */

/* Kategória-chip ikon az adatlapon + katalógus tabokon */
.model-detail-cats { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.model-detail-category i,
.model-detail-category svg { width: 12px; height: 12px; vertical-align: -1px; }
.catalog-tab i, .catalog-tab svg { width: 12px; height: 12px; vertical-align: -1px; margin-right: 3px; }

/* Strukturált adatlap-kártyák */
.ai-structured-card .model-detail-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.ai-structured-card .model-detail-section-title i,
.ai-structured-card .model-detail-section-title svg { width: 18px; height: 18px; color: var(--accent-orange); }

/* API ártáblázat — zebra-csíkos */
.api-price-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--steel-200);
    border-radius: var(--radius-sharp, 4px);
}
.api-price-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    min-width: 520px;
}
.api-price-table th,
.api-price-table td {
    padding: 13px 16px;
    text-align: left;
    white-space: nowrap;
}
/* Fejléc-sáv: elüt a soroktól (mint a mintán) */
.api-price-table thead th {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--steel-500);
    font-weight: 700;
    background: var(--bg-card-alt);
    border-bottom: 1px solid var(--steel-200);
}
/* Zebra: a páros sorok halvány, téma-hű szürke tintet kapnak;
   a sorválasztó a zebra mellett is megmarad, csak nagyon halványan */
.api-price-table tbody td { border-bottom: 1px solid var(--steel-100); }
.api-price-table tbody tr:last-child td { border-bottom: none; }
.api-price-table tbody tr:nth-child(even) { background: var(--accent-orange-soft); }
.api-price-table tbody tr:hover { background: var(--accent-orange-glow); }
.api-price-table .api-price-variant { font-weight: 700; color: var(--steel-800); }
.api-price-table .api-price-version {
    display: inline-block;
    padding: 2px 8px;
    margin-left: 6px;
    border-radius: 4px;
    background: var(--bg-card);
    border: 1px solid var(--steel-200);
    color: var(--steel-800);
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
}
.api-price-table small { color: var(--steel-400); font-weight: 500; }

/* --- Modalitásonkénti API-ár szekciók (szöveg / kép / hang / embedding…) --- */
.api-price-group + .api-price-group {
    margin-top: 22px;
}
.api-price-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--steel-800);
    margin: 0 0 10px;
}
.api-price-group-title i {
    width: 17px;
    height: 17px;
    color: var(--steel-500);
}
/* A nem-szöveges (egyáras) modalitás táblái keskenyebbek lehetnek */
.api-price-group:not(.api-price-group--text) .api-price-table {
    min-width: 340px;
}
.api-price-single {
    font-weight: 700;
    color: var(--steel-800);
}
.api-price-detail {
    color: var(--steel-500);
    white-space: normal;
}
.api-price-free {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 4px;
    background: var(--success-soft);
    color: var(--success);
    font-weight: 700;
    font-size: 12.5px;
}

/* Modern Csomag-kártyák (Pricing Cards - Max 5px radius) */
.package-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 24px;
    align-items: stretch;
}
.package-card {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: var(--radius-sharp, 4px);
    padding: 24px 20px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.25s ease;
}
.package-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
    border-color: rgba(203, 213, 225, 1);
}
.package-card--popular {
    border: 2px solid var(--accent-orange, #f97316);
    box-shadow: 0 8px 24px rgba(249, 115, 22, 0.12);
    background: linear-gradient(180deg, #ffffff 0%, #fffdfa 100%);
}
.package-card--popular:hover {
    box-shadow: 0 16px 32px rgba(249, 115, 22, 0.18);
}
.package-badge.popular {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
    color: #ffffff;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 3px 12px;
    border-radius: 4px;
    box-shadow: 0 3px 8px rgba(249, 115, 22, 0.3);
    white-space: nowrap;
}
.package-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 14px;
    border-bottom: 1px solid #f1f5f9;
}
.package-name {
    font-size: 1.2rem;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.02em;
}
.package-price {
    font-size: 1.75rem;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
    display: flex;
    align-items: baseline;
    gap: 4px;
}
.package-price small {
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
}
.package-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-grow: 1;
}
.package-features li {
    position: relative;
    padding-left: 26px;
    font-size: 0.85rem;
    color: #334155;
    line-height: 1.5;
}
.package-features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 17px;
    height: 17px;
    background: #ecfdf5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2310b981'%3E%3Cpath fill-rule='evenodd' d='M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z' clip-rule='evenodd'/%3E%3C/svg%3E") center / 11px no-repeat;
    border-radius: 50%;
    border: 1px solid #a7f3d0;
}
.package-feat-label {
    color: #0f172a;
    font-weight: 700;
    margin-right: 4px;
}
/* „Csomag kiválasztása" gomb — ELREJTVE.
   Nem lehetett vele csomagot választani (#subscribe horgony sosem létezett), a
   kiemelt változata ráadásul narancs gradiens volt, ami a retheme óta tiltott.
   A generálás megszűnt (kt_render_packages_html), ez a szabály a RÉGI,
   AI-generált csomag-HTML-ekben maradt gombokat némítja el. */
.package-btn { display: none; }

/* Erősségek / Gyengeségek */
.ai-proscons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .ai-proscons-grid { grid-template-columns: 1fr; } }
.ai-proscons-col h3 {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    margin-bottom: 12px;
}
.ai-proscons-col h3 i, .ai-proscons-col h3 svg { width: 16px; height: 16px; }
.ai-proscons-col--pro h3 { color: var(--success); }
.ai-proscons-col--con h3 { color: var(--danger); }
.ai-proscons-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ai-proscons-col li {
    position: relative;
    padding-left: 20px;
    font-size: 14px;
    color: var(--steel-600);
    line-height: 1.55;
}
.ai-proscons-col--pro li::before { content: "+"; position: absolute; left: 0; color: var(--success); font-weight: 800; }
.ai-proscons-col--con li::before { content: "–"; position: absolute; left: 0; color: var(--danger); font-weight: 800; }
.ai-proscons-empty { color: var(--steel-300); }

/* Versenytárs-összevetés blokk */
.ai-comparison-block { font-size: 14.5px; line-height: 1.65; color: var(--steel-600); }
.ai-comparison-block p { margin-bottom: 10px; }
.ai-comparison-block ul { padding-left: 18px; margin: 8px 0; }

/* --- ÁRVÁLTOZÁS-BADGE CSALÁD --- */
.ai-price-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--radius-sharp, 4px);
    font-weight: 700;
}
.ai-price-badge i, .ai-price-badge svg { flex: 0 0 auto; }

/* Adatlap: teljes sáv a hero alatt */
.ai-price-badge--bar {
    width: 100%;
    gap: 12px;
    padding: 12px 16px;
    margin: 0 0 20px;
    font-weight: 600;
}
.ai-price-badge--bar .ai-price-badge-text { display: flex; flex-direction: column; line-height: 1.35; }
.ai-price-badge--bar .ai-price-badge-text strong { font-size: 14px; }
.ai-price-badge--bar .ai-price-badge-text span { font-size: 13px; opacity: 0.85; }
.ai-price-badge--bar .ai-price-badge-date { margin-left: auto; font-size: 12.5px; opacity: 0.75; }

/* Katalógus: kompakt badge a kártya fejlécében */
.ai-price-badge--compact {
    padding: 3px 9px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-top: 8px;
}
.ai-price-badge--compact i, .ai-price-badge--compact svg { width: 12px; height: 12px; }

/* Szín-variánsok */
.ai-price-badge--drop { background: var(--success-soft); color: var(--success); border: 1px solid var(--success); }
.ai-price-badge--up { background: var(--warning-soft); color: var(--warning); border: 1px solid var(--warning); }
.ai-price-badge--version { background: var(--accent-orange-soft); color: var(--accent-orange); border: 1px solid rgba(191, 176, 138, 0.25); }
.ai-price-badge--version i, .ai-price-badge--version svg {
    animation: spark-pulse 2s infinite ease-in-out;
}

@keyframes spark-pulse {
    0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 1px var(--accent-orange-glow)); }
    50% { transform: scale(1.2) rotate(15deg); filter: drop-shadow(0 0 3px var(--accent-orange)); }
}




/* ============================================================
   AI MODELL ADATLAP (ai-adatlap.php) — teljes elrendezés
   (ezek az osztályok korábban stílus nélkül voltak: óriási logó, formázatlan)
   ============================================================ */
.detail-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 22px 24px 60px;
}

/* Ha az adatlap a jobb oldali sávval együtt jelenik meg (.cikk-layout rácsban),
   a fő oszlop kitölti a cellát — a külső margót/paddinget a .cikk-layout adja. */
.detail-wrap--in-layout {
    max-width: none;
    margin: 0;
    padding: 0 0 20px;
    min-width: 0;
}
.detail-wrap .back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 18px;
    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);
    color: var(--steel-700);
    height: 38px;
    padding: 0 20px;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.25s ease;
    text-decoration: none;
}
.detail-wrap .back-link:hover {
    box-shadow: 0 6px 24px rgba(27, 25, 23, 0.05), var(--shadow-card);
    transform: translateY(-1px);
    color: var(--accent-orange);
    border-color: var(--steel-200);
}
.detail-card {
    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);
    padding: 26px;
}
.detail-wrap .mb-30 { margin-bottom: 22px; }
.detail-wrap .mb-20 { margin-bottom: 18px; }

.model-hero-premium {
    position: relative;
    background: linear-gradient(135deg, #FAF6F0 0%, #F3ECE2 100%);
    border-radius: var(--radius-sharp, 4px);
    overflow: hidden;
    border: 1px solid #E6DCD0;
    box-shadow: 0 8px 24px rgba(27, 25, 23, 0.04), var(--shadow-card);
}

/* Belső elrendezés – kompakt, egy soros */
.model-hero-inner {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    padding: 28px 28px 26px;
}

/* Logó tartó */
.model-hero-logo-wrap {
    width: 90px;
    height: 90px;
    flex: 0 0 90px;
    border-radius: var(--radius-sharp, 4px);
    background: #ffffff;
    border: 1px solid #E6DCD0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(27, 25, 23, 0.03), inset 0 1px 0 #ffffff;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.model-hero-logo-wrap:hover {
    border-color: rgba(191, 176, 138, 0.35);
    box-shadow: 0 4px 16px rgba(191, 176, 138, 0.08), inset 0 1px 0 #ffffff;
}

.model-hero-logo {
    width: 72px;
    height: 72px;
    object-fit: contain;
    border-radius: 4px;
}

.model-hero-initials {
    font-size: 32px;
    font-weight: 800;
    color: var(--accent-orange);
    letter-spacing: 0.02em;
}

/* Info blokk – minden a logó mellé */
.model-hero-info {
    flex: 1 1 0;
    min-width: 0;
}

.model-hero-name {
    font-size: 26px;
    font-weight: 800;
    color: #161616;
    margin: 0 0 8px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

/* Kategória badge-ek */
.model-hero-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.model-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: var(--radius-sharp, 4px);
    background: rgba(191, 176, 138, 0.06);
    border: 1px solid rgba(191, 176, 138, 0.16);
    color: #292623;
    font-size: 11.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.model-hero-badge:hover {
    background: rgba(191, 176, 138, 0.12);
    color: #292623;
    border-color: rgba(191, 176, 138, 0.3);
}
.model-hero-badge i,
.model-hero-badge svg { width: 12px; height: 12px; }

/* Meta sor – dátum + weboldal link egymás mellett */
.model-hero-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #70625E;
    font-size: 13.5px;
    margin: 0;
    flex-wrap: wrap;
}
.model-hero-meta strong {
    color: var(--steel-700);
}
.model-hero-meta-sep {
    color: #E6DCD0;
    font-size: 16px;
    line-height: 1;
    user-select: none;
}
.model-hero-website-link {
    color: #292623;
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 600;
    font-size: 13.5px;
    transition: color 0.2s ease;
}
.model-hero-website-link:hover {
    color: #1b1917;
}

/* Reszponzív */
@media (max-width: 640px) {
    .model-hero-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 22px 18px 20px;
    }
    .model-hero-name { font-size: 22px; }
    .model-hero-logo-wrap { width: 72px; height: 72px; flex: 0 0 72px; }
    .model-hero-logo { width: 56px; height: 56px; }
    .model-hero-initials { font-size: 26px; }
}


/* Szekciók a fő kártyán belül */
.model-detail-section { margin-top: 24px; }
.model-detail-section-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--steel-800);
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--steel-100);
    display: flex;
    align-items: center;
    gap: 8px;
}
.model-detail-section-title i,
.model-detail-section-title svg { color: var(--accent-orange); }
.model-desc-text { font-size: 15px; line-height: 1.7; color: var(--steel-600); white-space: pre-line; }
.model-desc-empty { color: var(--steel-300); font-style: italic; }

/* Prémium / legacy HTML szekciók (models / api) */
.premium-sections-wrapper { display: flex; flex-direction: column; gap: 22px; }
.premium-subsection-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 700; color: var(--steel-700); margin-bottom: 12px;
}
.premium-subsection-title i, .premium-subsection-title svg { width: 18px; height: 18px; color: var(--accent-orange); }
.model-grid {
    display: grid;
    /* Fekvő, TELJES SZÉLESSÉGŰ sorok: egy modell = egy széles vízszintes sáv,
       egymás alatt (nem rácsos „kockák"). A kártyán belül van a kétoszlopos
       elrendezés (identitás | tartalom). */
    grid-template-columns: 1fr;
    gap: 14px;
}
.api-grid {
    display: grid;
    /* auto-fit + nagyobb min: egyetlen prózai leírás-blokk a TELJES szélességet
       kitölti (nem szorul keskeny 210px-es hasábba), több elem esetén csempézik. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}

/* Premium Model Card Styles (Icon & Emoji free) */
/* Fekvő, teljes szélességű prémium kártya.
   BAL (rögzített ~210px) = IDENTITÁS: tier-címke + modellnév.
   JOBB (rugalmas) = TARTALOM: idézet → leírás → „Kiemelt előny" doboz, egymás
   alatt. A bal oszlopban csak 2 rövid elem van (címke+név), így nincs csúnya
   függőleges rés akkor sem, ha a jobb oldali leírás hosszú. A DOM lapos
   (tag, h3, strengths, desc, highlight), ezért grid-template-areas köti össze. */
.model-card {
    position: relative;
    overflow: hidden;
    /* Felső fémes narancs csík (közös --metallic-streak) háttér-rétegként:
       a ::before (bal panel) és ::after (logó) foglalt, ezért nem pseudo-elem.
       A csík alatt egy lágy narancs ragyogás-réteg pótolja a halót (box-shadow
       nem lehet, mert az overflow:hidden — ami a bal panel bleedjéhez kell —
       levágná). Így a model-card is „világít", mint a többi kártya. */
    background:
        var(--metallic-streak) top center / 82% 2px no-repeat,
        radial-gradient(ellipse 42% 100% at 50% 0%,
            rgba(191, 176, 138, 0.28) 0%,
            rgba(191, 176, 138, 0.08) 50%,
            transparent 78%) top center / 100% 30px no-repeat,
        linear-gradient(135deg, #ffffff 0%, #faf8f6 100%);
    border: 1px solid var(--steel-100);
    border-radius: var(--radius-sharp, 4px);
    padding: 22px 26px;
    display: grid;
    grid-template-columns: 210px 1fr;
    grid-template-rows: auto auto 1fr;
    grid-template-areas:
        "tag   quote"
        "name  desc"
        "logo  highlight";
    column-gap: 30px;
    row-gap: 12px;
    align-items: start;
    box-shadow: 0 4px 16px rgba(27, 25, 23, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.model-card > .model-tag       { grid-area: tag; }
.model-card > h3               { grid-area: name; align-self: start; }
.model-card > .model-strengths { grid-area: quote; }
.model-card > .model-desc      { grid-area: desc; }
.model-card > .model-highlight { grid-area: highlight; }

/* BAL PANEL: a bal hasábot egy finoman tónusos, teljes magasságú sáv tölti ki
   (rács-elem, ami a kártya széléig „kivérzik" negatív margókkal). Így a korábbi
   üres rész egy dizájnolt identitás-panel lesz, nem üres folt. A tag/név/logó
   erre a panelre kerül (a pseudo a tartalom mögött fest). */
.model-card::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / -1;
    margin: -22px 0 -22px -26px;
    background: linear-gradient(180deg, #faf7f4 0%, #f2ece7 100%);
    border-right: 1px solid var(--steel-100);
    border-radius: 4px 0 0 4px;
    pointer-events: none;
}

/* A bal panel alját a szolgáltató logója tölti ki (a .model-grid-en beállított
   --model-logo CSS-változóból). Rács-elemként (::after) kerül a helyére, nem
   abszolút pozícióval. Ha nincs logó, a változó nincs beállítva → nem látszik. */
.model-card::after {
    content: "";
    grid-area: logo;
    align-self: end;
    justify-self: start;
    width: 60px;
    height: 60px;
    background: var(--model-logo, none) no-repeat left bottom / contain;
    opacity: 0.9;
    pointer-events: none;
}

/* A bal hasáb tartalma a panel FÖLÖTT (a pseudo-panel mögötte fest, de a
   biztonság kedvéért expliciten is a tartalom elé emeljük). */
.model-card > .model-tag,
.model-card > h3 {
    position: relative;
    z-index: 1;
}

.model-card h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 800;
    color: var(--steel-900);
    line-height: 1.22;
}
.model-tag {
    justify-self: start;
    background: var(--accent-orange-soft);
    color: var(--accent-orange-strong);
    font-size: 10.5px;
    font-weight: 800;
    padding: 4px 9px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.model-strengths {
    margin: 0;
    font-size: 13px;
    font-style: italic;
    color: var(--steel-500);
    line-height: 1.5;
}
.model-desc {
    font-size: 14px;
    line-height: 1.65;
    color: var(--steel-600);
}
.model-desc p {
    margin: 0 0 8px;
}
.model-desc p:last-child {
    margin: 0;
}
.model-highlight {
    background: rgba(191, 176, 138, 0.04);
    border: 1px solid rgba(191, 176, 138, 0.10);
    border-left: 3px solid var(--accent-orange);
    border-radius: 4px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--steel-700);
}
.model-highlight strong {
    color: var(--accent-orange-strong);
}

/* Mobil/kis tablet: a vízszintes kártya visszaáll függőleges olvasási sorrendbe. */
@media (max-width: 640px) {
    .model-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "tag"
            "name"
            "quote"
            "desc"
            "highlight";
        row-gap: 12px;
    }
    .model-strengths,
    .model-highlight {
        align-self: stretch;
    }
    /* Mobilon nincs bal hasáb: a tónusos panelt és a logót is elrejtjük. */
    .model-card::before,
    .model-card::after {
        display: none;
    }
}
.base-models-list { display: flex; flex-direction: column; gap: 12px; }
.base-model-item { padding: 14px; border: 1px solid var(--steel-100); border-radius: var(--radius-sharp, 4px); background: var(--bg-card-alt); }
.base-model-name { font-size: 15px; font-weight: 700; color: var(--steel-800); margin: 0 0 4px; }
.base-model-strengths { color: var(--accent-orange-strong); font-size: 13.5px; margin: 0 0 4px; }
.base-model-desc { color: var(--steel-600); font-size: 14px; margin: 0; }

/* Kommentek kártya */
.comments-card { margin-top: 22px; }

/* Hiányzó apró ikonméret + biztonsági háló: minden data-lucide ikon
   maradjon az inline szövegméreten belül (ne 24px default, ha lemaradt a méretosztály) */
.icon-10 { width: 10px; height: 10px; }
.detail-wrap [data-lucide],
.detail-wrap .btn-primary svg,
.detail-wrap .btn-secondary svg { vertical-align: -2px; }
.detail-wrap .btn-primary [data-lucide],
.detail-wrap .btn-secondary [data-lucide],
.comment-submit-btn [data-lucide] { width: 16px; height: 16px; }

/* Prémium kártya bal oldali színkódolt hangsávok.
   (Nincs !important: az alap .model-card border shorthandje FELETT a source-
   sorrend miatt érvényesül a border-left, a --elit/--pro/... variánsok pedig
   magasabb specificitásúak, így természetesen felülírják.) */
.model-card {
    border-left: 4px solid var(--accent-orange);
}
.model-card--elit {
    border-left: 4px solid #b8860b; /* Premium Arany */
}
.model-card--pro {
    border-left: 4px solid #3b82f6; /* Pro Kék */
}
.model-card--popular {
    border-left: 4px solid #3e3a34; /* Populáris Szénszürke */
}
.model-card--lite {
    border-left: 4px solid #0d9488; /* Lite Türkiz */
}

/* Prémium kártya tag jelvény színkombinációk */
.model-card--elit .model-tag {
    background: rgba(184, 134, 11, 0.08);
    color: #96700a;
}
.model-card--pro .model-tag {
    background: rgba(59, 130, 246, 0.08);
    color: #1d4ed8;
}
.model-card--popular .model-tag {
    background: rgba(191, 176, 138, 0.08);
    color: #292623;
}
.model-card--lite .model-tag {
    background: rgba(13, 148, 136, 0.08);
    color: #0f766e;
}

/* ==========================================================================
   14. Népszerű AI tartalmak oldalsáv (popular-aside)
   ========================================================================== */
.popular-aside-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
}

.popular-aside-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(43, 38, 32, 0.08);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
}

.popular-aside-item:last-child {
    border-bottom: none;
    box-shadow: none;
    padding-bottom: 0;
}

.popular-aside-num {
    font-family: 'Outfit', sans-serif;
    font-size: 32px;
    font-weight: 300;
    color: #bfb08a;
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.5);
    line-height: 0.9;
    width: 28px;
    text-align: center;
    flex-shrink: 0;
}

.popular-aside-content {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0; /* Prevents overflow */
}

.popular-aside-badge {
    align-self: flex-start;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: var(--radius-sharp, 4px);
    font-weight: 700;
    text-transform: uppercase;
}

.popular-aside-title {
    font-family: 'Outfit', sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--charcoal);
    text-decoration: none;
    transition: color 0.2s ease;
    word-break: break-word;
}

.popular-aside-title:hover {
    color: #000000;
    text-decoration: underline;
    text-decoration-color: #bfb08a;
    text-underline-offset: 3px;
}

.popular-aside-views {
    font-size: 11.5px;
    color: #8b8076;
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
}

.popular-aside-views svg,
.popular-aside-views i {
    width: 13px;
    height: 13px;
    color: #bfb08a;
}

/* --- PRÉMIUM VERZIÓ ABSZOLÚT PANEL AZ ADATLAPON --- */
.model-hero-top-right {
    position: absolute;
    top: 20px;
    right: 24px;
    z-index: 5;
}
@media (max-width: 768px) {
    .model-hero-top-right {
        position: static;
        margin-top: 16px;
        width: 100%;
    }
}

.model-hero-version-card {
    display: flex;
    flex-direction: column;
    padding: 12px 16px;
    border-radius: var(--radius-sharp, 4px);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(191, 176, 138, 0.04) 100%);
    border: 1px solid rgba(191, 176, 138, 0.22);
    box-shadow: 0 4px 16px rgba(191, 176, 138, 0.04), 0 0 0 1px rgba(191, 176, 138, 0.05);
    max-width: 320px;
}
@media (max-width: 768px) {
    .model-hero-version-card {
        max-width: none;
        width: 100%;
    }
}
.model-hero-version-card.version-card--drop {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(15, 123, 79, 0.04) 100%);
    border: 1px solid rgba(21, 128, 61, 0.22);
    box-shadow: 0 4px 16px rgba(21, 128, 61, 0.04), 0 0 0 1px rgba(21, 128, 61, 0.05);
}
.model-hero-version-card.version-card--up {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(180, 83, 9, 0.04) 100%);
    border: 1px solid rgba(180, 83, 9, 0.22);
    box-shadow: 0 4px 16px rgba(180, 83, 9, 0.04), 0 0 0 1px rgba(180, 83, 9, 0.05);
}
.model-hero-version-card.version-card--refreshed {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(191, 176, 138, 0.06) 100%);
    border: 1px solid rgba(191, 176, 138, 0.4);
    box-shadow: 0 4px 16px rgba(191, 176, 138, 0.05), 0 0 0 1px rgba(191, 176, 138, 0.05);
}
.version-card--refreshed .version-card-icon,
.version-card--refreshed .version-card-label { color: #8a774a; }

/* Friss-badge kifutása után: halk „Adatok frissítve: …" jelzés a hero jobb felső sarkában */
.model-hero-updated {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--bg-card-alt);
    border: 1px solid var(--steel-200);
    border-radius: var(--radius-sharp, 4px);
    font-size: 12px;
    font-weight: 600;
    color: var(--steel-500);
    white-space: nowrap;
}
.model-hero-updated i, .model-hero-updated svg {
    width: 13px;
    height: 13px;
    color: #bfb08a;
}

/* ==========================================================================
   FÜGGETLEN MÉRÉS (ai-adatlap.php) — a rangsor-modul adatai erre a modellre.

   Elrendezés: BAL a helyezés mint főszám (sötét, pezsgő kiemeléssel), JOBB a
   mért értékek rácsban. Azért így, és nem egyforma cellák sorában: a forrás
   modellenként eltérő számú metrikát mér, és egy 6 cellásra tervezett sáv 2
   adattal kong. A bal blokk mindig megtelik, a jobb oldal pedig annyi kártyát
   rak ki, amennyi van.
   ========================================================================== */
.measure-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-bottom: 12px;
}
.measure-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--steel-900);
}
.measure-title i,
.measure-title svg { width: 16px; height: 16px; color: #bfb08a; }

.measure-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--steel-500);
    text-decoration: none;
}
.measure-link:hover { color: var(--steel-900); }
.measure-link i,
.measure-link svg { width: 12px; height: 12px; }

.measure-body {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    margin-bottom: 10px;
    background: linear-gradient(135deg, #FAF6F0 0%, #F3ECE2 100%);
    border: 1px solid #E6DCD0;
    border-radius: var(--radius-sharp, 4px);
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(27, 25, 23, 0.04);
}

/* --- Bal: helyezés --- */
.measure-rank {
    position: relative;
    flex: 0 0 230px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 2px;
    padding: 26px 22px;
    background: #161616;      /* a fejléc-fekete — a prémium akcentus alapja */
    color: #f4f1ea;
}
.measure-tier {
    margin-bottom: 6px;
    padding: 3px 10px;
    border: 1px solid rgba(191, 176, 138, 0.55);
    border-radius: var(--radius-sharp, 4px);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #bfb08a;
}
.measure-rank-value {
    font-size: 52px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    color: #bfb08a;             /* pezsgő a sötéten — sosem fehér */
    font-variant-numeric: tabular-nums;
}
.measure-rank-of {
    margin-top: 8px;
    font-size: 11.5px;
    line-height: 1.4;
    color: rgba(244, 241, 234, 0.62);
}
.measure-rank-pct {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid rgba(191, 176, 138, 0.22);
    font-size: 12px;
    font-weight: 700;
    color: rgba(244, 241, 234, 0.85);
}

/* --- Jobb: metrikák --- */
.measure-metrics {
    flex: 1 1 320px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1px;
    background: rgba(43, 38, 32, 0.10);   /* a rács vonalai a résekből */
}
.measure-metric {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #FAF6F0 0%, #F3ECE2 100%);
}
.measure-metric--wide { grid-column: 1 / -1; }

.measure-metric-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}
.measure-metric-label {
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(43, 38, 32, 0.55);
}
/* Metrikánkénti helyezés a címke mellett („#142 / 187") — a saját táblánkból
   számolva, mert a forrás csak az összesített rangot adja. */
.measure-chip {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 6px;
    border: 1px solid rgba(191, 176, 138, 0.55);
    border-radius: var(--radius-sharp, 4px);
    background: rgba(191, 176, 138, 0.16);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #6e6148;
    text-transform: none;
    vertical-align: 1px;
}
.measure-chip-of {
    font-weight: 600;
    color: rgba(110, 97, 72, 0.65);
}

.measure-metric-value {
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--steel-900);
    font-variant-numeric: tabular-nums;
}
.measure-metric-value--pair {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    font-size: 19px;
}
.measure-sep {
    color: rgba(43, 38, 32, 0.35);
    font-weight: 600;
}
.measure-metric-note {
    font-size: 11px;
    line-height: 1.4;
    color: rgba(43, 38, 32, 0.5);
}

/* 0–100 skála az Intelligence Indexhez */
.measure-scale {
    position: relative;
    height: 5px;
    border-radius: var(--radius-sharp, 4px);
    background: rgba(43, 38, 32, 0.10);
    overflow: hidden;
}
.measure-scale-fill {
    display: block;
    height: 100%;
    border-radius: var(--radius-sharp, 4px);
    background: #bfb08a;
}

.measure-foot {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--steel-400);
}
.measure-foot a { color: var(--steel-600); }

@media (max-width: 640px) {
    .measure-rank {
        flex: 1 1 100%;
        padding: 20px;
    }
    .measure-rank-value { font-size: 44px; }
}

.version-card-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}



.version-card-icon {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    color: var(--accent-orange);
}
.version-card--drop .version-card-icon { color: #15803d; }
.version-card--up .version-card-icon { color: #b45309; }

.version-card-label {
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent-orange);
}
.version-card--drop .version-card-label { color: #15803d; }
.version-card--up .version-card-label { color: #b45309; }

.version-card-date {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--steel-400);
}

.version-card-note {
    font-size: 14px;
    font-weight: 700;
    color: #161616;
    line-height: 1.4;
    letter-spacing: -0.01em;
}

/* ============================================================
   🔥 PRÉMIUM FÉM FEJLÉC-CSEMPÉK
   A fejléc interaktív elemeit (kereső-gomb, hamburger, user-ikon,
   user-badge) a felolvasó-ikon / lejátszó fém-lapka stílusába hozza:
   radiális pezsgő fényfolt + sötét fémgradiens + finom belső highlight,
   hoverre pezsgő fénykeret. Legkésőbb töltődik → forrás-sorrend nyer
   (nincs !important). Sarok ≤5px, nincs narancs.
   ============================================================ */
.header-search-toggle-btn,
.header-menu-toggle,
.header-user-icon-btn,
.user-badge {
    border: 1px solid rgba(255, 255, 255, 0.14);
    background:
        radial-gradient(130% 105% at 50% -20%, rgba(191, 176, 138, 0.20) 0%, rgba(191, 176, 138, 0) 60%),
        linear-gradient(180deg, #2e2e2e 0%, #191919 55%, #0d0d0d 100%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -2px 5px rgba(0, 0, 0, 0.5),
        0 3px 10px rgba(0, 0, 0, 0.35);
    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;
}

.header-search-toggle-btn,
.header-menu-toggle,
.header-user-icon-btn {
    color: #e6ddc8;
}

.header-search-toggle-btn:hover,
.header-menu-toggle:hover,
.header-user-icon-btn:hover,
.user-badge:hover,
.user-badge.active {
    transform: translateY(-1px);
    border-color: rgba(191, 176, 138, 0.6);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.14),
        0 6px 16px rgba(191, 176, 138, 0.28),
        0 0 0 1px rgba(191, 176, 138, 0.25);
}

.header-search-toggle-btn:hover,
.header-menu-toggle:hover,
.header-user-icon-btn:hover {
    color: #ffffff;
}

.header-search-toggle-btn:active,
.header-menu-toggle:active,
.header-user-icon-btn:active,
.user-badge:active {
    transform: translateY(0) scale(0.97);
}

/* Nyitott kereső: mélyebb, „lenyomott" fém, pezsgő kerettel */
.header-search-toggle-btn.is-active {
    color: #ffffff;
    transform: none;
    background: linear-gradient(180deg, #141414 0%, #0b0b0b 100%);
    border-color: rgba(191, 176, 138, 0.55);
    box-shadow:
        inset 0 2px 6px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(191, 176, 138, 0.22);
}

/* Az avatar/placeholder csempe pezsgő, sötét ikonnal (nem narancs) */
.user-badge-avatar-placeholder {
    background: var(--accent-on-dark);
    color: #161616;
}

/* A widget-doboz finoman fémesebb, hogy a csempékhez passzoljon */
.header-widgets {
    background:
        radial-gradient(120% 140% at 50% -30%, rgba(191, 176, 138, 0.10) 0%, rgba(191, 176, 138, 0) 60%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.015) 100%);
    border: 1px solid rgba(191, 176, 138, 0.16);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        inset 0 -2px 5px rgba(0, 0, 0, 0.35);
}