/* Clean breadcrumb */
.clean-breadcrumb-wrap {
    margin-top: 0.75rem;
}

.clean-breadcrumb {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.75rem;
    padding: 10px 14px;
    box-shadow: none;
}

.clean-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.clean-breadcrumb__item {
    display: inline-flex;
    align-items: center;
    font-size: 13px;
    color: #6b7280;
}

.clean-breadcrumb__item:not(:last-child)::after {
    content: '/';
    margin: 0 8px;
    color: #d1d5db;
    font-weight: 400;
}

.clean-breadcrumb__item a {
    color: #6b7280;
    text-decoration: none;
    transition: color 0.2s ease;
}

.clean-breadcrumb__item a:hover {
    color: var(--mainColor);
}

.clean-breadcrumb__item.is-current span {
    color: var(--mainColor);
    font-weight: 600;
}

/*effek box zoom*/
.cursor-box::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
    top: -100%;
    left: -100%;
    transition: all 0.5s ease;
}
.cursor-box:hover::before {
    top: 100%;
    left: 100%;
}
.crosshair {
    border: 2px solid var(--mainColor);
    transition: all .3s ease;
}
.crosshair:hover {
    transform: scale(1.05);
    box-shadow: 0 0 0 5px color-mix(in srgb, var(--mainColor) 20%, transparent);
}

/*effek glossy*/
.glossy-hover figure {
    position: relative;
    overflow: hidden;
    margin: 0;
    border-radius: 30px; /* sesuaikan dengan rounded Bootstrap */
}
.glossy-hover figure img {
    display: block;
    border-radius: inherit;
}
.glossy-hover figure::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    z-index: 2;
    pointer-events: none;

    background: linear-gradient(
        to right,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,.35) 100%
    );

    transform: skewX(-25deg);
}
.glossy-hover figure:hover::before {
    animation: shine .75s ease;
}
@keyframes shine {
    100% {
        left: 125%;
    }
}

/*Belanja*/
.shop-product-gallery {
    margin-bottom: 2rem;
}

.shop-gallery-main-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-in;
}

.shop-gallery-main-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.shop-gallery-thumbs-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

.shop-gallery-thumbs {
    flex: 1;
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0;
    scrollbar-width: thin;
}

.shop-gallery-thumbs::-webkit-scrollbar {
    height: 4px;
}

.shop-gallery-thumbs::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--mainColor) 45%, transparent);
    border-radius: 999px;
}

.shop-gallery-nav {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 50%;
    background: var(--mainColor);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.shop-gallery-nav:hover {
    opacity: 0.9;
    transform: scale(1.05);
    color: #fff;
}

.shop-gallery-counter {
    display: block;
    text-align: center;
    margin-top: 8px;
    margin-bottom: 1.5rem;
    font-size: 12px;
    color: #6c757d;
}

.shop-gallery-thumb {
    width: 70px;
    height: 70px;
    flex: 0 0 70px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: 6px;
    overflow: hidden;
    background: #f8f9fa;
    cursor: pointer;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.shop-gallery-thumb:hover {
    transform: scale(1.05);
}

.shop-gallery-thumb.active {
    border-color: var(--mainColor);
}

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

/* Magnific popup shop di atas sticky menu */
.mfp-bg.shop-mfp-popup,
.mfp-wrap.shop-mfp-popup {
    z-index: 100050 !important;
}

.shop-mfp-popup .mfp-container {
    padding: 0 56px;
}

.shop-mfp-popup .mfp-arrow {
    position: absolute;
    top: 50%;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    opacity: 1;
    background: var(--mainColor);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
    transform: translateY(-50%);
    transition: transform 0.2s ease, opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.shop-mfp-popup .mfp-arrow:hover {
    opacity: 0.92;
    transform: translateY(-50%) scale(1.05);
}

.shop-mfp-popup .mfp-arrow:active {
    margin-top: 0;
    transform: translateY(-50%) scale(0.96);
}

.shop-mfp-popup .mfp-arrow-left {
    left: 12px;
}

.shop-mfp-popup .mfp-arrow-right {
    right: 12px;
}

.shop-mfp-popup .mfp-arrow::after {
    display: none;
}

.shop-mfp-popup .mfp-arrow::before {
    content: "\f053";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 15px;
    line-height: 1;
    color: #fff;
    border: 0;
    width: auto;
    height: auto;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 1;
}

.shop-mfp-popup .mfp-arrow-right::before {
    content: "\f054";
}

.shop-mfp-popup .mfp-close {
    color: var(--mainColor);
    opacity: 1;
    font-size: 36px;
    right: 12px;
    top: 8px;
}

.shop-mfp-popup .mfp-counter {
    color: #fff;
    font-size: 13px;
    line-height: 1;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.45);
    right: 12px;
    bottom: 12px;
    top: auto;
}

@media (max-width: 767px) {
    .shop-mfp-popup .mfp-container {
        padding: 0 44px;
    }

    .shop-mfp-popup .mfp-arrow {
        width: 38px;
        height: 38px;
    }

    .shop-mfp-popup .mfp-arrow-left {
        left: 6px;
    }

    .shop-mfp-popup .mfp-arrow-right {
        right: 6px;
    }

    .shop-mfp-popup .mfp-arrow::before {
        font-size: 13px;
    }
}

.shop-gallery-hint {
    position: absolute;
    left: 12px;
    bottom: 12px;
    font-size: 11px;
    color: #fff;
    background: rgba(0, 0, 0, 0.55);
    padding: 5px 10px;
    border-radius: 999px;
    pointer-events: none;
}

.shop-detail-page .shop-gallery-main-wrap {
    position: relative;
    background: #f8f9fa;
    border-radius: 0.75rem;
    overflow: hidden;
}

.shop-detail-page .shop-gallery-counter {
    margin-bottom: 0;
}

.shop-detail-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.shop-detail-stack .shop-detail-summary {
    margin-bottom: 0;
}

/* Shop detail page */
.shop-detail-page {
    color: #1f2937;
}

.shop-detail-back {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 15px;
    background: #fff;
    border: 1px solid #e5e7eb;
    color: #374151;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: none;
}

.shop-detail-back:hover {
    color: var(--mainColor);
    border-color: color-mix(in srgb, var(--mainColor) 35%, #e5e7eb);
}

.shop-detail-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.shop-detail-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--mainColor) 12%, #fff);
    color: var(--mainColor);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.shop-detail-badge:hover {
    background: color-mix(in srgb, var(--mainColor) 20%, #fff);
    color: var(--mainColor);
}

.shop-detail-badge--muted {
    background: #f3f4f6;
    color: #6b7280;
}

.shop-detail-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1.25rem;
    box-shadow: none;
}

.shop-detail-summary {
    margin-bottom: 1rem;
}

.shop-detail-title {
    font-size: clamp(1.35rem, 2.5vw, 1.85rem);
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 0.75rem;
    color: #111827;
}

.shop-detail-meta {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
}

.shop-detail-meta li {
    font-size: 13px;
    color: #6b7280;
}

.shop-detail-meta i {
    color: var(--mainColor);
    margin-right: 4px;
}

.shop-detail-price-box {
    background: linear-gradient(135deg, color-mix(in srgb, var(--mainColor) 10%, #fff), #fff);
    border: 1px solid color-mix(in srgb, var(--mainColor) 18%, #e5e7eb);
    border-radius: 0.85rem;
    padding: 1rem 1.15rem;
    margin-bottom: 1.15rem;
}

.shop-detail-price-label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #6b7280;
    margin-bottom: 4px;
}

.shop-detail-price {
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 800;
    color: var(--mainColor);
    line-height: 1.2;
}

.shop-detail-price--contact {
    font-size: 1.1rem;
    font-weight: 600;
}

.shop-detail-desc-block {
    margin-bottom: 1.15rem;
    padding-bottom: 1.15rem;
    border-bottom: 1px solid #e5e7eb;
}

.shop-detail-desc-block__title {
    margin: 0 0 0.75rem;
    font-size: 1rem;
    font-weight: 700;
    color: #111827;
}

.shop-detail-desc-block__title i {
    color: var(--mainColor);
}

.shop-detail-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 1rem;
}

.shop-detail-btn-wa,
.shop-detail-btn-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border-radius: 15px;
    font-weight: 600;
    font-size: 14px;
    border: 0;
    transition: all 0.2s ease;
}

.shop-detail-btn-wa {
    background: #25d366;
    color: #fff;
}

.shop-detail-btn-wa:hover {
    background: #1ebe57;
    color: #fff;
    transform: translateY(-1px);
}

.shop-detail-btn-copy {
    background: #fff;
    color: #374151;
    border: 1px solid #d1d5db;
}

.shop-detail-btn-copy:hover {
    border-color: var(--mainColor);
    color: var(--mainColor);
}

.shop-detail-share {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-top: 0.85rem;
    border-top: 1px dashed #e5e7eb;
    font-size: 14px;
    color: #6b7280;
}

.shop-seller-card__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid #f0f1f3;
}

.shop-seller-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mainColor) 14%, #fff);
    color: var(--mainColor);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.shop-seller-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.shop-seller-card__subtitle {
    margin: 2px 0 0;
    font-size: 12px;
    color: #9ca3af;
}

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

