*{
    margin: 0;
    padding: 0;
}

:root{
    --white: #FFFFFF;
    --black: #1A1A1A;
    --black-overlay: #1A1A1A66;
    --black1: #392F31;
    --gray: #777777;
    --gray1: #E1E1E1;
    --red: #E0070B;
    --red-overlay: #E0070B20;
    --red1: #FA272C;
    --yellow: #F2AA18;
    --yellow-overlay: #F2AA1866;
    --blue: #367AF5;
    --blue2: #0A58CA;
    --navy: #1C658C;
    --navy-overlay: #1C658C66;
    --green: #30A84F;
    --green-overlay: #30A84F66;
    --menu-radius: 40px;
}

html, body{
    margin: 0;
    padding: 0;
    height: 100%;
    scroll-behavior: smooth;
}

body{
    display: flex;
    flex-direction: column;
}

p{
    margin: 0;
}

header{
    border-bottom: var(--red) 1px solid;
    box-shadow: var(--red) 0 4px 8px;
    background-color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
    height: 70px;
}

.header{
    display: flex;
    width: 90%;
    justify-content: center;
    align-items: center;
}

.logo{
    flex: 0 0 25%;
    display: flex;
    text-align: center;
    padding: 10px 0px;
}

.logo img{
    height: 60px;
    width: auto;
}

.navigation{
    flex: 0 0 75%;
    padding: 0px 20px;
    display: flex;
    align-items: center;
}

.menu{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0;
    padding: 0;
}

h1,h2,h3,h4,h5,h6 {
    font-weight: bolder;
}

.menu li a{
    text-decoration: none;
    color: var(--black);
    font-weight: bold;
    border-bottom: var(--white) 3px solid;
    transition: all 0.3s ease;
}

.menu li a:hover{
    color: var(--red);
    border-bottom: var(--red) 3px solid;
}

.menu li a.active{
    color: var(--red);
    border-bottom: var(--red) 3px solid;
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    background: white;
    padding: 10px;
    list-style: none;
    min-width: 200px;
    z-index: 999;
    width: max-content;
}

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

.menu-footer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
}

.menu-footer li a{
    text-decoration: none;
    color: var(--white);
    border-bottom: var(--black1) 3px solid;
    transition: all 0.3s ease;
}

.menu-footer li a:hover{
    border-bottom: var(--white) 3px solid;
}

.burger-menu{
    display: none;
}

footer{
    background-color: var(--black1);
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer{
    width: 90%;
    display: flex;
    color: var(--white);
    align-items: center;
    justify-content: space-between;
    padding: 20px 0px;
}

.footer-column{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.maps{
    border-radius: 10px;
}

.logo-footer{
    width: 150px;
}

main {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-top: 50px;
}

section{
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px 0;
}

.main-content{
    display: flex;
    justify-content: center;
}

.main-container{
    width: 90%;
}

.isi{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* Home - Hero */
.sec-hero{
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.sec-hero::after{
    content: "";
    position: absolute;
    inset: 0;
    /* subtle bottom-only darkening so cards remain readable; top stays bright */
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.08) 0%,
        rgba(0,0,0,0.18) 50%,
        rgba(0,0,0,0.40) 100%
    );
    z-index: 1;
}

.sec-hero .carousel{
    position: absolute;
    inset: 0;
    z-index: 0;
}

.sec-hero .carousel-item{
    height: 100vh;
}

.sec-hero .carousel-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-content{
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.berita{
    padding: 24px 28px;
    border-radius: 20px;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.28);
    box-shadow: 0 8px 40px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.25);
}

.berita-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #111;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(0,0,0,0.12);
}

.berita-title h1{
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 28px;
    -webkit-text-stroke: 1.5px rgba(255,255,255,0.9);
    paint-order: stroke fill;
}

.berita-title h1::before{
    content: '';
    display: inline-block;
    flex-shrink: 0;
    width: 4px;
    height: 1.1em;
    background: var(--red);
    border-radius: 2px;
}

.berita-content{
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 10px;
}

.berita-left{
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    flex: 0 0 50%;
    background-color: #1A1A1A;
    aspect-ratio: 16/9;
}

.berita-left img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: all 0.3s ease;
}

.berita-left::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient( to top,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,0.9) 50%,
        rgba(0,0,0,0) 100%
    );
}

.berita-left:hover img{
    transform: scale(1.05);
    opacity: 0.8;
}

.berita-badge{
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: var(--red);
    color: var(--white);
    font-size: 12px;
    padding: 5px 10px;
    border-radius: 5px;
}

.berita-info{
    z-index: 2;
    position: absolute;
    bottom: 20px;
    left: 20px;
    color: var(--white);
}

.berita-info h3{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.berita-info p{
    opacity: 0.7;
}

.berita-right{
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.item-terkini{
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    background-color: #1A1A1A;
    border: 1px solid rgba(255,255,255,0.10);
}

.item-terkini img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: all 0.3s ease;
}

.item-terkini::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 60%;
    background: linear-gradient( to top,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,0.9) 50%,
        rgba(0,0,0,0) 100%
    );
}

.item-terkini:hover img{
    transform: scale(1.05);
    opacity: 0.8;
}

.terkini-info{
    z-index: 2;
    position: absolute;
    bottom: 0px;
    left: 0px;
    color: var(--white);
    padding: 10px;
}

.terkini-info h6{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.terkini-info p{
    font-size: 14px;
    opacity: 0.7;
    margin-bottom: 5px;
}

.berita-content .mobile-news-btn{
    display: none;
}

/* Home - layanan */
.sec-title {
    text-align: center;
    color: var(--white);
    margin-bottom: 32px;
}

.layanan-subtitle {
    color: rgba(255,255,255,0.78);
    font-size: 15px;
    font-weight: 400;
    margin: 6px 0 0;
}

/* Portal Layanan section */
.sec-layanan {
    background: linear-gradient(135deg, #b50408 0%, var(--red) 55%, #f51015 100%);
    padding: 48px 0 52px;
    position: relative;
    overflow: hidden;
}

/* Subtle dot-grid overlay on background */
.sec-layanan::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.07) 1px, transparent 1px);
    background-size: 26px 26px;
    pointer-events: none;
}

/* Grid: 5 columns */
.fitur {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 14px;
    align-items: stretch;
    position: relative;
    z-index: 1;
}

/* Glass card */
.fitur-item {
    background: rgba(255,255,255,0.11);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 16px;
    padding: 22px 14px 18px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: 11px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    text-align: center;
    transition: background 0.3s, transform 0.3s ease, box-shadow 0.3s, border-color 0.3s;
    width: 100%;
    max-width: none;
    cursor: pointer;
}

.fitur-item:hover {
    background: rgba(255,255,255,0.22);
    transform: translateY(-5px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.22);
    border-color: rgba(255,255,255,0.40);
    color: #fff;
}

/* Remove circle-only lift — card lifts instead */
.fitur-item:hover .circle {
    transform: none;
    box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}

/* Logo circle */
.circle {
    background: #fff;
    width: 82px;
    height: 82px;
    padding: 13px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
    transition: box-shadow 0.3s ease;
    flex-shrink: 0;
}

.circle img {
    width: 56px;
    height: 56px;
    object-fit: contain;
}

/* "Kunjungi →" label */
.fitur-visit {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-top: auto;
    transition: color 0.3s;
}

.fitur-item:hover .fitur-visit {
    color: rgba(255,255,255,0.90);
}

/* Home - About */
/* About / Mission section */
.sec-about {
    background: #f7f8fa;
    position: relative;
    overflow: hidden;
}

/* Large decorative circle top-right */
.about-bg-shape {
    position: absolute;
    top: -120px;
    right: -120px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(224,7,11,0.06) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

/* Secondary decorative dot pattern bottom-left */
.sec-about::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 260px;
    height: 260px;
    background-image: radial-gradient(circle, rgba(224,7,11,0.10) 1px, transparent 1px);
    background-size: 18px 18px;
    pointer-events: none;
}

.about {
    display: flex;
    align-items: center;
    gap: 48px;
    padding: 60px 0 56px;
    position: relative;
    z-index: 1;
}

.about-left {
    flex: 0 0 56%;
    gap: 0;
    display: flex;
    flex-direction: column;
}

/* "Komisi Penyiaran Indonesia" tag */
.about-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--red-overlay);
    color: var(--red);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 18px;
    width: fit-content;
}

.quote {
    font-family: "Playfair Display", serif;
    letter-spacing: 0.4px;
    font-size: 30px;
    line-height: 1.38;
    color: var(--black);
    border-left: 4px solid var(--red);
    padding-left: 18px;
    margin-bottom: 16px;
}

#typing-word {
    color: var(--red);
    border-right: var(--red) 3px solid;
    padding-right: 4px;
    animation: blink 1s steps(2, start) infinite;
}

@keyframes blink {
    0%, 100% { border-color: transparent; }
    50%       { border-color: var(--red); }
}

.about-desc {
    font-size: 15.5px;
    line-height: 1.75;
    color: #555;
    padding-left: 22px;
    margin-bottom: 24px;
}

/* CTA buttons */
.about-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-left: 22px;
    margin-bottom: 32px;
}

.button-primer {
    text-decoration: none;
    color: var(--white);
    background-color: var(--red);
    font-weight: 700;
    font-size: 14px;
    padding: 11px 22px;
    border-radius: 10px;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: background-color 0.3s, transform 0.2s, box-shadow 0.2s;
    box-shadow: 0 4px 14px rgba(224,7,11,0.30);
}

.button-primer:hover {
    background-color: #c0050a;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(224,7,11,0.38);
}

.button-sekunder {
    text-decoration: none;
    color: var(--red);
    font-weight: 600;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1.5px solid var(--red);
    padding: 10px 18px;
    border-radius: 10px;
    transition: background 0.25s, color 0.25s;
}

.button-sekunder:hover {
    background: var(--red);
    color: #fff;
}

/* Key pillars */
.about-pillars {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.about-pillar {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    border: 1px solid #eee;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.about-pillar-icon {
    font-size: 22px;
    color: var(--red);
    flex-shrink: 0;
    margin-top: 2px;
}

.about-pillar strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 3px;
}

.about-pillar p {
    font-size: 12.5px;
    color: #666;
    line-height: 1.55;
    margin: 0;
}

.about-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-img-top {
    width: 100%;
    overflow: visible;
}

.about-img-top img {
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 8px 24px rgba(0,0,0,0.10));
}

/* Home - Berita Utama (redesigned) */
.sec-berita {
    margin-bottom: 20px;
}

.mainnews-wrapper {
    display: flex;
    gap: 24px;
    margin-bottom: 20px;
    align-items: flex-start;
}

.mainnews-wrapper a {
    color: var(--black);
    text-decoration: none;
}

.mainnews-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 0 0 74%;
}

/* Header row with title + "Lihat Semua" link */
.mainnews-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mainnews-seeall {
    font-size: 13px;
    color: var(--red);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    transition: opacity 0.2s;
    white-space: nowrap;
}

.mainnews-seeall:hover {
    opacity: 0.7;
}

/* 2-column grid: featured (left) + stack (right) */
.mainnews-grid {
    display: grid;
    grid-template-columns: 57% 43%;
    gap: 20px;
}

/* Featured article */
.mainnews-featured {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-decoration: none;
    color: var(--black);
}

.mainnews-featured-img {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: 10px;
}

.mainnews-featured-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

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

/* Category badge on image */
.mn-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--red);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 11px;
    border-radius: 20px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    z-index: 2;
}

.mainnews-featured-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mainnews-featured-info h2 {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
    transition: color 0.25s;
}

.mainnews-featured:hover .mainnews-featured-info h2 {
    color: var(--red);
}

/* Date label */
.mainnews-date {
    color: var(--gray);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.3s ease;
}

.mainnews-isi {
    color: var(--gray);
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
}

/* Right column stack of 4 articles */
.mainnews-stack {
    display: flex;
    flex-direction: column;
}

.mainnews-card {
    display: flex;
    align-items: flex-start;
    gap: 13px;
    padding: 13px 0;
    border-bottom: 1px solid #ebebeb;
    text-decoration: none;
    color: var(--black);
    transition: color 0.25s;
}

