/* =========================================================
   IKETAN.ID
   Location Page Stylesheet
   ---------------------------------------------------------
   Scope:
   - Location hero
   - Outlet directory
   - Search
   - City filter
   - Outlet cards
   - Empty state
   - Location note
   - Partnership CTA
   - Loading / error states

   Global:
   /assets/css/global.css

   Responsive:
   /assets/css/responsive/lokasi-responsive.css

   IMPORTANT:
   No responsive media queries in this file.
   ========================================================= */


/* =========================================================
   01. LOCATION PAGE GENERAL
   ========================================================= */

.location-directory,
.location-note,
.location-partnership {
    position: relative;
}


/* =========================================================
   02. LOCATION HERO
   ========================================================= */

.location-hero {
    position: relative;

    min-height: 720px;

    display: flex;
    align-items: center;

    overflow: hidden;

    padding-top:
        calc(
            var(--navbar-height) +
            72px
        );

    padding-bottom: 88px;

    background:
        radial-gradient(
            circle at 18% 35%,
            rgba(244, 183, 64, 0.18),
            transparent 28%
        ),
        var(--iketan-soft);
}


/* ---------------------------------------------------------
   Hero background ornament
   --------------------------------------------------------- */

.location-hero::before {
    content: "";

    position: absolute;

    top: -80px;
    right: -70px;

    width: 270px;
    height: 270px;

    border:
        58px solid
        rgba(92, 13, 13, 0.045);

    border-radius: 50%;

    pointer-events: none;
}


.location-hero::after {
    content: "";

    position: absolute;

    left: -100px;
    bottom: -120px;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    background-color:
        rgba(185, 40, 46, 0.05);

    pointer-events: none;
}


/* =========================================================
   03. LOCATION HERO CONTAINER
   ========================================================= */

.location-hero-container {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(0, 1.15fr);

    align-items: center;

    gap: 82px;
}


/* =========================================================
   04. LOCATION HERO CONTENT
   ========================================================= */

.location-hero-content {
    width: 100%;
    max-width: 620px;
}


.location-hero-content
.section-eyebrow {
    margin-bottom: 18px;
}


.location-hero-title {
    max-width: 620px;

    margin-bottom: 24px;

    font-size:
        clamp(
            4.6rem,
            7vw,
            7rem
        );

    line-height: 0.92;
}


.location-hero-title span {
    display: block;

    color: var(--iketan-red);
}


.location-hero-description {
    max-width: 510px;

    margin-bottom: 30px;

    color: var(--iketan-muted);

    font-size: var(--text-md);

    line-height: 1.8;
}


/* =========================================================
   05. LOCATION HERO VISUAL
   ========================================================= */

.location-hero-visual {
    position: relative;

    min-height: 540px;

    overflow: hidden;

    border:
        1px solid
        var(--iketan-border);

    border-radius:
        var(--radius-2xl);

    background-color:
        var(--iketan-white);

    box-shadow:
        var(--shadow-sm);
}


/* ---------------------------------------------------------
   Hero Image
   --------------------------------------------------------- */

.location-hero-image {
    width: 100%;
    height: 100%;

    min-height: 540px;

    object-fit: cover;

    object-position: center;

    transition:
        transform
        900ms
        var(--ease-smooth);
}


.location-hero-visual:hover
.location-hero-image {
    transform:
        scale(1.025);
}


/* ---------------------------------------------------------
   Image Overlay
   --------------------------------------------------------- */

.location-hero-visual::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            0deg,
            rgba(35, 6, 6, 0.48) 0%,
            rgba(35, 6, 6, 0.06) 46%,
            transparent 70%
        );
}


/* ---------------------------------------------------------
   Hero Label
   --------------------------------------------------------- */

.location-hero-label {
    position: absolute;

    left: 28px;
    bottom: 26px;

    z-index: 4;

    display: grid;

    gap: 2px;

    padding:
        15px
        18px;

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    border-radius:
        var(--radius-md);

    color:
        var(--iketan-white);

    background-color:
        rgba(61, 10, 10, 0.72);

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}