.shop-seller-item {
    background: #f9fafb;
    border-radius: 0.75rem;
    padding: 12px;
}

.shop-seller-item--full {
    grid-column: 1 / -1;
}

.shop-seller-item__label {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 4px;
}

.shop-seller-item__label i {
    color: var(--mainColor);
    margin-right: 4px;
}

.shop-seller-item__value {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    word-break: break-word;
}

.shop-seller-social {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed #e5e7eb;
}

.shop-seller-social__label {
    display: block;
    font-size: 12px;
    color: #6b7280;
    margin-bottom: 8px;
}

.shop-seller-social__links {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.shop-seller-social__btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--mainColor) 12%, #fff);
    color: var(--mainColor);
    text-decoration: none;
    transition: all 0.2s ease;
}

.shop-seller-social__btn:hover {
    background: var(--mainColor);
    color: #fff;
    transform: translateY(-2px);
}

.shop-detail-section-head h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
}

.shop-detail-section-head i {
    color: var(--mainColor);
}

.shop-detail-desc__body {
    font-size: 15px;
    line-height: 1.75;
    color: #374151;
}

.shop-detail-desc__body img {
    max-width: 100%;
    height: auto;
    border-radius: 0.5rem;
}

.shop-detail-related__more {
    font-size: 14px;
    font-weight: 600;
    color: var(--mainColor);
    text-decoration: none;
}

.shop-detail-related__more:hover {
    text-decoration: underline;
}

.shop-related-card {
    display: block;
    height: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.85rem;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    box-shadow: none;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.shop-related-card:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--mainColor) 35%, #e5e7eb);
    color: inherit;
}

.shop-related-card__img {
    aspect-ratio: 1 / 1;
    background: #f8f9fa;
    overflow: hidden;
}

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

.shop-related-card__body {
    padding: 12px;
}

.shop-related-card__body h5 {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    color: #111827;
}

.shop-related-card__price {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: var(--mainColor);
    margin-bottom: 4px;
}

.shop-related-card__store {
    display: block;
    font-size: 12px;
    color: #9ca3af;
}

.shop-related-card__store i {
    color: var(--mainColor);
}



/* Shop list page */
.shop-list-page {
    color: #1f2937;
}

.shop-list-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.shop-list-head__label {
    display: block;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #9ca3af;
    margin-bottom: 4px;
}

.shop-list-head__title {
    margin: 0;
    font-size: clamp(1.25rem, 2.5vw, 1.6rem);
    font-weight: 700;
    color: #111827;
}

.shop-list-head__count {
    font-size: 13px;
    font-weight: 600;
    color: var(--mainColor);
    background: color-mix(in srgb, var(--mainColor) 10%, #fff);
    border: 1px solid color-mix(in srgb, var(--mainColor) 20%, #e5e7eb);
    padding: 6px 12px;
    border-radius: 999px;
}

.shop-list-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.85rem;
    overflow: hidden;
    transition: border-color 0.2s ease, transform 0.2s ease;
}

.shop-list-card:hover {
    border-color: color-mix(in srgb, var(--mainColor) 35%, #e5e7eb);
    transform: translateY(-2px);
}

.shop-list-card__media {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    background: #f8f9fa;
    overflow: hidden;
}

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

.shop-list-card:hover .shop-list-card__media img {
    transform: scale(1.03);
}

.shop-list-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--mainColor);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid color-mix(in srgb, var(--mainColor) 20%, #e5e7eb);
    padding: 4px 10px;
    border-radius: 999px;
}

.shop-list-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 14px;
}

.shop-list-card__title {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}

.shop-list-card__title a {
    color: #111827;
    text-decoration: none;
}

.shop-list-card__title a:hover {
    color: var(--mainColor);
}

.shop-list-card__excerpt {
    margin: 0 0 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #6b7280;
}

.shop-list-card__price {
    font-size: 16px;
    font-weight: 800;
    color: var(--mainColor);
    margin-bottom: 8px;
}

.shop-list-card__price--contact {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
}

.shop-list-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin-bottom: 12px;
    font-size: 12px;
    color: #9ca3af;
}

.shop-list-card__meta i {
    color: var(--mainColor);
    margin-right: 4px;
}

.shop-list-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: auto;
}

.shop-list-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 10px;
    border-radius: 15px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #e5e7eb;
    transition: all 0.2s ease;
}

.shop-list-card__btn--detail {
    background: #fff;
    color: #374151;
}

.shop-list-card__btn--detail:hover {
    border-color: var(--mainColor);
    color: var(--mainColor);
}

.shop-list-card__btn--wa {
    background: #25d366;
    border-color: #25d366;
    color: #fff;
}

.shop-list-card__btn--wa:hover {
    background: #1ebe57;
    border-color: #1ebe57;
    color: #fff;
}

.shop-list-empty {
    text-align: center;
    padding: 3rem 1rem;
    border: 1px dashed #d1d5db;
    border-radius: 0.85rem;
    color: #9ca3af;
}

.shop-list-empty i {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    color: #d1d5db;
}

.shop-list-empty p {
    margin: 0;
}

.shop-sidebar-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.85rem;
    padding: 1rem;
    box-shadow: none;
}

.shop-sidebar-card__title {
    margin: 0 0 0.85rem;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.shop-sidebar-card__title i {
    color: var(--mainColor);
}

.shop-sidebar-search {
    display: flex;
    gap: 8px;
}

.shop-sidebar-search .form-control {
    border: 1px solid #e5e7eb;
    border-radius: 0.65rem;
    font-size: 14px;
}

.shop-sidebar-search .form-control:focus {
    border-color: var(--mainColor);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mainColor) 15%, transparent);
}

.shop-sidebar-search__btn {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 15px;
    background: var(--mainColor);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.shop-sidebar-categories {
    list-style: none;
    margin: 0;
    padding: 0;
}

.shop-sidebar-categories li + li {
    margin-top: 4px;
}

.shop-sidebar-categories a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 0.55rem;
    font-size: 14px;
    color: #374151;
    text-decoration: none;
    transition: all 0.2s ease;
}