.mainnews-card-excerpt {
    font-size: 12.5px;
    color: #666;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
}

.mainnews-card:first-child {
    padding-top: 0;
}

.mainnews-card:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.mainnews-card:hover {
    color: var(--red);
}

.mainnews-card-img {
    flex: 0 0 108px;
    height: 76px;
    border-radius: 8px;
    overflow: hidden;
}

.mainnews-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.35s ease;
}

.mainnews-card:hover .mainnews-card-img img {
    transform: scale(1.07);
}

.mainnews-card-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex: 1;
    min-width: 0;
}

/* Small inline category label */
.mn-badge-sm {
    font-size: 11px;
    font-weight: 700;
    color: var(--red);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.mainnews-card-info h6 {
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.25s;
}

.mainnews-card:hover .mainnews-card-info h6 {
    color: var(--red);
}

/* Sidebar */
.mainnews-sidebar {
    width: 100%;
}

.topik-wrapper{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.topik-card{
    padding: 10px;
    border-radius: 10px;
    color: var(--black);
    text-decoration: none;
    background-color: var(--white);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.topik-foto{
    border-radius: 5px;
    overflow: hidden;
    position: relative;
    height: 140px;
}

.topik-foto::before{
    content: "";
    position: absolute;
    inset: 0;
    background: var(--black-overlay);
    transition: opacity 0.3s ease;
    z-index: 1;
    opacity: 0;
}

.topik-foto img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
    transition: scale 0.3s ease;
}

.topik-card:hover{
    background-color: var(--gray1);
    color: var(--red);
}

.topik-card:hover .topik-foto img{
    scale: 1.05;
}

.topik-card:hover .topik-foto::before{
    opacity: 1;
}

.topik-info{
    padding: 10px 5px;
}

/* Section: Berita Daerah + Opini Penyiaran */
.secnews-wrapper {
    display: flex;
    gap: 32px;
    margin-bottom: 32px;
}

.secnews-wrapper a {
    text-decoration: none;
    color: var(--black);
}

.secnews-column {
    flex: 1;
    min-width: 0;
}

/* Column header with red underline + "Lihat Semua" */
.secnews-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid var(--red);
    padding-bottom: 10px;
    margin-bottom: 4px;
}

.secnews-col-header h3 {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
    text-align: left;
}

.secnews-seeall {
    font-size: 12px;
    color: var(--red);
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    transition: opacity 0.2s;
}

.secnews-seeall:hover {
    opacity: 0.7;
}

.secnews-list {
    display: flex;
    flex-direction: column;
}

.secnews-item {
    display: flex;
    padding: 13px 0;
    gap: 13px;
    border-bottom: 1px solid #f0f0f0;
    width: 100%;
    transition: color 0.25s;
    align-items: center;
}

.secnews-item:last-child {
    border-bottom: none;
}

.secnews-foto {
    flex: 0 0 100px;
    height: 70px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}

.secnews-foto img {
    display: block;
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform 0.35s ease;
}

.secnews-item:hover .secnews-foto img {
    transform: scale(1.07);
}

.secnews-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    min-width: 0;
}

.secnews-info h6 {
    font-size: 15.5px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.25s;
}

.secnews-item:hover .secnews-info h6 {
    color: var(--red);
}

.secnews-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.secnews-empty {
    color: var(--gray);
    font-size: 14px;
    padding: 16px 0;
    text-align: center;
}

/* Section: Kajian — book shelf grid */
.kajian-section {
    margin-top: 8px;
}

.kajian-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 14px;
    margin-top: 4px;
}

.kajian-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    color: var(--black);
    transition: color 0.25s;
}

.kajian-cover {
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 5px 8px 8px 5px;
    overflow: hidden;
    position: relative;
    box-shadow: -4px 4px 10px rgba(0,0,0,0.18), 2px 2px 6px rgba(0,0,0,0.10);
}

/* Book spine accent */
.kajian-cover::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 6px;
    height: 100%;
    background: rgba(0,0,0,0.20);
    z-index: 2;
}

.kajian-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.kajian-card:hover .kajian-cover img {
    transform: scale(1.04);
}

/* Overlay views on hover */
.kajian-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 3;
}

.kajian-card:hover .kajian-overlay {
    opacity: 1;
}

.kajian-info {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.kajian-info h6 {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.25s;
}

.kajian-card:hover .kajian-info h6 {
    color: var(--red);
}

.mainnews-card:hover .mainnews-date,
.mainnews-featured:hover .mainnews-date,
.topik-card:hover .mainnews-date,
.secnews-item:hover, .secnews-item:hover .mainnews-date{
    color: var(--red);
}

.mainnews-card:hover .uiw--date,
.mainnews-featured:hover .uiw--date,
.topik-card:hover .uiw--date,
.secnews-item:hover .uiw--date{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23E0070B' d='M5.673 0a.7.7 0 0 1 .7.7v1.309h7.517v-1.3a.7.7 0 0 1 1.4 0v1.3H18a2 2 0 0 1 2 1.999v13.993A2 2 0 0 1 18 20H2a2 2 0 0 1-2-1.999V4.008a2 2 0 0 1 2-1.999h2.973V.699a.7.7 0 0 1 .7-.699M1.4 7.742v10.259a.6.6 0 0 0 .6.6h16a.6.6 0 0 0 .6-.6V7.756zm5.267 6.877v1.666H5v-1.666zm4.166 0v1.666H9.167v-1.666zm4.167 0v1.666h-1.667v-1.666zm-8.333-3.977v1.666H5v-1.666zm4.166 0v1.666H9.167v-1.666zm4.167 0v1.666h-1.667v-1.666zM4.973 3.408H2a.6.6 0 0 0-.6.6v2.335l17.2.014V4.008a.6.6 0 0 0-.6-.6h-2.71v.929a.7.7 0 0 1-1.4 0v-.929H6.373v.92a.7.7 0 0 1-1.4 0z'/%3E%3C/svg%3E");
}

.secnews-item:hover .mdi--eye-gray {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E0070B' d='M12 9a3 3 0 0 0-3 3a3 3 0 0 0 3 3a3 3 0 0 0 3-3a3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5a5 5 0 0 1 5-5a5 5 0 0 1 5 5a5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5'/%3E%3C/svg%3E");
}

/* Home - Banner + Kalender (split layout) */
/* ===== Infografis + Kalender (split panel) ===== */
.sec-banner {
    padding: 32px 0;
}

.banner-calendar-layout {
    display: grid;
    grid-template-columns: 54% 46%;
    align-items: stretch;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 28px rgba(0,0,0,0.12);
}

/* --- Left: Infografis panel --- */
.infografis-col {
    background: var(--red);
    position: relative;
    min-height: 460px;
}

.infografis-title {
    position: absolute;
    top: 16px;
    left: 20px;
    z-index: 10;
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.5px;
    margin: 0;
    text-shadow: 0 2px 8px rgba(0,0,0,0.55);
}

/* Swiper fills the entire panel via absolute positioning */
.bannerSwiper {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.bannerSwiper .swiper-wrapper {
    height: 100%;
}

.swiper-slide {
    height: 100%;
    overflow: hidden;
}

.swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.swiper-button-prev,
.swiper-button-next {
    color: #fff;
    opacity: 0;
    transition: opacity 0.25s;
    width: 34px;
    height: 34px;
    background: rgba(0,0,0,0.35);
    border-radius: 50%;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 13px;
    font-weight: 900;
}

.bannerSwiper:hover .swiper-button-prev,
.bannerSwiper:hover .swiper-button-next {
    opacity: 1;
}

.swiper-pagination {
    bottom: 12px;
}

.swiper-pagination-bullet {
    background: rgba(255,255,255,0.55);
    opacity: 1;
    width: 8px;
    height: 8px;
    transition: width 0.3s, background 0.3s;
}

.swiper-pagination-bullet-active {
    background: #fff;
    width: 22px;
    border-radius: 4px;
}

/* --- Right: Kalender panel --- */
.calendar-col {
    background: #fff;
    border-left: 1px solid #eee;
    padding: 18px 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.calendar-col > h1 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 4px;
    line-height: 1.2;
}

/* Nav: < Mei 2026 > */
.newscalendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f5f5f5;
    border-radius: 8px;
    padding: 5px 8px;
    margin-bottom: 4px;
}

.newscalendar-header h3 {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
}

.newscalendar-header button {
    border: none;
    background: none;
    cursor: pointer;
    font-size: 15px;
    color: var(--red);
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    line-height: 1;
    transition: background 0.2s, color 0.2s;
}

.newscalendar-header button:hover {
    background: var(--red);
    color: #fff;
}

/* Day name headers */
.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    padding-bottom: 4px;
}

