/* ==========================================================
   NEXUS INFORMATIKA
   RENDSZERÜZEMELTETÉSI CSOMAGOK
   CSS MODUL
========================================================== */



/* ==========================================================
   00. SZEKCIÓ
========================================================== */

.maintenance-packages{

    position:relative;

    padding:100px 0;

}



/* ==========================================================
   01. GRID
========================================================== */

.maintenance-grid{

    display:grid;

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

    gap:32px;

    align-items:start;

    margin-top:60px;

}



/* ==========================================================
   02. KÁRTYA
========================================================== */

.maintenance-card{

    position:relative;

    display:flex;

    flex-direction:column;

    overflow:hidden;

    background:linear-gradient(
        180deg,
        rgba(14,22,38,.98),
        rgba(9,15,28,.98)
    );

    border:1px solid rgba(66,148,255,.16);

    border-radius:22px;

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}



/* ==========================================================
   03. KÁRTYA HOVER
========================================================== */

.maintenance-card:hover{

    transform:translateY(-8px);

    border-color:rgba(66,148,255,.45);

    box-shadow:

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

        0 0 26px rgba(66,148,255,.12);

}



/* ==========================================================
   04. KÁRTYA FELSŐ FÉNY
========================================================== */

.maintenance-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:2px;

    background:

        linear-gradient(

            90deg,

            transparent,

            #3fa2ff,

            transparent

        );

    opacity:0;

    transition:opacity .35s ease;

}

.maintenance-card:hover::before{

    opacity:1;

}



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

.maintenance-card h3{

    margin:0;

    padding:34px 34px 18px;

    color:#ffffff;

    font-size:1.45rem;

    font-weight:700;

    line-height:1.3;

}



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

.maintenance-card p{

    margin:0;

    padding:0 34px 30px;

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

    line-height:1.8;

}



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

.maintenance-button{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:12px;

    width:calc(100% - 68px);

    margin:0 34px 34px;

    cursor:pointer;

    transition:

        transform .30s ease,

        box-shadow .30s ease,

        background .30s ease,

        color .30s ease;

}



/* ==========================================================
   08. GOMB HOVER
========================================================== */

.maintenance-button:hover{

    transform:translateY(-2px);

}

.maintenance-button::after{

    content:"▼";

    font-size:.80rem;

    transition:transform .35s ease;

}

.maintenance-card.open .maintenance-button::after{

    transform:rotate(180deg);

}



/* ==========================================================
   09. LENYÍLÓ PANEL
========================================================== */

.maintenance-panel{

    overflow:hidden;

    max-height:0;

    opacity:0;

    border-top:1px solid rgba(255,255,255,.05);

    transition:

        max-height .45s ease,

        opacity .35s ease;

}

.maintenance-card.open .maintenance-panel{

    max-height:1800px;

    opacity:1;

}



/* ==========================================================
   10. PANEL TARTALOM
========================================================== */

.maintenance-panel-content{

    padding:30px 34px 34px;

    background:rgba(255,255,255,.015);

    animation:maintenanceFade .35s ease;

}
/* ==========================================================
   11. ÁR BLOKK
========================================================== */

.maintenance-price{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:30px;

    padding:18px 22px;

    background:rgba(255,255,255,.04);

    border:1px solid rgba(66,148,255,.14);

    border-radius:16px;

    transition:

        border-color .30s ease,

        box-shadow .30s ease;

}

.maintenance-price:hover{

    border-color:rgba(66,148,255,.35);

    box-shadow:

        0 0 18px rgba(66,148,255,.10);

}



/* ==========================================================
   12. ÁR SZÖVEG
========================================================== */

.maintenance-price span{

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

    font-size:.95rem;

}

.maintenance-price strong{

    color:#46a0ff;

    font-size:1.35rem;

    font-weight:700;

}



/* ==========================================================
   13. SZOLGÁLTATÁS SOR
========================================================== */