.shop-sidebar-categories a:hover,
.shop-sidebar-categories a.is-active {
    background: color-mix(in srgb, var(--mainColor) 10%, #fff);
    color: var(--mainColor);
}

.shop-sidebar-categories__count {
    font-size: 12px;
    font-weight: 600;
    color: #9ca3af;
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 999px;
}

.shop-sidebar-categories a.is-active .shop-sidebar-categories__count {
    background: color-mix(in srgb, var(--mainColor) 15%, #fff);
    color: var(--mainColor);
}

@media (max-width: 767px) {
    .shop-list-page,
    .shop-detail-page {
        padding-top: 1rem;
        padding-bottom: 5.5rem;
    }

    .clean-breadcrumb-wrap {
        margin-top: 0.5rem;
    }

    .clean-breadcrumb {
        padding: 8px 12px;
    }

    .clean-breadcrumb__item {
        font-size: 12px;
        line-height: 1.4;
    }

    .clean-breadcrumb__item:not(:last-child)::after {
        margin: 0 6px;
    }

    /* List mobile */
    .shop-list-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 1rem;
        padding-bottom: 0.85rem;
    }

    .shop-list-head__title {
        font-size: 1.2rem;
        word-break: break-word;
    }

    .shop-list-head__count {
        font-size: 12px;
    }

    .shop-sidebar {
        padding-top: 0 !important;
    }

    .shop-sidebar-card {
        padding: 0.85rem;
    }

    .shop-sidebar-card__title {
        font-size: 14px;
        margin-bottom: 0.65rem;
    }

    .shop-list-card__body {
        padding: 12px;
    }

    .shop-list-card__title {
        font-size: 14px;
    }

    .shop-list-card__excerpt {
        font-size: 12px;
        margin-bottom: 8px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .shop-list-card__price {
        font-size: 15px;
    }

    .shop-list-card__actions {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .shop-list-card__btn {
        padding: 8px;
        font-size: 12px;
    }

    .shop-list-pagination {
        display: flex;
        justify-content: center;
    }

    .shop-list-pagination .pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
    }

    /* Detail mobile */
    .shop-detail-header {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        margin-bottom: 1rem !important;
    }

    .shop-detail-back {
        justify-content: center;
        width: 100%;
    }

    .shop-detail-badges {
        width: 100%;
    }

    .shop-detail-card {
        padding: 1rem;
        border-radius: 0.75rem;
    }

    .shop-detail-title {
        font-size: 1.2rem;
    }

    .shop-detail-meta {
        gap: 6px 12px;
    }

    .shop-detail-meta li {
        font-size: 12px;
    }

    .shop-detail-price-box {
        padding: 0.85rem;
        margin-bottom: 1rem;
    }

    .shop-detail-price {
        font-size: 1.35rem;
    }

    .shop-detail-desc-block {
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }

    .shop-detail-desc-block__title {
        font-size: 0.95rem;
    }

    .shop-detail-desc__body {
        font-size: 14px;
        line-height: 1.65;
    }

    .shop-detail-actions {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .shop-detail-btn-wa,
    .shop-detail-btn-copy {
        padding: 11px 10px;
        font-size: 13px;
    }

    .shop-detail-share {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .shop-gallery-main-wrap {
        border-radius: 0.65rem;
    }

    .shop-gallery-hint {
        font-size: 10px;
        left: 8px;
        bottom: 8px;
        padding: 4px 8px;
    }

    .shop-gallery-nav {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }

    .shop-gallery-thumb {
        width: 56px;
        height: 56px;
        flex: 0 0 56px;
    }

    .shop-gallery-thumbs-bar {
        gap: 6px;
        margin-top: 10px;
    }

    .shop-gallery-counter {
        font-size: 11px;
        margin-top: 6px;
    }

    .shop-seller-grid {
        grid-template-columns: 1fr;
    }

    .shop-seller-card__head {
        gap: 10px;
    }

    .shop-seller-card__icon {
        width: 38px;
        height: 38px;
        font-size: 16px;
    }

    .shop-detail-related .shop-detail-section-head {
        flex-direction: column;
        align-items: flex-start !important;
    }

    .shop-related-card__body {
        padding: 10px;
    }

    .shop-related-card__body h5 {
        font-size: 13px;
    }

    .shop-related-card__price {
        font-size: 13px;
    }
}

@media (max-width: 399px) {
    .shop-list-card__actions,
    .shop-detail-actions {
        grid-template-columns: 1fr;
    }

    .shop-detail-btn-wa,
    .shop-detail-btn-copy,
    .shop-list-card__btn {
        width: 100%;
    }
}

.thumb-img{
    width:70px;
    height:70px;
    object-fit:cover;
    cursor:pointer;
    border:2px solid transparent;
    border-radius:6px;
    transition:0.2s;
}
.thumb-img:hover{
    transform:scale(1.05);
}
.thumb-img.active{
    border:2px solid #0d6efd;
}
.btn-copy{
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-top: 1px;
}


/*TABS*/
.nav-bg{
    padding:6px;
    border-bottom:3px solid #e5e7eb;
}

.nav-tabs{
    display:flex;
    gap:6px;
    justify-content:center; /* membuat tabs ke tengah */
}

.nav-tabs .nav-link-tabs{
    padding:10px 18px;
    text-decoration:none;
    color:#555;
    border-radius:15px 15px 0 0;
    position:relative;
    font-weight:500;
}

.nav-tabs .nav-link-tabs:hover{
    background:#b9edfa;
}

.nav-tabs .nav-link-tabs.active{
    background:#b9edfa;
    color:#000;
}

.nav-tabs .nav-link-tabs.active::after{
    content:"";
    position:absolute;
    left:0;
    bottom:-3px;
    width:100%;
    height:4px;
    background:#1e71ee;
    border-radius:2px;
}


.one-card{
    background:#fff;
    border-radius:30px;
    padding: 30px 30px 20px 30px;
    box-shadow: var(--boxShadow);
}




.sidebar-card {
    border-radius: 30px!important;
}



.data-card {
    margin-top: 20px;
    padding: 25px 25px 25px 25px;
    background-color: var(--whiteColor);
    -webkit-box-shadow: var(--boxShadow);
    box-shadow: var(--boxShadow);
    position: relative;
}
.card-white-box{
    margin-top:40px;
    -webkit-box-shadow: var(--boxShadow);
    box-shadow: var(--boxShadow);
    background-color: var(--whiteColor);
    border-radius:30px;
}

.rounded{border-radius: 30px!important;}
.rounded-15{border-radius: 15px;}

/* TOPBAR */
.topbar{
    border-radius: 0px;
}
.topbar-left-area ul li i {
    font-size: 13px;
    color: var(--whiteColor);
}
.topbar-right-area ul li i {
    font-size: 13px;
    color: var(--whiteColor);
}
/* END TOPBAR */

:root {
    --logo-height: 70px;
    --logo-height-sticky: 60px;
    --logo-height-mobile: 48px;
    --logo-max-width: 220px;
    --logo-padding-y: 10px;
}

/* Logo dark/white: container tetap agar ukuran presisi saat toggle & zoom browser */
.navbar-area .navbar-brand,
.fullpage-menu-logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    height: calc(var(--logo-height) + (var(--logo-padding-y) * 2));
    line-height: 0;
    padding: var(--logo-padding-y) 0;
    box-sizing: border-box;
}

.navbar-area .navbar-brand {
    margin-right: 1rem;
}

.navbar-area .navbar-brand .logo,
.fullpage-menu-logo .logo {
    height: var(--logo-height);
    width: auto;
    max-width: min(var(--logo-max-width), 40vw);
    object-fit: contain;
    object-position: left center;
    margin: 0 !important;
    transition: height 0.2s ease, opacity 0.15s ease;
}

.navbar-area .navbar-brand .logo-white,
.fullpage-menu-logo .logo-white {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.navbar-area .navbar-brand .logo-dark,
.navbar-area .navbar-brand .logo-white,
.fullpage-menu-logo .logo-dark,
.fullpage-menu-logo .logo-white {
    display: block !important;
}

.navbar-area .navbar-brand .logo-dark,
.fullpage-menu-logo .logo-dark {
    visibility: visible;
    opacity: 1;
}

.navbar-area .navbar-brand .logo-white,
.fullpage-menu-logo .logo-white {
    visibility: hidden;
    opacity: 0;
}

.navbar-area.sticky .navbar-brand,
.sticky .navbar-brand {
    height: calc(var(--logo-height-sticky) + (var(--logo-padding-y) * 2));
}

.navbar-area.sticky .navbar-brand .logo,
.sticky .navbar-brand .logo,
.sticky .logo {
    height: var(--logo-height-sticky) !important;
}

.navbar-area.sticky .navbar-brand .logo-dark,
.sticky .logo-dark {
    visibility: hidden;
    opacity: 0;
}

.navbar-area.sticky .navbar-brand .logo-white,
.sticky .logo-white {
    visibility: visible;
    opacity: 1;
}

.fullpage-menu-logo {
    height: calc(var(--logo-height-mobile) + (var(--logo-padding-y) * 2));
}

.fullpage-menu-logo .logo {
    height: var(--logo-height-mobile) !important;
    max-height: var(--logo-height-mobile);
}

.fullpage-menu-logo .logo-dark {
    visibility: hidden;
    opacity: 0;
}

.fullpage-menu-logo .logo-white {
    visibility: visible;
    opacity: 1;
}

.box-shadow{
    -webkit-box-shadow: 0px 0px 8px -1px rgba(89,89,89,1);
    -moz-box-shadow: 0px 0px 8px -1px rgba(89,89,89,1);
    box-shadow: 0px 0px 8px -1px rgba(89,89,89,1);
}


.grafik-card {
    margin-top: 30px;
    padding: 30px 20px 30px 20px;
    position: relative;
    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    background-color: var(--whiteColor);
    -webkit-box-shadow: var(--boxShadow);
    box-shadow: var(--boxShadow)
}

.infografis-page .sidebar-card,
.infografis-page .grafik-card,
.infografis-page .contact-card,
.infografis-page .card {
    border: 1px solid #e5e7eb !important;
}

.text-main{--bs-text-opacity: 1;
    color:var(--mainColor);}
.font3{
    font-family: var(--fontFamily3);
}
.font-10{
    font-size:10px;
}
.font-11{
    font-size:11px;
}
.font-12{
    font-size:12px;
}
.font-14{
    font-size:14px;
}
.text-p{
    color:var(--paragraphColor);
}
.img-comment{
    width: 60px !important;
    height: 60px !important;
}
.img-testimonial{
    width: 60px !important;
    height: 60px !important;
}

ol li {
    font-family: var(--fontFamily2);
    color: var(--paragraphColor);
    font-size: var(--fontSize);
    /* margin-bottom: 15px; */
    line-height: 1.8;
}

.mt-40{margin-top: 40px;}


.mt--50 {
    margin-top: -50px;
}

.ptb-50 {
    padding-top: 50px;
    padding-bottom: 50px;
}
.pb-50 {
    padding-bottom: 50px;
}
.pt-50 {
    padding-top: 50px;
}
.pt-150 {
    padding-top: 150px;
}

.card-process{
    min-height:300px;
}

/* FORM PUBLIC*/
.btn-close {background:none!important;}
.bg-gray-100 {
    background-color: #f0eeff;
}
.pd-sm-30 {
    padding: 30px;
}
.mg-b-20 {
    margin-bottom: 20px;
}
.mg-b-5 {
    margin-bottom: 5px;
}
.mg-e-15 {
    margin-right: 15px;
}
.form-control {
    display: block;
    width: 100%;
    height: inherit;
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.5;
    color: #817ba7;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #dedcfb !important;
    border-radius: 3px;
    transition: border-color 0.15s 
ease-in-out, box-shadow 0.15s 
ease-in-out;
}
.form-label {
    display: block;
    margin-bottom: 5px;
    color: #817ba7;
}
.tx-danger {
    color: #f53c5b;
}

.main-content-label, .card-table-two .card-title, .card-dashboard-eight .card-title {
    color: #302e40;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 10px;
    letter-spacing: 0.2px;
}
.rdiobox {
    font-weight: normal;
    position: relative;
    display: block;
    line-height: 18px;
}
hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    background-color: #c8c2df !important;
}

/* END FORM PUBLIC*/
/* SELECT2 */
.select2-container .select2-selection--single {
    height: 34px!important;
}
.select2-container--default .select2-selection--single {
    background-color: #fff;
     border: 1px solid #dedcfb !important;
    border-radius: 3px;
}
/* END SELECT2 */

/* INDEX */
.we-are{
    margin-top:50px!important;
    margin-bottom:50px!important;
    border-radius:50px;
    width: 96%;
    margin: 0 auto;
    background:#e8fedd;
}
.team{
    margin-top:50px!important;
    margin-bottom:50px!important;
    border-radius:50px;
    width: 96%;
    margin: 0 auto;
    background:#F9FAFB;
}
/* END INDEX */

/* CARD PROGRAM */
.card-program{
    /* background: var(--mainColor); */
    margin-top: 20px;
    padding: 30px;
    border-radius: 30px;
    text-align:center;
    -webkit-box-shadow: var(--boxShadow);
    box-shadow: var(--boxShadow);
    background-color: var(--whiteColor);
}
.card-program h4{
    font-size: 16px;
    vertical-align: middle;
    font-family: var(--fontFamily2);
}
.card-program a{
    font-family: var(--fontFamily2);
    font-weight: bold;
}
.card-program:hover{
    background: var(--mainColor);
    color:#ffffff;
}
.card-program h4 a:hover{
    color:#ffffff;
}
/* END CARD PROGRAM */

.cta-card{
    position:absolute;
    background: var(--mainColor);
    padding: 60px;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
}
.cta-card-button a{
    text-align: center;
    font-weight:bold;
    font-family: var(--fontFamily);
    border-radius: 50px;
}
.cta-card h2{
    text-align: left;
    font-size: 28px;
    font-family: var(--fontFamily3);
}
.cta-card h5{
    font-size: 20px;
    line-height: 1.8;
    font-weight:400;
}




/* SCROLLBAR CUSTOM (MODERN CAPSULE STYLE)*/
::-webkit-scrollbar {
  width: 12px; 
  height: 12px; 
}
::-webkit-scrollbar-track {
  background: #f1f1f1; 
  border-radius: 10px;
}
::-webkit-scrollbar-thumb {
  background-color: #c1c1c1; 
  border-radius: 10px;       
  border: 3px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: #a8a8a8; 
}
* {
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}
/* END SCROLLBAR CUSTOM (MODERN CAPSULE STYLE)*/
  

/* BANNER BREADCUMB */
.uni-banner-text-area{
    padding-top: 180px!important;
    padding-bottom: 80px!important;
}
.uni-banner::before {
    background-color: rgb(0 0 0 / 61%)!important;
}
/* END BANNER BREADCUMB */

/*BERITA*/
.berita-style1{
    margin-top:40px;
    -webkit-box-shadow: var(--boxShadow);
    box-shadow: var(--boxShadow);
    background-color: var(--whiteColor);
    border-radius:30px;
    border:1px solid transparent;

    -webkit-transition: .5s ease-in-out;
    transition: .5s ease-in-out
}

.berita-style1:hover{
    transform: translateY(-8px)!important;
    
    box-shadow: var(--boxShadow);
    border-color:var(--mainColor);
}
.berita-style1 .img-berita{
    border-radius: 30px;
    overflow: hidden;
}
.berita-style1 .img-berita img{
    width:100%;
    height:280px;
    object-fit:cover;
    object-position:top center;
    display:block;
    transition:transform .4s ease;
}
.berita-style1:hover .img-berita img{
    transform:scale(1.05);
}
.berita-style1 h5{
    font-family: var(--fontFamily);
    font-weight:700;
}
.berita-style1 .card-body{
    padding:40px 30px 40px 30px;
}
.berita-style1 h3{
    font-family: var(--fontFamily2);
}
.berita-1 .default-section-title{
    margin-top:30px;
    padding-bottom:2px;
}
.berita-1 .section-content{
    margin-top:30px;
    margin-bottom:30px;
}
/*END BERITA*/

/*READMORE*/
.read-more-btn{
    display:inline-block;
    margin-top:20px;
    padding:8px 18px;
    border:1px solid var(--mainColor);
    color:var(--mainColor);
    font-size: 14px;
    background:transparent;
    border-radius:15px;
    text-decoration:none;
    transition:all .3s ease;
}
.read-more-btn:hover{
    background:var(--mainColor);
    color:#fff;
}
/*END READMORE*/

/*PENGUMUMAN*/
.pengumuman-modern{
    margin-top:40px;
    background:#fff;
    border-radius:30px;
    padding: 30px 30px 20px 30px;
    border: 1px solid #e5e7eb;
    box-shadow: var(--boxShadow);
}
.announcement-item{
    margin-bottom:15px;
    padding:20px;
    border-radius:20px;
    transition:.3s;
    border:1px solid #e5e7eb;
    background:#fff;
}
.announcement-item:hover{
    border-color:var(--mainColor);
    background:#f8fafc;
    transform:translateX(8px);
}
.announcement-icon{
    width:60px;
    height:60px;
    border:1px solid #d6d6d6;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:18px;
    flex-shrink:0;
    transition:.3s;
}
.announcement-icon i{
    font-size:20px;
    color:#6c757d;
}
.announcement-item:hover .announcement-icon{
    border-color:var(--mainColor);
    background:var(--mainColor);
}
.announcement-item:hover .announcement-icon i{
    color:#fff;
}
.announcement-date{
    font-size: 14px;
    font-family: var(--fontFamily2);
    color:#6c757d;
    margin-bottom:6px;
}
.announcement-title{
    font-family: var(--fontFamily);
    font-size: 1.25rem;
    font-weight:700;
    line-height:1.4;
}


/*END PENGUMUMAN*/
/*BACKGROUND*/
.bg-default{
    background: var(--mainColor);
}
.bg-darknavy{
    background:#181B29;
}
.bg-navbar{
    background: var(--mainColor);
}
.bg-img-one {
    position: relative;
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    background-image: url(../images/bg/bg-shape.jpg);
    background-attachment: fixed;

}
.bg-pattern-one {
    background: linear-gradient(45deg,#0000 calc(25%/3), #ededed 0 calc(50%/3),
      #0000 0 calc(250%/3), #ededed 0 calc(275%/3),
      #0000 0),linear-gradient( 45deg,#ededed calc(25%/3), #0000 0 calc(50%/3),
      #ededed 0 25%, #0000 0 75%,
      #ededed 0 calc(250%/3), #0000 0 calc(275%/3),
      #ededed 0),
      linear-gradient(-45deg,#0000 calc(25%/3), #ededed 0 calc(50%/3),
      #0000 0 calc(250%/3), #ededed 0 calc(275%/3),
      #0000 0),linear-gradient(-45deg,#ededed calc(25%/3), #0000 0 calc(50%/3),
      #ededed 0 25%, #0000 0 75%,
      #ededed 0 calc(250%/3), #0000 0 calc(275%/3),
      #ededed 0)
      #ffffff;
    background-size: 20px 20px;
    background-position: 0 0, 10px  10px;

}
.bg-patter-two{
    background:
      conic-gradient(at 62.5% 12.5%, #ededed 25%, #0000 0) calc(12px/-8) calc(12px/2),
      conic-gradient(at 62.5% 12.5%, #ededed 25%, #0000 0) calc(-3*12px/8) calc(12px/4),
      conic-gradient(at 87.5% 62.5%, #ededed 25%, #0000 0) calc(3*12px/8) calc(12px/4),
      conic-gradient(at 87.5% 62.5%, #ededed 25%, #0000 0) calc(12px/-8) 0,
      conic-gradient(at 25% 12.5%, #ededed 25%, #0000 0) 0 calc(12px/-4),
      conic-gradient(at 25% 12.5%, #ededed 25%, #0000 0) calc(12px/-4) 0,
      conic-gradient(at 87.5% 87.5%, #ededed 25%, #0000 0) calc(12px/8) 0
      #ffffff;
    background-size: 12px 12px;

}
.bg-grafik-info{
    background:#45C8FF;
}
.bg-grafik-purple{
    background:#6D68DE
}

/*END BACKGROUND*/



/*CAROUSEL*/
#carouselHome img{
    height:800px;
    object-fit: cover;
    object-position: top center;
}
#carouselHome .carousel-inner {
    position: relative;
    width: 96%;
    overflow: hidden;
    margin: 0 auto;
    border-radius: 50px;
}
.carousel-caption {
    position: absolute;
    right: 20%;
    top: 30%;
    left: 20%;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
    color: #fff;
    text-align: center;
    font-weight: bold;
    box-shadow: 4px solid #000;
    z-index:1;
    /* background:#000; */
}
.tx-shadow{
    text-shadow: 2px 2px 4px rgba(0,0,0,0.34);
}
.carousel-caption p{
    font-size: 1.5rem;
    line-height: 2.5rem;
    font-weight: normal;
}
.carousel-item:after {
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    background:rgba(0, 0, 0, 0.42);
  }
.half-black{
    background:rgba(0,0,0,0.5);
}

.carousel-caption h5{
    font-size:35px;
    font-family: var(--fontFamily3);
}
.carousel-caption h1{
    font-size:50px;
    font-family: var(--fontFamily3);
}
.carousel-caption p{
    font-size:20px;
    font-family: var(--fontFamily3);
}
.carousel-caption a{
    padding:10px;
    background-color: var(--mainColor);
    border-radius:50px;
    border:1px solid #fff;
    color:#ffffff;
    width:280px;
    margin-top: 25px;
    margin-left:5px;
    margin-right:5px;
    font-family: var(--fontFamily3);
}
.carousel-caption a:hover{
    padding:10px;
    color: var(--whiteColor);
    background-color: var(--blackColor);
    border-radius:50px;
    font-family: var(--fontFamily3);
}
.carousel-indicators {display:none}
/* .carousel-control-prev-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E")!important;
}
.carousel-control-next-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E")!important;
} */
/*END CAROUSEL*/


/*icon social*/
.icon-social{
    background: #ffffff;
    padding:2px;
}
/*end icon social*/


/* glossy overlay */
.animasi-light {
    position: relative;
}
.animasi-light::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.35),
        transparent
    );
    transform: skewX(-25deg);
    animation: glossy-move 6s linear infinite; /* total cycle 6s */
}
@keyframes glossy-move {
    0%   { left: -100%; }
    50%  { left: 150%; }   /* selesai animasi di 3 detik */
    100% { left: 150%; }   /* sisa 3 detik diam */
}
/* end glossy overlay */

/* navbottom */
.nav-link {
    background: none !important;
    border: none !important;
    padding: 6px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.nav-link i {
    font-size: 20px;
    color: #000;
}

.nav-text {
    font-size: 11px;
    line-height: 1;
    color: #000;
}

.nav-link.active i,
.nav-link.active .nav-text {
    color: var(--mainColor);
}

.nav-link:hover i,
.nav-link:hover .nav-text {
    color: var(--mainColor);
}
/*end navbottom */

/*TABEL*/
/*tabel costum 1*/
.tborder{
	font-size:12px;
}
.tborder table {
  border-collapse:collapse;
  width:100%;
  margin:0 auto 25px auto!important;
}
.tborder table, .tborder th, .tborder td {
  border: 1px solid #dedcfb!important;
  padding:4px 10px!important;
  color:rgb(31, 31, 31)!important;
}
.tborder tr {
  color:rgb(31, 31, 31);
  font:normal 12px Arial, Helvetica, sans-serif;
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
  -o-transition:All 1s ease;
  transition:All 1s ease;
}
.tborder th {
  color:white;
  font-weight:bold!important;
  background-color:#9bcff9!important;
}

 


/*tabel costum 2*/
.tborder-bottom{
	font-size:14px;
}
.tborder-bottom table {
  border-collapse:collapse;
  width:100%;
  margin:0 auto 25px auto;
}
.tborder-bottom table, .tborder-bottom th, .tborder-bottom td {
  border-bottom: 1px solid #4d4d4d;
  padding:5px 10px;
}
.tborder-bottom tr {
  color:black;
  font:normal 14px Arial, Helvetica, sans-serif;
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
  -o-transition:All 1s ease;
  transition:All 1s ease;
}
.tborder-bottom th {
  color:white;
  font-weight:bold;
  background-color:#009688;
}


/*tabel costum 3*/
.tborder_2{
	font-size:12px;
}
.tborder_2 table {
  border-collapse:collapse;
  width:100%;
  margin:0 auto 25px auto;
}
.tborder_2 table, .tborder_2 th, .tborder_2 td {
  border: 1px solid #cacaca;
  padding:5px 10px;
}
.tborder_2 tr {
  color:rgb(255, 255, 255);
  font:normal 12px Arial, Helvetica, sans-serif;
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
  -o-transition:All 1s ease;
  transition:All 1s ease;
}
.tborder_2 th {
  color:rgb(94, 94, 94);
  font-weight:bold;
  background-color:#d4dadd;
}
.hoverlink:hover{
	color:rgb(194, 194, 250);
}


/*tabel costum 4*/
.tborder_2-bottom{
	font-size:13px;
}
.tborder_2-bottom table {
  border-collapse:collapse;
  width:100%;
  margin:0 auto 25px auto;
}
.tborder_2-bottom table, .tborder_2-bottom th, .tborder_2-bottom td {
  border-bottom: 1px solid #cacaca;
  padding:5px 10px;
}
.tborder_2-bottom tr {
  color:black;
  font:normal 14px Arial, Helvetica, sans-serif;
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
  -o-transition:All 1s ease;
  transition:All 1s ease;
}
.tborder_2-bottom th {
	color:rgb(94, 94, 94);
	font-weight:bold;
	background-color:#d4dadd;
}

/*tabel costum 5*/
.tborder_3{
	font-size:12px;
}
.tborder_3 table {
  border-collapse:collapse;
  width:100%;
  margin:0 auto 25px auto;
}
.tborder_3 table, .tborder_3 th, .tborder_3 td {
  border-bottom: 0px solid #cacaca;
  padding:5px 10px;
}
.tborder_3 tr {
  color:black;
  font:normal 14px Arial, Helvetica, sans-serif;
  -webkit-transition:All 1s ease;
  -moz-transition:All 1s ease;
  -o-transition:All 1s ease;
  transition:All 1s ease;
}
.tborder_3 th {
	color:rgb(94, 94, 94);
	font-weight:bold;
	background-color:#d4dadd;
}

/*DATATBLE*/
.dataTables_wrapper .dataTables_scrollHead {
    margin-bottom: 0 !important;
}
.dataTables_wrapper .dataTables_scrollBody {
    margin-top: 0 !important;
    border-top: 0 !important;
}
.dataTables_wrapper .dataTables_scrollFoot {
    margin-top: 0 !important;
}
.dataTables_wrapper table.dataTable {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/*HIGHCHART*/
.highcharts-data-table table {
    border-collapse: collapse;
    margin: 20px auto;
    width: 90%;
    max-width: 600px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border-radius: 8px;
    overflow: hidden;
}

.highcharts-data-table caption {
    caption-side: top;
    font-weight: bold;
    text-align: center;
    padding: 10px;
    font-size: 16px;
    color: #333;
}

.highcharts-data-table thead tr {
    background-color: #9bd6f8;
    color: rgb(36, 36, 36);
    text-align: center;
}

.highcharts-data-table th,
.highcharts-data-table td {
    border: 1px solid #ddd;
    padding: 8px 12px;
}

.highcharts-data-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
}

.highcharts-data-table tbody tr:hover {
    background-color: #f1f1f1;
}

.highcharts-data-table td:first-child {
    text-align: left;
    font-weight: 600;
}
.highcharts-data-table td:last-child {
    text-align: right;
    font-weight: 600;
}

.highcharts-data-table tfoot td {
    font-weight: bold;
    background-color: #f1f1f1;
}

.accordion-button {
    padding: 0.8rem 0.8rem;
    font-size: 15px;
    color: #656565;
}
.accordion-body ol li{
    font-size: 15px;
    color: #656565;
}

/* Prevent AOS horizontal animations from shifting page width */
.row:has(> [data-aos="fade-left"]),
.row:has(> [data-aos="fade-right"]) {
    overflow-x: clip;
}

#area_content {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}


@media only screen and (max-width: 480px) {
    :root {
        --logo-height: var(--logo-height-mobile);
        --logo-padding-y: 8px;
    }

    .navbar-area .navbar-brand {
        height: calc(var(--logo-height-mobile) + (var(--logo-padding-y) * 2));
    }

    .navbar-area .navbar-brand .logo {
        height: var(--logo-height-mobile) !important;
    }

    .navbar-area.sticky .navbar-brand {
        height: calc(var(--logo-height-mobile) + (var(--logo-padding-y) * 2));
    }

    .navbar-area.sticky .navbar-brand .logo,
    .sticky .navbar-brand .logo,
    .sticky .logo {
        height: var(--logo-height-mobile) !important;
    }
    #carouselHome .carousel-inner {
        width: 100%;
        border-radius: 0;
    }
	.carousel-caption {
        top: 10%;
        right: 10%;
        left: 10%;
    }
    .carousel-caption h5{
        font-size:12px;
    }
    .carousel-caption h1{
        font-size:16px;
    }
    .carousel-caption p {
        font-size: 0.6rem;
        line-height: 1.2rem;
    }
    .carousel-caption a{
        margin-top:5px;
        padding:5px;
        font-size: 11px;
        width:200px;
    }
    .carousel-caption a:hover{
        margin-top:5px;
        padding:5px;
        font-size: 11px;
        width:200px;
    }
    
    .cta-card{
        padding:40px;
    }
    .cta-card h2{
        text-align: center;
        font-size: 18px!important;
        font-family: var(--fontFamily3);
    }
    .cta-card h5{
        text-align: center;
        font-size: 14px!important;
    }
    .cta-card-button{
        margin-top:10px;
        text-align: center;
        font-size: 14px!important;
    }


    .berita-style1 .img-berita img {
        height: 300px!important;
    }

    .accordion-grafik{
        font-size:11px!important;
    }
    .accordion-grafik .accordion-button{
        font-size:12px!important;
    }

    

    

}
@media only screen and (max-width: 680px) {
    :root {
        --logo-height: var(--logo-height-mobile);
        --logo-padding-y: 8px;
    }

    .navbar-area .navbar-brand {
        height: calc(var(--logo-height-mobile) + (var(--logo-padding-y) * 2));
    }

    .navbar-area .navbar-brand .logo {
        height: var(--logo-height-mobile) !important;
    }

    .navbar-area.sticky .navbar-brand {
        height: calc(var(--logo-height-mobile) + (var(--logo-padding-y) * 2));
    }

    .navbar-area.sticky .navbar-brand .logo,
    .sticky .navbar-brand .logo,
    .sticky .logo {
        height: var(--logo-height-mobile) !important;
    }
    .carousel-caption {
        top: 10%;
        right: 10%;
        left: 10%;
    }
    .carousel-caption h5{
        font-size:12px;
    }
    .carousel-caption h1{
        font-size:16px;
    }
    .carousel-caption p {
        font-size: 0.6rem;
        line-height: 1.2rem;
    }
    .carousel-caption a{
        margin-top:5px;
        padding:5px;
        font-size: 11px;
        width:200px;
    }
    .carousel-caption a:hover{
        margin-top:5px;
        padding:5px;
        font-size: 11px;
        width:200px;
    }

    .cta-card{
        padding:40px;
    }
    .cta-card h2{
        text-align: center;
        font-size: 18px;
        font-family: var(--fontFamily3);
    }
    .cta-card h5{
        text-align: center;
        font-size: 14px;
    }
    .cta-card-button{
        margin-top:10px;
        text-align: center;
        font-size: 14px;
    }

    .berita-style1 .img-berita img {
        height: 300px;
    }

    .mobile-nav .logo img {
        height: 50px;
        margin-top: 8px;
        margin-left: 10px;
    }

    .accordion-grafik{
        font-size:11px!important;
    }
    .accordion-grafik .accordion-button{
        font-size:12px!important;
    }
}
@media only screen and (max-width: 720px) {
    .cta-card{
        padding:40px;
    }
    .cta-card h2{
        text-align: center;
        font-size: 28px;
        font-family: var(--fontFamily3);
    }
    .cta-card h5{
        text-align: center;
        font-size: 20px;
    }
    .cta-card-button{
        margin-top:10px;
        text-align: center;
        font-size: 14px;
    }

    .berita-style1 .img-berita img {
        height: 300px;
    }
}

/* @media only screen and (max-width: 1024px) {
    
} */

/* Modern Full Page Menu - Mobile Only */
@media only screen and (max-width: 1199px) {
    .navbar-area .main-nav.modern-navbar {
        display: block !important;
    }

    .modern-navbar .modern-nav-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 0;
        min-height: 70px;
    }

    .modern-nav-actions {
        gap: 12px;
    }

    .modern-nav-search.popup-button {
        width: 46px;
        height: 46px;
        border: 0;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.05);
        color: var(--blackColor);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
    }

    .modern-nav-search.popup-button:hover {
        background: var(--mainColor);
        color: #fff;
    }

    .btn-modern-menu {
        width: 52px;
        height: 52px;
        border: 0;
        border-radius: 14px;
        background: var(--mainColor);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
    }

    .btn-modern-menu:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.18);
    }

    .btn-modern-menu .menu-icon {
        width: 22px;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .btn-modern-menu .menu-icon span {
        display: block;
        height: 2px;
        width: 100%;
        background: #fff;
        border-radius: 2px;
        transition: transform 0.3s ease;
    }

    .btn-modern-menu .menu-icon span:nth-child(2) {
        width: 70%;
        margin-left: auto;
    }

    .sticky .modern-nav-search.popup-button {
        background: rgba(255, 255, 255, 0.12);
        color: #fff;
    }
}

.fullpage-menu {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    border: 0;
    background: var(--mainColor);
    color: #fff;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.5s ease;
    box-shadow: none;
    overflow: hidden;
    z-index: 100010 !important;
}

.fullpage-menu.showing,
.fullpage-menu.show {
    visibility: visible;
    transform: translateX(0);
}

.fullpage-menu-inner {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: var(--mainColor);
}

.fullpage-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    flex-shrink: 0;
    background: var(--mainColor);
}

.fullpage-menu-close {
    width: 46px;
    height: 46px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.fullpage-menu-close:hover {
    background: #fff;
    color: var(--mainColor);
    border-color: #fff;
    transform: rotate(90deg);
}

.fullpage-menu-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 8px 20px 24px;
    width: 100%;
    background: var(--mainColor);
}

.fullpage-menu-body::-webkit-scrollbar {
    width: 4px;
}

.fullpage-menu-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.35);
    border-radius: 4px;
}

.fullpage-menu-nav,
.fullpage-menu-list {
    width: 100%;
}

.fullpage-menu-item {
    margin-bottom: 10px;
    position: relative;
    z-index: 2;
}

.fullpage-menu.menu-animated .fullpage-menu-item {
    opacity: 0;
    transform: translateX(50px);
    animation: menuFadeSlideIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: var(--menu-delay, 0s);
}

.fullpage-menu.show .fullpage-menu-item,
.fullpage-menu.showing .fullpage-menu-item {
    pointer-events: auto;
}

.fullpage-menu-link:not(.fullpage-menu-link-group),
.fullpage-menu-link-group.fullpage-menu-link,
.fullpage-submenu-link {
    position: relative;
    z-index: 2;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

button.fullpage-menu-link {
    text-align: left;
}

@keyframes menuFadeSlideIn {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fullpage-menu-link:not(.fullpage-menu-link-group) {
    width: 100%;
    background: transparent;
    color: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    min-height: 58px;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: var(--fontFamily3);
    text-decoration: none;
    text-align: left;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-sizing: border-box;
    transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.fullpage-menu-link-group.fullpage-menu-link {
    width: 100%;
    background: transparent;
    color: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    min-height: 58px;
    font-size: 1.1rem;
    font-weight: 600;
    font-family: var(--fontFamily3);
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-sizing: border-box;
    overflow: hidden;
    transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.fullpage-menu-link-group.fullpage-menu-link .fullpage-menu-text {
    flex: 1;
}

.fullpage-menu-link-group.fullpage-menu-link .fullpage-menu-arrow {
    margin-left: auto;
}

.fullpage-menu-link.active,
button.fullpage-menu-link.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.35);
}

.fullpage-menu-link:hover {
    color: var(--mainColor);
    background: #fff;
    border-color: #fff;
}

.fullpage-menu-link:hover .fullpage-menu-icon {
    color: var(--mainColor);
    opacity: 1;
}

.fullpage-menu-link.active:hover,
.fullpage-menu-link-group.active:hover {
    color: var(--mainColor);
    background: #fff;
    border-color: #fff;
}

.fullpage-menu-link-group {
    display: flex;
    align-items: center;
}

.fullpage-menu-link-group:hover {
    color: var(--mainColor);
    background: #fff;
    border-color: #fff;
}

.fullpage-menu-link-group:hover .fullpage-menu-icon {
    color: var(--mainColor);
    opacity: 1;
}

.fullpage-submenu-toggle:not(.collapsed) .fullpage-menu-arrow {
    transform: rotate(180deg);
}

.fullpage-menu-icon {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
    opacity: 0.75;
    transition: opacity 0.3s ease;
}

.fullpage-menu-link.active .fullpage-menu-icon,
.fullpage-menu-link-group.active .fullpage-menu-icon {
    opacity: 1;
}

.fullpage-menu-text {
    flex: 1;
    line-height: 1.35;
}

.fullpage-menu-arrow {
    font-size: 0.85rem;
    opacity: 0.75;
    transition: transform 0.3s ease;
}

.fullpage-menu-link-group.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.35);
}

.fullpage-submenu {
    padding: 8px 0 4px 32px;
    margin-left: 12px;
    background: var(--mainColor);
}

.fullpage-submenu-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    font-size: 0.98rem;
    font-weight: 500;
    padding: 12px 14px;
    margin-bottom: 8px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.fullpage-submenu-dot {
    font-size: 0.35rem;
    opacity: 0.6;
}

.fullpage-submenu-link.active {
    color: #fff;
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.35);
}

