:root {
--color-primary: #D72772; --color-primary-dark: #b01c5b;
--color-text-main: #000000;
--color-text-meta: #757575;
--color-bg-light: #ffffff;
--border-color: #eeeeee;
--bg-widget: #F5F5F5; --font-serif: 'Lato', serif; --font-ui: 'Lato', sans-serif; --font-body: 'Lato', sans-serif; --container-width: 990px;
}
body.dark-mode {
--color-bg-light: #121212;
--color-text-main: #e0e0e0;
--bg-widget: #1e1e1e;
--border-color: #1e1e1e;
}
body.dark-mode h1, 
body.dark-mode h2, 
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode a {
color: #fff !important;
} *, *::before, *::after {
box-sizing: border-box;
}
html, body {
max-width: 100%;
overflow-x: hidden !important; position: relative;
}
body {
background-color: var(--color-bg-light);
color: var(--color-text-main);
font-family: var(--font-body);
font-size: 16px;
line-height: 1.6;
margin: 0;
padding: 0;
}
a {
color: var(--color-text-main);
text-decoration: none;
transition: all 0.2s ease;
}
a:hover {
color: var(--color-primary);
}
img {
max-width: 100%;
height: auto;
display: block;
} .container {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 20px;
}  .site-header {
background: var(--color-bg-light);
position: relative; top: auto;
z-index: 1000;
padding-top: 0;
} .header-main {
background: var(--color-bg-light); top: 0;
z-index: 9999;
width: 100%;
height: 60px;
padding-top: 10px;
border-bottom: 2px solid var(--border-color);
max-width: var(--container-width);
margin: 0 auto;
} .header-main .container {
display: grid !important;
grid-template-columns: auto 1fr auto !important;
align-items: center;
gap: 20px; width: 100%;
max-width: 1140px;
margin: 0 auto;
padding: 0 10px;
} .header-logo {
width: 163px;
height: auto;
display: flex;
align-items: center;
}
.header-logo img {
height: auto;
max-height: 40px; width: auto;
display: block;
transition: opacity 0.3s ease;
}
.site-branding, 
.header-logo, 
.custom-logo-link {
position: relative;
display: block;
line-height: 0; }
.custom-logo {
height: auto;
width: auto;
max-height: 40px; transition: opacity 0.2s ease;
} .logo-light {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
.logo-dark {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important; height: 0 !important;
}
body.dark-mode .logo-light {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
width: 0 !important;
height: 0 !important;
}
body.dark-mode .logo-dark {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: auto !important; height: auto !important;
}
.mobile-logo {
width: 163px;
height: auto;
display: flex;
align-items: center;
}
.header-logo svg {
height: 24px;
width: auto;
display: block;
} .main-navigation {
display: flex;
justify-content: center; width: 100%;
}
.main-navigation ul {
display: flex;
flex-wrap: nowrap; list-style: none;
margin: 0;
padding: 0;
gap: 15px; }
.main-navigation a {
font-family: var(--font-ui);
font-weight: 700;
font-size: 14px;
color: var(--color-text-main);
text-decoration: none;
white-space: nowrap; text-transform: uppercase;
}
.main-navigation a:hover { color: #D72772; } .header-actions {
display: flex;
align-items: center;
gap: 12px; }
.icon-btn {
background: transparent;
border: none;
cursor: pointer; width: 40px; 
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #333; transition: all 0.2s ease;
}
.icon-btn:hover {
background-color: #f5f5f5;
color: var(--color-primary); transform: translateY(-2px); }
.icon-btn svg {
width: 22px;
height: 22px;
stroke-width: 2px;
}
body.dark-mode .icon-btn {
color: #fff;
}
body.dark-mode .icon-btn:hover {
background-color: #333;
color: var(--color-primary);
} .drawer-header {
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 20px;
margin-bottom: 20px;
border-bottom: 1px solid #eee;
}
.drawer-header .mobile-logo {
margin: 0;
border: none;
padding: 0;
} .close-btn {
position: static; width: 36px;
height: 36px;
background: #f9f9f9;
border-radius: 50%;
border: 1px solid #eee;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #555;
}
.close-btn:hover {
background: #D72772;
color: #fff;
border-color: #D72772;
} @media (max-width: 600px) {
.header-actions { gap: 8px; }
.icon-btn { width: 36px; height: 36px; }
.icon-btn svg { width: 20px; height: 20px; }
.login-btn { font-size: 11px; padding: 6px 12px; }
} .login-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 6px; background-color: var(--color-button); 
color: #fff !important;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 700;
padding: 8px 16px;
border-radius: 6px;
white-space: nowrap;
line-height: 1;
height: 36px;
}
.login-btn:hover {
filter: brightness(0.9); 
text-decoration: none;
} @media (max-width: 991px) { .header-main .container {
display: flex !important;
flex-wrap: wrap !important;
justify-content: space-between;
align-items: center;
padding: 10px 20px 0; } .header-logo {
order: 1;
width: 50%; margin-right: 0;
margin-bottom: 10px;
} .header-actions {
order: 2;
width: 50%;
justify-content: flex-end;
margin-left: 0;
margin-bottom: 10px;
} .main-navigation {
display: block !important; order: 3;  width: 100vw !important; 
margin-left: -20px; margin-right: -20px;
padding: 0 20px; background: #fff;
border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); overflow-x: auto;
white-space: nowrap; -webkit-overflow-scrolling: touch;  scrollbar-width: none; 
-ms-overflow-style: none;
} .main-navigation::-webkit-scrollbar {
display: none;
}
.main-navigation ul {
display: flex;
gap: 25px; padding: 0;
margin: 0;
height: 50px; align-items: center;
} .main-navigation ul li:last-child {
padding-right: 20px;
}
.main-navigation a {
font-size: 14px;
color: #555;
font-weight: 600;
text-transform: capitalize;
display: inline-block;
} .main-navigation .current-menu-item > a {
color: var(--color-primary);
} .login-btn {
display: none !important;
} .menu-toggle {
display: block;
font-size: 24px;
} .popbela-hero-section {
display: none !important;
}
} .foryou-container {
padding-top: 15px;
padding-bottom: 15px;
background: var(--color-bg-light);
position: relative;
z-index: 900;
}
.foryou-box { background: linear-gradient(
90deg, 
var(--color-foryou-start) 0%, 
var(--color-foryou-end) 100%
);
border-radius: 12px;
padding: 10px 20px;
display: flex;
align-items: center;
gap: 20px;
height: 60px;
overflow: hidden;
}
.foryou-label {
font-family: var(--font-ui);
font-weight: 700;
color: #fff;
font-size: 14px;
line-height: 1.1;
flex-shrink: 0;
border-right: 1px solid rgba(255,255,255,0.3);
padding-right: 15px;
margin-right: 5px;
text-align: center;
} .foryou-scroll {
display: flex;
gap: 12px;
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none; align-items: center;
width: 100%;
}
.foryou-scroll::-webkit-scrollbar { 
display: none; } .foryou-pill {
background: var(--color-bg-light);
color: var(--color-primary) !important;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
padding: 6px 14px;
border-radius: 20px;
display: inline-block;
}
.foryou-pill:hover {
transform: scale(1.05);
color: var(--color-primary) !important;
} .header-search-bar {
display: none;
position: absolute;
top: 100%; left: 0; width: 100%;
background: #fff;
padding: 20px 0;
border-top: 1px solid #eee;
box-shadow: 0 5px 10px rgba(0,0,0,0.05);
}
.header-search-bar form { display: flex; justify-content: center; }
.header-search-bar input { width: 70%; padding: 10px; border: 1px solid #ddd; }
.search-close { background: none; border: none; font-size: 2rem; cursor: pointer; margin-left: 10px; } .popbela-hero-section {
max-width: var(--container-width);
margin: 30px auto 50px;
padding: 0 20px;
}
.hero-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 350px 200px;
gap: 10px;
}
.hero-item { position: relative; overflow: hidden; border-radius: 8px; }
.hero-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.hero-item:hover img { transform: scale(1.05); }
.hero-content {
position: absolute; bottom: 0; left: 0; right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
color: #fff; padding: 20px; pointer-events: none;
}
.hero-item h2 {
font-family: var(--font-serif); font-weight: 700;
font-size: 1.2rem; margin: 5px 0 0; line-height: 1.3; color: #fff;
} .hero-item.main-headline { grid-column: 1 / span 2; grid-row: 1 / span 2; }
.hero-item.main-headline h2 { font-size: 2rem; }
.hero-item.sub-headline { grid-column: span 1; grid-row: span 1; } .site-content {
max-width: var(--container-width);
margin: 0 auto;
padding: 0 20px;
display: flex;
gap: 5px; } @media (min-width: 992px) {
.site-content { flex-wrap: nowrap; }
#primary {
width: 65%;
flex: 0 0 65%;
max-width: 65%;
}
#secondary {
width: 35%;
flex: 0 0 35%;
max-width: 35%;
padding-left: 20px;
}
} .popbela-post-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-bottom: 40px;
}
.grid-card { display: flex; flex-direction: column; margin-bottom: 0; }
.card-thumbnail {
position: relative; overflow: hidden; margin-bottom: 5px;
border-radius: 8px; aspect-ratio: 4/3; background: #eee;
}
.card-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.grid-card:hover .card-thumbnail img { transform: scale(1.05); }
.card-category {
position: absolute; bottom: 10px; left: 10px;
background: var(--color-primary); color: #fff;
font-family: var(--font-ui); font-size: 10px; font-weight: bold; 
text-transform: uppercase; padding: 4px 8px; border-radius: 4px; z-index: 2;
}
.card-title {
font-size: 16px; line-height: 1.3;
margin-bottom: 10px; font-weight: 700;
}
.card-title a { color: #000; }
.card-title a:hover { color: var(--color-primary); }
.card-excerpt { font-size: 14px; color: var(--color-text-meta); margin-bottom: 10px; }
.card-meta { font-size: 11px; color: var(--color-text-main); text-transform: uppercase; letter-spacing: 1px; } .popbela-article { margin-bottom: 60px; }
.popbela-header { text-align: center; margin-bottom: 30px; }
.entry-meta-category .cat-label {
color: var(--color-primary); text-transform: uppercase; font-weight: 700;
font-family: var(--font-ui); font-size: 12px; letter-spacing: 1px;
}
.popbela-header .entry-title {
font-family: var(--font-serif); font-size: 2.8rem; font-weight: 700;
line-height: 1.2; margin: 15px 0 20px; color: #000;
}
.popbela-featured-image { margin-bottom: 40px; width: 100%; border-radius: 8px; overflow: hidden; }
.popbela-content { font-size: 18px; line-height: 1.8; color: var(--color-text-main); font-family: var(--font-body); }
.popbela-content p { margin-bottom: 1.5em; }
.popbela-content h2 { font-family: var(--font-serif); margin-top: 40px; } .popbela-related-section { margin-top: 10px; padding-top: 20px; }
.related-heading { font-family: var(--font-ui); font-weight: 900; text-transform: uppercase; letter-spacing: 2px; }
.popbela-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.related-item .related-thumb { aspect-ratio: 16/9; background: #eee; margin-bottom: 10px; overflow: hidden; border-radius: 4px; }
.related-item img { width: 100%; height: 100%; object-fit: cover; }
.related-title { font-family: var(--font-serif); font-size: 1rem; font-weight: 700; line-height: 1.3; }  #secondary {
width: 100%;
padding: 0;
border: none;
margin-top: 40px;
}
.widget {
margin-bottom: 10px;
}
.widget-title {
font-family: var(--font-ui);
font-size: 18px;
font-weight: 900;
text-transform: uppercase;
letter-spacing: 1px;
padding-bottom: 10px;
margin-bottom: 20px;
color: #000;
border-bottom: 2px solid var(--border-color);
} .widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li a { color: var(--color-text-main); font-weight: 700; }
.widget ul li a:hover { color: var(--color-primary); } @media (min-width: 992px) {
#secondary { width: 35%;
flex: 0 0 35%;
max-width: 35%; padding-left: 20px;
margin-top: 0; position: static; 
top: auto;
height: auto;
}
} .popbela-trending-list {
list-style: none;
padding: 0;
margin: 0;
}
.trending-item {
display: flex; align-items: flex-start; margin-bottom: 10px;
padding-bottom: 15px;
}
.trending-item:last-child {
border-bottom: none;
} .trending-number {
font-family: var(--font-serif); font-size: 3rem;
line-height: 0.8;
font-weight: 700;
color: #e0e0e0; margin-right: 20px;
min-width: 30px;
text-align: center;
font-style: italic;
margin-top: 5px; } .trending-detail {
flex: 1;
display: flex;
flex-direction: column; justify-content: center;
} .trending-cat {
font-family: var(--font-ui);
font-size: 10px;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 700;
color: var(--color-primary); margin-bottom: 5px; text-decoration: none;
display: inline-block;
} .trending-title {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.4;
color: var(--color-text-main);
font-weight: 600;
text-decoration: none;
transition: color 0.2s;
} .trending-item:hover .trending-number {
color: var(--color-primary);
}
.trending-title:hover {
color: var(--color-primary);
} .site-footer {
background-color: #111;
color: #999;
padding: 50px 0;
text-align: center;
margin-top: 60px;
width: 100%; display: block;
position: relative;
z-index: 10;
}
.site-footer a { color: #fff; }  @media (max-width: 991px) { .header-main {
position: fixed !important; top: 0;
left: 0;
width: 100%;
z-index: 9999; background: var(--color-bg-light);
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
height: auto; transition: all 0.3s ease;
}  body {
padding-top: 110px; } .header-main .container {
display: flex !important;
flex-wrap: wrap !important;
justify-content: space-between;
align-items: center;
gap: 0 !important;
padding: 10px 20px 0;
} .header-logo {
order: 1;
width: 50%;
margin-right: 0;
margin-bottom: 5px;
}
.header-actions {
order: 2;
width: 50%;
justify-content: flex-end;
margin-left: 0;
margin-bottom: 5px;
} .main-navigation {
display: block !important;
order: 3;
width: 100vw !important; margin-left: -20px; margin-right: -20px;
padding: 0 20px;
background: var(--color-bg-light); overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;  border-top: 1px solid #f0f0f0;
} .main-navigation::-webkit-scrollbar {
display: none;
}
.main-navigation ul {
display: flex;
padding: 0;
margin: 0;
gap: 20px;
height: 45px; align-items: center;
}
.main-navigation a {
font-size: 14px;
color: #555;
font-weight: 600;
display: inline-block;
line-height: 45px; }
.main-navigation a:hover {
color: var(--color-primary);
} .login-btn {
display: none !important;
} .menu-toggle {
display: block;
padding: 5px;
font-size: 24px;
} .foryou-container { margin-top: 10px; 
position: relative;
z-index: 1;
}
}
@media (max-width: 600px) {
.foryou-box { padding: 8px 15px; border-radius: 8px; }
.foryou-label { font-size: 12px; padding-right: 10px; }
.login-btn { padding: 8px; } .popbela-header .entry-title { font-size: 2rem; } .popbela-related-grid { grid-template-columns: 1fr; }
.related-item { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }
.related-item .related-thumb { width: 100px; height: 80px; margin-bottom: 0; flex-shrink: 0; }
}  .mobile-menu-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.5);
z-index: 2000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.mobile-menu-overlay.active {
opacity: 1;
visibility: visible;
} .mobile-menu-drawer {
position: fixed;
top: 0;
right: -100%; width: 100%; height: 100vh; background: var(--color-bg-light);   z-index: 10000 !important; 
padding: 20px;
box-shadow: none;
transition: right 0.3s ease-in-out;
display: flex;
flex-direction: column;
overflow-y: auto; } .mobile-menu-drawer.active {
right: 0; } .mobile-logo {
margin-bottom: 30px;
border-bottom: 1px solid #eee;
padding-bottom: 20px;
padding-right: 50px; } .mobile-menu-overlay {
position: fixed;
top: 0; left: 0; right: 0; bottom: 0;
background: rgba(0,0,0,0.8); z-index: 9999; opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
backdrop-filter: blur(3px); }
.mobile-menu-overlay.active {
opacity: 1;
visibility: visible;
}
.close-btn {
position: absolute;
top: 20px;
right: 20px;
background: #f5f5f5;
border: none;
font-size: 24px;
cursor: pointer;
color: #333;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.close-btn:hover {
background: #e0e0e0;
color: #d31e63;
}  .mobile-nav-list {
display: grid;
grid-template-columns: repeat(2, 1fr); gap: 15px; padding: 10px 0;
margin: 20px 0;
list-style: none;
} .mobile-nav-list li {
border-bottom: none; margin: 0;
} .mobile-nav-list a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
background-color: var(--bg-widget); border-radius: 12px; padding: 20px 10px;
min-height: 90px; font-family: var(--font-ui);
font-weight: 800;
font-size: 14px;
color: var(--color-text-main);
text-transform: uppercase;
text-decoration: none;
transition: all 0.2s ease;
box-shadow: 0 4px 6px rgba(0,0,0,0.02);
} .mobile-nav-list a:hover {
background-color: #fff;
border-color: var(--color-primary); color: var(--color-primary);
transform: translateY(-3px);
box-shadow: 0 6px 15px rgba(215, 39, 114, 0.15);
} .mobile-nav-list .current-menu-item a {
background-color: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
box-shadow: 0 4px 10px rgba(215, 39, 114, 0.3);
}  .mobile-nav-list a::before {
content: attr(title); font-size: 24px;
margin-bottom: 5px;
opacity: 0.5;
} @media (max-width: 360px) {
.mobile-nav-list {
grid-template-columns: 1fr; }
} .mobile-nav-list a::after {
content: '';
width: 6px;
height: 6px;
background-color: #ddd;
border-radius: 50%;
margin-top: 8px;
transition: background 0.2s;
}
.mobile-nav-list a:hover::after,
.mobile-nav-list .current-menu-item a::after {
background-color: #fff; }
.mobile-nav-list a:hover::after {
background-color: var(--color-primary); }  .popbela-single-header {
text-align: left; 
margin-bottom: 25px;
}
.popbela-single-header .entry-title {
font-family: var(--font-serif);
font-size: 2.5rem; line-height: 1.2;
margin: 10px 0 15px 0;
color: #000;
}
.popbela-single-header .cat-label {
color: var(--color-primary);
font-weight: bold;
text-transform: uppercase;
letter-spacing: 1px;
font-size: 12px;
} .popbela-featured-image img {
width: 100%; height: auto;
border-radius: 8px;
} .popbela-content {
font-size: 18px;
line-height: 1.8;
color: var(--color-text-main);
margin-top: 30px;
}
.popbela-content p {
margin-bottom: 1.5em;
}
.popbela-content h2, 
.popbela-content h3 {
font-family: var(--font-serif);
margin-top: 40px;
margin-bottom: 20px;
font-weight: bold;
} .popbela-content blockquote {
border-left: 5px solid var(--color-primary);
padding-left: 20px;
margin: 30px 0;
font-style: italic;
font-size: 1.2em;
color: #555;
} .tags-links a {
display: inline-block;
background: var(--bg-widget);
color: #555;
padding: 5px 15px;
border-radius: 20px;
margin-right: 10px;
margin-bottom: 10px;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
}
.tags-links a:hover {
background: var(--color-primary);
color: #fff;
} .post-navigation {
margin-top: 40px;
border-top: 1px solid #eee;
border-bottom: 1px solid #eee;
padding: 20px 0;
display: flex;
justify-content: space-between;
}
.nav-subtitle {
display: block;
font-size: 10px;
text-transform: uppercase;
color: #999;
letter-spacing: 1px;
}
.nav-title {
font-family: var(--font-serif);
font-weight: bold;
color: #000;
font-size: 16px;
} @media (max-width: 600px) {
.popbela-single-header .entry-title {
font-size: 2rem;
}
} .popbela-single-header {
text-align: left; margin-bottom: 20px;
max-width: 100%; padding: 0;
} .popbela-breadcrumbs {
font-family: var(--font-ui); font-size: 13px;
font-weight: 600;
color: var(--color-primary); margin-bottom: 10px;
text-transform: capitalize;
}
.popbela-breadcrumbs a {
color: var(--color-primary);
text-decoration: none;
}
.popbela-breadcrumbs .sep {
margin: 0 5px;
font-size: 10px;
vertical-align: middle;
} .popbela-single-header .entry-title {
font-family: var(--font-ui); font-weight: 700; font-size: 1.5rem; line-height: 1.3;
color: var(--color-text-main); margin: 0 0 15px 0;
} .entry-meta-header {
font-family: var(--font-ui);
font-size: 13px;
line-height: 1.6;
}
.post-date {
color: var(--color-text-main); margin-bottom: 2px;
}
.post-source a {
color: var(--color-primary); font-weight: 400;
text-decoration: none;
} @media (max-width: 600px) {
.popbela-single-header .entry-title {
font-size: 1.6rem; }
} .popbela-topic-list {
list-style: none;
padding: 0;
margin: 0;
}
.popbela-topic-list li {
margin-bottom: 5px;
border-bottom: 1px solid transparent; }
.topic-item {
display: flex;
align-items: center;
justify-content: space-between; text-decoration: none;
padding: 5px 0;
transition: color 0.2s;
} .topic-left {
display: flex;
align-items: center;
gap: 15px; } .topic-num {
font-family: var(--font-ui); font-weight: 700;
font-size: 16px;
color: var(--color-text-main);
} .topic-name {
font-family: var(--font-ui);
font-size: 16px;
font-weight: 500;
color: var(--color-text-main);
} .topic-icon svg {
width: 18px;
height: 18px;
stroke: var(--color-text-main); transition: transform 0.2s;
} .topic-item:hover .topic-name,
.topic-item:hover .topic-num {
color: var(--color-primary); }
.topic-item:hover .topic-icon svg {
stroke: var(--color-primary); transform: translateX(5px); } .site-footer {
background-color: var(--color-footer-bg);
color: var(--color-footer-text);
padding: 60px 0 30px;
font-family: var(--font-ui);
font-size: 14px;
width: 100%;
}
* Link Color di Footer */
.site-footer a {
color: var(--color-footer-text);
text-decoration: none;
transition: opacity 0.2s;
}
.site-footer a:hover {
opacity: 0.7;
text-decoration: underline;
} .footer-content-wrapper {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
gap: 50px;
margin-bottom: 40px;
} .footer-left {
flex: 0 0 35%; }
.footer-logo { margin-bottom: 25px; } .footer-nav {
list-style: none;
padding: 0;
margin: 0 0 30px 0;
}
.footer-nav li {
margin-bottom: 12px;
}
.footer-nav a {
color: #fff;
font-weight: 700; text-decoration: none;
}
.footer-nav a:hover {
text-decoration: underline;
color: #fff;
} .footer-socials {
display: flex;
align-items: center;
gap: 20px;
margin-bottom: 25px;
}
.social-label, .download-label {
font-weight: 600;
min-width: 80px;
}
.social-icons {
display: flex;
gap: 10px;
}
.social-icons svg {
stroke: var(--color-footer-text);
}
.social-icons svg:hover { opacity: 0.8; } .footer-download {
display: flex;
align-items: center;
gap: 20px;
}
.download-btns {
display: flex;
gap: 10px;
}
.download-btns img {
border-radius: 5px;
border: 1px solid rgba(255,255,255,0.3);
} .footer-right {
flex: 0 0 55%; } .idn-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
text-align: left;
}
.idn-logo-area h2,
.idn-col h4, { color: var(--color-footer-text);
font-weight: 800;
}
.idn-col h4 {
color: #fff;
font-size: 16px;
font-weight: 700;
margin: 0 0 15px 0;
}
.idn-col ul {
list-style: none;
padding: 0;
margin: 0;
}
.idn-col ul li {
margin-bottom: 10px;
}
.idn-col ul li a {
color: #fff;
font-weight: 400; opacity: 0.9;
}
.idn-col ul li a:hover {
opacity: 1;
text-decoration: underline;
color: #fff;
}
.idn-col ul li.menu-item-has-children > a { font-weight: 700;
font-size: 16px;
display: block;
margin-bottom: 10px;
pointer-events: none; }
.idn-col ul .sub-menu {
list-style: none;
padding: 0;
margin-bottom: 20px;
} .site-info {
border-top: 1px solid rgba(255,255,255,0.3);
text-align: center;
padding-top: 30px;
font-size: 13px;
opacity: 0.8;
}
.site-info a { color: #fff; } @media (max-width: 991px) {
.footer-content-wrapper {
flex-direction: column;
gap: 40px;
}
.footer-left, .footer-right {
flex: 0 0 100%;
} .idn-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 600px) {
.idn-grid {
grid-template-columns: 1fr; }
.footer-socials, .footer-download {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
} .popbela-portrait-widget {
margin-bottom: 60px;
width: 100%;
box-sizing: border-box;
} .portrait-header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 25px;
border-bottom: 1px solid transparent; }
.portrait-title {
font-family: var(--font-ui); font-size: 20px;
font-weight: 700;
color: #333;
letter-spacing: 0.5px;
margin: 0;
border-bottom: 4px solid var(--color-button);
}
.portrait-see-more {
font-family: var(--font-ui);
font-size: 12px;
color: #999;
text-decoration: none;
transition: color 0.2s;
}
.portrait-see-more:hover {
color: var(--color-primary);
} .portrait-grid {
display: grid;
grid-template-columns: repeat(2, 1fr); gap: 20px;
} .portrait-item {
display: flex;
flex-direction: column;
}
.portrait-link {
text-decoration: none;
color: inherit;
} .portrait-thumb {
width: 100%; aspect-ratio: 4 / 5; 
border-radius: 8px; overflow: hidden;
margin-bottom: 15px;
background-color: #f0f0f0;
position: relative;
}
.portrait-thumb img {
width: 100%;
height: 100%;
object-fit: cover; transition: transform 0.4s ease;
}
.portrait-link:hover .portrait-thumb img {
transform: scale(1.05); } .portrait-item-title {
font-family: var(--font-ui); font-size: 16px;
font-weight: 700;
line-height: 1.4;
color: #333;
margin: 0;
text-align: center; padding: 0 10px; }
.portrait-link:hover .portrait-item-title {
color: var(--color-primary);
} @media (max-width: 600px) {
.portrait-grid {
grid-template-columns: 1fr; }
.portrait-thumb {
aspect-ratio: 16/9; }
} .popbela-search-overlay {
display: none; position: absolute;
top: 100%; left: 0;
width: 100%;
background-color: var(--color-button);
padding: 20px 0;
z-index: 1100;
box-shadow: 0 4px 10px rgba(0,0,0,0.1);
animation: slideDown 0.3s ease-out;
} @keyframes slideDown {
from { opacity: 0; transform: translateY(-10px); }
to { opacity: 1; transform: translateY(0); }
}
.search-container-inner {
position: relative; max-width: 1140px;
margin: 0 auto;
padding: 0 20px;
} .search-close-btn {
position: absolute;
top: -35px; right: 20px;
background: #fff; border: none;
border-radius: 50%;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
color: #333;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
transition: transform 0.2s;
}
.search-close-btn:hover {
transform: scale(1.1);
color: #d31e63;
} .popbela-search-form {
position: relative;
width: 100%;
} .popbela-search-form .search-field {
width: 100%;
background: #fff;
border: none;
border-radius: 50px; padding: 15px 50px 15px 25px; font-family: var(--font-body);
font-size: 16px;
color: #333;
outline: none;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}
.popbela-search-form .search-field::placeholder {
color: #999;
} .popbela-search-form .search-submit {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
background: transparent;
border: none;
color: #333;
cursor: pointer;
padding: 5px;
display: flex;
align-items: center;
}
.popbela-search-form .search-submit:hover {
color: var(--color-primary);
} @media (max-width: 600px) {
.popbela-search-overlay {
padding: 15px 0;
}
.search-close-btn {
top: -45px; right: 10px;
}
.popbela-search-form .search-field {
font-size: 14px;
padding: 12px 45px 12px 20px;
}
} .popbela-headline-widget {
margin-bottom: 10px;
} .headline-featured {
position: relative;
margin-bottom: 20px;
border-radius: 8px;
overflow: hidden;
aspect-ratio: 16/9; }
.headline-featured img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
.headline-featured:hover img {
transform: scale(1.05);
} .featured-overlay {
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(to top, rgba(0,0,0,0.8) 10%, transparent 60%);
pointer-events: none;
} .featured-content {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 20px;
z-index: 2;
}
.featured-title {
font-family: var(--font-ui);
font-size: 22px;
font-weight: 700;
color: #fff;
margin: 0 0 10px 0;
line-height: 1.3;
text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.featured-meta {
font-size: 12px;
color: #eee;
font-family: var(--font-ui);
}
.featured-meta .cat-name {
font-weight: 700;
text-transform: uppercase;
color: #fff;
} .headline-sub-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.sub-item {
display: flex;
flex-direction: column;
}
.sub-thumb {
width: 100%;
aspect-ratio: 16/9;
border-radius: 8px;
overflow: hidden;
margin-bottom: 10px;
}
.sub-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sub-title {
font-family: var(--font-ui);
font-size: 16px;
font-weight: 700;
line-height: 1.4;
margin: 0 0 5px 0;
}
.sub-title a {
color: var(--color-text-main);
text-decoration: none;
}
.sub-title a:hover {
color: var(--color-primary);
}
.sub-meta {
font-size: 11px;
line-height: 1.5;
font-family: var(--font-ui);
}
.sub-date {
color: var(--color-text-main);
}
.sub-cat {
color: var(--color-primary); font-weight: 600;
text-transform: uppercase;
text-decoration: none;
} @media (max-width: 600px) { .popbela-headline-widget {
margin-bottom: 40px;
overflow: hidden; } .headline-featured {
width: 100%;
margin-bottom: 20px;
border-radius: 8px; }
.featured-title {
font-size: 18px; } .headline-sub-grid {
display: flex !important; flex-wrap: nowrap !important; gap: 15px;  overflow-x: auto;
padding-bottom: 20px;  scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none;  padding-right: 20px; 
} .headline-sub-grid::-webkit-scrollbar {
display: none;
} .sub-item {
min-width: 240px; max-width: 240px;
flex-shrink: 0;  scroll-snap-align: start; 
} .sub-thumb {
aspect-ratio: 16/9;
margin-bottom: 10px;
border-radius: 6px;
}
} @media (max-width: 991px) { #content, 
.site-content {
display: flex !important;
flex-wrap: wrap !important; flex-direction: column !important; gap: 0 !important; } #primary, 
#secondary {
width: 100% !important;
flex: 0 0 100% !important;
max-width: 100% !important;
min-width: 100% !important;
} #secondary {
margin-top: 40px !important; padding-left: 0 !important; border-left: none !important; padding-top: 30px;
} .widget {
width: 100%;
margin-bottom: 30px;
}
} @media (max-width: 768px) { .popbela-post-grid {
grid-template-columns: 1fr !important;
gap: 20px;
} .grid-card {
flex-direction: row !important; align-items: center; border-bottom: 1px solid #f5f5f5; padding-bottom: 20px;
margin-bottom: 0;
} .card-thumbnail {
width: 110px; height: 85px; flex-shrink: 0; margin-bottom: 0 !important; margin-right: 15px; border-radius: 6px;
} .card-thumbnail .card-category {
display: none; 
} .card-title {
font-size: 16px !important; line-height: 1.4 !important;
margin-bottom: 5px !important;
} .card-excerpt {
display: none !important;
} .card-meta {
font-size: 11px;
color: var(--color-text-main);
}
} @media (max-width: 768px) {
.popbela-hero-section {
display: none !important;
}
} .popbela-tag-block {
width: 100%; padding: 15px; border-radius: 8px; margin-bottom: 15px;
box-sizing: border-box;
} .tag-block-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 1px solid rgba(255,255,255,0.2); }
.tag-block-title {
font-family: var(--font-ui);
font-size: 18px;
font-weight: 800;
margin: 0;
line-height: 1; border-bottom: 4px solid currentColor;
padding-bottom: 15px;
margin-bottom: -17px; }
.tag-see-more {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
opacity: 0.9;
}
.tag-see-more:hover {
text-decoration: underline;
opacity: 1;
} .tag-block-grid {
display: grid;
grid-template-columns: repeat(3, 1fr); gap: 25px;
}
.tag-card a {
text-decoration: none;
}
.tag-card-thumb {
width: 100%;
aspect-ratio: 16/9;
overflow: hidden;
margin-bottom: 10px;
border-radius: 4px;
background: rgba(0,0,0,0.2);
}
.tag-card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.tag-card:hover .tag-card-thumb img {
transform: scale(1.05);
}
.tag-card-title {
font-family: var(--font-ui);
font-size: 16px; font-weight: 700;
line-height: 1.4;
margin: 0 0 8px 0;
}
.tag-card-cat {
font-family: var(--font-ui);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
} @media (max-width: 768px) {
.popbela-tag-block {
width: 100vw !important; margin-left: -20px !important; padding: 30px 0; border-radius: 0; }
.tag-block-header {
padding: 0 20px 15px; }
.tag-block-grid {
display: flex;
gap: 15px;
overflow-x: auto;
padding: 0 10px 0 10px; 
scroll-snap-type: x mandatory;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
-ms-overflow-style: none;
} .tag-block-grid::-webkit-scrollbar {
display: none;
} .tag-card {
min-width: 260px; max-width: 260px; flex-shrink: 0; scroll-snap-align: center;  } .tag-block-title {
font-size: 20px;
padding-bottom: 10px;
}
}  .popbela-interscroller-ad {
position: relative;
width: auto; height: 75vh; margin: 50px -20px;  clip-path: inset(0); 
z-index: 10;
border-top: 2px solid #000;
border-bottom: 2px solid #000;
} .ad-wrapper { position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%; display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #1a1a1a; z-index: -1; } .ad-scroll-notice {
position: absolute;
top: 0;
left: 0;
width: 100%;
background-color: #000;
color: #fff;
font-family: var(--font-ui);
font-size: 12px;
text-transform: uppercase;
letter-spacing: 1px;
padding: 5px 0;
text-align: center;
z-index: 2;
} .ad-placeholder {
width: 300px;
height: 250px;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
color: #000;
font-weight: bold;
} @media (min-width: 992px) {
.popbela-interscroller-ad {
display: none !important; }
}  .popbela-share-container {
background-color: var(--bg-widget); border-radius: 8px;
padding: 15px 20px;
display: flex;
justify-content: space-between; align-items: center;
margin: 30px 0;
}
.share-btn {
color: #666; display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.2s ease;
padding: 5px;
background: none;
border: none;
cursor: pointer;
}
.share-btn svg {
width: 22px;
height: 22px;
stroke-width: 2; } .share-btn:hover { transform: translateY(-2px); }
.share-btn[aria-label*="X"]:hover { color: #000; }
.share-btn[aria-label*="Facebook"]:hover { color: #1877F2; }
.share-btn[aria-label*="Telegram"]:hover { color: #0088cc; }
.share-btn[aria-label*="WhatsApp"]:hover { color: #25D366; }
.share-btn[aria-label*="Copy"]:hover { color: var(--color-primary); }
.share-btn[aria-label*="Comments"]:hover { color: var(--color-primary); } .popbela-gnews-container {
text-align: center;
margin-bottom: 40px;
}
.gnews-link {
font-family: var(--font-ui);
font-weight: 700;
font-size: 16px;
color: var(--color-text-main);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 5px;
padding: 10px 15px;
border-radius: 50px; transition: background 0.2s;
}
.gnews-link:hover {
background-color: #f9f9f9;
text-decoration: none;
} @media (max-width: 480px) {
.popbela-share-container {
padding: 12px 10px;
}
.share-btn svg {
width: 20px;
height: 20px;
}
.gnews-link {
font-size: 14px;
}
} .popbela-inline-related {
margin: 30px 0;
width: 100%;
clear: both;
} .inline-related-title {
font-family: var(--font-ui);
font-size: 16px;
font-weight: 800; color: var(--color-primary); margin: 0 0 10px 0;
text-transform: capitalize;
} .inline-related-grid {
background-color: var(--color-bg-light); padding: 20px;
border-top: 3px solid var(--border-color); display: grid;
grid-template-columns: repeat(3, 1fr); gap: 0; } .inline-related-item {
padding: 0 20px;
border-right: 2px solid var(--border-color); display: flex;
align-items: flex-start;
} .inline-related-item:last-child {
border-right: none;
}
.inline-related-item:first-child {
padding-left: 0;
}
.inline-related-item:nth-child(3) {
padding-right: 0;
} .inline-related-item a {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 700; line-height: 1.4;
color: #000;
text-decoration: none; display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.inline-related-item a:hover {
color: var(--color-primary);
text-decoration: underline;
} @media (max-width: 768px) {
.inline-related-grid {
grid-template-columns: 1fr; gap: 15px;
}
.inline-related-item {
border-right: none; border-bottom: 1px solid #ddd; padding: 0 0 15px 0;
}
.inline-related-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
} .popbela-video-section {
margin: 50px 0;
width: 100%;
} .video-featured-box {
background-color: #000; color: #fff;
padding: 40px 0;
width: 100vw;
position: relative;
left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw; }
.v-featured-wrapper {
display: flex;
gap: 40px;
align-items: center;
}
.v-player {
flex: 1.5; aspect-ratio: 16/9;
background: #111;
border-radius: 8px;
overflow: hidden;
}
.v-player iframe, .v-player img {
width: 100%; height: 100%; object-fit: cover;
}
.v-info {
flex: 1; }
.v-label {
font-family: var(--font-ui);
font-size: 18px;
font-weight: 300; text-transform: uppercase;
display: block;
margin-bottom: 10px;
}
.v-title {
font-family: var(--font-ui);
font-size: 28px;
font-weight: 700;
line-height: 1.3;
margin-bottom: 25px;
color: #fff;
}
.v-btn {
display: inline-block;
background: var(--bg-widget);
color: #000;
font-family: var(--font-ui);
font-weight: 700;
padding: 10px 20px;
border-radius: 4px;
text-decoration: none;
transition: background 0.3s;
}
.v-btn:hover {
background: var(--color-primary);
color: #fff;
} .video-sub-grid {
display: grid;
grid-template-columns: repeat(4, 1fr); gap: 20px;
margin-top: 30px;
}
.v-sub-thumb {
position: relative;
aspect-ratio: 16/9;
border-radius: 6px;
overflow: hidden;
margin-bottom: 10px;
}
.v-sub-thumb img {
width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s;
}
.v-sub-item:hover .v-sub-thumb img { transform: scale(1.05); }
.play-icon {
position: absolute; bottom: 10px; left: 10px;
width: 24px; height: 24px; background: rgba(0,0,0,0.7);
color: #fff; font-size: 10px; display: flex;
align-items: center; justify-content: center;
border-radius: 50%;
}
.v-sub-title {
font-size: 14px; font-weight: 700; line-height: 1.4; margin: 0 0 5px; color: #000;
}
.v-sub-date { font-size: 11px; color: var(--color-text-main); } @media (max-width: 768px) {
.v-featured-wrapper { flex-direction: column; gap: 20px; }
.v-player { width: 100%; }
.v-info { text-align: left; width: 100%; }
.v-title { font-size: 20px; }
.video-sub-grid {
display: flex; overflow-x: auto; gap: 15px; padding-bottom: 10px;
}
.v-sub-item { min-width: 200px; }
}  .video-theater-section {
background-color: #000;
padding: 40px 0;
margin-bottom: 40px;
width: 100%;
} .video-player-wrapper {
position: relative;
padding-bottom: 56.25%; height: 0;
overflow: hidden;
background: #111;
border-radius: 8px;
box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.video-player-wrapper iframe,
.video-player-wrapper video,
.video-player-wrapper img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
} .video-breadcrumb {
font-size: 12px;
color: #888;
text-transform: uppercase;
font-weight: 700;
margin-bottom: 10px;
}
.video-breadcrumb a { color: var(--color-primary); text-decoration: none; } .play-icon-small {
position: absolute;
bottom: 5px; left: 5px;
width: 20px; height: 20px;
background: rgba(0,0,0,0.7);
color: #fff;
font-size: 8px;
display: flex; align-items: center; justify-content: center;
border-radius: 50%;
} @media (max-width: 768px) {
.video-theater-section {
padding: 0; margin-bottom: 20px;
}
.video-player-wrapper {
border-radius: 0; }
} .related-videos-box {
margin-top: 40px;
padding-top: 30px;
} .related-thumb {
position: relative; }
.video-play-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); background-color: rgba(0, 0, 0, 0.6); border: 2px solid #fff;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none; transition: all 0.3s ease;
} .video-card:hover .video-play-icon {
background-color: var(--color-primary); border-color: var(--color-primary);
transform: translate(-50%, -50%) scale(1.1); }
.video-card:hover .related-thumb img {
transform: scale(1.05); opacity: 0.9;
} .popbela-after-article-area {
margin-top: 5px;
padding-top: 10px;
width: 100%;
} .popbela-after-article-area .widget-title,
.popbela-after-article-area .block-title {
font-size: 20px;
margin-bottom: 20px;
display: block;
border-bottom: 2px solid #000;
padding-bottom: 10px;
} .popbela-after-article-area .block-list {
display: grid;
grid-template-columns: 1fr 1fr; gap: 30px;
} .popbela-after-article-area .block-item {
flex-direction: column; }
.popbela-after-article-area .block-thumb {
width: 100%;
flex: none;
margin-bottom: 15px;
}
.popbela-after-article-area .block-item-title {
font-size: 16px;
} @media (max-width: 600px) {
.popbela-after-article-area .block-list {
grid-template-columns: 1fr; }
.popbela-after-article-area .block-item {
flex-direction: row; align-items: center;
}
.popbela-after-article-area .block-thumb {
width: 100px;
height: 75px;
margin-bottom: 0;
}
} .popbela-banner-widget {
text-align: center;
margin-bottom: 30px;
clear: both;
width: 100%;
} .banner-img {
max-width: 100%; height: auto;
display: inline-block; border-radius: 4px;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
transition: opacity 0.2s;
} .banner-link:hover .banner-img {
opacity: 0.9;
} .ad-label-text {
font-family: var(--font-ui);
font-size: 10px;
color: #999;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 5px;
text-align: center;
} .popbela-cat-section {
margin-bottom: 50px;
width: 100%;
} .cat-section-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 20px;
border-bottom: 2px solid var(--border-color);
padding-bottom: 10px;
position: relative;
}
.cat-section-title {
font-family: var(--font-ui);
font-size: 18px;
font-weight: 800;
margin: 0;
color: var(--color-text-main);
}
.title-underline {
position: absolute; bottom: -1px; left: 0;
width: 60px; height: 4px; background-color: var(--color-primary);
}
.cat-section-more {
font-family: var(--font-ui);
font-size: 12px; font-weight: 600; color: var(--color-text-main);
text-decoration: none; display: flex; align-items: center; text-transform: uppercase;
}
.cat-section-more:hover { color: var(--color-primary); } .cat-section-body {
display: flex;
gap: 15px; } .cat-col-left {
flex: 0 0 60%;
max-width: 50%;
display: flex;
flex-direction: column;
gap: 20px;
} .cat-hero-item {
position: relative;
width: 100%;
height: auto;
border-radius: 12px;
overflow: hidden;
}
.hero-img img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.5s;
}
.cat-hero-item:hover .hero-img img { transform: scale(1.05); }
.hero-overlay {
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 100%);
pointer-events: none;
}
.hero-info {
position: absolute; bottom: 0; left: 0; right: 0;
padding: 20px;
z-index: 2;
color: #fff;
}
.hero-title {
font-family: var(--font-ui);
font-size: 16px; font-weight: 700; margin: 2px 0 2px;
color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.item-tag {
background: var(--color-primary); color: #fff;
padding: 2px 8px; border-radius: 4px;
font-size: 10px; font-weight: 700; text-transform: uppercase;
display: inline-block;
} .cat-col-right {
flex: 1;
display: flex;
flex-direction: column;
gap: 15px;
} .cat-small-item {
display: flex;
gap: 15px;
align-items: flex-start;
}
.cat-small-item:last-child { border-bottom: none; padding-bottom: 0; }
.small-thumb {
flex: 0 0 100px;
width: 100px; height: 100px;
border-radius: 6px; overflow: hidden;
}
.small-thumb img { width: 100%; height: 100%; object-fit: cover; }
.small-content { flex: 1; }
.small-title {
font-family: var(--font-ui);
font-size: 16px; font-weight: 700; line-height: 1.4; margin: 0 0 5px;
}
.small-title a { color: var(--color-text-main); text-decoration: none; }
.small-title a:hover { color: var(--color-primary); }
.item-tag-small {
font-size: 9px; font-weight: 700; color: var(--color-primary);
text-transform: uppercase; display: block; margin-bottom: 3px;
}
.item-date { font-size: 11px; color: var(--color-text-main); }
.hero-info .item-date { color: var(--color-text-main); }  @media (max-width: 768px) {
.cat-section-body {
flex-direction: column; gap: 20px;
}
.cat-col-left, .cat-col-right {
flex: 0 0 100%; max-width: 100%;
}
.cat-hero-item { height: 200px; }
.hero-title { font-size: 18px; }
}  .small-title a, .sport-list-title a, .sub-hero-title, .sub-title a, .cat-item-title a, .block-item-title a, .trending-title, .related-title a {
display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis; line-height: 1.4; 
max-height: 2.8em; } .hero-title, .sport-feat-title, .featured-title, .entry-title {
display: -webkit-box;
-webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
} @media (max-width: 600px) { .hero-title,
.sport-feat-title {
-webkit-line-clamp: 2; }
} .tag-card-title {
display: -webkit-box;
-webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;  line-height: 1.4;
max-height: 2.8em; margin-bottom: 10px; } @media (max-width: 768px) {
.tag-card-title {
font-size: 16px; }
} .popbela-ticker-wrap {
background-color: var(--bg-widget); width: 100%;
overflow: hidden;
margin-bottom: 20px; }
.ticker-container {
display: flex;
align-items: center;
height: 40px; overflow: hidden;
} .ticker-label {
background-color: var(--color-button);
color: #fff;
font-family: var(--font-ui);
font-size: 11px;
font-weight: 800;
text-transform: uppercase;
padding: 6px 12px;
border-radius: 4px;
white-space: nowrap;
z-index: 2; margin-right: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
} .ticker-content {
flex-grow: 1;
overflow: hidden;
white-space: nowrap;
position: relative;
mask-image: linear-gradient(to right, transparent, black 20px, black 95%, transparent); }
.ticker-move {
display: inline-block;
white-space: nowrap;
padding-left: 100%; animation: ticker-scroll 80s linear infinite; }
.ticker-move:hover {
animation-play-state: paused; } .ticker-item {
display: inline-block;
padding-right: 50px; vertical-align: middle;
}
.ticker-item a {
color: #333;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 600;
text-decoration: none;
}
.ticker-item a:hover {
color: var(--color-primary); text-decoration: underline;
} @keyframes ticker-scroll {
0% { transform: translate3d(0, 0, 0); }
100% { transform: translate3d(-100%, 0, 0); }
} @media (max-width: 600px) {
.ticker-label {
font-size: 10px;
padding: 4px 8px;
margin-right: 10px;
}
.ticker-item a {
font-size: 13px;
}
}  .popbela-cat-header {
display: flex;
align-items: baseline; justify-content: space-between;
margin-bottom: 20px;
border-bottom: 2px solid var(--border-color); padding-bottom: 10px;
}
.popbela-cat-header .widget-title {
font-family: var(--font-ui);
font-size: 18px;
font-weight: 800; color: #000;
margin: 0;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.popbela-cat-header .see-more {
font-family: var(--font-ui);
font-size: 12px;
color: var(--color-primary); text-decoration: none;
font-weight: 700;
text-transform: uppercase;
}
.popbela-cat-header .see-more:hover {
text-decoration: underline;
} .popbela-cat-list {
list-style: none;
padding: 0;
margin: 0;
}
.popbela-cat-item {
display: flex;
gap: 15px; margin-bottom: 20px;
align-items: flex-start;
padding-bottom: 15px;
}
.popbela-cat-item:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
} .cat-item-thumb {
flex: 0 0 100px; width: 100px;
height: 75px;
overflow: hidden;
border-radius: 6px; background-color: #f0f0f0;
}
.cat-item-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
} .popbela-cat-item:hover .cat-item-thumb img {
transform: scale(1.1);
} .cat-item-content {
flex: 1;
display: flex;
flex-direction: column;
}
.cat-item-title {
margin: 0 0 5px 0;
font-family: var(--font-ui);
font-size: 16px;
font-weight: 700;
line-height: 1.4;
}
.cat-item-title a {
color: #222;
text-decoration: none; display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.cat-item-title a:hover {
color: var(--color-primary);
} .cat-item-meta {
font-size: 11px;
line-height: 1.4;
font-family: var(--font-ui);
}
.cat-date {
color: var(--color-text-main);
display: block;
margin-bottom: 2px;
}
.cat-name {
color: var(--color-primary); font-weight: 700;
text-transform: uppercase;
font-size: 10px;
letter-spacing: 0.5px;
} .popbela-index-btn-wrapper {
margin: 40px 0 60px;
text-align: center; width: 100%;
} .popbela-index-btn-wrapper a {
display: inline-block;
background-color: var(--bg-widget); color: var(--color-primary); font-family: var(--font-ui);
font-size: 14px;
font-weight: 700; text-transform: uppercase;
letter-spacing: 1px;
text-decoration: none; padding: 12px 40px;
min-width: 200px; border: 2px solid var(--color-primary); border-radius: 50px; transition: all 0.3s ease;
box-shadow: 0 4px 10px rgba(215, 39, 114, 0.1);
} .popbela-index-btn-wrapper a:hover {
background-color: var(--color-primary); color: #fff; transform: translateY(-3px); box-shadow: 0 6px 15px rgba(215, 39, 114, 0.3);
} .popbela-index-btn-wrapper a::after {
content: '\2192'; margin-left: 8px;
display: inline-block;
transition: margin 0.2s;
}
.popbela-index-btn-wrapper a:hover::after {
margin-left: 12px; } @media (max-width: 768px) {
.popbela-index-btn-wrapper a {
width: 100%; display: block;
}
} .popbela-index-filter {
background-color: var(--bg-widget); padding: 20px;
border-radius: 8px;
margin-bottom: 40px;
}
.popbela-index-filter form {
display: flex;
flex-direction: column;
gap: 15px;
} .filter-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 15px;
} .filter-row-bottom {
display: grid;
grid-template-columns: 2fr 1fr; gap: 15px;
} .popbela-index-filter select {
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: #fff;
font-family: var(--font-ui);
font-size: 14px;
color: #333;
cursor: pointer;
appearance: none; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23333%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: right 15px top 50%;
background-size: 10px auto;
}
.popbela-index-filter select:focus {
border-color: var(--color-primary);
outline: none;
} .filter-btn {
background-color: var(--color-primary);
color: #fff;
border: none;
font-family: var(--font-ui);
font-weight: 700;
font-size: 14px;
border-radius: 4px;
cursor: pointer;
transition: background 0.2s;
text-transform: uppercase;
}
.filter-btn:hover {
background-color: var(--color-primary-dark);
} .no-results {
background: #fff3cd;
color: #856404;
padding: 15px;
border-radius: 4px;
border: 1px solid #ffeeba;
} .index-pagination {
margin-top: 30px;
display: flex;
justify-content: center;
gap: 5px;
}
.index-pagination .page-numbers {
padding: 8px 12px;
background: #eee;
color: #333;
text-decoration: none;
border-radius: 4px;
font-weight: bold;
}
.index-pagination .page-numbers.current {
background: var(--color-primary);
color: #fff;
} @media (max-width: 600px) {
.filter-row {
grid-template-columns: 1fr; gap: 10px;
}
.filter-row-bottom {
grid-template-columns: 1fr; gap: 10px;
}
} .popbela-index-list {
margin-top: 20px;
}
.news-text-list {
list-style: none;
padding: 0;
margin: 0;
}
.news-text-item {
border-bottom: 1px solid var(--border-color); padding: 15px 0;
margin-bottom: 0;
} .news-text-item:last-child {
border-bottom: none;
} .news-text-meta {
font-family: var(--font-ui);
font-size: 12px;
margin-bottom: 5px;
display: flex;
align-items: center;
flex-wrap: wrap;
}
.news-cat-link {
font-weight: 700;
color: var(--color-primary); text-transform: capitalize;
text-decoration: none;
margin-right: 8px;
}
.news-cat-link:hover {
text-decoration: underline;
color: var(--color-primary-dark);
}
.news-separator {
color: #ccc;
margin-right: 8px;
}
.news-date {
color: #777; } .news-text-title {
font-family: var(--font-ui);
font-size: 18px;
font-weight: 700;
line-height: 1.4;
margin: 0;
color: #000;
}
.news-text-title a {
color: #212121;
text-decoration: none;
transition: color 0.2s;
}
.news-text-title a:hover {
color: var(--color-primary);
} @media (max-width: 600px) {
.news-text-title {
font-size: 16px; }
.news-text-meta {
font-size: 11px;
}
.news-text-item {
padding: 12px 0;
}
} .popbela-popular-box {
background-color: var(--bg-widget); padding: 20px;
border-radius: 8px; margin-bottom: 40px;
} .pop-blue-header {
margin-bottom: 20px;
border-bottom: 2px solid var(--border-color); padding-bottom: 15px;
}
.pop-blue-title {
display: inline-block;
background-color: var(--color-button); color: #fff;
font-family: var(--font-ui);
font-size: 16px;
font-weight: 800;
padding: 8px 15px;
border-radius: 4px;
margin: 0;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 5px rgba(83, 109, 189, 0.3);
} .pop-blue-list {
list-style: none;
padding: 0;
margin: 0;
}
.pop-blue-item {
display: flex;
align-items: center; margin-bottom: 20px;
}
.pop-blue-item:last-child {
margin-bottom: 0;
} .pop-num {
font-family: var(--font-ui);
font-size: 24px;
font-weight: 700;
color: var(--color-primary); width: 30px;
text-align: left;
flex-shrink: 0; margin-right: 10px;
} .pop-link-wrap {
display: flex;
align-items: center;
text-decoration: none;
width: 100%;
} .pop-thumb {
width: 100px;
height: 65px;
border-radius: 8px; overflow: hidden;
flex-shrink: 0;
margin-right: 15px;
background: #ddd;
}
.pop-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.pop-link-wrap:hover .pop-thumb img {
transform: scale(1.1);
} .pop-content {
flex: 1;
display: flex;
flex-direction: column;
}
.pop-cat {
font-family: var(--font-ui);
font-size: 10px;
font-weight: 800;
text-transform: uppercase;
color: var(--color-primary); margin-bottom: 5px;
}
.pop-title {
font-family: var(--font-ui);
font-size: 16px;
font-weight: 700;
color: #212121;
margin: 0;
line-height: 1.4; display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
.pop-link-wrap:hover .pop-title {
color: var(--color-primary);
} @media (max-width: 600px) {
.popbela-popular-box {
padding: 15px; margin-left: -20px; width: calc(100% + 40px);
border-radius: 0;
}
.pop-thumb {
width: 80px; height: 60px;
}
}  .error-404 {
text-align: center;
padding: 60px 0;
border-bottom: 1px solid #eee;
margin-bottom: 40px;
}
.error-content {
max-width: 600px;
margin: 0 auto;
} .error-code {
font-family: var(--font-ui);
font-size: 150px;
font-weight: 900;
line-height: 1;
color: var(--color-primary); margin: 0;
opacity: 0.2; } .error-title {
font-family: var(--font-serif);
font-size: 32px;
font-weight: 700;
color: #212121;
margin: -40px 0 15px; position: relative;
z-index: 2;
}
.error-desc {
color: #777;
font-size: 16px;
margin-bottom: 30px;
} .error-search {
margin-bottom: 30px;
}
.error-search .search-form {
display: flex;
justify-content: center;
}
.error-search input[type="search"] {
width: 70%;
border-radius: 50px 0 0 50px;
border: 1px solid #ddd;
padding: 12px 20px;
}
.error-search button.search-submit {
border-radius: 0 50px 50px 0;
padding: 12px 25px;
background-color: var(--color-primary);
} .btn-home {
display: inline-block;
padding: 10px 30px;
border: 2px solid var(--color-primary);
color: var(--color-primary);
font-weight: 700;
border-radius: 50px;
text-decoration: none;
transition: all 0.3s;
}
.btn-home:hover {
background-color: var(--color-primary);
color: #fff;
} .rec-title {
text-align: center;
font-family: var(--font-ui);
font-weight: 800;
font-size: 20px;
margin-bottom: 30px;
text-transform: uppercase;
letter-spacing: 1px;
} @media (max-width: 768px) {
.error-code { font-size: 100px; }
.error-title { font-size: 24px; margin-top: -20px; }
.error-search input[type="search"] { width: 100%; }
}  @keyframes shineGold {
0% {
background-position: 0% center;
}
100% { background-position: 200% center; 
}
}
.popbela-badge-sponsored {
display: inline-block;
font-family: var(--font-ui);
font-size: 10px;
font-weight: 900; text-transform: uppercase;
letter-spacing: 1px;
padding: 4px 12px;
border-radius: 50px; margin-bottom: 10px;
margin-right: 10px;
vertical-align: middle;  color: #fff;
text-shadow: 0 1px 2px rgba(0,0,0,0.3);   background: linear-gradient(
110deg, 
#b38728 20%, #fdfc47 45%, #ffffff 50%, #fdfc47 55%, #b38728 80% ); background-size: 200% auto;  animation: shineGold 3s linear infinite;
} .popbela-single-header .popbela-badge-sponsored {
font-size: 11px;
margin-top: 5px;
} .popbela-stories-section {
background-color: var(--color-button); padding: 40px 0;
width: 100vw;
position: relative;
left: 50%; right: 50%; margin-left: -50vw; margin-right: -50vw;
margin-bottom: -70px;
} .stories-header {
margin-bottom: 25px;
border-bottom: 1px solid rgba(255,255,255,0.2);
padding-bottom: 10px;
display: flex;
align-items: center;
}
.stories-title {
color: #fff;
font-family: var(--font-ui);
font-weight: 800;
font-size: 18px;
letter-spacing: 2px;
margin: 0;
} .stories-scroll-wrapper {
display: flex;
gap: 15px;
overflow-x: auto;
padding-bottom: 20px;
scroll-snap-type: x mandatory; scrollbar-width: none;
-ms-overflow-style: none;
}
.stories-scroll-wrapper::-webkit-scrollbar { display: none; } .story-card {
flex: 0 0 180px; width: 180px;
text-decoration: none;
scroll-snap-align: start;
position: relative;
}
.story-thumb {
width: 100%;
aspect-ratio: 9/16; border-radius: 8px;
overflow: hidden;
position: relative;
margin-bottom: 10px;
}
.story-thumb img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.3s;
}
.story-card:hover .story-thumb img { transform: scale(1.05); } .story-overlay {
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.2), transparent 50%, rgba(0,0,0,0.8));
} .story-duration {
position: absolute; top: 10px; right: 10px;
background: rgba(0,0,0,0.6);
color: #fff;
font-size: 10px; font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
display: flex; align-items: center; gap: 4px;
} .story-item-title {
color: #fff;
font-size: 14px;
font-weight: 700;
line-height: 1.4;
margin: 0; display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
} .stories-footer {
text-align: center;
margin-top: 30px;
}
.btn-stories {
display: inline-block;
background: #dfaaa9; color: #2c1e1e;
padding: 10px 30px;
font-weight: 700;
font-size: 12px;
letter-spacing: 1px;
border-radius: 2px;
text-decoration: none;
transition: all 0.3s;
}
.btn-stories:hover {
background: #fff;
} .story-fullscreen-overlay {
position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
background-color: #111; z-index: 99999;
display: flex; align-items: center; justify-content: center;
}
.story-close-btn {
position: absolute; top: 20px; right: 20px;
color: #fff; background: rgba(255,255,255,0.2);
border-radius: 50%; width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
z-index: 200; cursor: pointer;
} .story-mobile-container {
width: 100%; max-width: 400px; height: 100%; max-height: 850px;
background: #000; position: relative; overflow: hidden;
border-radius: 16px; box-shadow: 0 0 30px rgba(0,0,0,0.5);
} .story-clean-player {
width: 100%; height: 100%; position: relative;
}
.html5-video {
width: 100%; height: 100%; object-fit: cover; display: block;
} .story-overlay-info {
position: absolute; bottom: 0; left: 0; width: 100%;
padding: 20px;
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
color: #fff; pointer-events: none;
}
.story-cat-label {
font-size: 10px; font-weight: 800; color: var(--color-primary);
text-transform: uppercase; letter-spacing: 1px;
}
.story-video-title {
font-size: 16px; font-weight: 700; line-height: 1.4; margin: 5px 0;
font-family: var(--font-ui);
text-shadow: 0 1px 2px rgba(0,0,0,0.8);
}
.story-video-date { font-size: 11px; opacity: 0.8; } .video-play-btn {
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
width: 80px; height: 80px;
display: flex; align-items: center; justify-content: center;
cursor: pointer; opacity: 0.8; transition: opacity 0.2s;
} @media (max-width: 600px) {
.story-mobile-container {
max-width: 100%; border-radius: 0; height: 100vh;
}
.story-close-btn { top: 15px; right: 15px; }
} .youtube-mode iframe { width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.05); transform-origin: center center;
} .youtube-mode .story-overlay-info {
background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
padding-bottom: 30px;
} .popbela-poll-widget {
margin-bottom: 40px;
width: 100%;
box-sizing: border-box;
} .poll-header {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 990px; margin: 0 auto 20px;
border-bottom: 2px solid var(--border-color);
}
.poll-title-head {
font-size: 18px; font-weight: 800; color: #000;
display: flex; align-items: center; gap: 10px; margin: 0;
}
.poll-bar { width: 4px; height: 24px; background: #d32f2f; display: inline-block; border-radius: 2px; }
.poll-see-more { font-size: 12px; color: #00848c; text-decoration: none; font-weight: 600; } .poll-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
max-width: 990px; margin: 0 auto;
} .poll-card {
background: var(--bg-widget);
border-radius: 8px;
overflow: hidden;
display: flex; flex-direction: column;
height: 100%; }
.poll-thumb {
width: 100%; height: 160px; background: #eee;
}
.poll-thumb img {
width: 100%; height: 100%; object-fit: cover;
}
.poll-body {
padding: 15px;
display: flex;
flex-direction: column;
flex-grow: 1;
} .poll-question {
font-size: 15px; font-weight: 700; line-height: 1.4; 
margin: 0 0 10px; color: var(--color-text-main);
flex-grow: 1; }
.poll-question a { color: var(--color-text-main); text-decoration: none; }
.poll-question a:hover { color: #00848c; }
.poll-meta-top {
display: flex; align-items: center; gap: 5px; margin-bottom: 15px;
}
.poll-author { font-size: 11px; color: var(--color-primary); font-weight: 700; }
.poll-check { font-size: 14px; color: var(--color-primary); } .poll-actions {
display: flex;
flex-direction: column; gap: 10px; width: 100%;
margin-top: 15px;
} .poll-btn {
position: relative;
width: 100%; min-height: 44px; padding: 8px 15px;
background: var(--bg-widget);
border: 1px solid #00848c;
color: #00848c;
font-weight: 700;
font-size: 14px;
border-radius: 4px;
cursor: pointer;
overflow: hidden; display: flex;
align-items: center;
justify-content: center;
}
.poll-btn:hover {
background: #e0f7fa;
} .btn-text {
z-index: 2;
display: block;
white-space: normal; line-height: 1.2;
text-align: center;
} .poll-footer {
font-size: 11px; color: #999;
display: flex; gap: 10px; margin-top: 5px;
}  .has-voted .poll-btn {
border-color: #ddd;
background-color: #f5f5f5;
color: #333;
pointer-events: none;
justify-content: space-between; 
} .btn-percent {
z-index: 2;
display: none;
font-weight: 800;
font-size: 14px;
} .btn-bar {
position: absolute;
top: 0; left: 0; bottom: 0;
background: rgba(0, 132, 140, 0.3);
z-index: 1;
width: 0;
transition: width 0.6s ease;
display: none;
}
.has-voted .poll-btn {
border-color: #ccc;
background-color: #f9f9f9;
pointer-events: none;
color: #333;
min-height: 44px;
}
.has-voted .btn-text {
display: none !important; } .has-voted .btn-percent {
display: block !important;
}
.has-voted .btn-bar {
display: block;
} @media (max-width: 768px) {
.popbela-poll-widget {
width: 100vw; margin-left: -20px; margin-right: -20px; padding: 30px 0;
}
.poll-header { padding: 0 20px; }
.poll-grid {
display: flex; overflow-x: auto; padding-bottom: 15px;
scroll-snap-type: x mandatory; gap: 15px;
padding: 0 20px 20px;
scrollbar-width: none;
}
.poll-grid::-webkit-scrollbar { display: none; }
.poll-card {
min-width: 260px; max-width: 260px; scroll-snap-align: center; flex-shrink: 0;
}
.poll-thumb img { height: 100%; }
} .full-width-narrow {
max-width: 800px; margin: 0 auto;
float: none !important; }
.poll-single-header {
text-align: center;
margin-bottom: 30px;
}
.poll-meta-date {
color: #999;
font-size: 12px;
margin-top: 5px;
}
.poll-single-thumb {
border-radius: 12px;
overflow: hidden;
margin-bottom: 40px;
box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}
.poll-single-thumb img { width: 100%; height: auto; } .poll-interaction-area {
background: var(--bg-widget);
border-radius: 16px;
padding: 10px;
text-align: center;
} .poll-instruction {
font-size: 18px;
font-weight: 700;
margin-bottom: 25px;
color: var(--color-text-main);
}
.poll-single-btn {
display: block;
width: 100%;
max-width: 400px;
margin: 0 auto 15px;
padding: 15px 20px;
font-family: var(--font-ui);
font-size: 16px;
font-weight: 700;
border: 2px solid #ddd;
background: #fff;
border-radius: 50px;
cursor: pointer;
transition: all 0.2s;
color: #555;
}
.poll-single-btn:hover {
border-color: var(--color-primary);
color: var(--color-primary);
background: #fff0f5;
} .poll-chart-wrapper {
animation: fadeIn 0.5s;
}
.chart-title {
font-size: 18px;
font-weight: 800;
margin-bottom: 20px;
text-transform: uppercase;
color: #212121;
}
.chart-container {
position: relative;
height: 250px; width: 100%;
margin-bottom: 20px;
}
.chart-legend {
display: flex;
justify-content: center;
gap: 20px;
font-size: 14px;
}
.legend-item {
display: flex;
align-items: center;
gap: 8px;
}
.legend-item .dot {
width: 12px; height: 12px; border-radius: 50%;
display: inline-block;
} @keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
} @media (max-width: 600px) {
.poll-interaction-area { padding: 20px; }
.chart-container { height: 200px; }
} .poll-share-section {
text-align: center;
margin-top: 30px;
}
.share-invite {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 700;
margin-bottom: 10px;
color: var(--color-text-main);
text-transform: uppercase;
letter-spacing: 1px;
} .poll-share-container {
display: inline-flex; justify-content: center;
gap: 20px;
background: var(--bg-widget);
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
padding: 10px 30px;
border-radius: 50px; }
.poll-share-container .share-btn {
padding: 8px;
border-radius: 50%;
background: #f5f5f5;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s, background 0.2s;
}
.poll-share-container .share-btn:hover {
transform: scale(1.1);
background: #fff;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
} .popbela-poll-archive .poll-grid {
display: grid;
grid-template-columns: repeat(5, 1fr); gap: 20px;
width: 100%;
} @media (max-width: 1200px) {
.popbela-poll-archive .poll-grid {
grid-template-columns: repeat(3, 1fr);
}
} @media (max-width: 768px) {
.popbela-poll-archive .poll-grid {
display: flex;
flex-direction: column;
} .popbela-leaderboard-container {
height: 300px; padding: 10px;
}
} .popbela-bottom-area {
display: flex;
flex-wrap: nowrap;
gap: 40px; margin-top: 50px;
margin-bottom: 60px;
align-items: flex-start; } .bottom-content-area {
flex: 2; width: 65%;
min-width: 0; } .bottom-sidebar-area {
flex: 1; width: 35%;
min-width: 300px; padding-left: 30px;
border-left: 2px solid var(--border-color); } .popbela-bottom-area .widget-title {
font-family: var(--font-ui);
font-size: 18px;
font-weight: 800;
color: #000;
border-bottom: 2px solid var(--border-color);
padding-bottom: 10px;
margin-bottom: 25px;
text-transform: uppercase;
letter-spacing: 0.5px;
} @media (max-width: 991px) {
.popbela-bottom-area {
flex-direction: column; gap: 40px;
}
.bottom-content-area, 
.bottom-sidebar-area {
width: 100%;
flex: 0 0 100%;
padding-left: 0;
border-left: none;
} .bottom-sidebar-area {
border-top: 4px solid #f5f5f5;
padding-top: 40px;
}
} @media (max-width: 991px) { .bottom-sidebar-area {
display: none !important;
} .bottom-content-area {
width: 100% !important;
flex: 0 0 100% !important;
max-width: 100% !important;
padding-right: 0 !important; }
} .popbela-fact-widget {
margin-bottom: 40px;
width: 100%;
} .fact-header {
margin-bottom: 15px;
}
.fact-title {
font-family: var(--font-ui);
font-size: 18px; font-weight: 800; color: #000;
display: flex; align-items: center; gap: 10px; margin: 0;
}
.fact-bar {
width: 4px; height: 20px; background: #d32f2f; display: inline-block; border-radius: 2px;
} .fact-container {
background-color: #000; padding: 20px 0; border-radius: 8px;
overflow: hidden;
} .fact-slider-wrapper {
position: relative;
width: 100%;
overflow: hidden;
padding-bottom: 20px;
}
.fact-slider-track {
display: flex;
transition: transform 0.4s ease-in-out;
}
.fact-slide {
min-width: 100%; box-sizing: border-box;
padding: 0 20px; } .fact-nav {
position: absolute;
top: 35%; transform: translateY(-50%);
width: 30px; height: 30px;
background: #fff;
border: none; border-radius: 50%;
color: #000; font-weight: bold; font-size: 14px;
cursor: pointer; z-index: 10;
display: flex; align-items: center; justify-content: center;
box-shadow: 0 2px 5px rgba(0,0,0,0.3);
}
.fact-nav.prev { left: 10px; }
.fact-nav.next { right: 10px; }
.fact-nav:hover { background: #d32f2f; color: #fff; } .fact-thumb {
position: relative;
width: 100%;
aspect-ratio: 4/3; border-radius: 4px;
overflow: hidden;
margin-bottom: 0;
}
.fact-thumb img {
width: 100%; height: 100%; object-fit: cover;
}
.fact-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.9) 10%, transparent 70%);
}
.fact-info { position: absolute;
bottom: 0; left: 0; right: 0;
padding: 20px 30px; pointer-events: none;
}
.fact-item-title {
color: #fff;
font-family: var(--font-ui);
font-size: 16px; font-weight: 700;
line-height: 1.4; margin: 0 0 5px;
text-shadow: 0 2px 3px rgba(0,0,0,0.8);
}
.fact-label {
font-size: 10px; color: #aaa; text-transform: uppercase; font-weight: 600;
} .fact-footer {
display: flex;
gap: 10px;
padding: 0 20px;
margin-top: 10px;
}
.fact-btn {
flex: 1;
display: flex; align-items: center; justify-content: center;
padding: 10px 5px;
border-radius: 4px;
font-size: 11px; font-weight: 700;
color: #fff; text-decoration: none; text-align: center;
transition: opacity 0.2s;
}
.fact-btn:hover { opacity: 0.9; color: #fff; }
.report-btn { background-color: #0077cc; } .check-btn { background-color: #0077cc; }  .popbela-reaction-box {
margin: 40px 0;
text-align: center;
padding: 20px;
background: var(--color-bg-light);
border-radius: 12px;
}
.popbela-reaction-box h4 { margin-bottom: 20px; font-size: 16px; }
.reaction-grid { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.reaction-btn {
background: var(--bg-widget); border: 2px solid var(--border-color); border-radius: 50px;
padding: 10px 20px; cursor: pointer; transition: all 0.2s;
display: flex; flex-direction: column; align-items: center;
min-width: 70px;
}
.reaction-btn:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); border-color: var(--color-primary); }
.react-icon { font-size: 24px; display: block; margin-bottom: 5px; }
.react-label { font-size: 11px; font-weight: bold; color: #555; text-transform: uppercase; }
.react-count { font-size: 10px; color: #999; margin-top: 2px; } #reading-progress-container {
position: fixed;
top: 0; left: 0; width: 100%; height: 4px;
background: transparent;
z-index: 99999; }
#reading-progress-bar {
height: 100%;
background: var(--color-primary); width: 0%;
transition: width 0.1s;
}  .mobile-sticky-share { display: none; } @media (max-width: 768px) { .mobile-sticky-share {
display: flex; 
align-items: center; 
gap: 10px; position: fixed; 
bottom: 0; 
left: 0; 
width: 100%;
background: var(--bg-widget);
padding: 10px 10px;
box-shadow: 0 -4px 20px rgba(0,0,0,0.08); z-index: 9999;
padding-bottom: env(safe-area-inset-bottom, 10px);
box-sizing: content-box;
} .sticky-share-left {
display: flex;
align-items: center;
gap: 10px;
}
.sticky-label {
font-family: var(--font-ui);
font-weight: 800; 
font-size: 10px; 
text-transform: uppercase;
color: #999;
margin-right: 5px;
}
.sticky-icons {
display: flex;
gap: 8px;
}
.st-btn {
width: 32px; height: 32px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
color: #fff; text-decoration: none;
transition: transform 0.2s;
}
.st-btn:active { transform: scale(0.9); }
.st-wa { background: #25D366; }
.st-fb { background: #1877F2; }
.st-tw { background: #000; } .sticky-bookmark-btn {
background: #fff;
border: 1px solid #ddd;
color: #555;
width: 36px; height: 36px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.2s;
padding: 0;
} .sticky-bookmark-btn svg {
width: 20px;
height: 20px;
stroke: #555;
fill: none;
transition: all 0.2s;
} .sticky-bookmark-btn.saved {
background: var(--color-primary); border-color: var(--color-primary);
box-shadow: 0 2px 8px rgba(215, 39, 114, 0.4);
}
.sticky-bookmark-btn.saved svg {
stroke: #fff;
fill: #fff; } body {
padding-bottom: 60px !important; 
} 
} .popbela-product-card {
display: flex;
align-items: center;
gap: 20px;
background: var(--bg-widget);
border-left: 4px solid var(--color-primary); border-radius: 8px;
padding: 15px 20px;
margin: 30px 0;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
font-family: var(--font-body);
clear: both;
} .prod-thumb {
flex: 0 0 100px;
width: 100px;
height: 100px;
border-radius: 6px;
overflow: hidden;
background: #f9f9f9;
border: 1px solid #f0f0f0;
display: flex; align-items: center; justify-content: center;
}
.prod-thumb img {
width: 100%;
height: 100%;
object-fit: contain; } .prod-info {
flex: 1;
display: flex;
flex-direction: column;
}
.prod-label {
font-size: 10px;
text-transform: uppercase;
color: #999;
letter-spacing: 1px;
margin-bottom: 5px;
}
.prod-title {
font-family: var(--font-ui);
font-size: 16px;
font-weight: 700;
line-height: 1.3;
margin: 0 0 10px 0;
color: var(--color-text-main);
}
.prod-meta {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 10px;
}
.prod-price {
color: var(--color-primary); font-weight: 800;
font-size: 15px;
}
.prod-btn {
background-color: var(--color-primary);
color: #fff !important;
padding: 8px 20px;
border-radius: 50px;
font-size: 12px;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
transition: background 0.2s;
white-space: nowrap;
}
.prod-btn:hover {
background-color: var(--color-primary-dark);
text-decoration: none;
} @media (max-width: 600px) {
.popbela-product-card {
flex-direction: column;
text-align: center;
}
.prod-meta {
width: 100%;
flex-direction: column;
gap: 10px;
}
.prod-btn {
width: 100%;
display: block;
}
} .popbela-promo-widget {
margin-bottom: 40px;
position: relative;
width: 100%;
font-family: var(--font-ui, sans-serif);
} .promo-bg {
background-size: cover;
background-position: center;
background-color: #ee4d2d; border-radius: 8px 8px 0 0;
padding: 20px;
padding-bottom: 60px; position: relative;
color: #fff;
}
.promo-bg-overlay {
position: absolute; inset: 0;
background: linear-gradient(to bottom, rgba(0,0,0,0.3), rgba(238, 77, 45, 0.8));
border-radius: 8px 8px 0 0;
}
.promo-text {
position: relative; z-index: 2;
text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.promo-badge-logo {
background: #fff; color: #ee4d2d;
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 8px; border-radius: 4px;
font-size: 11px; font-weight: 800;
margin-bottom: 10px;
}
.promo-text h2 {
font-size: 22px; font-weight: 900; line-height: 1.1;
margin: 0 0 5px; color: #fff; text-transform: uppercase;
}
.promo-text p {
font-size: 12px; margin: 0; opacity: 0.9; font-weight: 500;
} .promo-card {
background: #fff;
margin: -40px 15px 0; position: relative; z-index: 3;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0,0,0,0.15);
overflow: hidden;
padding-bottom: 15px;
} .promo-discount {
position: absolute; top: 10px; right: 10px;
background: #fbeiei; color: #ee4d2d;
background-color: #ffe9e9;
font-weight: 800; font-size: 12px;
padding: 2px 6px; border-radius: 4px;
z-index: 2;
} .promo-img {
width: 100%; height: 180px;
background: #f9f9f9;
display: flex; align-items: center; justify-content: center;
}
.promo-img img {
max-width: 90%; max-height: 90%; object-fit: contain;
} .promo-detail { padding: 15px; text-align: left; }
.promo-detail h4 {
font-size: 14px; font-weight: 700; margin: 0 0 10px;
line-height: 1.4; color: #333;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.promo-prices { margin-bottom: 15px; }
.promo-prices del {
display: block; font-size: 12px; color: #999;
}
.promo-prices .current-price {
display: block; font-size: 18px; font-weight: 800; color: #ee4d2d;
} .promo-btn {
display: block; width: 100%;
background: #ee4d2d; color: #fff;
text-align: center; padding: 10px;
border-radius: 4px; font-weight: 800;
text-decoration: none; font-size: 14px;
transition: background 0.2s;
}
.promo-btn:hover { background: #d03e1f; color: #fff; }  .opinion-badge {
display: inline-block;
background-color: #FCE4EC; color: #C2185B; font-family: var(--font-ui);
font-size: 12px;
font-weight: 700;
padding: 5px 12px;
border-radius: 4px;
margin-bottom: 15px;
} .opinion-title {
font-family: var(--font-ui); font-size: 32px;
font-weight: 800;
line-height: 1.3;
color: #111;
margin-bottom: 25px;
} .opinion-author-box {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.op-avatar img {
width: 60px;
height: 60px;
border-radius: 50%;
object-fit: cover;
}
.op-details {
flex: 1;
}
.op-name {
font-family: var(--font-ui);
font-size: 16px;
font-weight: 800;
color: #111;
text-decoration: none;
display: block;
}
.op-role {
font-size: 14px;
color: #666;
line-height: 1.4;
margin-top: 2px;
} .opinion-meta-bar {
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #eee;
padding-bottom: 20px;
margin-bottom: 30px;
color: #888;
font-size: 13px;
}
.op-actions {
display: flex;
gap: 15px;
}
.op-actions span {
display: flex;
align-items: center;
gap: 5px;
cursor: pointer;
} .opinion-disclaimer {
background-color: #E3F2FD; padding: 5px;
border-radius: 8px;
margin-top: 30px;
margin-bottom: 10px;
border-left: 4px solid #2196F3;
color: #0D47A1;
font-size: 14px;
font-style: italic;
text-align: center;
} @media (max-width: 600px) {
.opinion-title { font-size: 24px; }
.opinion-meta-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
.op-avatar img { width: 50px; height: 50px; }
} .author-profile-header {
display: flex;
align-items: center;
gap: 30px;
padding: 40px;
background: var(--bg-widget);
border-radius: 12px;
margin-bottom: 40px;
}
.auth-img {
flex: 0 0 120px;
width: 120px; height: 120px;
border-radius: 50%;
overflow: hidden;
border: 4px solid var(--color-primary);
box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.auth-img img { width: 100%; height: 100%; object-fit: cover; }
.auth-info { flex: 1; }
.auth-name {
font-family: var(--font-ui);
font-size: 28px;
font-weight: 800;
color: #000;
margin: 0 0 5px 0;
}
.auth-role {
font-size: 16px;
color: var(--color-primary);
font-weight: 600;
margin-bottom: 15px;
text-transform: uppercase;
letter-spacing: 1px;
}
.auth-desc { color: #666; line-height: 1.6; }
@media (max-width: 600px) {
.author-profile-header {
flex-direction: column;
text-align: center;
padding: 20px;
}
} .popbela-opinion-widget {
margin-bottom: 50px;
width: 100%;
}
.opinion-header {
margin-bottom: 20px;
border-bottom: 2px solid var(--border-color);
padding-bottom: 10px;
}
.opinion-widget-title {
font-family: var(--font-ui);
font-size: 20px; font-weight: 800; color: #000; margin: 0;
border-left: 4px solid #D72772; padding-left: 10px;
line-height: 1;
} .opinion-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
} .opinion-card {
background: var(--bg-widget);
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.03);
transition: transform 0.2s;
display: flex; flex-direction: column;
}
.opinion-card:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.1); } .opinion-cover {
height: 140px;
width: 100%;
background: #f0f0f0;
overflow: hidden;
}
.opinion-cover img { width: 100%; height: 100%; object-fit: cover; } .opinion-author-row {
padding: 0 15px;
margin-top: -25px; position: relative;
display: flex;
align-items: flex-end; gap: 10px;
background-color: var(--bg-widget);
} .op-card-avatar {
flex: 0 0 50px;
width: 50px; height: 50px;
border-radius: 50%;
overflow: hidden;
border: 3px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1);
background: var(--bg-widget);
}
.op-card-avatar img { width: 100%; height: 100%; object-fit: cover; } .op-card-details {
padding-bottom: 2px; flex: 1;
overflow: hidden;
}
.op-card-name {
font-family: var(--font-ui);
font-size: 13px; font-weight: 700;
color: #0091ea; text-decoration: none;
display: block;
white-space: nowrap; 
overflow: hidden; text-overflow: ellipsis;
}
.op-card-name:hover { text-decoration: underline; }
.op-card-role {
font-size: 11px; color: #999;
display: block;
white-space: nowrap; 
overflow: hidden; text-overflow: ellipsis;
} .opinion-body {
padding: 15px;
padding-top: 10px;
flex-grow: 1;
display: flex; flex-direction: column; justify-content: space-between;
}
.op-card-title {
font-family: var(--font-ui);
font-size: 16px; font-weight: 700;
line-height: 1.4; margin: 0 0 10px;
color: #212121;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.op-card-title a { color: inherit; text-decoration: none; }
.op-card-title a:hover { color: #D72772; }
.op-card-date { font-size: 11px; color: #aaa; } @media (max-width: 768px) {
.opinion-grid {
display: flex;
overflow-x: auto;
gap: 15px;
padding-bottom: 20px;
scroll-snap-type: x mandatory;
}
.opinion-grid::-webkit-scrollbar { display: none; }
.opinion-card {
min-width: 260px;
scroll-snap-align: center;
}
} .popbela-info-layout {
display: flex;
gap: 60px; margin: 50px 0 80px;
} .info-sidebar-nav {
flex: 0 0 250px; width: 250px;
} .info-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
}
.info-header h3 {
font-family: var(--font-ui);
font-size: 20px;
font-weight: 800;
margin: 0;
}
.info-header .red-bar {
width: 6px;
height: 24px;
background-color: var(--color-primary); border-radius: 3px;
display: inline-block;
} .info-menu-list {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid var(--border-color);
}
.info-menu-list li {
border-bottom: 1px solid var(--border-color);
margin: 0;
}
.info-menu-list li a {
display: flex;
justify-content: space-between; align-items: center;
padding: 15px 0;
font-family: var(--font-ui);
font-weight: 700;
font-size: 14px;
color: #212121;
text-decoration: none;
transition: all 0.2s;
} .info-menu-list li a:hover {
color: #D72772; padding-left: 5px;
} .info-menu-list li.current-menu-item a {
color: #D32F2F; } .info-menu-list li a::after {
content: '\203A'; font-size: 20px;
line-height: 1;
color: #ccc;
}
.info-menu-list li.current-menu-item a::after {
color: #D32F2F;
} .info-main-content {
flex: 1; min-width: 0;
} .page-info-title {
font-family: var(--font-ui);
font-size: 32px;
font-weight: 800;
color: #111;
margin-bottom: 15px;
}
.title-line {
width: 60px;
height: 5px;
background-color: var(--color-primary); margin-bottom: 30px;
border-radius: 2px;
} @media (max-width: 991px) {
.popbela-info-layout {
flex-direction: column; gap: 40px;
}
.info-sidebar-nav {
width: 100%;
flex: none;
}
}  @media (min-width: 992px) {
.info-sidebar-nav {
flex: 0 0 250px;
width: 250px; position: -webkit-sticky; position: sticky;
top: 100px;   max-height: calc(100vh - 120px); 
overflow-y: auto;  padding-right: 10px; } .info-sidebar-nav::-webkit-scrollbar {
width: 4px;
}
.info-sidebar-nav::-webkit-scrollbar-thumb {
background-color: #ddd;
border-radius: 4px;
}
.info-sidebar-nav::-webkit-scrollbar-track {
background: transparent;
}
} @media (max-width: 991px) {
.popbela-info-layout {
flex-direction: column;
}
.info-sidebar-nav {
width: 100%;
position: static; max-height: none;
border-bottom: 1px solid #eee;
padding-bottom: 20px;
margin-bottom: 20px;
} .info-menu-list {
display: flex;
overflow-x: auto;
white-space: nowrap;
gap: 15px;
padding-bottom: 10px;
border-top: none;
}
.info-menu-list li {
border: 1px solid #eee;
border-radius: 50px;
padding: 0 15px;
background: #f9f9f9;
flex-shrink: 0;
}
.info-menu-list li a {
padding: 10px 0;
font-size: 12px;
}
.info-menu-list li a::after { content: none; }  .info-menu-list li.current-menu-item {
background: var(--color-primary);
border-color: var(--color-primary);
}
.info-menu-list li.current-menu-item a {
color: #fff;
}
} a.auto-internal-link {
color: var(--color-primary); font-weight: 700; text-decoration: none;
border-bottom: 1px dotted var(--color-primary);
transition: all 0.2s;
}
a.auto-internal-link:hover {
background-color: #fff0f5; border-bottom: 2px solid var(--color-primary);
color: #b01c5b;
} .lazy-bg {
background-color: #eee; background-image: none; transition: background-image 0.5s ease-in-out; } .lazy-bg.visible { } .video-sticky-wrapper {
width: 100%;
min-height: 530px; } iframe.is-sticky, video.is-sticky {
position: fixed;
bottom: 20px;
right: 20px;
width: 300px !important;
height: 169px !important;
z-index: 9999;
border-radius: 8px;
box-shadow: 0 5px 20px rgba(0,0,0,0.3);
border: 2px solid #fff;
animation: slideUp 0.3s ease;
} .close-sticky {
position: fixed;
bottom: 175px; right: 10px;
background: #000;
color: #fff;
border: none;
border-radius: 50%;
width: 25px; height: 25px;
z-index: 10000;
cursor: pointer;
font-weight: bold;
}
@keyframes slideUp {
from { transform: translateY(100%); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
@media (max-width: 600px) {
iframe.is-sticky, video.is-sticky {
width: 100% !important; left: 0; right: 0; bottom: 0;
border-radius: 0;
height: 200px !important;
}
.close-sticky {
bottom: 205px;
right: 10px;
}
} .bookmark-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 20px;
background-color: transparent;
border: 2px solid var(--color-primary); color: var(--color-primary);
border-radius: 50px; font-family: var(--font-ui);
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.3s ease;
outline: none;
margin: 10px 0;
}
.bookmark-btn svg {
width: 16px;
height: 16px;
transition: fill 0.3s;
stroke: var(--color-primary);
} .bookmark-btn:hover {
background-color: #fff0f5; transform: translateY(-2px);
} .bookmark-btn.saved {
background-color: var(--color-primary); color: #fff;
box-shadow: 0 4px 10px rgba(215, 39, 114, 0.3);
}
.bookmark-btn.saved svg {
stroke: #fff;
fill: #fff; }
.bookmark-btn.saved:hover {
background-color: var(--color-primary-dark);
} .btn-remove-bookmark {
background: #fff;
border: 1px solid #ddd;
color: #d32f2f; padding: 5px 10px;
font-size: 11px;
border-radius: 4px;
cursor: pointer;
margin-top: 10px;
display: inline-block;
font-weight: 600;
transition: all 0.2s;
}
.btn-remove-bookmark:hover {
background: #d32f2f;
color: #fff;
border-color: #d32f2f;
} .popbela-featured-image {
position: relative; overflow: hidden;
border-radius: 8px;
}
.photo-source-overlay {
background-color: rgba(0, 0, 0, 0.6); color: #fff;
font-family: var(--font-ui);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
padding: 5px 10px;
pointer-events: none; margin-top: -30px;
} .featured-caption {
margin-top: 8px;
font-size: 12px;
color: #777;
text-align: left;
font-style: italic;
} .archive-header-custom { margin: 30px 0; }
.archive-title { font-size: 28px; font-weight: 800; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.red-marker { width: 8px; height: 28px; background: #D72772; display: inline-block; } .archive-hero-post {
position: relative;
width: 100%;
margin-bottom: 40px;
border-radius: 12px;
overflow: hidden;
aspect-ratio: 21/9; }
.hero-thumb { width: 100%; height: 100%; position: relative; }
.hero-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.archive-hero-post:hover .hero-thumb img { transform: scale(1.05); } .hero-overlay {
position: absolute; inset: 0;
background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, transparent 60%);
}
.hero-content {
position: absolute; bottom: 0; left: 0; width: 100%;
padding: 30px;
z-index: 2; color: #fff;
}
.hero-title {
font-family: var(--font-ui); font-size: 28px; font-weight: 700;
line-height: 1.3; margin: 0 0 10px;
text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}
.hero-meta { font-size: 13px; color: #eee; }
.hero-cat { font-weight: 700; color: var(--color-primary); margin-left: 5px; text-transform: uppercase; } .archive-grid-wrapper {
display: grid;
grid-template-columns: repeat(3, 1fr); gap: 30px;
}
.grid-item-post {
display: flex; flex-direction: column;
}
.grid-link { text-decoration: none; color: inherit; }
.grid-thumb {
width: 100%; aspect-ratio: 16/9;
border-radius: 8px; overflow: hidden;
margin-bottom: 15px;
}
.grid-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.grid-item-post:hover .grid-thumb img { transform: scale(1.05); }
.grid-title {
font-family: var(--font-ui); font-size: 16px; font-weight: 700;
line-height: 1.4; margin: 0 0 8px; color: #212121; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.grid-item-post:hover .grid-title { color: #D72772; }
.grid-meta { font-size: 11px; color: #999; line-height: 1.5; }
.grid-cat { color: var(--color-primary); font-weight: 600; text-transform: uppercase; } @media (max-width: 768px) {
.archive-hero-post { aspect-ratio: 16/9; }
.hero-title { font-size: 20px; }
.hero-content { padding: 15px; }
.archive-grid-wrapper {
grid-template-columns: 1fr; gap: 25px;
} .grid-link {
display: flex; gap: 15px; align-items: flex-start;
}
.grid-thumb {
width: 120px; flex-shrink: 0; margin-bottom: 0; height: 90px;
}
.poll-hero .poll-thumb {
height: 200px; }
.poll-hero .poll-question {
font-size: 18px;
}
} #progress-to-top {
position: fixed;
bottom: 30px;
right: 30px;
height: 50px;
width: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
background: #ffffff;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
z-index: 9999; opacity: 0;
visibility: hidden;
transform: translateY(20px);
transition: all 0.3s ease;
}
#progress-to-top.active {
opacity: 1;
visibility: visible;
transform: translateY(0);
} .progress-circle {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
transform: rotate(-90deg);
}
.progress-circle path {
fill: none;
stroke: var(--color-primary); stroke-width: 3;
stroke-linecap: round;
transition: stroke-dashoffset 0.1s linear;
} #scroll-percent-text {
font-family: var(--font-ui, sans-serif);
font-size: 12px;
font-weight: 800;
color: #333;
position: absolute;
transition: opacity 0.2s;
opacity: 1; } .scroll-arrow {
position: absolute;
color: var(--color-primary);
display: flex;
align-items: center;
justify-content: center;
transition: opacity 0.2s;
opacity: 0; transform: translateY(-1px);
} #progress-to-top:hover {
background-color: #fff0f5; }
#progress-to-top:hover #scroll-percent-text {
opacity: 0; }
#progress-to-top:hover .scroll-arrow {
opacity: 1; } @media (max-width: 768px) {
#progress-to-top {
bottom: 80px; 
right: 20px;
height: 44px; width: 44px; }
#scroll-percent-text { font-size: 10px; }
} .popbela-font-resizer {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
.resizer-label {
font-family: var(--font-ui);
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
color: #999;
margin-right: 5px;
}
.resizer-btn {
background: #fff;
border: 1px solid #ddd;
color: #555;
padding: 4px 12px;
cursor: pointer;
font-weight: 700;
font-size: 13px;
border-radius: 4px;
transition: all 0.2s;
}
.resizer-btn:hover {
border-color: var(--color-primary);
color: var(--color-primary);
}
.resizer-btn.active {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
}  .entry-content p, 
.entry-content li,
.entry-content span {
font-size: 18px; 
line-height: 1.8;
transition: font-size 0.3s ease; } body.f-small .entry-content p,
body.f-small .entry-content li,
body.f-small .entry-content span {
font-size: 15px !important;
line-height: 1.6 !important;
} body.f-large .entry-content p,
body.f-large .entry-content li,
body.f-large .entry-content span {
font-size: 22px !important;
line-height: 1.9 !important;
} .mobile-bottom-nav { display: none; }
@media (max-width: 768px) {
.mobile-bottom-nav {
display: flex;
justify-content: space-around; align-items: center;
position: fixed;
bottom: 0; left: 0; width: 100%;
height: 60px;
background: #fff;
border-top: 1px solid #eee;
box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
z-index: 9999;
padding-bottom: env(safe-area-inset-bottom, 0); }
.nav-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
color: #999; font-family: var(--font-ui);
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
width: 100%; height: 100%;
transition: color 0.2s;
}
.nav-icon svg {
width: 22px;
height: 22px;
stroke: currentColor;
margin-bottom: 4px;
transition: transform 0.2s;
} .nav-item.active,
.nav-item:hover {
color: var(--color-primary); }
.nav-item.active .nav-icon svg {
transform: translateY(-2px); stroke-width: 2.5;
} body {
padding-bottom: 70px !important;
}
} .mobile-floating-nav { display: none; }
@media (max-width: 768px) {
.mobile-floating-nav {
display: block;
position: fixed;
bottom: 20px; left: 0; 
width: 100%;
z-index: 9999;
padding: 0 20px; pointer-events: none; }
.floating-nav-inner {
display: flex;
justify-content: space-around;
align-items: center;
background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
padding: 12px 10px;
border-radius: 20px; box-shadow: 0 10px 30px rgba(0,0,0,0.15); border: 1px solid rgba(255,255,255,0.5);
pointer-events: auto; max-width: 400px; margin: 0 auto;
}
.float-item {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: #94a3b8; transition: all 0.3s ease;
width: 60px;
position: relative;
}
.float-item span {
font-size: 10px;
font-weight: 600;
margin-top: 4px;
font-family: var(--font-ui);
}
.float-item .icon-box {
position: relative;
transition: transform 0.2s;
} .float-item.active, 
.float-item:hover {
color: var(--color-primary); }
.float-item.active .icon-box {
transform: translateY(-2px);
} .float-item.active::after {
content: '';
width: 4px; height: 4px;
background: var(--color-primary);
border-radius: 50%;
position: absolute;
bottom: -6px;
} body { padding-bottom: 90px !important; }
} .popbela-popular-feed {
display: flex;
flex-direction: column;
gap: 20px;
}
.popular-list-item {
display: flex;
align-items: center;
gap: 20px;
border-bottom: 1px solid #f0f0f0;
padding-bottom: 20px;
} .pop-rank {
flex: 0 0 40px;
text-align: center;
font-family: var(--font-ui);
font-weight: 900;
font-size: 32px;
color: #e0e0e0; font-style: italic;
} .pop-rank.rank-1 { color: #FFD700; font-size: 42px; } .pop-rank.rank-2 { color: #C0C0C0; font-size: 38px; } .pop-rank.rank-3 { color: #CD7F32; font-size: 36px; }  .pop-list-thumb {
flex: 0 0 120px;
width: 120px; height: 85px;
border-radius: 8px;
overflow: hidden;
}
.pop-list-thumb img { width: 100%; height: 100%; object-fit: cover; } .pop-list-content { flex: 1; }
.pop-cat-label {
font-size: 10px; font-weight: 700; color: var(--color-primary);
text-transform: uppercase; display: block; margin-bottom: 4px;
}
.pop-list-title {
font-family: var(--font-ui);
font-size: 16px; font-weight: 700;
line-height: 1.4; margin: 0 0 8px;
color: #212121;
}
.pop-list-title a { color: inherit; text-decoration: none; transition: 0.2s; }
.pop-list-title a:hover { color: var(--color-primary); }
.pop-meta { font-size: 11px; color: #999; }
.views-count { margin-left: 10px; color: #555; } @media (max-width: 600px) {
.popular-list-item { gap: 15px; align-items: flex-start; }
.pop-rank { flex: 0 0 30px; font-size: 24px; margin-top: 5px; }
.pop-rank.rank-1 { font-size: 32px; }
.pop-list-thumb { width: 100px; height: 70px; flex: 0 0 100px; }
.pop-list-title { font-size: 14px; }
}  .mobile-app-header, .mobile-app-footer {
display: none;
} @media (max-width: 768px) { .site-header, 
.header-main, 
.foryou-container {
display: none !important;
} body {
padding-top: 60px; padding-bottom: 70px; } .mobile-app-header {
display: block;
position: fixed;
top: 0; left: 0; width: 100%;
height: 55px;
background: #fff;
z-index: 9999;
border-bottom: 1px solid #f0f0f0;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}
.app-header-inner {
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
padding: 0 15px;
} .app-logo img { height: 24px; width: auto; display: block; }
.app-logo span { font-weight: 900; color: var(--color-primary); font-size: 20px; } .detail-mode { justify-content: flex-start; gap: 15px; }
.app-back-btn, .app-home-btn {
color: #333; display: flex; align-items: center;
}
.app-page-title {
font-family: var(--font-ui);
font-weight: 700;
font-size: 16px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
flex: 1; } .app-icon-btn {
background: none; border: none; padding: 5px; color: #333;
} .mobile-app-footer {
display: block;
position: fixed;
bottom: 0; left: 0; width: 100%;
height: 60px;
background: #fff;
z-index: 9999;
border-top: 1px solid #f0f0f0;
box-shadow: 0 -4px 20px rgba(0,0,0,0.05);
padding-bottom: env(safe-area-inset-bottom, 0);
}
.app-footer-inner {
display: flex;
justify-content: space-around; align-items: center;
height: 100%;
}
.app-nav-item {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
color: var(--color-text-main); width: 100%; height: 100%;
transition: all 0.2s;
}
.app-nav-item span {
font-family: var(--font-ui);
font-size: 10px;
font-weight: 600;
margin-top: 3px;
}
.app-nav-item svg {
transition: transform 0.2s;
} .app-nav-item.active {
color: var(--color-primary); }
.app-nav-item.active svg {
transform: translateY(-2px);
fill: rgba(215, 39, 114, 0.1); }
@media (max-width: 768px) {
} .mobile-app-header {
z-index: 99999 !important; pointer-events: auto; }
.app-actions {
position: relative;
z-index: 100000; }
}
@media (max-width: 768px) { .mobile-app-footer,
.mobile-floating-nav, 
.mobile-sticky-share {
z-index: 999999 !important; 
pointer-events: auto !important; }
}
@media (max-width: 768px) { .app-header-inner {
position: relative; display: flex;
align-items: center;
justify-content: space-between; height: 100%;
padding: 0 15px;
} .app-logo {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); z-index: 10; display: flex;
align-items: center;
justify-content: center; max-width: 60%; 
} .app-logo img {
height: 30px; width: auto;
display: block;
} .app-logo span {
font-size: 20px;
font-weight: 900;
color: var(--color-primary);
text-transform: uppercase;
line-height: 1;
} .app-actions {
position: relative;
z-index: 20; } .app-back-btn {
position: relative;
z-index: 20;
}
} @media (max-width: 768px) { .site-footer, 
#colophon {
display: none !important;
} .popbela-bottom-area,
.bottom-content-area,
.bottom-sidebar-area {
margin-bottom: 0 !important;
}  body {
padding-bottom: 60px !important; 
}
} .popbela-save-container {
margin: 20px 0;
}
.btn-save-article {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 10px 20px;
background-color: transparent;
border: 2px solid var(--color-primary); color: var(--color-primary);
font-family: var(--font-ui);
font-weight: 700;
font-size: 14px;
border-radius: 50px; cursor: pointer;
transition: all 0.3s ease;
}
.btn-save-article svg {
width: 18px;
height: 18px;
stroke: currentColor;
transition: fill 0.3s;
} .btn-save-article:hover {
background-color: #fff0f5; transform: translateY(-2px);
} .btn-save-article.saved {
background-color: var(--color-primary);
color: #fff;
box-shadow: 0 4px 10px rgba(215, 39, 114, 0.3);
}
.btn-save-article.saved svg {
fill: #fff; stroke: #fff;
}
.btn-save-article.saved:hover {
background-color: #b01c5b; } .popbela-toast {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%) translateY(100px); display: flex;
align-items: center;
gap: 12px;
background-color: #333; color: #fff;
padding: 12px 24px;
border-radius: 50px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
font-family: var(--font-ui, sans-serif);
font-size: 14px;
font-weight: 600;
z-index: 9999999; opacity: 0;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); pointer-events: none;
}
.popbela-toast {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%) translateY(100px); display: flex;
align-items: center;
gap: 12px;
background-color: #212121; color: #fff;
padding: 12px 24px;
border-radius: 50px;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
font-family: sans-serif;
font-size: 14px;
font-weight: 600; z-index: 99999999 !important; 
opacity: 0;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
pointer-events: none;
} .popbela-toast.show {
transform: translateX(-50%) translateY(0);
opacity: 1;
} @media (max-width: 768px) {
.popbela-toast { bottom: 90px; 
width: max-content;
max-width: 85%;
}
} .popbela-news-timeline {
margin: 40px 0;
background: var(--bg-widget);
border-radius: 8px;
padding: 25px;
box-shadow: 0 5px 15px rgba(0,0,0,0.03);
} .timeline-main-title {
font-family: var(--font-ui);
font-size: 18px;
font-weight: 800;
text-transform: uppercase;
border-bottom: 2px solid #eee;
padding-bottom: 15px;
margin-bottom: 25px;
display: flex;
align-items: center;
gap: 10px;
color: #D72772; } .blink-dot {
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
display: inline-block;
animation: blinker 1.5s linear infinite;
}
@keyframes blinker {
50% { opacity: 0; }
} .timeline-wrapper {
position: relative;
padding-left: 10px;
border-left: 2px solid #eee; margin-left: 10px;
} .timeline-item {
position: relative;
padding-left: 25px;
margin-bottom: 30px;
}
.timeline-item:last-child { margin-bottom: 0; } .timeline-marker {
position: absolute;
left: -6px; top: 0;
width: 10px;
height: 10px;
background: #D72772;
border-radius: 50%;
border: 2px solid #fff;
box-shadow: 0 0 0 2px #D72772; } .tm-time {
font-size: 11px;
font-weight: 700;
color: #fff;
background: #333;
padding: 2px 8px;
border-radius: 4px;
display: inline-block;
margin-bottom: 5px;
}
.tm-title {
font-family: var(--font-ui);
font-size: 16px;
font-weight: 700;
margin: 5px 0;
color: #000;
}
.tm-body {
font-size: 14px;
line-height: 1.6;
color: var(--color-text-main);
}
.tm-body p { margin-bottom: 10px; } @media (max-width: 600px) {
.popbela-news-timeline { padding: 20px; }
.timeline-wrapper { margin-left: 5px; }
} .wa-popup {
position: fixed;
top: -150px; left: 10px;
right: 10px;
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(5px);
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
z-index: 999999999 !important; padding: 12px;
transition: top 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); border: 1px solid rgba(0,0,0,0.08);
display: block; } .wa-popup.active {
top: 20px; } .wa-content {
display: flex;
align-items: center;
gap: 12px;
position: relative;
} .wa-icon { position: relative; width: 45px; height: 45px; flex-shrink: 0; }
.wa-icon img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.wa-badge-icon { position: absolute; bottom: -2px; right: -2px; width: 18px; height: 18px; } .wa-text { flex: 1; text-decoration: none; color: #333; font-family: sans-serif; }
.wa-header { display: flex; justify-content: space-between; font-size: 11px; margin-bottom: 2px; color: #666; }
.wa-app-name { font-weight: bold; text-transform: uppercase; }
.wa-body { font-size: 13px; line-height: 1.3; color: #000; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .wa-close {
position: absolute; top: -8px; right: -8px;
background: #eee; border: none; border-radius: 50%;
width: 22px; height: 22px; line-height: 22px;
text-align: center; font-size: 16px; color: #888; cursor: pointer;
} @media (min-width: 769px) {
.wa-popup { display: none !important; }
}