:root {
    --digihub-base: #e42f2f;
    --digihub-base-rgb: 228, 47, 47;
    --digihub-special: #f4d22d;
    --digihub-special-rgb: 244, 210, 45;
    --digihub-primary: #0a2f8f;
    --digihub-primary-rgb: 10, 47, 143;
    --digihub-secondary: #38558f;
    --digihub-secondary-rgb: 56, 85, 143;
    --digihub-black: #061b52;
    --digihub-black-rgb: 6, 27, 82;
    --digihub-black2: #0d3fae;
    --digihub-black2-rgb: 13, 63, 174;
    --digihub-gray: #eaf1ff;
    --digihub-gray-rgb: 234, 241, 255;
    --digihub-navy-blue: #061b52;
    --digihub-navy-blue-rgb: 6, 27, 82;
    --digihub-linear-gradient-bg-special: linear-gradient(180deg, rgba(10, 47, 143, 0) 42%, #f4d22d 100%);
}

body.public-body {
    background-color: #f6f9ff !important;
    font-family: 'DM Sans', sans-serif !important;
    margin: 0;
    padding: 0;
}

.main-header,
.stricky-header,
.mobile-nav__content {
    background: linear-gradient(135deg, #061b52 0%, #0a2f8f 58%, #0d3fae 100%);
}

.main-menu__list > li > a,
.main-menu-one__search,
.main-menu-one__bar .mobile-nav__toggler-bars {
    color: #ffffff;
}

.main-menu-one__bar .mobile-nav__toggler-bars {
    background-color: #ffffff;
}

.main-menu__list > li:hover > a,
.main-menu__list > li.current > a {
    color: #f4d22d;
}

.main-menu__list li ul {
    border-top: 4px solid #f4d22d;
}

.main-menu__list li ul li:hover > a {
    color: #0a2f8f;
}

.main-slider {
    background: linear-gradient(135deg, #061b52 0%, #0a2f8f 52%, #0d3fae 100%);
}

.main-slider::before {
    background: linear-gradient(90deg, rgba(6, 27, 82, 0.94), rgba(10, 47, 143, 0.8), rgba(10, 47, 143, 0.35));
}

.main-slider__heading,
.main-slider__desc {
    color: #ffffff;
}

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

@keyframes shapeFloatTwo {
    0%, 100% {
        transform: translateY(0px) scale(1);
    }
    50% {
        transform: translateY(14px) scale(1.04);
    }
}

.main-slider__shape-one {
    filter: hue-rotate(185deg) saturate(1.4) brightness(0.92);
    opacity: 0.55;
    animation: shapeFloatOne 6.5s ease-in-out infinite;
}

.main-slider__shape-two {
    filter: hue-rotate(185deg) saturate(1.4) brightness(0.92);
    opacity: 0.55;
    animation: shapeFloatTwo 8s ease-in-out infinite;
}

.main-slider__carousel {
    width: min(92vw, 1480px);
    border: 1px solid rgba(244, 210, 45, 0.28);
    border-radius: 8px;
    box-shadow: 0 28px 70px rgba(3, 18, 62, 0.38);
    overflow: hidden;
}

.main-slider__image--campus {
    height: clamp(360px, 42vw, 620px);
    background: #061b52;
    transform: none !important;
}

.main-slider__carousel .active .main-slider__image--campus {
    transform: none !important;
}

.main-slider__image--campus::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(6, 27, 82, 0.1) 0%, rgba(6, 27, 82, 0) 38%, rgba(6, 27, 82, 0.18) 100%),
        linear-gradient(90deg, rgba(6, 27, 82, 0.18), rgba(10, 47, 143, 0.02) 48%, rgba(6, 27, 82, 0.16));
    pointer-events: none;
}

.main-slider__image--campus::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    z-index: 2;
    height: 6px;
    background: linear-gradient(90deg, #0a2f8f, #f4d22d 48%, #e42f2f);
}

.main-slider__image--campus img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 62%;
    transform: scale(1.01);
    filter: saturate(1.04) contrast(1.02);
}

.digihub-btn--primary,
.digihub-btn--border-one span,
.footer-one__newsletter-btn,
.scroll-to-top {
    background-color: #f4d22d;
    color: #061b52;
}

.digihub-btn--primary:hover {
    color: #ffffff;
}

.digihub-btn--secondary,
.digihub-btn--primary span,
.digihub-btn--border-two span {
    background-color: #e42f2f;
}

