/*==================================================
  TRAINING PAGE
==================================================*/

.training-page{

    position:relative;

    width:100%;

    padding:30px 8% 120px;

    overflow:hidden;

    background:transparent;

}


.training-page::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    top:-180px;
    left:-180px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,140,255,.10),
        transparent 70%);

    pointer-events:none;

}

.training-page::after{

    content:"";

    position:absolute;

    width:380px;
    height:380px;

    right:-150px;
    bottom:-150px;

    border-radius:50%;

    background:radial-gradient(
        circle,
        rgba(0,170,255,.08),
        transparent 70%);

    pointer-events:none;

}

.training-page-header{

    position:relative;

    z-index:2;

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.training-page-subtitle{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(0,140,255,.08);

    border:1px solid rgba(0,140,255,.18);

    color:#4da3ff;

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    text-transform:uppercase;

}

.training-page-header h2{

    margin-top:18px;

    margin-bottom:22px;

    font-size:46px;

    font-weight:700;

    line-height:1.2;

    color:#ffffff;
    position:relative;

    padding-bottom:18px;
}

.training-page-header h2::after{

    content:"";

    position:absolute;

    left:50%;

    bottom:0;

    transform:translateX(-50%);

    width:90px;

    height:4px;

    border-radius:50px;

    background:linear-gradient(
        90deg,
        #3ba8ff,
        #79d2ff);

    box-shadow:
        0 0 14px rgba(59,168,255,.35);

}

.training-page-header p{

    max-width:700px;

    margin:auto;

    color:#b8c3d1;

    font-size:16px;

    line-height:1.8;

}


.training-page-grid{

    position:relative;

    z-index:2;

    display:grid;

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

    gap:35px;

}

.training-page-card{

    position:relative;

    display:flex;
    flex-direction:column;

    height:100%;

    padding:34px 30px;

    border-radius:24px;

    background:
    linear-gradient(180deg,
    rgba(255,255,255,.09),
    rgba(255,255,255,.03));

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

    overflow:hidden;

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

    box-shadow:
    0 8px 24px rgba(0,0,0,.18);

}

.training-page-card::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:4px;

    background:linear-gradient(
    90deg,
    #00b7ff,
    #3b82f6,
    #60a5fa);

    opacity:.9;

}

.training-page-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:radial-gradient(
    circle at top right,
    rgba(0,162,255,.18),
    transparent 60%);

    pointer-events:none;

}

.training-page-card.featured{

    border:2px solid rgba(212,175,55,.45);    
    box-shadow: 0 10px 28px rgba(212,175,55,.08);


}

.training-page-card:hover{

    transform:translateY(-10px);

    border-color:rgba(74,168,255,.45);

    box-shadow:
    0 20px 50px rgba(0,0,0,.45),
    0 0 35px rgba(0,140,255,.18);

}

.training-page-card.featured:hover{

    transform:translateY(-14px);

    border-color:rgba(255,215,100,.95);

    box-shadow:
    0 22px 55px rgba(0,0,0,.45),
    0 0 40px rgba(212,175,55,.30)

}

.training-page-card > *{
    position:relative;
    z-index:2;
}

.training-page-image{
    position:relative;
    width:100%;
    height:310px;
    overflow:hidden;
    border-radius:22px 22px 0 0;
    background:#0d1325;
}

.training-page-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    transition:
        transform .6s ease,
        filter .6s ease;
}

.training-page-card:hover .training-page-image img{

    transform:scale(1.06);

    filter:brightness(1.08);

}

.training-page-image::after{

    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:35%;
    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(80,170,255,.06),
        transparent);

    transform:skewX(-25deg);

    transition:left .9s ease;

    pointer-events:none;

}

.training-page-card:hover .training-page-image::after{

    left:150%;

}

.training-page-card.featured .training-page-image::after{

    background:linear-gradient(
        90deg,
        transparent,
        rgba(212,175,55,.08),
        transparent);

}

.training-page-badge{

    position:absolute;

    left:22px;

    bottom:22px;

    z-index:5;

    padding:10px 18px;

    border-radius:50px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.08),
            rgba(0,0,0,.45));

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

    color:#ffffff;

    font-size:12px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

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

}

.training-page-card:hover .training-page-badge{

    transform:translateY(-4px);

    background:rgba(10,25,50,.72);

    border-color:rgba(89,175,255,.45);

    box-shadow:
        0 10px 24px rgba(0,0,0,.25),
        0 0 18px rgba(0,140,255,.22);

}

