.hide-scrollbar::-webkit-scrollbar { display: none; }
.hide-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

:root {
    --public-app-width: 1180px;
    --public-content-width: 1180px;
    --public-gutter: clamp(16px, 3vw, 32px);
    --public-radius: 8px;
    --public-border: rgba(203, 213, 225, 0.78);
    --public-shadow: 0 10px 26px rgba(15, 23, 42, 0.07);
    --public-sport-image: url("../images/slider/slide_1.png");
    --public-blue-hero: linear-gradient(120deg, rgba(1, 22, 79, 0.96) 0%, rgba(7, 87, 199, 0.90) 50%, rgba(56, 189, 248, 0.78) 100%);
}

body.public-app-shell {
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 0.75rem;
    min-height: 100vh;
    background: #f6f8fb;
    color: #0f172a;
}

.public-app-shell button,
.public-app-shell input,
.public-app-shell select,
.public-app-shell textarea {
    font-family: inherit;
}

.public-app-container {
    width: 100%;
    max-width: var(--public-app-width);
    padding-left: var(--public-gutter);
    padding-right: var(--public-gutter);
    margin-left: auto;
    margin-right: auto;
}

.public-app-shell > section,
.public-app-shell > div:not(#lightbox):not(#toastContainer):not(#tailwindAlertRoot):not(#transferModal):not(#qrisModal):not(#successModal):not(#yoksportSplash):not(#yoksportDashboardShell):not(#yoksportDashboard):not(#ysLandingFrame):not([id^="popup_"]),
.public-app-shell > form {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    background-color: transparent;
}

.public-app-shell > section:not(.ys-section) > *,
.public-app-shell > form > *,
.public-app-shell > div:not(#lightbox):not(#toastContainer):not(#tailwindAlertRoot):not(#transferModal):not(#qrisModal):not(#successModal):not(#yoksportSplash):not(#yoksportDashboardShell):not(#yoksportDashboard):not(#ysLandingFrame):not([id^="popup_"]) > * {
    max-width: var(--public-content-width);
    margin-left: auto;
    margin-right: auto;
}

.public-app-shell section > .max-w-6xl,
.public-app-shell section > .max-w-5xl,
.public-app-shell section > .max-w-4xl,
.public-app-shell section > .max-w-3xl,
.public-app-shell section > .max-w-2xl,
.public-app-shell section > .max-w-xl,
.public-app-shell section > .container,
.public-app-shell .public-page-container {
    max-width: var(--public-content-width) !important;
}

.public-app-shell > section > .max-w-md {
    max-width: 520px !important;
}

.public-app-shell > div.max-w-2xl {
    max-width: 860px !important;
}

.public-app-shell > div.max-w-3xl {
    max-width: 980px !important;
}

.public-app-shell > div.max-w-4xl,
.public-app-shell > div.max-w-5xl,
.public-app-shell > div.max-w-6xl {
    max-width: var(--public-content-width) !important;
}

.public-app-shell.yoksport-landing-page {
    font-size: 1rem;
    background: #f6f8fb;
    color: #0f172a;
    overflow-x: hidden;
    padding: 0 !important;
}

.public-app-shell.yoksport-landing-page > #ysLandingFrame {
    width: 100%;
    max-width: none;
    min-height: 100vh;
    margin: 0 auto;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: #f8fafc;
    box-shadow: none;
}

.public-app-shell.yoksport-landing-page > #ysLandingFrame > nav,
.public-app-shell.yoksport-landing-page > #ysLandingFrame > section,
.public-app-shell.yoksport-landing-page > #ysLandingFrame > main,
.public-app-shell.yoksport-landing-page > #ysLandingFrame > footer {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}

.public-app-shell.yoksport-landing-page #navbar {
    background: rgba(7, 27, 58, 0.88) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 14px 32px rgba(4, 15, 36, 0.20);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
}

.public-app-shell.yoksport-landing-page .bg-hero-pattern {
    background-color: #071b3a;
    background-image:
        linear-gradient(90deg, rgba(7, 27, 58, 0.98) 0%, rgba(7, 27, 58, 0.88) 44%, rgba(7, 27, 58, 0.52) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='720' height='360' viewBox='0 0 720 360'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.18' stroke-width='2'%3E%3Cpath d='M-40 258C94 178 177 211 274 147S480 69 776 126'/%3E%3Cpath d='M-32 90H132V250H-32zM20 90v160M80 90v160M-32 143h164M-32 197h164'/%3E%3Ccircle cx='185' cy='160' r='70'/%3E%3Cpath d='M115 160h140M185 90v140'/%3E%3Cpath d='M392 83l70 38-70 38-70-38zM322 121v96M462 121v96M322 217h140'/%3E%3Cpath d='M548 54h125v125H548zM590 54v125M632 54v125M548 96h125M548 138h125'/%3E%3C/g%3E%3C/svg%3E"),
        url("../images/slider/slide_2.png");
    background-position: center, center right, center;
    background-repeat: no-repeat;
    background-size: cover, 56% auto, cover;
    isolation: isolate;
}

.public-app-shell.yoksport-landing-page .bg-hero-pattern::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04) 36%, rgba(255, 255, 255, 0) 76%),
        radial-gradient(circle at 70% 12%, rgba(20, 91, 255, 0.26), transparent 28rem);
}

.public-app-shell.yoksport-landing-page .bg-hero-pattern > * {
    position: relative;
    z-index: 1;
}

.ys-public-dashboard {
    isolation: isolate;
}

.ys-container {
    width: 100%;
    max-width: var(--public-content-width);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--public-gutter);
    padding-right: var(--public-gutter);
}

.ys-public-hero {
    position: relative;
    background:
        linear-gradient(120deg, rgba(2, 16, 43, 0.97) 0%, rgba(3, 62, 141, 0.92) 50%, rgba(14, 165, 233, 0.80) 100%),
        var(--public-sport-image);
    background-position: center;
    background-size: cover;
    border-bottom: 1px solid rgba(226, 232, 240, 0.86);
}

.ys-public-hero > .ys-container {
    min-height: calc(100vh - 64px);
}

.ys-hero-copy h1 {
    color: #ffffff !important;
}

.ys-hero-copy > p {
    color: rgba(226, 232, 240, 0.92) !important;
}

.ys-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    border: 1px solid rgba(191, 219, 254, 0.42);
    border-radius: 8px;
    background: rgba(239, 246, 255, 0.94);
    padding: 8px 12px;
    color: #075985;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ys-hero-search {
    max-width: 680px;
}

.ys-hero-metrics > div {
    border: 1px solid rgba(191, 219, 254, 0.30);
    border-radius: var(--public-radius);
    background: rgba(255, 255, 255, 0.10);
    padding: 14px;
}

.ys-hero-metrics p {
    color: #ffffff;
    font-size: 24px;
    font-weight: 900;
    line-height: 1;
}

.ys-hero-metrics span {
    display: block;
    margin-top: 6px;
    color: rgba(226, 232, 240, 0.82);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.ys-upload-dropzone.is-dragover {
    border-color: #0ea5e9 !important;
    background: #eff6ff !important;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.14);
}

.ys-upload-dropzone.is-selected {
    border-color: #38bdf8 !important;
    background: #f0f9ff !important;
}

.ys-upload-dropzone.is-invalid {
    border-color: #fca5a5 !important;
    background: #fef2f2 !important;
}

.ys-hero-visual {
    position: relative;
    min-height: 500px;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 8px;
    background: #cbd5e1;
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.16);
}

.ys-hero-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.35));
    pointer-events: none;
}

.ys-hero-panel {
    position: absolute;
    z-index: 2;
    border: 1px solid rgba(226, 232, 240, 0.96);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.94);
    padding: 14px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.16);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.ys-hero-panel-top {
    top: 18px;
    left: 18px;
    width: min(300px, calc(100% - 36px));
}

.ys-hero-panel-bottom {
    right: 18px;
    bottom: 18px;
    width: min(310px, calc(100% - 36px));
}

.ys-hero-workspace {
    border: 1px solid rgba(226, 232, 240, 0.96);
    border-radius: var(--public-radius);
    background: #ffffff;
    padding: 20px;
    box-shadow: 0 24px 60px rgba(2, 6, 23, 0.26);
}

.ys-hero-task-card {
    min-height: 108px;
    border: 1px solid rgba(226, 232, 240, 0.92);
    border-radius: var(--public-radius);
    background: #f8fafc;
    padding: 14px;
}

.ys-section {
    padding: 56px 0;
}

.ys-section-tight {
    padding-top: 24px;
    padding-bottom: 44px;
}

.ys-eyebrow {
    color: #ea580c;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0;
    text-transform: uppercase;
}

.ys-section-title {
    margin-top: 6px;
    max-width: 680px;
    color: #0f172a;
    font-size: 30px;
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: 0;
}

.ys-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0369a1;
    font-size: 12px;
    font-weight: 900;
}

.ys-text-link:hover {
    color: #0f172a;
}

.ys-stat-card,
.ys-category-card,
.ys-venue-card,
.ys-data-panel,
.ys-flow-board {
    border: 1px solid var(--public-border);
    border-radius: var(--public-radius);
    background: #ffffff;
    box-shadow: var(--public-shadow);
}

/* Base stat-card sizing/theming lives in the redesigned block further below. */

.ys-category-card {
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: 12px;
    padding: 14px;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ys-category-card:hover,
.ys-venue-card:hover {
    border-color: rgba(14, 165, 233, 0.45);
    box-shadow: 0 18px 38px rgba(14, 165, 233, 0.10);
    transform: translateY(-2px);
}

.ys-category-icon {
    display: flex;
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f0f9ff;
    color: #0284c7;
    font-size: 19px;
}

.ys-venue-card {
    display: block;
    overflow: hidden;
    transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.ys-empty-state {
    display: flex;
    align-items: center;
    gap: 14px;
    border: 1px dashed #cbd5e1;
    border-radius: var(--public-radius);
    background: #f8fafc;
    padding: 18px;
}

.ys-empty-state > i {
    display: flex;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #ffffff;
    color: #94a3b8;
    font-size: 18px;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.04);
}

.ys-empty-state h3 {
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
}

.ys-empty-state p {
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
}

/* Flow timeline styles live in the redesigned block further below. */

.ys-data-panel {
    padding: 22px;
}

.ys-cta-panel {
    display: flex;
    min-height: 100%;
    flex-direction: column;
    justify-content: center;
    border-radius: var(--public-radius);
    background:
        linear-gradient(150deg, rgba(15, 23, 42, 0.96), rgba(3, 105, 161, 0.9)),
        url("../images/slider/slide_1.png");
    background-position: center;
    background-size: cover;
    padding: 28px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.18);
}

.ys-public-footer {
    background:
        linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(3, 54, 115, 0.94)),
        url("../images/slider/slide_2.png");
    background-position: center;
    background-size: cover;
    padding-bottom: calc(5rem + env(safe-area-inset-bottom));
}

.ys-footer-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 0.75fr));
}

.ys-footer-title {
    margin-bottom: 12px;
    color: #ffffff;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ys-footer-column {
    display: grid;
    align-content: start;
    gap: 8px;
}