.location-hero-label span {
    color:
        rgba(255, 255, 255, 0.68);

    font-size:
        0.67rem;

    font-weight:
        var(--weight-bold);

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.location-hero-label strong {
    font-family:
        var(--font-heading);

    font-size:
        1.8rem;

    font-weight:
        400;

    line-height:
        1;
}


/* =========================================================
   06. LOCATION DIRECTORY
   ========================================================= */

.location-directory {
    overflow: hidden;

    background-color:
        var(--iketan-cream);

    scroll-margin-top:
        calc(
            var(--navbar-height) +
            20px
        );
}


/* =========================================================
   07. DIRECTORY HEADER
   ========================================================= */

.location-directory-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: var(--space-2xl);

    margin-bottom: 38px;
}


.location-directory-header
.section-heading {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   Result Summary
   --------------------------------------------------------- */

.location-result-summary {
    flex-shrink: 0;

    margin-bottom: 7px;

    color:
        var(--iketan-muted);

    font-size:
        var(--text-sm);

    font-weight:
        var(--weight-semibold);
}


/* =========================================================
   08. LOCATION TOOLBAR
   ========================================================= */

.location-toolbar {
    display: grid;

    grid-template-columns:
        minmax(300px, 0.65fr)
        minmax(0, 1.35fr);

    align-items: center;

    gap: 22px;

    margin-bottom: 22px;

    padding: 18px;

    border:
        1px solid
        var(--iketan-border);

    border-radius:
        var(--radius-xl);

    background-color:
        var(--iketan-white);

    box-shadow:
        var(--shadow-xs);
}


/* =========================================================
   09. LOCATION SEARCH
   ========================================================= */

.location-search {
    position: relative;

    width: 100%;
}


/* ---------------------------------------------------------
   Search Input
   --------------------------------------------------------- */

.location-search-input {
    width: 100%;
    height: 52px;

    padding:
        0
        48px
        0
        46px;

    border:
        1px solid
        var(--iketan-border);

    border-radius:
        var(--radius-pill);

    outline: none;

    color:
        var(--iketan-ink);

    background-color:
        var(--iketan-cream);

    font-family:
        var(--font-body);

    font-size:
        var(--text-sm);

    transition:
        border-color
        var(--duration-fast)
        var(--ease-default),

        background-color
        var(--duration-fast)
        var(--ease-default),

        box-shadow
        var(--duration-fast)
        var(--ease-default);
}


.location-search-input::placeholder {
    color:
        rgba(116, 101, 99, 0.72);
}


.location-search-input:hover {
    border-color:
        rgba(92, 13, 13, 0.20);
}


.location-search-input:focus {
    border-color:
        var(--iketan-maroon);

    background-color:
        var(--iketan-white);

    box-shadow:
        0 0 0 4px
        var(--maroon-08);
}


/* ---------------------------------------------------------
   Search Icon
   --------------------------------------------------------- */

.location-search-icon {
    position: absolute;

    top: 50%;
    left: 17px;

    z-index: 2;

    width: 18px;
    height: 18px;

    display: flex;
    align-items: center;
    justify-content: center;

    pointer-events: none;

    transform:
        translateY(-50%);
}


.location-search-icon img,
.location-search-icon svg {
    width: 18px;
    height: 18px;

    object-fit: contain;

    opacity: 0.68;
}


/* ---------------------------------------------------------
   Search Clear
   --------------------------------------------------------- */

.location-search-clear {
    position: absolute;

    top: 50%;
    right: 8px;

    z-index: 3;

    width: 36px;
    height: 36px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    color:
        var(--iketan-muted);

    background-color:
        transparent;

    font-size: 1.1rem;

    transform:
        translateY(-50%);

    transition:
        color
        var(--duration-fast)
        var(--ease-default),

        background-color
        var(--duration-fast)
        var(--ease-default);
}


.location-search-clear:hover {
    color:
        var(--iketan-maroon);

    background-color:
        var(--maroon-06);
}


/* =========================================================
   10. CITY FILTER
   ========================================================= */

.location-city-filter {
    display: flex;
    align-items: center;

    min-width: 0;

    gap: 8px;

    overflow-x: auto;

    padding-bottom: 2px;

    scrollbar-width: none;

    -webkit-overflow-scrolling: touch;
}


.location-city-filter::-webkit-scrollbar {
    display: none;
}


/* ---------------------------------------------------------
   City Button
   --------------------------------------------------------- */

.location-city-button {
    min-height: 42px;

    flex-shrink: 0;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding:
        9px
        16px;

    border:
        1px solid
        var(--iketan-border);

    border-radius:
        var(--radius-pill);

    color:
        var(--iketan-muted);

    background-color:
        var(--iketan-white);

    font-size:
        0.78rem;

    font-weight:
        var(--weight-bold);

    white-space:
        nowrap;

    transition:
        color
        var(--duration-fast)
        var(--ease-default),

        background-color
        var(--duration-fast)
        var(--ease-default),

        border-color
        var(--duration-fast)
        var(--ease-default),

        transform
        var(--duration-normal)
        var(--ease-smooth);
}


.location-city-button:hover {
    color:
        var(--iketan-maroon);

    border-color:
        rgba(92, 13, 13, 0.24);

    background-color:
        var(--maroon-04);
}


.location-city-button:active {
    transform:
        scale(0.97);
}


/* ---------------------------------------------------------
   Active City
   --------------------------------------------------------- */

.location-city-button.is-active,
.location-city-button[aria-pressed="true"] {
    color:
        var(--iketan-white);

    border-color:
        var(--iketan-maroon);

    background-color:
        var(--iketan-maroon);
}


/* =========================================================
   11. ACTIVE FILTER
   ========================================================= */

.location-active-filter {
    display: flex;
    align-items: center;

    gap: 8px;

    width: fit-content;

    margin-bottom: 22px;

    padding:
        8px
        10px
        8px
        14px;

    border:
        1px solid
        var(--iketan-border);

    border-radius:
        var(--radius-pill);

    color:
        var(--iketan-muted);

    background-color:
        var(--iketan-white);

    font-size:
        var(--text-xs);
}


.location-active-filter[hidden] {
    display: none;
}


.location-active-filter strong {
    color:
        var(--iketan-maroon);

    font-weight:
        var(--weight-extrabold);
}


/* ---------------------------------------------------------
   Reset Filter
   --------------------------------------------------------- */

.location-reset-filter {
    min-height: 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding-inline: 10px;

    border-radius:
        var(--radius-pill);

    color:
        var(--iketan-maroon);

    background-color:
        var(--iketan-soft);

    font-size:
        0.7rem;

    font-weight:
        var(--weight-bold);

    transition:
        color
        var(--duration-fast)
        var(--ease-default),

        background-color
        var(--duration-fast)
        var(--ease-default);
}


.location-reset-filter:hover {
    color:
        var(--iketan-white);

    background-color:
        var(--iketan-maroon);
}


/* =========================================================
   12. DIRECTORY META
   ========================================================= */

.location-directory-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-bottom: 30px;

    padding:
        18px
        20px;

    border:
        1px solid
        var(--iketan-border);

    border-radius:
        var(--radius-lg);

    background-color:
        var(--iketan-soft);
}


