/* Katakini Editorial - desain ulang halaman home (desktop).
   Vanilla CSS, dari bahan/fe/DESIGN.md + bahan/fe/code.html (bahan/fe/screen.png).
   Dipakai HANYA oleh pages/desktop/index.php - halaman lain belum ikut desain ini. */

:root{
	--kt-surface:#f8fafc;
	--kt-surface-lowest:#ffffff;
	--kt-surface-low:#f1f5f9;
	--kt-surface-high:#e2e8f0;
	--kt-on-surface:#0f172a;
	--kt-on-surface-variant:#334155;
	--kt-muted:#64748b;
	--kt-outline:#e2e8f0;
	--kt-outline-strong:#cbd5e1;
	--kt-primary:#c91428;
	--kt-primary-hover:#991b1b;
	--kt-on-primary:#ffffff;
	--kt-secondary:#0f172a;
	--kt-tint:#fef2f2;
	--kt-tint-neutral:#f1f5f9;
	--kt-inverse-surface:#0f172a;
	--kt-inverse-on-surface:#e2e8f0;
	--kt-inverse-muted:#94a3b8;

	--kt-font-serif:'Newsreader',Georgia,'Times New Roman',serif;
	--kt-font-sans:'Plus Jakarta Sans',-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;

	--kt-radius:4px;
	--kt-radius-pill:9999px;

	--kt-gutter:1.5rem;
	--kt-margin:2rem;
	--kt-space-xs:.25rem;
	--kt-space-sm:.5rem;
	--kt-space-md:1rem;
	--kt-space-lg:1.5rem;
	--kt-space-xl:2.5rem;

	--kt-shadow-sm:0 1px 2px rgba(15,23,42,.04);
	--kt-shadow-md:0 4px 12px -2px rgba(15,23,42,.06),0 2px 4px -2px rgba(15,23,42,.04);
}

.kt-home{background:var(--kt-surface);color:var(--kt-on-surface);font-family:var(--kt-font-sans);font-size:15px;line-height:1.6;}
.kt-home *{box-sizing:border-box;}
.kt-home img{max-width:100%;display:block;}
.kt-home a{color:inherit;text-decoration:none;}
.kt-wrap{max-width:1280px;margin:0 auto;padding:0 var(--kt-margin);}

/* ---- Topbar (tanggal/jam + pencarian) ---- */
.kt-topbar{background:var(--kt-surface-low);border-bottom:1px solid var(--kt-outline);}
.kt-topbar .kt-wrap{height:40px;display:flex;align-items:center;justify-content:space-between;gap:var(--kt-space-md);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--kt-on-surface-variant);}
.kt-topbar-date{display:flex;align-items:center;gap:var(--kt-space-xs);}
.kt-search{position:relative;display:flex;align-items:center;}
.kt-search input{width:220px;background:var(--kt-surface-lowest);border:1px solid var(--kt-outline-strong);border-radius:var(--kt-radius);padding:5px 32px 5px 10px;font:13px var(--kt-font-sans);color:var(--kt-on-surface);}
.kt-search input:focus{outline:2px solid var(--kt-primary);outline-offset:1px;}
.kt-search button{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--kt-on-surface-variant);cursor:pointer;line-height:0;padding:2px;}

/* ---- Brand ---- */
.kt-brand{padding:var(--kt-space-lg) 0;text-align:center;}
.kt-brand-name{font-family:var(--kt-font-serif);font-weight:700;font-size:40px;letter-spacing:-.02em;color:var(--kt-on-surface);}
.kt-brand-name span{color:var(--kt-primary);}
.kt-brand-logo{display:block;margin:0 auto;max-height:48px;width:auto;}