.training-page-popular {

    position: absolute;
    top: 20px;
    right: 20px;

    z-index: 5;

    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 9px 14px 9px 11px;

    border-radius: 12px;

    background: rgba(8, 17, 31, .82);

    border: 1px solid rgba(247, 215, 116, .55);

    color: #f7d774;

    font-size: 10px;
    font-weight: 800;

    letter-spacing: 1px;
    line-height: 1;

    white-space: nowrap;

    box-shadow:
        0 8px 24px rgba(0, 0, 0, .28),
        0 0 18px rgba(212, 175, 55, .08);

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

.training-page-popular::before {

    content: "★";

    display: flex;
    align-items: center;
    justify-content: center;

    width: 22px;
    height: 22px;

    border-radius: 7px;

    background:
        linear-gradient(
            145deg,
            #f7d774,
            #d4af37
        );

    color: #08111f;

    font-size: 11px;

    box-shadow:
        0 0 10px rgba(212, 175, 55, .25);

    animation: popularStarPulse 3s ease-in-out infinite;
}

.training-page-popular::after {

    content: "";

    position: absolute;

    top: 1px;
    left: 15px;
    right: 15px;

    height: 1px;

    border-radius: 50%;

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

    pointer-events: none;
}

.training-page-card.featured:hover .training-page-popular {

    transform: translateY(-2px);

    border-color: rgba(247, 215, 116, .8);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, .32),
        0 0 22px rgba(212, 175, 55, .14);
}

@keyframes popularStarPulse {
    0%, 100% { transform:scale(1); }
    50% { transform:scale(1.08); }
}


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

@media(max-width:480px) {

    .training-page-popular {

        top: 15px;
        right: 15px;

        padding: 8px 12px 8px 9px;

        gap: 6px;

        border-radius: 10px;

        font-size: 9px;

        letter-spacing: .8px;
    }


    .training-page-popular::before {

        width: 20px;
        height: 20px;

        border-radius: 6px;

        font-size: 10px;
    }

}