.fullpage-submenu-link:hover {
    color: #181b29;
    background: #fff;
    border-color: #fff;
}

.fullpage-submenu-link.active:hover {
    color: #181b29;
    background: #fff;
    border-color: #fff;
}

.offcanvas-backdrop.show {
    backdrop-filter: blur(6px);
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 100005 !important;
}

body.menu-open {
    overflow: hidden;
}

body.menu-open .navbar-area {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 1 !important;
}

body.menu-open .topbar {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
}

body.menu-open nav.fixed-bottom {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    z-index: 1 !important;
}

@media only screen and (max-width: 767px) {
    .navbar-area.sticky {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        width: auto;
        background-color: transparent !important;
        box-shadow: none;
        animation: none;
    }

    .fullpage-menu-header {
        padding: 16px 18px;
    }

    .fullpage-menu-body {
        padding: 6px 16px 20px;
    }

    .fullpage-menu-link:not(.fullpage-menu-link-group) {
        padding: 14px 16px;
        min-height: 54px;
        font-size: 1.02rem;
        border-radius: 12px;
    }

    .fullpage-menu-link-group.fullpage-menu-link {
        padding: 14px 16px;
        min-height: 54px;
        border-radius: 12px;
    }

    .fullpage-submenu {
        padding-left: 24px;
        margin-left: 10px;
    }

    .fullpage-submenu-link {
        border-radius: 8px;
    }
}

