.content-summernote {
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    padding-left: 10px;
    padding-right: 10px;
}
.content-summernote [style*="margin-left"] {
    margin-left: 0 !important;
}

.content-summernote p,
.content-summernote div {
    max-width: 100% !important;
}

/* gambar responsive */
.content-summernote img {
    max-width: 100% !important;
    height: auto !important;
}

/* tabel responsive */
.content-summernote table {
    width: 100% !important;
    display: block;
    overflow-x: auto;
}

.content-summernote td,
.content-summernote th {
    word-break: break-word !important;
}

/* hilangkan margin kiri besar yg sering dibuat summernote */
.content-summernote * {
    margin-left: 0 !important;
}     
 
 .carousel-link-img {
     max-width: 120px;
     max-height: 120px;
     object-fit: contain;
 }

 /* Mobile responsive */
 @media (max-width: 480px) {
     .carousel-link-img {
         max-width: 90px;
         max-height: 90px;
     }
 }


 /* Gambar background-mode */
 .slide-bg {
     background-size: cover !important;
     /* penuh, tidak distorsi */
     background-position: center center !important;
     background-repeat: no-repeat !important;
     width: 100%;
     min-height: 320px;
     /* Tinggi default desktop/HP */
 }

 /* Tinggi khusus untuk mobile agar gambar lebih jelas */
 @media (max-width: 480px) {
     .slide-bg {
         min-height: 400px;
         /* kamu bisa ubah 380–450 sesuai kebutuhan */
     }
 }

 /* Tinggi lebih besar untuk layar menengah */
 @media (max-width: 768px) {
     .slide-bg {
         min-height: 350px;
     }
 }


 .carousel-img {
     width: 100%;
     height: 100%;
     object-fit: contain;
     /* gambar tidak terpotong */
     object-position: center;
     background-color: #000;
     /* agar ada latar belakang */
 }



 /* Skeleton untuk modal video */
 .modal-skeleton {
     width: 100%;
     height: 350px;
     border-radius: 10px;
     background: linear-gradient(90deg, #e3e3e3 0%, #f5f5f5 50%, #e3e3e3 100%);
     background-size: 200% 100%;
     animation: shimmer 1.2s infinite;
 }

 @keyframes shimmer {
     0% {
         background-position: -200% 0;
     }

     100% {
         background-position: 200% 0;
     }
 }

 /* Hilangkan skeleton */
 .hide-skeleton {
     display: none;
 }

 /* Overlay + Box harus fixed dan super tinggi */
 .livewire-modal-overlay {
     position: fixed !important;
     inset: 0;
     background: rgba(0, 0, 0, 0.55);
     opacity: 1;
     pointer-events: all;
     z-index: 999999998 !important;
 }

 .livewire-modal-box {
     position: fixed !important;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 90%;
     max-width: 700px;
     background: white;
     border-radius: 10px;
     padding: 20px;
     z-index: 999999999 !important;
 }

 .cursor-pointer {
     cursor: pointer;
 }

 .active-page {
     color: red !important;
 }

 .slider-images {
     /* height: 100%; */
     width: 100%;
     object-fit: cover;
     /* This makes the image cover the area without being distorted, but may still crop slightly */
 }

 /* 
        .bg-blur {
            position: relative;
            width: 100%;         
            background-size: cover;
            background-position: center;
            overflow: hidden;
        }

        .bg-blur::after {
            content: "";
            position: absolute;
            inset: 0;
            backdrop-filter: blur(1px);
            background: rgba(188, 188, 188, 0.4);
        } */

 /* Tombol Buka Modal */
 .open-modal-btn {
     padding: 10px 20px;
     background: #007bff;
     display: inline-block;
     color: #fff;
     border-radius: 6px;
     cursor: pointer;
 }

 /* Overlay */
 .modal-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.6);
     opacity: 0;
     pointer-events: none;
     transition: 0.3s;

     z-index: 99998 !important;
 }

 /* Modal Box */
 .modal-box {
     position: fixed;
     max-width: 500px;
     width: 90%;
     background: #fff;
     border-radius: 10px;
     padding: 25px;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) scale(0.7);
     opacity: 0;
     pointer-events: none;
     transition: 0.3s ease;
     z-index: 99999 !important;
 }

 /* Close Button */
 .modal-close {
     position: absolute;
     top: 12px;
     right: 15px;
     font-size: 26px;
     color: #444;
     cursor: pointer;
     z-index: 910000 !important;
 }

 /* Tombol Aksi */
 .action-btn {
     background: #28a745;
     padding: 10px 20px;
     color: #fff;
     border: none;
     border-radius: 6px;
     cursor: pointer;
 }

 /* Checkbox ON → Modal tampil */
 #modal-toggle:checked~.modal-overlay {
     opacity: 1;
     pointer-events: all;
 }

 #modal-toggle:checked~.modal-box {
     opacity: 1;
     pointer-events: all;
     transform: translate(-50%, -50%) scale(1);
 }

 /* Responsive */
 @media (max-width: 480px) {
     .modal-box {
         width: 95%;
         padding: 20px;
     }

     .modal-close {
         font-size: 24px;
     }
 }

 /* Tombol */
 .btn {
     display: inline-block;
     padding: 10px 20px;
     background: #007bff;
     color: #fff;
     border-radius: 6px;
     cursor: pointer;
     margin: 5px;
 }

 /* Overlay */
 .modal-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.55);
     backdrop-filter: blur(0);
     opacity: 0;
     pointer-events: none;
     transition: 0.3s;
 }

 /* Modal Base */
 .modal-box {
     position: fixed;
     background: #fff;
     border-radius: 12px;
     padding: 25px;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) scale(.7);
     opacity: 0;
     pointer-events: none;
     transition: 0.3s ease;
 }

 /* Close Button */
 .modal-close {
     position: absolute;
     top: 12px;
     right: 15px;
     font-size: 28px;
     color: #333;
     cursor: pointer;
 }

 /* -------------------------
        MODAL SIZE VARIANTS
        -------------------------- */

 /* Medium Modal */
 .modal-md {
     max-width: 500px;
     width: 90%;
 }

 /* Large Modal */
 .modal-lg {
     max-width: 800px;
     width: 90%;
 }

 /* Blur Modal: Slight transparency effect */
 .modal-blur {
     max-width: 600px;
     width: 90%;
     backdrop-filter: blur(8px);
     background: rgba(255, 255, 255, 0.7);
 }

 /* -------------------------
        MODAL ACTIVE STATE
        -------------------------- */

 /* Modal MD Active */
 #modal-md-toggle:checked~.modal-overlay {
     opacity: 1;
     pointer-events: all;
 }

 #modal-md-toggle:checked~.modal-md {
     opacity: 1;
     pointer-events: all;
     transform: translate(-50%, -50%) scale(1);
 }

 /* Modal LG Active */
 #modal-lg-toggle:checked~.modal-overlay {
     opacity: 1;
     pointer-events: all;
 }

 #modal-lg-toggle:checked~.modal-lg {
     opacity: 1;
     pointer-events: all;
     transform: translate(-50%, -50%) scale(1);
 }

 /* Modal Blur Active */
 #modal-blur-toggle:checked~.modal-overlay {
     opacity: 1;
     backdrop-filter: blur(6px);
     pointer-events: all;
 }

 #modal-blur-toggle:checked~.modal-blur {
     opacity: 1;
     pointer-events: all;
     transform: translate(-50%, -50%) scale(1);
 }

 /* Responsive */
 @media (max-width: 480px) {

     .modal-md,
     .modal-lg,
     .modal-blur {
         width: 95%;
         padding: 20px;
     }
 }


 /* Absolute Center Spinner */
 .loading {
     position: fixed;
     z-index: 999;
     height: 2em;
     width: 2em;
     overflow: show;
     margin: auto;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
 }

 /* Transparent Overlay */
 .loading:before {
     content: '';
     display: block;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(rgba(20, 20, 20, 0.956), rgba(0, 0, 0, 0.936));

     background: -webkit-radial-gradient(rgba(20, 20, 20, 0.97), rgba(0, 0, 0, 0.95));
 }

 /* :not(:required) hides these rules from IE9 and below */
 .loading:not(:required) {
     /* hide "loading..." text */
     font: 0/0 a;
     color: transparent;
     text-shadow: none;
     background-color: transparent;
     border: 0;
 }

 .loading:not(:required):after {
     content: '';
     display: block;
     font-size: 10px;
     width: 1em;
     height: 1em;
     margin-top: -0.5em;
     -webkit-animation: spinner 150ms infinite linear;
     -moz-animation: spinner 150ms infinite linear;
     -ms-animation: spinner 150ms infinite linear;
     -o-animation: spinner 150ms infinite linear;
     animation: spinner 150ms infinite linear;
     border-radius: 0.5em;
     -webkit-box-shadow: rgba(255, 255, 255, 0.75) 1.5em 0 0 0, rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) 0 1.5em 0 0, rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) -1.5em 0 0 0, rgba(255, 255, 255, 0.75) -1.1em -1.1em 0 0, rgba(255, 255, 255, 0.75) 0 -1.5em 0 0, rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
     box-shadow: rgba(255, 255, 255, 0.75) 1.5em 0 0 0, rgba(255, 255, 255, 0.75) 1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) 0 1.5em 0 0, rgba(255, 255, 255, 0.75) -1.1em 1.1em 0 0, rgba(255, 255, 255, 0.75) -1.5em 0 0 0, rgba(255, 255, 255, 0.75) -1.1em -1.1em 0 0, rgba(255, 255, 255, 0.75) 0 -1.5em 0 0, rgba(255, 255, 255, 0.75) 1.1em -1.1em 0 0;
 }

 /* Animation */

 @-webkit-keyframes spinner {
     0% {
         -webkit-transform: rotate(0deg);
         -moz-transform: rotate(0deg);
         -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
         transform: rotate(0deg);
     }

     100% {
         -webkit-transform: rotate(360deg);
         -moz-transform: rotate(360deg);
         -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }

 @-moz-keyframes spinner {
     0% {
         -webkit-transform: rotate(0deg);
         -moz-transform: rotate(0deg);
         -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
         transform: rotate(0deg);
     }

     100% {
         -webkit-transform: rotate(360deg);
         -moz-transform: rotate(360deg);
         -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }

 @-o-keyframes spinner {
     0% {
         -webkit-transform: rotate(0deg);
         -moz-transform: rotate(0deg);
         -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
         transform: rotate(0deg);
     }

     100% {
         -webkit-transform: rotate(360deg);
         -moz-transform: rotate(360deg);
         -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }

 @keyframes spinner {
     0% {
         -webkit-transform: rotate(0deg);
         -moz-transform: rotate(0deg);
         -ms-transform: rotate(0deg);
         -o-transform: rotate(0deg);
         transform: rotate(0deg);
     }

     100% {
         -webkit-transform: rotate(360deg);
         -moz-transform: rotate(360deg);
         -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
         transform: rotate(360deg);
     }
 }

 .loading {
     position: fixed;
     z-index: 999;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: radial-gradient(rgba(240, 248, 16, 0.815), rgba(251, 28, 28, 0.806));
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* Kontainer isi loading */
 .loading-content {
     text-align: center;
     color: white;
 }

 /* Logo */
 .loading-logo {
     width: 100px;
     height: auto;
     animation: pulse 1.5s infinite ease-in-out;
     margin-bottom: 10px;
 }

 /* Teks memuat */
 .loading-text {
     font-size: 1.2rem;
     font-weight: 400;
     color: #fff;
     animation: fadeText 1.5s infinite ease-in-out;
 }

 /* Efek pulse untuk logo */
 @keyframes pulse {
     0% {
         transform: scale(1);
         opacity: 1;
     }

     50% {
         transform: scale(1.05);
         opacity: 0.9;
     }

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

 /* Efek berkedip halus untuk teks */
 @keyframes fadeText {

     0%,
     100% {
         opacity: 1;
     }

     50% {
         opacity: 0.6;
     }
 }