.hero-bootstrap {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .22), transparent 30%),
        radial-gradient(circle at 76% 26%, rgba(139, 205, 244, .20), transparent 24%),
        linear-gradient(135deg, #06182f 0%, #0f4c81 52%, #f7fbff 155%);
}

.hero-bootstrap::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(115deg, transparent 0%, rgba(118, 197, 244, .16) 32%, transparent 48%),
        linear-gradient(245deg, transparent 0%, rgba(255, 255, 255, .12) 38%, transparent 55%),
        repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 118px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 92px);
    background-size: 190% 190%, 170% 170%, auto, auto;
    mix-blend-mode: screen;
    opacity: .85;
    animation: heroBlueBackground 14s ease-in-out infinite alternate;
    pointer-events: none;
}

.premium-hero {
    isolation: isolate;
}

.hero-bootstrap-img {
    height: 660px;
    object-fit: cover;
    filter: saturate(1.08) contrast(1.05) brightness(.88);
    transform: scale(1.02);
}

.hero-bootstrap .carousel-item {
    position: relative;
}

.hero-bootstrap .carousel-item::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(6, 24, 47, .92) 0%, rgba(15, 76, 129, .62) 48%, rgba(245, 250, 255, .20) 100%),
        linear-gradient(0deg, rgba(6, 24, 47, .78), rgba(255, 255, 255, .04) 60%),
        radial-gradient(circle at 24% 42%, rgba(255, 255, 255, .18), transparent 34%);
}

.hero-atmosphere {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.hero-orb,
.hero-bubble,
.hero-lightning,
.hero-floating-box {
    position: absolute;
    display: block;
    pointer-events: none;
}

.hero-orb {
    border-radius: 50%;
    filter: blur(2px);
    opacity: .55;
    animation: heroDrift 10s ease-in-out infinite alternate;
}

.hero-orb-1 {
    width: 320px;
    height: 320px;
    left: -92px;
    top: 96px;
    background: radial-gradient(circle, rgba(97, 196, 255, .36), rgba(97, 196, 255, 0) 68%);
}

.hero-orb-2 {
    width: 250px;
    height: 250px;
    right: 8%;
    top: 76px;
    background: radial-gradient(circle, rgba(255, 214, 116, .28), rgba(255, 214, 116, 0) 70%);
    animation-delay: -3s;
}

.hero-orb-3 {
    width: 190px;
    height: 190px;
    right: 24%;
    bottom: 54px;
    background: radial-gradient(circle, rgba(71, 204, 168, .24), rgba(71, 204, 168, 0) 72%);
    animation-delay: -6s;
}

.hero-bubble {
    width: 13px;
    height: 13px;
    border: 1px solid rgba(255, 255, 255, .50);
    border-radius: 50%;
    background: rgba(255, 255, 255, .09);
    box-shadow: 0 0 24px rgba(116, 207, 255, .34);
    animation: heroFloat 8s ease-in-out infinite;
}

.hero-bubble-1 { left: 7%; top: 58%; animation-delay: -1s; }
.hero-bubble-2 { left: 48%; top: 19%; width: 18px; height: 18px; animation-delay: -4s; }
.hero-bubble-3 { right: 13%; top: 48%; width: 10px; height: 10px; animation-delay: -2s; }
.hero-bubble-4 { right: 32%; bottom: 18%; width: 22px; height: 22px; animation-delay: -5s; }

.hero-lightning {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    color: #fff3bd;
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 18px;
    box-shadow: 0 18px 48px rgba(5, 20, 39, .28), inset 0 1px 0 rgba(255, 255, 255, .20);
    backdrop-filter: blur(12px);
    animation: heroIconFloat 7s ease-in-out infinite;
}

.hero-lightning i {
    font-size: 1.45rem;
    filter: drop-shadow(0 0 12px rgba(255, 217, 120, .70));
}

.hero-lightning-1 { right: 19%; top: 30%; }
.hero-lightning-2 { right: 8%; bottom: 30%; animation-delay: -2.2s; }
.hero-lightning-3 { left: 42%; bottom: 18%; animation-delay: -4s; }

.hero-floating-box {
    min-width: 118px;
    padding: 10px 14px;
    color: #eff8ff;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .07));
    border: 1px solid rgba(255, 255, 255, .30);
    border-radius: 16px;
    box-shadow:
        0 18px 42px rgba(2, 14, 27, .22),
        0 0 28px rgba(93, 174, 225, .18),
        inset 0 1px 0 rgba(255, 255, 255, .30);
    backdrop-filter: blur(14px);
    font-size: .68rem;
    font-weight: 900;
    animation: heroBoxFloat 8.5s ease-in-out infinite;
}

.hero-floating-box::before {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, .55) 45%, transparent 62%);
    opacity: 0;
    animation: heroBoxShine 4.8s ease-in-out infinite;
}

.hero-floating-box-1 {
    left: 9%;
    top: 24%;
}

.hero-floating-box-2 {
    right: 31%;
    top: 16%;
    animation-delay: -2s;
}

.hero-floating-box-3 {
    right: 7%;
    top: 58%;
    animation-delay: -4s;
}

.hero-floating-box-4 {
    left: 34%;
    bottom: 12%;
    min-width: 150px;
    color: #0b2f54;
    background: rgba(255, 255, 255, .76);
    border-color: rgba(255, 255, 255, .72);
    box-shadow:
        0 18px 42px rgba(2, 14, 27, .18),
        0 0 32px rgba(255, 255, 255, .18);
    animation-delay: -5.6s;
}

.carousel-caption {
    bottom: auto;
}

.premium-caption {
    z-index: 3;
    top: 50%;
    bottom: auto;
    left: 7%;
    right: 7%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    align-items: end;
    gap: 32px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0;
    transform: translateY(-45%);
}

.hero-content-shell {
    max-width: 790px;
    padding: 0;
    border-radius: 26px;
    transition: background .28s ease, box-shadow .28s ease, backdrop-filter .28s ease, transform .28s ease, padding .28s ease;
}

.premium-caption:hover .hero-content-shell {
    padding: 18px;
    background: rgba(255, 255, 255, .10);
    box-shadow: 0 26px 74px rgba(2, 14, 27, .24), inset 0 1px 0 rgba(255, 255, 255, .22);
    backdrop-filter: blur(10px);
    transform: translateY(-2px);
}

.hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    max-width: 100%;
    margin-bottom: 18px;
    padding: 9px 14px;
    color: #eff8ff;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 999px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18);
    backdrop-filter: blur(12px);
    font-size: .78rem;
    font-weight: 800;
    line-height: 1.25;
}

.hero-kicker i {
    color: #ffd875;
}

.premium-caption h1 {
    max-width: 820px;
    margin: 0;
    color: #fff;
    font-size: clamp(2.3rem, 4.35vw, 4.55rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: 0;
    text-shadow: 0 18px 45px rgba(0, 0, 0, .36);
}

.premium-caption p {
    max-width: 680px;
    margin: 22px 0 0;
    color: rgba(239, 248, 255, .92);
    font-size: 1.04rem;
    line-height: 1.85;
    text-shadow: 0 12px 28px rgba(0, 0, 0, .32);
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.hero-actions .btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 14px 22px;
    overflow: hidden;
    border-radius: 16px;
    font-size: .95rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 20px 44px rgba(2, 14, 27, .28);
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

.hero-actions .btn::before,
.layanan-card::before {
    content: "";
    position: absolute;
    top: -45%;
    bottom: -45%;
    left: -80%;
    width: 44%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .72), transparent);
    transform: rotate(16deg);
    opacity: 0;
    pointer-events: none;
}

.hero-actions .btn:hover::before,
.layanan-card-link:hover .layanan-card::before {
    opacity: 1;
    animation: premiumShine .8s ease;
}

.hero-actions .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 26px 54px rgba(2, 14, 27, .34);
}

.hero-btn-primary {
    color: #09233f;
    border: 0;
    background: linear-gradient(135deg, #ffe08a, #ffffff);
}

.hero-btn-primary:hover {
    color: #09233f;
    background: linear-gradient(135deg, #fff0b8, #ffffff);
}

.hero-btn-light {
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .32);
    background: rgba(255, 255, 255, .13);
    backdrop-filter: blur(14px);
}

.hero-btn-light:hover {
    color: #fff;
    background: rgba(255, 255, 255, .21);
}

.hero-trust-panel {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
    color: #fff;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 24px;
    box-shadow: 0 28px 70px rgba(2, 14, 27, .30);
    backdrop-filter: blur(16px);
}

.hero-trust-panel div {
    display: grid;
    grid-template-columns: 44px 1fr;
    column-gap: 12px;
    align-items: center;
    min-height: 74px;
    padding: 13px;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: 18px;
    background: rgba(255, 255, 255, .10);
}

.hero-trust-panel i {
    grid-row: span 2;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: #ffd875;
    background: rgba(255, 255, 255, .13);
    border-radius: 14px;
    font-size: 1.2rem;
}

.hero-trust-panel strong {
    font-size: 1.02rem;
    line-height: 1.1;
}

.hero-trust-panel span {
    color: rgba(239, 248, 255, .78);
    font-size: .76rem;
    font-weight: 700;
}

.hero-side-panel {
    color: #0b2f54;
    padding: 18px;
    background: rgba(255, 255, 255, .74);
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 26px;
    box-shadow: 0 30px 76px rgba(2, 14, 27, .22), inset 0 1px 0 rgba(255, 255, 255, .80);
    backdrop-filter: blur(18px);
    transition: transform .28s ease, box-shadow .28s ease, background .28s ease;
}

.hero-side-panel:hover {
    transform: translateY(-5px) scale(1.015);
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 36px 86px rgba(2, 14, 27, .28), 0 0 40px rgba(255, 255, 255, .20);
}

.hero-side-head {
    display: grid;
    gap: 6px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid rgba(15, 76, 129, .12);
}

.hero-side-head span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f4c81;
    font-size: .76rem;
    font-weight: 900;
}

.hero-side-head strong {
    color: #082646;
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1.1;
}

.hero-side-panel p {
    color: #526b82;
    font-size: .9rem;
    line-height: 1.72;
}

.hero-side-menu {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.hero-side-menu a {
    display: grid;
    gap: 7px;
    min-height: 76px;
    padding: 12px;
    color: #0b2f54;
    text-decoration: none;
    background: linear-gradient(150deg, #ffffff, #eef8ff);
    border: 1px solid rgba(15, 76, 129, .12);
    border-radius: 17px;
    box-shadow: 0 12px 24px rgba(15, 76, 129, .07);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.hero-side-menu a:hover {
    transform: translateY(-3px);
    border-color: rgba(15, 76, 129, .22);
    box-shadow: 0 18px 32px rgba(15, 76, 129, .13);
}

.hero-side-menu i {
    color: #0f4c81;
    font-size: 1.15rem;
}

.hero-side-menu span {
    font-size: .78rem;
    font-weight: 900;
}

.hero-bootstrap .carousel-indicators {
    z-index: 4;
    bottom: 28px;
    gap: 7px;
    margin-bottom: 0;
}

.hero-bootstrap .carousel-indicators [data-bs-target] {
    width: 28px;
    height: 4px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .52);
    opacity: 1;
}

.hero-bootstrap .carousel-indicators .active {
    width: 48px;
    background: #ffd875;
}

.hero-bootstrap .carousel-control-prev,
.hero-bootstrap .carousel-control-next {
    z-index: 4;
    width: 7%;
}

.contact-ribbon {
    position: relative;
    z-index: 5;
    margin-top: -36px;
    padding-bottom: 18px;
}

.info-mini-card {
    position: relative;
    height: 100%;
    min-height: 128px;
    padding: 22px 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(15, 76, 129, .12);
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(15, 76, 129, .12);
    backdrop-filter: blur(12px);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.info-mini-card:hover {
    transform: translateY(-5px);
    border-color: rgba(15, 76, 129, .22);
    box-shadow: 0 28px 64px rgba(15, 76, 129, .16);
}

.info-mini-card i {
    display: inline-grid;
    width: 48px;
    height: 48px;
    place-items: center;
    color: #0f4c81;
    background: linear-gradient(135deg, #eef8ff, #ffffff);
    border: 1px solid #d9ebf8;
    border-radius: 16px;
    box-shadow: 0 12px 26px rgba(15, 76, 129, .12);
    font-size: 1.35rem;
}

.info-mini-card .fw-bold {
    color: #0b2f54;
}

.layanan-premium-section {
    position: relative;
    overflow: hidden;
    margin-top: 0;
    padding-top: 72px !important;
    padding-bottom: 72px !important;
    background:
        radial-gradient(circle at 10% 8%, rgba(51, 151, 211, .18), transparent 30%),
        radial-gradient(circle at 88% 4%, rgba(255, 216, 117, .18), transparent 25%),
        radial-gradient(circle at 50% 115%, rgba(22, 116, 95, .13), transparent 34%),
        linear-gradient(180deg, #f8fbff 0%, #eef6fd 56%, #f7fbff 100%);
}

.layanan-premium-section::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: min(1120px, 92vw);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(15, 76, 129, .24), rgba(255, 216, 117, .42), transparent);
    transform: translateX(-50%);
}

.layanan-premium-section .container {
    position: relative;
    z-index: 1;
}

.layanan-card-link {
    display: block;
    height: 100%;
    color: inherit;
    cursor: pointer;
}

.layanan-card {
    position: relative;
    min-height: 230px;
    overflow: hidden;
    border-radius: 24px;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, .98), rgba(244, 250, 255, .92)),
        radial-gradient(circle at 50% 0%, rgba(75, 172, 230, .16), transparent 42%);
    border: 1px solid rgba(15, 76, 129, .12) !important;
    box-shadow: 0 18px 50px rgba(15, 76, 129, .11);
    transform: translateZ(0);
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease;
}

.layanan-card::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(62, 170, 230, .25), rgba(255, 216, 117, .15) 42%, rgba(62, 170, 230, 0) 70%);
    opacity: 0;
    transform: translate(-50%, -50%) scale(.72);
    transition: opacity .24s ease, transform .24s ease;
}

.layanan-card-link:hover .layanan-card,
.layanan-card-link:focus-visible .layanan-card {
    transform: translateY(-8px) scale(1.025);
    border-color: rgba(15, 76, 129, .25) !important;
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 1), rgba(239, 248, 255, .96)),
        radial-gradient(circle at 50% 0%, rgba(75, 172, 230, .20), transparent 42%);
    box-shadow: 0 30px 76px rgba(15, 76, 129, .20), 0 0 0 1px rgba(255, 255, 255, .70) inset !important;
}

.layanan-card-link:hover .layanan-card::after,
.layanan-card-link:focus-visible .layanan-card::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.18);
}

.layanan-card .card-body {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 230px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 22px;
}

.layanan-corner {
    position: absolute;
    top: 16px;
    right: 16px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #0f4c81;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(15, 76, 129, .12);
    border-radius: 50%;
    box-shadow: 0 12px 24px rgba(15, 76, 129, .08);
    opacity: .72;
    transform: translateY(0);
    transition: transform .24s ease, opacity .24s ease, color .24s ease, background .24s ease;
}

.layanan-card-link:hover .layanan-corner,
.layanan-card-link:focus-visible .layanan-corner {
    color: #0b2f54;
    background: #fff1ba;
    opacity: 1;
    transform: translate(3px, -3px);
}

.layanan-icon {
    width: 72px;
    height: 72px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 32px;
    background:
        linear-gradient(135deg, #0b3a68 0%, #1b6ca8 52%, #16745f 100%);
    box-shadow: 0 16px 34px rgba(15, 76, 129, .25), inset 0 1px 0 rgba(255, 255, 255, .25);
    animation: layananIconFloat 5.6s ease-in-out infinite;
    transition: transform .24s ease, box-shadow .24s ease, filter .24s ease;
}

.layanan-card-link:hover .layanan-icon,
.layanan-card-link:focus-visible .layanan-icon {
    transform: translateY(-3px) scale(1.06);
    filter: saturate(1.08);
    box-shadow: 0 22px 44px rgba(15, 76, 129, .30), 0 0 28px rgba(255, 216, 117, .28);
}

.layanan-card h5 {
    color: #0b2f54 !important;
    letter-spacing: 0;
}

.layanan-card p {
    max-width: 255px;
    color: #5d7185 !important;
    line-height: 1.65;
}

.col-lg-3:nth-child(2n) .layanan-icon {
    animation-delay: -1.8s;
}

@keyframes heroDrift {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(18px, -18px, 0) scale(1.06); }
}

@keyframes heroBlueBackground {
    0% { background-position: 0% 42%, 100% 50%, 0 0, 0 0; filter: hue-rotate(0deg); }
    50% { background-position: 75% 18%, 42% 70%, 24px 18px, -18px 20px; filter: hue-rotate(5deg); }
    100% { background-position: 100% 65%, 0% 35%, 44px 34px, -34px 42px; filter: hue-rotate(-4deg); }
}

@keyframes heroFloat {
    0%, 100% { transform: translateY(0); opacity: .28; }
    50% { transform: translateY(-34px); opacity: .88; }
}

@keyframes heroIconFloat {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50% { transform: translateY(-18px) rotate(3deg); }
}

@keyframes heroBoxFloat {
    0%, 100% { transform: translate3d(0, 0, 0) rotate(-1deg); opacity: .72; }
    50% { transform: translate3d(12px, -22px, 0) rotate(1deg); opacity: 1; }
}

@keyframes heroBoxShine {
    0%, 40%, 100% { opacity: 0; transform: translateX(-30%); }
    55% { opacity: .65; }
    70% { opacity: 0; transform: translateX(30%); }
}

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

@keyframes premiumShine {
    from { transform: translateX(0) rotate(16deg); }
    to { transform: translateX(370%) rotate(16deg); }
}

.card {
    border-radius: 10px;
    overflow: hidden;
}

.card-img-fixed {
    height: 220px;
    object-fit: cover;
}

.gallery-img-fixed {
    height: 210px;
    object-fit: cover;
}

.sambutan-premium-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 8%, rgba(154, 211, 246, .18), transparent 28%),
        radial-gradient(circle at 88% 10%, rgba(255, 255, 255, .78), transparent 26%),
        linear-gradient(180deg, #fbfdff 0%, #f3f9fe 100%);
}

.sambutan-premium-section::before {
    content: "";
    position: absolute;
    left: -18%;
    top: 20%;
    width: 46%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(93, 174, 225, .48), transparent);
    box-shadow: 0 0 24px rgba(93, 174, 225, .30);
    animation: sambutanSoftLightning 5.8s ease-in-out infinite;
}

.sambutan-premium {
    position: relative;
    overflow: hidden;
    border-radius: 22px;
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(180, 215, 238, .62) !important;
    box-shadow: 0 22px 56px rgba(15, 76, 129, .09);
    backdrop-filter: blur(12px);
}

.sambutan-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, .60) 42%, transparent 58%),
        radial-gradient(circle at 92% 16%, rgba(151, 210, 245, .20), transparent 28%);
    opacity: .60;
    pointer-events: none;
}

.sambutan-photo-wrap {
    min-height: 410px;
    padding: 22px;
    background: linear-gradient(145deg, #f8fcff, #eaf6fd);
}

.sambutan-photo-frame {
    position: relative;
    height: 100%;
    min-height: 366px;
    overflow: hidden;
    border: 1px solid rgba(180, 215, 238, .68);
    border-radius: 20px;
    background: #eef8ff;
    box-shadow: 0 16px 36px rgba(15, 76, 129, .10);
}

.sambutan-photo-frame::before {
    content: "";
    position: absolute;
    inset: 18px auto auto 18px;
    z-index: 2;
    width: 54px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffffff, #73bde9, transparent);
    box-shadow: 0 0 18px rgba(93, 174, 225, .60);
}

.sambutan-photo-frame::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .03), rgba(8, 38, 70, .22));
}

.sambutan-photo {
    width: 100%;
    height: 100%;
    min-height: 366px;
    object-fit: cover;
    display: block;
    filter: saturate(.98) contrast(1.02);
}

.sambutan-photo-badge {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    max-width: calc(100% - 32px);
    padding: 10px 13px;
    color: #0b2f54;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(255, 255, 255, .72);
    border-radius: 999px;
    backdrop-filter: blur(12px);
    font-size: .78rem;
    font-weight: 900;
}

.sambutan-photo-badge i {
    color: #0f4c81;
    font-size: 1rem;
}

.sambutan-content {
    position: relative;
    z-index: 1;
    padding: 42px 46px;
}

.sambutan-badges,
.sambutan-values {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.sambutan-badges span,
.sambutan-values span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 32px;
    padding: 7px 11px;
    color: #315a78;
    background: rgba(239, 248, 255, .78);
    border: 1px solid rgba(180, 215, 238, .64);
    border-radius: 999px;
    font-size: .73rem;
    font-weight: 850;
}

.sambutan-badges i,
.sambutan-values i {
    color: #0f4c81;
}

.sambutan-quote {
    display: block;
    margin-top: 22px;
    color: rgba(15, 76, 129, .09);
    font-size: 58px;
    line-height: .85;
}

.sambutan-content h2 {
    max-width: 780px;
    margin: 8px 0 8px;
    color: #12314d;
    font-size: clamp(1.85rem, 2.7vw, 2.75rem);
    font-weight: 850;
    line-height: 1.18;
    letter-spacing: 0;
}

.sambutan-role {
    color: #426984;
    font-size: .96rem;
    font-weight: 800;
}

.sambutan-text {
    margin: 22px 0 0;
    color: #617789;
    font-size: 1rem;
    line-height: 1.88;
}

.sambutan-values {
    margin-top: 22px;
}

.sambutan-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 13px 18px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #0f4c81, #2b83b8);
    border: 0;
    border-radius: 14px;
    box-shadow: 0 16px 34px rgba(15, 76, 129, .18);
    font-weight: 850;
    transition: transform .22s ease, box-shadow .22s ease;
}

.sambutan-btn::before {
    content: "";
    position: absolute;
    top: -40%;
    bottom: -40%;
    left: -65%;
    width: 38%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .72), transparent);
    transform: rotate(16deg);
}

.sambutan-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 22px 44px rgba(15, 76, 129, .23);
}

.sambutan-btn:hover::before {
    animation: premiumShine .72s ease;
}

.sambutan-modern-modal .modal-backdrop {
    backdrop-filter: blur(10px);
}

.sambutan-modal-content {
    overflow: hidden;
    border: 1px solid rgba(180, 215, 238, .72);
    border-radius: 24px;
    background:
        radial-gradient(circle at 12% 0%, rgba(151, 210, 245, .20), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(246, 251, 255, .98));
    box-shadow: 0 32px 90px rgba(8, 38, 70, .24);
}

.sambutan-modal-header {
    align-items: flex-start;
    padding: 24px 28px;
    border-bottom: 1px solid rgba(180, 215, 238, .56);
    background: rgba(255, 255, 255, .66);
}

.sambutan-modal-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #0f4c81;
    font-size: .76rem;
    font-weight: 900;
}

.sambutan-modal-header .modal-title {
    color: #12314d;
    font-size: 1.55rem;
    font-weight: 900;
}

.sambutan-modal-body {
    padding: 28px;
}

.sambutan-modal-grid {
    display: grid;
    grid-template-columns: 290px minmax(0, 1fr);
    gap: 26px;
}

.sambutan-modal-profile {
    align-self: start;
    padding: 16px;
    background: rgba(255, 255, 255, .72);
    border: 1px solid rgba(180, 215, 238, .62);
    border-radius: 20px;
    box-shadow: 0 16px 36px rgba(15, 76, 129, .09);
}

.sambutan-modal-profile img {
    width: 100%;
    height: 260px;
    object-fit: cover;
    border-radius: 16px;
}

.sambutan-modal-profile h4 {
    margin: 16px 0 6px;
    color: #12314d;
    font-size: 1.2rem;
    font-weight: 900;
}