@media only screen and (min-width: 1200px) {
    .btn-modern-menu,
    .modern-navbar,
    #fullpageMenu {
        display: none !important;
    }
}

/* Gallery detail */
.gallery-detail-page {
    scroll-margin-top: 110px;
}

.gallery-detail-page .gallery-detail-title {
    font-size: 1.5rem;
    font-weight: 700;
}

.gallery-detail-page .gallery-detail-meta {
    color: #6c757d;
    font-size: 0.95rem;
}

.gallery-detail-page .gallery-detail-header__top {
    width: 100%;
}

.gallery-detail-page .gallery-detail-header__info {
    flex: 1 1 auto;
    min-width: 0;
}

.gallery-detail-page .gallery-detail-back {
    text-decoration: none;
}

.gallery-detail-page #lightgallery {
    margin-left: 0;
    margin-right: 0;
}

.gallery-detail-page .gallery-item {
    cursor: pointer;
    margin-bottom: 8px;
}

.gallery-detail-page .gallery-item__link {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 12px;
    overflow: hidden;
    background: #f3f4f6;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
    transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.gallery-detail-page .gallery-item__link:hover {
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.14);
    transform: translateY(-2px);
}

.gallery-detail-page .gallery-item__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease;
}

.gallery-detail-page .gallery-item__link:hover .gallery-item__img {
    transform: scale(1.06);
}