.training-page-content{

    padding:34px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.training-page-content h3{

    position:relative;

    color:#ffffff;

    font-size:28px;

    line-height:1.3;

    margin-bottom:18px;

    padding-left:0;

    transition:
        color .35s ease,
        padding-left .35s ease;

}

.training-page-content h3::before{

    content:"";

    position:absolute;

    left:0;

    top:50%;

    transform:translateY(-50%);

    width:3px;

    height:0;

    border-radius:20px;

    background:linear-gradient(
        180deg,
        #3ba8ff,
        #79d2ff);

    transition:height .35s ease;

}

.training-page-card:hover .training-page-content h3{

    color:#7ccfff;

    padding-left:14px;

}

.training-page-card:hover .training-page-content h3::before{

    height:85%;
    box-shadow:0 0 10px rgba(59,168,255,.35);

}

.training-page-card.featured:hover .training-page-content h3{

    color:#f4d36b;

}

.training-page-card.featured .training-page-content h3::before{

    background:linear-gradient(
        180deg,
        #f7d774,
        #d4af37);
    box-shadow:0 0 10px rgba(212,175,55,.35);

}

.training-page-content p{

    color:#b8c3d1;

    font-size:15px;

    line-height:1.9;

    margin-bottom:28px;

}


.training-page-card:hover .training-page-content p{

    color:#f5f9ff;

}


.training-page-list{

    list-style:none;

    padding:0;

    margin:0 0 32px;

    margin-bottom: 30px;

}



.training-page-list li{

    display:flex;

    align-items:center;

    gap:12px;

    color:#d7e0eb;

    margin-bottom:14px;

    font-size:15px;

    transition:
    transform .35s ease,
    color .35s ease;

}



.training-page-list li i{

    width:22px;

    height:22px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(0,140,255,.15);

    color:#00aaff;

    font-size:11px;

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

}

.training-page-card:hover .training-page-list li{

    color:#f5f9ff;

}

.training-page-card:hover .training-page-list li i{

    transform:scale(1.18);

    color:#6fc8ff;

    text-shadow:0 0 10px rgba(0,170,255,.35);

}

.training-page-card.featured:hover .training-page-list li i{

    color:#f5d36a;

    text-shadow:0 0 10px rgba(212,175,55,.35);

}

.training-page-card:hover{

    transform:translateY(-10px);

    box-shadow:

    0 25px 55px rgba(0,140,255,.15);

}



.training-page-card:hover::before{

    opacity:1;

}



.training-page-card:hover .training-page-image img{

    transform:scale(1.08);

}

.training-center-card{
    grid-column:1 / -1;
    width:calc(50% - 15px);
    justify-self:center;
}

.training-page-card.featured:hover{

    box-shadow:

    0 25px 60px rgba(212,175,55,.22);

}

.training-page-card.featured::before{

    background:linear-gradient(

        135deg,

        rgba(212,175,55,.9),

        transparent,

        rgba(212,175,55,.6)

    );

}

@media(max-width:1200px){

    .training-page{

        padding:30px 6% 100px;

    }

    .training-page-grid{

        gap:28px;

    }

    .training-page-image{

        height:280px;

    }

    .training-page-content{

        padding:30px;

    }

    .training-page-content h3{

        font-size:24px;

    }

}

/*==================================================
  MOBİLE
==================================================*/

@media(max-width:992px){

    .training-page-header{

        margin-bottom:55px;

    }

    .training-page-header h2{

        font-size:38px;

    }

    .training-page-grid{

        grid-template-columns:1fr;

        gap:30px;

    }

    .training-page-image{

        height:320px;

    }

}

@media(max-width:768px){

    .training-page{

        padding:20px 20px 80px;

    }

    .training-page-header{

        margin-bottom:45px;

    }

    .training-page-subtitle{

        font-size:12px;

        padding:9px 18px;

    }

    .training-page-header h2{

        font-size:31px;

        margin:16px 0 18px;

    }

    .training-page-header p{

        font-size:15px;

        line-height:1.7;

    }

    .training-page-image{

        height:250px;

    }

    .training-page-content{

        padding:26px;

    }

    .training-page-content h3{

        font-size:22px;

    }

    .training-page-content p{

        font-size:14px;

        margin-bottom:24px;

    }

    .training-page-list li{

        font-size:14px;

    }

    .training-center-card{
        grid-column:auto;
        width:100%;
        justify-self:stretch;
    }

    .training-category{
        margin-top:50px;
    }

    .training-category-title h3{
        font-size:26px;
    }

    .training-page-grid,
    .training-page-grid.two-card{
        grid-template-columns:1fr;
    }

    .training-category:first-of-type .training-page-card:last-child,
    .training-category:not(.renewal-category) .training-page-card:nth-child(3){
        grid-column:auto;
        width:100%;
        justify-self:stretch;
    }

    .renewal-category{
        margin-top:60px;
    }

}

@media(max-width:480px){

    .training-page{

        padding:15px 15px 70px;

    }

    .training-page-header h2{

        font-size:27px;

    }

    .training-page-image{

        height:220px;

    }

    .training-page-content{

        padding:22px;

    }

    .training-page-badge{

        left:15px;

        bottom:15px;

        padding:8px 14px;

        font-size:11px;

    }

}

.training-page-btn{

    position:relative;

    width:100%;
    height:58px;

    display:flex;
    align-items:center;

    padding:0 10px 0 12px;

    margin-top:28px;

    border-radius:16px;

    background:
        linear-gradient(
            135deg,
            #168cff,
            #0878e8
        );

    color:#ffffff;

    text-decoration:none;

    overflow:hidden;

    box-shadow:
        0 10px 25px rgba(0,140,255,.22);

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

}

.training-page-btn::before{

    content:"";

    position:absolute;

    top:0;
    left:15%;

    width:70%;
    height:1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.55),
            transparent
        );

    opacity:.8;

}



.training-page-btn::after{

    content:"";

    position:absolute;

    top:0;
    left:-100%;

    width:50%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.12),
            transparent
        );

    transform:skewX(-20deg);

    transition:left .7s ease;

}

.training-btn-icon{

    position:relative;

    z-index:2;

    width:40px;
    height:40px;

    display:flex;

    align-items:center;
    justify-content:center;

    flex-shrink:0;

    border-radius:11px;

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

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

    color:#ffffff;

    font-size:16px;

    transition:
        background .35s ease,
        transform .35s ease;

}

.training-btn-text{

    position:relative;

    z-index:2;

    flex:1;

    text-align:center;

    font-size:15px;

    font-weight:700;

    letter-spacing:.1px;

}

.training-btn-arrow{

    position:relative;

    z-index:2;

    width:40px;
    height:40px;

    display:flex;

    align-items:center;
    justify-content:center;

    flex-shrink:0;

    border-radius:11px;

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

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

    color:#ffffff;

    font-size:14px;

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

}

.training-page-status{
    position:relative;

    width:100%;
    min-height:54px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:12px 20px;

    background:
        linear-gradient(
            90deg,
            rgba(73,209,125,.07),
            rgba(73,209,125,.16),
            rgba(73,209,125,.07)
        );

    border-top:1px solid rgba(73,209,125,.18);
    border-bottom:1px solid rgba(73,209,125,.18);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.025),
        inset 0 -1px 0 rgba(73,209,125,.025);

    overflow:hidden;

    color:#69f0a0;

    font-size:.88rem;
    font-weight:700;
    letter-spacing:.45px;
    text-transform:uppercase;

    transition:
        background .35s ease,
        box-shadow .35s ease;
}

