/* Plus Jakarta Sans - Bold */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/admin/fonts/PlusJakartaSans-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
}

/* Plus Jakarta Sans - Bold Italic */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/admin/fonts/PlusJakartaSans-BoldItalic.ttf') format('truetype');
    font-weight: 700;
    font-style: italic;
}

/* Plus Jakarta Sans - Extra Bold */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/admin/fonts/PlusJakartaSans-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
}

/* Plus Jakarta Sans - Extra Bold Italic */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/admin/fonts/PlusJakartaSans-ExtraBoldItalic.ttf') format('truetype');
    font-weight: 800;
    font-style: italic;
}

/* Plus Jakarta Sans - Extra Light */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/admin/fonts/PlusJakartaSans-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
}

/* Plus Jakarta Sans - Extra Light Italic */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/admin/fonts/PlusJakartaSans-ExtraLightItalic.ttf') format('truetype');
    font-weight: 200;
    font-style: italic;
}

/* Plus Jakarta Sans - Italic */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/admin/fonts/PlusJakartaSans-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
}

/* Plus Jakarta Sans - Light */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/admin/fonts/PlusJakartaSans-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

/* Plus Jakarta Sans - Light Italic */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/admin/fonts/PlusJakartaSans-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

/* Plus Jakarta Sans - Medium */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/admin/fonts/PlusJakartaSans-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

/* Plus Jakarta Sans - Medium Italic */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/admin/fonts/PlusJakartaSans-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
}

/* Plus Jakarta Sans - Regular */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/admin/fonts/PlusJakartaSans-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* Plus Jakarta Sans - Semi Bold */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/admin/fonts/PlusJakartaSans-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

/* Plus Jakarta Sans - Semi Bold Italic */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('/assets/admin/fonts/PlusJakartaSans-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif;
    background: linear-gradient(90deg, var(--deepocean) 60%, var(--gold));
    /* Teks putih untuk kontras yang kuat */
    /* Add padding to push content below the navbar */
}

.text-deepocean {
    color: var(--deepocean) !important;
}

.text-cream {
    color: var(--cream) !important;
}

.text-ivory {
    color: var(--ivory) !important;
}

.bg-deepocean {
    background-color: var(--deepocean) !important;
}

.bg-beige {
    background-color: var(--beige) !important;
}

.bg-cream {
    background-color: var(--cream) !important;
}

.bg-ocean {
    background-color: var(--ocean) !important;
}

.bg-ivory {
    background-color: var(--ivory) !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Urbanist', sans-serif;
}

:root {
    --nav-bg: rgba(22, 28, 36, .75);
    --nav-bg-scrolled: rgba(22, 28, 36, .90);
    --nav-border: rgba(255, 255, 255, .08);
    --nav-text: #ecf0f1;
    /* --nav-accent: #f39c12; */
    --nav-accent: #5B88B2;
    --nav-hover: #34495e;

    --deepocean: #2C365A;
    --beige: #C4BCB0;
    --cream: #EEE8DF;
    --ocean: #5B88B2;
    --yellow: #fff000;
    --blue: #044fa0;
    --ivory: #ffffe3;
    --pearl: #fffdf5;
    --gold: #efbf04;
}

/* ===== Shell & brand ===== */
.site-nav.navbar {
    background: var(--nav-bg) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--nav-border);
    transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
    -webkit-transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
    -moz-transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
    -ms-transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
    -o-transition: background .25s ease, box-shadow .25s ease, border-color .25s ease;
    padding: 1rem 5rem 1rem 5rem;
}

/* Remove padding on mobile devices */
@media (max-width: 991px) {
    .site-nav.navbar {
        padding: 0;
        /* Remove padding on mobile screens */
    }
}


.site-nav.navbar.scrolled {
    background: var(--nav-bg-scrolled) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
}

.site-nav .navbar-brand img {
    height: 40px;
    display: block;
}

/* ===== Links ===== */
.site-nav .navbar-nav {
    gap: 0.25rem;
}

