/* ======================================================================
   📌 main.css – TISZTÍTOTT VERZIÓ
   - Index (KKPGroup főoldal) duplikációk eltávolítva és a fájl aljára rendezve.
   - Más oldalak (pl. cookie banner, zene gombok, stb.) érintetlenül hagyva.
   ====================================================================== */

/* ======================================================================
   ## ALAP BEÁLLÍTÁSOK ÉS HÁTTÉR
   ====================================================================== */

body {
    background-image: url("../Galeri/background/background.WEBP");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    margin: 0;
    font-family: Arial, sans-serif;
    color: white;
    min-height: 100vh;
}

/* ======================================================================
   ## OLDAL CÍM + LEÍRÁS
   ====================================================================== */

header h1 {
    font-size: 38px;
    font-weight: bold;
    text-align: center;
    margin-top: 70px;
    color: #e7c47b;
    text-shadow: 0 0 12px #000;
}

p.leiras {
    text-align: center;
    max-width: 900px;
    margin: 15px auto 40px;
    font-size: 18px;
    line-height: 1.4;
    padding: 0 10px;
}

/* ======================================================================
   ## NYELVVÁLASZTÓ (KIZÁRÓLAG ITT ÁLLÍTS ZÁSZLÓ MÉRETET!)
   ====================================================================== */

/* 🎯 IDE TETTEM A JAVÍTOTT MÉRETET! (48x48px)
   Ha később nagyobbat vagy kisebbet szeretnél, ITT állítsd. */

/* =========================
   LANG PILLS – kapszula gombok (Stella + főoldal)
   ========================= */

/* Aktív nyelv kiemelése */

/* ======================================================================
   ## FŐMENÜ – KÁRTYÁK (KKP-BTN)
   ====================================================================== */

/* Kártya stílus */

.kkp-btn {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 260px;
    background: #25050a;
    border-radius: 18px;
    border: 2px solid #e3b45b;
    overflow: hidden;
    cursor: pointer;
    transition: 0.3s;
    color: #ffdd99;
    z-index: 0;
    text-decoration: none;
}

/* Kártya képe */

.kkp-btn img {
    width: 90%;
    height: 70%;
    border-radius: 14px;
    object-fit: cover;
    margin-top: 10px;
}

/* Kártya címszöveg */

.kkp-btn span {
    font-size: 18px;
    font-weight: 600;
    text-shadow: 0 0 8px #000;
}

/* ======================================================================
   ## KÁRTYA – ARANY FÉNY ANIMÁCIÓ
   ====================================================================== */

.kkp-btn::before,
.kkp-btn::after {
    content: "";
    position: absolute;
    left: -12%;
    right: -12%;
    height: 2px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        #a06a00 22%,
        #ffcc66 50%,
        #ffe9a8 68%,
        transparent 100%
    );
    z-index: 1;
    pointer-events: none;
}

.kkp-btn::before {
    top: 20%;
    transform: rotate(8deg) translateX(-35%);
    opacity: 0.25;
    animation: streakA 5.5s ease-in-out infinite;
}

.kkp-btn::after {
    bottom: 18%;
    transform: rotate(-9deg) translateX(40%);
    opacity: 0.25;
    animation: streakB 6.8s ease-in-out infinite;
}

/* Két fény animáció keyframe-jei */

@keyframes streakA {

    0% { transform: rotate(8deg) translateX(-35%); opacity: .25; }
    50% { transform: rotate(8deg) translateX(5%); opacity: .9; }
    100% { transform: rotate(8deg) translateX(40%); opacity: .25; }

}

@keyframes streakB {

    0% { transform: rotate(-9deg) translateX(40%); opacity: .25; }
    50% { transform: rotate(-9deg) translateX(-5%); opacity: .85; }
    100% { transform: rotate(-9deg) translateX(-35%); opacity: .25; }

}

/* ======================================================================
   ## VIDEÓ BLOKK – ARANY KERET + HOVER GLOW
   ====================================================================== */

.video-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    max-width: 900px;
    margin: 40px auto;
    padding: 0;

    border-radius: 16px;
    overflow: hidden;

    box-shadow: 0 0 22px rgba(255, 221, 153, 0.45);
    border: 2px solid rgba(227, 180, 91, 0.7);
}

/* Videó méret */

.video-container iframe {
    width: 100%;
    height: 500px;
    border: none;
}

/* Hover */

.video-container:hover {
    box-shadow: 0 0 36px rgba(255, 221, 153, 0.85);
    transition: 0.3s ease;
}

/* ======================================================================
   ## RESPONSIVE NÉZET
   ====================================================================== */

