/* ==== WHATSAPP FLOAT BUTTON ==== */
.page-link {
    width: auto !important;
    padding: 5px;
}

@keyframes floating {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.whatsapp-float {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1000;
    background-color: #25d366;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    animation: floating 3s ease-in-out infinite;
    transition: transform 0.3s ease-in-out;
}
.whatsapp-float img {
    width: 35px;
    height: 35px;
}
.whatsapp-float:hover {
    transform: scale(1.1);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
}

/* ==== GLOBAL ELEMENTS ==== */
:root {
    --custom-rounded: 15px;
}

.dropdown-menu,
.card {
    border-radius: var(--custom-rounded) !important;
    overflow: hidden; 
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--custom-primary-color);
}
.link-dark:hover,
a.text-reset:hover,
.text-reset a:hover {
    color: var(--custom-primary-color) !important;
}

/* ==== DARK MODE ONLY FOR .content-wrapper ==== */
.dark-mode .content-wrapper {
    background-color: #212529;
    color: white;
}

/* Background dan teks elemen dengan bg-light */
.dark-mode .content-wrapper .bg-light {
    background-color: #212529 !important;
    color: white !important;
}

/* Heading (h1-h6) */
.dark-mode .content-wrapper h1:not(.no-dark-mode),
.dark-mode .content-wrapper h2:not(.no-dark-mode),
.dark-mode .content-wrapper h3:not(.no-dark-mode),
.dark-mode .content-wrapper h4:not(.no-dark-mode),
.dark-mode .content-wrapper h5:not(.no-dark-mode),
.dark-mode .content-wrapper h6:not(.no-dark-mode) {
    color: #ffffff !important;
}

/* Text umum dan link */
.dark-mode .content-wrapper p,
.dark-mode .content-wrapper span:not(.no-dark-mode),
.dark-mode .content-wrapper .text-dark:not(.no-dark-mode) {
    color: #e0e0e0 !important;
}
.dark-mode .content-wrapper a,
.dark-mode .content-wrapper .link-dark,
.dark-mode .content-wrapper .link-body {
    /* color: #fff !important; */
}
.dark-mode .content-wrapper .text-reset a:hover {
    color: var(--custom-primary-dark-color) !important;
}

/* Modal */
.dark-mode .content-wrapper .modal-content {
    background-color: #212529 !important;
    color: white !important;
}
.dark-mode .content-wrapper .modal-dialog h1,
.dark-mode .content-wrapper .modal-dialog h2,
.dark-mode .content-wrapper .modal-dialog h3,
.dark-mode .content-wrapper .modal-dialog h4,
.dark-mode .content-wrapper .modal-dialog h5,
.dark-mode .content-wrapper .modal-dialog h6,
.dark-mode .content-wrapper .modal-dialog .text-dark {
    color: #ffffff !important;
}

/* Counter section, card, icons, background decoration */
.dark-mode .content-wrapper .bg-soft-primary {
    background-color: #2d2e30 !important;
}
.dark-mode .content-wrapper .wrapper.bg-soft-primary.angled.lower-start::after,
.dark-mode .content-wrapper .wrapper.bg-soft-primary.angled.upper-start::before {
    border-left-color: #2d2e30;
}
.dark-mode .content-wrapper .card {
    background-color: #212529 !important;
    color: white !important;
}
.dark-mode .content-wrapper .icon-svg,
.dark-mode .content-wrapper .social:not(.no-dark-mode) .uil,
.dark-mode .content-wrapper .social:not(.no-dark-mode) svg {
    filter: invert(1) sepia(1) saturate(5) hue-rotate(300deg);
}
.dark-mode .content-wrapper .bg-decoration {
    background-color: #373531 !important;
}

/* Post content */
.post .post-content {
    color: black !important;
}
.dark-mode .content-wrapper .post .post-content {
    color: white !important;
}
.dark-mode .content-wrapper .post-category.text-line:not(.text-white)::before {
    background: var(--custom-primary-dark-color);
}
.dark-mode .content-wrapper .post-category.text-line:not(.text-white) a {
    color: var(--custom-primary-dark-color);
}

/* Hashtag Button */
.dark-mode .content-wrapper .btn-soft-ash {
    background-color: #eeeff0;
}

/* Form Input */
.dark-mode .content-wrapper .form-control {
    background-color: #212529 !important;
    /* color: white !important; */
    border-color: #495057;
}
.dark-mode .content-wrapper .form-control:focus {
    border-color: #9fbcf0;
}
.dark-mode .content-wrapper .form-control option {
    color: white !important;
}

/* Pagination */
.dark-mode .content-wrapper .pagination .page-link {
    background-color: #212529 !important;
    border-color: #212529 !important;
}

/* Table */
.dark-mode .content-wrapper table th,
.dark-mode .content-wrapper table td {
    color: white !important;
    border-color: #444;
}
.dark-mode .content-wrapper table th[data-sortby] .span_wrapper {
    filter: invert(1);
}

/* Share Dropdown */
.dark-mode .content-wrapper .dropdown-menu {
    background-color: #212529 !important;
}
.dark-mode .content-wrapper .dropdown-item {
    color: white;
}
.dark-mode .content-wrapper .dropdown-item:hover {
    color: var(--custom-primary-dark-color);
}

/* Video text */
.video-text {
    color: black !important;
}
.dark-mode .content-wrapper .video-text {
    color: white !important;
}