@media (min-width: 992px) {
    .site-nav .navbar-nav {
        gap: .75rem;
    }
}

.site-nav .nav-link {
    position: relative;
    color: var(--nav-text) !important;
    opacity: .95;
    padding: .5rem .9rem;
    border-radius: .65rem;
    transition: color .25s ease, background-color .25s ease, opacity .25s ease;
    font-weight: 300;
    letter-spacing: .2px;
    font-size: .95rem;
}

.site-nav .nav-link:hover {
    background-color: var(--nav-hover);
    color: var(--yellow) !important;
}

/* accent underline */
/* accent underline */
.site-nav .nav-link::after {
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 6px;
    height: 2px;
    background: linear-gradient(90deg, var(--nav-accent), var(--beige));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s ease;
    border-radius: 2px;
}

.site-nav .nav-link:hover::after,
.site-nav .nav-link.active::after {
    transform: scaleX(1);
}

.site-nav .nav-link.active {
    color: #fff000 !important;
    background: var(--nav-accent);
}

/* ===== Dropdown (glass, rounded) ===== */
.site-nav .dropdown-menu {
    background: rgba(32, 40, 52, .96);
    backdrop-filter: blur(12px);
    border: 1px solid var(--nav-border);
    border-radius: 14px;
    padding: .4rem;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .35);
    min-width: 220px;
    display: none;
    z-index: 1000;
}

.site-nav .dropdown-menu.show {
    display: block;
}

/* keep Bootstrap behaviour for mobile */

.site-nav .dropdown-item {
    color: var(--nav-text);
    border-radius: 10px;
    padding: .55rem .75rem;
    transition: background-color .2s ease, color .2s ease, transform .15s ease;
}

.site-nav .dropdown-item:hover {
    background: rgba(91, 136, 178, 50%) !important;
    color: var(--yellow);
    transform: translateX(2px);
}

.site-nav .dropdown-item.active {
    background: var(--deepocean);
    color: var(--yellow);
}


/* Submenu position */
.site-nav .dropdown-submenu {
    position: relative;
}

.site-nav .dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -.25rem;
}

/* Hover open (desktop only, anak langsung saja) */
@media (min-width: 992px) and (hover: hover) {
    .site-nav .dropdown:hover>.dropdown-menu {
        display: block;
    }

    .site-nav .dropdown-submenu:hover>.dropdown-menu {
        display: block;
    }
}

/* Right-edge flip support (dipakai JS auto-flip) */
.site-nav .dropdown-menu.dropdown-menu-end {
    left: auto;
    right: 0;
}

.site-nav .dropdown-menu.dropdown-menu-end .dropdown-submenu>.dropdown-menu {
    left: auto;
    right: 100%;
}

.site-nav .dropdown-submenu>.dropdown-menu.submenu-end {
    left: auto;
    right: 100%;
}

/* Toggler */
.site-nav .navbar-toggler {
    border-color: var(--nav-text);
}

.site-nav .navbar-toggler:focus {
    box-shadow: 0 0 0 .2rem rgba(18 89 243 .25);
}

/* Parent link yg punya submenu perlu ruang di kanan utk panah */
.site-nav .dropdown-item.dropdown-toggle {
    position: relative;
    padding-right: 1.75rem;
    /* beri space utk panah */
    white-space: nowrap;
}

/* Panah submenu (level-2) – rata kanan & center vertikal */
.site-nav .dropdown-submenu>.dropdown-toggle::after {
    content: "›";
    /* bisa ganti: "\203A" atau "\25B8" */
    position: absolute;
    right: .6rem;
    /* jarak dari kanan */
    top: 50%;
    transform: translateY(-50%);
    /* center vertikal */
    font-weight: 300;
    font-size: 1rem;
    color: rgba(255, 255, 255, .65);
    border: 0 !important;
    /* matikan caret default Bootstrap */
    pointer-events: none;
    /* klik tetap ke link, bukan panah */
    transition: transform .18s ease, color .18s ease, opacity .18s ease;
}