.sambutan-modal-profile p {
    margin: 0;
    color: #617789;
    font-weight: 700;
}

.sambutan-modal-copy {
    position: relative;
    padding: 24px;
    color: #526b82;
    background: rgba(255, 255, 255, .58);
    border: 1px solid rgba(180, 215, 238, .52);
    border-radius: 20px;
    line-height: 1.9;
}

.sambutan-modal-copy > i {
    display: block;
    color: rgba(15, 76, 129, .12);
    font-size: 58px;
    line-height: .8;
}

.sambutan-modal-copy p {
    margin: 14px 0 0;
}

@keyframes sambutanSoftLightning {
    0%, 100% { transform: translateX(0); opacity: .12; }
    45%, 55% { opacity: .85; }
    60% { transform: translateX(250%); opacity: .08; }
}

.galeri-premium-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 11% 10%, rgba(154, 211, 246, .16), transparent 30%),
        radial-gradient(circle at 88% 8%, rgba(255, 255, 255, .82), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f3f9fe 100%);
}

.galeri-premium-section::before {
    content: "";
    position: absolute;
    right: -16%;
    top: 18%;
    width: 42%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(93, 174, 225, .46), transparent);
    box-shadow: 0 0 22px rgba(93, 174, 225, .28);
    animation: sambutanSoftLightning 6.2s ease-in-out infinite;
}

.galeri-section-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 26px;
}

.galeri-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 9px 13px;
    color: #0f4c81;
    background: rgba(239, 248, 255, .78);
    border: 1px solid rgba(180, 215, 238, .64);
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 900;
}

.galeri-section-head h2 {
    margin: 0;
    color: #12314d;
    font-size: clamp(1.85rem, 3vw, 2.75rem);
    font-weight: 850;
    letter-spacing: 0;
}

.galeri-section-head p {
    margin: 8px 0 0;
    color: #64778b;
}

.galeri-preview-hint {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    color: #315a78;
    background: rgba(255, 255, 255, .74);
    border: 1px solid rgba(180, 215, 238, .62);
    border-radius: 999px;
    box-shadow: 0 12px 26px rgba(15, 76, 129, .06);
    font-size: .78rem;
    font-weight: 850;
    white-space: nowrap;
}

.galeri-preview-hint i {
    color: #0f4c81;
}

.gallery-grid-frame {
    position: relative;
    z-index: 1;
    padding: 16px;
    background: rgba(255, 255, 255, .58);
    border: 1px solid rgba(180, 215, 238, .48);
    border-radius: 24px;
    box-shadow: 0 22px 54px rgba(15, 76, 129, .08);
    backdrop-filter: blur(10px);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.gallery-grid-card {
    position: relative;
    min-height: 390px;
    overflow: hidden;
    cursor: zoom-in;
    border: 1px solid rgba(180, 215, 238, .58);
    border-radius: 20px;
    background: #eef8ff;
    box-shadow: 0 16px 36px rgba(15, 76, 129, .09);
    transform: translateZ(0);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.gallery-grid-card::before {
    content: "";
    position: absolute;
    left: 18px;
    top: 18px;
    z-index: 2;
    width: 50px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffffff, #73bde9, transparent);
    box-shadow: 0 0 18px rgba(93, 174, 225, .58);
}

.gallery-grid-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(8, 38, 70, .58)),
        radial-gradient(circle at 26% 14%, rgba(255, 255, 255, .20), transparent 28%);
}

.gallery-grid-card:hover,
.gallery-grid-card:focus {
    z-index: 3;
    transform: translateY(-7px) scale(1.075);
    border-color: rgba(93, 174, 225, .62);
    box-shadow: 0 30px 70px rgba(15, 76, 129, .20);
    outline: 0;
}

.gallery-grid-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .30s ease, filter .30s ease;
}

.gallery-grid-card:hover img,
.gallery-grid-card:focus img {
    transform: scale(1.08);
    filter: saturate(1.04) contrast(1.03);
}

.gallery-grid-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 18px;
    color: #fff;
}

.gallery-grid-overlay span {
    display: inline-flex;
    margin-bottom: 7px;
    padding: 6px 9px;
    color: #12314d;
    background: rgba(255, 255, 255, .82);
    border: 1px solid rgba(255, 255, 255, .60);
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 850;
    backdrop-filter: blur(8px);
}

.gallery-grid-overlay h3 {
    margin: 0;
    color: #fff;
    font-size: .92rem;
    font-weight: 850;
    line-height: 1.35;
    text-shadow: 0 12px 26px rgba(0, 0, 0, .35);
}

.gallery-preview-content {
    overflow: hidden;
    border: 1px solid rgba(180, 215, 238, .72);
    border-radius: 24px;
    background:
        radial-gradient(circle at 12% 0%, rgba(151, 210, 245, .20), transparent 28%),
        linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(246, 251, 255, .98));
    box-shadow: 0 32px 90px rgba(8, 38, 70, .24);
}

.gallery-preview-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(180, 215, 238, .56);
    background: rgba(255, 255, 255, .70);
}

.gallery-preview-head span {
    display: inline-flex;
    margin-bottom: 6px;
    color: #0f4c81;
    font-size: .76rem;
    font-weight: 900;
}

.gallery-preview-head h5 {
    margin: 0;
    color: #12314d;
    font-size: 1.35rem;
    font-weight: 900;
}

.gallery-preview-body {
    padding: 18px;
}

.gallery-preview-body img {
    width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 18px;
    background: #eef8ff;
    box-shadow: 0 16px 36px rgba(15, 76, 129, .10);
}

.berita-grid-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 10%, rgba(154, 211, 246, .14), transparent 30%),
        radial-gradient(circle at 86% 12%, rgba(255, 255, 255, .80), transparent 28%),
        linear-gradient(180deg, #f5fafe 0%, #ffffff 100%);
}

.berita-more-link {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    color: #315a78;
    background: rgba(255, 255, 255, .74);
    border: 1px solid rgba(180, 215, 238, .62);
    border-radius: 999px;
    box-shadow: 0 12px 26px rgba(15, 76, 129, .06);
    font-size: .78rem;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .22s ease, box-shadow .22s ease;
}

.berita-more-link:hover {
    color: #0f4c81;
    transform: translateY(-2px);
    box-shadow: 0 18px 34px rgba(15, 76, 129, .10);
}

.berita-grid-card {
    min-height: 360px;
    cursor: pointer;
}

.berita-grid-card::after {
    background:
        linear-gradient(180deg, rgba(255, 255, 255, .02), rgba(8, 38, 70, .72)),
        radial-gradient(circle at 26% 14%, rgba(255, 255, 255, .20), transparent 28%);
}

.berita-grid-overlay p {
    display: -webkit-box;
    margin: 8px 0 0;
    overflow: hidden;
    color: rgba(255, 255, 255, .80);
    font-size: .78rem;
    line-height: 1.55;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.featured-news-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 20%, rgba(15, 76, 129, .18), transparent 32%),
        radial-gradient(circle at 92% 10%, rgba(255,255,255,.84), transparent 30%),
        linear-gradient(90deg, #e7f4fd 0%, #ffffff 56%, #f8fcff 100%);
}

.featured-news-section::before {
    content: "";
    position: absolute;
    left: -14%;
    top: 24%;
    width: 46%;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(15,76,129,.46), rgba(115,189,233,.85), transparent);
    box-shadow: 0 0 24px rgba(93,174,225,.42);
    animation: sambutanSoftLightning 6s ease-in-out infinite;
}

.featured-news-portal {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 12px;
    min-height: 505px;
    padding: 12px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255,255,255,.72), rgba(239,248,255,.54));
    border: 1px solid rgba(180,215,238,.54);
    border-radius: 28px;
    box-shadow: 0 28px 72px rgba(15,76,129,.14);
    backdrop-filter: blur(12px);
}

.featured-news-carousel,
.featured-news-carousel .carousel-inner,
.featured-news-carousel .carousel-item {
    height: 100%;
}

.featured-news-main {
    position: relative;
    height: 100%;
    min-height: 505px;
    overflow: hidden;
    border-radius: 20px;
    background: #082646;
}

.featured-news-main::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(8,38,70,.82), rgba(8,38,70,.42), rgba(8,38,70,.08)),
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.20), transparent 26%);
}

.featured-news-main img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.carousel-item.active .featured-news-main img {
    transform: scale(1.035);
}

.featured-news-content {
    position: absolute;
    left: 0;
    right: auto;
    bottom: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 660px;
    padding: 28px;
    color: #fff;
}

.featured-news-content::before {
    content: "";
    position: absolute;
    left: 38px;
    top: 26px;
    width: 56px;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffffff, #73bde9, transparent);
    box-shadow: 0 0 18px rgba(93,174,225,.58);
}

.featured-news-content > span {
    display: inline-flex;
    width: max-content;
    margin-bottom: 14px;
    padding: 8px 12px;
    color: #12314d;
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(255,255,255,.64);
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 900;
}

.featured-news-content h3 {
    color: #fff;
    font-size: clamp(1.7rem, 3vw, 2.8rem);
    font-weight: 900;
    line-height: 1.12;
}

.featured-news-content p {
    margin: 16px 0 0;
    color: rgba(255,255,255,.82);
    line-height: 1.65;
}

.featured-news-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.featured-news-meta small {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    color: #315a78;
    background: rgba(255,255,255,.70);
    border: 1px solid rgba(180,215,238,.52);
    border-radius: 999px;
    font-weight: 800;
}

.featured-news-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: max-content;
    margin-top: 18px;
    padding: 11px 16px;
    color: #fff;
    background: linear-gradient(135deg, #0f4c81, #2b83b8);
    border-radius: 15px;
    box-shadow: 0 16px 34px rgba(15,76,129,.18);
    font-weight: 900;
    text-decoration: none;
    transition: transform .22s ease, box-shadow .22s ease;
}

.featured-news-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 22px 44px rgba(15,76,129,.24);
}

.featured-news-list {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    gap: 12px;
}

.featured-news-list-item {
    position: relative;
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 12px;
    min-height: 86px;
    padding: 8px;
    overflow: hidden;
    color: #12314d;
    text-decoration: none;
    background: rgba(255,255,255,.74);
    border: 1px solid rgba(180,215,238,.56);
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(15,76,129,.07);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.featured-news-list-item:hover {
    color: #0f4c81;
    transform: translateX(-4px);
    background: #fff;
    box-shadow: 0 18px 34px rgba(15,76,129,.12);
}

.featured-news-list-item img {
    width: 86px;
    height: 100%;
    min-height: 70px;
    object-fit: cover;
    border-radius: 14px;
}

.featured-news-list-item span {
    display: inline-flex;
    margin-bottom: 6px;
    color: #0f4c81;
    font-size: .66rem;
    font-weight: 900;
}

.featured-news-list-item h4 {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: inherit;
    font-size: .8rem;
    font-weight: 900;
    line-height: 1.35;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.featured-news-lights {
    position: absolute;
    right: 18px;
    bottom: 18px;
    z-index: 3;
    display: flex;
    gap: 8px;
}

.featured-news-lights span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #73bde9;
    box-shadow: 0 0 20px rgba(115,189,233,.78);
    animation: newsLamp 1.4s ease-in-out infinite;
}

.featured-news-lights span:nth-child(2) {
    animation-delay: .25s;
}

.featured-news-lights span:nth-child(3) {
    animation-delay: .5s;
}

@keyframes newsLamp {
    0%, 100% { opacity: .35; transform: scale(.8); }
    50% { opacity: 1; transform: scale(1.18); }
}

.media-menu-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 15% 10%, rgba(15, 76, 129, .10), transparent 28%),
        radial-gradient(circle at 82% 20%, rgba(217, 236, 251, .60), transparent 30%),
        linear-gradient(180deg, #f7fbff, #ffffff);
}

.media-menu-head {
    max-width: 760px;
    margin-bottom: 28px;
}

.media-menu-head span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 9px 13px;
    color: #0f4c81;
    background: #eef8ff;
    border: 1px solid #d9ebf8;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 900;
}

.media-menu-head h2 {
    margin: 0;
    color: #082646;
    font-size: clamp(2rem, 3vw, 3.1rem);
    font-weight: 900;
    letter-spacing: 0;
}

.media-menu-head p {
    margin: 10px 0 0;
    color: #64778b;
    line-height: 1.75;
}

.media-menu-card {
    position: relative;
    display: block;
    min-height: 360px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    background: #082646;
    border: 1px solid rgba(15, 76, 129, .12);
    border-radius: 28px;
    box-shadow: 0 24px 64px rgba(15, 76, 129, .14);
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.media-menu-card:hover {
    color: #fff;
    transform: translateY(-7px) scale(1.012);
    border-color: rgba(15, 76, 129, .24);
    box-shadow: 0 34px 82px rgba(15, 76, 129, .22);
}

.media-menu-card img,
.media-video-visual {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.media-menu-card img {
    object-fit: cover;
    transition: transform .34s ease, filter .34s ease;
}

.media-menu-card:hover img {
    transform: scale(1.06);
    filter: saturate(1.08) contrast(1.04);
}

.media-video-visual {
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 50% 38%, rgba(255, 255, 255, .26), transparent 20%),
        linear-gradient(135deg, #0f4c81, #1b6ca8 55%, #eef8ff 150%);
}

.media-infografis-visual {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background:
        radial-gradient(circle at 28% 30%, rgba(255, 255, 255, .32), transparent 24%),
        radial-gradient(circle at 78% 22%, rgba(217, 236, 251, .70), transparent 28%),
        linear-gradient(135deg, #0b3a68, #0f4c81 54%, #f8fcff 150%);
}

.media-infografis-visual i {
    color: rgba(255, 255, 255, .94);
    font-size: 5.5rem;
    filter: drop-shadow(0 18px 34px rgba(2, 14, 27, .25));
}

.media-video-visual i {
    color: rgba(255, 255, 255, .94);
    font-size: 6rem;
    filter: drop-shadow(0 18px 34px rgba(2, 14, 27, .28));
    transition: transform .28s ease;
}

.media-menu-card:hover .media-video-visual i {
    transform: scale(1.08);
}

.infografis-menu-card {
    min-height: 340px;
    margin-top: 8px;
    background:
        radial-gradient(circle at 70% 26%, rgba(216, 241, 255, .26), transparent 28%),
        linear-gradient(135deg, #082646, #0f4c81 54%, #eaf7ff 160%);
    border-color: rgba(180, 215, 238, .46);
}

.infografis-menu-card::after {
    background:
        linear-gradient(90deg, rgba(8, 38, 70, .92), rgba(15, 76, 129, .62), rgba(8, 38, 70, .12)),
        radial-gradient(circle at 20% 22%, rgba(255, 255, 255, .24), transparent 28%),
        linear-gradient(115deg, transparent 0%, rgba(115, 189, 233, .16) 44%, transparent 62%);
}

.infografis-menu-card::before {
    content: "";
    position: absolute;
    inset: 18px;
    z-index: 1;
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 22px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 0 34px rgba(93, 174, 225, .18);
    pointer-events: none;
}

.infografis-menu-card:hover {
    transform: translateY(-8px) scale(1.016);
    box-shadow: 0 38px 92px rgba(15, 76, 129, .25), 0 0 42px rgba(93, 174, 225, .18);
}

.infografis-menu-card img {
    object-position: center;
    opacity: .74;
    filter: saturate(1.08) contrast(1.02);
}

.infografis-menu-card:hover img {
    opacity: .90;
}

.infografis-floating-ui {
    position: absolute;
    top: 28px;
    right: 28px;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, max-content);
    gap: 10px;
}

.infografis-floating-ui span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 36px;
    padding: 8px 12px;
    color: #0b2f54;
    background: rgba(255, 255, 255, .78);
    border: 1px solid rgba(255, 255, 255, .68);
    border-radius: 999px;
    box-shadow: 0 14px 30px rgba(2, 14, 27, .12);
    backdrop-filter: blur(12px);
    font-size: .72rem;
    font-weight: 900;
    animation: infografisChipFloat 5.8s ease-in-out infinite;
}

.infografis-floating-ui span:nth-child(2) {
    animation-delay: -1.8s;
}

.infografis-floating-ui span:nth-child(3) {
    animation-delay: -3.2s;
}

.infografis-floating-ui i {
    color: #0f4c81;
}

.infografis-menu-card .media-menu-overlay {
    max-width: 680px;
    padding: 34px;
}

.infografis-menu-card .media-menu-overlay > i {
    color: #0f4c81;
    background: rgba(255, 255, 255, .92);
}

.infografis-menu-card .media-menu-overlay h3 {
    font-size: clamp(2.2rem, 4vw, 3.4rem);
}

.infografis-menu-card .media-menu-overlay p {
    max-width: 560px;
}

.infografis-cta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    padding: 11px 15px;
    color: #0b2f54;
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(255, 255, 255, .64);
    border-radius: 999px;
    box-shadow: 0 16px 34px rgba(2, 14, 27, .14);
    font-size: .82rem;
    font-weight: 900;
}

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

.infografis-latest-panel {
    position: relative;
    overflow: hidden;
    margin-top: 8px;
    padding: 24px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 10%, rgba(255,255,255,.22), transparent 26%),
        radial-gradient(circle at 88% 18%, rgba(115,189,233,.24), transparent 28%),
        linear-gradient(135deg, #082646, #0f4c81 58%, #dff2ff 160%);
    border: 1px solid rgba(180, 215, 238, .42);
    border-radius: 28px;
    box-shadow: 0 28px 72px rgba(15, 76, 129, .18);
}

.infografis-latest-panel::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 22px;
    pointer-events: none;
}

.infografis-latest-head {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 20px;
}

.infografis-latest-head span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #dff2ff;
    font-size: .78rem;
    font-weight: 900;
}

.infografis-latest-head h3 {
    margin: 8px 0 6px;
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    font-weight: 900;
}

.infografis-latest-head p {
    max-width: 620px;
    margin: 0;
    color: rgba(255,255,255,.78);
}

.infografis-latest-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.infografis-glass-card {
    position: relative;
    min-height: 250px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 20px;
    box-shadow: 0 18px 42px rgba(2, 14, 27, .18);
    backdrop-filter: blur(12px);
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
}

.infografis-glass-card:hover {
    color: #fff;
    transform: translateY(-7px) scale(1.025);
    border-color: rgba(255,255,255,.42);
    box-shadow: 0 28px 62px rgba(2, 14, 27, .26);
}

.infografis-glass-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .72;
    transition: transform .3s ease, opacity .3s ease;
}

.infografis-glass-card:hover img {
    transform: scale(1.07);
    opacity: .88;
}

.infografis-glass-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8,38,70,.08), rgba(8,38,70,.78));
}

.infografis-glass-card div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 18px;
}

.infografis-glass-card span {
    display: inline-flex;
    margin-bottom: 8px;
    padding: 6px 9px;
    color: #12314d;
    background: rgba(255,255,255,.84);
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 900;
}

.infografis-glass-card h4 {
    margin: 0;
    color: #fff;
    font-size: .98rem;
    font-weight: 900;
    line-height: 1.35;
}

.media-menu-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(8, 38, 70, .10), rgba(8, 38, 70, .80)),
        radial-gradient(circle at 22% 14%, rgba(255, 255, 255, .22), transparent 26%);
}

.media-menu-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 30px;
}

.media-menu-overlay > i {
    display: grid;
    width: 52px;
    height: 52px;
    place-items: center;
    margin-bottom: 18px;
    color: #0f4c81;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(255, 255, 255, .50);
    border-radius: 18px;
    font-size: 1.35rem;
    box-shadow: 0 16px 34px rgba(2, 14, 27, .18);
}

.media-menu-overlay span {
    display: inline-flex;
    margin-bottom: 8px;
    color: #dff2ff;
    font-size: .78rem;
    font-weight: 900;
}

.media-menu-overlay h3 {
    margin: 0;
    color: #fff;
    font-size: 2.05rem;
    font-weight: 900;
    letter-spacing: 0;
}

.media-menu-overlay p {
    max-width: 440px;
    margin: 10px 0 0;
    color: rgba(255, 255, 255, .82);
    line-height: 1.7;
}

.kepala-img {
    width: 100%;
    max-width: 320px;
    height: 390px;
    object-fit: cover;
}

.lh-lg {
    line-height: 1.8;
}

.cek-hero {
    background: linear-gradient(135deg, #0f4c81, #12304d);
}

.cek-card {
    border-radius: 18px;
}

.cek-icon {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    background: #eaf3fb;
    color: #0f4c81;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
}

.cek-timeline {
    position: relative;
    padding: 0 0 18px 24px;
    border-left: 3px solid #d7e8f5;
}

.cek-timeline::before {
    content: "";
    position: absolute;
    left: -8px;
    top: 3px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #0f4c81;
}

.kritik-card {
    border-radius: 18px;
}

.kritik-card-head {
    background: linear-gradient(135deg, #16745f, #0f4c81);
    border: 0;
    padding: 16px;
}

.kritik-icon {
    width: 68px;
    height: 68px;
    border-radius: 18px;
    background: #eaf7f1;
    color: #16745f;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
}

.kritik-card .form-control,
.kritik-card .form-select {
    border-radius: 10px;
    padding: 10px 12px;
}

.kegiatan-hero {
    background: linear-gradient(135deg, #0f4c81, #16745f);
}

.kegiatan-search {
    background: #f6f9fc;
}

.kegiatan-search-card {
    border-radius: 16px;
    margin-top: -34px;
    position: relative;
    z-index: 2;
}

.kegiatan-list {
    background: #f6f9fc;
}

.kegiatan-card {
    border-radius: 16px;
    transition: transform .25s ease, box-shadow .25s ease;
}

.kegiatan-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(15, 76, 129, .14) !important;
}

.kegiatan-img {
    height: 230px;
    object-fit: cover;
}

.berita-magazine-hero {
    position: relative;
    overflow: hidden;
    padding: 76px 0 90px;
    color: #fff;
    background:
        radial-gradient(circle at 12% 16%, rgba(255,255,255,.22), transparent 28%),
        radial-gradient(circle at 86% 12%, rgba(115,189,233,.22), transparent 30%),
        linear-gradient(135deg, #06182f, #0f4c81 62%, #dff2ff 165%);
}

.berita-magazine-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, transparent, rgba(255,255,255,.16), transparent),
        repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 120px);
    animation: heroBlueBackground 14s ease-in-out infinite alternate;
}

.berita-magazine-hero .container {
    position: relative;
    z-index: 1;
}

.berita-magazine-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    padding: 9px 13px;
    color: #0b2f54;
    background: rgba(255,255,255,.84);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 900;
}

.berita-magazine-hero h1 {
    margin: 0;
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 900;
    letter-spacing: 0;
}

.berita-magazine-hero p {
    max-width: 720px;
    margin: 16px 0 0;
    color: rgba(255,255,255,.84);
    font-size: 1.08rem;
    line-height: 1.8;
}

.berita-search-glass {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 18px;
    backdrop-filter: blur(14px);
}

.berita-search-glass i {
    color: #dff2ff;
    padding-left: 8px;
}

.berita-search-glass input {
    width: 100%;
    color: #fff;
    background: transparent;
    border: 0;
    outline: 0;
}

.berita-search-glass input::placeholder {
    color: rgba(255,255,255,.70);
}

.berita-search-glass button {
    padding: 10px 14px;
    color: #0b2f54;
    background: #fff;
    border: 0;
    border-radius: 13px;
    font-weight: 900;
}

.berita-magazine-section {
    padding: 56px 0;
    background: linear-gradient(180deg, #f8fcff, #ffffff);
}

.berita-magazine-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(320px, .75fr);
    gap: 22px;
}

.berita-feature-card,
.berita-side-card,
.berita-list-card {
    position: relative;
    overflow: hidden;
    display: block;
    color: #fff;
    text-decoration: none;
    background: #082646;
    border: 1px solid rgba(180,215,238,.54);
    border-radius: 24px;
    box-shadow: 0 20px 50px rgba(15,76,129,.12);
    transition: transform .24s ease, box-shadow .24s ease;
}

