/* ==================================================
ARTICLE DETAIL ULTIMATE 2026
DM HEALTH TECHNOLOGY
================================================== */

:root{

    --primary:#0d6efd;
    --secondary:#00c6ff;
    --accent:#00e5ff;

    --dark:#0f172a;
    --text:#334155;
    --muted:#64748b;

    --white:#ffffff;

    --glass-bg:rgba(255,255,255,.72);
    --glass-border:rgba(255,255,255,.45);

    --shadow-soft:
        0 10px 35px rgba(15,23,42,.08);

    --shadow-hover:
        0 25px 60px rgba(15,23,42,.15);

    --shadow-glow:
        0 0 40px rgba(13,110,253,.15);

    --radius:28px;
}

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

body{

    background:

        radial-gradient(
            circle at top left,
            rgba(0,198,255,.08),
            transparent 40%
        ),

        radial-gradient(
            circle at bottom right,
            rgba(13,110,253,.08),
            transparent 40%
        ),

        #f8fafc;
}

/* ==================================================
READING PROGRESS
================================================== */

.reading-progress{

    position:fixed;
    top:0;
    left:0;

    width:0;
    height:5px;

    z-index:9999;

    background:
        linear-gradient(
            90deg,
            #00e5ff,
            #0d6efd,
            #7c3aed
        );

    box-shadow:
        0 0 20px rgba(13,110,253,.7);

    transition:width .15s linear;
}

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

.article-hero{

    position:relative;

    padding:120px 0 70px;

    overflow:hidden;
}

.article-hero::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    top:-200px;
    left:-150px;

    border-radius:50%;

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

    animation:
        floatHero 8s ease-in-out infinite;
}

.article-hero::after{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

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

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(13,110,253,.12),
            transparent 70%
        );

    animation:
        floatHero 10s ease-in-out infinite;
}

@keyframes floatHero{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(30px);
    }

    100%{
        transform:translateY(0);
    }
}

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

.hero-particles{

    position:absolute;
    inset:0;

    pointer-events:none;

    overflow:hidden;
}

.hero-particles span{

    position:absolute;

    border-radius:50%;

    background:
        rgba(13,110,253,.12);

    backdrop-filter:blur(12px);

    animation:
        floatParticle 12s linear infinite;
}

.hero-particles span:nth-child(1){

    width:60px;
    height:60px;

    left:10%;
    top:20%;
}

.hero-particles span:nth-child(2){

    width:30px;
    height:30px;

    left:30%;
    top:60%;
}

.hero-particles span:nth-child(3){

    width:90px;
    height:90px;

    right:15%;
    top:25%;
}

.hero-particles span:nth-child(4){

    width:45px;
    height:45px;

    right:25%;
    bottom:15%;
}

.hero-particles span:nth-child(5){

    width:70px;
    height:70px;

    left:50%;
    top:10%;
}

@keyframes floatParticle{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-25px);
    }

    100%{
        transform:translateY(0);
    }
}

/* ==================================================
ARTICLE HEADER
================================================== */

.article-header{

    position:relative;

    z-index:10;

    background:var(--glass-bg);

    backdrop-filter:blur(18px);

    border:1px solid var(--glass-border);

    border-radius:35px;

    padding:50px;

    box-shadow:
        var(--shadow-soft),
        var(--shadow-glow);
}

/* ==================================================
BACK BUTTON
================================================== */

.back-link{

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

    text-decoration:none;

    color:var(--primary);

    font-weight:700;

    transition:.35s ease;
}

.back-link:hover{

    transform:translateX(-6px);

    color:#004ecb;
}

/* ==================================================
CATEGORY
================================================== */

.article-category{

    display:inline-flex;

    padding:10px 20px;

    margin:25px 0;

    border-radius:999px;

    font-weight:700;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #0d6efd,
            #00c6ff
        );

    box-shadow:
        0 10px 30px rgba(13,110,253,.25);
}

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

.article-header h1{

    font-size:clamp(2rem,5vw,4rem);

    font-weight:900;

    line-height:1.15;

    color:var(--dark);

    margin-bottom:25px;
}