.calendar-days div {
    text-align: center;
    font-size: 10px;
    font-weight: 700;
    color: #999;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Calendar grid */
.news-calendar {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.news-cell {
    position: relative;
    padding: 4px 3px 16px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 5px;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    color: var(--black);
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    text-align: left;
    line-height: 1;
}

.news-cell:hover {
    background: var(--red-overlay);
    border-color: var(--red);
    color: var(--red);
}

.news-cell.today {
    background: var(--green);
    color: #fff;
    font-weight: 700;
    border-color: var(--green);
}

.news-cell.active {
    background: var(--red);
    color: #fff;
    font-weight: 700;
    border-color: var(--red);
}

.news-cell.other-month {
    color: #ccc;
    background: #f5f5f5;
    border-color: #f0f0f0;
}

/* Badge angka berita */
.news-count-badge {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: var(--red);
    color: #fff;
    font-size: 8.5px;
    font-weight: 800;
    min-width: 14px;
    height: 14px;
    padding: 0 2px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.news-cell.active .news-count-badge {
    background: rgba(255,255,255,0.9);
    color: var(--red);
}

.news-cell.today .news-count-badge {
    background: rgba(255,255,255,0.9);
    color: var(--green);
}

/* News list below calendar */
.newscalendar-list {
    margin-top: 6px;
    padding: 6px 0 0;
    min-height: 50px;
    flex: 1;
    border-top: 2px solid var(--red);
}

.newscalendar-item {
    padding: 5px 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    text-decoration: none;
    color: var(--black);
    font-size: 13px;
    line-height: 1.4;
    transition: color 0.25s;
}

.newscalendar-item:last-child {
    border-bottom: none;
}

.newscalendar-item:hover {
    color: var(--red);
}

.newscalendar-item:hover .fe--paper-plane {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23E0070B' d='m13.761 12.01l-10.76-1.084L3 4.074a1.074 1.074 0 0 1 1.554-.96l15.852 7.926a1.074 1.074 0 0 1 0 1.92l-15.85 7.926a1.074 1.074 0 0 1-1.554-.96v-6.852z'/%3E%3C/svg%3E");
}

.empty-news {
    min-height: 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    color: var(--gray);
}

.empty-news img {
    width: 50%;
    opacity: 0.5;
}

.empty-news p {
    font-size: 13px;
    margin: 0;
    text-align: center;
}

.hidden {
    display: none;
}

.agenda-content{
    display: flex;
    gap: 40px;
}

.agenda-column{
    width: 100%;
}

.agenda{
    display: flex;
    padding: 20px 0px;
    gap: 20px;
    flex-direction: column;
}

.agenda-first{
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    height: 40%;
}

.agenda-first img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.agenda-first::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 50%;
    background: linear-gradient( to top,
        rgba(0,0,0,1) 0%,
        rgba(0,0,0,0.9) 50%,
        rgba(0,0,0,0) 100%
    );
}

.agenda-info{
    position: absolute;
    bottom: 20px;
    color: var(--white);
    z-index: 2;
    width: 100%;
    padding: 0 20px;
    color: var(--white);
    transition: color 0.3s ease;
}

.agenda-first:hover .agenda-info{
    color: var(--red);
}

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

.info-first{
    display: flex;
    justify-content: space-between;
}

.agenda-right{
    flex: 0 0 30%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    align-items: center;
}

.agenda-data{
    display: flex;
    flex-direction: column;
}

.card-agendas{
    display: flex;
    align-items: stretch;
    overflow: hidden;
}

.card-agendas-date{
    background-color: #16a34a;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    width: 20%;
    aspect-ratio: 1/0.8;
    color: var(--white);
    z-index: 2;
}

.card-agendas:nth-child(odd) .card-agendas-date{
    background-color: var(--red);
}

.card-agendas:nth-child(even) .card-agendas-date{
    background-color: var(--black1);
}

.date-day{
    font-size: 32px;
    font-weight: bold;
    line-height: 1;
}

.date-month{
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.card-agendas-detail{
    transition: width 0.3s ease;
    flex: 1;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.card-agendas-detail::before{
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.card-agendas-detail > *{
    position: relative;
    z-index: 1;
}

.card-agendas-detail h5{
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-agendas-detail p{
    font-size: 16px;
}

.card-agenda-img{
    position: absolute;
    inset: 0;
    z-index: 3;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
}

.card-agendas:hover{
    cursor: pointer;
}

.card-agendas:hover .card-agenda-img{
    transform: translateX(0);
}

.card-agendas.status-done:hover .card-agendas-detail::before{
    background: linear-gradient(to right, var(--green), var(--white));
    opacity: 1;
}

.card-agendas.status-progress:hover .card-agendas-detail::before{
    background: linear-gradient(to right, var(--yellow), var(--white));
    opacity: 1;
}

.card-agendas.status-upcoming:hover .card-agendas-detail::before{
    background: linear-gradient(to right, var(--blue), var(--white));
    opacity: 1;
}

.card-agenda-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-status{
    display: flex;
    justify-content: space-between;
}

.info-first .status{
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    color: var(--white);
}

.info-first .status.status-done{
    background-color: var(--green);
}

.info-first .status.status-progress{
    background-color: var(--yellow);
}

.info-first .status.status-upcoming{
    background-color: var(--blue);
}

.detail-status .status{
    color: var(--gray);
    font-style: italic;
}

.agenda-today{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.day-paginate{
    color: var(--black1);
    min-width: 65px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 5px 10px;
    border-radius: 15px;
    font-weight: bold;
    transition: all 0.3s ease;
    background-color: var(--white);
    border: none;
    cursor: pointer;
    position: relative;
}

.day-paginate:hover{
    background-color: var(--gray1);
}

.day-paginate.active{
    background-color: var(--green);
    color: var(--white);
}

.tabler--point-filled.show{
    display: block;
}

.agenda-list{
    margin-top: 15px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.data-today{
    display: block;
    border: var(--green) 1px solid;
    border-radius: 20px;
    width: 100%;
    color: var(--green);
    padding: 10px 20px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.data-today:hover{
    border: var(--color-green-400) 1px solid;
    color: var(--color-green-500);
}

.data-line{
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.calendar-wrapper{
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-btn{
    border: none;
    background: #eee;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
}

.calendar-container{
    display: flex;
    gap: 10px;
    flex: 1;
    justify-content: center;
}

.selengkapnya{
    text-decoration: none;
    color: var(--red);
    border: var(--red) 1px solid;
    padding: 5px 10px;
    border-radius: 10px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.selengkapnya.berita-button{
    background-color: var(--red);
    color: var(--white);
    border: var(--red) 1px solid;
    transition: background-color 0.2s ease;
}

.selengkapnya.berita-button:hover{
    background-color: #ff2a2e;
    border-color: #ff2a2e;
    color: var(--white);
}

.selengkapnya.berita-button .ph--arrow-square-out{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23FFFFFF' d='M224 104a8 8 0 0 1-16 0V59.32l-66.33 66.34a8 8 0 0 1-11.32-11.32L196.68 48H152a8 8 0 0 1 0-16h64a8 8 0 0 1 8 8Zm-40 24a8 8 0 0 0-8 8v72H48V80h72a8 8 0 0 0 0-16H48a16 16 0 0 0-16 16v128a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-72a8 8 0 0 0-8-8'/%3E%3C/svg%3E");
}

.selengkapnya:hover{
    background-color: var(--red);
    color: var(--white);
}

.selengkapnya:hover .ph--arrow-square-out{
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23FFFFFF' d='M224 104a8 8 0 0 1-16 0V59.32l-66.33 66.34a8 8 0 0 1-11.32-11.32L196.68 48H152a8 8 0 0 1 0-16h64a8 8 0 0 1 8 8Zm-40 24a8 8 0 0 0-8 8v72H48V80h72a8 8 0 0 0 0-16H48a16 16 0 0 0-16 16v128a16 16 0 0 0 16 16h128a16 16 0 0 0 16-16v-72a8 8 0 0 0-8-8'/%3E%3C/svg%3E");
}

.status-belum {
    border: var(--navy) 1px solid;
    color: var(--navy);
}

.status-sedang {
    border: var(--yellow) 1px solid;
    color: var(--yellow);
}

.status-selesai {
    border: var(--green) 1px solid;
    color: var(--green);
}

/* Home - Galeri */
.sec-galeri{
    background-color: var(--black);
}

.title-galeri{
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--white);
}

.galeri{
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 20px;
}

.galeri-menu{
    display: flex;
    flex-direction: column;
    align-items: center;
}

.insta-menu{
    display: flex;
    padding: 20px;
}

.insta-left{
    flex: 0 0 40%;
    display: flex;
    justify-content: center;
}

.insta-left img{
    height: 90%;
    width: auto;
}

.insta-right{
    flex: 0 0 60%;
    display: flex;
    flex-direction: column;
    align-items: end;
}

.zigzag-gallery{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.zigzag-column{
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: 500px;
}

.zigzag-column.down{
    justify-content: flex-end;
}

.zigzag-column.up{
    justify-content: flex-start;
}

.zigzag-item{
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 5px;
    position: relative;
    display: block;
}

.zigzag-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.galleryy-overlay{
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 15px;
    background: linear-gradient(
        to top,
        rgba(0,0,0,0.85),
        rgba(0,0,0,0.4),
        rgba(0,0,0,0.2)
    );
    color: white;
    transform: translateY(100%);
    opacity: 0;
    transition: tranform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease;
}

.zigzag-item:hover .galleryy-overlay{
    transform: translateY(0);
    opacity: 1;
}

.zigzag-item:hover img{
    transform: scale(1.01);
}

.youtube-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.youtube-card{
    display: flex;
    flex-direction: column;
    padding: 15px;
    border-radius: 20px;
    color: var(--white);
    text-decoration: none;
    gap: 10px;
    transition: background-color 0.3s ease;
}

.youtube-card:hover{
    background-color: var(--black1);
}

.youtube-foto{
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.youtube-foto img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

.youtube-foto span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.youtube-info h5{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 18px;
    line-height: 1.5;
    height: calc(1.5em * 2);
}

.youtube-info p{
    font-size: 14px;
    color: var(--gray1);
}

.instagram-grid{
    display: flex;
    justify-content: space-between;
}

.instagram-card {
    overflow: hidden;
    height: 460px;
    width: 230px;
}

.instagram-inner {
    transform: scale(0.7);
    transform-origin: top left;
    width: calc(100% / 0.7); /* kompensasi scale */
}

.galeri-foot{
    color: var(--white);
    border-bottom: var(--red) 3px solid;
    transition: border-bottom 0.3s ease;
    text-decoration: none;
    margin-top: 20px;
}

.galeri-foot:hover{
    border-bottom: var(--white) 3px solid;
}

/* Home - saran */
.saran{
    display: flex;
}

.saran-left{
    flex: 0 0 60%;
    padding: 20px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.saran-right{
    flex: 0 0 40%;
    padding: 20px 0px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.saran-circle{
    position: relative;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%,
    var(--white) 0%,
    var(--gray1) 40%,
    var(--color-blue-300) 100%);
}

.saran-circle::after{
    content: "";
    position: absolute;
    bottom: 20px;
    left: -60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 40%,
    var(--white) 0%,
    var(--gray1) 40%,
    var(--color-blue-300) 100%);
}

.saran-right img{
    height: 500px;
}

.saran-download{
    display: flex;
    gap: 20px;
    margin: 20px 0px;
}

.download-button{
    background-color: var(--black1);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    text-decoration: none;
    color: var(--white);
    padding: 10px 5px;
    gap: 15px;
    border-radius: 10px;
}

.text-red{
    color: var(--red);
}


/* HALAMAN BERITA */
.berita-header{
    display: flex;
}

.news-header{
    background: var(--red);
    color: white;
    text-align: center;
    height: 250px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}

.news-meta{
    margin-top: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    font-size: 14px;

}

.news-image img {
    width: 100%;
    border-radius: 10px;
}

.news-body {
    margin-top: 15px;
    line-height: 1.7;
    text-align: justify;
}

.news-body blockquote{
    border-left: 4px solid #16a34a;
    padding-left: 15px;
    margin: 15px 0;
    font-style: italic;
    color: #555;
    background: #f9f9f9;
}

.news-wrapper{
    display: flex;
    gap: 20px;
}

.news-content{
    flex: 0 0 65%;
}

/* SIDEBAR */
.news-sidebar {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 0 0 30%;
}

.news-sidebar h3 span {
    color: var(--red);
}

.tab-btn{
    width: 100%;
    border-bottom: var(--gray) 5px solid;
    font-weight: bold;
    color: var(--gray);
}

.tab-btn.active{
    color: var(--red);
    border-bottom: var(--red) 5px solid; 
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}


.berita-item{
    display: flex;
    padding: 10px;
    gap: 10px;
    text-decoration: none;
    color: var(--black);
}

.berita-detail{
    transition: color 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}

.berita-detail p{
    font-size: 14px;
    color: var(--gray);
}

.berita-img{
    width: 100px;
    height: 75px;
    overflow: hidden;
    border-radius: 5px;
    flex-shrink: 0;
}

.berita-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.berita-item:hover .berita-img img{
    transform: scale(1.1);
    filter: brightness(0.7);
}

.berita-item:hover .berita-detail,.berita-item:hover .berita-detail p{
    color: var(--red);
}

.berita-item h6{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.berita-kategori {
    margin: 20px 0 10px;
}

.berita-kategori ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.berita-kategori li a {
    display: inline-block;
    text-decoration: none;
    color: #555;
    font-weight: 600;
    font-size: 13px;
    padding: 7px 18px;
    border-radius: 999px;
    border: 1.5px solid #ddd;
    background: #fff;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.berita-kategori li a:hover {
    color: var(--red);
    border-color: var(--red);
    background: #fff5f5;
}

.berita-kategori li a.active {
    color: #fff;
    background: var(--red);
    border-color: var(--red);
}

.berita-wrapper {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    align-items: flex-start;
}

/* Empty state */
.news-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 20px 80px;
    gap: 16px;
}

.news-empty img {
    width: 220px;
    height: 160px;
    object-fit: cover;
    border-radius: 12px;
    opacity: 0.75;
    filter: grayscale(30%);
}

.news-empty h4 {
    font-size: 20px;
    font-weight: 700;
    color: #333;
    margin: 0;
}

.news-empty p {
    font-size: 14px;
    color: #888;
    line-height: 1.7;
    margin: 0;
}

/* Bookshelf */
.bookshelf-section {
    padding: 10px 0 20px;
}

.bookshelf-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 24px 18px;
}

.book-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

.book-cover {
    width: 100%;
    aspect-ratio: 2 / 3;
    border-radius: 4px 10px 10px 4px;
    overflow: hidden;
    position: relative;
    box-shadow: -5px 5px 14px rgba(0,0,0,0.22), 2px 2px 6px rgba(0,0,0,0.10);
    transition: transform 0.25s, box-shadow 0.25s;
}

.book-cover::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 8px; height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.28), rgba(0,0,0,0.06));
    z-index: 2;
    border-radius: 4px 0 0 4px;
}

.book-card:hover .book-cover {
    transform: translateY(-6px) rotate(-1deg);
    box-shadow: -8px 12px 22px rgba(0,0,0,0.28), 3px 3px 8px rgba(0,0,0,0.12);
}

.book-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s;
}

.book-card:hover .book-cover img {
    transform: scale(1.04);
}

.book-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s;
    z-index: 3;
}

.book-card:hover .book-overlay {
    opacity: 1;
}

.book-overlay-icon {
    font-size: 28px;
    color: #fff;
}

.book-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.book-meta h6 {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.45;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.book-meta p {
    font-size: 11.5px;
    color: #888;
    margin: 0;
}

.loadmore-wrap {
    display: flex;
    justify-content: center;
    margin-top: 28px;
    margin-bottom: 40px;
}

.btn-loadmore {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: var(--red);
    border: 2px solid var(--red);
    border-radius: 999px;
    padding: 11px 32px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    letter-spacing: 0.2px;
}

.btn-loadmore:hover:not(:disabled) {
    background: var(--red);
    color: #fff;
    box-shadow: 0 4px 14px rgba(224,7,11,0.25);
}

.btn-loadmore:disabled {
    opacity: 0.6;
    cursor: default;
}

.loadmore-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.berita-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    flex: 0 0 65%;
}

.berita-list h3 {
    margin-bottom: 10px;
}

.berita-wrapper h3 span {
    color: var(--red);
}

.berita-sidebar{
    flex: 0 0 30%;
}


/* GALERI */
.galeri-card{
    background-color: var(--white);
    height: 250px;
    width: 225px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--black);
    border: var(--gray) 1px solid;
}

.card-foto{
    flex: 0 0 60%;
    overflow: hidden;
}

.card-foto img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease, filter 0.4s ease;
}

.galeri-card:hover .card-foto img {
    transform: scale(1.1);
    filter: brightness(0.7);
}

.galeri-card:hover .card-info h5{
    color: var(--red);
}

.card-info{
    flex: 0 0 40%;
    padding: 10px;
}

.card-info p{
    font-size: 14px;
    color: var(--gray);
}

.card-info h5{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
    font-size: 18px;
}

.gallery-grid{
    display: grid;
    grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
    gap: 20px;
    padding: 20px 0px;
}

.gallery-grid a{
    text-decoration: none;
}

.light-youtube-card{
    display: flex;
    flex-direction: column;
    padding: 15px;
    border-radius: 20px;
    color: var(--black);
    text-decoration: none;
    gap: 10px;
    background-color: var(--gray1);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.light-youtube-card:hover{
    background-color: var(--black1);
    color: var(--white);
}

.light-youtube-foto{
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

.light-youtube-foto img{
    object-fit: cover;
    width: 100%;
    height: 100%;
    display: block;
}

.light-youtube-foto span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

.light-youtube-info h5{
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 18px;
    line-height: 1.5;
    height: calc(1.5em * 2);
}

.light-youtube-info p{
    font-size: 14px;
    color: var(--black);
    transition: color 0.3 ease;
}

.light-youtube-card:hover .light-youtube-info p{
    color: var(--white);
}

.button-primer{
    text-decoration: none;
    color: var(--white);
    background-color: var(--red);
    font-weight: bold;
    padding: 10px 20px;
    border-radius: 10px;
    width: fit-content;
    transition: background-color 0.3s ease;
}

.button-primer:hover{
    background-color: var(--color-red-700);
}

.title-page{
    background-color: var(--red);
    display: flex;
    margin-top: 20px;
    height: 250px;
}

.title{
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    align-items: center;
    color: var(--white);
    flex: 0 0 40%;
    gap: 10px;
}

.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: rgba(255,255,255,0.75);
}

.breadcrumb-nav a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    transition: color 0.2s;
}

.breadcrumb-nav a:hover {
    color: #fff;
}

.breadcrumb-sep {
    font-size: 15px;
    color: rgba(255,255,255,0.5);
}

.breadcrumb-current {
    color: #fff;
    font-weight: 600;
}

.title-image{
    flex: 0 0 60%;
    overflow: hidden;
    position: relative;
}

.title-image img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.title-image::after{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 40%;
    background: linear-gradient( to right,
        rgba(224,7,11,1) 0%,
        rgba(224,7,11,0.5) 40%,
        rgba(224,7,11,0) 100%
    );
}

.instagram-feed{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

/* FAQ */
.faq-img{
    height: 100%;
}

.faq-img img{
    width: 500px;
    height: auto;
}

.faq-container{
    width: 75%;
    border-radius: 20px;
    overflow: hidden;
}

.faq-item{
    border-bottom: var(--red) 1px solid;
}

.faq-question{
    width: 100%;
    padding: 20px;
    background-color: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    cursor: pointer;
    transition: background-color 0.3s ease;

}

.faq-answer{
    padding: 20px;
    display: none;
    background-color: var(--gray1);
}

.faq-item.active .faq-question{
    background-color: var(--color-red-400);
}

.faq-item.active .faq-answer{
    display: block;
}

.arrow{
    font-size: 20px;
    transition: transform 0.3s;
}

.faq-item.active .arrow{
    transform: rotate(180deg);
}

/* KONTAK */

/* Hero row */
.kontak-hero {
    display: flex;
    align-items: center;
    gap: 0;
    background: linear-gradient(135deg, #fff 60%, #fff5f5 100%);
    border: 1px solid #f0e0e0;
    border-radius: 20px;
    overflow: hidden;
    margin: 28px 0 24px;
}

.kontak-hero-left {
    flex: 0 0 220px;
    background: var(--red);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 20px 16px 0;
    align-self: stretch;
}

.kontak-hero-left img {
    width: 170px;
    object-fit: contain;
    display: block;
}

.kontak-hero-right {
    flex: 1;
    padding: 28px 32px;
}

.kontak-hero-right h2 {
    font-size: 24px;
    font-weight: 700;
    color: #111;
    margin-bottom: 8px;
}

.kontak-hero-right > p {
    font-size: 14px !important;
    color: #555 !important;
    line-height: 1.6;
    margin-bottom: 20px;
}

.kontak-hero-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kontak-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--red);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: 999px;
    white-space: nowrap;
}

.kontak-chip-green { background: #16a34a; }
.kontak-chip-blue  { background: #2563eb; }

a.kontak-chip {
    text-decoration: none;
    transition: opacity 0.18s, transform 0.18s;
}
a.kontak-chip:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    color: #fff;
}

.kontak-chip-icon {
    width: 16px !important;
    height: 16px !important;
}

/* Contact cards */
.kontak-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

.kontak-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 16px;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.kontak-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.10);
}

.kontak-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.kontak-card-icon--red   { background: var(--red); }
.kontak-card-icon--green { background: #16a34a; }
.kontak-card-icon--blue  { background: #2563eb; }

.kontak-icon-sm {
    width: 26px !important;
    height: 26px !important;
}

.kontak-card-body h5 {
    font-size: 11px;
    font-weight: 700;
    color: #aaa;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 4px;
}

.kontak-card-body p {
    font-size: 14px !important;
    color: #111 !important;
    font-weight: 600;
    line-height: 1.65;
    margin: 0 !important;
}

.kontak-card-body small {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    color: #888;
    font-weight: 400;
}

/* Social media strip — full-width breakout */
.kontak-sosmed {
    background: var(--red);
    padding: 40px 5%;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    margin-bottom: 0;
}

.kontak-sosmed-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 48px;
}

.kontak-sosmed-label {
    flex: 0 0 240px;
    color: #fff;
}

.kontak-sosmed-share-icon {
    display: block;
    margin-bottom: 10px;
    opacity: 0.8;
}

.kontak-sosmed-label h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 6px;
    color: #fff;
}

.kontak-sosmed-label > p {
    font-size: 13px !important;
    color: rgba(255,255,255,0.82) !important;
    line-height: 1.5;
}

.kontak-sosmed-links {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kontak-sosmed-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,0.13);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: #fff;
    transition: background 0.18s, transform 0.18s;
}

.kontak-sosmed-card:hover {
    background: rgba(255,255,255,0.22);
    transform: translateX(4px);
    color: #fff;
}

.ksm-icon {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ksm-icon [class*="logos--"],
.ksm-icon [class*="skill-icons--"] {
    width: 24px;
    height: 24px;
}

.ksm-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.ksm-platform {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.72;
}

.ksm-handle {
    font-size: 14px;
    font-weight: 600;
}

.icon-arrow-ext-white { flex-shrink: 0; }

/* Section title */
.kontak-section-title {
    font-size: 20px;
    font-weight: 700;
    color: #111;
    margin-bottom: 18px;
    padding-left: 14px;
    position: relative;
}

.kontak-section-title::before {
    content: "";
    position: absolute;
    left: 0; top: 3px; bottom: 3px;
    width: 4px;
    background: var(--red);
    border-radius: 4px;
}

/* Map section */
.kontak-map-section {
    padding: 32px 0 52px;
}

.kontak-map-wrap {
    display: flex;
    gap: 24px;
    align-items: stretch;
    min-height: 360px;
}

.kontak-map-frame {
    flex: 0 0 62%;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0,0,0,0.10);
}

.kontak-map-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 340px;
}

.kontak-map-info {
    flex: 1;
    background: var(--black1);
    color: #fff;
    border-radius: 16px;
    padding: 28px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.kontak-map-badge {
    width: 52px;
    height: 52px;
    background: #fff;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    padding: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.kontak-map-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.kontak-map-info h4 {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 16px;
    line-height: 1.4;
    color: #fff;
}

.kontak-map-detail {
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
}

.kontak-map-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.kontak-map-row [class*="icon-"] {
    flex-shrink: 0;
    margin-top: 2px;
    opacity: 0.8;
}

.kontak-map-row p {
    font-size: 13px !important;
    line-height: 1.6;
    opacity: 0.88;
    color: #fff !important;
    margin: 0 !important;
}

.kontak-map-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 18px;
    background: var(--red);
    color: #fff;
    text-decoration: none;
    padding: 10px 18px;
    border-radius: 9px;
    font-size: 13px;
    font-weight: 600;
    transition: opacity 0.2s, transform 0.2s;
    align-self: flex-start;
}

.kontak-map-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
    color: #fff;
}

.kontak-map-btn .icon-nav-white { flex-shrink: 0; }

/* ============================================================
   ACCESSIBILITY WIDGET
   ============================================================ */

/* Skip link */
.a11y-skip {
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: #000;
    color: #fff;
    padding: 10px 22px;
    border-radius: 0 0 10px 10px;
    font-size: 14px;
    font-weight: 700;
    z-index: 99999;
    text-decoration: none;
    transition: top 0.2s;
}
.a11y-skip:focus {
    top: 0;
    outline: 3px solid #E0070B;
}

/* Floating trigger button — separate from panel */
.a11y-widget {
    position: fixed;
    right: 0;
    top: 0;
    bottom: 0;
    width: 0;
    z-index: 9000;
    pointer-events: none;
}

/* Horizontal trigger tab */
.a11y-trigger {
    pointer-events: all;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: row;        /* horizontal */
    align-items: center;
    gap: 8px;
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 12px 0 0 12px;
    padding: 12px 16px 12px 14px;
    cursor: pointer;
    box-shadow: -4px 0 18px rgba(0,0,0,0.22);
    transition: background 0.2s, transform 0.15s;
    white-space: nowrap;
    writing-mode: horizontal-tb;   /* override any vertical */
}
.a11y-trigger:hover {
    background: #b80509;
    transform: translateY(-50%) translateX(-3px);
}
.a11y-trigger svg { flex-shrink: 0; width: 22px; height: 22px; }
.a11y-trigger span {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    writing-mode: horizontal-tb;
}

/* Panel — slides in from right, full-height fixed */
.a11y-panel {
    pointer-events: all;
    position: fixed;
    right: -400px;
    top: 0;
    bottom: 0;
    width: 360px;
    background: #fff;
    box-shadow: -6px 0 36px rgba(0,0,0,0.18);
    z-index: 9001;
    display: flex;
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
}
.a11y-panel-open { right: 0 !important; }

.a11y-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--red);
    color: #fff;
    padding: 18px 22px;
    flex-shrink: 0;
}
.a11y-panel-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    font-weight: 700;
}
.a11y-close {
    background: rgba(255,255,255,0.22);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
    flex-shrink: 0;
}
.a11y-close:hover { background: rgba(255,255,255,0.4); }