/* Hover/open state: sedikit gerak & warna accent */
.site-nav .dropdown-submenu:hover>.dropdown-toggle::after,
.site-nav .dropdown-submenu>.dropdown-toggle[aria-expanded="true"]::after {
    color: var(--nav-accent);
    transform: translateY(-50%) translateX(2px);
}

/* Jika top-level dropdown di ujung kanan di-flip (dropdown-menu-end), panah tetap di kanan */
.site-nav .dropdown-menu.dropdown-menu-end .dropdown-submenu>.dropdown-toggle::after {
    right: .6rem;
    left: auto;
}

.site-nav .nav-link:focus-visible,
.site-nav .dropdown-item:focus-visible {
    outline: 2px solid rgba(243, 156, 18, .6);
    /*ataupakaivar(--nav-accent)*/
    outline-offset: 2px;
    border-radius: 8px;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -ms-border-radius: 8px;
    -o-border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
    .site-nav * {
        transition: none !important;
    }
}

/* Hero Section dengan Video */
#hero {
    border-radius: 0 0 40px 40px;
    position: relative;
    height: 100vh;
    overflow: hidden;
    -webkit-border-radius: 0 0 40px 40px;
    -moz-border-radius: 0 0 40px 40px;
    -ms-border-radius: 0 0 40px 40px;
    -o-border-radius: 0 0 40px 40px;
}

#hero video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    z-index: -1;
    transform: translate(-50%, -50%);
    object-fit: cover;
    /* Agar video tetap menutupi area hero tanpa terdistorsi */
}

/* Overlay untuk teks dan panah */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
    padding: 0 1rem;
    z-index: 10;
}

.hero-overlay h1 {
    font-size: 3rem;
    font-weight: 600;
}

.hero-overlay p {
    font-size: 1.2rem;
    margin: 1rem 0;
}

.scroll-down {
    margin-top: 10vh;
    font-size: 2rem;
    cursor: pointer;
    animation: bounce 2s infinite;
}

@keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(10px);
    }

    60% {
        transform: translateY(5px);
    }
}

.lazy-section {
    opacity: 0;
    transform: translateY(20px);
    /* Mulai sedikit di bawah */
    transition: opacity 1s ease-out, transform 1s ease-out;
    /* Efek transisi yang smooth */
}

.lazy-section.loaded {
    opacity: 1;
    transform: translateY(0);
    /* Posisi normal setelah dimuat */
}

/* Animated Underline for Section Titles */
.animate-underline {
    height: 3px;
    width: 100px;
    background: var(--deepocean);
    margin-top: 8px;
    position: relative;
    overflow: hidden;
}

.animate-underline::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.5);
    transform: translateX(-100%);
    animation: underline-shimmer 2s infinite;
    -webkit-animation: underline-shimmer 2s infinite;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
}

@keyframes underline-shimmer {
    100% {
        transform: translateX(100%);
    }
}

/* Custom Border Bottom Style */
.border-bottom-custom {
    position: relative;
    display: inline-block;
    padding-bottom: 10px;
    /* Ruang di bawah teks */
}

.border-bottom-custom::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3px;
    /* Tebal border */
    background: linear-gradient(90deg, var(--deepocean), var(--ocean));
    /* Warna gradient keren */
    border-radius: 2px;
    /* Membuat ujung border lebih lembut */
    transition: none;
}

.breadcrumb-item a {
    color: var(--ocean);
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-weight: 500;
}


/* Menambahkan gambar sebagai background di kiri */
.pattern-left {
    background: url('../img/layer1-45-right.png') no-repeat center center;
    background-size: 100%;
    /* This ensures the pattern covers the entire element */
    width: 8%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    z-index: -1;
}


.pattern-right {
    background: url('../img/layer1-45-left.png') no-repeat center center;
    background-size: 100%;
    width: 8%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 1;
    z-index: -1;
}

.pattern-left-minus {
    background: url('../img/layer1-minus45-right.png') center center;
    background-size: 100%;
    background-repeat: no-repeat;
    /* This ensures the pattern covers the entire element */
    width: 8%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 1;
    z-index: -1;
}


