/* =========================================================
Indonesian Tax Insight — shared styles
Rebrand tip: change the tokens in :root and the WHOLE site
(this page + every article) updates. Nothing else to touch.
========================================================= */
:root{
/* palette — same tokens the article template uses */
--ink:#1c1712; --ink2:#4f473d; --mut:#8b8175; --line:#e7ded0;
--paper:#f6f1e7; --card:#ffffff;
--forest:#12302a; --forest2:#0d2621; --gold:#a9772a; --gold-l:#c8933a;
--pine:#0f6b54; --slate:#33597d; --rust:#b4451f;
--shadow:0 1px 2px rgba(28,23,18,.05),0 14px 34px -18px rgba(28,23,18,.30);
--shadow-sm:0 1px 2px rgba(28,23,18,.06);
--r:16px; --r-sm:11px;
--serif:Georgia,"Iowan Old Style","Palatino Linotype","Times New Roman",serif;
--sans:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
--maxw:1120px;
/* article path tokens — shared so articles never redefine colours.
A = slate (self-assessment) · B = pine (PMSE) · C = rust (SPP-TDLN) */
--a:#33597d; --a-d:#233f5a; --a-soft:#eaf0f6; --a-line:#c3d5e5;
--b:#0f6b54; --b-d:#0a4536; --b-soft:#e4efe9; --b-line:#a9d3c4;
--c:#b4451f; --c-d:#7c2e13; --c-soft:#fbeadf; --c-line:#f0c3a8;
--good:#0f6b54; --bad:#b4451f;
--warn-soft:#fbf1de; --warn-line:#ecd9a6;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.65;font-size:16px;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--pine);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{font-family:var(--serif);font-weight:700;letter-spacing:-.01em;margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
/* ---------- LANGUAGE TOGGLE MECHANISM ----------
Put both languages in the page; this hides the inactive one.
Wrap text: HelloHalo */
[data-lang="en"] .lang-id{display:none !important}
[data-lang="id"] .lang-en{display:none !important}
/* ---------- HEADER ---------- */
.site-head{position:sticky;top:0;z-index:60;background:rgba(246,241,231,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:14px;padding:12px 22px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);font-weight:700;color:var(--forest);font-size:19px}
.brand svg,.brand img{width:34px;height:34px;flex:0 0 auto}
.brand .ins{color:var(--gold)}
.brand:hover{text-decoration:none}
.spacer{flex:1}
.langtog{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:#fff}
.langtog button{border:0;background:none;font:inherit;font-size:13px;font-weight:600;padding:6px 13px;cursor:pointer;color:var(--mut)}
.langtog button.on{background:var(--forest);color:var(--paper)}
.langtog button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
/* ---------- HERO / ABOUT ---------- */
.hero{background:radial-gradient(1200px 520px at 84% -18%,rgba(169,119,42,.32),transparent 55%),linear-gradient(160deg,#163a31,#12302a 55%,#0d2621 120%);color:#f4ecdc;padding:62px 0 54px;border-bottom:3px solid var(--gold)}
.hero h1{font-size:clamp(30px,4.6vw,50px);color:#fbf6ec;line-height:1.08;margin-bottom:16px;max-width:22ch}
.hero .em{color:#e8b06a;font-style:italic}
.hero p{max-width:62ch;color:#d8cdb6;font-size:clamp(15.5px,1.7vw,18.5px);margin:0}
/* ---------- CONTROLS ---------- */
.controls{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:34px 0 20px}
.search{flex:1;min-width:220px;display:flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 16px}
.search svg{width:17px;height:17px;color:var(--mut);flex:0 0 auto}
.search input{border:0;outline:0;font:inherit;flex:1;background:none;color:var(--ink)}
.tags{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:13px;font-weight:600;border:1px solid var(--line);background:#fff;color:var(--ink2);border-radius:999px;padding:7px 14px;cursor:pointer;transition:all .14s}
.tag:hover{border-color:var(--gold)}
.tag.on{background:var(--forest);color:var(--paper);border-color:var(--forest)}
/* ---------- POST LIST ---------- */
.posts{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));margin:6px 0 44px}
.post{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:22px;transition:transform .15s,box-shadow .15s;color:inherit}
.post:hover{transform:translateY(-3px);box-shadow:0 1px 2px rgba(28,23,18,.05),0 22px 44px -22px rgba(28,23,18,.42);text-decoration:none}
.post .date{font-size:12.5px;color:var(--mut);letter-spacing:.03em}
.post h3{font-size:19px;margin:6px 0 8px;color:var(--forest);line-height:1.25}
.post p{margin:0 0 15px;color:var(--ink2);font-size:15px;flex:1}
.post .ptags{display:flex;flex-wrap:wrap;gap:6px}
.post .ptag{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--gold);background:#f3e6cf;border-radius:999px;padding:3px 9px}
.empty{color:var(--mut);text-align:center;padding:46px;grid-column:1/-1}
/* ---------- SECTION ---------- */
.section{padding:46px 0}
.section h2{font-size:clamp(22px,3vw,30px);color:var(--ink);margin-bottom:12px}
.lead{color:var(--ink2);max-width:72ch;font-size:16.5px}
.firms{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.firm{border:1px solid var(--line);background:#fff;border-radius:10px;padding:11px 16px;font-weight:600;color:var(--ink2)}
/* ---------- FOOTER ---------- */
.site-foot{background:var(--forest);color:#cdbfa6;padding:40px 0 48px;margin-top:16px;font-size:14px}
.site-foot .wrap{display:flex;flex-direction:column;gap:12px}
.site-foot .brand-f{font-family:var(--serif);color:#f4ecdc;font-size:17px}
.site-foot .disc{max-width:78ch;line-height:1.6}
.site-foot a{color:var(--gold-l)}
/* ---------- ACCESSIBILITY ---------- */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;scroll-behavior:auto !important}}