/* PUBLIKASI JURNALPOST — visual refinement, 29 Sep 2026 */
.pub-portal{
  --paper:#f7f9fc;
  --surface:#ffffff;
  --soft:#eef3f8;
  --ink:#10233f;
  --muted:#5b6d82;
  --border:#d8e2ed;
  --brand:#1558b0;
  --brand-strong:#0d438f;
  --brand-soft:#eaf2ff;
  --navy:#0c2849;
  --accent:#b47d31;
  background:
    radial-gradient(circle at 90% 4%,rgba(21,88,176,.05),transparent 27rem),
    var(--paper);
}
[data-theme='dark'] .pub-portal{
  --paper:#0d1725;
  --surface:#142236;
  --soft:#111f31;
  --ink:#f2f6fb;
  --muted:#aebed0;
  --border:#30445c;
  --brand:#9fc4ff;
  --brand-strong:#c0d8ff;
  --brand-soft:#1c3352;
  --navy:#071a30;
  --accent:#e2b878;
  background:
    radial-gradient(circle at 90% 4%,rgba(113,164,238,.08),transparent 27rem),
    var(--paper);
}
.wrap{width:min(1216px,calc(100% - 72px))}
.site-header{
  position:sticky;
  top:0;
  z-index:45;
  background:color-mix(in srgb,var(--surface) 94%,transparent);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--border);
  border-bottom:0;
}
.header-inner{min-height:84px}
.brand-mark{
  width:42px;
  height:48px;
  border-radius:8px 14px 8px 8px;
  box-shadow:0 7px 20px rgba(21,88,176,.17);
}
.brand-overline{letter-spacing:.24em}
.brand strong{font-size:22px}
.desktop-nav{gap:24px}
.desktop-nav a{
  font-weight:620;
  color:var(--muted);
}
.desktop-nav a[aria-current],.desktop-nav a:hover{color:var(--ink)}
.desktop-nav a[aria-current]::after{
  height:3px;
  border-radius:999px;
  background:var(--brand);
}
.header-login{font-weight:650}
.header-submit{box-shadow:0 8px 18px rgba(21,88,176,.14)}
.button{
  border-radius:8px;
  font-weight:700;
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease,border-color .16s ease;
}
.button:hover{transform:translateY(-1px)}
.primary{background:var(--brand)}
.primary:hover{background:var(--brand-strong);filter:none;box-shadow:0 9px 22px rgba(21,88,176,.18)}
.secondary{background:var(--surface)}
.icon-button{border-radius:8px}
.topbar{background:linear-gradient(90deg,#0a2544,#10355e);color:#dce8f6}
.topbar-inner{min-height:34px}
.topbar a{min-height:34px}
.status-dot{box-shadow:0 0 0 4px rgba(221,188,135,.12)}
.hero{
  position:relative;
  overflow:hidden;
  padding:76px 0 68px;
  border-bottom:1px solid var(--border);
  background:
    linear-gradient(115deg,color-mix(in srgb,var(--paper) 95%,transparent),color-mix(in srgb,var(--brand-soft) 42%,var(--paper)));
}
.hero::after{
  content:'';
  position:absolute;
  width:440px;
  height:440px;
  border-radius:50%;
  right:-220px;
  top:-240px;
  border:1px solid color-mix(in srgb,var(--brand) 16%,transparent);
  box-shadow:0 0 0 68px color-mix(in srgb,var(--brand) 3%,transparent);
  pointer-events:none;
}
.hero-grid{gap:72px}
.hero h1{margin-top:17px;max-width:760px;font-size:clamp(44px,5vw,68px);line-height:1.07}
.hero h1 em{color:var(--brand);text-decoration-thickness:2px}
.hero-description{font-size:16px;max-width:590px;line-height:1.82}
.search-box{
  min-height:62px;
  border-radius:12px;
  padding:8px 9px 8px 18px;
  border-color:color-mix(in srgb,var(--border) 86%,var(--brand));
  box-shadow:0 14px 34px rgba(12,40,73,.07);
}
.search-box:focus-within{
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 13%,transparent),0 14px 34px rgba(12,40,73,.08);
}
.search-box input{font-size:15px}
.search-suggestions a{font-weight:650}
.hero-art{
  min-height:448px;
  border-radius:26px;
  border-color:color-mix(in srgb,var(--border) 86%,var(--brand));
  background:
    linear-gradient(145deg,#f1f5f9,#e7edf4);
  box-shadow:0 26px 58px rgba(12,40,73,.11);
}
[data-theme='dark'] .hero-art{
  background:linear-gradient(145deg,#1a2a40,#122238);
  box-shadow:0 26px 58px rgba(0,0,0,.22);
}
.quick-strip{
  position:relative;
  z-index:2;
  margin-top:28px;
  gap:14px;
  border:0;
}
.quick-strip>a{
  padding:21px 22px!important;
  background:var(--surface);
  border:1px solid var(--border)!important;
  border-radius:12px;
  box-shadow:0 9px 22px rgba(12,40,73,.04);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.quick-strip>a:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb,var(--brand) 55%,var(--border))!important;
  box-shadow:0 14px 30px rgba(12,40,73,.08);
}
.quick-strip strong{font-size:14px}
.quick-strip small{font-size:11px}
.section{padding-top:72px;padding-bottom:72px}
.section-heading{margin-bottom:32px}
.section-heading h2{font-size:clamp(30px,3vw,40px)}
.section-heading p:not(.eyebrow){max-width:620px}
.soft-section{
  background:linear-gradient(180deg,var(--soft),color-mix(in srgb,var(--soft) 68%,var(--paper)));
}
.journal-grid{gap:24px}
.journal-card,.article-card{
  border-radius:14px;
  border-color:var(--border);
  box-shadow:0 8px 22px rgba(12,40,73,.035);
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.journal-card{padding:28px}
.article-card{padding:28px}
.journal-card:hover,.article-card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb,var(--brand) 55%,var(--border));
  box-shadow:0 18px 36px rgba(12,40,73,.08);
}
.journal-seal{
  width:52px;
  height:62px;
  border-radius:0 9px 9px 0;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 10%,transparent);
}
.journal-card h3{font-size:24px;line-height:1.35}
.journal-card>p{font-size:13px;line-height:1.82}
.article-card{border-top:3px solid color-mix(in srgb,var(--brand) 72%,var(--border))}
.article-card h3{font-size:25px;line-height:1.35}
.article-kicker{margin-bottom:14px}
.card-link{margin-top:19px}
.subject-grid{gap:16px}
.subject-card{
  border-radius:11px;
  min-height:86px;
  padding:22px;
  transition:transform .16s ease,border-color .16s ease,background .16s ease;
}
.subject-card:hover{transform:translateY(-2px)}
.about-section{padding-top:66px;padding-bottom:66px}
.guide-banner{
  border-radius:16px;
  padding:44px 48px;
  box-shadow:0 24px 48px rgba(7,26,48,.16);
  background:
    radial-gradient(circle at 92% 16%,rgba(255,255,255,.09),transparent 16rem),
    var(--navy);
}
.guide-banner h2{font-size:35px}
.page-hero{
  position:relative;
  overflow:hidden;
  padding:62px 0 56px;
  background:
    linear-gradient(115deg,var(--soft),color-mix(in srgb,var(--brand-soft) 50%,var(--soft)));
}
.page-hero::after{
  content:'';
  position:absolute;
  width:360px;
  height:360px;
  right:-180px;
  bottom:-250px;
  border-radius:50%;
  border:1px solid color-mix(in srgb,var(--brand) 16%,transparent);
  pointer-events:none;
}
.page-hero h1{font-size:clamp(42px,4.4vw,58px)}
.breadcrumb{
  border:0;
  font-weight:700;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.breadcrumb::before{content:'←';font-size:14px}
.results-heading{
  padding-bottom:15px;
  border-bottom:1px solid var(--border);
}
.results-heading h2{font-size:30px}
.filter-note{border-radius:9px}
.empty-state{
  border-radius:14px;
  padding:38px;
  box-shadow:0 8px 22px rgba(12,40,73,.035);
}
.journal-layout{gap:54px}
.prose-block{
  padding:30px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
}
.journal-aside{
  position:sticky;
  top:110px;
  padding:30px;
  border-radius:14px;
  box-shadow:0 10px 28px rgba(12,40,73,.05);
}
.guide-layout{gap:88px}
.guide-index{
  top:110px;
  border-radius:12px;
  box-shadow:0 10px 28px rgba(12,40,73,.04);
}
.metadata-grid>div{border-radius:10px}
.notice{border-radius:9px}
.submit-panel{
  border-radius:14px;
  padding:38px;
  box-shadow:0 12px 30px rgba(12,40,73,.05);
}
.principles article{
  padding:0 0 28px 48px;
}
.site-footer{
  background:var(--navy);
  border-top:0;
  color:#f3f7fc;
}
.site-footer .brand-overline,.site-footer p,.site-footer .footer-grid>div:not(.footer-brand)>a,.site-footer .footer-bottom{color:#b9c9dc}
.site-footer .brand strong,.site-footer .footer-grid h2{color:#fff}
.site-footer .brand-mark{background:#f3f7fc;color:#153b66;box-shadow:none}
.site-footer .brand-dot{color:#8fbaff}
.site-footer .footer-grid>div>a:hover{color:#fff}
.site-footer .footer-bottom{border-color:rgba(255,255,255,.14)}
.footer-grid{padding-top:52px;padding-bottom:48px}
.footer-bottom{padding-top:20px;padding-bottom:24px}
.pagination .page{
  border-radius:8px;
  font-weight:650;
}
.pagination .page:not(.disabled):hover{border-color:var(--brand);color:var(--brand)}
.mobile-menu nav{
  border-radius:14px;
  box-shadow:0 22px 50px rgba(7,26,48,.18);
}
[data-theme='dark'] .journal-card,
[data-theme='dark'] .article-card,
[data-theme='dark'] .empty-state,
[data-theme='dark'] .journal-aside,
[data-theme='dark'] .guide-index,
[data-theme='dark'] .submit-panel{
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}
@media(max-width:1090px){
  .wrap{width:min(100% - 52px,1216px)}
  .hero-grid{gap:44px}
  .header-inner{min-height:78px}
}
@media(max-width:850px){
  .site-header{position:sticky}
  .hero{padding:58px 0 48px}
  .hero h1{font-size:clamp(45px,7.2vw,60px)}
  .quick-strip{margin-top:20px}
  .journal-aside{position:static}
  .guide-index{position:static}
}
@media(max-width:620px){
  .wrap{width:calc(100% - 32px)}
  .topbar-inner{min-height:31px}
  .topbar a{min-height:31px}
  .header-inner{min-height:70px}
  .brand-mark{width:34px;height:39px;border-radius:7px 11px 7px 7px}
  .brand strong{font-size:18px}
  .brand-overline{margin-bottom:3px}
  .hero{padding:38px 0 34px}
  .hero::after{width:250px;height:250px;right:-170px;top:-170px}
  .hero h1{font-size:clamp(38px,10.5vw,50px);line-height:1.12}
  .hero-description{line-height:1.78}
  .search-box{min-height:56px;border-radius:10px}
  .quick-strip{grid-template-columns:1fr;gap:9px;margin-top:15px}
  .quick-strip>a{border-radius:10px!important;min-height:68px}
  .section{padding-top:46px;padding-bottom:46px}
  .section-heading{margin-bottom:24px}
  .journal-card,.article-card{padding:23px;border-radius:12px}
  .journal-card:hover,.article-card:hover,.quick-strip>a:hover,.subject-card:hover{transform:none}
  .subject-card{border-radius:10px}
  .about-section{padding-top:42px;padding-bottom:42px}
  .guide-banner{border-radius:13px;padding:30px 25px}
  .page-hero{padding:40px 0 38px}
  .page-hero h1{font-size:39px}
  .empty-state{padding:24px;border-radius:12px}
  .prose-block{padding:0;background:transparent;border:0;border-radius:0}
  .journal-aside{padding:24px;border-radius:12px}
  .submit-panel{padding:25px;border-radius:12px}
  .footer-grid{padding-top:38px;padding-bottom:34px}
  .mobile-menu nav{top:50px}
}
@media(max-width:359px){
  .wrap{width:calc(100% - 26px)}
  .brand strong{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .journal-card,.article-card,.quick-strip>a,.subject-card,.button{transition:none!important;transform:none!important}
}

/* QA fixes: public visual 2026-09-29. Keep anchor headings below the sticky header. */
.pub-portal #konten-utama,
.pub-portal .guide-step {
  scroll-margin-top: 104px;
}
@media (max-width: 620px) {
  .pub-portal #konten-utama,
  .pub-portal .guide-step {
    scroll-margin-top: 90px;
  }
  .pub-portal .search-box input {
    font-size: 16px;
  }
  .pub-portal .guide-banner h2 {
    font-size: 28px;
    line-height: 1.25;
  }
}