html,
body {
  max-width: 100%;
  overflow-x: clip;
}

@supports not (overflow: clip) {
  html,
  body { overflow-x: hidden; }
}

section[id] { scroll-margin-top: calc(var(--nav-height) + 16px); }

.offcanvas { width: min(86vw, 360px) !important; }

.hero,
.about-visual,
.cta-band,
.newsletter-card,
.site-footer-main { contain: paint; }

@media (max-width: 991.98px) {
  :root { --nav-height: 70px; }

  .site-navbar { min-height: var(--nav-height); padding-block: .55rem; }
  .hero { min-height: auto; padding-top: calc(var(--nav-height) + 3rem); }
  .hero-grid > .row { --bs-gutter-y: 2rem; }
  .hero-visual-wrap { min-height: clamp(360px, 70vw, 540px); }
  .hero-float-card.one { left: 4%; }
  .hero-float-card.two { right: 4%; }

  .process-timeline::before { display: none; }
  .process-step { text-align: left; }
  .process-dot { margin: 0 0 1rem; }
  .process-step p { margin-inline: 0; }

  .showcase-panel { padding: 1.35rem; }
  .carousel-control-prev { left: .25rem; }
  .carousel-control-next { right: .25rem; }
}

@media (max-width: 767.98px) {
  .section-shell { padding-block: var(--section-space-sm); }
  .about-visual { min-height: 400px; }
  .about-panel { width: min(88%, 350px); }

  .stats-band .row > * { border-bottom: 1px solid rgba(255,255,255,.10); }
  .stats-band .row > *:nth-last-child(-n+2) { border-bottom: 0; }

  .showcase-nav { overflow-x: auto; scrollbar-width: thin; }
  .showcase-nav .nav { flex-wrap: nowrap; width: max-content; min-width: 100%; }
  .showcase-nav .nav-link { white-space: nowrap; }

  .carousel-control-prev,
  .carousel-control-next {
    top: auto;
    bottom: -.5rem;
    transform: none;
  }
  .carousel-control-prev { left: calc(50% - 54px); }
  .carousel-control-next { right: calc(50% - 54px); }
  .testimonial-card { padding-bottom: 3.6rem; }

  .team-card-body { padding: .85rem; }
  .team-card h3 { font-size: .92rem; }
  .team-card p { font-size: .75rem; }

  .cta-band { padding: 1.5rem; }
  .location-placeholder { min-height: 190px; }
}

