/* ===== VARIABEL DAN STRUKTUR UTAMA MODERN ===== */
            :root {
              --primary: #2563EB;
              --primary-light: #60A5FA;
              --primary-soft: #93C5FD;
              --primary-dark: #1D4ED8;
              --secondary: #22C55E;
              --secondary-light: #4ADE80;
              --accent: #93C5FD;
              --danger: #EF4444;
              --success: #22C55E;
              --warning: #F59E0B;
              --info: #0EA5E9;
              --bg-app: #F8FAFC;
              --bg-elevated: #FFFFFF;
              --card-bg: #FFFFFF;
              --text-dark: #334155;
              --text-light: #64748B;
              --border-color: #E2E8F0;
              --shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
              --shadow-lg: 0 16px 42px rgba(15, 23, 42, 0.08);
              --radius-xl: 16px;
              --radius-lg: 12px;
              --radius-md: 10px;
              --bg-gradient: #2563EB;
              --transition: 0.3s cubic-bezier(.4,0,.2,1);
            }

            *,
            *::before,
            *::after {
              box-sizing: border-box;
            }

            html {
              width: 100%;
              overflow-x: hidden;
              scroll-behavior: smooth;
            }

            body {
              transition: background .35s cubic-bezier(.4,0,.2,1);
            }

            button,
            .btn,
            input,
            select,
            textarea,
            a,
            .card,
            .box,
            .sidebar-section,
            .hero-slider,
            .home-announcement-section,
            .banner-actions > *,
            .header-nav-item > a,
            .sidebar-menu-list li a,
            .preview-toolbar input,
            .preview-toolbar select,
            .preview-toolbar button {
              transition: all .3s cubic-bezier(.4,0,.2,1);
            }

            a {
              transition: color .28s ease, opacity .28s ease, transform .28s ease;
            }

            a:hover {
              color: var(--primary);
            }

            button,
            .btn,
            .card,
            .box,
            .sidebar-section,
            .home-announcement-section {
              will-change: transform, box-shadow;
            }

            body {
              letter-spacing: 0.01em;
              font-feature-settings: "liga" 1, "kern" 1;
            }

            body {
              font-family: 'Poppins', sans-serif;
              background: var(--bg-app);
              min-height: 100vh;
              color: var(--text-dark);
              line-height: 1.6;
              box-sizing: border-box;
              overflow-x: hidden;
              overflow-y: auto;
              padding: 0;
              font-size: 15px;
            }

            /* Ensure form controls and interactive elements inherit the global font */
            input,
            textarea,
            select,
            button,
            a {
              font-family: inherit;
            }

            /* Consistent font-weight usage across the site */
            body,
            p,
            li,
            td,
            th,
            input,
            textarea,
            select,
            button {
              font-weight: 400; /* Regular for content */
            }

            h1,
            .banner-text .brand-main {
              font-weight: 700; /* Main titles */
            }

            h2,
            h3,
            h4,
            .sidebar-section-title,
            .header-nav-list .header-nav-item > a,
            .header-nav-item {
              font-weight: 600; /* Menu headings and subheadings */
            }

            .muted,
            .small,
            .info-text {
              font-weight: 300; /* Light for supplemental info */
            }

            html {
              font-family: 'Poppins', sans-serif;
              font-size: 12px;
            }

            h1,
            h2,
            h3,
            h4,
            h5,
            h6,
            .section-title,
            .panel-header h1,
            .editor-hero-title,
            .home-banner-title,
            .banner-text .brand-main {
              font-family: 'Poppins', sans-serif;
              font-size: 14px;
            }

            /* Global responsiveness untuk menghindari overflow horisontal */
            html,
            body,
            #public-view,
            #admin-view,
            .page,
            .layout {
              width: 100%;
              max-width: 100%;
              min-width: 0;
            }

            #public-view .page {
              width: 100%;
              max-width: 100%;
              padding: 0;
            }

            .sheet-data-demo {
              margin: 18px auto 28px;
              max-width: 1100px;
              padding: 0 12px;
            }

            .sheet-data-demo .sheet-data-panel {
              background: rgba(255, 255, 255, 0.96);
              border-radius: 16px;
              box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
              padding: 18px 18px 14px;
            }

            .sheet-data-demo .sheet-data-title {
              font-size: 16px;
              font-weight: 700;
              margin: 0 0 8px;
              color: var(--primary-dark);
            }

            .sheet-data-demo .sheet-data-subtitle {
              font-size: 12px;
              color: var(--text-light);
              margin: 0 0 14px;
            }

            .sheet-data-demo label {
              display: block;
              font-weight: 600;
              margin-bottom: 10px;
              color: #1f2937;
            }

            .sheet-data-demo select,
            input,
            textarea,
            select,
            .header-search-input,
            .preview-toolbar input,
            .preview-toolbar select,
            .sheet-form input,
            .sheet-form select,
            .sheet-form textarea {
              width: 100%;
              max-width: 420px;
              padding: 12px 14px;
              border-radius: 14px;
              border: 1px solid #d1d5db;
              background: #ffffff;
              color: #111827;
              font-size: 0.96rem;
              transition: border-color .28s ease, box-shadow .28s ease, transform .28s ease, background .28s ease;
            }

            .sheet-data-demo select:focus,
            input:focus,
            textarea:focus,
            select:focus,
            .header-search-input:focus,
            .preview-toolbar input:focus,
            .preview-toolbar select:focus,
            .sheet-form input:focus,
            .sheet-form select:focus,
            .sheet-form textarea:focus {
              outline: none;
              border-color: #3b82f6;
              box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.14);
              transform: translateY(-1px);
              background: #ffffff;
            }

            input::placeholder,
            textarea::placeholder,
            .header-search-input::placeholder {
              color: rgba(107, 114, 128, 0.75);
              transition: opacity .3s ease;
            }

            input:focus::placeholder,
            textarea:focus::placeholder,
            .header-search-input:focus::placeholder {
              opacity: 0.55;
            }

            .sheet-data-demo table {
              width: 100%;
              border-collapse: collapse;
              margin-top: 18px;
              min-width: 560px;
              table-layout: fixed;
              overflow-wrap: break-word;
            }

            .sheet-data-demo th,
            .sheet-data-demo td {
              border: 1px solid #e5e7eb;
              padding: 12px 14px;
              text-align: left;
              vertical-align: top;
              word-break: break-word;
              white-space: pre-wrap;
            }

            .sheet-data-demo th {
              background: #f8fafc;
              color: #111827;
              font-weight: 700;
              position: sticky;
              top: 0;
              z-index: 2;
            }

            .sheet-data-demo tr:nth-child(even) td {
              background: #fafafa;
            }

            .sheet-data-demo .table-empty {
              margin-top: 18px;
              padding: 18px;
              background: #f8fafc;
              border: 1px solid #e2e8f0;
              border-radius: 14px;
              color: #475569;
              font-size: 0.95rem;
            }

            .sheet-data-demo .sheet-data-list {
              display: grid;
              gap: 12px;
              grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            }

            #admin-view .sheet-data-demo {
              display: none !important;
            }

            .admin-loading-overlay {
              position: fixed;
              inset: 0;
              z-index: 9999;
              display: none;
              align-items: center;
              justify-content: center;
              padding: 20px;
              background: rgba(0, 0, 0, 0.40);
              -webkit-backdrop-filter: blur(3px);
              backdrop-filter: blur(3px);
            }

            .admin-loading-overlay .admin-loading-panel {
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 14px;
              padding: 18px 22px;
              border-radius: 16px;
              background: rgba(15, 23, 42, 0.92);
              box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
              color: white;
              text-align: center;
              min-width: 220px;
            }

            .admin-loading-overlay .admin-loading-spinner {
              width: 56px;
              height: 56px;
              border: 8px solid rgba(255, 255, 255, 0.18);
              border-top-color: #ffffff;
              border-radius: 50%;
              animation: admin-spin 1s linear infinite;
            }

            .admin-loading-overlay .admin-loading-text {
              font-size: 0.95rem;
              line-height: 1.4;
              font-weight: 700;
            }

            /* Announcement LIST (baru) */
            #public-view .home-announcement-section {
              margin: 20px 0 25px;
              background: #fff;
              padding: 18px;
              border-radius: 14px;
              box-shadow: 0 12px 28px rgba(15, 74, 143, 0.07);
              border: 1px solid rgba(15, 74, 143, 0.06);
            }

            #public-view .home-announcement-section-header {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 12px;
              margin-bottom: 8px;
              text-align: center;
            }

            #public-view .home-announcement-section-header h3 {
              margin: 0;
              font-size: 18px;
              color: #0f4a8f;
              font-weight: 800;
              width: 100%;
            }

            #public-view .home-announcement-section-header .home-announcement-view-all {
              color: #1461b8;
              font-size: 13px;
              font-weight: 600;
              text-decoration: none;
              padding: 6px 10px;
              border-radius: 6px;
            }

            #public-view .home-announcement-list {
              list-style: none;
              margin: 8px 0 0;
              padding: 0;
              width: 100%;
            }

            #public-view .home-announcement-item {
              padding: 12px 10px;
              border-bottom: 1px solid #e6eef8;
              transition: background 0.18s ease;
            }

            #public-view .home-announcement-item:last-child {
              border-bottom: none;
            }

            #public-view .home-announcement-item {
              transition: background .28s ease, transform .28s ease, box-shadow .28s ease;
            }

            #public-view .home-announcement-item:hover {
              background: #f3f4f6;
              cursor: pointer;
              transform: translateY(-1px);
            }

            #public-view .home-announcement-title {
              margin: 0 0 6px 0;
              font-size: 15px;
              font-weight: 700;
              color: #0f2746;
              text-decoration: none;
            }

            #public-view .home-announcement-item:hover .home-announcement-title {
              color: #1461b8;
            }

            #public-view .home-announcement-date {
              color: #6b7280;
              font-size: 12px;
              margin-bottom: 6px;
            }

            #public-view .home-announcement-summary {
              color: #475569;
              font-size: 13px;
              margin: 0;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            /* Responsive: keep single column and adjust padding on small screens */
            @media (max-width: 800px) {
              #public-view .home-announcement-section {
                padding: 14px;
                border-radius: 10px;
              }

              #public-view .home-announcement-item {
                padding: 10px;
              }
            }

            /* ===== ANNOUNCEMENT POPUP - IMPROVED ===== */
            @keyframes popupFadeIn {
              from {
                opacity: 0;
              }

              to {
                opacity: 1;
              }
            }

            @keyframes popupSlideIn {
              from {
                opacity: 0;
                transform: translateY(-28px) scale(0.97);
              }

              to {
                opacity: 1;
                transform: translateY(0) scale(1);
              }
            }

            @keyframes popupFadeOut {
              from {
                opacity: 1;
              }

              to {
                opacity: 0;
              }
            }

            @keyframes popupSlideOut {
              from {
                opacity: 1;
                transform: translateY(0) scale(1);
              }

              to {
                opacity: 0;
                transform: translateY(-20px) scale(0.97);
              }
            }

            .announcement-popup-overlay {
              position: fixed;
              inset: 0;
              background: rgba(10, 17, 40, 0.68);
              -webkit-backdrop-filter: blur(6px);
              backdrop-filter: blur(6px);
              display: none;
              align-items: flex-start;
              justify-content: center;
              padding: 20px;
              padding-top: calc(20px + env(safe-area-inset-top));
              padding-bottom: calc(20px + env(safe-area-inset-bottom));
              padding-left: calc(20px + env(safe-area-inset-left));
              padding-right: calc(20px + env(safe-area-inset-right));
              z-index: 99999;
            }

            .announcement-popup-overlay.active {
              display: flex;
              animation: popupFadeIn 0.25s ease forwards;
            }

            .announcement-popup-overlay.closing {
              animation: popupFadeOut 0.22s ease forwards;
              pointer-events: none;
            }

            .announcement-popup-card {
              width: min(560px, 100%);
              max-width: 100%;
              background: #ffffff;
              border-radius: 20px;
              box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32), 0 4px 16px rgba(30, 64, 175, 0.12);
              padding: 0;
              position: relative;
              z-index: 1;
              pointer-events: auto;
              max-height: min(90vh, 740px);
              overflow: hidden;
              display: flex;
              flex-direction: column;
              margin: 0 auto;
              align-self: flex-start;
              box-sizing: border-box;
              animation: popupSlideIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
            }

            .announcement-popup-overlay.closing .announcement-popup-card {
              animation: popupSlideOut 0.22s ease forwards;
            }

            .announcement-popup-header {
              background: linear-gradient(135deg, #1e40af 0%, #3b5fe8 60%, #6366f1 100%);
              padding: 20px 22px 20px 22px;
              flex-shrink: 0;
              position: relative;
              text-align: center;
            }

            .announcement-popup-header::before {
              content: none;
            }

            .announcement-popup-title {
              margin: 0 0 4px;
              font-size: 1.05rem;
              font-weight: 700;
              color: #ffffff;
              padding-left: 0;
              line-height: 1.4;
              word-break: break-word;
              text-align: center;
            }

            .announcement-popup-meta {
              margin: 0;
              color: rgba(255, 255, 255, 0.75);
              font-size: 0.78rem;
              padding-left: 0;
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 6px;
              text-align: center;
            }

            .announcement-popup-meta::before {
              content: none;
            }

            .announcement-popup-body {
              padding: 20px 22px;
              overflow-y: auto;
              flex: 1;
            }

            .announcement-popup-text {
              margin: 0;
              color: var(--text-dark);
              line-height: 1.75;
              font-size: 0.9rem;
              word-break: break-word;
              text-align: center;
            }

            .announcement-popup-text p {
              margin: 0 0 0.75em;
              text-align: center;
            }

            .announcement-popup-text p:last-child {
              margin-bottom: 0;
            }

            .announcement-popup-footer {
              padding: 12px 22px;
              background: #f8fafc;
              border-top: 1px solid #e5e7eb;
              display: flex;
              justify-content: space-between;
              align-items: center;
              flex-shrink: 0;
              gap: 10px;
              position: relative;
              z-index: 2;
            }

            .announcement-popup-skip-btn {
              background: none;
              border: 0;
              color: #6b7280;
              font-size: 0.78rem;
              cursor: pointer;
              padding: 4px 0;
              text-decoration: underline;
              text-underline-offset: 2px;
              transition: color 0.15s ease;
            }

            .announcement-popup-skip-btn:hover {
              color: #374151;
            }

            .announcement-popup-footer-btn {
              background: linear-gradient(135deg, #1e40af, #6366f1);
              color: #fff;
              border: 0;
              border-radius: 8px;
              padding: 8px 18px;
              font-size: 0.82rem;
              font-weight: 600;
              cursor: pointer;
              position: relative;
              z-index: 2;
              pointer-events: auto;
              transition: opacity 0.18s ease, transform 0.18s ease;
            }

            .announcement-popup-footer-btn:hover {
              opacity: 0.88;
              transform: translateY(-1px);
            }

            /* Home announcement block removed; related styles cleaned up */

            .banner-text {
              flex: 1 1 auto;
              min-width: 0;
            }

            .banner-actions {
              position: absolute;
              top: 16px;
              right: 16px;
              margin: 0;
              display: flex;
              gap: 10px;
              justify-content: flex-end;
              align-items: center;
            }

            .banner-actions>* {
              margin: 0;
            }

            /* Header datetime removed from markup; related styles cleaned up. */

            .hero-slider {
              min-height: 220px;
              width: 100%;
            }

            #visi-misi-section,
            #sambutan-kepala-sekolah {
              max-width: 100%;
              width: 100%;
              padding: 24px 16px;
              margin-left: auto;
              margin-right: auto;
              box-sizing: border-box;
            }

            #sambutan-kepala-sekolah {
              text-align: left;
            }

            #sambutan-kepala-sekolah .welcome-text-area {
              width: 100%;
            }

            .main-container {
              max-width: 1200px;
              margin: 0 auto;
              padding: 30px 20px;
            }

            .card {
              background: var(--card-bg);
              border-radius: var(--radius-xl);
              padding: 24px;
              box-shadow: var(--shadow);
              margin-bottom: 20px;
              border: 1px solid var(--border-color);
            }

            .card:hover,
            .box:hover,
            .home-announcement-section:hover,
            .sidebar-section:hover {
              transform: translateY(-2px);
              box-shadow: var(--shadow-lg);
            }

            .btn {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              gap: 10px;
              padding: 12px 18px;
              border: none;
              border-radius: 12px;
              font-size: 0.95rem;
              font-weight: 600;
              cursor: pointer;
              transition: all var(--transition);
              font-family: inherit;
              text-decoration: none;
              box-shadow: 0 6px 16px rgba(37, 99, 235, 0.14);
            }

            .btn-primary {
              background: var(--primary);
              color: white;
              box-shadow: 0 8px 20px rgba(37, 99, 235, 0.16);
            }

            .btn-primary:hover {
              background: #3B82F6;
              transform: translateY(-2px);
              box-shadow: 0 12px 24px rgba(37, 99, 235, 0.20);
            }

            .btn-secondary {
              background: white;
              color: var(--primary);
              border: 1px solid var(--border-color);
              box-shadow: var(--shadow);
            }

            .btn-secondary:hover {
              background: #EFF6FF;
              color: var(--primary);
              transform: translateY(-2px);
              box-shadow: var(--shadow-lg);
            }

            .btn-success {
              background: var(--secondary);
              color: white;
              box-shadow: 0 8px 18px rgba(34, 197, 94, 0.16);
            }

            .btn-success:hover {
              background: var(--secondary-light);
              transform: translateY(-2px);
              box-shadow: 0 10px 24px rgba(34, 197, 94, 0.18);
            }

            .btn-outline {
              background: transparent;
              color: rgba(255, 255, 255, 0.9);
              border: 1px solid var(--border-color);
              box-shadow: none;
            }

            .btn-outline:hover {
              background: #EFF6FF;
              color: var(--primary);
              box-shadow: var(--shadow);
              transform: translateY(-2px);
            }

            .btn:active,
            .btn:focus-visible {
              transform: scale(0.98);
              outline: none;
            }

            .btn:disabled {
              opacity: 0.6;
              cursor: not-allowed;
              transform: none !important;
              box-shadow: none;
            }

            .focus-highlight {
              box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.12), 0 8px 30px rgba(2, 6, 23, 0.06);
              border-radius: 8px;
              transition: box-shadow .2s ease
            }

            /* ===== RESPONSIVE MOBILE VIEWPORT 2026 ===== */
            /* Baseline: 360x640 (Android), 375x812 (iOS) */
            @media (max-width: 400px) {
              html {
                /* Pastikan font tetap nyaman dibaca */
                font-size: 16px;
              }

              body {
                padding: 0;
              }

              button,
              .btn,
              .touch-target {
                min-width: 48px;
                min-height: 48px;
                font-size: 1rem;
              }

              input,
              select,
              textarea {
                font-size: 1rem;
              }
            }

            /* Untuk layar sangat tinggi (rasio memanjang) */
            @media (max-height: 700px) and (max-width: 400px) {

              .header,
              .footer {
                padding-top: 8px;
                padding-bottom: 8px;
              }
            }

            /* Untuk layar lebar (tablet/desktop) */
            @media (min-width: 768px) {
              html {
                font-size: 17px;
              }

              .container,
              .page {
                max-width: 700px;
                margin: 0 auto;
              }
            }

            /* CSS lama dihapus, hanya CSS modern yang dipakai */

            img,
            video,
            iframe,
            picture,
            svg {
              max-width: 100%;
              height: auto;
            }

            .banner-emblem img {
              display: block;
              max-width: 100% !important;
              width: auto !important;
              height: auto !important;
            }

            button,
            input,
            select,
            textarea,
            .btn,
            .nav-link {
              min-width: 0;
            }

            .section-title {
              display: flex;
              flex-wrap: wrap;
              gap: 10px;
              align-items: center;
            }

            #public-view .content,
            #public-view .page,
            #public-view,
            #admin-view,
            .layout {
              overflow-x: hidden;
              width: 100%;
              max-width: 100%;
              min-width: 0;
            }

            #public-view .top-banner .banner-inner {
              justify-content: center;
              align-items: center;
              gap: 12px;
              text-align: center;
            }

            .banner-actions {
              display: flex;
              flex-wrap: wrap;
              justify-content: flex-start;
              width: 100%;
              gap: 10px;
            }

            .banner-actions>* {
              width: auto;
            }

            .hero-slider {
              width: 100%;
              max-width: 100%;
            }

            #public-view .hero {
              min-height: 220px;
              width: 100%;
            }

            #public-view .box,
            #public-view .welcome,
            #public-view .hero,
            #public-view .sidebar-section,
            #public-view .poll,
            #public-view .news-item,
            #public-view .announcement-item,
            #public-view .agenda-item {
              width: 100%;
              max-width: 100%;
              box-sizing: border-box;
            }

            #admin-view .preview-table {
              min-width: 0 !important;
            }

            #admin-view .preview-table th,
            #admin-view .preview-table td {
              white-space: normal;
            }

            #admin-view .sidebar,
            #admin-view .content,
            #admin-view .menu-group,
            #admin-view .menu-grid {
              min-width: 0;
              width: 100%;
            }

            /* Body modes */

            body.public-mode,
            body.admin-mode {
              margin: 0;
              background: #f4f6fa;
              color: #111;
              font-family: 'Poppins', sans-serif;
              font-size: 1rem;
              min-height: 100svh;
              min-height: 100vh;
              width: 100%;
              display: flex;
              flex-direction: column;
              overflow-x: hidden;
              overflow-y: auto;
              overscroll-behavior-y: auto;
              flex: 1 1 auto;
              padding: 0;
            }

            body.admin-mode {
              margin: 0;
              font-family: 'Poppins', sans-serif;
              color: var(--text-main);
              background:
                linear-gradient(130deg, rgba(47, 128, 193, 0.09), transparent 38%),
                radial-gradient(circle at 80% -10%, rgba(37, 141, 219, 0.22), transparent 48%),
                var(--bg-main);
              min-height: 100vh;
            }

            /* ===== CSS TAMPILAN PUBLIK ===== */
            #public-view,
            #admin-view {
              transition: opacity 220ms ease, transform 220ms ease;
              will-change: opacity, transform;
            }

            #public-view.view-hidden,
            #admin-view.view-hidden {
              opacity: 0;
              transform: translateY(8px);
              pointer-events: none;
            }

            #public-view.view-visible,
            #admin-view.view-visible {
              opacity: 1;
              transform: translateY(0);
              pointer-events: auto;
            }

            #public-view .page {
              width: 100%;
              max-width: 100%;
              background: #f4f6fa;
              min-height: 100vh;
              min-height: 100dvh;
              box-shadow: none;
              padding-top: env(safe-area-inset-top);
              padding-left: env(safe-area-inset-left);
              padding-right: env(safe-area-inset-right);
              padding-bottom: env(safe-area-inset-bottom);
              overflow-x: hidden;
              overflow-y: auto;
              display: flex;
              flex-direction: column;
            }

            /* ── HEADER ── */
            #public-view .top-banner {
              background: var(--primary);
              color: #fff;
              padding: 0;
              border-bottom: none;
              animation: reveal 0.45s ease-out;
              position: sticky;
              top: 0;
              z-index: 800;
              box-shadow: 0 10px 24px rgba(37, 99, 235, 0.12);
            }

            .banner-inner {
              position: relative;
              display: flex;
              justify-content: flex-start;
              align-items: center;
              gap: 16px;
              padding: 18px 24px;
              text-align: left;
              margin: 0 auto;
              max-width: 1380px;
            }

            .banner-emblem p {
              margin: 0;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .banner-emblem {
              width: 54px;
              height: 54px;
              border-radius: 50%;
              background: transparent;
              display: flex;
              align-items: center;
              justify-content: center;
              font-size: 22px;
              font-weight: 900;
              color: #0b3f80;
              flex-shrink: 0;
              border: none;
              margin: 0 auto;
              transform: translateY(-1px);
            }

            .mobile-menu-toggle {
              display: none;
              width: 44px;
              height: 44px;
              border-radius: 12px;
              border: 1px solid rgba(255, 255, 255, 0.28);
              background: rgba(255, 255, 255, 0.18);
              color: #fff;
              font-size: 18px;
              font-weight: 700;
              align-items: center;
              justify-content: center;
              cursor: pointer;
              transition: background 0.18s ease, transform 0.18s ease;
              flex-shrink: 0;
              -webkit-backdrop-filter: none;
              backdrop-filter: none;
              box-shadow: none;
              pointer-events: auto !important;
              z-index: 970 !important;
            }

            .mobile-menu-toggle:hover {
              background: rgba(255, 255, 255, 0.18);
            }

            .banner-text {
              flex: 1;
              min-width: 0;
              display: flex;
              flex-direction: column;
              align-items: flex-start;
              justify-content: center;
              text-align: left;
            }

            .brand-contact {
              font-size: 11px;
              color: rgba(255, 255, 255, 0.92);
              margin-top: 4px;
              text-transform: none;
              font-weight: 500;
              line-height: 1.4;
              display: flex;
              flex-direction: row;
              align-items: center;
              flex-wrap: wrap;
              gap: 0 6px;
              white-space: nowrap;
            }

            .brand-contact-sep {
              opacity: 0.45;
              flex-shrink: 0;
            }

            .brand-contact-addr,
            .brand-contact-email {
              white-space: nowrap;
            }

            /* Baris alamat & email – huruf kecil, sejajar ke samping */
            .brand-info {
              font-size: 10.5px;
              color: rgba(255, 255, 255, 0.85);
              margin-top: 5px;
              font-weight: 400;
              line-height: 1.3;
              text-transform: none;
              letter-spacing: 0;
              display: flex;
              flex-direction: row;
              align-items: center;
              flex-wrap: wrap;
              gap: 0 7px;
            }

            .brand-info-sep {
              opacity: 0.35;
              flex-shrink: 0;
            }

            .banner-actions {
              position: absolute;
              top: 16px;
              right: 16px;
              margin: 0;
              display: flex;
              gap: 10px;
              flex-wrap: nowrap;
              justify-content: flex-end;
              align-items: center;
            }

            .banner-actions>* {
              margin: 0;
            }

            .admin-access-btn {
              background: transparent !important;
              color: #ffffff !important;
              font-weight: 700;
              padding: 4px 10px;
              font-size: 14px;
              border-radius: 999px;
              text-decoration: none;
              box-shadow: none;
              transition: background 0.18s ease, color 0.18s ease, opacity 0.18s ease;
              display: inline-flex;
              align-items: center;
              justify-content: center;
            }

            .admin-access-btn:hover {
              background: rgba(255, 255, 255, 0.12) !important;
              color: #ffffff !important;
              opacity: 1;
              transform: none;
            }

            .admin-login-modal {
              position: fixed;
              inset: 0;
              display: none;
              align-items: flex-start;
              justify-content: center;
              background: rgba(15, 23, 42, 0.72);
              z-index: 9999;
              padding: 24px;
              padding-top: calc(24px + env(safe-area-inset-top));
              padding-bottom: calc(24px + env(safe-area-inset-bottom));
              padding-left: calc(24px + env(safe-area-inset-left));
              padding-right: calc(24px + env(safe-area-inset-right));
            }

            .admin-login-modal.active {
              display: flex;
            }

            .admin-login-panel {
              width: min(480px, 100%);
              max-width: 100%;
              background: #fff;
              border-radius: 20px;
              box-shadow: 0 28px 80px rgba(15, 23, 42, 0.2);
              padding: 28px;
              text-align: left;
              margin: 0 auto;
              box-sizing: border-box;
              margin-top: 12px;
            }

            .admin-login-panel h2 {
              margin: 0 0 12px;
              font-size: 1.2rem;
              color: #0b3f80;
            }

            .admin-login-message {
              margin: 0 0 18px;
              color: #475569;
              font-size: 0.95rem;
              line-height: 1.5;
            }

            #admin-login-form label {
              display: block;
              margin-bottom: 8px;
              font-weight: 600;
              color: #102a43;
            }

            #admin-login-form input {
              width: 100%;
              padding: 12px 14px;
              border: 1px solid #cbd5e1;
              border-radius: 12px;
              font-size: 0.95rem;
              margin-bottom: 18px;
              box-sizing: border-box;
            }

            .admin-login-actions {
              display: flex;
              gap: 10px;
              flex-wrap: wrap;
              margin-bottom: 12px;
            }

            .admin-login-status {
              margin: 0;
              min-height: 1.2rem;
              font-size: 0.92rem;
              color: #dc2626;
            }

            /* Sembunyikan isi sambutan (kolom tengah) sampai ada klik */
            #sambutan-kepala-sekolah .welcome-text-area {
              display: none;
            }

            #sambutan-kepala-sekolah.expanded .welcome-text-area {
              display: block;
            }

            #sambutan-kepala-sekolah .welcome-title {
              cursor: pointer;
            }

            #public-view .brand-main {
              font-family: 'Poppins', sans-serif;
              font-weight: 700;
              font-size: 20px;
              line-height: 1.15;
              letter-spacing: 0.8px;
              text-transform: uppercase;
              margin: 0;
              color: #fff;
              white-space: nowrap;
            }

            #public-view .brand-sub {
              margin: 3px 0 0;
              font-family: 'Poppins', sans-serif;
              font-weight: 500;
              font-size: 12px;
              line-height: 1;
              text-transform: uppercase;
              letter-spacing: 1.6px;
              color: rgba(255, 255, 255, 0.82);
              white-space: nowrap;
            }

            /* Varian brand-sub tanpa uppercase – untuk alamat & email */
            #public-view .brand-sub.brand-sub-plain {
              text-transform: none;
              letter-spacing: 0.2px;
              font-weight: 400;
              font-size: 11px;
              color: rgba(255, 255, 255, 0.85);
              white-space: normal;
              line-height: 1.5;
              margin-top: 2px;
            }

            /* ── NAV ── */
            #public-view .main-nav {
              background: #111;
              border-top: 1px solid #222;
              border-bottom: none;
              display: flex;
              flex-direction: column;
              align-items: stretch;
              position: sticky;
              top: 0;
              z-index: 500;
              box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
            }

            #public-view .main-nav ul {
              margin: 0;
              padding: 0;
              list-style: none;
              display: flex;
              flex-direction: column;
              width: 100%;
            }

            #public-view .main-nav a {
              display: block;
              padding: 12px 18px;
              color: #111;
              text-decoration: none;
              font-size: 13px;
              font-weight: 600;
              transition: background-color 0.2s ease, color 0.2s;
              border-bottom: 1px solid #f1f5f9;
              background: #fff;
            }

            #public-view .main-nav a:hover {
              background: #f3f4f6;
              color: var(--primary);
            }

            /* Sub-link (item dari sidebar) */
            #public-view .main-nav a.nav-sub {
              padding-left: 28px;
              font-size: 12.5px;
              font-weight: 500;
              color: #111;
              background: #fff;
            }

            #public-view .main-nav a.nav-sub:hover {
              color: var(--primary);
              background: #f3f4f6;
            }

            /* Group label sebagai pemisah section */
            #public-view .main-nav .nav-group-label {
              padding: 10px 18px 6px;
              font-size: 10px;
              font-weight: 800;
              text-transform: uppercase;
              letter-spacing: 1.5px;
              color: #ffd97a;
              background: #222;
              border-bottom: 1px solid #222;
              margin-top: 2px;
            }

            /* Divider garis */
            #public-view .main-nav .nav-divider {
              height: 1px;
              background: #222;
              margin: 4px 0;
            }

            #public-view .main-nav a.admin-link {
              color: #ffd97a;
              font-weight: 700;
            }

            #public-view .main-nav a.admin-link:hover {
              background: rgba(255, 216, 0, 0.12);
            }

            /* ── CONTENT LAYOUT (3 kolom: kiri sempit, tengah utama, kanan sempit) ── */
            #public-view .content {
              display: grid;
              grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) minmax(260px, 320px);
              gap: 18px;
              padding: 18px 24px;
              animation: fade-in 0.5s ease;
              width: 100%;
              max-width: 1380px;
              margin: 0 auto;
              box-sizing: border-box;
              min-width: 0;
              align-items: start;
            }

            /* Sidebar kiri & kanan tampil di desktop */
            #col-sidebar-left,
            #col-sidebar-right,
            #col-main {
              display: flex;
              flex-direction: column;
              gap: 16px;
              overflow-y: auto;
              min-height: 100%;
              align-items: stretch;
              padding: 0 12px;
              box-sizing: border-box;
            }

            /* col-main flex layout di tengah */
            #col-main {
              width: 100%;
              min-width: 0;
              min-height: 100%;
            }

            /* Pastikan semua blok di kolom tengah punya lebar dan padding konsisten */
            #col-main>* {
              width: 100%;
              max-width: 100%;
              margin-left: 0 !important;
              margin-right: 0 !important;
            }

            #col-main>.box,
            #col-main>.welcome,
            #col-main>.hero,
            #col-main>#content-detail,
            #col-main>.section-title {
              padding-left: 0;
              padding-right: 0;
              box-sizing: border-box;
            }

            #col-main .box {
              padding: 0;
            }

            #col-main .box .inner {
              padding: 0;
            }

            /* ── HEADER HORIZONTAL NAVIGATION ── */
            #public-view .header-nav {
              background: #fff;
              border-top: 1px solid var(--border-color);
              display: flex;
              align-items: center;
              justify-content: center;
              overflow: visible;
              box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
              position: sticky;
              top: 0;
              z-index: 1000;
            }

            #public-view .header-nav-list {
              display: flex;
              flex-wrap: nowrap;
              list-style: none;
              margin: 0 auto;
              padding: 0 24px;
              gap: 0;
              width: 100%;
              max-width: 1380px;
              align-items: stretch;
              justify-content: center;
              overflow: visible;
            }

            #public-view .header-nav-item {
              position: relative;
              flex: 0 0 auto;
              overflow: visible;
            }

            #public-view .header-nav-item>a {
              display: flex;
              align-items: center;
              justify-content: center;
              padding: 12px 14px;
              color: #475569;
              text-decoration: none;
              font-size: 13px;
              font-weight: 600;
              text-transform: uppercase;
              letter-spacing: 0.3px;
              white-space: nowrap;
              transition: all var(--transition);
              border-bottom: 2px solid transparent;
              min-height: 44px;
              position: relative;
            }

            #public-view .header-nav-item>a:hover {
              color: var(--primary);
              background: #EFF6FF;
              border-bottom-color: var(--primary-light);
            }

            #public-view .header-nav-item>a.admin-access-btn {
              color: #ffffff;
              border-bottom-color: transparent;
              font-weight: 700;
              font-size: 18px;
              line-height: 1;
              padding: 12px 10px;
              min-width: 24px;
              display: inline-flex;
              align-items: center;
              justify-content: center;
              background: transparent;
              box-shadow: none;
              transform: none;
            }

            #public-view .header-nav-item>a.admin-access-btn:hover {
              background: rgba(255, 255, 255, 0.24);
              border-bottom-color: transparent;
              color: #ffffff;
              transform: none;
            }


            #public-view .header-nav-item.active>a {
              color: var(--primary);
              background: #F8FBFF;
              border-bottom-color: var(--primary);
            }

            #public-view .header-nav-item.has-submenu > a {
              display: inline-flex;
              align-items: center;
              gap: 6px;
            }

            #public-view .header-nav-item.has-submenu > a::after {
              content: "⌄";
              display: inline-flex;
              align-items: center;
              justify-content: center;
              margin-left: 3px;
              font-size: 12px;
              line-height: 1;
              color: inherit;
              transform: translateY(0);
              transition: transform 0.25s ease, color 0.25s ease;
            }

            #public-view .header-nav-item.has-submenu.open > a::after {
              transform: rotate(180deg);
            }

            #public-view .header-nav-item.has-submenu > a:hover::after,
            #public-view .header-nav-item.has-submenu.active > a::after,
            #public-view .header-nav-item.has-submenu.open > a::after {
              color: #ffd97a;
            }

            #public-view .header-nav-item:hover .header-nav-submenu,
            #public-view .header-nav-item:focus-within .header-nav-submenu,
            #public-view .header-nav-item.open .header-nav-submenu {
              display: block !important;
              visibility: visible;
              opacity: 1;
              transform: translateY(0);
              pointer-events: auto;
            }

            #public-view .header-nav-submenu {
              display: none;
              position: absolute;
              top: calc(100% + 4px);
              left: 0;
              min-width: 220px;
              background: #fff;
              border-radius: 14px;
              box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
              padding: 8px 0;
              z-index: 2000;
              overflow: visible;
              opacity: 0;
              transform: translateY(-8px);
              pointer-events: none;
              transition: opacity .28s ease, transform .28s ease, visibility .28s ease;
              visibility: hidden;
              border: 1px solid var(--border-color);
            }

            #public-view .header-nav-submenu a {
              display: block;
              padding: 10px 14px;
              color: #334155;
              text-decoration: none;
              font-size: 13px;
              font-weight: 500;
              white-space: nowrap;
            }

            #public-view .header-nav-submenu a:hover {
              background: #EFF6FF;
              color: var(--primary);
            }

            /* ===== DESKTOP HEADER LAYOUT OVERRIDE (Desktop Only) ===== */
            @media (min-width: 992px) {
              /* Desktop header dengan flexbox: logo di kiri, text di sebelahnya */
              #public-view .top-banner .banner-inner {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: flex-start;
                gap: 20px;
                padding: 30px 40px;
                text-align: left;
              }

              #public-view .banner-emblem {
                width: 80px;
                height: 80px;
                flex-shrink: 0;
                margin: 0;
              }

              #public-view .banner-text {
                display: flex;
                flex-direction: column;
                align-items: flex-start;
                justify-content: center;
                text-align: left;
                width: auto;
                max-width: none;
              }

              #public-view .brand-main {
                margin: 0;
                text-align: left;
                white-space: nowrap;
                font-size: 22px;
              }

              #public-view .brand-sub {
                margin: 4px 0 0;
                text-align: left;
                white-space: nowrap;
                font-size: 13px;
              }

              #public-view .brand-sub.brand-sub-plain {
                text-transform: none;
                font-size: 12px;
                white-space: normal;
                line-height: 1.4;
                margin-top: 2px;
                color: rgba(255, 255, 255, 0.88);
              }

              #public-view .brand-contact {
                display: none;
              }
            }

            /* Desktop: show horizontal menu, search bar, and admin dot */
            @media (min-width: 768px) {
              .nav-hamburger {
                display: none !important;
              }

              #public-view .header-nav {
                display: flex;
                justify-content: center;
              }

              #public-view .header-nav-list {
                justify-content: center;
                width: 100%;
                max-width: 1380px;
              }

              #public-view .header-nav-item {
                position: relative;
                flex: 0 0 auto;
              }

              #public-view .header-nav-item.header-search-item,
              #public-view .header-nav-item > a.admin-access-btn {
                display: flex;
                align-items: center;
              }

              #public-view .header-search-item {
                margin-left: auto;
                padding: 0 8px;
              }

              #public-view .header-search-form {
                min-width: 220px;
                max-width: 320px;
              }

              #public-view .header-nav-item > a.admin-access-btn {
                margin-right: 16px;
              }
            }

            /* Mobile/Tablet: tetap tampilkan menu header secara horizontal dan dapat digulir */
            @media (max-width: 767px) {
              #public-view .header-nav {
                display: flex;
                overflow-x: auto;
                overflow-y: hidden;
                -ms-overflow-style: none;
                scrollbar-width: none;
                -webkit-overflow-scrolling: touch;
                scroll-behavior: smooth;
                scroll-snap-type: x proximity;
                touch-action: pan-x;
                justify-content: flex-start;
                padding: 0 0 0 8px;
              }

              #public-view .header-nav::-webkit-scrollbar {
                display: none;
              }

              #public-view .header-nav-list {
                display: flex;
                justify-content: flex-start;
                overflow-x: auto;
                overflow-y: hidden;
                width: max-content;
                min-width: max-content;
                padding: 0 8px;
                gap: 4px;
                white-space: nowrap;
                scroll-snap-type: x proximity;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior-x: contain;
              }

              #public-view .header-nav-list::-webkit-scrollbar {
                display: none;
              }

              #public-view .header-nav-item {
                flex: 0 0 auto;
                min-width: max-content;
                scroll-snap-align: center;
              }

              #public-view .header-nav-item>a {
                padding: 14px 18px;
                font-size: 13px;
                min-height: 48px;
                border-bottom-width: 3px;
              }

              #public-view .header-nav-item.active>a {
                color: #fff;
                background: rgba(0, 0, 0, 0.26);
                border-bottom-color: #ffd97a;
              }

              #public-view .header-nav-item>a.admin-access-btn {
                display: none;
              }

              .mobile-menu-toggle {
                display: none !important;
              }

              #public-view .header-nav-submenu {
                min-width: 180px;
                max-height: 70vh;
                overflow-y: auto;
              }

              #public-view .header-nav-item>a.admin-access-btn {
                display: flex;
                align-items: center;
              }

              .mobile-menu-toggle {
                display: none !important;
              }
            }

            #public-view .top-banner {
              position: relative;
            }

              .banner-inner {
                flex-direction: column;
                align-items: center;
                justify-content: center;
                text-align: center;
                gap: 8px;
                padding: 10px 16px 12px;
              }

              .banner-emblem {
                width: 72px;
                height: 72px;
                margin: 0 auto;
              }

              .banner-emblem p {
                margin: 0;
              }

              .banner-emblem img {
                width: 100%;
                height: auto;
                display: block;
              }

              .banner-text {
                width: 100%;
                max-width: 100%;
                text-align: center;
                align-items: center;
                justify-content: center;
              }

              .banner-inner {
                width: 100%;
                max-width: 100%;
              }

              .banner-text .brand-main,
              .banner-text .brand-sub {
                margin: 0;
                text-align: center;
                white-space: normal;
                overflow-wrap: break-word;
              }

              .banner-text .brand-contact {
                margin: 0;
                text-align: center;
                justify-content: center;
                flex-wrap: wrap;
                white-space: normal;
                gap: 2px 6px;
              }

              .brand-contact-sep {
                display: none;
              }

              .banner-actions {
                position: absolute;
                top: 12px;
                right: 12px;
                margin: 0;
                display: flex;
                gap: 10px;
                justify-content: flex-end;
                align-items: center;
              }

              .banner-actions>* {
                margin: 0;
              }

              .admin-access-btn {
                white-space: nowrap;
              }

              #public-view #main-nav-ul {
                display: none;
              }

              #public-view #main-nav.nav-open #main-nav-ul {
                display: flex;
              }

              @media (max-width: 767px) {
                #public-view .content {
                  grid-template-columns: 1fr;
                  display: flex;
                  flex-direction: column;
                }

                #public-view #col-sidebar-left {
                  display: none;
                  flex-direction: column;
                  gap: 12px;
                  padding: 0;
                  order: -1;
                }

                #public-view #col-main {
                  display: flex;
                  flex-direction: column;
                  order: 0;
                }

                #public-view #col-sidebar-right {
                  display: flex;
                  flex-direction: column;
                  gap: 12px;
                  padding: 0;
                  order: 1;
                  width: 100%;
                  max-width: 100%;
                }

                #public-view:not(.mobile-menu-open) #col-sidebar-left {
                  display: none !important;
                }

                #public-view:not(.mobile-menu-open) #col-sidebar-right {
                  display: flex !important;
                }

                #public-view .close-sidebar-btn {
                  display: none !important;
                }

                #public-view.mobile-menu-open .close-sidebar-btn {
                  display: none !important;
                }
              }

              @media (min-width: 768px) {
                #public-view.mobile-menu-open .close-sidebar-btn {
                  display: flex !important;
                  position: fixed;
                  top: 18px;
                  right: 18px;
                  width: 40px;
                  height: 40px;
                  align-items: center;
                  justify-content: center;
                  border: none;
                  border-radius: 50%;
                  background: rgba(0, 0, 0, 0.65);
                  color: white;
                  font-size: 18px;
                  cursor: pointer;
                  z-index: 960;
                }
              }

              #public-view.mobile-menu-open .banner-inner {
                opacity: 1;
                pointer-events: auto;
              }

              #public-view.mobile-menu-open .banner-inner>*:not(.mobile-menu-toggle) {
                pointer-events: none;
                opacity: 0.3;
              }

              #public-view.mobile-menu-open #col-main {
                display: none !important;
              }

              #public-view.mobile-menu-open #col-sidebar-right {
                display: flex !important;
                flex-direction: column;
                position: static;
                width: 100%;
                height: auto;
                top: auto;
                bottom: auto;
                left: auto;
                right: auto;
                background: transparent;
                padding: 0;
                z-index: auto;
                box-shadow: none;
                order: 1;
              }

              #public-view.mobile-menu-open #col-sidebar-right .sidebar-section {
                order: 1;
              }

              #public-view.mobile-menu-open #col-sidebar-right .sidebar-section:first-child {
                order: 0;
              }

              #public-view.mobile-menu-open .content {
                grid-template-columns: 1fr;
                padding: 12px;
                gap: 12px;
                max-width: 100%;
                display: flex;
                flex-direction: column;
              }

              #public-view.mobile-menu-open #col-sidebar-left {
                order: 0;
                display: flex !important;
                position: static;
                width: 100%;
                height: auto;
                top: auto;
                bottom: auto;
                left: auto;
                right: auto;
                background: transparent;
                padding: 0;
                z-index: auto;
                box-shadow: none;
                overflow: visible;
              }

              #public-view.mobile-menu-open .sidebar-section {
                margin: 0 0 12px;
                background: #fff;
                border: 1px solid rgba(11, 63, 128, 0.12);
                border-radius: 10px;
                padding: 12px;
              }

              #public-view.mobile-menu-open .sidebar-menu-list {
                display: block;
                list-style: none;
                padding: 0;
                margin: 0;
              }

              #public-view.mobile-menu-open .sidebar-menu-list li {
                border: none;
                padding: 0;
              }

              #public-view.mobile-menu-open .sidebar-menu-list li a {
                display: block;
                padding: 10px 12px;
                color: #0b3f80;
                text-decoration: none;
                font-size: 14px;
                font-weight: 500;
                border-bottom: 1px solid rgba(11, 63, 128, 0.08);
                transition: background 0.2s ease;
              }

              #public-view.mobile-menu-open .sidebar-menu-list li a:hover {
                background: rgba(11, 63, 128, 0.06);
              }

              #public-view.mobile-menu-open .sidebar-menu-list li:last-child a {
                border-bottom: none;
              }

              #public-view.mobile-menu-open .sidebar-section-title {
                cursor: pointer;
                -webkit-user-select: none;
                user-select: none;
                font-weight: 700;
                color: #0b3f80;
                margin: -12px -12px 8px -12px;
                padding: 12px;
                display: flex;
                justify-content: space-between;
                align-items: center;
                background: linear-gradient(90deg, #0b3f80, #1461b8);
                color: #fff;
                border-radius: 8px 8px 0 0;
              }

              #public-view.mobile-menu-open .sidebar-section-title .toggle-icon {
                display: inline;
                transition: transform 0.2s ease;
              }

              #public-view.mobile-menu-open .sidebar-section-title.collapsed .toggle-icon {
                transform: rotate(-90deg);
              }

              #public-view.mobile-menu-open .sidebar-menu-list.collapsed {
                display: none;
              }

              /* Styling untuk sidebar right (Berita) di mobile */
              #public-view.mobile-menu-open #col-sidebar-right .sidebar-section {
                margin: 0 0 12px;
                background: #fff;
                border: 1px solid rgba(11, 63, 128, 0.12);
                border-radius: 10px;
                padding: 12px;
              }

              #public-view.mobile-menu-open #col-sidebar-right .box {
                margin-bottom: 12px;
              }

            /* ── CARD BOX ── */
            #public-view .box {
              background: #fff;
              border: 1px solid var(--border-color);
              border-radius: 16px;
              margin-bottom: 14px;
              box-shadow: var(--shadow);
              overflow: hidden;
            }

            #public-view .box h3 {
              margin: 0;
              font-size: 13px;
              padding: 12px 14px;
              color: var(--primary-dark);
              background: #F8FBFF;
              font-weight: 700;
              letter-spacing: 0.3px;
              text-transform: uppercase;
              display: flex;
              align-items: center;
              gap: 7px;
              border-bottom: 1px solid var(--border-color);
            }

            /* Pastikan label judul di kolom kanan tetap putih */
            #public-view #col-sidebar-right .box h3 {
              color: #fff;
            }

            #public-view .box .inner {
              padding: 14px 18px;
              font-size: 16px;
            }

            /* ── MENU LIST ── */
            #public-view .menu-list {
              list-style: none;
              margin: 0;
              padding: 0;
            }

            #public-view .menu-list li {
              padding: 0;
              border-bottom: 1px solid #f0f2f5;
            }

            #public-view .menu-list li:last-child {
              border-bottom: none;
            }

            #public-view .menu-list li span {
              display: flex;
              align-items: center;
              padding: 14px 8px;
              font-size: 15px;
              gap: 10px;
              transition: color 0.15s;
            }

            /* #public-view .menu-list li span::before { content: ''; }  Removed icon */

            /* ── SIDEBAR LEFT MENU ── */
            #public-view #col-sidebar-left {
              display: flex;
              flex-direction: column;
              gap: 12px;
            }

            #public-view .sidebar-section {
              background: #fff;
              border-radius: 16px;
              overflow: hidden;
              box-shadow: var(--shadow);
              border: 1px solid var(--border-color);
            }

            @media (min-width: 900px) {
              #public-view #col-sidebar-left .sidebar-section {
                margin-left: -10px;
              }

              #public-view #col-sidebar-right .sidebar-section {
                margin-right: -10px;
              }
            }

            #public-view .sidebar-section-title {
              background: linear-gradient(90deg, #EFF6FF 0%, #F8FBFF 100%);
              color: var(--primary-dark);
              padding: 12px 14px;
              font-size: 13px;
              font-weight: 700;
              text-transform: uppercase;
              letter-spacing: 0.3px;
              margin: 0;
              cursor: pointer;
              display: flex;
              justify-content: space-between;
              align-items: center;
              -webkit-user-select: none;
              user-select: none;
              border-bottom: 1px solid var(--border-color);
            }

            #public-view .sidebar-section-title:hover {
              background: #F0F7FF;
            }

            #public-view .sidebar-section-title,
            #public-view .sidebar-menu-list li a,
            #public-view .news-item strong,
            #public-view .news-dropdown-title,
            #public-view .announcement-item .ann-judul,
            #public-view .agenda-item .agd-judul,
            #public-view .announcement-dropdown-title,
            #public-view .agenda-dropdown-title {
              font-size: 13px;
            }

            #public-view .sidebar-section-title .toggle-icon {
              font-size: 14px;
              transition: transform 0.3s ease;
            }

            #public-view .sidebar-section-title.collapsed .toggle-icon {
              transform: rotate(-90deg);
            }

            /* Ensure toggle icon rotates smoothly on expand/collapse */
            #public-view .sidebar-section-title .toggle-icon {
              display: inline-block;
              transform-origin: center;
            }

            /* Visi & Misi auto-hide styles */
            #visi-misi-section.visimisi-initial {
              transition: max-height 0.45s ease, opacity 0.35s ease, padding 0.35s ease, margin 0.35s ease;
              overflow: hidden;
              max-height: 1000px;
              opacity: 1;
            }

            #visi-misi-section.auto-hidden {
              max-height: 0 !important;
              opacity: 0 !important;
              padding-top: 0 !important;
              padding-bottom: 0 !important;
              margin-top: 0 !important;
              margin-bottom: 0 !important;
              pointer-events: none;
            }

            #public-view .sidebar-menu-list {
              list-style: none;
              margin: 0;
              padding: 0;
              max-height: 1000px;
              overflow: hidden;
              transition: max-height 0.3s ease;
            }

            #public-view .sidebar-menu-list.collapsed {
              max-height: 0;
            }

            #public-view .sidebar-submenu {
              display: grid;
              gap: 10px;
              margin: 0 0 14px;
              padding: 0;
            }

            #public-view .sidebar-submenu li a {
              display: block;
              padding: 12px 14px;
              border-radius: 14px;
              background: #ffffff;
              color: #0b3f80;
              text-decoration: none;
              border: 1px solid rgba(11, 63, 128, 0.12);
              box-shadow: 0 10px 24px rgba(11, 63, 128, 0.08);
              transition: transform 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease;
              font-weight: 600;
            }

            #public-view .sidebar-submenu li a:hover,
            #public-view .sidebar-submenu li a:focus-visible {
              background: #f3f6fb;
              transform: translateY(-1px);
              box-shadow: 0 12px 26px rgba(11, 63, 128, 0.12);
            }

            #public-view .sidebar-submenu li a:focus-visible {
              outline: 2px solid #0b3f80;
              outline-offset: 2px;
            }

            /* Generic inner container (used by right sidebar) */
            #public-view .inner {
              max-height: 1000px;
              overflow: hidden;
              transition: max-height 0.28s ease;
              padding: 12px 14px;
              box-sizing: border-box;
              background: #fff;
            }

            #public-view .inner.collapsed {
              max-height: 0;
              padding-top: 0;
              padding-bottom: 0;
            }

            /* Calendar styling */
            .calendar-table td,
            .calendar-table th {
              padding: 4px 3px;
              border: 0;
              font-size: 12px;
            }

            .calendar-table tbody td {
              height: 30px;
            }

            /* Social links */
            #social-list .nav-link {
              display: inline-flex;
              gap: 8px;
              align-items: center;
              padding: 8px 10px;
              border-radius: 6px;
              color: #0b3f80;
              text-decoration: none;
              background: #f8fbff;
              font-size: 13px;
            }

            #social-list .nav-link:hover {
              background: #eef6ff;
            }

            /* ----------------- Responsive adjustments ----------------- */
            /* General fluid typography */
            html {
              font-size: 16px;
            }

            @media (max-width: 1200px) {
              html {
                font-size: 15px;
              }
            }

            /* Removed responsive rules for main announcement component (moved to sidebar) */

            /* Layout grid adjustments */
            @media (max-width: 1100px) {
              #public-view .content {
                grid-template-columns: minmax(180px, 220px) minmax(0, 1fr) minmax(180px, 220px);
                gap: 14px;
                padding: 12px;
              }
            }

            /* Stack into single column on small screens */
            @media (max-width: 880px) {
              #public-view .content {
                display: block;
                padding: 10px;
              }

              #col-sidebar-left,
              #col-sidebar-right {
                width: 100%;
                padding: 8px 6px;
                box-sizing: border-box;
              }

              #col-main {
                padding: 6px 0;
              }

              /* hide sidebars by default on small screens, toggled via class */
              #col-sidebar-left,
              #col-sidebar-right {
                display: none;
              }

              body.show-sidebars #col-sidebar-left,
              body.show-sidebars #col-sidebar-right {
                display: block;
              }

              /* make content panels full width */
              .box,
              .content-panel,
              .calendar-table {
                width: 100%;
              }
            }

            /* Mobile: ensure touch targets and spacing */
            @media (max-width: 480px) {
              .sidebar-section-title {
                padding: 14px 12px;
                font-size: 13px;
              }

              .sidebar-menu-list li a,
              .nav-link {
                padding: 12px 14px;
                font-size: 15px;
              }

              .calendar-table td,
              .calendar-table th {
                padding: 8px 6px;
                font-size: 12px;
              }

              .hero-caption-wrap {
                padding: 8px;
              }
            }

            @media (max-width: 900px) {
              body {
                padding: 0 0.15rem;
              }

              .banner-inner {
                padding: 10px 12px;
                gap: 10px;
              }

              .banner-actions {
                position: static;
                width: 100%;
                justify-content: flex-start;
                margin-top: 4px;
              }

              .hero-slider {
                min-height: 180px;
              }

              .box,
              .content-panel,
              .card {
                border-radius: 10px;
              }

              .page,
              .content {
                padding-left: 6px;
                padding-right: 6px;
              }
            }

            @media (max-width: 640px) {
              body {
                padding: 0;
              }

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

              .hero-caption-wrap {
                padding: 8px;
              }

              .sidebar-menu-list li a {
                padding: 10px 12px;
                font-size: 14px;
              }

              .mobile-menu-toggle {
                width: 42px;
                height: 42px;
                font-size: 16px;
              }

              .btn,
              .back-home-btn {
                padding: 8px 12px;
                font-size: 12px;
              }
            }

            @media (max-width: 480px) {

              .page,
              .content {
                padding-left: 4px;
                padding-right: 4px;
              }

              .news-ticker {
                height: 36px;
              }

              .news-ticker .ticker-label {
                font-size: 10px;
                padding: 0 8px;
              }

              .preview-table {
                min-width: 640px;
              }

              .preview-table .btn-toggle-status,
              .preview-table .btn-edit,
              .preview-table .btn-delete {
                display: block;
                width: 100%;
                margin: 2px 0;
                text-align: center;
              }
            }

            /* Make calendar responsive with horizontal scroll when narrow */
            #calendar-widget {
              overflow-x: auto;
              -webkit-overflow-scrolling: touch;
            }

            #calendar-widget .calendar-header {
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              align-items: center;
              gap: 8px;
              margin-bottom: 8px;
            }

            #calendar-widget .calendar-header button {
              flex: 0 0 auto;
              min-width: 36px;
              padding: 8px 10px;
              border: 1px solid rgba(0, 0, 0, 0.12);
              border-radius: 8px;
              background: #fff;
              color: #0b3f80;
              cursor: pointer;
            }

            #calendar-widget .calendar-table {
              width: 100%;
              min-width: 280px;
              border-collapse: collapse;
            }

            #calendar-widget .calendar-table th,
            #calendar-widget .calendar-table td {
              white-space: nowrap;
            }

            /* Small visual polish for collapsed sections on narrow screens */
            @media (max-width: 880px) {
              #public-view .sidebar-section {
                box-shadow: none;
                border-radius: 8px;
              }
            }

            #public-view .sidebar-menu-list li {
              border-bottom: 1px solid #f0f2f5;
            }

            #public-view .sidebar-menu-list li:last-child {
              border-bottom: none;
            }

            #public-view .sidebar-menu-list li a {
              display: block;
              padding: 11px 14px;
              color: #475569;
              text-decoration: none;
              font-size: 13px;
              line-height: 1.4;
              transition: all 0.24s ease;
              border-left: 3px solid transparent;
              border-radius: 10px;
              margin: 4px 8px;
            }

            #public-view .sidebar-menu-list li a:hover {
              background: #EFF6FF;
              color: var(--primary);
              border-left-color: var(--primary-light);
              padding-left: 16px;
            }

            #public-view .sidebar-menu-list li a.active,
            #public-view .sidebar-menu-list li.active > a {
              background: #EFF6FF;
              color: var(--primary);
              border-left-color: var(--primary);
              font-weight: 600;
              padding-left: 16px;
            }

            /* ── NEWS ITEM / DROPDOWN ── */
            #public-view .news-item {
              display: flex;
              gap: 10px;
              padding: 10px 0;
              border-bottom: 1px solid #f0f2f5;
              align-items: flex-start;
            }

            #public-view .news-item:last-child {
              border-bottom: none;
            }

            #public-view .news-dropdown-item {
              border-bottom: 1px solid #f0f2f5;
            }

            #public-view .news-dropdown-item:last-child {
              border-bottom: 1px solid #f0f2f5;
            }

            #public-view .news-dropdown-toggle {
              width: 100%;
              border: none;
              background: transparent;
              padding: 10px 0;
              display: flex;
              align-items: flex-start;
              justify-content: space-between;
              gap: 8px;
              cursor: pointer;
              text-align: left;
            }

            #public-view .news-dropdown-title {
              font-size: 13px;
              line-height: 1.35;
              color: #1a2b3c;
              font-weight: 600;
              flex: 1;
            }

            #public-view .news-dropdown-preview {
              margin: 6px 0 0;
              color: #6c757d;
              font-size: 14px;
              line-height: 1.5;
              overflow: hidden;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              line-clamp: 3;
              -webkit-box-orient: vertical;
            }


            #public-view .news-dropdown-icon {
              color: #0b3f80;
              font-size: 12px;
              transition: transform 0.2s ease;
              flex-shrink: 0;
              margin-top: 2px;
            }

            #public-view .news-dropdown-item.open .news-dropdown-icon {
              transform: rotate(180deg);
            }

            #public-view .news-dropdown-panel {
              display: none;
              padding: 0 0 10px;
            }

            #public-view .news-dropdown-item.open .news-dropdown-panel {
              display: block;
            }

            #public-view .news-dropdown-panel small {
              display: block;
              color: #8a9ab0;
              font-size: 11px;
              margin-bottom: 6px;
            }

            #public-view .news-dropdown-panel p {
              margin: 0 0 8px;
              font-size: 12px;
              line-height: 1.5;
              color: #4b5563;
            }

            #public-view .news-dropdown-panel a {
              color: #0b3f80;
              font-size: 12px;
              font-weight: 700;
              text-decoration: none;
            }

            #public-view .thumb {
              width: 52px;
              height: 44px;
              flex-shrink: 0;
              background: linear-gradient(135deg, #1461b8, #0b3f80);
              border-radius: 7px;
              display: none;
              /* disembunyikan sampai ada gambar */
              align-items: center;
              justify-content: center;
              color: rgba(255, 255, 255, 0.5);
              font-size: 20px;
              background-size: cover;
              background-position: center;
            }

            /* #public-view .thumb::after { content: ''; }  Removed icon */

            #public-view .news-item strong {
              font-size: 13px;
              display: block;
              line-height: 1.35;
              margin-bottom: 3px;
              color: #1a2b3c;
              font-weight: 600;
            }

            #public-view .news-item small {
              color: #8a9ab0;
              font-size: 12px;
            }

            /* ── HERO (wrapper) ── */
            #public-view .hero {
              background: #fff;
              position: relative;
              overflow: hidden;
              border-radius: 0;
              margin: 0;
            }

            /* ── SECTION TITLE ── */
            #public-view .section-title {
              margin: 18px 0 10px;
              background: transparent;
              color: #0b3f80;
              padding: 0 2px;
              font-size: 18px;
              display: flex;
              justify-content: space-between;
              align-items: center;
              font-weight: 800;
              text-transform: uppercase;
              letter-spacing: 0.4px;
              border-left: 4px solid #ffd97a;
              padding-left: 12px;
            }

            #public-view .section-title a {
              color: #1461b8;
              text-decoration: none;
              font-size: 14px;
              text-transform: none;
              font-weight: 600;
              letter-spacing: 0;
              background: #eaf2ff;
              padding: 5px 14px;
              border-radius: 20px;
            }

            #public-view .section-title a:hover {
              background: #d0e5ff;
            }

            /* ── SAMBUTAN / WELCOME ── */
            #public-view .welcome {
              background: #fff;
              border: none;
              border-radius: 12px;
              padding: 18px;
              display: flex;
              flex-direction: column;
              align-items: center;
              box-shadow: 0 2px 12px rgba(11, 63, 128, 0.09);
              max-width: 700px;
              width: 100%;
              margin-left: auto;
              margin-right: auto;
              margin-bottom: 12px;
              box-sizing: border-box;
            }

            @media (max-width: 600px) {
              #public-view .welcome {
                padding: 12px;
                max-width: 98vw;
              }

              #public-view .principal {
                margin: 0 auto;
              }
            }

            #public-view .principal {
              background: linear-gradient(145deg, #dde5f0, #c5d2e3);
              border-radius: 10px;
              border: 2px solid #b8c9dc;
              overflow: hidden;
              aspect-ratio: 3/4;
              width: 90px;
              min-width: 60px;
              max-width: 120px;
              height: auto;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            /* #public-view .principal::before { content: ''; }  Removed icon */
            @media (max-width: 640px) {
              #public-view .principal {
                width: 60px;
                max-width: 80px;
                min-width: 40px;
              }

              #public-view .welcome {
                max-width: 100vw;
                padding-left: 2vw;
                padding-right: 2vw;
              }
            }

            #public-view .welcome-text-area {
              display: flex;
              flex-direction: column;
            }

            #public-view .welcome-salam {
              font-size: 15px;
              font-weight: 700;
              color: #0b3f80;
              margin: 0 0 8px;
            }

            #public-view .welcome p {
              margin: 0 0 10px;
              line-height: 1.7;
              font-size: 16px;
              color: #3a4a5c;
            }

            #public-view .more-link {
              display: inline-flex;
              align-items: center;
              gap: 4px;
              color: #fff;
              background: linear-gradient(90deg, #0b3f80, #1461b8);
              text-decoration: none;
              font-weight: 600;
              font-size: 12px;
              padding: 6px 14px;
              border-radius: 20px;
              margin-top: auto;
              width: fit-content;
            }

            #public-view .more-link:hover {
              background: linear-gradient(90deg, #1461b8, #0b3f80);
            }

            #public-view .home-banner {
              margin: 16px 0 0;
              padding: 0;
              display: none;
              position: relative;
              background-size: cover;
              background-position: center;
              overflow: hidden;
            }

            #public-view .home-banner::before {
              content: "";
              position: absolute;
              inset: 0;
              background: linear-gradient(90deg, rgba(11, 63, 128, 0.92), rgba(20, 97, 184, 0.84));
              pointer-events: none;
            }

            #public-view .home-banner-inner {
              position: relative;
              background: transparent;
              color: #fff;
              border-radius: 14px;
              padding: 40px 16px;
              box-shadow: 0 10px 24px rgba(11, 63, 128, 0.14);
              min-height: 160px;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
            }

            #public-view .home-banner-title-center {
              margin: 0;
              font-size: 1.25rem;
              font-weight: 700;
              line-height: 1.2;
              text-align: center;
              color: #FFB81C;
              text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
              font-family: 'Poppins', sans-serif;
              letter-spacing: 1px;
              text-transform: uppercase;
            }

            #public-view .home-banner-label {
              display: inline-block;
              background: rgba(255, 255, 255, 0.16);
              color: #ffffff;
              padding: 4px 10px;
              border-radius: 999px;
              font-size: 26px;
              font-weight: 800;
              letter-spacing: 0.6px;
              text-transform: uppercase;
              margin-bottom: 8px;
            }

            #public-view .home-banner-title {
              margin: 0 0 6px;
              font-size: 15px;
              font-weight: 800;
              line-height: 1.35;
              cursor: pointer;
              text-decoration: underline;
              text-decoration-color: rgba(255, 255, 255, 0.60);
              transition: text-decoration-color 0.2s ease, color 0.2s ease;
            }

            #public-view .home-banner-title:hover,
            #public-view .home-banner-title:focus {
              color: #fef9c3;
              text-decoration-color: rgba(255, 255, 255, 0.95);
              outline: none;
            }

            #public-view .home-banner-text {
              margin: 0;
              font-size: 13px;
              line-height: 1.55;
              color: rgba(255, 255, 255, 0.94);
            }

            #public-view .home-news-section {
              margin: 16px 0 0;
              background: #fff;
              border-radius: 14px;
              box-shadow: 0 8px 22px rgba(11, 63, 128, 0.08);
              overflow: hidden;
            }

            #public-view .home-news-section-header {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 14px 16px;
              border-bottom: 1px solid #e8eef5;
              background: linear-gradient(90deg, #f7fbff, #eef5fb);
            }

            #public-view .home-news-section-header h3 {
              margin: 0;
              font-size: 15px;
              color: #0b3f80;
              font-weight: 800;
              text-transform: uppercase;
              letter-spacing: 0.4px;
            }

            #public-view .home-news-section-header a {
              color: #1461b8;
              font-size: 12px;
              font-weight: 700;
              text-decoration: none;
            }

            #public-view .home-news-section .news-dropdown-item {
              padding: 0 16px 16px;
              border-bottom: 1px solid #eef5fb;
            }

            #public-view .home-news-section .news-dropdown-item:last-child {
              border-bottom: 1px solid #eef5fb;
            }

            #public-view .home-news-section .news-thumbnail {
              height: 260px;
              margin: 14px 0 8px;
              border-radius: 14px;
              background-color: #f1f5f9;
              background-size: cover;
              background-position: center;
            }

            #public-view .home-news-section .news-dropdown-toggle {
              padding: 12px 0;
            }

            #public-view .home-news-section .news-dropdown-title {
              display: block;
              font-size: 14px;
              color: #0f3261;
            }

            /* Sembunyikan kategori pada daftar "Berita Terbaru" di sisi kanan */
            #public-view .home-news-section .news-dropdown-category {
              display: none;
            }

            /* Sembunyikan tanggal pada daftar "Berita Terbaru" di sisi kanan */
            #public-view .home-news-section .news-dropdown-date {
              display: none;
            }

            #public-view .sheet-status {
              margin-top: 6px;
              color: #8a9ab0;
              font-size: 11px;
            }


            /* Card Header dengan Icon */
            #public-view .home-announcement-card-header {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 12px;
              margin-bottom: 12px;
              text-align: center;
            }

            #public-view .home-announcement-card-icon {
              font-size: 24px;
              flex-shrink: 0;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            /* Card Title */
            #public-view .home-announcement-card-title {
              margin: 0;
              font-size: 15px;
              font-weight: 700;
              color: #0f3261;
              line-height: 1.4;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
              flex: 1;
              text-align: center;
            }

            /* Card Date */
            #public-view .home-announcement-card-date {
              display: flex;
              align-items: center;
              justify-content: center;
              gap: 6px;
              font-size: 12px;
              color: #6b7280;
              margin: 8px 0 10px;
            }

            #public-view .home-announcement-card-date-icon {
              font-size: 13px;
              color: #9ca3af;
            }

            /* Card Summary / Content */
            #public-view .home-announcement-card-summary {
              margin: 10px 0;
              font-size: 13px;
              color: #4b5563;
              line-height: 1.5;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              -webkit-box-orient: vertical;
              overflow: hidden;
              text-align: center;
            }

            /* Card Button */
            #public-view .home-announcement-card-button {
              margin-top: 12px;
              padding: 8px 12px;
              background: linear-gradient(135deg, #1e5aa8 0%, #0f4a8f 100%);
              color: #ffffff;
              border: none;
              border-radius: 8px;
              font-size: 12px;
              font-weight: 600;
              cursor: pointer;
              transition: all 0.3s ease;
              text-align: center;
              align-self: center;
            }

            #public-view .home-announcement-card-button:hover {
              background: linear-gradient(135deg, #0f4a8f 0%, #072d5c 100%);
              transform: translateX(2px);
            }

            #public-view .home-announcement-card-button:active {
              transform: translateX(0);
            }

            /* View All Button Wrapper */
            #public-view .home-announcement-view-all-wrap {
              display: flex;
              justify-content: center;
              margin-top: 16px;
              padding-top: 16px;
              border-top: 1px solid #e8eef5;
            }

            #public-view .home-announcement-view-all-button {
              padding: 10px 28px;
              background: #1461b8;
              color: #ffffff;
              border: none;
              border-radius: 8px;
              font-size: 13px;
              font-weight: 600;
              cursor: pointer;
              transition: all 0.3s ease;
            }

            #public-view .home-announcement-view-all-button:hover {
              background: #0f4a8f;
              transform: translateY(-2px);
              box-shadow: 0 8px 16px rgba(15, 74, 143, 0.25);
            }

            #public-view .home-announcement-view-all-button:active {
              transform: translateY(0);
            }

            /* ── PENGUMUMAN & AGENDA ── */
            #public-view .announcement-item,
            #public-view .agenda-item {
              display: flex;
              gap: 10px;
              align-items: flex-start;
              padding: 10px 0;
              border-bottom: 1px solid #f0f2f5;
              font-size: 13px;
            }

            #public-view .announcement-item .ann-content,
            #public-view .agenda-item .agd-content {
              flex: 1;
              min-width: 0;
            }

            #public-view .announcement-item:last-child,
            #public-view .agenda-item:last-child {
              border-bottom: none;
            }

            #public-view .announcement-dropdown-item,
            #public-view .agenda-dropdown-item {
              border-bottom: 1px solid #f0f2f5;
            }

            #public-view .announcement-dropdown-item:last-child,
            #public-view .agenda-dropdown-item:last-child {
              border-bottom: 1px solid #f0f2f5;
            }

            #public-view .announcement-dropdown-toggle,
            #public-view .agenda-dropdown-toggle {
              width: 100%;
              border: none;
              background: transparent;
              padding: 10px 0;
              display: flex;
              align-items: flex-start;
              justify-content: space-between;
              gap: 8px;
              cursor: pointer;
              text-align: left;
              transition: background-color 0.2s ease, transform 0.2s ease;
            }

            #public-view .announcement-dropdown-toggle:hover,
            #public-view .agenda-dropdown-toggle:hover {
              background: rgba(11, 63, 128, 0.03);
              transform: translateX(2px);
            }

            #public-view .announcement-dropdown-title,
            #public-view .agenda-dropdown-title {
              font-size: 13px;
              line-height: 1.35;
              color: #1a2b3c;
              font-weight: 600;
              flex: 1;
            }

            #public-view .announcement-dropdown-icon,
            #public-view .agenda-dropdown-icon {
              color: #0b3f80;
              font-size: 12px;
              transition: transform 0.2s ease;
              flex-shrink: 0;
              margin-top: 2px;
            }

            #public-view .announcement-dropdown-item.open .announcement-dropdown-icon,
            #public-view .agenda-dropdown-item.open .agenda-dropdown-icon {
              transform: rotate(180deg);
            }

            #public-view .announcement-dropdown-panel,
            #public-view .agenda-dropdown-panel {
              display: block;
              max-height: 0;
              overflow: hidden;
              padding: 0 0 0;
              opacity: 0;
              transform: translateY(-4px);
              transition: max-height 0.32s ease, opacity 0.28s ease, padding 0.28s ease, transform 0.28s ease;
            }

            #public-view .announcement-dropdown-item.open .announcement-dropdown-panel,
            #public-view .agenda-dropdown-item.open .agenda-dropdown-panel {
              max-height: 220px;
              padding: 0 0 10px;
              opacity: 1;
              transform: translateY(0);
            }

            #public-view .announcement-dropdown-panel small,
            #public-view .agenda-dropdown-panel small {
              display: block;
              color: #8a9ab0;
              font-size: 11px;
              margin-bottom: 6px;
            }

            #public-view .announcement-dropdown-panel p,
            #public-view .agenda-dropdown-panel p {
              margin: 0 0 8px;
              font-size: 12px;
              line-height: 1.5;
              color: #4b5563;
            }

            #public-view .announcement-dropdown-panel a,
            #public-view .agenda-dropdown-panel a {
              color: #0b3f80;
              font-size: 12px;
              font-weight: 700;
              text-decoration: none;
            }

            .ann-date-badge,
            .agd-date-badge {
              flex-shrink: 0;
              background: linear-gradient(135deg, #0b3f80, #1461b8);
              color: #ffd97a;
              border-radius: 8px;
              width: 42px;
              text-align: center;
              padding: 4px 2px;
              font-size: 10px;
              font-weight: 800;
              line-height: 1.3;
            }

            .ann-date-badge.badge-empty,
            .agd-date-badge.badge-empty {
              display: none !important;
            }

            #public-view .announcement-item .ann-judul,
            #public-view .agenda-item .agd-judul {
              display: block;
              font-weight: 600;
              color: #1a2b3c;
              cursor: pointer;
              line-height: 1.35;
              font-size: 13px;
            }

            #public-view .announcement-item .ann-judul:hover,
            #public-view .agenda-item .agd-judul:hover {
              color: var(--blue-700);
              text-decoration: underline;
            }

            #public-view .announcement-item small,
            #public-view .agenda-item small {
              color: #8a9ab0;
              font-size: 11px;
              display: none;
            }

            /* ── POLL ── */
            #public-view .poll label {
              display: flex;
              align-items: center;
              gap: 8px;
              margin: 7px 0;
              font-size: 13px;
              cursor: pointer;
            }

            #public-view .poll-actions {
              display: grid;
              grid-template-columns: 1fr 1fr;
              gap: 8px;
              margin-top: 10px;
            }

            #public-view .poll button {
              border: none;
              border-radius: 8px;
              padding: 12px 10px;
              font-weight: 700;
              font-size: 15px;
              cursor: pointer;
              transition: opacity 0.2s;
            }

            #public-view .poll button:first-child {
              background: #0b3f80;
              color: #ffd97a;
            }

            #public-view .poll button:last-child {
              background: #f0f2f5;
              color: #0b3f80;
            }

            #public-view .poll button:hover {
              opacity: 0.85;
            }

            /* ── FOOTER HALAMAN PUBLIK ── */
            .public-footer {
              background: linear-gradient(135deg, #0d4d98, #082f60);
              color: rgba(255, 255, 255, 0.85);
              text-align: center;
              padding: 24px 16px 20px;
              font-size: 12px;
              line-height: 1.7;
              margin-top: auto;
              width: 100%;
              border-top: 1px solid rgba(255, 255, 255, 0.12);
            }

            .public-footer .footer-kontak {
              display: flex;
              flex-direction: column;
              gap: 4px;
              align-items: center;
              justify-content: center;
              margin-bottom: 8px;
            }

            .public-footer strong {
              color: #ffd97a;
              display: block;
              margin-bottom: 4px;
              font-size: 13px;
            }

            .public-footer a {
              color: rgba(255, 255, 255, 0.55);
              text-decoration: none;
            }

            /* ── DETAIL KONTEN ── */
            #content-detail {
              padding: 14px 12px;
              animation: fade-in 0.3s ease;
              display: none;
              margin: 16px 0 20px;
              width: 100%;
              max-width: 100%;
              box-sizing: border-box;
            }

            #main-content {
              position: relative;
            }

            #main-content-loader {
              position: absolute;
              inset: 0;
              z-index: 20;
              display: flex;
              align-items: center;
              justify-content: center;
              background: rgba(255,255,255,0.88);
              opacity: 0;
              visibility: hidden;
              transition: opacity 0.25s ease, visibility 0.25s ease;
              pointer-events: none;
            }

            #main-content-loader.visible {
              opacity: 1;
              visibility: visible;
              pointer-events: auto;
            }

            #main-content-loader .main-content-loader-panel {
              display: flex;
              flex-direction: column;
              align-items: center;
              gap: 12px;
              padding: 18px 22px;
              border-radius: 16px;
              background: rgba(255,255,255,0.95);
              box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
              color: #0f4a8f;
              text-align: center;
            }

            #main-content-loader .main-content-spinner {
              width: 44px;
              height: 44px;
              border: 5px solid rgba(15, 64, 175, 0.16);
              border-top-color: var(--primary);
              border-radius: 50%;
              animation: spin 0.9s linear infinite;
            }

            #main-content-loader .main-content-loader-text {
              font-size: 0.95rem;
              font-weight: 600;
              color: #0b3f80;
            }

            /* Reuse existing spin keyframes */
            @keyframes spin {
              to { transform: rotate(360deg); }
            }

            #kata-pengantar-card,
            #home-top-two,
            #home-news-list,
            #berita-list,
            #pengumuman-list,
            #agenda-list {
              display: none;
            }

            /* Buat blok Berita Terbaru di sidebar kanan dapat discroll
               Tampilkan sekitar 2 item, sisanya menggunakan scrollbar */
            #berita-list {
              max-height: 120px;
              /* kira-kira tinggi untuk 2 item */
              overflow-y: auto;
              padding-right: 6px;
              -webkit-overflow-scrolling: touch;
            }

            /* Styling scrollbar (webkit) agar terlihat rapi */
            #berita-list::-webkit-scrollbar {
              width: 10px;
            }

            #berita-list::-webkit-scrollbar-track {
              background: transparent;
            }

            #berita-list::-webkit-scrollbar-thumb {
              background: rgba(0, 0, 0, 0.12);
              border-radius: 8px;
            }

            @media (max-width: 767px) {

              /* Di layar kecil, sedikit lebih pendek agar pas tampilan mobile */
              #berita-list {
                max-height: 100px;
              }
            }

            #public-view.detail-open #home-main-content {
              display: none !important;
            }

            #public-view.detail-open #content-detail {
              display: block;
              animation: fade-in 0.3s ease;
            }

            /* Jangan hide hero dan gambar saat detail open di mobile */
            @media (min-width: 768px) {

              #public-view.detail-open .hero,
              #public-view.detail-open #visi-misi-section,
              #public-view.detail-open .section-title,
              #public-view.detail-open .hero-slider,
              #public-view.detail-open .hero-caption-wrap,
              #public-view.detail-open .hero-dots {
                display: none !important;
              }
            }

            /* Di mobile, hero tetap visible, konten detail hanya di col-main */
            @media (max-width: 767px) {
              #public-view.detail-open #col-main {
                display: flex !important;
                flex-direction: column;
                gap: 0;
              }

              #public-view.detail-open .hero,
              #public-view.detail-open #visi-misi-section,
              #public-view.detail-open .section-title,
              #public-view.detail-open #home-main-content,
              #public-view.detail-open #kata-pengantar-card {
                display: none !important;
              }

              #public-view.detail-open #content-detail {
                display: block !important;
                order: 0;
                margin-top: 0;
              }
            }

            .cd-back-bar {
              margin-bottom: 12px;
            }

            .cd-back-bar button,
            #cd-back-btn,
            .back-home-btn {
              background: linear-gradient(135deg, #0b3f80 0%, #1b67b6 100%);
              color: #fff;
              border: 1px solid #0b3f80;
              padding: 9px 18px;
              font-size: 13px;
              font-weight: 700;
              cursor: pointer;
              border-radius: 999px;
              letter-spacing: 0.3px;
              display: inline-flex;
              align-items: center;
              gap: 6px;
              box-shadow: 0 8px 22px rgba(11, 63, 128, 0.24);
              transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
            }

            .cd-back-bar button:hover,
            #cd-back-btn:hover,
            .back-home-btn:hover {
              background: linear-gradient(135deg, #082e5b 0%, #14559a 100%);
              transform: translateY(-2px);
              box-shadow: 0 10px 24px rgba(11, 63, 128, 0.3);
            }

            .cd-body {
              background: #fff;
              border: none;
              border-radius: 12px;
              padding: 18px;
              box-shadow: 0 2px 12px rgba(11, 63, 128, 0.09);
            }

            .cd-judul {
              margin: 0 0 8px;
              font-size: 17px;
              color: var(--blue-900);
              line-height: 1.35;
              font-weight: 800;
              text-align: center;
            }

            .cd-meta {
              color: #8a9ab0;
              font-size: 12px;
              margin: 0 0 14px;
              border-bottom: 1px solid #f0f2f5;
              padding-bottom: 10px;
              text-align: center;
            }

            .cd-gambar {
              max-width: 100%;
              max-height: 260px;
              object-fit: cover;
              display: block;
              margin: 0 auto 16px;
              border-radius: 10px;
              width: 100%;
            }

            .cd-gambar-grid {
              display: grid;
              grid-template-columns: repeat(2, minmax(0, 1fr));
              gap: 12px;
              margin: 0 auto 16px;
              max-width: 760px;
            }

            .cd-gambar-card {
              display: flex;
              align-items: center;
              justify-content: center;
              overflow: hidden;
              border-radius: 10px;
              background: #f6f8fb;
              min-height: 180px;
            }

            .cd-gambar-grid .cd-gambar {
              margin: 0;
              max-height: 220px;
              height: 100%;
              width: 100%;
            }

            .cd-gambar--single {
              max-height: 260px;
            }

            .cd-gambar--sambutan {
              float: left;
              width: 180px;
              height: 220px;
              object-fit: cover;
              margin: 0 16px 12px 0;
              border-radius: 12px;
              box-shadow: 0 10px 24px rgba(11, 63, 128, 0.16);
              border: 2px solid #f0f2f5;
              background: #f7f9fc;
            }

            .cd-gambar--sambutan+.cd-isi {
              overflow: hidden;
            }

            .cd-list-item {
              display: block;
              padding: 12px 0 14px;
              border-bottom: 1px solid #eef2f6;
            }

            .cd-list-thumb-wrap {
              width: 100%;
              height: 220px;
              border-radius: 10px;
              overflow: hidden;
              background: #f4f7fb;
              display: flex;
              align-items: center;
              justify-content: center;
              margin-bottom: 10px;
            }

            .cd-list-thumb-grid {
              display: grid;
              grid-template-columns: repeat(2, minmax(0, 1fr));
              gap: 8px;
              margin-bottom: 10px;
            }

            .cd-list-thumb-grid .cd-list-thumb-wrap {
              height: 120px;
              margin-bottom: 0;
            }

            .cd-list-item .cd-list-thumb-wrap:empty {
              display: none;
              margin-bottom: 0;
            }

            .cd-list-thumb {
              width: 100%;
              height: 100%;
              object-fit: cover;
              display: block;
            }

            .cd-list-body {
              min-width: 0;
            }

            .cd-list-body strong {
              display: block;
              margin-bottom: 4px;
              color: var(--blue-900);
            }

            .cd-list-body small {
              color: #8a9ab0;
            }

            /* ══════════════════════════════════════════════════════════ */
            /* ══ CATEGORY PREVIEW CARD LAYOUT (Summary View)        ══ */
            /* ══════════════════════════════════════════════════════════ */

            .cd-list-card {
              display: flex !important;
              flex-direction: row;
              gap: 16px;
              padding: 16px;
              margin-bottom: 14px;
              background: #ffffff;
              border: 1px solid #e8edf3;
              border-radius: 12px;
              box-shadow: 0 2px 8px rgba(15, 74, 143, 0.06);
              transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease;
              list-style: none;
              overflow: hidden;
            }

            .cd-list-card:hover {
              transform: translateY(-3px);
              box-shadow: 0 8px 24px rgba(15, 74, 143, 0.12);
              border-color: #c2d4ea;
            }

            /* ── Thumbnail ── */
            .cd-card-thumb-wrap {
              flex-shrink: 0;
              width: 160px;
              height: 120px;
              border-radius: 10px;
              overflow: hidden;
              background: linear-gradient(135deg, #e8edf5 0%, #d5dde8 100%);
              display: flex;
              align-items: center;
              justify-content: center;
              position: relative;
            }

            .cd-card-thumb {
              width: 100%;
              height: 100%;
              object-fit: cover;
              display: block;
              transition: transform 0.3s ease;
            }

            .cd-list-card:hover .cd-card-thumb {
              transform: scale(1.05);
            }

            .cd-card-thumb-placeholder {
              background: linear-gradient(135deg, #1461b8 0%, #0b3f80 100%);
              color: rgba(255, 255, 255, 0.4);
              font-size: 32px;
            }

            .cd-card-thumb-video {
              cursor: pointer;
            }

            .cd-card-play-icon {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 40px;
              height: 40px;
              background: rgba(0, 0, 0, 0.55);
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              color: #fff;
              font-size: 16px;
              -webkit-backdrop-filter: blur(4px);
              backdrop-filter: blur(4px);
              transition: background 0.2s ease, transform 0.2s ease;
            }

            .cd-list-card:hover .cd-card-play-icon {
              background: rgba(20, 97, 184, 0.85);
              transform: translate(-50%, -50%) scale(1.1);
            }

            /* ── Card Body ── */
            .cd-card-body {
              flex: 1;
              min-width: 0;
              display: flex;
              flex-direction: column;
              justify-content: center;
              gap: 6px;
            }

            .cd-card-title {
              display: block;
              font-size: 15px;
              font-weight: 700;
              color: #0f2b50;
              line-height: 1.4;
              margin-bottom: 2px;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              line-clamp: 2;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }

            .cd-card-date {
              display: inline-flex;
              align-items: center;
              gap: 5px;
              font-size: 11.5px;
              color: #8a9ab0;
              font-weight: 500;
            }

            .cd-card-date i {
              font-size: 11px;
              color: #a8b8cc;
            }

            .cd-card-excerpt {
              font-size: 13px;
              line-height: 1.55;
              color: #4b5c72;
              margin: 4px 0 6px;
              display: -webkit-box;
              -webkit-line-clamp: 3;
              line-clamp: 3;
              -webkit-box-orient: vertical;
              overflow: hidden;
            }

            /* ── Actions Row ── */
            .cd-card-actions {
              display: flex;
              align-items: center;
              gap: 10px;
              margin-top: auto;
              padding-top: 4px;
            }

            .cd-card-readmore {
              display: inline-flex;
              align-items: center;
              gap: 6px;
              padding: 6px 16px;
              font-size: 12.5px;
              font-weight: 600;
              font-family: inherit;
              color: #fff;
              background: linear-gradient(135deg, #1461b8 0%, #0b3f80 100%);
              border: none;
              border-radius: 7px;
              cursor: pointer;
              transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
              white-space: nowrap;
            }

            .cd-card-readmore:hover {
              background: linear-gradient(135deg, #1974d2 0%, #0d4fa0 100%);
              transform: translateY(-1px);
              box-shadow: 0 4px 12px rgba(20, 97, 184, 0.35);
            }

            .cd-card-readmore:active {
              transform: translateY(0);
              box-shadow: none;
            }

            .cd-card-readmore i {
              font-size: 11px;
              transition: transform 0.2s ease;
            }

            .cd-card-readmore:hover i {
              transform: translateX(3px);
            }

            .cd-card-download {
              display: inline-flex;
              align-items: center;
              gap: 5px;
              padding: 6px 14px;
              font-size: 12px;
              font-weight: 600;
              color: #1461b8;
              background: #eaf1fb;
              border: 1px solid #d0dff0;
              border-radius: 7px;
              text-decoration: none;
              transition: background 0.2s ease, color 0.2s ease;
              white-space: nowrap;
            }

            .cd-card-download:hover {
              background: #dae8f8;
              color: #0b3f80;
            }

            .cd-card-download i {
              font-size: 11px;
            }

            /* ── Remove default ol numbering for card list ── */
            .cd-isi ol {
              list-style: none;
              padding: 0;
              margin: 0;
            }

            /* ── Responsive: Stack vertically on mobile ── */
            @media (max-width: 600px) {
              .cd-list-card {
                flex-direction: column;
                gap: 0;
                padding: 0;
                overflow: hidden;
              }

              .cd-card-thumb-wrap {
                width: 100%;
                height: 160px;
                border-radius: 12px 12px 0 0;
              }

              .cd-card-body {
                padding: 14px 16px 16px;
              }

              .cd-card-title {
                font-size: 14px;
              }

              .cd-card-excerpt {
                font-size: 12.5px;
                -webkit-line-clamp: 2;
                line-clamp: 2;
              }

              .cd-card-readmore {
                padding: 7px 14px;
                font-size: 12px;
              }
            }
            .cd-isi {
              font-size: 14px;
              line-height: 1.8;
              white-space: pre-wrap;
              color: #2a3a4a;
              text-align: left;
            }

            .cd-isi p,
            .cd-isi div,
            .cd-isi span {
              text-align: left;
            }

            /* Informasi SPMB dan Sambutan Kepala Sekolah: rata kiri */
            #content-detail.content-detail--spmb .cd-isi,
            #content-detail.content-detail--spmb .cd-isi p,
            #content-detail.content-detail--spmb .cd-isi div,
            #content-detail.content-detail--spmb .cd-isi span,
            #content-detail.content-detail--sambutan .cd-isi,
            #content-detail.content-detail--sambutan .cd-isi p,
            #content-detail.content-detail--sambutan .cd-isi div,
            #content-detail.content-detail--sambutan .cd-isi span {
              text-align: left !important;
            }

            .cd-link-wrap {
              margin-top: 16px;
              font-size: 13px;
              color: #8a9ab0;
              text-align: center;
            }

            .cd-link-wrap a {
              color: #1461b8;
              text-decoration: underline;
            }

            .news-link,
            .sidebar-link {
              cursor: pointer;
              color: var(--blue-900);
              transition: color 0.15s;
            }

            .news-link:hover,
            .sidebar-link:hover {
              color: var(--blue-700);
              text-decoration: underline;
            }

            .content-action-btn {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              margin: 8px 0 0 0;
              padding: 0;
              border: none;
              border-radius: 0;
              background: transparent;
              color: #1461b8;
              font-size: 13px;
              font-weight: 700;
              text-decoration: underline;
              cursor: pointer;
              box-shadow: none;
              transition: color 0.18s ease, text-decoration-color 0.18s ease;

              gap: 0;
            }
            .cd-share-bar,
            .cd-share-actions {
              margin-top: 14px;
            }
            .cd-share-button,
            .cd-share-actions .content-action-btn {
              display: inline-flex;
              align-items: center;
              gap: 8px;
              padding: 8px 14px;
              border-radius: 999px;
              color: #ffffff;
              background: #25d366;
              font-size: 13px;
              font-weight: 700;
              text-decoration: none;
              box-shadow: 0 10px 24px rgba(37, 211, 102, 0.18);
              transition: transform 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
            }
            .cd-share-button--inline {
              padding: 4px 10px;
              font-size: 12px;
              border-radius: 999px;
              vertical-align: middle;
              margin-left: 8px;
            }
            .cd-share-button:hover,
            .cd-share-actions .content-action-btn:hover {
              transform: translateY(-1px);
              box-shadow: 0 14px 28px rgba(37, 211, 102, 0.24);
              background: #22c55e;
            }
            .cd-share-button .share-icon {
              font-size: 14px;
              line-height: 1;
            }
            .cd-share-actions .content-action-btn {
              text-decoration: none;
            }

            .mobile-tab-bar button {
              flex: 1;
              background: transparent;
              border: none;
              border-right: 1px solid rgba(255, 255, 255, 0.15);
              color: rgba(255, 255, 255, 0.72);
              font-size: clamp(11px, 3.2vw, 13px);
              font-weight: 700;
              padding: 11px 6px;
              cursor: pointer;
              text-transform: uppercase;
              letter-spacing: 0.3px;
              transition: background 0.15s, color 0.15s;
              line-height: 1.3;
            }

            .mobile-tab-bar button:last-child {
              border-right: none;
            }

            .mobile-tab-bar button.tab-active {
              background: rgba(255, 255, 255, 0.18);
              color: #fff;
              border-bottom: 3px solid #ffd97a;
            }

            /* ── Quick Menu Grid ── */
            .qmenu-btn {
              background: #fff;
              border: none;
              border-radius: 14px;
              padding: 14px 8px;
              font-size: 12px;
              font-weight: 700;
              color: #0b3f80;
              cursor: pointer;
              box-shadow: 0 3px 12px rgba(11, 63, 128, 0.12);
              text-align: center;
              line-height: 1.5;
              transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
              font-family: 'Poppins', sans-serif;
              text-transform: uppercase;
              letter-spacing: 0.3px;
              min-height: 48px;
            }

            .qmenu-btn:active {
              transform: scale(0.95);
            }

            .qmenu-btn:hover {
              background: #eaf2ff;
            }

            /* ===== CSS TAMPILAN ADMIN ===== */
            #admin-view .layout {
              display: grid;
              grid-template-columns: 1fr;
              max-width: 1200px;
              margin: 24px auto;
              min-height: 100vh;
              min-height: 100dvh;
              width: 100%;
              box-sizing: border-box;
            }

            #admin-view .sidebar {
              border-right: 1px solid var(--line);
              background: #e8edf2;
              display: none;
              /* hide left sidebar for admin panel */
            }

            #admin-view .profile {
              display: grid;
              grid-template-columns: 64px 1fr;
              gap: 12px;
              align-items: center;
              background: linear-gradient(160deg, #2d465b 0%, #1f3242 100%);
              color: #fff;
              padding: 14px;
              border-bottom: 1px solid rgba(255, 255, 255, 0.15);
            }

            #admin-view .avatar {
              height: 64px;
              width: 64px;
              border-radius: 10px;
              border: 2px solid rgba(255, 255, 255, 0.25);
              display: grid;
              place-items: center;
              font-weight: 700;
              letter-spacing: 1px;
              background: linear-gradient(145deg, #ffcf8b, #ff9f6e);
              color: #472100;
            }

            #admin-view .profile small {
              display: block;
              font-size: 12px;
              opacity: 0.88;
              margin-bottom: 2px;
            }

            #admin-view .profile strong {
              display: block;
              margin-bottom: 6px;
            }

            #admin-view .mail {
              font-size: 14px;
              color: #d5ebff;
              text-decoration: none;
            }

            #admin-view .mail:hover {
              color: #fff;
            }

            #admin-view .menu-group {
              margin-top: 10px;
              border-top: 1px solid #dde3ea;
            }

            #admin-view .menu-item {
              display: flex;
              align-items: center;
              justify-content: space-between;
              gap: 10px;
              padding: 12px 16px;
              font-size: clamp(11px, 3.2vw, 13px);
              font-weight: 700;
              text-transform: uppercase;
              letter-spacing: 0.2px;
              color: #243445;
              border-bottom: 1px solid #dbe1e8;
              background: var(--bg-sidebar-item);
              cursor: pointer;
              -webkit-user-select: none;
              user-select: none;
            }

            #admin-view .menu-item:hover {
              background: var(--bg-sidebar-item-hover);
            }

            #admin-view .menu-item span:last-child {
              color: #7f8a95;
              font-size: 12px;
            }

            #admin-view .content {
              padding: 22px;
              min-height: 0;
              height: 100%;
              box-sizing: border-box;
              overflow-y: auto;
            }

            #admin-view .topbar {
              display: flex;
              align-items: center;
              justify-content: space-between;
              gap: 10px;
              background: var(--bg-panel);
              border: 1px solid var(--line);
              border-radius: 12px;
              box-shadow: var(--shadow);
              padding: 10px 16px;
              margin-bottom: 18px;
              animation: fade-in 0.4s ease;
            }

            #admin-view .home-icon {
              width: 24px;
              height: 24px;
              border-radius: 6px;
              background: linear-gradient(145deg, #2f80c1, #19537f);
              color: #fff;
              display: grid;
              place-items: center;
              font-size: 14px;
              font-weight: 700;
            }

            /* ===== Flat / Datar Admin Overrides ===== */
            /* Remove shadows, gradients and rounded corners for a flat look */
            #admin-view .topbar,
            #admin-view .panel,
            #admin-view .card,
            #admin-view .panel-header,
            #admin-view .panel-footer,
            #admin-view .menu-item,
            #admin-view .profile,
            #admin-view .avatar {
              background: #ffffff;
              background-image: none !important;
              border-radius: 0 !important;
              box-shadow: none !important;
              border: 1px solid #e6e9ef !important;
            }

            #admin-view .menu-item {
              background: transparent !important;
              border-bottom: 1px solid #eef2f6 !important;
              box-shadow: none !important;
            }

            #admin-view .profile {
              background: #f7fafc !important;
              border: 1px solid #e6e9ef !important;
              padding: 12px !important;
            }

            #admin-view .avatar {
              background: linear-gradient(145deg, #ffcf8b, #ff9f6e) none !important;
              border: none !important;
              box-shadow: none !important;
            }

            #admin-view .sidebar {
              background: #f7f9fb !important;
              border-right: 1px solid #e6e9ef !important;
              box-shadow: none !important;
            }

            #admin-view .content {
              background: transparent !important;
            }

            #admin-view .topbar-left {
              display: flex;
              align-items: center;
              gap: 10px;
            }

            #admin-view .admin-badge {
              font-size: clamp(11px, 3.2vw, 13px);
              font-weight: 700;
              color: #1d4f78;
              background: #e7f2fc;
              border: 1px solid #b5d5ee;
              border-radius: 999px;
              padding: 5px 12px;
              white-space: nowrap;
            }

            #admin-view .admin-logout-btn {
              border: 1px solid #cbd5e1;
              background: #fff;
              color: #0f172a;
              border-radius: 999px;
              padding: 7px 12px;
              font-weight: 700;
              cursor: pointer;
              transition: background 0.2s ease, transform 0.2s ease;
            }

            #admin-view .admin-logout-btn:hover {
              background: #f8fafc;
              transform: translateY(-1px);
            }

            #admin-view .welcome-note {
              background: rgba(255, 255, 255, 0.7);
              border: 1px solid var(--line);
              border-radius: 12px;
              padding: 18px;
              margin-bottom: 14px;
              color: #2d3f52;
              font-size: clamp(13px, 3.8vw, 15px);
              line-height: 1.65;
              animation: fade-in 0.6s ease;
            }

            #admin-view .panel {
              border: 1px solid #738391;
              background: #eef2f6;
              border-radius: 12px;
              overflow: hidden;
              box-shadow: var(--shadow);
              animation: slide-up 0.5s ease;
            }

            #admin-view .panel-header {
              display: flex;
              align-items: center;
              justify-content: space-between;
              padding: 12px 16px;
              background: linear-gradient(180deg, #d9e2ea, #ccd7e1);
              border-bottom: 1px solid #a9b6c2;
              font-size: 31px;
            }

            #admin-view .panel-header h1 {
              margin: 0;
              font-size: clamp(15px, 4.5vw, 32px);
              color: var(--accent-2);
              text-transform: uppercase;
              letter-spacing: 0.6px;
            }

            #admin-view .menu-grid {
              display: grid;
              grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
              gap: 8px;
              padding: 12px;
              background: #f5f7fa;
            }

            #admin-view .card {
              border: 1px solid #c9d2dc;
              background: linear-gradient(180deg, #ffffff 0%, #eef2f6 100%);
              border-radius: 7px;
              min-height: 72px;
              padding: 8px 6px;
              display: grid;
              align-content: center;
              justify-items: center;
              gap: 4px;
              text-align: center;
              text-decoration: none;
              color: #32485f;
              transition: transform 0.2s ease, box-shadow 0.2s ease;
            }

            #admin-view .card:hover {
              transform: translateY(-2px);
              box-shadow: 0 8px 16px rgba(29, 52, 74, 0.18);
            }

            #admin-view .icon {
              width: 36px;
              height: 36px;
              border-radius: 50%;
              display: grid;
              place-items: center;
              font-size: 12px;
              font-weight: 700;
              color: #fff;
              letter-spacing: 0.3px;
              background: linear-gradient(145deg, #37a6df, #1e5e8f);
            }

            #admin-view .card span {
              font-size: clamp(10px, 2.9vw, 12px);
              line-height: 1.15;
              padding: 0 2px;
            }

            #admin-view .panel-footer {
              padding: 10px 16px 16px;
              text-align: right;
              font-size: clamp(12px, 3.5vw, 15px);
              color: #2e465d;
              background: #f8fafc;
              border-top: 1px solid #dde3ea;
            }

            #admin-view .panel-footer strong {
              color: #1d3549;
            }

            #admin-view .form-panel {
              margin-top: 16px;
            }

            #admin-view .sheet-form {
              padding: 16px;
              background: #f7f9fc;
              display: grid;
              gap: 10px;
            }

            #admin-view .form-row {
              display: grid;
              gap: 6px;
            }

            #admin-view .form-row.two {
              grid-template-columns: 1fr 1fr;
              gap: 10px;
            }

            #admin-view .sheet-form label {
              font-size: clamp(12px, 3.2vw, 13px);
              font-weight: 700;
              color: #385067;
            }

            #admin-view .sheet-form input,
            #admin-view .sheet-form select,
            #admin-view .sheet-form textarea {
              width: 100%;
              border: 1px solid #b7c5d3;
              border-radius: 6px;
              padding: 8px 10px;
              font: inherit;
              color: #1d3549;
              background: #fff;
            }

            #admin-view .sheet-form textarea {
              min-height: 120px;
              resize: vertical;
            }

            #admin-view .hint {
              margin: 0;
              font-size: clamp(11px, 3vw, 12px);
              color: #5b6e80;
            }

            #admin-view .actions {
              display: flex;
              gap: 8px;
              flex-wrap: wrap;
              margin-top: 4px;
            }

            #admin-view .btn {
              border: 1px solid #2d608a;
              background: linear-gradient(180deg, #3c8cc8, #2f80c1);
              color: #fff;
              border-radius: 6px;
              padding: 8px 14px;
              font-weight: 700;
              cursor: pointer;
            }

            #admin-view .btn.secondary {
              border-color: #7a8c9d;
              background: linear-gradient(180deg, #9aa9b8, #7f91a2);
            }

            #admin-view .submit-status {
              font-size: clamp(12px, 3.2vw, 13px);
              color: #1f4f77;
              min-height: 20px;
              margin: 0;
              display: flex;
              align-items: center;
              gap: 8px;
              flex-wrap: wrap;
            }

            #admin-view .submit-status.is-processing::before {
              content: "";
              width: 10px;
              height: 10px;
              border-radius: 50%;
              border: 2px solid rgba(47, 128, 193, 0.25);
              border-top-color: #2f80c1;
              animation: spin 0.8s linear infinite;
            }

            #admin-view .preview-wrap {
              padding: 16px;
              background: #f7f9fc;
            }

            #admin-view .preview-toolbar {
              display: flex;
              gap: 8px;
              align-items: center;
              flex-wrap: wrap;
              margin-bottom: 10px;
            }

            #admin-view .preview-toolbar input {
              border: 1px solid #b7c5d3;
              border-radius: 6px;
              padding: 7px 10px;
              min-width: 200px;
              font: inherit;
            }

            #admin-view .preview-toolbar select {
              border: 1px solid #b7c5d3;
              border-radius: 6px;
              padding: 7px 10px;
              font: inherit;
              background: #fff;
              color: #1d3549;
            }

            #admin-view .table-scroll {
              overflow: auto;
              border: 1px solid #c9d2dc;
              border-radius: 8px;
              background: #fff;
            }

            #admin-view .preview-table {
              width: 100%;
              border-collapse: collapse;
              min-width: 760px;
              font-size: clamp(11px, 3vw, 13px);
            }

            #admin-view .preview-table th,
            #admin-view .preview-table td {
              border-bottom: 1px solid #e2e7ed;
              border-right: 1px solid #eef2f6;
              text-align: left;
              padding: 8px;
              vertical-align: top;
            }

            #admin-view .preview-table th {
              background: #eaf0f6;
              color: #2a4761;
              position: sticky;
              top: 0;
              z-index: 1;
            }

            #admin-view .preview-table tr:nth-child(even) td {
              background: #fbfdff;
            }

            #admin-view .preview-table tr.clickable-row {
              cursor: pointer;
            }

            #admin-view .preview-table tr.clickable-row:hover td {
              background: #edf6ff;
            }

            #admin-view .preview-table tr.selected td {
              background: #dcecff;
            }

            #admin-view .preview-note {
              margin: 8px 0 0;
              font-size: 12px;
              color: #587089;
              min-height: 18px;
            }

            #admin-view .preview-mode-note {
              margin: 2px 0 0;
              font-size: 11px;
              color: #6f7f8f;
              min-height: 16px;
            }

            #admin-view .preview-toolbar input[type="search"],
            #admin-view .preview-toolbar select {
              font-family: inherit;
            }

            #admin-view .preview-toolbar button {
              min-height: 42px;
            }

            #admin-view .preview-table .action-cell {
              white-space: nowrap !important;
              text-align: left;
              width: 240px;
            }

            #admin-view .preview-table .action-stack {
              display: flex;
              flex-direction: column;
              gap: 6px;
            }

            #admin-view .preview-table .action-buttons {
              display: flex;
              flex-wrap: wrap;
              gap: 4px;
            }

            #admin-view .preview-table .btn-toggle-status,
            #admin-view .preview-table .btn-edit,
            #admin-view .preview-table .btn-delete {
              display: inline-block;
              padding: 2px 7px;
              border: none;
              border-radius: 4px;
              font-size: 11px;
              cursor: pointer;
              font-weight: 600;
              line-height: 1.4;
            }

            #admin-view .preview-table .btn-toggle-status {
              background: #5b7cfa;
              color: #fff;
            }

            #admin-view .preview-table .btn-edit {
              background: #2979ff;
              color: #fff;
            }

            #admin-view .preview-table .btn-edit:hover {
              background: #1254c8;
            }

            #admin-view .preview-table .btn-delete {
              background: #e53935;
              color: #fff;
            }

            #admin-view .preview-table .btn-delete:hover {
              background: #b71c1c;
            }

            #admin-view .pagination {
              margin-top: 10px;
              display: flex;
              flex-wrap: wrap;
              align-items: center;
              gap: 8px;
            }

            #admin-view .pagination .meta {
              font-size: 12px;
              color: #587089;
            }

            .back-to-home {
              color: #2f80c1;
              text-decoration: none;
              font-size: 13px;
              font-weight: 700;
              padding: 5px 10px;
              border: 1px solid #b5d5ee;
              border-radius: 6px;
              background: #f0f8ff;
            }

            .back-to-home:hover {
              background: #dbeeff;
            }

            /* ── Editor Header (halaman editor per modul) ── */
            #admin-editor-header {
              background: var(--bg-panel);
              border: 1px solid var(--line);
              border-radius: 12px;
              box-shadow: var(--shadow);
              overflow: hidden;
              margin-bottom: 18px;
              animation: slide-up 0.35s ease;
            }

            .editor-breadcrumb {
              display: flex;
              align-items: center;
              gap: 8px;
              padding: 10px 18px;
              background: #f0f5fb;
              border-bottom: 1px solid var(--line);
              font-size: 13px;
              color: var(--text-soft);
            }

            .editor-breadcrumb button {
              background: none;
              border: 1px solid #b5c9dc;
              border-radius: 6px;
              padding: 4px 12px;
              font-size: 13px;
              font-weight: 700;
              color: var(--accent);
              cursor: pointer;
              transition: background 0.15s;
            }

            .editor-breadcrumb button:hover {
              background: #dbeeff;
            }

            .editor-breadcrumb-sep {
              color: #aab8c8;
              font-size: 16px;
            }

            .editor-breadcrumb-name {
              font-weight: 700;
              color: var(--text-main);
            }

            .editor-hero {
              display: flex;
              align-items: center;
              gap: 18px;
              padding: 20px 24px;
              border-bottom: 1px solid var(--line);
            }

            .editor-hero-icon {
              width: 56px;
              height: 56px;
              border-radius: 12px;
              background: linear-gradient(145deg, #2f80c1, #19537f);
              color: #fff;
              display: grid;
              place-items: center;
              font-size: 18px;
              font-weight: 900;
              letter-spacing: 1px;
              flex-shrink: 0;
              box-shadow: 0 4px 14px rgba(31, 94, 143, 0.35);
            }

            .editor-hero-title {
              margin: 0 0 4px;
              font-size: clamp(15px, 4vw, 20px);
              color: var(--text-main);
            }

            .editor-hero-desc {
              margin: 0;
              font-size: clamp(12px, 3.2vw, 13px);
              color: var(--text-soft);
              line-height: 1.5;
            }

            .editor-stats {
              display: flex;
              gap: 24px;
              padding: 12px 24px;
              background: #f8fafc;
            }

            .editor-stat {
              font-size: clamp(12px, 3.2vw, 13px);
              color: var(--text-soft);
            }

            .editor-stat strong {
              display: block;
              font-size: clamp(15px, 4.5vw, 22px);
              color: var(--accent);
              line-height: 1.1;
            }

            /* ── Sidebar toggle button (tampil hanya di mobile) ── */
            .sidebar-toggle-btn {
              display: none;
              align-items: center;
              gap: 6px;
              background: none;
              border: 1px solid #b5c9dc;
              border-radius: 6px;
              padding: 5px 10px;
              font-size: 18px;
              cursor: pointer;
              color: var(--accent);
              line-height: 1;
            }

            @media (max-width: 980px) {
              #public-view .content {
                padding: 2vw 1vw;
                max-width: 100vw;
              }

              #col-main {
                max-width: 100vw;
                padding: 0;
              }

              #admin-view .layout {
                grid-template-columns: 1fr;
              }

              #admin-view .sidebar {
                border-right: none;
                border-bottom: 1px solid var(--line);
                transition: max-height 0.3s ease, padding 0.3s ease;
                overflow: hidden;
                max-height: 1000px;
              }

              #admin-view .sidebar.sidebar-collapsed {
                max-height: 0;
                border-bottom: none;
                padding: 0;
              }

              .sidebar-toggle-btn {
                display: inline-flex;
              }

              #admin-view .menu-group {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
              }

              #admin-view .menu-item {
                border-right: 1px solid #dbe1e8;
              }

              .editor-hero {
                flex-direction: column;
                gap: 12px;
                padding: 16px;
                align-items: flex-start;
              }

              .editor-stats {
                flex-wrap: wrap;
                gap: 16px;
                padding: 12px 16px;
              }

              #admin-view .preview-toolbar {
                flex-direction: column;
                align-items: stretch;
              }

              #admin-view .preview-toolbar input,
              #admin-view .preview-toolbar select,
              #admin-view .preview-toolbar button {
                width: 100%;
                min-width: 0;
              }
            }

            @media (max-width: 640px) {
              #public-view .content {
                padding: 1vw 0.5vw;
                max-width: 100vw;
              }

              #public-view .banner-actions {
                position: static;
                width: 100%;
                justify-content: center;
                margin-top: 4px;
              }

              #col-main {
                max-width: 100vw;
                padding: 0;
              }

              #admin-view .content {
                padding: 10px;
              }

              #admin-view .menu-group {
                grid-template-columns: repeat(2, 1fr);
              }

              #admin-view .panel-header {
                padding: 10px 12px;
              }

              #admin-view .menu-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 6px;
                padding: 10px;
              }

              #admin-view .card {
                min-height: 68px;
                gap: 4px;
                padding: 7px 5px;
              }

              #admin-view .form-row.two {
                grid-template-columns: 1fr;
              }

              #admin-view .topbar {
                flex-direction: column;
                align-items: stretch;
                gap: 8px;
                padding: 8px 12px;
              }

              #admin-view .topbar-left {
                flex-wrap: wrap;
              }

              #admin-view .topbar>div:last-child {
                display: flex;
                flex-direction: column;
                width: 100%;
                gap: 8px;
              }

              #admin-view .admin-logout-btn,
              #admin-view .back-to-home {
                width: 100%;
                justify-content: center;
                text-align: center;
              }

              #admin-view .actions {
                flex-direction: column;
              }

              #admin-view .actions .btn {
                width: 100%;
                text-align: center;
              }

              #admin-view .pagination {
                flex-direction: column;
                align-items: flex-start;
                gap: 6px;
              }

              .editor-breadcrumb {
                padding: 8px 12px;
                font-size: 12px;
                flex-wrap: wrap;
                gap: 6px;
              }

              .editor-breadcrumb button {
                font-size: 12px;
                padding: 3px 8px;
              }

              #admin-view .preview-table .action-cell {
                width: auto;
              }

              #admin-view .preview-table .btn-edit,
              #admin-view .preview-table .btn-delete {
                display: block;
                width: 100%;
                margin-right: 0;
                margin-bottom: 3px;
                text-align: center;
              }

              #admin-view .sheet-form {
                padding: 12px;
                gap: 8px;
              }

              #admin-view .preview-wrap {
                padding: 10px;
              }

              #admin-view .welcome-note {
                padding: 12px;
                font-size: 13px;
              }
            }

            @media (max-width: 400px) {
              #admin-view .menu-group {
                grid-template-columns: 1fr;
              }

              #admin-view .menu-grid {
                grid-template-columns: repeat(2, 1fr);
              }

              #admin-view .icon {
                width: 28px;
                height: 28px;
                font-size: 10px;
              }

              .editor-stat strong {
                font-size: 18px;
              }
            }

            /* ===== ANIMASI (BERSAMA) ===== */
            @keyframes reveal {
              from {
                opacity: 0;
                transform: translateY(-8px);
              }

              to {
                opacity: 1;
                transform: translateY(0);
              }
            }

            @keyframes fade-in {
              from {
                opacity: 0;
              }

              to {
                opacity: 1;
              }
            }

            @keyframes slide-up {
              from {
                opacity: 0;
                transform: translateY(8px);
              }

              to {
                opacity: 1;
                transform: translateY(0);
              }
            }

            @keyframes ticker-scroll {
              0% {
                transform: translateX(100%);
              }

              100% {
                transform: translateX(-100%);
              }
            }

            @keyframes hero-ken-burns {
              0% {
                transform: scale(1);
              }

              100% {
                transform: scale(1.07);
              }
            }

            @keyframes hero-caption-in {
              from {
                opacity: 0;
                transform: translateY(14px);
              }

              to {
                opacity: 1;
                transform: translateY(0);
              }
            }

            @keyframes dot-pulse {

              0%,
              100% {
                transform: scale(1);
              }

              50% {
                transform: scale(1.4);
              }
            }

            @keyframes count-up {
              from {
                opacity: 0;
                transform: translateY(10px);
              }

              to {
                opacity: 1;
                transform: translateY(0);
              }
            }

            /* ── Scroll reveal ── */
            .reveal,
            .fade-up {
              opacity: 0;
              transform: translateY(24px);
              transition: opacity 0.55s ease, transform 0.55s ease;
            }

            .reveal.visible,
            .fade-up.visible {
              opacity: 1;
              transform: translateY(0);
            }

            /* ── Ticker berjalan ── */
            .news-ticker {
              background: #11396d;
              color: #ffd97a;
              display: flex;
              align-items: center;
              overflow: hidden;
              height: 32px;
              position: relative;
            }

            .news-ticker .ticker-label {
              flex-shrink: 0;
              background: #ffd97a;
              color: #0b3f80;
              font-weight: 800;
              font-size: 11px;
              text-transform: uppercase;
              padding: 0 10px;
              height: 100%;
              display: flex;
              align-items: center;
              letter-spacing: 0.5px;
              z-index: 2;
              white-space: nowrap;
            }

            .ticker-track {
              display: flex;
              align-items: center;
              white-space: nowrap;
              animation: ticker-scroll 55s linear infinite;
              font-size: 12px;
              font-weight: 600;
              padding-left: 16px;
            }

            .ticker-track span {
              margin-right: 40px;
            }

            .ticker-track span::before {
              content: '▸ ';
              color: #ffd97a;
              opacity: 0.7;
            }

            .news-ticker:hover .ticker-track {
              animation-play-state: paused;
            }

            /* ── Hero Slider ── */
            #public-view .hero {
              background: transparent;
              border: none;
              position: relative;
              overflow: hidden;
              border-radius: 16px;
              box-shadow: var(--shadow);
              margin-bottom: 16px;
            }

            .hero-slider {
              position: relative;
              width: 100%;
              height: 280px;
              min-height: 180px;
              overflow: hidden;
              background: #fff;
              display: flex;
              align-items: center;
              justify-content: center;
              border-radius: 16px;
            }

            .hero-slide {
              position: absolute;
              inset: 0;
              width: 100%;
              height: 100%;
              background-size: cover;
              background-position: center center;
              background-repeat: no-repeat;
              opacity: 0;
              transition: opacity 0.8s ease, transform 0.8s ease;
              animation: hero-ken-burns 8s ease-in-out infinite alternate;
              will-change: opacity, transform;
              transform: translateZ(0);
              -webkit-backface-visibility: hidden;
              backface-visibility: hidden;
            }

            .hero-slide.active {
              opacity: 1;
              z-index: 10;
            }

            .hero-slide::after {
              display: none;
            }

            .hero-caption-wrap {
              position: absolute;
              bottom: 20px;
              left: 0;
              right: 0;
              padding: 0 18px;
              z-index: 10;
              pointer-events: none;
            }

            /* Mobile: geser posisi hero sedikit ke bawah agar tidak terlalu mepet */
            @media (max-width: 767px) {
              .hero {
                margin-top: 50px;
              }

              .hero-slider {
                height: 300px; /* sedikit tambah tinggi untuk tampilan mobile */
              }
              /* Hilangkan padding tersembunyi di atas halaman pada mobile agar tidak menambah ruang
                 ekstra di atas slider (jaga agar ticker tidak disentuh). */
              #public-view .page {
                padding-top: 0;
              }

              #home-main-content {
                padding-top: 12px;
              }
            }

            #hero-caption {
              color: #fff;
              font-size: 12px;
              font-weight: 500;
              text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
              animation: hero-caption-in 0.6s ease;
              line-height: 1.4;
              margin: 0;
            }

            .auto-transparent-wib {
              color: transparent !important;
              text-shadow: none !important;
            }

            /* Dots indicator */
            .hero-dots {
              position: absolute;
              bottom: 12px;
              left: 50%;
              transform: translateX(-50%);
              display: flex;
              gap: 6px;
              z-index: 10;
            }

            .hero-dot {
              width: 8px;
              height: 8px;
              border-radius: 50%;
              background: rgba(255, 255, 255, 0.55);
              cursor: pointer;
              transition: background 0.3s, transform 0.3s;
            }

            .hero-dot.active {
              background: var(--primary-light);
              transform: scale(1.2);
            }

            /* Prev/Next arrows */
            .hero-arrow {
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              z-index: 10;
              background: transparent;
              color: rgba(255, 255, 255, 0.9);
              border: none;
              border-radius: 50%;
              width: 38px;
              height: 38px;
              font-size: 16px;
              cursor: pointer;
              display: flex;
              align-items: center;
              justify-content: center;
              transition: background .28s ease, transform .28s ease, color .28s ease;
              line-height: 1;
              box-shadow: none;
            }

            .hero-arrow:hover {
              background: rgba(255, 255, 255, 0.08);
              color: rgba(255, 255, 255, 1);
              transform: translateY(-50%) scale(1.05);
            }

            .hero-arrow-prev {
              left: 8px;
            }

            .hero-arrow-next {
              right: 8px;
            }

            /* ── Stat bar (counter) ── */
            .stat-bar {
              display: grid;
              grid-template-columns: repeat(3, 1fr);
              background: var(--blue-900);
              border-bottom: 3px solid #0a366e;
            }

            .stat-item {
              padding: 10px 6px;
              text-align: center;
              border-right: 1px solid rgba(255, 255, 255, 0.12);
              animation: count-up 0.6s ease both;
            }

            .stat-item:last-child {
              border-right: none;
            }

            .stat-num {
              display: block;
              font-size: 22px;
              font-weight: 800;
              color: #111;
              line-height: 1;
            }

            .stat-label {
              display: block;
              font-size: 10px;
              color: #111;
              text-transform: uppercase;
              letter-spacing: 0.5px;
              margin-top: 2px;
            }

            /* ── RESPONSIVE: Mobile only (layar < 768px) ── */
            @media (max-width: 767px) {
              #public-view .content {
                grid-template-columns: 1fr;
                gap: 18px;
                padding: 14px;
              }

              #col-sidebar-left,
              #col-sidebar-right {
                display: none;
              }

              .nav-hamburger {
                display: block;
              }
            }

            @media (max-width: 480px) {
              #public-view .content {
                padding: 12px;
                gap: 12px;
              }

              .hero-slider {
                height: 240px;
              }

              #hero-caption {
                font-size: 10px;
              }

              .stat-num {
                font-size: 18px;
              }

              .stat-label {
                font-size: 9px;
              }

              #col-main {
                padding: 0;
              }
            }

            /* Tombol mengambang: Kembali ke Beranda */
            .back-home-btn {
              background: linear-gradient(135deg, #0b3f80 0%, #1b67b6 100%);
              color: #fff;
              border: 1px solid #0b3f80;
              border-radius: 999px;
              padding: 11px 15px;
              font-weight: 800;
              box-shadow: 0 8px 22px rgba(11, 63, 128, 0.24);
              cursor: pointer;
              transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s, background 0.18s ease;
              z-index: 9999;
              min-height: 44px;
            }

            .back-home-btn:hover {
              transform: translateY(-3px);
              background: linear-gradient(135deg, #082e5b 0%, #14559a 100%);
              box-shadow: 0 10px 24px rgba(11, 63, 128, 0.3);
            }

            @media (max-width: 420px) {
              .back-home-btn {
                padding: 9px 12px;
                font-size: 14px;
              }
            }

            /* ===== RESPONSIF LANJUTAN UNTUK MOBILE & TABLET ===== */
            @media (max-width: 900px) {
              body {
                padding: 0;
              }

              .page {
                padding: 0;
              }

              .top-banner {
                border-radius: 0;
              }

              .banner-inner {
                padding: 16px 12px 18px;
                gap: 12px;
              }

            .banner-actions {
              position: static;
              width: 100%;
              justify-content: center;
              margin-top: 6px;
            }

            .banner-text .brand-main {
              font-size: clamp(18px, 3.8vw, 24px);
            }

            .banner-text .brand-sub {
              font-size: clamp(13px, 2.4vw, 16px);
            }

            .banner-text .brand-contact {
              font-size: 12px;
              line-height: 1.5;
            }

            .hero-slider {
              height: 260px;
            }

            #public-view .content {
              gap: 14px;
              padding: 12px;
            }

            #public-view .section-title {
              font-size: 16px;
              padding-left: 10px;
            }

            #public-view .box .inner {
              padding: 12px 14px;
            }
            }

            @media (max-width: 640px) {
              .banner-emblem {
                width: 70px;
                height: 70px;
              }

              .banner-inner {
                padding: 14px 12px 16px;
              }

              .banner-text .brand-main {
                font-size: 18px;
              }

              .banner-text .brand-sub {
                font-size: 13px;
              }

              .banner-text .brand-contact {
                font-size: 11px;
              }

              .admin-access-btn {
                width: 100%;
                justify-content: center;
              }

              .hero-slider {
                height: 240px;
              }

              .hero-caption-wrap {
                bottom: 24px;
                padding: 0 12px;
              }

              #hero-caption {
                font-size: 11px;
                color: #000;
                font-weight: 700;
                text-shadow: none;
              }

              #public-view .welcome,
              #visi-misi-section,
              #sambutan-kepala-sekolah {
                padding: 16px 12px;
              }

              #public-view .announcement-item,
              #public-view .agenda-item,
              #public-view .news-item {
                gap: 8px;
              }

              .ann-date-badge,
              .agd-date-badge {
                width: 40px;
                font-size: 9px;
              }

              .public-footer {
                padding: 16px 12px;
                font-size: 11px;
              }

              .news-ticker {
                height: auto;
                min-height: 32px;
              }

              .ticker-track {
                font-size: 11px;
                padding-left: 10px;
              }
            }

            @media (max-width: 480px) {
              .mobile-menu-toggle {
                width: 46px;
                height: 46px;
                border-radius: 12px;
                font-size: 18px;
              }

              .banner-actions {
                gap: 8px;
              }

              .hero-slider {
                height: 170px;
              }

              #public-view .content {
                padding: 10px;
              }

              #public-view .section-title {
                flex-wrap: wrap;
                gap: 8px;
              }

              #public-view .section-title a {
                margin-left: 0;
              }

              #public-view .welcome p {
                font-size: 14px;
              }

              #public-view .box .inner {
                padding: 10px 12px;
              }

              .qmenu-btn {
                padding: 12px 8px;
                min-height: 50px;
                font-size: 11px;
              }
            }

            /* ===== Additional mobile improvements ===== */
            @media (max-width: 900px) {

              html,
              body {
                min-width: 0;
                overflow-x: hidden;
              }

              #public-view .page {
                padding: 0;
              }

              .top-banner .banner-inner {
                flex-direction: column;
                align-items: stretch;
                gap: 12px;
              }

              .banner-text {
                width: 100%;
              }

              .banner-actions {
                width: 100%;
                justify-content: flex-start;
                flex-wrap: wrap;
                gap: 8px;
              }

              .banner-actions .admin-access-btn {
                width: auto;
              }

              #public-view .header-nav-list {
                padding: 0 12px;
                gap: 6px;
                min-width: max-content;
                overflow-x: visible;
                white-space: nowrap;
              }

              #public-view .header-nav-item {
                flex: 0 0 auto;
              }

              #public-view .header-nav-item>a {
                padding: 10px 12px;
              }

              .mobile-menu-toggle {
                display: inline-flex;
              }

              #public-view .content {
                display: block;
                padding: 0 12px 12px;
                width: 100%;
                max-width: 100%;
              }

              #col-sidebar-left,
              #col-sidebar-right {
                display: none;
                width: 100%;
                max-width: 100%;
              }

              #public-view .content,
              #public-view #col-main,
              #public-view #content-detail,
              #public-view .box,
              #public-view .sidebar-section,
              #public-view .sidebar-menu-list {
                width: 100%;
                max-width: 100%;
              }

              #content-detail {
                min-height: auto;
              }

              #public-view .header-nav-item.has-submenu .header-nav-submenu {
                position: static;
                width: 100%;
                min-width: auto;
                max-height: none;
                box-shadow: none;
                border: 1px solid rgba(255, 255, 255, 0.10);
                background: rgba(17, 17, 17, 0.98);
                margin-top: 10px;
              }

              #public-view .header-nav-item.has-submenu .header-nav-submenu a {
                color: #fff;
              }

              #public-view .header-nav-item.has-submenu .header-nav-submenu a:hover {
                background: rgba(255, 255, 255, 0.08);
                color: #fff;
              }

              #public-view .header-nav-item.has-submenu.open .header-nav-submenu {
                display: block !important;
                opacity: 1;
                visibility: visible;
                transform: none;
              }

              #public-view .header-nav-item.has-submenu > a::after {
                margin-left: 6px;
              }

              #public-view .header-nav-item > a.active,
              #public-view .header-nav-item.active > a {
                background: rgba(255, 255, 255, 0.14);
                color: #fff;
                border-bottom-color: #ffd97a;
              }

              #public-view.mobile-menu-open #col-sidebar-left,
              #public-view.mobile-menu-open #col-sidebar-right {
                display: block;
                position: static;
                width: 100%;
                max-width: 100%;
                background: transparent;
                padding: 0;
                box-shadow: none;
              }

              #public-view.mobile-menu-open .content {
                padding: 0 12px 12px;
              }

              #public-view.mobile-menu-open #col-main {
                display: block !important;
              }

              #public-view .sidebar-section,
              #public-view .box,
              #public-view .content-panel {
                width: 100%;
                margin: 0;
              }

              #public-view.mobile-menu-open #content-detail {
                display: block !important;
              }

              .sidebar-section-title {
                min-height: 0;
              }

              .sidebar-menu-list {
                width: 100%;
                max-height: 320px;
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
              }

              #public-view.mobile-menu-open .sidebar-menu-list {
                max-height: 420px;
              }

              .sidebar-menu-list::-webkit-scrollbar {
                width: 8px;
              }

              .sidebar-menu-list::-webkit-scrollbar-thumb {
                background: rgba(0, 0, 0, 0.2);
                border-radius: 8px;
              }
            }

            @media (max-width: 640px) {
              .banner-text {
                align-items: center;
                text-align: center;
              }

              /* Cleaned up datetime styles */

              .mobile-menu-toggle {
                width: 42px;
                height: 42px;
              }

              .top-banner {
                position: sticky;
                top: 0;
                z-index: 90;
                box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
                -webkit-backdrop-filter: blur(8px);
                backdrop-filter: blur(8px);
              }

              .top-banner .banner-actions {
                justify-content: center;
              }

              #public-view .banner-actions {
                padding: 0 8px;
              }

              .header-nav-list {
                gap: 4px;
              }

              .banner-text .brand-main {
                font-size: 18px;
              }

              .banner-text .brand-sub {
                font-size: 12px;
              }

              .banner-text .brand-contact {
                font-size: 10px;
              }

              #public-view .content {
                padding: 0 10px 12px;
              }

              .preview-toolbar,
              .preview-toolbar input,
              .preview-toolbar select,
              .preview-toolbar button {
                width: 100%;
              }

              #public-view .header-nav-item>a {
                padding: 9px 10px;
                border-radius: 999px;
                font-size: 12px;
              }

              .content-action-btn {
                width: 100%;
                justify-content: center;
                padding: 0;
                border: none;
                border-radius: 0;
                background: transparent;
                color: #1461b8;
                font-size: 13px;
                font-weight: 700;
                text-decoration: underline;
                cursor: pointer;
                box-shadow: none;
                transition: color 0.18s ease, text-decoration-color 0.18s ease;
              }
            }

            /* Tambahan responsif untuk layar kecil dan tablet */
            @media (max-width: 980px) {
              #public-view .content {
                grid-template-columns: 1fr;
              }

              .sheet-data-demo {
                overflow-x: auto;
              }

              .sheet-data-demo table {
                min-width: 0;
                width: 100%;
              }

              .sheet-data-demo th,
              .sheet-data-demo td {
                white-space: normal;
              }

              .banner-actions {
                position: static;
                justify-content: center;
                width: 100%;
                margin-top: 10px;
              }

              .banner-actions>* {
                flex: 1 1 auto;
                min-width: 0;
              }

              .banner-text {
                width: 100%;
                text-align: center;
                align-items: center;
              }

              .banner-text .brand-main,
              .banner-text .brand-sub,
              .banner-text .brand-contact {
                margin: 0 auto;
              }
            }

            @media (max-width: 767px) {
              body {
                padding: 0;
              }

              .main-container,
              .sheet-data-demo,
              .home-banner-inner,
              .admin-login-panel,
              .announcement-popup-card {
                padding-left: 14px;
                padding-right: 14px;
              }

              #public-view .top-banner .banner-inner {
                padding: 12px 14px 10px;
              }

              #public-view .header-nav-list,
              #public-view .header-nav-item>a {
                min-width: auto;
              }

              #public-view .header-nav-item>a {
                font-size: 12px;
                padding: 10px 9px;
              }

              .banner-actions {
                position: static;
                justify-content: center;
                margin-top: 10px;
                width: 100%;
              }

              .banner-actions>* {
                flex: 1 1 auto;
                min-width: 0;
              }

              .banner-actions .btn,
              .banner-actions .admin-access-btn {
                width: 100%;
              }

              .hero {
                display: block;
              }

              .hero-slider {
                min-height: 180px;
                height: clamp(180px, 50vw, 240px);
                aspect-ratio: 16 / 10;
              }

              .hero-slide {
                display: block;
                background-size: cover;
                background-position: center center;
              }

              .hero-caption-wrap {
                bottom: 10px;
                padding: 0 10px;
              }

              #hero-caption {
                font-size: 10px;
                line-height: 1.3;
              }

              .hero-dots {
                bottom: 6px;
                gap: 4px;
              }

              .hero-dot {
                width: 6px;
                height: 6px;
              }

              .cd-gambar,
              .cd-gambar-grid .cd-gambar {
                display: block;
                width: 100%;
                max-height: none;
                height: auto;
                object-fit: contain;
              }

              .cd-gambar-grid {
                grid-template-columns: 1fr;
                gap: 10px;
              }

              .cd-gambar-card {
                min-height: 130px;
              }

              #public-view .main-nav a {
                padding: 12px 16px;
              }

              #public-view .main-nav a.nav-sub {
                padding-left: 24px;
              }

              .sheet-data-demo .sheet-data-list {
                grid-template-columns: 1fr;
              }
            }

            /* ===== SMALL INLINE SPINNER (admin dropdowns) ===== */
            .small-spinner {
              display: none;
              width: 18px;
              height: 18px;
              border-radius: 50%;
              border: 3px solid rgba(11, 63, 128, 0.12);
              border-top-color: var(--primary);
              animation: spin-sm .9s linear infinite;
              margin-left: 8px;
              vertical-align: middle
            }

            @keyframes spin-sm {
              to {
                transform: rotate(360deg)
              }
            }

            /* ===== ROLE BADGE ===== */
            .admin-role-badge {
              display: inline-block;
              padding: 2px 10px;
              border-radius: 12px;
              font-size: 0.7rem;
              font-weight: 700;
              text-transform: uppercase;
              letter-spacing: 0.5px;
              margin-top: 4px;
            }

            .role-superadmin {
              background: linear-gradient(135deg, #f59e0b, #d97706);
              color: #fff;
            }

            .role-admin {
              background: linear-gradient(135deg, #3b82f6, #2563eb);
              color: #fff;
            }

            /* ===== PENDING NOTIFICATION BADGE ===== */
            .pending-badge {
              display: inline-flex;
              align-items: center;
              justify-content: center;
              position: absolute;
              top: -6px;
              right: -8px;
              background: #ef4444;
              color: #fff;
              font-size: 0.7rem;
              font-weight: 700;
              min-width: 20px;
              height: 20px;
              padding: 0 5px;
              border-radius: 10px;
              line-height: 1;
              box-shadow: 0 2px 6px rgba(239, 68, 68, 0.4);
              animation: badge-pulse 2s ease-in-out infinite;
            }

            @keyframes badge-pulse {

              0%,
              100% {
                transform: scale(1);
              }

              50% {
                transform: scale(1.15);
              }
            }

            /* ===== APPROVAL PANEL ===== */
            #admin-approval-panel .panel-header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              flex-wrap: wrap;
              gap: 8px;
              margin-bottom: 16px;
            }

            #admin-approval-panel .panel-header h3 {
              margin: 0;
              font-size: 1.1rem;
            }

            .approval-list {
              display: flex;
              flex-direction: column;
              gap: 12px;
            }

            .approval-list .empty-message {
              text-align: center;
              padding: 24px;
              color: #6b7280;
              font-style: italic;
            }

            .approval-card {
              background: #fff;
              border: 1px solid #e5e7eb;
              border-radius: 10px;
              padding: 14px 16px;
              box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
              transition: box-shadow 0.2s;
            }

            .approval-card:hover {
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            }

            .approval-card-header {
              display: flex;
              align-items: center;
              gap: 10px;
              flex-wrap: wrap;
              margin-bottom: 10px;
            }

            .approval-action-badge {
              display: inline-block;
              padding: 3px 10px;
              border-radius: 6px;
              font-size: 0.75rem;
              font-weight: 700;
              text-transform: uppercase;
              color: #fff;
            }

            .approval-action-append {
              background: #22c55e;
            }

            .approval-action-update {
              background: #3b82f6;
            }

            .approval-action-delete {
              background: #ef4444;
            }

            .approval-action-togglestatus {
              background: #f59e0b;
              color: #1a1a1a;
            }

            .approval-author {
              font-size: 0.85rem;
              color: #374151;
            }

            .approval-time {
              font-size: 0.78rem;
              color: #9ca3af;
              margin-left: auto;
            }

            .approval-card-body {
              font-size: 0.9rem;
              color: #1f2937;
              margin-bottom: 10px;
            }

            .approval-card-body div {
              margin-bottom: 4px;
            }

            .approval-card-actions {
              display: flex;
              gap: 8px;
              flex-wrap: wrap;
            }

            .approve-btn {
              background: linear-gradient(135deg, #22c55e, #16a34a) !important;
              color: #fff !important;
              border: none !important;
              padding: 6px 16px !important;
              border-radius: 6px !important;
              font-size: 0.85rem !important;
              font-weight: 600 !important;
              cursor: pointer;
              transition: transform 0.15s, box-shadow 0.15s;
            }

            .approve-btn:hover {
              transform: translateY(-1px);
              box-shadow: 0 3px 8px rgba(34, 197, 94, 0.35);
            }

            .reject-btn {
              background: linear-gradient(135deg, #ef4444, #dc2626) !important;
              color: #fff !important;
              border: none !important;
              padding: 6px 16px !important;
              border-radius: 6px !important;
              font-size: 0.85rem !important;
              font-weight: 600 !important;
              cursor: pointer;
              transition: transform 0.15s, box-shadow 0.15s;
            }

            .reject-btn:hover {
              transform: translateY(-1px);
              box-shadow: 0 3px 8px rgba(239, 68, 68, 0.35);
            }

            /* ===== ADMIN LOGIN USERNAME FIELD ===== */
            #admin-username {
              width: 100%;
              padding: 10px 12px;
              border: 1px solid #d1d5db;
              border-radius: 8px;
              font-size: 0.95rem;
              margin-bottom: 10px;
              box-sizing: border-box;
            }

            /* ===== RICH TEXT EDITOR ===== */
            .rich-text-editor {
              border: 1px solid #c9d2dc;
              border-radius: 8px;
              background: #fff;
              overflow: hidden;
              margin-top: 4px;
            }

            .rte-toolbar {
              display: flex;
              flex-wrap: wrap;
              gap: 4px;
              padding: 8px;
              background: #f8fbff;
              border-bottom: 1px solid #e1e7ed;
              align-items: center;
            }

            .rte-btn {
              background: #fff;
              border: 1px solid #d1d5db;
              border-radius: 4px;
              padding: 4px 8px;
              font-size: 0.85rem;
              cursor: pointer;
              color: #374151;
              transition: all 0.2s;
              display: flex;
              align-items: center;
              justify-content: center;
            }

            .rte-btn:hover {
              background: #f3f4f6;
              border-color: #9ca3af;
            }

            .rte-separator {
              width: 1px;
              height: 20px;
              background: #d1d5db;
              margin: 0 4px;
            }

            .rte-content {
              padding: 12px;
              min-height: 150px;
              max-height: 400px;
              overflow-y: auto;
              font-family: inherit;
              font-size: 0.95rem;
              line-height: 1.5;
              color: #1f2937;
              outline: none;
            }

            .rte-content:focus {
              background: #fdfdff;
            }

            .rte-content[placeholder]:empty:before {
              content: attr(placeholder);
              color: #9ca3af;
              pointer-events: none;
              display: block;
            }

            .rte-content ol,
            .rte-content ul {
              padding-left: 20px;
              margin: 8px 0;
            }

            .rte-content a {
              color: var(--primary);
              text-decoration: underline;
            }