/* ==========================================================
   NEXUS ÁRKÁRTYÁK
   Digital Panel rendszer
========================================================== */


/* ==========================================================
   01. ÁRKÁRTYA SZEKCIÓ
========================================================== */

.arkartya-section{

    /* Térköz */

    padding:120px 0;

}
/* ==========================================================
   02. ÁRKÁRTYA RÁCS
========================================================== */

.arkartya-grid{

    /* Elrendezés */

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(520px,1fr));

    /* Térköz */

    gap:40px;

    margin-top:60px;

    /* Igazítás */

    align-items:start;

}

/* ==========================================================
   03. ÁRKÁRTYA ALAP
========================================================== */

.arkartya{

    /* Pozíció */

    position:relative;

    isolation:isolate;

    overflow:hidden;

    /* Elrendezés */

    display:flex;

    flex-direction:column;

    /* Méret */

    min-height:360px;

    width:100%;

    /* Térköz */

    padding:40px;

    /* Megjelenés */

    border-radius:28px;

    background:

        linear-gradient(

            180deg,

            rgba(255,255,255,.05),

            rgba(255,255,255,.015)

        );

    border:1px solid rgba(255,255,255,.08);

    /* Glass hatás */

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    /* Árnyék */

    box-shadow:

        0 18px 45px rgba(0,0,0,.35),

        inset 0 1px 0 rgba(255,255,255,.05);

    /* Animáció */

    transition:

        transform .35s ease,

        border-color .35s ease,

        box-shadow .35s ease;

}

/* ==========================================================
   04. IKON
========================================================== */

.arkartya-icon{

    /* Elhelyezés */

    display:flex;

    align-items:center;

    justify-content:center;

    /* Méret */

    width:82px;

    height:82px;

    margin-bottom:28px;

    /* Tipográfia */

    font-size:2.2rem;

    /* Megjelenés */

    border-radius:22px;

    background:

        linear-gradient(

            135deg,

            rgba(18,130,255,.18),

            rgba(18,130,255,.05)

        );

    border:1px solid rgba(80,170,255,.18);

    /* Effektek */

    backdrop-filter:blur(12px);

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.08),

        0 10px 25px rgba(0,0,0,.25);

}
/* ==========================================================
   05. CÍM
========================================================== */

.arkartya-title{

    /* Térköz */

    margin:0 0 18px 0;

    /* Tipográfia */

    font-size:1.85rem;

    font-weight:700;

    line-height:1.3;

    letter-spacing:-0.02em;

    color:var(--color-white);

}

/* ==========================================================
   06. LEÍRÁS
========================================================== */

.arkartya-description{

    /* Elhelyezés */

    flex:1;

    margin:0;

    /* Tipográfia */

    font-size:1rem;

    line-height:1.8;

    font-weight:400;

    color:rgba(255,255,255,.78);

}
/* ==========================================================
   07. GOMB
========================================================== */

.arkartya-button{

    /* Elhelyezés */

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    width:100%;

    margin-top:35px;

    padding:18px 24px;

    /* Tipográfia */

    font-size:1rem;

    font-weight:700;

    color:#ffffff;

    /* Megjelenés */

    border:none;

    border-radius:16px;

    cursor:pointer;

    background:

        linear-gradient(

            135deg,

            #0b7df0,

            #1796ff

        );

    box-shadow:

        0 10px 30px rgba(23,150,255,.28);

    /* Animáció */

    transition:

        transform .30s ease,

        box-shadow .30s ease,

        background .30s ease;

}


/* ==========================================================
   GOMB - HOVER
========================================================== */

.arkartya-button:hover{

    transform:translateY(-2px);

    box-shadow:

        0 14px 35px rgba(23,150,255,.40);

}


/* ==========================================================
   GOMB - ACTIVE
========================================================== */

.arkartya-button:active{

    transform:translateY(0);

}
/* ==========================================================
   08. DIGITAL PANEL
========================================================== */

.arkartya-panel{

    /* Pozíció */

    position:relative;

    overflow:hidden;

    /* Méret */

    max-height:0;

    opacity:0;

    margin-top:0;

    /* Térköz */

    padding:0;

    /* Megjelenés */

    border-radius:20px;

    background:

        linear-gradient(

            180deg,

            rgba(18,28,48,.96),

            rgba(10,18,34,.98)

        );

    border:1px solid rgba(70,150,255,.18);

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.05),

        0 14px 35px rgba(0,0,0,.28);

    /* Animáció */

    transition:

        max-height .55s ease,

        opacity .35s ease,

        margin-top .35s ease,

        padding .35s ease;

}

/* ==========================================================
   09. PANEL FELSŐ FÉNYCSÍK
========================================================== */

.arkartya-panel::before{

    /* Tartalom */

    content:"";

    /* Pozíció */

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:2px;

    z-index:2;

    /* Megjelenés */

    background:

        linear-gradient(

            90deg,

            transparent,

            rgba(70,180,255,.95),

            transparent

        );

    opacity:.9;

}

/* ==========================================================
   10. NYITOTT PANEL
========================================================== */