@media (max-width: 600px) {
.kkp-btn{
        width: 140px;
        height: 200px;
    }
.kkp-btn span{
        font-size: 14px;
    }
/* Mobilon kisebb zászlóméret */
}

@media (min-width: 601px) and (max-width: 1024px) {
.kkp-btn{
        width: 180px;
        height: 240px;
    }
.kkp-btn span{
        font-size: 16px;
    }
}

/* ======================================================================
   ## KÁRTYA HOVER EFFEKT (ARANY KIEMELÉS)
   ====================================================================== */

.kkp-btn:hover {
    transform: translateY(-6px);
    box-shadow: 0 0 25px rgba(255, 221, 153, 0.85);
    border-color: #ffdd99;
    transition: 0.25s ease;
}

/* 🦊 FOX MASCOT */

#fox-mascot {
    position: fixed;
    bottom: 35px;
    right: 30px;
    width: 120px;
    height: auto;
    z-index: 9999;
    cursor: pointer;
    user-select: none;
}

#fox-img {
    width: 100%;
    height: auto;
    pointer-events: none;
    /* levágjuk a nagyítót és a jeleket */
    clip-path: inset(0px 0px 0px 120px);
    transition: transform 0.25s ease, filter 0.25s ease;
    filter: drop-shadow(0 0 10px rgba(255,240,180,0.7));
}

/* Hover → integető/ugró hatás */

#fox-mascot:hover #fox-img {
    transform: translateY(-8px) scale(1.06);
    filter: drop-shadow(0 0 14px rgba(255,255,200,0.9));
}

/* 🗨️ Buborék a róka feje fölött */

#fox-bubble {
    position: absolute;
    bottom: 110%;
    right: 20px;
    background: rgba(255,255,255,0.85);
    color: #333;
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 12px;
    box-shadow: 0 0 6px rgba(0,0,0,0.25);
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Buborék animáció */

.fox-bubble-show {
    opacity: 1 !important;
    transform: translateY(-8px) !important;
}

/* Pislogás */

@keyframes fox-blink {

    0% { transform: scaleY(1); }
    2% { transform: scaleY(0.1); }
    5% { transform: scaleY(1); }
    100% { transform: scaleY(1); }

}

/* ======================================
   NEON HOVER – minden kártya ragyog
   ====================================== */

.hilar-card {
    transition: box-shadow 0.35s ease, transform 0.35s ease, border-color 0.35s ease;
    position: relative;
}

/* Alap hover mozgás */

.hilar-card:hover {
    transform: translateY(-6px) scale(1.03);
}

/* 1. Daloskönyv – pink-lila neon */

.hilar-card:first-child:hover {
    box-shadow: 0 0 18px #ff5ce7, 0 0 35px #ff9cf2;
    border-color: #ff9cf2;
}

/* 2. Tanulj Hilarral – kék neon */

.hilar-card:nth-child(2):hover {
    box-shadow: 0 0 18px #4db8ff, 0 0 35px #8edcff;
    border-color: #8edcff;
}

/* 3. Posta – türkiz neon */

.hilar-card:nth-child(3):hover {
    box-shadow: 0 0 18px #00ffcc, 0 0 35px #66ffe6;
    border-color: #66ffe6;
}

/* =======================================================
   NEON – VIDEÓ PANEL
   ======================================================= */

.hilar-panel.video-block {
    transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.hilar-panel.video-block:hover {
    box-shadow: 
        0 0 18px rgba(255, 183, 0, 0.7),
        0 0 35px rgba(0, 146, 255, 0.6);
    border-color: rgba(255, 200, 80, 0.85);
}

/* =======================================================
   NEON – SZÖVEG DOBOZ
   ======================================================= */

.hilar-panel.description-block {
    transition: box-shadow 0.35s ease, border-color 0.35s ease;
}

.hilar-panel.description-block:hover {
    box-shadow:
        0 0 15px rgba(255, 80, 160, 0.5),
        0 0 40px rgba(255, 120, 200, 0.4);
    border-color: rgba(255, 150, 220, 0.8);
}

/* =======================================================
   NEON – KÁRTYÁK (3 külön szín)
   ======================================================= */

/* ===========================
   ✨ GLOBAL RGB NEON SYSTEM ✨
   =========================== */

/* Animált színátfolyás */

@keyframes rgbFlow {

    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }

}

/* Hover glow pulzálás */

@keyframes pulseGlow {

    0% { filter: drop-shadow(0 0 6px rgba(255,255,255,.6)); }
    100% { filter: drop-shadow(0 0 16px rgba(255,255,255,1)); }

}

/* 🎨 CÍM – GAMER RGB GLOW */