.a11y-body {
    flex: 1;
    overflow-y: auto;
    padding: 22px 20px;
    display: flex;
    flex-direction: column;
    gap: 22px;
}

/* Groups */
.a11y-group { display: flex; flex-direction: column; gap: 10px; }
.a11y-group-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #aaa;
    margin: 0;
    padding-bottom: 6px;
    border-bottom: 1px solid #f0f0f0;
}

/* Font size row */
.a11y-font-row { display: flex; gap: 8px; }

.a11y-font-btn {
    flex: 1;
    border: 2px solid #e5e5e5;
    background: #fff;
    border-radius: 10px;
    padding: 12px 4px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    color: #444;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    line-height: 1;
    min-height: 52px;
}
.a11y-font-btn:nth-child(1) { font-size: 12px; }
.a11y-font-btn:nth-child(2) { font-size: 15px; }
.a11y-font-btn:nth-child(3) { font-size: 19px; }
.a11y-font-btn:nth-child(4) { font-size: 22px; }
.a11y-font-btn:hover        { border-color: var(--red); color: var(--red); }
.a11y-font-btn.a11y-on      { border-color: var(--red); background: var(--red); color: #fff; }

/* Toggle buttons */
.a11y-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    text-align: left;
    border: 1.5px solid #ebebeb;
    background: #fafafa;
    border-radius: 12px;
    padding: 13px 16px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    min-height: 52px;
}
.a11y-toggle:hover { border-color: var(--red); background: #fff5f5; }
.a11y-toggle.a11y-on {
    border-color: var(--red);
    background: #fff0f0;
    color: #c0030a;
}

.a11y-tog-icon {
    width: 32px;
    height: 32px;
    background: #f0f0f0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
    transition: background 0.15s;
}
.a11y-toggle.a11y-on .a11y-tog-icon {
    background: var(--red);
    color: #fff;
}

.a11y-badge {
    margin-left: auto;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    background: #e8e8e8;
    color: #999;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}
.a11y-toggle.a11y-on .a11y-badge {
    background: var(--red);
    color: #fff;
}

/* Reset button */
.a11y-reset {
    width: 100%;
    border: 2px solid #ddd;
    background: #f9f9f9;
    border-radius: 12px;
    padding: 13px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: #777;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    min-height: 50px;
}
.a11y-reset:hover { border-color: var(--red); color: var(--red); background: #fff; }

/* ---- Body modifier classes ---- */

/* Font sizes — zoom scales ALL elements including px-based ones */
body.a11y-font-sm #kpi-page { zoom: 0.9; }
body.a11y-font-lg #kpi-page { zoom: 1.12; }
body.a11y-font-xl #kpi-page { zoom: 1.28; }

/* High contrast — target #kpi-page so the fixed widget is unaffected */
body.a11y-high-contrast #kpi-page { background: #000 !important; color: #fff !important; }
body.a11y-high-contrast #kpi-page header,
body.a11y-high-contrast #kpi-page footer,
body.a11y-high-contrast #kpi-page .main-content,
body.a11y-high-contrast #kpi-page .main-container {
    background: #000 !important;
    color: #fff !important;
}
body.a11y-high-contrast #kpi-page a { color: #ffff00 !important; }
body.a11y-high-contrast #kpi-page a:hover { color: #fff !important; }
body.a11y-high-contrast #kpi-page .title-page { background: #111 !important; }
body.a11y-high-contrast #kpi-page .header { border-bottom: 2px solid #fff !important; }
body.a11y-high-contrast #kpi-page .berita-item,
body.a11y-high-contrast #kpi-page .kontak-card,
body.a11y-high-contrast #kpi-page .sanksi-tbl td,
body.a11y-high-contrast #kpi-page .sanksi-tbl th {
    background: #111 !important;
    border-color: #444 !important;
    color: #fff !important;
}
body.a11y-high-contrast #kpi-page img { filter: brightness(0.85) contrast(1.2); }
body.a11y-high-contrast #kpi-page .btn-loadmore,
body.a11y-high-contrast #kpi-page .kontak-map-btn {
    background: #ffff00 !important;
    color: #000 !important;
}