.berita-feature-card:hover,
.berita-side-card:hover,
.berita-list-card:hover {
    color: #fff;
    transform: translateY(-7px);
    box-shadow: 0 30px 70px rgba(15,76,129,.20);
}

.berita-feature-card {
    min-height: 520px;
}

.berita-feature-card img,
.berita-side-card img,
.berita-list-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .34s ease;
}

.berita-feature-card:hover img,
.berita-side-card:hover img,
.berita-list-card:hover img {
    transform: scale(1.06);
}

.berita-feature-card::after,
.berita-side-card::after,
.berita-list-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8,38,70,.06), rgba(8,38,70,.82));
}

.berita-feature-card > div,
.berita-side-card > div,
.berita-list-card > div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 26px;
}

.berita-feature-card span,
.berita-side-card span,
.berita-list-card span {
    display: inline-flex;
    margin-bottom: 10px;
    padding: 7px 10px;
    color: #12314d;
    background: rgba(255,255,255,.84);
    border-radius: 999px;
    font-size: .7rem;
    font-weight: 900;
}

.berita-feature-card h2 {
    color: #fff;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 900;
}

.berita-feature-card p,
.berita-list-card p {
    color: rgba(255,255,255,.82);
    line-height: 1.65;
}

.berita-feature-card small {
    color: rgba(255,255,255,.76);
    font-weight: 800;
}

.berita-side-stack {
    display: grid;
    gap: 22px;
}

.berita-side-card {
    min-height: 249px;
}

.berita-side-card h3,
.berita-list-card h3 {
    color: #fff;
    font-size: 1.18rem;
    font-weight: 900;
    line-height: 1.35;
}

.berita-list-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 24px;
}

.berita-list-card {
    min-height: 330px;
}

.galeri-hero {
    background: linear-gradient(135deg, #12304d, #0f4c81);
}

.galeri-page {
    background: linear-gradient(180deg, #f8fafc, #eef4fa);
}

.galeri-card {
    border-radius: 16px;
    transition: transform .25s ease, box-shadow .25s ease;
}

.galeri-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(15, 76, 129, .14) !important;
}

.galeri-img-wrap {
    position: relative;
    height: 250px;
    overflow: hidden;
}

.galeri-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .3s ease;
}

.galeri-card:hover .galeri-img-wrap img {
    transform: scale(1.06);
}

.galeri-badge {
    position: absolute;
    left: 14px;
    top: 14px;
}

.tentang-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 18%, rgba(255,255,255,.22), transparent 28%),
        radial-gradient(circle at 86% 12%, rgba(115,189,233,.22), transparent 30%),
        linear-gradient(135deg, #06182f, #0f4c81 62%, #dff2ff 165%);
}

.tentang-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(115deg, transparent, rgba(255,255,255,.16), transparent),
        repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 120px);
    animation: heroBlueBackground 14s ease-in-out infinite alternate;
    pointer-events: none;
}

.tentang-hero .container {
    position: relative;
    z-index: 1;
}

.tentang-page {
    background:
        radial-gradient(circle at 10% 6%, rgba(154,211,246,.14), transparent 28%),
        linear-gradient(180deg, #f8fcff, #ffffff);
}

.tentang-card,
.tentang-stat {
    overflow: hidden;
    border: 1px solid rgba(180, 215, 238, .52) !important;
    border-radius: 22px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 18px 42px rgba(15,76,129,.08) !important;
    backdrop-filter: blur(10px);
    transition: transform .24s ease, box-shadow .24s ease;
}

.tentang-card:hover,
.tentang-stat:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 64px rgba(15,76,129,.14) !important;
}

.tentang-stat i {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 30px;
    background: linear-gradient(135deg, #0f4c81, #73bde9);
    box-shadow: 0 16px 34px rgba(15,76,129,.18);
}

.tentang-list {
    padding-left: 18px;
    line-height: 1.9;
}

.tentang-visi {
    overflow: hidden;
    border-radius: 22px;
    color: #fff;
    background:
        radial-gradient(circle at 16% 16%, rgba(255,255,255,.22), transparent 28%),
        linear-gradient(135deg, #082646, #0f4c81 70%, #73bde9);
    box-shadow: 0 24px 64px rgba(15,76,129,.16) !important;
}

.showcase-media-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 14%, rgba(65, 154, 214, .18), transparent 28%),
        linear-gradient(115deg, #eef8ff 0%, #ffffff 46%, #f4fbff 100%);
}

.showcase-media-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(15, 76, 129, .09) 0 1px, transparent 1px 96px),
        linear-gradient(0deg, rgba(15, 76, 129, .06) 0 1px, transparent 1px 82px);
    opacity: .45;
    pointer-events: none;
}

.showcase-stack {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
}

.showcase-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 14px;
    align-items: stretch;
}

.showcase-left-stack {
    display: grid;
    gap: 10px;
}

.showcase-section-title {
    position: relative;
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 16px;
    padding: 2px 4px 0;
}

.showcase-section-title span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f4c81;
    font-size: .74rem;
    font-weight: 900;
}

.showcase-section-title h2 {
    margin: 0;
    color: #082646;
    font-size: clamp(1.75rem, 2.6vw, 2.65rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
}

.showcase-hero-card,
.showcase-ad-card,
.regulasi-mini-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    border: 1px solid rgba(15, 76, 129, .12);
    border-radius: 24px;
    box-shadow: 0 24px 58px rgba(15, 76, 129, .13);
    transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}

.showcase-hero-card {
    min-height: 430px;
    background:
        radial-gradient(circle at 16% 20%, rgba(255, 255, 255, .25), transparent 28%),
        linear-gradient(135deg, #082646, #0f4c81 66%, #e9f7ff);
}

.showcase-info-hero {
    background:
        radial-gradient(circle at 86% 18%, rgba(255, 255, 255, .30), transparent 26%),
        linear-gradient(135deg, #07335e, #1b6ca8 58%, #f5fbff);
}

.showcase-hero-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .76;
    transform: scale(1.02);
    transition: transform .42s ease, opacity .42s ease;
}

.showcase-hero-shade {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(90deg, rgba(5, 25, 50, .90) 0%, rgba(15, 76, 129, .68) 52%, rgba(255, 255, 255, .12) 100%),
        radial-gradient(circle at 76% 24%, rgba(255, 255, 255, .26), transparent 30%);
}

.showcase-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    min-height: 430px;
    max-width: 660px;
    flex-direction: column;
    justify-content: center;
    padding: 30px;
}

.showcase-hero-content span,
.regulasi-mini-hero span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    max-width: 100%;
    padding: 8px 13px;
    color: #eff8ff;
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .23);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 900;
}

.showcase-hero-content h2 {
    margin: 14px 0 8px;
    color: #fff;
    font-size: clamp(1.75rem, 2.75vw, 2.7rem);
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: 0;
    text-shadow: 0 14px 30px rgba(0, 0, 0, .28);
}

.showcase-hero-content p {
    max-width: 560px;
    margin: 0;
    color: rgba(239, 248, 255, .86);
    font-size: .95rem;
    line-height: 1.68;
}

.showcase-action {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    width: max-content;
    margin-top: 20px;
    padding: 11px 16px;
    color: #082646;
    background: linear-gradient(135deg, #ffffff, #dff3ff);
    border-radius: 14px;
    font-size: .8rem;
    font-weight: 900;
    box-shadow: 0 16px 34px rgba(2, 14, 27, .22);
}

.showcase-ad-card {
    display: block;
    min-height: 430px;
    padding: 12px;
    background:
        radial-gradient(circle at 12% 12%, rgba(255,255,255,.24), transparent 30%),
        radial-gradient(circle at 92% 18%, rgba(115,189,233,.26), transparent 34%),
        linear-gradient(145deg, #082646 0%, #0f4c81 58%, #2b8dcc 130%);
    border-color: rgba(255,255,255,.26);
    box-shadow: 0 28px 66px rgba(8,38,70,.24), inset 0 1px 0 rgba(255,255,255,.18);
    backdrop-filter: blur(14px);
}

.showcase-ad-card::after {
    content: "";
    position: absolute;
    inset: 8px;
    z-index: -1;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
    pointer-events: none;
}

.showcase-ad-card::before,
.regulasi-mini-hero::before {
    content: "";
    position: absolute;
    top: -42%;
    bottom: -42%;
    left: -78%;
    z-index: 2;
    width: 48%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .76), transparent);
    transform: rotate(15deg);
    opacity: 0;
    pointer-events: none;
}

.showcase-ad-card img {
    width: 100%;
    height: 100%;
    min-height: 406px;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}

.showcase-ad-empty {
    display: grid;
    height: 100%;
    min-height: 406px;
    place-items: center;
    padding: 24px;
    text-align: center;
    color: #0b2f54;
    background:
        radial-gradient(circle at 50% 10%, rgba(255, 255, 255, .78), transparent 34%),
        linear-gradient(135deg, #eaf7ff, #ffffff);
    border: 1px dashed rgba(15, 76, 129, .24);
    border-radius: 18px;
}

.showcase-ad-empty i {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #0f4c81, #55aee6);
    border-radius: 18px;
    font-size: 1.75rem;
    box-shadow: 0 16px 30px rgba(15, 76, 129, .20);
}

.showcase-ad-empty strong {
    margin-top: 12px;
    font-size: 1.05rem;
    font-weight: 900;
}

.showcase-ad-empty span {
    max-width: 210px;
    color: #607b90;
    font-size: .82rem;
    line-height: 1.55;
}

.showcase-ad-label {
    position: absolute;
    top: 22px;
    left: 22px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    color: #fff;
    background: rgba(8, 38, 70, .68);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    box-shadow: 0 12px 24px rgba(2,14,27,.22);
    font-size: .68rem;
    font-weight: 900;
    backdrop-filter: blur(12px);
}

.showcase-hero-card:hover,
.showcase-ad-card:hover,
.regulasi-mini-hero:hover {
    color: inherit;
    transform: translateY(-4px) scale(1.012);
    border-color: rgba(15, 76, 129, .24);
    box-shadow: 0 30px 68px rgba(15, 76, 129, .18);
}

.showcase-hero-card:hover img {
    opacity: .86;
    transform: scale(1.07);
}

.showcase-ad-card:hover::before,
.regulasi-mini-hero:hover::before {
    opacity: 1;
    animation: premiumShine .82s ease;
}

.video-mini-grid,
.infografis-strip-grid {
    display: flex;
    gap: 9px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 9px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(15,76,129,.34) transparent;
}

.video-mini-grid {
    position: relative;
    margin-top: -3px;
    padding: 12px;
    background:
        radial-gradient(circle at 8% 18%, rgba(255,255,255,.24), transparent 28%),
        radial-gradient(circle at 92% 22%, rgba(115,189,233,.26), transparent 30%),
        linear-gradient(135deg, #082646 0%, #0f4c81 58%, #dff3ff 145%);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 18px;
    box-shadow: 0 20px 44px rgba(15,76,129,.17), inset 0 1px 0 rgba(255,255,255,.18);
}

.video-mini-grid::before {
    content: "";
    position: absolute;
    inset: 10px;
    border-radius: 17px;
    background: linear-gradient(110deg, transparent, rgba(255,255,255,.13), transparent);
    pointer-events: none;
}

.video-mini-grid + * {
    margin-top: 0;
}

.video-mini-grid::-webkit-scrollbar,
.infografis-strip-grid::-webkit-scrollbar {
    height: 7px;
}

.video-mini-grid::-webkit-scrollbar-thumb,
.infografis-strip-grid::-webkit-scrollbar-thumb {
    background: rgba(15,76,129,.28);
    border-radius: 999px;
}

.showcase-strip-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 10px;
    padding: 0 4px;
}

.showcase-video-hero + .showcase-strip-head {
    margin-top: 2px;
    padding: 0 4px;
}

.showcase-video-hero + .showcase-strip-head span,
.showcase-video-hero + .showcase-strip-head h3 {
    color: #0b2f54;
}

.showcase-strip-head span {
    display: block;
    color: #0f4c81;
    font-size: .72rem;
    font-weight: 900;
}

.showcase-strip-head h3 {
    margin: 2px 0 0;
    color: #123a5c;
    font-size: 1rem;
    font-weight: 900;
    letter-spacing: 0;
}

.showcase-strip-head i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #0f4c81;
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(15,76,129,.12);
    border-radius: 50%;
}

.video-mini-card,
.infografis-strip-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    flex: 0 0 32.15%;
    align-items: center;
    gap: 9px;
    min-height: 112px;
    padding: 9px;
    color: #0b2f54;
    text-decoration: none;
    background: rgba(255, 255, 255, .88);
    border: 1px solid rgba(15, 76, 129, .12);
    border-radius: 15px;
    box-shadow: 0 16px 34px rgba(15, 76, 129, .10);
    transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease;
    scroll-snap-align: start;
}

.video-mini-card {
    grid-template-columns: 108px minmax(0, 1fr) 32px;
    background: rgba(255,255,255,.92);
    border-color: rgba(255,255,255,.38);
    box-shadow: 0 18px 36px rgba(2,14,27,.20);
}

.infografis-strip-card {
    grid-template-columns: 98px minmax(0, 1fr);
    min-height: 112px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.94), rgba(231,246,255,.82)),
        radial-gradient(circle at 12% 12%, rgba(15,76,129,.16), transparent 34%);
}

.ad-preview-modal .modal-dialog {
    max-width: min(1120px, calc(100vw - 32px));
}

.ad-preview-content {
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(235,248,255,.92));
    border: 1px solid rgba(15,76,129,.14);
    border-radius: 26px;
    box-shadow: 0 34px 90px rgba(6,24,47,.28);
}

.ad-preview-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(15,76,129,.10);
}

.ad-preview-head span {
    color: #0f4c81;
    font-size: .72rem;
    font-weight: 900;
}

.ad-preview-head h5 {
    margin: 4px 0 0;
    color: #0b2f54;
    font-weight: 900;
}

.ad-preview-body {
    padding: 14px;
}

.ad-preview-body img {
    display: block;
    width: 100%;
    max-height: 78vh;
    object-fit: contain;
    border-radius: 18px;
    background: #eef8ff;
}

.video-mini-card::before,
.infografis-strip-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(115deg, rgba(15,76,129,.10), transparent 44%, rgba(255,255,255,.56));
    opacity: .72;
}

.video-mini-card img,
.infografis-strip-card img {
    width: 100%;
    height: 94px;
    object-fit: cover;
    border-radius: 12px;
}

.infografis-strip-card img {
    height: 94px;
}

.video-mini-card span,
.infografis-strip-card span {
    display: block;
    margin-bottom: 5px;
    color: #0f4c81;
    font-size: .68rem;
    font-weight: 900;
}

.video-mini-card h3,
.infografis-strip-card h3 {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #123a5c;
    font-size: .84rem;
    font-weight: 900;
    line-height: 1.28;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.video-mini-card > i {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #0f4c81, #4fb0e9);
    border-radius: 50%;
    box-shadow: 0 10px 22px rgba(15,76,129,.18);
}

.video-mini-card:hover,
.infografis-strip-card:hover {
    color: #0b2f54;
    transform: translateY(-3px) scale(1.015);
    border-color: rgba(15,76,129,.24);
    box-shadow: 0 22px 44px rgba(15, 76, 129, .16);
}

.regulasi-mini-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 138px;
    padding: 26px 30px;
    color: #0b2f54;
    background:
        radial-gradient(circle at 12% 20%, rgba(91, 178, 231, .20), transparent 30%),
        linear-gradient(115deg, #ffffff, #edf8ff 54%, #ffffff);
}

.regulasi-mini-hero span {
    color: #0f4c81;
    background: rgba(15, 76, 129, .08);
    border-color: rgba(15, 76, 129, .13);
}

.regulasi-mini-hero h2 {
    margin: 10px 0 5px;
    font-size: clamp(1.35rem, 2.2vw, 2.05rem);
    font-weight: 900;
    letter-spacing: 0;
}

.regulasi-mini-hero p {
    max-width: 660px;
    margin: 0;
    color: #5b7288;
    font-size: .92rem;
    line-height: 1.65;
}

.regulasi-mini-hero strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 0 0 auto;
    padding: 12px 16px;
    color: #fff;
    background: linear-gradient(135deg, #0f4c81, #2a8dcc);
    border-radius: 14px;
    font-size: .82rem;
    box-shadow: 0 16px 32px rgba(15, 76, 129, .18);
}

.showcase-layout {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 18px;
    align-items: start;
}

.showcase-main-column {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.showcase-title-premium {
    display: block;
    padding: 0 2px;
}

.showcase-title-premium span,
.showcase-ad-title span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #0f4c81;
    font-size: .74rem;
    font-weight: 900;
}

.showcase-title-premium h2,
.showcase-ad-title h2 {
    margin: 0;
    color: #082646;
    font-size: clamp(1.9rem, 3vw, 3rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
}

.showcase-title-premium p {
    max-width: 760px;
    margin: 10px 0 0;
    color: #5b7288;
    font-size: .94rem;
    line-height: 1.65;
}

.video-news-portal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 292px;
    gap: 12px;
    min-height: 440px;
    padding: 12px;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 16%, rgba(255,255,255,.22), transparent 28%),
        linear-gradient(135deg, rgba(8,38,70,.98), rgba(15,76,129,.92) 58%, rgba(223,243,255,.82) 150%);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 26px;
    box-shadow: 0 30px 74px rgba(15,76,129,.18), inset 0 1px 0 rgba(255,255,255,.18);
}

.video-news-main {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 416px;
    color: #fff;
    text-decoration: none;
    border-radius: 20px;
    background: #082646;
}

.video-news-main::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5,25,50,.88), rgba(15,76,129,.52), rgba(255,255,255,.10)),
        radial-gradient(circle at 80% 16%, rgba(255,255,255,.25), transparent 30%);
}

.video-news-main img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .86;
    transition: transform .42s ease;
}

.video-news-content {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
    max-width: 620px;
    padding: 30px;
}

.video-news-content span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: #082646;
    background: rgba(255,255,255,.88);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 900;
}

.video-news-content h3 {
    margin: 14px 0 10px;
    color: #fff;
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: 0;
}

.video-news-content p {
    max-width: 560px;
    margin: 0;
    color: rgba(239,248,255,.88);
    font-size: .96rem;
    line-height: 1.65;
}

.video-news-content strong {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    padding: 11px 15px;
    color: #082646;
    background: linear-gradient(135deg, #fff, #dff3ff);
    border-radius: 13px;
    font-size: .8rem;
    font-weight: 900;
}

.video-news-list {
    display: grid;
    grid-template-rows: repeat(4, 1fr);
    gap: 9px;
}

.video-news-item {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: 10px;
    min-height: 94px;
    padding: 9px;
    overflow: hidden;
    color: #0b2f54;
    text-decoration: none;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.40);
    border-radius: 16px;
    box-shadow: 0 16px 34px rgba(2,14,27,.18);
    transition: transform .24s ease, box-shadow .24s ease;
}

.video-news-item img {
    width: 100%;
    height: 100%;
    min-height: 76px;
    object-fit: cover;
    border-radius: 12px;
}

.video-news-item span {
    display: block;
    margin-bottom: 5px;
    color: #0f4c81;
    font-size: .68rem;
    font-weight: 900;
}

.video-news-item h4 {
    display: -webkit-box;
    margin: 0;
    overflow: hidden;
    color: #123a5c;
    font-size: .82rem;
    font-weight: 900;
    line-height: 1.32;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}

.video-news-main:hover img {
    transform: scale(1.06);
}

.video-news-item:hover,
.infografis-square-card:hover,
.quick-action-card:hover {
    color: #0b2f54;
    transform: translateY(-3px);
    box-shadow: 0 24px 48px rgba(15,76,129,.16);
}

.infografis-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.infografis-square-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 270px;
    color: #fff;
    text-decoration: none;
    background: #082646;
    border: 1px solid rgba(15,76,129,.12);
    border-radius: 22px;
    box-shadow: 0 22px 52px rgba(15,76,129,.13);
    transition: transform .24s ease, box-shadow .24s ease;
}

.infografis-square-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(5,25,50,.88), rgba(15,76,129,.18) 64%, rgba(255,255,255,.04)),
        radial-gradient(circle at 82% 18%, rgba(255,255,255,.20), transparent 26%);
}

.infografis-square-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .82;
    transition: transform .36s ease;
}

.infografis-square-card div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 20px;
}

.infografis-square-card span {
    color: #dff3ff;
    font-size: .72rem;
    font-weight: 900;
}

.infografis-square-card h3 {
    display: -webkit-box;
    margin: 8px 0 0;
    overflow: hidden;
    color: #fff;
    font-size: 1.06rem;
    font-weight: 900;
    line-height: 1.28;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.infografis-square-card:hover img {
    transform: scale(1.06);
}

.quick-action-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.quick-action-card {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    min-height: 138px;
    padding: 20px;
    color: #0b2f54;
    text-decoration: none;
    background:
        radial-gradient(circle at 12% 14%, rgba(91,178,231,.22), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,.96), rgba(232,247,255,.88));
    border: 1px solid rgba(15,76,129,.12);
    border-radius: 22px;
    box-shadow: 0 22px 52px rgba(15,76,129,.12);
    transition: transform .24s ease, box-shadow .24s ease;
}

.quick-action-card > i {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #0f4c81, #4fb0e9);
    border-radius: 18px;
    font-size: 1.6rem;
    box-shadow: 0 16px 34px rgba(15,76,129,.18);
}

.quick-action-card span {
    color: #0f4c81;
    font-size: .72rem;
    font-weight: 900;
}

.quick-action-card h3 {
    margin: 5px 0 5px;
    color: #0b2f54;
    font-size: 1.08rem;
    font-weight: 900;
}

.quick-action-card p {
    margin: 0;
    color: #64798d;
    font-size: .86rem;
    line-height: 1.55;
}

.showcase-ad-sidebar {
    position: sticky;
    top: 98px;
    display: grid;
    gap: 12px;
}

.showcase-ad-title {
    padding: 0 2px;
}

.showcase-ad-sidebar .showcase-ad-card {
    min-height: 620px;
}

.showcase-ad-sidebar .showcase-ad-card img,
.showcase-ad-sidebar .showcase-ad-empty {
    min-height: 596px;
}

.premium-board-layout {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
}

.video-strip-panel,
.premium-panel {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 10% 12%, rgba(92, 178, 231, .18), transparent 28%),
        linear-gradient(135deg, rgba(255,255,255,.94), rgba(236,248,255,.86));
    border: 1px solid rgba(15,76,129,.12);
    border-radius: 24px;
    box-shadow: 0 24px 58px rgba(15,76,129,.12);
}

.video-strip-panel {
    padding: 20px;
    background:
        radial-gradient(circle at 12% 16%, rgba(255,255,255,.22), transparent 30%),
        radial-gradient(circle at 88% 18%, rgba(115,189,233,.30), transparent 34%),
        linear-gradient(135deg, #082646 0%, #0f4c81 58%, #eaf8ff 150%);
    border-color: rgba(255,255,255,.22);
}

.premium-panel {
    padding: 18px;
}

.premium-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 14px;
}

.premium-panel-head span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f4c81;
    font-size: .76rem;
    font-weight: 900;
}

.video-strip-panel .premium-panel-head span,
.video-strip-panel .premium-panel-head h2 {
    color: #fff;
}

.premium-panel-head h2 {
    margin: 6px 0 0;
    color: #082646;
    font-size: clamp(1.35rem, 2.2vw, 2.1rem);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
}

.premium-panel-head a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    color: #0f4c81;
    text-decoration: none;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(15,76,129,.12);
    border-radius: 999px;
    padding: 9px 13px;
    font-size: .78rem;
    font-weight: 900;
    box-shadow: 0 12px 24px rgba(15,76,129,.10);
}

