/* =========================================================
   POMOSDA — SECTION 10 VISUAL POLISH R16
   Built on top of Redesign R15.
   Visual-only enhancement. No JS changes.
   ========================================================= */

.pomosda-facilities-section {
    --s10v16-gold: #f3c623;
    --s10v16-green: #075f51;
    --s10v16-green-dark: #054d42;
    --s10v16-cream: #fffaf0;
}

/* ---------------------------------------------------------
   SECTION-LEVEL VISUAL STORY
   --------------------------------------------------------- */

.pomosda-facilities-section__container {
    position: relative;
    z-index: 1;
}

/* elegant guide line between tabs and showcase */
.pomosda-facilities-tabs::after {
    content: "";
    flex: 0 0 54px;
    height: 1px;
    margin-left: 8px;
    background: linear-gradient(90deg, rgba(7,95,81,.20), transparent);
}

/* ---------------------------------------------------------
   LEFT PANEL — richer visual language
   --------------------------------------------------------- */

.pomosda-facility-pocket__info {
    position: relative !important;
}

/* subtle vertical "index rail" */
.pomosda-facility-pocket__info .pomosda-facility-pocket__label {
    padding-left: 0 !important;
}

.pomosda-facility-pocket__info .pomosda-facility-pocket__label::after {
    content: "";
    position: absolute;
    left: -14px;
    top: 2px;
    width: 3px;
    height: 58px;
    border-radius: 999px;
    background:
        linear-gradient(
            180deg,
            var(--s10v16-gold) 0 18%,
            rgba(255,255,255,.18) 18% 46%,
            rgba(255,255,255,.09) 46% 100%
        );
}

/* compact visual ticks near counter */
.pomosda-facility-pocket__counter::before {
    content: "";
    flex: 0 0 32px;
    height: 18px;
    opacity: .42;
    background:
        linear-gradient(90deg,
            transparent 0 2px,
            rgba(243,198,35,.95) 2px 4px,
            transparent 4px 9px,
            rgba(255,255,255,.55) 9px 11px,
            transparent 11px 16px,
            rgba(255,255,255,.28) 16px 18px,
            transparent 18px 23px,
            rgba(255,255,255,.18) 23px 25px,
            transparent 25px 32px
        );
}

/* ---------------------------------------------------------
   GALLERY BACKDROP DECORATION
   --------------------------------------------------------- */

.pomosda-facility-pocket__slider::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -62px;
    left: 48%;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    background:
        radial-gradient(
            circle,
            rgba(243,198,35,.22) 0 38%,
            rgba(243,198,35,.09) 39% 54%,
            transparent 55%
        );
    pointer-events: none;
}

.pomosda-facility-pocket__slider::after {
    content: "";
    position: absolute;
    z-index: 0;
    right: -84px;
    bottom: -96px;
    width: 280px;
    height: 280px;
    border: 1px solid rgba(7,95,81,.13);
    border-radius: 48% 52% 42% 58% / 58% 42% 58% 42%;
    transform: rotate(12deg);
    pointer-events: none;
}

.pomosda-facility-pocket__stage {
    z-index: 1;
}

/* ---------------------------------------------------------
   HERO / FEATURED CARD
   --------------------------------------------------------- */

.pomosda-facility-card.is-active {
    overflow: visible !important;
}

/* Keep media itself clipped even though card overflow is now visible */
.pomosda-facility-card.is-active img,
.pomosda-facility-card.is-active .pomosda-facility-card__placeholder {
    border-radius: 24px !important;
    overflow: hidden !important;
}

/* Outer inner frame */
.pomosda-facility-card.is-active::before {
    content: "";
    position: absolute;
    inset: -10px;
    z-index: -1;
    border: 1px solid rgba(7,95,81,.18);
    border-radius: 30px;
    pointer-events: none;
}

/* FEATURED badge */
.pomosda-facility-card.is-active::after {
    content: "FASILITAS UTAMA";
    position: absolute;
    z-index: 12;
    top: 18px;
    left: 18px;
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    padding: 0 12px 0 30px;
    border: 1px solid rgba(255,255,255,.68);
    border-radius: 999px;
    background:
        radial-gradient(circle at 15px 50%, var(--s10v16-gold) 0 4px, transparent 5px),
        rgba(7,95,81,.88);
    color: #fff;
    box-shadow: 0 8px 24px rgba(7,95,81,.16);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-family: "Poppins", sans-serif;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .12em;
    white-space: nowrap;
    pointer-events: none;
}

/* geometric corner bracket — top right */

/* use stage pseudo decorations for corners */
.pomosda-facility-pocket__stage::before {
    content: "";
    position: absolute;
    z-index: 10;
    top: 38px;
    left: calc(100% - 322px);
    width: 42px;
    height: 42px;
    border-top: 3px solid rgba(243,198,35,.90);
    border-right: 3px solid rgba(243,198,35,.90);
    border-radius: 0 10px 0 0;
    opacity: .72;
    pointer-events: none;
}