.arkartya.open .arkartya-panel{

    /* Méret */

    max-height:1200px;

    opacity:1;

    /* Térköz */

    margin-top:30px;

    padding:18px 0;

}


/* ==========================================================
   PANEL FÉNYCSÍK AKTIVÁLÁSA
========================================================== */

.arkartya.open .arkartya-panel::before{

    animation:arkartya-panel-light .8s ease forwards;

}

/* ==========================================================
   11. ÁRLISTA SOR
========================================================== */

.arkartya-row{

    /* Elhelyezés */

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    /* Térköz */

    padding:18px 24px;

    /* Megjelenés */

    border-bottom:1px solid rgba(255,255,255,.06);

    /* Animáció */

    transition:

        background .30s ease,

        border-color .30s ease;

}


/* ==========================================================
   ÁRLISTA SOR - UTOLSÓ ELEM
========================================================== */

.arkartya-row:last-child{

    border-bottom:none;

}
/* ==========================================================
   12. ÁRLISTA SOR HOVER
========================================================== */

.arkartya-row:hover{

    /* Megjelenés */

    background:

        linear-gradient(

            90deg,

            rgba(24,120,255,.10),

            rgba(24,120,255,.04)

        );

    border-color:rgba(70,170,255,.18);

    /* Effektek */

    box-shadow:

        inset 4px 0 0 rgba(40,170,255,.90);

}

/* ==========================================================
   13. ÁR
========================================================== */

.arkartya-row strong{

    /* Elhelyezés */

    flex-shrink:0;

    text-align:right;

    min-width:110px;

    /* Tipográfia */

    font-size:1.10rem;

    font-weight:700;

    letter-spacing:.02em;

    color:#29a7ff;

    /* Effektek */

    text-shadow:

        0 0 10px rgba(41,167,255,.20);

}

/* ==========================================================
   14. HÁTTÉRTEXTÚRA
========================================================== */

.arkartya::before{

    /* Tartalom */

    content:"";

    /* Pozíció */

    position:absolute;

    inset:0;

    z-index:0;

    pointer-events:none;

    /* Háttér */

    background:

        url("../assets/image/backgrounds/ajanlat_kartya_hatter.png")

        center center / cover

        no-repeat;

    opacity:.12;

}

/* ==========================================================
   15. ÁRKÁRTYA HOVER
========================================================== */

.arkartya:hover{

    /* Elmozdulás */

    transform:translateY(-8px);

    /* Megjelenés */

    border-color:rgba(70,170,255,.28);

    /* Árnyék */

    box-shadow:

        0 24px 55px rgba(0,0,0,.42),

        0 0 35px rgba(41,167,255,.10),

        inset 0 1px 0 rgba(255,255,255,.08);

}


/* ==========================================================
   HOVER - HÁTTÉRTEXTÚRA
========================================================== */

.arkartya:hover::before{

    opacity:.18;

    transition:opacity .35s ease;

}
/* ==========================================================
   16. GOMB IKON
========================================================== */

.arkartya-button-text{

    flex:1;

    text-align:center;

}


.arkartya-button-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:22px;

    height:22px;

    font-size:.90rem;

    transition:transform .35s ease;

}

/* ==========================================================
   17. PANEL TARTALOM
========================================================== */

.arkartya-panel-content{

    /* Elrendezés */

    display:flex;

    flex-direction:column;

    gap:0;

}

/* ==========================================================
   18. NEXUS INFORMÁCIÓS PANEL
========================================================== */

.arkartya-info{

    /* Pozíció */

    position:relative;

    overflow:hidden;

    /* Térköz */

    margin:28px 24px 12px;

    padding:24px 28px;

    /* Megjelenés */

    border-radius:18px;

    background:

        linear-gradient(
            180deg,
            rgba(14,30,56,.95),
            rgba(10,22,40,.98)
        );

    border:1px solid rgba(60,150,255,.18);

    /* Effektek */

    box-shadow:

        inset 0 1px 0 rgba(255,255,255,.05),

        0 10px 25px rgba(0,0,0,.22);

}

/* ==========================================================
   19. INFORMÁCIÓS PANEL FÉNYCSÍK
========================================================== */

.arkartya-info::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:4px;

    height:100%;

    background:

        linear-gradient(

            180deg,

            #1aa8ff,

            #0b6bff

        );

    box-shadow:

        0 0 18px rgba(30,170,255,.45);

}

/* ==========================================================
   20. INFORMÁCIÓS PANEL CÍME
========================================================== */

.arkartya-info h4{

    margin:0 0 18px;

    color:#ffffff;

    font-size:1rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}

/* ==========================================================
   21. INFORMÁCIÓS PANEL SZÖVEGE
========================================================== */

.arkartya-info p{

    margin:0 0 14px;

    color:rgba(255,255,255,.78);

    font-size:.95rem;

    line-height:1.8;

}

.arkartya-info p:last-child{

    margin-bottom:0;

}



/* ==========================================================
   GOMB IKON - NYITOTT PANEL
========================================================== */

.arkartya.open .arkartya-button-icon{

    transform:rotate(180deg);

}





/* ==========================================================
   TARTALOM RÉTEG
========================================================== */

.arkartya > *{

    position:relative;

    z-index:1;

}