/* ---- Nav kategori (sticky) ---- */
.kt-nav{position:sticky;top:0;z-index:30;background:var(--kt-primary-hover);backdrop-filter:blur(6px);box-shadow:0 1px 8px rgba(0,0,0,.04);}
.kt-nav-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--kt-space-xs);height:56px;align-items:center;overflow-x:auto;}
.kt-nav-list a{display:inline-block;padding:var(--kt-space-sm) var(--kt-space-md);border-radius:var(--kt-radius);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#fff;white-space:nowrap;transition:background .15s,color .15s;}
.kt-nav-list a:hover{background:rgba(255,255,255,.15);color:#fff;}
.kt-nav-list a.is-active{background:#fff;color:var(--kt-primary-hover);}

/* ---- Grid umum ---- */
.kt-section{padding:var(--kt-space-xl) 0;}
.kt-grid-12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--kt-space-xl);}
.kt-col-8{grid-column:span 8;}
.kt-col-4{grid-column:span 4;}
.kt-stack{display:flex;flex-direction:column;gap:var(--kt-space-lg);}
.kt-stack-md{display:flex;flex-direction:column;gap:var(--kt-space-md);}

.kt-card{background:var(--kt-surface-lowest);border-radius:var(--kt-radius);box-shadow:var(--kt-shadow-sm);}
.kt-card-pad{padding:var(--kt-space-md);}

.kt-section-title{display:flex;align-items:center;justify-content:space-between;gap:var(--kt-space-sm);margin-bottom:var(--kt-space-md);}
.kt-section-title h2{display:flex;align-items:center;gap:var(--kt-space-sm);font-family:var(--kt-font-serif);font-size:24px;font-weight:600;margin:0;}
.kt-section-title h2::before{content:'';width:10px;height:24px;background:var(--kt-primary);border-radius:2px;}
.kt-section-title .kt-more{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--kt-primary);white-space:nowrap;}
.kt-section-title .kt-more:hover{color:var(--kt-primary-hover);}

/* ---- Pill / badge ---- */
.kt-pill{display:inline-block;padding:3px 10px;border-radius:var(--kt-radius-pill);background:var(--kt-primary);color:var(--kt-on-primary);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;}
.kt-pill-dark{background:rgba(15,23,42,.85);color:#fff;}
.kt-pill-neutral{background:var(--kt-tint-neutral);color:var(--kt-on-surface-variant);}
.kt-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--kt-muted);text-transform:uppercase;letter-spacing:.03em;}
.kt-meta span+span::before{content:'•';margin-right:6px;color:var(--kt-outline-strong);}

/* ---- Hero ---- */
.kt-hero-media{position:relative;width:100%;height:440px;overflow:hidden;border-radius:var(--kt-radius);background:var(--kt-surface-low);margin-bottom:var(--kt-space-md);}
.kt-hero-media img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.kt-hero-media:hover img{transform:scale(1.03);}
.kt-hero-badges{position:absolute;top:16px;left:16px;display:flex;gap:var(--kt-space-xs);}
.kt-hero-title{font-family:var(--kt-font-serif);font-size:38px;line-height:1.15;font-weight:700;letter-spacing:-.02em;margin:var(--kt-space-sm) 0;}
.kt-hero-title a:hover{color:var(--kt-primary);}
.kt-hero-lead{font-size:17px;line-height:1.6;color:var(--kt-on-surface-variant);margin:0 0 var(--kt-space-sm);}
.kt-byline{display:flex;align-items:center;gap:var(--kt-space-sm);font-size:13px;color:var(--kt-on-surface-variant);padding-top:var(--kt-space-sm);border-top:1px solid var(--kt-outline);}
.kt-byline-avatar{width:30px;height:30px;border-radius:50%;background:var(--kt-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0;}

/* ---- Trending ---- */
.kt-trend-list{list-style:none;margin:0;padding:0;}
.kt-trend-item{display:flex;gap:var(--kt-space-sm);align-items:flex-start;padding:var(--kt-space-sm) 0;border-top:1px solid var(--kt-outline);}
.kt-trend-item:first-child{border-top:0;padding-top:0;}
.kt-trend-rank{font-family:var(--kt-font-serif);font-size:26px;font-weight:700;color:var(--kt-outline-strong);width:28px;flex-shrink:0;line-height:1.2;}
.kt-trend-item:nth-child(-n+3) .kt-trend-rank{color:var(--kt-primary);}
.kt-trend-title{font-size:14px;font-weight:600;line-height:1.4;}
.kt-trend-title a:hover{color:var(--kt-primary);}

/* ---- Strip kecil (editorpick / otomotif dsb) ---- */
.kt-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--kt-space-md);}
.kt-strip-card{display:flex;flex-direction:column;gap:6px;}
.kt-strip-thumb{position:relative;width:100%;height:120px;border-radius:var(--kt-radius);overflow:hidden;background:var(--kt-surface-low);}
.kt-strip-thumb img{width:100%;height:100%;object-fit:cover;}
.kt-strip-title{font-size:14px;font-weight:600;line-height:1.35;}
.kt-strip-title a:hover{color:var(--kt-primary);}
.kt-strip-byline{font-size:12px;color:var(--kt-muted);}

