/* ==========================================================================
   GLOBAL CYBRANI HOME
   ========================================================================== */

.cyber-home {

    position:relative;

    overflow:hidden;

    background:radial-gradient(
            circle at 50% 0%,
            rgba(var(--t-cyan-rgb),.08),
            transparent 32%
        ),
        radial-gradient(
            circle at 0% 70%,
            rgba(59, 130, 246, .06),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            var(--t-soft) 0%,
            var(--t-bg) 72%,
            var(--t-bg) 100%
        );

    color:var(--t-text2);
}

/* ==========================================================================
   LANGUAGE FONTS
   ========================================================================== */

html[lang="en"],
html[lang="en"] body,
html[lang="en"] .cyber-home {

    font-family:ui-monospace,
        SFMono-Regular,
        Menlo,
        Monaco,
        Consolas,
        "Liberation Mono",
        "Courier New",
        monospace;
}

html[lang="ar"],
html[lang="ar"] body,
html[lang="ar"] .cyber-home {

    font-family:Arial,
        Helvetica,
        sans-serif;
}

/* ==========================================================================
   GRID BACKGROUND
   ========================================================================== */

.cyber-home::before {

    content:"";

    position:absolute;

    inset:0;

    z-index:0;

    pointer-events:none;

    opacity:.38;

    background-image:linear-gradient(
            rgba(var(--t-line-rgb),.32) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(var(--t-line-rgb),.32) 1px,
            transparent 1px
        );

    background-size:45px 45px;

    animation:cyberGridMove
        22s
        linear
        infinite;
}

@keyframes cyberGridMove {

    from {

        background-position:0 0;
    }

    to {

        background-position:45px 45px;
    }
}

/* ==========================================================================
   HERO
   ========================================================================== */

.cyber-hero {

    position:relative;

    z-index:2;

    min-height:78vh;

    display:flex;

    align-items:center;

    justify-content:center;

    padding:100px 20px
        90px;

    text-align:center;
}

.cyber-hero::after {

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    left:50%;

    top:45%;

    transform:translate(
            -50%,
            -50%
        );

    border-radius:50%;

    z-index:-1;

    background:radial-gradient(
            circle,
            rgba(var(--t-cyan-rgb),.065),
            transparent 68%
        );

    animation:heroGlow
        6s
        ease-in-out
        infinite;
}

@keyframes heroGlow {

    0%,
    100% {

        transform:translate(-50%, -50%)
            scale(1);

        opacity:.75;
    }

    50% {

        transform:translate(-50%, -50%)
            scale(1.12);

        opacity:1;
    }
}

/* ==========================================================================
   HERO WRAP
   ========================================================================== */

.cyber-hero-inner {

    width:100%;

    max-width:980px;

    margin:0 auto;

    animation:fadeUp
        .85s
        ease
        both;
}

/* ==========================================================================
   HERO BADGE
   ========================================================================== */

.cyber-badge {

    display:inline-flex;

    align-items:center;

    gap:10px;

    margin-bottom:26px;

    padding:8px 14px;

    border:1px solid
        rgba(var(--t-cyan-rgb),.22);

    border-radius:999px;

    background:rgba(var(--t-cyan-rgb),.045);

    color:var(--t-cyan);

    font-size:11px;

    font-weight:800;

    letter-spacing:2px;

    text-transform:uppercase;
}

.cyber-badge-dot {

    width:8px;

    height:8px;

    border-radius:50%;

    background:var(--t-cyan);

    box-shadow:0 0 15px
        rgba(var(--t-cyan-rgb),.85);

    animation:badgePulse
        2s
        ease-in-out
        infinite;
}

@keyframes badgePulse {

    0%,
    100% {

        transform:scale(.9);
    }

    50% {

        transform:scale(1.25);
    }
}

/* ==========================================================================
   HERO TITLE
   ========================================================================== */

.cyber-hero h1 {

    max-width:950px;

    margin:0 auto;

    color:var(--t-heading);

    font-size:clamp(
            42px,
            7vw,
            78px
        );

    font-weight:900;

    line-height:1.05;

    letter-spacing:-2px;

    text-shadow:0 0 25px
        rgba(var(--t-cyan-rgb),.08);
}