/* Grayscale — target #kpi-page so fixed widget stays visible and positioned */
body.a11y-grayscale #kpi-page { filter: grayscale(100%) !important; }

/* Underline all links */
body.a11y-underline a { text-decoration: underline !important; }

/* Pause animations — completely stop, not just slow down */
body.a11y-no-anim #kpi-page *,
body.a11y-no-anim #kpi-page *::before,
body.a11y-no-anim #kpi-page *::after {
    animation: none !important;
    transition: none !important;
}

/* Dyslexia font */
.a11y-dyslexic,
.a11y-dyslexic * {
    font-family: 'OpenDyslexic', Arial, sans-serif !important;
    letter-spacing: 0.05em !important;
    word-spacing: 0.12em !important;
    line-height: 1.8 !important;
}

/* Big cursor */
.a11y-big-cursor,
.a11y-big-cursor * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M8 4l24 14-11 3-6 10-7-27z' fill='black' stroke='white' stroke-width='2'/%3E%3C/svg%3E") 8 4, auto !important;
}

/* TTS active — outline applied via JS inline style */
.a11y-tts * { cursor: help; }

/* ============================================================
   END ACCESSIBILITY WIDGET
   ============================================================ */

/* About */
.about-container{
    display: flex;
    gap: 20px;
    padding: 20px 0px;
}