.ys-footer-column a {
    color: rgba(255, 255, 255, 0.62);
    font-size: 12px;
    font-weight: 700;
    transition: color 0.2s ease;
}

.ys-footer-column a:hover {
    color: #ffffff;
}

.ys-footer-contact {
    display: grid;
    align-content: start;
    gap: 8px;
    color: rgba(255, 255, 255, 0.68);
}

.ys-footer-contact p,
.ys-footer-contact span,
.ys-footer-contact a {
    color: rgba(255, 255, 255, 0.68) !important;
}

.ys-footer-contact .ys-footer-title {
    color: #ffffff !important;
}

.ys-footer-contact svg {
    color: #7dd3fc !important;
    stroke: currentColor;
}

.ys-footer-contact a:hover {
    color: #ffffff !important;
}

.ys-footer-primary-link,
.ys-footer-secondary-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    padding: 11px 14px;
    font-size: 12px;
    font-weight: 900;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.ys-footer-primary-link {
    background: #ffffff;
    color: #0f172a;
}

.ys-footer-primary-link:hover {
    background: #e0f2fe;
}

.ys-footer-secondary-link {
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

.ys-footer-secondary-link:hover {
    background: rgba(255, 255, 255, 0.10);
}

body.public-app-shell:not(.yoksport-dashboard-page) :where(.rounded-xl, .rounded-2xl, .rounded-3xl, .rounded-\[1\.2rem\], .rounded-\[1\.35rem\], .rounded-\[1\.5rem\], .rounded-\[1\.6rem\], .rounded-\[1\.7rem\]) {
    border-radius: var(--public-radius) !important;
}

body.public-app-shell:not(.yoksport-dashboard-page) :where(.shadow-xl, .shadow-lg, .shadow-card) {
    box-shadow: var(--public-shadow) !important;
}

.ys-login-page {
    isolation: isolate;
    background:
        radial-gradient(circle at 18% 14%, rgba(125, 211, 252, 0.22), transparent 30rem),
        radial-gradient(circle at 88% 76%, rgba(14, 165, 233, 0.20), transparent 28rem),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.16' stroke-width='1'%3E%3Cpath d='M0 40H220M0 110H220M0 180H220M40 0V220M110 0V220M180 0V220'/%3E%3Ccircle cx='110' cy='110' r='58'/%3E%3Ccircle cx='110' cy='110' r='16'/%3E%3C/g%3E%3C/svg%3E"),
        linear-gradient(135deg, #06143b 0%, #064fb2 55%, #0ea5e9 100%);
    background-blend-mode: screen, screen, soft-light, normal;
    background-position: center, center, right top, center;
    background-repeat: no-repeat, no-repeat, repeat, no-repeat;
    background-size: auto, auto, 220px 220px, cover;
}

.ys-login-page::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
        linear-gradient(90deg, rgba(2, 6, 23, 0.38), rgba(2, 132, 199, 0.08));
    pointer-events: none;
}

.ys-login-page::after {
    content: "";
    position: absolute;
    inset: auto -8rem -12rem auto;
    z-index: 0;
    width: 34rem;
    height: 34rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    pointer-events: none;
}

.public-app-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 90 !important;
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    border-bottom: 1px solid rgba(226, 232, 240, 0.92) !important;
    background: rgba(255, 255, 255, 0.96) !important;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.public-app-header .public-app-container {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

.public-desktop-nav-link {
    display: inline-flex;
    min-height: 34px;
    align-items: center;
    gap: 6px;
    border-radius: var(--public-radius);
    padding: 0 12px;
    color: #475569;
    font-size: 12px;
    font-weight: 800;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.public-desktop-nav-link svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    stroke-width: 2.4;
}

.public-desktop-nav-link:hover {
    background: #f1f5f9;
    color: #0369a1;
}

.public-bottom-nav {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: env(safe-area-inset-bottom);
}

.public-bottom-nav .public-app-container {
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
}

.public-app-shell .public-list-toolbar {
    border-bottom: 1px solid rgba(226, 232, 240, 0.92);
    background: rgba(255, 255, 255, 0.96);
}

.public-app-shell > section.bg-sky-50.pb-5.pt-5 {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        var(--public-blue-hero),
        var(--public-sport-image) !important;
    background-position: center;
    background-size: cover;
}

.public-app-shell > section.bg-sky-50.pb-5.pt-5::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0)),
        radial-gradient(circle at 18% 18%, rgba(56, 189, 248, 0.22), transparent 28rem);
}

.public-app-shell > section.bg-sky-50.pb-5.pt-5 h1,
.public-app-shell > section.bg-sky-50.pb-5.pt-5 h2 {
    color: #ffffff !important;
}

.public-app-shell > section.bg-sky-50.pb-5.pt-5 p,
.public-app-shell > section.bg-sky-50.pb-5.pt-5 label span {
    color: rgba(226, 232, 240, 0.9) !important;
}

.public-app-shell > section.bg-sky-50.pb-5.pt-5 .text-slate-600,
.public-app-shell > section.bg-sky-50.pb-5.pt-5 .text-slate-500 {
    color: rgba(226, 232, 240, 0.9) !important;
}

.public-app-shell > section.bg-sky-50.pb-5.pt-5 .bg-white,
.public-app-shell > section.bg-sky-50.pb-5.pt-5 select {
    background-color: rgba(255, 255, 255, 0.96) !important;
}

.public-app-shell .venue-card {
    border-color: var(--public-border) !important;
    border-radius: var(--public-radius) !important;
    background: #ffffff !important;
    box-shadow: var(--public-shadow);
}

.public-app-shell .venue-card:hover {
    border-color: rgba(14, 165, 233, 0.45) !important;
    transform: translateY(-2px);
}

#venueList > :not([hidden]) ~ :not([hidden]) {
    margin-top: 0 !important;
}

@media (min-width: 768px) {
    body.public-app-shell:not(.yoksport-dashboard-page) {
        padding-bottom: 0 !important;
    }

    .public-bottom-nav {
        display: none;
    }

    .ys-public-footer {
        padding-bottom: 0;
    }

    #venueList {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }

    #venueList .venue-card {
        display: block !important;
    }

    #venueList .venue-card > .relative {
        aspect-ratio: 16 / 10;
        width: 100%;
    }
}

@media (min-width: 1100px) {
    #venueList {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .ys-hero-visual {
        min-height: 430px;
    }

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

    .ys-footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 640px) {
    .public-app-shell.yoksport-landing-page {
        padding: 0 !important;
    }

    .public-app-shell.yoksport-landing-page > #ysLandingFrame {
        width: 100%;
        min-height: 100vh;
        border-radius: 0;
        border: 0;
    }

    .ys-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ys-public-hero .ys-container {
        padding-top: 28px;
        padding-bottom: 34px;
        min-height: auto;
    }

    .ys-hero-visual {
        min-height: 390px;
    }

    .ys-hero-panel {
        padding: 12px;
    }

    .ys-section {
        padding: 40px 0;
    }

    .ys-section-tight {
        padding-top: 20px;
        padding-bottom: 32px;
    }

    .ys-section-title {
        font-size: 24px;
    }

    .ys-hero-workspace {
        padding: 16px;
    }

    .ys-flow-item {
        grid-template-columns: auto 1fr;
    }

    .ys-flow-icon {
        display: none;
    }

    .ys-empty-state {
        align-items: flex-start;
        padding: 16px;
    }

    .ys-data-panel,
    .ys-cta-panel {
        padding: 18px;
    }

    .ys-footer-grid {
        grid-template-columns: 1fr;
    }
}

.public-app-shell.yoksport-landing-page .custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.public-app-shell.yoksport-landing-page .custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f5f9;
}

.public-app-shell.yoksport-landing-page .custom-scrollbar::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

.public-app-header,
.public-bottom-nav {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
}

.public-bottom-nav {
    padding-bottom: env(safe-area-inset-bottom);
}

.public-app-shell > section.public-favorite-section {
    background-color: #e8f7fd;
}

.public-faq-item > summary {
    list-style: none;
}

.public-faq-item > summary::-webkit-details-marker {
    display: none;
}

.public-faq-item .faq-chevron {
    transition: transform 0.2s ease;
}

.public-faq-item[open] .faq-chevron {
    transform: rotate(180deg);
}

.public-app-card {
    border: 1px solid rgba(226, 232, 240, 0.9);
    border-radius: 1.5rem;
    background: #fff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.lightbox { opacity: 0; visibility: hidden; transition: all 0.3s ease; }
.lightbox.active { opacity: 1; visibility: visible; }
.lightbox-content { transform: scale(0.8); transition: transform 0.3s ease; }
.lightbox.active .lightbox-content { transform: scale(1); }

.gradient-overlay {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.85) 0%, rgba(5, 150, 105, 0.9) 100%);
}

.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-reveal.revealed { opacity: 1; transform: translateY(0); }

.scroll-reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-reveal-left.revealed { opacity: 1; transform: translateX(0); }

.scroll-reveal-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-reveal-right.revealed { opacity: 1; transform: translateX(0); }

.scroll-reveal-scale {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.scroll-reveal-scale.revealed { opacity: 1; transform: scale(1); }

.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }
.stagger-6 { transition-delay: 0.6s; }

body.public-app-shell.yoksport-dashboard-page {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 100vh;
    min-height: 100dvh;
    display: block;
    margin: 0;
    overflow: hidden;
    background: #f3f4f6;
    padding-bottom: 0 !important;
}

#yoksportDashboardShell {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    overflow: hidden;
    background: #f3f4f6;
}

#yoksportDashboard {
    width: 100%;
    max-width: 430px;
    height: 100vh;
    height: 100dvh;
    margin: 0 auto;
    background: #f8f9fc;
}

#yoksportDashboard .ys-dashboard-header {
    background: linear-gradient(135deg, #011e4f 0%, #033580 46%, #0a4bb5 100%);
    color: #ffffff;
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

#yoksportDashboard .ys-dashboard-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-image:
        radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.24) 0 2px, transparent 3px),
        radial-gradient(circle at 23% 72%, rgba(255, 255, 255, 0.16) 0 2px, transparent 3px),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='430' height='230' viewBox='0 0 430 230'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.24' stroke-width='2'%3E%3Cpath d='M-30 176C38 130 98 154 156 112S278 68 462 108'/%3E%3Cpath d='M-12 68H82V166H-12zM12 68v98M58 68v98M-12 101h94M-12 134h94'/%3E%3Ccircle cx='94' cy='96' r='44'/%3E%3Cpath d='M58 96h72M94 52v88'/%3E%3Cpath d='M208 58l38 20-38 20-38-20zM170 78v54M246 78v54M170 132h76'/%3E%3Cpath d='M318 30h74v74h-74zM336 30v74M374 30v74M318 55h74M318 80h74'/%3E%3Cpath d='M300 154c23-20 58-20 82 0M320 172h42'/%3E%3C/g%3E%3C/svg%3E");
    background-position: center, center, center bottom;
    background-repeat: no-repeat;
    background-size: auto, auto, cover;
    opacity: 0.9;
}

#yoksportDashboard .ys-dashboard-header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 104px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.26) 0%, rgba(255, 255, 255, 0.10) 52%, rgba(255, 255, 255, 0) 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 68%, transparent 100%);
}