.status-open{
    display:flex;
    align-items:center;
    justify-content:center;

    gap:9px;

    color:#69f0a0;
}

.status-icon{
    position:relative;

    width:23px;
    height:23px;

    flex:0 0 23px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:50%;

    background:rgba(73,209,125,.13);

    box-shadow:
        0 0 0 1px rgba(73,209,125,.10),
        0 0 12px rgba(73,209,125,.15);

    animation:statusHeartbeat 2.8s ease-in-out infinite;
}


.status-icon i{
    position:relative;
    z-index:2;

    font-size:.78rem;

    color:#69f0a0;

    filter:
        drop-shadow(
            0 0 5px rgba(73,209,125,.35)
        );
}


.status-text{
    position:relative;
    z-index:3;

    line-height:1.2;

    color:#69f0a0;

    white-space:nowrap;

    text-shadow:
        0 0 10px rgba(73,209,125,.18);
}

.status-icon::after{
    content:"";

    position:absolute;

    inset:-3px;

    border-radius:50%;

    border:1px solid rgba(73,209,125,.35);

    opacity:0;

    pointer-events:none;

    animation:statusIconPulse 2.8s ease-out infinite;
}

.training-page-status::after{
    content:"";

    position:absolute;

    top:0;
    left:0;

    width:22%;
    height:100%;

    pointer-events:none;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.055),
            transparent
        );

    transform:translateX(-159%) skewX(-20deg);

    animation:statusShine 5.5s ease-in-out infinite;
}


.training-page-card:hover .training-page-status{

    background:
        linear-gradient(
            90deg,
            rgba(73,209,125,.09),
            rgba(73,209,125,.19),
            rgba(73,209,125,.09)
        );

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03),
        inset 0 -1px 0 rgba(73,209,125,.05),
        0 0 20px rgba(73,209,125,.04);
}

@keyframes statusHeartbeat {
    0%, 100% { transform:scale(1); }
    8%  { transform:scale(1.07); }
    16% { transform:scale(1); }
    24% { transform:scale(1.04); }
    32% { transform:scale(1); }
}

@keyframes statusIconPulse{

    0%{
        transform:scale(.75);
        opacity:.55;
    }

    65%{
        transform:scale(1.55);
        opacity:0;
    }

    100%{
        transform:scale(1.55);
        opacity:0;
    }
}

@keyframes statusShine {
    0%, 65% { transform:translateX(-159%) skewX(-20deg); }
    82%, 100% { transform:translateX(523%) skewX(-20deg); }
}


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

@media(max-width:480px){

    .training-page-status{
        min-height:52px;

        padding:11px 15px;
    }

    .status-open{
        gap:8px;
    }

    .status-icon{
        width:22px;
        height:22px;

        flex:0 0 22px;
    }

    .status-icon i{
        font-size:.75rem;
    }

    .status-text{
        font-size:.78rem;
        letter-spacing:.3px;
    }

}

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

    .status-icon,
    .status-icon::after,
    .training-page-status::after{
        animation:none;
    }

}

.training-page-btn:hover{

    transform:translateY(-4px);

    background:
        linear-gradient(
            135deg,
            #2d9bff,
            #0878e8
        );

    color:#ffffff;

    box-shadow:
        0 16px 35px rgba(0,140,255,.32),
        0 0 25px rgba(45,165,255,.10);

}

.training-page-btn:hover::after{

    left:140%;

}

.training-page-btn:hover .training-btn-icon{

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

    transform:scale(1.04);

}

.training-page-btn:hover .training-btn-arrow{

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

    transform:translateX(4px);

    box-shadow:
        0 5px 15px rgba(0,0,0,.12);

}

@media(max-width:480px){

    .training-page-btn{

        min-height:58px;

        height:auto;

        padding:7px 8px 7px 10px;

        margin-top:24px;

        border-radius:15px;

    }


    .training-btn-icon,
    .training-btn-arrow{

        width:36px;

        height:36px;

        flex-shrink:0;

        border-radius:10px;

    }


    .training-btn-text{

        font-size:13.5px;

        line-height:1.2;

        padding:0 5px;

        white-space:nowrap;

        text-align:center;

    }

}

@media(max-width:480px){

    .training-page-btn{
        padding-left:8px;
        padding-right:8px;
        gap:7px;
        font-size:12px;
        white-space:nowrap;
        width:100% !important;
    }

    .training-page-content{
        padding-left:15px !important;
        padding-right:15px !important;
    }

}

