/* Alap stílusok */
body {
    font-family: 'Poppins', sans-serif;
    background-color: #f8f9fa;
}

/* Egyedi fejléc */
.egyedi-fejlec {
    background: linear-gradient(135deg, #0d6efd 0%, #0dcaf0 100%);
    position: relative;
    overflow: hidden;
}

.egyedi-fejlec::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    animation: hatterMozgas 20s linear infinite;
}

@keyframes hatterMozgas {
    0% { background-position: 0 0; }
    100% { background-position: 60px 60px; }
}

/* Kreatív kártyák */
.kreativ-kartya {
    position: relative;
    border-radius: 1rem;
    background: #fff;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 
                0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.kreativ-kartya:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
                0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Átfedéses kártya */
.atfedes .kartya-media {
    position: relative;
    height: 240px;
    overflow: hidden;
}

.atfedes .kartya-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.atfedes:hover .kartya-media img {
    transform: scale(1.1);
}

.atfedes .kartya-tag {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(13, 110, 253, 0.9);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
    z-index: 1;
    backdrop-filter: blur(4px);
}

.atfedes .kartya-tartalom {
    padding: 1.5rem;
}

.atfedes .kartya-kategoria {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #e9ecef;
    color: #495057;
    border-radius: 1rem;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
}

.atfedes .kartya-cim {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    color: #212529;
}

.atfedes .kartya-szoveg {
    color: #6c757d;
    margin-bottom: 1.5rem;
    line-height: 1.6;
}

.atfedes .kartya-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

.atfedes .szerzo {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.atfedes .szerzo-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.atfedes .szerzo-nev {
    font-size: 0.875rem;
    font-weight: 500;
    color: #495057;
}

.atfedes .olvasasi-ido {
    font-size: 0.875rem;
    color: #6c757d;
}

/* 3D kártya */
.haromd {
    perspective: 1000px;
    height: 400px;
}

.haromd .kartya-belso {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.haromd:hover .kartya-belso {
    transform: rotateY(180deg);
}

.haromd .kartya-elol,
.haromd .kartya-hatul {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    border-radius: 1rem;
}

.haromd .kartya-elol {
    background: white;
}

.haromd .kartya-hatul {
    background: #0d6efd;
    color: white;
    transform: rotateY(180deg);
}

.haromd .kartya-ikon {
    font-size: 3rem;
    margin-bottom: 1.5rem;
}

.haromd .kartya-cim {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-align: center;
}

.haromd .kartya-szoveg {
    text-align: center;
    margin-bottom: 1.5rem;
    color: #6c757d;
}

.haromd .kartya-lista {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    text-align: center;
}

.haromd .kartya-lista li {
    margin-bottom: 0.75rem;
}

/* Gradiens kártya */
.gradiens {
    background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
    color: white;
}

.gradiens .kartya-tartalom {
    padding: 2rem;
    text-align: center;
}

.gradiens .kartya-ikonok {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.gradiens .ikon {
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    backdrop-filter: blur(4px);
}

.gradiens .kartya-statisztikak {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 1.5rem 0;
}

.gradiens .stat-elem {
    text-align: center;
}

.gradiens .stat-szam {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.gradiens .stat-cimke {
    font-size: 0.875rem;
    opacity: 0.8;
}

/* Timeline komponens */
.idovonal-kontener {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 0;
}

.idovonal {
    position: relative;
    padding-left: 3rem;
}

.idovonal::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 100%;
    background: linear-gradient(to bottom, #e9ecef 0%, #0d6efd 100%);
    border-radius: 1px;
}

.idopont-elem {
    position: relative;
    padding-bottom: 3rem;
}

.idopont-elem:last-child {
    padding-bottom: 0;
}

.idopont-marker {
    position: absolute;
    left: -3rem;
    display: flex;
    align-items: center;
    transform: translateX(-50%);
}

.marker-ikon {
    width: 48px;
    height: 48px;
    background: white;
    border: 2px solid #0d6efd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 1;
}

.idopont-kartya {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.kartya-fejlec {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.datum {
    font-size: 0.875rem;
    color: #6c757d;
}

.cimke {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #e9ecef;
    color: #495057;
    border-radius: 1rem;
    font-size: 0.875rem;
}

.kartya-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #e9ecef;
}

.resztvevok {
    display: flex;
    align-items: center;
}

.resztvevok img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 2px solid white;
    margin-left: -8px;
}

.resztvevok img:first-child {
    margin-left: 0;
}

.tobbi {
    background: #e9ecef;
    color: #495057;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    margin-left: -8px;
    border: 2px solid white;
}

.statusz {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.statusz.kesz {
    color: #198754;
}

.statusz.folyamatban {
    color: #0d6efd;
}

.statusz.kovi {
    color: #6c757d;
}

.statusz-ikon {
    width: 24px;
    height: 24px;
    background: currentColor;
    opacity: 0.1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Árazó táblák */
.arak-kartya {
    position: relative;
    background: white;
    border-radius: 1.5rem;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
                0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.arak-kartya:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.arak-kartya.kiemelt {
    background: linear-gradient(135deg, #0d6efd 0%, #0dcaf0 100%);
    color: white;
    transform: translateY(-10px) scale(1.05);
}

.kartya-kiemel {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.9);
    color: #0d6efd;
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
    backdrop-filter: blur(4px);
}

.kartya-fejlec {
    padding: 2rem;
    text-align: center;
    border-bottom: 1px solid #e9ecef;
}

.kiemelt .kartya-fejlec {
    border-color: rgba(255, 255, 255, 0.1);
}

.csomag-nev h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.csomag-nev .alcim {
    font-size: 0.875rem;
    color: #6c757d;
}

.kiemelt .csomag-nev .alcim {
    color: rgba(255, 255, 255, 0.8);
}

.csomag-ar {
    margin: 2rem 0;
}

.csomag-ar .penznem {
    font-size: 1.5rem;
    vertical-align: top;
    margin-right: 0.25rem;
}

.csomag-ar .osszeg {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1;
 }
 
 .csomag-ar .idoszak {
    font-size: 1rem;
    color: #6c757d;
 }
 
 .kiemelt .csomag-ar .idoszak {
    color: rgba(255, 255, 255, 0.8);
 }
 
 .kartya-test {
    padding: 2rem;
 }
 
 .csomag-lista {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
 }
 
 .lista-elem {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 0;
    color: #495057;
 }
 
 .kiemelt .lista-elem {
    color: rgba(255, 255, 255, 0.9);
 }
 
 .lista-elem.inaktiv {
    color: #6c757d;
    text-decoration: line-through;
 }
 
 .kiemelt .lista-elem.inaktiv {
    color: rgba(255, 255, 255, 0.6);
 }
 
 .elem-ikon {
    width: 24px;
    height: 24px;
    background: rgba(13, 110, 253, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0d6efd;
    font-size: 0.875rem;
 }
 
 .kiemelt .elem-ikon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
 }
 
 .lista-elem.inaktiv .elem-ikon {
    background: rgba(108, 117, 125, 0.1);
    color: #6c757d;
 }
 
 .kiemelt .lista-elem.inaktiv .elem-ikon {
    background: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
 }
 
 /* Statisztikai kártyák */
 .stat-kartya {
    background: white;
    border-radius: 1rem;
    padding: 1.5rem;
    height: 100%;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
 }
 
 .stat-kartya:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
 }
 
 .stat-ikon {
    width: 48px;
    height: 48px;
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1rem;
 }
 
 .stat-ikon.novekedes {
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
 }
 
 .stat-fejlec {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
 }
 
 .stat-fejlec h4 {
    font-size: 1rem;
    font-weight: 600;
    color: #495057;
    margin: 0;
 }
 
 .valtozas {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.875rem;
 }
 
 .valtozas.novekedes {
    background: rgba(25, 135, 84, 0.1);
    color: #198754;
 }
 
 .stat-szamok {
    margin-bottom: 1.5rem;
 }
 
 .fo-szam {
    display: block;
    font-size: 1.75rem;
    font-weight: 600;
    color: #212529;
    margin-bottom: 0.25rem;
 }
 
 .masod-szam {
    font-size: 0.875rem;
    color: #6c757d;
 }
 
 /* Kördiagram */
 .stat-kordiagram {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 1.5rem;
 }
 
 .kordiagram {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
 }
 
 .kordiagram path {
    transition: stroke-dasharray 0.5s ease;
 }
 
 .kordiagram-szoveg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
 }
 
 .kordiagram-szoveg .szazalek {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: #212529;
 }
 
 .kordiagram-szoveg .cimke {
    font-size: 0.875rem;
    color: #6c757d;
 }
 
 /* Mini grafikon */
 .mini-grafikon {
    display: flex;
    align-items: flex-end;
    gap: 0.25rem;
    height: 40px;
    padding-top: 1rem;
 }
 
 .grafikon-oszlop {
    flex: 1;
    background: rgba(13, 110, 253, 0.1);
    border-radius: 4px 4px 0 0;
    transition: height 0.3s ease;
 }
 
 .grafikon-oszlop.aktiv {
    background: #0d6efd;
 }
 
 /* Profilkártyák */
 /* Általános beállítások */
.profil-kartya {
    position: relative;
    background: white;
    border-radius: 1rem;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    padding: 2rem;
    max-width: 320px;
    margin: 2rem auto;
}

.profil-kartya:hover {
    transform: translateY(-10px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15);
}

/* Profilképek */
.profil-kep {
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid white;
    margin: 0 auto 1rem;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.profil-kep img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Modern profilkártya */
.modern .kartya-fejlec {
    height: 120px;
    background: linear-gradient(135deg, #007bff, #0dcaf0);
    border-radius: 0.5rem 0.5rem 0 0;
    margin-bottom: 2rem;
    position: relative;
}

.modern .profil-kep {
    position: absolute;
    bottom: -35px;
    left: 50%;
    transform: translateX(-50%);
}

/* Szöveges rész */
.profil-info {
    text-align: center;
    margin-top: 1.5rem;
    padding: 0 1rem;
}

.profil-info h3 {
    font-size: 1.5rem;
    font-weight: bold;
    margin-bottom: 0.5rem;
}

.profil-info span {
    display: block;
    font-size: 0.875rem;
    color: #6c757d;
}

/* Statisztikák */
.profil-statisztika {
    display: flex;
    justify-content: space-between;
    margin-top: 2rem;
    text-align: center;
    gap: 1rem;
}

.stat-elem .szam {
    font-size: 1.25rem;
    font-weight: bold;
    color: #007bff;
}

.stat-elem .cimke {
    font-size: 0.875rem;
    color: #6c757d;
}

/* Csapattag kártya */
.csapattag .kartya-fejlec {
    display: flex;
    align-items: center;
    padding: 1.5rem;
    background: rgba(13, 110, 253, 0.02);
    border-bottom: 1px solid #e9ecef;
}

.csapattag .profil-kep {
    margin-right: 1rem;
    margin-left: 0;
    position: static;
    width: 60px;
    height: 60px;
}

.csapattag .szakteruletek {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.csapattag .szakteruletek .szakterulet {
    font-size: 0.9rem;
    padding: 0.4rem 0.6rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 0.25rem;
}

/* Kreatív profilkártya */
.kreativ .kartya-hatter {
    height: 150px;
    background: url('https://picsum.photos/800/400?random=25') no-repeat center/cover;
    margin-bottom: 1rem;
}

.kreativ .profil-kep {
    position: relative;
    margin: -40px auto 1rem;
}

.kreativ .profil-info h3 {
    font-size: 1.2rem;
    text-align: center;
}

.kreativ .portfolio-adatok {
    display: flex;
    justify-content: space-around;
    margin: 1rem 0;
}

.kreativ .portfolio-adatok .adat {
    text-align: center;
}

.kreativ .portfolio-adatok .adat .szam {
    font-size: 1rem;
    font-weight: bold;
    color: #007bff;
}

.kreativ .portfolio-adatok .adat .cimke {
    font-size: 0.875rem;
    color: #6c757d;
}

/* Dashboard kártya */
.dashboard .profil-info {
    text-align: center;
    margin: 1rem 0;
}

.dashboard .negyedeves-cel {
    text-align: center;
    margin-bottom: 1rem;
    padding: 0 1rem;
}

.dashboard .negyedeves-cel .progress {
    height: 8px;
    border-radius: 5px;
    background: #e9ecef;
    margin: 0.5rem 0;
    overflow: hidden;
}

.dashboard .negyedeves-cel .progress-bar {
    height: 8px;
    background: #007bff;
}

.dashboard .aktivitas-naptar {
    margin-top: 1rem;
    padding: 1rem;
    background: rgba(13, 110, 253, 0.02);
    border-radius: 0.5rem;
}

.dashboard .aktivitas-naptar .naptar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.5rem;
}

.dashboard .aktivitas-naptar .nap {
    width: 1rem;
    height: 1rem;
    background: #e9ecef;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.dashboard .aktivitas-naptar .nap.aktiv {
    background: #007bff;
}

/* Reszponzivitás */
@media (max-width: 768px) {
    .profil-kartya {
        max-width: 100%;
    }

    .csapattag .profil-kep {
        margin: 0 auto;
    }
}