/* XeberHub — Premium Dizayn v2.0 */
/* Google Fonts: header.php -ə əlavə edin:
*/
:root {
--primary: #5B3DF5;
--primary-hover: #4930D8;
--primary-light: #F1EEFF;
--text: #17171C;
--text-secondary: #6F7280;
--text-light: #9A9DA8;
--bg: #F4F5FA;
--card-bg: #FFFFFF;
--border: #E7E8EE;
--input-border: #DADCE5;
--green: #24B36B;
--green-light: #EAF8F0;
--red: #E5484D;
--red-light: #FFF0F0;
--orange: #E59A23;
--orange-light: #FFF7E8;
--blue: #2684FF;
--font: 'Inter', Arial, sans-serif;
--radius-xl: 16px;
--radius-lg: 12px;
--radius: 10px;
--radius-sm: 7px;
--shadow: 0 2px 12px rgba(20,20,43,.06);
--shadow-md: 0 4px 20px rgba(20,20,43,.09);
--shadow-hover: 0 10px 35px rgba(20,20,43,.12);
--transition: .22s ease;
}
[data-theme="dark"] {
--bg: #0F1117;
--card-bg: #171A22;
--text: #F4F5F7;
--text-secondary: #A8ACB8;
--border: #2A2E39;
--input-border: #2A2E39;
--primary-light: #1e1a3a;
}
/* ═══ RESET ═══ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { font-family: var(--font); font-size: 14px; line-height: 1.6; color: var(--text); background: var(--bg); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; height: auto; }
button { cursor: pointer; border: none; background: none; font-family: var(--font); }
ul, ol { list-style: none; }
input, textarea, select { font-family: var(--font); }
/* ═══ CONTAINER ═══ */
.container { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.main-content { padding: 16px 0 48px; }
/* ═══ HEADER ═══ */
.site-header {
background: var(--card-bg);
border-bottom: 1px solid var(--border);
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 1px 4px rgba(0,0,0,.05);
transition: box-shadow var(--transition);
}
.site-header.scrolled { box-shadow: 0 2px 16px rgba(0,0,0,.10); }
/* Header Top Row */
.header-top {
display: flex;
align-items: center;
height: 56px;
padding: 0 16px;
gap: 10px;
max-width: 1280px;
margin: 0 auto;
}
/* Hamburger (mobile only) */
#mobileMenuBtn {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
min-width: 38px;
border-radius: 8px;
color: var(--text);
order: 1;
}
#mobileMenuBtn svg { width: 22px; height: 22px; }
/* Logo */
.header-logo {
display: flex;
align-items: center;
gap: 8px;
font-size: 20px;
font-weight: 800;
color: var(--primary);
white-space: nowrap;
order: 2;
flex: 1;
}
.logo-icon {
width: 32px;
height: 32px;
background: var(--primary);
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 16px;
font-weight: 900;
flex-shrink: 0;
letter-spacing: -1px;
}
.logo-text-hub { color: var(--text); font-weight: 800; }
/* Header Meta */
.header-meta {
display: none;
align-items: center;
gap: 14px;
font-size: 12px;
color: var(--text-secondary);
white-space: nowrap;
order: 3;
}
.header-meta span { display: flex; align-items: center; gap: 4px; }
/* Search */
.header-search {
display: none;
position: relative;
flex: 1;
max-width: 300px;
order: 4;
}
.header-search input {
width: 100%;
height: 38px;
border: 1.5px solid var(--input-border);
border-radius: 20px;
padding: 0 40px 0 16px;
font-size: 13px;
background: var(--bg);
color: var(--text);
outline: none;
transition: var(--transition);
}
.header-search input::placeholder { color: var(--text-light); }
.header-search input:focus {
border-color: var(--primary);
background: var(--card-bg);
box-shadow: 0 0 0 3px rgba(91,61,245,.10);
}
.header-search button {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
color: var(--text-secondary);
display: flex;
align-items: center;
}
.header-search button svg { width: 16px; height: 16px; }
/* Header Actions */
.header-actions {
display: flex;
align-items: center;
gap: 2px;
order: 5;
}
.header-actions a,
.header-actions button {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
color: var(--text-secondary);
font-size: 17px;
transition: var(--transition);
}
.header-actions a:hover,
.header-actions button:hover {
background: var(--primary-light);
color: var(--primary);
}
/* Mobile search icon */
.header-search-icon { display: flex; order: 4; }
/* ═══ NAV ═══ */
.site-nav { display: none; border-top: 1px solid var(--border); background: var(--card-bg); }
.site-nav ul {
display: flex;
max-width: 1280px;
margin: 0 auto;
padding: 0 16px;
height: 48px;
align-items: center;
gap: 2px;
overflow-x: auto;
scrollbar-width: none;
}
.site-nav ul::-webkit-scrollbar { display: none; }
.site-nav a {
display: flex;
align-items: center;
height: 48px;
padding: 0 13px;
font-size: 13.5px;
font-weight: 600;
color: var(--text-secondary);
border-bottom: 2.5px solid transparent;
white-space: nowrap;
transition: var(--transition);
border-radius: 0;
}
.site-nav a:first-child {
background: var(--primary);
color: #fff;
border-radius: 6px;
height: 34px;
padding: 0 14px;
margin-right: 4px;
border-bottom: none;
}
.site-nav a:first-child:hover { background: var(--primary-hover); }
.site-nav a:hover { color: var(--primary); border-bottom-color: var(--primary); }
.site-nav a.active { color: var(--primary); border-bottom-color: var(--primary); }
.site-nav .nav-more {
margin-left: auto;
padding: 0 10px;
color: var(--text-secondary);
font-size: 18px;
border-bottom: none;
}
/* ═══ MOBILE MENU ═══ */
.mobile-nav-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,.55);
z-index: 1999; display: none;
}
.mobile-nav-overlay.open { display: block; }
.mobile-nav {
position: fixed; top: 0; left: 0;
width: 285px; height: 100%;
background: #17152B;
z-index: 2000;
transform: translateX(-100%);
transition: transform .3s ease;
overflow-y: auto;
display: flex; flex-direction: column;
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav-header {
padding: 18px 20px;
border-bottom: 1px solid rgba(255,255,255,.1);
display: flex; align-items: center; justify-content: space-between;
flex-shrink: 0;
}
.mobile-nav-header .logo { font-size: 20px; font-weight: 800; color: #fff; display: flex; align-items: center; gap: 8px; }
.mobile-nav-header .logo .logo-icon { background: rgba(255,255,255,.15); }
.mobile-nav-header button { color: rgba(255,255,255,.7); font-size: 22px; }
.mobile-nav a {
display: flex; align-items: center;
padding: 13px 20px;
color: rgba(255,255,255,.75);
font-size: 15px; font-weight: 500;
border-bottom: 1px solid rgba(255,255,255,.06);
transition: var(--transition);
}
.mobile-nav a:hover, .mobile-nav a.active { background: rgba(91,61,245,.25); color: #fff; }
/* ═══ BREAKING BAR ═══ */
.breaking-bar {
background: var(--red);
color: #fff;
padding: 0;
overflow: hidden;
height: 36px;
display: flex;
align-items: center;
}
.breaking-bar .container {
display: flex; align-items: center;
gap: 0; height: 100%; overflow: hidden;
}
.breaking-label {
background: rgba(0,0,0,.25);
padding: 0 12px;
font-size: 10px;
font-weight: 800;
white-space: nowrap;
text-transform: uppercase;
letter-spacing: .5px;
height: 100%;
display: flex; align-items: center;
flex-shrink: 0;
margin-right: 12px;
}
.breaking-ticker-wrap { flex: 1; overflow: hidden; position: relative; }
.breaking-ticker {
display: flex;
animation: ticker 35s linear infinite;
white-space: nowrap;
gap: 40px;
}
.breaking-ticker span { font-size: 13px; font-weight: 500; white-space: nowrap; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.breaking-nav {
display: flex; align-items: center; gap: 4px;
flex-shrink: 0; padding: 0 12px;
}
.breaking-nav button {
width: 24px; height: 24px;
border-radius: 50%;
background: rgba(0,0,0,.2);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 12px;
transition: var(--transition);
}
.breaking-nav button:hover { background: rgba(0,0,0,.4); }
.breaking-time {
font-size: 11px;
white-space: nowrap;
opacity: .85;
padding-right: 8px;
flex-shrink: 0;
}
/* ═══ HERO SLIDER ═══ */
.hero-slider {
position: relative;
border-radius: var(--radius-xl);
overflow: hidden;
background: #222;
aspect-ratio: 16/8;
max-height: 420px;
margin-bottom: 20px;
}
.hero-slide {
position: absolute; inset: 0;
opacity: 0;
transition: opacity .5s ease;
pointer-events: none;
}
.hero-slide.active { opacity: 1; pointer-events: auto; z-index: 1; }
.hero-slide img {
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.hero-slide-body {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 20px 20px 24px;
background: linear-gradient(transparent 0%, rgba(0,0,0,.3) 20%, rgba(0,0,0,.82) 100%);
color: #fff;
}
.hero-badge {
display: inline-flex; align-items: center;
background: var(--red);
color: #fff;
font-size: 9px; font-weight: 800;
padding: 3px 8px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: .5px;
margin-bottom: 8px;
}
.hero-slide-title {
font-size: 20px; font-weight: 700;
line-height: 1.28;
color: #fff;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
margin-bottom: 10px;
}
.hero-slide-title a { color: inherit; }
.hero-slide-meta { display: flex; align-items: center; gap: 14px; font-size: 12px; opacity: .85; }
.hero-arrow {
position: absolute; top: 50%; transform: translateY(-50%);
z-index: 5;
width: 40px; height: 40px;
border-radius: 50%;
background: rgba(255,255,255,.18);
backdrop-filter: blur(4px);
color: #fff;
display: flex; align-items: center; justify-content: center;
font-size: 18px;
transition: var(--transition);
border: 1px solid rgba(255,255,255,.3);
}
.hero-arrow:hover { background: rgba(255,255,255,.35); }
.hero-arrow-prev { left: 12px; }
.hero-arrow-next { right: 12px; }
.hero-dots {
position: absolute; bottom: 14px; right: 18px;
display: flex; gap: 6px; z-index: 5;
}
.hero-dot {
width: 7px; height: 7px; border-radius: 50%;
background: rgba(255,255,255,.45);
border: none;
cursor: pointer;
transition: var(--transition);
padding: 0;
}
.hero-dot.active { background: #fff; width: 20px; border-radius: 4px; }
/* ═══ HERO SIDE LIST ═══ */
.hero-section {
display: flex; flex-direction: column; gap: 16px;
margin-bottom: 20px;
}
.hero-side {
display: flex; flex-direction: column; gap: 1px;
background: var(--card-bg);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow);
}
.hero-side-item {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
border-bottom: 1px solid var(--border);
transition: var(--transition);
}
.hero-side-item:last-child { border-bottom: none; }
.hero-side-item:hover { background: var(--bg); }
.hero-side-item img {
width: 80px; height: 58px;
object-fit: cover;
border-radius: var(--radius-sm);
flex-shrink: 0;
}
.hero-side-item .item-body { flex: 1; min-width: 0; }
.hero-side-item .item-title {
font-size: 13px; font-weight: 600;
line-height: 1.4;
color: var(--text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.hero-side-item .item-title:hover { color: var(--primary); }
.hero-side-item .item-meta { font-size: 11px; color: var(--text-light); margin-top: 4px; display: flex; gap: 8px; }
/* ═══ CATEGORY ICONS ═══ */
.cat-icons {
background: var(--card-bg);
border-radius: var(--radius-xl);
box-shadow: var(--shadow);
padding: 16px;
margin-bottom: 20px;
}
.cat-icons-grid {
display: flex;
gap: 4px;
overflow-x: auto;
scrollbar-width: none;
justify-content: space-between;
}
.cat-icons-grid::-webkit-scrollbar { display: none; }
.cat-icon-item {
display: flex; flex-direction: column;
align-items: center; gap: 6px;
padding: 8px 10px;
border-radius: var(--radius-lg);
text-align: center;
min-width: 60px;
transition: var(--transition);
cursor: pointer;
flex: 1;
}
.cat-icon-item:hover { background: var(--bg); }
.cat-icon-item .icon-wrap {
width: 44px; height: 44px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 20px;
background: var(--primary-light);
color: var(--primary);
transition: var(--transition);
}
.cat-icon-item:hover .icon-wrap { background: var(--primary); color: #fff; }
.cat-icon-item span { font-size: 11px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
/* ═══ SECTION HEADER ═══ */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.section-title {
font-size: 16px; font-weight: 800;
color: var(--text);
display: flex; align-items: center; gap: 8px;
}
.section-title::before {
content: '';
width: 3px; height: 18px;
background: var(--primary);
border-radius: 2px;
display: inline-block;
flex-shrink: 0;
}
.section-link {
font-size: 12px; font-weight: 600;
color: var(--primary);
display: flex; align-items: center; gap: 3px;
}
.section-link:hover { text-decoration: underline; }
/* ═══ NEWS GRID (kateqoriya, axtarış, etiket, populyar) ═══ */
.news-grid { display: flex; flex-direction: column; gap: 0; }
.news-grid {
background: var(--card-bg);
border-radius: var(--radius-xl);
box-shadow: var(--shadow);
overflow: hidden;
}
.news-card {
display: flex; align-items: stretch;
border-bottom: 1px solid var(--border);
transition: var(--transition);
}
.news-card:last-child { border-bottom: none; }
.news-card:hover { background: var(--bg); }
.news-card > a {
display: block;
width: 110px; min-width: 110px;
flex-shrink: 0;
overflow: hidden;
}
.news-card .card-img {
width: 100%; height: 100%;
min-height: 88px;
object-fit: cover; display: block;
transition: transform .3s ease;
}
.news-card:hover .card-img { transform: scale(1.04); }
.news-card .card-body {
padding: 12px 14px;
flex: 1; display: flex; flex-direction: column;
justify-content: center; min-width: 0;
}
.news-card .card-title {
font-size: 13px; font-weight: 600;
line-height: 1.4; margin: 4px 0;
color: var(--text);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-card .card-title a { color: inherit; }
.news-card .card-title a:hover { color: var(--primary); }
.news-card .card-excerpt { display: none; font-size: 12px; color: var(--text-secondary); line-height: 1.5; }
.news-card .card-meta { font-size: 11px; color: var(--text-secondary); margin-top: 4px; display: flex; gap: 8px; }
.card-category {
display: inline-flex; align-items: center;
background: var(--primary);
color: #fff;
font-size: 10px; font-weight: 700;
padding: 2px 7px;
border-radius: 4px;
text-transform: uppercase;
}
/* ═══ THREE-COLUMN GRID ═══ */
.three-col { display: flex; flex-direction: column; gap: 20px; margin-bottom: 20px; }
.three-col-block { display: flex; flex-direction: column; gap: 0; }
.three-col-block .news-grid { border-radius: var(--radius-lg); }
/* Populyar inside 3-col */
.pop-card {
display: flex; align-items: center; gap: 12px;
padding: 12px 14px;
border-bottom: 1px solid var(--border);
background: var(--card-bg);
transition: var(--transition);
}
.pop-card:last-child { border-bottom: none; }
.pop-card:hover { background: var(--bg); }
.pop-num {
font-size: 22px; font-weight: 800;
color: var(--border); min-width: 32px;
text-align: center; line-height: 1;
flex-shrink: 0;
}
.pop-num.top3 { color: var(--primary); }
.pop-card img {
width: 68px; height: 52px;
object-fit: cover;
border-radius: var(--radius-sm);
flex-shrink: 0;
}
.pop-card .pop-body { flex: 1; min-width: 0; }
.pop-card .pop-title {
font-size: 13px; font-weight: 600;
line-height: 1.4; color: var(--text);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pop-card .pop-title:hover { color: var(--primary); }
.pop-card .pop-meta { font-size: 11px; color: var(--text-light); margin-top: 4px; display: flex; gap: 8px; }
/* Video block */
.video-featured {
position: relative;
border-radius: var(--radius-lg);
overflow: hidden;
background: #111;
}
.video-featured img {
width: 100%; aspect-ratio: 16/9;
object-fit: cover; display: block;
}
.video-play-btn {
position: absolute; inset: 0;
display: flex; align-items: center; justify-content: center;
}
.video-play-btn span {
width: 56px; height: 56px;
border-radius: 50%;
background: rgba(255,255,255,.92);
display: flex; align-items: center; justify-content: center;
font-size: 22px; padding-left: 4px;
box-shadow: 0 4px 20px rgba(0,0,0,.3);
transition: var(--transition);
}
.video-featured:hover .video-play-btn span { transform: scale(1.08); background: #fff; }
.video-featured-title {
padding: 12px 14px;
background: var(--card-bg);
}
.video-featured-title h3 { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--text); margin-bottom: 6px; }
.video-featured-title .meta { font-size: 12px; color: var(--text-secondary); display: flex; gap: 10px; }
/* ═══ CONTENT GRID + SIDEBAR ═══ */
.content-grid { display: flex; flex-direction: column; gap: 20px; }
.content-main { min-width: 0; }
section { margin-top: 24px; }
/* ═══ SIDEBAR ═══ */
.sidebar { display: flex; flex-direction: column; gap: 16px; }
.sidebar-widget {
background: var(--card-bg);
border-radius: var(--radius-xl);
padding: 16px;
box-shadow: var(--shadow);
}
.widget-title {
font-size: 14px; font-weight: 800;
color: var(--text); margin-bottom: 14px;
display: flex; align-items: center; gap: 7px;
}
.widget-title::before {
content: ''; width: 3px; height: 16px;
background: var(--primary); border-radius: 2px;
}
.popular-card {
display: flex; gap: 10px;
align-items: flex-start;
padding: 10px 0;
border-bottom: 1px solid var(--border);
}
.popular-card:last-child { border-bottom: none; }
.popular-num { font-size: 22px; font-weight: 800; color: var(--border); min-width: 32px; line-height: 1; }
.popular-num.top3 { color: var(--primary); }
.popular-card .card-title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.4; }
.popular-card .card-title a:hover { color: var(--primary); }
.list-card { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.list-card:last-child { border-bottom: none; }
.list-card img { width: 72px; height: 54px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.list-card .card-title { font-size: 13px; font-weight: 600; line-height: 1.4; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.list-card .card-meta { font-size: 11px; color: var(--text-light); margin-top: 4px; }
.tags-list { display: flex; gap: 7px; flex-wrap: wrap; }
.tag { padding: 5px 11px; background: var(--bg); border: 1px solid var(--border); border-radius: 20px; font-size: 12px; color: var(--text-secondary); transition: var(--transition); }
.tag:hover { background: var(--primary-light); color: var(--primary); border-color: var(--primary); }
/* ═══ ADS ═══ */
.ad-container { background: #F5F5F8; border: 1.5px dashed #D9DAE2; border-radius: var(--radius-lg); overflow: hidden; text-align: center; position: relative; min-height: 90px; display: flex; align-items: center; justify-content: center; }
.ad-container:empty { display: none; }
.ad-container::before { content: 'Reklam'; font-size: 9px; text-transform: uppercase; color: #bbb; position: absolute; top: 4px; right: 8px; letter-spacing: .5px; }
/* ═══ BUTTONS ═══ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 600; transition: var(--transition); cursor: pointer; border: none; }
.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; }
.btn-lg { height: 48px; padding: 0 22px; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--primary-light); color: var(--primary); }
.btn-danger { background: var(--red-light); color: var(--red); }
.btn-success { background: var(--green-light); color: var(--green); }
.btn-outline { background: transparent; border: 1.5px solid var(--border); color: var(--text); }
.btn-outline:hover { border-color: var(--primary); color: var(--primary); }
/* ═══ FORMS ═══ */
.form-group { margin-bottom: 16px; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 6px; }
.form-control { width: 100%; height: 44px; border: 1.5px solid var(--input-border); border-radius: var(--radius-sm); padding: 0 13px; font-size: 14px; color: var(--text); background: var(--card-bg); outline: none; transition: var(--transition); }
.form-control:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(91,61,245,.10); }
textarea.form-control { height: auto; min-height: 110px; padding: 12px 13px; resize: vertical; }
.form-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236F7280' fill='none' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 38px; }
/* ═══ BADGE ═══ */
.badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 5px; font-size: 12px; font-weight: 600; }
.badge-success { background: var(--green-light); color: var(--green); }
.badge-danger { background: var(--red-light); color: var(--red); }
.badge-warning { background: var(--orange-light); color: var(--orange); }
.badge-info { background: #E8F2FF; color: var(--blue); }
.badge-primary { background: var(--primary-light); color: var(--primary); }
.badge-secondary { background: var(--bg); color: var(--text-secondary); border: 1px solid var(--border); }
/* ═══ ALERTS ═══ */
.alert { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 14px; font-size: 13px; }
.alert-success { background: var(--green-light); color: var(--green); border: 1px solid #b7eacf; }
.alert-error { background: var(--red-light); color: var(--red); border: 1px solid #fdb5b7; }
.alert-info { background: #E8F2FF; color: var(--blue); border: 1px solid #b3d0ff; }
.alert-warning { background: var(--orange-light); color: var(--orange); border: 1px solid #f8d49e; }
/* ═══════════════════════════
NEWS DETAIL PAGE
═══════════════════════════ */
.detail-wrap {
max-width: 920px; margin: 0 auto;
padding: 0 16px 48px;
}
.breadcrumb { margin-bottom: 16px; }
.breadcrumb ol { display: flex; align-items: center; gap: 6px; font-size: 12px; flex-wrap: wrap; }
.breadcrumb li { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); }
.breadcrumb li:not(:last-child)::after { content: '/'; }
.breadcrumb a { color: var(--primary); }
.breadcrumb li:last-child { color: var(--text-secondary); }
.detail-header { margin-bottom: 20px; }
.detail-category {
display: inline-flex; align-items: center;
color: #fff; font-size: 11px; font-weight: 700;
padding: 3px 10px; border-radius: 5px;
text-transform: uppercase; letter-spacing: .3px;
margin-bottom: 12px;
}
.detail-title {
font-size: 24px; font-weight: 700;
line-height: 1.28; color: var(--text);
margin-bottom: 14px;
}
.detail-meta {
display: flex; align-items: center; gap: 16px;
font-size: 13px; color: var(--text-secondary);
flex-wrap: wrap;
padding-bottom: 16px;
border-bottom: 1px solid var(--border);
}
.detail-meta span { display: flex; align-items: center; gap: 4px; }
.detail-meta a { color: var(--primary); font-weight: 600; }
.detail-hero-img {
width: 100%; border-radius: 18px;
aspect-ratio: 16/9; object-fit: cover;
box-shadow: 0 10px 35px rgba(0,0,0,.08);
margin-bottom: 8px;
display: block;
}
.detail-img-caption {
font-size: 12px; color: var(--text-light);
text-align: center; margin-bottom: 24px;
}
.news-body {
font-size: 17px; line-height: 1.9;
color: var(--text);
}
.news-body p { margin-bottom: 22px; }
.news-body h2 { font-size: 26px; font-weight: 700; margin: 32px 0 12px; }
.news-body h3 { font-size: 21px; font-weight: 700; margin: 26px 0 10px; }
.news-body ul, .news-body ol { padding-left: 24px; margin-bottom: 22px; }
.news-body ul li { list-style: disc; margin-bottom: 8px; }
.news-body ol li { list-style: decimal; margin-bottom: 8px; }
.news-body blockquote {
border-left: 4px solid var(--primary);
background: var(--primary-light);
padding: 20px 22px;
border-radius: 0 12px 12px 0;
margin: 28px 0; font-style: italic;
font-size: 17px; line-height: 1.8;
color: var(--text-secondary);
}
.news-body a { color: var(--primary); text-decoration: underline; }
.news-body img {
border-radius: 16px; margin: 24px 0;
width: 100%; object-fit: cover; display: block;
}
.news-body strong { font-weight: 700; }
.news-body em { font-style: italic; }
/* Tags in detail */
.detail-tags { margin: 28px 0; }
.detail-tags h4 { font-size: 13px; font-weight: 700; color: var(--text-secondary); margin-bottom: 10px; text-transform: uppercase; letter-spacing: .5px; }
/* Social Share */
.share-section { margin: 32px 0; padding: 20px; background: var(--bg); border-radius: var(--radius-xl); }
.share-section h4 { font-size: 13px; font-weight: 700; color: var(--text-secondary); margin-bottom: 14px; text-transform: uppercase; letter-spacing: .5px; }
.share-btns { display: flex; gap: 10px; flex-wrap: wrap; }
.share-btn {
display: flex; align-items: center; gap: 7px;
padding: 9px 16px; border-radius: 50px;
font-size: 13px; font-weight: 600;
color: #fff; transition: var(--transition);
opacity: .92;
}
.share-btn:hover { opacity: 1; transform: translateY(-1px); box-shadow: var(--shadow-md); }
.share-fb { background: #1877F2; }
.share-tw { background: #000; }
.share-wa { background: #25D366; }
.share-tg { background: #26A5E4; }
.share-cp { background: var(--text-secondary); }
/* Author Box */
.author-card {
display: flex; gap: 16px; align-items: flex-start;
background: var(--bg);
border-radius: var(--radius-xl);
padding: 20px;
margin: 28px 0;
}
.author-avatar {
width: 60px; height: 60px; border-radius: 50%;
background: var(--primary-light);
display: flex; align-items: center; justify-content: center;
font-size: 24px; font-weight: 700; color: var(--primary);
flex-shrink: 0; overflow: hidden;
}
.author-avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-card .author-name { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.author-card .author-bio { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
/* Prev/Next */
.prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0; }
.prevnext a {
background: var(--card-bg);
border-radius: var(--radius-lg);
padding: 14px 16px;
border: 1px solid var(--border);
transition: var(--transition);
}
.prevnext a:hover { border-color: var(--primary); box-shadow: var(--shadow); }
.prevnext .label { font-size: 11px; color: var(--text-light); margin-bottom: 5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.prevnext .title { font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.4; }
/* Related news — card grid */
.related-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
.related-card {
background: var(--card-bg);
border-radius: var(--radius-xl);
overflow: hidden;
box-shadow: var(--shadow);
transition: transform var(--transition), box-shadow var(--transition);
}
.related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); }
.related-card img {
width: 100%; aspect-ratio: 16/9;
object-fit: cover; display: block;
transition: transform .3s ease;
}
.related-card:hover img { transform: scale(1.04); }
.related-card .rc-body { padding: 12px 14px; }
.related-card .rc-cat { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; color: #fff; display: inline-block; margin-bottom: 6px; }
.related-card .rc-title { font-size: 13px; font-weight: 700; line-height: 1.4; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.related-card .rc-title a:hover { color: var(--primary); }
.related-card .rc-meta { font-size: 11px; color: var(--text-light); margin-top: 6px; display: flex; gap: 8px; }
/* ═══ COMMENTS ═══ */
.comments-section { margin-top: 36px; }
.comment { display: flex; gap: 12px; margin-bottom: 20px; }
.comment-avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--primary-light); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--primary); flex-shrink: 0; font-size: 14px; }
.comment-body { flex: 1; background: var(--bg); border-radius: 0 var(--radius-lg) var(--radius-lg) var(--radius-lg); padding: 12px 14px; }
.comment-name { font-weight: 700; font-size: 14px; }
.comment-date { font-size: 11px; color: var(--text-light); margin-left: 8px; }
.comment-text { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-top: 6px; }
.comment-reply { font-size: 12px; color: var(--primary); cursor: pointer; margin-top: 8px; display: inline-block; font-weight: 600; }
.comment-reply:hover { text-decoration: underline; }
.comment-form { background: var(--card-bg); border-radius: var(--radius-xl); padding: 24px; box-shadow: var(--shadow); margin-top: 28px; }
.comment-form h3 { font-size: 18px; font-weight: 700; margin-bottom: 18px; }
/* ═══ PAGINATION ═══ */
.pagination { display: flex; gap: 5px; justify-content: center; margin: 28px 0; flex-wrap: wrap; }
.page-btn { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; border: 1.5px solid var(--border); color: var(--text); transition: var(--transition); }
.page-btn:hover, .page-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); }
/* ═══ AUTH ═══ */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); padding: 24px; }
.auth-box {
background: var(--card-bg);
border-radius: 20px; padding: 32px 24px;
width: 100%; max-width: 440px;
box-shadow: 0 20px 60px rgba(15,15,25,.12);
}
.auth-logo { text-align: center; margin-bottom: 28px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.auth-logo .logo-icon { width: 40px; height: 40px; font-size: 20px; border-radius: 10px; }
.auth-logo .logo-text { font-size: 26px; font-weight: 800; color: var(--primary); }
.auth-title { font-size: 22px; font-weight: 700; text-align: center; margin-bottom: 6px; }
.auth-subtitle { font-size: 14px; color: var(--text-secondary); text-align: center; margin-bottom: 26px; }
/* ═══ VIDEO ═══ */
.video-embed { position: relative; padding-bottom: 56.25%; border-radius: var(--radius-lg); overflow: hidden; margin: 24px 0; }
.video-embed iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; }
/* ═══ 404 ═══ */
.page-404 { text-align: center; padding: 80px 20px; }
.page-404 .num { font-size: 80px; font-weight: 800; color: var(--primary); line-height: 1; }
.page-404 h2 { font-size: 22px; margin: 14px 0 8px; }
.page-404 p { color: var(--text-secondary); margin-bottom: 24px; }
/* ═══ SKELETON ═══ */
.skeleton { background: linear-gradient(90deg, var(--border) 25%, #f0f0f0 50%, var(--border) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: var(--radius-sm); }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* ═══ MODAL ═══ */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9999; display: flex; align-items: flex-end; justify-content: center; padding: 0; opacity: 0; visibility: hidden; transition: var(--transition); }
.modal-overlay.open { opacity: 1; visibility: visible; }
.modal { background: var(--card-bg); border-radius: 16px 16px 0 0; width: 100%; max-width: 100%; max-height: 90vh; overflow-y: auto; box-shadow: 0 -4px 40px rgba(0,0,0,.15); transform: translateY(40px); transition: transform var(--transition); }
.modal-overlay.open .modal { transform: translateY(0); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; border-bottom: 1px solid var(--border); }
.modal-title { font-size: 16px; font-weight: 700; }
.modal-body { padding: 20px; }
.modal-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; }
.modal-close { width: 32px; height: 32px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); font-size: 18px; cursor: pointer; }
/* ═══ FOOTER ═══ */
.site-footer { background: #17152B; color: #A8ACB8; margin-top: 40px; }
.footer-main { display: flex; flex-direction: column; gap: 28px; padding: 32px 0; }
.footer-brand .logo { font-size: 20px; font-weight: 800; color: #fff; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.footer-brand .logo .logo-icon { background: var(--primary); }
.footer-brand p { font-size: 13px; line-height: 1.8; }
.footer-social { display: flex; gap: 8px; margin-top: 16px; }
.footer-social a { width: 36px; height: 36px; border-radius: 8px; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: #A8ACB8; font-size: 16px; transition: var(--transition); }
.footer-social a:hover { background: var(--primary); color: #fff; }
.footer-col h4 { font-size: 11px; font-weight: 800; color: #fff; margin-bottom: 14px; text-transform: uppercase; letter-spacing: .7px; }
.footer-col ul li { margin-bottom: 9px; }
.footer-col ul a { font-size: 13px; color: #A8ACB8; transition: var(--transition); }
.footer-col ul a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 18px 0; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 12px; }
/* ═════════════════════════
TABLET: 640px+
═════════════════════════ */
@media (min-width: 640px) {
.container { padding: 0 20px; }
.news-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
background: transparent; box-shadow: none;
border-radius: 0; gap: 16px;
}
.news-card {
flex-direction: column; border-bottom: none;
border-radius: var(--radius-xl); box-shadow: var(--shadow);
overflow: hidden;
}
.news-card > a { width: auto; min-width: unset; }
.news-card .card-img { width: 100%; height: auto; min-height: unset; aspect-ratio: 16/9; }
.news-card .card-excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-slider { aspect-ratio: 16/7; }
.hero-slide-title { font-size: 24px; }
.related-grid { grid-template-columns: repeat(2, 1fr); }
.three-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
}
/* ═════════════════════════
TABLET LARGE: 768px+
═════════════════════════ */
@media (min-width: 768px) {
body { font-size: 15px; }
.container { padding: 0 24px; }
.main-content { padding: 24px 0 56px; }
.header-top { height: 68px; padding: 0 24px; gap: 16px; }
.header-logo { font-size: 22px; }
.logo-icon { width: 36px; height: 36px; font-size: 18px; }
.header-meta { display: flex; }
.header-search { display: block; }
.header-search-icon { display: none; }
#mobileMenuBtn { display: none !important; }
.site-nav { display: block; }
.hero-section { display: grid; grid-template-columns: 1fr 280px; gap: 16px; }
.hero-slider { margin-bottom: 0; aspect-ratio: auto; height: 100%; min-height: 320px; }
.hero-slide-title { font-size: 22px; }
.hero-side-item img { width: 90px; height: 64px; }
.section-title { font-size: 18px; }
.content-grid { display: grid; grid-template-columns: 1fr 290px; gap: 24px; }
.news-grid { grid-template-columns: repeat(3, 1fr); }
.detail-title { font-size: 30px; }
.footer-main { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; padding: 44px 0; }
.footer-bottom { flex-direction: row; justify-content: space-between; }
.modal { border-radius: 16px; max-width: 560px; align-self: center; }
.modal-overlay { align-items: center; padding: 24px; }
.auth-box { padding: 40px 36px; }
}
/* ═════════════════════════
DESKTOP: 1024px+
═════════════════════════ */
@media (min-width: 1024px) {
.hero-section { grid-template-columns: 1fr 320px; gap: 20px; }
.hero-side-item img { width: 100px; height: 72px; }
.hero-slide-title { font-size: 26px; }
.hero-slide-body { padding: 28px 28px 32px; }
.section-title { font-size: 20px; }
.content-grid { grid-template-columns: 1fr 310px; gap: 28px; }
.news-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
.three-col { grid-template-columns: 1fr 1fr 1fr; }
.detail-title { font-size: 34px; }
.related-grid { grid-template-columns: repeat(4, 1fr); }
.footer-main { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 44px; padding: 52px 0; }
.prevnext .title { font-size: 14px; }
}
/* ═════════════════════════
WIDE: 1280px+
═════════════════════════ */
@media (min-width: 1280px) {
.header-search { max-width: 360px; }
.header-meta { gap: 18px; font-size: 13px; }
.hero-section { grid-template-columns: 1fr 340px; }
}
/* ═══ SEARCH RESULTS PAGE ═══ */
.search-results-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 8px; }
.search-results-header h1 { font-size: 20px; font-weight: 700; }
.search-results-header span { font-size: 13px; color: var(--text-secondary); }