.digihub-btn--border-one {
    border-color: #0a2f8f;
    color: #0a2f8f;
}

.digihub-btn--border-two {
    border-color: #f4d22d;
    color: #ffffff;
}

.sec-title__top,
.about-one__inner-icon,
.service-one__icon,
.footer-one__link:hover,
.footer-one__bottom-link:hover {
    color: #e42f2f;
}

.sec-title__heading,
.about-one__heading,
.service-one__title,
.portfolio-one__heading,
.counter-one .sec-title__heading {
    color: #061b52;
}

.about-one,
.portfolio-one {
    background-color: #f6f9ff;
}

.service-one,
.subscribe-one {
    background-color: #eaf1ff;
}

.stats-section {
    overflow: hidden;
    padding-top: 96px;
    padding-bottom: 96px;
    background:
        radial-gradient(circle at 12% 15%, rgba(244, 210, 45, 0.18), transparent 28%),
        linear-gradient(135deg, #f6f9ff 0%, #e8f2ff 48%, #dcecff 100%);
}

.stats-section::before {
    content: "";
    position: absolute;
    inset: 36px auto auto 50%;
    width: min(760px, 72vw);
    height: 210px;
    transform: translateX(-50%);
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(10, 47, 143, 0.13), rgba(13, 63, 174, 0.05));
    z-index: -1;
}

.stats-section__title {
    max-width: 680px;
    margin: 0 auto 38px;
    text-align: center;
}

.stats-section__title .sec-title__heading {
    margin-bottom: 0;
}

.stats-section .subscribe-one__inner-heading {
    top: 48%;
    font-size: clamp(84px, 13vw, 177px);
    -webkit-text-stroke-color: rgba(10, 47, 143, 0.08);
}

.stats-section .counter-one .row {
    row-gap: 24px;
}

.about-one__inner-icon-box,
.service-one__img-box,
.counter-one__count-box {
    border-color: rgba(10, 47, 143, 0.16);
}

.about-one__inner-box:hover .about-one__inner-icon-box,
.service-one__item:hover .service-one__img-box {
    border-color: #f4d22d;
}

.counter-one__count-box-one,
.counter-one__count-box-two,
.counter-one__count-box-three,
.counter-one__count-box-four {
    position: relative;
    min-height: 158px;
    padding: 28px;
    overflow: hidden;
    border: 1px solid rgba(10, 47, 143, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 18px 45px rgba(10, 47, 143, 0.1);
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.counter-one__count-box-one:hover,
.counter-one__count-box-two:hover,
.counter-one__count-box-three:hover,
.counter-one__count-box-four:hover {
    transform: translateY(-6px);
    border-color: rgba(10, 47, 143, 0.28);
    box-shadow: 0 24px 54px rgba(10, 47, 143, 0.16);
}

.counter-one__count-box-one::before,
.counter-one__count-box-two::before,
.counter-one__count-box-three::before,
.counter-one__count-box-four::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: #0a2f8f;
}

.counter-one__count-box-two::before {
    background: #f4d22d;
}

.counter-one__count-box-three::before {
    background: #e42f2f;
}

.counter-one__count-box-four::before {
    background: #22c55e;
}

.counter-one__count-box-one::after,
.counter-one__count-box-two::after,
.counter-one__count-box-three::after,
.counter-one__count-box-four::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -34px;
    width: 116px;
    height: 116px;
    border-radius: 50%;
    background: rgba(10, 47, 143, 0.06);
}

.stats-section .counter-one__count-box {
    gap: 18px;
    align-items: center;
    padding-left: 28px;
}