@media (max-width: 575.98px) {
  :root {
    --section-space: 4rem;
    --section-space-sm: 3.4rem;
    --radius-card: 1.15rem;
    --radius-lg: 1.4rem;
  }

  .container-xl,
  .container { --bs-gutter-x: 1.35rem; }

  .brand-lockup { font-size: .94rem; }
  .brand-lockup img { width: 38px; height: 38px; }
  .site-navbar .icon-button { width: 42px; min-width: 42px; height: 42px; }

  .hero {
    padding-top: calc(var(--nav-height) + 2.35rem);
    padding-bottom: 3.2rem;
    background:
      radial-gradient(circle at 85% 18%, rgba(0, 174, 239, .10), transparent 22%),
      radial-gradient(circle at 10% 70%, rgba(211, 41, 163, .08), transparent 24%),
      var(--bg-main);
  }

  .hero-badge { max-width: 100%; font-size: .78rem; }
  .hero-title { font-size: clamp(2.4rem, 13vw, 3.8rem); letter-spacing: -.055em; }
  .hero-copy { margin-top: 1.1rem; font-size: 1rem; }
  .hero-actions { margin-top: 1.35rem; }
  .hero-actions .aaji-btn { flex: 1 1 170px; }

  .metric-strip {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
  }
  .metric-chip { min-width: 0; padding: .75rem; }
  .metric-chip i { width: 34px; height: 34px; }
  .metric-chip strong { font-size: .9rem; }
  .metric-chip span { font-size: .7rem; }

  .hero-visual-wrap { min-height: 330px; margin-inline: -.4rem; }
  .hero-ribbon { width: 105%; max-width: 105%; }
  .hero-visual-halo { width: 86%; filter: blur(34px); opacity: .11; }
  .hero-float-card { max-width: 170px; padding: .72rem .8rem; }
  .hero-float-card.one { top: 5%; left: 2%; }
  .hero-float-card.two { right: 2%; bottom: 7%; }
  .hero-float-card small { font-size: .67rem; }

  .logo-rail { overflow: hidden; }
  .logo-rail .d-flex.flex-wrap { flex-wrap: nowrap !important; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
  .logo-rail .d-flex.flex-wrap::-webkit-scrollbar { display: none; }

  .about-visual { min-height: 360px; padding: 1rem; }
  .about-spectrum { width: 72%; right: -4%; top: 7%; opacity: .9; }
  .about-panel.top { top: 5%; left: 4%; }
  .about-panel.bottom { right: 4%; bottom: 5%; }

  .section-title { font-size: clamp(1.8rem, 9vw, 2.6rem); }
  .section-copy { font-size: .94rem; }
  .feature-card,
  .content-card,
  .pricing-card,
  .contact-panel { padding: 1.1rem; }

  .stat-card { padding: 1rem .45rem; }
  .stat-number { font-size: 2.15rem; }
  .stat-label { font-size: .72rem; }

  .filter-bar { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: .3rem; scrollbar-width: none; }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-button { flex: 0 0 auto; }

  .portfolio-body { padding: .95rem; }
  .portfolio-body h3 { font-size: .96rem; }

  .newsletter-card { padding: 1.2rem; }
  .needs-validation .aaji-btn[type="submit"] { width: 100%; }

  .site-footer-main { padding-top: 3rem; }
  .footer-bottom { margin-top: 2rem; }

  .floating-contact { right: .8rem; bottom: 4rem; width: 46px; height: 46px; }
  #backToTop { right: .8rem; bottom: .7rem; width: 44px; height: 44px; }
}

@media (max-width: 389.98px) {
  .hero-title { font-size: clamp(2.25rem, 13.5vw, 3.2rem); }
  .hero-actions { flex-direction: column; }
  .hero-actions .aaji-btn { width: 100%; flex-basis: auto; }
  .metric-strip { grid-template-columns: 1fr; }
  .metric-chip { width: 100%; }
  .hero-visual-wrap { min-height: 300px; }
  .hero-float-card.one { display: none; }
  .hero-float-card.two { right: 0; bottom: 4%; }
  .team-card .social-mini { display: none; }
}

@media (min-width: 992px) {
  .hero-grid > .row { min-height: calc(100svh - var(--nav-height) - 4rem); }
  .hero-visual-wrap { margin-right: -2rem; }
  .showcase-nav .nav { justify-content: center; }
  .site-navbar .navbar-collapse { display: flex !important; }
}

@media (min-width: 1440px) {
  .hero-visual-wrap { min-height: 620px; }
  .hero-ribbon { width: 640px; max-width: 640px; }
}


@media (max-width: 767.98px) {
  .component-state-grid { grid-template-columns: 1fr; }
  .table-toolbar { padding-inline: .15rem; }
  .table-search { width: 100%; }
  .component-note { margin-top: -.35rem; }
}

@media (max-width: 575.98px) {
  .component-header, .component-body { padding-right: 1rem; padding-left: 1rem; }
  .component-shell .table-responsive { margin-inline: -.15rem; }
  .table-component > :not(caption) > * > * { padding: .8rem .65rem; }
  .table-person { min-width: 200px; }
}


@media (max-width: 767.98px) {
  .table-responsive-shell { overflow: visible; border: 0; }
  .table-component[data-mobile-table] { display: block; }
  .table-component[data-mobile-table] thead { display: none; }
  .table-component[data-mobile-table] tbody,
  .table-component[data-mobile-table] tr,
  .table-component[data-mobile-table] td { display: block; width: 100%; }
  .table-component[data-mobile-table] tbody { display: grid; gap: .65rem; }
  .table-component[data-mobile-table] tbody tr { padding: .85rem; border: 1px solid var(--border-soft); border-radius: 1rem; background: var(--surface); box-shadow: 0 8px 24px rgba(11,46,89,.06); }
  .table-component[data-mobile-table] tbody tr td { padding: .42rem 0 !important; border: 0; text-align: left !important; }
  .table-component[data-mobile-table] tbody tr td:first-child { display: none; }
  .table-component[data-mobile-table] tbody tr td:nth-child(2) { padding-top: 0 !important; padding-bottom: .55rem !important; }
  .table-component[data-mobile-table] tbody tr td:nth-child(2)::before,
  .table-component[data-mobile-table] tbody tr td:nth-child(3)::before,
  .table-component[data-mobile-table] tbody tr td:nth-child(4)::before,
  .table-component[data-mobile-table] tbody tr td:nth-child(5)::before,
  .table-component[data-mobile-table] tbody tr td:nth-child(6)::before { display: block; margin-bottom: .12rem; color: var(--text-soft); font-size: .61rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
    /*.table-component[data-mobile-table] tbody tr td:nth-child(3)::before { content: 'Role'; }
  .table-component[data-mobile-table] tbody tr td:nth-child(4)::before { content: 'Joined'; }
  .table-component[data-mobile-table] tbody tr td:nth-child(5)::before { content: 'Status'; }
  .table-component[data-mobile-table] tbody tr td:nth-child(6)::before { content: 'Activity'; }*/
  .table-component[data-mobile-table] tbody tr td:last-child { position: absolute; top: .72rem; right: .72rem; width: auto; }
  .table-component[data-mobile-table] tbody tr { position: relative; }
  .table-footer { padding-inline: .1rem; }
}

@media (max-width: 767.98px) {
    /* Ambil isi tulisan header secara dinamis dari atribut data-label HTML */
    .table-component[data-mobile-table] tbody tr td::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .12rem;
        color: var(--text-soft);
        font-size: .61rem;
        font-weight: 850;
        letter-spacing: .08em;
        text-transform: uppercase;
    }
}

/* v4 component responsive refinements */
@media (max-width: 991.98px) {
  .component-heading-row,.table-control-panel,.action-showcase { align-items:flex-start; flex-direction:column; }
  .component-header-actions,.table-controls,.action-showcase-buttons { justify-content:flex-start; }
  .state-showcase-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .table-controls { width:100%; }
  .table-search { flex:1 1 260px; width:auto; }
}
@media (max-width: 767.98px) {
  .component-header--stacked { padding-top:1.05rem; }
  .component-header-actions { width:100%; }
  .component-copy-button { flex:1 1 auto; justify-content:center; }
  .state-showcase-grid { grid-template-columns:1fr; }
  .choice-grid { grid-template-columns:1fr; }
  .action-showcase-buttons { width:100%; }
  .action-showcase-buttons .aaji-btn { flex:1 1 140px; }
  .table-control-panel { gap:.8rem; }
  .table-controls > * { flex:1 1 150px; }
  .table-controls .table-search { flex-basis:100%; }
  .table-filter { width:auto; }
  .table-footer { align-items:flex-start; flex-direction:column; }
}
@media (max-width: 575.98px) {
  .component-shell--elevated { border-radius:1.15rem; }
  .component-header,.component-body { padding-right:.9rem; padding-left:.9rem; }
  .component-header-actions { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .component-header-actions .component-pill { justify-content:center; }
  .component-copy-button { width:100%; }
  .component-tab { padding-inline:.7rem; }
  .subsection-heading { gap:.45rem; }
  .subsection-heading small { font-size:.64rem; }
  .upload-zone { min-height:170px; }
  .table-controls { display:grid; grid-template-columns:1fr 1fr; width:100%; }
  .table-controls .table-search { grid-column:1 / -1; width:100%; }
  .table-controls .table-filter { width:100%; }
  .table-control-panel .table-view-button { width:100%; }
  .table-responsive-shell { border-radius:.95rem; }
  .table-component[data-mobile-table] tbody tr { padding:1rem; border-radius:1rem; }
  .table-component[data-mobile-table] tbody tr td:last-child { top:.95rem; right:.95rem; }
}
@media (max-width: 389.98px) {
  .component-header-actions { grid-template-columns:1fr; }
  .component-pill { width:100%; justify-content:center; }
  .table-controls { grid-template-columns:1fr; }
  .table-controls .table-search { grid-column:auto; }
  .table-control-panel .table-view-button { width:100%; }
}

@media (max-width: 767.98px) {
  .component-body .form-control,
  .component-body .form-select,
  .component-body .form-control-lg,
  .component-body .form-select-lg { min-height: 40px; font-size: .78rem; }
  .table-actions { justify-content: flex-start; width: 100%; padding-top: .35rem; }
  .table-inline-action { flex: 1 1 0; min-width: 0; }
  .table-pagination-controls { gap: .85rem; }
  .table-page-info { width: 100%; justify-content: space-between; }
  .table-pagination { width: 100%; justify-content: center; }
  .table-pagination .table-page-nav span { display: none; }
  .table-pagination .table-page-nav { min-width: 34px; }
  .table-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .component-body .form-control,
  .component-body .form-select,
  .component-body .form-control-lg,
  .component-body .form-select-lg { min-height: 38px; }
  .component-body .field-stack { margin-bottom: .1rem; }
  .table-page-info { align-items: flex-start; flex-direction: column; }
  .table-page-size { width: 100%; justify-content: space-between; }
  .table-page-size .form-select { width: 88px; }
  .table-pagination .page-link { min-width: 32px; min-height: 32px; padding-inline: .45rem; }
  .table-page-numbers { gap: .18rem; }
  .table-pagination-controls { padding-top: .75rem; }
}
@media (max-width: 767.98px) {
  .component-body .form-control,.component-body .form-select,.component-body .form-control-lg,.component-body .form-select-lg { min-height: 40px; font-size: .78rem; }
  .table-actions { justify-content: flex-start; width: 100%; padding-top: .35rem; }
  .table-inline-action { flex: 1 1 0; min-width: 0; }
  .table-pagination-controls { gap: .85rem; }
  .table-page-info { width: 100%; justify-content: space-between; }
  .table-pagination { width: 100%; justify-content: center; }
  .table-pagination .table-page-nav span { display: none; }
  .table-pagination .table-page-nav { min-width: 34px; }
  .table-detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .component-body .form-control,.component-body .form-select,.component-body .form-control-lg,.component-body .form-select-lg { min-height: 38px; }
  .component-body .field-stack { margin-bottom: .1rem; }
  .table-page-info { align-items: flex-start; flex-direction: column; }
  .table-page-size { width: 100%; justify-content: space-between; }
  .table-page-size .form-select { width: 88px; }
  .table-pagination .page-link { min-width: 32px; min-height: 32px; padding-inline: .45rem; }
  .table-page-numbers { gap: .18rem; }
  .table-pagination-controls { padding-top: .75rem; }
}