/* ===================================================
   SER MAGAZINE v6.0
   MAIN STYLE
=================================================== */


:root{

    --bg:#050914;
    --bg2:#0b1324;

    --card:#121d31;
    --card2:#18263d;

    --text:#ffffff;
    --muted:#8ca2c2;

    --accent:#00cfff;
    --accent2:#00ffb7;

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

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

    --radius:22px;

}



*{

    margin:0;
    padding:0;
    box-sizing:border-box;

}



html{

    scroll-behavior:smooth;

}



body{

    background:

    radial-gradient(
    circle at top,
    #15284d,
    #050914 60%
    );


    color:white;

    font-family:
    Inter,
    Arial,
    sans-serif;

    line-height:1.6;

    overflow-x:hidden;

}



a{

    color:inherit;

    text-decoration:none;

}



img{

    max-width:100%;

    display:block;

}



.container{

    width:min(1450px,95%);

    margin:auto;

}



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


.top_header{


position:sticky;

top:0;

z-index:999;


display:flex;

justify-content:space-between;

align-items:center;


padding:18px 40px;


background:
rgba(5,9,20,.92);


backdrop-filter:
blur(15px);


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


}



.header_left{


display:flex;

align-items:center;

gap:18px;


}



.header_logo{


width:65px;

height:65px;

border-radius:16px;


box-shadow:

0 0 30px rgba(0,207,255,.4);


}



.header_title h2{


font-size:32px;

font-weight:800;

color:var(--accent);


}



.header_title span{


color:var(--muted);

font-size:14px;


}



.header_right{


display:flex;

align-items:center;

gap:20px;


}



#header_weather{


background:#162640;


padding:12px 20px;


border-radius:15px;


font-weight:600;


}



/* ================= MENU ================= */


.glass_menu{


display:flex;


justify-content:center;


gap:18px;


flex-wrap:wrap;


padding:20px;


background:

rgba(8,15,30,.85);


border-bottom:

1px solid var(--border);


}



.glass_menu a{


width:120px;

height:85px;


display:flex;

flex-direction:column;

justify-content:center;

align-items:center;


border-radius:18px;


background:

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


border:

1px solid rgba(255,255,255,.05);


transition:.3s;


}



.glass_menu a span{


font-size:28px;


}



.glass_menu a small{


font-size:14px;

font-weight:700;


}



.glass_menu a:hover{


transform:translateY(-6px);


background:

var(--accent);


color:#000;


box-shadow:

0 15px 35px rgba(0,207,255,.35);


}



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


.hero{


position:relative;


min-height:90vh;


display:flex;


align-items:center;


justify-content:center;


overflow:hidden;


}



.hero_background{


position:absolute;


inset:0;


background:


radial-gradient(
circle at top,
#0077ff55,
transparent 40%
),


linear-gradient(
180deg,
#050914,
#0b1324
);


}



.hero_content{


position:relative;


z-index:2;


text-align:center;


padding:50px;


max-width:1000px;


}



.hero_logo{


width:170px;


margin:0 auto 25px;


filter:

drop-shadow(
0 0 30px rgba(0,207,255,.45)
);


}



.hero h1{


font-size:72px;


font-weight:800;


margin-bottom:20px;


}



.hero p{


font-size:25px;


color:#d7e2ef;


margin-bottom:40px;


}



.hero_buttons{


display:flex;

justify-content:center;


}



.hero_btn{


padding:18px 45px;


background:var(--accent);


color:#000;


border-radius:15px;


font-weight:800;


transition:.3s;


}


.hero_btn:hover{


background:white;


transform:translateY(-5px);


}

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


.news_section{

    margin-top:70px;

}



.news_section h2{

    font-size:36px;

    margin-bottom:30px;

    font-weight:800;

}



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


#hero_news{

    width:100%;

}



.hero_big_card{


display:grid;


grid-template-columns:

48% 52%;



overflow:hidden;


background:

linear-gradient(
145deg,
#121d31,
#1b2a45
);



border-radius:25px;


border:

1px solid var(--border);



box-shadow:

var(--shadow);



transition:.35s;



}



.hero_big_card:hover{


transform:translateY(-8px);



box-shadow:

0 25px 60px rgba(0,207,255,.25);


}



.hero_big_img{


position:relative;


}



.hero_news_image{


width:100%;


height:450px;


object-fit:cover;


}



.hero_gradient{


position:absolute;


inset:0;


background:

linear-gradient(
transparent,
rgba(0,0,0,.65)
);


}



.hero_category{


position:absolute;


top:25px;


left:25px;


background:

var(--accent);



color:#000;


padding:8px 18px;


border-radius:30px;


font-weight:700;


}



.hero_big_content{


padding:45px;


display:flex;


flex-direction:column;


}



.hero_big_title{


font-size:38px;


line-height:1.35;


font-weight:800;


}