html[dir="rtl"]
.cyber-hero h1 {

    letter-spacing:0;
}

/* ==========================================================================
   HERO DESCRIPTION
   ========================================================================== */

.cyber-hero p {

    max-width:760px;

    margin:28px auto 0;

    color:var(--t-muted);

    font-size:17px;

    line-height:1.9;
}

/* ==========================================================================
   HERO ACTIONS
   ========================================================================== */

.hero-actions {

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:14px;

    margin-top:38px;
}

.cyber-primary-btn {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    min-height:56px;

    padding:0 28px;

    border:0;

    border-radius:10px;

    background:linear-gradient(
            135deg,
            var(--t-cyan),
            var(--t-sky)
        );

    color:var(--t-on-accent);

    text-decoration:none;

    font-weight:900;

    font-size:14px;

    box-shadow:0 12px 35px
        rgba(var(--t-cyan-rgb),.15);

    transition:all .25s ease;
}

.cyber-primary-btn:hover {

    transform:translateY(-3px);

    box-shadow:0 18px 40px
        rgba(var(--t-cyan-rgb),.25);
}

/* ==========================================================================
   TERMINAL LINE
   ========================================================================== */

.cyber-terminal {

    max-width:700px;

    margin:35px auto 0;

    padding:13px 18px;

    border:1px solid
        var(--t-line);

    border-radius:8px;

    background:rgba(var(--t-bg-rgb),.7);

    color:var(--t-muted2);

    text-align:left;

    font-size:12px;

    direction:ltr;

    overflow:hidden;
}

.cyber-terminal span {

    color:var(--t-cyan);
}

/* ==========================================================================
   COURSES SECTION
   ========================================================================== */

.cyber-courses {

    position:relative;

    z-index:2;

    padding:95px 20px
        110px;

    border-top:1px solid
        rgba(var(--t-line-rgb),.65);
}

.cyber-section-wrap {

    width:100%;

    max-width:1240px;

    margin:0 auto;
}

/* ==========================================================================
   SECTION HEADER
   ========================================================================== */

.section-heading {

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:25px;

    margin-bottom:38px;
}

.section-heading h2 {

    margin:0;

    color:var(--t-heading);

    font-size:clamp(
            28px,
            4vw,
            40px
        );

    font-weight:900;
}

.section-heading p {

    margin-top:8px;

    color:var(--t-muted2);

    font-size:13px;
}

/* ==========================================================================
   COURSE GRID
   ========================================================================== */

.cyber-course-grid {

    display:grid;

    grid-template-columns:repeat(
            3,
            minmax(
                0,
                1fr
            )
        );

    gap:22px;
}

/* ==========================================================================
   COURSE CARD
   ========================================================================== */

.cyber-course-card {

    position:relative;

    overflow:hidden;

    border:1px solid
        rgba(var(--t-line2-rgb),.65);

    border-radius:16px;

    background:linear-gradient(
            145deg,
            rgba(var(--t-soft-rgb),.96),
            rgba(var(--t-bg-rgb),.98)
        );

    box-shadow:0 20px 50px
        rgba(var(--t-shadow-rgb),.20);

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

    animation:fadeUp
        .7s
        ease
        both;
}

.cyber-course-card:hover {

    transform:translateY(-7px);

    border-color:rgba(var(--t-cyan-rgb),.35);

    box-shadow:0 28px 60px
        rgba(var(--t-shadow-rgb),.34),
        0 0 35px
        rgba(var(--t-cyan-rgb),.045);
}

.cyber-course-card::before {

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:2px;

    background:linear-gradient(
            90deg,
            transparent,
            var(--t-cyan),
            transparent
        );

    opacity:0;

    transition:opacity .28s ease;
}

.cyber-course-card:hover::before {

    opacity:1;
}

/* ==========================================================================
   IMAGE
   ========================================================================== */

.course-image-wrap {

    position:relative;

    aspect-ratio:16 / 9;

    overflow:hidden;

    background:var(--t-bg);
}

.course-image-wrap img {

    width:100%;

    height:100%;

    display:block;

    object-fit:cover;

    transition:transform .45s ease,
        filter .45s ease;
}