/* ---- Kartu artikel horizontal (feed utama) ---- */
.kt-article-row{display:flex;gap:var(--kt-space-md);transition:box-shadow .15s;}
.kt-article-row:hover{box-shadow:var(--kt-shadow-md);}
.kt-article-row-thumb{position:relative;width:240px;height:160px;flex-shrink:0;border-radius:var(--kt-radius);overflow:hidden;background:var(--kt-surface-low);}
.kt-article-row-thumb img{width:100%;height:100%;object-fit:cover;}
.kt-article-row-body{display:flex;flex-direction:column;justify-content:space-between;min-width:0;flex:1;padding:var(--kt-space-sm) 0;}
.kt-article-row-title{font-family:var(--kt-font-serif);font-size:21px;font-weight:600;line-height:1.3;margin:4px 0;}
.kt-article-row-title a:hover{color:var(--kt-primary);}
.kt-article-row-summary{font-size:13px;color:var(--kt-on-surface-variant);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0;}

.kt-loadmore{display:flex;justify-content:center;margin-top:var(--kt-space-md);}
.kt-btn-outline{border:1px solid var(--kt-outline-strong);background:var(--kt-surface-lowest);color:var(--kt-on-surface);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:10px 24px;border-radius:var(--kt-radius);cursor:pointer;}
.kt-btn-outline:hover{background:var(--kt-surface-low);}

/* ---- Widget kategori sidebar ---- */
.kt-side-widget-item{display:flex;flex-direction:column;gap:4px;padding-top:var(--kt-space-sm);border-top:1px solid var(--kt-surface-high);}
.kt-side-widget-item:first-child{border-top:0;padding-top:0;}
.kt-side-widget-thumb{position:relative;width:100%;height:150px;border-radius:var(--kt-radius);overflow:hidden;background:var(--kt-surface-low);margin-bottom:4px;}
.kt-side-widget-thumb img{width:100%;height:100%;object-fit:cover;}
.kt-side-widget-title{font-size:15px;font-weight:600;line-height:1.35;}
.kt-side-widget-title a:hover{color:var(--kt-primary);}