.hero_big_date{


margin-top:20px;


color:var(--muted);


}



.hero_actions{


margin-top:auto;


padding-top:30px;


}



.hero_big_btn,


.read_btn{


display:inline-flex;


justify-content:center;


align-items:center;


padding:14px 30px;


border-radius:14px;


background:

var(--accent);



color:#000;


font-weight:800;


transition:.3s;


}



.hero_big_btn:hover,


.read_btn:hover{


background:white;


transform:translateY(-3px);


}



/* ================= NEWS ================= */



#news_cards,
#sport_cards,
#ai_cards,
#jobs_cards,
#tech_cards{


display:grid;


grid-template-columns:

repeat(
auto-fill,
minmax(320px,1fr)
);



gap:30px;


}



.news_card{


background:

linear-gradient(
160deg,
#111b2d,
#18263d
);



border-radius:22px;


overflow:hidden;


border:

1px solid var(--border);



box-shadow:

var(--shadow);



transition:.35s;


}



.news_card:hover{


transform:translateY(-8px);


box-shadow:

0 25px 55px rgba(0,207,255,.20);


}


/* ================= DONATE ================= */

#donate_block{
    padding:60px 0;
}

#donate_block .news_section{
    text-align:center;
}

#donate_block h2{
    margin-bottom:15px;
}

#donate_block p{
    max-width:700px;
    margin:0 auto 30px;
    color:#aeb8c7;
    font-size:16px;
    line-height:1.6;
}

.donate_cards{
    display:grid;

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

    gap:20px;

    margin-top:30px;
}

.donate_card{
    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    min-height:150px;

    padding:25px;

    background:
    linear-gradient(
        160deg,
        #111b2d,
        #18263d
    );

    border-radius:22px;

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

    box-shadow:
    var(--shadow);

    text-decoration:none;

    color:#fff;

    transition:.35s;

    font-size:38px;
}

.donate_card strong{
    display:block;

    margin-top:12px;

    font-size:17px;

    font-weight:600;

    color:#fff;
}

.donate_card:hover{
    transform:translateY(-8px);

    box-shadow:
    0 25px 55px
    rgba(0,207,255,.20);

    border-color:
    rgba(0,207,255,.45);
}



.news_image{


width:100%;


height:230px;


object-fit:cover;


}



.news_body{


padding:22px;


display:flex;


flex-direction:column;


height:100%;


}



.news_source{


color:

var(--accent);


font-size:14px;


margin-bottom:12px;


font-weight:600;


}



.news_title{


font-size:21px;


font-weight:750;


line-height:1.45;


margin-bottom:15px;


}



.news_date{


color:

var(--muted);


font-size:14px;


margin-bottom:20px;


}



.read_btn{


margin-top:auto;


width:100%;


}



/* ================= CRYPTO ================= */


#crypto_cards{


display:grid;


grid-template-columns:

repeat(
auto-fill,
minmax(240px,1fr)
);



gap:25px;


}



.crypto_card{


background:

linear-gradient(
145deg,
#141d2f,
#1d2940
);



border-radius:22px;


padding:30px;


text-align:center;


border:

1px solid var(--border);



box-shadow:

var(--shadow);



transition:.3s;


}



.crypto_card:hover{


transform:

translateY(-8px);


}



.crypto_name{


font-size:24px;


font-weight:800;


margin-bottom:15px;


}



.crypto_price{


font-size:32px;


font-weight:800;


}



.crypto_change{


margin-top:15px;


padding:8px 16px;


border-radius:30px;


background:

rgba(0,255,180,.15);


color:

var(--accent2);


display:inline-block;


font-weight:700;


}



/* ================= WEATHER ================= */


#weather_cards{


display:grid;


grid-template-columns:

repeat(
auto-fill,
minmax(260px,1fr)
);



gap:25px;


}



.weather_card{


background:

linear-gradient(
145deg,
#12203a,
#21476d
);



padding:30px;


border-radius:22px;


text-align:center;


box-shadow:

var(--shadow);


}



.weather_icon{


font-size:65px;


}



.weather_temp{


font-size:50px;


font-weight:800;


}



.weather_city{


font-size:24px;


font-weight:700;


}

/* ===================================================
   AI BLOCK
=================================================== */


.ai_card{


background:

linear-gradient(
145deg,
#171d30,
#202b45
);


border-radius:22px;


overflow:hidden;


border:

1px solid var(--border);


box-shadow:

var(--shadow);


transition:.35s;


}



.ai_card:hover{


transform:translateY(-8px);


}



.ai_card img{


width:100%;


height:220px;


object-fit:cover;


}



.ai_body{


padding:22px;


}



.ai_title{


font-size:22px;


font-weight:700;


}



/* ===================================================
   LOADING
=================================================== */