.gallery-detail-page .gallery-item__overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 12px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.72) 100%);
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.35;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-detail-page .gallery-item__link:hover .gallery-item__overlay {
    opacity: 1;
}

/* Gallery index — tab filter */
.gallery-filter {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.gallery-filter__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1px solid #e5e7eb;
    border-radius: 15px;
    background: #fff;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.gallery-filter__btn:hover {
    border-color: var(--mainColor);
    color: var(--mainColor);
}

.gallery-filter__btn.is-active {
    background: var(--mainColor);
    border-color: var(--mainColor);
    color: #fff;
}

@media (max-width: 767px) {
    .gallery-filter__btn {
        flex: 1;
        justify-content: center;
        max-width: 160px;
    }
}

.gallery-list-card .blog-card-text-area p {
    margin-bottom: 1rem;
}

.gallery-list-card__badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--mainColor);
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid color-mix(in srgb, var(--mainColor) 20%, #e5e7eb);
}

.gallery-list-card__badge--video {
    color: #dc2626;
    border-color: color-mix(in srgb, #dc2626 20%, #e5e7eb);
}

.gallery-list-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 11px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 15px;
    background: #fff;
    color: #374151;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.gallery-list-card__btn:hover {
    border-color: var(--mainColor);
    color: var(--mainColor);
}