/* ---- Video (panel gelap) ---- */
.kt-video-section{background:var(--kt-inverse-surface);color:var(--kt-inverse-on-surface);}
.kt-video-section .kt-section-title h2{color:var(--kt-inverse-on-surface);}
.kt-video-section .kt-section-title p{margin:2px 0 0;font-size:13px;color:var(--kt-inverse-muted);}
.kt-video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--kt-space-lg);}
.kt-video-card-media{position:relative;width:100%;height:200px;background:#000;border-radius:var(--kt-radius);overflow:hidden;}
.kt-video-card-media img{width:100%;height:100%;object-fit:cover;}
.kt-video-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25);}
.kt-video-play span{width:44px;height:44px;border-radius:50%;background:var(--kt-primary);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;}
.kt-video-badge{position:absolute;top:8px;left:8px;}
.kt-video-card-body{padding:var(--kt-space-sm) 0;}
.kt-video-card-body h3{font-family:var(--kt-font-serif);font-size:17px;font-weight:600;line-height:1.35;margin:4px 0;}
.kt-video-card-body h3 a:hover{color:#fca5a5;}
.kt-video-meta{display:flex;justify-content:space-between;font-size:12px;color:var(--kt-inverse-muted);}

/* ---- Footer ---- */
.kt-footer{background:var(--kt-surface-low);border-top:1px solid var(--kt-outline);margin-top:var(--kt-space-xl);}
.kt-footer-brand{font-family:var(--kt-font-serif);font-size:28px;font-weight:600;}
.kt-footer-brand span{color:var(--kt-primary);}
.kt-footer-desc{max-width:420px;color:var(--kt-on-surface-variant);font-size:14px;margin:var(--kt-space-sm) 0;}
.kt-footer-links{list-style:none;margin:var(--kt-space-md) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:var(--kt-space-md);font-size:12px;}
.kt-footer-links a:hover{color:var(--kt-primary);}
.kt-footer-bottom{margin-top:var(--kt-space-lg);padding-top:var(--kt-space-md);border-top:1px solid var(--kt-outline);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--kt-space-sm);font-size:12px;color:var(--kt-muted);}
.kt-social{display:flex;gap:var(--kt-space-sm);}
.kt-social a{width:28px;height:28px;border-radius:50%;background:var(--kt-surface-high);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;}
.kt-social a:hover{background:var(--kt-primary);color:#fff;}

/* ---- Placeholder gambar (artikel tanpa foto) ---- */
.kt-noimg{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--kt-surface-low),var(--kt-surface-high));color:var(--kt-outline-strong);font-size:11px;text-transform:uppercase;letter-spacing:.06em;}

/* ---- Halaman detail artikel ---- */
.kt-article-header{max-width:800px;margin:0 auto var(--kt-space-lg);text-align:left;}
.kt-article-title{font-family:var(--kt-font-serif);font-size:36px;font-weight:700;line-height:1.2;letter-spacing:-.015em;margin:var(--kt-space-sm) 0;}
.kt-article-lead{font-size:18px;color:var(--kt-on-surface-variant);margin:0 0 var(--kt-space-sm);}
.kt-article-media{max-width:800px;margin:0 auto var(--kt-space-md);}
.kt-article-media img{width:100%;border-radius:var(--kt-radius);}
.kt-article-caption{display:block;margin-top:6px;font-size:12px;color:var(--kt-muted);}
.kt-article-media iframe{width:100%;height:450px;border-radius:var(--kt-radius);border:0;}

.kt-article-body{max-width:800px;margin:0 auto;font-size:17px;line-height:1.75;color:var(--kt-on-surface);}
.kt-article-body p{margin:0 0 1.2em;}
.kt-article-body img{max-width:100%;height:auto;border-radius:var(--kt-radius);margin:1em 0;}
.kt-article-body a{color:var(--kt-primary);text-decoration:underline;}
.kt-article-body h2,.kt-article-body h3{font-family:var(--kt-font-serif);margin:1.4em 0 .5em;}

.kt-callout{max-width:800px;margin:0 auto 1.2em;padding:var(--kt-space-sm) var(--kt-space-md);border-left:3px solid var(--kt-primary);background:var(--kt-tint);border-radius:0 var(--kt-radius) var(--kt-radius) 0;font-size:14px;}
.kt-callout a{color:var(--kt-primary);font-weight:700;}