.location-directory-meta > div:first-child {
    min-width: 0;
}


.location-directory-meta-label {
    display: block;

    margin-bottom: 3px;

    color:
        var(--iketan-maroon);

    font-size:
        0.7rem;

    font-weight:
        var(--weight-extrabold);

    letter-spacing:
        0.06em;

    text-transform:
        uppercase;
}


.location-directory-meta p {
    font-size:
        0.8rem;

    line-height:
        1.55;
}


/* ---------------------------------------------------------
   Active Outlet Legend
   --------------------------------------------------------- */

.location-directory-legend {
    display: flex;
    align-items: center;

    gap: 8px;

    flex-shrink: 0;

    color:
        var(--iketan-muted);

    font-size:
        0.75rem;

    font-weight:
        var(--weight-semibold);
}


.location-status-indicator {
    width: 8px;
    height: 8px;

    flex-shrink: 0;

    border-radius: 50%;

    background-color:
        var(--color-success);

    box-shadow:
        0 0 0 4px
        rgba(56, 122, 74, 0.10);
}


/* =========================================================
   13. LOCATION GRID
   ========================================================= */

.location-grid {
    display: grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        22px
        18px;

    min-height:
        420px;
}


/* =========================================================
   14. LOCATION SKELETON
   ========================================================= */

