/* Kabayan Artikel Editorial — basis visual dari skbpotput.html */

    :root {
      --black: #000000;
      --near-black: #1d1d1f;
      --white: #ffffff;
      --off-white: #f5f5f7;
      --soft-gray: #e8e8ed;
      --medium-gray: #86868b;
      --blue: #0071e3;
      --blue-hover: #0077ed;
      --yellow: #ffcc00;
      --green: #248a3d;
      --green-soft: #edf8ef;
      --orange: #bf5b00;
      --orange-soft: #fff7e8;
      --red: #d70015;
      --red-soft: #fff0ee;
      --purple: #8944ab;
      --purple-soft: #f5eff9;
      --nav-height: 48px;
      --max-width: 1180px;
      --article-width: 800px;
    }

    * {
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      scroll-padding-top: 82px;
    }

    body {
      margin: 0;
      overflow-x: hidden;
      background: var(--white);
      color: var(--near-black);
      font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;
      line-height: 1.6;
      letter-spacing: -0.015em;
      -webkit-font-smoothing: antialiased;
    }

    body.menu-open {
      overflow: hidden;
    }

    a {
      color: inherit;
    }

    button,
    input,
    select {
      font: inherit;
    }

    .reading-progress {
      position: fixed;
      z-index: 2000;
      top: 0;
      left: 0;
      width: 0;
      height: 3px;
      background:
        linear-gradient(
          90deg,
          #0071e3,
          #25a6d9,
          #ffb800
        );
    }

    .site-header {
      position: fixed;
      z-index: 1000;
      top: 0;
      right: 0;
      left: 0;
      min-height: var(--nav-height);
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      background: rgba(250, 250, 252, 0.82);
      backdrop-filter: saturate(180%) blur(20px);
      -webkit-backdrop-filter: saturate(180%) blur(20px);
    }

    .header-inner {
      width: min(var(--max-width), calc(100% - 36px));
      min-height: var(--nav-height);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 28px;
      margin: 0 auto;
    }

    .brand {
      display: inline-flex;
      flex-shrink: 0;
      align-items: center;
      gap: 9px;
      color: var(--near-black);
      font-size: 14px;
      font-weight: 700;
      text-decoration: none;
    }

    .brand-mark {
      width: 25px;
      height: 25px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: var(--near-black);
      color: var(--white);
      font-size: 9px;
      font-weight: 800;
      letter-spacing: -0.04em;
    }

    .main-nav {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 27px;
    }

    .main-nav a {
      color: #424245;
      font-size: 12px;
      text-decoration: none;
      white-space: nowrap;
    }

    .main-nav a:hover,
    .main-nav a[aria-current="page"] {
      color: var(--black);
    }

    .menu-button {
      width: 34px;
      height: 34px;
      display: none;
      place-items: center;
      border: 0;
      border-radius: 50%;
      background: transparent;
      color: var(--near-black);
      cursor: pointer;
      font-size: 18px;
    }

    .menu-button:hover {
      background: rgba(0, 0, 0, 0.055);
    }

    .mobile-menu {
      position: fixed;
      z-index: 999;
      inset: var(--nav-height) 0 0;
      display: none;
      padding: 36px 28px;
      background: rgba(250, 250, 252, 0.98);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
    }

    .mobile-menu.active {
      display: block;
    }

    .mobile-menu a {
      display: block;
      padding: 11px 0;
      color: var(--near-black);
      font-size: 28px;
      font-weight: 650;
      letter-spacing: -0.04em;
      text-decoration: none;
    }

    main {
      padding-top: var(--nav-height);
    }

    .hero {
      position: relative;
      overflow: hidden;
      padding: 100px 20px 82px;
      background:
        radial-gradient(
          circle at 50% 84%,
          rgba(0, 113, 227, 0.12),
          transparent 32%
        ),
        linear-gradient(
          180deg,
          #ffffff 0%,
          #ffffff 62%,
          #f4f7fc 100%
        );
      text-align: center;
    }

    .hero::before {
      position: absolute;
      top: -250px;
      left: 50%;
      width: 920px;
      height: 640px;
      border-radius: 50%;
      background:
        radial-gradient(
          ellipse,
          rgba(0, 113, 227, 0.18),
          rgba(47, 157, 255, 0.06) 45%,
          transparent 72%
        );
      filter: blur(8px);
      content: "";
      transform: translateX(-50%);
      pointer-events: none;
    }

    .hero-inner {
      position: relative;
      z-index: 1;
      width: min(1040px, 100%);
      margin: 0 auto;
    }

    .category-pill {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 18px;
      padding: 7px 12px;
      border-radius: 999px;
      background: var(--off-white);
      color: #515154;
      font-size: 12px;
      font-weight: 650;
    }

    .category-pill::before {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--blue);
      content: "";
    }

    .hero h1 {
      max-width: 980px;
      margin: 0 auto;
      font-size: clamp(48px, 7vw, 80px);
      font-weight: 700;
      letter-spacing: -0.06em;
      line-height: 0.99;
    }

    .gradient-text {
      display: block;
      background:
        linear-gradient(
          90deg,
          #083b8f,
          #0071e3 43%,
          #26a3cf 72%,
          #e6aa00
        );
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }

    .hero-lead {
      max-width: 780px;
      margin: 27px auto 0;
      color: #515154;
      font-size: clamp(19px, 2.3vw, 25px);
      line-height: 1.4;
    }

    .article-meta {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 9px 20px;
      margin-top: 27px;
      color: var(--medium-gray);
      font-size: 13px;
    }

    .hero-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      margin-top: 28px;
    }

    .button {
      min-height: 42px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      padding: 9px 18px;
      border: 1px solid var(--blue);
      border-radius: 999px;
      background: transparent;
      color: var(--blue);
      cursor: pointer;
      font-size: 14px;
      font-weight: 550;
      text-decoration: none;
      transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
    }

    .button:hover {
      background: var(--blue);
      color: var(--white);
      transform: translateY(-1px);
    }

    .button-primary {
      background: var(--blue);
      color: var(--white);
    }

    .button-primary:hover {
      background: var(--blue-hover);
    }

    .hero-visual {
      width: min(850px, 96vw);
      margin: 48px auto 0;
    }

    .stat-orbit {
      position: relative;
      min-height: 260px;
      display: grid;
      align-items: center;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
    }

    .stat-orbit::before {
      position: absolute;
      inset: 36px 5% 10px;
      border-radius: 50%;
      background:
        radial-gradient(
          ellipse,
          rgba(0, 113, 227, 0.16),
          rgba(37, 166, 217, 0.06) 50%,
          transparent 74%
        );
      filter: blur(15px);
      content: "";
    }

    .hero-stat-card {
      position: relative;
      z-index: 1;
      min-height: 170px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 22px 15px;
      border: 1px solid rgba(0, 0, 0, 0.07);
      border-radius: 24px;
      background: rgba(255, 255, 255, 0.9);
      box-shadow:
        0 20px 48px rgba(20, 43, 76, 0.11),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .hero-stat-card:nth-child(2),
    .hero-stat-card:nth-child(4) {
      transform: translateY(28px);
    }

    .hero-stat-card strong {
      color: var(--near-black);
      font-size: clamp(27px, 4vw, 41px);
      letter-spacing: -0.05em;
      line-height: 1;
    }

    .hero-stat-card span {
      display: block;
      margin-top: 10px;
      color: var(--medium-gray);
      font-size: 11px;
      line-height: 1.35;
      text-align: center;
    }

    .article-shell {
      padding: 78px 20px 110px;
      background: var(--off-white);
    }

    .article-layout {
      width: min(var(--max-width), 100%);
      display: grid;
      align-items: start;
      grid-template-columns: minmax(0, var(--article-width)) 260px;
      justify-content: center;
      gap: 68px;
      margin: 0 auto;
    }

    .article-body {
      min-width: 0;
    }

    .article-body section {
      scroll-margin-top: 86px;
    }

    .article-body p {
      margin: 0 0 24px;
      color: #333336;
      font-size: 18px;
      line-height: 1.72;
    }

    .article-body h2 {
      margin: 72px 0 22px;
      color: var(--near-black);
      font-size: clamp(32px, 4.5vw, 45px);
      font-weight: 700;
      letter-spacing: -0.045em;
      line-height: 1.08;
    }

    .article-body h3 {
      margin: 42px 0 16px;
      color: var(--near-black);
      font-size: 25px;
      font-weight: 680;
      letter-spacing: -0.035em;
      line-height: 1.18;
    }

    .article-body ul,
    .article-body ol {
      margin: 0 0 27px;
      padding-left: 25px;
      color: #333336;
      font-size: 18px;
      line-height: 1.65;
    }

    .article-body li + li {
      margin-top: 8px;
    }

    .summary-box {
      margin: 0 0 38px;
      padding: 27px 29px;
      border: 1px solid #dce8f5;
      border-radius: 24px;
      background:
        linear-gradient(
          145deg,
          #f7fbff,
          #eef6ff
        );
    }

    .summary-box strong {
      display: block;
      margin-bottom: 11px;
      color: var(--near-black);
      font-size: 17px;
      letter-spacing: -0.025em;
    }

    .summary-box p {
      margin: 0;
      color: #42566a;
      font-size: 16px;
      line-height: 1.58;
    }

    .callout {
      margin: 32px 0;
      padding: 23px 25px;
      border-radius: 22px;
    }

    .callout strong {
      display: block;
      margin-bottom: 8px;
      font-size: 16px;
      letter-spacing: -0.02em;
    }

    .callout p {
      margin: 0;
      font-size: 16px;
      line-height: 1.58;
    }

    .callout-blue {
      border: 1px solid #d5e7f8;
      background: #eef6ff;
      color: #31536f;
    }

    .callout-orange {
      border: 1px solid #f2dfbd;
      background: var(--orange-soft);
      color: #6d4b14;
    }

    .callout-red {
      border: 1px solid #f2cbc8;
      background: var(--red-soft);
      color: #7b302d;
    }

    .eligibility-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 15px;
      margin: 28px 0 34px;
    }

    .eligibility-card {
      min-height: 220px;
      padding: 24px;
      border: 1px solid var(--soft-gray);
      border-radius: 22px;
      background: var(--white);
    }

    .eligibility-icon {
      width: 45px;
      height: 45px;
      display: grid;
      margin-bottom: 18px;
      place-items: center;
      border-radius: 14px;
      background: #eef6ff;
      color: var(--blue);
      font-size: 13px;
      font-weight: 800;
    }

    .eligibility-card h3 {
      margin: 0 0 10px;
      font-size: 21px;
    }

    .eligibility-card p {
      margin: 0;
      color: #515154;
      font-size: 15px;
      line-height: 1.55;
    }

    .tax-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 11px;
      margin: 28px 0 34px;
    }

    .tax-chip {
      min-height: 112px;
      display: flex;
      justify-content: center;
      flex-direction: column;
      padding: 17px;
      border: 1px solid #d6e7f7;
      border-radius: 18px;
      background: #f2f8ff;
      color: var(--blue);
      font-size: 21px;
      font-weight: 750;
      text-align: center;
    }

    .tax-chip span {
      display: block;
      margin-top: 7px;
      color: var(--medium-gray);
      font-size: 11px;
      font-weight: 500;
      line-height: 1.35;
    }

    .table-wrap {
      overflow-x: auto;
      margin: 25px 0 34px;
      border: 1px solid rgba(0, 0, 0, 0.07);
      border-radius: 22px;
      background: var(--white);
      box-shadow: 0 20px 55px rgba(20, 43, 76, 0.08);
    }

    table {
      width: 100%;
      min-width: 680px;
      border-collapse: collapse;
    }

    th,
    td {
      padding: 16px;
      border-bottom: 1px solid var(--soft-gray);
      color: #515154;
      font-size: 14px;
      line-height: 1.55;
      text-align: left;
      vertical-align: top;
    }

    th {
      background: #111113;
      color: var(--white);
      font-size: 11px;
      font-weight: 680;
      letter-spacing: 0.035em;
      text-transform: uppercase;
    }

    tbody tr:nth-child(even) {
      background: #fbfbfd;
    }

    tbody tr:hover {
      background: #eef6ff;
    }

    tbody tr:last-child td {
      border-bottom: 0;
    }

    .checklist-shell {
      overflow: hidden;
      margin: 28px 0 38px;
      border: 1px solid rgba(0, 0, 0, 0.07);
      border-radius: 25px;
      background:
        radial-gradient(
          circle at 95% 5%,
          rgba(0, 113, 227, 0.12),
          transparent 28%
        ),
        var(--white);
      box-shadow: 0 18px 50px rgba(20, 43, 76, 0.08);
    }

    .checklist-head {
      padding: 25px;
      border-bottom: 1px solid var(--soft-gray);
    }

    .progress-text {
      color: #515154;
      font-size: 13px;
      font-weight: 650;
    }

    .progress {
      height: 9px;
      overflow: hidden;
      margin-top: 12px;
      border-radius: 999px;
      background: #dde9f5;
    }

    .progress-bar {
      width: 0;
      height: 100%;
      background:
        linear-gradient(
          90deg,
          #0071e3,
          #25a6d9
        );
      transition: width 0.25s ease;
    }

    .checklist-actions {
      margin-top: 15px;
    }

    .check-group {
      padding: 23px 25px;
      border-bottom: 1px solid var(--soft-gray);
    }

    .check-group:last-child {
      border-bottom: 0;
    }

    .check-group h3 {
      margin: 0 0 13px;
      font-size: 20px;
    }

    .check-item {
      display: flex;
      align-items: flex-start;
      gap: 11px;
      padding: 9px 0;
      cursor: pointer;
    }

    .check-item input {
      width: 18px;
      height: 18px;
      flex: 0 0 auto;
      margin-top: 5px;
      accent-color: var(--blue);
    }

    .check-item span {
      color: #424245;
      font-size: 15px;
      line-height: 1.55;
    }

    .steps {
      counter-reset: steps;
      display: grid;
      gap: 12px;
      margin: 28px 0 36px;
    }

    .step {
      position: relative;
      padding: 19px 20px 19px 70px;
      border: 1px solid var(--soft-gray);
      border-radius: 19px;
      background: var(--white);
    }

    .step::before {
      counter-increment: steps;
      position: absolute;
      top: 18px;
      left: 18px;
      width: 37px;
      height: 37px;
      display: grid;
      place-items: center;
      border-radius: 12px;
      background:
        linear-gradient(
          145deg,
          #0071e3,
          #25a6d9
        );
      color: var(--white);
      content: counter(steps);
      font-size: 13px;
      font-weight: 800;
    }

    .step h3 {
      margin: 0;
      font-size: 18px;
    }

    .step p {
      margin: 6px 0 0;
      color: #6e6e73;
      font-size: 14px;
      line-height: 1.55;
    }

    .timeline {
      display: grid;
      gap: 13px;
      margin: 28px 0 34px;
    }

    .timeline-row {
      display: grid;
      grid-template-columns: 165px minmax(0, 1fr);
      gap: 18px;
      padding: 19px;
      border: 1px solid var(--soft-gray);
      border-radius: 18px;
      background: var(--white);
    }

    .timeline-row strong {
      color: var(--blue);
    }

    .timeline-row span {
      color: #515154;
    }

    details {
      margin-top: 12px;
      padding: 0 18px;
      border: 1px solid var(--soft-gray);
      border-radius: 17px;
      background: var(--white);
    }

    summary {
      padding: 16px 2px;
      color: var(--near-black);
      cursor: pointer;
      font-size: 15px;
      font-weight: 680;
      list-style: none;
    }

    summary::-webkit-details-marker {
      display: none;
    }

    details p {
      margin: 0;
      padding: 0 2px 17px;
      color: #6e6e73;
      font-size: 14px;
    }

    .closing-box {
      margin-top: 70px;
      padding: 36px;
      border-radius: 28px;
      background:
        radial-gradient(
          circle at 90% 10%,
          rgba(39, 160, 210, 0.17),
          transparent 30%
        ),
        linear-gradient(
          145deg,
          #071a38,
          #0b315e
        );
      color: var(--white);
    }

    .closing-box h2 {
      margin-top: 0;
      color: var(--white);
    }

    .closing-box p {
      color: #dbe9f7;
    }

    .source-box {
      padding: 21px;
      border: 1px solid #d9e9f8;
      border-radius: 18px;
      background: #eef6ff;
      color: #31536f;
      font-size: 14px;
      line-height: 1.62;
    }

    .article-sidebar {
      position: sticky;
      top: 83px;
    }

    .toc-card {
      padding: 21px;
      border: 1px solid rgba(0, 0, 0, 0.06);
      border-radius: 22px;
      background: rgba(255, 255, 255, 0.88);
      box-shadow: 0 16px 45px rgba(0, 0, 0, 0.06);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    .toc-card h2 {
      margin: 0 0 13px;
      color: var(--near-black);
      font-size: 13px;
      font-weight: 750;
      letter-spacing: 0.02em;
      text-transform: uppercase;
    }

    .toc-card nav {
      display: grid;
      gap: 2px;
    }

    .toc-card a {
      display: block;
      padding: 7px 9px;
      border-radius: 9px;
      color: #6e6e73;
      font-size: 12px;
      line-height: 1.35;
      text-decoration: none;
    }

    .toc-card a:hover,
    .toc-card a.active {
      background: #eef6ff;
      color: var(--blue);
    }

    .sidebar-note {
      margin-top: 15px;
      padding: 17px;
      border-radius: 18px;
      background: #fff7e8;
      color: #75511b;
      font-size: 12px;
      line-height: 1.52;
    }

    .author-section {
      padding: 70px 20px;
      background: var(--white);
    }

    .author-card {
      width: min(880px, 100%);
      display: grid;
      align-items: center;
      grid-template-columns: 78px minmax(0, 1fr) auto;
      gap: 22px;
      margin: 0 auto;
      padding: 27px;
      border: 1px solid var(--soft-gray);
      border-radius: 25px;
      background: var(--off-white);
    }
    .author-mark {
      width: 78px;
      height: 78px;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      overflow: hidden;
      border: 1px solid #e2e2e7;
      border-radius: 24px;
      background: #ffffff;
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
    }

    /* Logo ASD pada kartu penulis */
    .author-mark img {
      width: 76%;
      height: 76%;
      display: block;
      object-fit: contain;
      object-position: center;
    }

    .author-copy strong {
      display: block;
      font-size: 20px;
      letter-spacing: -0.03em;
    }

    .author-copy p {
      margin: 6px 0 0;
      color: #6e6e73;
      font-size: 14px;
      line-height: 1.5;
    }

    footer {
      background: var(--off-white);
      color: #6e6e73;
    }

    .disclaimer {
      width: min(980px, calc(100% - 40px));
      margin: 0 auto;
      padding: 23px 0;
      border-bottom: 1px solid #d2d2d7;
      font-size: 12px;
      line-height: 1.5;
    }

    .disclaimer strong {
      color: #424245;
    }

    .footer-inner {
      width: min(980px, calc(100% - 40px));
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 20px;
      margin: 0 auto;
      padding: 21px 0 27px;
      font-size: 12px;
    }

    .footer-inner p {
      margin: 0;
    }

    .footer-links {
      display: flex;
      flex-wrap: wrap;
      gap: 18px;
    }

    .footer-links a {
      color: #424245;
      text-decoration: none;
    }

    .footer-links a:hover {
      text-decoration: underline;
    }

    @media (max-width: 980px) {
      .main-nav {
        display: none;
      }

      .menu-button {
        display: grid;
      }

      .article-layout {
        grid-template-columns: minmax(0, var(--article-width));
      }

      .article-sidebar {
        position: static;
        order: -1;
      }

      .toc-card nav {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .sidebar-note {
        display: none;
      }
    }

    @media (max-width: 760px) {
      .hero {
        padding-top: 76px;
        padding-bottom: 60px;
      }

      .hero h1 {
        font-size: 50px;
      }

      .stat-orbit {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .hero-stat-card:nth-child(2),
      .hero-stat-card:nth-child(4) {
        transform: none;
      }

      .article-shell {
        padding-top: 48px;
      }

      .eligibility-grid {
        grid-template-columns: 1fr;
      }

      .tax-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .timeline-row {
        grid-template-columns: 1fr;
        gap: 5px;
      }

      .table-wrap {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/*
 * Responsive table bawaan Artikel V2.
 * Dibatasi hanya untuk tabel di dalam .table-wrap
 * agar tidak mengganggu tabel khusus artikel.
 */
.table-wrap table {
  min-width: 0;
}

.table-wrap thead {
  display: none;
}

.table-wrap table,
.table-wrap tbody,
.table-wrap tr,
.table-wrap td {
  display: block;
  width: 100%;
}

.table-wrap tbody {
  display: grid;
  gap: 13px;
}

.table-wrap tbody tr,
.table-wrap tbody tr:nth-child(even),
.table-wrap tbody tr:hover {
  overflow: hidden;
  border: 1px solid var(--soft-gray);
  border-radius: 19px;
  background: var(--white);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.055);
}

.table-wrap td {
  width: 100% !important;
  min-width: 0 !important;
  padding: 12px 15px;
  border-bottom: 1px solid var(--soft-gray);
  overflow-wrap: anywhere;
}

.table-wrap td::before {
  display: block;
  margin-bottom: 5px;
  color: var(--medium-gray);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.table-wrap td:nth-child(1)::before {
  content: "Komponen";
}

.table-wrap td:nth-child(2)::before {
  content: "Informasi";
}

.table-wrap td:last-child {
  border-bottom: 0;
}

      .author-card {
        grid-template-columns: 65px minmax(0, 1fr);
      }

      .author-mark {
        width: 65px;
        height: 65px;
        border-radius: 20px;
      }

      .author-mark img {
        width: 72%;
        height: 72%;
      }


      .author-card .button {
        grid-column: 1 / -1;
      }

      .footer-inner {
        align-items: flex-start;
        flex-direction: column;
      }
    }

    @media (max-width: 520px) {
      .brand span:last-child {
        display: none;
      }

      .hero h1 {
        font-size: 43px;
      }

      .article-meta {
        flex-direction: column;
        gap: 4px;
      }

      .article-body p,
      .article-body ul,
      .article-body ol {
        font-size: 17px;
      }

      .toc-card nav {
        grid-template-columns: 1fr;
      }

      .stat-orbit,
      .tax-grid {
        grid-template-columns: 1fr;
      }

      .closing-box {
        padding: 27px;
      }
    }

    @media print {
      .site-header,
      .mobile-menu,
      .reading-progress,
      .hero-actions,
      .article-sidebar,
      .author-section,
      footer,
      .checklist-actions {
        display: none !important;
      }

      main {
        padding-top: 0;
      }

      .hero {
        padding: 35px 20px;
      }

      .hero-visual {
        display: none;
      }

      .article-shell {
        padding: 20px;
        background: var(--white);
      }

      .article-layout {
        display: block;
      }

      .article-body p,
      .article-body li {
        color: #000000;
      }

      .table-wrap {
        overflow: visible;
        box-shadow: none;
      }

      table {
        min-width: 0;
      }

      th {
        background: #eeeeee !important;
        color: #000000 !important;
      }

      .closing-box {
        border: 1px solid #bbbbbb;
        background: #ffffff;
        color: #000000;
      }

      .closing-box h2,
      .closing-box p {
        color: #000000;
      }

      .gradient-text {
        background: none !important;
        color: #000000 !important;
        -webkit-text-fill-color: #000000 !important;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      * {
        transition: none !important;
      }
    }


    /* Formulir interaktif SKB PPh */
    .skb-form-section {
      margin-top: 72px;
      scroll-margin-top: 86px;
    }

    .skb-form-intro {
      margin-bottom: 24px;
      padding: 24px 26px;
      border: 1px solid #d5e7f8;
      border-radius: 22px;
      background: linear-gradient(145deg, #f7fbff, #eef6ff);
    }

    .skb-form-intro p {
      margin: 0;
      color: #42566a;
      font-size: 16px;
      line-height: 1.6;
    }

    .skb-app {
      overflow: hidden;
      margin: 26px 0 40px;
      border: 1px solid rgba(0, 0, 0, 0.08);
      border-radius: 26px;
      background: #ffffff;
      box-shadow: 0 22px 58px rgba(20, 43, 76, 0.10);
    }

    .skb-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 18px 20px;
      border-bottom: 1px solid var(--soft-gray);
      background: #111113;
      color: #ffffff;
    }

    .skb-toolbar strong {
      display: block;
      font-size: 15px;
      letter-spacing: -0.02em;
    }

    .skb-toolbar span {
      display: block;
      margin-top: 3px;
      color: #c7c7cc;
      font-size: 12px;
    }

    .skb-toolbar-actions {
      display: flex;
      flex-shrink: 0;
      gap: 9px;
    }

    .skb-toolbar .button {
      min-height: 38px;
      padding: 8px 15px;
      border-color: #ffffff;
      color: #ffffff;
    }

    .skb-toolbar .button-primary {
      border-color: var(--blue);
      background: var(--blue);
    }

    .skb-screen-note {
      margin: 18px 20px 0;
      padding: 12px 14px;
      border: 1px solid #d5e7f8;
      border-radius: 14px;
      background: #eef6ff;
      color: #31536f;
      font-size: 13px;
      line-height: 1.5;
    }

    .skb-paper-wrap {
      padding: 22px;
      overflow-x: auto;
      background: #eef2f7;
    }

    .skb-paper {
      width: 216mm;
      min-height: 330mm;
      margin: 0 auto;
      padding: 53mm 22mm 28mm;
      background: #ffffff;
      color: #000000;
      box-shadow: 0 18px 50px rgba(15, 23, 42, 0.16);
      font-family: Arial, Helvetica, sans-serif;
      font-size: 11.2pt;
      line-height: 1.2;
    }

    .skb-form-box {
      min-height: 235mm;
      padding: 10mm 10mm 8mm;
    }

    .skb-row {
      min-height: 7mm;
      display: grid;
      align-items: center;
      grid-template-columns: 22mm 4mm minmax(0, 1fr);
    }

    .skb-row.skb-hal {
      align-items: start;
    }

    .skb-row.skb-hal .skb-static {
      padding-top: 0.7mm;
    }

    .skb-label {
      white-space: nowrap;
    }

    .skb-colon {
      text-align: center;
    }

    .skb-paper input[type="text"],
    .skb-paper textarea,
    .skb-paper select {
      width: 100%;
      height: 6.2mm;
      border: 0;
      border-bottom: 0.25mm dotted #555555;
      border-radius: 0;
      padding: 0.5mm 1mm;
      background: #ffffff;
      color: #000000;
      font: inherit;
      outline: none;
    }

    .skb-paper textarea {
      min-height: 13mm;
      resize: vertical;
      line-height: 1.25;
    }

    .skb-paper select {
      cursor: pointer;
    }

    .skb-paper input:focus,
    .skb-paper textarea:focus,
    .skb-paper select:focus {
      background: #eff6ff;
      box-shadow: inset 0 -1px 0 var(--blue);
    }

    .skb-paper .skb-missing {
      background: #fff1f2 !important;
      box-shadow: inset 0 -1px 0 var(--red) !important;
    }

    .skb-recipient {
      margin: 6mm 0 5mm;
    }

    .skb-recipient-line {
      display: flex;
      align-items: baseline;
      gap: 1mm;
    }

    .skb-recipient-line input {
      flex: 1;
    }

    .skb-indent {
      margin-left: 10mm;
    }

    .skb-section-title {
      margin: 0 0 1.5mm !important;
      color: #000000 !important;
      font: inherit !important;
      line-height: inherit !important;
    }

    .skb-status-title {
      margin: 4mm 0 1.5mm !important;
      color: #000000 !important;
      font: inherit !important;
      line-height: inherit !important;
    }

    .skb-checks {
      display: grid;
      gap: 2mm;
    }

    .skb-check-line {
      min-height: 7mm;
      display: flex;
      align-items: center;
      gap: 2.2mm;
    }

    .skb-check-line.skb-inline {
      gap: 11mm;
    }

    .skb-check-label {
      display: flex;
      align-items: center;
      gap: 2.2mm;
      cursor: pointer;
    }

    .skb-paper input[type="radio"],
    .skb-paper input[type="checkbox"] {
      appearance: none;
      width: 7mm;
      height: 7mm;
      display: grid;
      flex: 0 0 7mm;
      margin: 0;
      place-content: center;
      border: 0.3mm solid #666666;
      background: #ffffff;
    }

    .skb-paper input[type="radio"]::before,
    .skb-paper input[type="checkbox"]::before {
      content: "✓";
      font-family: Arial, sans-serif;
      font-size: 6mm;
      font-weight: 700;
      line-height: 1;
      transform: scale(0);
    }

    .skb-paper input[type="radio"]:checked::before,
    .skb-paper input[type="checkbox"]:checked::before {
      transform: scale(1);
    }

    .skb-taxpayer-data {
      margin: 2mm 0 3mm 10mm;
    }

    .skb-paragraph {
      margin: 3mm 0 0 !important;
      color: #000000 !important;
      font: inherit !important;
      line-height: inherit !important;
      text-align: justify;
    }

    .skb-inline-input {
      display: inline-block;
      width: 38mm !important;
      height: 6.2mm !important;
      vertical-align: baseline;
    }

    .skb-reason {
      width: 74mm !important;
    }

    .skb-tax-select {
      min-width: 38mm;
      padding-right: 6mm !important;
    }

    .skb-attachment-title {
      margin: 3mm 0 1mm !important;
      color: #000000 !important;
      font: inherit !important;
      line-height: inherit !important;
      text-align: justify;
      text-indent: 10mm;
    }

    .skb-attachment-list {
      display: grid;
      gap: 2mm;
      margin-top: 1mm;
    }

    .skb-closing {
      margin: 5mm 0 0 10mm !important;
      color: #000000 !important;
      font: inherit !important;
      line-height: inherit !important;
    }

    .skb-signature {
      width: 72mm;
      margin: 13mm 4mm 0 auto;
    }

    .skb-date-line {
      display: flex;
      align-items: baseline;
    }

    .skb-date-line input {
      flex: 1;
    }

    .skb-role-line {
      margin-top: 1mm;
    }

    .skb-sig-space {
      height: 24mm;
    }

    .skb-name-line input {
      width: 45mm !important;
    }

    .skb-screen-help {
      margin-top: 1mm;
      color: #64748b;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
      font-size: 8pt;
      text-align: left;
    }

    .skb-footnotes {
      margin-top: 7mm;
      font-size: 9.3pt;
      line-height: 1.25;
    }

    .skb-footnote-row {
      display: grid;
      grid-template-columns: 9mm 1fr;
    }

    @media (max-width: 760px) {
      .skb-toolbar {
        align-items: stretch;
        flex-direction: column;
      }

      .skb-toolbar-actions {
        width: 100%;
      }

      .skb-toolbar-actions .button {
        flex: 1;
      }

      .skb-paper-wrap {
        padding: 14px;
      }
    }

    @page {
      size: 216mm 330mm;
      margin: 0;
    }

    @media print {
      body.print-skb-form .site-header,
      body.print-skb-form .mobile-menu,
      body.print-skb-form .reading-progress,
      body.print-skb-form main > article > .hero,
      body.print-skb-form .article-shell,
      body.print-skb-form .author-section,
      body.print-skb-form footer,
      body.print-skb-form .skb-toolbar,
      body.print-skb-form .skb-screen-note {
        display: none !important;
      }

      body.print-skb-form main {
        display: block !important;
        padding: 0 !important;
      }

      body.print-skb-form .skb-print-portal {
        display: block !important;
      }

      body.print-skb-form .skb-paper-wrap {
        margin: 0;
        padding: 0;
        overflow: visible;
        background: #ffffff;
      }

      body.print-skb-form .skb-paper {
        width: 216mm;
        min-height: 330mm;
        margin: 0;
        padding: 53mm 22mm 28mm;
        box-shadow: none;
      }

      body.print-skb-form .skb-paper input,
      body.print-skb-form .skb-paper textarea,
      body.print-skb-form .skb-paper select {
        background: #ffffff !important;
        box-shadow: none !important;
      }

      body.print-skb-form .skb-paper input::placeholder,
      body.print-skb-form .skb-paper textarea::placeholder {
        color: transparent !important;
      }

      body.print-skb-form .skb-paper textarea {
        resize: none !important;
        overflow: hidden !important;
      }

      body.print-skb-form .skb-paper input[type="radio"],
      body.print-skb-form .skb-paper input[type="checkbox"] {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      body.print-skb-form .skb-screen-help {
        display: none !important;
      }
    }

  

/* =========================================================
   Penyesuaian layout artikel dinamis
   ========================================================= */
.article-body > :first-child {
  margin-top: 0;
}

.article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 18px;
}

.article-body blockquote {
  margin: 28px 0;
  padding: 20px 23px;
  border-left: 4px solid var(--blue);
  border-radius: 0 18px 18px 0;
  background: #eef6ff;
  color: #31536f;
}

.article-body blockquote p:last-child {
  margin-bottom: 0;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 18px;
}

.article-tag {
  display: inline-flex;
  align-items: center;
  min-height: 27px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #eef6ff;
  color: var(--blue);
  font-size: 11px;
  font-weight: 650;
}

.article-updated {
  margin-top: 22px;
  color: var(--medium-gray);
  font-size: 12px;
}

.article-sidebar .toc-card nav:empty::after {
  content: "Daftar isi akan dibuat otomatis dari judul bagian artikel.";
  display: block;
  color: var(--medium-gray);
  font-size: 12px;
  line-height: 1.5;
}

.article-body .table-wrap table {
  width: 100%;
}

@media (max-width: 760px) {
  /* Mobile table yang punya banyak kolom dapat memberi label via data-label. */
  .article-body table[data-responsive="cards"] td::before {
    content: attr(data-label);
  }
}