/* ---------------------------------------------------------
   PREVIEW 01 — editorial / paper frame
   --------------------------------------------------------- */

.pomosda-facility-card.is-next {
    border: 6px solid rgba(255,255,255,.96) !important;
    border-radius: 22px !important;
    box-shadow:
        0 17px 34px rgba(23,55,46,.11),
        8px 8px 0 rgba(243,198,35,.18) !important;
}

.pomosda-facility-card.is-next::before {
    content: "01";
    position: absolute;
    z-index: 10;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: rgba(7,95,81,.92);
    color: #fff;
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .05em;
    box-shadow: 0 5px 14px rgba(7,95,81,.15);
}

/* mini tape-like visual */
.pomosda-facility-card.is-next::after {
    content: "";
    position: absolute;
    z-index: 11;
    top: -9px;
    left: 50%;
    width: 48px;
    height: 17px;
    transform: translateX(-50%) rotate(-2deg);
    border-radius: 2px;
    background: rgba(243,198,35,.40);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.32);
    pointer-events: none;
}

/* ---------------------------------------------------------
   PREVIEW 02 — green outline / offset composition
   --------------------------------------------------------- */

.pomosda-facility-card.is-next-2 {
    border: 2px solid rgba(7,95,81,.34) !important;
    border-radius: 26px 14px 26px 14px !important;
    box-shadow:
        -8px 9px 0 rgba(7,95,81,.09),
        0 16px 30px rgba(23,55,46,.08) !important;
}

.pomosda-facility-card.is-next-2::before {
    content: "02";
    position: absolute;
    z-index: 10;
    top: 10px;
    right: 10px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 50%;
    background: rgba(243,198,35,.92);
    color: var(--s10v16-green-dark);
    font-family: "Montserrat", sans-serif;
    font-size: 10px;
    font-weight: 800;
    box-shadow: 0 5px 14px rgba(92,75,6,.12);
}

/* ---------------------------------------------------------
   CAPTION ENHANCEMENT
   --------------------------------------------------------- */

.pomosda-facility-card.is-active figcaption {
    background:
        linear-gradient(90deg, rgba(255,253,249,.96), rgba(255,253,249,.88)) !important;
    box-shadow:
        0 10px 26px rgba(23,55,46,.12),
        inset 0 1px 0 rgba(255,255,255,.78) !important;
}

/* tiny gold accent on hero caption */
.pomosda-facility-card.is-active figcaption::before {
    content: "";
    width: 4px !important;
    height: 22px !important;
    margin-right: 2px !important;
    border-radius: 999px !important;
    background: var(--s10v16-gold) !important;
    flex: 0 0 auto !important;
}

/* ---------------------------------------------------------
   NAV CONTROL AS ONE VISUAL UNIT
   --------------------------------------------------------- */

.pomosda-facility-pocket__arrow {
    border-color: rgba(7,95,81,.15) !important;
}

.pomosda-facility-pocket__arrow--prev::after,
.pomosda-facility-pocket__arrow--next::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 18px;
    height: 1px;
    background: rgba(7,95,81,.16);
    pointer-events: none;
}

.pomosda-facility-pocket__arrow--prev::after {
    left: 42px;
}

.pomosda-facility-pocket__arrow--next::after {
    display: none;
}

/* ---------------------------------------------------------
   HOVER POLISH (visual only)
   --------------------------------------------------------- */

@media (hover:hover) and (pointer:fine) {
    .pomosda-facility-card.is-next,
    .pomosda-facility-card.is-next-2 {
        transition:
            filter 220ms ease,
            box-shadow 220ms ease,
            transform 220ms ease !important;
    }

    .pomosda-facility-card.is-next:hover {
        filter: saturate(1) !important;
        transform: translateY(-3px) !important;
    }

    .pomosda-facility-card.is-next-2:hover {
        filter: saturate(.93) !important;
        transform: translateY(-3px) !important;
    }
}

/* ---------------------------------------------------------
   TABLET
   --------------------------------------------------------- */

@media (max-width: 1120px) and (min-width: 821px) {
    .pomosda-facility-card.is-active::after {
        font-size: 8px;
        padding-right: 10px;
    }

    .pomosda-facility-pocket__stage::before {
        display: none;
    }
}

/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 820px) {
    .pomosda-facility-pocket__slider::before {
        top: -75px;
        left: 58%;
        width: 190px;
        height: 190px;
    }

    .pomosda-facility-pocket__slider::after,
    .pomosda-facility-pocket__stage::before {
        display: none;
    }

    .pomosda-facility-card.is-active::after {
        top: 14px;
        left: 14px;
        min-height: 27px;
        font-size: 8px;
    }

    .pomosda-facility-card.is-active::before {
        inset: -6px;
        border-radius: 27px;
    }
}

/* ---------------------------------------------------------
   REDUCED MOTION
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    .pomosda-facility-card.is-next,
    .pomosda-facility-card.is-next-2 {
        transition: none !important;
    }
}