.location-card-skeleton {
    min-height: 430px;

    border-radius:
        var(--radius-lg);
}


/* =========================================================
   15. LOCATION CARD
   ========================================================= */

/*
   lokasi.js nanti generate:

   article.location-card

       div.location-card-media
           img.location-card-image
           div.location-card-status

       div.location-card-content

           div.location-card-meta
               span.location-card-city
               span.location-card-area

           h3.location-card-name

           p.location-card-address

           div.location-card-contact
               ...

           div.location-card-footer
               a.location-card-map
*/


.location-card {
    position: relative;

    min-width: 0;
    min-height: 430px;

    display: flex;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid
        var(--iketan-border);

    border-radius:
        var(--radius-lg);

    background-color:
        var(--iketan-white);

    transition:
        transform
        var(--duration-slow)
        var(--ease-smooth),

        border-color
        var(--duration-slow)
        var(--ease-smooth),

        box-shadow
        var(--duration-slow)
        var(--ease-smooth);
}


.location-card:hover {
    transform:
        translate3d(
            0,
            -5px,
            0
        );

    border-color:
        var(--maroon-14);

    box-shadow:
        var(--shadow-md);
}


/* =========================================================
   16. LOCATION CARD MEDIA
   ========================================================= */

.location-card-media {
    position: relative;

    width: 100%;
    height: 210px;

    overflow: hidden;

    background-color:
        var(--iketan-soft);
}


.location-card-image {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform
        750ms
        var(--ease-smooth);
}


.location-card:hover
.location-card-image {
    transform:
        scale(1.04);
}


/* ---------------------------------------------------------
   Image Overlay
   --------------------------------------------------------- */

.location-card-media::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            0deg,
            rgba(42, 8, 8, 0.13),
            transparent 42%
        );
}


/* =========================================================
   17. OUTLET STATUS BADGE
   ========================================================= */

.location-card-status {
    position: absolute;

    top: 14px;
    left: 14px;

    z-index: 4;

    display: inline-flex;
    align-items: center;

    gap: 7px;

    min-height: 30px;

    padding:
        6px
        11px;

    border:
        1px solid
        rgba(255, 255, 255, 0.18);

    border-radius:
        var(--radius-pill);

    color:
        var(--iketan-white);

    background-color:
        rgba(61, 10, 10, 0.76);

    backdrop-filter:
        blur(8px);

    -webkit-backdrop-filter:
        blur(8px);

    font-size:
        0.67rem;

    font-weight:
        var(--weight-bold);
}


.location-card-status::before {
    content: "";

    width: 7px;
    height: 7px;

    flex-shrink: 0;

    border-radius: 50%;

    background-color:
        #72C786;
}


/* =========================================================
   18. LOCATION CARD CONTENT
   ========================================================= */

.location-card-content {
    flex: 1;

    display: flex;
    flex-direction: column;

    min-width: 0;

    padding:
        22px
        22px
        20px;
}


/* =========================================================
   19. LOCATION CARD META
   ========================================================= */

.location-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap:
        6px
        10px;

    margin-bottom: 10px;
}


.location-card-city {
    color:
        var(--iketan-red);

    font-size:
        0.67rem;

    font-weight:
        var(--weight-extrabold);

    letter-spacing:
        0.07em;

    text-transform:
        uppercase;
}


