/* ============================================================================= BEKASI KEREN — keren-ui.css v3.0 CLEAN REBUILD ───────────────────────────────────────────────────────────────────────────── Menggantikan keren-ui.css lama (v1.0) yang konflik spesifisitas. File ini adalah SATU-SATUNYA override di atas main.css. Tidak ada !important kecuali untuk mematikan !important dari versi lama. Load urutan: main.css → keren-ui.css (ini) → desktop-layout.css HAPUS overhaul.css dari jika sudah pakai file ini. ============================================================================= */ /* ============================================================================= 0. DESIGN TOKENS — Override token main.css yang relevan ============================================================================= */ :root { /* Warna brand lebih hangat dan accessible */ --color-primary: #1A6535; --color-primary-light: #2ECC71; --color-primary-bg: #F0FAF4; --color-primary-dark: #0D4020; /* Text — optical clarity */ --color-text-primary: #0F1A14; --color-text-secondary: #3A5545; --color-text-muted: #6B9578; /* Background — sedikit warm green, tidak cold */ --color-bg-primary: #FFFFFF; --color-bg-secondary: #F5F7F5; --color-bg-tertiary: #EDF2EF; /* Border — subtle */ --color-border: rgba(26, 101, 53, 0.11); --color-border-strong: rgba(26, 101, 53, 0.20); /* Radius — unified */ --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --radius-xl: 20px; /* Shadow */ --shadow-xs: 0 1px 3px rgba(10, 40, 20, 0.06); --shadow-sm: 0 2px 8px rgba(10, 40, 20, 0.08); --shadow: 0 4px 16px rgba(10, 40, 20, 0.10); --shadow-lg: 0 8px 28px rgba(10, 40, 20, 0.14); /* Transition */ --t-ease: cubic-bezier(0.22, 1, 0.36, 1); --t-fast: 160ms; --t: 260ms; --t-slow: 400ms; } [data-theme="dark"] { --color-bg-primary: #121F18; --color-bg-secondary: #0B1410; --color-bg-tertiary: #0F1C14; --color-border: rgba(100, 200, 130, 0.09); --color-border-strong: rgba(100, 200, 130, 0.16); --color-text-primary: #E8F5EC; --color-text-secondary:#A8C8B4; --color-text-muted: #6B9578; --color-primary-bg: #122018; } /* ============================================================================= 1. BASE ============================================================================= */ body { background-color: var(--color-bg-secondary); font-size: 15px; line-height: 1.625; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4, h5, h6 { line-height: 1.25; } a { text-decoration: none; } a:hover { text-decoration: none; } /* ============================================================================= 2. TOP BAR ============================================================================= */ .top-bar { background: var(--color-primary-dark); border-bottom: none; padding: 5px 0; } .top-bar, .top-bar .container-app, .top-bar span { color: rgba(255, 255, 255, 0.65); font-size: 0.75rem; letter-spacing: 0.02em; } /* ============================================================================= 3. SITE HEADER ============================================================================= */ .site-header { background: var(--color-bg-primary); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-xs); } .header-top { /* Hanya override spacing — flex layout dibiarkan dari main.css */ gap: 10px; } @media (min-width: 992px) { .header-top { gap: 16px; } } /* Logo — JANGAN override height/flex-shrink, itu sudah di main.css */ .brand-logo-text { font-weight: 800; letter-spacing: -0.03em; color: var(--color-primary); line-height: 1; } /* Search pill — override visual SAJA, bukan layout */ /* main.css sudah set: flex:1 1 auto, position:relative, display:flex */ .search-pill { background: var(--color-bg-secondary); border: 1.5px solid var(--color-border-strong); border-radius: var(--radius-xl); /* lebih rounded */ box-shadow: none; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); } .search-pill:focus-within { background: var(--color-bg-primary); border-color: var(--color-primary-light); box-shadow: 0 0 0 3px rgba(46, 204, 113, 0.15); } /* Input — hanya warna, bukan width/height/padding (itu di main.css) */ .search-pill input { color: var(--color-text-secondary); background: transparent; border: none; /* border ada di .search-pill wrapper */ box-shadow: none; } .search-pill input:focus { box-shadow: none; /* shadow di wrapper, bukan input */ background: transparent; border-color: transparent; } .search-pill input::placeholder { color: var(--color-text-muted); } /* ============================================================================= 4. MAIN NAV ============================================================================= */ .main-nav { background: var(--color-bg-primary); border-top: 1px solid var(--color-border); box-shadow: none; } /* Mobile: horizontal scroll */ .main-nav-list { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 0; gap: 0; -webkit-overflow-scrolling: touch; } .main-nav-list::-webkit-scrollbar { display: none; } .main-nav-list > li > a { display: block; padding: 10px 12px; font-size: 0.875rem; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; position: relative; border-bottom: none; background: transparent; transition: color var(--t-fast); } .main-nav-list > li > a::after { content: ''; position: absolute; bottom: 0; left: 12px; right: 12px; height: 2.5px; border-radius: 2px 2px 0 0; background: var(--color-primary-light); transform: scaleX(0); transform-origin: left; transition: transform var(--t) var(--t-ease); } .main-nav-list > li > a:hover { color: var(--color-primary); } .main-nav-list > li > a.is-active { color: var(--color-primary); } .main-nav-list > li > a:hover::after, .main-nav-list > li > a.is-active::after { transform: scaleX(1); } /* Desktop override already in main.css/desktop-layout — no conflict */ /* ============================================================================= 5. BREAKING TICKER ============================================================================= */ .breaking-ticker { background: linear-gradient(90deg, var(--color-primary-dark) 0%, var(--color-primary) 100%); height: auto; padding: 7px 0; margin: 0; border-radius: 0; } .breaking-ticker__label { background: #FFD600; color: #0D2B1A; font-size: 0.625rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 10px; border-radius: var(--radius-sm); height: auto; margin: 0 12px; line-height: 1.5; } .breaking-ticker__content a { color: rgba(255, 255, 255, 0.88); font-size: 0.8125rem; font-weight: 500; } .breaking-ticker__content a:hover { color: #fff; } .breaking-ticker:hover .breaking-ticker__content { animation-play-state: paused; } /* ============================================================================= 6. SECTION HEADER — pengganti gaya main.css yang terlalu lemah ============================================================================= */ .section-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 10px; margin-bottom: 16px; border-bottom: 1.5px solid var(--color-border); position: relative; } /* Matikan pseudo-element lama (40px flat bar) */ .section-header::before { display: none; } /* Section title — accent bar kiri 3px */ .section-header h2 { margin: 0; font-size: 1rem; font-weight: 800; color: var(--color-text-primary); letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 8px; } .section-header h2::before { content: ''; display: inline-block; width: 3px; height: 18px; background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 100%); border-radius: 2px; flex-shrink: 0; } /* Sembunyikan icon SVG di dalam h2 section header — gantikan dengan bar */ .section-header h2 > svg:first-child { display: none; } .section-header .section-link { font-size: 0.8rem; font-weight: 600; color: var(--color-primary); white-space: nowrap; opacity: 0.75; transition: opacity var(--t-fast); } .section-header .section-link:hover { opacity: 1; text-decoration: none; } @media (min-width: 768px) { .section-header h2 { font-size: 1.0625rem; } } /* ============================================================================= 7. HERO CARD ============================================================================= */ .card-hero { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow); /* 16:9 sudah di main.css — override ke 16/7 agar tidak sesak di semua ukuran */ aspect-ratio: 16 / 7; /* Tidak boleh ada negative margin — tetap dalam container */ margin-left: 0; margin-right: 0; width: 100%; } /* Mobile: aspect ratio sedikit lebih tinggi agar hero tidak terlalu gepeng */ @media (max-width: 575.98px) { .card-hero { border-radius: var(--radius); /* Hapus negative margin lama — hero tetap di dalam container padding */ margin-left: 0; margin-right: 0; aspect-ratio: 4 / 3; /* lebih tinggi di mobile agar foto terlihat */ } } @media (min-width: 576px) { .card-hero { aspect-ratio: 16 / 7; border-radius: var(--radius-lg); } } @media (min-width: 992px) { .card-hero { aspect-ratio: 16 / 7; } } @media (min-width: 1200px) { .card-hero { aspect-ratio: 21 / 9; max-height: 520px; } } /* Gradient overlay — lebih dalam untuk keterbacaan */ .card-hero__overlay { background: linear-gradient( to top, rgba(5, 18, 10, 0.90) 0%, rgba(5, 18, 10, 0.50) 40%, rgba(5, 18, 10, 0.05) 75%, transparent 100% ); } /* Hero body padding */ .card-hero__body { padding: 16px; gap: 6px; } @media (min-width: 576px) { .card-hero__body { padding: 20px; gap: 8px; } } @media (min-width: 768px) { .card-hero__body { padding: 28px; gap: 8px; } } /* Hero title */ .card-hero__title { font-size: clamp(1.25rem, 3.5vw, 1.875rem); font-weight: 800; line-height: 1.2; color: #fff; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35); letter-spacing: -0.025em; } /* Hero meta */ .card-hero__meta { font-size: 0.75rem; color: rgba(255, 255, 255, 0.68); gap: 10px; } /* ============================================================================= 8. CARD NEWS — shared card style ============================================================================= */ .card-news { background: var(--color-bg-primary); border: none; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xs); transition: transform var(--t) var(--t-ease), box-shadow var(--t) var(--t-ease); } .card-news:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); } /* Image wrap */ .card-news__img-wrap { border-radius: 0; overflow: hidden; background: var(--color-bg-tertiary); aspect-ratio: 16 / 9; } .card-news__img { transition: transform var(--t-slow) var(--t-ease); } .card-news:hover .card-news__img { transform: scale(1.04); } /* Card body */ .card-news__body { padding: 14px; display: flex; flex-direction: column; gap: 6px; } /* Card title */ .card-news__title { font-size: 0.9375rem; font-weight: 700; color: var(--color-text-primary); line-height: 1.4; } .card-news__title a { color: inherit; } .card-news__title a:hover { color: var(--color-primary); } /* Card excerpt */ .card-news__excerpt { font-size: 0.8125rem; color: var(--color-text-muted); line-height: 1.5; } /* Card meta */ .card-news__meta { font-size: 0.75rem; color: var(--color-text-muted); gap: 8px; } .card-news__meta svg { width: 11px; height: 11px; } /* ============================================================================= 9. BADGE KATEGORI ============================================================================= */ /* Satu definisi tunggal yang menang — tidak perlu !important */ .card-news__category, .badge-kat, [class^="badge-kat--"], [class*=" badge-kat--"] { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; padding: 3px 8px; border-radius: var(--radius-sm); display: inline-block; line-height: 1.5; background: rgba(255, 255, 255, 0.18); color: #fff; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } /* Badge di dalam card body (bukan di atas gambar) */ .card-news__body .card-news__category, .card-news__body .badge-kat, .card-news__body [class^="badge-kat--"] { background: var(--color-primary-bg); color: var(--color-primary); backdrop-filter: none; -webkit-backdrop-filter: none; } /* ============================================================================= 10. CARD LIST (Berita Terbaru) ============================================================================= */ .card-list { display: grid; grid-template-columns: 80px 1fr; gap: 10px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--color-border); border-radius: 0; background: transparent; box-shadow: none; transition: opacity var(--t-fast); } .card-list:last-child { border-bottom: none; } .card-list:hover { opacity: 0.75; } .card-list__img-wrap { width: 80px; height: 58px; border-radius: var(--radius); overflow: hidden; background: var(--color-bg-tertiary); flex-shrink: 0; aspect-ratio: unset; } .card-list__img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow) var(--t-ease); } .card-list:hover .card-list__img { transform: scale(1.06); } .card-list__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .card-list__title { font-size: 0.875rem; font-weight: 600; color: var(--color-text-primary); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .card-list__title a { color: inherit; } .card-list__title a:hover { color: var(--color-primary); } .card-list__meta { font-size: 0.75rem; color: var(--color-text-muted); display: flex; align-items: center; gap: 6px; } @media (min-width: 480px) { .card-list { grid-template-columns: 96px 1fr; gap: 12px; } .card-list__img-wrap { width: 96px; height: 68px; } } @media (min-width: 576px) { .card-list { grid-template-columns: 110px 1fr; padding: 14px 0; } .card-list__img-wrap { width: 110px; height: 76px; } } @media (min-width: 768px) { .card-list { grid-template-columns: 120px 1fr; gap: 14px; } .card-list__img-wrap { width: 120px; height: 82px; } .card-list__title { -webkit-line-clamp: 3; } } /* ============================================================================= 11. CARD TRENDING (Sidebar) ============================================================================= */ .card-trending { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--color-border); background: transparent; box-shadow: none; border-radius: 0; transition: opacity var(--t-fast); } .card-trending:last-child { border-bottom: none; } .card-trending:hover { opacity: 0.72; } .card-trending__img-wrap { width: 52px; height: 52px; border-radius: var(--radius); overflow: hidden; background: var(--color-bg-tertiary); flex-shrink: 0; position: relative; } .card-trending__img { width: 100%; height: 100%; object-fit: cover; } .card-trending__rank { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: var(--color-primary); color: #fff; font-size: 0.625rem; font-weight: 800; border-radius: 4px; display: flex; align-items: center; justify-content: center; line-height: 1; } .card-trending__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .card-trending__title { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-primary); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .card-trending__title a { color: inherit; } .card-trending__title a:hover { color: var(--color-primary); } .card-trending__meta { font-size: 0.6875rem; color: var(--color-text-muted); display: flex; align-items: center; gap: 4px; } .card-trending__meta svg { width: 10px; height: 10px; } /* ============================================================================= 12. WIDGET (Sidebar container) ============================================================================= */ .widget { background: var(--color-bg-primary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 16px; overflow: hidden; /* konten tidak luber keluar */ box-shadow: var(--shadow-xs); margin-bottom: 0; /* gap diatur oleh .sidebar flex gap */ /* Kritis untuk grid cell sidebar — tidak boleh lebih lebar dari column */ min-width: 0; max-width: 100%; box-sizing: border-box; } .widget__title { display: flex; align-items: center; gap: 6px; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); margin: 0 0 12px 0; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); position: relative; /* Judul tidak boleh overflow ke luar widget */ min-width: 0; overflow: hidden; } /* Matikan pseudo-element lama (garis 40px dari main.css) */ .widget__title::after { display: none; } /* Accent bar baru di kiri */ .widget__title::before { content: ''; display: inline-block; width: 3px; min-width: 3px; /* tidak boleh menyusut */ height: 14px; background: var(--color-primary); border-radius: 2px; flex-shrink: 0; margin-right: 2px; } .widget__title svg { width: 14px; height: 14px; flex-shrink: 0; color: var(--color-primary); opacity: 0.7; } @media (min-width: 992px) { /* Di desktop, widget ada di dalam sidebar column yang fixed-width (304px) */ /* Padding lebih compact agar konten muat */ .widget { padding: 14px; } .widget__title { margin-bottom: 10px; } } @media (min-width: 1200px) { .widget { padding: 16px; } .widget__title { margin-bottom: 12px; } } @media (max-width: 575.98px) { .widget { padding: 12px; border-radius: var(--radius); } .widget__title { font-size: 0.6875rem; margin-bottom: 8px; } } /* ============================================================================= 13. EVENT MENDATANG ============================================================================= */ .event-card { display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: start; padding: 10px 0; border-bottom: 1px solid var(--color-border); background: transparent; box-shadow: none; border-radius: 0; cursor: pointer; transition: opacity var(--t-fast); } .event-card:last-child { border-bottom: none; padding-bottom: 0; } .event-card:first-child { padding-top: 0; } .event-card:hover { opacity: 0.72; } .event-card__img-wrap { width: 44px; height: 44px; border-radius: var(--radius); overflow: hidden; background: var(--color-primary-bg); flex-shrink: 0; aspect-ratio: unset; } .event-card__img { width: 100%; height: 100%; object-fit: cover; } .event-card__title { font-size: 0.8125rem; font-weight: 600; color: var(--color-text-primary); line-height: 1.4; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .event-card__meta { font-size: 0.6875rem; color: var(--color-text-muted); display: flex; align-items: center; gap: 4px; margin-top: 2px; } .event-card__meta svg { width: 10px; height: 10px; flex-shrink: 0; color: var(--color-primary); opacity: 0.6; } @media (max-width: 575.98px) { .event-card { grid-template-columns: 40px 1fr; gap: 8px; padding: 8px 0; } .event-card__img-wrap { width: 40px; height: 40px; } } /* ============================================================================= 14. AKSES CEPAT ============================================================================= */ /* Default (mobile): 2 kolom */ .akses-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } /* Tablet 576-991: 4 kolom longgar */ @media (min-width: 576px) and (max-width: 991.98px) { .akses-grid { grid-template-columns: repeat(4, 1fr); gap: 8px; } } /* Desktop sidebar 304px: 4 kolom sangat compact */ @media (min-width: 992px) { .akses-grid { grid-template-columns: repeat(4, 1fr); gap: 4px; } } .akses-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 76px; padding: 10px 4px; background: linear-gradient(145deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); border: none; border-radius: var(--radius); text-decoration: none; cursor: pointer; box-shadow: var(--shadow-sm); transition: transform var(--t) var(--t-ease), box-shadow var(--t) var(--t-ease); color: #fff; /* Tidak boleh overflow keluar grid cell */ min-width: 0; overflow: hidden; } .akses-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); text-decoration: none; filter: none; } .akses-item:active { transform: translateY(-1px) scale(0.98); } .akses-item__icon { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.15); border-radius: 5px; color: #fff; flex-shrink: 0; } .akses-item__icon svg { width: 15px; height: 15px; stroke-width: 2; color: #fff; } .akses-item__label { font-weight: 700; text-align: center; color: rgba(255, 255, 255, 0.92); line-height: 1.2; letter-spacing: 0.01em; /* Tidak overflow keluar item */ width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; /* Size default — disesuaikan per breakpoint */ font-size: 0.625rem; } /* Mobile < 576px: 2 kolom, lebih besar */ @media (max-width: 575.98px) { .akses-item { min-height: 80px; padding: 12px 8px; gap: 6px; } .akses-item__icon { width: 30px; height: 30px; } .akses-item__icon svg { width: 18px; height: 18px; } .akses-item__label { font-size: 0.6875rem; white-space: normal; overflow: visible; } } /* Tablet 576-991: 4 kolom longgar */ @media (min-width: 576px) and (max-width: 991.98px) { .akses-item { min-height: 84px; padding: 12px 6px; gap: 5px; } .akses-item__icon { width: 30px; height: 30px; } .akses-item__icon svg { width: 17px; height: 17px; } .akses-item__label { font-size: 0.6875rem; white-space: normal; overflow: visible; } } /* Desktop dalam sidebar 304px: sangat compact */ @media (min-width: 992px) { .akses-item { min-height: 60px; padding: 7px 2px; gap: 3px; border-radius: 6px; } .akses-item__icon { width: 22px; height: 22px; border-radius: 4px; } .akses-item__icon svg { width: 13px; height: 13px; } .akses-item__label { font-size: 0.5rem; letter-spacing: 0; } } /* ============================================================================= 15. VIDEO OF THE DAY ============================================================================= */ /* ============================================================================= 15. VIDEO OF THE DAY — grid 3 kolom portrait (9:16), seperti video short ============================================================================= */ .video-grid { /* Kembalikan ke grid 3 kolom — bukan flex horizontal */ display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; /* Reset semua override dari keren-ui v1 */ overflow-x: unset; scroll-snap-type: unset; -webkit-overflow-scrolling: unset; scrollbar-width: unset; margin: 0; padding: 0; } .video-grid::-webkit-scrollbar { display: revert; } /* Setiap thumb: portrait 9:16 */ .video-grid .video-thumb, .video-grid .video-card { /* Reset flex properties dari override sebelumnya */ flex: unset; scroll-snap-align: unset; /* Portrait short-style */ aspect-ratio: 9 / 16; border-radius: var(--radius); overflow: hidden; background: var(--color-bg-dark, #1a202c); position: relative; display: block; box-shadow: var(--shadow-xs); transition: transform var(--t) var(--t-ease); } .video-grid .video-thumb:hover, .video-grid .video-card:hover { transform: scale(1.03); } /* ============================================================================= 16. SOSIAL MEDIA ============================================================================= */ .social-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .social-tile { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: var(--radius); background: var(--color-bg-secondary); border: 1px solid var(--color-border); color: var(--color-text-muted); transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast); } .social-tile:hover { background: var(--color-primary-bg); color: var(--color-primary); border-color: var(--color-primary); } /* ============================================================================= 17. FOOTER ============================================================================= */ .site-footer { background: var(--color-primary-dark); color: rgba(255, 255, 255, 0.65); margin-top: 56px; padding-top: 48px; padding-bottom: 32px; } .footer-grid { display: grid; grid-template-columns: 1fr; gap: 28px; margin-bottom: 32px; } @media (min-width: 576px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 900px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 36px; } } .footer-col h4 { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: rgba(255, 255, 255, 0.9); margin-bottom: 12px; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; } .footer-col a { font-size: 0.875rem; color: rgba(255, 255, 255, 0.5); transition: color var(--t-fast); } .footer-col a:hover { color: rgba(255, 255, 255, 0.88); } .footer-about h4 { font-size: 1rem; font-weight: 800; text-transform: none; letter-spacing: -0.01em; } .footer-about p { font-size: 0.875rem; color: rgba(255, 255, 255, 0.5); line-height: 1.6; margin-top: 6px; } .footer-about__logo { height: 28px; width: auto; opacity: 0.75; margin-bottom: 8px; } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 20px; font-size: 0.8125rem; color: rgba(255, 255, 255, 0.3); text-align: center; } /* ============================================================================= 18. SKELETON LOADING ============================================================================= */ .skeleton { background: linear-gradient( 90deg, var(--color-bg-tertiary) 25%, rgba(26, 101, 53, 0.06) 50%, var(--color-bg-tertiary) 75% ); background-size: 200% 100%; border-radius: var(--radius-sm); animation: skShimmer 1.6s infinite linear; } @keyframes skShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ============================================================================= 19. BUTTONS ============================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: var(--radius-xl); font-size: 0.9375rem; font-weight: 600; border: none; cursor: pointer; transition: background var(--t-fast), transform var(--t-fast) var(--t-ease), box-shadow var(--t-fast); text-decoration: none; } .btn:hover { transform: translateY(-1px); text-decoration: none; } .btn:active { transform: translateY(0) scale(0.98); } .btn-primary { background: var(--color-primary); color: #fff; box-shadow: 0 2px 8px rgba(26, 101, 53, 0.28); } .btn-primary:hover { background: #238C4B; box-shadow: 0 4px 14px rgba(26, 101, 53, 0.38); } .btn-outline { background: transparent; color: var(--color-primary); border: 1.5px solid var(--color-primary); } .btn-outline:hover { background: var(--color-primary-bg); } /* ============================================================================= 20. READING PROGRESS BAR ============================================================================= */ .reading-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--color-primary-light), var(--color-primary)); z-index: 9999; transition: width 0.1s linear; } /* ============================================================================= 21. MODAL ============================================================================= */ .agenda-modal-backdrop { background: rgba(10, 20, 12, 0.72); } .agenda-modal { background: var(--color-bg-primary); border-radius: var(--radius-xl) var(--radius-xl) 0 0; box-shadow: var(--shadow-lg); } @media (min-width: 576px) { .agenda-modal { border-radius: var(--radius-xl); } } .agenda-modal__header { padding: 18px 18px 14px; border-bottom: 1px solid var(--color-border); } .agenda-modal__close { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; border-radius: 50%; background: var(--color-bg-secondary); border: none; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); cursor: pointer; transition: background var(--t-fast), color var(--t-fast); } .agenda-modal__close:hover { background: var(--color-border-strong); color: var(--color-text-primary); } /* ============================================================================= 22. SEARCH PAGE ============================================================================= */ .search-hero { background: linear-gradient(160deg, var(--color-primary-dark) 0%, var(--color-primary) 100%); padding: 44px 0 36px; color: #fff; } .search-hero h1 { color: #fff; font-size: clamp(1.25rem, 3vw, 1.875rem); font-weight: 800; margin-bottom: 6px; } .search-hero__subtitle { color: rgba(255,255,255,0.7); margin-bottom: 20px; } .search-hero__input-wrap { display: flex; background: rgba(255,255,255,0.96); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow); max-width: 600px; } .search-hero__input { flex: 1; border: none; padding: 13px 16px; font-size: 1rem; color: var(--color-text-primary); background: transparent; outline: none; } .search-hero__input::placeholder { color: var(--color-text-muted); } .search-hero__submit { padding: 11px 16px; background: var(--color-primary); border: none; color: #fff; cursor: pointer; display: flex; align-items: center; transition: background var(--t-fast); } .search-hero__submit:hover { background: #238C4B; } .search-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 18px 0 14px; } .search-chip { padding: 5px 12px; border-radius: var(--radius-xl); font-size: 0.8125rem; font-weight: 600; background: var(--color-bg-primary); border: 1.5px solid var(--color-border-strong); color: var(--color-text-secondary); cursor: pointer; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); display: inline-flex; align-items: center; gap: 5px; } .search-chip[aria-pressed="true"], .search-chip.is-active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } .search-chip__count { background: rgba(0,0,0,0.12); padding: 1px 5px; border-radius: 4px; font-size: 0.6875rem; } .search-chip[aria-pressed="true"] .search-chip__count, .search-chip.is-active .search-chip__count { background: rgba(255,255,255,0.2); } .search-result-card { display: grid; grid-template-columns: 76px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border); align-items: start; transition: opacity var(--t-fast); } .search-result-card:hover { opacity: 0.75; } .search-result-card:last-child { border-bottom: none; } .search-result-card__img-wrap { width: 76px; height: 54px; border-radius: var(--radius); overflow: hidden; background: var(--color-bg-tertiary); flex-shrink: 0; } .search-result-card__title { font-size: 0.9375rem; font-weight: 600; color: var(--color-text-primary); line-height: 1.4; margin-bottom: 3px; } .search-result-card__excerpt { font-size: 0.8125rem; color: var(--color-text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================================= 23. ARTIKEL — reading experience ============================================================================= */ .article-title { font-size: clamp(1.25rem, 3vw, 1.875rem); font-weight: 800; color: var(--color-text-primary); line-height: 1.2; letter-spacing: -0.02em; } /* Hero image artikel — full width, lurus sejajar konten */ .article-hero-image { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 20px; /* Pastikan tidak terdorong oleh vertical interaction bar */ position: relative; left: 0; margin-left: 0; } .article-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Article wrap — reset padding yang dipaksa oleh has-reaction-bar-fixed */ .article-wrap { display: block; max-width: 100%; /* Override padding-left yang dibuat oleh has-reaction-bar-fixed */ position: relative; } /* Matikan padding-left yang mendorong konten artikel ke kanan */ body.has-reaction-bar-fixed #main-content, body.has-reaction-bar-fixed .container-app { padding-left: var(--sp-5); } /* Khusus mobile: vertical bar tersembunyi, tidak ada pergeseran */ @media (max-width: 767.98px) { body.has-reaction-bar-fixed #main-content, body.has-reaction-bar-fixed .container-app { padding-left: var(--sp-3); } .article-hero-image { border-radius: var(--radius); } } #articleContent { font-size: 1rem; line-height: 1.75; color: var(--color-text-secondary); max-width: 68ch; } #articleContent h2, #articleContent h3 { color: var(--color-text-primary); margin-top: 1.75em; margin-bottom: 0.5em; } #articleContent p { margin-bottom: 1.25em; } #articleContent img { width: 100%; height: auto; border-radius: var(--radius-lg); margin: 1.5em 0; display: block; } /* ============================================================================= FIX DESKTOP: Sub-featured cards — kompak seperti terpopuler Berlaku ab ≥768px. Di mobile tetap full-size (sudah compact sendirinya). ============================================================================= */ @media (min-width: 768px) { /* Grid sub-featured: kurangi gap */ .grid-sub-featured { gap: 16px; } /* Card standard (sub-featured) — kompak seperti grid-terpopuler */ .card-standard .card-news__img-wrap { aspect-ratio: 16 / 9; } .card-standard .card-news__body { padding: 10px 12px 12px; gap: 4px; } .card-standard .card-news__title { font-size: 0.875rem; font-weight: 700; line-height: 1.4; -webkit-line-clamp: 2; } .card-standard .card-news__excerpt { font-size: 0.75rem; -webkit-line-clamp: 2; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .card-standard .card-news__meta { font-size: 0.6875rem; gap: 6px; padding-top: 4px; } .card-standard .card-news__badge-pos { top: 6px; left: 6px; } .card-standard .card-news__category, .card-standard .badge-kat, .card-standard [class^="badge-kat--"] { font-size: 0.625rem; padding: 2px 7px; } } @media (min-width: 992px) { /* Desktop: sub-featured lebih compact lagi — seperti terpopuler grid */ .card-standard .card-news__title { font-size: 0.875rem; -webkit-line-clamp: 3; } .card-standard .card-news__excerpt { display: none; /* sembunyikan excerpt di desktop seperti terpopuler */ } } /* ============================================================================= 24. UTILS & ACCESSIBILITY ============================================================================= */ .hide-mobile { display: none; } @media (min-width: 576px) { .hide-mobile { display: revert; } } .hide-desktop { display: revert; } @media (min-width: 992px) { .hide-desktop { display: none; } } .text-muted { color: var(--color-text-muted); } /* Word overflow guard */ .card-news__title a, .card-list__title, .card-trending__title, .event-card__title, .article-title, .card-hero__title { word-wrap: break-word; overflow-wrap: break-word; word-break: break-word; hyphens: auto; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .card-news:hover { transform: none; } .akses-item:hover { transform: none; } } /* ============================================================================= FIX SIDEBAR & PAGE-GRID — overflow safe di semua zoom level ============================================================================= */ /* Sidebar column: tidak boleh melebihi grid cell-nya */ .sidebar { min-width: 0; max-width: 100%; box-sizing: border-box; } /* Pastikan semua child di sidebar tidak overflow */ .sidebar > * { min-width: 0; max-width: 100%; } /* Page grid: kolom utama dan sidebar keduanya min-width:0 */ @media (min-width: 992px) { .page-grid { /* Cegah grid cell melebar melebihi container */ overflow: hidden; } .page-grid > * { min-width: 0; max-width: 100%; box-sizing: border-box; } } /* Card trending di sidebar: teks tidak boleh overflow */ .card-trending__title, .card-trending__meta, .event-card__title, .event-card__meta { min-width: 0; overflow: hidden; word-break: break-word; } /* Teks & link di dalam widget: ellipsis jika terlalu panjang */ @media (min-width: 992px) { .card-trending__title { white-space: nowrap; text-overflow: ellipsis; display: block; -webkit-line-clamp: unset; } /* Kecuali kita mau multi-line — restore untuk sidebar */ .card-trending__title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } } /* ============================================================================= EV-ITEM — event card baru untuk berita.js & kategori.js Menggantikan .event-card agar tidak konflik dengan display:grid di main.css ============================================================================= */ .ev-item { display: flex !important; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-border); cursor: pointer; /* Reset semua inherited grid dari .event-card */ grid-template-columns: unset !important; transition: opacity 0.18s ease; } .ev-item:last-child { border-bottom: none; padding-bottom: 0; } .ev-item:first-child { padding-top: 0; } .ev-item:hover { opacity: 0.75; } /* ============================================================================= MODAL AGENDA — rounded semua sisi, tidak terpotong di atas ============================================================================= */ /* Backdrop: align center sempurna dengan padding */ .agenda-modal-backdrop { display: flex !important; align-items: center !important; justify-content: center !important; padding: 20px !important; } /* Modal box: rounded semua sisi */ .agenda-modal { border-radius: 20px !important; /* rounded semua sudut */ overflow: hidden !important; /* clip konten agar ikut rounded */ transform: translateY(16px) scale(0.97); transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1) !important; /* Pastikan tidak terpotong di atas */ margin: auto !important; max-height: calc(100vh - 40px) !important; } .agenda-modal-backdrop.is-open .agenda-modal { transform: translateY(0) scale(1) !important; } /* Header: padding sedikit lebih longgar */ .agenda-modal__header { padding: 20px 20px 16px !important; /* Tidak ada border-radius terpisah — ikut parent overflow hidden */ } /* Body: konsisten */ .agenda-modal__body { padding: 20px !important; padding-bottom: 28px !important; } /* Tombol close: posisi pas di sudut kanan */ .agenda-modal__close { top: 14px !important; right: 14px !important; }