/*
Theme Name: MSM Kumparan SEO News (2026)
Theme URI: https://msmparking.com/
Author: MSM Parking Group
Author URI: https://msmparking.com/
Description: Lightweight, interactive, SEO-first WordPress theme optimized for Google News & Discover, inspired by Kumparan-style layout. Includes schema (Organization/NewsArticle/Product), fast CSS/JS, and conversion-friendly product templates.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: msm-kumparan
Tags: news, seo, lightweight, responsive, google-news, google-discover
*/

/* Base reset (tiny) */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif; line-height:1.6; color:var(--fg); background:var(--bg)}
img{max-width:100%; height:auto}
a{color:inherit; text-decoration:none}
a:hover{text-decoration:underline}
:root{
  --bg:#ffffff;
  --fg:#121826;
  --muted:#5b6475;
  --card:#f6f7fb;
  --line:#e6e8ef;
  --brand:#1a73e8;
  --brand2:#ff7a00;
  --shadow: 0 10px 30px rgba(16,24,40,.08);
  --radius:18px;
  --container: 1180px;
}
body.dark{
  --bg:#0b1020;
  --fg:#eef2ff;
  --muted:#a9b3c7;
  --card:#121a33;
  --line:#1f2a52;
  --shadow: 0 12px 28px rgba(0,0,0,.35);
}

.container{max-width:var(--container); margin:0 auto; padding:0 16px}
.hidden{display:none !important}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

.header{position:sticky; top:0; z-index:40; backdrop-filter:saturate(160%) blur(10px); background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom:1px solid var(--line)}
.header__row{display:flex; align-items:center; gap:12px; padding:12px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.02em}
.brand__dot{width:10px; height:10px; border-radius:99px; background:linear-gradient(135deg,var(--brand),var(--brand2))}
.nav{display:flex; align-items:center; gap:14px; margin-left:10px; flex:1; overflow:auto}
.nav a{padding:8px 10px; border-radius:999px; color:var(--muted); font-weight:600; white-space:nowrap}
.nav a:hover{background:var(--card); text-decoration:none; color:var(--fg)}
.header__actions{display:flex; align-items:center; gap:10px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 12px; border-radius:999px; border:1px solid var(--line); background:var(--bg); color:var(--fg); cursor:pointer; font-weight:700}
.btn:hover{background:var(--card)}
.btn--brand{border-color: color-mix(in srgb,var(--brand) 40%, var(--line)); background: color-mix(in srgb, var(--brand) 12%, var(--bg));}
.badge{display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:999px; background:color-mix(in srgb,var(--brand2) 12%, var(--bg)); border:1px solid color-mix(in srgb,var(--brand2) 30%, var(--line)); color:var(--fg); font-weight:700}

.ticker{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:color-mix(in srgb, var(--card) 65%, var(--bg));}
.ticker__inner{display:flex; gap:12px; align-items:center; padding:10px 0}
.ticker__label{font-weight:900; font-size:.85rem; padding:6px 10px; border-radius:999px; background:var(--fg); color:var(--bg)}
.ticker__marquee{overflow:hidden; flex:1}
.ticker__track{display:flex; gap:28px; white-space:nowrap; will-change:transform; animation: marquee 22s linear infinite}
@keyframes marquee{from{transform:translateX(0)} to{transform:translateX(-50%)}}
.ticker__track a{color:var(--muted); font-weight:700}
.ticker__track a:hover{color:var(--fg); text-decoration:none}

.main{padding:18px 0 42px}
.grid{display:grid; gap:16px}
.grid--home{grid-template-columns: 1.6fr .9fr}
@media (max-width: 980px){ .grid--home{grid-template-columns:1fr} .nav{display:none} }

.card{background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow)}
.card__pad{padding:16px}
.kicker{color:var(--brand); font-weight:900; letter-spacing:.06em; text-transform:uppercase; font-size:.76rem}
.h1{font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height:1.2; letter-spacing:-.02em; margin:.4rem 0 .2rem}
.h2{font-size:1.2rem; line-height:1.25; letter-spacing:-.02em; margin:.3rem 0}
.meta{display:flex; gap:10px; flex-wrap:wrap; color:var(--muted); font-weight:650; font-size:.92rem}
.meta a{color:var(--muted)}
.meta a:hover{color:var(--fg); text-decoration:none}

.hero{display:grid; grid-template-columns:1.2fr .8fr; gap:16px}
@media (max-width: 980px){ .hero{grid-template-columns:1fr} }
.hero__img{border-radius:calc(var(--radius) - 6px); overflow:hidden; background:var(--card); aspect-ratio: 16/9}
.hero__img img{width:100%; height:100%; object-fit:cover}
.list{display:grid; gap:12px}
.item{display:grid; grid-template-columns:120px 1fr; gap:12px; align-items:center}
.item__thumb{border-radius:14px; overflow:hidden; background:var(--card); aspect-ratio: 4/3}
.item__thumb img{width:100%; height:100%; object-fit:cover}
.item__title{font-weight:900; line-height:1.2; margin:0}
.item__desc{margin:.15rem 0 0; color:var(--muted); font-size:.95rem}

.pills{display:flex; gap:10px; flex-wrap:wrap}
.pill{padding:8px 10px; border:1px solid var(--line); border-radius:999px; font-weight:750; color:var(--muted); background:var(--bg)}
.pill:hover{background:var(--card); text-decoration:none; color:var(--fg)}

.article{max-width: 820px; margin:0 auto}
.article h1{font-size: clamp(1.7rem, 2.7vw, 2.4rem); line-height:1.15; letter-spacing:-.03em}
.article .content{font-size:1.05rem}
.article .content p{margin:.9rem 0}
.article .content h2{margin:1.6rem 0 .6rem}
.article .content h3{margin:1.2rem 0 .4rem}
.article .content ul, .article .content ol{padding-left:1.2rem}
.article .content blockquote{margin:1rem 0; padding:.2rem .9rem; border-left:4px solid var(--brand); color:var(--muted)}
.article .content a{color:var(--brand); font-weight:750}
.article .content a:hover{text-decoration:underline}
.article .featured{border-radius:var(--radius); overflow:hidden; background:var(--card); border:1px solid var(--line)}
.article .featured img{width:100%; height:auto; display:block}

.sidebar{position:sticky; top:110px; align-self:start}
.footer{border-top:1px solid var(--line); padding:26px 0; color:var(--muted)}
.footer a{color:var(--muted)}
.footer a:hover{color:var(--fg); text-decoration:none}

.modal{position:fixed; inset:0; background: rgba(0,0,0,.45); display:none; align-items:flex-start; justify-content:center; padding:72px 16px; z-index:60}
.modal.open{display:flex}
.modal__panel{width:min(880px, 100%); background:var(--bg); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden}
.modal__head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid var(--line)}
.searchbox{display:flex; gap:10px; padding:14px 16px}
.searchbox input{flex:1; padding:12px 14px; border-radius:12px; border:1px solid var(--line); background:var(--bg); color:var(--fg); font-size:1rem}
.searchbox input:focus{outline:2px solid color-mix(in srgb, var(--brand) 25%, transparent); outline-offset:2px}

.notice{padding:12px 14px; background:color-mix(in srgb, var(--brand) 10%, var(--bg)); border:1px dashed color-mix(in srgb, var(--brand) 35%, var(--line)); border-radius:14px; color:var(--muted)}