/*
Theme Name: SEBA Artikel
Theme URI: https://sebaindonesia.com/artikel/
Author: SEBA Indonesia
Author URI: https://sebaindonesia.com/
Description: Tema ringan untuk halaman Artikel SEBA Indonesia. Tampilan, warna, dan huruf sama dengan sebaindonesia.com, mendukung mode gelap, dan sudah memuat deskripsi, pratinjau tautan, serta data terstruktur untuk Google.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: seba-artikel
*/

:root{
  --bg:#F4F6F9;--surface:#FFFFFF;--surface-2:#E9EDF3;
  --ink:#161B24;--ink-soft:#4C5666;--ink-faint:#6B7587;
  --rule:#D5DBE4;--rule-strong:#AFB8C6;
  --blue:#01358B;--blue-soft:#E2E9F5;--sky:#0079C2;--sky-soft:#DDF0FC;
  --btn-text:#F2F5FA;--foot-bg:#1F2430;--foot-ink:#EDF0F5;
  --maxw:1140px;--read:70ch;--pad:clamp(20px,5vw,48px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0E1219;--surface:#161C26;--surface-2:#1E2531;
    --ink:#E7EBF2;--ink-soft:#A3ADBE;--ink-faint:#8A94A6;
    --rule:#2A323F;--rule-strong:#3D4756;
    --blue:#5B9BEE;--blue-soft:#152238;--sky:#43B4F2;--sky-soft:#0F2939;
    --btn-text:#0A1730;--foot-bg:#161C26;--foot-ink:#E7EBF2;
  }
}
:root[data-theme="dark"]{
  --bg:#0E1219;--surface:#161C26;--surface-2:#1E2531;
  --ink:#E7EBF2;--ink-soft:#A3ADBE;--ink-faint:#8A94A6;
  --rule:#2A323F;--rule-strong:#3D4756;
  --blue:#5B9BEE;--blue-soft:#152238;--sky:#43B4F2;--sky-soft:#0F2939;
  --btn-text:#0A1730;--foot-bg:#161C26;--foot-ink:#E7EBF2;
}

*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:"Archivo",-apple-system,sans-serif;margin:0;line-height:1.16;text-wrap:balance;color:var(--ink);}
p{margin:0;}
a{color:inherit;}
img{max-width:100%;height:auto;}
.container{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad);}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:.7rem;font-weight:500;letter-spacing:.19em;text-transform:uppercase;color:var(--sky);}
.screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:100;background:var(--surface);color:var(--ink);padding:10px 14px;width:auto;height:auto;clip:auto;}
:focus-visible{outline:2px solid var(--sky);outline-offset:3px;}

/* nav — sama dengan situs utama */
.nav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 93%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--rule);}
.nav-in{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:13px;padding-bottom:13px;position:relative;}
.brand{display:flex;align-items:center;text-decoration:none;}
.brand img{height:38px;width:auto;display:block;}
img.logo-dark{display:none;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) img.logo-light{display:none;}
  :root:not([data-theme="light"]) img.logo-dark{display:block;}
}
:root[data-theme="dark"] img.logo-light{display:none;}
:root[data-theme="dark"] img.logo-dark{display:block;}
.nav-links{display:flex;align-items:center;gap:20px;}
.nav-links a{text-decoration:none;font-size:.93rem;font-weight:500;color:var(--ink-soft);}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--blue);}
.nav-links a[aria-current="page"]{font-weight:700;}
.btn{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:.93rem;
  padding:11px 21px;border:1.5px solid var(--blue);background:var(--blue);color:var(--btn-text);transition:opacity .15s;}
.btn:hover{opacity:.88;}
.btn.ghost{background:transparent;color:var(--blue);}
.nav-links a.btn,.nav-links a.btn:hover{color:var(--btn-text);}
.nav-toggle{display:none;background:none;border:1px solid var(--rule-strong);padding:8px 12px;font:inherit;font-size:.85rem;color:var(--ink);cursor:pointer;}
@media (max-width:1080px) and (min-width:941px){.nav-links{gap:14px;}.nav-links a{font-size:.86rem;}}
@media (max-width:940px){
  .nav-links{display:none;}
  .nav-links.open{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:var(--bg);border-bottom:1px solid var(--rule);padding:8px var(--pad) 18px;}
  .nav-links.open a{padding:12px 0;border-bottom:1px solid var(--rule);}
  .nav-links.open .btn{margin-top:14px;justify-content:center;border-bottom:1.5px solid var(--blue);}
  .nav-toggle{display:block;}
}

