/** * Portal — satu sistem .container-global (1320px + 32px) * Muat terakhir di halaman sg-portal-page. */ :root { --container-max: 1320px; --layout-max-width: 1320px; --portal-content-gutter: clamp(1rem, 2.5vw, 32px); } html.sg-portal-html, html.sg-portal-html-home, html, body, #root, main, .site-layout-main { width: 100%; margin: 0; padding: 0; overflow-x: hidden; box-sizing: border-box; } /* * Portal: satu scrollbar di html (body tidak scroll — hindari ganda dengan site_styles). */ html.sg-portal-html, html.sg-portal-html-home { overflow-y: auto; overflow-x: hidden; scrollbar-gutter: auto !important; width: 100%; max-width: 100%; } body.sg-portal-page { width: 100%; max-width: 100%; overflow-x: hidden; overflow-y: visible; --sg-header-gradient: linear-gradient( 90deg, #001428 0%, #032244 12%, #073d6b 30%, #0a4d85 50%, #073d6b 70%, #032244 88%, #001428 100% ); --sg-header-gradient-scrolled: linear-gradient( 90deg, #001428 0%, #053057 50%, #001428 100% ); --sg-nav-panel-min-h: 56px; --sg-nav-panel-radius: 20px; --sg-nav-panel-pad-block: 0.35rem; --sg-nav-panel-pad-inline: 0; --sg-nav-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 32px rgba(0, 10, 28, 0.42); --sg-nav-panel-bg: rgba(2, 22, 48, 0.94); --sg-nav-panel-bg-scrolled: rgba(2, 22, 48, 0.97); --sg-nav-panel-border: rgba(147, 197, 253, 0.18); --header-nav-surface: rgba(2, 22, 48, 0.94); } /* —— Satu rail konten (header, navbar, hero, main, footer) —— */ .container-global { width: 100%; max-width: var(--layout-max-width, 1320px); margin-left: auto; margin-right: auto; padding-left: var(--portal-content-gutter, clamp(1rem, 2.5vw, 32px)); padding-right: var(--portal-content-gutter, clamp(1rem, 2.5vw, 32px)); box-sizing: border-box; } /* Header tetap di atas saat scroll + logo & navbar satu rail (zoom aman) */ body.sg-portal-page .site-header--sg-portal { position: fixed !important; top: 0; left: 0; right: 0; width: 100%; max-width: 100%; z-index: 1100; box-sizing: border-box; } .sg-portal-page .site-header--sg-portal .site-header__gradient { width: 100%; max-width: 100%; } .sg-portal-page .site-header__rail.container-global, .sg-portal-page .site-header--sg-portal .header-inner.container-global { width: 100%; max-width: var(--layout-max-width, 1320px); margin-left: auto !important; margin-right: auto !important; padding-left: var(--portal-content-gutter) !important; padding-right: var(--portal-content-gutter) !important; box-sizing: border-box; } .sg-portal-page .site-header__rail .navbar-wrapper, .sg-portal-page .site-header--sg-portal .navbar-wrapper { width: 100%; max-width: 100%; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box; } /* Hero content box — sama dengan rail (timpa Tailwind .org-container / px-5) */ .org-hero__container, .sg-portal-page .org-hero__container { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 32px; box-sizing: border-box; } /* Grid/layout wrapper di dalam container — bukan rail */ .hero-inner, .sg-portal-page .hero-inner { width: 100%; margin: 0 auto; box-sizing: border-box; } /* Elemen yang memakai .container-global + hero class: satu rail, jangan di-reset */ .container-global.hero-inner, .container-global.org-hero__container, .hero-inner.container-global, .org-hero__container.container-global { max-width: 1320px; margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; } /* Subhero portal: rail sama dengan header .site-header__rail.container-global */ body.sg-portal-subpage .org-hero.sg-subhero .org-hero__container.container-global, body.sg-portal-subpage .org-hero.sg-subhero .hero-inner.container-global { width: 100%; max-width: var(--layout-max-width, 1320px); margin-left: auto; margin-right: auto; padding-top: 0; padding-bottom: 0; padding-left: var(--portal-content-gutter, clamp(1rem, 2.5vw, 32px)); padding-right: var(--portal-content-gutter, clamp(1rem, 2.5vw, 32px)); } /* Shell section full-width (bukan .container-global) */ .org-hero, .sg-subhero, .sg-portal-page .org-hero, .sg-portal-page .org-hero.sg-subhero, .sg-portal-page .sg-subhero { width: 100%; max-width: none; margin-left: 0; margin-right: 0; overflow: hidden; } .sg-portal-page .org-hero__grid, .sg-portal-page .sg-subhero__grid { width: 100%; max-width: 100%; margin: 0; padding: 0; box-sizing: border-box; } .sg-portal-page { --container-max: 1320px; --layout-max-width: 1320px; } /* Bootstrap .container yang juga memakai container-global */ .sg-portal-page .container-global.container, .sg-portal-page .container-global.org-container { --bs-gutter-x: 0; max-width: 1320px; padding-left: 32px; padding-right: 32px; } /* Shell background full-width (konten tetap di .container-global) */ .sg-portal-page .site-header, .sg-portal-page .site-header--sg-portal, .sg-portal-page .site-header--sg-portal .site-header__gradient, .sg-portal-page .hero-section, .sg-portal-page #sg-hero, .sg-portal-page #sg-hero.sg-hero, .sg-portal-page .sg-hero.sg-hero--govtech, .sg-portal-page .sg-subhero, .sg-portal-page .site-layout-main, .sg-portal-page .site-footer { width: 100%; max-width: 100%; margin: 0; box-sizing: border-box; } body.sg-homepage.sg-portal-page > #sg-hero.hero-section, body.sg-homepage.sg-portal-page > section#sg-hero.hero-section, body.sg-homepage.sg-portal-page > #sg-hero.sg-hero, body.sg-homepage.sg-portal-page .site-layout-main > #sg-hero.hero-section, body.sg-homepage.sg-portal-page .site-layout-main > section#sg-hero.hero-section, body.sg-homepage.sg-portal-page .site-layout-main > #sg-hero.sg-hero { display: block; position: relative; left: 0; right: 0; width: 100%; max-width: 100%; transform: none; box-sizing: border-box; } body.sg-homepage.sg-portal-page .site-layout-main { display: block; width: 100%; max-width: 100%; margin: 0; padding: 0; overflow-x: hidden; overflow-y: visible; box-sizing: border-box; } /* Header portal: sticky — lihat sg-portal-shell-align.css */ /* Timpa site_styles — logo di atas, navbar di bawah (bukan samping kanan) */ .sg-portal-page .site-header__rail.container-global, .sg-portal-page .site-header__inner.header-inner, .sg-portal-page .header-inner { padding-top: 0; padding-bottom: 0; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; width: 100%; box-sizing: border-box; } .sg-portal-page .site-header__rail .site-header__topbar, .sg-portal-page .header-inner .site-header__topbar { width: 100%; max-width: 100%; margin: 0; padding: 0.2rem 0 0.15rem; flex: 0 0 auto; align-self: stretch; align-items: center; gap: 0.5rem 1rem; box-sizing: border-box; } .sg-portal-page .header-inner .site-header__brand-row, .sg-portal-page .header-inner .site-header__brand-row > a:first-child { margin-left: 0; padding-left: 0; } @media (min-width: 992px) { .sg-portal-page .site-header__rail .navbar-wrapper, .sg-portal-page .site-header__rail .org-navbar__nav-shell, .sg-portal-page .navbar-wrapper { display: block; width: 100%; max-width: 100%; margin-top: clamp(0.5rem, 1.2vw, 1.125rem); margin-left: 0; margin-right: 0; padding-top: 0; padding-bottom: 0; flex: 0 0 auto; align-self: stretch; } } .sg-portal-page .site-header__nav-wrap-spacer, .sg-portal-page .site-header__nav-wrap-spacer.is-active { display: none; height: 0; } .sg-portal-page .site-header--sg-portal .site-header__gradient { padding: 0; box-sizing: border-box; } /* Header portal (beranda + subhalaman) — gradasi navy horizontal */ body.sg-portal-page .site-header--sg-portal .site-header__gradient { background: var(--sg-header-gradient) !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.sg-portal-page .site-header--sg-portal.is-scrolled .site-header__gradient { background: var(--sg-header-gradient-scrolled) !important; box-shadow: 0 6px 24px rgba(0, 12, 30, 0.38) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Menu aktif + tombol Dashboard (semua halaman portal) */ body.sg-portal-page .site-header__nav a.is-active { background: rgba(37, 99, 235, 0.4) !important; color: #fff !important; box-shadow: inset 0 -2px 0 0 #60a5fa; } body.sg-portal-page .site-header__nav a.is-active::after { background: #7dd3fc; opacity: 1; } body.sg-portal-page .site-header--sg-portal .btn-header-dashboard { background: linear-gradient(135deg, #1e40af 0%, #2563eb 45%, #38bdf8 100%) !important; border: 1px solid rgba(147, 197, 253, 0.35) !important; color: #fff !important; box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35) !important; } body.sg-portal-page .site-header--sg-portal .btn-header-dashboard:hover { background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #7dd3fc 100%) !important; box-shadow: 0 6px 22px rgba(56, 189, 248, 0.4) !important; } /* Hero beranda */ body.sg-homepage.sg-portal-page > #sg-hero.hero-section, body.sg-homepage.sg-portal-page > section#sg-hero.hero-section, body.sg-homepage.sg-portal-page .site-layout-main > #sg-hero.hero-section, body.sg-homepage.sg-portal-page .site-layout-main > section#sg-hero.hero-section { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; background: linear-gradient(135deg, #07325a 0%, #0f4c81 100%); padding-bottom: 72px; padding-top: 0; overflow-x: hidden; overflow-y: visible; } body.sg-homepage.sg-portal-page > #sg-hero .sg-hero__bg, body.sg-homepage.sg-portal-page > #sg-hero .sg-hero__grid-floor, body.sg-homepage.sg-portal-page > #sg-hero .sg-ambient-layer, body.sg-homepage.sg-portal-page .site-layout-main > #sg-hero .sg-hero__bg, body.sg-homepage.sg-portal-page .site-layout-main > #sg-hero .sg-hero__grid-floor, body.sg-homepage.sg-portal-page .site-layout-main > #sg-hero .sg-ambient-layer { left: 0; right: 0; width: 100%; max-width: 100%; overflow: hidden; } body.sg-homepage.sg-portal-page .site-layout-main > #sg-hero.hero-section, body.sg-homepage.sg-portal-page .site-layout-main > #sg-hero.sg-hero { overflow-x: clip; max-width: 100%; } body.sg-homepage.sg-portal-page #sg-hero .sg-ambient-glow--b { right: 0; left: auto; } body.sg-portal-page .container-global.hero-inner, body.sg-portal-page .hero-inner.container-global { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; position: relative; z-index: 5; min-width: 0; } .sg-portal-page .hero-text, .sg-portal-page .hero-inner > .sg-hero__copy { margin: 0; min-width: 0; max-width: 620px; } .sg-portal-page .site-header__nav { margin-left: 0; padding-left: 0; } .sg-portal-page .hero-visual, .sg-portal-page .hero-inner > .sg-hero__visual-col { width: 100%; max-width: 420px; justify-self: end; margin: 0; padding: 0 clamp(0.75rem, 2vw, 1.5rem) 0 0; transform: none; overflow: visible; } .sg-portal-page .hero-visual .sg-hero__visual-frame { width: 100%; max-width: 100%; margin: 0; padding: clamp(0.75rem, 1.75vw, 1rem); padding-right: 0; box-sizing: border-box; } .sg-portal-page .sg-hero--govtech .sg-hero__holo, .sg-portal-page .sg-hero--govtech .sg-hero__holo .sg-command-center { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } .sg-portal-page .shortcut-grid { margin-top: clamp(1.25rem, 2.5vw, 2rem); position: relative; z-index: 4; } .sg-portal-page .stats-grid { margin-top: clamp(1rem, 2vw, 1.5rem); position: relative; z-index: 4; } .sg-portal-page .shortcut-grid .sg-quick-menu, .sg-portal-page .stats-grid .sg-hero-stats { width: 100%; max-width: 100%; margin: 0; padding: 0; } /* Main / beranda: jangan double-padding pada .container nested */ .sg-portal-page .site-main.container-global > .container, .sg-portal-page #beranda-root > .container { width: 100%; max-width: 100%; margin: 0; padding: 0; } .sg-portal-page .site-main.container-global > section, .sg-portal-page #beranda-root > section { width: 100%; max-width: 100%; } .sg-portal-page .org-hero.sg-subhero .container-global, .sg-portal-page .org-hero.sg-subhero .org-hero__container.container-global { position: relative; z-index: 2; } /* Subhalaman: vertikal dari section; horizontal tetap 32px dari rail di atas */ .sg-portal-page .org-hero.org-hero--sub .org-hero__container.container-global { padding-top: 0; padding-bottom: 0; padding-left: var(--portal-content-gutter, clamp(1rem, 2.5vw, 32px)); padding-right: var(--portal-content-gutter, clamp(1rem, 2.5vw, 32px)); } .sg-portal-page .site-footer__nav-wrap, .sg-portal-page .site-footer__copyright-inner { width: 100%; max-width: 100%; } @media (max-width: 991.98px) { body.sg-portal-page .site-header--sg-portal .site-header__gradient { padding-top: 10px !important; padding-bottom: 6px !important; } } @media (max-width: 1024px) { body.sg-portal-page .container-global.hero-inner, body.sg-portal-page .hero-inner.container-global { grid-template-columns: 1fr; gap: 2.5rem; } .sg-portal-page .hero-text, .sg-portal-page .hero-inner > .sg-hero__copy { max-width: none; } .sg-portal-page .hero-visual, .sg-portal-page .hero-inner > .sg-hero__visual-col { max-width: 100%; padding-right: 0; transform: none; } } /* Beranda — hero shell = satu rail dengan .site-header__rail (1320px + gutter) */ body.sg-homepage.sg-portal-page .site-layout-main > #sg-hero.hero-section, body.sg-homepage.sg-portal-page .site-layout-main > section#sg-hero, body.sg-homepage.sg-portal-page .site-layout-main > #sg-hero.sg-hero { width: 100%; max-width: min(var(--layout-max-width, 1320px), 100%); margin-left: auto; margin-right: auto; overflow-x: hidden; overflow-y: visible; box-sizing: border-box; } body.sg-homepage.sg-portal-page .site-layout-main > #sg-hero .container-global.hero-inner, body.sg-homepage.sg-portal-page .site-layout-main > #sg-hero .shortcut-grid.container-global, body.sg-homepage.sg-portal-page .site-layout-main > #sg-hero .stats-grid.container-global { width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; box-sizing: border-box; } body.sg-homepage.sg-portal-page .site-layout-main > #sg-hero .hero-inner.container-global { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; min-width: 0; } body.sg-homepage.sg-portal-page .site-layout-main > #sg-hero .sg-hero__bg, body.sg-homepage.sg-portal-page .site-layout-main > #sg-hero .sg-hero__grid-floor, body.sg-homepage.sg-portal-page .site-layout-main > #sg-hero .sg-ambient-layer, body.sg-homepage.sg-portal-page .site-layout-main > #sg-hero.hero-section::before { width: 100%; max-width: 100%; left: 0; right: 0; margin: 0; } body.sg-homepage.sg-portal-page .site-layout-main > #sg-hero .sg-quick-menu, body.sg-homepage.sg-portal-page .site-layout-main > #sg-hero .shortcut-grid .sg-quick-menu { width: 100%; max-width: 100%; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.5rem, 1.2vw, 1rem); } @media (max-width: 991.98px) { body.sg-homepage.sg-portal-page .site-layout-main > #sg-hero .hero-inner.container-global { grid-template-columns: 1fr; gap: 1.5rem; } body.sg-homepage.sg-portal-page .site-layout-main > #sg-hero .sg-quick-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { body.sg-homepage.sg-portal-page .site-layout-main > #sg-hero .sg-quick-menu { grid-template-columns: 1fr; } }