.stats-section__icon {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    flex: 0 0 54px;
    border-radius: 8px;
    color: #ffffff;
    background: linear-gradient(135deg, #061b52, #0d3fae);
    box-shadow: 0 12px 24px rgba(10, 47, 143, 0.22);
}

.counter-one__count-box-three .stats-section__icon {
    background: linear-gradient(135deg, #b91f2b, #e42f2f);
}

.counter-one__count-box-two .stats-section__icon {
    color: #061b52;
    background: linear-gradient(135deg, #f4d22d, #ffe77c);
    box-shadow: 0 12px 24px rgba(244, 210, 45, 0.28);
}

.counter-one__count-box-four .stats-section__icon {
    color: #ffffff;
    background: linear-gradient(135deg, #15803d, #22c55e);
    box-shadow: 0 12px 24px rgba(34, 197, 94, 0.26);
}

.stats-section__icon i {
    font-size: 22px;
}

.stats-section__content {
    position: relative;
    z-index: 1;
}

.stats-section .counter-one__count-box-inner {
    line-height: 1;
}

.stats-section .counter-one .sec-title__heading {
    font-size: clamp(46px, 5vw, 68px);
    line-height: 0.95;
    color: #061b52;
}

.stats-section .counter-one__count-title {
    margin-top: 10px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #38558f;
    text-transform: uppercase;
}

.footer-one {
    background: linear-gradient(135deg, #061b52 0%, #0a2f8f 68%, #0d3fae 100%);
}

.footer-one__bottom {
    border-top-color: rgba(244, 210, 45, 0.35);
}

.footer-one__title::after {
    background-color: #f4d22d;
}

.public-page-hero {
    position: relative;
    padding: 150px 0 78px;
    overflow: hidden;
    color: #ffffff;
    background:
        linear-gradient(135deg, rgba(6, 27, 82, 0.96), rgba(10, 47, 143, 0.9)),
        url("../images/gedungA-kampus.jpg") center 58% / cover no-repeat;
}

.public-page-hero::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 6px;
    background: linear-gradient(90deg, #0a2f8f, #f4d22d, #e42f2f);
}

.public-page-hero .container {
    position: relative;
    z-index: 1;
    max-width: 960px;
}

.public-page-hero h1 {
    margin: 0 0 18px;
    font-size: clamp(42px, 6vw, 76px);
    line-height: 1.05;
    color: #ffffff;
}

.public-page-hero p:not(.sec-title__top) {
    max-width: 720px;
    margin: 0;
    font-size: 19px;
    color: rgba(255, 255, 255, 0.86);
}

.public-section {
    padding: 88px 0;
    background: #f6f9ff;
}

.public-section__heading {
    margin-bottom: 24px;
}

.public-section__heading h2,
.public-subheading {
    margin: 0;
    color: #061b52;
}

.public-subheading {
    margin-bottom: 18px;
    font-size: 24px;
}

.public-grid {
    display: grid;
    gap: 24px;
}

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

.public-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.public-grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.public-card,
.public-empty,
.public-stat-card {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(10, 47, 143, 0.12);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 18px 45px rgba(10, 47, 143, 0.08);
}

.public-card {
    padding: 28px;
}

.public-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 5px;
    background: linear-gradient(90deg, #0a2f8f, #f4d22d);
}

.public-card--feature::before {
    background: linear-gradient(90deg, #f4d22d, #e42f2f);
}

.public-card h2 {
    margin: 8px 0 12px;
    font-size: clamp(22px, 2.1vw, 32px);
    line-height: 1.18;
    color: #061b52;
    overflow-wrap: anywhere;
}

.public-card p {
    margin-bottom: 0;
    color: #38558f;
}

.public-card .digihub-btn {
    margin-top: 24px;
}

.public-card__eyebrow {
    display: inline-flex;
    color: #e42f2f;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.public-card--list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.public-card__action {
    flex: 0 0 auto;
}

.public-list {
    display: grid;
    gap: 18px;
}

.public-empty {
    padding: 28px;
    color: #38558f;
}

.public-muted {
    color: #38558f;
    font-weight: 700;
}

.public-stat-card {
    padding: 26px;
    text-align: center;
}

.public-stat-card strong {
    display: block;
    color: #061b52;
    font-size: 48px;
    line-height: 1;
}

.public-stat-card span {
    display: block;
    margin-top: 10px;
    color: #38558f;
    font-weight: 800;
    text-transform: uppercase;
}

.public-timeline {
    display: grid;
    gap: 22px;
}

.public-timeline__item {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 24px;
    align-items: stretch;
}

.public-timeline__date {
    padding: 24px;
    border-radius: 8px;
    color: #061b52;
    background: linear-gradient(135deg, #f4d22d, #ffe77c);
    box-shadow: 0 18px 35px rgba(244, 210, 45, 0.18);
}

.public-timeline__date strong,
.public-timeline__date span {
    display: block;
}

.public-timeline__date strong {
    font-size: 32px;
    line-height: 1;
}

.public-timeline__date span {
    margin-top: 10px;
    font-weight: 700;
}

/* Logo ITB Riau Pesisir Styling & Sharp Rendering */
.main-menu-one__logo {
    display: flex;
    align-items: center;
}

.main-menu-one__logo-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 10px;
    padding: 5px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.main-menu-one__logo-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.25);
}

.main-menu-one__logo img {
    display: block;
    height: 72px;
    width: 72px;
    max-width: none;
    object-fit: contain !important;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    border-radius: 6px;
}

.footer-one__logo-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    margin-bottom: 22px;
}

.footer-one__logo {
    display: block;
    height: 78px;
    width: 78px;
    max-width: none;
    object-fit: contain !important;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    border-radius: 6px;
}

.mobile-nav__content .logo-box {
    display: inline-flex;
    background: #ffffff;
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
    margin-bottom: 24px;
}

.mobile-nav__content .logo-box img {
    display: block;
    height: 72px;
    width: 72px;
    max-width: none;
    object-fit: contain !important;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: high-quality;
    border-radius: 6px;
}

.about-one__col-img {
    display: none;
}

.about-one__col-content {
    flex: 0 0 100%;
    max-width: 100%;
}

@media (max-width: 575.98px) {
    .main-menu-one__logo-box {
        padding: 4px;
        border-radius: 8px;
    }

    .main-menu-one__logo img {
        height: 56px;
        max-width: none;
        width: 56px;
    }

    .mobile-nav__content .logo-box img {
        height: 60px;
        width: 60px;
    }

    .main-slider__heading {
        font-size: 48px;
        line-height: 1.08;
    }

    .stats-section {
        padding-top: 72px;
        padding-bottom: 72px;
    }

    .main-slider__carousel {
        width: calc(100vw - 24px);
        border-radius: 8px;
    }

    .main-slider__image--campus {
        height: 320px;
    }

    .main-slider__image--campus img {
        object-position: center bottom;
    }

    .stats-section .counter-one__count-box {
        min-height: 136px;
        padding: 24px;
        flex-direction: row;
        text-align: left;
    }

    .public-page-hero {
        padding: 120px 0 64px;
    }

    .public-section {
        padding: 64px 0;
    }

    .public-grid--two,
    .public-grid--three,
    .public-grid--four {
        grid-template-columns: 1fr;
    }

    .public-card--list,
    .public-timeline__item {
        grid-template-columns: 1fr;
        display: grid;
    }

    .public-card__action {
        margin-top: 6px;
    }
}

/* =========================================================
   ANIMASI & MIKRO-INTERAKSI HALAMAN PUBLIK
   ========================================================= */

/* Hilangkan flash putih pada background wrapper */
.page-wrapper {
    background-color: transparent !important;
}

/* Hover Efek Kartu Publik & Card Elevation */
.public-card {
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), 
                border-color 0.28s ease;
}

.public-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 42px rgba(10, 47, 143, 0.13) !important;
    border-color: rgba(10, 47, 143, 0.26) !important;
}

/* Stat Cards Hover */
.public-stat-card {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.25s ease;
}

.public-stat-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(10, 47, 143, 0.12) !important;
    border-color: rgba(10, 47, 143, 0.25);
}

.public-stat-card strong {
    transition: color 0.25s ease;
}

.public-stat-card:hover strong {
    color: #0a2f8f;
}

/* Service Item Hover Slide & Icon Micro-Interaction */
.service-one__item {
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), 
                background-color 0.25s ease, 
                box-shadow 0.25s ease;
    border-radius: 8px;
    padding: 16px 20px;
    margin-bottom: 12px;
}

.service-one__item:hover {
    background-color: #ffffff;
    transform: translateX(6px);
    box-shadow: 0 10px 28px rgba(10, 47, 143, 0.08);
}

.service-one__icon {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-one__item:hover .service-one__icon {
    transform: scale(1.15) rotate(4deg);
}

/* Animated Pulse Dot (Indikator Aktif / Berlangsung) */
@keyframes pulseDotGlow {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }
    70% {
        box-shadow: 0 0 0 8px rgba(34, 197, 94, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

.pulse-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #22c55e;
    animation: pulseDotGlow 1.8s infinite;
    vertical-align: middle;
    margin-right: 6px;
}

/* Subtle Zoom pada Gambar Kampus */
.main-slider__image--campus {
    overflow: hidden;
}

.main-slider__image--campus img {
    transition: transform 8s cubic-bezier(0.25, 1, 0.5, 1);
}

.main-slider:hover .main-slider__image--campus img {
    transform: scale(1.035);
}

/* Tombol Interaktif */
.digihub-btn,
.btn {
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.digihub-btn:hover,
.btn:hover {
    transform: translateY(-2px);
}