.video-strip-panel .premium-panel-head a {
    color: #082646;
}

.video-strip-wrap {
    position: relative;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px;
    align-items: center;
    gap: 12px;
}

.video-strip-track {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 2px 12px;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,.46) transparent;
}

.video-strip-track::-webkit-scrollbar {
    height: 7px;
}

.video-strip-track::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,.42);
    border-radius: 999px;
}

.video-strip-nav {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #082646;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(255,255,255,.36);
    border-radius: 50%;
    box-shadow: 0 16px 32px rgba(2,14,27,.20);
}

.video-strip-card {
    position: relative;
    flex: 0 0 285px;
    min-height: 235px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    background: #082646;
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 18px;
    box-shadow: 0 18px 38px rgba(2,14,27,.22);
    scroll-snap-align: start;
    transition: transform .24s ease, box-shadow .24s ease;
}

.video-strip-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(5,25,50,.88), rgba(15,76,129,.18) 62%, rgba(255,255,255,.04));
}

.video-strip-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .86;
    transition: transform .32s ease;
}

.video-strip-card div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 18px;
}

.video-strip-card span {
    color: #dff3ff;
    font-size: .68rem;
    font-weight: 900;
}

.video-strip-card h3 {
    display: -webkit-box;
    margin: 6px 0 0;
    overflow: hidden;
    color: #fff;
    font-size: 1.04rem;
    font-weight: 900;
    line-height: 1.28;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.premium-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 316px;
    gap: 18px;
    align-items: start;
}

.premium-left-column {
    display: grid;
    gap: 14px;
    min-width: 0;
}

.info-poster-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.info-poster-card {
    position: relative;
    min-height: 205px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    background: #082646;
    border-radius: 18px;
    box-shadow: 0 16px 36px rgba(15,76,129,.12);
    transition: transform .24s ease, box-shadow .24s ease;
}

.info-poster-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(5,25,50,.86), rgba(15,76,129,.16) 62%, transparent);
}

.info-poster-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .84;
    transition: transform .32s ease;
}

.info-poster-card div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 16px;
}

.info-poster-card span,
.hukum-list-item span {
    color: #dff3ff;
    font-size: .68rem;
    font-weight: 900;
}

.info-poster-card h3 {
    display: -webkit-box;
    margin: 7px 0 0;
    overflow: hidden;
    color: #fff;
    font-size: .96rem;
    font-weight: 900;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.hukum-list {
    display: grid;
    gap: 10px;
}

.hukum-list-item {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 68px;
    padding: 12px;
    color: #0b2f54;
    text-decoration: none;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(15,76,129,.10);
    border-radius: 16px;
    transition: transform .22s ease, box-shadow .22s ease;
}

.hukum-list-item i {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #0f4c81, #4fb0e9);
    border-radius: 13px;
}

.hukum-list-item h3 {
    display: -webkit-box;
    margin: 0 0 4px;
    overflow: hidden;
    color: #0b2f54;
    font-size: .98rem;
    font-weight: 900;
    line-height: 1.3;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.hukum-list-item span {
    color: #637b90;
}

.kritik-mini-form {
    display: grid;
    gap: 10px;
}

.kritik-mini-form input,
.kritik-mini-form textarea {
    width: 100%;
    color: #0b2f54;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(15,76,129,.12);
    border-radius: 14px;
    padding: 12px 14px;
    font-size: .9rem;
    outline: 0;
}

.kritik-mini-form textarea {
    resize: vertical;
}

.kritik-mini-form button {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    background: linear-gradient(135deg, #0f4c81, #4fb0e9);
    border: 0;
    border-radius: 14px;
    padding: 11px 18px;
    font-size: .84rem;
    font-weight: 900;
    box-shadow: 0 16px 32px rgba(15,76,129,.18);
}

.premium-ad-column {
    position: sticky;
    top: 98px;
    display: grid;
    gap: 16px;
}

.square-ad-card {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 316px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    background:
        linear-gradient(135deg, #082646 0%, #0f4c81 100%);
    border: 1px solid rgba(15, 76, 129, .18);
    border-radius: 18px;
    box-shadow: 0 18px 38px rgba(8,38,70,.16);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.square-ad-card > span {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    padding: 7px 10px;
    color: #0b2f54;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 999px;
    font-size: .66rem;
    font-weight: 900;
    box-shadow: 0 10px 20px rgba(8,38,70,.14);
}

.square-ad-card img {
    width: 100%;
    height: 100%;
    padding: 8px;
    object-fit: cover;
    border-radius: 16px;
}

.square-ad-empty {
    display: grid;
    height: 100%;
    place-items: center;
    padding: 28px;
    text-align: center;
}

.square-ad-empty i {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    color: #fff;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 16px;
    font-size: 1.7rem;
}

.square-ad-empty strong,
.square-ad-empty small {
    display: block;
}

.square-ad-empty strong {
    margin-top: 12px;
    font-weight: 900;
}

.square-ad-empty small {
    color: rgba(255,255,255,.78);
    font-weight: 800;
}

.video-strip-card:hover,
.info-poster-card:hover,
.hukum-list-item:hover,
.square-ad-card:hover {
    color: inherit;
    transform: translateY(-3px);
    border-color: rgba(255,255,255,.34);
    box-shadow: 0 24px 48px rgba(8,38,70,.22);
}

.video-strip-card:hover img,
.info-poster-card:hover img {
    transform: scale(1.06);
}

@media (max-width: 991.98px) {
    .hero-bootstrap-img {
        height: 620px;
    }

    .premium-caption {
        left: 6%;
        right: 6%;
        grid-template-columns: 1fr;
        transform: translateY(-45%);
    }

    .hero-content-shell {
        max-width: 720px;
    }

    .premium-caption h1 {
        font-size: 2.85rem;
    }

    .premium-caption p {
        max-width: 620px;
    }

    .hero-lightning-1 {
        right: 9%;
        top: 20%;
    }

    .hero-lightning-2,
    .hero-lightning-3 {
        display: none;
    }

    .hero-floating-box-2,
    .hero-floating-box-3 {
        display: none;
    }

    .hero-floating-box-1 {
        left: 6%;
        top: 18%;
    }

    .hero-floating-box-4 {
        left: auto;
        right: 7%;
        bottom: 11%;
    }

    .contact-ribbon {
        margin-top: -28px;
    }

    .sambutan-modal-grid {
        grid-template-columns: 1fr;
    }

    .sambutan-modal-profile {
        display: grid;
        grid-template-columns: 150px minmax(0, 1fr);
        align-items: center;
        gap: 16px;
    }

    .sambutan-modal-profile img {
        height: 160px;
    }

    .infografis-floating-ui {
        grid-template-columns: 1fr;
        top: 22px;
        right: 22px;
    }

    .infografis-menu-card .media-menu-overlay {
        max-width: 560px;
    }

    .infografis-latest-grid,
    .berita-list-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .berita-magazine-layout {
        grid-template-columns: 1fr;
    }

    .berita-side-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .featured-news-portal {
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .featured-news-main {
        min-height: 445px;
    }

    .featured-news-content {
        padding: 26px;
    }

    .featured-news-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
    }

    .showcase-row {
        grid-template-columns: 1fr;
    }

    .showcase-layout,
    .video-news-portal {
        grid-template-columns: 1fr;
    }

    .premium-content-grid {
        grid-template-columns: 1fr;
    }

    .premium-ad-column {
        position: static;
        grid-template-columns: repeat(2, minmax(0, 316px));
        justify-content: center;
    }

    .video-strip-card {
        flex-basis: 260px;
        min-height: 215px;
    }

    .showcase-ad-sidebar {
        position: static;
    }

    .showcase-ad-sidebar .showcase-ad-card,
    .showcase-ad-sidebar .showcase-ad-card img,
    .showcase-ad-sidebar .showcase-ad-empty {
        min-height: 360px;
    }

    .video-news-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
    }

    .showcase-ad-card,
    .showcase-ad-card img,
    .showcase-ad-empty {
        min-height: 360px;
    }

    .video-mini-grid,
    .infografis-strip-grid {
        display: flex;
    }

    .video-mini-card,
    .infografis-strip-card {
        flex-basis: 310px;
    }
}

@media (max-width: 767.98px) {
    .hero-bootstrap-img {
        height: 590px;
    }

    .premium-caption {
        top: 50%;
        left: 18px;
        right: 18px;
        transform: translateY(-48%);
    }

    .hero-kicker {
        align-items: flex-start;
        border-radius: 16px;
        font-size: .72rem;
    }

    .premium-caption h1 {
        font-size: 2.05rem;
        line-height: 1.08;
    }

    .premium-caption p {
        margin-top: 16px;
        font-size: .98rem;
        line-height: 1.7;
    }

    .hero-actions {
        gap: 10px;
        margin-top: 22px;
    }

    .hero-actions .btn {
        width: 100%;
        min-height: 50px;
        padding: 13px 16px;
    }

    .hero-lightning {
        width: 42px;
        height: 42px;
        border-radius: 14px;
    }

    .hero-lightning-1 {
        right: 22px;
        top: 82px;
    }

    .hero-bubble-2,
    .hero-bubble-4,
    .hero-floating-box-4 {
        display: none;
    }

    .hero-floating-box {
        min-width: 104px;
        padding: 8px 11px;
        border-radius: 13px;
        font-size: .62rem;
    }

    .hero-floating-box-1 {
        left: 18px;
        top: 112px;
    }

    .contact-ribbon {
        margin-top: -18px;
        padding-bottom: 8px;
    }

    .info-mini-card {
        min-height: 116px;
        padding: 18px 14px;
    }

    .layanan-card {
        min-height: 210px;
    }

    .sambutan-content {
        padding: 32px 24px;
    }

    .sambutan-photo-wrap {
        min-height: 310px;
        padding: 12px;
    }

    .sambutan-photo-frame,
    .sambutan-photo {
        min-height: 286px;
    }

    .sambutan-values span {
        width: 100%;
        justify-content: center;
    }

    .sambutan-btn {
        width: 100%;
        justify-content: center;
    }

    .galeri-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .galeri-preview-hint {
        white-space: normal;
    }

    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery-grid-card {
        min-height: 330px;
    }

    .media-menu-card {
        min-height: 300px;
        border-radius: 22px;
    }

    .media-menu-overlay {
        padding: 24px;
    }

    .media-menu-overlay h3 {
        font-size: 1.7rem;
    }

    .media-video-visual i {
        font-size: 4.8rem;
    }

    .infografis-menu-card {
        min-height: 360px;
    }

    .infografis-floating-ui {
        display: none;
    }

    .infografis-menu-card .media-menu-overlay {
        padding: 24px;
    }

    .infografis-menu-card .media-menu-overlay h3 {
        font-size: 2rem;
    }

    .infografis-latest-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .infografis-latest-grid,
    .berita-list-grid,
    .berita-side-stack {
        grid-template-columns: 1fr;
    }

    .infografis-glass-card {
        min-height: 280px;
    }

    .berita-feature-card {
        min-height: 430px;
    }

    .berita-search-glass {
        margin-top: 8px;
    }

    .featured-news-main {
        min-height: 390px;
    }

    .featured-news-content {
        padding: 26px 22px;
    }

    .featured-news-content h3 {
        font-size: 1.75rem;
    }

    .featured-news-btn {
        width: 100%;
    }

    .featured-news-list {
        grid-template-columns: 1fr;
    }

    .featured-news-list-item {
        min-height: 100px;
    }

    .kepala-img {
        height: 320px;
    }

    .sambutan-modal-header,
    .sambutan-modal-body {
        padding: 20px;
    }

    .sambutan-modal-profile {
        display: block;
    }

    .sambutan-modal-profile img {
        height: 220px;
    }

    .sambutan-modal-copy {
        padding: 20px;
    }

    .gallery-feature,
    .gallery-tile {
        min-height: 260px;
    }

    .showcase-hero-card,
    .showcase-hero-content {
        min-height: 360px;
    }

    .showcase-title-premium h2,
    .showcase-ad-title h2 {
        font-size: 2rem;
    }

    .video-news-main {
        min-height: 380px;
    }

    .video-news-content {
        padding: 24px;
    }

    .video-news-content h3 {
        font-size: 1.7rem;
    }

    .video-news-list,
    .infografis-card-grid,
    .quick-action-grid {
        grid-template-columns: 1fr;
    }

    .video-strip-panel,
    .premium-panel {
        border-radius: 20px;
        padding: 14px;
    }

    .premium-panel-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .premium-panel-head a {
        width: 100%;
        justify-content: center;
    }

    .video-strip-wrap {
        grid-template-columns: 1fr;
    }

    .video-strip-nav {
        display: none;
    }

    .video-strip-card {
        flex-basis: 86%;
        min-height: 230px;
    }

    .info-poster-grid,
    .premium-ad-column {
        grid-template-columns: 1fr;
    }

    .square-ad-card {
        max-width: none;
    }

    .infografis-square-card {
        min-height: 260px;
    }

    .quick-action-card {
        grid-template-columns: 52px minmax(0, 1fr);
        padding: 18px;
    }

    .quick-action-card > i {
        width: 52px;
        height: 52px;
        border-radius: 16px;
    }

    .showcase-hero-content {
        padding: 24px;
    }

    .showcase-hero-content h2 {
        font-size: 1.55rem;
    }

    .video-mini-card,
    .infografis-strip-card {
        grid-template-columns: 100px minmax(0, 1fr) 32px;
        flex-basis: 86%;
    }

    .infografis-strip-card::after {
        content: "\F138";
        display: grid;
        width: 34px;
        height: 34px;
        place-items: center;
        color: #fff;
        background: linear-gradient(135deg, #0f4c81, #4fb0e9);
        border-radius: 50%;
        font-family: bootstrap-icons;
        font-size: .9rem;
    }

    .showcase-action {
        width: 100%;
        justify-content: center;
    }

    .regulasi-mini-hero {
        align-items: flex-start;
        flex-direction: column;
        padding: 24px;
    }

    .regulasi-mini-hero strong {
        width: 100%;
    }
}

@media (max-width: 575.98px) {
    .galeri-premium-section {
        padding-top: 2.4rem !important;
        padding-bottom: 2.4rem !important;
    }

    .galeri-section-head {
        gap: 14px;
        margin-bottom: 18px;
    }

    .galeri-section-head h2 {
        font-size: 1.72rem;
        line-height: 1.2;
    }

    .galeri-section-head p {
        font-size: .92rem;
        line-height: 1.65;
    }

    .galeri-preview-hint {
        width: 100%;
        justify-content: center;
        padding: 9px 12px;
        font-size: .72rem;
    }

    .gallery-grid-frame {
        padding: 10px;
        border-radius: 18px;
    }

    .gallery-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .gallery-grid-card {
        min-height: auto;
        aspect-ratio: 4 / 3;
        border-radius: 16px;
        transform: none !important;
    }

    .gallery-grid-card:hover,
    .gallery-grid-card:focus {
        transform: none !important;
    }

    .gallery-grid-card::before {
        left: 14px;
        top: 14px;
        width: 42px;
    }

    .gallery-grid-overlay {
        padding: 14px;
    }

    .gallery-grid-overlay span {
        font-size: .62rem;
    }

    .gallery-grid-overlay h3 {
        font-size: .86rem;
        line-height: 1.35;
    }

    .gallery-preview-head,
    .gallery-preview-body {
        padding: 16px;
    }
}

/* Kritik & Saran premium page */
.kritik-page {
    position: relative;
    overflow: hidden;
    font-family: 'Poppins', Arial, sans-serif;
    background:
        radial-gradient(circle at 12% 10%, rgba(87, 175, 230, .18), transparent 30%),
        linear-gradient(135deg, #eef8ff 0%, #ffffff 48%, #f4fbff 100%);
}

.kritik-page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background: var(--kritik-bg-image, none) center center / cover no-repeat;
    opacity: .24;
    pointer-events: none;
}

.kritik-page > * {
    position: relative;
    z-index: 1;
}

.kritik-hero-section {
    position: relative;
    padding: 76px 0 44px;
}

.kritik-hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(15,76,129,.08) 0 1px, transparent 1px 108px),
        linear-gradient(0deg, rgba(15,76,129,.05) 0 1px, transparent 1px 92px);
    opacity: .55;
    pointer-events: none;
}

.kritik-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 520px;
    gap: 32px;
    align-items: center;
}

.kritik-hero-copy {
    padding: 30px;
    background: rgba(255, 255, 255, .74);
    border: 1px solid rgba(255, 255, 255, .64);
    border-radius: 26px;
    box-shadow: 0 22px 58px rgba(15, 76, 129, .12);
    backdrop-filter: blur(10px);
}

.kritik-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    color: #0f4c81;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(15,76,129,.12);
    border-radius: 999px;
    box-shadow: 0 14px 30px rgba(15,76,129,.10);
    font-size: .78rem;
    font-weight: 900;
}

.kritik-hero-copy h1 {
    max-width: 740px;
    margin: 22px 0 16px;
    color: #082646;
    font-size: clamp(2.4rem, 5vw, 5rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: 0;
}

.kritik-hero-copy p {
    max-width: 660px;
    margin: 0;
    color: #38566d;
    font-size: 1.06rem;
    line-height: 1.85;
}

.kritik-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.kritik-hero-points span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    color: #0b2f54;
    background: rgba(255,255,255,.84);
    border: 1px solid rgba(15,76,129,.12);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 900;
}

.kritik-form-shell {
    position: relative;
    overflow: hidden;
    padding: 24px;
    background:
        radial-gradient(circle at 12% 10%, rgba(255,255,255,.28), transparent 32%),
        linear-gradient(145deg, #082646 0%, #0f4c81 58%, #dff3ff 150%);
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 28px;
    box-shadow: 0 34px 82px rgba(8,38,70,.26);
}

.kritik-form-shell::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 22px;
    pointer-events: none;
}

.kritik-form-head,
.kritik-premium-form,
.kritik-success-card,
.kritik-alert-danger {
    position: relative;
    z-index: 1;
}

.kritik-form-head {
    margin-bottom: 18px;
    color: #fff;
}

.kritik-form-head span {
    color: #dff3ff;
    font-size: .74rem;
    font-weight: 900;
}

.kritik-form-head h2 {
    margin: 7px 0 0;
    color: #fff;
    font-size: clamp(1.45rem, 2.3vw, 2.15rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: 0;
}

.kritik-premium-form {
    display: grid;
    gap: 14px;
}

.kritik-field {
    display: grid;
    gap: 7px;
}

.kritik-field label {
    color: rgba(255,255,255,.88);
    font-size: .78rem;
    font-weight: 900;
}

.kritik-field input,
.kritik-field select,
.kritik-field textarea,
.kritik-captcha-row input {
    width: 100%;
    color: #0b2f54;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 15px;
    padding: 13px 14px;
    font-size: .92rem;
    outline: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.40);
}

.kritik-field textarea {
    resize: vertical;
}

.kritik-field small {
    color: rgba(239,248,255,.72);
    font-size: .74rem;
    font-weight: 700;
}

.kritik-captcha-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 150px;
    gap: 12px;
    align-items: center;
    padding: 12px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 18px;
}

.kritik-captcha-row span {
    display: block;
    color: rgba(239,248,255,.76);
    font-size: .72rem;
    font-weight: 900;
}

.kritik-captcha-row strong {
    display: block;
    margin-top: 3px;
    color: #fff;
    font-size: 1.08rem;
    font-weight: 900;
}

.kritik-submit-btn,
.kritik-success-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    color: #082646;
    background: linear-gradient(135deg, #fff, #dff3ff);
    border: 0;
    border-radius: 16px;
    box-shadow: 0 18px 38px rgba(2,14,27,.24);
    font-size: .92rem;
    font-weight: 900;
    text-decoration: none;
}

.kritik-alert-danger {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #7a1d1d;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(220,53,69,.20);
    border-radius: 16px;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.kritik-success-card {
    display: grid;
    justify-items: center;
    padding: 36px 20px;
    color: #fff;
    text-align: center;
}

.kritik-success-card > i {
    color: #dff3ff;
    font-size: 4.2rem;
    filter: drop-shadow(0 0 24px rgba(255,255,255,.32));
}

.kritik-success-card h2 {
    margin: 12px 0 8px;
    color: #fff;
    font-size: 2rem;
    font-weight: 900;
}

.kritik-success-card p {
    max-width: 420px;
    margin: 0 0 20px;
    color: rgba(239,248,255,.82);
    line-height: 1.7;
}

.kritik-values-section {
    padding: 0 0 64px;
}

.kritik-values-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.kritik-values-grid div {
    padding: 24px;
    color: #0b2f54;
    background: rgba(255,255,255,.90);
    border: 1px solid rgba(255,255,255,.70);
    border-radius: 22px;
    box-shadow: 0 22px 52px rgba(15,76,129,.10);
    backdrop-filter: blur(8px);
}

.kritik-values-grid i {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #0f4c81, #4fb0e9);
    border-radius: 17px;
    font-size: 1.45rem;
}

.kritik-values-grid h3 {
    margin: 15px 0 6px;
    font-size: 1.1rem;
    font-weight: 900;
}

.kritik-values-grid p {
    margin: 0;
    color: #637b90;
    font-size: .9rem;
    line-height: 1.6;
}

@media (max-width: 991.98px) {
    .kritik-hero-grid {
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .kritik-form-shell {
        max-width: 620px;
        width: 100%;
        margin: 0 auto;
    }
}

@media (max-width: 767.98px) {
    .kritik-page::before {
        opacity: .16;
        background-position: center center;
    }

    .kritik-hero-section {
        padding: 34px 0 28px;
    }

    .kritik-hero-copy {
        padding: 18px;
        border-radius: 20px;
    }

    .kritik-hero-copy h1 {
        margin: 16px 0 12px;
        font-size: 2.05rem;
        line-height: 1.12;
    }

    .kritik-hero-copy p {
        font-size: .95rem;
        line-height: 1.72;
    }

    .kritik-hero-points {
        margin-top: 18px;
    }

    .kritik-hero-points span {
        padding: 9px 11px;
        font-size: .72rem;
    }

    .kritik-form-shell {
        padding: 16px;
        border-radius: 22px;
    }

    .kritik-form-head h2 {
        font-size: 1.45rem;
        line-height: 1.2;
    }

    .kritik-field input,
    .kritik-field select,
    .kritik-field textarea,
    .kritik-captcha-row input {
        min-height: 48px;
        font-size: .95rem;
    }

    .kritik-field textarea {
        min-height: 140px;
    }

    .kritik-captcha-row,
    .kritik-values-grid {
        grid-template-columns: 1fr;
    }

    .kritik-captcha-row {
        gap: 10px;
    }

    .kritik-submit-btn {
        width: 100%;
    }

    .kritik-values-section {
        padding-bottom: 40px;
    }

    .kritik-values-grid div {
        padding: 18px;
        border-radius: 18px;
    }
}

@media (max-width: 420px) {
    .kritik-kicker {
        align-items: flex-start;
        border-radius: 16px;
        line-height: 1.35;
    }

    .kritik-hero-copy h1 {
        font-size: 1.82rem;
    }

    .kritik-form-shell {
        padding: 14px;
    }
}

/* Pengaduan premium page */
.pengaduan-premium-page {
    overflow: hidden;
    background: linear-gradient(135deg, #eef8ff 0%, #ffffff 48%, #f4fbff 100%);
}

.pengaduan-premium-hero {
    position: relative;
    overflow: hidden;
    min-height: 620px;
    display: flex;
    align-items: center;
    padding: 82px 0;
    color: #fff;
}

.pengaduan-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5,25,50,.90), rgba(15,76,129,.62), rgba(255,255,255,.10)),
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.20), transparent 28%);
}

.pengaduan-bg::before,
.pengaduan-bg::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}

.pengaduan-bg::before {
    width: 360px;
    height: 360px;
    left: -90px;
    top: 90px;
    background: radial-gradient(circle, rgba(91,178,231,.32), transparent 68%);
    filter: blur(4px);
    animation: heroDrift 9s ease-in-out infinite alternate;
}