.pattern-right-minus {
    background: url('../img/layer1-minus45-left.png') center center;
    background-size: 100%;
    background-repeat: no-repeat;
    width: 8%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 1;
    z-index: -1;
}

.pattern-2-left {
    background: url('../img/layer1-normal-half.png') no-repeat center center;
    background-size: 100%;
    /* This ensures the pattern covers the entire element */
    width: 5%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    rotate: 180deg;
    opacity: 1;
    z-index: -1;
}


.pattern-2-right {
    background: url('../img/layer1-normal-half.png') no-repeat center center;
    background-size: 100%;
    width: 5%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    opacity: 1;
    z-index: -1;
}

.pattern-normal {
    background: url('../img/layer1-normal.png') no-repeat center center;
    background-size: 100%;
    width: 5%;
    height: 100%;
    position: absolute;
    bottom: 0;
    opacity: 1;
    z-index: -1;
}

@media (max-width: 992px) {
    .pattern-left {
        width: 40%;
    }

    .pattern-left-minus {
        width: 40%;
    }


    .pattern-2-left {
        display: none;
    }

    .pattern-right {
        width: 40%;
    }

    .pattern-right-minus {
        width: 40%;
    }

    .pattern-2-right {
        display: none;
    }
}

.btn-bintan {
    border: 0;
    background: linear-gradient(90deg, var(--gold) 10%, var(--deepocean)) !important;
    color: white !important;
}

#shortcut {
    padding-top: 6vh;
    padding-bottom: 6vh;
    position: relative;
}

/* Styling for Sekilas Info Section */
#shortcut .card {
    border-radius: 20px;
    background-color: var(--ivory);
    /*Lightbackgroundforcards*/
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}

#shortcut .card:hover {
    transform: translateY(-5px);
    /* Slight elevation on hover */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    /* Adding shadow on hover */
}

/* Styling for Card Body */
#shortcut .card-body {
    display: flex;
    align-items: center;
    /* Aligning content vertically */
    padding: 20px;
}

/* Styling Icon */
#shortcut .card-body i {
    font-size: 2rem;
    /* Icon size */
    color: #007bff;
    /* Icon color */
}

/* Styling Text Content */
#shortcut .card-body .ms-3 {
    margin-left: 15px;
    /* Space between icon and text */
}

#shortcut .card-body .card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #343a40;
}

#shortcut .card-body .card-text {
    font-size: 0.8rem;
    color: #6c757d;
}

/* Styling the Link */
#shortcut .card-body a {
    font-weight: bold;
    text-transform: uppercase;
    color: #007bff;
    transition: color 0.3s ease;
}

#shortcut .card-body a:hover {
    color: #0056b3;
    /* Darker blue on hover */
}

/* Responsive Styling */
@media (max-width: 992px) {
    #shortcut .card {
        margin: 0 auto;
        /* Centering cards on smaller screens */
    }
}

#banner {
    padding-top: 6vh;
    padding-bottom: 6vh;
    position: relative;
}

#banner .card {
    border-radius: 40px;
    transition: transform 0.3s ease-in-out;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
}

/*Custom Styles for Owl Carousel */
.owl-carousel .item {
    height: 60vh;
    /*Sesuaikantinggisesuaikebutuhan*/
    background-size: cover;
    background-position: center center;
    position: relative;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
    -webkit-transition: transform 0.5s ease, box-shadow 0.5s ease;
    -moz-transition: transform 0.5s ease, box-shadow 0.5s ease;
    -ms-transition: transform 0.5s ease, box-shadow 0.5s ease;
    -o-transition: transform 0.5s ease, box-shadow 0.5s ease;
}

#bannerCarousel img {
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}

#pejabat .pejabat-card {
    border-radius: 16px;
    overflow: hidden;
    background: var(--ivory);
    /* opsional */
    color: var(--deepocean);
    /* opsional */
    border: 1px solid rgba(255, 255, 255, .08);
}

#pejabat .pejabat-photo {
    aspect-ratio: 1 / 1;
    width: 100%;
    overflow: hidden;
    background: var(--ivory);
    /* opsional */
}