.maintenance-row{

    display:flex;

    align-items:center;

    gap:16px;

    padding:16px 0;

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

    transition:

        padding-left .25s ease,

        background .25s ease;

}

.maintenance-row:last-child{

    border-bottom:none;

}



/* ==========================================================
   14. SZOLGÁLTATÁS IKON
========================================================== */

.maintenance-row::before{

    content:"✓";

    color:#46a0ff;

    font-weight:700;

    font-size:1rem;

    flex-shrink:0;

}



/* ==========================================================
   15. SZOLGÁLTATÁS HOVER
========================================================== */

.maintenance-row:hover{

    padding-left:10px;

    background:rgba(66,148,255,.05);

}



/* ==========================================================
   16. INFORMÁCIÓS DOBOZ
========================================================== */

.maintenance-info{

    margin-top:30px;

    padding:24px;

    border-radius:18px;

    background:rgba(66,148,255,.05);

    border:1px solid rgba(66,148,255,.12);

    transition:

        border-color .30s ease,

        box-shadow .30s ease;

}



/* ==========================================================
   17. INFORMÁCIÓS DOBOZ HOVER
========================================================== */

.maintenance-info:hover{

    border-color:rgba(66,148,255,.28);

    box-shadow:

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

}



/* ==========================================================
   18. INFORMÁCIÓ CÍM
========================================================== */

.maintenance-info h4{

    margin:0 0 16px;

    color:#46a0ff;

    font-size:1rem;

    font-weight:700;

    letter-spacing:.08em;

    text-transform:uppercase;

}



/* ==========================================================
   19. INFORMÁCIÓ SZÖVEG
========================================================== */

.maintenance-info p{

    margin:0 0 16px;

    padding:0;

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

    line-height:1.8;

}

.maintenance-info p:last-child{

    margin-bottom:0;

}



/* ==========================================================
   20. MEGRENDELÉS GOMB
========================================================== */

.maintenance-order{

    display:flex;

    justify-content:center;

    align-items:center;

    width:100%;

    margin-top:30px;

    transition:

        transform .30s ease,

        box-shadow .30s ease;

}

.maintenance-order:hover{

    transform:translateY(-2px);

    box-shadow:

        0 0 20px rgba(66,148,255,.20);

}
/* ==========================================================
   21. AKTÍV KÁRTYA
========================================================== */

.maintenance-card.open{

    border-color:rgba(66,148,255,.45);

    box-shadow:

        0 24px 60px rgba(0,0,0,.40),

        0 0 40px rgba(66,148,255,.18);

}



/* ==========================================================
   22. NYITOTT KÁRTYA FÉNY
========================================================== */

.maintenance-card.open::before{

    opacity:1;

}



/* ==========================================================
   23. PANEL ELVÁLASZTÓ
========================================================== */

.maintenance-panel{

    box-shadow:

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

}



/* ==========================================================
   24. PANEL HÁTTÉR
========================================================== */

.maintenance-panel-content{

    border-top:1px solid rgba(255,255,255,.05);

}



/* ==========================================================
   25. GOMB FÓKUSZ
========================================================== */

.maintenance-button:focus-visible{

    outline:none;

    box-shadow:

        0 0 0 4px rgba(66,148,255,.18);

}



/* ==========================================================
   26. GOMB NYOMÁS
========================================================== */

.maintenance-button:active{

    transform:scale(.98);

}



/* ==========================================================
   27. MEGRENDELÉS NYOMÁS
========================================================== */

.maintenance-order:active{

    transform:scale(.98);

}



/* ==========================================================
   28. SZÖVEG KIJELÖLÉS
========================================================== */

.maintenance-card *{

    user-select:none;

}



/* ==========================================================
   29. CÍM TÖRDELÉS
========================================================== */

.maintenance-card h3{

    text-wrap:balance;

}



/* ==========================================================
   30. LEÍRÁS TÖRDELÉS
========================================================== */