.pengaduan-bg::after {
    width: 280px;
    height: 280px;
    right: 10%;
    bottom: 48px;
    background: radial-gradient(circle, rgba(255,255,255,.22), transparent 68%);
    filter: blur(3px);
    animation: heroDrift 11s ease-in-out infinite alternate-reverse;
}

.pengaduan-floating-lights,
.cek-floating-lights {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

.pengaduan-floating-lights span,
.cek-floating-lights span {
    position: absolute;
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255,255,255,.72);
    box-shadow: 0 0 26px rgba(105,190,245,.78);
    animation: pengaduanFloatLight 7s ease-in-out infinite;
}

.pengaduan-floating-lights span:nth-child(1) {
    left: 8%;
    top: 28%;
}

.pengaduan-floating-lights span:nth-child(2) {
    right: 21%;
    top: 24%;
    width: 18px;
    height: 18px;
    animation-delay: -2s;
}

.pengaduan-floating-lights span:nth-child(3) {
    right: 12%;
    bottom: 22%;
    animation-delay: -4s;
}

@keyframes pengaduanFloatLight {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
        opacity: .55;
    }
    50% {
        transform: translate3d(16px, -24px, 0) scale(1.28);
        opacity: 1;
    }
}

.pengaduan-premium-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 34px;
    align-items: end;
}

.pengaduan-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    backdrop-filter: blur(12px);
    font-size: .78rem;
    font-weight: 900;
}

.pengaduan-copy h1 {
    max-width: 850px;
    margin: 20px 0 16px;
    font-size: clamp(2.45rem, 5vw, 5rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: 0;
    text-shadow: 0 18px 44px rgba(0,0,0,.34);
}

.pengaduan-copy p {
    max-width: 720px;
    margin: 0;
    color: rgba(239,248,255,.90);
    font-size: 1.06rem;
    line-height: 1.85;
}

.pengaduan-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 28px;
}

.pengaduan-btn-primary,
.pengaduan-btn-check,
.pengaduan-status-card a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 13px 18px;
    border-radius: 16px;
    font-size: .88rem;
    font-weight: 900;
    text-decoration: none;
}

.pengaduan-btn-primary,
.pengaduan-status-card a {
    color: #082646;
    background: linear-gradient(135deg, #fff, #dff3ff);
    box-shadow: 0 18px 38px rgba(2,14,27,.24);
}

.pengaduan-btn-primary,
.pengaduan-btn-check,
.pengaduan-status-card,
.pengaduan-form-card,
.pengaduan-info-panel {
    transition: transform .26s ease, box-shadow .26s ease, border-color .26s ease;
}

.pengaduan-btn-primary:hover,
.pengaduan-btn-check:hover,
.pengaduan-status-card:hover {
    transform: translateY(-3px);
}

.pengaduan-status-card:hover,
.pengaduan-form-card:hover,
.pengaduan-info-panel:hover {
    border-color: rgba(255,255,255,.38);
    box-shadow: 0 36px 84px rgba(8,38,70,.24);
}

.pengaduan-btn-check {
    color: #fff;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.26);
    backdrop-filter: blur(12px);
}

.pengaduan-status-card {
    position: relative;
    overflow: hidden;
    padding: 24px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 24px;
    box-shadow: 0 26px 58px rgba(2,14,27,.24);
    backdrop-filter: blur(16px);
}

.pengaduan-status-card > i {
    display: grid;
    width: 58px;
    height: 58px;
    place-items: center;
    color: #082646;
    background: #fff;
    border-radius: 18px;
    font-size: 1.65rem;
}

.pengaduan-status-card span {
    display: block;
    margin-top: 18px;
    color: #dff3ff;
    font-size: .74rem;
    font-weight: 900;
}

.pengaduan-status-card h2 {
    margin: 8px 0 18px;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 900;
    line-height: 1.25;
}

.pengaduan-form-section {
    padding: 34px 0 64px;
}

.pengaduan-fresh-strip {
    position: relative;
    z-index: 2;
    margin-top: -36px;
}

.pengaduan-strip-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.pengaduan-strip-grid div {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 74px;
    padding: 16px;
    color: #0b2f54;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(15,76,129,.12);
    border-radius: 20px;
    box-shadow: 0 22px 48px rgba(15,76,129,.12);
    transition: transform .24s ease, box-shadow .24s ease;
}

.pengaduan-strip-grid div:hover {
    transform: translateY(-4px);
    box-shadow: 0 28px 58px rgba(15,76,129,.16);
}

.pengaduan-strip-grid i {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    flex: 0 0 auto;
    color: #fff;
    background: linear-gradient(135deg, #0f4c81, #4fb0e9);
    border-radius: 14px;
}

.pengaduan-strip-grid span {
    font-size: .82rem;
    font-weight: 900;
}

.pengaduan-form-layout {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

.pengaduan-info-panel,
.pengaduan-form-card {
    position: relative;
    overflow: hidden;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(15,76,129,.12);
    border-radius: 26px;
    box-shadow: 0 26px 64px rgba(15,76,129,.13);
}

.pengaduan-info-panel {
    padding: 24px;
    background:
        radial-gradient(circle at 14% 12%, rgba(91,178,231,.22), transparent 32%),
        linear-gradient(135deg, #082646, #0f4c81 72%, #dff3ff 160%);
    color: #fff;
}

.pengaduan-info-panel > span,
.pengaduan-form-head span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #dff3ff;
    font-size: .74rem;
    font-weight: 900;
}

.pengaduan-info-panel h2 {
    margin: 12px 0 22px;
    color: #fff;
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1.15;
}

.pengaduan-step-list {
    display: grid;
    gap: 12px;
}

.pengaduan-step-list div {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 16px;
    transition: transform .24s ease, background .24s ease;
}

.pengaduan-step-list div:hover {
    transform: translateX(5px);
    background: rgba(255,255,255,.18);
}

.pengaduan-step-list i {
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    color: #082646;
    background: #fff;
    border-radius: 14px;
}

.pengaduan-step-list strong {
    display: block;
    color: #fff;
    font-weight: 900;
}

.pengaduan-step-list p {
    margin: 4px 0 0;
    color: rgba(239,248,255,.76);
    font-size: .82rem;
    line-height: 1.5;
}

.pengaduan-form-card {
    padding: 26px;
}

.pengaduan-form-head {
    margin-bottom: 20px;
}

.pengaduan-form-head span {
    color: #0f4c81;
}

.pengaduan-form-head h2 {
    margin: 8px 0 8px;
    color: #082646;
    font-size: clamp(1.6rem, 2.6vw, 2.45rem);
    font-weight: 900;
    letter-spacing: 0;
}

.pengaduan-form-head p {
    max-width: 720px;
    margin: 0;
    color: #60798d;
    line-height: 1.65;
}

.pengaduan-premium-form {
    display: grid;
    gap: 14px;
}

.pengaduan-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.pengaduan-field {
    display: grid;
    gap: 7px;
}

.pengaduan-field label {
    color: #0b2f54;
    font-size: .78rem;
    font-weight: 900;
}

.pengaduan-field input,
.pengaduan-field select,
.pengaduan-field textarea {
    width: 100%;
    color: #0b2f54;
    background: #f8fcff;
    border: 1px solid rgba(15,76,129,.12);
    border-radius: 15px;
    padding: 13px 14px;
    font-size: .92rem;
    outline: 0;
    transition: border-color .22s ease, box-shadow .22s ease, background .22s ease;
}

.pengaduan-field input:focus,
.pengaduan-field select:focus,
.pengaduan-field textarea:focus {
    background: #fff;
    border-color: rgba(79,176,233,.55);
    box-shadow: 0 0 0 .22rem rgba(79,176,233,.14);
}

.pengaduan-field textarea {
    resize: vertical;
}

.pengaduan-form-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 4px;
}

.pengaduan-form-footer a,
.pengaduan-form-footer button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    border-radius: 15px;
    padding: 12px 16px;
    font-size: .86rem;
    font-weight: 900;
    text-decoration: none;
}

.pengaduan-form-footer a {
    color: #0f4c81;
    background: #eef8ff;
    border: 1px solid rgba(15,76,129,.12);
}

.pengaduan-form-footer button {
    color: #fff;
    background: linear-gradient(135deg, #0f4c81, #4fb0e9);
    border: 0;
    box-shadow: 0 16px 32px rgba(15,76,129,.18);
}

.cek-premium-hero {
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(90deg, rgba(5,25,50,.92), rgba(15,76,129,.64));
}

.cek-premium-hero::after {
    content: "";
    position: absolute;
    width: 280px;
    height: 280px;
    right: 8%;
    top: 28px;
    background: radial-gradient(circle, rgba(255,255,255,.22), transparent 68%);
    border-radius: 50%;
    pointer-events: none;
}

.cek-floating-lights span:nth-child(1) {
    left: 12%;
    top: 34%;
}

.cek-floating-lights span:nth-child(2) {
    right: 18%;
    bottom: 24%;
    animation-delay: -2.7s;
}

.cek-mini-strip {
    position: relative;
    z-index: 2;
    margin-top: -24px;
}

.cek-mini-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.cek-mini-grid span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 60px;
    color: #0b2f54;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(15,76,129,.12);
    border-radius: 18px;
    box-shadow: 0 20px 44px rgba(15,76,129,.12);
    font-size: .84rem;
    font-weight: 900;
}

.cek-mini-grid i {
    color: #0f4c81;
    font-size: 1rem;
}

.cek-premium-hero .container {
    position: relative;
    z-index: 1;
}

.cek-premium-section {
    background:
        radial-gradient(circle at 12% 12%, rgba(91,178,231,.14), transparent 30%),
        linear-gradient(135deg, #eef8ff, #ffffff);
}

.cek-premium-card {
    overflow: hidden;
    border-radius: 26px !important;
    box-shadow: 0 28px 68px rgba(15,76,129,.14) !important;
}

@media (max-width: 991.98px) {
    .pengaduan-premium-grid,
    .pengaduan-form-layout {
        grid-template-columns: 1fr;
    }

    .pengaduan-status-card {
        max-width: 520px;
    }

    .pengaduan-strip-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .pengaduan-premium-hero {
        min-height: auto;
        padding: 58px 0;
    }

    .pengaduan-copy h1 {
        font-size: 2.35rem;
    }

    .pengaduan-field-grid {
        grid-template-columns: 1fr;
    }

    .pengaduan-strip-grid,
    .cek-mini-grid {
        grid-template-columns: 1fr;
    }

    .pengaduan-form-footer a,
    .pengaduan-form-footer button {
        width: 100%;
    }
}

/* Tentang Kami elite page */
.tentang-elite-page {
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 10%, rgba(91,178,231,.16), transparent 30%),
        linear-gradient(135deg, #eef8ff 0%, #ffffff 48%, #f4fbff 100%);
}

.tentang-elite-hero {
    position: relative;
    overflow: hidden;
    min-height: 680px;
    display: flex;
    align-items: center;
    padding: 82px 0 64px;
    color: #fff;
    background:
        linear-gradient(115deg, #06182f 0%, #0f4c81 58%, #eaf8ff 155%);
}

.tentang-elite-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.18), transparent 30%),
        linear-gradient(90deg, rgba(5,25,50,.86), rgba(15,76,129,.56), rgba(255,255,255,.08)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 116px);
    pointer-events: none;
}

.tentang-elite-bg span {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: rgba(255,255,255,.42);
    box-shadow: 0 0 34px rgba(115,189,233,.58);
    animation: pengaduanFloatLight 8s ease-in-out infinite;
}

.tentang-elite-bg span:nth-child(1) {
    width: 16px;
    height: 16px;
    left: 8%;
    top: 30%;
}

.tentang-elite-bg span:nth-child(2) {
    width: 22px;
    height: 22px;
    right: 18%;
    top: 22%;
    animation-delay: -2s;
}

.tentang-elite-bg span:nth-child(3) {
    width: 12px;
    height: 12px;
    right: 9%;
    bottom: 28%;
    animation-delay: -4s;
}

.tentang-elite-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 42px;
    align-items: center;
}

.tentang-elite-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    backdrop-filter: blur(12px);
    font-size: .78rem;
    font-weight: 900;
}

.tentang-elite-copy h1 {
    max-width: 860px;
    margin: 20px 0 18px;
    color: #fff;
    font-size: clamp(2.65rem, 5.3vw, 5.45rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: 0;
    text-shadow: 0 18px 44px rgba(0,0,0,.34);
}

.tentang-elite-copy p {
    max-width: 720px;
    margin: 0;
    color: rgba(239,248,255,.88);
    font-size: 1.08rem;
    line-height: 1.85;
}

.tentang-elite-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.tentang-elite-actions a,
.tentang-contact-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 52px;
    padding: 13px 18px;
    color: #082646;
    background: linear-gradient(135deg, #fff, #dff3ff);
    border-radius: 16px;
    box-shadow: 0 18px 38px rgba(2,14,27,.22);
    font-size: .86rem;
    font-weight: 900;
    text-decoration: none;
}

.tentang-elite-actions a:nth-child(2) {
    color: #fff;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.26);
    backdrop-filter: blur(12px);
}

.tentang-kadis-card {
    position: relative;
    overflow: hidden;
    padding: 14px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 30px;
    box-shadow: 0 34px 84px rgba(2,14,27,.28);
    backdrop-filter: blur(16px);
}

.tentang-kadis-photo {
    position: relative;
    overflow: hidden;
    min-height: 470px;
    border-radius: 23px;
    background: rgba(255,255,255,.12);
}

.tentang-kadis-photo img,
.tentang-kadis-empty {
    width: 100%;
    height: 470px;
    object-fit: cover;
}

.tentang-kadis-empty {
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 5rem;
}

.tentang-kadis-info {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    padding: 22px;
    color: #fff;
    background: linear-gradient(0deg, rgba(5,25,50,.92), rgba(15,76,129,.54));
    border-radius: 0 0 23px 23px;
}

.tentang-kadis-info span {
    color: #dff3ff;
    font-size: .72rem;
    font-weight: 900;
}

.tentang-kadis-info h2 {
    margin: 8px 0 5px;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 900;
}

.tentang-kadis-info p {
    margin: 0;
    color: rgba(239,248,255,.82);
    font-size: .9rem;
    line-height: 1.5;
}

.tentang-elite-stats {
    position: relative;
    z-index: 3;
    margin-top: -46px;
}

.tentang-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.tentang-stat-grid div,
.tentang-profile-card,
.tentang-sambutan-card,
.tentang-mission-card,
.tentang-service-grid article,
.tentang-contact-card,
.tentang-map-card {
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(15,76,129,.12);
    border-radius: 24px;
    box-shadow: 0 24px 58px rgba(15,76,129,.12);
}

.tentang-stat-grid div {
    display: grid;
    gap: 7px;
    justify-items: center;
    min-height: 132px;
    padding: 22px 14px;
    text-align: center;
}

.tentang-stat-grid i,
.tentang-service-grid i {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #0f4c81, #4fb0e9);
    border-radius: 17px;
    font-size: 1.45rem;
}

.tentang-stat-grid strong {
    color: #082646;
    font-size: 1.45rem;
    font-weight: 900;
}

.tentang-stat-grid span {
    color: #637b90;
    font-size: .82rem;
    font-weight: 800;
}

.tentang-elite-section {
    padding: 64px 0 0;
}

.tentang-elite-section.soft {
    padding-top: 54px;
}

.tentang-elite-section.contact {
    padding-bottom: 36px;
}

.tentang-profile-layout,
.tentang-vm-grid,
.tentang-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
    gap: 18px;
    align-items: stretch;
}

.tentang-profile-card,
.tentang-sambutan-card,
.tentang-vision-card,
.tentang-mission-card,
.tentang-service-grid article,
.tentang-contact-card {
    padding: 28px;
}

.tentang-profile-card > span,
.tentang-vision-card > span,
.tentang-mission-card > span,
.tentang-contact-card > span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f4c81;
    font-size: .74rem;
    font-weight: 900;
}

.tentang-profile-card h2,
.tentang-vision-card h2,
.tentang-mission-card h2,
.tentang-contact-card h2 {
    margin: 12px 0 14px;
    color: #082646;
    font-size: clamp(1.6rem, 2.7vw, 2.65rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: 0;
}

.tentang-profile-card p,
.tentang-sambutan-card p,
.tentang-vision-card p,
.tentang-mission-copy,
.tentang-service-grid p,
.tentang-contact-card p {
    color: #5c7286;
    line-height: 1.75;
}

.tentang-sambutan-card {
    color: #fff;
    background:
        radial-gradient(circle at 14% 12%, rgba(255,255,255,.22), transparent 32%),
        linear-gradient(135deg, #082646, #0f4c81 70%, #dff3ff 160%);
}

.tentang-sambutan-card > i {
    color: #dff3ff;
    font-size: 3rem;
}

.tentang-sambutan-card h3 {
    margin: 12px 0 12px;
    color: #fff;
    font-size: 1.5rem;
    font-weight: 900;
}

.tentang-sambutan-card p {
    color: rgba(239,248,255,.82);
}

.tentang-vision-card {
    padding: 28px;
    color: #fff;
    background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.22), transparent 30%),
        linear-gradient(135deg, #082646, #0f4c81 70%, #dff3ff 160%);
    border-radius: 24px;
    box-shadow: 0 24px 58px rgba(15,76,129,.15);
}

.tentang-vision-card > span,
.tentang-vision-card h2,
.tentang-vision-card p {
    color: #fff;
}

.tentang-mission-copy ul {
    margin: 0;
    padding-left: 18px;
}

.tentang-service-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.tentang-service-grid article {
    padding: 24px;
    transition: transform .24s ease, box-shadow .24s ease;
}

.tentang-service-grid h3 {
    margin: 16px 0 8px;
    color: #082646;
    font-size: 1.18rem;
    font-weight: 900;
}

.tentang-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.tentang-map-card {
    overflow: hidden;
    min-height: 420px;
}

.tentang-map-card iframe {
    display: block;
    min-height: 420px;
}

.tentang-stat-grid div,
.tentang-kadis-card,
.tentang-service-grid article {
    transition: transform .24s ease, box-shadow .24s ease;
}

.tentang-stat-grid div:hover,
.tentang-kadis-card:hover,
.tentang-service-grid article:hover {
    transform: translateY(-5px);
    box-shadow: 0 30px 68px rgba(15,76,129,.16);
}

@media (max-width: 991.98px) {
    .tentang-elite-grid,
    .tentang-profile-layout,
    .tentang-vm-grid,
    .tentang-contact-grid {
        grid-template-columns: 1fr;
    }

    .tentang-stat-grid,
    .tentang-service-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tentang-kadis-card {
        max-width: 460px;
    }
}

@media (max-width: 767.98px) {
    .tentang-elite-hero {
        min-height: auto;
        padding: 58px 0 72px;
    }

    .tentang-elite-copy h1 {
        font-size: 2.45rem;
    }

    .tentang-stat-grid,
    .tentang-service-grid {
        grid-template-columns: 1fr;
    }

    .tentang-kadis-photo,
    .tentang-kadis-photo img,
    .tentang-kadis-empty {
        height: 390px;
        min-height: 390px;
    }

    .tentang-profile-card,
    .tentang-sambutan-card,
    .tentang-vision-card,
    .tentang-mission-card,
    .tentang-contact-card {
        padding: 22px;
    }
}

/* Kegiatan elite page */
.kegiatan-elite-page {
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 10%, rgba(91,178,231,.16), transparent 30%),
        linear-gradient(135deg, #eef8ff 0%, #ffffff 48%, #f4fbff 100%);
}

.kegiatan-elite-hero {
    position: relative;
    overflow: hidden;
    min-height: 560px;
    display: flex;
    align-items: end;
    padding: 80px 0 70px;
    color: #fff;
    background:
        linear-gradient(115deg, #06182f 0%, #0f4c81 58%, #eaf8ff 155%);
}

.kegiatan-elite-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.18), transparent 30%),
        radial-gradient(circle at 86% 16%, rgba(115,189,233,.22), transparent 28%),
        linear-gradient(90deg, rgba(5,25,50,.88), rgba(15,76,129,.56), rgba(255,255,255,.08)),
        repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 116px);
    pointer-events: none;
}

.kegiatan-elite-bg span {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: rgba(255,255,255,.46);
    box-shadow: 0 0 34px rgba(115,189,233,.62);
    animation: pengaduanFloatLight 8s ease-in-out infinite;
}

.kegiatan-elite-bg span:nth-child(1) {
    width: 16px;
    height: 16px;
    left: 8%;
    top: 34%;
}

.kegiatan-elite-bg span:nth-child(2) {
    width: 22px;
    height: 22px;
    right: 18%;
    top: 25%;
    animation-delay: -2s;
}

.kegiatan-elite-bg span:nth-child(3) {
    width: 12px;
    height: 12px;
    right: 9%;
    bottom: 28%;
    animation-delay: -4s;
}

.kegiatan-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 34px;
    align-items: end;
}

.kegiatan-breadcrumb {
    margin-bottom: 14px;
}

.kegiatan-breadcrumb a,
.kegiatan-breadcrumb .active {
    color: rgba(255,255,255,.78);
    text-decoration: none;
}

.kegiatan-elite-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    backdrop-filter: blur(12px);
    font-size: .78rem;
    font-weight: 900;
}

.kegiatan-hero-grid h1 {
    max-width: 850px;
    margin: 20px 0 16px;
    color: #fff;
    font-size: clamp(2.55rem, 5.2vw, 5.2rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: 0;
    text-shadow: 0 18px 44px rgba(0,0,0,.34);
}

.kegiatan-hero-grid p {
    max-width: 720px;
    margin: 0;
    color: rgba(239,248,255,.88);
    font-size: 1.06rem;
    line-height: 1.85;
}

.kegiatan-elite-search {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    min-height: 62px;
    padding: 8px;
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 20px;
    box-shadow: 0 24px 54px rgba(2,14,27,.22);
    backdrop-filter: blur(14px);
}

.kegiatan-elite-search i {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    color: #082646;
    background: #fff;
    border-radius: 14px;
}

.kegiatan-elite-search input {
    width: 100%;
    color: #fff;
    background: transparent;
    border: 0;
    outline: 0;
    font-weight: 800;
}

.kegiatan-elite-search input::placeholder {
    color: rgba(255,255,255,.72);
}

.kegiatan-elite-search button {
    min-height: 42px;
    padding: 0 15px;
    color: #082646;
    background: linear-gradient(135deg, #fff, #dff3ff);
    border: 0;
    border-radius: 14px;
    font-size: .82rem;
    font-weight: 900;
}

.kegiatan-elite-section {
    padding: 64px 0;
}

.kegiatan-feature-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 16px;
    padding: 14px;
    overflow: hidden;
    background:
        radial-gradient(circle at 14% 12%, rgba(91,178,231,.20), transparent 32%),
        linear-gradient(135deg, rgba(255,255,255,.90), rgba(235,248,255,.80));
    border: 1px solid rgba(15,76,129,.12);
    border-radius: 28px;
    box-shadow: 0 30px 74px rgba(15,76,129,.14);
}

.kegiatan-feature-elite,
.kegiatan-side-item,
.kegiatan-elite-card {
    position: relative;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    border-radius: 22px;
    transition: transform .25s ease, box-shadow .25s ease;
}

.kegiatan-feature-elite {
    min-height: 520px;
    color: #fff;
    background: #082646;
}

.kegiatan-feature-elite::after,
.kegiatan-side-item::after,
.kegiatan-elite-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(5,25,50,.90), rgba(15,76,129,.20) 62%, rgba(255,255,255,.02)),
        radial-gradient(circle at 82% 18%, rgba(255,255,255,.18), transparent 26%);
}

.kegiatan-feature-elite img,
.kegiatan-side-item img,
.kegiatan-elite-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .86;
    transition: transform .38s ease;
}

