/* ==========================================================================
fin.co.id — REDESIGN STYLESHEET
Loaded AFTER style.css. Nothing here modifies the old file.
Fase 1: fonts + design tokens.
========================================================================== */
/* --------------------------------------------------------------------------
1. FONTS
--serif (headlines, article body) = Helvetica, system stack — not self-hosted,
relies on OS-installed Helvetica (macOS/iOS) falling back to Arial elsewhere.
--sans (UI, nav, bylines, captions) = Plus Jakarta Sans, self-hosted below.
-------------------------------------------------------------------------- */
@font-face {
font-family: 'Plus Jakarta Sans';
font-style: normal;
font-weight: 200 800; /* variable range — one file, all weights */
font-display: swap;
src: url('../fonts/plusjakartasans-latin-var.woff2') format('woff2-variations');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* --------------------------------------------------------------------------
2. DESIGN TOKENS
Per-site brand colour is set via [data-site] on .
One stylesheet serves all 11 domains.
-------------------------------------------------------------------------- */
:root {
/* brand — fin.co.id default */
--brand: #1147c9;
--brand-ink: #0d38a0; /* hover/active */
--accent: #e01a2b; /* kickers, section rules */
/* text */
--ink: #12161f; /* headlines, body */
--mut: #5c6472; /* deks, secondary */
--faint: #8a92a2; /* timestamps, meta */
/* surfaces */
--line: #e7e9ee; /* hairlines, dividers */
--bg: #ffffff;
--bg-soft: #f7f8fa;
--footer-bg: #0e1a35; /* dark navy */
/* type */
--serif: Helvetica, 'Helvetica Neue', Arial, sans-serif;
--sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
/* reading measure */
--measure: 70ch;
}
body{ font-family: var(--sans); }
main{ padding-bottom: 48px; }
/* per-vertical brand colour — same design, different accent */
[data-site="sport"] { --brand: #0d9488; }
[data-site="tekno"] { --brand: #7c3aed; }
[data-site="lifestyle"] { --brand: #db2777; }
[data-site="ekonomi"] { --brand: #047857; }
[data-site="gadget"] { --brand: #b45309; }
[data-site="entertainment"] { --brand: #e01a2b; }
/* --------------------------------------------------------------------------
3. SMOKE TEST — delete once real components land in Fase 2.
Proves the fonts actually loaded.
-------------------------------------------------------------------------- */
.font-test-serif {
font-family: var(--serif);
font-size: 38px;
line-height: 1.18;
font-weight: 600;
color: var(--ink);
letter-spacing: -0.01em;
}
.font-test-sans {
font-family: var(--sans);
font-size: 15px;
color: var(--mut);
}
/* ==========================================================================
CATEGORY NAV — borderless, blue active underline
========================================================================== */
.fin-nav ul{
list-style:none; margin:0; padding:0 4px;
display:flex; align-items:center; gap:2px;
}
.fin-nav-link{
display:flex; align-items:center; gap:5px;
text-decoration:none; color:var(--ink);
font-family:var(--sans); font-size:14px; font-weight:500; letter-spacing:.01em;
padding:11px 13px; position:relative; white-space:nowrap;
transition:color .12s ease;
}
.fin-nav-link:hover{color:var(--brand)}
.fin-nav-underline{
position:absolute; left:13px; right:13px; bottom:5px; height:3px;
background:var(--brand); border-radius:2px;
transform:scaleX(0); transform-origin:left; transition:transform .18s ease;
}
.fin-nav-link:hover .fin-nav-underline{transform:scaleX(1)}
.fin-nav-link.is-active{color:var(--brand); font-weight:700}
.fin-nav-link.is-active .fin-nav-underline{transform:scaleX(1)}
/* Video item: red accent */
.fin-nav-link.is-video{color:var(--accent); font-weight:700}
.fin-nav-link.is-video .fin-nav-underline{background:var(--accent)}
/* Fin Daerah dropdown */
.fin-nav-more{position:relative}
.fin-nav-more > button{
font-family:var(--sans); border:0; background:transparent; cursor:pointer;
color:var(--ink); font-size:14px; font-weight:500;
padding:11px 13px; display:flex; align-items:center; gap:4px;
transition:color .12s ease;
}
.fin-nav-more > button:hover,
.fin-nav-more.is-open > button{color:var(--brand)}
.fin-nav-caret{transition:transform .18s ease}
.fin-nav-more.is-open .fin-nav-caret{transform:rotate(180deg)}
.fin-nav-dropdown{
position:absolute; top:100%; left:0; min-width:190px;
background:var(--bg); border:1px solid var(--line); border-radius:8px;
box-shadow:0 16px 40px -14px rgba(10,20,50,.32);
padding:6px; display:none; z-index:40;
}
.fin-nav-more.is-open .fin-nav-dropdown{display:block}
.fin-nav-dropdown a{
display:block; padding:8px 12px; border-radius:5px;
text-decoration:none; color:var(--ink); font-size:13.5px; font-weight:400;
}
.fin-nav-dropdown a:hover{background:var(--panel); color:var(--brand)}
/* Mobile scroll strip */
.fin-nav-scroll{
display:flex; gap:2px; overflow-x:auto;
padding:2px 10px 10px; scrollbar-width:none;
}
.fin-nav-scroll::-webkit-scrollbar{display:none}
.fin-nav-scroll .fin-nav-link{flex:0 0 auto; padding:8px 12px}
.fin-nav-scroll .fin-nav-link.is-active::after{
content:""; position:absolute; left:12px; right:12px; bottom:2px;
height:3px; background:var(--brand); border-radius:2px;
}
.fin-nav-sub{color:var(--mut)!important; font-weight:400!important}
@media (prefers-reduced-motion:reduce){
.fin-nav-link, .fin-nav-underline, .fin-nav-caret{transition:none}
}
.fin-navbar {
background: var(--bg);
padding-top: 0;
padding-bottom: 0;
}
/* ==========================================================================
HEADER TOP BAR — flex, aligned edge-to-edge with the nav (no Bootstrap grid)
========================================================================== */
.fin-topbar{ display:flex; align-items:center; gap:28px; padding:18px 0; border-bottom:1px solid var(--line); }
.fin-logo{ margin-left:-8px; margin-top:-10px; }
.fin-logo img{ height:40px; width:auto; display:block; }
.fin-search{
flex:1; min-width:0;
display:flex; align-items:center; gap:11px;
background:var(--panel); border:1px solid var(--line); border-radius:999px;
padding:12px 22px;
}
.fin-search:focus-within{ border-color:var(--brand); }
.fin-search-icon{ color:var(--faint); flex-shrink:0; }
.fin-search input{
flex:1; min-width:0; border:0; background:transparent; outline:0;
font-family:var(--sans); font-size:16px; color:var(--ink);
}
.fin-search input::placeholder{ color:var(--faint); }
.fin-topmeta{ display:flex; align-items:center; gap:22px; flex-shrink:0; }
.fin-socials{ display:flex; align-items:center; gap:17px; }
.fin-socials a{ color:var(--mut); display:flex; transition:color .12s ease; }
.fin-socials a:hover{ color:var(--brand); }
.fin-date{
font-size:14.5px; color:var(--faint); white-space:nowrap;
border-left:1px solid var(--line); padding-left:22px;
font-variant-numeric:tabular-nums;
}
.fin-mobile-actions{display: none; margin-left: auto; align-items: center; gap: 16px;}
.fin-icon-btn{ border: 0; background: transparent; color: var(--ink); padding: 0; cursor: pointer; display: flex;}
/* first nav word sits flush under the logo */
.fin-navbar .fin-nav ul{ margin-left:-13px; }
/* mobile: hide search + meta, show hamburger (custom breakpoint, not Bootstrap) */
@media (max-width:768px){
.fin-topmeta{display: none;}
.fin-mobile-actions{display: flex;}
.fin-topbar{gap: 14px; padding: 12px 0; flex-wrap: wrap;}
.fin-logo{ margin:0; }
.fin-logo img{ height: 38px;}
/* Search collapses to an icon; opens as a full-width row below */
.fin-search{display: none; order: 3; flex-basis: 100%; margin-top: 4px;}
.fin-search.is-open{display: flex;}
/* breathing room between topbar and category */
.fin-nav-scroll{padding-top: 8px;}
}
/* ==========================================================================
OFF-CANVAS DRAWER (hamburger panel)
========================================================================== */
.fin-drawer{
width:312px; max-width:86vw;
background:var(--bg); color:var(--ink);
display:flex; flex-direction:column;
}
.fin-drawer-head{
flex:0 0 auto; display:flex; align-items:center;
padding:15px 18px; border-bottom:1px solid var(--line);
}
.fin-drawer-logo img{ height:40px; width:auto; display:block; }
.fin-drawer-close{
margin-left:auto; border:0; background:transparent; color:var(--mut);
padding:0; cursor:pointer; display:flex;
}
.fin-drawer-close:hover{ color:var(--ink); }
.fin-drawer-search{
flex:0 0 auto; margin:14px 18px 4px;
display:flex; align-items:center; gap:9px;
background:var(--panel); border:1px solid var(--line); border-radius:999px;
padding:10px 16px;
}
.fin-drawer-search:focus-within{ border-color:var(--brand); }
.fin-drawer-search input{
flex:1; min-width:0; border:0; background:transparent; outline:0;
font-family:var(--sans); font-size:14px; color:var(--ink);
}
.fin-drawer-search input::placeholder{ color:var(--faint); }
.fin-drawer-scroll{ flex:1; overflow-y:auto; padding:6px 0 22px; }
.fin-drawer-label{
font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
color:var(--faint); font-weight:700; padding:16px 18px 7px; margin:0;
}
.fin-drawer-link{
display:flex; align-items:center; gap:11px;
text-decoration:none; color:var(--ink);
font-family:var(--sans); font-size:15.5px; font-weight:500;
padding:12px 18px; min-height:46px;
border-left:3px solid transparent;
transition:background .12s ease, color .12s ease, border-color .12s ease;
}
.fin-drawer-link:hover{ background:var(--panel); color:var(--brand); border-left-color:var(--brand); }
.fin-drawer-link.is-active{ color:var(--brand); font-weight:700; background:var(--panel); border-left-color:var(--brand); }
.fin-drawer-arrow{ margin-left:auto; color:var(--faint); opacity:0; transition:opacity .12s ease; display:flex; }
.fin-drawer-link:hover .fin-drawer-arrow{ opacity:1; }
.fin-drawer-sub{ padding-left:32px; font-size:14.5px; font-weight:400; color:var(--mut); min-height:42px; }
.fin-drawer-info{ font-size:14px; font-weight:400; color:var(--mut); min-height:42px; padding-top:9px; padding-bottom:9px; }
.fin-drawer-foot{ flex:0 0 auto; border-top:1px solid var(--line); padding:15px 18px 18px; }
.fin-drawer-foot .fin-drawer-label{ padding:0; }
.fin-drawer-socials{ display:flex; gap:20px; color:var(--mut); margin-top:11px; }
.fin-drawer-socials a{ color:inherit; display:flex; }
.fin-drawer-socials a:hover{ color:var(--brand); }
.fin-drawer-pers{
margin-top:15px; display:flex; align-items:center; gap:7px;
font-size:11.5px; color:var(--faint);
}
.fin-drawer-pers svg{ color:#0f9d58; flex-shrink:0; }
@media (prefers-reduced-motion:reduce){
.fin-drawer-link, .fin-drawer-arrow{ transition:none; }
}
/* Subkanal color dots — self-contained data-site selector scoped to
.fin-drawer-dot only. Does NOT reuse the page-level [data-site] on
(that's a separate, not-yet-implemented mechanism) so this
can't collide with or partially-implement that rollout. */
.fin-drawer-dot{
width:8px; height:8px; border-radius:50%; flex-shrink:0;
background:var(--brand); /* default: News / no matching data-site */
}
.fin-drawer-dot[data-site="tekno"]{ background:#7c3aed; }
.fin-drawer-dot[data-site="lifestyle"]{ background:#db2777; }
.fin-drawer-dot[data-site="sport"]{ background:#0d9488; }
.fin-drawer-dot[data-site="entertainment"]{ background:var(--accent); }
.fin-drawer-dot[data-site="gadget"]{ background:#b45309; }
.fin-drawer-dot[data-site="jatim"]{ background:#c2410c; }
.fin-drawer-dot[data-site="jogja"]{ background:#78350f; }
.fin-drawer-dot[data-site="karawangbekasi"]{ background:#0891b2; }
.fin-drawer-dot[data-site="tangerangraya"]{ background:#4d7c0f; }
/* ==========================================================================
FOOTER — navy, 4 columns + Topik row
========================================================================== */
.fin-footer{ background:var(--footer-bg); color:#f2f5fb; }
.fin-footer-in{ max-width:1140px; margin:0 auto; padding:44px 20px 0; }
.fin-foot-top{ display:grid; grid-template-columns:1.35fr 1fr 1fr 1fr; gap:38px; padding-bottom:34px; }
.fin-foot-logo img{ height:46px; width:auto; display:block; margin-bottom:14px;
filter:brightness(0) invert(1); } /* TODO: replace with a real white logo asset */
.fin-foot-desc{ font-size:13.5px; line-height:1.7; color:#a8b4cc; margin:0 0 20px; max-width:34ch; }
.fin-foot-socials{ display:flex; gap:16px; margin-bottom:22px; }
.fin-foot-socials a{ color:#a8b4cc; display:flex; transition:color .14s ease; }
.fin-foot-socials a:hover{ color:#fff; }
.fin-foot-pers{
display:inline-flex; align-items:flex-start; gap:9px;
background:rgba(34,197,94,.13); border:1px solid rgba(34,197,94,.32);
border-radius:10px; padding:9px 15px; font-size:12px; color:#8ff0b4; line-height:1.5;
}
.fin-foot-pers svg{ color:#22c55e; flex-shrink:0; margin-top:1px; }
.fin-foot-pers small{ color:#7d8aa6; font-size:11px; }
.fin-foot-h{
font-size:11px; letter-spacing:.13em; text-transform:uppercase;
color:#fff; font-weight:700; margin:0 0 15px;
}
.fin-foot-col ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.fin-foot-col a{ color:#a8b4cc; text-decoration:none; font-size:14px; transition:color .14s ease; }
.fin-foot-col a:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }
.fin-foot-2up{ display:block !important; columns:2; column-gap:22px; }
.fin-foot-2up li{ break-inside:avoid; margin-bottom:11px; }
.fin-foot-ext{ display:inline-block; vertical-align:-1px; opacity:.55; transform:rotate(-45deg); }
.fin-foot-topik{ border-top:1px solid rgba(255,255,255,.11); padding:26px 0 30px; }
.fin-foot-grp{ display:flex; flex-wrap:wrap; gap:9px 8px; margin-bottom:13px; align-items:baseline; }
.fin-foot-grp b{ font-size:12.5px; color:#7d8aa6; font-weight:700; min-width:110px; }
.fin-foot-grp a{
color:#a8b4cc; text-decoration:none; font-size:13px;
background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.11);
border-radius:999px; padding:5px 13px; transition:.14s ease;
}
.fin-foot-grp a:hover{ color:#fff; background:rgba(91,135,245,.24); border-color:rgba(91,135,245,.5); }
.fin-foot-bar{
border-top:1px solid rgba(255,255,255,.11); padding:18px 0 22px;
display:flex; flex-wrap:wrap; gap:12px 26px; align-items:center;
}
.fin-foot-bar p{ margin:0; font-size:12.5px; color:#7d8aa6; }
.fin-foot-bar strong{ color:#a8b4cc; }
.fin-foot-bar nav{ margin-left:auto; display:flex; gap:22px; }
.fin-foot-bar nav a{ color:#7d8aa6; text-decoration:none; font-size:12.5px; }
.fin-foot-bar nav a:hover{ color:#fff; }
.to_top{
position:fixed; right:20px; bottom:20px; z-index:30;
width:42px; height:42px; border-radius:50%;
background:var(--brand); color:#fff;
display:flex; align-items:center; justify-content:center;
text-decoration:none; box-shadow:0 6px 20px -6px rgba(17,71,201,.6);
}
@media (max-width:900px){
.fin-foot-top{ grid-template-columns:1fr 1fr; gap:30px; }
.fin-footer-in{ padding:34px 18px 0; }
}
@media (max-width:560px){
.fin-foot-top{ grid-template-columns:1fr; gap:28px; }
.fin-foot-grp b{ min-width:100%; margin-bottom:2px; }
.fin-foot-bar nav{ margin-left:0; flex-wrap:wrap; gap:14px; }
}
/* neutralise the legacy footer wrappers so .fin-footer goes full-bleed */
footer.footer-style1{
background:var(--footer-bg) !important;
margin-top:0 !important;
padding:0 !important;
border:0 !important;
}
footer.footer-style1 > .container{
max-width:none !important;
width:100% !important;
padding-left:0 !important;
padding-right:0 !important;
}
footer.footer-style1 .tc-subscribe-style8,
footer.footer-style1 .row{
margin:0 !important;
padding:0 !important;
}
/* ==========================================================================
ARTICLE CARDS
========================================================================== */
.fin-card{ margin:0; }
.fin-card-img{ display:block; overflow:hidden; border-radius:8px; background:var(--bg-soft); }
.fin-card-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.fin-card-img:hover img{ transform:scale(1.035); }
.fin-card-title{ margin:0; font-family:var(--serif); letter-spacing:-.01em; text-wrap:pretty; }
/* style.css forces every to display:inline-block, which silently breaks
-webkit-line-clamp on any title wrapping its text in (it needs inline flow). */
.fin-card-title a{ display:inline; color:var(--ink); text-decoration:none; }
.fin-card-title a:hover{ color:var(--brand); }
.fin-card-dek{
margin:7px 0 0; font-family:var(--sans); font-size:14.5px; line-height:1.6;
color:var(--mut);
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.fin-card-meta{
margin:9px 0 0; display:flex; align-items:center; gap:5px;
font-family:var(--sans); font-size:12px; color:var(--faint); text-transform:uppercase; letter-spacing:.04em;
}
.fin-card-meta svg{ flex-shrink:0; }
/* kicker — category colour comes from the data-driven class */
.fin-kicker{
display:inline-block; margin-bottom:8px;
font-family:var(--sans); font-size:11.5px; font-weight:700;
letter-spacing:.09em; text-transform:uppercase; color:var(--accent);
}
.fin-kicker-site{ color:var(--brand); }
/* ---- hero ---- */
.fin-card-hero .fin-card-img{ aspect-ratio:16/9; margin-bottom:16px; }
.fin-card-hero .fin-card-title{
font-size:clamp(26px,3.2vw,38px); line-height:1.15; font-weight:600;
display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.fin-card-hero .fin-card-dek{ font-size:16px; -webkit-line-clamp:3; margin-top:10px; }
/* ---- lead (2-up) ---- */
.fin-card-lead .fin-card-img{ aspect-ratio:16/9; margin-bottom:12px; }
.fin-card-lead .fin-card-title{ font-size:16.5px; line-height:1.35; font-weight:600; }
/* ---- row (feed) ---- */
.fin-card-row{ display:grid; grid-template-columns:210px 1fr; gap:18px; align-items:start; }
.fin-card-row .fin-card-img{ aspect-ratio:16/9; }
.fin-card-row .fin-card-title{ font-size:21px; line-height:1.32; font-weight:600; }
/* ---- compact (sidebar) ---- */
.fin-card-compact{ display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:start; }
.fin-card-rank{
font-family:var(--serif); font-size:30px; font-weight:600; line-height:.9;
color:var(--mut); min-width:30px;
}
.fin-card-compact .fin-card-title{
font-size:15.5px; line-height:1.4; font-weight:600;
display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
/* ---- video (facade — no iframe until clicked) ---- */
.fin-card-video .fin-card-img{ position:relative; aspect-ratio:16/9; margin-bottom:10px; }
.fin-play{
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
color:#fff; background:rgba(9,14,30,.28); transition:background .18s ease;
}
.fin-card-video .fin-card-img:hover .fin-play{ background:rgba(9,14,30,.45); }
.fin-play svg{ filter:drop-shadow(0 2px 8px rgba(0,0,0,.45)); }
.fin-card-video .fin-card-title{ font-size:15.5px; line-height:1.38; font-weight:600; }
/* ==========================================================================
HOMEPAGE SECTIONS
========================================================================== */
.fin-home{ max-width:1140px; margin:0 auto; padding:26px 20px 60px;
display:grid; grid-template-columns:1fr 320px; gap:44px; align-items:start; }
.fin-sec{ margin-bottom:40px; }
.fin-sec-h{
display:flex; align-items:center; gap:12px; margin:0 0 20px;
font-family:var(--sans); font-size:12.5px; font-weight:700;
letter-spacing:.13em; text-transform:uppercase; color:var(--accent);
}
.fin-sec-h::after{ content:""; flex:1; height:2px; background:var(--accent); opacity:.22; order:1; }
.fin-sec-more{
order:2; flex:0 0 auto; display:inline-flex; align-items:center; gap:4px;
font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.02em;
text-transform:none; color:var(--brand); text-decoration:none; white-space:nowrap;
}
.fin-sec-more:hover{ color:var(--accent); text-decoration:underline; }
/* leave room for the slider's prev/next buttons, which float over this row */
.fin-sec:has(.fin-slider) .fin-sec-more{ margin-right:92px; }
.fin-grid-2{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.fin-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.fin-grid-4{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.fin-stack{ display:flex; flex-direction:column; gap:26px; }
.fin-stack > .fin-card + .fin-card{ border-top:1px solid var(--line); padding-top:26px; }
.fin-divider{ border:0; border-top:1px solid var(--line); margin:34px 0; }
/* network block */
.fin-network{ background:var(--footer-bg); border-radius:12px; padding:28px 26px; margin-bottom:40px; }
.fin-network .fin-sec-h{ color:#fff; }
.fin-network .fin-sec-h::after{ background:#fff; opacity:.2; }
.fin-network .fin-card-title a{ color:#f2f5fb; }
.fin-network .fin-card-title a:hover{ color:#8fb0ff; }
.fin-network .fin-card-meta{ color:#7d8aa6; }
.fin-network .fin-kicker-site{ color:#8fb0ff; }
/* load more */
.fin-more{
display:block; width:100%; padding:15px; text-align:center;
font-family:var(--sans); font-size:14.5px; font-weight:600; letter-spacing:.02em;
color:var(--brand); background:transparent;
border:1px solid var(--line); border-radius:999px; cursor:pointer; text-decoration:none;
transition:.15s ease;
}
.fin-more:hover{ background:var(--brand); color:#fff; border-color:var(--brand); }
/* sidebar */
.fin-side{ position:sticky; top:20px; display:flex; flex-direction:column; gap:34px; }
.fin-side-box{ }
.fin-side-box .fin-stack{ gap:18px; }
.fin-side-box .fin-card-compact + .fin-card-compact{ border-top:1px solid var(--line); padding-top:18px; }
.fin-ad{
background:var(--bg-soft); border:1px solid var(--line); border-radius:8px;
min-height:250px; display:flex; align-items:center; justify-content:center;
font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint);
}
/* ---- responsive ---- */
@media (max-width:1000px){
.fin-home{ grid-template-columns:1fr; gap:34px; }
.fin-side{ position:static; }
.fin-grid-4{ grid-template-columns:repeat(2,1fr); }
.fin-grid-2{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:700px){
.fin-home{ padding:18px 16px 44px; }
.fin-grid-3{ grid-template-columns:1fr; gap:22px; }
/* headline secondary row: horizontal-scroll, ~3 smaller cards in view at once */
.fin-grid-2{
display:flex; grid-template-columns:none;
overflow-x:auto; gap:10px; padding-bottom:6px;
scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
scrollbar-width:none;
}
.fin-grid-2::-webkit-scrollbar{ display:none; }
.fin-grid-2 .fin-card-lead{ flex:0 0 30%; min-width:0; scroll-snap-align:start; }
.fin-grid-2 .fin-card-lead .fin-card-title{
font-size:12.5px; line-height:1.3;
display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.fin-grid-2 .fin-card-lead .fin-card-meta{ font-size:10.5px; gap:4px; margin-top:6px; }
.fin-grid-2 .fin-card-lead .fin-card-author{ font-size:11px; margin-top:4px; }
.fin-card-row{ grid-template-columns:118px 1fr; gap:13px; }
.fin-card-row .fin-card-title{ font-size:16px; }
.fin-card-row .fin-card-dek{ display:none; }
.fin-card-hero .fin-card-title{ font-size:24px; }
.fin-card-hero .fin-card-dek{ -webkit-line-clamp:2; font-size:15px; }
.fin-network{ padding:22px 18px; border-radius:0; margin-left:-16px; margin-right:-16px; }
.fin-sec:has(.fin-slider) .fin-sec-h::after,
.fin-network:has(.fin-slider) .fin-sec-h::after{ margin-right:0; }
.fin-sec:has(.fin-slider) .fin-sec-more{ margin-right:0; }
}
/* ==========================================================================
SLIDER — scroll-snap, native swipe, no Bootstrap
========================================================================== */
.fin-slider{ position:relative; }
.fin-slider-track{
display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 44px) / 3);
gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
scrollbar-width:none; -ms-overflow-style:none; padding-bottom:2px;
}
.fin-slider-track::-webkit-scrollbar{ display:none; }
.fin-slider-track > *{ scroll-snap-align:start; }
.fin-slider-nav{ position:absolute; top:-44px; right:0; display:flex; gap:8px; }
.fin-slider-nav button{
width:34px; height:34px; border-radius:50%; cursor:pointer;
border:1px solid var(--line); background:var(--bg); color:var(--ink);
display:flex; align-items:center; justify-content:center; transition:.14s ease;
}
.fin-slider-nav button:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }
.fin-network .fin-slider-nav button{ background:transparent; border-color:rgba(255,255,255,.25); color:#f2f5fb; }
.fin-network .fin-slider-nav button:hover{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); }
/* photo badge */
.fin-card-photo .fin-card-img{ position:relative; aspect-ratio:16/9; margin-bottom:10px; }
.fin-photo-badge{
position:absolute; right:9px; bottom:9px; display:flex; align-items:center; gap:5px;
background:rgba(9,14,30,.72); color:#fff; border-radius:5px; padding:4px 9px;
font-size:12px; font-weight:600; font-variant-numeric:tabular-nums;
}
.fin-card-photo .fin-card-title{ font-size:15.5px; line-height:1.38; font-weight:600; }
@media (max-width:1000px){ .fin-slider-track{ grid-auto-columns:calc((100% - 22px) / 2); } }
@media (max-width:700px){
.fin-slider-track{ grid-auto-columns:78%; gap:14px; }
.fin-slider-nav{ display:none; } /* thumb-swipe on mobile */
}
/* stop the heading rule short of the slider arrows */
.fin-sec:has(.fin-slider) .fin-sec-h::after,
.fin-network:has(.fin-slider) .fin-sec-h::after{ margin-right:92px; }
/* Sidebar section headings */
.fin-side-h{
margin: 0 0 16px;
padding-bottom: 10px;
border-bottom: 2px solid var(--accent);
font-family: var(--sans);
font-size: 12.5px;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
color: var(--ink);
}
.fin-ad-slot{
display: block;
}
.fin-ad-slot img {
width: 100%;
height: auto;
display: block;
border-radius: 8px;
}
.fin-ad-slot{ display:block; margin-bottom:26px; }
.fin-card-compact .fin-card-author{ font-size:12px; margin-top:4px; }
.fin-card-author{
margin:6px 0 0; font-family:var(--sans); font-size:12.5px;
color:var(--brand); font-weight:500;
}
.fin-side-cta{
display:flex; align-items:center; justify-content:center; gap:8px;
margin-top:16px; padding:11px; text-align:center;
font-family:var(--sans); font-size:13px; font-weight:600;
color:var(--brand); text-decoration:none;
border:1px solid var(--line); border-radius:8px; transition:.14s ease;
}
.fin-side-cta:hover{ background:var(--brand); color:#fff; border-color:var(--brand); }
/* Ruang Cerita - branded Overlay Card */
.fin-card-ruang .fin-card-img {
position: relative;
aspect-ratio: 16/10;
}
.fin-card-img img.fin-ruang-logo{
position:absolute;
top:12px;
left:12px;
z-index:2;
width:auto;
height:22px;
object-fit:contain;
filter:drop-shadow(0 1px 4px rgba(0,0,0,.5));
}
.fin-ruang-overlay{
position: absolute;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
display: flex;
flex-direction: column;
gap: 5px;
padding: 38px 14px 14px;
background: linear-gradient(to top, rgba(6,10,24,.92) 12%, rgba(6,10,24,.55) 55%, transparent);
}
.fin-card-ruang .fin-card-title{
font-family: var(--serif);
font-size: 16.5px;
line-height: 1.32;
font-weight: 600;
color: #fff;
display: block;
}
.fin-ruang-author{
font-family: var(--sans);
font-size: 12px;
color: #c9d4ea;
}
.fin-card-ruang .fin-card-img:hover img:first-child{
transform: scale(1.035);
}
/* branded column header (Catatan Dahlan Iskan) */
.fin-side-brand {
display: block;
width: 100%;
height: auto;
margin-bottom: 16px;
border-radius: 8px;
}
.fin-side-brand{
display:block; width:100%; height:auto; aspect-ratio:16/9; object-fit:cover;
margin-bottom:16px; border-radius:8px;
}
/* branded column masthead — Catatan Dahlan Iskan */
.fin-brand-head{
display:flex; align-items:center; justify-content:center; gap:14px;
margin:0 0 16px; padding-bottom:12px;
border-bottom:2px solid #c9a227;
}
.fin-brand-head-text{ display:flex; flex-direction:column; line-height:1.06; }
.fin-brand-head-text em{
font-style:normal; font-family:var(--serif);
font-size:15px; font-weight:600; color:var(--ink);
}
.fin-brand-head-text strong{
font-family:var(--serif); font-size:22px; font-weight:700;
color:var(--accent); letter-spacing:-.015em;
}
.fin-brand-head img{ width:auto; height:38px; display:block; flex-shrink:0; }
/* Catatan Dahlan Iskan — single featured card */
.fin-disway-card{
display:block; text-decoration:none; overflow:hidden;
border:1px solid var(--line); border-radius:8px;
transition:border-color .14s ease;
}
.fin-disway-card:hover{ border-color:var(--brand); }
.fin-disway-card img{
width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; display:block;
}
.fin-disway-title{
display:block; padding:14px 16px;
font-family:var(--serif); font-size:16.5px; line-height:1.35;
font-weight:600; color:var(--ink);
}
.fin-disway-card:hover .fin-disway-title{ color:var(--brand); }
/* legacy: style.css reserves 70px under 992px for a fixed bar that no longer exists */
@media (max-width:992px){
body{ padding-bottom:0; }
}
/* ==========================================================================
ARTICLE PAGE
========================================================================== */
.fin-article{ max-width:none; }
.fin-crumb{
display:flex; align-items:center; gap:7px; margin-bottom:18px;
font-family:var(--sans); font-size:12.5px; color:var(--faint);
}
.fin-crumb a{ color:var(--faint); text-decoration:none; }
.fin-crumb a:hover{ color:var(--brand); }
.fin-crumb svg{ opacity:.5; }
.fin-article-title{
font-family:var(--serif); font-size:clamp(27px,3.4vw,38px); font-weight:600;
line-height:1.16; letter-spacing:-.018em; color:var(--ink);
margin:0 0 14px; text-wrap:pretty;
}
.fin-article-dek{
font-family:var(--serif); font-size:19px; line-height:1.55; color:var(--mut);
margin:0 0 22px; max-width:60ch;
}
/* ---- byline bar ---- */
.fin-byline{
display:flex; align-items:center; gap:13px; flex-wrap:wrap;
padding:16px 0; margin-bottom:24px;
border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.fin-avatar{
width:40px; height:40px; border-radius:50%; flex-shrink:0;
display:flex; align-items:center; justify-content:center;
background:var(--brand); color:#fff;
font-family:var(--sans); font-size:14px; font-weight:700; letter-spacing:.02em;
}
.fin-byline-txt{ flex:1; min-width:150px; }
.fin-byline-who{ margin:0; font-family:var(--sans); font-size:14.5px; color:var(--ink); }
.fin-byline-who a{ color:var(--ink); text-decoration:none; }
.fin-byline-who a:hover{ color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
.fin-byline-ed{ color:var(--mut); font-weight:400; }
.fin-byline-meta{
margin:4px 0 0; display:flex; align-items:center; gap:6px; flex-wrap:wrap;
font-family:var(--sans); font-size:12.5px; color:var(--faint);
}
.fin-dot{ opacity:.55; }
.fin-share{ display:flex; align-items:center; gap:9px; margin-left:auto; }
.fin-share a, .fin-share button{
width:34px; height:34px; border-radius:50%; cursor:pointer;
display:flex; align-items:center; justify-content:center;
border:1px solid var(--line); background:transparent; color:var(--mut);
transition:.14s ease;
}
.fin-share a:hover, .fin-share button:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }
.fin-share .fin-share-wa:hover{ background:#25d366; border-color:#25d366; }
.fin-share-copy.is-copied{ background:#0f9d58; border-color:#0f9d58; color:#fff; }
/* ---- hero figure ---- */
.fin-article-figure{ margin:0 0 26px; }
.fin-article-figure img{
width:100%; height:auto; display:block; border-radius:8px; background:var(--bg-soft);
}
.fin-article-figure figcaption{
margin-top:9px; font-family:var(--sans); font-size:12.5px; line-height:1.5;
color:var(--faint); border-left:3px solid var(--line); padding-left:11px;
}
/* ---- body prose ---- */
.fin-prose{
font-family:'Helvetica Neue', Helvetica, Arial, sans-serif; font-size:18px; line-height:1.75; color:var(--ink);
max-width:var(--measure);
}
.fin-prose p{ margin:0 0 24px; }
.fin-prose p:first-of-type strong:first-child{ font-weight:700; } /* JAKARTA, FIN.CO.ID dateline */
.fin-prose h2, .fin-prose h3, .fin-prose h4{
font-family:var(--serif); font-weight:600; letter-spacing:-.01em;
line-height:1.3; color:var(--ink); margin:36px 0 14px;
}
.fin-prose h2{ font-size:25px; }
.fin-prose h3{ font-size:21px; }
.fin-prose h4{ font-size:19px; }
.fin-prose a{ color:var(--brand); text-decoration:underline; text-underline-offset:3px; }
.fin-prose a:hover{ text-decoration-thickness:2px; }
.fin-prose img{ max-width:100%; height:auto; border-radius:8px; margin:8px 0; }
.fin-prose figure{ margin:26px 0; }
.fin-prose figcaption{ font-family:var(--sans); font-size:12.5px; color:var(--faint); margin-top:8px; }
.fin-prose ul, .fin-prose ol{ margin:0 0 24px; padding-left:26px; }
.fin-prose li{ margin-bottom:9px; }
.fin-prose blockquote{
margin:30px 0; padding:4px 0 4px 22px; border-left:3px solid var(--accent);
font-size:21px; line-height:1.5; color:var(--ink); font-style:italic;
}
.fin-prose blockquote p:last-child{ margin-bottom:0; }
.fin-prose iframe{ max-width:100%; border-radius:8px; }
.fin-prose table{ width:100%; border-collapse:collapse; font-family:var(--sans); font-size:15px; margin-bottom:24px; }
.fin-prose th, .fin-prose td{ padding:9px 12px; border:1px solid var(--line); text-align:left; }
/* ---- tags ---- */
.fin-tags{
display:flex; flex-wrap:wrap; align-items:center; gap:8px;
margin:34px 0 0; padding-top:22px; border-top:1px solid var(--line);
}
.fin-tags-h{
font-family:var(--sans); font-size:11px; font-weight:700;
letter-spacing:.13em; text-transform:uppercase; color:var(--faint); margin-right:4px;
}
.fin-tags a{
font-family:var(--sans); font-size:13px; color:var(--mut); text-decoration:none;
background:var(--bg-soft); border:1px solid var(--line); border-radius:999px;
padding:5px 13px; text-transform:capitalize; transition:.14s ease;
}
.fin-tags a:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }
/* ---- author box ---- */
.fin-authorbox{
display:flex; gap:20px; align-items:flex-start;
margin-top:34px; padding:24px; border:1px solid var(--line); border-radius:10px;
background:var(--bg-soft);
}
.fin-authorbox img{ width:72px; height:72px; border-radius:50%; object-fit:cover; flex-shrink:0; }
.fin-authorbox-lbl{
font-family:var(--sans); font-size:10.5px; font-weight:700;
letter-spacing:.13em; text-transform:uppercase; color:var(--accent);
}
.fin-authorbox-name{ font-family:var(--serif); font-size:19px; font-weight:600; margin:5px 0 8px; }
.fin-authorbox-name a{ color:var(--ink); text-decoration:none; }
.fin-authorbox-name a:hover{ color:var(--brand); }
.fin-authorbox-bio{ margin:0; font-family:var(--sans); font-size:14.5px; line-height:1.65; color:var(--mut); }
@media (max-width:700px){
.fin-article-title{ max-width:none; }
.fin-article-dek{
font-size:17px;
display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; line-clamp:3;
overflow:hidden;
}
.fin-prose{ font-size:17px; line-height:1.7; }
.fin-prose h2{ font-size:22px; }
.fin-prose blockquote{ font-size:18px; }
.fin-share{ margin-left:0; width:100%; padding-top:4px; }
.fin-authorbox{ flex-direction:column; gap:14px; padding:20px; }
}
/*
==========================================================================
AUTHOR PAGE HEADER
==========================================================================
*/
.fin-authorhead{
display:flex; gap:22px; align-items:flex-start;
margin-bottom:34px; padding-bottom:26px;
border-bottom:2px solid var(--accent);
}
.fin-authorhead-avatar-wrap{
width:96px; height:96px; border-radius:50%; flex-shrink:0; overflow:hidden;
display:flex; align-items:center; justify-content:center;
}
.fin-authorhead-photo{
width:96px; height:96px; border-radius:50%; object-fit:cover;
}
.fin-authorhead-initials{
width:96px; height:96px; border-radius:50%;
display:none; align-items:center; justify-content:center;
background:var(--brand); color:#fff;
font-family:var(--sans); font-size:30px; font-weight:700; letter-spacing:.02em;
}
.fin-authorhead-lbl{
font-family:var(--sans); font-size:11px; font-weight:700;
letter-spacing:.13em; text-transform:uppercase; color:var(--accent);
}
.fin-authorhead-name{
font-family:var(--serif); font-size:clamp(24px, 3vw, 32px); font-weight:600;
margin:6px 0 10px; color:var(--ink); line-height:1.15;
}
.fin-authorhead-bio{
margin:0 0 8px; font-family:var(--sans); font-size:15px; line-height:1.6; color:var(--mut);
max-width:66ch;
}
.fin-authorhead-count{
margin:0; font-family:var(--sans); font-size:13px; color:var(--faint);
}
@media (max-width:700px){
.fin-authorhead{ flex-direction:column; align-items:flex-start; gap:14px; }
}
/*
==========================================================================
CATEGORY / INDEX PAGES
==========================================================================
*/
.fin-cathead {
margin-bottom: 30px;
padding-bottom: 22px;
border-bottom: 2px solid var(--accent);
}
.fin-cathead-title{
font-family: var(--serif);
font-size: clamp(28px, 3.6vw, 40px);
font-weight: 600;
letter-spacing: -.02em;
line-height: 1.1;
color: var(--ink);
margin: 0;
}
.fin-cathead-desc{
margin: 12px 0 0;
font-family: var(--sans);
font-size: 15.5px;
line-height: 1.65;
color: var(--mut);
max-width: 66ch;
}
/* numbered pagination (pager_full.php) */
.fin-pager{
margin-top: 38px;
}
.fin-pager .pagination{
display: flex;
flex-wrap: wrap; align-items: center;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
}
.fin-pager .pagination span{
font-family: var(--sans);
font-size: 13px;
color: var(--faint);
text-transform: uppercase;
letter-spacing: .1em;
font-weight: 700;
}
.fin-pager .pagination a{
min-width: 40px;
height: 40px;
padding: 0 12px;
display: inline-flex;
align-items: center;
justify-content: center;
font-family: var(--sans);
font-size: 14.5px;
font-weight: 500;
color: var(--ink);
text-decoration: none;
border: 1px solid var(--line);
border-radius: 8px;
transition: .14s ease;
font-variant-numeric: tabular-nums;
}
.fin-pager .pagination a:hover{
border-color: var(--brand);
color: var(--brand);
}
.fin-pager .pagination a.active{
background: var(--brand);
border-color: var(--brand);
color: #fff;
font-weight: 700;
}
@media (max-width:700px) {
.fin-cathead-title{ font-size: 26px; }
.fin-pager .pagination a {
min-width: 36px;
height: 36px;
padding: 0 9px;
font-size: 13.5px;
}
}
/* ==========================================================================
INDEX / ARCHIVE
========================================================================== */
.fin-index-list{ list-style:none; margin:0; padding:0; }
.fin-index-list li{
display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
padding:13px 0; border-bottom:1px solid var(--line);
}
.fin-index-list li:last-child{ border-bottom:0; }
.fin-index-time{
font-family:var(--sans); font-size:12.5px; font-weight:600; color:var(--faint);
font-variant-numeric:tabular-nums; flex-shrink:0; min-width:64px;
}
.fin-index-site{
font-family:var(--sans); font-size:10.5px; font-weight:700;
letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
flex-shrink:0;
}
.fin-index-list a{
flex:1; min-width:200px;
font-family:var(--serif); font-size:17px; line-height:1.4; font-weight:600;
color:var(--ink); text-decoration:none;
}
.fin-index-list a:hover{ color:var(--brand); }
.fin-index-empty{
padding:34px 0; text-align:center; color:var(--mut);
font-family:var(--sans); font-size:14.5px; border-bottom:0 !important;
}
/* filter form (existing markup, restyled) */
.form-index .form-select{
font-family:var(--sans); font-size:14px; color:var(--ink);
border:1px solid var(--line); border-radius:8px; padding:9px 12px;
background-color:var(--bg);
}
.form-index .form-select:focus{ border-color:var(--brand); outline:0; box-shadow:none; }
.form-index .btn{
font-family:var(--sans); font-size:14px; font-weight:600;
background:var(--brand); border-color:var(--brand); border-radius:8px; padding:9px 20px;
}
.form-index .btn:hover{ background:var(--brand-ink); border-color:var(--brand-ink); }
@media (max-width:700px){
.fin-index-list li{ gap:8px; }
.fin-index-list a{ font-size:15.5px; flex-basis:100%; }
}
/* day grouping header */
.fin-index-day{
display:block; margin:26px 0 4px; padding:10px 14px;
background:var(--bg-soft); border-radius:6px; border-bottom:0 !important;
font-family:var(--sans); font-size:11.5px; font-weight:700;
letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
}
.fin-index-list li:first-child.fin-index-day{ margin-top:0; }
/* category kicker colours (design system) */
.fin-index-site[data-cat="news"],
.fin-index-site[data-cat="nasional"] { color:var(--brand); }
.fin-index-site[data-cat="sport"] { color:#0d9488; }
.fin-index-site[data-cat="tekno"] { color:#7c3aed; }
.fin-index-site[data-cat="lifestyle"] { color:#db2777; }
.fin-index-site[data-cat="ekonomi"] { color:#047857; }
.fin-index-site[data-cat="gadget"] { color:#b45309; }
.fin-index-site[data-cat="entertainment"] { color:var(--accent); }
/* ==========================================================================
ARSIP BERITA — per-year accordion (native , no JS)
========================================================================== */
.fin-arsip-year{ border-bottom:1px solid var(--line); }
.fin-arsip-year:last-child{ border-bottom:0; }
.fin-arsip-year > summary{
display:flex; align-items:center; gap:10px;
padding:12px 2px; cursor:pointer; list-style:none;
font-family:var(--serif); font-size:19px; font-weight:600;
letter-spacing:-.01em; color:var(--ink);
transition:color .12s ease;
}
.fin-arsip-year > summary::-webkit-details-marker{ display:none; }
.fin-arsip-year > summary::marker{ content:''; }
.fin-arsip-year > summary:hover{ color:var(--brand); }
.fin-arsip-year[open] > summary{ color:var(--brand); }
.fin-arsip-chev{ flex-shrink:0; color:var(--faint); transition:transform .2s ease; }
.fin-arsip-year[open] .fin-arsip-chev{ transform:rotate(90deg); }
.fin-arsip-count{
margin-left:auto; font-family:var(--sans); font-size:11px;
font-weight:600; letter-spacing:.04em; color:var(--faint);
}
.fin-arsip-months{
display:grid; grid-template-columns:repeat(3,1fr); gap:5px;
padding:2px 0 14px;
}
.fin-arsip-months a{
display:block; padding:7px 6px; text-align:center; text-decoration:none;
font-family:var(--sans); font-size:12.5px; color:var(--mut);
border:1px solid var(--line); border-radius:6px;
transition:.13s ease;
}
.fin-arsip-months a:hover{ background:var(--brand); border-color:var(--brand); color:#fff; }
.fin-arsip-months a.is-now{ border-color:var(--brand); color:var(--brand); font-weight:600; }
@media (prefers-reduced-motion:reduce){
.fin-arsip-chev, .fin-arsip-months a{ transition:none; }
}
/* ---------- Info / static pages ---------- */
.fin-doc-wrap{padding-top:8px}
.fin-doc-grid{display:grid;grid-template-columns:238px minmax(0,1fr);gap:48px;align-items:start;padding-bottom:60px}
.fin-doc{grid-column:2;grid-row:1;min-width:0}
.fin-doc-side{grid-column:1;grid-row:1;position:sticky;top:16px}
.fin-doc-title{font-size:clamp(28px,3.4vw,38px);font-weight:600;line-height:1.22;letter-spacing:-.015em;margin:0 0 14px;text-wrap:pretty}
.fin-doc-meta{margin:0 0 28px}
.fin-doc-pill{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border:1px solid var(--line);border-radius:999px;font-size:12.5px;color:var(--mut);background:var(--bg-soft)}
.fin-doc-body{max-width:74ch}
.fin-doc-body p,.fin-doc-body li{font-size:17.5px;line-height:1.82}
.fin-infonav-h{margin:0 0 12px;font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);font-weight:700}
.fin-infonav{display:flex;flex-direction:column;border-left:1px solid var(--line)}
.fin-infonav a{padding:9px 0 9px 14px;margin-left:-1px;border-left:2px solid transparent;font-size:13.5px;line-height:1.4;color:var(--mut);text-decoration:none;transition:color .13s,border-color .13s}
.fin-infonav a:hover{color:var(--ink)}
.fin-infonav a.is-active{color:var(--brand);font-weight:600;border-left-color:var(--brand)}
.fin-infonav-ext{font-size:11px;color:var(--faint)}
.fin-ident-card{margin:34px 0 0;padding:22px 24px;border:1px solid var(--line);border-radius:10px;background:var(--bg-soft);max-width:74ch}
.fin-ident-h{margin:0 0 16px;font-size:17px;font-weight:600}
.fin-ident{display:grid;grid-template-columns:140px minmax(0,1fr);gap:9px 18px;margin:0}
.fin-ident dt{font-size:12.5px;color:var(--faint)}
.fin-ident dd{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink);font-weight:500}
.fin-dewan{display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;padding:7px 13px;border-radius:8px;background:rgba(15,157,88,.09);font-size:12.5px;font-weight:600;color:#0b7a44}
.fin-dewan .fin-dewan-tick{color:#0f9d58;flex-shrink:0}
@media (max-width:900px){
.fin-doc-grid{grid-template-columns:1fr;gap:30px}
.fin-doc{grid-column:1;grid-row:1}
.fin-doc-side{grid-column:1;grid-row:2;position:static;padding-top:24px;border-top:1px solid var(--line)}
.fin-doc-body{max-width:none}
.fin-doc-body p,.fin-doc-body li{font-size:17px;line-height:1.78}
.fin-ident{grid-template-columns:1fr;gap:2px 0}
.fin-ident dd{margin-bottom:10px}
}
/* ---------- Cascade fix (delete when style.css goes in Fase 6) ----------
style.css `.home-style2 h1..h6 {font-family:Inter}` is (0,1,1) and outranks
our single-class heading selectors (0,1,0). Prefixing `body` matches that
specificity, and redesign.css loads later, so we win — no !important. */
body .fin-card-title,
body .fin-card-rank,
body .fin-disway-title,
body .fin-article-title,
body .fin-authorbox-name,
body .fin-cathead-title,
body .fin-doc-title,
body .fin-ident-h{ font-family:var(--serif); }
body .fin-side-h,
body .fin-sec-h{ font-family:var(--sans); }
/* style.css sets a bare `p{font-size:16px}`. A direct rule always beats an
inherited value, so sizes set on .fin-prose never reached the paragraphs. */
.fin-prose p,
.fin-prose li{ font-size:18px; line-height:1.7; }
@media (max-width:768px){
.fin-prose p, .fin-prose li{ font-size:17px; line-height:1.65; }
}
/* --------------------------------------------------------------------------
GALLERY + VIDEO — /gallery, /video list + detail
-------------------------------------------------------------------------- */
.fin-mut{ font-family:var(--sans); font-size:15px; color:var(--mut); }
/* video embed (detail) */
.fin-video-embed{
position:relative; width:100%; aspect-ratio:16/9;
background:#000; border-radius:8px; overflow:hidden; margin:24px 0;
}
.fin-video-embed iframe{
position:absolute; inset:0; width:100%; height:100%; border:0;
}
/* gallery viewer (detail) — wraps the existing .mySwiper/.mySwiper2 swiper
instances (see assets/js/gallery.js); only visual, markup/classes untouched
so the swiper init + AdSense-height guard in layout/header.php still hook up. */
.fin-gallery-viewer{ margin:24px 0 20px; }
.fin-gallery-viewer .mySwiper2{
border-radius:8px; overflow:hidden; background:var(--bg-soft);
}
.fin-gallery-viewer .mySwiper2 .swiper-slide{
position:relative; display:flex; align-items:center; justify-content:center;
}
.fin-gallery-viewer .mySwiper2 .swiper-slide img{
width:100%; height:100%; object-fit:contain; background:#0e1a35;
}
.fin-gallery-caption{
position:absolute; left:0; right:0; bottom:0;
background:linear-gradient(transparent, rgba(9,14,30,.82));
color:#fff; font-family:var(--sans); font-size:14px; line-height:1.5;
padding:28px 16px 14px;
}
.fin-gallery-viewer .swiper-button-prev2,
.fin-gallery-viewer .swiper-button-next2{
position:absolute; top:50%; z-index:2; transform:translateY(-50%);
display:flex; align-items:center; justify-content:center;
width:38px; height:38px; border-radius:50%;
background:rgba(9,14,30,.55); color:#fff; cursor:pointer;
}
.fin-gallery-viewer .swiper-button-prev2:hover,
.fin-gallery-viewer .swiper-button-next2:hover{ background:var(--brand); }
.fin-gallery-viewer .swiper-button-prev2{ left:12px; }
.fin-gallery-viewer .swiper-button-next2{ right:12px; }
.fin-gallery-viewer .mySwiper{ margin-top:10px; }
.fin-gallery-viewer .mySwiper .swiper-slide{
border-radius:6px; overflow:hidden; opacity:.55; cursor:pointer;
aspect-ratio:1/1;
}
.fin-gallery-viewer .mySwiper .swiper-slide-thumb-active{ opacity:1; outline:2px solid var(--brand); }
.fin-gallery-viewer .mySwiper .swiper-slide img{ width:100%; height:100%; object-fit:cover; }
@media (max-width:768px){
.fin-gallery-viewer .mySwiper2 .swiper-slide{ min-height:280px; }
.fin-gallery-caption{ font-size:13px; }
}