.news_loading,


.hero_news_loading{


padding:60px;


text-align:center;


font-size:22px;


color:var(--muted);


}



/* ===================================================
   LIVE BLOCK
=================================================== */


.hero_live{


display:grid;


grid-template-columns:

repeat(6,1fr);


gap:20px;


margin-top:45px;


}



.live_card{


background:

rgba(255,255,255,.06);


border:

1px solid var(--border);


border-radius:20px;


padding:20px;


text-align:center;


backdrop-filter:

blur(10px);


}



.live_card span{


display:block;


font-size:28px;


font-weight:800;


color:var(--accent);


}



.live_card small{


color:#d5deec;


}



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


.footer{


margin-top:90px;


background:

#050912;


border-top:

1px solid var(--border);


}



.footer_grid{


width:min(1450px,95%);


margin:auto;


padding:60px 0;


display:grid;


grid-template-columns:

repeat(3,1fr);


gap:50px;


}



.footer_col h3{


font-size:30px;


color:var(--accent);


}



.footer_col h4{


font-size:22px;


margin-bottom:20px;


}



.footer_col a{


display:block;


margin-bottom:12px;


color:#d5deec;


transition:.3s;


}



.footer_col a:hover{


color:var(--accent);


transform:translateX(5px);


}



.footer_logo{


width:70px;


margin-bottom:20px;


}



.footer_bottom{


padding:20px;


text-align:center;


border-top:

1px solid var(--border);


color:var(--muted);


}



/* ===================================================
   SCROLL TOP
=================================================== */


.scroll_top{


position:fixed;


right:30px;


bottom:30px;


width:55px;


height:55px;


border-radius:50%;


border:none;


background:

var(--accent);



color:#000;


font-size:28px;


font-weight:800;


cursor:pointer;


opacity:0;


pointer-events:none;


transition:.3s;


}



.scroll_top.show{


opacity:1;


pointer-events:auto;


}



/* ===================================================
   PRELOADER
=================================================== */


#preloader{


position:fixed;


inset:0;


z-index:9999;


background:#050914;


display:flex;


align-items:center;


justify-content:center;


}



.loader{


width:60px;


height:60px;


border-radius:50%;


border:

5px solid rgba(255,255,255,.15);



border-top-color:

var(--accent);


animation:

spin 1s linear infinite;


}



@keyframes spin{


from{

transform:rotate(0deg);

}


to{

transform:rotate(360deg);

}


}



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


.fadeIn{


animation:

fade .6s ease;


}



@keyframes fade{


from{


opacity:0;


transform:translateY(20px);


}



to{


opacity:1;


transform:translateY(0);


}


}



/* ===================================================
   TABLET
=================================================== */


@media(max-width:1100px){


.hero_big_card{


grid-template-columns:1fr;


}



.hero_big_title{


font-size:32px;


}



.hero_live{


grid-template-columns:

repeat(3,1fr);


}



.footer_grid{


grid-template-columns:

1fr 1fr;


}



}




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


@media(max-width:700px){



.top_header{


flex-direction:column;


gap:15px;


padding:15px;


}



.header_right{


flex-direction:column;


}



.hero h1{


font-size:38px;


}



.hero p{


font-size:18px;


}



.hero_content{


padding:25px;


}



.hero_live{


grid-template-columns:

repeat(2,1fr);


}



.hero_big_content{


padding:25px;


}



.hero_big_title{


font-size:25px;


}



#news_cards,
#jobs_cards,
#sport_cards,
#ai_cards,
#tech_cards{


grid-template-columns:

1fr;


}



.news_title{


font-size:18px;


}



.footer_grid{


grid-template-columns:

1fr;


text-align:center;


}



.scroll_top{


right:15px;


bottom:15px;


}


}

.update_time{
    text-align:center;
    font-size:13px;
    color:#888;
    margin-top:10px;
}

/* ===== Пошук ===== */

.search_box{
    display:flex;
    align-items:center;
    margin:15px 0;
}

#search_news{
    flex:1;
    padding:12px 15px;
    border:none;
    outline:none;
    border-radius:10px 0 0 10px;
    background:#1c1c1c;
    color:#fff;
    font-size:15px;
}

#search_btn{
    width:50px;
    border:none;
    cursor:pointer;
    border-radius:0 10px 10px 0;
    background:#00cfff;
    color:#fff;
    font-size:18px;
    transition:.2s;
}

#search_btn:hover{
    background:#00a8d9;
}

.search_clear{
    width:50px;
    height:50px;
    border:none;
    border-radius:12px;
    cursor:pointer;
    background:#ff4d4d;
    color:#fff;
    font-size:20px;
    margin-left:8px;
    transition:.2s;
}

.search_clear:hover{
    transform:scale(1.05);
    background:#ff2f2f;
}