@media(max-width:403px){

    .training-page-content{
        padding-left:15px !important;
        padding-right:15px !important;
    }

    .training-page-btn{
        width:100% !important;
        box-sizing:border-box;

        display:flex !important;
        align-items:center;
        justify-content:center;

        padding:9px 12px !important;

        gap:0 !important;

        font-size:11px !important;
        font-weight:600;

        line-height:1.2;

        white-space:nowrap;
        overflow:hidden;
    }

    .training-page-btn .training-btn-icon,
    .training-page-btn .training-btn-arrow{
        display:none !important;
    }

    .training-page-btn .training-btn-text{
        display:block;
        width:100%;
        text-align:center;
        white-space:nowrap;
    }

}

.training-page-card.featured .training-page-btn{

    background:
        linear-gradient(
            135deg,
            #b8860b 0%,
            #d4af37 35%,
            #f5d76e 65%,
            #d4af37 100%
        );

    color:#08111f;

    border:1px solid rgba(255,224,120,.55);

    box-shadow:
        0 10px 28px rgba(212,175,55,.28),
        inset 0 1px 0 rgba(255,255,255,.35);

}

.training-page-card.featured .training-page-btn::before{

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.75),
            transparent
        );

    opacity:.8;

}

.training-page-card.featured .training-page-btn::after{

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.28),
            transparent
        );

}

.training-page-card.featured .training-btn-icon,
.training-page-card.featured .training-btn-arrow{

    background:
        rgba(8,17,31,.13);

    border:1px solid rgba(8,17,31,.16);

    color:#08111f;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.15);

}


.training-page-card.featured .training-page-btn:hover{

    background:
        linear-gradient(
            135deg,
            #c99a1b 0%,
            #e5c14f 40%,
            #ffe58a 70%,
            #d4af37 100%
        );

    color:#06101c;

    border-color:
        rgba(255,226,125,.75);

    transform:translateY(-4px);

    box-shadow:
        0 18px 40px rgba(212,175,55,.38),
        0 0 25px rgba(245,215,110,.16),
        inset 0 1px 0 rgba(255,255,255,.45);

}

.training-page-card.featured .training-page-btn:hover
.training-btn-icon,
.training-page-card.featured .training-page-btn:hover
.training-btn-arrow{

    background:
        rgba(8,17,31,.19);

    border-color:
        rgba(8,17,31,.22);

}

.training-page-card.featured .training-page-btn:hover
.training-btn-arrow{

    transform:translateX(4px);

}

.training-page-card.featured{

    border:1px solid rgba(212,175,55,.38);

    box-shadow:
        0 18px 45px rgba(0,0,0,.28),
        0 0 25px rgba(212,175,55,.06);

}

.training-page-card.featured::after{

    content:"";

    position:absolute;

    top:0;
    left:8%;
    right:8%;

    height:3px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #b8860b 15%,
            #f5d76e 50%,
            #b8860b 85%,
            transparent
        );

    border-radius:0 0 10px 10px;

    opacity:.95;

    box-shadow:
        0 0 12px rgba(245,215,110,.28);

    pointer-events:none;

}

.training-page-card.featured:hover{

    border-color:rgba(212,175,55,.58);

    box-shadow:
        0 22px 50px rgba(0,0,0,.32),
        0 0 35px rgba(212,175,55,.10);

}

.training-category{

    margin-top:70px;

}


.training-category-title{

    text-align:center;

    margin-bottom:35px;

}


.training-category-title h3{

    position:relative;

    display:inline-block;

    margin:0;

    font-size:32px;

    font-weight:700;

    color:#ffffff;

}


.training-category-title h3::after{

    content:"";

    display:block;

    width:55px;

    height:3px;

    margin:14px auto 0;

    background:#4da3ff;

    border-radius:10px;

    box-shadow:0 0 15px rgba(77,163,255,.8);

}


.training-page-grid{

    display:grid;

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

    gap:30px;

}

.training-page-grid.two-card{

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

    justify-content:center;

}


.renewal-category{

    margin-top:90px;

}

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

@media(max-width:992px){


    .training-page-grid{

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

    }


    .training-page-grid.two-card{

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

    }


}

@media(max-width:768px){


    .training-category{

        margin-top:50px;

    }

    .training-category-title h3{

        font-size:26px;

    }

    .training-page-grid,
    .training-page-grid.two-card{

        grid-template-columns:1fr;

    }

    .renewal-category{

        margin-top:60px;

    }

}

.training-detail-page{

    padding:80px 0 120px;

    background:var(--bg-color);

}

.training-detail-layout{

    display:grid;

    grid-template-columns:minmax(0,1fr) 330px;

    gap:35px;

    align-items:start;

}


.training-detail-content{

    display:grid;

    gap:25px;

}

.detail-card{

    padding:35px;

    border-radius:24px;

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

    background:rgba(17,29,48,.65);

    transition:.3s;

}