/* kepala halaman */
.page-head{padding:clamp(44px,7vw,80px) 0 clamp(28px,4vw,40px);border-bottom:1px solid var(--rule);}
.page-head h1{font-size:clamp(2rem,5vw,3.1rem);font-weight:800;letter-spacing:-.026em;margin:12px 0 14px;}
.page-head .lede{font-size:1.1rem;color:var(--ink-soft);max-width:60ch;}
.cats{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px;}
.cats a{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  padding:6px 11px;border:1px solid var(--rule-strong);color:var(--ink-soft);}
.cats a:hover,.cats a[aria-current="page"]{border-color:var(--blue);color:var(--blue);}
.cats a[aria-current="page"]{background:var(--blue-soft);}

/* daftar artikel */
.list{padding:clamp(34px,5vw,56px) 0 clamp(54px,8vw,88px);}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;}
@media (max-width:980px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:640px){.grid{grid-template-columns:1fr;}}
.card{background:var(--surface);border:1px solid var(--rule);display:flex;flex-direction:column;min-width:0;transition:border-color .15s;}
.card:hover{border-color:var(--blue);}
.card .thumb{display:block;aspect-ratio:16/9;background:var(--blue-soft);overflow:hidden;}
.card .thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.card .body{padding:22px 22px 24px;display:flex;flex-direction:column;gap:10px;flex:1;}
.card h2{font-size:1.2rem;font-weight:700;letter-spacing:-.01em;}
.card h2 a{text-decoration:none;}
.card h2 a::after{content:"";position:absolute;inset:0;}
.card{position:relative;}
.card .ex{font-size:.95rem;color:var(--ink-soft);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;}
.meta{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-faint);margin-top:auto;padding-top:6px;}
.card .eyebrow{position:relative;z-index:1;}
.card .eyebrow a{text-decoration:none;}
.lead-card{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);}
.lead-card .thumb{aspect-ratio:auto;min-height:100%;min-width:0;}
.lead-card h2{font-size:clamp(1.4rem,2.6vw,1.9rem);}
@media (max-width:760px){.lead-card{grid-template-columns:minmax(0,1fr);}.lead-card .thumb{aspect-ratio:16/9;}}
.lead-card.no-thumb{grid-template-columns:minmax(0,1fr);}
.empty{background:var(--surface);border:1px dashed var(--rule-strong);padding:40px 30px;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;}
.empty p{color:var(--ink-soft);max-width:52ch;}
.pager{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:40px;}
.pager .page-numbers{min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border:1px solid var(--rule-strong);text-decoration:none;font-weight:600;font-size:.92rem;color:var(--ink-soft);}
.pager .page-numbers.current{background:var(--blue);border-color:var(--blue);color:var(--btn-text);}
.pager a.page-numbers:hover{border-color:var(--blue);color:var(--blue);}

/* artikel tunggal */
.crumbs{font-size:.84rem;color:var(--ink-faint);display:flex;flex-wrap:wrap;gap:6px;}
.crumbs a{color:var(--ink-soft);text-decoration:none;}
.crumbs a:hover{color:var(--blue);}
.post-head{padding:clamp(36px,6vw,68px) 0 clamp(24px,4vw,36px);}
.post-head .in{max-width:var(--read);}
.post-head h1{font-size:clamp(1.9rem,4.6vw,2.9rem);font-weight:800;letter-spacing:-.024em;margin:14px 0 16px;}
.post-head .dek{font-size:1.14rem;color:var(--ink-soft);}
.post-head .meta{margin-top:18px;padding-top:0;}
.hero-img{margin:0 0 clamp(28px,4vw,40px);}
.hero-img img{width:100%;max-height:520px;object-fit:cover;display:block;border:1px solid var(--rule);}
.hero-img figcaption{font-size:.8rem;color:var(--ink-faint);margin-top:8px;}
.post-wrap{padding-bottom:clamp(54px,8vw,88px);}
.entry{max-width:var(--read);font-size:1.06rem;line-height:1.75;overflow-wrap:break-word;}
.entry > * + *{margin-top:1.15em;}
.entry h2{font-size:clamp(1.35rem,2.8vw,1.7rem);font-weight:700;letter-spacing:-.015em;margin-top:2em;}
.entry h3{font-size:1.2rem;font-weight:700;margin-top:1.7em;}
.entry h4{font-size:1.02rem;font-weight:700;margin-top:1.5em;}
.entry a{color:var(--blue);text-decoration-thickness:1px;text-underline-offset:3px;}
.entry a:hover{color:var(--sky);}
.entry ul,.entry ol{padding-left:1.3em;}
.entry li + li{margin-top:.45em;}
.entry li::marker{color:var(--sky);}
.entry strong{color:var(--ink);font-weight:700;}
.entry blockquote,.entry .wp-block-quote{margin-left:0;margin-right:0;border-left:3px solid var(--sky);padding:4px 0 4px 20px;color:var(--ink-soft);font-style:normal;}
.entry blockquote cite{display:block;font-size:.85rem;color:var(--ink-faint);margin-top:8px;font-style:normal;}
.entry figure{margin-left:0;margin-right:0;}
.entry figure img,.entry .wp-block-image img{display:block;border:1px solid var(--rule);}
.entry figcaption,.entry .wp-caption-text{font-size:.82rem;color:var(--ink-faint);margin-top:8px;line-height:1.5;}
.entry .aligncenter{margin-left:auto;margin-right:auto;text-align:center;}
.entry .alignleft{float:left;margin:.3em 1.4em 1em 0;max-width:50%;}
.entry .alignright{float:right;margin:.3em 0 1em 1.4em;max-width:50%;}
@media (max-width:640px){.entry .alignleft,.entry .alignright{float:none;margin:1em 0;max-width:100%;}}
.entry hr{border:0;border-top:1px solid var(--rule);margin:2.2em 0;}
.entry code{font-family:"IBM Plex Mono",monospace;font-size:.88em;background:var(--surface-2);padding:1px 5px;}
.entry pre{background:var(--surface-2);padding:16px;overflow-x:auto;font-size:.88rem;}
.table-wrap,.entry .wp-block-table{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;}
.entry table{border-collapse:collapse;width:100%;font-size:.93rem;line-height:1.5;min-width:480px;}
.entry th{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;text-align:left;background:var(--blue);color:var(--btn-text);padding:11px 12px;font-weight:500;}
.entry td{padding:11px 12px;border-bottom:1px solid var(--rule);vertical-align:top;}
.entry tr:nth-child(even) td{background:var(--surface);}
.entry .kotak,.entry .callout{background:var(--blue-soft);border-left:3px solid var(--blue);padding:16px 20px;}
.entry::after{content:"";display:table;clear:both;}