#yoksportDashboard .ys-dashboard-header > * {
    position: relative;
    z-index: 2;
}

#yoksportDashboard .ys-dashboard-header > div:last-child {
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.18);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 14px 30px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

#yoksportDashboard .ys-dashboard-scroll {
    height: 100%;
    min-height: 0;
    overscroll-behavior: contain;
}

#yoksportDashboard .ys-summary-title {
    color: #033580;
}

#yoksportDashboard .ys-bottom-nav {
    padding-bottom: calc(2rem + env(safe-area-inset-bottom));
}

.yoksport-dashboard-page .scrollbar-hide::-webkit-scrollbar {
    display: none;
}

.yoksport-dashboard-page .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.yoksport-splash {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    justify-content: center;
    background-color: #032a5f;
    opacity: 1;
    transition: opacity 0.45s ease, visibility 0.45s ease;
}

.yoksport-splash.is-hiding {
    visibility: hidden;
    opacity: 0;
}

.yoksport-splash .splash-container {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-width: 480px;
    margin: 0 auto;
    background: linear-gradient(135deg, #011b42 0%, #06408f 50%, #011b42 100%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    font-family: 'Montserrat', sans-serif;
}

.yoksport-splash .bg-decoration {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.03) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: rotate(45deg);
    pointer-events: none;
    z-index: 0;
}

.yoksport-splash .main-content {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 20px;
}

.yoksport-splash .main-logo {
    width: 120px;
    height: 120px;
    margin-bottom: 25px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: 0 18px 38px rgba(0, 0, 0, 0.18);
    overflow: hidden;
}

.yoksport-splash .main-logo img {
    width: 82%;
    height: 82%;
    object-fit: contain;
}

.yoksport-splash .main-logo span {
    font-size: 20px;
    font-weight: 800;
    color: #e0eaff;
    letter-spacing: 1px;
}

.yoksport-splash .title {
    margin-bottom: 15px;
    font-size: 32px;
    font-weight: 800;
    font-style: italic;
    line-height: 1.1;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.yoksport-splash .tagline {
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 0.5px;
    color: #e0eaff;
}

.yoksport-splash .bottom-content {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.yoksport-splash .skyline-wrapper {
    position: relative;
    width: 100%;
    height: 150px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 9px;
    padding: 0 32px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.yoksport-splash .skyline-wrapper::before {
    content: "";
    position: absolute;
    inset: 26px 0 0;
    background:
        radial-gradient(circle at 22% 36%, rgba(255, 255, 255, 0.16) 0 2px, transparent 3px),
        radial-gradient(circle at 70% 26%, rgba(255, 255, 255, 0.14) 0 2px, transparent 3px),
        linear-gradient(to top, rgba(255, 255, 255, 0.08), transparent 62%);
}

.yoksport-splash .skyline-block {
    position: relative;
    z-index: 1;
    width: 34px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-bottom: 0;
    background: rgba(255, 255, 255, 0.06);
}

.yoksport-splash .skyline-block-1 { height: 44px; }
.yoksport-splash .skyline-block-2 { height: 68px; }
.yoksport-splash .skyline-block-3 { height: 94px; width: 46px; }
.yoksport-splash .skyline-block-4 { height: 58px; }
.yoksport-splash .skyline-block-5 { height: 78px; }

.yoksport-splash .skyline-line {
    position: absolute;
    left: 36px;
    right: 36px;
    bottom: 18px;
    height: 1px;
    background: rgba(255, 255, 255, 0.32);
}

.yoksport-splash .footer {
    width: 100%;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background-color: #021e49;
}

.yoksport-splash .gov-logo {
    width: 35px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.24);
    border-radius: 8px;
}

.yoksport-splash .gov-logo span {
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
}

.yoksport-splash .gov-text {
    text-align: left;
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: 0.5px;
}

.yoksport-splash .gov-text strong {
    font-weight: 700;
    font-size: 11px;
}

@media (prefers-reduced-motion: reduce) {
    .yoksport-splash {
        transition: none;
    }
}


/* =====================================================================
   YOKSPORT — REDESIGN BERANDA (Hero Slider + Sections)
   Tujuan: hero slider elegan, lazy load, responsive mobile-first.
   Token utama berbagi dengan :root yang sudah ada (--public-radius, dll).
   ===================================================================== */

.ys-public-dashboard { isolation: isolate; }

/* ---------- HERO SLIDER ---------- */
.ys-hero-slider {
    position: relative;
    width: 100%;
    min-height: 560px;
    height: clamp(560px, 78vh, 720px);
    overflow: hidden;
    background: #02132e;
    isolation: isolate;
}

.ys-hero-slider:focus { outline: none; }

.ys-hero-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.ys-hero-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .9s ease, visibility 0s linear .9s, transform 1.4s ease;
    transform: scale(1.04);
    will-change: opacity, transform;
}

.ys-hero-slide.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
    transition: opacity .9s ease, visibility 0s, transform 7s ease;
}

.ys-hero-slide-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    z-index: 0;
    user-select: none;
    -webkit-user-drag: none;
}

.ys-hero-slide-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(115deg, rgba(2, 16, 43, 0.92) 0%, rgba(3, 62, 141, 0.78) 42%, rgba(14, 165, 233, 0.40) 80%, rgba(2, 16, 43, 0.10) 100%),
        radial-gradient(circle at 80% 14%, rgba(125, 211, 252, 0.22), transparent 32rem),
        linear-gradient(180deg, rgba(2, 6, 23, 0.10) 0%, rgba(2, 6, 23, 0.55) 100%);
}

.ys-hero-slide-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 96px 0 120px;
}

.ys-hero-slide-content .ys-container {
    width: 100%;
}

.ys-hero-copy {
    max-width: 720px;
    color: #ffffff;
    animation: ysHeroFade .9s ease both .15s;
}

.ys-hero-slide:not(.is-active) .ys-hero-copy { animation: none; }

@keyframes ysHeroFade {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ys-hero-title {
    color: #ffffff !important;
    font-size: clamp(28px, 4.6vw, 56px);
    font-weight: 900;
    line-height: 1.06;
    letter-spacing: -0.015em;
    text-shadow: 0 2px 28px rgba(2, 6, 23, 0.32);
    margin-bottom: 14px;
}

.ys-hero-desc {
    color: rgba(241, 245, 249, 0.92) !important;
    font-size: clamp(13px, 1.3vw, 16px);
    font-weight: 500;
    line-height: 1.7;
    max-width: 560px;
    text-shadow: 0 1px 14px rgba(2, 6, 23, 0.30);
}

.ys-hero-search {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0;
    margin-top: 22px;
    padding: 6px;
    max-width: 620px;
    border: 0;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 14px 32px rgba(2, 16, 43, 0.30);
}

.ys-hero-search-field {
    position: relative;
    display: block;
}

.ys-hero-search-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    width: 16px;
    height: 16px;
    transform: translateY(-50%);
    color: #64748b;
}

.ys-hero-search input {
    width: 100%;
    height: 46px;
    padding: 0 14px 0 38px;
    border: 0;
    border-radius: 10px;
    background: #ffffff;
    color: #0f172a;
    font-size: 13px;
    font-weight: 600;
    outline: none;
    transition: background-color .2s ease;
}