/* LightGallery di atas sticky navbar */
.lg-backdrop,
.lg-outer,
.lg-toolbar,
.lg-sub-html {
    z-index: 100050 !important;
}

/* Pengaduan page */
.pengaduan-page {
    color: #1f2937;
}

.pengaduan-form-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.85rem;
    padding: 1.25rem;
}

.pengaduan-form-card__intro {
    margin: 0 0 1.25rem;
    font-size: 14px;
    line-height: 1.6;
    color: #6b7280;
}

.pengaduan-form-label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.pengaduan-form-control {
    border: 1px solid #e5e7eb !important;
    border-radius: 0.65rem !important;
    font-size: 14px !important;
    color: #111827 !important;
    padding: 0.55rem 0.75rem !important;
    min-height: 42px;
}

.pengaduan-form-control:focus {
    border-color: var(--mainColor) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mainColor) 15%, transparent) !important;
}

.pengaduan-select-wrap {
    width: 100%;
}

.pengaduan-page .select2-container {
    width: 100% !important;
}

.pengaduan-page .select2-container--default .select2-selection--single {
    height: 42px !important;
    min-height: 42px;
    border: 1px solid #e5e7eb !important;
    border-radius: 0.65rem !important;
    display: flex;
    align-items: center;
    background-color: #fff;
}

.pengaduan-page .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 12px;
    padding-right: 34px;
    line-height: 40px;
    font-size: 14px;
    color: #111827;
}

.pengaduan-page .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #9ca3af;
}

.pengaduan-page .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px;
    right: 8px;
}

.pengaduan-page .select2-container--default.select2-container--open .select2-selection--single,
.pengaduan-page .select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--mainColor) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mainColor) 15%, transparent);
}

.pengaduan-page .select2-dropdown {
    border: 1px solid #e5e7eb;
    border-radius: 0.65rem;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.pengaduan-page .select2-container--default .select2-results__option {
    font-size: 14px;
    padding: 9px 12px;
}

.pengaduan-page .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background: color-mix(in srgb, var(--mainColor) 12%, #fff);
    color: var(--mainColor);
}

.pengaduan-page .select2-container--default .select2-results__option[aria-selected=true] {
    background: color-mix(in srgb, var(--mainColor) 18%, #fff);
    color: var(--mainColor);
}

.pengaduan-form-hint {
    font-size: 12px;
    color: #9ca3af;
}

.pengaduan-form-actions {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid #f3f4f6;
}

.pengaduan-submit-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    border: 0;
    border-radius: 15px;
    background: var(--mainColor);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.pengaduan-submit-btn:hover {
    opacity: 0.92;
    color: #fff;
}

.pengaduan-submit-btn:disabled,
.pengaduan-submit-btn.is-loading {
    opacity: 0.7;
    cursor: not-allowed;
}

.pengaduan-honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.pengaduan-sidebar__text {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #6b7280;
}

.pengaduan-steps {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pengaduan-steps li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #4b5563;
}

.pengaduan-steps li + li {
    margin-top: 10px;
}

.pengaduan-steps li span {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--mainColor);
    background: color-mix(in srgb, var(--mainColor) 12%, #fff);
}

.pengaduan-categories {
    list-style: none;
    margin: 0;
    padding: 0;
}

.pengaduan-categories li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 0.55rem;
    font-size: 14px;
    color: #374151;
}

.pengaduan-categories li + li {
    margin-top: 4px;
}

.pengaduan-categories__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--mainColor);
    flex-shrink: 0;
}

.pengaduan-sidebar-note {
    background: color-mix(in srgb, var(--mainColor) 5%, #fff);
}

@media (max-width: 767px) {
    .pengaduan-page {
        padding-top: 1rem;
        padding-bottom: 5.5rem;
    }

    .pengaduan-form-card {
        padding: 1rem;
    }
}

/* Pengajuan surat page */
.pengajuan-surat-page {
    color: #1f2937;
}

.pengajuan-surat-intro {
    margin-bottom: 1.25rem;
}

.pengajuan-surat-intro p {
    margin: 0;
    font-size: 14px;
    line-height: 1.7;
    color: #6b7280;
}

.pengajuan-surat-highlight {
    height: 100%;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.85rem;
    padding: 1rem 1.1rem;
}

.pengajuan-surat-highlight__icon {
    width: 38px;
    height: 38px;
    border-radius: 0.65rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    color: var(--mainColor);
    background: color-mix(in srgb, var(--mainColor) 12%, #fff);
}

.pengajuan-surat-highlight h3 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.pengajuan-surat-highlight p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: #6b7280;
}

.pengajuan-surat-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.85rem;
    padding: 1.25rem;
}

.pengajuan-surat-card__head h3 {
    margin: 0 0 6px;
    font-size: 17px;
    font-weight: 700;
    color: #111827;
}

.pengajuan-surat-card__head p {
    margin: 0 0 1rem;
    font-size: 13px;
    line-height: 1.6;
    color: #9ca3af;
}