/* Read more link */
.dark-mode .read-more-link,
.dark-mode .read-more-link:hover {
    color: var(--custom-primary-dark-color);
}

/* Social Cards */
.dark-mode .content-wrapper .post-card,
.dark-mode .content-wrapper .ig-card,
.dark-mode .content-wrapper .youtube-card {
    border-color: #1b1f22 !important;
}
.dark-mode .content-wrapper .ig-caption {
    background-color: #1b1f22 !important;
}

.dark-mode .temukan-kami {
    background-color: #212529 !important;
}

.dark-mode .hubungi-kami {
	background-color: #212529 !important;
}

/* ==== NAVBAR TETAP DEFAULT KECUALI .fixed ==== */
.dark-mode .navbar.fixed {
    background-color: #212529 !important;
    color: white !important;
}
.dark-mode .navbar.fixed .hamburger {
    filter: brightness(0) invert(1);
}
.dark-mode .nav-link {
    color: white !important;
}

/* Dropdown besar (navbar) */
@media (min-width: 992px) {
    .dark-mode .nav-item .dropdown-menu {
        background-color: #212529 !important;
    }
    .dark-mode .nav-item .dropdown-item {
        color: white;
    }
    .dark-mode .nav-item .dropdown-item:hover {
        color: var(--custom-primary-dark-color);
    }
}

/* ==== BERITA SEKOLAH TERKINI ==== */
html.dark .berita-sd {
    background-color: #2c2c2c !important;
}
html.dark .berita-sd h2.display-4.text-primary {
    color: #ffffff !important;
}
html.dark .post-card-sd {
    background-color: #3d3d3d !important;
    border: 1px solid #4a4a4a !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4) !important;
}
html.dark .post-card-sd:hover {
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.15) !important;
}
html.dark .post-card-sd .post-title-sd a {
    color: #ffffff !important;
}
html.dark .post-card-sd .post-category-sd {
    color: #cccccc !important;
}
html.dark .post-card-sd .text-muted,
html.dark .post-card-sd .fa-calendar-alt {
    color: #bbbbbb !important;
}
html.dark .owl-carousel .owl-nav button {
    background: #4a4a4a !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important;
}
html.dark .owl-carousel .owl-nav button:hover {
    background: #0d6efd !important;
    color: #fff !important;
}
html.dark .owl-carousel .owl-dots button.owl-dot {
    background: #555555 !important;
}
html.dark .owl-carousel .owl-dots button.owl-dot.active {
    background: #0d6efd !important;
}
html.dark .btn-outline-primary {
    color: #ffffff !important;
    border-color: #ffffff !important;
}
html.dark .btn-outline-primary:hover {
    background-color: #0d6efd !important;
    color: #ffffff !important;
    border-color: #0d6efd !important;
}

/* ==== E-NEWS SECTION ==== */
html.dark .wrapper.bg-light.wrapper-border {
    background-color: #2c2c2c !important;
    border-color: #4a4a4a !important;
}
html.dark .wrapper.bg-light.wrapper-border h2.display-4.mb-3 {
    color: #ffffff !important;
}
html.dark .item-inner .card {
    background-color: #3d3d3d !important;
    border: 1px solid #4a4a4a !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.4) !important;
}

/* Social Icons Custom */
.dark-mode .social-custom-primary a i,
.dark-mode .social-custom-primary a svg {
    color: #ffffff !important;
    fill: #ffffff !important;
}
/* Default: Light mode = HITAM */
.modern-title {
  font-weight: 600;
  font-size: 1.8rem;
  color: #000000 !important; /* hitam di light mode */
}

.dark .modern-title,
.dark-mode .modern-title {
  color: #ffffff !important; /* putih di dark mode */
}

html:not(.dark) .modern-title,
body:not(.dark-mode) .modern-title {
  color: #000000 !important;
}

/* ==== FIX BERITA & NEWS ==== */

/* Mode siang (default) */
.berita-section,
.news-section {
    background-color: #ffffff !important;
    color: #222 !important;
}

.berita-section a,
.news-section a {
    color: inherit !important;
    text-decoration: none;
}

.berita-section a:hover,
.news-section a:hover {
    color: #007bff !important;
}

/* Ikon share siang */
.berita-section .share-icon,
.news-section .share-icon {
    color: #555 !important;
    background: rgba(255, 255, 255, 0.8) !important;
    padding: 4px;
    border-radius: 4px;
    transition: background 0.3s, color 0.3s;
}

.berita-section .share-icon:hover,
.news-section .share-icon:hover {
    background: #007bff !important;
    color: #fff !important;
}

/* Mode malam */
html.dark .berita-section,
html.dark .news-section {
    background-color: #1a1a1a !important;
    color: #eee !important;
}

html.dark .berita-section a,
html.dark .news-section a {
    color: #ccc !important;
}

html.dark .berita-section a:hover,
html.dark .news-section a:hover {
    color: #4da3ff !important;
}

/* Ikon share malam */
html.dark .berita-section .share-icon,
html.dark .news-section .share-icon {
    color: #ddd !important;
    background: rgba(40, 40, 40, 0.9) !important;
}

html.dark .berita-section .share-icon:hover,
html.dark .news-section .share-icon:hover {
    background: #4da3ff !important;
    color: #fff !important;
}