.ys-hero-search input::placeholder { color: #94a3b8; }

.ys-hero-search input:focus { background: #f8fafc; }

.ys-hero-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    padding: 0 20px;
    border: 0;
    border-radius: 10px;
    background: #0369a1;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background-color .2s ease;
}

.ys-hero-search-btn:hover { background: #075985; }

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

.ys-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 18px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.01em;
    transition: transform .15s ease, background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
    border: 1px solid transparent;
}

.ys-btn:hover { transform: translateY(-1px); }

.ys-btn-primary {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 10px 22px rgba(2, 6, 23, 0.22);
}
.ys-btn-primary:hover { background: #e0f2fe; color: #0369a1; }

.ys-btn-ghost {
    border-color: rgba(255, 255, 255, 0.30);
    background: rgba(255, 255, 255, 0.10);
    color: #ffffff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.ys-btn-ghost:hover { background: rgba(255, 255, 255, 0.18); }

.ys-btn-accent {
    background: #ea580c;
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(234, 88, 12, 0.32);
}
.ys-btn-accent:hover { background: #c2410c; }

.ys-btn-outline {
    border-color: #cbd5e1;
    background: #ffffff;
    color: #0f172a;
}
.ys-btn-outline:hover { border-color: #38bdf8; color: #0369a1; }

.ys-btn-light {
    background: #ffffff;
    color: #0f172a;
}
.ys-btn-light:hover { background: #fff7ed; color: #ea580c; }

.ys-btn-glass {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
    color: #ffffff;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.ys-btn-glass:hover { background: rgba(255, 255, 255, 0.16); }

.ys-hero-metrics {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 22px;
    max-width: 580px;
}

.ys-hero-metric {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    border: 0;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 12px 26px rgba(2, 16, 43, 0.28);
}

.ys-hero-metric-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.95;
}

.ys-hero-metric-content { position: relative; z-index: 1; }

.ys-hero-metric p {
    font-size: 22px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.01em;
}

.ys-hero-metric span {
    display: block;
    margin-top: 6px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.92;
}

/* Per-color metric theming */
.ys-hero-metric-blue {
    background: linear-gradient(135deg, #075985 0%, #0ea5e9 100%);
    color: #e0f2fe;
}
.ys-hero-metric-blue p { color: #ffffff; }

.ys-hero-metric-green {
    background: linear-gradient(135deg, #14532d 0%, #16a34a 100%);
    color: #dcfce7;
}
.ys-hero-metric-green p { color: #ffffff; }

.ys-hero-metric-orange {
    background: linear-gradient(135deg, #9a3412 0%, #ea580c 100%);
    color: #ffedd5;
}
.ys-hero-metric-orange p { color: #ffffff; }

/* ---- Hero nav arrows ---- */
.ys-hero-nav {
    position: absolute;
    top: 50%;
    z-index: 5;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: #ffffff;
    color: #0f172a;
    cursor: pointer;
    transition: background-color .2s ease, transform .15s ease, color .2s ease;
    box-shadow: 0 8px 18px rgba(2, 16, 43, 0.30);
}

.ys-hero-nav:hover {
    background: #0369a1;
    color: #ffffff;
    transform: translateY(-50%) scale(1.05);
}

.ys-hero-prev { left: 18px; }
.ys-hero-next { right: 18px; }

/* ---- Hero dots ---- */
.ys-hero-dots {
    position: absolute;
    left: 50%;
    bottom: 38px;
    z-index: 5;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 0;
    border-radius: 999px;
    background: rgba(2, 16, 43, 0.55);
}

.ys-hero-dot {
    width: 8px;
    height: 8px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.50);
    cursor: pointer;
    padding: 0;
    transition: background-color .2s ease, width .25s ease;
}

.ys-hero-dot.is-active {
    background: #ffffff;
    width: 22px;
}

/* ---- Hero progress bar ---- */
.ys-hero-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    height: 3px;
    background: rgba(255, 255, 255, 0.10);
}

.ys-hero-progress-bar {
    display: block;
    height: 100%;
    width: 0;
    background: #38bdf8;
    transition: width .12s linear;
}

/* ---- Scroll cue ---- */
.ys-hero-scroll {
    position: absolute;
    left: 50%;
    bottom: 16px;
    z-index: 5;
    transform: translateX(-50%);
    width: 22px;
    height: 36px;
    border: 1.5px solid rgba(255, 255, 255, 0.45);
    border-radius: 14px;
    display: none;
}

.ys-hero-scroll span {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 3px;
    height: 7px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.85);
    animation: ysHeroScrollDown 1.6s ease-in-out infinite;
}

@keyframes ysHeroScrollDown {
    0%   { opacity: 0; transform: translateY(0); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(12px); }
}

@media (min-width: 1024px) {
    .ys-hero-scroll { display: block; bottom: 14px; }
}

/* =====================================================================
   SECTION HEAD + LIST GRID
   ===================================================================== */
.ys-section-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 22px;
}

@media (min-width: 640px) {
    .ys-section-head {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
    }
}

/* ---- Stat cards refined ---- */
.ys-stat-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

/* ---- Colorful stat card with photo background ---- */
.ys-stat-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    min-height: 172px;
    padding: 24px;
    border-radius: 22px !important;
    border: 0;
    color: #ffffff;
    background: #0369a1;
    box-shadow: 0 20px 42px -18px rgba(15, 23, 42, 0.5);
    transition: transform .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}

.ys-stat-card > * { position: relative; z-index: 2; }

/* faded background photo */
.ys-stat-img {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.38;
    transform: scale(1.06);
    transition: transform .55s ease;
}

/* colored gradient on top of the photo */
.ys-stat-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    opacity: 0.84;
    pointer-events: none;
}

.ys-stat-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 32px 58px -20px rgba(15, 23, 42, 0.55);
}

.ys-stat-card:hover .ys-stat-img { transform: scale(1.16); }

/* ---- Per-color theming: base color + photo + overlay gradient ---- */
.ys-stat-blue { background: #0369a1; }
.ys-stat-blue .ys-stat-img { background-image: url('../../../images/dashboard/card_total.png'); }
.ys-stat-blue .ys-stat-overlay {
    background: linear-gradient(140deg, rgba(2, 132, 199, 0.95) 0%, rgba(3, 105, 161, 0.92) 55%, rgba(12, 74, 110, 0.96) 100%);
}

.ys-stat-green { background: #15803d; }
.ys-stat-green .ys-stat-img { background-image: url('../../../images/dashboard/card_month.png'); }
.ys-stat-green .ys-stat-overlay {
    background: linear-gradient(140deg, rgba(34, 197, 94, 0.94) 0%, rgba(21, 128, 61, 0.92) 55%, rgba(20, 83, 45, 0.96) 100%);
}

.ys-stat-orange { background: #c2410c; }
.ys-stat-orange .ys-stat-img { background-image: url('../../../images/dashboard/card_today.png'); }
.ys-stat-orange .ys-stat-overlay {
    background: linear-gradient(140deg, rgba(249, 115, 22, 0.94) 0%, rgba(234, 88, 12, 0.92) 55%, rgba(154, 52, 18, 0.96) 100%);
}

.ys-stat-purple { background: #6d28d9; }
.ys-stat-purple .ys-stat-img { background-image: url('../../../images/dashboard/card_pending.png'); }
.ys-stat-purple .ys-stat-overlay {
    background: linear-gradient(140deg, rgba(139, 92, 246, 0.94) 0%, rgba(109, 40, 217, 0.92) 55%, rgba(76, 29, 149, 0.96) 100%);
}

.ys-stat-slate { background: #334155; }
.ys-stat-slate .ys-stat-img { background-image: url('../../../images/dashboard/card_total.png'); }
.ys-stat-slate .ys-stat-overlay {
    background: linear-gradient(140deg, rgba(100, 116, 139, 0.94) 0%, rgba(51, 65, 85, 0.96) 100%);
}

.ys-stat-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ys-stat-icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 15px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.30);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
    transition: transform .3s ease;
}

.ys-stat-icon svg {
    width: 25px;
    height: 25px;
    stroke-width: 2.2;
}

.ys-stat-card:hover .ys-stat-icon {
    transform: scale(1.1) rotate(-6deg);
}

.ys-stat-label {
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.92);
}

.ys-stat-value {
    margin-top: auto;
    padding-top: 18px;
    font-size: 40px;
    font-weight: 900;
    letter-spacing: -0.02em;
    line-height: 1;
    color: #ffffff;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
}

.ys-stat-caption {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.90);
}

.ys-stat-caption svg {
    width: 15px;
    height: 15px;
    stroke-width: 2.4;
    color: rgba(255, 255, 255, 0.95);
    flex: 0 0 auto;
}

/* ---- Category cards ---- */
.ys-category-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .ys-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .ys-category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ys-category-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 14px !important;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.04);
    transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}

.ys-category-card:hover {
    transform: translateY(-2px);
    border-color: rgba(14, 165, 233, 0.45);
    box-shadow: 0 18px 36px rgba(14, 165, 233, 0.10);
}

.ys-category-card .ys-category-icon {
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    color: #0369a1;
    font-size: 20px;
    transition: transform .25s ease;
}

.ys-category-card:hover .ys-category-icon {
    transform: rotate(-4deg) scale(1.05);
}

.ys-category-body { min-width: 0; flex: 1; }

.ys-category-body h3 {
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ys-category-body p {
    margin-top: 4px;
    color: #64748b;
    font-size: 11.5px;
    font-weight: 700;
}

.ys-category-arrow {
    margin-left: auto;
    color: #cbd5e1;
    transition: transform .2s ease, color .2s ease;
}

.ys-category-card:hover .ys-category-arrow {
    transform: translateX(3px);
    color: #0ea5e9;
}

/* ---- Venue cards ---- */
.ys-venue-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .ys-venue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .ys-venue-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ys-venue-card {
    display: block;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 16px !important;
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
    transition: transform .25s ease, box-shadow .3s ease, border-color .2s ease;
}

.ys-venue-card:hover {
    transform: translateY(-4px);
    border-color: rgba(14, 165, 233, 0.40);
    box-shadow: 0 22px 44px rgba(14, 165, 233, 0.16);
}

.ys-venue-media {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #e2e8f0;
}

.ys-venue-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .6s ease;
}

.ys-venue-card:hover .ys-venue-media img { transform: scale(1.06); }

.ys-venue-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 6px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.96);
    color: #0369a1;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
}

.ys-venue-body { padding: 18px; }

.ys-venue-body h3 {
    color: #0f172a;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ys-venue-loc {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
}

.ys-venue-loc i { color: #0ea5e9; }

.ys-venue-loc span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ys-venue-meta {
    margin-top: 14px;
    display: grid;
    gap: 8px;
}

.ys-venue-meta > div {
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8fafc;
}

.ys-venue-meta-label {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ys-venue-meta-value {
    margin-top: 4px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
}

.ys-venue-cta {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #0369a1;
    font-size: 12px;
    font-weight: 800;
    transition: gap .2s ease;
}

.ys-venue-card:hover .ys-venue-cta { gap: 12px; }

/* ---- Flow ---- */
.ys-flow-wrap {
    display: grid;
    gap: 28px;
}

@media (min-width: 1024px) {
    .ys-flow-wrap { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 40px; }
}

.ys-flow-lede {
    margin-top: 12px;
    color: #475569;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.75;
    max-width: 520px;
}

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

.ys-flow-board {
    padding: 22px;
    border-radius: 20px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid rgba(226, 232, 240, 0.92);
    box-shadow: 0 14px 38px -20px rgba(15, 23, 42, 0.25);
}

.ys-flow-board-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 18px;
    border-bottom: 1px dashed rgba(203, 213, 225, 0.9);
}

.ys-flow-board-icon {
    flex: 0 0 auto;
    display: flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #ffffff;
    font-size: 17px;
    box-shadow: 0 10px 20px -8px #f97316;
}

.ys-flow-board-title {
    font-size: 14.5px;
    font-weight: 800;
    color: #0f172a;
}

.ys-flow-board-sub {
    margin-top: 2px;
    font-size: 12px;
    font-weight: 600;
    color: #94a3b8;
}

.ys-flow-timeline {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 18px 0 0;
}

.ys-flow-item {
    position: relative;
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 16px;
    padding-bottom: 18px;
}

.ys-flow-item:last-child { padding-bottom: 0; }

/* vertical connector linking the step nodes */
.ys-flow-marker {
    position: relative;
    display: flex;
    justify-content: center;
}

.ys-flow-item:not(:last-child) .ys-flow-marker::before {
    content: "";
    position: absolute;
    top: 38px;
    bottom: -18px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: linear-gradient(180deg, rgba(249, 115, 22, 0.45), rgba(226, 232, 240, 0.9));
}

.ys-flow-step {
    position: relative;
    z-index: 1;
    display: flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #f97316;
    color: #ea580c;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.18);
    transition: transform .2s ease, background .2s ease, color .2s ease;
}

.ys-flow-item:hover .ys-flow-step {
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #ffffff;
    transform: scale(1.08);
}

.ys-flow-item-done .ys-flow-step {
    background: linear-gradient(135deg, #16a34a, #15803d);
    border-color: #16a34a;
    color: #ffffff;
}

.ys-flow-body {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.92);
    transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
}

.ys-flow-item:hover .ys-flow-body {
    transform: translateX(4px);
    border-color: rgba(249, 115, 22, 0.35);
    box-shadow: 0 12px 28px -14px rgba(249, 115, 22, 0.40);
}

.ys-flow-item-done:hover .ys-flow-body {
    border-color: rgba(22, 163, 74, 0.35);
    box-shadow: 0 12px 28px -14px rgba(22, 163, 74, 0.40);
}

.ys-flow-icon {
    flex: 0 0 auto;
    display: flex;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, #fff7ed, #ffedd5);
    color: #ea580c;
    font-size: 17px;
}

.ys-flow-item-done .ys-flow-icon {
    background: linear-gradient(135deg, #dcfce7, #bbf7d0);
    color: #15803d;
}

.ys-flow-text { min-width: 0; }

.ys-flow-tag {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ea580c;
    background: rgba(249, 115, 22, 0.10);
    padding: 2px 8px;
    border-radius: 999px;
}

.ys-flow-item-done .ys-flow-tag {
    color: #15803d;
    background: rgba(22, 163, 74, 0.10);
}

.ys-flow-text h3 {
    margin-top: 6px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.005em;
}

.ys-flow-text p {
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
}

/* ---- Data publik + CTA ---- */
.ys-data-wrap {
    display: grid;
    gap: 18px;
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .ys-data-wrap { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: stretch; }
}

.ys-data-panel {
    padding: 24px;
    border: 1px solid rgba(226, 232, 240, 0.95);
    border-radius: 18px !important;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.ys-data-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid #f1f5f9;
}

.ys-data-title {
    margin-top: 4px;
    color: #0f172a;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.ys-data-pill {
    padding: 8px 12px;
    border-radius: 10px;
    background: #ecfdf5;
    color: #047857;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.ys-data-cards {
    margin-top: 18px;
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .ys-data-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ys-data-cards > div {
    padding: 16px;
    border-radius: 14px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid #f1f5f9;
}

.ys-data-card-label {
    color: #94a3b8;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ys-data-card-value {
    margin-top: 8px;
    color: #0f172a;
    font-size: 16px;
    font-weight: 900;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.ys-data-card-sub {
    margin-top: 6px;
    color: #64748b;
    font-size: 11.5px;
    font-weight: 600;
}

.ys-data-table {
    margin-top: 18px;
    border: 1px solid #f1f5f9;
    border-radius: 14px;
    overflow: hidden;
}

.ys-data-thead {
    display: grid;
    grid-template-columns: 0.75fr 1fr;
    padding: 12px 16px;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    color: #ffffff;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ys-data-row {
    display: grid;
    grid-template-columns: 0.75fr 1fr;
    align-items: center;
    padding: 12px 16px;
    border-top: 1px solid #f1f5f9;
    color: #475569;
    font-size: 12px;
    font-weight: 600;
}

.ys-data-row-value {
    color: #0f172a;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ys-data-empty {
    margin-top: 18px;
    padding: 24px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
    text-align: center;
}

.ys-data-empty i {
    font-size: 26px;
    color: #cbd5e1;
}

.ys-data-empty-title {
    margin-top: 10px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
}

.ys-data-empty-sub {
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
}

/* ---- CTA panel ---- */
.ys-cta-panel {
    position: relative;
    overflow: hidden;
    padding: 32px;
    border-radius: 18px !important;
    color: #ffffff;
    background:
        linear-gradient(135deg, rgba(7, 27, 58, 0.94), rgba(3, 105, 161, 0.86)),
        url("../images/slider/slide_1.png");
    background-position: center;
    background-size: cover;
    box-shadow: 0 22px 50px rgba(2, 16, 43, 0.30);
    isolation: isolate;
}

.ys-cta-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 80% 14%, rgba(125, 211, 252, 0.30), transparent 28rem),
        radial-gradient(circle at 8% 86%, rgba(249, 115, 22, 0.22), transparent 22rem);
}

.ys-cta-panel > * { position: relative; z-index: 1; }

.ys-cta-eyebrow {
    color: #fed7aa;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ys-cta-title {
    margin-top: 14px;
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 900;
    line-height: 1.18;
    letter-spacing: -0.01em;
}

.ys-cta-desc {
    margin-top: 14px;
    color: rgba(241, 245, 249, 0.88);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.75;
}

.ys-cta-actions {
    margin-top: 22px;
    display: grid;
    gap: 10px;
}

/* =====================================================================
   REVEAL ON SCROLL
   ===================================================================== */
.ys-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .65s ease, transform .65s ease;
    transition-delay: var(--reveal-delay, 0ms);
    will-change: opacity, transform;
}

.ys-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .ys-reveal,
    .ys-hero-slide,
    .ys-hero-progress-bar,
    .ys-venue-media img {
        transition: none !important;
        animation: none !important;
    }
    .ys-reveal { opacity: 1; transform: none; }
}

/* =====================================================================
   RESPONSIVE FINE-TUNE
   ===================================================================== */
@media (max-width: 768px) {
    /* ===== MOBILE HERO: COMPACT — gambar slide tampil penuh tanpa terpotong ===== */
    .ys-hero-slider {
        min-height: 0;
        height: auto;
        background: #02132e;
    }

    .ys-hero-track {
        height: auto;
        aspect-ratio: 16 / 9;
    }

    .ys-hero-slide { background: #02132e; }

    .ys-hero-slide-image {
        object-fit: contain;
        object-position: center center;
        background: #02132e;
    }

    /* Overlay tipis hanya di bagian bawah supaya judul tetap kebaca */
    .ys-hero-slide-overlay {
        background: linear-gradient(180deg, rgba(2, 6, 23, 0) 60%, rgba(2, 6, 23, 0.55) 100%);
    }

    /* Konten: hanya judul, tanpa CTA / search / metrics / badge */
    .ys-hero-slide-content {
        padding: 0;
        align-items: flex-end;
    }

    .ys-hero-slide-content .ys-container {
        padding-bottom: 38px;
    }

    .ys-hero-copy {
        max-width: none;
        animation: none;
    }

    .ys-hero-badge,
    .ys-hero-desc,
    .ys-hero-search,
    .ys-hero-actions,
    .ys-hero-metrics {
        display: none !important;
    }

    .ys-hero-title {
        font-size: 14px;
        line-height: 1.2;
        margin-bottom: 0;
        text-shadow: 0 2px 10px rgba(2, 6, 23, 0.7);
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Kontrol slider lebih ramping */
    .ys-hero-prev, .ys-hero-next {
        width: 32px;
        height: 32px;
    }
    .ys-hero-prev { left: 6px; }
    .ys-hero-next { right: 6px; }

    .ys-hero-dots {
        bottom: 10px;
        padding: 4px 10px;
    }
    .ys-hero-progress { height: 2px; }

    /* Section di bawah hero */
    .ys-stat-value { font-size: 24px; }

    .ys-flow-item { grid-template-columns: auto 1fr; }
    .ys-flow-item .ys-flow-icon { display: none; }

    .ys-cta-panel { padding: 24px; }
}

@media (max-width: 480px) {
    .ys-hero-track { aspect-ratio: 16 / 9; }

    .ys-hero-title { display: none; }
    .ys-hero-slide-overlay { background: transparent; }

    .ys-hero-nav { display: none; }
    .ys-hero-dots { bottom: 8px; }
}

/* Override base hero rules so the new slider is the source of truth */
.ys-public-dashboard .ys-public-hero { display: none; }


/* =====================================================================
   YOKSPORT — RINGKASAN EVENT (REDESIGN)
   ===================================================================== */
.ys-event-summary {
    padding: 24px;
    border: 1px solid #eef2f7;
    border-radius: 20px !important;
    background: #ffffff;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.ys-event-summary-head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 18px;
    border-bottom: 1px solid #f1f5f9;
}

.ys-event-summary-headline { min-width: 0; }

.ys-event-summary-title {
    margin-top: 6px;
    color: #0f172a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.ys-event-summary-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.ys-event-summary-pill svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.4;
}

/* ---- Hero card untuk event terdekat ---- */
.ys-event-hero {
    position: relative;
    margin-top: 18px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 16px;
    align-items: center;
    padding: 18px;
    border-radius: 16px;
    color: #ffffff;
    background:
        linear-gradient(135deg, #0c4a6e 0%, #0369a1 55%, #0ea5e9 100%);
    box-shadow: 0 16px 36px rgba(3, 105, 161, 0.30);
    overflow: hidden;
    isolation: isolate;
    transition: transform .25s ease, box-shadow .3s ease;
}

.ys-event-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.42;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 240'><g fill='none' stroke='white' stroke-width='1.6' stroke-opacity='0.55'><circle cx='90' cy='60' r='32'/><path d='M58 60h64M90 28v64M67 37l46 46M113 37l-46 46'/><circle cx='620' cy='180' r='40'/><path d='M580 180h80M620 140v80'/><path d='M210 198 L246 162 L282 198 L246 234 Z'/><path d='M380 40h120v60h-120z'/><path d='M380 70h120M440 40v60'/><path d='M520 90c-20 14-46 14-66 0' stroke-linecap='round'/><path d='M150 150c30-18 70-18 100 0' stroke-linecap='round'/><circle cx='540' cy='60' r='4' fill='white' fill-opacity='0.50' stroke='none'/><circle cx='480' cy='180' r='3' fill='white' fill-opacity='0.40' stroke='none'/><circle cx='320' cy='80' r='3' fill='white' fill-opacity='0.40' stroke='none'/><circle cx='200' cy='40' r='2.5' fill='white' fill-opacity='0.45' stroke='none'/></g></svg>");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    mix-blend-mode: screen;
}

.ys-event-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 84% 12%, rgba(255, 255, 255, 0.22), transparent 14rem),
        radial-gradient(circle at 8% 92%, rgba(125, 211, 252, 0.30), transparent 12rem);
}

.ys-event-hero > * { position: relative; z-index: 1; }

.ys-event-hero:hover {
    transform: translateY(-2px);
    box-shadow: 0 22px 44px rgba(3, 105, 161, 0.36);
}

.ys-event-hero-stripe {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    padding: 10px 0;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.94);
    color: #0c4a6e;
    text-align: center;
    box-shadow: 0 8px 18px rgba(2, 16, 43, 0.18);
}

.ys-event-hero-day {
    font-size: 26px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
}

.ys-event-hero-month {
    margin-top: 4px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: #0369a1;
}

.ys-event-hero-body { min-width: 0; }

.ys-event-hero-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ys-event-hero-tag svg {
    width: 13px;
    height: 13px;
    stroke-width: 2.4;
}

.ys-event-hero-name {
    margin-top: 8px;
    color: #ffffff;
    font-size: 17px;
    font-weight: 900;
    line-height: 1.25;
    letter-spacing: -0.005em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-shadow: 0 2px 12px rgba(2, 16, 43, 0.32);
}

.ys-event-hero-meta {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    color: rgba(241, 245, 249, 0.92);
    font-size: 12px;
    font-weight: 700;
}

.ys-event-hero-meta span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ys-event-hero-meta svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.2;
    color: #bae6fd;
    flex-shrink: 0;
}