.pengajuan-surat-accordion .accordion-item {
    border: 1px solid #e5e7eb;
    border-radius: 0.65rem !important;
    overflow: hidden;
}

.pengajuan-surat-accordion .accordion-item + .accordion-item {
    margin-top: 10px;
}

.pengajuan-surat-accordion .accordion-button {
    padding: 0.9rem 1rem;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    background: #fff;
    box-shadow: none;
}

.pengajuan-surat-accordion .accordion-button:not(.collapsed) {
    color: var(--mainColor);
    background: color-mix(in srgb, var(--mainColor) 6%, #fff);
}

.pengajuan-surat-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.pengajuan-surat-accordion__no {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    margin-right: 10px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--mainColor);
    background: color-mix(in srgb, var(--mainColor) 12%, #fff);
}

.pengajuan-surat-accordion__title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: left;
}

.pengajuan-surat-accordion__title small {
    font-size: 12px;
    font-weight: 500;
    color: #9ca3af;
}

.pengajuan-surat-accordion .accordion-body {
    font-size: 14px;
    line-height: 1.65;
    color: #4b5563;
}

.pengajuan-surat-accordion .accordion-body ol,
.pengajuan-surat-accordion .accordion-body ul {
    margin-bottom: 0;
    padding-left: 1.2rem;
}

.pengajuan-surat-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: #9ca3af;
}

.pengajuan-surat-empty i {
    font-size: 2rem;
    margin-bottom: 0.75rem;
}

.pengajuan-surat-empty p {
    margin: 0;
    font-size: 14px;
}

.pengajuan-surat-auth-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.pengajuan-surat-auth-btn:hover {
    opacity: 0.92;
    color: #fff;
}

.pengajuan-surat-auth-btn--login {
    background: var(--mainColor);
    color: #fff;
}

.pengajuan-surat-auth-btn--register {
    background: #16a34a;
    color: #fff;
}

@media (max-width: 767px) {
    .pengajuan-surat-page {
        padding-top: 1rem;
        padding-bottom: 5.5rem;
    }

    .pengajuan-surat-card {
        padding: 1rem;
    }
}

/* Home — Layanan Online Desa */
.home-layanan-section .home-layanan-card {
    border: 1px solid #e5e7eb;
    box-shadow: var(--boxShadow);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.home-layanan-section .home-layanan-card:hover {
    border-color: color-mix(in srgb, var(--mainColor) 35%, #e5e7eb);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.home-layanan-section a {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* Home — APB Desa */
.home-apbdes-section .home-apbdes-card {
    border: 1px solid #e5e7eb;
    box-shadow: var(--boxShadow);
}

.home-apbdes-section .home-apbdes-card--income {
    border-color: color-mix(in srgb, #16a34a 35%, #e5e7eb);
    background: color-mix(in srgb, #16a34a 5%, #fff);
}

.home-apbdes-section .home-apbdes-card--income i {
    background-color: #16a34a;
}

.home-apbdes-section .home-apbdes-card--income h5 {
    color: #374151;
}

.home-apbdes-section .home-apbdes-card--income h3 {
    color: #15803d;
}

.home-apbdes-section .home-apbdes-card--expense {
    border-color: color-mix(in srgb, #dc2626 35%, #e5e7eb);
    background: color-mix(in srgb, #dc2626 5%, #fff);
}

.home-apbdes-section .home-apbdes-card--expense i {
    background-color: #dc2626;
}

.home-apbdes-section .home-apbdes-card--expense h5 {
    color: #374151;
}

.home-apbdes-section .home-apbdes-card--expense h3 {
    color: #b91c1c;
}

.home-apbdes-section .section-content,
.home-apbdes-section .section-content .row,
.home-apbdes-section .col-lg-8,
.home-apbdes-section .home-apbdes-btn-wrap,
.home-apbdes-section [data-aos] {
    overflow: visible;
}

.home-apbdes-section .home-apbdes-btn-wrap {
    margin-top: 30px;
    padding: 10px 6px 8px;
}

.home-apbdes-section .home-apbdes-btn {
    overflow: visible !important;
    transform-origin: center center;
}

.home-apbdes-section .home-apbdes-btn.crosshair:hover {
    transform: scale(1.05);
}

/* Front sidebar — berita, agenda, pengumuman */
.front-sidebar-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 0.85rem;
    box-shadow: none;
    padding: 1rem;
}

.front-sidebar-card__title {
    margin: 0 0 0.85rem;
    font-size: 15px;
    font-weight: 700;
    color: #111827;
}

.front-sidebar-card__title i {
    color: var(--mainColor);
}

.front-sidebar-search {
    display: flex;
    gap: 8px;
}

.front-sidebar-search .form-control {
    border: 1px solid #e5e7eb;
    border-radius: 0.65rem;
    font-size: 14px;
    min-height: 42px;
}

.front-sidebar-search .form-control:focus {
    border-color: var(--mainColor);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mainColor) 15%, transparent);
}

.front-sidebar-search__btn {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 0.65rem;
    background: var(--mainColor);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.front-sidebar-categories {
    list-style: none;
    margin: 0;
    padding: 0;
}

.front-sidebar-categories li + li {
    margin-top: 4px;
}

.front-sidebar-categories a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 0.55rem;
    font-size: 14px;
    color: #374151;
    text-decoration: none;
    transition: all 0.2s ease;
}

.front-sidebar-categories a:hover,
.front-sidebar-categories a.is-active {
    background: color-mix(in srgb, var(--mainColor) 10%, #fff);
    color: var(--mainColor);
}

.front-sidebar-categories__count {
    font-size: 12px;
    font-weight: 600;
    color: #9ca3af;
    background: #f3f4f6;
    padding: 2px 8px;
    border-radius: 999px;
}

.front-sidebar-categories a.is-active .front-sidebar-categories__count {
    background: color-mix(in srgb, var(--mainColor) 15%, #fff);
    color: var(--mainColor);
}

.front-sidebar-tags {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.front-sidebar-tags a {
    display: inline-block;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.front-sidebar-tags a:hover,
.front-sidebar-tags a.is-active {
    color: var(--mainColor);
    background: color-mix(in srgb, var(--mainColor) 10%, #fff);
    border-color: color-mix(in srgb, var(--mainColor) 25%, #e5e7eb);
}

.front-sidebar-card--popular .recent-news-card:first-child {
    margin-top: 0;
}

.front-sidebar-popular__icon {
    color: #f59e0b;
}

/* Front top filter — agenda, pengumuman */
.front-top-filter .front-sidebar-card--filter {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1rem;
    margin-bottom: 0;
}

.front-top-filter .front-sidebar-card__title {
    margin-bottom: 12px;
}

.front-sidebar-select {
    width: 100%;
    height: 42px;
    border: 1px solid #e5e7eb;
    border-radius: 0.65rem;
    font-size: 14px;
    color: #374151;
    padding: 0 12px;
    background-color: #fff;
    cursor: pointer;
}

.front-sidebar-select:focus {
    border-color: var(--mainColor);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--mainColor) 15%, transparent);
}

.front-list-data {
    margin-top: 0;
}

.front-list-caption {
    margin: 0 0 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #e9ecef;
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #374151;
}

.front-list-empty {
    padding: 0;
    text-align: inherit;
    color: inherit;
}

.front-empty-state {
    position: relative;
    text-align: center;
    padding: 3.25rem 1.5rem;
    border: 1px dashed #d1d5db;
    border-radius: 0.85rem;
    background: linear-gradient(180deg, #fafafa 0%, #fff 100%);
}

.front-empty-state__icon {
    position: relative;
    z-index: 1;
    margin: 0 auto 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: var(--mainColor);
    font-size: 2.5rem;
    border: 0;
    box-shadow: none;
}

.front-empty-state__title {
    position: relative;
    z-index: 1;
    margin: 0 0 0.55rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #111827;
}

.front-empty-state__text {
    position: relative;
    z-index: 1;
    margin: 0 auto;
    max-width: 420px;
    font-size: 14px;
    line-height: 1.7;
    color: #6b7280;
}

.front-empty-state__hint {
    position: relative;
    z-index: 1;
    margin: 0.75rem auto 0;
    max-width: 420px;
    font-size: 13px;
    line-height: 1.6;
    color: #9ca3af;
}

.front-empty-state__action {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 1.25rem;
    padding: 10px 18px;
    border: 1px solid color-mix(in srgb, var(--mainColor) 25%, #e5e7eb);
    border-radius: 15px;
    background: #fff;
    color: var(--mainColor);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.front-empty-state__action:hover {
    background: var(--mainColor);
    border-color: var(--mainColor);
    color: #fff;
}

.front-list-panel.pengumuman-modern {
    margin-top: 0;
}

@media (max-width: 767px) {
    .front-sidebar-card {
        padding: 0.85rem;
    }

    .front-top-filter .front-sidebar-card--filter {
        padding: 0.85rem;
    }

    .front-top-filter {
        margin-bottom: 1rem !important;
    }
}