.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px;max-width:var(--read);}
.tags a{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;padding:5px 9px;background:var(--sky-soft);color:var(--blue);}

.cta-box{max-width:var(--read);margin-top:44px;background:var(--surface);border:1px solid var(--rule);border-top:3px solid var(--blue);padding:26px 26px 28px;display:flex;flex-direction:column;gap:12px;}
.cta-box h2{font-size:1.3rem;font-weight:700;}
.cta-box p{color:var(--ink-soft);font-size:.98rem;}
.cta-box .row{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px;}
.cta-box p.eyebrow{font-size:.7rem;color:var(--sky);}

.more{border-top:1px solid var(--rule);padding:clamp(40px,6vw,64px) 0 clamp(54px,8vw,88px);background:var(--surface-2);}
.more .sec-title{font-size:1.5rem;font-weight:700;margin:10px 0 22px;}

/* 404 */
.nf{padding:clamp(64px,10vw,120px) 0;}
.nf h1{font-size:clamp(2rem,5vw,3rem);font-weight:800;margin:12px 0 14px;}
.nf p{color:var(--ink-soft);max-width:52ch;margin-bottom:24px;}

/* footer — sama dengan situs utama */
footer.site-foot{background:var(--foot-bg);color:var(--foot-ink);padding:clamp(44px,6vw,68px) 0 28px;}
:root[data-theme="dark"] footer.site-foot,:root:not([data-theme="light"]) footer.site-foot{border-top:1px solid var(--rule);}
@media (prefers-color-scheme: light){:root:not([data-theme="dark"]) footer.site-foot{border-top:none;}}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:36px;}
.foot-grid > *{min-width:0;}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr;}}
.site-foot img{height:34px;width:auto;margin-bottom:14px;display:block;}
.site-foot p,.site-foot li{font-size:.88rem;opacity:.8;line-height:1.6;}
.site-foot h4{margin-bottom:12px;font-size:.72rem;font-family:"IBM Plex Mono",monospace;font-weight:500;letter-spacing:.15em;text-transform:uppercase;opacity:.7;color:inherit;}
.site-foot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;}
.site-foot a{text-decoration:none;opacity:.9;}
.site-foot a:hover{color:var(--sky);opacity:1;}
.social{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px;}
.social a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;color:inherit;opacity:.9;border:1px solid color-mix(in srgb,currentColor 38%,transparent);transition:color .15s,border-color .15s;}
.social a:hover{color:var(--sky);border-color:var(--sky);opacity:1;}
.social svg{display:block;}
.foot-bot{margin-top:36px;padding-top:20px;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;}
.foot-bot span{font-size:.78rem;opacity:.7;}
.legalstrip{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.05em;}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important;}}