.maintenance-card p{

    text-wrap:pretty;

}
/* ==========================================================
   31. FADE ANIMÁCIÓ
========================================================== */

@keyframes maintenanceFade{

    from{

        opacity:0;

        transform:translateY(18px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}



/* ==========================================================
   32. FELSŐ FÉNY ANIMÁCIÓ
========================================================== */

@keyframes maintenanceGlow{

    0%{

        opacity:.25;

    }

    50%{

        opacity:1;

    }

    100%{

        opacity:.25;

    }

}



/* ==========================================================
   33. NYITOTT KÁRTYA FÉNY
========================================================== */

.maintenance-card.open::before{

    animation:maintenanceGlow 2.8s infinite linear;

}



/* ==========================================================
   34. PANEL ÁTMENET
========================================================== */

.maintenance-panel{

    will-change:

        max-height,

        opacity;

}



/* ==========================================================
   35. KÁRTYA ÁTMENET
========================================================== */

.maintenance-card{

    will-change:

        transform,

        box-shadow,

        border-color;

}



/* ==========================================================
   36. ÁR BLOKK ÁTMENET
========================================================== */

.maintenance-price{

    transition:

        border-color .30s ease,

        box-shadow .30s ease,

        background .30s ease;

}



/* ==========================================================
   37. INFORMÁCIÓS BLOKK ÁTMENET
========================================================== */

.maintenance-info{

    transition:

        border-color .30s ease,

        box-shadow .30s ease,

        background .30s ease;

}



/* ==========================================================
   38. GÖRGETÉS
========================================================== */

html{

    scroll-behavior:smooth;

}



/* ==========================================================
   39. CSÖKKENTETT ANIMÁCIÓ
========================================================== */

@media (prefers-reduced-motion:reduce){

    .maintenance-card,

    .maintenance-button,

    .maintenance-order,

    .maintenance-panel,

    .maintenance-price,

    .maintenance-info{

        transition:none;

        animation:none;

    }

}



/* ==========================================================
   40. ANIMÁCIÓ VÉGE
========================================================== */

/* Fenntartva */
/* ==========================================================
   41. TABLET
========================================================== */

@media (max-width:1200px){

    .maintenance-grid{

        gap:28px;

    }

}



/* ==========================================================
   42. TABLET KÁRTYA
========================================================== */

@media (max-width:992px){

    .maintenance-grid{

        grid-template-columns:repeat(2,minmax(280px,1fr));

    }

}



/* ==========================================================
   43. TABLET TARTALOM
========================================================== */

@media (max-width:992px){

    .maintenance-card h3{

        font-size:1.35rem;

    }

}



/* ==========================================================
   44. MOBIL GRID
========================================================== */

@media (max-width:768px){

    .maintenance-grid{

        grid-template-columns:1fr;

    }

}



/* ==========================================================
   45. MOBIL KÁRTYA
========================================================== */

@media (max-width:768px){

    .maintenance-card{

        border-radius:18px;

    }

}



/* ==========================================================
   46. MOBIL CÍM
========================================================== */

@media (max-width:768px){

    .maintenance-card h3{

        padding:28px 26px 16px;

    }

}



/* ==========================================================
   47. MOBIL LEÍRÁS
========================================================== */

@media (max-width:768px){

    .maintenance-card p{

        padding:0 26px 24px;

    }

}



/* ==========================================================
   48. MOBIL GOMB
========================================================== */

@media (max-width:768px){

    .maintenance-button{

        width:calc(100% - 52px);

        margin:0 26px 26px;

    }

}



/* ==========================================================
   49. MOBIL PANEL
========================================================== */

@media (max-width:768px){

    .maintenance-panel-content{

        padding:26px;

    }

}



/* ==========================================================
   50. MOBIL ÁR
========================================================== */

@media (max-width:768px){

    .maintenance-price{

        margin-bottom:24px;

    }

}
/* ==========================================================
   51. MOBIL INFORMÁCIÓ
========================================================== */

@media (max-width:768px){

    .maintenance-info{

        padding:20px;

        margin-top:24px;

    }

}



/* ==========================================================
   52. MOBIL INFORMÁCIÓ CÍM
========================================================== */

@media (max-width:768px){

    .maintenance-info h4{

        font-size:.95rem;

    }

}



/* ==========================================================
   53. MOBIL INFORMÁCIÓ SZÖVEG
========================================================== */

@media (max-width:768px){

    .maintenance-info p{

        font-size:.95rem;

        line-height:1.7;

    }

}



/* ==========================================================
   54. MOBIL SZOLGÁLTATÁS SOR
========================================================== */

@media (max-width:768px){

    .maintenance-row{

        padding:14px 0;

    }

}



/* ==========================================================
   55. MOBIL ÁR
========================================================== */

@media (max-width:768px){

    .maintenance-price{

        flex-direction:column;

        gap:10px;

        text-align:center;

    }

}



/* ==========================================================
   56. MOBIL GOMB
========================================================== */

@media (max-width:768px){

    .maintenance-order{

        margin-top:24px;

    }

}



/* ==========================================================
   57. NAGY KIJELZŐ
========================================================== */

@media (min-width:1600px){

    .maintenance-grid{

        gap:40px;

    }

}



/* ==========================================================
   58. NAGY KIJELZŐ KÁRTYA
========================================================== */

@media (min-width:1600px){

    .maintenance-card{

        border-radius:24px;

    }

}



/* ==========================================================
   59. NAGY KIJELZŐ CÍM
========================================================== */

@media (min-width:1600px){

    .maintenance-card h3{

        font-size:1.55rem;

    }

}



/* ==========================================================
   60. NAGY KIJELZŐ LEÍRÁS
========================================================== */

@media (min-width:1600px){

    .maintenance-card p{

        font-size:1.02rem;

    }

}
/* ==========================================================
   61. NYOMTATÁSI NÉZET
========================================================== */

@media print{

    .maintenance-button,

    .maintenance-order{

        display:none;

    }

}



/* ==========================================================
   62. NYOMTATÁSI PANEL
========================================================== */

@media print{

    .maintenance-panel{

        max-height:none;

        opacity:1;

    }

}



/* ==========================================================
   63. NYOMTATÁSI KÁRTYA
========================================================== */

@media print{

    .maintenance-card{

        box-shadow:none;

        border:1px solid #cccccc;

    }

}



/* ==========================================================
   64. NYOMTATÁSI HÁTTÉR
========================================================== */

@media print{

    .maintenance-card,

    .maintenance-info,

    .maintenance-price{

        background:#ffffff;

        color:#000000;

    }

}



/* ==========================================================
   65. NYOMTATÁSI SZÖVEG
========================================================== */

@media print{

    .maintenance-card *{

        color:#000000 !important;

    }

}



/* ==========================================================
   66. CSS AUDIT
========================================================== */

/*

Maintenance CSS V1.0

Selector ellenőrzés:

✓ .maintenance-card

✓ .maintenance-grid

✓ .maintenance-button

✓ .maintenance-panel

✓ .maintenance-panel-content

✓ .maintenance-price

✓ .maintenance-row

✓ .maintenance-info

✓ .maintenance-order

Minden fő komponens definiálva.

*/



/* ==========================================================
   67. FEJLESZTÉSI MEGJEGYZÉS
========================================================== */

/*

Új elemek kizárólag

maintenance-

előtaggal hozhatók létre.

*/



/* ==========================================================
   68. NEXUS DESIGN SYSTEM
========================================================== */

/*

Egységes:

Border Radius

Glow

Transition

Spacing

Komponens struktúra

*/



/* ==========================================================
   69. MODUL STÁTUSZ
========================================================== */

/*

Maintenance.css

VERSION 1.0

Kiadásra kész.

*/



/* ==========================================================
   70. FÁJL VÉGE
========================================================== */