#pejabat .pejabat-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* <-- ganti contain -> cover */
    object-position: center;
    display: block;
}


#pejabat .pejabat-body {
    padding: 12px 14px 16px;
    text-align: center;
}

#pejabat .pejabat-nama {
    font-size: 0.8rem;
    margin: 0 0 4px;
    font-weight: 700;
}

#pejabat .pejabat-jabatan {
    margin: 0;
    opacity: .8;
    font-size: .9rem;
}


/* Custom Styles for Sambutan Section */
#sambutan {
    position: relative;
}

#sambutan .card {
    background-color: var(--ivory);
    position: relative;
    transition: transform 0.3s ease-in-out;
    -webkit-transition: transform 0.3s ease-in-out;
    -moz-transition: transform 0.3s ease-in-out;
    -ms-transition: transform 0.3s ease-in-out;
    -o-transition: transform 0.3s ease-in-out;
}

#sambutan .card:hover {
    transform: translateY(-10px);
    /* Efek sedikit terangkat saat hover */
}

#sambutan .card-body {
    display: flex;
    align-items: center;
    /* Menyusun konten secara vertikal */

    padding-right: 50px;
    padding-left: 50px;
    /* Memberikan ruang yang cukup di dalam kartu */
}

/* Membuat tulisan lebih elegan */
#sambutan .text-muted {
    line-height: 1.6;
    font-size: 1.1rem;
}

#sambutan img {
    max-height: 500px;
    z-index: 2
}

#sambutan i.bi-quote {
    font-size: 2rem;
    color: #6c757d;
    transform: rotate(-15deg);
    /* Rotasi ikon */
    z-index: 2;
}

/* Membuat seluruh layout lebih responsif */
@media (max-width: 768px) {
    #sambutan .card-body {
        padding: 20px;
        /* Menyesuaikan padding untuk tampilan mobile */
    }
}


/* Styling for News Section */
#news {
    border-radius: 40px;
    padding: 60px 0;
    margin-top: 40px;
    position: relative;
}

/* Scoped Card Styling for News Section */
#news .card {
    border-radius: 20px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
}

#news .card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transform: translateY(-10px);
}

#news .card-img-top {
    border-radius: 5%;
    object-fit: cover;
    height: 250px;
    transition: transform 0.3s ease;
    -webkit-border-radius: 5%;
    -moz-border-radius: 5%;
    -ms-border-radius: 5%;
    -o-border-radius: 5%;
}

#news .card:hover .card-img-top {
    border-radius: 5%;
    transform: scale(1.05);
}

#news .card-body {
    padding: 20px;
    position: relative;
    /* konteks untuk elemen absolute */
}

#news .card-title {
    font-weight: 600;
    color: #333;
    transition: color 0.3s ease;
}

#news .card-title:hover {
    color: #007bff;
}

#news .card-text {
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 20px;
}

/* >>> Merged: Views count (hindari duplikasi) */
#news .views-count {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0.75rem;
    background-color: rgba(252, 252, 252, 0.8);
    padding: 5px 10px;
    border-radius: 5px;
    backdrop-filter: blur(2px);
}

/* Responsiveness */
@media (max-width: 768px) {
    #news .card-img-top {
        height: 180px;
    }
}

/* --- Highlighted (Bootstrap Carousel) --- */
#news .highlight-hero-img {
    height: 420px;
    object-fit: cover;
}

@media (max-width: 992px) {
    #news .highlight-hero-img {
        height: 320px;
    }
}

@media (max-width: 576px) {
    #news .highlight-hero-img {
        height: 260px;
    }
}

/* Overlay gradasi di bawah agar caption terbaca */
#news .hero-gradient {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 45%;
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.0));
}

/* Caption dengan panel halus */
#news .bg-caption {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 12px;
    padding: 16px 18px;
}

/* Badge Highlight */
#news .highlight-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: linear-gradient(135deg, var(--deepocean), var(--ocean) 70%);
    color: var(--cream);
    font-weight: 700;
    font-size: 0.8rem;
    padding: 6px 10px;
    border-radius: 999px;
    z-index: 2;
}

