:root {

    --text:#111;

    --bg-card:rgba(255,255,255,.78);

    --nav-bg:rgba(255,255,255,.72);

    --border:rgba(255,255,255,.25);

    --shadow:0 15px 40px rgba(0,0,0,.18);

}



body.dark {

    --text:#eee;

    --bg-card:rgba(20,20,20,.78);

    --nav-bg:rgba(20,20,20,.75);

    --border:rgba(255,255,255,.12);

}





* {

    box-sizing:border-box;

}





html,
body {

    margin:0;

    padding:0;

    font-family:

        Inter,

        system-ui,

        sans-serif;

}





body {

    color:var(--text);

}





/*
 BACKGROUND
*/


.video-background {

    position:fixed;

    inset:0;

    z-index:-2;

}



.video-background video {

    width:100%;

    height:100%;

    object-fit:cover;

}





.site-wrapper {

    min-height:100vh;

    background:

        rgba(0,0,0,.18);

}


.article-video-placeholder,
.article-placeholder {

    width:100%;
    aspect-ratio:16/9;

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

    background:#111;
    color:white;

    font-size:2rem;

}


/*
 HEADER
*/


.site-header {

    position:fixed;

    top:0;

    left:0;

    width:100%;

    z-index:1000;

}



.nav-container {

    height:56px;

    padding:0 35px;

    display:flex;

    align-items:center;

    background:var(--nav-bg);

    backdrop-filter:blur(14px);

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

}





.logo-container {

    display:flex;

    align-items:center;

}



.logo {

    width:220px;

    height:auto;

    display:block;

}


.main-nav {

    display:flex;

    gap:25px;

    margin-left:45px;

}



.main-nav a {

    color:var(--text);

    text-decoration:none;

    font-size:14px;

    font-weight:600;

}



.main-nav a:hover {

    opacity:.55;

}





.header-actions {

    margin-left:auto;

    display:flex;

    align-items:center;

    gap:15px;

}





.language-switcher {

    display:flex;

    gap:7px;

    align-items:center;

}



.language-switcher a {

    color:var(--text);

    text-decoration:none;

    opacity:.55;

}



.language-switcher a:hover {

    opacity:1;

}





.theme-toggle {

    border:0;

    background:none;

    cursor:pointer;

    color:var(--text);

    font-size:18px;

}





/*
 MAIN PORTAL GRID
*/


.portal-layout {


    max-width:1250px;

    margin:0 auto;

    padding:

        95px 25px 40px;


    display:grid;

    grid-template-columns:

        minmax(0,1fr)

        330px;


    gap:30px;

}





.portal-main {

    min-width:0;

}





.content-box {


    background:var(--bg-card);

    backdrop-filter:blur(14px);

    border-radius:18px;

    padding:35px;

    box-shadow:var(--shadow);

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

}





.content-box h1 {

    margin-top:0;

    margin-bottom:30px;

}





/*
 NEWS GRID
*/


.news-grid {


    display:grid;


    grid-template-columns:


        repeat(

            auto-fit,

            minmax(260px,1fr)

        );


    gap:25px;


}





.article-card {


    background:

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


    border-radius:16px;


    padding:15px;


    transition:.25s;


}



body.dark .article-card {

    background:

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

}



.article-card:hover {

    transform:translateY(-4px);

}





.article-card img {


    width:100%;


    height:220px;


    object-fit:cover;


    border-radius:12px;


}





.article-card h2 {

    font-size:1.15rem;

    line-height:1.35;

}





.article-card h2 a {

    color:var(--text);

    text-decoration:none;

}





.article-card p {

    line-height:1.6;

    opacity:.9;

}





.article-meta {


    margin-top:12px;

    font-size:.85rem;

    opacity:.7;


}





.article-info {


    display:flex;

    flex-wrap:wrap;


    gap:12px;


    margin-top:15px;


    font-size:.82rem;


    opacity:.75;


}





/*
 ARTICLE
*/


.article-page {

    max-width:none;

}





.article-header-info {

    margin-bottom:25px;

}