.ys-event-hero-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    color: #0369a1;
    box-shadow: 0 8px 18px rgba(2, 16, 43, 0.18);
    transition: transform .2s ease, background-color .2s ease;
}

.ys-event-hero-cta:hover {
    transform: rotate(-8deg) scale(1.05);
    background: #ffffff;
}

.ys-event-hero-cta svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.4;
}

/* ---- Detail info list ---- */
.ys-event-info-list {
    margin-top: 18px;
    display: grid;
    gap: 8px;
    list-style: none;
    padding: 0;
}

.ys-event-info-list li {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
    transition: border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.ys-event-info-list li:hover {
    background: #ffffff;
    border-color: #bae6fd;
    transform: translateX(2px);
}

.ys-event-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, #e0f2fe, #bae6fd);
    color: #0369a1;
    flex-shrink: 0;
}

.ys-event-info-icon svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.2;
}

.ys-event-info-label {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.005em;
}

.ys-event-info-value {
    text-align: right;
    color: #0f172a;
    font-size: 12.5px;
    font-weight: 800;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}

/* ---- Footer (status + link) ---- */
.ys-event-summary-foot {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px dashed #e2e8f0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
}

.ys-event-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 11.5px;
    font-weight: 800;
}

.ys-event-status-dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55);
    animation: ysPulse 1.6s ease-out infinite;
}

@keyframes ysPulse {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}

.ys-event-summary-foot .ys-text-link svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.4;
}

/* ---- Empty state ---- */
.ys-event-stat-grid {
    margin-top: 18px;
    display: grid;
    gap: 10px;
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .ys-event-stat-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ys-event-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
}

.ys-event-stat-icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
}

.ys-event-stat-icon svg {
    width: 18px;
    height: 18px;
    stroke-width: 2.2;
}