.kegiatan-feature-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    max-width: 760px;
    padding: 36px;
}

.kegiatan-feature-content span,
.kegiatan-side-head span,
.kegiatan-side-item span,
.kegiatan-section-head span,
.kegiatan-elite-card span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #dff3ff;
    font-size: .72rem;
    font-weight: 900;
}

.kegiatan-feature-content h2 {
    margin: 12px 0 10px;
    color: #fff;
    font-size: clamp(1.9rem, 3.6vw, 3.3rem);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: 0;
}

.kegiatan-feature-content p {
    max-width: 650px;
    margin: 0 0 14px;
    color: rgba(239,248,255,.84);
    line-height: 1.7;
}

.kegiatan-feature-content small {
    color: rgba(239,248,255,.78);
    font-weight: 900;
}

.kegiatan-side-elite {
    display: grid;
    gap: 12px;
}

.kegiatan-side-head {
    padding: 16px;
    color: #0b2f54;
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(15,76,129,.10);
    border-radius: 20px;
}

.kegiatan-side-head span {
    color: #0f4c81;
}

.kegiatan-side-head strong {
    display: block;
    margin-top: 4px;
    color: #082646;
    font-size: 1.35rem;
    font-weight: 900;
}

.kegiatan-side-item {
    min-height: 138px;
    color: #fff;
    background: #082646;
}

.kegiatan-side-item div,
.kegiatan-elite-card div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 18px;
}

.kegiatan-side-item h3,
.kegiatan-elite-card h3 {
    display: -webkit-box;
    margin: 7px 0 0;
    overflow: hidden;
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.kegiatan-section-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    margin: 42px 0 16px;
}

.kegiatan-section-head span {
    color: #0f4c81;
}

.kegiatan-section-head h2 {
    margin: 7px 0 0;
    color: #082646;
    font-size: clamp(1.55rem, 2.7vw, 2.55rem);
    font-weight: 900;
    letter-spacing: 0;
}

.kegiatan-elite-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.kegiatan-elite-card {
    min-height: 330px;
    color: #fff;
    background: #082646;
    box-shadow: 0 22px 52px rgba(15,76,129,.13);
}

.kegiatan-elite-card p {
    display: -webkit-box;
    margin: 8px 0 0;
    overflow: hidden;
    color: rgba(239,248,255,.78);
    font-size: .86rem;
    line-height: 1.55;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.kegiatan-feature-elite:hover,
.kegiatan-side-item:hover,
.kegiatan-elite-card:hover {
    color: inherit;
    transform: translateY(-5px);
    box-shadow: 0 30px 68px rgba(15,76,129,.18);
}

.kegiatan-feature-elite:hover img,
.kegiatan-side-item:hover img,
.kegiatan-elite-card:hover img {
    transform: scale(1.06);
}

.kegiatan-empty-state {
    padding: 54px 24px;
    text-align: center;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(15,76,129,.12);
    border-radius: 26px;
    box-shadow: 0 24px 58px rgba(15,76,129,.12);
}

.kegiatan-empty-state i {
    color: #0f4c81;
    font-size: 3rem;
}

.kegiatan-empty-state h2 {
    margin: 14px 0 8px;
    color: #082646;
    font-weight: 900;
}

.kegiatan-empty-state p {
    margin: 0;
    color: #637b90;
}

@media (max-width: 991.98px) {
    .kegiatan-hero-grid,
    .kegiatan-feature-layout {
        grid-template-columns: 1fr;
    }

    .kegiatan-elite-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .kegiatan-elite-hero {
        min-height: auto;
        padding: 58px 0;
    }

    .kegiatan-hero-grid h1 {
        font-size: 2.35rem;
    }

    .kegiatan-elite-search {
        grid-template-columns: 42px minmax(0, 1fr);
    }

    .kegiatan-elite-search button {
        grid-column: 1 / -1;
    }

    .kegiatan-feature-elite {
        min-height: 420px;
    }

    .kegiatan-feature-content {
        padding: 24px;
    }

    .kegiatan-elite-grid {
        grid-template-columns: 1fr;
    }
}

/* Detail kegiatan premium */
.detail-kegiatan-page {
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 10%, rgba(91,178,231,.16), transparent 30%),
        linear-gradient(135deg, #eef8ff 0%, #ffffff 48%, #f4fbff 100%);
}

.detail-kegiatan-hero {
    position: relative;
    overflow: hidden;
    min-height: 560px;
    display: flex;
    align-items: end;
    padding: 76px 0 64px;
    color: #fff;
}

.detail-kegiatan-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.detail-kegiatan-bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.05) contrast(1.05);
}

.detail-kegiatan-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5,25,50,.94), rgba(15,76,129,.64), rgba(255,255,255,.10)),
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.20), transparent 28%);
}

.detail-kegiatan-bg span {
    position: absolute;
    z-index: 1;
    display: block;
    border-radius: 50%;
    background: rgba(255,255,255,.48);
    box-shadow: 0 0 34px rgba(115,189,233,.68);
    animation: pengaduanFloatLight 8s ease-in-out infinite;
}

.detail-kegiatan-bg span:nth-child(2) {
    width: 18px;
    height: 18px;
    left: 8%;
    top: 32%;
}

.detail-kegiatan-bg span:nth-child(3) {
    width: 24px;
    height: 24px;
    right: 18%;
    top: 26%;
    animation-delay: -2s;
}

.detail-kegiatan-hero .container {
    position: relative;
    z-index: 2;
}

.detail-breadcrumb a,
.detail-breadcrumb .active {
    color: rgba(255,255,255,.78);
    text-decoration: none;
}

.detail-hero-content {
    max-width: 930px;
}

.detail-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    backdrop-filter: blur(12px);
    font-size: .78rem;
    font-weight: 900;
}

.detail-hero-content h1 {
    margin: 20px 0 18px;
    color: #fff;
    font-size: clamp(2.25rem, 4.6vw, 4.75rem);
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: 0;
    text-shadow: 0 18px 44px rgba(0,0,0,.38);
}

.detail-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.detail-meta-row span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 13px;
    color: #0b2f54;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 900;
}

.detail-kegiatan-section {
    padding: 64px 0;
}

.detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 18px;
    align-items: start;
}

.detail-article-card,
.detail-side-card,
.detail-side-cta {
    background: rgba(255,255,255,.90);
    border: 1px solid rgba(15,76,129,.12);
    border-radius: 26px;
    box-shadow: 0 26px 64px rgba(15,76,129,.13);
}

.detail-article-card {
    overflow: hidden;
    padding: 18px;
}

.detail-main-image {
    display: block;
    width: 100%;
    height: 520px;
    object-fit: cover;
    border-radius: 22px;
}

.detail-info-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 16px 0;
}

.detail-info-grid div {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 14px;
    background: #f4fbff;
    border: 1px solid rgba(15,76,129,.10);
    border-radius: 18px;
}

.detail-info-grid i {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #0f4c81, #4fb0e9);
    border-radius: 15px;
}

.detail-info-grid span {
    display: block;
    color: #637b90;
    font-size: .72rem;
    font-weight: 900;
}

.detail-info-grid strong {
    display: block;
    color: #0b2f54;
    font-weight: 900;
}

.detail-story {
    padding: 10px 8px 8px;
}

.detail-story h2 {
    margin: 8px 0 18px;
    color: #082646;
    font-size: clamp(1.55rem, 2.7vw, 2.4rem);
    font-weight: 900;
    letter-spacing: 0;
}

.detail-story p {
    color: #40596e;
    font-size: 1.02rem;
    line-height: 1.95;
}

.detail-read-also {
    margin: 28px 0;
    padding: 18px;
    background:
        radial-gradient(circle at 14% 12%, rgba(91,178,231,.22), transparent 32%),
        linear-gradient(135deg, #082646, #0f4c81 72%, #dff3ff 160%);
    border-radius: 24px;
    box-shadow: 0 24px 58px rgba(8,38,70,.18);
}

.detail-read-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.detail-read-head span {
    color: #dff3ff;
    font-size: .72rem;
    font-weight: 900;
}

.detail-read-head h3 {
    margin: 4px 0 0;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 900;
}

.detail-read-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.detail-read-grid a {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 112px;
    padding: 10px;
    color: #0b2f54;
    text-decoration: none;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 18px;
    transition: transform .24s ease, box-shadow .24s ease;
}

.detail-read-grid img {
    width: 112px;
    height: 92px;
    object-fit: cover;
    border-radius: 14px;
}

.detail-read-grid span {
    display: block;
    color: #0f4c81;
    font-size: .68rem;
    font-weight: 900;
}

.detail-read-grid strong {
    display: -webkit-box;
    margin-top: 5px;
    overflow: hidden;
    color: #0b2f54;
    font-size: .92rem;
    font-weight: 900;
    line-height: 1.32;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.detail-sidebar {
    position: sticky;
    top: 96px;
    display: grid;
    gap: 16px;
}

.detail-side-card,
.detail-side-cta {
    padding: 18px;
}

.detail-side-card > span {
    color: #0f4c81;
    font-size: .72rem;
    font-weight: 900;
}

.detail-side-card h3,
.detail-side-cta h3 {
    margin: 8px 0 14px;
    color: #082646;
    font-size: 1.35rem;
    font-weight: 900;
}

.detail-side-list {
    display: grid;
    gap: 10px;
}

.detail-side-list a {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    color: #0b2f54;
    text-decoration: none;
    padding: 9px;
    background: #f4fbff;
    border: 1px solid rgba(15,76,129,.10);
    border-radius: 16px;
    transition: transform .22s ease, box-shadow .22s ease;
}

.detail-side-list img {
    width: 86px;
    height: 70px;
    object-fit: cover;
    border-radius: 12px;
}

.detail-side-list small {
    color: #0f4c81;
    font-weight: 900;
}

.detail-side-list strong {
    display: -webkit-box;
    margin-top: 4px;
    overflow: hidden;
    color: #0b2f54;
    font-size: .86rem;
    font-weight: 900;
    line-height: 1.32;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.detail-side-cta {
    color: #fff;
    background:
        radial-gradient(circle at 14% 12%, rgba(255,255,255,.22), transparent 32%),
        linear-gradient(135deg, #082646, #0f4c81 72%, #dff3ff 160%);
}

.detail-side-cta > i {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    color: #082646;
    background: #fff;
    border-radius: 17px;
    font-size: 1.45rem;
}

.detail-side-cta h3 {
    color: #fff;
}

.detail-side-cta p {
    color: rgba(239,248,255,.82);
    line-height: 1.65;
}

.detail-side-cta a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #082646;
    background: linear-gradient(135deg, #fff, #dff3ff);
    border-radius: 14px;
    padding: 11px 14px;
    text-decoration: none;
    font-size: .8rem;
    font-weight: 900;
}

.detail-read-grid a:hover,
.detail-side-list a:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 38px rgba(15,76,129,.14);
}

@media (max-width: 991.98px) {
    .detail-layout {
        grid-template-columns: 1fr;
    }

    .detail-sidebar {
        position: static;
    }
}

@media (max-width: 767.98px) {
    .detail-kegiatan-hero {
        min-height: auto;
        padding: 58px 0;
    }

    .detail-hero-content h1 {
        font-size: 2.15rem;
    }

    .detail-main-image {
        height: 330px;
    }

    .detail-info-grid,
    .detail-read-grid {
        grid-template-columns: 1fr;
    }
}

/* Galeri art page */
.galeri-art-page {
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 10%, rgba(91,178,231,.16), transparent 30%),
        linear-gradient(135deg, #eef8ff 0%, #ffffff 48%, #f4fbff 100%);
}

.galeri-art-hero {
    position: relative;
    overflow: hidden;
    min-height: 620px;
    display: flex;
    align-items: end;
    padding: 82px 0 74px;
    color: #fff;
}

.galeri-art-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #06182f, #0f4c81);
    pointer-events: none;
}

.galeri-art-bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .58;
    filter: saturate(1.08) contrast(1.04);
}

.galeri-art-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(5,25,50,.94), rgba(15,76,129,.58), rgba(255,255,255,.08)),
        radial-gradient(circle at 18% 18%, rgba(255,255,255,.20), transparent 28%),
        repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 1px, transparent 1px 116px);
}

.galeri-art-bg span {
    position: absolute;
    z-index: 1;
    display: block;
    border-radius: 50%;
    background: rgba(255,255,255,.48);
    box-shadow: 0 0 34px rgba(115,189,233,.68);
    animation: pengaduanFloatLight 8s ease-in-out infinite;
}

.galeri-art-bg span:nth-child(2) {
    width: 18px;
    height: 18px;
    left: 8%;
    top: 34%;
}

.galeri-art-bg span:nth-child(3) {
    width: 24px;
    height: 24px;
    right: 16%;
    top: 28%;
    animation-delay: -2s;
}

.galeri-art-hero-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 34px;
    align-items: end;
}

.galeri-art-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: rgba(255,255,255,.75);
}

.galeri-art-breadcrumb a {
    color: rgba(255,255,255,.82);
    text-decoration: none;
}

.galeri-art-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 14px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 999px;
    backdrop-filter: blur(12px);
    font-size: .78rem;
    font-weight: 900;
}

.galeri-art-hero h1 {
    max-width: 860px;
    margin: 20px 0 16px;
    color: #fff;
    font-size: clamp(2.55rem, 5.2vw, 5.2rem);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: 0;
    text-shadow: 0 18px 44px rgba(0,0,0,.34);
}

.galeri-art-hero p {
    max-width: 720px;
    margin: 0;
    color: rgba(239,248,255,.88);
    font-size: 1.06rem;
    line-height: 1.85;
}

.galeri-art-stats {
    display: grid;
    gap: 12px;
}

.galeri-art-stats div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 78px;
    padding: 16px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 20px;
    box-shadow: 0 20px 44px rgba(2,14,27,.18);
    backdrop-filter: blur(14px);
}

.galeri-art-stats strong {
    color: #fff;
    font-size: 1.6rem;
    font-weight: 900;
}

.galeri-art-stats span {
    color: #dff3ff;
    font-size: .76rem;
    font-weight: 900;
}

.galeri-art-search-section {
    position: relative;
    z-index: 3;
    margin-top: -35px;
}

.galeri-art-search {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    min-height: 72px;
    padding: 10px;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(15,76,129,.12);
    border-radius: 22px;
    box-shadow: 0 24px 58px rgba(15,76,129,.14);
}

.galeri-art-search i {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    color: #fff;
    background: linear-gradient(135deg, #0f4c81, #4fb0e9);
    border-radius: 15px;
}

.galeri-art-search input {
    width: 100%;
    color: #0b2f54;
    border: 0;
    outline: 0;
    font-weight: 800;
}

.galeri-art-search button {
    min-height: 46px;
    padding: 0 18px;
    color: #fff;
    background: linear-gradient(135deg, #0f4c81, #4fb0e9);
    border: 0;
    border-radius: 15px;
    font-size: .84rem;
    font-weight: 900;
}

.galeri-art-section {
    padding: 58px 0 70px;
}

.galeri-art-head {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.galeri-art-head span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f4c81;
    font-size: .76rem;
    font-weight: 900;
}

.galeri-art-head h2 {
    margin: 8px 0 7px;
    color: #082646;
    font-size: clamp(1.75rem, 3vw, 3rem);
    font-weight: 900;
    letter-spacing: 0;
}

.galeri-art-head p {
    max-width: 700px;
    margin: 0;
    color: #637b90;
    line-height: 1.65;
}

.galeri-art-head strong {
    display: inline-flex;
    padding: 10px 14px;
    color: #0f4c81;
    background: #eef8ff;
    border: 1px solid rgba(15,76,129,.12);
    border-radius: 999px;
    font-size: .84rem;
}

.galeri-art-masonry {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-auto-flow: dense;
    gap: 14px;
}

.galeri-art-card {
    position: relative;
    overflow: hidden;
    display: block;
    min-height: 300px;
    padding: 0;
    color: #fff;
    text-align: left;
    background: #082646;
    border: 0;
    border-radius: 24px;
    box-shadow: 0 22px 52px rgba(15,76,129,.13);
    cursor: pointer;
    transition: transform .26s ease, box-shadow .26s ease;
}

.galeri-art-card.is-featured {
    grid-column: span 2;
    grid-row: span 2;
    min-height: 616px;
}

.galeri-art-card:nth-child(5n) {
    min-height: 390px;
}

.galeri-art-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(5,25,50,.90), rgba(15,76,129,.18) 62%, rgba(255,255,255,.02)),
        radial-gradient(circle at 82% 18%, rgba(255,255,255,.18), transparent 26%);
}

.galeri-art-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .88;
    transition: transform .38s ease;
}

.galeri-art-card div {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 20px;
}

.galeri-art-card span {
    display: inline-flex;
    padding: 7px 10px;
    color: #082646;
    background: rgba(255,255,255,.88);
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 900;
}

.galeri-art-card h3 {
    display: -webkit-box;
    margin: 11px 0 8px;
    overflow: hidden;
    color: #fff;
    font-size: 1.15rem;
    font-weight: 900;
    line-height: 1.28;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.galeri-art-card.is-featured h3 {
    font-size: clamp(1.8rem, 3vw, 2.8rem);
}

.galeri-art-card small {
    color: rgba(239,248,255,.78);
    font-weight: 900;
}

.galeri-art-card:hover {
    transform: translateY(-6px) rotate(-.35deg);
    box-shadow: 0 32px 72px rgba(15,76,129,.20);
}

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

.galeri-art-empty {
    padding: 54px 24px;
    text-align: center;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(15,76,129,.12);
    border-radius: 26px;
    box-shadow: 0 24px 58px rgba(15,76,129,.12);
}

.galeri-art-empty i {
    color: #0f4c81;
    font-size: 3rem;
}

.gallery-art-modal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(15,76,129,.12);
    border-radius: 28px;
    box-shadow: 0 34px 90px rgba(6,24,47,.28);
}

.gallery-art-modal-image img {
    display: block;
    width: 100%;
    height: 78vh;
    min-height: 520px;
    object-fit: cover;
}

.gallery-art-modal-info {
    padding: 28px;
    background:
        radial-gradient(circle at 14% 12%, rgba(91,178,231,.16), transparent 30%),
        linear-gradient(135deg, #f8fcff, #ffffff);
}

.gallery-art-modal-info > span {
    color: #0f4c81;
    font-size: .76rem;
    font-weight: 900;
}

.gallery-art-modal-info h3 {
    margin: 12px 0 20px;
    color: #082646;
    font-size: 1.65rem;
    font-weight: 900;
    line-height: 1.18;
}

.gallery-art-modal-list {
    display: grid;
    gap: 12px;
}

.gallery-art-modal-list div {
    padding: 14px;
    background: #eef8ff;
    border: 1px solid rgba(15,76,129,.10);
    border-radius: 16px;
}

.gallery-art-modal-list strong {
    color: #0f4c81;
    font-size: .74rem;
    font-weight: 900;
}

.gallery-art-modal-list p {
    margin: 4px 0 0;
    color: #0b2f54;
    font-weight: 800;
}

.gallery-art-modal-info button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    min-height: 50px;
    margin-top: 18px;
    color: #fff;
    background: linear-gradient(135deg, #0f4c81, #4fb0e9);
    border: 0;
    border-radius: 15px;
    font-weight: 900;
}

@media (max-width: 991.98px) {
    .galeri-art-hero-grid,
    .gallery-art-modal {
        grid-template-columns: 1fr;
    }

    .galeri-art-masonry {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .galeri-art-card.is-featured {
        min-height: 430px;
    }

    .gallery-art-modal-image img {
        height: 55vh;
        min-height: 360px;
    }
}

@media (max-width: 767.98px) {
    .galeri-art-hero {
        min-height: auto;
        padding: 58px 0 78px;
    }

    .galeri-art-hero h1 {
        font-size: 2.35rem;
    }

    .galeri-art-stats,
    .galeri-art-masonry {
        grid-template-columns: 1fr;
    }

    .galeri-art-search {
        grid-template-columns: 46px minmax(0, 1fr);
    }

    .galeri-art-search button {
        grid-column: 1 / -1;
    }

    .galeri-art-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .galeri-art-card,
    .galeri-art-card.is-featured {
        grid-column: auto;
        grid-row: auto;
        min-height: 360px;
    }
}

/* Video studio page */
.video-studio-page {
    overflow: hidden;
    color: #0a2748;
    background:
        radial-gradient(circle at 8% 4%, rgba(61, 152, 219, .22), transparent 32%),
        linear-gradient(180deg, #f5fbff 0%, #ffffff 36%, #eef7ff 100%);
}

.video-studio-hero {
    position: relative;
    padding: 56px 0 34px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(4, 24, 48, .96), rgba(10, 67, 118, .92) 52%, rgba(255, 255, 255, .92)),
        radial-gradient(circle at 78% 16%, rgba(79, 176, 233, .38), transparent 28%);
}

.video-studio-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(90deg, #000, transparent 78%);
    opacity: .34;
}

.video-studio-glow {
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 999px;
    filter: blur(18px);
    pointer-events: none;
    animation: videoFloatGlow 7s ease-in-out infinite;
}

.video-studio-glow-one {
    left: 7%;
    top: 10%;
    background: rgba(79,176,233,.24);
}

.video-studio-glow-two {
    right: 12%;
    bottom: 4%;
    background: rgba(255,255,255,.34);
    animation-delay: -2s;
}

@keyframes videoFloatGlow {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }
    50% {
        transform: translate3d(18px, -14px, 0) scale(1.06);
    }
}

.video-studio-hero .container {
    position: relative;
    z-index: 2;
}

.video-studio-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    color: rgba(255,255,255,.72);
    font-weight: 800;
}

.video-studio-breadcrumb a {
    color: #fff;
    text-decoration: none;
}

.video-studio-breadcrumb strong {
    color: #d9f2ff;
}

.video-studio-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(390px, 520px);
    align-items: center;
    gap: 34px;
}

.video-studio-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px;
    color: #082646;
    background: rgba(255,255,255,.86);
    border: 1px solid rgba(255,255,255,.62);
    border-radius: 999px;
    box-shadow: 0 14px 34px rgba(2,22,43,.16);
    font-size: .76rem;
    font-weight: 900;
}

.video-studio-kicker i {
    color: #e5212e;
    font-size: 1.05rem;
}

.video-studio-copy h1 {
    max-width: 820px;
    margin: 16px 0 14px;
    color: #fff;
    font-size: clamp(2.15rem, 4.2vw, 4.25rem);
    font-weight: 950;
    line-height: 1.02;
}

.video-studio-copy p {
    max-width: 720px;
    margin: 0;
    color: rgba(239,248,255,.82);
    font-size: 1.03rem;
    line-height: 1.8;
}

.video-studio-search {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr) 96px;
    align-items: center;
    max-width: 680px;
    min-height: 58px;
    margin-top: 24px;
    overflow: hidden;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 999px;
    box-shadow: 0 22px 54px rgba(3,21,40,.20);
}

.video-studio-search i {
    color: #0f4c81;
    text-align: center;
    font-size: 1.1rem;
}

.video-studio-search input {
    width: 100%;
    min-width: 0;
    color: #082646;
    background: transparent;
    border: 0;
    outline: 0;
    font-weight: 800;
}

.video-studio-search button {
    align-self: stretch;
    color: #fff;
    background: linear-gradient(135deg, #0f4c81, #4fb0e9);
    border: 0;
    font-weight: 900;
}

.video-studio-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.video-studio-stats div {
    min-width: 126px;
    padding: 13px 16px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 18px;
    backdrop-filter: blur(12px);
}

.video-studio-stats strong,
.video-studio-stats span {
    display: block;
}

.video-studio-stats strong {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 950;
}

.video-studio-stats span {
    color: rgba(239,248,255,.76);
    font-size: .78rem;
    font-weight: 850;
}

.video-feature-card {
    position: relative;
}

.video-feature-card::before {
    content: "";
    position: absolute;
    inset: -1px;
    background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(79,176,233,.35), rgba(229,33,46,.18));
    border-radius: 30px;
    transform: rotate(-1.2deg);
}