/* Kustom indikator & kontrol carousel agar match tema */
#news .carousel-indicators [data-bs-target] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #d0d5dd;
}

#news .carousel-indicators .active {
    background-color: #111827;
}

#news .carousel-control-prev-icon,
#news .carousel-control-next-icon {
    filter: invert(1) grayscale(100%);
}

/* Panel kanan: Berita Terakhir */
#news .latest-panel .card-body {
    padding: 20px;
}

#news .latest-list .latest-item {
    padding: 10px 0;
    border-bottom: 1px solid #f1f3f5;
}

#news .latest-list .latest-item:last-child {
    border-bottom: 0;
}

#news .mini-thumb {
    width: 88px;
    height: 66px;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

#news .latest-title {
    font-weight: 600;
    color: #333;
    line-height: 1.25;
    margin-bottom: 6px;
}

#news .latest-title:hover {
    color: #007bff;
}

#news .news-category {
    position: absolute;
    top: 15px;
    left: 15px;
    background: linear-gradient(135deg, var(--deepocean), var(--ocean) 70%);
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
}


#announcement {
    position: relative;
    border-radius: 40px 40px 0 0;
    padding: 60px 0;
    margin-top: 40px;
    -webkit-border-radius: 40px 40px 0 0;
    -moz-border-radius: 40px 40px 0 0;
    -ms-border-radius: 40px 40px 0 0;
    -o-border-radius: 40px 40px 0 0;
}

#announcement .card {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
}

#announcement .card:hover {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    transform: translateY(-10px);
}

#announcement .card-img-top {
    object-fit: cover;
    height: 200px;
    transition: transform 0.3s ease;
    -webkit-transition: transform 0.3s ease;
    -moz-transition: transform 0.3s ease;
    -ms-transition: transform 0.3s ease;
    -o-transition: transform 0.3s ease;
}

#announcement .card:hover .card-img-top {
    transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -o-transform: scale(1.05);
}

#announcement .card-body {
    background-color: #fff;
    padding: 20px;
    position: relative;
    /* Membuat card-body sebagai konteks untuk positioning absolute */

}

#announcement .card-title {
    font-weight: 600;
    color: #333;
    transition: color 0.3s ease;
}

#announcement .views-count {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0.75rem;
    background-color: rgba(252, 252, 252, 0.7);
    padding: 5px 10px;
    border-radius: 5px;
}

#announcement .card-title:hover {
    color: #007bff;
    /* On hover change color */
}

#announcement .card-text {
    font-size: 1rem;
    color: #6c757d;
    margin-bottom: 20px;
}

/* Responsiveness */
@media (max-width: 768px) {
    #announcement .card-img-top {
        height: 180px;
        /* Slightly smaller image on smaller screens */
    }
}

/* Styling for News Section */
#video {
    padding: 60px 0;
    margin-top: 40px;
}

/* Mengatur kontainer gambar agar memiliki ukuran tetap */
.video-item {
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
    height: 250px;
    /* Tentukan tinggi tetap untuk kontainer thumbnail */
    width: 100%;
    overflow: hidden;
    /* Sembunyikan bagian gambar yang keluar dari kontainer */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* Menambahkan efek zoom saat hover */
.video-item:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

/* Memanipulasi posisi gambar agar garis hitam hilang */
.video-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Menutupi seluruh kontainer dengan gambar */
    object-position: top;
    /* Mengatur posisi gambar di bagian atas */
    border-radius: 8px;
    transition: transform 0.3s ease-in-out;
}

.iframe-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    /* Rasio aspek 16:9 (56.25%) */
    overflow: hidden;
}

.iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 1em;
    -webkit-border-radius: 1em;
    -moz-border-radius: 1em;
    -ms-border-radius: 1em;
    -o-border-radius: 1em;
}

#tautan {
    position: relative;
    padding: 40px 0;
    margin-top: 60px;
    border-radius: 10px;
    /* Sedikit radius pada keseluruhan section */
}