.location-card-area {
    position: relative;

    padding-left: 11px;

    color:
        var(--iketan-muted);

    font-size:
        0.7rem;

    font-weight:
        var(--weight-semibold);
}


.location-card-area::before {
    content: "";

    position: absolute;

    top: 50%;
    left: 0;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background-color:
        var(--iketan-border);

    transform:
        translateY(-50%);
}


/* =========================================================
   20. LOCATION CARD NAME
   ========================================================= */

.location-card-name {
    margin-bottom: 10px;

    color:
        var(--iketan-maroon);

    font-family:
        var(--font-body);

    font-size:
        1.08rem;

    font-weight:
        var(--weight-extrabold);

    line-height:
        1.4;

    text-wrap:
        pretty;
}


/* =========================================================
   21. LOCATION ADDRESS
   ========================================================= */

.location-card-address {
    display:
        -webkit-box;

    margin-bottom:
        18px;

    overflow:
        hidden;

    color:
        var(--iketan-muted);

    font-size:
        0.8rem;

    line-height:
        1.65;

    -webkit-box-orient:
        vertical;

    -webkit-line-clamp:
        3;
}


/* =========================================================
   22. LOCATION CONTACT
   ========================================================= */

.location-card-contact {
    display: grid;

    gap: 7px;

    margin-bottom:
        20px;
}


.location-card-phone {
    display: inline-flex;
    align-items: center;

    width: fit-content;

    color:
        var(--iketan-muted);

    font-size:
        0.75rem;

    font-weight:
        var(--weight-semibold);

    transition:
        color
        var(--duration-fast)
        var(--ease-default);
}


.location-card-phone:hover {
    color:
        var(--iketan-maroon);
}


/* =========================================================
   23. LOCATION CARD FOOTER
   ========================================================= */

.location-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    margin-top: auto;

    padding-top:
        17px;

    border-top:
        1px solid
        var(--iketan-border);
}


/* ---------------------------------------------------------
   Maps Button
   --------------------------------------------------------- */

.location-card-map {
    width: 100%;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    min-height: 46px;

    padding:
        10px
        14px;

    border-radius:
        var(--radius-md);

    color:
        var(--iketan-white);

    background-color:
        var(--iketan-maroon);

    font-size:
        0.78rem;

    font-weight:
        var(--weight-bold);

    transition:
        background-color
        var(--duration-normal)
        var(--ease-smooth),

        transform
        var(--duration-normal)
        var(--ease-smooth),

        box-shadow
        var(--duration-normal)
        var(--ease-smooth);
}


.location-card-map:hover {
    transform:
        translateY(-2px);

    background-color:
        var(--iketan-maroon-dark);

    box-shadow:
        var(--shadow-sm);
}


.location-card-map-label {
    display: inline-flex;
    align-items: center;

    gap: 9px;
}


.location-card-map-icon {
    width: 17px;
    height: 17px;

    flex-shrink: 0;
}


.location-card-map-arrow {
    flex-shrink: 0;

    transition:
        transform
        var(--duration-normal)
        var(--ease-smooth);
}


.location-card-map:hover
.location-card-map-arrow {
    transform:
        translateX(4px);
}


/* =========================================================
   24. FEATURED OUTLET CARD
   ========================================================= */

/*
   featured cuma visual priority untuk frontend.
   Bukan klaim flagship outlet.
*/

.location-card.is-featured {
    border-color:
        rgba(92, 13, 13, 0.18);
}


.location-card.is-featured
.location-card-media::before {
    content: "Pilihan";

    position: absolute;

    top: 14px;
    right: 14px;

    z-index: 4;

    padding:
        6px
        10px;

    border-radius:
        var(--radius-pill);

    color:
        var(--iketan-maroon-dark);

    background-color:
        var(--iketan-yellow);

    font-size:
        0.64rem;

    font-weight:
        var(--weight-extrabold);
}


/* =========================================================
   25. EMPTY STATE
   ========================================================= */