.cyber-course-card:hover
.course-image-wrap img {

    transform:scale(1.045);

    filter:brightness(.9);
}

.course-image-overlay {

    position:absolute;

    inset:0;

    background:linear-gradient(
            to top,
            rgba(var(--t-bg-rgb),.55),
            transparent 50%
        );

    pointer-events:none;
}

.course-discount-badge {

    position:absolute;

    top:14px;

    inset-inline-start:14px;

    z-index:2;

    padding:7px 11px;

    border:1px solid rgba(var(--t-green-rgb),.35);

    border-radius:999px;

    background:rgba(var(--t-green-rgb),.16);

    color:var(--t-green3);

    font-size:12px;

    font-weight:900;

    box-shadow:0 8px 22px rgba(var(--t-shadow-rgb),.28);
}

/* ==========================================================================
   CARD BODY
   ========================================================================== */

.course-card-body {

    padding:22px;
}

.course-category {

    display:inline-flex;

    margin-bottom:14px;

    color:var(--t-cyan);

    font-size:10px;

    font-weight:900;

    letter-spacing:1.4px;

    text-transform:uppercase;
}

.course-title {

    min-height:52px;

    margin:0;

    color:var(--t-heading);

    font-size:19px;

    font-weight:800;

    line-height:1.45;
}

.course-instructor {

    display:flex;

    align-items:center;

    gap:8px;

    margin-top:13px;

    color:var(--t-muted2);

    font-size:12px;
}

.course-instructor-dot {

    width:6px;

    height:6px;

    border-radius:50%;

    background:var(--t-cyan);

    box-shadow:0 0 8px
        rgba(var(--t-cyan-rgb),.5);
}

/* ==========================================================================
   CARD FOOTER
   ========================================================================== */

.course-card-footer {

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:15px;

    margin-top:22px;

    padding-top:18px;

    border-top:1px solid
        var(--t-line);
}

.course-price {

    color:var(--t-heading);

    font-size:19px;

    font-weight:900;
}

.course-price.free {

    color:var(--t-green);
}

.course-price-details {

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:4px;
}

.course-price-label {

    color:var(--t-muted);

    font-size:10px;

    font-weight:700;
}

.course-price-row {

    display:flex;

    align-items:baseline;

    flex-wrap:wrap;

    gap:8px;
}

.course-old-price {

    color:var(--t-muted);

    font-size:12px;

    font-weight:700;

    text-decoration:line-through;
}

.course-saving {

    color:var(--t-green);

    font-size:11px;

    font-weight:800;
}

.course-view-btn {

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:10px 15px;

    border:1px solid
        rgba(var(--t-cyan-rgb),.25);

    border-radius:8px;

    background:rgba(var(--t-cyan-rgb),.04);

    color:var(--t-cyan);

    text-decoration:none;

    font-size:11px;

    font-weight:800;

    transition:all .2s ease;
}

.course-view-btn:hover {

    background:var(--t-cyan);

    color:var(--t-on-accent);

    transform:translateY(-1px);
}

/* ==========================================================================
   EMPTY COURSES
   ========================================================================== */

.empty-courses {

    grid-column:1 / -1;

    padding:50px;

    border:1px dashed
        var(--t-line2);

    border-radius:15px;

    text-align:center;

    color:var(--t-muted2);
}

/* ==========================================================================
   ANIMATION
   ========================================================================== */

@keyframes fadeUp {

    from {

        opacity:0;

        transform:translateY(
                18px
            );
    }

    to {

        opacity:1;

        transform:translateY(
                0
            );
    }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {

    .cyber-course-grid {

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

@media (max-width: 700px) {

    .cyber-hero {

        min-height:auto;

        padding:80px 18px
            70px;
    }

    .cyber-hero h1 {

        font-size:42px;

        line-height:1.15;
    }

    .cyber-hero p {

        font-size:15px;
    }

    .cyber-terminal {

        font-size:10px;
    }

    .section-heading {

        align-items:flex-start;

        flex-direction:column;
    }

    .cyber-course-grid {

        grid-template-columns:1fr;
    }

    .course-title {

        min-height:auto;
    }
}