* {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }

       body {
           font-family: 'Inter', 'Poppins', sans-serif;
           background: linear-gradient(135deg, #1b9898 0%, #448826 100%);
           min-height: 100vh;
           display: flex;
           align-items: center;
           justify-content: center;
           padding: 1.5rem;
           position: relative;
       }

       body::before {
           content: '';
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: radial-gradient(circle at 30% 20%, rgba(150, 220, 150, 0.2) 0%, rgba(30, 100, 70, 0.1) 80%);
           pointer-events: none;
           z-index: 0;
       }

       .login-container {
           max-width: 1400px;
           width: 100%;
           position: relative;
           z-index: 2;
       }

       .three-columns {
           display: grid;
           grid-template-columns: 4fr 3fr 3fr;
           gap: 1.5rem;
       }

       .column {
           background: rgba(255, 255, 255, 0.12);
           backdrop-filter: blur(12px);
           border-radius: 1.8rem;
           padding: 1.5rem;
           border: 1px solid rgba(255, 255, 255, 0.25);
           box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
           transition: transform 0.3s ease, box-shadow 0.3s ease;
           height: 100%;
           display: flex;
           flex-direction: column;
       }

       .column:hover {
           transform: translateY(-5px);
           box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15);
       }

       .main-header {
           background: rgba(255, 255, 255, 0.12);
           backdrop-filter: blur(12px);
           border-radius: 1.5rem;
           margin-bottom: 1.5rem;
           padding: 1rem 1.5rem;
           border: 1px solid rgba(255, 255, 255, 0.25);
           box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
           transition: all 0.3s ease;
           max-width: 1400px;
           width: 100%;
       }

       .main-header:hover {
           transform: translateY(-2px);
           box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
       }

       .header-container {
           display: flex;
           justify-content: space-between;
           align-items: center;
           flex-wrap: wrap;
           gap: 1rem;
       }

       .header-logo {
           display: flex;
           align-items: center;
           gap: 1rem;
           flex-wrap: wrap;
       }

       .logo-img {
           width: 60px;
           height: 60px;
           border-radius: 1rem;
           background: linear-gradient(135deg, #2c8c6e, #1f6e56);
           padding: 8px;
           object-fit: contain;
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
           transition: transform 0.3s ease;
       }

       .logo-img:hover {
           transform: scale(1.05);
       }

       .header-title h1 {
           font-size: 1.3rem;
           font-weight: 700;
           color: white;
           margin: 0;
           letter-spacing: 1px;
           text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
       }

       .header-title p {
           font-size: 0.75rem;
           color: rgba(255, 255, 255, 0.85);
           margin: 0.2rem 0 0 0;
           letter-spacing: 0.5px;
       }

       .header-badge {
           background: rgba(255, 215, 0, 0.2);
           backdrop-filter: blur(4px);
           padding: 0.5rem 1rem;
           border-radius: 2rem;
           display: flex;
           align-items: center;
           gap: 0.5rem;
           border: 1px solid rgba(255, 215, 0, 0.4);
           transition: all 0.3s ease;
       }

       .header-badge:hover {
           background: rgba(255, 215, 0, 0.3);
           transform: scale(1.02);
       }

       .header-badge i {
           font-size: 1rem;
           color: #ffd700;
       }

       .header-badge span {
           font-size: 0.75rem;
           font-weight: 600;
           color: #ffd700;
           letter-spacing: 0.5px;
       }

       .image-slider-wrapper {
           position: relative;
           border-radius: 1.2rem;
           overflow: hidden;
           box-shadow: 0 20px 35px -10px rgba(0, 0, 0, 0.2);
           flex-shrink: 0;
       }

       .image-slide {
           display: none;
           width: 100%;
           aspect-ratio: 1 / 1;
       }

       .image-slide.active {
           display: block;
           animation: fadeInScale 0.5s ease;
       }

       @keyframes fadeInScale {
           0% {
               opacity: 0;
               transform: scale(0.98);
           }

           100% {
               opacity: 1;
               transform: scale(1);
           }
       }

       .image-slide img {
           width: 100%;
           height: 100%;
           object-fit: cover;
           border-radius: 1rem;
           display: block;
       }

       .slide-arrow {
           position: absolute;
           top: 50%;
           transform: translateY(-50%);
           background: rgba(255, 255, 255, 0.85);
           backdrop-filter: blur(8px);
           border: none;
           width: 40px;
           height: 40px;
           border-radius: 50%;
           cursor: pointer;
           font-size: 1.2rem;
           color: #1b6b5e;
           display: flex;
           align-items: center;
           justify-content: center;
           transition: all 0.3s;
           box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
           z-index: 10;
       }

       .slide-arrow:hover {
           background: white;
           transform: translateY(-50%) scale(1.05);
       }

       .arrow-left-img {
           left: 0.8rem;
       }

       .arrow-right-img {
           right: 0.8rem;
       }

       .caption-slide {
           text-align: center;
           margin-top: 1rem;
           font-size: 0.75rem;
           color: rgba(255, 255, 255, 0.85);
           letter-spacing: 0.5px;
       }

       .middle-column {
           display: flex;
           flex-direction: column;
           gap: 1.5rem;
       }

       .login-trigger-btn {
           background: linear-gradient(135deg, #2c8c6e, #1f6e56);
           color: white;
           border: none;
           width: 100%;
           padding: 1rem;
           border-radius: 2rem;
           font-weight: 700;
           font-size: 1.1rem;
           cursor: pointer;
           transition: all 0.3s;
           box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
           display: flex;
           align-items: center;
           justify-content: center;
           gap: 0.8rem;
       }

       .login-trigger-btn:hover {
           transform: translateY(-2px);
           box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
           background: linear-gradient(135deg, #3aa57f, #268a68);
       }

       .middle-info {
           flex: 1;
           display: flex;
           flex-direction: column;
       }

       .middle-info h3 {
           font-size: 1rem;
           font-weight: 600;
           color: white;
           margin-bottom: 0.8rem;
           display: flex;
           align-items: center;
           gap: 0.5rem;
       }

       .middle-carousel-container {
           overflow: hidden;
           position: relative;
           flex: 1;
       }

       .middle-slides-wrapper {
           display: flex;
           transition: transform 0.5s cubic-bezier(0.25, 0.9, 0.4, 1.1);
       }

       .middle-slide {
           flex: 0 0 100%;
           display: flex;
           flex-direction: column;
       }

       .middle-info-card {
           background: rgba(255, 255, 255, 0.2);
           backdrop-filter: blur(4px);
           border-radius: 1rem;
           padding: 1rem;
           text-align: center;
           border: 1px solid rgba(255, 255, 255, 0.3);
       }

       .middle-controls {
           display: flex;
           justify-content: center;
           gap: 0.8rem;
           margin-top: 0.8rem;
       }

       .middle-nav-btn {
           background: rgba(255, 255, 255, 0.25);
           border: 1px solid rgba(255, 255, 255, 0.4);
           border-radius: 30px;
           padding: 0.25rem 0.8rem;
           font-size: 0.7rem;
           cursor: pointer;
           color: white;
       }

       .middle-dots {
           display: flex;
           gap: 6px;
           justify-content: center;
           margin-top: 0.5rem;
       }

       .middle-dot {
           width: 6px;
           height: 6px;
           background: rgba(255, 255, 255, 0.5);
           border-radius: 10px;
           cursor: pointer;
       }

       .middle-dot.active-middle-dot {
           background: white;
           width: 18px;
       }

       .right-info {
           display: flex;
           flex-direction: column;
           height: 100%;
       }

       .right-info h3 {
           font-size: 1.2rem;
           font-weight: 600;
           color: white;
           margin-bottom: 1rem;
           display: flex;
           align-items: center;
           gap: 0.5rem;
       }

       .right-carousel-container {
           overflow: hidden;
           position: relative;
           flex: 1;
       }

       .right-slides-wrapper {
           display: flex;
           transition: transform 0.5s cubic-bezier(0.25, 0.9, 0.4, 1.1);
       }

       .right-slide {
           flex: 0 0 100%;
           display: flex;
           flex-direction: column;
       }

       .right-info-card.scrollable-card {
           display: flex;
           flex-direction: column;
           padding: 0;
           overflow: hidden;
           max-height: 500px;
       }

       .right-info-card {
           background: rgba(255, 255, 255, 0.2);
           backdrop-filter: blur(4px);
           border-radius: 1.2rem;
           border: 1px solid rgba(255, 255, 255, 0.3);
       }

       .card-header-info {
           background: rgba(44, 140, 110, 0.3);
           padding: 0.8rem 1rem;
           border-bottom: 2px solid rgba(255, 255, 255, 0.2);
           display: flex;
           align-items: center;
           gap: 0.6rem;
           flex-shrink: 0;
       }

       .card-header-info i {
           font-size: 1.3rem;
           color: #ffd966;
       }

       .card-header-info h4 {
           margin: 0;
           font-size: 0.9rem;
           font-weight: 600;
           color: white;
       }

       .table-scroll-wrapper {
           overflow-y: auto;
           overflow-x: auto;
           flex: 1;
           max-height: 320px;
           padding: 0.5rem;
       }

       .info-dokumen-table {
           width: 100%;
           border-collapse: collapse;
           font-size: 0.7rem;
       }

       .info-dokumen-table th {
           background: rgba(255, 255, 255, 0.2);
           color: white;
           padding: 0.5rem 0.4rem;
           text-align: left;
           font-weight: 600;
           position: sticky;
           top: 0;
           backdrop-filter: blur(4px);
       }

       .info-dokumen-table td {
           padding: 0.5rem 0.4rem;
           color: rgba(255, 255, 255, 0.9);
           border-bottom: 1px solid rgba(255, 255, 255, 0.1);
       }

       .info-dokumen-table tr:hover td {
           background: rgba(255, 255, 255, 0.08);
       }

       .download-link-info {
           background: rgba(255, 255, 255, 0.2);
           color: white;
           padding: 0.2rem 0.6rem;
           border-radius: 1rem;
           text-decoration: none;
           font-size: 0.65rem;
           transition: all 0.2s;
           display: inline-flex;
           align-items: center;
           gap: 0.2rem;
       }

       .download-link-info:hover {
           background: rgba(255, 255, 255, 0.35);
           transform: translateY(-1px);
       }

       .card-footer-info {
           background: rgba(255, 100, 100, 0.15);
           border-top: 1px solid rgba(255, 100, 100, 0.3);
           padding: 0.6rem 0.8rem;
           font-size: 0.65rem;
           color: #ffb3b3;
           display: flex;
           align-items: center;
           gap: 0.5rem;
           flex-shrink: 0;
       }

       .right-controls {
           display: flex;
           justify-content: space-between;
           align-items: center;
           margin-top: 1rem;
           gap: 0.5rem;
       }

       .right-nav-btn {
           background: rgba(255, 255, 255, 0.25);
           border: 1px solid rgba(255, 255, 255, 0.4);
           border-radius: 30px;
           padding: 0.3rem 0.8rem;
           font-size: 0.7rem;
           cursor: pointer;
           color: white;
       }

       .right-dots {
           display: flex;
           gap: 8px;
           justify-content: center;
           flex: 1;
       }

       .right-dot {
           width: 8px;
           height: 8px;
           background: rgba(255, 255, 255, 0.5);
           border-radius: 10px;
           cursor: pointer;
       }

       .right-dot.active-right-dot {
           background: white;
           width: 24px;
       }

       .modal {
           display: none;
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(8px);
           z-index: 1000;
           justify-content: center;
           align-items: center;
       }

       .modal.active {
           display: flex;
       }

       .modal-content {
           background: rgba(30, 40, 35, 0.95);
           backdrop-filter: blur(16px);
           border-radius: 2rem;
           padding: 2rem;
           max-width: 450px;
           width: 90%;
           border: 1px solid rgba(255, 255, 255, 0.3);
           box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
           animation: slideUp 0.3s ease;
       }

       @keyframes slideUp {
           from {
               transform: translateY(30px);
               opacity: 0;
           }

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

       .modal-header {
           display: flex;
           justify-content: space-between;
           align-items: center;
           margin-bottom: 1.5rem;
       }

       .modal-header h2 {
           color: white;
           font-size: 1.5rem;
           font-weight: 700;
       }

       .close-modal {
           background: rgba(255, 255, 255, 0.2);
           border: none;
           width: 32px;
           height: 32px;
           border-radius: 50%;
           cursor: pointer;
           color: white;
           font-size: 1.2rem;
           display: flex;
           align-items: center;
           justify-content: center;
           transition: all 0.2s;
       }

       .close-modal:hover {
           background: rgba(255, 255, 255, 0.3);
           transform: rotate(90deg);
       }

       .modal .input-group {
           margin-bottom: 1.2rem;
       }

       .modal .input-group label {
           display: block;
           font-weight: 500;
           margin-bottom: 0.5rem;
           color: white;
           font-size: 0.85rem;
       }

       .modal .input-field {
           width: 100%;
           padding: 0.85rem 1rem;
           border: 1px solid rgba(255, 255, 255, 0.3);
           border-radius: 1.2rem;
           font-size: 0.95rem;
           background: rgba(255, 255, 255, 0.9);
           outline: none;
       }

       .modal .recaptcha-wrapper {
           background: rgba(255, 255, 255, 0.2);
           border-radius: 1rem;
           padding: 0.7rem 1rem;
           display: flex;
           align-items: center;
           gap: 12px;
           margin-bottom: 1.5rem;
           flex-wrap: wrap;
       }

       .modal .recaptcha-check {
           width: 26px;
           height: 26px;
           background: white;
           border: 2px solid #a8e6cf;
           border-radius: 6px;
           display: inline-flex;
           align-items: center;
           justify-content: center;
           cursor: pointer;
           flex-shrink: 0;
       }

       .modal .recaptcha-check.checked {
           background: #2c8c6e;
           border-color: #2c8c6e;
       }

       .modal .recaptcha-check i {
           font-size: 14px;
           color: white;
       }

       .modal .btn-login-modal {
           background: linear-gradient(135deg, #2c8c6e, #1f6e56);
           color: white;
           border: none;
           width: 100%;
           padding: 0.9rem;
           border-radius: 2rem;
           font-weight: 700;
           font-size: 1rem;
           cursor: pointer;
           transition: all 0.3s;
       }

       .modal .btn-login-modal:hover {
           transform: translateY(-2px);
           background: linear-gradient(135deg, #3aa57f, #268a68);
       }

       .modal-about {
           display: none;
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           height: 100%;
           background: rgba(0, 0, 0, 0.6);
           backdrop-filter: blur(8px);
           z-index: 2000;
           justify-content: center;
           align-items: center;
       }

       .modal-about.active {
           display: flex;
       }

       .modal-about-content {
           background: rgba(30, 50, 45, 0.95);
           backdrop-filter: blur(16px);
           border-radius: 1.5rem;
           max-width: 500px;
           width: 90%;
           max-height: 80vh;
           overflow-y: auto;
           border: 1px solid rgba(255, 255, 255, 0.25);
           box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
           animation: slideUpModal 0.3s ease;
       }

       @keyframes slideUpModal {
           from {
               transform: translateY(30px);
               opacity: 0;
           }

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

       .modal-about-header {
           display: flex;
           justify-content: space-between;
           align-items: center;
           padding: 1.2rem 1.5rem;
           border-bottom: 1px solid rgba(255, 255, 255, 0.2);
           background: rgba(44, 140, 110, 0.3);
           border-radius: 1.5rem 1.5rem 0 0;
       }

       .modal-about-title {
           margin: 0;
           font-size: 1.1rem;
           font-weight: 600;
           color: white;
           display: flex;
           align-items: center;
           gap: 0.5rem;
       }

       .modal-about-title i {
           color: #ffd966;
       }

       .modal-about-close {
           background: rgba(255, 255, 255, 0.2);
           border: none;
           width: 32px;
           height: 32px;
           border-radius: 50%;
           cursor: pointer;
           color: white;
           font-size: 1rem;
           display: flex;
           align-items: center;
           justify-content: center;
           transition: all 0.2s;
       }

       .modal-about-close:hover {
           background: rgba(255, 255, 255, 0.3);
           transform: rotate(90deg);
       }

       .modal-about-body {
           padding: 1.5rem;
           color: rgba(255, 255, 255, 0.9);
           font-size: 0.85rem;
           line-height: 1.6;
       }

       .modal-about-body hr {
           margin: 1rem 0;
           border: none;
           height: 1px;
           background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
       }

       .modal-about-regards {
           margin-top: 0.5rem;
           font-style: italic;
       }

       .modal-about-regards strong {
           color: #ffd966;
       }

       .footer {
           margin-top: 2rem;
           background: rgba(255, 255, 255, 0.1);
           backdrop-filter: blur(12px);
           border-top: 1px solid rgba(255, 255, 255, 0.2);
           padding: 1.2rem;
           border-radius: 1rem;
       }

       .footer-container {
           max-width: 1400px;
           margin: 0 auto;
       }

       .footer-content {
           text-align: center;
       }

       .footer-text p {
           color: rgba(255, 255, 255, 0.85);
           font-size: 0.8rem;
           margin-bottom: 0.8rem;
           line-height: 1.5;
       }

       .footer-text i.fa-heart {
           animation: heartbeat 1.5s ease infinite;
       }

       @keyframes heartbeat {

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

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

       .footer-divider {
           height: 1px;
           background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
           margin: 0.8rem 0;
       }

       .footer-counter {
           display: flex;
           justify-content: center;
           align-items: center;
           opacity: 0.7;
           transition: opacity 0.3s;
       }

       .footer-counter:hover {
           opacity: 1;
       }

       .toast-msg {
           position: fixed;
           bottom: 20px;
           left: 50%;
           transform: translateX(-50%);
           background: rgba(0, 0, 0, 0.85);
           backdrop-filter: blur(12px);
           color: white;
           padding: 10px 20px;
           border-radius: 50px;
           font-size: 0.85rem;
           z-index: 1100;
           opacity: 0;
           transition: 0.2s;
           pointer-events: none;
           white-space: nowrap;
       }

       .table-scroll-wrapper::-webkit-scrollbar {
           width: 5px;
       }

       .table-scroll-wrapper::-webkit-scrollbar-track {
           background: rgba(255, 255, 255, 0.1);
           border-radius: 10px;
       }

       .table-scroll-wrapper::-webkit-scrollbar-thumb {
           background: rgba(255, 255, 255, 0.3);
           border-radius: 10px;
       }

       .modal-about-content::-webkit-scrollbar {
           width: 6px;
       }

       .modal-about-content::-webkit-scrollbar-track {
           background: rgba(255, 255, 255, 0.1);
           border-radius: 10px;
       }

       .modal-about-content::-webkit-scrollbar-thumb {
           background: rgba(255, 255, 255, 0.3);
           border-radius: 10px;
       }

       /* ========== PERBAIKAN RESPONSIVE MOBILE ========== */
       @media (max-width: 1024px) {
           body {
               padding: 1rem;
           }

           .login-container {
               width: 100%;
               max-width: 1400px;
               margin-left: auto;
               margin-right: auto;
               padding: 0;
               box-sizing: border-box;
           }

           .three-columns {
               grid-template-columns: 1fr;
               gap: 1rem;
           }

           .main-header {
               margin-bottom: 1rem;
               padding: 0.8rem 1rem;
           }

           .column {
               padding: 1rem;
               width: 100%;
               box-sizing: border-box;
           }
       }

       @media (max-width: 768px) {
           body {
               padding: 0.8rem;
           }

           .login-container {
               width: 100%;
               overflow-x: hidden;
           }

           .main-header {
               padding: 0.8rem 1rem;
               margin-bottom: 1rem;
               border-radius: 1.2rem;
           }

           .header-container {
               flex-direction: column;
               text-align: center;
               gap: 0.8rem;
           }

           .header-logo {
               flex-direction: column;
               text-align: center;
               gap: 0.5rem;
           }

           .logo-img {
               width: 50px;
               height: 50px;
           }

           .header-title h1 {
               font-size: 1rem;
           }

           .header-title p {
               font-size: 0.65rem;
           }

           .header-badge {
               padding: 0.4rem 0.8rem;
           }

           .header-badge i {
               font-size: 0.85rem;
           }

           .header-badge span {
               font-size: 0.7rem;
           }

           .column {
               padding: 1rem;
               border-radius: 1.2rem;
               width: 100%;
               overflow-x: hidden;
           }

           /* Perbaikan untuk kolom kanan yang memiliki tabel */
           .right-info-card.scrollable-card {
               max-height: none;
           }

           .table-scroll-wrapper {
               max-height: 350px;
               overflow-x: auto;
           }

           .info-dokumen-table {
               font-size: 0.7rem;
               width: 100%;
               min-width: unset;
               /* atau hapus saja */
           }

           .info-dokumen-table th,
           .info-dokumen-table td {
               padding: 0.5rem 0.4rem;
           }

           .info-dokumen-table td:nth-child(2),
           .info-dokumen-table th:nth-child(2) {
               white-space: normal;
               /* boleh turun */
               word-break: break-word;
               /* kalau panjang banget tetap turun */
           }

           .card-header-info {
               padding: 0.7rem 0.8rem;
           }

           .card-header-info h4 {
               font-size: 0.85rem;
           }

           .card-footer-info {
               font-size: 0.6rem;
               padding: 0.6rem 0.8rem;
           }

           .right-controls {
               gap: 0.3rem;
           }

           .right-nav-btn {
               padding: 0.25rem 0.6rem;
               font-size: 0.65rem;
           }

           .right-dots {
               gap: 6px;
           }

           .right-dot {
               width: 6px;
               height: 6px;
           }

           .right-dot.active-right-dot {
               width: 20px;
           }

           /* Perbaikan modal untuk mobile */
           .modal-content {
               padding: 1.5rem;
               width: 95%;
               max-width: 400px;
           }

           .modal-header h2 {
               font-size: 1.3rem;
           }

           .modal .input-field {
               padding: 0.7rem 0.9rem;
               font-size: 0.9rem;
           }

           .modal .recaptcha-wrapper {
               padding: 0.5rem 0.8rem;
           }

           .modal .btn-login-modal {
               padding: 0.8rem;
               font-size: 0.9rem;
           }

           .modal-about-content {
               width: 95%;
               max-height: 85vh;
           }

           .modal-about-header {
               padding: 1rem;
           }

           .modal-about-body {
               padding: 1rem;
               font-size: 0.8rem;
           }

           .footer {
               padding: 0.8rem;
               margin-top: 1.5rem;
               border-radius: 1rem;
           }

           .footer-text p {
               font-size: 0.7rem;
               margin-bottom: 0.6rem;
           }

           .footer-divider {
               margin: 0.6rem 0;
           }

           .toast-msg {
               white-space: normal;
               text-align: center;
               font-size: 0.75rem;
               max-width: 90%;
               padding: 8px 16px;
           }
       }

       @media (max-width: 480px) {
           body {
               padding: 0.5rem;
           }

           .logo-img {
               width: 45px;
               height: 45px;
           }

           .header-title h1 {
               font-size: 0.9rem;
           }

           .header-title p {
               font-size: 0.6rem;
           }

           .header-badge span {
               font-size: 0.65rem;
           }

           .column {
               padding: 0.8rem;
           }

           .login-trigger-btn {
               padding: 0.8rem;
               font-size: 1rem;
           }

           .middle-info-card {
               padding: 0.8rem;
           }

           .middle-info-card h4 {
               font-size: 0.85rem;
           }

           .middle-info-card p {
               font-size: 0.7rem;
           }

           .card-header-info {
               padding: 0.6rem 0.7rem;
           }

           .card-header-info i {
               font-size: 1.1rem;
           }

           .card-header-info h4 {
               font-size: 0.8rem;
           }

           .table-scroll-wrapper {
               max-height: 300px;
           }

           .info-dokumen-table {
               font-size: 0.65rem;
               min-width: 450px;
           }

           .info-dokumen-table th,
           .info-dokumen-table td {
               padding: 0.4rem 0.3rem;
           }

           .info-dokumen-table td:nth-child(2),
           .info-dokumen-table th:nth-child(2) {
               white-space: normal;
               /* boleh turun */
               word-break: break-word;
               /* kalau panjang banget tetap turun */
           }

           .download-link-info {
               padding: 0.15rem 0.5rem;
               font-size: 0.6rem;
           }

           .card-footer-info {
               font-size: 0.55rem;
               padding: 0.5rem 0.6rem;
           }

           .footer-text p {
               font-size: 0.65rem;
           }
       }

       /* ========== PERBAIKAN UNTUK KONTEN YANG OVERFLOW ========== */
       .column {
           overflow-x: hidden;
           word-wrap: break-word;
       }

       .right-info-card {
           overflow: hidden;
       }

       .table-scroll-wrapper {
           overflow-x: auto;
           overflow-y: auto;
       }

       /* Memastikan semua elemen menggunakan box-sizing border-box */
       * {
           margin: 0;
           padding: 0;
           box-sizing: border-box;
       }

       /* Perbaikan untuk tampilan tablet landscape */
       @media (min-width: 769px) and (max-width: 1024px) {
           .three-columns {
               grid-template-columns: 1fr 1fr;
               gap: 1rem;
           }

           .three-columns .column:first-child {
               grid-column: span 2;
           }

           .three-columns .column:nth-child(2),
           .three-columns .column:nth-child(3) {
               grid-column: span 1;
           }

           .info-dokumen-table {
               font-size: 0.7rem;
           }

           .table-scroll-wrapper {
               max-height: 300px;
           }
       }

       /* Perbaikan untuk tampilan sangat kecil */
       @media (max-width: 360px) {
           .info-dokumen-table {
               min-width: 400px;
           }

           .info-dokumen-table td:nth-child(2),
           .info-dokumen-table th:nth-child(2) {
               white-space: normal;
               /* boleh turun */
               word-break: break-word;
               /* kalau panjang banget tetap turun */
           }

           .right-nav-btn {
               padding: 0.2rem 0.5rem;
               font-size: 0.6rem;
           }

           .middle-nav-btn {
               padding: 0.2rem 0.6rem;
               font-size: 0.65rem;
           }

           .login-trigger-btn {
               font-size: 0.9rem;
               gap: 0.5rem;
           }
       }

       .dokumen-list {
           display: flex;
           flex-direction: column;
           gap: 0.4rem;
           padding: 0.5rem;
       }

       .dokumen-item {
           display: grid;
           grid-template-columns: 40px 1fr auto;
           align-items: center;
           gap: 0.5rem;
           padding: 0.5rem 0.6rem;
           border-radius: 0.6rem;
           background: rgba(255, 255, 255, 0.08);
           transition: 0.2s;
       }

       .dokumen-item:hover {
           background: rgba(255, 255, 255, 0.15);
       }

       .dokumen-no {
           font-size: 0.7rem;
           color: white;
           opacity: 0.8;
       }

       .dokumen-nama {
           font-size: 0.7rem;
           color: white;
           line-height: 1.3;
       }

       /* kalau tidak ada tombol */
       .dokumen-item.full {
           grid-template-columns: 40px 1fr;
       }

       .dokumen-opsi {
           display: flex;
           justify-content: flex-end;
       }