.detail-card:hover{

    border-color:rgba(77,163,255,.30);

    transform:translateY(-4px);

    box-shadow:0 20px 45px rgba(0,0,0,.25);

}

.detail-card h2{

    position:relative;

    margin-bottom:22px;

    padding-left:18px;

    color:#fff;

    font-size:28px;

}

.detail-card h2::before{

    content:"";

    position:absolute;

    left:0;

    top:5px;

    width:4px;

    height:28px;

    border-radius:10px;

    background:#4da3ff;

}

.detail-card p{

    margin-bottom:15px;

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

    line-height:1.8;

}

.detail-list{

    display:grid;

    gap:16px;

    padding:0;

    margin:0;

    list-style:none;

}

.detail-list li{

    display:flex;

    align-items:center;

    gap:12px;

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

}

.detail-list i{

    color:#4da3ff;

}

.detail-program{

    display:grid;

    gap:15px;

}

.program-item{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px;

    border-radius:16px;

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

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

}

.program-item div{

    display:flex;

    align-items:center;

    gap:12px;

    color:#fff;

}

.program-item i{

    color:#4da3ff;

}

.program-item strong{

    color:#4da3ff;

    font-size:14px;

}

.training-detail-sidebar{

    position:sticky;

    top:110px;

    display:grid;

    gap:25px;

}

/*==================================================
EDUCATION MENU CARD
==================================================*/


.detail-menu-card{

    padding:28px;

    border-radius:24px;

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

    background:rgba(17,29,48,.65);

}

.detail-menu-card h3{

    margin-bottom:28px;

    padding-bottom:16px;

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

    color:#fff;

    font-size:22px;

    text-transform:uppercase;

    position:relative;

}

.detail-menu-card h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:15%;

    height:3px;

    border-radius:20px;

    background:linear-gradient(90deg,#4da3ff,#78bcff);

    box-shadow:0 0 12px rgba(77,163,255,.45);

}

.detail-education-menu{

    display:grid;

    gap:8px;

    padding:0;

    margin:0;

    list-style:none;

}

.detail-education-menu li a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:13px 15px;

    border-radius:14px;

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

    font-size:14px;

    transition:.3s;

}

.detail-education-menu li a i{

    width:18px;

    color:#4da3ff;

}

.detail-education-menu li a:hover{

    color:#fff;

    background:rgba(77,163,255,.10);

}

.detail-education-menu li.active a{

    color:#fff;

    background:

    linear-gradient(
    135deg,
    rgba(77,163,255,.20),
    rgba(77,163,255,.05)
    );

    border:1px solid rgba(77,163,255,.35);

    box-shadow:
    0 10px 30px rgba(77,163,255,.12);

}

.detail-contact-card{

    padding:30px;

    border-radius:24px;

    border:1px solid rgba(77,163,255,.25);

    background:
    radial-gradient(
    circle at top right,
    rgba(77,163,255,.20),
    transparent 55%
    ),
    rgba(17,29,48,.75);

}

.detail-contact-card span{

    display:block;

    margin-bottom:15px;

    color:#4da3ff;

    font-size:13px;

    font-weight:600;

}


.detail-contact-card h3{

    margin-bottom:15px;

    color:#fff;

    font-size:24px;

}

.detail-contact-card p{

    margin-bottom:25px;

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

    line-height:1.7;

    font-size:14px;

}


.detail-whatsapp-btn,
.detail-phone-btn{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:10px;

    width:100%;

    padding:15px;

    border-radius:14px;

    font-weight:600;

    transition:.3s;

}

.detail-whatsapp-btn{
    margin-bottom:12px;
    background:#0b7a38 !important;
    color:#ffffff !important;
}

.detail-whatsapp-btn:hover{

    transform:translateY(-3px);
    background:#08652f !important;
    color:#ffffff !important;
    box-shadow:
        0 12px 30px rgba(11,122,56,.30);

}


.detail-phone-btn{

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

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

    color:#fff;

}

.detail-phone-btn:hover{

    color:#4da3ff;

    border-color:#4da3ff;

}

/*==================================================
MOBİLE
==================================================*/

@media(max-width:1100px){


    .training-detail-layout{

        grid-template-columns:1fr;

    }



    .training-detail-sidebar{

        position:relative;

        top:auto;

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

    }


}

@media(max-width:768px){


    .training-detail-page{

        padding:50px 0 80px;

    }

    .training-detail-header{

        text-align:center;

    }

    .training-detail-header span{

        font-size:12px;

    }


    .training-detail-header h1{

        font-size:34px;

    }

    .training-detail-header p{

        font-size:15px;

        line-height:1.7;

    }


    .training-detail-layout{

        gap:25px;

    }

    .detail-card{

        padding:25px 20px;

        border-radius:20px;

    }

    .detail-card h2{

        font-size:23px;

    }


    .training-detail-sidebar{

        display:grid;

        grid-template-columns:1fr;

        gap:20px;

    }

    .detail-menu-card,
    .detail-contact-card{

        padding:22px;

    }

}