/* ===================================================
   LANGUAGE SWITCHER
   =================================================== */

.language_switcher {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-right: 15px;
}

.language_btn {
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
    color: inherit;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.language_btn:hover {
    background: rgba(255, 255, 255, 0.16);
    transform: translateY(-1px);
}

.language_btn.active {
    background: rgba(0, 207, 255, 0.2);
    border-color: #00cfff;
    color: #00cfff;
}

/* Mobile */

@media (max-width: 700px) {

    .language_switcher {
        margin-right: 8px;
        gap: 4px;
    }

    .language_btn {
        padding: 5px 7px;
        font-size: 11px;
    }

}

/* ===================================================
   PROFILE
=================================================== */

#profile_block {
    display: block;
}

#profile_block .news_section {
    display: block;
}

.profile_card {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 25px;
    padding: 25px;
    border-radius: 20px;
    background: linear-gradient(
        160deg,
        #111b2d,
        #18263d
    );
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 15px 40px rgba(0,0,0,.35);
}

.profile_avatar {
    width: 75px;
    height: 75px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 34px;
    background: linear-gradient(
        135deg,
        #00cfff,
        #1769ff
    );
}

.profile_info {
    display: block !important;
}

.profile_info h3 {
    margin: 0 0 8px;
    font-size: 24px;
}

.profile_info p {
    margin: 5px 0;
    color: #9aa9c2;
}


/* ===================================================
   PROFILE BUTTONS
=================================================== */

#profile_block .profile_actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    margin-top: 20px !important;
}

#profile_block .profile_action {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;

    width: 100% !important;
    min-height: 60px !important;

    padding: 15px 20px !important;

    border: 1px solid rgba(0, 207, 255, .3) !important;
    border-radius: 14px !important;

    background: rgba(255,255,255,.08) !important;
    color: #ffffff !important;

    font-family: inherit !important;
    font-size: 16px !important;
    font-weight: 600 !important;

    cursor: pointer !important;

    box-sizing: border-box !important;

    visibility: visible !important;
    opacity: 1 !important;
}

#profile_block .profile_action:hover {
    background: rgba(0,207,255,.15) !important;
    border-color: rgba(0,207,255,.6) !important;
    transform: translateY(-2px);
}

#profile_block .profile_action span {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}


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

@media (max-width: 600px) {

    .profile_card {
        flex-direction: column;
        text-align: center;
    }

    #profile_block .profile_actions {
        display: flex !important;
        flex-direction: column !important;
    }

    #profile_block .profile_action {
        min-height: 55px !important;
    }

}

/* ===================================================
   PROFILE MODAL
=================================================== */

.profile_modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
}

.profile_modal_overlay {
    position: fixed;
    inset: 0;

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

    padding: 20px;

    background: rgba(0, 0, 0, 0.75);

    backdrop-filter: blur(8px);
}

.profile_modal_window {
    position: relative;

    width: min(700px, 100%);

    max-height: 85vh;

    overflow-y: auto;

    padding: 30px;

    border-radius: 22px;

    background:
        linear-gradient(
            160deg,
            #111b2d,
            #18263d
        );

    border:
        1px solid rgba(0, 207, 255, .25);

    box-shadow:
        0 25px 70px rgba(0, 0, 0, .55);

    color: #fff;
}

.profile_modal_window h2 {
    margin-bottom: 20px;

    padding-right: 40px;

    font-size: 26px;

    color: #00cfff;
}

.profile_modal_content {
    width: 100%;
}

.profile_modal_close {
    position: absolute;

    top: 15px;
    right: 15px;

    width: 40px;
    height: 40px;

    border: none;

    border-radius: 50%;

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

    color: #fff;

    font-size: 20px;

    cursor: pointer;
}

.profile_modal_close:hover {
    background: rgba(0,207,255,.25);
}

.profile_saved_item {
    margin-bottom: 15px;

    padding: 18px;

    border-radius: 16px;

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

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

.profile_saved_item h4 {
    margin-bottom: 12px;

    font-size: 18px;
}

.profile_saved_item .read_btn {
    margin-top: 12px;
}

.delete_saved_job_btn,
.profile_delete_button {
    width: 100%;

    margin-top: 12px;

    padding: 11px 15px;

    border: none;

    border-radius: 10px;

    background: #ff4d4d;

    color: #fff;

    font-family: inherit;

    font-size: 15px;

    font-weight: 700;

    cursor: pointer;

    display: block;

    box-sizing: border-box;

    transition: .2s;
}

.delete_saved_job_btn:hover,
.profile_delete_button:hover {
    background: #ff2f2f;

    transform: translateY(-2px);
}

@media (max-width: 600px) {

    .profile_modal_overlay {
        padding: 10px;
    }

    .profile_modal_window {
        padding: 20px;

        max-height: 90vh;
    }

}