.ys-event-stat-icon-blue   { background: #e0f2fe; color: #0369a1; }
.ys-event-stat-icon-green  { background: #dcfce7; color: #15803d; }
.ys-event-stat-icon-orange { background: #ffedd5; color: #c2410c; }

.ys-event-stat-label {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ys-event-stat-value {
    margin-top: 4px;
    color: #0f172a;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1;
}

.ys-event-empty {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px;
    border: 1px dashed #cbd5e1;
    border-radius: 14px;
    background: #f8fafc;
}

.ys-event-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
    background: #ffffff;
    color: #94a3b8;
    border: 1px solid #e2e8f0;
}

.ys-event-empty-icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.2;
}

.ys-event-empty-title {
    color: #0f172a;
    font-size: 13px;
    font-weight: 800;
}

.ys-event-empty-sub {
    margin-top: 4px;
    color: #64748b;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
}

/* ---- Responsive ---- */
@media (max-width: 640px) {
    .ys-event-summary { padding: 18px; }

    .ys-event-summary-title { font-size: 18px; }

    .ys-event-hero {
        grid-template-columns: auto minmax(0, 1fr);
        gap: 12px;
        padding: 14px;
    }

    .ys-event-hero-stripe {
        width: 52px;
        padding: 8px 0;
    }
    .ys-event-hero-day { font-size: 22px; }

    .ys-event-hero-name { font-size: 15px; }
    .ys-event-hero-meta { gap: 8px 14px; font-size: 11.5px; }

    .ys-event-hero-cta {
        grid-column: 1 / -1;
        width: 100%;
        height: 36px;
        border-radius: 10px;
    }
    .ys-event-hero-cta::after {
        content: "Buka kalender event";
        margin-left: 8px;
        font-size: 12px;
        font-weight: 800;
        color: #0369a1;
    }

    .ys-event-info-list li {
        grid-template-columns: 30px 1fr;
        grid-template-rows: auto auto;
        row-gap: 2px;
        padding: 11px 12px;
    }

    .ys-event-info-icon {
        grid-row: 1 / span 2;
        width: 30px;
        height: 30px;
        border-radius: 9px;
    }

    .ys-event-info-icon svg { width: 14px; height: 14px; }

    .ys-event-info-label {
        grid-column: 2;
        grid-row: 1;
        font-size: 11px;
    }

    .ys-event-info-value {
        grid-column: 2;
        grid-row: 2;
        text-align: left;
        max-width: 100%;
        font-size: 12.5px;
        white-space: normal;
        overflow: visible;
    }

    .ys-event-summary-foot {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* =====================================================================
   YOKSPORT — KALENDER EVENT (REDESIGN)
   ===================================================================== */
.ys-cal-page {
    background: #f6f8fb;
    min-height: 100vh;
    padding-bottom: 32px;
}

/* ---------- Hero ---------- */
.ys-cal-hero {
    position: relative;
    overflow: hidden;
    color: #ffffff;
    background: #02132e;
    padding-bottom: 56px;
    isolation: isolate;
}

.ys-cal-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.ys-cal-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(125deg, rgba(2, 16, 43, 0.94) 0%, rgba(3, 62, 141, 0.78) 50%, rgba(14, 165, 233, 0.36) 100%),
        radial-gradient(circle at 84% 10%, rgba(125, 211, 252, 0.30), transparent 28rem);
}

.ys-cal-hero-inner {
    position: relative;
    z-index: 2;
    padding: 48px 0 64px;
}

.ys-cal-hero-copy { max-width: 760px; }

.ys-cal-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #ffffff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ys-cal-hero-badge svg { width: 14px; height: 14px; stroke-width: 2.4; }

.ys-cal-hero-title {
    margin-top: 18px;
    font-size: clamp(24px, 3.6vw, 42px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.015em;
    text-shadow: 0 2px 18px rgba(2, 6, 23, 0.32);
}

.ys-cal-hero-desc {
    margin-top: 12px;
    max-width: 620px;
    color: rgba(241, 245, 249, 0.92);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.7;
}

.ys-cal-hero-stats {
    margin-top: 26px;
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 580px;
}

.ys-cal-hero-stats > div {
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.ys-cal-hero-stat-value {
    color: #ffffff;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1;
}

.ys-cal-hero-stat-label {
    margin-top: 6px;
    color: rgba(226, 232, 240, 0.80);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* ---------- Filter ---------- */
.ys-cal-filter-wrap {
    margin-top: -42px;
    position: relative;
    z-index: 3;
}

.ys-cal-filter {
    background: #ffffff;
    border: 1px solid #eef2f7;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.10);
}

.ys-cal-filter-row {
    display: grid;
    gap: 14px;
    align-items: end;
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .ys-cal-filter-row {
        grid-template-columns: minmax(0, 1.4fr) minmax(220px, 0.8fr) auto;
    }
}

.ys-cal-filter-label {
    display: block;
    margin-bottom: 8px;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ys-cal-period-grid {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
    .ys-cal-period-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.ys-cal-period-pill { cursor: pointer; }
.ys-cal-period-pill input { position: absolute; opacity: 0; width: 0; height: 0; }
.ys-cal-period-pill > span {
    display: inline-flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    color: #64748b;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.01em;
    text-align: center;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ys-cal-period-pill > span svg { width: 14px; height: 14px; stroke-width: 2.4; }
.ys-cal-period-pill input:checked + span {
    background: #0369a1;
    color: #ffffff;
    border-color: #0369a1;
    box-shadow: 0 8px 18px rgba(3, 105, 161, 0.28);
}

.ys-cal-filter-venue { display: block; }

.ys-cal-filter-venue select {
    height: 48px;
    width: 100%;
    padding: 0 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #ffffff;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    outline: none;
}

.ys-cal-filter-venue select:focus {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.16);
}

.ys-cal-filter-submit {
    display: inline-flex;
    height: 48px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 22px;
    border: 0;
    border-radius: 12px;
    background: #0369a1;
    color: #ffffff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease;
    box-shadow: 0 10px 22px rgba(3, 105, 161, 0.28);
}

.ys-cal-filter-submit:hover { background: #075985; transform: translateY(-1px); }
.ys-cal-filter-submit:disabled { opacity: 0.7; cursor: wait; }
.ys-cal-filter-submit svg { width: 16px; height: 16px; stroke-width: 2.4; }
.ys-cal-spinner { display: none; animation: ysSpin 0.9s linear infinite; }
.ys-cal-spinner.is-shown { display: inline-block; }
.is-hidden { display: none !important; }

@keyframes ysSpin { to { transform: rotate(360deg); } }

.ys-cal-custom-range {
    margin-top: 12px;
    display: grid;
    gap: 12px;
    padding: 14px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
}

@media (min-width: 640px) {
    .ys-cal-custom-range { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ys-cal-custom-range input[type="date"] {
    height: 44px;
    width: 100%;
    padding: 0 14px;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    background: #ffffff;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    outline: none;
}

.ys-cal-custom-range input[type="date"]:focus {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.16);
}

.ys-cal-filter-legend {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px 18px;
    color: #64748b;
    font-size: 11.5px;
    font-weight: 700;
}

.ys-cal-filter-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ys-cal-legend-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 4px;
}

.ys-cal-legend-empty  { background: #ffffff; border: 1px solid #e2e8f0; }
.ys-cal-legend-booked { background: #0ea5e9; box-shadow: 0 0 0 2px #e0f2fe; }
.ys-cal-legend-start  { background: #f59e0b; box-shadow: 0 0 0 2px #fef3c7; }
.ys-cal-legend-end    { background: #16a34a; box-shadow: 0 0 0 2px #dcfce7; }
.ys-cal-legend-mid    { background: #94a3b8; box-shadow: 0 0 0 2px #f1f5f9; }
.ys-cal-legend-today  { background: #ffffff; border: 2px solid #0ea5e9; }

/* ---------- Card wrapper ---------- */
.ys-cal-card {
    background: #ffffff;
    border: 1px solid #eef2f7;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}

@media (min-width: 768px) { .ys-cal-card { padding: 22px; } }

.ys-cal-card-head {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
    padding-bottom: 14px;
    border-bottom: 1px solid #f1f5f9;
    margin-bottom: 16px;
}

.ys-cal-card-title {
    margin-top: 4px;
    color: #0f172a;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: -0.01em;
    line-height: 1.18;
}

.ys-cal-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 11.5px;
    font-weight: 800;
    white-space: nowrap;
}

.ys-cal-card-badge svg { width: 14px; height: 14px; stroke-width: 2.4; }

.ys-cal-card-icon {
    display: inline-flex;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #e0f2fe;
    color: #0369a1;
}
.ys-cal-card-icon svg { width: 20px; height: 20px; stroke-width: 2.2; }

/* ---------- Calendar grid ---------- */
.ys-cal-grid-wrap {
    overflow-x: auto;
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    background: #e2e8f0;
}

.ys-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: #e2e8f0;
    min-width: 700px;
}

@media (min-width: 768px) {
    .ys-cal-grid { min-width: 0; }
}

.ys-cal-weekday {
    background: #f8fafc;
    padding: 10px 0;
    text-align: center;
    color: #64748b;
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.ys-cal-cell {
    background: #ffffff;
    padding: 8px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    transition: background-color .2s ease, box-shadow .2s ease;
}

@media (min-width: 768px) { .ys-cal-cell { min-height: 140px; padding: 10px; } }

.ys-cal-cell.is-outside {
    background: #f1f5f9;
    color: #94a3b8;
}

/* TANGGAL TER-BOOKING — visible & differenced */
.ys-cal-cell.is-booked {
    background: linear-gradient(180deg, #f0f9ff 0%, #ffffff 70%);
    box-shadow: inset 3px 0 0 #0ea5e9;
}

.ys-cal-cell.is-booked:hover {
    background: linear-gradient(180deg, #e0f2fe 0%, #ffffff 70%);
}

.ys-cal-cell.is-today { box-shadow: inset 0 0 0 2px #0ea5e9; }
.ys-cal-cell.is-booked.is-today { box-shadow: inset 0 0 0 2px #0ea5e9, inset 3px 0 0 #0ea5e9; }

.ys-cal-cell-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}

.ys-cal-cell-day {
    display: inline-flex;
    width: 28px;
    height: 28px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #f1f5f9;
    color: #475569;
    font-size: 11px;
    font-weight: 900;
}

.ys-cal-cell.is-today .ys-cal-cell-day {
    background: #0369a1;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(3, 105, 161, 0.32);
}

.ys-cal-cell.is-booked .ys-cal-cell-day {
    background: #0ea5e9;
    color: #ffffff;
}

.ys-cal-cell.is-outside .ys-cal-cell-day {
    background: #ffffff;
    color: #94a3b8;
}

.ys-cal-cell-count {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #ecfdf5;
    color: #047857;
    font-size: 10px;
    font-weight: 900;
    line-height: 1.4;
}

.ys-cal-cell.is-booked .ys-cal-cell-count {
    background: #0ea5e9;
    color: #ffffff;
}

/* Booked status badge — sangat jelas terlihat di tanggal yang sudah ter-booking */
.ys-cal-cell-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #0ea5e9;
    color: #ffffff;
    font-size: 9.5px;
    font-weight: 900;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(14, 165, 233, 0.30);
    white-space: nowrap;
}

.ys-cal-cell-status svg {
    width: 11px;
    height: 11px;
    stroke-width: 3;
}

.ys-cal-cell-events {
    display: grid;
    gap: 4px;
}

.ys-cal-cell-event {
    display: grid;
    grid-template-columns: 6px 1fr auto;
    align-items: center;
    gap: 6px;
    width: 100%;
    text-align: left;
    padding: 5px 8px;
    border: 1px solid #e0f2fe;
    border-radius: 8px;
    background: #f0f9ff;
    color: #0c4a6e;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.3;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.ys-cal-cell-event:hover {
    background: #0ea5e9;
    color: #ffffff;
    border-color: #0ea5e9;
}

.ys-cal-cell-event-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ys-cal-cell-event-dot {
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #0ea5e9;
}

.ys-cal-cell-event:hover .ys-cal-cell-event-dot { background: #ffffff; }

/* Multi-day markers */
.ys-cal-cell-event.is-start { border-color: #f59e0b; background: #fffbeb; color: #92400e; }
.ys-cal-cell-event.is-start .ys-cal-cell-event-dot { background: #f59e0b; }
.ys-cal-cell-event.is-start:hover { background: #f59e0b; color: #ffffff; border-color: #f59e0b; }

.ys-cal-cell-event.is-end { border-color: #16a34a; background: #f0fdf4; color: #14532d; }
.ys-cal-cell-event.is-end .ys-cal-cell-event-dot { background: #16a34a; }
.ys-cal-cell-event.is-end:hover { background: #16a34a; color: #ffffff; border-color: #16a34a; }

.ys-cal-cell-event.is-mid { border-color: #cbd5e1; background: #f8fafc; color: #475569; }
.ys-cal-cell-event.is-mid .ys-cal-cell-event-dot { background: #94a3b8; }
.ys-cal-cell-event.is-mid:hover { background: #475569; color: #ffffff; border-color: #475569; }

.ys-cal-cell-event-tag {
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 6px;
    background: #f59e0b;
    color: #ffffff;
    font-size: 8.5px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.5;
}

.ys-cal-cell-event-tag.is-end { background: #16a34a; }

.ys-cal-cell-event:hover .ys-cal-cell-event-tag {
    background: #ffffff;
    color: #92400e;
}
.ys-cal-cell-event.is-end:hover .ys-cal-cell-event-tag { color: #14532d; }

.ys-cal-cell-more {
    display: block;
    padding: 0 8px;
    font-size: 10px;
    font-weight: 800;
    color: #64748b;
}

.is-loading { opacity: 0.6; pointer-events: none; }

/* ---------- Agenda list ---------- */
.ys-cal-agenda-list {
    display: grid;
    gap: 14px;
}

.ys-cal-agenda-group {
    display: grid;
    gap: 12px;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .ys-cal-agenda-group {
        grid-template-columns: 160px minmax(0, 1fr);
    }
}

.ys-cal-agenda-date {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border-radius: 16px;
    background: linear-gradient(160deg, #0c4a6e 0%, #0369a1 60%, #0ea5e9 100%);
    color: #ffffff;
    box-shadow: 0 14px 28px rgba(3, 105, 161, 0.22);
    overflow: hidden;
    isolation: isolate;
    min-height: 110px;
}

.ys-cal-agenda-date::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(circle at 80% 10%, rgba(255, 255, 255, 0.30), transparent 12rem),
        radial-gradient(circle at 8% 92%, rgba(125, 211, 252, 0.30), transparent 10rem);
}

.ys-cal-agenda-date > * { position: relative; z-index: 1; }

.ys-cal-agenda-day {
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
}

.ys-cal-agenda-month {
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.18em;
    color: rgba(241, 245, 249, 0.82);
}

.ys-cal-agenda-weekday {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 800;
    color: rgba(241, 245, 249, 0.92);
}

.ys-cal-agenda-count {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.26);
    font-size: 10.5px;
    font-weight: 800;
    width: fit-content;
}

.ys-cal-agenda-count svg { width: 13px; height: 13px; stroke-width: 2.4; }

.ys-cal-agenda-events {
    display: grid;
    gap: 12px;
}

.ys-cal-agenda-event {
    position: relative;
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    width: 100%;
    text-align: left;
    padding: 12px;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color .2s ease, box-shadow .25s ease, transform .2s ease;
}

.ys-cal-agenda-event:hover {
    border-color: #bae6fd;
    box-shadow: 0 18px 36px rgba(14, 165, 233, 0.16);
    transform: translateY(-2px);
}

.ys-cal-agenda-event-media {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 12px;
    background: #f1f5f9;
}

.ys-cal-agenda-event-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.ys-cal-agenda-event:hover .ys-cal-agenda-event-media img { transform: scale(1.06); }

.ys-cal-agenda-event-body { min-width: 0; }

.ys-cal-agenda-event-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ys-cal-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.01em;
}

.ys-cal-tag svg { width: 12px; height: 12px; stroke-width: 2.4; }

.ys-cal-tag-blue  { background: #e0f2fe; color: #0369a1; }
.ys-cal-tag-green { background: #dcfce7; color: #15803d; }

.ys-cal-agenda-event-title {
    margin-top: 8px;
    color: #0f172a;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: -0.005em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ys-cal-agenda-event-meta {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.ys-cal-agenda-event-meta svg { width: 14px; height: 14px; stroke-width: 2.2; color: #0ea5e9; flex-shrink: 0; }

.ys-cal-agenda-event-meta span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ys-cal-agenda-event-org {
    margin-top: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #94a3b8;
    font-size: 11px;
    font-weight: 700;
}

.ys-cal-agenda-event-org svg { width: 12px; height: 12px; stroke-width: 2.2; }

.ys-cal-agenda-event-cta {
    display: inline-flex;
    width: 36px;
    height: 36px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #f1f5f9;
    color: #0369a1;
    transition: transform .2s ease, background-color .2s ease;
}

.ys-cal-agenda-event:hover .ys-cal-agenda-event-cta {
    background: #0ea5e9;
    color: #ffffff;
    transform: rotate(-8deg) scale(1.05);
}

.ys-cal-agenda-event-cta svg { width: 16px; height: 16px; stroke-width: 2.4; }

/* ---------- Empty ---------- */
.ys-cal-empty {
    padding: 28px 18px;
    text-align: center;
    border: 1px dashed #cbd5e1;
    border-radius: 16px;
    background: #f8fafc;
}

.ys-cal-empty-icon {
    display: inline-flex;
    width: 56px;
    height: 56px;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #ffffff;
    color: #94a3b8;
    border: 1px solid #e2e8f0;
    margin: 0 auto 12px;
}

.ys-cal-empty-icon svg { width: 26px; height: 26px; stroke-width: 2.2; }

.ys-cal-empty-title {
    color: #0f172a;
    font-size: 14px;
    font-weight: 900;
}

.ys-cal-empty-sub {
    margin-top: 6px;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.7;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .ys-cal-hero { padding-bottom: 64px; }
    .ys-cal-hero-inner { padding: 36px 0 56px; }
    .ys-cal-hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .ys-cal-hero-stats > div { padding: 10px 12px; }
    .ys-cal-hero-stat-value { font-size: 18px; }
    .ys-cal-hero-stat-label { font-size: 9.5px; }

    .ys-cal-filter-wrap { margin-top: -36px; }
    .ys-cal-filter { padding: 14px; border-radius: 16px; }

    .ys-cal-card { padding: 14px; border-radius: 16px; }
    .ys-cal-card-title { font-size: 17px; }

    .ys-cal-cell { min-height: 96px; padding: 6px; }
    .ys-cal-cell-day { width: 22px; height: 22px; font-size: 10px; }
    .ys-cal-cell-event { padding: 5px 6px; font-size: 9.5px; }

    .ys-cal-agenda-event {
        grid-template-columns: 78px minmax(0, 1fr);
        gap: 10px;
        padding: 10px;
    }

    .ys-cal-agenda-event-cta {
        position: absolute;
        top: 10px;
        right: 10px;
        width: 30px;
        height: 30px;
        border-radius: 8px;
    }

    .ys-cal-agenda-event-cta svg { width: 14px; height: 14px; }

    .ys-cal-agenda-event-title { font-size: 13.5px; }
    .ys-cal-agenda-event-meta, .ys-cal-agenda-event-org { font-size: 11px; }
}


/* =====================================================================
   YOKSPORT — HALAMAN TENTANG (REDESIGN)
   ===================================================================== */

/* ---------- Hero ---------- */
.ys-about-hero {
    position: relative;
    overflow: hidden;
    color: #ffffff;
    background: #02132e;
    isolation: isolate;
}

.ys-about-hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.ys-about-hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(125deg, rgba(2, 16, 43, 0.95) 0%, rgba(3, 62, 141, 0.80) 50%, rgba(14, 165, 233, 0.40) 100%),
        radial-gradient(circle at 82% 12%, rgba(125, 211, 252, 0.28), transparent 28rem);
}

.ys-about-hero-inner {
    position: relative;
    z-index: 2;
    padding: 56px 0 64px;
    max-width: 760px;
}

.ys-about-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #ffffff;
    color: #1d4ed8;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ys-about-hero-badge svg { width: 14px; height: 14px; stroke-width: 2.4; }

.ys-about-hero-title {
    margin-top: 18px;
    font-size: clamp(26px, 4vw, 46px);
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -0.015em;
    text-shadow: 0 2px 18px rgba(2, 6, 23, 0.32);
}

.ys-about-hero-desc {
    margin-top: 14px;
    max-width: 600px;
    color: rgba(241, 245, 249, 0.92);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.75;
}

.ys-about-hero-chips {
    margin-top: 22px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ys-about-hero-chips span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.20);
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
}

.ys-about-hero-chips svg { width: 14px; height: 14px; stroke-width: 2.4; color: #bae6fd; }

/* ---------- Untuk siapa (audience) ---------- */
.ys-about-audience-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
}

@media (min-width: 768px) {
    .ys-about-audience-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ys-about-audience-card {
    position: relative;
    padding: 22px;
    border-radius: 18px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid #eef2f7;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
    transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
}

.ys-about-audience-card:hover {
    transform: translateY(-3px);
    border-color: #bae6fd;
    box-shadow: 0 18px 36px rgba(14, 165, 233, 0.12);
}

.ys-about-audience-icon {
    display: inline-flex;
    width: 52px;
    height: 52px;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, #0369a1, #0ea5e9);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(3, 105, 161, 0.28);
}

.ys-about-audience-icon svg { width: 24px; height: 24px; stroke-width: 2.2; }

.ys-about-audience-card h3 {
    margin-top: 16px;
    color: #0f172a;
    font-size: 16px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.ys-about-audience-card p {
    margin-top: 8px;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.7;
}

/* ---------- Fokus sistem ---------- */
.ys-about-focus-wrap {
    display: grid;
    gap: 32px;
}

@media (min-width: 1024px) {
    .ys-about-focus-wrap {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
        align-items: center;
        gap: 44px;
    }
}

.ys-about-focus-lede {
    margin-top: 12px;
    color: #475569;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.75;
    max-width: 520px;
}

.ys-about-focus-actions {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.ys-about-focus-list {
    display: grid;
    gap: 12px;
}

.ys-about-focus-item {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 18px;
    border-radius: 16px;
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    border: 1px solid #eef2f7;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease, box-shadow .25s ease;
}

.ys-about-focus-item:hover {
    transform: translateX(4px);
    border-color: #bae6fd;
    box-shadow: 0 16px 32px rgba(14, 165, 233, 0.12);
}

.ys-about-focus-icon {
    display: inline-flex;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #e0f2fe, #bae6fd);
    color: #0369a1;
}

.ys-about-focus-icon svg { width: 22px; height: 22px; stroke-width: 2.2; }

.ys-about-focus-text { min-width: 0; }

.ys-about-focus-text h3 {
    color: #0f172a;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.005em;
}

.ys-about-focus-text p {
    margin-top: 4px;
    color: #64748b;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.65;
}

.ys-about-focus-step {
    display: inline-flex;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #0f172a;
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
}

/* ---------- Kontak ---------- */
.ys-about-contact-wrap {
    display: grid;
    gap: 18px;
}

@media (min-width: 1024px) {
    .ys-about-contact-wrap {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        align-items: stretch;
    }
}

.ys-about-contact-info {
    padding: 24px;
    border-radius: 18px;
    background: #ffffff;
    border: 1px solid #eef2f7;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}

.ys-about-contact-lede {
    margin-top: 10px;
    color: #64748b;
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.7;
}

.ys-about-contact-list {
    margin-top: 18px;
    display: grid;
    gap: 10px;
}

.ys-about-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #f8fafc;
    border: 1px solid #f1f5f9;
}

.ys-about-contact-icon {
    display: inline-flex;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #e0f2fe;
    color: #0369a1;
}

.ys-about-contact-icon svg { width: 18px; height: 18px; stroke-width: 2.2; }

.ys-about-contact-label {
    color: #94a3b8;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ys-about-contact-value {
    margin-top: 3px;
    color: #0f172a;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.5;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
    .ys-about-hero-inner { padding: 40px 0 48px; }
    .ys-about-hero-title { font-size: 24px; }

    .ys-about-focus-item { padding: 14px; gap: 12px; }
    .ys-about-focus-icon { width: 42px; height: 42px; }

    .ys-about-contact-info { padding: 18px; }
}


/* =====================================================================
   YOKSPORT — HALAMAN AUTH (REGISTER / LOGIN ORGANIZER)
   ===================================================================== */
.ys-auth-page {
    background: #f6f8fb;
}

.ys-auth-grid {
    display: grid;
    grid-template-columns: 1fr;
}

@media (min-width: 1024px) {
    .ys-auth-grid {
        grid-template-columns: minmax(0, 1.25fr) minmax(420px, 0.85fr);
        min-height: calc(100vh - 64px);
        align-items: stretch;
    }
}

/* ---------- Aside (panel info) ---------- */
.ys-auth-aside {
    position: relative;
    overflow: hidden;
    color: #ffffff;
    background: #02132e;
    isolation: isolate;
    padding: 40px 0;
}

@media (min-width: 1024px) {
    .ys-auth-aside { padding: 0; display: flex; align-items: center; }
}

.ys-auth-aside-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.ys-auth-aside-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(150deg, rgba(2, 16, 43, 0.96) 0%, rgba(3, 62, 141, 0.88) 52%, rgba(14, 165, 233, 0.52) 100%),
        radial-gradient(circle at 82% 12%, rgba(125, 211, 252, 0.26), transparent 26rem);
}

.ys-auth-aside-pattern {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0.9;
}

.ys-auth-aside-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
    padding: 0 24px;
}

@media (min-width: 1024px) {
    .ys-auth-aside-inner {
        max-width: 720px;
        margin-left: 0;
        margin-right: auto;
        padding: 48px 40px 48px 56px;
    }
}

.ys-auth-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    background: #ffffff;
    color: #1d4ed8;
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ys-auth-badge svg { width: 14px; height: 14px; stroke-width: 2.4; }

.ys-auth-title {
    margin-top: 18px;
    font-size: clamp(24px, 3.4vw, 40px);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.015em;
    text-shadow: 0 2px 18px rgba(2, 6, 23, 0.32);
}

.ys-auth-subtitle {
    margin-top: 14px;
    max-width: 520px;
    color: rgba(241, 245, 249, 0.92);
    font-size: 13.5px;
    font-weight: 500;
    line-height: 1.75;
}

/* ---- Kartu checklist syarat ---- */
.ys-auth-req-card {
    margin-top: 22px;
    padding: 18px;
    border-radius: 16px;
    background: #0b2a55;
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.ys-auth-req-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(226, 232, 240, 0.78);
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ys-auth-req-card-title svg { width: 14px; height: 14px; stroke-width: 2.4; color: #bae6fd; }

.ys-auth-req-checklist {
    margin-top: 14px;
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ys-auth-req-checklist li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 999px;
    background: #0f3666;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.ys-auth-req-check {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #16a34a;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(22, 163, 74, 0.32);
}

.ys-auth-req-check svg { width: 12px; height: 12px; stroke-width: 3; }

.ys-auth-req-text {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}

.ys-auth-req-text strong {
    color: #ffffff;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.ys-auth-req-text em {
    color: rgba(226, 232, 240, 0.60);
    font-size: 10.5px;
    font-weight: 600;
    font-style: normal;
    line-height: 1.2;
    white-space: nowrap;
}

@media (max-width: 560px) {
    .ys-auth-req-text em { display: none; }
}

/* Steps — horizontal stepper ringkas */
.ys-auth-steps {
    margin-top: 22px;
    padding: 18px;
    border-radius: 16px;
    background: #0b2a55;
    border: 1px solid rgba(255, 255, 255, 0.10);
}

.ys-auth-steps-title {
    color: rgba(226, 232, 240, 0.70);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.ys-auth-steps-track {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.ys-auth-step {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    min-width: 0;
}

/* connector line antar langkah */
.ys-auth-step::before {
    content: "";
    position: absolute;
    top: 13px;
    left: calc(-50% + 13px);
    width: calc(100% - 26px);
    height: 2px;
    background: rgba(255, 255, 255, 0.22);
    z-index: 0;
}

.ys-auth-step:first-child::before { display: none; }

.ys-auth-step-num {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: 26px;
    height: 26px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: #ffffff;
    color: #0369a1;
    font-size: 11px;
    font-weight: 900;
    box-shadow: 0 4px 10px rgba(2, 16, 43, 0.30);
}

.ys-auth-step-icon {
    display: inline-flex;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: #0f3666;
    color: #bae6fd;
}

.ys-auth-step-icon svg { width: 15px; height: 15px; stroke-width: 2.2; }

.ys-auth-step-label {
    color: rgba(241, 245, 249, 0.90);
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1.25;
}

@media (max-width: 480px) {
    .ys-auth-step-icon { display: none; }
    .ys-auth-step-label { font-size: 9.5px; }
}

/* ---------- Form card ---------- */
.ys-auth-form-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 20px 40px;
}

@media (min-width: 1024px) {
    .ys-auth-form-wrap { padding: 48px; }
}

.ys-auth-card {
    width: 100%;
    max-width: 460px;
    background: #ffffff;
    border: 1px solid #eef2f7;
    border-radius: 22px;
    padding: 30px;
    box-shadow: 0 24px 60px rgba(2, 16, 43, 0.12);
}

/* Saat di mobile, card naik menimpa aside sedikit untuk efek modern */
@media (max-width: 1023px) {
    .ys-auth-form-wrap { margin-top: -32px; position: relative; z-index: 3; }
}

.ys-auth-card-head {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ys-auth-card-icon {
    display: inline-flex;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, #0369a1, #0ea5e9);
    color: #ffffff;
    box-shadow: 0 10px 22px rgba(3, 105, 161, 0.28);
}

.ys-auth-card-icon svg { width: 24px; height: 24px; stroke-width: 2.2; }

.ys-auth-card-eyebrow {
    color: #0369a1;
    font-size: 10.5px;
    font-weight: 900;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ys-auth-card-title {
    margin-top: 3px;
    color: #0f172a;
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.01em;
}

.ys-auth-card-desc {
    margin-top: 14px;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
}

.ys-auth-form {
    margin-top: 20px;
    display: grid;
    gap: 16px;
}

.ys-auth-field label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    color: #334155;
    font-size: 13px;
    font-weight: 800;
}

.ys-auth-field label svg {
    width: 16px;
    height: 16px;
    stroke-width: 2.2;
    color: #0369a1;
}

.ys-auth-field input {
    width: 100%;
    height: 50px;
    padding: 0 16px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
    color: #0f172a;
    font-size: 14px;
    font-weight: 600;
    outline: none;
    transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
}

.ys-auth-field input::placeholder { color: #94a3b8; font-weight: 500; }

.ys-auth-field input:focus {
    border-color: #0ea5e9;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.14);
}

/* Two fields side by side (e.g. password + confirmation) */
.ys-auth-field-row {
    display: grid;
    gap: 14px;
    grid-template-columns: 1fr;
}

@media (min-width: 480px) {
    .ys-auth-field-row { grid-template-columns: 1fr 1fr; }
}

/* Agreement checkbox */
.ys-auth-agree {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    color: #475569;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.6;
}

.ys-auth-agree input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    border: 1.6px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
    position: relative;
}

.ys-auth-agree input[type="checkbox"]:checked {
    background: #0369a1;
    border-color: #0369a1;
}

.ys-auth-agree input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1.5px;
    width: 5px;
    height: 9px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.ys-auth-agree input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.18);
}

.ys-auth-agree a {
    color: #0369a1;
    font-weight: 700;
    text-decoration: none;
}

.ys-auth-agree a:hover { text-decoration: underline; }

.ys-auth-submit {
    display: inline-flex;
    width: 100%;
    height: 52px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 12px;
    background: #0369a1;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease;
    box-shadow: 0 12px 26px rgba(3, 105, 161, 0.30);
}

.ys-auth-submit:hover { background: #075985; transform: translateY(-1px); }
.ys-auth-submit:disabled { opacity: 0.7; cursor: wait; transform: none; }

.ys-auth-note {
    margin-top: 18px;
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #f0f9ff;
    border: 1px solid #e0f2fe;
}

.ys-auth-note svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    stroke-width: 2.2;
    color: #0369a1;
    margin-top: 2px;
}

.ys-auth-note p {
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.65;
}

.ys-auth-switch {
    margin-top: 20px;
    text-align: center;
    color: #64748b;
    font-size: 13px;
    font-weight: 600;
}

.ys-auth-switch a {
    color: #0369a1;
    font-weight: 800;
}

.ys-auth-switch a:hover { text-decoration: underline; }

/* Pesan error bawaan form_error */
.ys-auth-field .form-error,
.ys-auth-field .text-red-500,
.ys-auth-field .text-red-600,
.ys-auth-field [class*="error"] {
    margin-top: 6px;
    font-size: 11.5px;
    font-weight: 700;
    color: #dc2626;
}

@media (max-width: 480px) {
    .ys-auth-aside-inner { padding: 0 18px; }
    .ys-auth-card { padding: 22px; border-radius: 18px; }
    .ys-auth-steps { padding: 14px; }
}