.kt-tag-list{max-width:800px;margin:var(--kt-space-lg) auto 0;display:flex;flex-wrap:wrap;gap:var(--kt-space-sm);}
.kt-tag-list a{display:inline-block;padding:5px 12px;border-radius:var(--kt-radius-pill);background:var(--kt-tint-neutral);color:var(--kt-on-surface-variant);font-size:12px;}
.kt-tag-list a:hover{background:var(--kt-primary);color:#fff;}

.kt-share{display:flex;align-items:center;gap:var(--kt-space-sm);}
.kt-share a{width:32px;height:32px;border-radius:50%;background:var(--kt-tint-neutral);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--kt-on-surface-variant);}
.kt-share a:hover{background:var(--kt-primary);color:#fff;}

/* ---- Judul halaman (category/indeks/static) ---- */
.kt-breadcrumb{font-size:12px;color:var(--kt-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:var(--kt-space-sm);}
.kt-breadcrumb a:hover{color:var(--kt-primary);}
.kt-page-title{font-family:var(--kt-font-serif);font-size:32px;font-weight:700;letter-spacing:-.015em;margin:0 0 var(--kt-space-lg);padding-bottom:var(--kt-space-md);border-bottom:2px solid var(--kt-on-surface);}

/* =========================================================================
   TEMA MOBILE (pages/mobile/*.php) - desain dari bahan/mobile/.
   Sama sekali terpisah dari .kt-home (desktop): dipakai HANYA oleh template
   di pages/mobile/, dan server memilih salah satu lewat User-Agent
   (pages/home.php), jadi tidak pernah tercampur di satu halaman.
   ========================================================================= */
.kt-m{background:var(--kt-surface);color:var(--kt-on-surface);font-family:var(--kt-font-sans);font-size:15px;line-height:1.5;padding-bottom:64px;min-height:100vh;}
.kt-m *{box-sizing:border-box;}
.kt-m img{max-width:100%;display:block;}
.kt-m a{color:inherit;text-decoration:none;}
.kt-m-wrap{padding:0 1rem;}

/* ---- Header atas (fixed, ringkas) ---- */
.kt-m-header{position:fixed;top:0;left:0;right:0;z-index:50;height:56px;display:flex;align-items:center;justify-content:center;background:var(--kt-primary-hover);backdrop-filter:blur(10px);box-shadow:0 1px 8px rgba(0,0,0,.04);}
.kt-m-brand{font-family:var(--kt-font-serif);font-weight:700;font-size:18px;letter-spacing:.02em;color:#fff;text-transform:uppercase;}
.kt-m-spacer{height:56px;}

/* ---- Nav bawah (fixed) ---- */
.kt-m-bottomnav{position:fixed;bottom:0;left:0;right:0;z-index:50;display:flex;background:rgba(248,250,252,.95);backdrop-filter:blur(10px);box-shadow:0 -1px 8px rgba(0,0,0,.04);}
.kt-m-bottomnav .kt-m-nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 2px;color:var(--kt-on-surface-variant);font-size:11px;font-weight:700;min-height:44px;cursor:pointer;-webkit-tap-highlight-color:transparent;text-decoration:none;}
.kt-m-bottomnav .kt-m-nav-icon{font-size:20px;line-height:1;}
.kt-m-bottomnav .kt-m-nav-item.is-active{color:var(--kt-primary);}

/* ---- Panel "Jelajah" (daftar kategori) - checkbox CSS, tanpa JS ---- */
.kt-m-sheet-toggle{position:absolute;opacity:0;pointer-events:none;}
.kt-m-sheet-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.4);backdrop-filter:blur(2px);z-index:61;opacity:0;pointer-events:none;transition:opacity .2s;}
.kt-m-sheet{position:fixed;left:0;right:0;bottom:0;z-index:62;background:var(--kt-surface-lowest);border-radius:16px 16px 0 0;box-shadow:0 -16px 32px -8px rgba(15,23,42,.12);max-height:75vh;overflow-y:auto;transform:translateY(100%);transition:transform .25s ease;padding-bottom:env(safe-area-inset-bottom,0px);}
.kt-m-sheet-toggle:checked ~ .kt-m-sheet-backdrop{opacity:1;pointer-events:auto;}
.kt-m-sheet-toggle:checked ~ .kt-m-sheet{transform:translateY(0);}
.kt-m-sheet-handle{width:36px;height:4px;background:var(--kt-outline-strong);border-radius:2px;margin:10px auto;}
.kt-m-sheet-title{padding:0 1rem .75rem;font-size:16px;font-weight:700;font-family:var(--kt-font-serif);}
.kt-m-sheet-list{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:0 1rem 1rem;}
.kt-m-sheet-item{display:block;padding:.65rem .75rem;border-radius:var(--kt-radius);background:var(--kt-tint-neutral);color:var(--kt-on-surface);font-size:14px;font-weight:600;text-align:center;text-decoration:none;}
.kt-m-sheet-item.is-active{background:var(--kt-primary);color:var(--kt-on-primary);}

