/* KabarLagi 3.8 Performance & Reader Comfort — ringan, cepat, nyaman dibaca. */ /* ========================================================================== * 1. CRITICAL CSS - inline di via wp_add_inline_style (priority 1) * ======================================================================= */ :root{ /* Warna minimal, pakai CSS vars agar bisa override via Customizer */ --kl-bg:#fff;--kl-text:#111;--kl-muted:#555;--kl-border:#e5e5e5; --kl-surface:#fafafa;--kl-card:#fff;--kl-accent:#c00; --kl-focus:#0066cc;--kl-radius:12px;--kl-shadow:0 2px 8px rgba(0,0,0,.06); --kl-font-base:18px;--kl-line-height:1.8;--kl-max-width:760px; --kl-container:min(100% - 32px,1200px); --kl-sidebar-w:300px;--kl-sidebar-b-w:260px; --kl-header-h:64px;--kl-toolbar-h:56px; } @media (prefers-color-scheme:dark){ :root{--kl-bg:#0a0a0a;--kl-text:#eee;--kl-muted:#aaa;--kl-border:#333; --kl-surface:#161616;--kl-card:#1a1a1a;--kl-accent:#e66;} } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} body{margin:0;font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:var(--kl-font-base);line-height:var(--kl-line-height);color:var(--kl-text);background:var(--kl-bg);word-break:keep-all;overflow-wrap:break-word} /* Layout container ringan - tanpa clearfix legacy */ .kl-container{width:var(--kl-container);margin-inline:auto;padding-inline:16px} .kl-flex{display:flex;gap:var(--kl-gap,24px)} .kl-flex-col{flex-direction:column} .kl-flex-1{flex:1 1 auto;min-width:0} .kl-flex-none{flex:none} /* Skip link aksesibilitas */ .skip-link{position:absolute;top:-100%;left:16px;padding:12px 16px;background:var(--kl-accent);color:#fff;border-radius:8px;z-index:9999;text-decoration:none;font-weight:700} .skip-link:focus{top:16px} /* ========================================================================== * 2. HEADER WIDGET - Jam, tanggal, sapaan (ringan, vanilla JS) * ======================================================================= */ .kl-header-widget{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:8px 0;font-size:14px;color:var(--kl-muted)} .kl-header-widget__greeting{font-weight:600;color:var(--kl-text)} .kl-header-widget__time{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;letter-spacing:.02em;color:var(--kl-accent);white-space:nowrap} .kl-header-widget__date{white-space:nowrap} .kl-header-widget__sep{opacity:.4} @media (max-width:640px){ .kl-header-widget{gap:8px;font-size:13px} .kl-header-widget__date{display:none} } /* ========================================================================== * 3. SINGLE ARTICLE - tata letak baca nyaman, ringan * ======================================================================= */ .single .kl-container{max-width:var(--kl-max-width)} .single header.entry-header{margin-bottom:1.5rem} .single .single-post-title{font-size:clamp(1.75rem,4vw,2.5rem);line-height:1.25;font-weight:800;letter-spacing:-.02em;margin:0 0 .75rem;text-wrap:balance} .single .entry-sub-title{font-size:clamp(1rem,2vw,1.15rem);line-height:1.5;font-weight:500;color:var(--kl-muted);margin:0 0 1rem} .single .entry-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;font-size:.85rem;color:var(--kl-muted);margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid var(--kl-border)} .single .entry-meta time{font-variant-numeric:tabular-nums} .single .entry-meta .author{font-weight:600;color:var(--kl-text);text-decoration:none} .single .entry-meta .author:hover{color:var(--kl-accent)} .single .featured-image{margin:1.5rem 0;border-radius:var(--kl-radius);overflow:hidden;max-width:100%} .single .featured-image img{width:100%;height:auto;display:block} .single .featured-image figcaption{font-size:.8rem;color:var(--kl-muted);padding:.5rem 0;text-align:center} .single .entry-content{font-size:var(--kl-font-base);line-height:var(--kl-line-height)} .single .entry-content > * + *{margin-top:1.1em} .single .entry-content p{margin:0;text-indent:0;text-wrap:pretty} .single .entry-content p:first-of-type::first-letter{font-size:1.15em;font-weight:600;float:left;line-height:.9;margin:.05em .08em 0 0;color:var(--kl-text)} @media (max-width:640px){ .single .entry-content p:first-of-type::first-letter{float:none;font-size:inherit;font-weight:inherit;margin:0} } .single .entry-content h2,.single .entry-content h3{scroll-margin-top:calc(var(--kl-header-h) + var(--kl-toolbar-h) + 1rem);margin:2em 0 .75em;font-weight:800;line-height:1.3;text-wrap:balance} .single .entry-content h2{font-size:clamp(1.35rem,3vw,1.75rem)} .single .entry-content h3{font-size:clamp(1.15rem,2.5vw,1.35rem)} .single .entry-content blockquote{margin:1.5em 0;padding:1rem 1.5rem;border-left:4px solid var(--kl-accent);background:var(--kl-surface);border-radius:0 var(--kl-radius) var(--kl-radius) 0;font-style:italic;color:var(--kl-text)} .single .entry-content figure{margin:1.5em 0;max-width:100%} .single .entry-content figure img{border-radius:var(--kl-radius);width:100%;height:auto} .single .entry-content figcaption{font-size:.8rem;color:var(--kl-muted);text-align:center;padding:.5rem 0} .single .entry-content :where(ul,ol){padding-left:1.5em;margin:1em 0} .single .entry-content li{margin:.35em 0} .single .entry-content a{color:var(--kl-accent);text-decoration:underline;text-underline-offset:2px} .single .entry-content a:hover{color:var(--kl-text)} .single .entry-content table{width:100%;max-width:100%;border-collapse:collapse;font-size:.9em;overflow-x:auto;display:block;margin:1.5em 0} .single .entry-content th,.single .entry-content td{padding:.5rem .75rem;border:1px solid var(--kl-border);text-align:left} /* Reader toolbar - sticky, ringan */ .kl-reader-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;margin:1rem 0;border:1px solid var(--kl-border);border-radius:var(--kl-radius);background:var(--kl-card);box-shadow:var(--kl-shadow);position:sticky;top:calc(var(--kl-header-h) + 16px);z-index:50} .kl-reader-toolbar__group{display:flex;align-items:center;gap:6px} .kl-reader-toolbar__sep{width:1px;height:24px;background:var(--kl-border);margin:0 4px} .kl-reader-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;min-height:40px;padding:0 10px;border:1px solid var(--kl-border);border-radius:8px;background:var(--kl-surface);color:var(--kl-text);font-size:13px;font-weight:700;line-height:1;cursor:pointer;transition:background .15s,border-color .15s,color .15s} .kl-reader-btn:hover,.kl-reader-btn:focus-visible{background:var(--kl-accent);border-color:var(--kl-accent);color:#fff} .kl-reader-btn[aria-pressed="true"]{background:var(--kl-accent);border-color:var(--kl-accent);color:#fff} .kl-reader-btn:disabled{opacity:.4;cursor:not-allowed} .kl-reader-toolbar__font-val{min-width:3.5ch;text-align:center;font-variant-numeric:tabular-nums;font-size:12px;color:var(--kl-muted)} .kl-reader-toolbar__progress{font-size:12px;font-weight:700;color:var(--kl-muted);font-variant-numeric:tabular-nums} @media (max-width:640px){ .kl-reader-toolbar{gap:6px;padding:6px 8px;top:calc(var(--kl-header-h) + 8px)} .kl-reader-toolbar__sep{display:none} .kl-reader-btn{min-height:36px;font-size:12px;padding:0 8px} .kl-reader-toolbar__font-val{display:none} } /* Focus mode - blur non-hover */ .kl-focus-mode .entry-content *{transition:opacity .15s ease,filter .15s ease} .kl-focus-mode .entry-content:has(*:hover) *:not(:hover):not(.kl-reading-highlight){opacity:.3;filter:blur(1px)} .kl-focus-mode .entry-content *:hover{opacity:1;filter:none} /* Reading highlight */ .kl-reading-highlight{background:var(--kl-highlight,#fff2a8);border-radius:4px;box-shadow:0 0 0 3px var(--kl-highlight,#fff2a8);scroll-margin-top:calc(var(--kl-header-h) + var(--kl-toolbar-h) + 2rem)} @media (prefers-color-scheme:dark){ .kl-reading-highlight{background:#7c2d12;box-shadow:0 0 0 3px #7c2d12;color:#fff} } /* ========================================================================== * 4. LANDING SHORTCODES - hero, grid, slider, breaking, newsletter * ======================================================================= */ /* Base card */ .kl-card{display:flex;flex-direction:column;border:1px solid var(--kl-border);border-radius:var(--kl-radius);overflow:hidden;background:var(--kl-card);transition:box-shadow .2s,transform .2s} .kl-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.1);transform:translateY(-2px)} .kl-card__link{color:inherit;text-decoration:none} .kl-card__media{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--kl-surface)} .kl-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .3s ease} .kl-card:hover .kl-card__media img{transform:scale(1.03)} .kl-card__body{display:flex;flex-direction:column;flex:1;padding:1rem} .kl-card__cat{font-size:.7rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--kl-accent);margin-bottom:.5rem} .kl-card__title{margin:0 0 .5rem;font-size:1.05rem;line-height:1.35;font-weight:800;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .kl-card__meta{font-size:.8rem;color:var(--kl-muted);margin-top:auto} /* Hero section */ .kl-hero{display:grid;grid-template-columns:1.5fr 1fr;gap:1.5rem;margin-bottom:2rem} .kl-hero__main{grid-row:span 2;min-height:380px} .kl-hero__main .kl-card__media{min-height:380px} .kl-hero__main .kl-card__body{position:absolute;inset:auto 1.5rem 1.5rem;padding:0;background:linear-gradient(to top,rgba(0,0,0,.85),transparent);color:#fff} .kl-hero__main .kl-card__cat{color:#ffd84a} .kl-hero__main .kl-card__title{font-size:clamp(1.5rem,3.5vw,2.25rem);-webkit-line-clamp:3} .kl-hero__secondary{display:grid;grid-template-rows:1fr 1fr;gap:1rem} @media (max-width:900px){ .kl-hero{grid-template-columns:1fr} .kl-hero__main{min-height:300px} .kl-hero__main .kl-card__media{min-height:300px} .kl-hero__secondary{grid-template-columns:1fr 1fr;grid-template-rows:none} } @media (max-width:640px){ .kl-hero__secondary{grid-template-columns:1fr} } /* Grid posts */ .kl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem} .kl-grid--2{grid-template-columns:repeat(2,1fr)} .kl-grid--4{grid-template-columns:repeat(4,1fr)} @media (max-width:1024px){.kl-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.kl-grid,.kl-grid--2,.kl-grid--4{grid-template-columns:1fr}} /* Slider - CSS scroll snap, no JS dependency */ .kl-slider{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;scrollbar-width:thin;-webkit-overflow-scrolling:touch} .kl-slider::-webkit-scrollbar{height:6px} .kl-slider::-webkit-scrollbar-thumb{background:var(--kl-border);border-radius:3px} .kl-slider__item{flex:0 0 clamp(280px,45vw,360px);scroll-snap-align:start} .kl-slider__nav{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.75rem} .kl-slider__btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--kl-border);border-radius:50%;background:var(--kl-card);color:var(--kl-text);cursor:pointer} .kl-slider__btn:hover{background:var(--kl-accent);border-color:var(--kl-accent);color:#fff} /* Breaking news ticker */ .kl-breaking{display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;background:var(--kl-accent);color:#fff;border-radius:var(--kl-radius);overflow:hidden} .kl-breaking__label{flex:0 0 auto;font-weight:800;font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;background:rgba(0,0,0,.2);padding:.25rem .75rem;border-radius:999px} .kl-breaking__track{flex:1;overflow:hidden;white-space:nowrap} .kl-breaking__list{display:inline-flex;gap:2rem;animation:kl-breaking-scroll 30s linear infinite} .kl-breaking__item a{color:#fff;font-weight:600;text-decoration:none;white-space:nowrap} .kl-breaking__item a:hover{text-decoration:underline} @keyframes kl-breaking-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .kl-breaking:hover .kl-breaking__list{animation-play-state:paused} @media (prefers-reduced-motion:reduce){ .kl-breaking__list{animation:none} } /* Newsletter */ .kl-newsletter{display:flex;flex-direction:column;gap:1rem;padding:2rem;border:1px solid var(--kl-border);border-radius:var(--kl-radius);background:var(--kl-surface);text-align:center} .kl-newsletter__title{margin:0;font-size:1.5rem;font-weight:800} .kl-newsletter__desc{margin:0;color:var(--kl-muted)} .kl-newsletter__form{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center} .kl-newsletter__input{flex:1;min-width:240px;padding:.75rem 1rem;border:1px solid var(--kl-border);border-radius:8px;background:var(--kl-card);color:var(--kl-text);font-size:1rem} .kl-newsletter__btn{padding:.75rem 1.5rem;border:0;border-radius:8px;background:var(--kl-accent);color:#fff;font-weight:700;cursor:pointer;white-space:nowrap} .kl-newsletter__btn:hover{opacity:.9} /* ========================================================================== * 5. RELATED / RECOMMENDATION - slider ringan * ======================================================================= */ .kl-related{margin:2rem 0} .kl-related__head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem} .kl-related__title{margin:0;font-size:1.25rem;font-weight:900;letter-spacing:-.01em} .kl-related__row{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:.5rem;scrollbar-width:thin} .kl-related__card{flex:0 0 clamp(240px,40vw,300px);scroll-snap-align:start} /* ========================================================================== * 6. COMMENTS - Threads style, ringan * ======================================================================= */ .kl-comments{margin-top:2rem} .kl-comments__title{margin:0 0 1.5rem;font-size:1.25rem;font-weight:800} .kl-comment{display:flex;gap:1rem;margin-bottom:1.5rem;padding-left:1.5rem;border-left:2px solid var(--kl-border)} .kl-comment__avatar{flex:0 0 40px;width:40px;height:40px;border-radius:50%;object-fit:cover} .kl-comment__body{flex:1;min-width:0} .kl-comment__header{display:flex;align-items:baseline;gap:.5rem;margin-bottom:.25rem;font-size:.9rem} .kl-comment__author{font-weight:800;color:var(--kl-text)} .kl-comment__time{color:var(--kl-muted);font-variant-numeric:tabular-nums} .kl-comment__content{font-size:.95rem;line-height:1.7;color:var(--kl-text);overflow-wrap:anywhere} .kl-comment__reply{margin-top:.5rem} .kl-comment__reply-btn{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .75rem;font-size:.8rem;font-weight:700;border:1px solid var(--kl-border);border-radius:999px;background:var(--kl-surface);color:var(--kl-text);cursor:pointer;text-decoration:none} .kl-comment__reply-btn:hover{background:var(--kl-accent);border-color:var(--kl-accent);color:#fff} .kl-comment__children{margin-left:.5rem;padding-left:1rem;border-left:2px solid var(--kl-border)} /* ========================================================================== * 7. PERFORMANCE UTILITIES * ======================================================================= */ /* Lazy images - native loading */ img[loading="lazy"]{opacity:0;transition:opacity .3s ease} img[loading="lazy"].loaded{opacity:1} /* Content visibility - skip render offscreen */ .kl-content-visibility{content-visibility:auto;contain-intrinsic-size:0 500px} /* Reduce motion */ @media (prefers-reduced-motion:reduce){ *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .kl-slider__list,.kl-breaking__list{animation:none !important} } /* Print */ @media print{ .kl-reader-toolbar,.kl-header-widget,.kl-breaking,.kl-slider__nav,.kl-related__nav,.kl-comment__reply,.kl-card:hover{display:none !important} .single .kl-container{max-width:none} .single .entry-content{font-size:12pt;line-height:1.6;color:#000} .single .entry-content a{color:#000;text-decoration:none} } /* ========================================================================== * 8. RESPONSIVE TYPOGRAPHY - fluid, tidak pakai breakpoint berlebihan * ======================================================================= */ :root{ --fs-step-0:clamp(.875rem,1.5vw,1rem); /* 14-16px */ --fs-step-1:clamp(1rem,1.8vw,1.125rem); /* 16-18px */ --fs-step-2:clamp(1.125rem,2.2vw,1.25rem); /* 18-20px */ --fs-step-3:clamp(1.35rem,3vw,1.75rem); /* 22-28px */ --fs-step-4:clamp(1.75rem,4vw,2.5rem); /* 28-40px */ } .single .entry-content{font-size:var(--fs-step-1)} .single .entry-content h2{font-size:var(--fs-step-3)} .single .entry-content h3{font-size:var(--fs-step-2)} /* ========================================================================== * 9. READING PROGRESS BAR - top thin line * ======================================================================= */ .kl-reading-progress{ position:fixed;top:0;left:0;right:0;height:3px;background:var(--kl-accent,#c00); transform-origin:left center;transform:scaleX(0);opacity:0; transition:opacity .2s ease;z-index:9999;pointer-events:none; } /* ========================================================================== * 10. LIVE SEARCH DROPDOWN * ======================================================================= */ .kl-live-search-wrapper{position:relative} .kl-live-search-dropdown{ position:absolute;top:calc(100% + 8px);left:0;right:0; background:var(--kl-card,#fff);border:1px solid var(--kl-border,#e5e5e5); border-radius:var(--kl-radius,12px);box-shadow:var(--kl-shadow,0 8px 24px rgba(0,0,0,.12)); overflow:hidden;z-index:1000;max-height:400px;overflow-y:auto; } .kl-live-search-dropdown[hidden]{display:none} .kl-live-search-dropdown button[role="option"]{ display:flex;align-items:center;gap:.75rem;width:100%;padding:.75rem 1rem; text-align:left;background:transparent;border:0;cursor:pointer; font:inherit;color:var(--kl-text,#111);transition:background .15s; } .kl-live-search-dropdown button[role="option"]:hover, .kl-live-search-dropdown button[role="option"].kl-live-search-highlight{ background:var(--kl-surface,#fafafa); } .kl-live-search-title{font-weight:600;flex:1} .kl-live-search-cat{font-size:.8rem;color:var(--kl-muted,#555);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:120px} @media (prefers-color-scheme:dark){ .kl-live-search-dropdown{background:var(--kl-card,#1a1a1a);border-color:var(--kl-border,#333)} .kl-live-search-dropdown button[role="option"]:hover, .kl-live-search-dropdown button[role="option"].kl-live-search-highlight{ background:var(--kl-surface,#222) } } /* ========================================================================== * 11. NEWS FEATURES STYLES * ======================================================================= */ /* Breaking News Ticker (inline critical CSS also in PHP) */ .kl-breaking-news{display:flex;align-items:center;gap:12px;padding:8px 16px;background:var(--kl-accent,#c00);color:#fff;font-size:14px;font-weight:700;overflow:hidden;white-space:nowrap} .kl-breaking-label{flex:0 0 auto;background:rgba(0,0,0,.2);padding:4px 12px;border-radius:999px;font-size:12px;letter-spacing:.05em;text-transform:uppercase} .kl-breaking-track-wrap{flex:1;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)} .kl-breaking-track{display:flex;gap:48px;margin:0;padding:0;list-style:none;animation:kl-breaking-scroll 30s linear infinite} .kl-breaking-track:hover,.kl-breaking-track:focus-within{animation-play-state:paused} .kl-breaking-item a{color:#fff;text-decoration:none;font-weight:700;white-space:nowrap} .kl-breaking-item a:hover{text-decoration:underline} @keyframes kl-breaking-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.kl-breaking-track{animation:none!important}} @media (max-width:640px){.kl-breaking-news{font-size:13px;padding:6px 12px}.kl-breaking-label{font-size:11px;padding:3px 8px}} /* Live Blog */ .kl-live-blog{border:1px solid var(--kl-border,#e5e5e5);border-radius:var(--kl-radius,12px);overflow:hidden;background:var(--kl-card,#fff);margin:1.5rem 0} .kl-live-blog__header{display:flex;align-items:center;gap:12px;padding:1rem 1.5rem;background:var(--kl-surface,#fafafa);border-bottom:1px solid var(--kl-border,#e5e5e5)} .kl-live-badge{display:inline-flex;align-items:center;justify-content:center;min-width:48px;height:24px;padding:0 8px;background:var(--kl-accent,#c00);color:#fff;font-size:11px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;animation:kl-live-pulse 1.5s ease-in-out infinite} @keyframes kl-live-pulse{0%,100%{opacity:1}50%{opacity:.6}} .kl-live-blog__header h2{margin:0;font-size:1.25rem;font-weight:800} .kl-live-updated{margin:0;font-size:.85rem;color:var(--kl-muted,#555)} .kl-live-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0} .kl-live-item{border-top:1px solid var(--kl-border,#e5e5e5);padding:1.5rem} .kl-live-item:first-child{border-top:none} .kl-live-time{display:inline-block;min-width:80px;padding:2px 8px;background:var(--kl-accent,#c00);color:#fff;font-size:.75rem;font-weight:700;border-radius:4px;margin-bottom:.75rem} .kl-live-content{font-size:1rem;line-height:1.7;color:var(--kl-text,#111)} .kl-live-image{margin:1rem 0 0} .kl-live-image img{max-width:100%;height:auto;border-radius:var(--kl-radius,12px)} @media (max-width:640px){ .kl-live-blog__header{flex-wrap:wrap;gap:8px} .kl-live-item{padding:1rem} } /* Trending */ .kl-trending{margin:1.5rem 0} .kl-trending__head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:2px solid var(--kl-accent,#c00)} .kl-trending__head h2{margin:0;font-size:1.25rem;font-weight:900} .kl-trending__period{font-size:.8rem;color:var(--kl-muted,#555);background:var(--kl-surface,#fafafa);padding:.25rem .75rem;border-radius:999px} .kl-trending__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px} .kl-trending-item{display:flex;align-items:flex-start;gap:12px;padding:12px;background:var(--kl-card,#fff);border:1px solid var(--kl-border,#e5e5e5);border-radius:var(--kl-radius,12px);transition:box-shadow .2s,transform .2s} .kl-trending-item:hover{box-shadow:0 8px 24px rgba(0,0,0,.1);transform:translateY(-2px)} .kl-trending-rank{display:flex;align-items:center;justify-content:center;min-width:36px;height:36px;background:var(--kl-accent,#c00);color:#fff;font-weight:800;font-size:.9rem;border-radius:50%} .kl-trending-link{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;flex:1;min-width:0} .kl-trending-thumb{flex:0 0 80px;width:80px;height:60px;border-radius:8px;overflow:hidden;background:var(--kl-surface,#fafafa)} .kl-trending-thumb img{width:100%;height:100%;object-fit:cover} .kl-trending-title{font-weight:700;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .kl-trending-views{font-size:.75rem;color:var(--kl-muted,#555);white-space:nowrap;margin-left:auto} @media (max-width:640px){ .kl-trending-link{gap:8px} .kl-trending-thumb{min-width:60px;width:60px;height:45px} } /* News Section */ .kl-news-section{margin:2rem 0} .kl-section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--kl-border,#e5e5e5)} .kl-section-head h2{margin:0;font-size:1.25rem;font-weight:900} .kl-section-more{display:inline-flex;align-items:center;gap:4px;color:var(--kl-accent,#c00);font-weight:700;text-decoration:none;font-size:.9rem} .kl-section-more:hover{text-decoration:underline} .kl-news-section__body--grid{display:grid;gap:1.5rem} .kl-news-section__body--grid.kl-news-grid--1{grid-template-columns:1fr} .kl-news-section__body--grid.kl-news-grid--2{grid-template-columns:repeat(2,1fr)} .kl-news-section__body--grid.kl-news-grid--3{grid-template-columns:repeat(3,1fr)} .kl-news-section__body--grid.kl-news-grid--4{grid-template-columns:repeat(4,1fr)} @media (max-width:1024px){.kl-news-grid--3,.kl-news-grid--4{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.kl-news-grid--2,.kl-news-grid--3,.kl-news-grid--4{grid-template-columns:1fr}} .kl-news-section__body--list{display:flex;flex-direction:column;gap:1rem} .kl-news-section__body--slider{position:relative} .kl-news-slider{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;scrollbar-width:thin} .kl-news-slider__item{flex:0 0 clamp(280px,45vw,360px);scroll-snap-align:start} .kl-news-slider__nav{display:flex;justify-content:flex-end;gap:.5rem;margin-top:.75rem} .kl-news-slider__nav .kl-slider__btn{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border:1px solid var(--kl-border);border-radius:50%;background:var(--kl-card);color:var(--kl-text);cursor:pointer} .kl-news-slider__nav .kl-slider__btn:hover{background:var(--kl-accent);border-color:var(--kl-accent);color:#fff} /* Related Location */ .kl-related-location{margin:1.5rem 0;padding:1.5rem;border:1px solid var(--kl-border,#e5e5e5);border-radius:var(--kl-radius,12px);background:var(--kl-surface,#fafafa)} .kl-related-location h3{margin:0 0 1rem;font-size:1.1rem;font-weight:800} .kl-related-location__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.5rem} .kl-related-location__list li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:.75rem 1rem;background:var(--kl-card,#fff);border:1px solid var(--kl-border,#e5e5e5);border-radius:8px} .kl-related-location__list a{font-weight:600;color:var(--kl-text)} .kl-related-location__list time{font-size:.85rem;color:var(--kl-muted);white-space:nowrap} /* Dark mode support */ @media (prefers-color-scheme:dark){ .kl-live-blog{border-color:var(--kl-border,#333);background:var(--kl-card,#1a1a1a)} .kl-live-blog__header{background:var(--kl-surface,#222);border-color:var(--kl-border,#333)} .kl-live-item{border-color:var(--kl-border,#333)} .kl-trending-item{border-color:var(--kl-border,#333);background:var(--kl-card,#1a1a1a)} .kl-trending-thumb{background:var(--kl-surface,#222)} .kl-section-head{border-color:var(--kl-border,#333)} .kl-news-section__body--grid .kl-card{border-color:var(--kl-border,#333);background:var(--kl-card,#1a1a1a)} .kl-related-location{border-color:var(--kl-border,#333);background:var(--kl-surface,#222)} .kl-related-location__list li{border-color:var(--kl-border,#333);background:var(--kl-card,#1a1a1a)} } /* FIX: fallback cover editorial (SVG branded) di dalam kartu slider/grid/hero agar selalu terisi gambar walau artikel tidak memiliki featured image. */ .kl-card__media .kabarlagi-fallback-cover{display:block;width:100%;height:100%;min-height:0} .kl-card__media .kabarlagi-fallback-cover svg{display:block;width:100%;height:100%;object-fit:cover}