@media(max-width:480px){



    .training-detail-header h1{

        font-size:28px;

    }

    .detail-card h2{

        font-size:21px;

    }


    .detail-education-menu li a{

        padding:12px;

        font-size:13px;

    }


    .program-item{

        flex-direction:column;

        align-items:flex-start;

        gap:10px;

    }


}

.pm-title { color:#4da3ff; }
.training-page-header p a { color:#79aaff; text-decoration:underline; text-underline-offset:3px; }
.training-cta { max-width:520px; margin:70px auto 0; }

@media (hover:none) {
    .training-page-card:hover,.training-page-card.featured:hover,.detail-card:hover { transform:none; }
    .training-page-card:hover .training-page-image img { transform:none; filter:none; }
    .training-page-card:hover .training-page-badge { transform:none; }
    .training-page-card:hover .training-page-content h3 { padding-left:0; }
    .training-page-card:hover .training-page-content h3::before { height:0; }
    .training-page-card.featured:hover .training-page-popular { transform:none; }
    .training-page-btn:hover { transform:none; }
}

.training-page{
    padding:30px 0 90px;
}
.training-page .training-page-header{
    margin-bottom:50px;
}
.training-page .training-category{
    margin-top:56px;
}
.training-page .renewal-category{
    margin-top:70px;
}
.training-page .training-category-title{
    margin-bottom:30px;
}
.training-page .training-category-title h3{
    font-size:28px;
}
.training-page .training-category-title span{
    display:none;
}

.training-page .training-page-grid,
.training-page .training-page-grid.two-card{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px;
    max-width:1200px;
    margin:0 auto;
}
.training-page .training-center-card{
    grid-column:auto;
    width:auto;
    justify-self:stretch;
}

.training-page .training-page-card{
    padding:0;
    border-radius:20px;
    background:linear-gradient(160deg,rgba(255,255,255,.085),rgba(255,255,255,.03) 55%,rgba(255,255,255,.02));
    border:1px solid rgba(255,255,255,.1);
    box-shadow:0 18px 45px rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.05);
}
.training-page .training-page-card::before{
    height:3px;
    left:8%;
    width:84%;
    border-radius:0 0 10px 10px;
    background:linear-gradient(90deg,transparent,#3ba8ff,transparent);
}
.training-page .training-page-card.featured::before{
    background:linear-gradient(90deg,transparent,#d4af37 20%,#f5d76e 50%,#d4af37 80%,transparent);
}
.training-page .training-page-card.featured::after{
    display:none;
}
.training-page .training-page-card:hover,
.training-page .training-page-card.featured:hover{
    transform:translateY(-6px);
}

.training-page .training-page-image{
    height:auto;
    aspect-ratio:16/10;
    border-radius:20px 20px 0 0;
    background:radial-gradient(circle at 50% 45%,#16233d 0%,#0d1325 75%);
}
.training-page .training-page-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
}

.training-page .training-page-badge{
    left:12px;
    top:12px;
    bottom:auto;
    padding:6px 11px;
    font-size:10px;
    letter-spacing:.9px;
}
.training-page .training-page-popular{
    top:12px;
    right:12px;
    padding:6px 10px 6px 7px;
    gap:6px;
    border-radius:10px;
    font-size:9px;
}
.training-page .training-page-popular::before{
    width:18px;
    height:18px;
    border-radius:6px;
    font-size:9px;
}
.training-page .training-page-new{
    position:absolute;
    top:12px;
    right:12px;
    z-index:5;
    display:inline-flex;
    align-items:center;
    padding:6px 11px;
    border-radius:10px;
    background:rgba(8,17,31,.82);
    border:1px solid rgba(105,240,160,.5);
    color:#69f0a0;
    font-size:9px;
    font-weight:800;
    letter-spacing:1px;
    line-height:1;
    box-shadow:0 8px 24px rgba(0,0,0,.28),0 0 16px rgba(73,209,125,.1);
}

.training-page .training-page-status{
    min-height:38px;
    padding:8px 14px;
    font-size:.74rem;
    letter-spacing:.5px;
}
.training-page .status-icon{
    width:19px;
    height:19px;
    flex:0 0 19px;
}
.training-page .status-icon i{
    font-size:.68rem;
}

.training-page .training-page-card .training-page-content{
    padding:22px 22px 22px;
}
.training-page .training-page-content h3{
    font-size:20px;
    line-height:1.3;
    margin-bottom:10px;
}
.training-page .training-page-card:hover .training-page-content h3{
    padding-left:0;
}
.training-page .training-page-content h3::before{
    display:none;
}
.training-page .training-page-content p{
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
    font-size:13.5px;
    line-height:1.7;
    margin-bottom:16px;
    color:#9aa9bd;
}
.training-page .training-page-list{
    flex:1;
    margin:0 0 16px;
    padding-top:14px;
    border-top:1px solid rgba(255,255,255,.08);
}
.training-page .training-page-list li{
    font-size:13.5px;
    gap:10px;
    margin-bottom:9px;
}
.training-page .training-page-list li:last-child{
    margin-bottom:0;
}
.training-page .training-page-list li i{
    width:19px;
    height:19px;
    flex:0 0 19px;
    font-size:9.5px;
}

.training-page .training-page-card .training-page-btn{
    height:48px;
    min-height:48px;
    margin-top:auto;
    padding:0 7px 0 8px;
    gap:6px;
    border-radius:14px;
}
.training-page .training-page-card .training-btn-icon,
.training-page .training-page-card .training-btn-arrow{
    display:flex;
    width:34px;
    height:34px;
    border-radius:10px;
    font-size:13px;
}
.training-page .training-page-card .training-btn-text{
    font-size:13px;
    white-space:nowrap;
}

@media(min-width:701px) and (max-width:999px){

    .training-page .training-page-grid,
    .training-page .training-page-grid.two-card{
        grid-template-columns:repeat(2,minmax(0,1fr));
        max-width:820px;
    }
    .training-page .training-page-grid > .training-page-card:last-child:nth-child(odd){
        grid-column:1 / -1;
        width:calc(50% - 12px);
        justify-self:center;
    }
}

@media(max-width:700px){

    .training-page{
        padding:20px 0 60px;
    }
    .training-page > .container{
        width:100%;
        max-width:none;
        padding:0;
    }
    .training-page .training-page-header,
    .training-page .training-category-title{
        padding:0 20px;
    }
    .training-page .training-page-header{
        margin-bottom:34px;
    }
    .training-page .training-category,
    .training-page .renewal-category{
        margin-top:44px;
    }
    .training-page .training-category-title{
        margin-bottom:18px;
    }
    .training-page .training-category-title h3{
        font-size:24px;
    }

    .training-page .training-category-title span{
        display:block;
        margin-top:12px;
        color:#8fa0b8;
        font-size:12px;
        letter-spacing:.4px;
    }
    .training-page .training-category-title span::before{
        content:"← Kaydırarak inceleyin →";
    }

    .training-page .training-page-grid,
    .training-page .training-page-grid.two-card{
        display:flex;
        grid-template-columns:none;
        max-width:none;
        gap:14px;
        padding:8px 20px 18px;
        overflow-x:auto;
        overflow-y:hidden;
        scroll-snap-type:x mandatory;
        scroll-padding-left:20px;
        -webkit-overflow-scrolling:touch;
        overscroll-behavior-x:contain;
        scrollbar-width:none;
    }
    .training-page .training-page-grid::-webkit-scrollbar{
        display:none;
    }
    .training-page .training-page-grid::after{
        content:"";
        flex:0 0 6px;
    }

    .training-page .training-page-grid > .training-page-card,
    .training-page .training-page-grid > .training-page-card:last-child:nth-child(odd){
        flex:0 0 80vw;
        width:auto;
        max-width:320px;
        grid-column:auto;
        scroll-snap-align:start;
        height:auto;
        border-radius:18px;
    }
    .training-page .training-page-image{
        border-radius:18px 18px 0 0;
    }

    /* Eski mobil !important kurallarını ezmek için !important */
    .training-page .training-page-card .training-page-content{
        padding:18px 16px 16px !important;
    }
    .training-page .training-page-content h3{
        font-size:18px;
    }
    .training-page .training-page-content p{
        font-size:13px;
    }
    .training-page .training-page-list li{
        font-size:13px;
    }
    .training-page .training-page-card .training-page-btn{
        width:100% !important;
        height:46px !important;
        min-height:46px !important;
        padding:0 6px !important;
        gap:6px !important;
        display:flex !important;
        margin-top:auto;
    }
    .training-page .training-page-card .training-btn-icon,
    .training-page .training-page-card .training-btn-arrow{
        display:flex !important;
        width:32px;
        height:32px;
    }
    .training-page .training-page-card .training-btn-text{
        font-size:12.5px !important;
        padding:0 !important;
    }
}

@media(hover:none){
    .training-page .training-page-card:hover,
    .training-page .training-page-card.featured:hover{
        transform:none;
    }
}