.video-feature-card button,
.video-feature-empty {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
    color: #fff;
    text-align: left;
    background: #061b33;
    border: 0;
    border-radius: 28px;
    box-shadow: 0 34px 82px rgba(2,16,31,.30);
}

.video-feature-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    min-height: 330px;
    overflow: hidden;
}

.video-feature-media img,
.video-card-thumb img,
.video-playlist-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-feature-media img {
    display: block;
    transition: transform .4s ease;
}

.video-feature-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(2,15,31,.88), rgba(2,15,31,.08) 56%),
        radial-gradient(circle at 86% 14%, rgba(255,255,255,.24), transparent 26%);
}

.video-play-circle {
    position: absolute;
    left: 24px;
    bottom: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    color: #fff;
    background: linear-gradient(135deg, #e5212e, #ff6b6b);
    border: 5px solid rgba(255,255,255,.24);
    border-radius: 999px;
    box-shadow: 0 18px 44px rgba(229,33,46,.30);
    font-size: 2rem;
}

.video-feature-label {
    position: absolute;
    top: 18px;
    left: 18px;
    padding: 8px 11px;
    color: #082646;
    background: rgba(255,255,255,.90);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 950;
}

.video-feature-info {
    display: block;
    padding: 20px 22px 24px;
}

.video-feature-info small {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(239,248,255,.72);
    font-weight: 850;
}

.video-feature-info strong {
    display: -webkit-box;
    margin-top: 9px;
    overflow: hidden;
    color: #fff;
    font-size: 1.35rem;
    font-weight: 950;
    line-height: 1.25;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.video-feature-card button:hover .video-feature-media img {
    transform: scale(1.06);
}

.video-feature-empty {
    min-height: 360px;
    padding: 44px;
}

.video-feature-empty i {
    color: #4fb0e9;
    font-size: 3.3rem;
}

.video-feature-empty h2 {
    margin: 18px 0 8px;
    color: #fff;
    font-weight: 950;
}

.video-feature-empty p {
    color: rgba(239,248,255,.76);
}

.video-watch-section {
    padding: 34px 0 82px;
}

.video-watch-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 18px;
    align-items: start;
}

.video-main-board,
.video-playlist-panel {
    background: rgba(255,255,255,.82);
    border: 1px solid rgba(15,76,129,.11);
    border-radius: 28px;
    box-shadow: 0 26px 64px rgba(15,76,129,.12);
}

.video-main-board {
    padding: 18px;
}

.video-section-title,
.video-playlist-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.video-section-title span:first-child,
.video-playlist-head span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f4c81;
    font-size: .76rem;
    font-weight: 950;
}

.video-section-title h2 {
    margin: 5px 0 0;
    color: #082646;
    font-size: 1.45rem;
    font-weight: 950;
}

#videoCounter,
.video-playlist-head strong {
    flex: 0 0 auto;
    padding: 8px 11px;
    color: #fff;
    background: linear-gradient(135deg, #0f4c81, #4fb0e9);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 950;
}

.video-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.video-studio-card {
    overflow: hidden;
    background: #fff;
    border: 1px solid rgba(15,76,129,.10);
    border-radius: 22px;
    box-shadow: 0 16px 36px rgba(15,76,129,.10);
    transition: transform .24s ease, box-shadow .24s ease;
}

.video-studio-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 54px rgba(15,76,129,.16);
}

.video-card-thumb {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    padding: 0;
    background: #061b33;
    border: 0;
}

.video-card-thumb::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(2,15,31,.50), transparent 58%);
}

.video-card-play {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    color: #fff;
    background: rgba(229,33,46,.95);
    border-radius: 999px;
    font-size: 1.35rem;
}

.video-card-number {
    position: absolute;
    right: 12px;
    top: 12px;
    z-index: 2;
    padding: 6px 9px;
    color: #fff;
    background: rgba(2,15,31,.72);
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 950;
}

.video-card-body {
    padding: 15px;
}

.video-card-body small {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: #3e6688;
    font-size: .74rem;
    font-weight: 850;
}

.video-card-body h3 {
    display: -webkit-box;
    min-height: 52px;
    margin: 8px 0 13px;
    overflow: hidden;
    color: #082646;
    font-size: .98rem;
    font-weight: 950;
    line-height: 1.32;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.video-watch-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    color: #0f4c81;
    background: #eef8ff;
    border: 1px solid rgba(15,76,129,.12);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 950;
}

.video-playlist-panel {
    position: sticky;
    top: 96px;
    overflow: hidden;
    padding: 16px;
    background:
        radial-gradient(circle at 10% 0%, rgba(79,176,233,.18), transparent 28%),
        linear-gradient(180deg, #ffffff, #eef8ff);
}

.video-playlist-list {
    display: grid;
    gap: 10px;
    max-height: 690px;
    overflow: auto;
    padding-right: 4px;
}

.video-playlist-item {
    display: grid;
    grid-template-columns: 26px 88px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px;
    color: #082646;
    text-align: left;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(15,76,129,.10);
    border-radius: 17px;
    transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
}

.video-playlist-item:hover {
    transform: translateX(-3px);
    background: #fff;
    box-shadow: 0 16px 34px rgba(15,76,129,.13);
}

.video-playlist-number {
    color: #0f4c81;
    font-size: .8rem;
    font-weight: 950;
    text-align: center;
}

.video-playlist-thumb {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    color: #fff;
    background: #082646;
    border-radius: 12px;
}

.video-playlist-text {
    min-width: 0;
}

.video-playlist-text strong {
    display: -webkit-box;
    overflow: hidden;
    color: #082646;
    font-size: .82rem;
    font-weight: 950;
    line-height: 1.3;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.video-playlist-text small {
    display: block;
    margin-top: 4px;
    color: #5d7d98;
    font-size: .72rem;
    font-weight: 850;
}

.video-thumb-fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: #bce7ff;
    background:
        radial-gradient(circle at 28% 22%, rgba(79,176,233,.26), transparent 34%),
        linear-gradient(135deg, #061b33, #0f4c81);
    font-size: 2.2rem;
}

.video-empty-state {
    margin-top: 18px;
    padding: 42px 18px;
    text-align: center;
    background: #fff;
    border: 1px solid rgba(15,76,129,.10);
    border-radius: 22px;
}

.video-empty-state i {
    color: #0f4c81;
    font-size: 2.8rem;
}

.video-empty-state h3 {
    margin: 12px 0 6px;
    color: #082646;
    font-weight: 950;
}

.video-empty-state p {
    margin: 0;
    color: #54728e;
    font-weight: 750;
}

.video-studio-modal {
    overflow: hidden;
    background: #061b33;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 24px;
    box-shadow: 0 34px 90px rgba(2,16,31,.36);
}

.video-studio-modal .modal-header {
    color: #fff;
    background:
        radial-gradient(circle at 12% 0%, rgba(79,176,233,.30), transparent 34%),
        linear-gradient(135deg, #061b33, #0f4c81);
    border: 0;
}

.video-studio-modal .modal-title {
    font-weight: 950;
}

@media (max-width: 1199.98px) {
    .video-studio-hero-grid,
    .video-watch-layout {
        grid-template-columns: 1fr;
    }

    .video-playlist-panel {
        position: relative;
        top: auto;
    }
}

@media (max-width: 991.98px) {
    .video-card-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .video-feature-media {
        min-height: 280px;
    }
}

@media (max-width: 767.98px) {
    .video-studio-hero {
        padding: 44px 0 26px;
    }

    .video-studio-copy h1 {
        font-size: 2.25rem;
    }

    .video-studio-hero-grid,
    .video-watch-layout {
        gap: 18px;
    }

    .video-studio-search {
        grid-template-columns: 44px minmax(0, 1fr);
        border-radius: 24px;
    }

    .video-studio-search button {
        grid-column: 1 / -1;
        min-height: 46px;
    }

    .video-card-grid {
        grid-template-columns: 1fr;
    }

    .video-feature-media {
        aspect-ratio: 16 / 12;
        min-height: 250px;
    }

    .video-play-circle {
        width: 60px;
        height: 60px;
        font-size: 1.75rem;
    }

    .video-section-title,
    .video-playlist-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Produk hukum book library */
.hukum-book-page {
    overflow: hidden;
    color: #082646;
    background:
        radial-gradient(circle at 8% 6%, rgba(79,176,233,.20), transparent 32%),
        linear-gradient(180deg, #f4fbff 0%, #ffffff 38%, #eef8ff 100%);
}

.hukum-book-hero {
    position: relative;
    padding: 58px 0 76px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(4,26,52,.96), rgba(12,78,132,.94) 56%, rgba(241,249,255,.92)),
        radial-gradient(circle at 74% 20%, rgba(255,255,255,.32), transparent 27%);
}

.hukum-book-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
    background-size: 48px 48px;
    opacity: .28;
}

.hukum-light {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 999px;
    filter: blur(20px);
    pointer-events: none;
    animation: hukumGlow 7s ease-in-out infinite;
}

.hukum-light-one {
    left: 7%;
    top: 15%;
    background: rgba(79,176,233,.24);
}

.hukum-light-two {
    right: 12%;
    bottom: 12%;
    background: rgba(255,255,255,.34);
    animation-delay: -2s;
}

@keyframes hukumGlow {
    0%, 100% {
        transform: translate3d(0,0,0) scale(1);
    }
    50% {
        transform: translate3d(14px,-18px,0) scale(1.06);
    }
}

.hukum-book-hero .container {
    position: relative;
    z-index: 2;
}

.hukum-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
    color: rgba(239,248,255,.72);
    font-weight: 850;
}

.hukum-breadcrumb a {
    color: #fff;
    text-decoration: none;
}

.hukum-breadcrumb strong {
    color: #dff5ff;
}

.hukum-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 430px;
    align-items: center;
    gap: 44px;
}

.hukum-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 13px;
    color: #082646;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(255,255,255,.60);
    border-radius: 999px;
    box-shadow: 0 16px 36px rgba(2,20,40,.18);
    font-size: .78rem;
    font-weight: 950;
}

.hukum-kicker i {
    color: #0f4c81;
}

.hukum-hero-copy h1 {
    max-width: 780px;
    margin: 16px 0 14px;
    color: #fff;
    font-size: clamp(2.25rem, 4.4vw, 4.45rem);
    font-weight: 950;
    line-height: 1.02;
}

.hukum-hero-copy p {
    max-width: 720px;
    margin: 0;
    color: rgba(239,248,255,.82);
    font-size: 1.04rem;
    line-height: 1.8;
}

.hukum-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 11px;
    margin-top: 24px;
}

.hukum-stat-row div {
    min-width: 128px;
    padding: 14px 17px;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.21);
    border-radius: 18px;
    backdrop-filter: blur(12px);
}

.hukum-stat-row strong,
.hukum-stat-row span {
    display: block;
}

.hukum-stat-row strong {
    color: #fff;
    font-size: 1.45rem;
    font-weight: 950;
}

.hukum-stat-row span {
    color: rgba(239,248,255,.76);
    font-size: .78rem;
    font-weight: 850;
}

.hukum-open-book {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 300px;
    perspective: 1200px;
    filter: drop-shadow(0 34px 62px rgba(2,16,31,.28));
}

.hukum-book-left,
.hukum-book-right {
    position: relative;
    display: flex;
    justify-content: center;
    flex-direction: column;
    min-height: 300px;
    padding: 34px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.26);
}

.hukum-book-left {
    align-items: flex-end;
    text-align: right;
    background:
        linear-gradient(90deg, rgba(0,0,0,.10), transparent 18%),
        linear-gradient(135deg, #f7fbff, #d8eefc);
    border-radius: 24px 8px 8px 24px;
    transform: rotateY(8deg);
}

.hukum-book-right {
    align-items: flex-start;
    background:
        linear-gradient(270deg, rgba(0,0,0,.10), transparent 18%),
        linear-gradient(135deg, #ffffff, #eaf7ff);
    border-radius: 8px 24px 24px 8px;
    transform: rotateY(-8deg);
}

.hukum-book-left span,
.hukum-book-right span {
    color: #0f4c81;
    font-size: .86rem;
    font-weight: 950;
}

.hukum-book-left strong,
.hukum-book-right strong {
    color: #082646;
    font-size: 2.3rem;
    font-weight: 950;
}

.hukum-book-left small {
    color: #486986;
    font-weight: 850;
}

.hukum-book-right i {
    margin-bottom: 16px;
    color: #d91f2b;
    font-size: 4.1rem;
}

.hukum-filter-section {
    position: relative;
    z-index: 4;
    margin-top: -38px;
    padding-bottom: 24px;
}

.hukum-filter-panel {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 230px 170px 150px;
    gap: 12px;
    padding: 14px;
    background: rgba(255,255,255,.90);
    border: 1px solid rgba(15,76,129,.12);
    border-radius: 28px;
    box-shadow: 0 28px 70px rgba(15,76,129,.16);
    backdrop-filter: blur(16px);
}

.hukum-filter-input {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: center;
    min-height: 54px;
    background: #f4fbff;
    border: 1px solid rgba(15,76,129,.10);
    border-radius: 18px;
}

.hukum-filter-input i {
    color: #0f4c81;
    text-align: center;
}

.hukum-filter-input input,
.hukum-filter-panel select {
    width: 100%;
    min-width: 0;
    color: #082646;
    background: #f4fbff;
    border: 1px solid rgba(15,76,129,.10);
    border-radius: 18px;
    outline: 0;
    font-weight: 850;
}

.hukum-filter-input input {
    background: transparent;
    border: 0;
}

.hukum-filter-panel select {
    padding: 0 14px;
}

.hukum-filter-panel button {
    color: #fff;
    background: linear-gradient(135deg, #0f4c81, #4fb0e9);
    border: 0;
    border-radius: 18px;
    font-weight: 950;
}

.hukum-library-section {
    padding: 28px 0 86px;
}

.hukum-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.hukum-section-head span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f4c81;
    font-size: .78rem;
    font-weight: 950;
}

.hukum-section-head h2 {
    margin: 7px 0 7px;
    color: #082646;
    font-size: clamp(1.8rem, 3vw, 2.75rem);
    font-weight: 950;
}

.hukum-section-head p {
    margin: 0;
    color: #52718c;
    font-weight: 750;
}

.hukum-section-head > strong {
    flex: 0 0 auto;
    padding: 10px 13px;
    color: #fff;
    background: linear-gradient(135deg, #0f4c81, #4fb0e9);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 950;
}

.hukum-book-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.hukum-book-card {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .45s ease, transform .45s ease;
}

.hukum-book-card.show {
    opacity: 1;
    transform: translateY(0);
}

.hukum-book-cover {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 390px;
    padding: 24px 22px 22px 36px;
    overflow: hidden;
    color: #fff;
    text-align: left;
    background:
        radial-gradient(circle at 76% 18%, rgba(255,255,255,.22), transparent 27%),
        linear-gradient(135deg, #082646, #0f4c81 58%, #4fb0e9);
    border: 0;
    border-radius: 10px 24px 24px 10px;
    box-shadow: 0 28px 58px rgba(15,76,129,.19);
    transform-style: preserve-3d;
    transition: transform .28s ease, box-shadow .28s ease;
}

.hukum-book-cover::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, rgba(0,0,0,.30), transparent 18%),
        linear-gradient(115deg, transparent 0 44%, rgba(255,255,255,.18) 45%, transparent 54%);
    opacity: .78;
}

.hukum-book-cover::after {
    content: "";
    position: absolute;
    top: 18px;
    right: -16px;
    bottom: 18px;
    width: 36px;
    background: repeating-linear-gradient(180deg, #f8fcff 0 5px, #d9eafa 5px 7px);
    border-radius: 0 14px 14px 0;
    transform: skewY(-2deg);
    opacity: .88;
}

.hukum-book-cover:hover {
    transform: translateY(-8px) rotateY(-7deg);
    box-shadow: 0 38px 78px rgba(15,76,129,.26);
}

.hukum-book-spine {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.24), rgba(0,0,0,.25));
}

.hukum-book-pages {
    position: absolute;
    inset: 18px 16px 18px auto;
    width: 26px;
    background: linear-gradient(90deg, rgba(255,255,255,.88), rgba(235,246,255,.78));
    border-radius: 0 12px 12px 0;
    transform: translateX(16px);
    transition: transform .28s ease;
}

.hukum-book-cover:hover .hukum-book-pages {
    transform: translateX(24px);
}

.hukum-book-badge,
.hukum-book-icon,
.hukum-book-title,
.hukum-book-meta,
.hukum-book-action {
    position: relative;
    z-index: 2;
}

.hukum-book-badge {
    align-self: flex-start;
    max-width: 100%;
    padding: 8px 10px;
    overflow: hidden;
    color: #082646;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(255,255,255,.90);
    border-radius: 999px;
    font-size: .68rem;
    font-weight: 950;
}

.hukum-book-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    margin: 28px 0 20px;
    color: #fff;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.24);
    border-radius: 22px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
    font-size: 2.25rem;
}

.hukum-book-title {
    display: -webkit-box;
    overflow: hidden;
    min-height: 96px;
    color: #fff;
    font-size: 1.18rem;
    font-weight: 950;
    line-height: 1.35;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.hukum-book-meta {
    display: grid;
    gap: 5px;
    margin-top: auto;
    padding-top: 18px;
}

.hukum-book-meta em {
    color: rgba(239,248,255,.80);
    font-size: .78rem;
    font-style: normal;
    font-weight: 850;
}

.hukum-book-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    margin-top: 18px;
    color: #082646;
    background: rgba(255,255,255,.92);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 950;
}

.hukum-book-foot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}

.hukum-book-foot a,
.hukum-book-foot button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 43px;
    color: #0f4c81;
    text-decoration: none;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(15,76,129,.11);
    border-radius: 14px;
    box-shadow: 0 14px 30px rgba(15,76,129,.09);
    font-size: .82rem;
    font-weight: 950;
}

.hukum-book-foot button {
    color: #fff;
    background: linear-gradient(135deg, #0f4c81, #4fb0e9);
}

.hukum-empty {
    grid-column: 1 / -1;
    padding: 58px 24px;
    text-align: center;
    background: rgba(255,255,255,.88);
    border: 1px solid rgba(15,76,129,.11);
    border-radius: 28px;
    box-shadow: 0 26px 64px rgba(15,76,129,.12);
}

.hukum-empty i {
    color: #0f4c81;
    font-size: 3.2rem;
}

.hukum-empty h3 {
    margin: 14px 0 6px;
    color: #082646;
    font-weight: 950;
}

.hukum-empty p {
    color: #52718c;
    font-weight: 750;
}

.hukum-empty a {
    display: inline-flex;
    margin-top: 10px;
    padding: 10px 14px;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, #0f4c81, #4fb0e9);
    border-radius: 999px;
    font-weight: 950;
}

.hukum-pdf-modal {
    overflow: hidden;
    background: #f4fbff;
    border: 1px solid rgba(255,255,255,.20);
    border-radius: 28px;
    box-shadow: 0 34px 92px rgba(2,16,31,.34);
}

.hukum-pdf-modal .modal-header {
    align-items: flex-start;
    color: #fff;
    background:
        radial-gradient(circle at 12% 0%, rgba(79,176,233,.34), transparent 35%),
        linear-gradient(135deg, #061b33, #0f4c81);
    border: 0;
}

.hukum-pdf-modal .modal-header span {
    display: inline-flex;
    margin-bottom: 7px;
    color: #cfefff;
    font-size: .76rem;
    font-weight: 950;
}

.hukum-pdf-modal .modal-title {
    color: #fff;
    font-size: 1.35rem;
    font-weight: 950;
    line-height: 1.25;
}

.hukum-pdf-modal .modal-body {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 14px;
    padding: 14px;
}

.hukum-modal-info {
    padding: 22px;
    background: #fff;
    border: 1px solid rgba(15,76,129,.10);
    border-radius: 22px;
}

.hukum-modal-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    color: #fff;
    background: linear-gradient(135deg, #0f4c81, #4fb0e9);
    border-radius: 18px;
    font-size: 1.75rem;
}

.hukum-modal-meta {
    display: grid;
    gap: 10px;
    margin: 18px 0;
}

.hukum-modal-meta div {
    padding: 12px;
    background: #eef8ff;
    border: 1px solid rgba(15,76,129,.09);
    border-radius: 16px;
}

.hukum-modal-meta strong,
.hukum-modal-meta span {
    display: block;
}

.hukum-modal-meta strong {
    color: #5a7892;
    font-size: .72rem;
    font-weight: 950;
}

.hukum-modal-meta span {
    margin-top: 4px;
    color: #082646;
    font-weight: 900;
}

.hukum-modal-info p {
    color: #4f6d87;
    font-weight: 750;
    line-height: 1.7;
}

.hukum-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, #0f4c81, #4fb0e9);
    border-radius: 16px;
    font-weight: 950;
}

.hukum-pdf-frame {
    min-height: 72vh;
    overflow: hidden;
    background: #061b33;
    border-radius: 22px;
}

.hukum-pdf-frame iframe {
    display: block;
    width: 100%;
    height: 72vh;
    min-height: 620px;
    border: 0;
}

@media (max-width: 1199.98px) {
    .hukum-book-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .hukum-hero-grid,
    .hukum-pdf-modal .modal-body {
        grid-template-columns: 1fr;
    }

    .hukum-open-book {
        max-width: 520px;
    }

    .hukum-filter-panel {
        grid-template-columns: 1fr 1fr;
    }

    .hukum-book-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hukum-modal-info {
        order: 2;
    }
}

@media (max-width: 767.98px) {
    .hukum-book-hero {
        padding: 44px 0 64px;
    }

    .hukum-hero-copy h1 {
        font-size: 2.35rem;
    }

    .hukum-open-book {
        grid-template-columns: 1fr;
    }

    .hukum-book-left,
    .hukum-book-right {
        min-height: 180px;
        transform: none;
        border-radius: 22px;
    }

    .hukum-filter-panel,
    .hukum-book-grid {
        grid-template-columns: 1fr;
    }

    .hukum-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .hukum-book-cover {
        min-height: 350px;
    }

    .hukum-pdf-frame,
    .hukum-pdf-frame iframe {
        min-height: 520px;
        height: 62vh;
    }
}

/* Tentang kami CV page */
.cv-about-page {
    overflow: hidden;
    color: #082646;
    background:
        radial-gradient(circle at 8% 4%, rgba(79,176,233,.28), transparent 30%),
        radial-gradient(circle at 92% 42%, rgba(15,76,129,.16), transparent 34%),
        linear-gradient(180deg, #e7f5ff 0%, #f2fbff 34%, #dcefff 100%);
}

.cv-about-hero {
    position: relative;
    padding: 64px 0 84px;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(5,27,53,.97), rgba(12,78,132,.94) 58%, rgba(242,249,255,.88)),
        radial-gradient(circle at 76% 18%, rgba(255,255,255,.34), transparent 28%);
}

.cv-about-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
    background-size: 46px 46px;
    opacity: .25;
}

.cv-about-light {
    position: absolute;
    width: 280px;
    height: 280px;
    border-radius: 999px;
    filter: blur(20px);
    pointer-events: none;
    animation: cvAboutFloat 7s ease-in-out infinite;
}

.cv-about-light-one {
    left: 9%;
    top: 12%;
    background: rgba(79,176,233,.24);
}

.cv-about-light-two {
    right: 12%;
    bottom: 12%;
    background: rgba(255,255,255,.34);
    animation-delay: -2s;
}

@keyframes cvAboutFloat {
    0%, 100% {
        transform: translate3d(0,0,0) scale(1);
    }
    50% {
        transform: translate3d(16px,-16px,0) scale(1.06);
    }
}

.cv-about-hero .container {
    position: relative;
    z-index: 2;
}