.article-hero-image {


    display:block;


    width:100%;


    max-width:900px;


    margin:25px auto;


    border-radius:16px;


}

.video-container {
    width:100%;
    max-width:900px;
    margin:20px auto;
}

.video-container video {
    width:100%;
    height:auto;
    max-height:600px;
    display:block;
    object-fit:contain;
}



.article-body {


    max-width:900px;


    margin:auto;


    font-size:1.1rem;


    line-height:1.8;


}





.article-body p {


    margin-bottom:20px;


}





/*
 VIDEO
*/


.video-container {


    width:100%;


    max-width:900px;


    aspect-ratio:16/9;


    margin:35px auto;


}





.video-container iframe {


    width:100%;


    height:100%;


    border:0;


    border-radius:16px;


}





/*
 GALLERY
*/


.article-gallery {


    margin-top:40px;


    display:grid;


    grid-template-columns:


        repeat(auto-fit,minmax(220px,1fr));


    gap:20px;


}





.article-gallery img {


    width:100%;


    height:220px;


    object-fit:cover;


    border-radius:14px;


}





/*
 SIDEBAR
*/


.sidebar {


    min-width:0;


}





.sidebar-box h3 {


    margin-top:0;


}





.latest-list {


    display:flex;


    flex-direction:column;


    gap:18px;


}





.latest-item {


    padding-bottom:15px;


    border-bottom:

        1px solid var(--border);


}





.latest-item a {


    color:var(--text);


    text-decoration:none;


    font-weight:600;


    line-height:1.4;


}





.latest-meta {


    display:flex;


    flex-wrap:wrap;


    gap:8px;


    margin-top:8px;


    font-size:.75rem;


    opacity:.65;


}





/*
 FOOTER
*/


.site-footer {


    text-align:center;


    padding:30px;


    color:var(--text);


}

/*
 MOBILE
*/

.mobile-menu {

    display:none;

}



@media(max-width:900px){


.portal-layout {

    display:block;

    padding:
        85px 15px 30px;

}



.sidebar {

    margin-top:30px;

}



.main-nav {

    display:none;

    position:absolute;

    top:56px;

    left:0;

    width:100%;

    flex-direction:column;

    gap:15px;

    padding:20px;

    background:var(--nav-bg);

    backdrop-filter:blur(14px);

}



.main-nav.active {

    display:flex;

}



.mobile-menu {

    display:block;

}



.content-box {

    padding:22px;

}


}


@media(max-width:600px){


.article-card img {


    height:180px;


}



.article-body {


    font-size:1rem;


}



.nav-container {


    padding:0 15px;


}


}

.author-card {

    display:flex;
    gap:20px;
    align-items:center;
    margin-bottom:30px;

}


.author-avatar {

    width:96px;
    height:96px;
    border-radius:50%;
    object-fit:cover;

}


.author-info h1 {

    margin:0;

}


.author-username {

    opacity:.7;

}


.author-stats {

    display:flex;
    gap:20px;
    margin-top:15px;

}

.article-info a,
.latest-meta a {

    color:inherit;
    text-decoration:none;

}


.article-info a:hover,
.latest-meta a:hover {

    text-decoration:underline;

}

.author-profile {

    background:var(--bg-card);

    backdrop-filter:blur(14px);

    border-radius:18px;

    padding:30px;

    box-shadow:var(--shadow);

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

    margin-bottom:30px;

}


.article-item {

    padding:18px 0;

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

}


.article-item h3 {

    margin:0 0 10px;

}


.article-item a {

    color:var(--text);

    text-decoration:none;

}


.pagination {

    display:flex;

    gap:10px;

    margin-top:30px;

}


.pagination a {

    padding:8px 12px;

    border-radius:8px;

    background:var(--bg-card);

    color:var(--text);

    text-decoration:none;

}

.btn-primary {

    display:inline-block;

    padding:10px 18px;

    border-radius:8px;

    background:#111827;

    color:#fff;

    text-decoration:none;

    transition:0.2s ease;

}


.btn-primary:hover {

    opacity:0.85;

}