.hlv-title {
    color: #fff !important;
    text-shadow:
        0 0 12px #00eaff,
        0 0 22px #ff00ff,
        0 0 40px #39ff14;
    background: linear-gradient(90deg,#00eaff,#ff00ff,#39ff14,#00eaff);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rgbFlow 6s ease infinite;
}

/* Szekció fejlécek */

.hv-sec-head h3 {
    background: linear-gradient(90deg,#00eaff,#ff00ff,#39ff14,#00eaff);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rgbFlow 6s ease infinite;
    text-shadow: 0 0 12px rgba(255,255,255,.8);
}

/* Arany vonal → RGB neon */

.hv-sec-head .rule,
.hv-head .line {
    background: linear-gradient(90deg,
        transparent,
        #00eaff,
        #ff00ff,
        #39ff14,
        transparent
    );
    background-size: 400% 400%;
    animation: rgbFlow 6s linear infinite;
}

/* 🎬 VIDEÓ KÁRTYÁK – Teljes neon keret + aura */

.hv-card {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    border: 2px solid rgba(255,255,255,0.15);
    transition: 0.3s ease;
}

/* RGB fénykeret */

.hv-card::before {
    content: "";
    position: absolute;
    inset: -2px;
    border-radius: 24px;
    background: linear-gradient(
        120deg,
        #00eaff,
        #ff00ff,
        #39ff14,
        #ff94e8,
        #ffc800,
        #00eaff
    );
    background-size: 400% 400%;
    filter: blur(18px);
    opacity: 0;
    transition: 0.4s;
    z-index: -1;
}

/* Hover → fény + mozgás */

.hv-card:hover::before {
    opacity: 1;
    animation: rgbFlow 5s ease infinite;
}

/* Hover → kártya megemelkedik */

.hv-card:hover {
    transform: scale(1.05);
    filter: drop-shadow(0 0 18px rgba(255,255,255,.5));
}

/* 🎥 Videó frame – extra neon */

.hv-frame {
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        0 0 12px rgba(0,234,255,.5),
        0 0 26px rgba(255,0,255,.3),
        0 0 40px rgba(57,255,20,.35);
    transition: 0.3s ease;
}

/* Hover → a videó körül világítás erősödik */

.hv-card:hover .hv-frame {
    box-shadow:
        0 0 20px #00eaff,
        0 0 45px #ff00ff,
        0 0 75px #39ff14;
    animation: pulseGlow 1.2s infinite alternate;
}

/* Videó cím – neon text */

.hv-title {
    background: linear-gradient(90deg,#fff,#00eaff,#ff00ff,#39ff14,#fff);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: rgbFlow 7s ease infinite;
    text-shadow: 0 0 10px rgba(255,255,255,.7);
}

/* Vissza gomb is neon */

.back-float a {
    background: linear-gradient(90deg,#00eaff,#ff00ff,#39ff14,#00eaff);
    background-size: 400% 400%;
    animation: rgbFlow 7s ease infinite;
    color: white !important;
    text-shadow: 0 0 8px white;
    box-shadow: 0 0 10px rgba(255,255,255,.7);
}

.liederbuch-subtitle-box {
    max-width: 900px;
    margin: 10px auto 30px auto;
    padding: 14px 22px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 0 18px rgba(255, 255, 255, 0.35);
    animation: subtitleFadeIn 0.7s ease forwards;
    text-align: center;
}

.liederbuch-subtitle-box p {
    color: white;
    font-size: 20px;
    line-height: 1.4;
    margin: 0;
    text-shadow: 0 0 10px rgba(0,0,0,0.7);
}

@keyframes subtitleFadeIn {

    0% { opacity: 0; transform: translateY(-6px); }
    100% { opacity: 1; transform: translateY(0); }

}

/* ------------------------------
   LINK HUB – KÖZÉPRE IGAZÍTÁS
   ------------------------------ */

.content-section {
    text-align: center !important;
}

.content-title {
    width: 100%;
    text-align: center !important;
    font-size: 28px;
    margin-bottom: 10px;
}

.content-text {
    width: 100%;
    text-align: center !important;
    font-size: 18px;
    opacity: 0.9;
    margin-bottom: 30px;
}

.serenity-card,
.serenity-card *,
.serenity-card a,
.serenity-card a:link,
.serenity-card a:visited,
.serenity-card a:hover,
.serenity-card a:active {
    text-decoration: none !important;
}

.serenity-card .label {
    text-decoration: none !important;
    border-bottom: none !important;
}

.serenity-grid a,
.serenity-grid a:link,
.serenity-grid a:visited,
.serenity-grid a:hover,
.serenity-grid a:active {
    text-decoration: none !important;
    border: none !important;
}

/* ============================
   POSTBOX – kis kép + gomb
   ============================ */

/* 9:16 kép kicsiben, teljesben látszik */

.postbox-hero-img {
    display: block;
    margin: 0 auto 24px;

    width: 260px;        /* ha kisebb/nagyobb kell: 200–320 px között nyugodtan állíthatod */
    max-width: 100%;
    height: auto;        /* arányt tartja */
    border-radius: 20px;
}

/* Kis, elegáns Küldés gomb csak a Post Box oldalra */

.postbox-send-btn {
    display: block;
    margin: 24px auto 40px;
    padding: 12px 28px;

    font-size: 20px;
    font-weight: 700;
    color: #ffe2a8;

    background: rgba(20, 10, 20, 0.95);
    border: 2px solid #e3b45b;
    border-radius: 14px;
    cursor: pointer;
    transition: 0.25s ease;
}

.postbox-send-btn:hover {
    background: rgba(35, 20, 5, 0.95);
    box-shadow:
        0 0 12px rgba(255, 220, 150, 0.8),
        0 0 24px rgba(255, 180, 80, 0.5);
    transform: translateY(-3px);
}

/* ======================================================================
   ## COOKIE BANNER
   ====================================================================== */

.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(20, 20, 20, 0.95);
    color: #fff;
    text-align: center;
    padding: 20px 10px;
    box-shadow: 0 -3px 10px rgba(0,0,0,0.4);
    z-index: 9999;
    font-size: 15px;
}

.cookie-banner p {
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.cookie-btn {
    background: #e7c47b;
    color: #000;
    border: none;
    padding: 10px 20px;
    font-size: 15px;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s ease;
}

.cookie-btn:hover {
    background: #f0d58f;
}

.cookie-hidden {
    display: none;
}

/* Cookie mobilra - ITT A LEZÁRÓ ZÁRÓJEL FONTOS! */

@media (max-width: 480px) {
.cookie-banner{
        font-size: 14px;
        padding: 15px 10px;
    }
.cookie-btn{
        width: 100%;
    }
}

/* ======================================================================
   ## ZENE GOMBOK (JAVÍTOTT: TUTI NEM LESZ KÉK!)
   ====================================================================== */

.music-section {
    text-align: center;
    margin: 80px 0 40px;
    width: 100%;
}

.music-title {
    font-size: 2.4rem;
    color: #ffd27f;
    text-shadow: 0 0 10px rgba(255, 200, 120, 0.6);
    margin-bottom: 30px;
}

.music-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 10px;
}

.music-btn {
    display: inline-block;
    padding: 12px 24px;
    border: 2px solid #ffcc66;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.45);
    
    /* IDE FIGYELJ: Ez a két sor tiltja le a kék színt mobilon! */
    color: #ffecb3 !important; 
    text-decoration: none !important;
    
    font-size: 1.2rem;
    transition: 0.3s ease;
    box-shadow: 0 0 15px rgba(255, 200, 120, 0.3);
    backdrop-filter: blur(3px);
}

.music-btn:hover {
    background: rgba(255, 200, 100, 0.15);
    transform: translateY(-3px);
    border-color: #ffd27f;
    box-shadow: 0 0 25px rgba(255, 200, 120, 0.8);
    color: #fff !important;
}

/* Zene gombok mobilon - extra biztosítás */

@media (max-width: 480px) {
.music-btn{
        font-size: 1rem;
        padding: 10px 16px;
        color: #ffecb3 !important;
    }
}

/* Language pills – global */

.lang-pills button {
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(255,215,120,0.4);
  color: #ffd98a;

  padding: 10px 18px;
  margin: 6px;

  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;

  cursor: pointer;
  transition: all 0.25s ease;
}

.lang-pills button:hover {
  background: rgba(255,215,120,0.15);
  border-color: #ffd98a;
}

.lang-pills button.active {
  background: rgba(255,215,120,0.25);
  border-color: #ffd98a;
  color: #fff;
}

/* === Home sections (minimal, gold-thread look) === */

.kkp-section { margin: 22px 0 28px; }

.kkp-section-head {
  display:flex; align-items:center; gap:14px;
  margin: 6px 6px 6px;
}

.kkp-section-head h2 {
  margin:0;
  font-size: 18px;
  letter-spacing: .3px;
  color: #e7c47b; /* arany */
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}

.kkp-section-rule {
  flex:1;
  height:1px;
  background: linear-gradient(90deg, rgba(231,196,123,.0), rgba(231,196,123,.75), rgba(231,196,123,.0));
  opacity:.9;
}

.kkp-section-sub {
  margin: 0 6px 12px;
  font-size: 14px;
  color: rgba(255,255,255,.80);
}

/* a kártyák rendezése csoporton belül */

.kkp-section-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
}

/* opcionális: picit kisebb kártyák, de csak ha kell */

.kkp-section-grid .kkp-btn {
  transform: translateZ(0);
}

/* === Horizontal groups: text left, cards right === */

/* arany szál elválasztó (finom, nem rombol) */

/* jobb oldali kártyasor */

/* opcionális: a kártyák kicsit kompaktabbak ezen a nézeten */

/* Responsiveness */

/* =========================
   PREMIUM GOLD DIVIDER
========================= */

/* selymes fény hullám */

/* finom arany ragyogás */

@keyframes premiumSweep {

  0%{ left:-40%; opacity:0; }
  20%{ opacity:.6; }
  60%{ left:110%; opacity:.6; }
  100%{ left:110%; opacity:0; }

}

/* Teljes tartalom középre */

/* =========================
   KARCSÚ PRÉMIUM ARANY VONAL
========================= */

/* finom, lassú fénycsúszás */

@keyframes goldSweepSoft {

  0%{ left:-30%; }
  60%{ left:100%; }
  100%{ left:100%; }

}

/* A sorok (szekciók) középre zárása */

/* A bal szövegblokk se menjen ki a bal falra */

/* Karcsú arany vonal középen */

/* LÁTHATÓ fény-pont / csillanás, ami fut */

@keyframes kkpSweepDot {

  0%   { left:-18%; opacity:0; }
  12%  { opacity:.85; }
  60%  { left:100%; opacity:.85; }
  100% { left:100%; opacity:0; }

}

/* KÖZÉP “ékszer” (kis virág/csillag jel) */

/* =========================
   LANE LAYOUT (PC / Tablet / Mobile)
   - szöveg a lane bal szélén
   - kártyák a lane jobb szélén
   - divider ugyanekkora lane
========================= */

/* teljes tartalom középre */

/* ROW: két végpontra feszítjük a lane-en belül */

/* bal szöveg: lane bal szélére */

/* jobb kártyablokk: lane jobb szélére */

/* kártyák méret (csak ebben a layoutban) */

/* kártya feliratok finomítása (opcionális) */

/* =========================
   PREMIUM DIVIDER (lane-hez igazítva)
========================= */

/* látható fény-pont, ami balról jobbra fut */

@keyframes kkpSweepDot {

  0%   { left:-18%; opacity:0; }
  12%  { opacity:.85; }
  60%  { left:100%; opacity:.85; }
  100% { left:100%; opacity:0; }

}

/* középső "ékszer" */

/* =========================
   TABLET
========================= */

/* =========================
   MOBILE
========================= */

/* =========================
   MOBILE: everything smaller + horizontal card strip
========================= */

/* =========================
   MOBILE: language selector compact
========================= */


/* ======================================================================
   ✅ INDEX.HTML – KKPGroup Főoldal (KONSZOLIDÁLT, DUPLIKÁCIÓK KISZEDVE)
   - Csak az indexhez tartozó layout + divider + language selector + mobil strip
   - Minden korábbi duplikált .kkp-row / .kkp-divider / @media 720 blokk törölve innen
   - Itt mindig a LEGUTOLSÓ (aktív) verziók vannak összegyűjtve
   ====================================================================== */
/* ------------------------------
   INDEX – BASE (desktop alap)
   ------------------------------ */
.kkp-lang-selector {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 40px auto;
    max-width: 900px;
    padding: 0 10px;
}
.kkp-lang-selector button {
    background: rgba(25, 8, 10, 0.6);
    color: #ffdd99;
    border: 1px solid rgba(227, 180, 91, 0.4);
    border-radius: 999px;

    display: flex;
    justify-content: center; /* középre igazítás – vízszint */
    align-items: center;     /* középre igazítás – függőleges */
    text-align: center;

    width: 48px;   /* ← EZEKET ÁLLÍTSD, HA MÁS MÉRET KELL */
    height: 48px;  /* ← EZEKET ÁLLÍTSD, HA MÁS MÉRET KELL */

    font-size: 20px;  /* Zászló méret */
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.kkp-lang-selector.lang-pills button {
    width: auto;
    height: auto;

    padding: 10px 18px;
    border-radius: 999px;

    font-size: 14px;
    line-height: 1.2;

    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.kkp-lang-selector button.active {
    background: rgba(227, 180, 91, 0.2);
    border-color: #ffdd99;
    box-shadow: 0 0 8px rgba(255, 221, 153, 0.5);
    transform: translateY(-1px);
}
.kkp-menu {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 22px;
    margin: 40px auto;
    max-width: 1300px;
    padding: 0 10px;
}
.kkp-row-text h2 {
  margin: 0 0 6px;
  font-size: 18px;
  color:#e7c47b;
  text-shadow: 0 2px 10px rgba(0,0,0,.45);
}
.kkp-row-text p {
  margin: 0;
  font-size: 14px;
  color: rgba(255,255,255,.82);
  line-height: 1.35;
}
.kkp-row::before {
  content:"";
  position:relative;
  top: 28px;
  display:block;
  height:1px;
  flex: 0 0 18px;
  background: rgba(231,196,123,.0);
}
main,
.kkp-menu {
  width: min(1100px, 92vw);
  margin: 0 auto;
}
:root {
  --lane: min(980px, 86vw);    /* a "középsáv" szélessége PC-n */
  --gap: 18px;
  --textCol: 280px;            /* bal szöveg oszlop (PC) */

  /* ✅ INDEX kártyaméret (desktop) */
  --cardW: 100px;              /* korábban 170px */
  --cardH: 160px;              /* új: fix magasság a rendezett arányhoz */

  /* ✅ INDEX kép arány (desktop) */
  --cardImgW: 98%;
  --cardImgH: 76%;
}
main, .kkp-menu {
  width: min(1180px, 94vw);
  margin: 0 auto;
}
.kkp-row {
  width: var(--lane);
  margin: 24px auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;  /* kulcs: bal + jobb végpont */
  gap: var(--gap);
}
.kkp-row-text {
  flex: 0 0 var(--textCol);
  max-width: 320px;
  text-align: left;
}
.kkp-row-cards {
  flex: 1 1 auto;
  display: flex;
  gap: 14px;
  justify-content: flex-end;  /* kulcs: jobbra húz */
  flex-wrap: wrap;
}
.kkp-row-cards .kkp-btn {
  width: var(--cardW);
  max-width: var(--cardW);
  height: var(--cardH);         /* ✅ felezett/kompakt arány */
}

.kkp-row-cards .kkp-btn img {
  width: var(--cardImgW);
  height: var(--cardImgH);
  margin-top: 10px;
  border-radius: 14px;
  object-fit: cover;
}

.kkp-row-cards .kkp-btn span { font-size: 12px; }
.kkp-row-cards .kkp-btn .sub { font-size: 10.5px; }
.kkp-divider {
  position: relative;
  height: 2px;
  width: var(--lane);          /* ugyanaz a sáv, mint a tartalom */
  margin: 42px auto;
  border-radius: 2px;
  overflow: hidden;

  background: linear-gradient(
    90deg,
    rgba(231,196,123,0),
    rgba(231,196,123,.55),
    rgba(231,196,123,0)
  );

  box-shadow: 0 0 8px rgba(231,196,123,.22);
}
.kkp-divider::before {
  content:"";
  position:absolute;
  top:50%;
  left:-18%;
  transform: translateY(-50%);
  width: 18%;
  height: 12px;

  background: radial-gradient(
    circle,
    rgba(255,245,205,.95) 0%,
    rgba(255,230,160,.55) 35%,
    rgba(255,255,255,0) 70%
  );

  opacity: .85;
  animation: kkpSweepDot 9s ease-in-out infinite;
}
.kkp-divider::after {
  content:"✦"; /* ha virág kell: "❀" */
  position:absolute;
  left:50%;
  top:50%;
  transform: translate(-50%,-50%);
  font-size: 14px;
  color: rgba(255,235,170,.95);
  text-shadow:
    0 0 10px rgba(231,196,123,.45),
    0 0 18px rgba(231,196,123,.25);
  pointer-events:none;
}

/* ------------------------------
   INDEX – MEDIA (max-width: 1024px)
   ------------------------------ */
@media (max-width: 1024px) {
  :root {
    --lane: min(920px, 92vw);
    --textCol: 260px;
    --cardW: 160px;
  }
}

/* ------------------------------
   INDEX – MEDIA (max-width: 980px)
   ------------------------------ */
@media (max-width: 980px) {
  .kkp-row {
    flex-direction: column;
  }
  .kkp-row-text {
    flex: 1 1 auto;
    max-width: 100%;
  }
  .kkp-row-cards {
    justify-content:flex-start;
  }
}

/* ------------------------------
   INDEX – MEDIA (max-width: 720px)
   ------------------------------ */
@media (max-width: 720px) {
  :root {
    --lane: min(520px, 94vw);

  --cardW: 60px;    /* kártya szélesség mobilon */
  --cardH: 80px; /* ← EZ a kártya magasság */

    --textCol: 100%;
  }
  .kkp-row-cards .kkp-btn{
  width: var(--cardW);
  height: var(--cardH);
}
.kkp-row-cards .kkp-btn img{
  width: 100%;
  height: auto;
  display: block;
}
.kkp-row-cards .kkp-btn img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
  .kkp-row {
    width: var(--lane);
    margin: 18px auto 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .kkp-row-text {
    max-width: 100%;
  }
  .kkp-row-text h2 {
    font-size: 15px;
    margin: 0 0 4px;
  }
  .kkp-row-text p {
    font-size: 12px;
    line-height: 1.3;
    margin: 0;
    opacity: .9;

    /* opcionális: max 2 sor, hogy ne legyen túl hosszú */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .kkp-row-cards {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--cardW);
    gap: 10px;

    overflow-x: auto;
    overflow-y: hidden;
    padding: 6px 6px 10px;
    margin: 0 -6px;                 /* kis “edge-to-edge” érzés */
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .kkp-row-cards .kkp-btn {
    width: var(--cardW);
    max-width: var(--cardW);
    scroll-snap-align: start;
  }
  .kkp-row-cards .kkp-btn span { font-size: 12px; }
  .kkp-row-cards .kkp-btn .sub { font-size: 10.5px; }
  .kkp-row-cards::-webkit-scrollbar { height: 0; }
  .kkp-divider {
    width: min(340px, 72vw);
    margin: 18px auto;
    height: 2px;
  }
  .kkp-divider::after {
    font-size: 12px;
  }
  .kkp-title {
    font-size: 28px;
    line-height: 1.15;
    margin: 20px 0 10px;
  }
  .kkp-subtitle {
    font-size: 13px;
    line-height: 1.35;
    margin: 0 0 14px;
    opacity: .92;
  }
  .lang-switch {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 oszlop */
    gap: 10px 10px;
    justify-items: stretch;

    width: min(360px, 92vw);
    margin: 10px auto 18px;
  }
  .lang-switch button,
  .lang-switch a {
    font-size: 12px;
    padding: 8px 10px;
    border-radius: 999px;
    letter-spacing: .2px;
  }
  .lang-switch button span,
  .lang-switch a span {
    font-size: 12px;
  }
  .kkp-hero {
    padding-bottom: 8px;
  }
  .kkp-menu .pill-row,
  .kkp-menu .lang-row,
  .kkp-menu .lang-buttons,
  .kkp-menu .language-buttons {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: min(360px, 92vw) !important;
    margin: 10px auto 18px !important;
  }
}

/* ------------------------------
   INDEX – MEDIA (max-width: 600px)
   ------------------------------ */
@media (max-width: 600px) {
  .kkp-lang-selector button {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }
}


/* ===============================
   INDEX – KÁRTYA SZÖVEG KÖZÉPRE
   =============================== */

.kkp-row-cards .kkp-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  padding:12px 8px 10px 8px;
}

.kkp-row-cards .kkp-btn span{
  width:100%;
  text-align:center;
}

.kkp-row-cards .kkp-btn .sub{
  width:100%;
  text-align:center;
}

/* ===============================
   INDEX – SZÖVEG MÉRET NÖVELÉS
   =============================== */

.kkp-row-text h3{
  font-size: 30px;      /* Gyerek tartalom cím */
  font-weight: 700;
  margin-bottom: 10px;
}

.kkp-row-text p{
  font-size: 17px;    /* Leírás */
  line-height: 1.6;
  max-width: 420px;
}

/* INDEX – stabil kártyasáv */
.kkp-row-cards{
  justify-content: flex-start !important;
  gap: 14px !important;
  flex-wrap: nowrap;
}
.kkp-row-cards{
  justify-content: start !important;
  justify-items: start !important;
  gap: 14px !important;
}
/* ===============================
   INDEX – KÁRTYABLOKK JOBBRA ZÁR + 3/2 TÖRÉS
   (felülírja a korábbi középre csúszást)
   =============================== */

.kkp-row {
  align-items: flex-start;
}

.kkp-row-cards{
  /* a kártyablokk menjen a szöveg mellett a JOBB oldalra */
  margin-left: auto !important;

  /* a kártyák jobbra zárva rendeződjenek */
  display: flex;
  justify-content: flex-end !important;
  align-content: flex-start;
  gap: 14px !important;

  /* 3 kártya szélesség -> 3 fent, a többi alatta */
  width: min(calc(3 * var(--cardW) + 2 * 14px), 100%) !important;

  /* engedjük a törést (3+2), de jobbra zárva */
  flex-wrap: wrap !important;
}
/* ===============================
   INDEX – EXTRA 3 + 2 FIX
   =============================== */

.kkp-row-cards{
  margin-left: auto !important;

  display: flex;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
  gap: 14px !important;

  /* 3 kártya szélesség pontosan */
  width: calc(3 * var(--cardW) + 2 * 14px) !important;
}
/* ==========================================
   INDEX – EXTRA & KÖZÖSSÉG: GARANTÁLT 3 FENT + 2 LENT (GRID)
   ========================================== */
@supports selector(.x:has(.y)) {
  .kkp-row:has(h2[data-key="sec_extra_title"]) .kkp-row-cards{
    margin-left: auto !important;

    display: grid !important;
    grid-template-columns: repeat(3, var(--cardW)) !important;
    gap: 14px !important;

    /* jobbra zárás a fénycsíkhoz */
    justify-content: end !important;
    justify-items: end !important;
    align-content: start !important;
  }

  .kkp-row:has(h2[data-key="sec_extra_title"]) .kkp-row-cards .kkp-btn{
    width: var(--cardW) !important;
    max-width: var(--cardW) !important;
  }
}
/* ==========================================
   INDEX – EXTRA & KÖZÖSSÉG: NE ÉRJEK ÖSSZE A KÁRTYÁK
   ========================================== */

@supports selector(.x:has(.y)) {
  /* a kártya mérete számolja bele a bordert/paddinget */
  .kkp-row:has(h2[data-key="sec_extra_title"]) .kkp-row-cards .kkp-btn{
    box-sizing: border-box !important;
    margin: 0 !important;
  }

  /* a rács cellája legyen picit tágabb, mint a kártya */
  .kkp-row:has(h2[data-key="sec_extra_title"]) .kkp-row-cards{
    grid-template-columns: repeat(3, calc(var(--cardW) + 18px)) !important;
    column-gap: 18px !important;
    row-gap: 18px !important;
  }
}
/* ===========================
   MOBIL JAVÍTÁS – EXTRA RÉSZ
   =========================== */
@media (max-width: 768px) {

  .kkp-row:has(h2[data-key="sec_extra_title"]) .kkp-row-cards{
    grid-template-columns: 1fr !important;   /* 1 oszlop mobilon */
    justify-content: center !important;
    justify-items: center !important;
  }

  .kkp-row-text{
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

}
.kkp-row-text p{
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
}
/* ==========================
   MOBIL – NYELVVÁLASZTÓK
   ========================== */
@media (max-width: 720px){

  .lang-switch,
  .language-switch,
  .lang-btn,
  .language-btn{
    font-size: 11px !important;
    padding: 4px 8px !important;
    border-radius: 14px !important;
    min-height: 26px !important;
  }

  .language-wrapper,
  .lang-wrapper{
    gap: 6px !important;
  }

}
/* ==========================
   MOBIL – NYELVVÁLASZTÓ
   ========================== */
@media (max-width: 720px){

  .kkp-lang-selector{
    gap: 6px !important;
  }

  .kkp-lang-selector button{
    font-size: 10px !important;
    padding: 4px 8px !important;
    border-radius: 12px !important;
    min-height: 24px !important;
    line-height: 1.1 !important;
  }

}


/* Main language dropdown — Elternwelt style, burgundy/gold palette */
.kkp-language-picker {
  display: grid;
  grid-template-columns: auto minmax(190px, 250px);
  align-items: center;
  gap: 10px;
  width: max-content;
  max-width: calc(100% - 28px);
  margin: 28px auto 38px;
  padding: 9px 10px 9px 15px;
  border: 1px solid rgba(239, 201, 141, 0.42);
  border-radius: 14px;
  background: rgba(55, 8, 18, 0.86);
  box-shadow: 0 14px 36px rgba(20, 0, 5, 0.32), inset 0 1px rgba(255, 255, 255, 0.08);
  color: #e9c887;
}

.kkp-language-picker > span {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.kkp-language-picker select {
  width: 100%;
  min-height: 40px;
  padding: 8px 38px 8px 12px;
  border: 1px solid rgba(239, 201, 141, 0.34);
  border-radius: 10px;
  background: #3b0b16;
  color: #fff3dc;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  outline: none;
}

.kkp-language-picker select:hover,
.kkp-language-picker select:focus-visible {
  border-color: #efc98d;
  box-shadow: 0 0 0 3px rgba(239, 201, 141, 0.14);
}

.kkp-language-picker option {
  background: #3b0b16;
  color: #fff3dc;
}

@media (max-width: 520px) {
  .kkp-language-picker {
    grid-template-columns: 1fr;
    width: min(330px, calc(100% - 28px));
    gap: 6px;
    padding: 10px;
  }

  .kkp-language-picker > span {
    padding-left: 2px;
  }
}