.cv-about-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    align-items: stretch;
    gap: 22px;
}

.cv-about-card,
.cv-kepala-panel,
.cv-profile-main,
.cv-sambutan-box,
.cv-vm-card,
.cv-structure-frame,
.cv-structure-note,
.cv-contact-card,
.cv-map-card,
.cv-mini-link-wrap {
    background:
        radial-gradient(circle at 12% 0%, rgba(79,176,233,.16), transparent 28%),
        linear-gradient(145deg, rgba(255,255,255,.88), rgba(220,241,255,.78));
    border: 1px solid rgba(79,176,233,.22);
    border-radius: 28px;
    box-shadow: 0 28px 68px rgba(15,76,129,.18);
    backdrop-filter: blur(16px);
}

.cv-about-card {
    position: relative;
    padding: 30px;
    overflow: hidden;
}

.cv-about-card::after,
.cv-profile-main::after,
.cv-contact-card::after {
    content: "";
    position: absolute;
    right: -58px;
    top: -58px;
    width: 170px;
    height: 170px;
    background: radial-gradient(circle, rgba(79,176,233,.24), transparent 68%);
    pointer-events: none;
}

.cv-about-identity {
    display: grid;
    grid-template-columns: 104px minmax(0, 1fr);
    gap: 22px;
    align-items: center;
}

.cv-about-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 104px;
    height: 104px;
    overflow: hidden;
    color: #fff;
    background: linear-gradient(135deg, #0f4c81, #4fb0e9);
    border: 1px solid rgba(255,255,255,.55);
    border-radius: 28px;
    box-shadow: 0 20px 42px rgba(15,76,129,.22);
}

.cv-about-logo img {
    width: 78px;
    height: 78px;
    object-fit: contain;
}

.cv-about-logo i {
    font-size: 3rem;
}

.cv-about-identity span,
.cv-profile-main > span,
.cv-vm-card > span,
.cv-section-title span,
.cv-contact-card > span,
.cv-kepala-info span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0f4c81;
    font-size: .78rem;
    font-weight: 950;
}

.cv-about-identity h1 {
    margin: 9px 0 10px;
    color: #062949;
    font-size: clamp(2.25rem, 4.2vw, 4.7rem);
    font-weight: 950;
    line-height: 1.02;
}

.cv-about-identity p {
    max-width: 760px;
    margin: 0;
    color: #2d5d86;
    font-size: 1.02rem;
    line-height: 1.75;
    font-weight: 750;
}

.cv-about-tags,
.cv-about-contact-strip,
.cv-social-row,
.cv-mini-link-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cv-about-tags {
    margin-top: 24px;
}

.cv-about-tags span {
    padding: 9px 12px;
    color: #fff;
    background: linear-gradient(135deg, #0f4c81, #4fb0e9);
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 950;
}

.cv-about-contact-strip {
    margin-top: 20px;
}

.cv-about-contact-strip a,
.cv-about-contact-strip span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    color: #06365f;
    text-decoration: none;
    background: rgba(225,244,255,.92);
    border: 1px solid rgba(15,76,129,.16);
    border-radius: 999px;
    font-size: .83rem;
    font-weight: 900;
}

.cv-kepala-panel {
    overflow: hidden;
    background:
        radial-gradient(circle at 20% 0%, rgba(79,176,233,.28), transparent 30%),
        linear-gradient(160deg, rgba(255,255,255,.92), rgba(211,238,255,.86));
}

.cv-kepala-photo {
    position: relative;
    height: 330px;
    overflow: hidden;
    background: linear-gradient(135deg, #061b33, #0f4c81);
}

.cv-kepala-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(5,27,53,.62), transparent 58%);
}

.cv-kepala-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.cv-kepala-photo div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #cfefff;
    font-size: 5rem;
}

.cv-kepala-info {
    padding: 22px;
    background: linear-gradient(180deg, rgba(231,247,255,.72), rgba(255,255,255,.74));
}

.cv-kepala-info h2 {
    margin: 9px 0 6px;
    color: #082646;
    font-size: 1.45rem;
    font-weight: 950;
}

.cv-kepala-info p {
    margin: 0;
    color: #52718c;
    font-weight: 850;
}

.cv-about-stats {
    position: relative;
    z-index: 3;
    margin-top: -44px;
}

.cv-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.cv-stat-grid div {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: center;
    gap: 12px;
    padding: 18px;
    background:
        linear-gradient(145deg, rgba(255,255,255,.90), rgba(218,241,255,.90));
    border: 1px solid rgba(15,76,129,.16);
    border-radius: 22px;
    box-shadow: 0 22px 52px rgba(15,76,129,.13);
}

.cv-stat-grid i {
    grid-row: span 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    color: #fff;
    background: linear-gradient(135deg, #0f4c81, #4fb0e9);
    border-radius: 17px;
    font-size: 1.35rem;
}

.cv-stat-grid strong {
    color: #082646;
    font-size: 1.55rem;
    font-weight: 950;
    line-height: 1;
}

.cv-stat-grid span {
    color: #5a7892;
    font-size: .78rem;
    font-weight: 900;
}

.cv-about-section {
    padding: 64px 0 0;
}

.cv-about-section.soft {
    padding-top: 52px;
}

.cv-about-section.contact {
    padding-bottom: 34px;
}

.cv-profile-layout,
.cv-vm-grid,
.cv-structure-layout,
.cv-contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 20px;
}

.cv-profile-main,
.cv-sambutan-box,
.cv-vm-card,
.cv-structure-note,
.cv-contact-card {
    position: relative;
    overflow: hidden;
    padding: 26px;
}

.cv-profile-main h2,
.cv-vm-card h2,
.cv-contact-card h2,
.cv-section-title h2 {
    margin: 10px 0 12px;
    color: #082646;
    font-size: clamp(1.65rem, 2.5vw, 2.4rem);
    font-weight: 950;
    line-height: 1.15;
}

.cv-profile-main p,
.cv-sambutan-box p,
.cv-vm-card p,
.cv-vm-card div,
.cv-section-title p,
.cv-structure-note p {
    color: #315f84;
    font-weight: 750;
    line-height: 1.76;
}

.cv-sambutan-box {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 0%, rgba(79,176,233,.26), transparent 30%),
        linear-gradient(145deg, #eef9ff, #d9efff);
}

.cv-sambutan-box > i {
    color: #d7efff;
    font-size: 4rem;
}

.cv-sambutan-box h3 {
    margin: 2px 0 10px;
    color: #082646;
    font-weight: 950;
}

.cv-sambutan-box a,
.cv-structure-note a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    color: #fff;
    text-decoration: none;
    background: linear-gradient(135deg, #0f4c81, #4fb0e9);
    border-radius: 999px;
    padding: 10px 14px;
    font-size: .82rem;
    font-weight: 950;
}

.cv-vm-grid {
    grid-template-columns: 1fr 1.15fr;
}

.cv-vm-card {
    background:
        radial-gradient(circle at 92% 0%, rgba(79,176,233,.24), transparent 28%),
        linear-gradient(145deg, #f8fdff, #dcefff);
}

.cv-vm-card.mission {
    background:
        radial-gradient(circle at 12% 0%, rgba(79,176,233,.25), transparent 30%),
        linear-gradient(135deg, #eef9ff, #d9efff);
}

.cv-vm-card ul {
    margin: 0;
    padding-left: 20px;
}

.cv-vm-card li + li {
    margin-top: 8px;
}

.cv-section-title {
    max-width: 780px;
    margin-bottom: 22px;
}

.cv-structure-layout {
    grid-template-columns: minmax(0, 1fr) 330px;
    align-items: stretch;
}

.cv-structure-frame {
    overflow: hidden;
    padding: 14px;
}

.cv-structure-frame a {
    display: block;
}

.cv-structure-frame img {
    display: block;
    width: 100%;
    max-height: 690px;
    object-fit: contain;
    background: #fff;
    border-radius: 20px;
    transition: transform .28s ease;
}

.cv-structure-frame:hover img {
    transform: scale(1.015);
}

.cv-structure-empty {
    display: grid;
    place-items: center;
    min-height: 360px;
    text-align: center;
}

.cv-structure-empty i {
    color: #0f4c81;
    font-size: 3rem;
}

.cv-structure-note {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background:
        radial-gradient(circle at 14% 10%, rgba(255,255,255,.25), transparent 30%),
        linear-gradient(135deg, #061b33, #0f4c81);
}

.cv-structure-note span,
.cv-structure-note h3,
.cv-structure-note p {
    color: #fff;
}

.cv-structure-note span {
    font-size: .76rem;
    font-weight: 950;
}

.cv-structure-note h3 {
    margin: 10px 0;
    font-weight: 950;
    line-height: 1.25;
}

.cv-structure-note p {
    color: rgba(239,248,255,.76);
}

.cv-structure-note a {
    color: #082646;
    background: rgba(255,255,255,.92);
}

.cv-contact-layout {
    grid-template-columns: minmax(0, 1fr) 450px;
}

.cv-contact-list {
    display: grid;
    gap: 12px;
    margin-top: 18px;
}

.cv-contact-list div {
    display: grid;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 12px;
    padding: 13px;
    background: linear-gradient(145deg, #e4f5ff, #f7fdff);
    border: 1px solid rgba(15,76,129,.15);
    border-radius: 18px;
}

.cv-contact-list i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    color: #fff;
    background: linear-gradient(135deg, #0f4c81, #4fb0e9);
    border-radius: 15px;
}

.cv-contact-list p {
    margin: 0;
    color: #4f6d87;
    font-weight: 800;
}

.cv-contact-list strong {
    display: block;
    color: #082646;
    font-weight: 950;
}

.cv-social-row {
    margin-top: 16px;
}

.cv-social-row a,
.cv-mini-link-wrap a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 9px 12px;
    color: #073a66;
    text-decoration: none;
    background: linear-gradient(145deg, #ffffff, #e2f4ff);
    border: 1px solid rgba(15,76,129,.16);
    border-radius: 999px;
    box-shadow: 0 14px 30px rgba(15,76,129,.08);
    font-size: .82rem;
    font-weight: 950;
    transition: transform .22s ease, box-shadow .22s ease;
}

.cv-social-row a:hover,
.cv-mini-link-wrap a:hover {
    transform: translateY(-3px);
    box-shadow: 0 22px 42px rgba(15,76,129,.14);
}

.cv-map-card {
    overflow: hidden;
    min-height: 520px;
}

.cv-map-card iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 520px;
    border: 0;
}

.cv-about-links {
    padding: 20px 0 82px;
}

.cv-mini-link-wrap {
    justify-content: center;
    padding: 16px;
}

.cv-mini-link-wrap a {
    color: #fff;
    background: linear-gradient(135deg, #0f4c81, #4fb0e9);
}

@media (max-width: 1199.98px) {
    .cv-about-grid,
    .cv-profile-layout,
    .cv-vm-grid,
    .cv-structure-layout,
    .cv-contact-layout {
        grid-template-columns: 1fr;
    }

    .cv-kepala-panel,
    .cv-structure-note {
        max-width: 560px;
    }

    .cv-stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .cv-about-hero {
        padding: 46px 0 70px;
    }

    .cv-about-card,
    .cv-profile-main,
    .cv-sambutan-box,
    .cv-vm-card,
    .cv-structure-note,
    .cv-contact-card {
        padding: 20px;
    }

    .cv-about-identity {
        grid-template-columns: 1fr;
    }

    .cv-about-identity h1 {
        font-size: 2.25rem;
    }

    .cv-stat-grid {
        grid-template-columns: 1fr;
    }

    .cv-kepala-photo,
    .cv-map-card,
    .cv-map-card iframe {
        min-height: 380px;
        height: auto;
    }

    .cv-contact-list div {
        grid-template-columns: 42px minmax(0, 1fr);
    }
}

/* Tentang kami - video studio visual alignment */
.cv-about-page {
    background:
        radial-gradient(circle at 10% 4%, rgba(79,176,233,.22), transparent 30%),
        radial-gradient(circle at 90% 20%, rgba(255,255,255,.12), transparent 28%),
        linear-gradient(180deg, #061b33 0%, #0b335d 26%, #eaf7ff 62%, #f7fcff 100%);
}

.cv-about-hero {
    padding: 58px 0 78px;
    background:
        linear-gradient(135deg, rgba(4, 24, 48, .98), rgba(10, 67, 118, .95) 56%, rgba(237, 248, 255, .90)),
        radial-gradient(circle at 80% 12%, rgba(79,176,233,.42), transparent 30%);
}

.cv-about-hero::before {
    background-image:
        linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: linear-gradient(90deg, #000, transparent 84%);
    opacity: .36;
}

.cv-about-card {
    background:
        radial-gradient(circle at 88% 8%, rgba(79,176,233,.22), transparent 28%),
        linear-gradient(145deg, rgba(6,27,51,.86), rgba(15,76,129,.72));
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 34px 82px rgba(2,16,31,.30);
}

.cv-about-identity span {
    color: #cfefff;
}

.cv-about-identity h1,
.cv-about-identity p {
    color: #fff;
}

.cv-about-identity p {
    color: rgba(239,248,255,.78);
}

.cv-about-logo {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.24);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 20px 44px rgba(2,16,31,.24);
}

.cv-about-tags span {
    color: #082646;
    background: rgba(255,255,255,.90);
}

.cv-about-contact-strip a,
.cv-about-contact-strip span {
    color: #fff;
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.20);
}

.cv-kepala-panel {
    background:
        radial-gradient(circle at 12% 0%, rgba(79,176,233,.24), transparent 28%),
        linear-gradient(180deg, #071f3a, #0f4c81);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 34px 82px rgba(2,16,31,.30);
}

.cv-kepala-info {
    background:
        radial-gradient(circle at 18% 0%, rgba(79,176,233,.24), transparent 32%),
        linear-gradient(135deg, #061b33, #0f4c81);
}

.cv-kepala-info span,
.cv-kepala-info h2 {
    color: #fff;
}

.cv-kepala-info p {
    color: rgba(239,248,255,.76);
}

.cv-stat-grid div {
    background:
        radial-gradient(circle at 12% 0%, rgba(79,176,233,.20), transparent 28%),
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(231,247,255,.92));
    border-color: rgba(79,176,233,.18);
    box-shadow: 0 26px 64px rgba(15,76,129,.16);
}

.cv-profile-main,
.cv-sambutan-box,
.cv-vm-card,
.cv-contact-card,
.cv-structure-frame,
.cv-map-card,
.cv-mini-link-wrap {
    background:
        radial-gradient(circle at 14% 0%, rgba(79,176,233,.18), transparent 30%),
        linear-gradient(145deg, rgba(255,255,255,.94), rgba(231,247,255,.88));
    border: 1px solid rgba(79,176,233,.18);
    box-shadow: 0 28px 68px rgba(15,76,129,.15);
}

.cv-profile-main > span,
.cv-vm-card > span,
.cv-section-title span,
.cv-contact-card > span,
.cv-kepala-info span {
    color: #0f4c81;
}

.cv-profile-main h2,
.cv-vm-card h2,
.cv-contact-card h2,
.cv-section-title h2 {
    color: #061b33;
}

.cv-profile-main p,
.cv-sambutan-box p,
.cv-vm-card p,
.cv-vm-card div,
.cv-section-title p,
.cv-contact-list p {
    color: #315f84;
}

.cv-sambutan-box {
    border-left: 6px solid #4fb0e9;
}

.cv-sambutan-box > i {
    color: rgba(79,176,233,.22);
}

.cv-structure-note {
    background:
        radial-gradient(circle at 12% 0%, rgba(79,176,233,.28), transparent 30%),
        linear-gradient(135deg, #061b33, #0f4c81);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 28px 68px rgba(2,16,31,.22);
}

.cv-contact-list div {
    background:
        linear-gradient(145deg, #f7fdff, #e3f4ff);
    border-color: rgba(79,176,233,.18);
}

.cv-social-row a {
    color: #fff;
    background: linear-gradient(135deg, #0f4c81, #4fb0e9);
    border-color: rgba(255,255,255,.18);
}

.cv-mini-link-wrap {
    background:
        radial-gradient(circle at 20% 0%, rgba(79,176,233,.22), transparent 30%),
        linear-gradient(135deg, #061b33, #0f4c81);
    border-color: rgba(255,255,255,.16);
}

.cv-mini-link-wrap a {
    color: #082646;
    background: rgba(255,255,255,.92);
    border-color: rgba(255,255,255,.28);
}

/* Index premium video and service CTA refresh */
.home-video-studio-panel {
    position: relative;
    overflow: hidden;
    padding: 20px;
    background:
        radial-gradient(circle at 12% 0%, rgba(79,176,233,.24), transparent 30%),
        linear-gradient(135deg, #061b33, #0f4c81 58%, #dff4ff);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 34px 82px rgba(2,16,31,.24);
}

.home-video-studio-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: .22;
    pointer-events: none;
}

.home-video-studio-panel > * {
    position: relative;
    z-index: 1;
}

.home-video-studio-panel .premium-panel-head {
    margin-bottom: 16px;
}

.home-video-studio-panel .premium-panel-head span,
.home-video-studio-panel .premium-panel-head h2 {
    color: #fff;
}

.home-video-studio-panel .premium-panel-head a {
    color: #082646;
    background: rgba(255,255,255,.92);
}

.home-video-feature {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 14px;
    margin-bottom: 16px;
}

.home-video-main {
    position: relative;
    display: block;
    min-height: 380px;
    overflow: hidden;
    color: #fff;
    text-decoration: none;
    background: #061b33;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 24px;
    box-shadow: 0 28px 62px rgba(2,16,31,.25);
}

.home-video-main img,
.home-video-empty-visual {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.home-video-main img {
    object-fit: cover;
    opacity: .88;
    transition: transform .36s ease;
}

.home-video-main:hover img {
    transform: scale(1.06);
}

.home-video-empty-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cfefff;
    background:
        radial-gradient(circle at 26% 16%, rgba(79,176,233,.28), transparent 32%),
        linear-gradient(135deg, #061b33, #0f4c81);
    font-size: 4rem;
}

.home-video-main-shade {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(2,15,31,.90), rgba(2,15,31,.16) 60%),
        radial-gradient(circle at 82% 14%, rgba(255,255,255,.22), transparent 28%);
}

.home-video-live {
    position: absolute;
    top: 18px;
    left: 18px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 11px;
    color: #082646;
    background: rgba(255,255,255,.92);
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 950;
}

.home-video-play {
    position: absolute;
    left: 22px;
    bottom: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    color: #fff;
    background: linear-gradient(135deg, #e5212e, #ff6b6b);
    border: 5px solid rgba(255,255,255,.22);
    border-radius: 999px;
    box-shadow: 0 18px 44px rgba(229,33,46,.28);
    font-size: 1.9rem;
}

.home-video-main-copy {
    position: absolute;
    left: 108px;
    right: 24px;
    bottom: 24px;
}

.home-video-main-copy small {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(239,248,255,.78);
    font-weight: 850;
}

.home-video-main-copy h3 {
    display: -webkit-box;
    margin: 8px 0 7px;
    overflow: hidden;
    color: #fff;
    font-size: clamp(1.3rem, 2.2vw, 2.15rem);
    font-weight: 950;
    line-height: 1.16;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.home-video-main-copy p {
    max-width: 660px;
    margin: 0;
    color: rgba(239,248,255,.74);
    font-weight: 750;
}

.home-video-side {
    display: flex;
    justify-content: center;
    flex-direction: column;
    padding: 24px;
    color: #fff;
    background:
        radial-gradient(circle at 18% 10%, rgba(255,255,255,.20), transparent 32%),
        rgba(255,255,255,.11);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 24px;
    backdrop-filter: blur(12px);
}

.home-video-side span {
    color: #cfefff;
    font-size: .76rem;
    font-weight: 950;
}

.home-video-side h3 {
    margin: 10px 0 10px;
    color: #fff;
    font-weight: 950;
    line-height: 1.2;
}

.home-video-side p {
    color: rgba(239,248,255,.74);
    font-weight: 750;
    line-height: 1.65;
}

.home-video-side a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    margin-top: 8px;
    color: #082646;
    text-decoration: none;
    background: rgba(255,255,255,.92);
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 950;
}

.home-video-studio-panel .video-strip-wrap {
    padding: 0 46px;
}

.home-video-studio-panel .video-strip-track {
    padding: 4px 2px 6px;
}

.home-video-studio-panel .video-strip-nav {
    color: #082646;
    background: rgba(255,255,255,.92);
    box-shadow: 0 16px 34px rgba(2,16,31,.22);
}

.home-video-mini-card {
    flex: 0 0 250px;
    min-height: 168px;
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 20px 44px rgba(2,16,31,.20);
}

.home-video-mini-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cfefff;
    background: linear-gradient(135deg, #061b33, #0f4c81);
    font-size: 2.6rem;
}

.home-service-cta-panel {
    position: relative;
    overflow: hidden;
    padding: 24px;
    background:
        radial-gradient(circle at 12% 0%, rgba(79,176,233,.24), transparent 30%),
        linear-gradient(135deg, #061b33, #0f4c81);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 30px 72px rgba(2,16,31,.18);
}

.home-service-cta-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 38px 38px;
    opacity: .18;
    pointer-events: none;
}

.home-service-cta-panel > * {
    position: relative;
    z-index: 1;
}

.home-service-cta-head {
    max-width: 760px;
    margin-bottom: 18px;
}

.home-service-cta-head span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #cfefff;
    font-size: .76rem;
    font-weight: 950;
}

.home-service-cta-head h2 {
    margin: 8px 0 8px;
    color: #fff;
    font-size: clamp(1.45rem, 2.4vw, 2.25rem);
    font-weight: 950;
}

.home-service-cta-head p {
    margin: 0;
    color: rgba(239,248,255,.74);
    font-weight: 750;
    line-height: 1.7;
}

.home-service-cta-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.home-service-cta-card {
    position: relative;
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 34px;
    gap: 12px;
    min-height: 148px;
    padding: 16px;
    color: #fff;
    text-decoration: none;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 20px;
    backdrop-filter: blur(12px);
    transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
}

.home-service-cta-card:hover {
    transform: translateY(-5px);
    color: #fff;
    background: rgba(255,255,255,.18);
    box-shadow: 0 24px 48px rgba(2,16,31,.22);
}

.home-service-cta-card > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    color: #082646;
    background: rgba(255,255,255,.92);
    border-radius: 17px;
    font-size: 1.45rem;
}

.home-service-cta-card span {
    color: #cfefff;
    font-size: .72rem;
    font-weight: 950;
}

.home-service-cta-card h3 {
    margin: 4px 0 6px;
    color: #fff;
    font-size: 1rem;
    font-weight: 950;
}

.home-service-cta-card p {
    margin: 0;
    color: rgba(239,248,255,.72);
    font-size: .82rem;
    font-weight: 750;
    line-height: 1.5;
}

.home-service-cta-card strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: #fff;
    background: rgba(255,255,255,.14);
    border-radius: 999px;
}

@media (max-width: 991.98px) {
    .home-video-feature,
    .home-service-cta-grid {
        grid-template-columns: 1fr;
    }

    .home-video-side {
        min-height: auto;
    }
}

@media (max-width: 767.98px) {
    .home-video-studio-panel,
    .home-service-cta-panel {
        padding: 16px;
    }

    .home-video-main {
        min-height: 320px;
    }

    .home-video-main-copy {
        left: 22px;
        right: 22px;
        bottom: 22px;
        padding-top: 76px;
    }

    .home-video-play {
        top: 72px;
        bottom: auto;
        width: 58px;
        height: 58px;
        font-size: 1.6rem;
    }

    .home-video-studio-panel .video-strip-wrap {
        padding: 0 40px;
    }

    .home-video-mini-card {
        flex-basis: 220px;
    }

    .home-service-cta-card {
        grid-template-columns: 50px minmax(0, 1fr);
    }

    .home-service-cta-card strong {
        display: none;
    }
}