.about-sidebar{
    flex: 0 0 20%;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.about-sidebar a{
    color: var(--black);
    border: var(--white) 1px solid;
    text-decoration: none;
    font-weight: bold;
    padding: 25px 20px;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    transition: all 0.3s ease;
    background-color: var(--white);
}

.about-sidebar a:hover{
    border: var(--red) 1px solid;
    color: var(--red);
    background-color: var(--red-overlay);
}

.about-sidebar a.active{
    border: var(--red) 1px solid;
    color: var(--red);
    background-color: var(--red-overlay);
}

.about-content{
    flex: 0 0 80%;
    text-align: justify;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border: var(--gray1) 1px solid;
    border-radius: 20px;
    padding: 20px;
    overflow: hidden;
}

ol {
    list-style-type: decimal;
    padding-right: 40px;
}


.logo-line{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    padding: 40px 60px;
    gap: 40px;
}

.logo-line.black{
    background-color: var(--black1);
    margin-left: -20px;
    margin-right: -20px;
    margin-top: -20px;
    padding-left: calc(60px + 20px);
    padding-right: calc(60px + 20px);
}

.about-logo{
    display: flex;
    justify-content: center;
    align-items: center;
}

.about-logo img{
    width: 80%;
    height: auto;
}

.logo-bulat{
    max-width: 180px;
}

.vidprof{
    display: flex;
    justify-content: center;
}

.vidprof iframe{
    border-radius: 10px;
}

.komisioner-section{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.komisioner-slider{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.komisioner-wrapper{
    width: 690px;
    overflow: hidden;
}

.komisioner-track{
    display: flex;
    gap: 30px;
    transition: transform 0.4s ease;
}

.komisioner-item{
    flex: 0 0 200px;
    width: 200px;
    height: 260px;
    border-radius: 20px;
    overflow: hidden;
    opacity: 0.4;
    transition: 0.3s;
    background-color: var(--navy);
}

.komisioner-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.komisioner-item.active{
    opacity: 1;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.komisioner-item.active img{
    transform: scale(1.05);
}

.komisioner-title{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.visi{
    position: relative;
    background-color: var(--black1);
    color: var(--white);
    text-align: center;
    padding: 50px 20px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    overflow: hidden;
}

.visi p{
    font-size: 24px;
}

.visi-logo{
    position: absolute;
    bottom: 0;
    right: 0;
    opacity: 0.1;
    z-index: 0;
}

.visi-logo img{
    width: 300px;
    transform: translate(10%, 35%);
}

.misi{
    display: flex;
    align-items: center;
    gap: 40px;
}

.misi img{
    width: 100px;
}

.misi li{
    font-size: 20px;
}

.tugas{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.tugas-item{
    padding: 10px;
    gap: 10px;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}

.tugas-item img{
    height: 100px;
}

.wewenang{
    position: relative;
    display: flex;
    align-items: end;
    overflow: hidden;
}

.wewenang-item{
    width: 100%;
    margin-left: auto;
    padding: 20px 20px 20px 40px;
    background-color: var(--black1);
    border-radius: 20px;
    position: relative;
    z-index: 1;
    color: var(--white);
}

.wewenang-img{
    position: absolute;
    left: 0;
    height: 100%;
    z-index: 2;
}

.nav{
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: none;
    background-color: var(--white);
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Search bar */
.berita-search {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1.5px solid #ddd;
    border-radius: 999px;
    padding: 5px 6px 5px 14px;
    gap: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-width: 260px;
}

.berita-search:focus-within {
    border-color: var(--red);
    box-shadow: 0 0 0 3px rgba(224,7,11,0.08);
}

.berita-search-icon {
    color: #aaa;
    font-size: 16px;
    flex-shrink: 0;
}

.berita-search input {
    border: none;
    outline: none;
    font-size: 13.5px;
    color: #333;
    background: transparent;
    flex: 1;
    min-width: 0;
}

.berita-search input::placeholder {
    color: #bbb;
}

.berita-search button {
    background: var(--red);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

.berita-search button:hover {
    background: #b50408;
}

/* Galeri */
.main-nav{
    display: flex;
    padding: 20px 0px;
    justify-content: space-between;
    align-items: center;
}

.main-nav a{
    text-decoration: none;
}

.kembali{
    padding: 10px 20px;
    color: var(--red);
    border: var(--red) 2px solid;
    border-radius: 50px;
    transition: all 0.3s ease;
    font-weight: bold;
}

.kembali:hover{
    color: var(--white);
    background-color: var(--red);
}

.menu-galeri{
    display: flex;
    gap: 20px;
    padding: 0;
}

.menu-galeri li a{
    color: var(--black);
    font-weight: bold;
    background-color: var(--gray1);
    width: 120px;
    border-radius: 50px;
    padding: 10px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}


.menu-galeri li a:hover{
    color: var(--white);
    background-color: var(--red);
}

.menu-galeri li a.active{
    color: var(--white);
    background-color: var(--red);
}

.detail-header{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.gallery-detail-grid{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 20px;
    grid-auto-flow: dense;
    padding: 20px 0px;
}

.gallery-detail-grid img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

.item-1{
    grid-column: 1/3;
    grid-row: span 2;
}

.item-2, .item-3{
    grid-column: 3/4;
}

.item-4, .item-5{
    grid-column: 1/2;
}

.item-6{
    grid-column: 2/4;
    grid-row: span 2;
}

/* Dokumen */
.filter form{
    display: flex;
    gap: 20px;
}

.document-container{
    padding: 20px 0px;
}

.document-card{
    display: flex;
    gap: 20px;
    color: var(--black);
    border: var(--white) 1px solid;
    transition: all 0.3s ease;
    border-radius: 20px;
    padding: 10px;
}

.doc-cover{
    width: 40%;
    height: 100%;
    border-radius: 10px;
    overflow: hidden;
    flex-shrink: 0;
}

.doc-cover img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.doc-info p{
    font-size: 14px;
    color: var(--gray);
}

.document-card:hover{
    color: var(--red);
    border: var(--red) 1px solid;
}

.document-card:hover p{
    color: var(--red);
}

/* Publikasi Dokumen redesign */
.pubdok-section {
    margin-bottom: 52px;
}

.pubdok-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 2px solid #f0f0f0;
}

.pubdok-section-title {
    font-size: 20px;
    font-weight: 800;
    color: #1a1a1a;
    margin: 0;
    position: relative;
    padding-left: 14px;
}

.pubdok-section-title::before {
    content: "";
    position: absolute;
    left: 0; top: 4px;
    width: 4px; height: calc(100% - 8px);
    background: var(--red);
    border-radius: 4px;
}

.pubdok-count {
    font-size: 12px;
    color: #999;
    background: #f5f5f5;
    border-radius: 999px;
    padding: 3px 10px;
}

.pubdok-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 22px 16px;
}

.pubdok-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.pubdok-cover {
    display: block;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 6px 10px 10px 6px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
    box-shadow: -5px 5px 16px rgba(0,0,0,0.18), 2px 2px 6px rgba(0,0,0,0.08);
    transition: transform 0.25s, box-shadow 0.25s;
}

.pubdok-cover::before {
    content: "";
    position: absolute;
    left: 0; top: 0;
    width: 7px; height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.25), rgba(0,0,0,0.05));
    z-index: 2;
    border-radius: 6px 0 0 6px;
}

.pubdok-card:hover .pubdok-cover {
    transform: translateY(-6px) rotate(-1deg);
    box-shadow: -8px 12px 24px rgba(0,0,0,0.24), 3px 3px 8px rgba(0,0,0,0.10);
}

.pubdok-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.pubdok-cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-weight: 700;
    font-size: 13px;
}

.pubdok-cover-placeholder.pdf  { background: linear-gradient(135deg,#c0392b,#e74c3c); color:#fff; }
.pubdok-cover-placeholder.doc  { background: linear-gradient(135deg,#1565c0,#1976d2); color:#fff; }
.pubdok-cover-placeholder.ppt  { background: linear-gradient(135deg,#e65100,#f57c00); color:#fff; }
.pubdok-cover-placeholder.xls  { background: linear-gradient(135deg,#2e7d32,#43a047); color:#fff; }

.pubdok-cover-placeholder span[class*="ph--"] { font-size: 42px; }
.pubdok-cover-placeholder img { width: 56px; height: 56px; object-fit: contain; }

.pubdok-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.48);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.22s;
    z-index: 3;
}

.pubdok-overlay span[class*="ph--"] { font-size: 28px; }

.pubdok-card:hover .pubdok-overlay { opacity: 1; }

.pubdok-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pubdok-title {
    font-size: 13px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.pubdok-date {
    font-size: 12px;
    color: #999;
    margin: 0;
}

.pubdok-download {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--red);
    text-decoration: none;
    margin-top: 4px;
    transition: color 0.2s;
}

.pubdok-download:hover { color: #b50408; }

.doc-container{
    display: flex;
    padding: 20px 0px;
}

.document-left{
    flex: 0 0 40%;
}

.document-right{
    flex: 0 0 60%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.document-right iframe, .doc-preview-placeholder{
    width: 75%;
    height: 600px;
    border-radius: 10px;
    border: var(--black1) 1px solid;
    overflow: hidden;
}

.doc-preview-placeholder img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Sanction */
.detail-sanction-table{
    width: 100%;
}

.sanction-table{
    width: 100%;
}

/* Sanksi frontend redesign */
.sanksi-topbar {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    margin: 24px 0 14px;
}

.sanksi-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    flex: 1;
}

.sanksi-pill {
    display: inline-block;
    padding: 7px 16px;
    border-radius: 999px;
    border: 1.5px solid #ddd;
    background: #fff;
    color: #555;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s;
    white-space: nowrap;
}

.sanksi-pill:hover {
    border-color: var(--red);
    color: var(--red);
    background: #fff5f5;
}

.sanksi-pill.active {
    background: var(--red);
    border-color: var(--red);
    color: #fff;
}

.sanksi-search {
    min-width: 280px;
}

.sanksi-meta {
    font-size: 13px;
    color: #777;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.sanksi-meta strong { color: #333; }

.sanksi-clear {
    margin-left: 8px;
    background: #f5f5f5;
    color: #666;
    border-radius: 999px;
    padding: 3px 12px;
    font-size: 12px;
    text-decoration: none;
    transition: background 0.2s;
}

.sanksi-clear:hover { background: #ebebeb; }

.sanksi-table-wrap {
    overflow-x: auto;
    border-radius: 12px;
    border: 1px solid #eee;
    box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.sanksi-tbl {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

.sanksi-tbl thead tr {
    background: #f8f9fb;
    border-bottom: 2px solid #eee;
}

.sanksi-tbl th {
    padding: 13px 16px;
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.sanksi-tbl tbody tr {
    border-bottom: 1px solid #f2f2f2;
    transition: background 0.15s;
}

.sanksi-tbl tbody tr:last-child { border-bottom: none; }

.sanksi-tbl tbody tr:hover { background: #fafbff; }

.sanksi-tbl td {
    padding: 13px 16px;
    vertical-align: middle;
}

.sanksi-doc-link {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    text-decoration: none;
    color: inherit;
}

.sanksi-doc-icon {
    font-size: 18px;
    color: var(--red);
    flex-shrink: 0;
    margin-top: 2px;
}

.sanksi-doc-title {
    color: #1a4fa3;
    font-weight: 500;
    line-height: 1.45;
    transition: color 0.2s;
}

.sanksi-doc-link:hover .sanksi-doc-title {
    color: var(--red);
    text-decoration: underline;
}

.sanksi-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    white-space: nowrap;
    letter-spacing: 0.2px;
}

.badge-red    { background: #fff0f0; color: #c0392b; border: 1px solid #f5c6c6; }
.badge-orange { background: #fff5eb; color: #d96b00; border: 1px solid #fcd5a8; }
.badge-purple { background: #f5f0ff; color: #6d28d9; border: 1px solid #ddd6fe; }
.badge-blue   { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.badge-gray   { background: #f5f5f5; color: #666;    border: 1px solid #ddd;    }

.sanksi-station {
    color: #444;
    font-weight: 600;
    white-space: nowrap;
}

.sanksi-program {
    color: #555;
}

.sanksi-date {
    color: #888;
    font-size: 12.5px;
    white-space: nowrap;
}

/* Sanksi pagination */
.sanksi-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 28px 0 40px;
    flex-wrap: wrap;
}

.sanksi-pgbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--red);
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    transition: background 0.2s, box-shadow 0.2s;
    box-shadow: 0 2px 8px rgba(224,7,11,0.20);
}

.sanksi-pgbtn:hover:not(.disabled) {
    background: #b50408;
    color: #fff;
    box-shadow: 0 4px 12px rgba(224,7,11,0.30);
}

.sanksi-pgbtn.disabled {
    background: #e8e8e8;
    color: #bbb;
    pointer-events: none;
    box-shadow: none;
}

.sanksi-pgnum {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: #555;
    background: #f5f5f5;
    border: 1px solid #eee;
    transition: all 0.15s;
    padding: 0 8px;
}

.sanksi-pgnum:hover:not(.disabled):not(.active) {
    background: #fff0f0;
    color: var(--red);
    border-color: var(--red);
}

.sanksi-pgnum.active {
    background: var(--red);
    color: #fff;
    border-color: var(--red);
}

.sanksi-pgnum.disabled {
    pointer-events: none;
    color: #bbb;
    background: transparent;
    border-color: transparent;
}

.sanction-table a{
    color: var(--blue);
}

.sanction-table thead{
    border-bottom: var(--black1) 2px solid;
}

.sanction-table th{
    padding: 10px;
    text-align: center;
}

.sanction-table tr{
    border-bottom: var(--gray) 1px solid;
}

.sanction-table td{
    padding: 5px;
    text-align: center;
}

.text-icon{
    display: flex;
    align-items: center;
    gap: 5px;
}

.document-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.deskripsi-box{
    text-align: justify;
}

.deskripsi-box table {
    width: 100% !important;
    border-collapse: collapse;
    table-layout: fixed;
}

.deskripsi-box table td,
.deskripsi-box table th {
    padding: 8px 12px;
    border: 1px solid #ddd;
    word-break: break-word;
    vertical-align: top;
}

.deskripsi-box table tr:first-child td,
.deskripsi-box table tr:first-child th {
    background: #f5f5f5;
    font-weight: 600;
}

/* agenda */
.agenda-wrapper{
    display: grid;
    grid-template-columns: 1fr 40%;
    gap: 20px;
    padding-bottom: 80px;
}

.agenda-filter{
    font-size: 14px;
}

.filter-item{
    display: block;
    margin-bottom: 10px;
}

.calendar-header{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.calendar-grid{
    display: grid;
    grid-template-columns: repeat(7, 1fr);
}

.day-name{
    text-align: center;
    font-size: 12px;
    font-weight: bold;
}

.calendar-day{
    height: 90px;
    border-top: var(--black1) 1px solid;
    border-left: var(--black1) 1px solid;
    padding: 6px;
    font-size: 12px;
    position: relative;
    box-sizing: border-box;
}

.calendar-day:nth-child(7n){
    border-right: var(--black1) 1px solid;
}

.calendar-day:nth-last-child(-n+7){
    border-bottom: var(--black1) 1px solid;
}

.today-label{
    font-size:10px;
    background:white;
    color:var(--green);
    padding:2px 6px;
    border-radius:4px;
    margin-bottom:3px;
    display:inline-block;
}

.calendar-day.today{
    background-color: var(--green);
    color: var(--white);
    border-radius: 6px;
}

.calendar-day.today .event-count{
    background-color: var(--white);
    color: var(--green);
}

.calendar-day.other-month{
    color: var(--gray);
    background-color: var(--gray1);
}

#calendar-days{
    display: contents;
}

.agenda-sidebar{
    font-size: 14px;
}

.agenda-list-calendar .card-agendas{
    transition: background-color 0.3s ease, transform 0.3s ease;
    overflow: hidden;
}

.agenda-list-calendar
.card-agendas.status-done
.card-agendas-detail::before{
    background: linear-gradient(to right,var(--green),var(--white)) !important;
    opacity: 1 !important;
}

.agenda-list-calendar
.card-agendas.status-progress
.card-agendas-detail::before{
    background: linear-gradient(to right,var(--yellow),var(--white)) !important;
    opacity: 1 !important;
}

.agenda-list-calendar
.card-agendas.status-upcoming
.card-agendas-detail::before{
    background: linear-gradient(to right,var(--blue),var(--white)) !important;
    opacity: 1 !important;
}


.agenda-list-calendar
.card-agendas:hover
.card-agendas-detail::before{
    opacity: 1 !important;
}

.agenda-list-calendar
.card-agendas:hover
.card-agenda-img{
    transform: none !important;
}

.agenda-list-calendar
.card-agendas-date{
    position: relative;
    overflow: hidden;
}

.agenda-list-calendar
.card-agenda-img{
    width: 100%;
    height: 100%;
    transform: none !important;
    transition: none !important;
}

.agenda-list-calendar
.card-agenda-img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.agenda-list-calendar
.date-day,
.agenda-list-calendar
.date-month{
    display: none;
}

.agenda-card{
    border: var(--navy) 1px solid;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 10px;
}

.agenda-modal{
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    inset: 0;
    z-index: 9999;
    background: rgba(0,0,0,0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.agenda-modal.active{
    opacity: 1;
    pointer-events: all;
}

.agenda-modal-content{
    background: var(--white);
    padding: 20px;
    border-radius: 20px;
    gap: 20px;
    width: 700px;
    transform: translateY(50px);
    opacity: 0;
    transition: all 0.3s ease;
}

.agenda-modal.active .agenda-modal-content{
    transform: translateY(0);
    opacity: 1;
}

.agenda-modal-content img {
    border-radius: 10px;
    margin-bottom: 20px;
    margin-top: 20px;
    width: 100%;
    height: 250px;
    object-fit: cover;
}

.modal-info{
    display: flex;
    flex-direction: column;
}

.modal-row{
    display: flex;
    gap: 10px;
}

.modal-group{
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
}

.modal-links{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

.event-count{
    font-size:10px;
    background:#1f8f4e;
    color:white;
    padding:2px 6px;
    border-radius:4px;
    margin-top:4px;
    display:inline-block;
}

@media screen and (max-width: 768px) {
    /* Accessibility trigger — vertical on mobile to save horizontal space */
    .a11y-trigger {
        flex-direction: column;
        padding: 14px 8px;
        gap: 5px;
        writing-mode: horizontal-tb;
        border-radius: 10px 0 0 10px;
    }
    .a11y-trigger svg { width: 20px; height: 20px; }
    .a11y-trigger span {
        font-size: 9px;
        letter-spacing: 0.2px;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
    }

    /* Header */
    header{
        height: 65px;
    }

    .header{
        width: 100%;
        justify-content: space-between;
        padding: 0 15px;
    }

    .logo{
        flex: unset;
    }

    .logo img{
        height: 48px;
    }

    .burger-menu{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 42px;
        height: 42px;
        border: none;
        background: transparent;
        font-size: 28px;
        cursor: pointer;
        color: var(--black);
        z-index: 1002;
    }

    .mobile-overlay{
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        opacity: 0;
        visibility: hidden;
        transition: 0.3s ease;
        z-index: 999;
    }

    .mobile-overlay.show{
        opacity: 1;
        visibility: visible;
    }

    .navigation{
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background-color: var(--white);
        padding: 80px 20px 30px;
        transition: right 0.3s ease;
        z-index: 1001;
        overflow-y: auto;
        flex: unset;
        align-items: flex-start;
    }

    .navigation.show{
        right: 0;
    }

    .menu{
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
        width: 100%;
    }

    .menu li{
        width: 100%;
        list-style: none;
    }

    .menu li a{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        padding: 6px 0;
        font-size: 16px;
        border-bottom: none;
    }

    .menu li a:hover,
    .menu li a.active{
        border-bottom: none;
    }

    .dropdown-menu{
        position: static;
        display: none;
        padding: 10px 0 0 12px;
        background: transparent;
        box-shadow: none;
        min-width: unset;
        width: 100%;
        border: none;
    }

    .dropdown-menu.show{
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .dropdown-menu li a{
        font-size: 14px;
        color: var(--black);
        border: none;
    }

    .dropdown-menu li a:hover,
    .dropdown-menu li a.active{
        color: var(--black);
        border: none;
    }

    /* Footer */
    footer{
        padding: 30px 0;
    }

    .footer{
        width: 100%;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 22px;
        padding: 0 20px;
        text-align: center;
    }

    .footer-column{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
    }

    .logo-footer{
        width: 100px;
        margin-bottom: 6px;
    }

    .footer-column p{
        margin: 0;
        font-size: 14px;
        line-height: 1.6;
    }

    .menu-footer{
        gap: 8px;
        padding: 0;
        margin: 0;
    }

    .menu-footer li{
        list-style: none;
    }

    .menu-footer li a{
        display: inline-block;
        font-size: 14px;
        border-bottom: transparent 2px solid;
    }

    .menu-footer li a:hover{
        border-bottom: var(--white) 2px solid;
    }

    .maps{
        width: 100%;
        height: 220px;
        border-radius: 16px;
    }

    /* Mobile - Hero */
    .sec-hero {
        position: relative;
        width: 100%;
        min-height: 100vh;
        height: auto;
        overflow-x: hidden;
        overflow-y: visible;
    }

    .sec-hero .carousel{
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }

    .sec-hero .carousel-inner{
        width: 100%;
        height: 100%;
    }

    .sec-hero .carousel-item{
        width: 100%;
        height: 100%;
    }

    .sec-hero .carousel-item img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .hero-content{
        position: relative;
        z-index: 2;
        width: 100%;
        height: 100%;
        padding: 20px 15px 20px;
        overflow-y: auto;
    }

    .berita{
        width: 100%;
        padding: 16px 16px 0;
    }

    .berita-title{
        margin-bottom: 12px;
        padding-bottom: 10px;
    }

    .berita-title h1{
        font-size: 18px;
        line-height: 1.2;
    }

    .berita-title .berita-button{
        display: none;
    }

    .berita-content{
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .berita-right{
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .berita-left, 
    .item-terkini{
        width: 100%;
        height: 180px;
        border-radius: 14px;
        overflow: hidden;
    }

    .berita-left img,
    .item-terkini img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .berita-badge{
        position: absolute;
        top: 10px;
        left: 10px;
        z-index: 3;
        font-size: 10px;
        padding: 5px 8px;
        border-radius: 6px;
        background-color: var(--red);
        color: var(--white);
    }

    .berita-info,
    .terkini-info{
        position: absolute;
        left: 14px;
        right: 14px;
        bottom: 14px;
        z-index: 3;
        color: var(--white);
        padding: 0;
    }

    .berita-info h3,
    .terkini-info h6{
        font-size: 16px;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .berita-info p,
    .terkini-info p{
        font-size: 12px;
        margin-bottom: 5px;
        opacity: 0.8;
    }

    .berita-content .mobile-news-btn{
        margin-top: 10px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 12px 16px;
        border-radius: 12px;
        color: var(--white);
        font-size: 14px;
        font-weight: 600;
        text-decoration: none;
    }

    /* Mobile - Layanan */
    .sec-layanan {
        padding: 36px 0 40px;
    }

    .sec-title {
        margin-bottom: 20px;
    }

    .sec-title h1 {
        font-size: 26px;
        line-height: 1.2;
    }

    .layanan-subtitle {
        font-size: 13px;
    }

    .fitur {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    .fitur-item {
        padding: 16px 10px 14px;
        gap: 8px;
        font-size: 13px;
        border-radius: 12px;
    }

    .circle {
        width: 64px;
        height: 64px;
        padding: 10px;
    }

    .circle img {
        width: 44px;
        height: 44px;
        object-fit: contain;
    }

    .fitur-item p {
        font-size: 12px;
        line-height: 1.3;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .fitur-visit {
        font-size: 10px;
    }

    /* Mobile - Home About */
    .about {
        flex-direction: column-reverse;
        gap: 24px;
        padding: 40px 0;
    }

    .about-left {
        flex: 1;
        width: 100%;
    }

    .about-tag {
        margin: 0 auto 14px;
    }

    .quote {
        font-size: 24px;
        line-height: 1.4;
        padding-left: 14px;
    }

    .about-desc {
        font-size: 14px;
        padding-left: 18px;
    }

    .about-actions {
        padding-left: 18px;
        flex-direction: column;
        gap: 10px;
    }

    .button-primer, .button-sekunder {
        width: 100%;
        justify-content: center;
        padding: 13px 18px;
    }

    .about-pillars {
        gap: 10px;
    }

    .about-pillar {
        padding: 12px 14px;
        gap: 12px;
    }

    .about-pillar strong {
        font-size: 13px;
    }

    .about-pillar p {
        font-size: 12px;
    }

    .about-right {
        flex: 1;
        width: 100%;
    }

    .about-img-top {
        width: 100%;
        overflow: visible;
    }

    .about-img-top img {
        width: 100%;
        height: auto;
        object-fit: contain;
        display: block;
    }

    #typing-word{
        border-right: 2px solid var(--black);
        padding-right: 4px;
    }

    /* Mobile - Home Berita */
    .sec-berita {
        margin-bottom: 40px;
    }

    .mainnews-wrapper {
        flex-direction: column;
        gap: 30px;
    }

    .mainnews-list {
        flex: 1;
        width: 100%;
        gap: 20px;
    }

    .mainnews-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .mainnews-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .mainnews-featured {
        gap: 12px;
        padding-bottom: 16px;
        border-bottom: 2px solid #ebebeb;
        margin-bottom: 4px;
    }

    .mainnews-featured-img {
        aspect-ratio: 16 / 9;
        border-radius: 12px;
    }

    .mainnews-featured-info h2 {
        font-size: 20px;
        line-height: 1.4;
    }

    .mainnews-isi {
        font-size: 14px;
        line-height: 1.7;
    }

    .mainnews-card {
        gap: 12px;
        padding: 12px 0;
    }

    .mainnews-card-img {
        flex: 0 0 96px;
        height: 68px;
        border-radius: 8px;
    }

    .mainnews-card-info h6 {
        font-size: 14px;
        line-height: 1.45;
        -webkit-line-clamp: 3;
    }

    .mainnews-sidebar {
        width: 100%;
    }

    .mainnews-sidebar h1 {
        margin-bottom: 18px;
    }

    .berita-item{
        display: flex;
        gap: 12px;
        margin-bottom: 14px;
        padding-bottom: 14px;
        border-bottom: 1px solid var(--gray1);
    }

    .berita-img{
        flex: 0 0 110px;
        height: 90px;
        border-radius: 10px;
        overflow: hidden;
    }

    .berita-img img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .berita-detail{
        width: 100%;
    }

    .berita-detail h6{
        font-size: 15px;
        line-height: 1.4;
        margin-bottom: 6px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .berita-detail p{
        font-size: 12px;
        line-height: 1.5;
    }

    .topik-wrapper{
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
        margin-top: 20px;
    }

    .topik-card{
        padding: 10px;
        border-radius: 14px;
    }

    .topik-foto{
        height: 120px;
        border-radius: 10px;
    }

    .topik-info{
        padding: 10px 4px 4px;
    }

    .topik-info h5{
        font-size: 14px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .topik-info .mainnews-date{
        font-size: 11px;
    }

    .secnews-wrapper {
        flex-direction: column;
        gap: 28px;
        margin-bottom: 28px;
    }

    .secnews-column {
        width: 100%;
    }

    .secnews-col-header h3 {
        font-size: 20px;
    }

    .secnews-item {
        padding: 12px 0;
        gap: 12px;
    }

    .secnews-foto {
        flex: 0 0 90px;
        height: 65px;
        border-radius: 8px;
    }

    .secnews-info h6 {
        font-size: 14px;
        line-height: 1.4;
        -webkit-line-clamp: 3;
    }

    .secnews-meta .mainnews-date {
        font-size: 12px;
    }

    .kajian-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }

    .kajian-info h6 {
        font-size: 13px;
        -webkit-line-clamp: 3;
    }

    /* Mobile - Home Agenda */
    .agenda-content{
        flex-direction: column;
        gap: 40px;
    }

    .agenda-column{
        width: 100%;
    }

    .agenda-column h1{
        font-size: 30px;
        line-height: 1.2;
    }

    .agenda{
        padding: 18px 0;
        gap: 16px;
    }

    .agenda-first{
        border-radius: 18px;
        height: 240px;
    }

    .agenda-first img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .agenda-info{
        bottom: 16px;
        padding: 0 16px;
    }

    .agenda-info h4{
        font-size: 20px;
        line-height: 1.4;

        margin: 8px 0;
    }

    .agenda-info p{
        font-size: 13px;
        line-height: 1.5;
    }

    .info-first{
        gap: 10px;
        align-items: center;
    }

    .info-first .status{
        font-size: 11px;
        padding: 5px 8px;
    }
    .agenda-data{
        gap: 14px;
    }

    .card-agendas{
        overflow: hidden;
        background-color: var(--white);
        box-shadow: rgba(0,0,0,0.08) 0px 3px 10px;
    }

    .card-agendas-date{
        flex: 0 0 95px;
        width: 95px;
        aspect-ratio: unset;
    }

    .date-day{
        font-size: 26px;
    }

    .date-month{
        font-size: 18px;
    }

    .card-agendas-detail{
        padding: 12px;
    }

    .card-agendas-detail h5{
        font-size: 15px;
        line-height: 1.4;
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .card-agendas-detail p{
        font-size: 12px;
        line-height: 1.5;
    }

    .detail-status{
        flex-direction: column;
        gap: 4px;
        margin-top: 6px;
    }

    .detail-status .status{
        font-size: 11px;
    }

    /* Mobile - Banner + Calendar */
    .banner-calendar-layout {
        grid-template-columns: 1fr;
        border-radius: 12px;
    }

    .infografis-col {
        min-height: 260px;
    }

    .calendar-col {
        border-left: none;
        border-top: 1px solid #eee;
        padding: 16px 14px 12px;
    }

    .calendar-col > h1 {
        font-size: 16px;
    }

    .newscalendar-header h3 {
        font-size: 13px;
    }

    .calendar-days div {
        font-size: 9px;
    }

    .news-calendar {
        gap: 2px;
    }

    .news-cell {
        font-size: 10px;
        padding: 3px 2px 14px;
    }

    .news-count-badge {
        font-size: 7.5px;
        min-width: 12px;
        height: 12px;
    }

    .newscalendar-list{
        margin-top: 14px;
        padding: 0;
        min-height: auto;
    }

    .newscalendar-item{
        padding: 10px 0;
        font-size: 14px;
        line-height: 1.5;
    }

    .selengkapnya{
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
        border-radius: 12px;
        font-size: 14px;
    }

    .agenda-modal{
        padding: 15px;
        align-items: flex-start;
        overflow-y: auto;
    }

    .agenda-modal-content{
        width: 100%;
        max-width: 100%;
        padding: 16px;
        border-radius: 15px;
        margin-top: 30px;
        gap: 15px;
    }

    .agenda-modal-content img{
        width: 100%;
        height: 180px;
        object-fit: cover;
        border-radius: 12px;
        margin-top: 10px;
        margin-bottom: 15px;
    }

    #modal-judul{
        font-size: 20px;
        line-height: 1.5;
    }

    .modal-info{
        gap: 12px;
    }

    .modal-group{
        gap: 10px;
        align-items: flex-start;
        font-size: 14px;
        line-height: 1.5;
    }

    .modal-links{
        gap: 10px;
        margin-top: 10px;
    }

    .modal-links a{
        width: 100%;
        text-align: center;
        padding: 12px;
        border-radius: 10px;
        font-size: 14px;
    }
    
    #modal-deskripsi{
        font-size: 14px;
        line-height: 1.5;
        margin-top: 15px;
    }

    .event-count{
        font-size: 10px;
        padding: 2px 5px;
    }

    /* Mobile - Home Galeri */
    .sec-galeri{
        padding: 40px 0;
    }

    .title-galeri h1{
        font-size: 32px;
        line-height: 1.2;
    }

    .galeri{
        gap: 50px;
        margin-top: 24px;
    }

    .galeri-menu{
        width: 100%;
    }

    .zigzag-gallery{
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        width: 100%;
    }

    .zigzag-column{
        height: auto;
        gap: 12px;
    }

    .zigzag-column.down,
    .zigzag-column.up{
        justify-content: flex-start;
    }

    .zigzag-item{
        height: 180px;
        border-radius: 14px;
    }

    .zigzag-item img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .galleryy-overlay{
        transform: translateY(0);
        opacity: 1;
        padding: 12px;
        background: linear-gradient(
            to top,
            rgba(0,0,0,0.85),
            rgba(0,0,0,0.3),
            rgba(0,0,0,0)
        );
    }

    .galleryy-overlay h5{
        font-size: 14px;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .insta-menu{
        flex-direction: column;
        padding: 0;
        gap: 20px;
    }

    .insta-left{
        width: 100%;
    }

    .insta-left img{
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .insta-right{
        width: 100%;
        align-items: center;
    }

    .instagram-grid{
        width: 100%;
        overflow-x: auto;
        gap: 14px;
        padding-bottom: 10px;
        justify-content: flex-start;
    }

    .instagram-grid::-webkit-scrollbar{
        display: none;
    }

    .instagram-card{
        flex: 0 0 230px;
        width: 230px;
        height: 430px;
        border-radius: 14px;
        overflow: hidden;
    }

    .instagram-inner{
        transform: scale(0.7);
        transform-origin: top left;
    }

    .youtube-grid{
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        width: 100%;
    }

    .youtube-card{
        padding: 12px;
        border-radius: 16px;
        background-color: var(--black1);
    }

    .youtube-foto{
        border-radius: 12px;
        overflow: hidden;
        height: 190px;
    }

    .youtube-foto img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .youtube-info h5{
        font-size: 16px;
        line-height: 1.5;
        height: auto;
    }

    .youtube-info p{
        font-size: 12px;
    }

    .galeri-foot{
        margin-top: 18px;
        font-size: 14px;
    }

    .zigzag-item:hover img{
        transform: none;
    }

    .youtube-card:hover{
        background-color: var(--black1);
    }

    /* Mobile - Home Saran */
    .sec-saran{
        padding: 40px 0;
    }

    .saran{
        flex-direction: column-reverse;
        gap: 30px;
    }

    .saran-left,
    .saran-right{
        flex: 1;
        width: 100%;
        padding: 0;
    }

    .saran-circle{
        width: 240px;
        height: 240px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: visible;
    }

    .saran-circle::after{
        width: 120px;
        height: 120px;
        left: -30px;
        bottom: 10px;
    }

    .saran-right img{
        height: 320px;
        width: auto;
        object-fit: contain;
        position: relative;
        z-index: 2;
    }

    .saran-info{
        width: 100%;
        text-align: center;
    }

    .saran-info h5{
        font-size: 16px;
        margin-bottom: 10px;
    }

    .saran-info h1{
        font-size: 30px;
        line-height: 1.3;
        margin-bottom: 6px;
    }

    .saran-info h3{
        font-size: 24px;
        margin-top: 18px;
    }

    .saran-download{
        justify-content: center;
        gap: 14px;
        margin: 24px 0;
        flex-wrap: wrap;
    }

    .download-button{
        width: 180px;
        padding: 10px 12px;
        gap: 12px;
        border-radius: 12px;
    }

    .download-button span{
        font-size: 28px;
    }

    .download-info p:first-child{
        font-size: 11px;
    }

    .download-info p:last-child{
        font-size: 15px;
    }

    .pubdok-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px 12px;
    }

    .pubdok-section-title { font-size: 17px; }

    .bookshelf-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px 12px;
    }

    .news-empty img {
        width: 160px;
        height: 120px;
    }

    /* Mobile - Title */
    .title-page{
        height: 140px;
        margin-top: 10px;
    }

    .title{
        flex: 0 0 50%;
        padding: 10px;
    }

    .title h3{
        font-size: 20px;
        line-height: 1.5;
    }

    .title-image{
        flex-direction: 0 0 50%;
    }

    .title-image::after{
        width: 70%;
    }

    /* Mobile - About */
    .about-container{
        flex-direction: column;
        gap: 15px;
        padding: 15px 0;
    }

    .about-sidebar{
        flex: none;
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        gap: 10px;
        padding-bottom: 5px;
    }

    .about-sidebar::-webkit-scrollbar{
        display: none;
    }

    .about-sidebar a{
        flex: 0 0 auto;
        padding: 12px 16px;
        font-size: 14px;
        white-space: nowrap;
        border-radius: 15px;
    }

    .about-sidebar a span{
        display: none;
    }

    .about-content{
        flex: none;
        width: 100%;
        padding: 15px;
        border-radius: 15px;
        gap: 15px;
        font-size: 14px;
    }

    .vidprof iframe{
        width: 100%;
        height: 220px;
    }

    .komisioner-wrapper{
        width: 220px;
    }

    .komisioner-track{
        gap: 15px;
    }

    .komisioner-item{
        flex: 0 0 220px;
        width: 220px;
        height: 280px;
        opacity: 1;
    }

    .komisioner-title{
        text-align: center;
        padding: 15px 0;
    }

    .komisioner-title h2{
        font-size: 20px;
    }

    .komisioner-title h4{
        font-size: 16px;
    }

    .komisioner-info{
        font-size: 14px;
        text-align: justify;
    }

    .nav{
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .visi{
        padding: 30px 15px;
        gap: 15px;
    }

    .visi p{
        font-size: 16px;
    }

    .visi-logo img{
        width: 180px;
    }

    .misi{
        gap: 30px;
        align-items: center;
    }

    .misi img{
        width: 60px;
    }

    .misi li{
        font-size: 14px;
    }

    ol{
        padding-left: 20px;
        padding-right: 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .tugas{
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    .tugas-item{
        padding: 10px 5px;
    }

    .tugas-item img{
        height: 60px;
    }

    .tugas-item p{
        font-size: 12px;
    }

    .wewenang-item{
        padding: 20px;
        border-radius: 15px;
    }

    .wewenang-item li{
        font-size: 12px;
    }

    .logo-line{
        gap: 20px;
        padding: 20px;
    }

    .logo-line.black{
        padding: 20px;
    }

    .about-logo img{
        width: 100%;
    }

    .logo-bulat{
        max-width: 90px;
    }

    /* Mobile - Galeri */
    .main-nav{
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: center;
    }

    .menu-galeri{
        display: flex;
        justify-content: center;
        gap: 10px;
        flex-wrap: nowrap;
        width: 100%;
        padding: 0;
        margin: 0;
    }

    .menu-galeri li{
        list-style: none;
        width: 100%;
    }

    .menu-galeri li a{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        font-size: 14px;
        padding: 10px;
        border-radius: 20px;
    }

    .cari{
        width: 100%;
    }

    .cari input{
        width: 100%;
    }

    .gallery-grid{
        display: grid;
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 8px;
        padding: 15px 0;
    }

    .galeri-card{
        width: 100%;
        min-width: 0;
        height: 180px;
        border-radius: 20px;
        overflow: hidden;
    }

    .uiw--date {
        width: 12px;
        height: 12px;
    }

    .card-foto{
        flex: 0 0 58%;
    }

    .card-foto img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .card-info{
        padding: 5px;
    }

    .card-info p{
        font-size: 12px;
        line-height: 1.2;
        margin-bottom: 2px;
    }

    .card-info h5{
        font-size: 14px;
        line-height: 1.4;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
        display: -webkit-box;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        height: calc(1.4em * 2);
    }

    .light-youtube-card{
        width: 100%;
        padding: 6px;
        border-radius: 12px;
        gap: 6px;
    }

    .light-youtube-info h5{
        font-size: 14px;
        line-height: 1.4;
        height: calc(1.4em * 2);
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        height: calc(1.4em * 2);
    }

    .light-youtube-info p{
        font-size: 12px;
    }

    .light-youtube-foto{
        border-radius: 8px;
        overflow: hidden;
    }

    .light-youtube-foto img{
        width: 100%;
        aspect-ratio: 16/9;
        object-fit: cover;
    }

    .instagram-feed{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
        width: 100%;
    }

    .instagram-card{
        width: 100%;
        overflow: hidden;
    }

    .instagram-inner{
        transform: scale(0.58);
        transform-origin: top left;
        width: calc(100% / 0.58);
    }

    .button-primer{
        font-size: 14px;
        padding: 8px 16px;
    }

    /* Mobile - Kontak */
    .kontak-hero {
        flex-direction: column;
        margin: 16px 0 18px;
        border-radius: 14px;
    }

    .kontak-hero-left {
        flex: unset;
        width: 100%;
        padding: 16px 16px 0;
        justify-content: flex-start;
    }

    .kontak-hero-left img { width: 130px; }

    .kontak-hero-right {
        padding: 18px 20px 22px;
    }

    .kontak-hero-right h2 { font-size: 18px; }

    .kontak-hero-chips { gap: 8px; }

    .kontak-chip { font-size: 12px; padding: 6px 11px; }

    .kontak-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 24px;
    }

    .kontak-card { padding: 18px 14px; gap: 10px; }

    .kontak-sosmed-inner {
        flex-direction: column;
        gap: 20px;
    }

    .kontak-sosmed-label {
        flex: unset;
        text-align: center;
    }

    .kontak-sosmed-share-icon { margin: 0 auto 8px; }

    .kontak-sosmed-label h3 { font-size: 17px; }

    .kontak-map-wrap {
        flex-direction: column;
        min-height: unset;
    }

    .kontak-map-frame {
        flex: unset;
        min-height: 240px;
    }

    .kontak-map-info { padding: 22px 18px 20px; }

    .kontak-section-title { font-size: 17px; }


    /* Mobile - FAQ */
    .isi{
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .faq-img{
        width: 220px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .faq-container{
        width: 100%;
        border-radius: 12px;
    }

    .faq-item{
        border-bottom: var(--red) 1px solid;
    }

    .faq-question{
        padding: 16px;
        font-size: 14px;
        line-height: 1.5;
        text-align: left;
        gap: 10px;
    }

    .faq-answer{
        padding: 16px;
        font-size: 14px;
        line-height: 1.5;
    }

    .arrow{
        font-size: 14px;
        flex-shrink: 0;
    }
}