/* ---- Hero ---- */
.kt-m-hero{margin:.75rem 1rem;background:var(--kt-surface-lowest);border-radius:var(--kt-radius);overflow:hidden;box-shadow:var(--kt-shadow-sm);}
.kt-m-hero-media{position:relative;width:100%;aspect-ratio:16/10;background:var(--kt-surface-low);overflow:hidden;}
.kt-m-hero-media img{width:100%;height:100%;object-fit:cover;}
.kt-m-hero-media .kt-noimg{height:100%;}
.kt-m-hero-badges{position:absolute;top:12px;left:12px;display:flex;gap:6px;}
.kt-m-hero-body{padding:1rem;}
.kt-m-hero-top{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--kt-on-surface-variant);}
.kt-m-hero-title{font-family:var(--kt-font-serif);font-size:22px;font-weight:600;line-height:1.3;margin:6px 0;}
.kt-m-hero-lead{font-size:14px;color:var(--kt-on-surface-variant);margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.kt-m-icon-btn{width:30px;height:30px;border-radius:50%;background:var(--kt-tint-neutral);display:flex;align-items:center;justify-content:center;font-size:14px;}

/* ---- Judul seksi ---- */
.kt-m-section{padding:1rem 0;}
.kt-m-section-title{display:flex;align-items:center;justify-content:space-between;padding:0 1rem;margin-bottom:.75rem;}
.kt-m-section-title h2{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;margin:0;}
.kt-m-section-title h2::before{content:'';width:5px;height:18px;background:var(--kt-primary);border-radius:3px;}
.kt-m-section-title .kt-more{font-size:12px;font-weight:700;color:var(--kt-primary);white-space:nowrap;}
.kt-m-dark .kt-m-section-title h2{color:var(--kt-inverse-on-surface);}

/* ---- Kartu list (Terkini: teks kiri, thumb kanan) ---- */
.kt-m-list{display:flex;flex-direction:column;gap:.75rem;padding:0 1rem;}
.kt-m-list-card{display:flex;gap:.75rem;padding:.75rem;background:var(--kt-surface-lowest);border-radius:var(--kt-radius);box-shadow:var(--kt-shadow-sm);}
.kt-m-list-body{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:space-between;}
.kt-m-list-title{font-size:15px;line-height:1.4;font-weight:600;margin:2px 0 0;}
.kt-m-list-thumb{width:88px;height:88px;flex-shrink:0;border-radius:var(--kt-radius);overflow:hidden;background:var(--kt-surface-low);}
.kt-m-list-thumb img{width:100%;height:100%;object-fit:cover;}

/* ---- Ranked carousel (Terpopuler) ---- */
.kt-m-rank{margin:0 1rem;background:var(--kt-surface-lowest);border-radius:var(--kt-radius);box-shadow:var(--kt-shadow-sm);overflow:hidden;}
.kt-m-rank-item{display:flex;gap:.75rem;padding:.75rem 1rem;border-top:1px solid var(--kt-outline);}
.kt-m-rank-item:first-child{border-top:0;}
.kt-m-rank-num{font-family:var(--kt-font-serif);font-size:26px;font-weight:700;color:var(--kt-outline-strong);width:26px;flex-shrink:0;text-align:center;line-height:1.2;}
.kt-m-rank-item:nth-child(-n+3) .kt-m-rank-num{color:var(--kt-primary);}
.kt-m-rank-title{font-size:15px;font-weight:600;line-height:1.35;margin:2px 0;}

/* ---- Grid 2 kolom (Pilihan Redaksi / Video Terkini) ---- */
.kt-m-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;padding:0 1rem;}
.kt-m-grid-card{background:var(--kt-surface-lowest);border-radius:var(--kt-radius);overflow:hidden;box-shadow:var(--kt-shadow-sm);display:flex;flex-direction:column;}
.kt-m-grid-thumb{position:relative;width:100%;aspect-ratio:16/10;background:var(--kt-surface-low);overflow:hidden;}
.kt-m-grid-thumb img{width:100%;height:100%;object-fit:cover;}
.kt-m-grid-thumb .kt-pill{position:absolute;top:6px;left:6px;font-size:10px;padding:2px 8px;}
.kt-m-grid-body{padding:.6rem;display:flex;flex-direction:column;gap:4px;flex:1;justify-content:space-between;}
.kt-m-grid-title{font-size:13px;line-height:1.35;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* ---- Video (panel gelap) ---- */
.kt-m-dark{background:var(--kt-inverse-surface);color:var(--kt-inverse-on-surface);}
.kt-m-dark .kt-m-grid-card{background:rgba(255,255,255,.05);}
.kt-m-dark .kt-m-grid-title{color:var(--kt-inverse-on-surface);}

/* ---- Halaman artikel mobile ---- */
.kt-m-article-header{padding:1rem;}
.kt-m-article-title{font-family:var(--kt-font-serif);font-size:24px;font-weight:700;line-height:1.3;margin:8px 0;}
.kt-m-article-media{margin:0 1rem 1rem;border-radius:var(--kt-radius);overflow:hidden;}
.kt-m-article-media img{width:100%;}
.kt-m-article-media iframe{width:100%;aspect-ratio:16/9;border:0;}
.kt-m-article-body{padding:0 1rem;font-size:16px;line-height:1.7;}
.kt-m-article-body p{margin:0 0 1em;}
.kt-m-article-body img{max-width:100%;height:auto;border-radius:var(--kt-radius);margin:.8em 0;}
.kt-m-article-body a{color:var(--kt-primary);text-decoration:none;}

/* ---- Judul halaman (category/indeks/search/static) ---- */
.kt-m-breadcrumb{padding:1rem 1rem 0;font-size:11px;color:var(--kt-muted);text-transform:uppercase;letter-spacing:.03em;}
.kt-m-page-title{padding:0 1rem;font-family:var(--kt-font-serif);font-size:24px;font-weight:700;margin:4px 0 1rem;}

/* ---- Footer mobile ---- */
.kt-m-footer{padding:1rem 1rem 1.5rem;text-align:center;}
.kt-m-footer-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1rem;font-size:12px;color:var(--kt-on-surface-variant);margin-bottom:.5rem;}
.kt-m-footer-links a:hover{color:var(--kt-primary);}
.kt-m-footer-copy{font-size:11px;color:var(--kt-muted);}

/* ---- Responsif (tablet/mobile kecil, halaman ini belum dioptimasi khusus mobile) ---- */
@media (max-width:1023px){
	.kt-grid-12{display:flex;flex-direction:column;}
	.kt-col-8,.kt-col-4{grid-column:auto;}
	.kt-strip{grid-template-columns:repeat(2,1fr);}
	.kt-video-grid{grid-template-columns:1fr;}
	.kt-article-row{flex-direction:column;}
	.kt-article-row-thumb{width:100%;height:200px;}
}
@media (max-width:640px){
	.kt-wrap{padding:0 1rem;}
	.kt-hero-title{font-size:26px;}
	.kt-hero-media{height:260px;}
	.kt-search input{width:140px;}
	.kt-strip{grid-template-columns:1fr;}
}