#tautan .card {
    border-radius: 15px;
    /* Membuat sudut lebih melengkung */
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
}

#tautan .card:hover {
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
    transform: translateY(-8px);
}

#tautan .card-img-top {
    width: 100%;
    /* Membuat gambar mengisi lebar kontainer */
    height: 80px;
    /* Menetapkan tinggi gambar seragam */
    object-fit: contain;
    /* Menjaga gambar tetap proporsional, mengisi kontainer */
    border-radius: 10px;
    /* Sedikit kelengkungan pada sudut gambar */
    box-sizing: border-box;
    /* Agar padding atau border tidak mempengaruhi ukuran */
}

@media (max-width: 768px) {
    #tautan .card-img-top {
        height: 80px;
        /* Mengurangi tinggi gambar pada layar kecil */
    }
}

#tautan .row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    /* Menambahkan jarak antar item */
    justify-content: center;
    /* Menjaga item tetap berada di tengah */
}

#tautan h2 {
    font-size: 2rem;
    color: #343a40;
    margin-bottom: 30px;
}

#infografis {
    border-radius: 40px;
    padding: 60px 0;
    margin-top: 40px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
}

#rating {
    position: relative;
    padding: 60px 0;
    margin-top: 40px;
}

/* Footer Custom Styling */
.footer-exquisite {
    background: linear-gradient(135deg, var(--deepocean), var(--ocean), var(--cream));
    background-size: 600% 600%;
    animation: gradientBG 15s ease infinite;
    color: white;
    position: relative;
    overflow: hidden;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.2);
    -webkit-animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

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

.footer-exquisite::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 1;
}

.footer-content {
    position: relative;
    z-index: 2;
}

.footer-heading {
    font-weight: 700;
    margin-bottom: 20px;
    padding-bottom: 15px;
    position: relative;
    display: inline-block;
}

.footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 40px;
    background: #fdbb2d;
    transition: width 0.3s ease;
}

.footer-container:hover .footer-heading::after {
    width: 100%;
}

.contact-info i {
    width: 25px;
    height: 25px;
    line-height: 25px;
    margin-right: 10px;
    text-align: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.social-icons a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    margin-right: 10px;
    transition: all 0.3s ease;
    color: white;
    text-decoration: none;
}

.social-icons a:hover {
    transform: translateY(-5px);
    background-color: #fdbb2d;
    color: #000;
}

.footer-links a {
    display: block;
    color: #fff;
    text-decoration: none;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    position: relative;
    padding-left: 15px;
}

.footer-links a::before {
    content: "-";
    position: absolute;
    left: 0;
    top: 0;
    transition: transform 0.3s ease;
}

.footer-links a:hover {
    color: #fdbb2d;
    transform: translateX(5px);
}

.footer-links a:hover::before {
    transform: translateX(5px);
    color: #fdbb2d;
}

.stats-container {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 15px;
    transition: all 0.3s ease;
}

.stats-container:hover {
    background-color: rgba(255, 255, 255, 0.15);
    transform: translateY(-5px);
}

.stats-item {
    text-align: center;
    padding: 10px;
}

.stats-number {
    font-size: 24px;
    font-weight: 700;
    color: #fdbb2d;
    margin-bottom: 5px;
}

.stats-label {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

.footer-bottom {
    background-color: rgba(0, 0, 0, 0.3);
    padding: 20px 0;
    margin-top: 40px;
}

.footer-bottom p {
    margin-bottom: 0;
}

.footer-logo {
    max-width: 140px;
    margin-bottom: 20px;
    filter: brightness(0) invert(1);
}

.progress {
    height: 25px;
}

.progress-bar {
    height: 100%;
    text-align: center;
    color: white;
    font-weight: bold;
}


/* Animation */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.animated {
    animation: fadeInUp 0.5s ease forwards;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .footer-section {
        margin-bottom: 30px;
    }
}

/* Media Query for Mobile */
@media (max-width: 768px) {
    .card-columns {
        column-count: 1;
    }
}