/* ==================================================
META
================================================== */

.article-meta{

    display:flex;
    flex-wrap:wrap;
    gap:15px;
}

.article-meta span{

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

    background:#fff;

    border-radius:999px;

    padding:10px 18px;

    font-weight:600;

    color:var(--muted);

    box-shadow:
        0 8px 25px rgba(0,0,0,.05);

    transition:.3s ease;
}

.article-meta span:hover{

    transform:translateY(-4px);
}

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

.cover-card{

    overflow:hidden;

    border-radius:35px;

    box-shadow:var(--shadow-hover);
}

.cover-card img{

    width:100%;

    transition:
        transform .9s ease,
        filter .9s ease;

    display:block;
}

.cover-card:hover img{

    transform:scale(1.06);

    filter:brightness(1.05);
}

/* ==================================================
CONTENT
================================================== */

.content-card{

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

    backdrop-filter:blur(18px);

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

    border-radius:35px;

    padding:50px;

    box-shadow:
        var(--shadow-soft);
}

.content-body{

    color:var(--text);

    font-size:1.08rem;

    line-height:2;
}

.content-body p{

    margin-bottom:25px;

    animation:
        fadeContent .7s ease forwards;
}

@keyframes fadeContent{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:none;
    }
}

.content-body h2,
.content-body h3{

    margin-top:50px;
    margin-bottom:20px;

    font-weight:800;

    color:var(--dark);
}

.content-body img{

    max-width:100%;

    border-radius:20px;

    margin:30px 0;

    box-shadow:
        0 15px 35px rgba(0,0,0,.08);
}

/* ==================================================
VIDEO
================================================== */

.video-section{

    margin-top:40px;
}

.video-card{

    overflow:hidden;

    border-radius:28px;

    box-shadow:var(--shadow-hover);
}

.video-card iframe{

    border:none;

    width:100%;
    display:block;
}

/* ==================================================
SECTION TITLE
================================================== */

.section-title{

    display:flex;
    align-items:center;
    gap:12px;

    margin-bottom:20px;

    font-size:1.3rem;

    font-weight:800;

    color:var(--dark);
}

/* ==================================================
PDF
================================================== */

.pdf-box{

    margin-top:35px;
}

.pdf-box a{

    display:flex;

    align-items:center;
    justify-content:center;
    gap:15px;

    text-decoration:none;

    padding:20px;

    border-radius:22px;

    font-weight:800;

    color:#fff;

    background:
        linear-gradient(
            135deg,
            #dc2626,
            #ef4444
        );

    transition:.4s ease;
}

.pdf-box a:hover{

    transform:translateY(-6px);

    box-shadow:
        0 20px 40px rgba(220,38,38,.35);
}

/* ==================================================
SIDEBAR
================================================== */

.article-sidebar{

    position:sticky;

    top:110px;

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

    backdrop-filter:
        blur(20px);

    border-radius:30px;

    padding:30px;

    box-shadow:
        var(--shadow-soft);
}

.article-sidebar h4{

    font-weight:800;

    margin-bottom:25px;
}

.similar-item{

    margin-bottom:15px;
}

.similar-item a{

    display:flex;
    align-items:center;
    gap:10px;

    text-decoration:none;

    padding:16px;

    border-radius:18px;

    color:var(--dark);

    transition:.35s ease;
}

.similar-item a:hover{

    background:#fff;

    transform:translateX(8px);

    box-shadow:
        0 10px 25px rgba(0,0,0,.06);
}

.empty-similar{

    text-align:center;

    color:var(--muted);

    padding:25px;
}

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

@media (max-width:991px){

    .article-header{
        padding:35px;
    }

    .content-card{
        padding:35px;
    }

    .article-sidebar{
        position:relative;
        top:auto;
    }
}

@media (max-width:768px){

    .article-header h1{
        font-size:2rem;
    }

    .content-card{
        padding:25px;
    }

    .article-meta{
        flex-direction:column;
    }
}