.location-empty-state {
    width: 100%;
    max-width: 520px;

    margin:
        38px
        auto
        0;

    padding:
        56px
        36px;

    border:
        1px solid
        var(--iketan-border);

    border-radius:
        var(--radius-xl);

    background-color:
        var(--iketan-white);

    text-align:
        center;
}


.location-empty-state[hidden] {
    display: none;
}


/* ---------------------------------------------------------
   Empty Icon
   --------------------------------------------------------- */

.location-empty-icon {
    width: 62px;
    height: 62px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-bottom:
        20px;

    border-radius:
        50%;

    background-color:
        var(--iketan-soft);
}


.location-empty-icon img,
.location-empty-icon svg {
    width: 24px;
    height: 24px;
}


/* ---------------------------------------------------------
   Empty Content
   --------------------------------------------------------- */

.location-empty-state h3 {
    margin-bottom:
        10px;

    font-size:
        2.3rem;
}


.location-empty-state p {
    max-width:
        380px;

    margin:
        0 auto
        24px;
}


/* =========================================================
   26. NOSCRIPT
   ========================================================= */

.location-noscript {
    margin-top:
        24px;

    padding:
        20px;

    border:
        1px solid
        var(--iketan-border);

    border-radius:
        var(--radius-md);

    background-color:
        var(--iketan-soft);
}


.location-noscript p {
    font-size:
        var(--text-sm);
}


/* =========================================================
   27. LOCATION DATA ERROR
   ========================================================= */

.location-data-error {
    grid-column:
        1 / -1;

    padding:
        42px;

    border:
        1px solid
        var(--iketan-border);

    border-radius:
        var(--radius-xl);

    background-color:
        var(--iketan-soft);

    text-align:
        center;
}


.location-data-error h3 {
    margin-bottom:
        8px;

    font-size:
        2.2rem;
}


.location-data-error p {
    max-width:
        480px;

    margin-inline:
        auto;
}


/* =========================================================
   28. LOCATION NOTE
   ========================================================= */

.location-note {
    padding-bottom:
        var(--space-3xl);

    background-color:
        var(--iketan-cream);
}


/* ---------------------------------------------------------
   Note Card
   --------------------------------------------------------- */

.location-note-card {
    display: grid;

    grid-template-columns:
        auto
        minmax(0, 1fr);

    align-items: center;

    gap: 20px;

    padding:
        26px
        30px;

    border:
        1px solid
        var(--iketan-border);

    border-radius:
        var(--radius-xl);

    background-color:
        var(--iketan-white);
}


/* ---------------------------------------------------------
   Note Icon
   --------------------------------------------------------- */

.location-note-icon {
    width: 50px;
    height: 50px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex-shrink: 0;

    border-radius:
        50%;

    color:
        var(--iketan-white);

    background-color:
        var(--iketan-maroon);
}


.location-note-icon img,
.location-note-icon svg {
    width: 20px;
    height: 20px;

    object-fit: contain;
}


/* ---------------------------------------------------------
   Note Content
   --------------------------------------------------------- */

.location-note-content h2 {
    margin-bottom:
        5px;

    color:
        var(--iketan-maroon);

    font-family:
        var(--font-body);

    font-size:
        var(--text-base);

    font-weight:
        var(--weight-extrabold);

    line-height:
        1.4;
}


.location-note-content p {
    max-width:
        760px;

    font-size:
        var(--text-sm);

    line-height:
        1.65;
}


/* =========================================================
   29. PARTNERSHIP CTA
   ========================================================= */

.location-partnership {
    padding-top:
        40px;

    overflow:
        hidden;

    background-color:
        var(--iketan-cream);
}


/* ---------------------------------------------------------
   Partnership Card
   --------------------------------------------------------- */

.location-partnership-card {
    position: relative;

    min-height:
        520px;

    display: flex;
    align-items: center;

    overflow: hidden;

    padding:
        clamp(
            50px,
            7vw,
            90px
        );

    border-radius:
        var(--radius-2xl);

    color:
        var(--iketan-white);

    background:

        radial-gradient(
            circle at 82% 24%,
            rgba(244, 183, 64, 0.12),
            transparent 29%
        ),

        var(--iketan-maroon-dark);
}


/* ---------------------------------------------------------
   Decorative circle
   --------------------------------------------------------- */

.location-partnership-card::before {
    content: "";

    position: absolute;

    top: 54px;
    right: 10%;

    width: 120px;
    height: 120px;

    border:
        30px solid
        rgba(244, 183, 64, 0.07);

    border-radius: 50%;

    pointer-events: none;
}


/* =========================================================
   30. PARTNERSHIP CONTENT
   ========================================================= */

.location-partnership-content {
    position: relative;

    z-index: 3;

    width: 100%;
    max-width: 670px;
}


.location-partnership-eyebrow {
    display: inline-flex;

    margin-bottom:
        18px;

    color:
        var(--iketan-yellow);

    font-size:
        var(--text-xs);

    font-weight:
        var(--weight-extrabold);

    letter-spacing:
        0.12em;

    text-transform:
        uppercase;
}


.location-partnership-content h2 {
    max-width:
        650px;

    margin-bottom:
        20px;

    color:
        var(--iketan-white);

    font-size:
        clamp(
            3.6rem,
            6vw,
            5.5rem
        );

    line-height:
        0.96;
}


.location-partnership-content > p {
    max-width:
        500px;

    margin-bottom:
        32px;

    color:
        rgba(255, 255, 255, 0.66);
}


/* ---------------------------------------------------------
   Partnership Actions
   --------------------------------------------------------- */

.location-partnership-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 12px;
}


/* =========================================================
   31. PARTNERSHIP DECORATION
   ========================================================= */

.location-partnership-decoration {
    position: absolute;

    right: -4%;
    bottom: -25%;

    z-index: 1;

    color:
        rgba(255, 255, 255, 0.045);

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            12rem,
            20vw,
            19rem
        );

    line-height: 1;

    white-space:
        nowrap;

    pointer-events:
        none;

    user-select:
        none;
}


/* =========================================================
   32. GRID LOADING STATE
   ========================================================= */

.location-grid.is-loading {
    pointer-events:
        none;
}


/* =========================================================
   33. FILTERING STATE
   ========================================================= */

/*
   lokasi.js nanti boleh toggle .is-filtering
   saat search/filter berubah.
*/

.location-grid.is-filtering {
    opacity:
        0.65;

    transition:
        opacity
        var(--duration-fast)
        var(--ease-default);
}


/* =========================================================
   34. LOCATION CARD ENTER ANIMATION
   ========================================================= */

.location-card.is-entering {
    animation:
        locationCardEnter
        420ms
        var(--ease-smooth)
        both;
}


@keyframes locationCardEnter {

    from {
        opacity: 0;

        transform:
            translate3d(
                0,
                16px,
                0
            );
    }


    to {
        opacity: 1;

        transform:
            translate3d(
                0,
                0,
                0
            );
    }
}


/* =========================================================
   35. LOCATION HASH / HIGHLIGHT
   ========================================================= */

/*
   Disiapkan kalau nanti kita pakai:

   /lokasi/#iketan-gegerkalong

   lokasi.js bisa highlight card tertentu.
*/

.location-card.is-highlighted {
    border-color:
        var(--iketan-maroon);

    box-shadow:
        0 0 0 4px
        var(--maroon-08),
        var(--shadow-md);
}


/* =========================================================
   36. FOCUS STATE
   ========================================================= */

.location-card:focus-visible {
    outline:
        3px solid
        var(--iketan-yellow);

    outline-offset:
        4px;
}


/* =========================================================
   37. DEVELOPMENT / IMAGE FALLBACK STATE
   ========================================================= */

/*
   Kalau outlet masih pakai placeholder image,
   class ini nanti bisa ditambahkan lokasi.js.
*/

.location-card.is-placeholder
.location-card-image {
    object-fit:
        cover;

    filter:
        saturate(0.75)
        contrast(0.96);
}


/* =========================================================
   38. END OF LOCATION BASE STYLES
   ========================================================= */