@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Dancing+Script:wght@700&display=swap');

/* ==========================================================================
   RUANGKOMPETISI.COM — OFFICIAL CENTRALIZED THEME STYLESHEET (2026)
   Tagline: Satu Ruang, Semua Kompetisi.
   Source of Truth: mockup/Mockup - Master Design System.png
   ========================================================================== */


/* --- variables.css --- */
/* ==========================================================================
   RUANGKOMPETISI.COM — DESIGN SYSTEM VARIABLES (2026)
   Master Visual Identity: "Satu Ruang, Semua Kompetisi."
   Source of Truth: mockup/Mockup - Master Design System.png
   ========================================================================== */

:root {
    /* ============================================================
       MOCKUP PIXEL-SAMPLED BRAND TOKENS (2026-09-10)
       Source: extract_targeted_colors.ps1 across all mockup PNGs
       ============================================================ */

    /* Primary Blue — "Masuk" border, "Terapkan Filter" fill, pagination active dot */
    --rk-primary: #0057D9;
    --rk-primary-hover: #0047B8;
    --rk-primary-light: #EAF2FF;
    --rk-primary-lighter: #EDF5FE;
    --rk-primary-rgb: 0, 87, 217;

    /* Secondary Navy — footer bg (26 k+ pixels), hero overlay */
    --rk-secondary: #002146;
    --rk-secondary-hover: #001832;
    --rk-secondary-light: #EAF2FF;
    --rk-secondary-hero: #021F41;
    --rk-secondary-stats: #012B5D;
    --rk-secondary-rgb: 0, 33, 70;

    /* Accent Orange — "+ Buat Event" & "Masuk →" CTA buttons */
    --rk-accent: #FE6502;
    --rk-accent-hover: #E55A00;
    --rk-accent-light: #FFF3EB;
    --rk-accent-dash: #FD9430;
    --rk-accent-rgb: 254, 101, 2;

    /* Backgrounds & Surfaces */
    --rk-bg-body: #F9FBFE;
    /* very light blue-tinted page bg (sampled) */
    --rk-bg-surface: #FFFFFF;
    --rk-bg-subtle: #F8FAFC;
    --rk-bg-tinted: #EDF5FE;
    /* search bar / filter tint */
    --rk-bg-dark: #002146;
    /* footer dark navy (sampled from 26k+ pixels) */
    --rk-bg-dark-surface: #021F41;
    /* hero dark overlay */
    /* Text tokens */
    --rk-text: #0B1222;
    /* very dark near-black (sampled) */
    --rk-muted-text: #6B7B8F;
    /* muted grey (sampled) */
    /* Border tokens */
    --rk-border: #E1E7F0;
    --rk-border-light: #EEF3FA;

    /* Neutral & Grays */
    --rk-white: #FFFFFF;
    --rk-gray-100: #F1F5F9;
    --rk-gray-200: #E2E8F0;
    --rk-gray-300: #CBD5E1;
    --rk-gray-400: #94A3B8;
    --rk-gray-500: #64748B;
    --rk-gray-600: #475569;
    --rk-gray-700: #334155;
    --rk-gray-800: #1E293B;
    --rk-gray-900: #0F172A;

    /* Semantic States (mockup-aligned) */
    --rk-success: #16A34A;
    --rk-success-bg: #ECFDF5;
    --rk-warning: #F59E0B;
    --rk-warning-bg: #FFFBEB;
    --rk-danger: #DC2626;
    --rk-danger-bg: #FEF2F2;
    --rk-info: #0057D9;
    --rk-info-bg: #EAF2FF;

    /* Typography */
    --rk-font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Spacing System */
    --rk-space-1: 4px;
    --rk-space-2: 8px;
    --rk-space-3: 12px;
    --rk-space-4: 16px;
    --rk-space-5: 20px;
    --rk-space-6: 24px;
    --rk-space-8: 32px;
    --rk-space-10: 40px;
    --rk-space-12: 48px;
    --rk-space-16: 64px;
    --rk-space-20: 80px;

    /* Radius System */
    --rk-radius-xs: 4px;
    --rk-radius-sm: 8px;
    --rk-radius-md: 12px;
    --rk-radius-lg: 16px;
    --rk-radius-xl: 24px;
    --rk-radius-full: 9999px;

    /* Elevation & Shadows */
    --rk-shadow-sm: 0 1px 3px rgba(0, 33, 70, 0.06), 0 1px 2px rgba(0, 33, 70, 0.04);
    --rk-shadow-md: 0 4px 12px rgba(0, 33, 70, 0.08), 0 2px 4px rgba(0, 33, 70, 0.04);
    --rk-shadow-lg: 0 12px 32px rgba(0, 33, 70, 0.12), 0 4px 8px rgba(0, 33, 70, 0.06);
    --rk-shadow-card: 0 8px 24px rgba(15, 23, 42, 0.06);
    --rk-shadow-card-hover: 0 16px 36px rgba(0, 33, 70, 0.12);
    --rk-shadow-glow: 0 0 20px rgba(254, 101, 2, 0.28);

    /* Transitions */
    --rk-transition-fast: 0.15s ease;
    --rk-transition-normal: 0.25s ease;
    --rk-transition-slow: 0.4s ease;
}


/* --- typography.css --- */
/* ==========================================================================
   RUANGKOMPETISI.COM — TYPOGRAPHY SYSTEM (2026)
   Font: Poppins (Google Fonts)
   Source of Truth: mockup/Mockup - Master Design System.png
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap');

body,
html {
    font-family: var(--rk-font-primary);
    color: var(--rk-gray-800);
    background-color: var(--rk-bg-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Headings */
h1,
h2,
h3,
h4,
h5,
h6,
.rk-h1,
.rk-h2,
.rk-h3,
.rk-h4,
.rk-h5,
.rk-h6 {
    font-family: var(--rk-font-primary);
    color: var(--rk-primary);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.02em;
    margin-top: 0;
    margin-bottom: var(--rk-space-3);
}

h1,
.rk-h1 {
    font-size: 2.5rem;
    /* 40px */
    font-weight: 800;
    line-height: 1.2;
}

h2,
.rk-h2 {
    font-size: 2rem;
    /* 32px */
    font-weight: 700;
    line-height: 1.25;
}

h3,
.rk-h3 {
    font-size: 1.5rem;
    /* 24px */
    font-weight: 600;
    line-height: 1.3;
}

h4,
.rk-h4 {
    font-size: 1.25rem;
    /* 20px */
    font-weight: 600;
    line-height: 1.35;
}

h5,
.rk-h5 {
    font-size: 1.1rem;
    /* 17.6px */
    font-weight: 600;
    line-height: 1.4;
}

h6,
.rk-h6 {
    font-size: 0.95rem;
    /* 15.2px */
    font-weight: 600;
    line-height: 1.4;
}

/* Body & Text Scales */
p,
.rk-body {
    font-family: var(--rk-font-primary);
    font-size: 0.9375rem;
    /* 15px */
    line-height: 1.6;
    color: var(--rk-gray-600);
    margin-bottom: var(--rk-space-3);
}

.rk-lead {
    font-size: 1.125rem;
    /* 18px */
    line-height: 1.6;
    color: var(--rk-gray-700);
    font-weight: 400;
}

.rk-caption {
    font-size: 0.8125rem;
    /* 13px */
    line-height: 1.4;
    color: var(--rk-gray-500);
    font-weight: 500;
}

.rk-micro {
    font-size: 0.75rem;
    /* 12px */
    line-height: 1.35;
    color: var(--rk-gray-400);
    font-weight: 500;
}

/* Text Highlights */
.rk-text-primary {
    color: var(--rk-primary) !important;
}

.rk-text-secondary {
    color: var(--rk-secondary) !important;
}

.rk-text-accent {
    color: var(--rk-accent) !important;
}

.rk-text-white {
    color: var(--rk-white) !important;
}

.rk-text-muted {
    color: var(--rk-gray-500) !important;
}

.rk-text-dark {
    color: var(--rk-gray-900) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {

    h1,
    .rk-h1 {
        font-size: 1.875rem;
        /* 30px */
    }

    h2,
    .rk-h2 {
        font-size: 1.5rem;
        /* 24px */
    }

    h3,
    .rk-h3 {
        font-size: 1.25rem;
        /* 20px */
    }

    h4,
    .rk-h4 {
        font-size: 1.1rem;
        /* 17.6px */
    }
}


/* --- layout.css --- */
/* ==========================================================================
   RUANGKOMPETISI.COM — LAYOUT SYSTEM (2026)
   Containers, Sections, Grids, Hero, Zero-Crop Rules
   Source of Truth: mockup/Mockup - Homepage.png & Master Mockups
   ========================================================================== */

/* 1. SECTIONS & CONTAINERS */
.rk-container {
    width: 100%;
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--rk-space-4);
    padding-right: var(--rk-space-4);
}

.rk-container-fluid {
    width: 100%;
    padding-left: var(--rk-space-6);
    padding-right: var(--rk-space-6);
}

.rk-section {
    padding-top: var(--rk-space-16);
    padding-bottom: var(--rk-space-16);
    position: relative;
}

.rk-section-sm {
    padding-top: var(--rk-space-10);
    padding-bottom: var(--rk-space-10);
}

.rk-section-header {
    margin-bottom: var(--rk-space-10);
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--rk-space-4);
}

.rk-section-header.text-center {
    text-align: center;
    flex-direction: column;
    align-items: center;
}

.rk-section-tag {
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--rk-accent);
    margin-bottom: 8px;
    display: block;
}

.rk-section-title {
    font-size: 2rem;
    /* 32px */
    font-weight: 700;
    color: var(--rk-primary);
    line-height: 1.25;
    margin-bottom: 8px;
}

.rk-section-desc {
    font-size: 1rem;
    color: var(--rk-gray-600);
    max-width: 620px;
    margin-bottom: 0;
}

/* 2. HOMEPAGE HERO (Matches Mockup - Beranda.png) */
.rk-hero {
    position: relative;
    background-color: #021F41;
    /* pixel-sampled hero overlay */
    background-image:
        linear-gradient(90deg, #021F41 0%, #021F41 32%, rgba(2, 31, 65, 0.75) 42%, rgba(2, 31, 65, 0.15) 50%, transparent 56%),
        url('/master-asset/Home-01.webp');
    background-position: right center;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--rk-white);
    padding-top: 36px;
    padding-bottom: 0px;
    overflow: visible;
}

@media (max-width: 991.98px) {
    .rk-hero {
        background-image:
            linear-gradient(180deg, rgba(2, 31, 65, 0.96) 0%, rgba(2, 31, 65, 0.94) 100%),
            url('/master-asset/Home-01.webp');
        padding-top: 32px;
        padding-bottom: 0px;
    }
}

.rk-hero-content {
    position: relative;
    z-index: 2;
}

.rk-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}

.rk-hero-title {
    font-family: var(--rk-font-primary);
    font-size: 2.65rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--rk-white);
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.rk-hero-title span {
    color: var(--rk-accent);
}

.rk-hero-subtitle {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
    max-width: 530px;
    margin-bottom: 20px;
}

/* 2a. Public area heroes use the supplied master artwork as a full composition. */
.rk-media-hero {
    position: relative;
    min-height: 288px;
    padding: 32px 0 40px;
    color: var(--rk-white);
    background-color: var(--rk-primary);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.rk-marketplace-hero {
    background-image: url('/master-asset/Marketplace-01.png');
}

.rk-ruangtech-hero {
    background-image: url('/master-asset/RuangTech-01.png');
}

.rk-competition-hero {
    background-image: url('/master-asset/Kompetisi-01.png');
}

.rk-sport-hero {
    background-image: url('/master-asset/Olahraga-01.png');
}

.rk-media-hero-content {
    max-width: 510px;
}

.rk-media-hero .breadcrumb-item+.breadcrumb-item::before {
    color: rgba(255, 255, 255, 0.75);
}

.rk-media-hero-title {
    color: var(--rk-white);
    font-size: 3rem;
    line-height: 1.12;
    margin-bottom: 8px;
}

.rk-media-hero-copy {
    max-width: 460px;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.92);
    font-size: 1rem;
    line-height: 1.55;
}

@media (max-width: 991.98px) {
    .rk-media-hero {
        min-height: 0;
        background-image: linear-gradient(rgba(7, 22, 77, 0.88), rgba(7, 22, 77, 0.88));
    }

    .rk-media-hero-title {
        font-size: 2.25rem;
    }
}

/* Hero Right: Cursive floating annotation in sky */
.rk-hero-cursive-tag {
    font-family: 'Caveat', 'Dancing Script', 'Segoe Script', cursive, sans-serif;
    font-size: 1.65rem;
    font-weight: 700;
    line-height: 1.15;
    color: #0F172A;
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
    transform: rotate(-5deg);
    position: absolute;
    top: 50px;
    right: 190px;
    z-index: 3;
    pointer-events: none;
    text-align: left;
}

/* 3. HERO SEARCH HEADER BAR & SEARCH FORM (Only tabs in hero, form card in page) */
.rk-search-header-bar {
    display: flex;
    align-items: flex-end;
    margin-top: 28px;
    margin-bottom: 0;
    padding: 0;
    position: relative;
    z-index: 10;
}

.rk-search-tabs-row {
    display: inline-flex;
    align-items: stretch;
    margin: 0;
    padding: 0;
    background: #EDF5FE;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border: 1px solid #E2E8F0;
    border-bottom: none;
    overflow: hidden;
}

.rk-search-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    background: #EDF5FE;
    border: none;
    border-right: 1px solid #E2E8F0;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.2s ease;
    white-space: nowrap;
    position: relative;
}

.rk-search-tab:last-child {
    border-right: none;
}

.rk-search-tab:hover {
    color: #07164D;
    background: #E2EBF6;
}

.rk-search-tab.active {
    color: #1266E3;
    font-weight: 700;
    background-color: #FFFFFF;
}

.rk-search-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 12px;
    right: 12px;
    height: 3px;
    background: #1266E3;
    border-radius: 2px 2px 0 0;
}

.rk-search-tab.active i {
    color: #1266E3;
}

.rk-search-form-section {
    position: relative;
    z-index: 20;
    background: transparent;
    margin-top: -1px;
    padding-bottom: 0;
}



.rk-search-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 200px;
    gap: 16px;
    align-items: center;
    padding: 20px 24px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 0 16px 16px 16px;
    box-shadow: 0 16px 36px rgba(7, 22, 77, 0.10), 0 2px 6px rgba(0, 0, 0, 0.04);
}

@media (max-width: 991.98px) {
    .rk-search-form-grid {
        grid-template-columns: 1fr;
        padding: 20px;
        gap: 12px;
    }

    .rk-search-tabs-row {
        flex-wrap: wrap;
        width: 100%;
    }

    .rk-search-header-empty {
        display: none;
    }

    .rk-search-tab {
        flex: 1 1 50%;
        padding: 10px 14px;
        font-size: 0.8125rem;
    }
}

.rk-search-field-pill {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 18px;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    background: #FFFFFF;
    height: 58px;
    transition: all 0.2s ease;
    cursor: pointer;
    user-select: none;
}

.rk-search-field-pill:hover {
    border-color: #CBD5E1;
    background: #F8FAFC;
}

.rk-search-field-pill.is-active,
.rk-search-field-pill:focus-within {
    border-color: #1266E3;
    background: #FFFFFF;
    box-shadow: 0 0 0 3px rgba(18, 102, 227, 0.12);
}

.rk-search-field-pill.is-active .rk-field-chevron {
    transform: rotate(180deg);
    color: #1266E3;
}

.rk-field-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #07164D;
    font-size: 20px;
    flex-shrink: 0;
    pointer-events: none;
}

.rk-field-label-wrap {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    min-width: 0;
    pointer-events: none;
}

.rk-field-label {
    font-size: 0.6875rem;
    /* 11px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94A3B8;
    line-height: 1.2;
    margin-bottom: 2px;
}

.rk-field-value {
    font-size: 0.875rem;
    /* 14px */
    font-weight: 600;
    color: #0F172A;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rk-field-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94A3B8;
    flex-shrink: 0;
    pointer-events: none;
    transition: transform 0.2s ease, color 0.2s ease;
}

.rk-field-native-select,
.rk-field-native-date {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 10;
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
}

/* --- RK CUSTOM DROPDOWN --- */
.rk-dropdown-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 100%;
    min-width: 320px;
    max-width: 380px;
    background: #FFFFFF;
    border-radius: 14px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 16px 40px rgba(7, 22, 77, 0.18), 0 4px 12px rgba(0, 0, 0, 0.05);
    z-index: 1000;
    display: none;
    flex-direction: column;
    overflow: hidden;
    animation: rkDropdownFade 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.rk-dropdown-menu.show {
    display: flex;
}

@keyframes rkDropdownFade {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.rk-dropdown-search-wrap {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #FFFFFF;
    padding: 12px 14px 10px;
    border-bottom: 1px solid #F1F5F9;
}

.rk-dropdown-search-inner {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.rk-dropdown-search-inner i {
    position: absolute;
    left: 12px;
    color: #94A3B8;
    font-size: 16px;
    pointer-events: none;
}

.rk-dropdown-search-input {
    width: 100%;
    height: 38px;
    padding: 0 32px 0 36px;
    background: #F8FAFC;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-family: var(--rk-font-primary);
    color: #0F172A;
    outline: none;
    transition: all 0.2s ease;
}

.rk-dropdown-search-input:focus {
    border-color: #1266E3;
    background: #FFFFFF;
    box-shadow: 0 0 0 2px rgba(18, 102, 227, 0.1);
}

.rk-dropdown-search-clear {
    position: absolute;
    right: 8px;
    color: #94A3B8;
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
    display: none;
    border: none;
    background: transparent;
}

.rk-dropdown-search-clear:hover {
    color: #475569;
}

.rk-dropdown-list {
    max-height: 280px;
    overflow-y: auto;
    padding: 8px;
    overscroll-behavior: contain;
}

.rk-dropdown-list::-webkit-scrollbar {
    width: 5px;
}

.rk-dropdown-list::-webkit-scrollbar-track {
    background: transparent;
}

.rk-dropdown-list::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 4px;
}

.rk-dropdown-list::-webkit-scrollbar-thumb:hover {
    background: #94A3B8;
}

.rk-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
    color: #334155;
}

.rk-dropdown-item:hover {
    background: #F8FAFC;
    color: #07164D;
}

.rk-dropdown-item.is-selected {
    background: #EFF6FF;
    color: #1266E3;
    font-weight: 600;
}

.rk-dropdown-item-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #F1F5F9;
    color: #1266E3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.rk-dropdown-item:hover .rk-dropdown-item-icon {
    background: #E2E8F0;
    color: #1266E3;
}

.rk-dropdown-item.is-selected .rk-dropdown-item-icon {
    background: #1266E3;
    color: #FFFFFF;
}

.rk-dropdown-item-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex-grow: 1;
}

.rk-dropdown-item-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1E293B;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rk-dropdown-item.is-selected .rk-dropdown-item-title {
    color: #1266E3;
    font-weight: 700;
}

.rk-dropdown-item-sub {
    font-size: 0.71875rem;
    color: #64748B;
    line-height: 1.2;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rk-dropdown-item-badge {
    font-size: 0.6875rem;
    font-weight: 600;
    color: #64748B;
    background: #F1F5F9;
    padding: 2px 7px;
    border-radius: 12px;
    flex-shrink: 0;
}

.rk-dropdown-item.is-selected .rk-dropdown-item-badge {
    background: #DBEAFE;
    color: #1266E3;
}

.rk-dropdown-item-check {
    font-size: 14px;
    color: #1266E3;
    display: none;
    margin-left: auto;
}

.rk-dropdown-item.is-selected .rk-dropdown-item-check {
    display: block;
}

.rk-dropdown-empty {
    padding: 24px 16px;
    text-align: center;
    color: #94A3B8;
    font-size: 0.8125rem;
}

.rk-dropdown-empty i {
    font-size: 28px;
    color: #CBD5E1;
    display: block;
    margin-bottom: 6px;
}

@media (max-width: 991.98px) {
    .rk-dropdown-menu {
        max-width: 100%;
        width: 100%;
        position: fixed;
        left: 16px;
        right: 16px;
        width: auto;
        top: auto;
        bottom: 24px;
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
        z-index: 1050;
        border-radius: 16px;
    }
}

.rk-btn-hero-search {
    height: 58px;
    padding: 0 32px;
    background: linear-gradient(135deg, #FF7A00 0%, #FF6500 100%);
    color: #FFFFFF !important;
    border: none;
    border-radius: 12px;
    font-family: var(--rk-font-primary);
    font-size: 0.9375rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 6px 18px rgba(255, 122, 0, 0.38);
    transition: all 0.2s ease;
    cursor: pointer;
    white-space: nowrap;
}

.rk-btn-hero-search:hover {
    background: linear-gradient(135deg, #FF8800 0%, #FF7000 100%);
    box-shadow: 0 8px 24px rgba(255, 122, 0, 0.48);
    transform: translateY(-1px);
}

/* 4. ZERO CROP IMAGE POLICY UTILITIES */
.rk-img-contain {
    object-fit: contain !important;
}

.rk-img-safe {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
}

.rk-aspect-16-9 {
    aspect-ratio: 16 / 9;
}

.rk-aspect-1-1 {
    aspect-ratio: 1 / 1;
}

.rk-aspect-4-3 {
    aspect-ratio: 4 / 3;
}

/* 5. RESPONSIVE GRIDS */
.rk-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--rk-space-6);
}

.rk-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--rk-space-6);
}

.rk-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--rk-space-6);
}


/* --- components.css --- */
/* ==========================================================================
   RUANGKOMPETISI.COM — COMPONENTS SYSTEM (2026)
   Buttons, Badges, Tabs, Alerts, Modals, Breadcrumbs
   Source of Truth: mockup/Mockup - Master Design System.png
   ========================================================================== */

/* 1. BUTTONS */
.rk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rk-space-2);
    font-family: var(--rk-font-primary);
    font-size: 0.875rem;
    /* 14px */
    font-weight: 600;
    line-height: 1;
    padding: 12px 22px;
    border-radius: var(--rk-radius-md);
    border: 1.5px solid transparent;
    cursor: pointer;
    text-decoration: none !important;
    transition: all var(--rk-transition-fast);
    white-space: nowrap;
    user-select: none;
}

.rk-btn:disabled,
.rk-btn.disabled {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Primary Button (Deep Navy) */
.rk-btn-primary {
    background-color: var(--rk-primary);
    color: var(--rk-white) !important;
    border-color: var(--rk-primary);
    box-shadow: 0 4px 12px rgba(11, 32, 107, 0.2);
}

.rk-btn-primary:hover {
    background-color: var(--rk-primary-hover);
    border-color: var(--rk-primary-hover);
    color: var(--rk-white) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(11, 32, 107, 0.28);
}

.rk-btn-primary:active {
    transform: translateY(0);
}

/* Accent Button (Sports Orange) */
.rk-btn-accent {
    background-color: var(--rk-accent);
    color: var(--rk-white) !important;
    border-color: var(--rk-accent);
    box-shadow: 0 4px 14px rgba(255, 122, 0, 0.25);
}

.rk-btn-accent:hover {
    background-color: var(--rk-accent-hover);
    border-color: var(--rk-accent-hover);
    color: var(--rk-white) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(255, 122, 0, 0.35);
}

.rk-btn-accent:active {
    transform: translateY(0);
}

/* Secondary Button (Vivid Blue Light) */
.rk-btn-secondary {
    background-color: var(--rk-secondary-light);
    color: var(--rk-secondary) !important;
    border-color: transparent;
}

.rk-btn-secondary:hover {
    background-color: var(--rk-secondary);
    color: var(--rk-white) !important;
}

/* Outline Button */
.rk-btn-outline {
    background-color: transparent;
    color: var(--rk-primary) !important;
    border-color: var(--rk-primary);
}

.rk-btn-outline:hover {
    background-color: var(--rk-primary);
    color: var(--rk-white) !important;
}

/* Outline White (for dark sections) */
.rk-btn-outline-white {
    background-color: transparent;
    color: var(--rk-white) !important;
    border-color: rgba(255, 255, 255, 0.6);
}

.rk-btn-outline-white:hover {
    background-color: var(--rk-white);
    color: var(--rk-primary) !important;
    border-color: var(--rk-white);
}

/* Ghost Button */
.rk-btn-ghost {
    background-color: transparent;
    color: var(--rk-gray-700) !important;
    border-color: transparent;
}

.rk-btn-ghost:hover {
    background-color: var(--rk-gray-100);
    color: var(--rk-primary) !important;
}

/* Button Sizes */
.rk-btn-sm {
    padding: 8px 14px;
    font-size: 0.8125rem;
    /* 13px */
    border-radius: var(--rk-radius-sm);
}

.rk-btn-lg {
    padding: 16px 28px;
    font-size: 1rem;
    /* 16px */
    border-radius: var(--rk-radius-lg);
}

.rk-btn-pill {
    border-radius: var(--rk-radius-full);
}

.rk-btn-icon {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: var(--rk-radius-md);
}

.rk-btn-icon.rk-btn-sm {
    width: 34px;
    height: 34px;
}

/* 2. BADGES & CHIPS */
.rk-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--rk-font-primary);
    font-size: 0.75rem;
    /* 12px */
    font-weight: 600;
    line-height: 1;
    padding: 6px 10px;
    border-radius: var(--rk-radius-full);
    white-space: nowrap;
}

.rk-badge-primary {
    background-color: rgba(11, 32, 107, 0.1);
    color: var(--rk-primary);
}

.rk-badge-secondary {
    background-color: var(--rk-secondary-light);
    color: var(--rk-secondary);
}

.rk-badge-accent {
    background-color: var(--rk-accent-light);
    color: var(--rk-accent);
}

.rk-badge-success {
    background-color: var(--rk-success-bg);
    color: var(--rk-success);
}

.rk-badge-warning {
    background-color: var(--rk-warning-bg);
    color: var(--rk-warning);
}

.rk-badge-danger {
    background-color: var(--rk-danger-bg);
    color: var(--rk-danger);
}

/* 3. ALERTS */
.rk-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--rk-space-3);
    padding: 16px 20px;
    border-radius: var(--rk-radius-md);
    border: 1px solid transparent;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: var(--rk-space-4);
}

.rk-alert-info {
    background-color: var(--rk-info-bg);
    border-color: #BAE6FD;
    color: #0369A1;
}

.rk-alert-success {
    background-color: var(--rk-success-bg);
    border-color: #A7F3D0;
    color: #065F46;
}

.rk-alert-warning {
    background-color: var(--rk-warning-bg);
    border-color: #FDE68A;
    color: #92400E;
}

.rk-alert-danger {
    background-color: var(--rk-danger-bg);
    border-color: #FECACA;
    color: #991B1B;
}

/* 4. TABS */
.rk-tabs {
    display: flex;
    align-items: center;
    gap: var(--rk-space-2);
    border-bottom: 2px solid var(--rk-gray-200);
    padding-bottom: 2px;
    overflow-x: auto;
    scrollbar-width: none;
}

.rk-tabs::-webkit-scrollbar {
    display: none;
}

.rk-tab-item {
    font-family: var(--rk-font-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--rk-gray-500);
    padding: 10px 18px;
    border-radius: var(--rk-radius-md) var(--rk-radius-md) 0 0;
    text-decoration: none !important;
    cursor: pointer;
    position: relative;
    transition: all var(--rk-transition-fast);
    white-space: nowrap;
}

.rk-tab-item:hover {
    color: var(--rk-primary);
}

.rk-tab-item.active {
    color: var(--rk-primary);
}

.rk-tab-item.active::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--rk-primary);
    border-radius: 3px 3px 0 0;
}


/* --- icons.css --- */
/* ==========================================================================
   RUANGKOMPETISI.COM — MASTER ICON SYSTEM CSS (2026)
   Icon Standard: Font Awesome (Free / Brands)
   Source of Truth: MASTER ICON SYSTEM RULE — RUANGKOMPETISI.COM — 2026
   ========================================================================== */

:root {
    /* --------------------------------------------------------------------------
       1. ICON SIZE TOKENS
       -------------------------------------------------------------------------- */
    --icon-xs: 14px;
    --icon-sm: 16px;
    --icon-md: 20px;
    --icon-lg: 24px;
    --icon-xl: 32px;
    --icon-2xl: 40px;
    --icon-3xl: 48px;

    /* --------------------------------------------------------------------------
       2. ICON COLOR TOKENS
       -------------------------------------------------------------------------- */
    --icon-primary: var(--rk-primary, #0B206B);
    --icon-secondary: var(--rk-secondary, #1266E3);
    --icon-muted: var(--rk-gray-500, #64748B);
    --icon-disabled: var(--rk-gray-400, #94A3B8);
    --icon-success: var(--rk-success, #10B981);
    --icon-warning: var(--rk-warning, #F59E0B);
    --icon-danger: var(--rk-danger, #EF4444);
    --icon-info: var(--rk-info, #0284C7);
    --icon-inverse: #FFFFFF;

    /* --------------------------------------------------------------------------
       3. ICON SPACING TOKENS (ICON + TEXT / INPUT / BUTTON)
       -------------------------------------------------------------------------- */
    --icon-gap-xs: 4px;
    --icon-gap-sm: 8px;
    --icon-gap-md: 12px;
    --icon-gap-lg: 16px;
}

/* --------------------------------------------------------------------------
   4. BASE ICON COMPONENT
   -------------------------------------------------------------------------- */
.rk-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
    flex-shrink: 0;
    font-style: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    transition: color 0.2s ease, transform 0.2s ease;
    user-select: none;
    box-sizing: border-box;
}

/* Size Variants */
.rk-icon--xs {
    font-size: var(--icon-xs) !important;
    width: var(--icon-xs);
    height: var(--icon-xs);
}

.rk-icon--sm {
    font-size: var(--icon-sm) !important;
    width: var(--icon-sm);
    height: var(--icon-sm);
}

.rk-icon--md {
    font-size: var(--icon-md) !important;
    width: var(--icon-md);
    height: var(--icon-md);
}

.rk-icon--lg {
    font-size: var(--icon-lg) !important;
    width: var(--icon-lg);
    height: var(--icon-lg);
}

.rk-icon--xl {
    font-size: var(--icon-xl) !important;
    width: var(--icon-xl);
    height: var(--icon-xl);
}

.rk-icon--2xl {
    font-size: var(--icon-2xl) !important;
    width: var(--icon-2xl);
    height: var(--icon-2xl);
}

.rk-icon--3xl {
    font-size: var(--icon-3xl) !important;
    width: var(--icon-3xl);
    height: var(--icon-3xl);
}

/* Color Variants */
.rk-icon--primary {
    color: var(--icon-primary) !important;
}

.rk-icon--secondary {
    color: var(--icon-secondary) !important;
}

.rk-icon--muted {
    color: var(--icon-muted) !important;
}

.rk-icon--disabled {
    color: var(--icon-disabled) !important;
    pointer-events: none;
    opacity: 0.6;
}

.rk-icon--success {
    color: var(--icon-success) !important;
}

.rk-icon--warning {
    color: var(--icon-warning) !important;
}

.rk-icon--danger {
    color: var(--icon-danger) !important;
}

.rk-icon--info {
    color: var(--icon-info) !important;
}

.rk-icon--inverse {
    color: var(--icon-inverse) !important;
}

/* Gap Helpers */
.rk-icon-gap-xs {
    gap: var(--icon-gap-xs);
}

.rk-icon-gap-sm {
    gap: var(--icon-gap-sm);
}

.rk-icon-gap-md {
    gap: var(--icon-gap-md);
}

.rk-icon-gap-lg {
    gap: var(--icon-gap-lg);
}

/* --------------------------------------------------------------------------
   5. REUSABLE ICON BUTTON COMPONENT
   -------------------------------------------------------------------------- */
.rk-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    background: transparent;
    padding: 0;
    margin: 0;
    line-height: 1;
    box-sizing: border-box;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    user-select: none;
    flex-shrink: 0;
    overflow: hidden;
}

.rk-icon-btn:focus-visible {
    outline: 2px solid var(--rk-secondary, #1266E3);
    outline-offset: 2px;
}

/* IconButton Sizes */
.rk-icon-btn--sm {
    width: 32px;
    height: 32px;
    min-width: 32px;
    min-height: 32px;
    border-radius: 6px;
}

.rk-icon-btn--md {
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    border-radius: 8px;
}

.rk-icon-btn--lg {
    width: 48px;
    height: 48px;
    min-width: 48px;
    min-height: 48px;
    border-radius: 10px;
}

/* IconButton Style Variants */
.rk-icon-btn--ghost {
    background-color: transparent;
    color: var(--rk-gray-700, #334155);
}

.rk-icon-btn--ghost:hover:not(:disabled):not(.disabled) {
    background-color: var(--rk-gray-100, #F1F5F9);
    color: var(--rk-primary, #0B206B);
}

.rk-icon-btn--ghost:active:not(:disabled):not(.disabled) {
    background-color: var(--rk-gray-200, #E2E8F0);
}

.rk-icon-btn--primary {
    background-color: var(--rk-primary, #0B206B);
    color: #FFFFFF;
}

.rk-icon-btn--primary:hover:not(:disabled):not(.disabled) {
    background-color: var(--rk-primary-hover, #07164D);
    color: #FFFFFF;
}

.rk-icon-btn--primary:active:not(:disabled):not(.disabled) {
    background-color: #040E33;
}

.rk-icon-btn--secondary {
    background-color: var(--rk-secondary, #1266E3);
    color: #FFFFFF;
}

.rk-icon-btn--secondary:hover:not(:disabled):not(.disabled) {
    background-color: var(--rk-secondary-hover, #0E52B8);
    color: #FFFFFF;
}

.rk-icon-btn--outline {
    background-color: transparent;
    border-color: var(--rk-gray-300, #CBD5E1);
    color: var(--rk-gray-700, #334155);
}

.rk-icon-btn--outline:hover:not(:disabled):not(.disabled) {
    background-color: var(--rk-gray-100, #F1F5F9);
    border-color: var(--rk-gray-400, #94A3B8);
    color: var(--rk-primary, #0B206B);
}

.rk-icon-btn--danger {
    background-color: transparent;
    color: var(--rk-danger, #EF4444);
}

.rk-icon-btn--danger:hover:not(:disabled):not(.disabled) {
    background-color: var(--rk-danger-bg, #FEF2F2);
    color: #DC2626;
}

/* Disabled state */
.rk-icon-btn:disabled,
.rk-icon-btn.disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}


/* --- forms.css --- */
/* ==========================================================================
   RUANGKOMPETISI.COM — FORMS SYSTEM (2026)
   Inputs, Selects, Radios, Checkboxes, Switches
   Source of Truth: mockup/Mockup - Master Design System.png
   ========================================================================== */

/* 1. FORM GROUPS & LABELS */
.rk-form-group {
    margin-bottom: var(--rk-space-4);
    display: flex;
    flex-direction: column;
}

.rk-form-label {
    font-family: var(--rk-font-primary);
    font-size: 0.8125rem;
    /* 13px */
    font-weight: 600;
    color: var(--rk-gray-700);
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.rk-form-label .required {
    color: var(--rk-danger);
}

.rk-form-hint {
    font-size: 0.75rem;
    /* 12px */
    color: var(--rk-gray-400);
    margin-top: 4px;
}

/* 2. INPUTS & SELECTS */
.rk-form-control {
    font-family: var(--rk-font-primary);
    font-size: 0.875rem;
    /* 14px */
    color: var(--rk-gray-800);
    background-color: var(--rk-white);
    border: 1.5px solid var(--rk-gray-200);
    border-radius: var(--rk-radius-md);
    height: 48px;
    padding: 10px 16px;
    outline: none;
    transition: all var(--rk-transition-fast);
    width: 100%;
}

.rk-form-control::placeholder {
    color: var(--rk-gray-400);
    font-size: 0.875rem;
}

.rk-form-control:hover {
    border-color: var(--rk-gray-300);
}

.rk-form-control:focus {
    border-color: var(--rk-secondary);
    box-shadow: 0 0 0 4px rgba(18, 102, 227, 0.12);
    background-color: var(--rk-white);
}

.rk-form-control:disabled,
.rk-form-control[readonly] {
    background-color: var(--rk-gray-100);
    border-color: var(--rk-gray-200);
    color: var(--rk-gray-400);
    cursor: not-allowed;
}

/* Textarea */
textarea.rk-form-control {
    height: auto;
    min-height: 100px;
    resize: vertical;
    padding: 12px 16px;
}

/* Select */
select.rk-form-control {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
    cursor: pointer;
}

/* 3. INPUT WITH ICONS */
.rk-input-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.rk-input-icon-wrap .rk-input-icon {
    position: absolute;
    left: 16px;
    color: var(--rk-gray-400);
    font-size: 1.125rem;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rk-input-icon-wrap .rk-form-control {
    padding-left: 44px;
}

.rk-input-icon-wrap .rk-input-action {
    position: absolute;
    right: 12px;
    background: transparent;
    border: none;
    color: var(--rk-gray-400);
    cursor: pointer;
    padding: 4px;
}

.rk-input-icon-wrap .rk-input-action:hover {
    color: var(--rk-primary);
}

/* 4. VALIDATION STATES */
.rk-form-control.is-invalid {
    border-color: var(--rk-danger);
    background-color: var(--rk-danger-bg);
}

.rk-form-control.is-invalid:focus {
    box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.15);
}

.rk-form-feedback-error {
    font-size: 0.75rem;
    color: var(--rk-danger);
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
}

.rk-form-control.is-valid {
    border-color: var(--rk-success);
    background-color: var(--rk-success-bg);
}

/* 5. SWITCHES & TOGGLES */
.rk-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--rk-space-3);
    cursor: pointer;
    user-select: none;
}

.rk-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.rk-switch-slider {
    position: relative;
    width: 44px;
    height: 24px;
    background-color: var(--rk-gray-300);
    border-radius: var(--rk-radius-full);
    transition: all var(--rk-transition-fast);
}

.rk-switch-slider::before {
    content: '';
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: var(--rk-white);
    border-radius: 50%;
    transition: all var(--rk-transition-fast);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

.rk-switch input:checked+.rk-switch-slider {
    background-color: var(--rk-accent);
}

.rk-switch input:checked+.rk-switch-slider::before {
    transform: translateX(20px);
}

/* 6. CHECKBOX & RADIO */
.rk-checkbox,
.rk-radio {
    display: inline-flex;
    align-items: center;
    gap: var(--rk-space-2);
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--rk-gray-700);
    user-select: none;
}

.rk-checkbox input,
.rk-radio input {
    width: 18px;
    height: 18px;
    border-radius: var(--rk-radius-xs);
    border: 1.5px solid var(--rk-gray-300);
    accent-color: var(--rk-primary);
    cursor: pointer;
}

.rk-radio input {
    border-radius: 50%;
}


/* --- cards.css --- */
/* ==========================================================================
   RUANGKOMPETISI.COM — CARDS SYSTEM (2026)
   Competition, Category, Venue, Sponsor, Metric Cards
   Source of Truth: mockup/Mockup - Master Design System.png & Mockup - Homepage.png
   ========================================================================== */

/* 1. BASE CARD */
.rk-card {
    background-color: var(--rk-bg-surface);
    border: 1px solid var(--rk-gray-200);
    border-radius: var(--rk-radius-lg);
    box-shadow: var(--rk-shadow-card);
    transition: transform var(--rk-transition-normal), box-shadow var(--rk-transition-normal), border-color var(--rk-transition-normal);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.rk-card:hover {
    box-shadow: var(--rk-shadow-card-hover);
    border-color: var(--rk-gray-300);
}

.rk-card-body {
    padding: var(--rk-space-5);
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.rk-card-header {
    padding: var(--rk-space-4) var(--rk-space-5);
    border-bottom: 1px solid var(--rk-gray-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rk-card-footer {
    padding: var(--rk-space-4) var(--rk-space-5);
    border-top: 1px solid var(--rk-gray-100);
    background-color: var(--rk-bg-subtle);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 2. COMPETITION CARD (Matches Mockup - Homepage.png & Listing) */
.rk-competition-card {
    background: var(--rk-white);
    border: 1px solid var(--rk-gray-200);
    border-radius: var(--rk-radius-lg);
    overflow: hidden;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none !important;
    color: inherit;
}

.rk-competition-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px rgba(11, 32, 107, 0.12);
    border-color: rgba(18, 102, 227, 0.3);
}

.rk-competition-thumb {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--rk-gray-100);
    overflow: hidden;
}

.rk-competition-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background-color: var(--rk-gray-100);
    transition: transform 0.4s ease;
}

.rk-competition-card:hover .rk-competition-thumb img {
    transform: scale(1.03);
}

.rk-competition-badge-top {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
}

.rk-competition-status {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
}

.rk-competition-content {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.rk-competition-category {
    font-size: 0.75rem;
    /* 12px */
    font-weight: 700;
    text-transform: uppercase;
    color: var(--rk-secondary);
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.rk-competition-title {
    font-family: var(--rk-font-primary);
    font-size: 1.0625rem;
    /* 17px */
    font-weight: 700;
    color: #0B1222;
    line-height: 1.35;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rk-competition-title a {
    color: #0B1222 !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

.rk-competition-title a:hover {
    color: #0057D9 !important;
}

.rk-competition-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
    font-size: 0.8125rem;
    color: var(--rk-gray-600);
}

.rk-competition-meta-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.rk-competition-meta-item i {
    color: var(--rk-gray-400);
    font-size: 1rem;
    flex-shrink: 0;
}

.rk-competition-price-wrap {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--rk-gray-100);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rk-competition-fee-label {
    font-size: 0.75rem;
    color: var(--rk-gray-400);
    font-weight: 500;
}

.rk-competition-fee {
    font-size: 1.125rem;
    /* 18px */
    font-weight: 700;
    color: var(--rk-accent);
}

/* 3. SPORT CATEGORY CARD (Pill & Grid styles) */
.rk-sport-card {
    background: var(--rk-white);
    border: 1px solid var(--rk-gray-200);
    border-radius: var(--rk-radius-lg);
    padding: 20px 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none !important;
    color: inherit;
    transition: all var(--rk-transition-normal);
}

.rk-sport-card:hover {
    transform: translateY(-3px);
    border-color: var(--rk-secondary);
    box-shadow: 0 10px 24px rgba(18, 102, 227, 0.1);
}

.rk-sport-icon-box {
    width: 56px;
    height: 56px;
    border-radius: var(--rk-radius-md);
    background-color: rgba(11, 32, 107, 0.05);
    color: var(--rk-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    transition: all var(--rk-transition-fast);
}

.rk-sport-card:hover .rk-sport-icon-box {
    background-color: var(--rk-secondary);
    color: var(--rk-white);
}

.rk-sport-name {
    font-family: var(--rk-font-primary);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--rk-gray-800);
}

.rk-sport-count {
    font-size: 0.75rem;
    color: var(--rk-gray-400);
    font-weight: 500;
}

/* 4. METRIC / KPI STAT CARD (Organizer & Admin Dashboard) */
.rk-kpi-card {
    background: var(--rk-white);
    border: 1px solid var(--rk-gray-200);
    border-radius: var(--rk-radius-lg);
    padding: 24px;
    display: flex;
    align-items: center;
    gap: 18px;
    box-shadow: var(--rk-shadow-card);
}

.rk-kpi-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--rk-radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.rk-kpi-icon.primary {
    background: rgba(11, 32, 107, 0.08);
    color: var(--rk-primary);
}

.rk-kpi-icon.secondary {
    background: var(--rk-secondary-light);
    color: var(--rk-secondary);
}

.rk-kpi-icon.accent {
    background: var(--rk-accent-light);
    color: var(--rk-accent);
}

.rk-kpi-icon.success {
    background: var(--rk-success-bg);
    color: var(--rk-success);
}

.rk-kpi-label {
    font-size: 0.8125rem;
    color: var(--rk-gray-500);
    font-weight: 500;
    margin-bottom: 4px;
}

.rk-kpi-value {
    font-family: var(--rk-font-primary);
    font-size: 1.625rem;
    /* 26px */
    font-weight: 700;
    color: var(--rk-primary);
    line-height: 1.2;
}

/* 5. DIVISION & CATEGORY TAGS (Mockup - Homepage.png) */
.rk-competition-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: auto;
    margin-bottom: 16px;
}

.rk-competition-tag {
    background-color: var(--rk-secondary-light);
    color: var(--rk-secondary);
    font-family: var(--rk-font-primary);
    font-size: 0.75rem;
    /* 12px */
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--rk-radius-full);
    display: inline-flex;
    align-items: center;
}

/* Outline Accent Button (Matches "Lihat Detail" in Mockup - Homepage.png) */
.rk-btn-outline-accent {
    background-color: transparent;
    color: var(--rk-accent) !important;
    border: 1.5px solid var(--rk-accent);
    border-radius: var(--rk-radius-md);
    padding: 8px 18px;
    font-size: 0.875rem;
    font-weight: 600;
    text-align: center;
    transition: all var(--rk-transition-fast);
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rk-btn-outline-accent:hover {
    background-color: var(--rk-accent);
    color: var(--rk-white) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 122, 0, 0.25);
}

/* 6. 12 SPORTS CATEGORIES ROW (Mockup - Homepage.png) */
.rk-sports-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    overflow-x: auto;
    padding: 8px 4px 16px 4px;
    scrollbar-width: thin;
}

.rk-sports-row::-webkit-scrollbar {
    height: 6px;
}

.rk-sports-row::-webkit-scrollbar-thumb {
    background: var(--rk-gray-300);
    border-radius: 4px;
}

.rk-sport-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none !important;
    flex: 0 0 auto;
    width: 76px;
    transition: transform var(--rk-transition-fast);
    cursor: pointer;
}

.rk-sport-item:hover {
    transform: translateY(-4px);
}

.rk-sport-item-box {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF !important;
    font-size: 24px;
    margin-bottom: 8px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
    transition: box-shadow var(--rk-transition-fast), transform var(--rk-transition-fast);
}

.rk-sport-item:hover .rk-sport-item-box {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.rk-sport-item-label {
    font-family: var(--rk-font-primary);
    font-size: 0.8125rem;
    /* 13px */
    font-weight: 600;
    color: var(--rk-gray-800);
    text-align: center;
    line-height: 1.2;
    transition: color var(--rk-transition-fast);
}

.rk-sport-item:hover .rk-sport-item-label {
    color: var(--rk-primary);
}

/* 7. PROMOTIONAL BANNERS (Organizer & Venue - Mockup - Homepage.png) */
.rk-promo-banner {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    height: 168px;
    min-height: 168px;
    max-height: 168px;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
}

@media (max-width: 767px) {
    .rk-promo-banner {
        height: auto;
        min-height: 160px;
        max-height: none;
    }
}

.rk-promo-banner-organizer {
    background-color: #081a36;
    background-image: linear-gradient(135deg, #081a36 0%, #0c234a 100%);
    color: var(--rk-white);
    border: none;
    box-shadow: 0 8px 24px rgba(8, 26, 54, 0.14);
}

.rk-promo-banner-venue {
    background-color: #F0F7FC;
    border: 1px solid #D9E9FA;
    color: var(--rk-gray-900);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.03);
}

.rk-promo-banner-content {
    position: relative;
    z-index: 3;
    padding: 16px 22px;
    max-width: 58%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rk-promo-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 8px;
}

.rk-promo-banner-organizer .rk-promo-icon {
    background: #1D4ED8;
    color: #FFFFFF;
}

.rk-promo-banner-venue .rk-promo-icon {
    background: #DBEAFE;
    color: #2563EB;
}

/* Full-height Promo Banner Image with GRADASI (Touching top & bottom boundaries) */
.rk-promo-banner-img-wrap {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 54%;
    height: 100%;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.rk-promo-img-full {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: right center;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.35) 16%, #000000 45%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.35) 16%, #000000 45%);
}

.rk-promo-banner-venue .rk-promo-img-full {
    object-position: right top;
}

/* 8. ECOSYSTEM CARDS (Marketplace, Sponsor, RuangTech - Mockup - Homepage.png) */
.rk-ecosystem-card {
    background: var(--rk-white);
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    height: 136px;
    min-height: 136px;
    max-height: 136px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
    transition: transform var(--rk-transition-normal), box-shadow var(--rk-transition-normal);
}

@media (max-width: 767px) {
    .rk-ecosystem-card {
        height: auto;
        min-height: 130px;
        max-height: none;
    }
}

.rk-ecosystem-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(11, 32, 107, 0.08);
}

.rk-ecosystem-card-body {
    padding: 14px 12px 14px 16px;
    flex: 1 1 auto;
    max-width: 58%;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    z-index: 3;
    position: relative;
    height: 100%;
}

.rk-ecosystem-card-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: #2563EB;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin-top: 2px;
}

.rk-ecosystem-card-text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}

.rk-ecosystem-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #0057D9;
    font-size: 0.78125rem;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
}

.rk-ecosystem-link:hover {
    color: #0047B8;
}

/* Ecosystem Right Image with GRADASI (Full-height, touching top & bottom edges) */
.rk-ecosystem-card-img {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 45%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    z-index: 1;
    pointer-events: none;
}

.rk-ecosystem-card-img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: right center;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.35) 38%, #000000 65%);
    mask-image: linear-gradient(to right, transparent 0%, transparent 18%, rgba(0, 0, 0, 0.35) 38%, #000000 65%);
}

/* 9. STATS BAR (Dark band with 5 stats & vertical divider lines) */
.rk-stats-bar {
    background-color: #071644;
    padding: 26px 0;
    color: var(--rk-white);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.rk-stats-col {
    position: relative;
}

@media (min-width: 768px) {
    .rk-stats-col:not(:last-child)::after {
        content: '';
        position: absolute;
        right: 0;
        top: 20%;
        height: 60%;
        width: 1px;
        background-color: rgba(255, 255, 255, 0.14);
    }
}

.rk-stats-bar .rk-stat-item,
.rk-stat-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 8px;
}

.rk-stats-bar .rk-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--rk-radius-md);
    background: rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF !important;
    font-size: 18px;
    flex-shrink: 0;
}

.rk-stats-bar .rk-stat-number {
    font-family: var(--rk-font-primary);
    font-size: 1.375rem;
    /* 22px */
    font-weight: 800;
    color: #FFFFFF !important;
    line-height: 1.1;
    margin-bottom: 2px;
}

.rk-stats-bar .rk-stat-label {
    font-size: 0.8125rem;
    color: var(--rk-gray-400) !important;
    font-weight: 500;
}

/* 10. TESTIMONIAL & COMMUNITY CTA (Mockup: NO BORDER on Testimonial) */
.rk-testimonial-box {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 10px 16px 10px 0;
}

.rk-quote-icon {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 3.5rem;
    line-height: 0.8;
    color: #1E293B;
    font-weight: 900;
    margin-bottom: 14px;
    user-select: none;
}

.rk-community-section {
    background-color: #FFFFFF;
    position: relative;
    border-bottom: none;
    overflow: hidden;
    margin-bottom: 0 !important;
    min-height: 320px;
}

/* Full-bleed background image to the far right edge of the viewport (ujung kanan) */
.rk-community-bg-right {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 58%;
    background-image:
        linear-gradient(90deg, #FFFFFF 0%, #FFFFFF 10%, rgba(255, 255, 255, 0.88) 28%, rgba(255, 255, 255, 0.12) 55%, transparent 100%),
        url('/master-asset/Home-07.webp');
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: cover;
    z-index: 1;
    pointer-events: none;
}

@media (max-width: 991.98px) {
    .rk-community-bg-right {
        width: 100%;
        opacity: 0.25;
    }
}

.rk-community-cta-content {
    max-width: 440px;
    position: relative;
    z-index: 2;
}

.rk-community-cta-title {
    font-family: var(--rk-font-primary);
    font-size: 1.875rem;
    /* 30px */
    font-weight: 800;
    color: #07164D;
    /* DARK NAVY BLUE as in Mockup Image 1! */
    line-height: 1.25;
    margin-bottom: 24px;
    letter-spacing: -0.01em;
}

/* Tulisan di ujung kanan persis di badan pelari */
.rk-community-cursive-tag {
    position: absolute;
    right: 36px;
    /* Di ujung kanan layar! */
    bottom: 24px;
    font-family: 'Caveat', 'Dancing Script', cursive, sans-serif;
    font-size: 1.85rem;
    font-weight: 700;
    color: #FFFFFF;
    /* PUTIH on athletes as in Mockup Image 1! */
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.8);
    transform: rotate(-6deg);
    pointer-events: none;
    z-index: 3;
}



/* --- navigation.css --- */
/* ==========================================================================
   RUANGKOMPETISI.COM — NAVIGATION & HEADER SYSTEM (2026)
   Master Header, Navbar, Footer, Mobile Navigation
   Source of Truth: mockup/Mockup - Homepage.png
   ========================================================================== */

/* 1. MASTER HEADER */
.rk-header {
    background-color: var(--rk-white, #FFFFFF);
    border-bottom: 1px solid #E5E7EB;
    position: sticky;
    top: 0;
    z-index: 1040;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    transition: all var(--rk-transition-normal, 0.2s ease);
}

.rk-header .rk-container {
    max-width: 1440px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

.rk-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 64px;
    gap: 8px;
}

/* Brand Logo */
.rk-brand-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none !important;
    padding: 4px 0;
    flex-shrink: 0;
}

.rk-brand-logo img {
    height: 36px;
    width: auto;
    max-width: 165px;
    object-fit: contain;
}

/* Navbar Menu (Mockup: 8 Items: Beranda -> RuangTech) */
.rk-nav-menu {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    flex-wrap: nowrap;
}

.rk-nav-link {
    font-family: var(--rk-font-primary, 'Poppins', sans-serif);
    font-size: 0.875rem;
    /* 14px */
    font-weight: 500;
    color: #1E293B;
    padding: 22px 10px;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    position: relative;
    background: transparent;
    white-space: nowrap;
    transition: color var(--rk-transition-fast, 0.15s ease);
}

.rk-nav-link:hover {
    color: #0057D9;
    /* primary blue on hover */
    background-color: transparent;
}

/* Active Nav Link: Bold Navy Text + Centered Orange Underline */
.rk-nav-link.active {
    color: #0057D9;
    /* primary blue */
    font-weight: 600;
    background-color: transparent;
}

.rk-nav-link.active::after {
    content: '';
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 3px;
    background-color: #FE6502;
    /* accent orange (pixel-sampled) */
    border-radius: 2px;
}

/* Responsive adjustment for 10 items on medium-large desktop */
@media (max-width: 1240px) and (min-width: 992px) {
    .rk-nav-link {
        font-size: 0.75rem;
        /* 12px */
        padding: 20px 5px;
    }

    .rk-brand-logo img {
        max-width: 140px;
    }

    .rk-btn-header-login,
    .rk-btn-header-cta {
        padding: 0 12px;
        font-size: 0.8125rem;
    }
}

/* Header Actions */
.rk-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Header Search Button (Mockup: 40x40 rounded square radius 8px, border 1.5px, navy icon) */
.rk-header-search-btn {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #1E293B;
    background-color: #F1F5F9;
    border: 0;
    text-decoration: none !important;
    transition: all var(--rk-transition-fast);
}

.rk-header-search-btn:hover {
    border-color: #2563EB;
    color: #2563EB;
    background-color: #F8FAFC;
    transform: translateY(-1px);
}

/* Header Masuk / Login Button (Mockup: Blue border 1.5px, blue text, rounded 8px, height 36px) */
.rk-btn-header-login {
    height: 36px;
    padding: 0 18px;
    font-family: var(--rk-font-primary);
    font-size: 0.875rem;
    font-weight: 600;
    color: #0057D9 !important;
    /* primary blue — pixel-sampled */
    background-color: #FFFFFF;
    border: 1.5px solid #0057D9;
    /* primary blue border */
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none !important;
    cursor: pointer;
    transition: all var(--rk-transition-fast);
    line-height: 1;
}

.rk-btn-header-login:hover {
    background-color: rgba(0, 87, 217, 0.06);
    border-color: #0047B8;
    color: #0047B8 !important;
    transform: translateY(-1px);
}

/* Header + Buat Event CTA Button (Mockup: Orange #FE6502, rounded 8px, height 36px) */
.rk-btn-header-cta {
    height: 36px;
    padding: 0 18px;
    font-family: var(--rk-font-primary);
    font-size: 0.875rem;
    font-weight: 600;
    color: #FFFFFF !important;
    background: #FE6502;
    /* pixel-sampled accent orange */
    border: none;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none !important;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(254, 101, 2, 0.28);
    transition: all var(--rk-transition-fast);
    line-height: 1;
}

.rk-btn-header-cta:hover {
    background: #E55A00;
    box-shadow: 0 6px 18px rgba(254, 101, 2, 0.38);
    transform: translateY(-1px);
    color: #FFFFFF !important;
}

/* 2. MASTER FOOTER (PRECISE COMPACT SPECIFICATION) */
.rk-footer {
    background-color: #021B3D;
    color: rgba(255, 255, 255, 0.75);
    font-family: var(--rk-font-primary, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    padding-top: 36px;
    padding-bottom: 22px;
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.rk-footer .rk-container {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
}

/* 3-Column Precise Grid Layout matching Mockup */
.rk-footer-grid {
    display: grid;
    grid-template-columns: 1.15fr 1.45fr 0.9fr;
    gap: 0;
    align-items: flex-start;
}

/* Col 1: Brand Info */
.rk-footer-brand-col {
    padding-right: 36px;
    display: flex;
    flex-direction: column;
}

.rk-footer-logo-link {
    display: inline-block;
    margin-bottom: 12px;
    text-decoration: none !important;
}

.rk-footer-logo {
    max-width: 175px;
    height: auto;
    object-fit: contain;
    display: block;
}

.rk-footer-desc {
    font-size: 0.8125rem;
    /* 13px */
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 18px;
    max-width: 350px;
}

.rk-footer-social {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rk-footer-social-link {
    color: #FFFFFF;
    font-size: 17px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease, transform 0.15s ease;
    text-decoration: none !important;
    opacity: 0.9;
}

.rk-footer-social-link:hover {
    color: #FE6502;
    opacity: 1;
    transform: translateY(-1px);
}

/* Col 2: Menu (with vertical borders and compact 2 sub-columns) */
.rk-footer-menu-col {
    border-left: 1px solid rgba(255, 255, 255, 0.12);
    border-right: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0 40px;
}

.rk-footer-title {
    font-size: 0.9375rem;
    /* 15px */
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 12px;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.rk-footer-menu-links-wrap {
    display: flex;
    gap: 135px;
}

.rk-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rk-footer-link {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.8125rem;
    /* 13px */
    line-height: 1.35;
    text-decoration: none !important;
    transition: color 0.15s ease;
    display: inline-block;
    white-space: nowrap;
}

.rk-footer-link:hover {
    color: #FFFFFF;
}

/* Col 3: Kontak Kami */
.rk-footer-contact-col {
    padding-left: 36px;
}

.rk-footer-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rk-footer-contact-list li {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rk-footer-contact-icon {
    font-size: 16px;
    color: #FFFFFF;
    line-height: 1;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    opacity: 0.9;
}

.rk-footer-contact-text {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.72);
}

/* Footer Bottom Bar */
.rk-footer-bottom {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.78125rem;
    /* 12.5px */
    color: rgba(255, 255, 255, 0.55);
}

.rk-footer-copyright strong {
    color: rgba(255, 255, 255, 0.8);
}

.rk-footer-legal-links {
    display: flex;
    align-items: center;
    gap: 14px;
}

.rk-footer-legal-sep {
    color: rgba(255, 255, 255, 0.25);
    font-size: 11px;
}

@media (max-width: 991.98px) {
    .rk-footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .rk-footer-brand-col {
        padding-right: 0;
    }

    .rk-footer-menu-col {
        border-left: none;
        border-right: none;
        padding: 0;
    }

    .rk-footer-contact-col {
        padding-left: 0;
    }

    .rk-footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
}

/* 3. MOBILE DRAWER */
.rk-mobile-drawer {
    position: fixed;
    top: 0;
    left: -290px;
    width: 290px;
    height: 100vh;
    background-color: var(--rk-white);
    z-index: 1060;
    box-shadow: var(--rk-shadow-lg);
    transition: left var(--rk-transition-normal);
    display: flex;
    flex-direction: column;
}

.rk-mobile-drawer.open {
    left: 0;
}

.rk-drawer-backdrop {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1055;
    opacity: 0;
    visibility: hidden;
    transition: all var(--rk-transition-normal);
}

.rk-drawer-backdrop.open {
    opacity: 1;
    visibility: visible;
}


/* --- responsive.css --- */
/* ==========================================================================
   RUANGKOMPETISI.COM — RESPONSIVE SYSTEM (2026)
   Zero Overlap Guarantees across Desktop, Tablet, Mobile
   Source of Truth: Master Development Rule Section 7 & 22
   ========================================================================== */

/* Tablet (max-width: 1024px) */
@media (max-width: 1024px) {
    .rk-grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--rk-space-4);
    }

    .rk-grid-3 {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--rk-space-4);
    }

    .rk-search-box {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        padding: 20px;
    }

    .rk-search-field {
        border-right: none;
        border-bottom: 1px solid var(--rk-gray-200);
        padding-bottom: 10px;
    }

    .rk-search-box .rk-btn {
        grid-column: span 2;
        width: 100%;
        height: 50px;
    }

    .rk-hero {
        padding-top: 48px;
        padding-bottom: 64px;
    }

    .rk-hero-title {
        font-size: 2.25rem;
        /* 36px */
    }
}

/* Mobile (max-width: 768px) */
@media (max-width: 768px) {

    .rk-header-actions .rk-btn-header-login,
    .rk-header-actions .rk-btn-header-cta {
        display: none;
    }

    .rk-mobile-nav-menu {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .rk-mobile-nav-menu .rk-nav-link {
        width: 100%;
        padding: 12px 10px;
        font-size: 0.875rem;
    }

    .rk-mobile-nav-menu .rk-nav-link.active::after {
        right: auto;
        bottom: 0;
        left: 10px;
        transform: none;
    }

    .rk-grid-4,
    .rk-grid-3,
    .rk-grid-2 {
        grid-template-columns: 1fr;
        gap: var(--rk-space-4);
    }

    .rk-search-box {
        grid-template-columns: 1fr;
        padding: 16px;
        border-radius: var(--rk-radius-lg);
    }

    .rk-search-box .rk-btn {
        grid-column: span 1;
    }

    .rk-section {
        padding-top: var(--rk-space-10);
        padding-bottom: var(--rk-space-10);
    }

    .rk-section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: var(--rk-space-6);
    }

    .rk-hero-title {
        font-size: 1.875rem;
        /* 30px */
    }

    .rk-hero-subtitle {
        font-size: 0.9375rem;
        margin-bottom: 24px;
    }

    .rk-header-inner {
        height: 64px;
    }

    .rk-footer {
        padding-top: 48px;
        padding-bottom: 24px;
    }

    .rk-footer-bottom {
        flex-direction: column;
        gap: 16px;
        text-align: center;
    }
}

/* Micro Mobile (max-width: 425px) */
@media (max-width: 425px) {
    .rk-btn {
        padding: 10px 16px;
        font-size: 0.8125rem;
    }

    .rk-hero-title {
        font-size: 1.625rem;
    }

    .rk-card-body {
        padding: var(--rk-space-4);
    }
}


/* --- utilities.css --- */
/* ==========================================================================
   RUANGKOMPETISI.COM — UTILITIES SYSTEM (2026)
   Spacing, Flexbox, Alignment, Display, Shadow, Colors
   ========================================================================== */

.rk-d-flex {
    display: flex;
}

.rk-d-inline-flex {
    display: inline-flex;
}

.rk-d-grid {
    display: grid;
}

.rk-d-none {
    display: none !important;
}

.rk-d-block {
    display: block;
}

.rk-flex-column {
    flex-direction: column;
}

.rk-flex-row {
    flex-direction: row;
}

.rk-flex-wrap {
    flex-wrap: wrap;
}

.rk-flex-grow-1 {
    flex-grow: 1;
}

.rk-items-center {
    align-items: center;
}

.rk-items-start {
    align-items: flex-start;
}

.rk-items-end {
    align-items: flex-end;
}

.rk-justify-center {
    justify-content: center;
}

.rk-justify-between {
    justify-content: space-between;
}

.rk-justify-start {
    justify-content: flex-start;
}

.rk-justify-end {
    justify-content: flex-end;
}

.rk-gap-1 {
    gap: var(--rk-space-1);
}

.rk-gap-2 {
    gap: var(--rk-space-2);
}

.rk-gap-3 {
    gap: var(--rk-space-3);
}

.rk-gap-4 {
    gap: var(--rk-space-4);
}

.rk-gap-6 {
    gap: var(--rk-space-6);
}

.rk-gap-8 {
    gap: var(--rk-space-8);
}

.rk-w-100 {
    width: 100%;
}

.rk-h-100 {
    height: 100%;
}

.rk-bg-white {
    background-color: var(--rk-white) !important;
}

.rk-bg-body {
    background-color: var(--rk-bg-body) !important;
}

.rk-bg-primary {
    background-color: var(--rk-primary) !important;
}

.rk-bg-secondary {
    background-color: var(--rk-secondary) !important;
}

.rk-bg-accent {
    background-color: var(--rk-accent) !important;
}

.rk-bg-dark {
    background-color: var(--rk-bg-dark) !important;
}

.rk-rounded-sm {
    border-radius: var(--rk-radius-sm) !important;
}

.rk-rounded-md {
    border-radius: var(--rk-radius-md) !important;
}

.rk-rounded-lg {
    border-radius: var(--rk-radius-lg) !important;
}

.rk-rounded-full {
    border-radius: var(--rk-radius-full) !important;
}

.rk-shadow-sm {
    box-shadow: var(--rk-shadow-sm) !important;
}

.rk-shadow-md {
    box-shadow: var(--rk-shadow-md) !important;
}

.rk-shadow-lg {
    box-shadow: var(--rk-shadow-lg) !important;
}

.rk-shadow-none {
    box-shadow: none !important;
}

.rk-overflow-hidden {
    overflow: hidden;
}

.rk-text-center {
    text-align: center;
}

.rk-text-right {
    text-align: right;
}

.rk-text-left {
    text-align: left;
}

/* ==========================================================================
   10. AUTHENTICATION & LOGIN PAGE (100% MATCH TO MOCKUP - LOGIN.PNG)
   Centralized Design System Specification
   ========================================================================== */

.rk-auth-section {
    background-color: #F8FAFC;
    min-height: calc(100vh - 140px);
    display: flex;
    align-items: stretch;
    padding: 0;
}

.rk-auth-grid {
    display: flex;
    width: 100%;
    min-height: 100%;
}

/* ---- LEFT HERO COLUMN ---- */
.rk-auth-hero {
    flex: 0 0 50%;
    max-width: 50%;
    position: relative;
    background-color: #021B3D;
    background-image: url('../../../master-asset/Login-01.png');
    background-size: cover;
    background-position: center bottom;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 56px 64px 44px;
    overflow: hidden;
    color: #FFFFFF;
}

/* Gradient overlay to ensure text contrast at top and bottom */
.rk-auth-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
            rgba(2, 27, 61, 0.92) 0%,
            rgba(2, 27, 61, 0.85) 32%,
            rgba(2, 27, 61, 0.45) 55%,
            rgba(2, 27, 61, 0.70) 80%,
            rgba(2, 27, 61, 0.95) 100%);
    z-index: 1;
    pointer-events: none;
}

.rk-auth-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

/* Pre-title with orange bar */
.rk-auth-pretitle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.rk-auth-orange-bar {
    width: 32px;
    height: 4px;
    background: #FF7A00;
    border-radius: 2px;
    display: inline-block;
}

.rk-auth-pretitle-text {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
}

/* Brand Heading */
.rk-auth-brand-title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.15;
    color: #FFFFFF;
    margin-bottom: 4px;
    letter-spacing: -0.02em;
}

.rk-auth-brand-title span {
    color: #FF7A00;
}

.rk-auth-brand-tagline {
    font-size: 1.25rem;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 20px;
}

.rk-auth-hero-desc {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.6;
    margin-bottom: 36px;
    max-width: 480px;
}

/* 4 Feature Items */
.rk-auth-features {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 40px;
}

.rk-auth-feature-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rk-auth-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #FFFFFF;
    flex-shrink: 0;
}

.rk-auth-feature-title {
    font-size: 1rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 2px;
}

.rk-auth-feature-sub {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.72);
    line-height: 1.35;
}

/* Handwritten Cursive Callout */
.rk-auth-cursive-callout {
    font-family: 'Caveat', 'Dancing Script', cursive;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 30px;
    transform: rotate(-3deg);
    display: inline-block;
}

/* Bottom Stats Bar */
.rk-auth-hero-bottom {
    position: relative;
    z-index: 2;
    padding-top: 24px;
}

.rk-auth-bottom-bar {
    width: 40px;
    height: 4px;
    background: #FF7A00;
    border-radius: 2px;
    margin-bottom: 18px;
}

.rk-auth-stats-row {
    display: flex;
    align-items: center;
    gap: 36px;
    flex-wrap: wrap;
}

.rk-auth-stat-col {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rk-auth-stat-icon {
    font-size: 24px;
    color: rgba(255, 255, 255, 0.8);
}

.rk-auth-stat-num {
    font-size: 1.375rem;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.1;
}

.rk-auth-stat-lbl {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    white-space: nowrap;
}

/* ---- RIGHT FORM COLUMN ---- */
.rk-auth-form-pane {
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px 40px;
    background-color: #F8FAFC;
    overflow-y: auto;
}

.rk-auth-card-container {
    width: 100%;
    max-width: 480px;
}

.rk-auth-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 44px 40px 36px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
}

.rk-auth-card-logo-wrap {
    text-align: center;
    margin-bottom: 28px;
}

.rk-auth-card-logo {
    height: 48px;
    width: auto;
    object-fit: contain;
}

.rk-auth-card-title {
    font-size: 1.875rem;
    font-weight: 800;
    color: #0B1222;
    margin-bottom: 6px;
    letter-spacing: -0.01em;
}

.rk-auth-card-subtitle {
    font-size: 0.875rem;
    color: #64748B;
    line-height: 1.5;
    margin-bottom: 28px;
}

/* Input Fields with Left Icons */
.rk-auth-form-group {
    margin-bottom: 20px;
}

.rk-auth-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0B1222;
    margin-bottom: 8px;
}

.rk-auth-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.rk-auth-input-icon {
    position: absolute;
    left: 16px;
    font-size: 18px;
    color: #64748B;
    pointer-events: none;
    z-index: 2;
}

.rk-auth-input {
    width: 100%;
    height: 48px;
    padding: 10px 16px 10px 46px;
    border: 1.5px solid #CBD5E1;
    border-radius: 8px;
    font-size: 0.875rem;
    color: #0B1222;
    background-color: #FFFFFF;
    transition: border-color 0.2s, box-shadow 0.2s;
    outline: none;
}

.rk-auth-input:focus {
    border-color: #0057D9;
    box-shadow: 0 0 0 3px rgba(0, 87, 217, 0.12);
}

.rk-auth-input::placeholder {
    color: #94A3B8;
}

.rk-auth-pwd-toggle {
    position: absolute;
    right: 14px;
    background: none;
    border: none;
    padding: 4px;
    color: #64748B;
    cursor: pointer;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.rk-auth-pwd-toggle:hover {
    color: #0B1222;
}

/* Checkbox and Forgot Password */
.rk-auth-row-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
    margin-bottom: 24px;
}

.rk-auth-remember {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: #0B1222;
    cursor: pointer;
    margin-bottom: 0;
    user-select: none;
}

.rk-auth-remember input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: #0057D9;
    cursor: pointer;
}

.rk-auth-forgot-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: #0057D9;
    text-decoration: none !important;
}

.rk-auth-forgot-link:hover {
    color: #0047B8;
    text-decoration: underline !important;
}

/* Submit Button */
.rk-auth-btn-submit {
    width: 100%;
    height: 48px;
    background-color: #FF7A00;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 0.9375rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.15s;
    text-decoration: none !important;
}

.rk-auth-btn-submit:hover {
    background-color: #E66E00;
    color: #FFFFFF;
}

.rk-auth-btn-submit:active {
    transform: scale(0.99);
}

/* Divider */
.rk-auth-divider {
    position: relative;
    text-align: center;
    margin: 24px 0 20px;
}

.rk-auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #E2E8F0;
    z-index: 1;
}

.rk-auth-divider span {
    position: relative;
    z-index: 2;
    background: #FFFFFF;
    padding: 0 14px;
    font-size: 0.8125rem;
    color: #94A3B8;
}

/* Social Buttons */
.rk-auth-social-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 24px;
}

.rk-auth-social-btn {
    width: 100%;
    height: 44px;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0B1222;
    text-decoration: none !important;
    transition: background-color 0.2s, border-color 0.2s;
}

.rk-auth-social-btn:hover {
    background-color: #F8FAFC;
    border-color: #94A3B8;
    color: #0B1222;
}

/* Register Prompt */
.rk-auth-register-prompt {
    text-align: center;
    font-size: 0.875rem;
    color: #64748B;
    margin-top: 6px;
}

.rk-auth-register-prompt a {
    color: #0057D9;
    font-weight: 700;
    text-decoration: none !important;
}

.rk-auth-register-prompt a:hover {
    color: #0047B8;
    text-decoration: underline !important;
}

/* Trust Box (Blue soft container below card) */
.rk-auth-trust-card {
    background-color: #EFF6FF;
    border: 1px solid #DBEAFE;
    border-radius: 12px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
}

.rk-auth-trust-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: #2563EB;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.rk-auth-trust-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0B1222;
    margin-bottom: 2px;
}

.rk-auth-trust-desc {
    font-size: 0.78125rem;
    color: #64748B;
    line-height: 1.35;
}

/* Bottom Cursive Quote in Form Pane */
.rk-auth-bottom-quote-wrap {
    text-align: center;
    margin-top: 28px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.rk-auth-quote-mark {
    font-size: 2rem;
    line-height: 1;
    color: #93C5FD;
    margin-bottom: -4px;
}

.rk-auth-bottom-quote {
    font-family: 'Caveat', 'Dancing Script', cursive;
    font-size: 1.375rem;
    font-weight: 600;
    color: #0B1222;
    line-height: 1.3;
    margin-bottom: 12px;
}

.rk-auth-quote-bar {
    width: 36px;
    height: 3px;
    background: #FF7A00;
    border-radius: 2px;
}

/* ---- REGISTRATION SPECIFIC STYLES (100% MATCH TO MOCKUP - REGISTER.PNG) ---- */
.rk-auth-hero-register {
    background-image: url('../../../master-asset/Register-01.png') !important;
    padding: 48px 40px 38px !important;
}

.rk-auth-card-container-register {
    max-width: 540px !important;
}

.rk-auth-card-register {
    padding: 38px 36px 32px !important;
}

/* 4-Item Stats Row for Registration (Strictly 1 Row on Desktop, Never Wraps) */
.rk-auth-stats-row-4 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: nowrap !important;
    gap: 10px !important;
    width: 100% !important;
}

.rk-auth-stats-row-4 .rk-auth-stat-col {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

.rk-auth-stats-row-4 .rk-auth-stat-icon {
    font-size: 22px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    flex-shrink: 0 !important;
}

.rk-auth-stats-row-4 .rk-auth-stat-num {
    font-size: 1.125rem !important;
    font-weight: 800 !important;
    color: #FFFFFF !important;
    line-height: 1.1 !important;
    white-space: nowrap !important;
}

.rk-auth-stats-row-4 .rk-auth-stat-lbl {
    font-size: 0.6875rem !important;
    color: rgba(255, 255, 255, 0.72) !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

/* Phone Input Split Group */
.rk-auth-phone-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.rk-auth-phone-prefix-wrap {
    position: relative;
    flex: 0 0 110px;
}

.rk-auth-phone-prefix-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #0057D9;
    pointer-events: none;
    z-index: 2;
}

.rk-auth-phone-prefix-select {
    width: 100%;
    height: 48px;
    padding: 10px 24px 10px 34px;
    border: 1.5px solid #CBD5E1;
    border-radius: 8px;
    background-color: #F8FAFC;
    font-size: 0.875rem;
    font-weight: 600;
    color: #0B1222;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.rk-auth-phone-prefix-select:focus {
    border-color: #0057D9;
    box-shadow: 0 0 0 3px rgba(0, 87, 217, 0.12);
}

.rk-auth-phone-prefix-arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: #64748B;
    pointer-events: none;
    z-index: 2;
}

.rk-auth-phone-num-wrap {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

/* Account Type / Role Selector Cards */
.rk-auth-role-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.rk-auth-role-item {
    position: relative;
    margin-bottom: 0;
    cursor: pointer;
    display: block;
}

.rk-auth-role-radio {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.rk-auth-role-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px 8px 14px;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 12px;
    transition: all 0.2s ease;
    height: 100%;
    min-height: 108px;
}

.rk-auth-role-item:hover .rk-auth-role-card {
    border-color: #0057D9;
    background-color: #F8FAFC;
}

.rk-auth-role-radio:checked+.rk-auth-role-card {
    border: 2px solid #0057D9;
    background-color: #EFF6FF;
}

.rk-auth-role-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #0057D9;
    color: #FFFFFF;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 10px;
}

.rk-auth-role-radio:checked+.rk-auth-role-card .rk-auth-role-badge {
    display: flex;
}

.rk-auth-role-icon {
    font-size: 26px;
    color: #0057D9;
    margin-bottom: 6px;
    line-height: 1;
}

.rk-auth-role-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0B1222;
    margin-bottom: 2px;
}

.rk-auth-role-desc {
    font-size: 0.6875rem;
    color: #64748B;
    line-height: 1.25;
}

/* Terms Checkbox Row */
.rk-auth-terms-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 22px;
    font-size: 0.8125rem;
    color: #0B1222;
    line-height: 1.45;
}

.rk-auth-terms-row input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #0057D9;
    margin-top: 1px;
    flex-shrink: 0;
    cursor: pointer;
}

.rk-auth-terms-row a {
    color: #0057D9;
    font-weight: 600;
    text-decoration: none !important;
}

.rk-auth-terms-row a:hover {
    text-decoration: underline !important;
}

/* Responsive Media Queries */
@media (max-width: 991px) {
    .rk-auth-grid {
        flex-direction: column;
    }

    .rk-auth-hero {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 40px 24px;
    }

    .rk-auth-form-pane {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 40px 16px;
    }

    .rk-auth-brand-title {
        font-size: 2rem;
    }

    .rk-auth-stats-row-4 {
        gap: 16px;
    }

    .rk-auth-role-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
}

@media (max-width: 576px) {
    .rk-auth-role-grid {
        grid-template-columns: 1fr;
    }

    .rk-auth-role-card {
        min-height: auto;
        padding: 12px 14px;
        flex-direction: row;
        text-align: left;
        gap: 12px;
    }

    .rk-auth-role-icon {
        margin-bottom: 0;
    }

    .rk-auth-card-register {
        padding: 28px 18px 24px !important;
    }
}

/* ==========================================================================
   11. INFO & POLICY PAGES (100% MATCH TO MOCKUPS)
   Bantuan, Tentang Kami, Kebijakan Privasi, Terms & Service, Sitemap
   ========================================================================== */

/* ---- 11.1 COMMON HERO SECTION ---- */
.rk-info-hero {
    position: relative;
    background-color: #021B3D;
    background-size: cover;
    background-position: center right;
    color: #FFFFFF;
    padding: 44px 0 48px;
    overflow: hidden;
}

.rk-info-hero-help {
    background-image: url('../../master-asset/Bantuan-01.png');
    background-size: cover;
    background-position: 72% center;
}

.rk-info-hero-help .rk-info-hero-overlay {
    background: linear-gradient(90deg, rgba(2, 27, 61, 0.96) 0%, rgba(2, 27, 61, 0.90) 42%, rgba(2, 27, 61, 0.35) 70%, rgba(2, 27, 61, 0.78) 100%);
}

.rk-info-hero-about {
    background-image: url('../../master-asset/Tentang-01.png');
    background-size: cover;
    background-position: center right;
}

.rk-info-hero-about .rk-info-hero-overlay {
    background: linear-gradient(90deg, rgba(2, 27, 61, 0.96) 0%, rgba(2, 27, 61, 0.90) 42%, rgba(2, 27, 61, 0.28) 72%, rgba(2, 27, 61, 0.65) 100%);
}

.rk-info-hero-privacy {
    background-image: url('../img/ruangkompetisi/privacy-hero.webp');
}

.rk-info-hero-terms {
    background-image: url('../../master-asset/Tems Service-01.png');
}

.rk-info-hero-sitemap {
    background-image: url('../../master-asset/Sitemap-01.webp');
}

.rk-info-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(2, 27, 61, 0.94) 0%, rgba(2, 27, 61, 0.88) 45%, rgba(2, 27, 61, 0.50) 75%, rgba(2, 27, 61, 0.35) 100%);
    z-index: 1;
    pointer-events: none;
}

.rk-info-hero-inner {
    position: relative;
    z-index: 2;
}

.rk-info-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 16px;
}

.rk-info-breadcrumb a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.15s;
}

.rk-info-breadcrumb a:hover {
    color: #FFFFFF;
}

.rk-info-breadcrumb .rk-breadcrumb-sep {
    font-size: 10px;
    opacity: 0.6;
}

.rk-info-breadcrumb .rk-breadcrumb-active {
    color: #FFFFFF;
    font-weight: 600;
}

.rk-info-hero-title {
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1.15;
    color: #FFFFFF;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.rk-info-hero-tagline {
    font-size: 1.25rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 12px;
}

.rk-info-hero-desc {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.6;
    max-width: 540px;
    margin-bottom: 0;
}

.rk-info-hero-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    height: 100%;
}

.rk-info-hero-right-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 28px;
    height: 100%;
}

.rk-hero-cyber-shield {
    width: 175px;
    height: 210px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 16px rgba(56, 189, 248, 0.45));
    transition: transform 0.3s ease;
}

.rk-hero-cyber-shield:hover {
    transform: scale(1.03);
}

.rk-cyber-shield-svg {
    width: 100%;
    height: 100%;
    display: block;
}

.rk-info-hero-right-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.rk-info-hero-cursive {
    font-family: 'Caveat', 'Dancing Script', cursive;
    font-size: 2rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.25;
    margin-bottom: 20px;
    transform: rotate(-3deg);
    text-align: left;
}

.rk-info-hero-underline {
    position: relative;
    display: inline-block;
}

.rk-info-hero-underline::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 3.5px;
    background-color: #FE6502;
    border-radius: 2px;
}

.rk-info-hero-badge-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rk-info-hero-badge-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #FFFFFF;
}

.rk-info-hero-badge-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #FFFFFF;
    color: #021B3D;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 900;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

/* ---- 11.2 SEARCH BAR (FOR BANTUAN) ---- */
.rk-help-search-sec {
    position: relative;
    z-index: 10;
    margin-top: -26px;
    margin-bottom: 36px;
}

.rk-help-search-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 12px;
}

.rk-help-search-icon {
    font-size: 20px;
    color: #64748B;
    margin-left: 8px;
}

.rk-help-search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.9375rem;
    color: #0B1222;
    background: transparent;
}

.rk-help-search-input::placeholder {
    color: #94A3B8;
}

.rk-help-search-btn {
    background-color: #FF7A00;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 10px 28px;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s;
}

.rk-help-search-btn:hover {
    background-color: #E66E00;
}

.rk-help-pop-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
    font-size: 0.8125rem;
}

.rk-help-pop-lbl {
    color: #64748B;
    font-weight: 500;
    margin-right: 4px;
}

.rk-help-pop-tag {
    background: #F1F5F9;
    color: #0057D9;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 4px 14px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.15s;
}

.rk-help-pop-tag:hover {
    background: #E2E8F0;
    color: #0047B8;
}

/* ---- 11.3 THREE-COLUMN POLICY & INFO LAYOUT ---- */
.rk-policy-section {
    background-color: #F8FAFC;
    padding: 36px 0 64px;
}

.rk-policy-nav-box {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.rk-policy-nav-title {
    font-size: 1rem;
    font-weight: 800;
    color: #0B1222;
    margin-bottom: 14px;
}

.rk-policy-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rk-policy-nav-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.rk-policy-nav-item:hover {
    background-color: #F1F5F9;
    color: #0057D9;
}

.rk-policy-nav-item.active {
    background-color: #EFF6FF;
    color: #0057D9;
    font-weight: 700;
}

.rk-policy-nav-item i {
    width: 20px;
    text-align: center;
    font-size: 18px;
    color: #64748B;
    flex-shrink: 0;
}

.rk-policy-nav-item.active i {
    color: #0057D9;
}

.rk-policy-support-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    text-align: center;
}

.rk-policy-support-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #EFF6FF;
    color: #0057D9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 12px;
}

.rk-policy-support-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0B1222;
    margin-bottom: 4px;
}

.rk-policy-support-desc {
    font-size: 0.78125rem;
    color: #64748B;
    line-height: 1.4;
    margin-bottom: 14px;
}

.rk-policy-support-btn {
    display: inline-block;
    width: 100%;
    padding: 8px 16px;
    border: 1.5px solid #0057D9;
    border-radius: 8px;
    color: #0057D9;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.15s;
}

.rk-policy-support-btn:hover {
    background-color: #0057D9;
    color: #FFFFFF;
}

.rk-policy-sidebar-banner {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 440px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.rk-policy-sidebar-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rk-policy-sidebar-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2, 27, 61, 0.95) 0%, rgba(2, 27, 61, 0.82) 32%, rgba(2, 27, 61, 0.20) 65%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

.rk-policy-sidebar-banner-content {
    position: absolute;
    top: 28px;
    left: 20px;
    right: 20px;
    z-index: 2;
}

.rk-policy-sidebar-banner-cursive {
    font-family: 'Caveat', 'Dancing Script', cursive;
    font-size: 2.1rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.25;
    transform: rotate(-3deg);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

.rk-policy-sidebar-banner-underline {
    position: relative;
    display: inline-block;
}

.rk-policy-sidebar-banner-underline::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #FE6502;
    border-radius: 2px;
}

/* Middle Column Content */
.rk-policy-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #E2E8F0;
}

.rk-policy-date {
    font-size: 0.8125rem;
    color: #64748B;
}

.rk-policy-print-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0057D9;
    cursor: pointer;
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.rk-policy-print-btn:hover {
    background: #EFF6FF;
    border-color: #0057D9;
}

.rk-policy-lead-text {
    font-size: 0.875rem;
    color: #334155;
    line-height: 1.65;
    margin-bottom: 22px;
}

/* Policy Items List (Privacy & Terms) */
.rk-policy-items-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Static Card Item (Privacy Policy Mockup - 100% Match) */
.rk-policy-card-item {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 18px 22px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.rk-policy-card-item:hover {
    border-color: #CBD5E1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.rk-policy-num-badge {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background-color: #0057D9;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 800;
    flex-shrink: 0;
    margin-top: 4px;
}

.rk-policy-num-badge-orange {
    background-color: #EA580C;
}

.rk-policy-icon-circle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background-color: #EFF6FF;
    color: #0057D9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.rk-policy-icon-circle-orange {
    background-color: #FFF7ED;
    color: #EA580C;
}

.rk-policy-content-wrap {
    flex: 1 1 auto;
    min-width: 0;
}

.rk-policy-item-title {
    font-size: 0.9375rem;
    /* 15px */
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 4px;
    line-height: 1.35;
}

.rk-policy-item-desc {
    font-size: 0.8125rem;
    /* 13px */
    color: #475569;
    line-height: 1.55;
    margin-bottom: 0;
}

.rk-policy-item-desc a {
    color: #0057D9;
    font-weight: 600;
    text-decoration: none;
}

.rk-policy-item-desc a:hover {
    text-decoration: underline;
}

/* Accordion Card (For Terms of Service) */
.rk-policy-section-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px 20px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.rk-policy-section-card:hover {
    border-color: #CBD5E1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.rk-policy-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    gap: 16px;
}

.rk-policy-section-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1 1 auto;
    min-width: 0;
}

.rk-policy-icon-box {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background-color: #EFF6FF;
    color: #0057D9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.rk-policy-section-title {
    font-size: 0.9375rem;
    /* 15px */
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 3px;
    line-height: 1.3;
}

.rk-policy-section-desc {
    font-size: 0.8125rem;
    /* 13px */
    color: #475569;
    line-height: 1.45;
    margin-bottom: 0;
}

.rk-policy-section-toggle {
    font-size: 15px;
    color: #0F172A;
    flex-shrink: 0;
    margin-left: 8px;
    transition: transform 0.2s ease;
}

.rk-policy-section-body {
    padding-left: 86px;
    padding-top: 12px;
    margin-top: 12px;
    border-top: 1px solid #F1F5F9;
    font-size: 0.8125rem;
    color: #334155;
    line-height: 1.6;
}

@media (max-width: 767px) {
    .rk-policy-section-body {
        padding-left: 0;
    }

    .rk-policy-card-item {
        gap: 12px;
        padding: 14px 16px;
    }

    .rk-policy-icon-circle {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 18px;
    }
}

/* Right Widgets */
.rk-policy-widget {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
}

.rk-policy-widget-title {
    font-size: 0.9375rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.rk-policy-widget-title i {
    font-size: 18px;
    color: #0057D9;
}

/* Checklist for Ringkasan Kebijakan */
.rk-policy-widget-check-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rk-policy-widget-check-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.8125rem;
    color: #334155;
    line-height: 1.45;
}

.rk-policy-widget-check-item i {
    font-size: 18px;
    color: #10B981;
    flex-shrink: 0;
    margin-top: 1px;
}

.rk-policy-summary-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rk-policy-summary-item a {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 0.8125rem;
    color: #334155;
    text-decoration: none !important;
    transition: color 0.15s ease;
    line-height: 1.4;
}

.rk-policy-summary-item a:hover {
    color: #0057D9;
    font-weight: 600;
}

.rk-policy-summary-num {
    font-weight: 600;
    color: #64748B;
    flex-shrink: 0;
}

.rk-policy-quote-card {
    background: #F0F7FF;
    border: 1px solid #BFDBFE;
    border-radius: 12px;
    padding: 22px 20px;
    margin-bottom: 20px;
}

.rk-policy-quote-icon {
    font-size: 34px;
    color: #0057D9;
    line-height: 1;
    margin-bottom: 8px;
    font-weight: 900;
}

.rk-policy-quote-text {
    font-size: 0.84375rem;
    font-style: italic;
    color: #1E293B;
    line-height: 1.55;
    margin-bottom: 12px;
}

.rk-policy-quote-author {
    font-size: 0.78125rem;
    font-weight: 700;
    color: #0057D9;
}

.rk-policy-commitment-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.rk-policy-commitment-icon {
    font-size: 26px;
    color: #0057D9;
    flex-shrink: 0;
    margin-top: 2px;
}

.rk-policy-commitment-title {
    font-size: 0.875rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 4px;
}

.rk-policy-commitment-desc {
    font-size: 0.78125rem;
    color: #475569;
    line-height: 1.45;
    margin-bottom: 0;
}

.rk-policy-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.rk-policy-link-item {
    border-bottom: 1px solid #F1F5F9;
}

.rk-policy-link-item:last-child {
    border-bottom: none;
}

.rk-policy-link-item a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    font-size: 0.84375rem;
    font-weight: 600;
    color: #334155;
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.rk-policy-link-item a:hover {
    color: #0057D9;
    padding-left: 4px;
}

.rk-policy-link-item a i {
    font-size: 14px;
    color: #0057D9;
    transition: transform 0.15s ease;
}

.rk-policy-link-item a:hover i {
    transform: translateX(4px);
}

/* Bottom Full-width CTA Banner */
.rk-policy-cta-banner {
    background: #021B3D;
    border-radius: 12px;
    padding: 24px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #FFFFFF;
    margin-top: 40px;
    gap: 20px;
}

.rk-policy-cta-left {
    display: flex;
    align-items: center;
    gap: 18px;
}

.rk-policy-cta-icon {
    font-size: 38px;
    color: #FFFFFF;
    flex-shrink: 0;
}

.rk-policy-cta-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 3px;
}

.rk-policy-cta-sub {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 0;
}

.rk-policy-cta-btn {
    background: linear-gradient(135deg, #FE6502 0%, #EA580C 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 11px 26px;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    transition: transform 0.15s, box-shadow 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.rk-policy-cta-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(254, 101, 2, 0.4);
    color: #FFFFFF;
}

/* ---- 11.4 BANTUAN (FAQ, HERO, MOBILE APP BANNER, CONTACT & GUIDES) ---- */

/* Bantuan Hero Elements (Matching Mockup Bantuan.png) */
.rk-help-hero-cursive-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
}

.rk-help-hero-cursive {
    font-family: 'Caveat', 'Dancing Script', cursive;
    font-size: 2.25rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.25;
    transform: rotate(-3deg);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    text-align: center;
}

.rk-help-hero-underline {
    position: relative;
    display: inline-block;
}

.rk-help-hero-underline::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 3.5px;
    background-color: #FE6502;
    border-radius: 2px;
}

.rk-help-hero-features {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
    padding-left: 20px;
}

.rk-help-feature-item {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 600;
}

.rk-help-feature-icon {
    font-size: 22px;
    color: #FFFFFF;
    opacity: 0.95;
    flex-shrink: 0;
    line-height: 1;
}

.rk-help-feature-text {
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Left Column: Kategori Bantuan List */
.rk-help-cat-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 14px;
}

.rk-help-cat-list {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rk-help-cat-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #334155;
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.rk-help-cat-item:hover {
    background-color: #F1F5F9;
    color: #0057D9;
}

.rk-help-cat-item.active {
    background-color: #EFF6FF;
    color: #0057D9;
    font-weight: 700;
}

.rk-help-cat-item i {
    font-size: 18px;
    width: 22px;
    text-align: center;
    color: #334155;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.rk-help-cat-item.active i {
    color: #0057D9;
}

.rk-help-cat-item:hover i {
    color: #0057D9;
}

/* Left Column: Support Card */
.rk-help-support-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 20px 18px;
    margin-bottom: 20px;
}

.rk-help-support-icon {
    font-size: 28px;
    color: #021B3D;
    margin-bottom: 8px;
    display: inline-block;
    line-height: 1;
}

.rk-help-support-title {
    font-size: 0.90625rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 4px;
}

.rk-help-support-desc {
    font-size: 0.78125rem;
    color: #64748B;
    line-height: 1.45;
    margin-bottom: 14px;
}

.rk-help-support-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border: 1.5px solid #0057D9;
    border-radius: 8px;
    background: #FFFFFF;
    color: #0057D9;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.rk-help-support-btn:hover {
    background-color: #0057D9;
    color: #FFFFFF;
}

/* Middle Column: FAQ List */
.rk-help-faq-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.rk-help-faq-heading {
    font-size: 1.125rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0;
}

.rk-help-faq-all-link {
    font-size: 0.84375rem;
    font-weight: 700;
    color: #0057D9;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rk-help-faq-all-link:hover {
    color: #0047B8;
    text-decoration: underline !important;
}

.rk-help-faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rk-help-faq-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.rk-help-faq-card:hover {
    border-color: #CBD5E1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.rk-help-faq-card-header {
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    gap: 16px;
    user-select: none;
}

.rk-help-faq-card-title {
    font-size: 0.90625rem;
    font-weight: 600;
    color: #0F172A;
    margin: 0;
    line-height: 1.4;
    flex: 1;
}

.rk-help-faq-card-toggle {
    font-size: 15px;
    color: #475569;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.rk-help-faq-card-body {
    padding: 0 20px 18px 20px;
    font-size: 0.84375rem;
    color: #475569;
    line-height: 1.6;
}

.rk-help-faq-card-body p {
    margin-bottom: 0;
}

/* Right Column: Hubungi Kami Box */
.rk-help-contact-box {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 22px 20px;
    margin-bottom: 20px;
}

.rk-help-contact-box-title {
    font-size: 1rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.rk-help-contact-box-title i {
    font-size: 18px;
    color: #0057D9;
}

.rk-help-contact-box-sub {
    font-size: 0.78125rem;
    color: #64748B;
    line-height: 1.45;
    margin-bottom: 18px;
}

.rk-help-contact-item {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
}

.rk-help-contact-item:last-of-type {
    margin-bottom: 0;
}

.rk-help-contact-icon-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #0057D9;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.rk-help-contact-icon-green {
    background-color: #25D366;
}

.rk-help-contact-info {
    flex: 1;
    min-width: 0;
}

.rk-help-contact-name {
    font-size: 0.84375rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 2px;
    line-height: 1.2;
}

.rk-help-contact-detail {
    font-size: 0.78125rem;
    color: #64748B;
    line-height: 1.35;
}

.rk-help-contact-detail a {
    color: #475569;
    text-decoration: none;
    font-weight: 600;
}

.rk-help-contact-detail a:hover {
    color: #0057D9;
}

.rk-help-service-time {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 18px;
}

.rk-help-service-time-icon {
    font-size: 26px;
    color: #0F172A;
    flex-shrink: 0;
}

.rk-help-service-time-info {
    font-size: 0.78125rem;
    color: #64748B;
    line-height: 1.35;
}

.rk-help-service-time-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 2px;
}

/* Right Column: Gunakan Aplikasi Mobile Banner (100% Mockup Match) */
.rk-help-mobile-banner {
    position: relative;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    background-color: #EFF6FF;
    display: flex;
    align-items: center;
    min-height: 200px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.rk-help-mobile-banner-bg {
    position: absolute;
    inset: 0;
    background-image: url('../../master-asset/Bantuan-02.png');
    background-size: auto 102%;
    background-position: -36px center;
    background-repeat: no-repeat;
    pointer-events: none;
    z-index: 1;
}

.rk-help-mobile-banner-content {
    position: relative;
    z-index: 2;
    margin-left: auto;
    width: 52%;
    padding: 16px 12px 16px 0;
    display: flex;
    flex-direction: column;
}

.rk-help-mobile-banner-title {
    font-size: 0.875rem;
    /* ~14px */
    font-weight: 800;
    color: #0F172A;
    line-height: 1.25;
    margin-bottom: 4px;
}

.rk-help-mobile-banner-sub {
    font-size: 0.6875rem;
    /* ~11px */
    color: #475569;
    line-height: 1.35;
    margin-bottom: 12px;
}

.rk-help-mobile-banner-badges {
    display: flex;
    flex-direction: column;
    gap: 7px;
    align-items: flex-start;
}

.rk-help-store-link {
    display: block;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.rk-help-store-link:hover {
    transform: translateY(-1px);
    opacity: 0.92;
}

.rk-help-store-link img {
    height: 32px;
    width: auto;
    max-width: 116px;
    display: block;
    object-fit: contain;
}

/* Guide Cards Section (Matching Mockup 100%) */
.rk-help-guides-sec {
    padding: 40px 0 24px;
}

.rk-help-guides-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.rk-help-guides-title-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rk-help-guides-bar {
    width: 24px;
    height: 4px;
    background-color: #FE6502;
    border-radius: 2px;
}

.rk-help-guides-title {
    font-size: 1.25rem;
    font-weight: 800;
    color: #0F172A;
    margin: 0;
}

.rk-help-guides-link {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0057D9;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rk-help-guides-link:hover {
    color: #0047B8;
    text-decoration: underline !important;
}

.rk-help-guide-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rk-help-guide-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.rk-help-guide-img {
    width: 100%;
    height: 135px;
    object-fit: cover;
    display: block;
}

.rk-help-guide-body {
    padding: 16px 18px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    flex: 1;
}

.rk-help-guide-icon-wrap {
    font-size: 26px;
    color: #0057D9;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.rk-help-guide-content {
    flex: 1;
    min-width: 0;
}

.rk-help-guide-title {
    font-size: 0.90625rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 4px;
    line-height: 1.35;
}

.rk-help-guide-desc {
    font-size: 0.78125rem;
    color: #64748B;
    line-height: 1.45;
    margin-bottom: 10px;
}

.rk-help-guide-link {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0057D9;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: gap 0.15s ease;
}

.rk-help-guide-link:hover {
    color: #0047B8;
    gap: 8px;
}

/* ---- 11.5 TENTANG KAMI (100% MATCH TO MOCKUP - TENTANG.PNG) ---- */
.rk-about-hero-actions {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.rk-about-hero-btn-primary {
    background-color: #FE6502;
    color: #FFFFFF !important;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-size: 0.90625rem;
    /* 14.5px */
    font-weight: 700;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 12px rgba(254, 101, 2, 0.3);
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.rk-about-hero-btn-primary:hover {
    background-color: #E65A00;
    color: #FFFFFF !important;
    transform: translateY(-1px);
}

.rk-about-hero-btn-outline {
    background-color: transparent !important;
    color: #FFFFFF !important;
    border: 1.5px solid rgba(255, 255, 255, 0.85) !important;
    border-radius: 8px;
    padding: 10px 24px;
    font-size: 0.90625rem;
    font-weight: 700;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    transition: all 0.15s ease;
}

.rk-about-hero-btn-outline:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: #FFFFFF !important;
    color: #FFFFFF !important;
}

.rk-about-hero-script {
    font-family: 'Caveat', 'Dancing Script', cursive, sans-serif;
    font-size: 2.2rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.15;
    text-align: right;
    transform: rotate(-3deg);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
    user-select: none;
}

.rk-about-script-underline {
    position: relative;
    display: inline-block;
}

.rk-about-script-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 3.5px;
    background: #FE6502;
    border-radius: 2px;
}

/* Section Header (Dash + Title) */
.rk-about-sec-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 24px;
}

.rk-about-sec-dash {
    width: 20px;
    height: 3.5px;
    background-color: #FE6502;
    border-radius: 2px;
    display: inline-block;
    flex-shrink: 0;
}

.rk-about-sec-title {
    font-size: 1.25rem;
    /* 20px */
    font-weight: 800;
    color: #021B3D;
    margin-bottom: 0;
    line-height: 1.2;
}

/* 2. Unified Stats Bar (Single Card with 4 Columns) */
.rk-about-stats-bar {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: -36px;
    margin-bottom: 48px;
    position: relative;
    z-index: 10;
    overflow: hidden;
}

.rk-about-stat-col {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 20px;
}

.rk-about-stat-col:not(:last-child) {
    border-right: 1px solid #F1F5F9;
}

.rk-about-stat-icon-wrap {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background: #EFF6FF;
    color: #0057D9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}

.rk-about-stat-body {
    min-width: 0;
}

.rk-about-stat-num {
    font-size: 1.5rem;
    /* 24px */
    font-weight: 800;
    color: #021B3D;
    line-height: 1.15;
    margin-bottom: 2px;
}

.rk-about-stat-lbl {
    font-size: 0.875rem;
    /* 14px */
    font-weight: 700;
    color: #021B3D;
    line-height: 1.25;
    margin-bottom: 2px;
}

.rk-about-stat-sub {
    font-size: 0.75rem;
    /* 12px */
    color: #64748B;
    line-height: 1.35;
}

/* 3. Misi & Visi Section (3 Columns) */
.rk-about-mv-sec {
    background: #FFFFFF;
    padding: 44px 0 52px;
}

.rk-about-mv-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.rk-about-mv-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.rk-about-mv-dash {
    width: 20px;
    height: 3px;
    background-color: #FE6502;
    border-radius: 2px;
    display: inline-block;
}

.rk-about-mv-subtitle {
    font-size: 0.875rem;
    /* 14px */
    font-weight: 700;
    color: #021B3D;
    line-height: 1;
}

.rk-about-mv-heading {
    font-size: 1.3125rem;
    /* 21px */
    font-weight: 800;
    color: #021B3D;
    line-height: 1.3;
    margin-bottom: 14px;
}

.rk-about-mv-desc {
    font-size: 0.8125rem;
    /* 13px */
    color: #475569;
    line-height: 1.6;
    margin-bottom: 22px;
}

.rk-about-mv-btn {
    background-color: #FE6502;
    color: #FFFFFF !important;
    border: none;
    border-radius: 8px;
    padding: 10px 22px;
    font-size: 0.84375rem;
    font-weight: 700;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    box-shadow: 0 4px 10px rgba(254, 101, 2, 0.25);
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.rk-about-mv-btn:hover {
    background-color: #E65A00;
    color: #FFFFFF !important;
    transform: translateY(-1px);
}

.rk-about-mv-img-wrap {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.rk-about-mv-img-wrap img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

/* 4. Core Values 5 Grid */
.rk-about-values-sec {
    background: #F8FAFC;
    padding: 44px 0 52px;
}

.rk-about-values-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.rk-about-val-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 28px 16px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rk-about-val-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.rk-about-val-icon {
    font-size: 32px;
    color: #0057D9;
    margin-bottom: 14px;
    line-height: 1;
}

.rk-about-val-title {
    font-size: 1rem;
    /* 16px */
    font-weight: 800;
    color: #021B3D;
    margin-bottom: 6px;
    line-height: 1.2;
}

.rk-about-val-desc {
    font-size: 0.78125rem;
    /* 12.5px */
    color: #64748B;
    line-height: 1.45;
    margin-bottom: 0;
}

/* 5. Timeline / Roadmap (Horizontal with Arrow Connectors) */
.rk-about-timeline-sec {
    background: #FFFFFF;
    padding: 44px 0 52px;
}

.rk-about-timeline-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-top: 24px;
}

.rk-about-step-col {
    display: flex;
    flex-direction: column;
}

.rk-about-step-header {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    margin-bottom: 14px;
}

.rk-about-step-circle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #EFF6FF;
    border: 1.5px solid #0057D9;
    color: #0057D9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.rk-about-step-year {
    font-size: 1.0625rem;
    /* 17px */
    font-weight: 800;
    color: #0057D9;
    flex-shrink: 0;
}

.rk-about-step-connector {
    flex: 1;
    height: 1.5px;
    background-color: #93C5FD;
    position: relative;
    margin-left: 6px;
    min-width: 20px;
}

.rk-about-step-connector .rk-about-step-arrow {
    position: absolute;
    right: -1px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 3.5px solid transparent;
    border-bottom: 3.5px solid transparent;
    border-left: 6px solid #93C5FD;
}

.rk-about-step-content {
    padding-right: 12px;
}

.rk-about-step-title {
    font-size: 0.9375rem;
    /* 15px */
    font-weight: 800;
    color: #021B3D;
    line-height: 1.3;
    margin-bottom: 6px;
}

.rk-about-step-desc {
    font-size: 0.78125rem;
    /* 12.5px */
    color: #64748B;
    line-height: 1.45;
    margin-bottom: 0;
}

/* 6. Supported By (Partner Box Grid) */
.rk-about-supported-sec {
    background: #F8FAFC;
    padding: 44px 0 52px;
}

.rk-about-partners-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

.rk-about-partner-box {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 12px 14px;
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.rk-about-partner-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

.rk-about-partner-box-text {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 14px 16px;
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.84375rem;
    font-weight: 600;
    color: #64748B;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
}

/* 7. Bottom Promotional Banner (with master-asset/Tentang-03.png) */
.rk-about-cta-banner {
    position: relative;
    background-color: #021B3D;
    background-image: url('../../master-asset/Tentang-03.png');
    background-size: cover;
    background-position: center right;
    border-radius: 12px;
    overflow: hidden;
    padding: 28px 36px;
    margin-top: 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-shadow: 0 8px 24px rgba(2, 27, 61, 0.15);
}

.rk-about-cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(2, 27, 61, 0.98) 0%, rgba(2, 27, 61, 0.88) 48%, rgba(2, 27, 61, 0.35) 75%, rgba(2, 27, 61, 0.65) 100%);
    z-index: 1;
    pointer-events: none;
}

.rk-about-cta-content {
    position: relative;
    z-index: 2;
}

.rk-about-cta-title {
    color: #FFFFFF;
    font-size: 1.375rem;
    /* 22px */
    font-weight: 800;
    line-height: 1.25;
    margin-bottom: 6px;
}

.rk-about-cta-desc {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.875rem;
    /* 14px */
    margin-bottom: 0;
}

.rk-about-cta-btn {
    position: relative;
    z-index: 2;
    background-color: #FE6502;
    color: #FFFFFF !important;
    border: none;
    border-radius: 8px;
    padding: 12px 28px;
    font-size: 0.9375rem;
    font-weight: 700;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    box-shadow: 0 4px 12px rgba(254, 101, 2, 0.3);
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.rk-about-cta-btn:hover {
    background-color: #E65A00;
    color: #FFFFFF !important;
    transform: translateY(-1px);
}

/* ---- 11.6 SITEMAP STYLES (100% MATCH TO MOCKUP - SITEMAP.PNG) ---- */
.rk-sitemap-sec {
    background: #F8FAFC;
    padding: 40px 0 60px;
}

.rk-sitemap-tree-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-bottom: 20px;
}

/* Root Box (Beranda) */
.rk-sitemap-root-node {
    background: #021B3D;
    color: #FFFFFF;
    border-radius: 12px;
    padding: 14px 36px;
    text-align: center;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 8px 24px rgba(2, 27, 61, 0.15);
    text-decoration: none !important;
    position: relative;
    z-index: 5;
    transition: transform 0.2s ease;
}

.rk-sitemap-root-node:hover {
    transform: translateY(-2px);
    color: #FFFFFF;
}

.rk-sitemap-root-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #0F2E59;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #FFFFFF;
    flex-shrink: 0;
}

.rk-sitemap-root-title {
    font-size: 1.0625rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 2px;
    line-height: 1.2;
}

.rk-sitemap-root-sub {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.2;
}

.rk-sitemap-root-path {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

/* Tree Connector Lines */
.rk-sitemap-branch-line {
    width: 100%;
    height: 38px;
    display: block;
}

.rk-sitemap-mid-branch {
    width: 100%;
    height: 52px;
    display: block;
    margin: 8px 0;
}

.rk-sitemap-grid-5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    width: 100%;
    position: relative;
    z-index: 2;
}

.rk-sitemap-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    width: 80%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Card Styling */
.rk-sitemap-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 18px 14px 14px;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rk-sitemap-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}

.rk-sitemap-card-head {
    text-align: center;
    padding-bottom: 12px;
    margin-bottom: 6px;
}

.rk-sitemap-icon-badge {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    margin: 0 auto 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #FFFFFF;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* Badge colors matching mockup */
.rk-sitemap-badge-kompetisi {
    background-color: #0057D9;
}

.rk-sitemap-badge-olahraga {
    background-color: #EA580C;
}

.rk-sitemap-badge-organizer {
    background-color: #10B981;
}

.rk-sitemap-badge-venue {
    background-color: #EF4444;
}

.rk-sitemap-badge-market {
    background-color: #8B5CF6;
}

.rk-sitemap-badge-sponsor {
    background-color: #F59E0B;
}

.rk-sitemap-badge-ruangtech {
    background-color: #0284C7;
}

.rk-sitemap-badge-tentang {
    background-color: #EC4899;
}

.rk-sitemap-badge-bantuan {
    background-color: #0D9488;
}

.rk-sitemap-card-title {
    font-size: 0.9375rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 1px;
}

.rk-sitemap-card-path {
    font-size: 0.71875rem;
    color: #64748B;
}

.rk-sitemap-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.rk-sitemap-links li {
    border-top: 1px solid #F1F5F9;
}

.rk-sitemap-links a {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: #334155;
    text-decoration: none !important;
    padding: 8px 6px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.rk-sitemap-links a:hover {
    background: #F8FAFC;
    color: #0057D9;
}

.rk-sitemap-links a i.rk-link-chevron {
    font-size: 13px;
    color: #94A3B8;
    line-height: 1;
}

.rk-sitemap-links a.active-sitemap-pill {
    background-color: #EFF6FF !important;
    color: #0057D9 !important;
    font-weight: 700;
}

.rk-sitemap-links a.active-sitemap-pill i.rk-link-chevron {
    color: #0057D9;
}

/* Bottom Two Boxes: Halaman Populer & Halaman Legal */
.rk-sitemap-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 40px;
    margin-bottom: 24px;
}

.rk-sitemap-box {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 24px 28px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.rk-sitemap-box-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.rk-sitemap-box-icon {
    font-size: 26px;
    color: #0057D9;
    flex-shrink: 0;
}

.rk-sitemap-box-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 0;
}

.rk-sitemap-box-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rk-sitemap-box-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.84375rem;
    color: #334155;
    text-decoration: none !important;
    padding: 6px 8px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.rk-sitemap-box-list a:hover {
    color: #0057D9;
    background-color: #F8FAFC;
}

.rk-sitemap-box-list a i {
    font-size: 13px;
    color: #0057D9;
}

/* Butuh Bantuan Strip (Matching Mockup) */
.rk-sitemap-help-strip {
    background: #F0F7FF;
    border: 1.5px solid #BFDBFE;
    border-radius: 12px;
    padding: 20px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 24px;
}

.rk-sitemap-help-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.rk-sitemap-help-icon {
    font-size: 44px;
    color: #0F2747;
    flex-shrink: 0;
}

.rk-sitemap-help-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 2px;
}

.rk-sitemap-help-desc {
    font-size: 0.84375rem;
    color: #334155;
    margin-bottom: 0;
}

.rk-sitemap-help-btn {
    background: #FFFFFF;
    border: 1.5px solid #0057D9;
    border-radius: 8px;
    padding: 10px 24px;
    color: #0057D9;
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none !important;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s ease;
}

.rk-sitemap-help-btn:hover {
    background: #0057D9;
    color: #FFFFFF;
}

/* Bottom Banner with Background Image (Mockup: Sitemap-02.webp) */
.rk-sitemap-banner {
    position: relative;
    background-color: #021B3D;
    background-image: url('../img/ruangkompetisi/Sitemap-02.webp');
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    overflow: hidden;
    min-height: 110px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 36px;
    margin-top: 24px;
}

.rk-sitemap-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(2, 27, 61, 0.94) 0%, rgba(2, 27, 61, 0.75) 45%, rgba(2, 27, 61, 0.15) 100%);
    z-index: 1;
    pointer-events: none;
}

.rk-sitemap-banner-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.rk-sitemap-banner-text {
    font-family: 'Caveat', 'Dancing Script', cursive;
    font-size: 2rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.2;
    transform: rotate(-3deg);
}

.rk-sitemap-banner-btn {
    background-color: #FE6502;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    padding: 10px 24px;
    font-weight: 700;
    font-size: 0.875rem;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: background-color 0.15s ease;
    white-space: nowrap;
}

.rk-sitemap-banner-btn:hover {
    background-color: #E65A00;
    color: #FFFFFF;
}

/* Responsive Media Queries for Section 11 */
@media (max-width: 991px) {
    .rk-about-stats-bar {
        grid-template-columns: repeat(2, 1fr);
        margin-top: 16px;
    }

    .rk-about-stat-col:nth-child(2) {
        border-right: none;
    }

    .rk-about-values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .rk-about-timeline-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .rk-about-step-connector {
        display: none;
    }

    .rk-about-partners-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .rk-about-cta-banner {
        flex-direction: column;
        text-align: center;
        padding: 28px 20px;
    }

    .rk-about-hero-script {
        text-align: center;
        margin-top: 24px;
    }

    .rk-sitemap-grid-5,
    .rk-sitemap-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .rk-sitemap-bottom-grid {
        grid-template-columns: 1fr;
    }

    .rk-policy-cta-banner {
        flex-direction: column;
        text-align: center;
    }

    .rk-policy-cta-left {
        flex-direction: column;
    }
}

@media (max-width: 576px) {
    .rk-about-stats-bar {
        grid-template-columns: 1fr;
    }

    .rk-about-stat-col {
        border-right: none !important;
        border-bottom: 1px solid #F1F5F9;
    }

    .rk-about-values-grid,
    .rk-about-partners-grid,
    .rk-sitemap-grid-5,
    .rk-sitemap-grid-4 {
        grid-template-columns: 1fr;
    }

    .rk-info-hero-title {
        font-size: 2rem;
    }
}

/* ==========================================================================
   SECTION 12: KOMPETISI & KOMPETISI DETAIL (100% PRECISION TO MOCKUP)
   ========================================================================== */

/* 12.1 Hero Banner (Kompetisi Listing) */
.rk-comp-hero {
    background-color: #021B3D;
    background-image: url('../../master-asset/Kompetisi-01.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    position: relative;
    padding: 48px 0 78px;
    overflow: hidden;
    color: #FFFFFF;
}

.rk-comp-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(2, 27, 61, 0.98) 0%, rgba(2, 27, 61, 0.92) 36%, rgba(2, 27, 61, 0.45) 68%, rgba(2, 27, 61, 0.12) 100%);
    pointer-events: none;
    z-index: 1;
}

.rk-comp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    margin-bottom: 22px;
}

.rk-comp-breadcrumb a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s ease;
}

.rk-comp-breadcrumb a:hover {
    color: #FFFFFF;
}

.rk-comp-breadcrumb-sep {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    display: inline-flex;
    align-items: center;
}

.rk-comp-breadcrumb-active {
    color: #FFFFFF;
    font-weight: 600;
}

.rk-comp-hero-title {
    font-size: 2.85rem;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.15;
    margin-bottom: 12px;
    letter-spacing: -0.02em;
}

.rk-comp-hero-tagline {
    font-size: 1.25rem;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 8px;
    line-height: 1.35;
}

.rk-comp-hero-desc {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 0;
    line-height: 1.5;
    max-width: 540px;
}

/* Brush Typography Badge */
.rk-comp-hero-script {
    color: #FFFFFF;
    font-family: 'Caveat', cursive, sans-serif;
    font-weight: 700;
    font-size: 2.15rem;
    line-height: 1.15;
    text-align: right;
    display: inline-block;
    position: relative;
    transform: rotate(-3deg);
    letter-spacing: 0.5px;
    text-shadow: 0 2px 10px rgba(2, 27, 61, 0.45);
    margin-right: 15px;
}

.rk-comp-hero-script-line {
    display: block;
}

.rk-comp-hero-script-underline {
    position: absolute;
    bottom: -6px;
    left: 10%;
    right: 5%;
    height: 4px;
    background: #FE6502;
    border-radius: 2px;
}

.rk-comp-hero-script-curve {
    width: 125px;
    height: 14px;
    position: absolute;
    bottom: -10px;
    right: 0;
    display: block;
}

/* 12.2 Floating Search Bar */
.rk-comp-search-wrap {
    margin-top: -34px;
    position: relative;
    z-index: 20;
    margin-bottom: 40px;
}

.rk-comp-search-box {
    background: #FFFFFF;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(2, 27, 61, 0.10), 0 2px 8px rgba(2, 27, 61, 0.06);
    border: 1px solid #E2E8F0;
    padding: 12px 14px;
}

.rk-comp-input-group {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.rk-comp-input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    font-size: 15px;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    z-index: 2;
}

.rk-comp-input-control {
    width: 100%;
    height: 48px;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    background: #FFFFFF;
    padding-left: 42px;
    padding-right: 28px;
    font-size: 0.875rem;
    color: #0B1222;
    font-weight: 500;
    transition: all 0.15s ease;
}

.rk-comp-input-control:focus {
    background: #FFFFFF;
    border-color: #0057D9;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 87, 217, 0.12);
}

.rk-comp-input-control::placeholder {
    color: #94A3B8;
    font-weight: 400;
}

select.rk-comp-input-control {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2364748b' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 10px;
    cursor: pointer;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rk-comp-btn-search {
    background: #FE6502;
    border: none;
    color: #FFFFFF;
    font-size: 0.9375rem;
    font-weight: 700;
    height: 48px;
    padding: 0 20px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    box-shadow: 0 2px 6px rgba(254, 101, 2, 0.25);
}

.rk-comp-btn-search:hover {
    background: #E05600;
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(254, 101, 2, 0.35);
}

/* 12.3 Sidebar Filter */
.rk-comp-filter-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.rk-comp-filter-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid #F1F5F9;
}

.rk-comp-filter-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #0B1222;
    margin: 0;
}

.rk-comp-filter-group {
    margin-bottom: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid #F1F5F9;
}

.rk-comp-filter-group:last-of-type {
    border-bottom: none;
    margin-bottom: 14px;
    padding-bottom: 0;
}

.rk-comp-filter-label {
    font-size: 0.84375rem;
    font-weight: 700;
    color: #0B1222;
    margin-bottom: 10px;
    display: block;
}

.rk-input-icon-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.rk-input-icon-wrap .rk-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    font-size: 14px;
    pointer-events: none;
    z-index: 2;
}

.rk-input-icon-wrap .rk-input-icon-control {
    width: 100%;
    height: 38px;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
    padding: 6px 12px 6px 36px !important;
    font-size: 0.8125rem;
    color: #0B1222;
    background: #FFFFFF;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rk-input-icon-wrap .rk-input-icon-control:focus {
    border-color: #0057D9;
    box-shadow: 0 0 0 3px rgba(0, 87, 217, 0.1);
}

.rk-comp-checkbox-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 0.8125rem;
    color: #334155;
    user-select: none;
}

.rk-comp-checkbox-item:last-child {
    margin-bottom: 0;
}

.rk-comp-checkbox-item input[type="checkbox"],
.rk-comp-checkbox-item input[type="radio"] {
    width: 16px;
    height: 16px;
    accent-color: #0057D9;
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.rk-comp-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.rk-comp-status-dot.green {
    background: #10B981;
}

.rk-comp-status-dot.blue {
    background: #0057D9;
}

.rk-comp-status-dot.orange {
    background: #FE6502;
}

.rk-comp-status-dot.gray {
    background: #94A3B8;
}

.rk-comp-btn-apply {
    background: #0057D9;
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    padding: 11px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.15s ease;
}

.rk-comp-btn-apply:hover {
    background: #0045B0;
    color: #FFFFFF;
}

.rk-comp-btn-reset {
    background: transparent;
    color: #64748B;
    font-size: 0.8125rem;
    font-weight: 500;
    border: none;
    padding: 8px;
    width: 100%;
    text-align: center;
    text-decoration: none !important;
    display: block;
    margin-top: 6px;
}

.rk-comp-btn-reset:hover {
    color: #DC2626;
}

/* 12.4 Competition Grid Card */
.rk-comp-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rk-comp-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(2, 27, 61, 0.08);
}

.rk-comp-card-thumb-wrap {
    position: relative;
    width: 100%;
    height: 180px;
    background: #021B3D;
    overflow: hidden;
}

.rk-comp-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.85;
    transition: transform 0.3s ease;
}

.rk-comp-card:hover .rk-comp-card-img {
    transform: scale(1.03);
}

.rk-comp-card-badges-wrap {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 56px);
    pointer-events: none;
}

.rk-comp-card-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 9999px;
    color: #FFFFFF;
    line-height: 1.3;
}

.rk-comp-pill-badge,
.rk-comp-card-badges-wrap .rk-comp-card-badge,
.rk-comp-card-badges-wrap .rk-comp-pill-badge {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 9999px;
    color: #FFFFFF;
    line-height: 1.3;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    pointer-events: auto;
}

.rk-comp-card-badge.green,
.rk-comp-pill-badge.green {
    background: #10B981;
    color: #FFFFFF;
}

.rk-comp-card-badge.blue,
.rk-comp-pill-badge.blue {
    background: #0057D9;
    color: #FFFFFF;
}

.rk-comp-card-badge.orange,
.rk-comp-pill-badge.orange {
    background: #FE6502;
    color: #FFFFFF;
}

.rk-comp-card-badge.gray,
.rk-comp-pill-badge.gray {
    background: #64748B;
    color: #FFFFFF;
}

.rk-comp-card-wishlist {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(4px);
    border: none;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.rk-comp-card-wishlist:hover {
    background: #FFFFFF;
    color: #DC2626;
}

.rk-comp-card-overlay-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 14px;
    background: linear-gradient(180deg, transparent 0%, rgba(2, 27, 61, 0.92) 100%);
    z-index: 2;
}

.rk-comp-card-overlay-text {
    color: #FFFFFF;
    font-size: 1rem;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.25;
    letter-spacing: 0.02em;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.rk-comp-card-body {
    padding: 10px 10px 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.rk-comp-card-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0B1222;
    margin-bottom: 12px;
    line-height: 1.35;
}

.rk-comp-card-title a {
    color: #0B1222;
    text-decoration: none !important;
}

.rk-comp-card-title a:hover {
    color: #0057D9;
}

.rk-comp-meta-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px 16px;
    margin-bottom: 16px;
}

.rk-comp-meta-item {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 0.8125rem;
    color: #64748B;
    overflow: hidden;
    white-space: nowrap;
    min-width: 0;
}

.rk-comp-meta-item i,
.rk-comp-meta-item svg {
    color: #64748B;
    font-size: 14px;
    flex-shrink: 0;
    width: 14px;
    text-align: center;
}

.rk-comp-meta-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.rk-comp-tags-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.rk-comp-tag-pill {
    background: #EFF6FF;
    color: #0057D9;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
    border: 1px solid rgba(0, 87, 217, 0.15);
    line-height: 1.3;
}

.rk-comp-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 14px;
    padding-bottom: 4px;
    margin-top: auto;
    border-top: 1px solid #F1F5F9;
}

.rk-comp-card-price {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0B1222;
}

.rk-comp-card-price-sub {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748B;
}

.rk-comp-btn-detail {
    background: #FE6502;
    color: #FFFFFF;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 7px 16px;
    border-radius: 8px;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.rk-comp-btn-detail:hover {
    background: #E05600;
    color: #FFFFFF;
    transform: translateY(-1px);
}

/* Venue Directory Card Layout (Sesuai Mockup) */
.rk-comp-card-loc {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: #475569;
    margin-bottom: 8px;
}

.rk-comp-loc-icon {
    font-size: 0.875rem;
    color: #0F172A;
    flex-shrink: 0;
}

.rk-comp-card-specs {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 0.8125rem;
    color: #334155;
    margin-bottom: 12px;
}

.rk-comp-spec-item {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8125rem;
    font-weight: 500;
}

.rk-comp-spec-icon {
    font-size: 0.875rem;
    color: #0F172A;
    flex-shrink: 0;
}

.rk-venue-sports-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin-bottom: 16px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.rk-venue-sport-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: #EFF6FF;
    color: #1266E3;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.35;
    border-radius: 6px;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    border: 1px solid rgba(18, 102, 227, 0.12);
    box-sizing: border-box;
}

.rk-comp-card-action {
    margin-top: auto;
    padding-top: 6px;
    width: 100%;
}

.rk-comp-btn-outline-full {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 9px 16px;
    border: 1.5px solid #1266E3;
    border-radius: 8px;
    background: #FFFFFF;
    color: #1266E3 !important;
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.rk-comp-btn-outline-full:hover {
    background: #1266E3;
    color: #FFFFFF !important;
    box-shadow: 0 4px 12px rgba(18, 102, 227, 0.25);
}

.rk-view-list .rk-venue-sports-row {
    margin-bottom: 14px;
}

.rk-view-list .rk-comp-card-action {
    width: auto;
    min-width: 180px;
    align-self: flex-start;
}

.rk-comp-card-col {
    display: flex;
    flex-direction: column;
}

.rk-comp-card-col>.rk-comp-card,
.rk-comp-card-col>.rk-org-card {
    flex: 1 1 auto;
    width: 100%;
}

/* Organizer Card (Grid Mode) */
.rk-org-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 24px;
}

.rk-org-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(2, 27, 61, 0.08);
}

.rk-org-card-banner {
    width: 100%;
    height: 120px;
    overflow: hidden;
    position: relative;
    background: #021B3D;
}

.rk-org-card-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.rk-org-card:hover .rk-org-card-banner img {
    transform: scale(1.03);
}

.rk-org-card-avatar {
    position: absolute;
    top: 92px;
    left: 16px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 3px solid #FFFFFF;
    background: #FFFFFF;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    z-index: 2;
    transition: transform 0.2s ease;
}

.rk-org-card-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rk-org-card-body {
    padding: 38px 20px 24px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.rk-org-card-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0B1222;
    margin-bottom: 6px;
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rk-org-card-title a {
    color: #0B1222;
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.rk-org-card-title a:hover {
    color: #0057D9;
}

.rk-org-badge-type {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 6px;
    background: #EFF6FF;
    color: #0057D9;
    border: 1px solid rgba(0, 87, 217, 0.15);
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 12px;
}

.rk-org-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    margin-top: auto;
    border-top: 1px solid #F1F5F9;
}

.rk-org-btn-profile {
    border: 1.5px solid #0057D9;
    color: #0057D9;
    background: #FFFFFF;
    border-radius: 8px;
    padding: 7px 16px;
    font-size: 0.8125rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.rk-org-btn-profile:hover {
    background: #0057D9;
    color: #FFFFFF;
    transform: translateY(-1px);
}

/* 12.4.1 List View Mode */
.rk-view-list .rk-comp-card-col {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-bottom: 24px !important;
    display: block !important;
}

.rk-view-list .rk-comp-card {
    flex-direction: row;
    align-items: stretch;
    min-height: 180px;
    height: 100%;
}

.rk-view-list .rk-comp-card-thumb-wrap {
    width: 260px;
    min-width: 260px;
    height: auto;
    min-height: 180px;
    flex-shrink: 0;
}

.rk-view-list .rk-comp-card-body {
    flex-grow: 1;
    padding: 22px 28px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}

.rk-view-list .rk-comp-meta-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    align-items: center;
    margin-bottom: 12px;
}

.rk-view-list .rk-comp-meta-item {
    flex-shrink: 0;
}

/* List view support for Organizer Cards */
.rk-view-list .rk-org-card {
    flex-direction: row !important;
    align-items: stretch !important;
    min-height: 170px !important;
}

.rk-view-list .rk-org-card-banner {
    width: 220px !important;
    min-width: 220px !important;
    height: auto !important;
    min-height: 170px !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

.rk-view-list .rk-org-card-avatar {
    top: 50% !important;
    left: auto !important;
    right: -24px !important;
    transform: translateY(-50%) !important;
    z-index: 3 !important;
}

.rk-view-list .rk-org-card-body {
    padding: 22px 28px 24px 36px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    min-width: 0 !important;
    flex-grow: 1 !important;
}

.rk-view-list .rk-org-card-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding-top: 14px !important;
    padding-bottom: 4px !important;
    margin-top: auto !important;
    border-top: 1px solid #F1F5F9 !important;
}

.rk-view-list .rk-org-btn-profile {
    width: auto !important;
    padding: 7px 20px !important;
}

@media (max-width: 767.98px) {

    .rk-view-list .rk-comp-card,
    .rk-view-list .rk-org-card {
        flex-direction: column !important;
    }

    .rk-view-list .rk-comp-card-thumb-wrap,
    .rk-view-list .rk-org-card-banner {
        width: 100% !important;
        min-width: 100% !important;
        height: 170px !important;
    }

    .rk-view-list .rk-org-card-avatar {
        top: 130px !important;
        left: 16px !important;
        right: auto !important;
        transform: none !important;
    }

    .rk-view-list .rk-org-card-body {
        padding: 36px 18px 18px !important;
    }

    .rk-view-list .rk-org-btn-profile {
        width: 100% !important;
    }
}

/* 12.5 Bottom CTA Banner */
.rk-comp-bottom-cta {
    background: #021B3D;
    border-radius: 14px;
    padding: 24px 32px;
    margin-top: 40px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    color: #FFFFFF;
}

.rk-comp-cta-left {
    display: flex;
    align-items: center;
    gap: 18px;
}

.rk-comp-cta-icon-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 22px;
    flex-shrink: 0;
}

.rk-comp-cta-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: #FFFFFF;
}

.rk-comp-cta-desc {
    font-size: 0.84375rem;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}

.rk-comp-btn-create-event {
    background: #FE6502;
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 12px 24px;
    border-radius: 10px;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    transition: all 0.15s ease;
}

.rk-comp-btn-create-event:hover {
    background: #E05600;
    color: #FFFFFF;
    transform: translateY(-1px);
}

/* 12.6 Organizer Specific Enhancements */
.rk-org-hero-script {
    color: #FFFFFF;
    font-family: 'Caveat', cursive, sans-serif;
    font-weight: 700;
    font-size: 2.15rem;
    line-height: 1.15;
    text-align: right;
    display: inline-block;
    position: absolute;
    right: 25px;
    top: 5px;
    transform: rotate(-3deg);
    letter-spacing: 0.5px;
    text-shadow: 0 2px 10px rgba(2, 27, 61, 0.45);
}

.rk-org-hero-script span {
    display: block;
}

/* Organizer & Venue Stats Card */
.rk-stats-card {
    background: #FFFFFF;
    border-radius: 14px;
    border: 1px solid #E2E8F0;
    padding: 20px 24px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.rk-stats-card .rk-stat-item {
    display: flex;
    align-items: center;
    text-align: left;
}

.rk-stats-card .rk-stat-icon {
    font-size: 32px;
    color: #0057D9;
    width: 38px;
    min-width: 38px;
    height: auto;
    background: transparent;
    border-radius: 0;
    text-align: center;
    flex-shrink: 0;
    margin-right: 16px;
}

.rk-stats-card .rk-stat-content {
    min-width: 0;
    text-align: left;
}

.rk-stats-card .rk-stat-number {
    font-size: 1.35rem;
    font-weight: 800;
    color: #0B1222;
    line-height: 1.15;
    margin-bottom: 2px;
}

.rk-stats-card .rk-stat-label {
    font-size: 0.8125rem;
    color: #64748B;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.2;
}

/* Organizer CTA Banner: "Jadi Bagian dari RuangKompetisi" (100% Precision to Mockup) */
.rk-organizer-cta-banner {
    background-color: #021B3D;
    background-image:
        linear-gradient(90deg, rgba(2, 27, 61, 0) 0%, rgba(2, 27, 61, 0) 38%, rgba(2, 27, 61, 0.5) 46%, #021B3D 54%, #021B3D 100%),
        url('../../master-asset/Organizer-02.png');
    background-repeat: no-repeat;
    background-size: cover, auto 250px;
    background-position: center, left 68%;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    padding: 24px 36px 24px 28px;
    color: #FFFFFF;
    box-shadow: 0 4px 20px rgba(2, 27, 61, 0.12);
    min-height: 155px;
}

.rk-organizer-cta-script {
    color: #FFFFFF;
    font-family: 'Caveat', cursive, sans-serif;
    font-weight: 500;
    font-size: 1.95rem;
    line-height: 1.05;
    text-align: left;
    display: inline-block;
    transform: rotate(-10deg);
    letter-spacing: 0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
}

.rk-organizer-cta-script span {
    display: block;
}

.rk-organizer-cta-script span:nth-child(2),
.rk-organizer-cta-script span:nth-child(4) {
    padding-left: 12px;
}

/* 12.7 Venue Specific Enhancements (100% Matches Mockup) */
.rk-venue-hero-script {
    color: #FFFFFF;
    font-family: 'Caveat', cursive, sans-serif;
    font-weight: 700;
    font-size: 1.85rem;
    line-height: 1.05;
    text-align: right;
    display: inline-block;
    position: absolute;
    right: 25px;
    top: 5px;
    transform: rotate(-4deg);
    letter-spacing: 0.5px;
    text-shadow: 0 2px 10px rgba(2, 27, 61, 0.45);
}

.rk-venue-hero-script span {
    display: block;
}

/* Venue CTA Banner: "Daftarkan Venue Anda" */
.rk-venue-cta-banner {
    background-color: #021B3D;
    background-image:
        linear-gradient(90deg, rgba(2, 27, 61, 0) 0%, rgba(2, 27, 61, 0) 34%, rgba(2, 27, 61, 0.4) 42%, rgba(2, 27, 61, 0.82) 49%, #021B3D 55%, #021B3D 100%),
        url('../../master-asset/Venue-02.png');
    background-repeat: no-repeat;
    background-size: cover, auto 380px;
    background-position: center, left -100px center;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    padding: 24px 36px 24px 28px;
    color: #FFFFFF;
    box-shadow: 0 4px 20px rgba(2, 27, 61, 0.12);
    min-height: 155px;
}

.rk-venue-cta-script {
    color: #FFFFFF;
    font-family: 'Caveat', cursive, sans-serif;
    font-weight: 600;
    font-size: 2rem;
    line-height: 1.05;
    text-align: left;
    display: inline-block;
    transform: rotate(-8deg);
    letter-spacing: 0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
}

.rk-venue-cta-script span {
    display: block;
}

.rk-detail-hero {
    background-color: #021B3D;
    background-image: url('../../master-asset/Kompetisi-01.png');
    background-repeat: no-repeat;
    background-position: right center;
    background-size: cover;
    position: relative;
    padding: 38px 0 48px;
    color: #FFFFFF;
    overflow: hidden;
}

.rk-detail-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(2, 27, 61, 0.98) 0%, rgba(2, 27, 61, 0.92) 42%, rgba(2, 27, 61, 0.45) 75%, rgba(2, 27, 61, 0.15) 100%);
    pointer-events: none;
    z-index: 1;
}

.rk-detail-category-badge {
    background: #FE6502;
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 6px;
    display: inline-block;
    margin-bottom: 12px;
}

.rk-detail-hero-title {
    font-size: 2.75rem;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1.1;
    text-transform: uppercase;
    margin-bottom: 10px;
    letter-spacing: -0.01em;
}

.rk-detail-hero-tagline {
    font-size: 0.9375rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 16px;
}

.rk-detail-meta-row {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.rk-detail-meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.rk-detail-meta-item i,
.rk-detail-meta-item svg {
    color: #FE6502;
    font-size: 16px;
}

.rk-detail-div-pill {
    background: #0057D9;
    color: #FFFFFF;
    font-size: 0.8125rem;
    font-weight: 600;
    padding: 5px 16px;
    border-radius: 100px;
    display: inline-block;
}

/* Detail Sticky Tabs */
.rk-detail-tabs-bar {
    background: #FFFFFF;
    border-bottom: 1px solid #E2E8F0;
    position: sticky;
    top: 64px;
    z-index: 40;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.rk-detail-tabs-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.rk-detail-tabs-nav::-webkit-scrollbar {
    display: none;
}

.rk-detail-tab-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 15px 14px;
    font-size: 0.84375rem;
    font-weight: 600;
    color: #64748B;
    text-decoration: none !important;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: all 0.15s ease;
}

.rk-detail-tab-link:hover,
.rk-detail-tab-link.active {
    color: #0057D9;
    border-bottom-color: #0057D9;
}

/* Detail Cards & Elements */
.rk-detail-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.rk-detail-section-title {
    font-size: 1.0625rem;
    font-weight: 700;
    color: #0B1222;
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.rk-detail-section-title i,
.rk-detail-section-title svg {
    color: #0057D9;
    font-size: 20px;
}

/* 4 Highlight Badges in Tentang Event */
.rk-detail-highlight-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #EFF6FF;
    color: #0057D9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin: 0 auto 8px;
}

.rk-detail-highlight-circle.green {
    background: #ECFDF5;
    color: #10B981;
}

.rk-detail-highlight-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: #0B1222;
    line-height: 1.35;
    text-align: center;
}

/* Quote Box */
.rk-detail-quote-box {
    background: #F0F7FF;
    border-radius: 14px;
    padding: 22px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rk-detail-quote-icon {
    font-size: 2.5rem;
    color: #0057D9;
    line-height: 1;
    margin-bottom: -4px;
    font-family: Georgia, serif;
}

.rk-detail-quote-text {
    font-size: 0.9375rem;
    font-style: italic;
    color: #0B1222;
    font-weight: 600;
    line-height: 1.55;
    margin: 0 0 12px;
}

.rk-detail-quote-line {
    width: 36px;
    height: 3px;
    background: #FE6502;
    border-radius: 2px;
    margin-bottom: 8px;
}

.rk-detail-quote-hashtag {
    font-size: 0.75rem;
    color: #0057D9;
    font-weight: 600;
}

/* Kategori Peserta Cards (100% Match Mockup) */
.rk-cat-box {
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.rk-cat-box:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
}

.rk-cat-box-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}

.rk-cat-box-icon {
    font-size: 26px;
    flex-shrink: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rk-cat-box-title {
    font-size: 1.1875rem;
    font-weight: 800;
    line-height: 1.1;
    margin: 0;
}

.rk-cat-box-sub {
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 2px;
    line-height: 1.2;
}

.rk-cat-box-info-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.rk-cat-box-info-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: #1E293B;
    line-height: 1.3;
}

.rk-cat-box-info-item i,
.rk-cat-box-info-item svg {
    color: #0F172A;
    font-size: 13px;
    width: 14px;
    flex-shrink: 0;
    text-align: center;
}

.rk-cat-btn-select-outline {
    background: #FFFFFF !important;
    border: 1px solid #0057D9 !important;
    color: #0057D9 !important;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: 8px;
    padding: 6px 0;
    text-align: center;
    text-decoration: none !important;
    display: block;
    width: 100%;
    margin-top: auto;
    transition: all 0.15s ease;
}

.rk-cat-btn-select-outline:hover {
    background: #0057D9 !important;
    color: #FFFFFF !important;
}

/* Division Pill in Hero Detail */
.rk-detail-div-pill {
    background: #0057D9;
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 5px 14px;
    border-radius: 9999px;
    display: inline-block;
    border: 1px solid rgba(255, 255, 255, 0.25);
    margin-right: 6px;
    margin-bottom: 4px;
    line-height: 1.2;
}

.rk-btn-guidebook {
    background: #FFFFFF !important;
    border: 1px solid #0057D9 !important;
    color: #0057D9 !important;
    border-radius: 8px;
    font-size: 0.75rem !important;
    font-weight: 600;
    padding: 8px 6px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none !important;
    transition: all 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
}

.rk-btn-guidebook:hover {
    background: #EFF6FF !important;
}

.rk-btn-share-event {
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    color: #0B1222 !important;
    border-radius: 8px;
    font-size: 0.75rem !important;
    font-weight: 600;
    padding: 8px 6px !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none !important;
    transition: all 0.15s ease;
    white-space: nowrap;
    overflow: hidden;
}

.rk-btn-share-event:hover {
    background: #F8FAFC !important;
    border-color: #94A3B8 !important;
}

/* Timeline Jadwal */
.rk-timeline-item {
    display: flex;
    gap: 16px;
    position: relative;
    padding-bottom: 18px;
}

.rk-timeline-item:last-child {
    padding-bottom: 0;
}

.rk-timeline-point {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0057D9;
    margin-top: 6px;
    flex-shrink: 0;
}

.rk-timeline-line {
    position: absolute;
    left: 4px;
    top: 18px;
    bottom: 0;
    width: 2px;
    background: #E2E8F0;
}

.rk-timeline-date {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0057D9;
}

.rk-timeline-time {
    font-size: 0.8125rem;
    color: #64748B;
}

.rk-timeline-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0B1222;
}

.rk-timeline-venue {
    font-size: 0.8125rem;
    color: #64748B;
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Lokasi Event */
.rk-venue-facility-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.8125rem;
    color: #334155;
    font-weight: 500;
}

.rk-venue-facility-tag i,
.rk-venue-facility-tag svg {
    color: #0057D9;
    font-size: 16px;
}

/* Galeri Grid */
.rk-gallery-thumb {
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    height: 110px;
    background: #021B3D;
}

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

.rk-gallery-overlay-more {
    position: absolute;
    inset: 0;
    background: rgba(2, 27, 61, 0.72);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
}

/* Right Sidebar Elements */
.rk-reg-card-price {
    font-size: 1.875rem;
    font-weight: 900;
    color: #0B1222;
    margin-bottom: 14px;
    line-height: 1;
}

.rk-btn-register-main {
    background: #FE6502;
    color: #FFFFFF;
    font-size: 0.9375rem;
    font-weight: 700;
    padding: 13px;
    border-radius: 10px;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    box-shadow: 0 4px 14px rgba(254, 101, 2, 0.28);
    transition: all 0.15s ease;
    margin-bottom: 16px;
}

.rk-btn-register-main:hover {
    background: #E05600;
    color: #FFFFFF;
    transform: translateY(-1px);
}

.rk-reg-info-list {
    display: flex;
    flex-direction: column;
    gap: 13px;
    padding-top: 14px;
    border-top: 1px solid #F1F5F9;
}

.rk-reg-info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.8125rem;
}

.rk-reg-info-icon {
    color: #0F172A;
    font-size: 15px;
    margin-top: 2px;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}

.rk-reg-info-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: #64748B;
    margin-bottom: 2px;
    line-height: 1.2;
}

.rk-reg-info-val {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0B1222;
    line-height: 1.35;
}

.rk-reg-info-val a {
    color: #0B1222;
    font-weight: 700;
    text-decoration: none !important;
}

.rk-reg-info-val a:hover {
    color: #0057D9;
}

.rk-sponsor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.rk-sponsor-box {
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    padding: 8px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    font-size: 0.6875rem;
    font-weight: 700;
    color: #334155;
    text-align: center;
}

.rk-sidebar-promo-card {
    background: linear-gradient(135deg, #021B3D 0%, #0057D9 100%);
    border-radius: 14px;
    padding: 22px;
    color: #FFFFFF;
    text-align: center;
}

.rk-venue-facility-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 24px;
    margin-top: 6px;
    margin-bottom: 6px;
}

.rk-venue-facility-item i {
    color: #0057D9 !important;
    font-size: 18px !important;
    flex-shrink: 0 !important;
}

.rk-venue-facility-item span {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1E293B;
    white-space: nowrap;
}

.rk-reg-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 9999px;
    background: #ECFDF5;
    color: #059669 !important;
    border: 1px solid #A7F3D0;
    white-space: nowrap;
    line-height: 1.2;
}

@media (max-width: 991.98px) {

    .rk-comp-hero-title,
    .rk-detail-hero-title {
        font-size: 2rem;
    }

    .rk-comp-bottom-cta {
        flex-direction: column;
        text-align: center;
    }

    .rk-comp-cta-left {
        flex-direction: column;
    }
}

/* ==========================================================================
   ORGANIZER & VENUE DEDICATED STYLES (HERO BACKGROUNDS, BANNERS, & FORMS)
   100% Mockup Compliant with Robust Fallbacks / Placeholders
   ========================================================================== */

/* 1. Organizer Hero Backgrounds */
.rk-organizer-hero {
    background: linear-gradient(135deg, #07164D 0%, #002146 100%);
    position: relative;
    overflow: hidden;
    padding: 36px 0 68px;
}

.rk-organizer-hero-bg {
    position: absolute;
    inset: 0;
    /* Primary: Mockup banner, Fallback: Master asset placeholder-rect */
    background-image: url('../img/ruangkompetisi/mockup-banner-organizer-full.webp'), url('/master-asset/placeholder-rect.jpg');
    background-size: cover;
    background-position: center right;
    opacity: 0.28;
    pointer-events: none;
}

.rk-organizer-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(7, 22, 77, 0.92) 0%, rgba(7, 22, 77, 0.78) 50%, rgba(7, 22, 77, 0.40) 100%);
    pointer-events: none;
}

/* 2. Organizer Bottom CTA Banner */
.rk-organizer-cta-banner {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: #07164D;
    min-height: 140px;
    padding: 28px 32px;
}

.rk-organizer-cta-slice {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 45%;
    /* Primary: Crew slice, Fallback 1: Crew new, Fallback 2: Placeholder */
    background-image: url('../img/ruangkompetisi/mockup-organizer-crew-slice.png'), url('../img/ruangkompetisi/organizer-crew-new.webp'), url('/master-asset/placeholder-rect.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.45;
    pointer-events: none;
}

.rk-organizer-cta-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(7, 22, 77, 0.3) 0%, rgba(7, 22, 77, 0.92) 40%, rgba(7, 22, 77, 0.98) 100%);
    pointer-events: none;
}

/* 3. Organizer Detail Hero & Sidebar Banners */
.rk-organizer-detail-hero {
    background: linear-gradient(135deg, #07164D 0%, #001A38 100%);
    min-height: 380px;
    padding: 32px 0 48px;
    position: relative;
    overflow: hidden;
}

.rk-organizer-detail-hero-bg {
    position: absolute;
    inset: 0;
    background-image: url('../img/ruangkompetisi/mockup-banner-organizer-full.webp'), url('/master-asset/placeholder-rect.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0.35;
    pointer-events: none;
}

.rk-organizer-sidebar-banner-top {
    overflow: hidden;
    position: relative;
    border-radius: 14px;
    height: 140px;
    background: #07164D;
}

.rk-organizer-sidebar-banner-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.75;
}

.rk-organizer-sidebar-banner-bottom {
    overflow: hidden;
    position: relative;
    border-radius: 14px;
    height: 260px;
    background: #07164D;
}

.rk-organizer-sidebar-banner-bottom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.75;
}

/* 4. Form Styling (Floating Search & Sidebar Filter) */
.rk-search-floating-card {
    background: #FFFFFF;
    border-radius: 14px;
    border: 1px solid #E2E8F0;
    padding: 14px 18px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    margin-top: -34px;
    position: relative;
    z-index: 10;
}

.rk-search-field-wrap {
    position: relative;
}

.rk-search-field-wrap i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #0F172A;
    font-size: 0.875rem;
    pointer-events: none;
}

.rk-search-input {
    padding-left: 38px !important;
    height: 44px;
    border-radius: 8px;
    border: 1.5px solid #E2E8F0;
    font-size: 0.875rem;
    color: #0B1222;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rk-search-input:focus {
    border-color: #0057D9;
    box-shadow: 0 0 0 3px rgba(0, 87, 217, 0.12);
    outline: none;
}

.rk-search-select {
    padding-left: 36px !important;
    height: 44px;
    border-radius: 8px;
    border: 1.5px solid #E2E8F0;
    font-size: 0.875rem;
    font-weight: 500;
    color: #0B1222;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rk-search-select:focus {
    border-color: #0057D9;
    box-shadow: 0 0 0 3px rgba(0, 87, 217, 0.12);
    outline: none;
}

.rk-search-btn-submit {
    background: #FE6502;
    color: #FFFFFF;
    height: 44px;
    font-size: 0.9375rem;
    font-weight: 700;
    border-radius: 8px;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    transition: background 0.2s ease, transform 0.15s ease;
}

.rk-search-btn-submit:hover {
    background: #E55A00;
    color: #FFFFFF;
    transform: translateY(-1px);
}

.rk-search-btn-submit:active {
    transform: translateY(0);
}

/* 5. Filter Sidebar Form Styles */
.rk-filter-sidebar-card {
    background: #FFFFFF;
    padding: 20px;
    border-radius: 14px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    position: sticky;
    top: 20px;
}

.rk-filter-group-header {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0B1222;
    margin-bottom: 10px;
}

.rk-filter-item-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 0.8125rem;
    color: #334155;
    cursor: pointer;
    user-select: none;
    transition: color 0.15s ease;
}

.rk-filter-item-label:hover {
    color: #0057D9;
}

.rk-filter-item-label input[type="radio"],
.rk-filter-item-label input[type="checkbox"] {
    accent-color: #0057D9;
    width: 15px;
    height: 15px;
    margin: 0;
    cursor: pointer;
}

.rk-filter-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 8px;
}

.rk-filter-btn-reset {
    font-size: 0.8125rem;
    color: #0057D9;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.15s ease;
}

.rk-filter-btn-reset:hover {
    color: #0040A1;
    text-decoration: underline;
}

.rk-filter-btn-apply {
    background: #0057D9;
    color: #FFFFFF;
    font-size: 0.8125rem;
    font-weight: 700;
    border-radius: 8px;
    padding: 6px 16px;
    border: none;
    transition: background 0.15s ease;
}

.rk-filter-btn-apply:hover {
    background: #0045AE;
    color: #FFFFFF;
}

/* 6. Universal Form Elements (Booking Cards, Modals, General Forms) */
.rk-form-group {
    margin-bottom: 14px;
}

.rk-form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0B1222;
}

.rk-form-label i {
    color: #0057D9;
    font-size: 0.875rem;
}

.rk-form-control {
    height: 42px;
    border-radius: 8px;
    border: 1.5px solid #E2E8F0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #0B1222;
    padding: 8px 12px;
    width: 100%;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rk-form-control:focus {
    border-color: #0057D9;
    box-shadow: 0 0 0 3px rgba(0, 87, 217, 0.12);
    outline: none;
}

.rk-form-select {
    height: 42px;
    border-radius: 8px;
    border: 1.5px solid #E2E8F0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #0B1222;
    padding: 8px 12px;
    width: 100%;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rk-form-select:focus {
    border-color: #0057D9;
    box-shadow: 0 0 0 3px rgba(0, 87, 217, 0.12);
    outline: none;
}

.rk-form-textarea {
    border-radius: 8px;
    border: 1.5px solid #E2E8F0;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #0B1222;
    padding: 10px 12px;
    width: 100%;
    min-height: 90px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.rk-form-textarea:focus {
    border-color: #0057D9;
    box-shadow: 0 0 0 3px rgba(0, 87, 217, 0.12);
    outline: none;
}

.rk-form-btn-primary {
    background: #FE6502;
    color: #FFFFFF;
    height: 44px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 700;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    transition: background 0.2s ease, transform 0.15s ease;
}

.rk-form-btn-primary:hover {
    background: #E55A00;
    color: #FFFFFF;
    transform: translateY(-1px);
}

.rk-form-btn-secondary {
    background: #0057D9;
    color: #FFFFFF;
    height: 44px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 700;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    transition: background 0.2s ease, transform 0.15s ease;
}

.rk-form-btn-secondary:hover {
    background: #0045AE;
    color: #FFFFFF;
    transform: translateY(-1px);
}

.rk-form-btn-outline {
    background: transparent;
    color: #0057D9;
    height: 44px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 700;
    border: 1.5px solid #0057D9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    transition: all 0.2s ease;
}

.rk-form-btn-outline:hover {
    background: #EFF6FF;
    color: #0045AE;
    border-color: #0045AE;
}

/* 7. Script Watermark & Typography Helpers */
.rk-script-watermark {
    font-family: 'Permanent Marker', cursive, sans-serif;
    font-size: 1.35rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.35;
    transform: rotate(-2deg);
}

@media (max-width: 991.98px) {
    .rk-search-floating-card {
        margin-top: -20px;
        padding: 12px;
    }

    .rk-organizer-cta-slice {
        width: 100%;
        opacity: 0.25;
    }

    .rk-organizer-hero {
        padding: 24px 0 48px;
    }
}

/* ==========================================================================
   SECTION 13: VENUE DETAIL & BOOKING WIDGET (100% PRECISION TO MOCKUP)
   ========================================================================== */


.rk-detail-avatar-card {
    width: 110px;
    height: 110px;
    background: #FFFFFF;
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    border: 3px solid rgba(255, 255, 255, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rk-detail-avatar-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.rk-venue-hero-stats {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: auto;
    padding-top: 16px;
}

.rk-venue-stat-item {
    text-align: center;
}

.rk-venue-stat-val {
    font-size: 1.15rem;
    font-weight: 800;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1.2;
}

.rk-venue-stat-lbl {
    font-size: 0.6875rem;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 3px;
    white-space: nowrap;
}

.rk-venue-hero-script-tag {
    font-family: 'Caveat', cursive, sans-serif;
    font-weight: 600;
    font-size: 1.45rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.25;
    transform: rotate(-2deg);
    text-align: right;
    display: inline-block;
}

/* 13.2 Detail Tabs (Sticky & Active Orange Bar) */
.rk-detail-tabs-bar {
    background: #FFFFFF;
    border-bottom: 1px solid #E2E8F0;
    position: sticky;
    top: 60px;
    z-index: 35;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.rk-detail-tabs-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.rk-detail-tabs-nav::-webkit-scrollbar {
    display: none;
}

.rk-detail-tab-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 15px 16px;
    font-size: 0.84375rem;
    font-weight: 600;
    color: #64748B;
    text-decoration: none !important;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: all 0.15s ease;
}

.rk-detail-tab-link i,
.rk-detail-tab-link svg {
    font-size: 14px;
}

.rk-detail-tab-link:hover {
    color: #FE6502;
}

.rk-detail-tab-link.active {
    color: #FE6502 !important;
    border-bottom-color: #FE6502 !important;
    font-weight: 700;
}

.rk-detail-tab-link.active i,
.rk-detail-tab-link.active svg {
    color: #FE6502 !important;
}

/* 13.3 Section Headings */
.rk-section-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.125rem;
    font-weight: 800;
    color: #0B1222;
    margin-bottom: 18px;
}

.rk-section-heading-dash {
    width: 14px;
    height: 3px;
    background: #FE6502;
    border-radius: 2px;
    flex-shrink: 0;
}

/* 13.4 Booking Widget & Form Controls (Zero overlap, perfect gap) */
.rk-booking-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    margin-bottom: 24px;
}

.rk-booking-form-group {
    margin-bottom: 18px;
}

.rk-booking-form-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0B1222;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 7px;
}

.rk-booking-form-label i,
.rk-booking-form-label svg {
    color: #0057D9;
    font-size: 13px;
}

.rk-booking-form-input {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    font-size: 0.84375rem;
    font-weight: 500;
    color: #0B1222;
    background-color: #FFFFFF;
    border: 1.5px solid #CBD5E1;
    border-radius: 8px;
    transition: all 0.15s ease;
    outline: none;
    box-sizing: border-box;
}

.rk-booking-form-input:focus {
    border-color: #0057D9;
    box-shadow: 0 0 0 3px rgba(0, 87, 217, 0.12);
}

.rk-booking-form-select {
    width: 100%;
    height: 44px;
    padding: 0 38px 0 14px;
    font-size: 0.84375rem;
    font-weight: 500;
    color: #0B1222;
    background-color: #FFFFFF;
    border: 1.5px solid #CBD5E1;
    border-radius: 8px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    cursor: pointer;
    transition: all 0.15s ease;
    outline: none;
    box-sizing: border-box;
}

.rk-booking-form-select:focus {
    border-color: #0057D9;
    box-shadow: 0 0 0 3px rgba(0, 87, 217, 0.12);
}

.rk-btn-booking-submit {
    background: #FE6502;
    color: #FFFFFF;
    width: 100%;
    height: 46px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 700;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 14px rgba(254, 101, 2, 0.28);
    transition: all 0.15s ease;
    cursor: pointer;
    text-decoration: none !important;
}

.rk-btn-booking-submit:hover {
    background: #E05600;
    color: #FFFFFF;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(254, 101, 2, 0.35);
}

.rk-btn-outline-action {
    background: transparent;
    color: #0057D9;
    width: 100%;
    height: 42px;
    border-radius: 8px;
    font-size: 0.8125rem;
    font-weight: 700;
    border: 1.5px solid #0057D9;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.15s ease;
    text-decoration: none !important;
}

.rk-btn-outline-action:hover {
    background: #EFF6FF;
    color: #0045AE;
    border-color: #0045AE;
}

/* 13.5 Facility Grid Cards */
.rk-facility-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 14px 10px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 98px;
    transition: all 0.15s ease;
}

.rk-facility-card:hover {
    background: #FFFFFF;
    border-color: #CBD5E1;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
    transform: translateY(-2px);
}

/* 13.6 Highlights Row */
.rk-highlight-box {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
}

/* ============================================================
   SECTION 14: GLOBAL BOOTSTRAP 5 UTILITY SHIM (FOR BOOTSTRAP 4 ENV)
   Fixes missing flex gaps, margin-end/start, gutters, and subtle states
   ============================================================ */
/* Flex Gap Utilities */
.gap-0 {
    gap: 0 !important;
}

.gap-1 {
    gap: 0.25rem !important;
}

.gap-2 {
    gap: 0.5rem !important;
}

.gap-3 {
    gap: 1rem !important;
}

.gap-4 {
    gap: 1.5rem !important;
}

.gap-5 {
    gap: 3rem !important;
}

.row-gap-0 {
    row-gap: 0 !important;
}

.row-gap-1 {
    row-gap: 0.25rem !important;
}

.row-gap-2 {
    row-gap: 0.5rem !important;
}

.row-gap-3 {
    row-gap: 1rem !important;
}

.row-gap-4 {
    row-gap: 1.5rem !important;
}

.row-gap-5 {
    row-gap: 3rem !important;
}

.column-gap-0 {
    column-gap: 0 !important;
}

.column-gap-1 {
    column-gap: 0.25rem !important;
}

.column-gap-2 {
    column-gap: 0.5rem !important;
}

.column-gap-3 {
    column-gap: 1rem !important;
}

.column-gap-4 {
    column-gap: 1.5rem !important;
}

.column-gap-5 {
    column-gap: 3rem !important;
}

/* Margin End (Right) & Start (Left) */
.me-0 {
    margin-right: 0 !important;
}

.me-1 {
    margin-right: 0.25rem !important;
}

.me-2 {
    margin-right: 0.5rem !important;
}

.me-3 {
    margin-right: 1rem !important;
}

.me-4 {
    margin-right: 1.5rem !important;
}

.me-5 {
    margin-right: 3rem !important;
}

.me-auto {
    margin-right: auto !important;
}

.ms-0 {
    margin-left: 0 !important;
}

.ms-1 {
    margin-left: 0.25rem !important;
}

.ms-2 {
    margin-left: 0.5rem !important;
}

.ms-3 {
    margin-left: 1rem !important;
}

.ms-4 {
    margin-left: 1.5rem !important;
}

.ms-5 {
    margin-left: 3rem !important;
}

.ms-auto {
    margin-left: auto !important;
}

/* Padding End (Right) & Start (Left) */
.pe-0 {
    padding-right: 0 !important;
}

.pe-1 {
    padding-right: 0.25rem !important;
}

.pe-2 {
    padding-right: 0.5rem !important;
}

.pe-3 {
    padding-right: 1rem !important;
}

.pe-4 {
    padding-right: 1.5rem !important;
}

.pe-5 {
    padding-right: 3rem !important;
}

.ps-0 {
    padding-left: 0 !important;
}

.ps-1 {
    padding-left: 0.25rem !important;
}

.ps-2 {
    padding-left: 0.5rem !important;
}

.ps-3 {
    padding-left: 1rem !important;
}

.ps-4 {
    padding-left: 1.5rem !important;
}

.ps-5 {
    padding-left: 3rem !important;
}

/* Grid Gutters Shim */
.g-0,
.gx-0 {
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.g-0>*,
.gx-0>* {
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.g-1,
.gx-1 {
    margin-right: -0.25rem !important;
    margin-left: -0.25rem !important;
}

.g-1>*,
.gx-1>* {
    padding-right: 0.25rem !important;
    padding-left: 0.25rem !important;
}

.g-2,
.gx-2 {
    margin-right: -0.5rem !important;
    margin-left: -0.5rem !important;
}

.g-2>*,
.gx-2>* {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
}

.g-3,
.gx-3 {
    margin-right: -0.75rem !important;
    margin-left: -0.75rem !important;
}

.g-3>*,
.gx-3>* {
    padding-right: 0.75rem !important;
    padding-left: 0.75rem !important;
}

.g-4,
.gx-4 {
    margin-right: -1rem !important;
    margin-left: -1rem !important;
}

.g-4>*,
.gx-4>* {
    padding-right: 1rem !important;
    padding-left: 1rem !important;
}

.gy-1>* {
    margin-top: 0.25rem !important;
}

.gy-2>* {
    margin-top: 0.5rem !important;
}

.gy-3>* {
    margin-top: 0.75rem !important;
}

.gy-4>* {
    margin-top: 1rem !important;
}

/* Row-cols Responsive Utilities */
.row-cols-1>* {
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

.row-cols-2>* {
    flex: 0 0 50% !important;
    max-width: 50% !important;
}

.row-cols-3>* {
    flex: 0 0 33.333333% !important;
    max-width: 33.333333% !important;
}

.row-cols-4>* {
    flex: 0 0 25% !important;
    max-width: 25% !important;
}

.row-cols-5>* {
    flex: 0 0 20% !important;
    max-width: 20% !important;
}

.row-cols-6>* {
    flex: 0 0 16.666667% !important;
    max-width: 16.666667% !important;
}

@media (min-width: 576px) {
    .row-cols-sm-1>* {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .row-cols-sm-2>* {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .row-cols-sm-3>* {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }

    .row-cols-sm-4>* {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }

    .row-cols-sm-5>* {
        flex: 0 0 20% !important;
        max-width: 20% !important;
    }
}

@media (min-width: 768px) {
    .row-cols-md-1>* {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .row-cols-md-2>* {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .row-cols-md-3>* {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }

    .row-cols-md-4>* {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }

    .row-cols-md-5>* {
        flex: 0 0 20% !important;
        max-width: 20% !important;
    }
}

@media (min-width: 992px) {
    .row-cols-lg-1>* {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .row-cols-lg-2>* {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .row-cols-lg-3>* {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }

    .row-cols-lg-4>* {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }

    .row-cols-lg-5>* {
        flex: 0 0 20% !important;
        max-width: 20% !important;
    }
}

/* Subtle Color Helpers */
.bg-primary-subtle {
    background-color: rgba(0, 87, 217, 0.1) !important;
    color: #0057D9 !important;
}

.bg-success-subtle {
    background-color: rgba(22, 163, 74, 0.12) !important;
    color: #15803d !important;
}

.bg-warning-subtle {
    background-color: rgba(245, 158, 11, 0.12) !important;
    color: #b45309 !important;
}

.bg-danger-subtle {
    background-color: rgba(239, 68, 68, 0.12) !important;
    color: #b91c1c !important;
}

.bg-info-subtle {
    background-color: rgba(6, 182, 212, 0.12) !important;
    color: #0e7490 !important;
}

/* Venue Hero Action Buttons */
.rk-venue-btn-booking {
    background: #FE6502 !important;
    color: #FFFFFF !important;
    font-weight: 700;
    font-size: 0.875rem;
    padding: 10px 22px;
    border-radius: 8px;
    border: none !important;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 4px 14px rgba(254, 101, 2, 0.35);
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.rk-venue-btn-booking:hover {
    background: #E05600 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(254, 101, 2, 0.45);
}

.rk-venue-btn-contact {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 10px 20px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
    transition: all 0.15s ease;
}

.rk-venue-btn-contact:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #FFFFFF !important;
    border-color: rgba(255, 255, 255, 0.45) !important;
}

.rk-venue-btn-save {
    background: rgba(255, 255, 255, 0.12) !important;
    color: #FFFFFF !important;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 10px 18px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.15s ease;
    cursor: pointer;
}

.rk-venue-btn-save:hover {
    background: rgba(255, 255, 255, 0.22) !important;
    color: #FFFFFF !important;
}

/* Booking Header & Form Group Fixes */
.rk-booking-header-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

.rk-booking-title-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.rk-booking-card-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #0B1222;
    margin: 0;
    line-height: 1.2;
}

/* Transport Items in Location Section */
.rk-transport-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    font-size: 0.84375rem;
    color: #475569;
}

.rk-transport-icon-box {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #EFF6FF;
    color: #0057D9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    flex-shrink: 0;
}

/* Promo Banner in Sidebar */
.rk-promo-check-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.84375rem;
    font-weight: 600;
    color: #FFFFFF;
    padding: 4px 0;
}

.rk-promo-check-circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #0057D9;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}

/* Contact List in Sidebar */
.rk-reg-info-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rk-reg-info-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.rk-reg-info-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #F1F5F9;
    color: #0B1222;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    flex-shrink: 0;
}

.rk-reg-info-icon.is-whatsapp {
    background: #DCFCE7;
    color: #16A34A;
}

.rk-reg-info-label {
    font-size: 0.75rem;
    color: #64748B;
    font-weight: 500;
    margin-bottom: 2px;
    line-height: 1.2;
}

.rk-reg-info-val {
    font-size: 0.84375rem;
    font-weight: 600;
    color: #0B1222;
    line-height: 1.3;
}

/* Section Title with Orange Dash Prefix (Matches Mockup 100%) */
.rk-detail-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 800;
    color: #0B1222;
    margin-bottom: 16px;
    letter-spacing: -0.2px;
}

.rk-detail-section-title::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 4px;
    background: #FE6502;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Sidebar Top and Bottom Banners (Matches Mockup 100%) */
.rk-venue-sidebar-banner-top,
.rk-organizer-sidebar-banner-top {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    height: 140px;
    margin-bottom: 24px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.rk-venue-sidebar-banner-top img,
.rk-organizer-sidebar-banner-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rk-venue-sidebar-banner-bottom,
.rk-organizer-sidebar-banner-bottom {
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    height: 280px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.rk-venue-sidebar-banner-bottom img,
.rk-organizer-sidebar-banner-bottom img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rk-script-watermark {
    font-family: 'Caveat', cursive, sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.2;
    transform: rotate(-3deg);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Highlight & Facility Grids (Guaranteed Gaps & No Overlap) */
.rk-highlight-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

@media (max-width: 768px) {
    .rk-highlight-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.rk-highlight-item {
    padding: 12px 8px;
    border-radius: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 84px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: transform 0.15s ease;
}

.rk-highlight-item:hover {
    transform: translateY(-2px);
}

.rk-facility-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

@media (max-width: 992px) {
    .rk-facility-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 576px) {
    .rk-facility-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Booking Header Fix (Zero Overlap Guaranteed) */
.rk-booking-title-group {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.rk-booking-icon-box {
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: #0057D9 !important;
    color: #ffffff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.15rem !important;
    flex-shrink: 0 !important;
    margin-right: 8px !important;
}

/* Venue Mockup Specific Components (100% Mockup Accuracy) */
.rk-venue-highlight-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

@media (max-width: 768px) {
    .rk-venue-highlight-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.rk-venue-highlight-box {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.rk-venue-highlight-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #EFF6FF;
    color: #0057D9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.rk-venue-highlight-val {
    font-size: 1.0625rem;
    font-weight: 800;
    color: #0B1222;
    line-height: 1.2;
}

.rk-venue-highlight-lbl {
    font-size: 0.75rem;
    color: #64748B;
    font-weight: 500;
    line-height: 1.2;
    margin-top: 2px;
}

/* Sidebar Contact Details */
.rk-venue-contact-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 14px;
}

.rk-venue-contact-icon {
    font-size: 16px;
    color: #0B1222;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.rk-venue-contact-icon.is-wa {
    color: #16A34A;
}

.rk-venue-contact-val {
    font-size: 0.84375rem;
    font-weight: 600;
    color: #0B1222;
    line-height: 1.4;
}

.rk-venue-contact-sub {
    font-size: 0.75rem;
    color: #64748B;
}

/* Sidebar Bottom Promo Box */
.rk-venue-promo-box {
    border-radius: 12px;
    overflow: hidden;
    background: #021B3D;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.rk-venue-promo-thumb {
    height: 170px;
    position: relative;
    overflow: hidden;
}

.rk-venue-promo-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.rk-venue-promo-thumb-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(2, 27, 61, 0.2) 0%, rgba(2, 27, 61, 0.95) 100%);
}

.rk-venue-promo-script {
    position: absolute;
    top: 14px;
    left: 18px;
    font-family: 'Caveat', cursive, sans-serif;
    font-size: 1.55rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.15;
    transform: rotate(-3deg);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.rk-venue-promo-list {
    padding: 16px 20px 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.rk-venue-promo-item {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #FFFFFF;
    font-size: 0.84375rem;
    font-weight: 600;
}

.rk-venue-promo-item i {
    color: #0057D9;
    font-size: 15px;
}

.rk-venue-promo-footer {
    background: #FE6502;
    color: #FFFFFF;
    text-align: center;
    padding: 10px 14px;
    font-size: 0.8125rem;
    font-weight: 700;
}

/* Map Wrapper */
.rk-venue-map-wrap {
    height: 250px;
    border-radius: 10px;
    border: 1px solid #CBD5E1;
    overflow: hidden;
    position: relative;
    background-color: #E2E8F0;
    background-image:
        radial-gradient(#94A3B8 1px, transparent 1px),
        linear-gradient(135deg, #F1F5F9 0%, #E2E8F0 100%);
    background-size: 16px 16px, 100% 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rk-venue-map-pin {
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 20px;
    padding: 6px 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0B1222;
    z-index: 2;
}

.rk-venue-map-btn {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: #FFFFFF;
    border: 1px solid #CBD5E1;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.75rem;
    font-weight: 700;
    color: #0B1222;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    text-decoration: none !important;
    z-index: 3;
}

/* Venue Detail Hero Section - 100% Mockup Alignment */
.rk-venue-detail-hero {
    position: relative;
    min-height: 480px;
    display: flex;
    align-items: flex-end;
    padding-bottom: 40px;
    padding-top: 40px;
    background-color: #021B3D;
    overflow: hidden;
}

.rk-venue-detail-hero-bg {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 58%;
    background-size: cover;
    background-position: center right;
    z-index: 1;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.2) 15%, rgba(0, 0, 0, 0.8) 50%, #000000 85%);
    mask-image: linear-gradient(to right, transparent 0%, rgba(0, 0, 0, 0.2) 15%, rgba(0, 0, 0, 0.8) 50%, #000000 85%);
}

.rk-venue-detail-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, #021B3D 0%, #021B3D 42%, rgba(2, 27, 61, 0.85) 58%, rgba(2, 27, 61, 0.15) 80%, rgba(2, 27, 61, 0.4) 100%),
        linear-gradient(180deg, rgba(2, 27, 61, 0.35) 0%, transparent 40%, #021B3D 100%);
    z-index: 2;
    pointer-events: none;
}

@media (max-width: 991.98px) {
    .rk-venue-detail-hero-bg {
        width: 100%;
        opacity: 0.35;
        -webkit-mask-image: none;
        mask-image: none;
    }

    .rk-venue-detail-hero-overlay {
        background: linear-gradient(180deg, rgba(2, 27, 61, 0.88) 0%, #021B3D 100%);
    }
}

/* ============================================================
   SPONSOR & SPONSOR DETAIL STYLING (100% MOCKUP ALIGNMENT)
   ============================================================ */

/* Sponsor Index Hero */
.rk-sponsor-hero {
    position: relative;
    min-height: 480px;
    background-color: #021B3D;
    background-size: cover;
    background-position: center right;
    display: flex;
    align-items: center;
    padding: 60px 0 85px;
    overflow: hidden;
}

.rk-sponsor-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(2, 27, 61, 0.95) 0%, rgba(2, 27, 61, 0.88) 45%, rgba(2, 27, 61, 0.4) 80%, rgba(2, 27, 61, 0.2) 100%);
    z-index: 1;
    pointer-events: none;
}

.rk-sponsor-hero-script {
    font-family: 'Caveat', cursive, sans-serif;
    font-style: italic;
    font-weight: 700;
    color: #FFFFFF;
    font-size: 2.25rem;
    line-height: 1.15;
    text-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
    text-align: right;
    max-width: 320px;
    margin-left: auto;
}

.rk-sponsor-cta-script {
    font-family: 'Caveat', cursive, sans-serif;
    font-style: italic;
    font-weight: 700;
    color: #FFFFFF;
    font-size: 1.5rem;
    line-height: 1.2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    text-align: right;
    white-space: nowrap;
}

.rk-script-underline {
    position: relative;
    display: inline-block;
}

.rk-script-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 3.5px;
    background: #FE6502;
    border-radius: 2px;
}

/* Sponsor Feature Strip (Overlapping Bottom Hero) */
.rk-sponsor-feature-strip {
    background: #FFFFFF;
    border-radius: 16px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 10px 30px rgba(0, 33, 70, 0.08);
    padding: 20px 24px;
    margin-top: -38px;
    position: relative;
    z-index: 10;
}

.rk-sponsor-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: center;
}

.rk-sponsor-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-width: 0;
}

.rk-sponsor-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #EFF6FF;
    color: #0057D9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.rk-sponsor-feature-content {
    min-width: 0;
    flex: 1;
}

.rk-sponsor-feature-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0B1222;
    margin-bottom: 2px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rk-sponsor-feature-desc {
    font-size: 0.6875rem;
    color: #64748B;
    line-height: 1.4;
    margin: 0;
}

@media (max-width: 991px) {
    .rk-sponsor-feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

@media (max-width: 576px) {
    .rk-sponsor-feature-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* Section Headings */
.rk-sponsor-sec-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.rk-sponsor-sec-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0B1222;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.rk-sponsor-sec-title::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 4px;
    background: #FE6502;
    border-radius: 2px;
}

.rk-sponsor-sec-title-plain {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0B1222;
    margin: 0;
}

.rk-sponsor-sec-link {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0057D9;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.15s ease, transform 0.15s ease;
}

.rk-sponsor-sec-link:hover {
    color: #FE6502;
    transform: translateX(3px);
}

/* Pricing / Partnership Packages */
.rk-sponsor-pkg-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 28px 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.rk-sponsor-pkg-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px rgba(0, 33, 70, 0.08);
    border-color: #CBD5E1;
}

.rk-sponsor-pkg-card.is-popular {
    border: 1.5px solid #FE8D42;
    background: #FFFDF8;
    box-shadow: 0 10px 28px rgba(254, 101, 2, 0.12);
}

.rk-sponsor-pkg-card .rk-pkg-badge-top {
    position: absolute;
    top: -1px;
    left: -1px;
    background: #FE6502;
    color: #FFFFFF;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 4px 14px;
    border-top-left-radius: 15px;
    border-bottom-right-radius: 10px;
    letter-spacing: 0.02em;
    z-index: 2;
}

.rk-sponsor-pkg-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.rk-sponsor-pkg-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

.rk-sponsor-pkg-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: #0B1222;
    margin: 0;
}

.rk-sponsor-pkg-subtitle {
    font-size: 0.8125rem;
    color: #64748B;
    line-height: 1.45;
    margin-bottom: 18px;
    min-height: 38px;
}

.rk-sponsor-pkg-price-label {
    font-size: 0.75rem;
    color: #94A3B8;
    margin-bottom: 2px;
}

.rk-sponsor-pkg-price {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0B1222;
    margin-bottom: 20px;
}

.rk-sponsor-pkg-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.rk-sponsor-pkg-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.8125rem;
    color: #334155;
    line-height: 1.45;
}

.rk-sponsor-pkg-features li i {
    font-size: 0.875rem;
    margin-top: 2px;
    flex-shrink: 0;
}

/* Package Buttons matching Mockup */
.rk-btn-outline-orange {
    background: #FFFFFF;
    border: 1.5px solid #FE6502;
    color: #FE6502;
    font-weight: 700;
    border-radius: 8px;
    padding: 10px 16px;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.rk-btn-outline-orange:hover {
    background: #FE6502;
    color: #FFFFFF;
}

.rk-btn-solid-orange {
    background: #FE6502;
    border: 1.5px solid #FE6502;
    color: #FFFFFF;
    font-weight: 700;
    border-radius: 8px;
    padding: 10px 16px;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    font-size: 0.875rem;
    box-shadow: 0 4px 12px rgba(254, 101, 2, 0.28);
    transition: all 0.2s ease;
}

.rk-btn-solid-orange:hover {
    background: #E05500;
    border-color: #E05500;
    color: #FFFFFF;
}

.rk-btn-outline-blue {
    background: #FFFFFF;
    border: 1.5px solid #0057D9;
    color: #0057D9;
    font-weight: 700;
    border-radius: 8px;
    padding: 10px 16px;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    font-size: 0.875rem;
    transition: all 0.2s ease;
}

.rk-btn-outline-blue:hover {
    background: #0057D9;
    color: #FFFFFF;
}

/* Sponsor Utama Grid */
.rk-sponsor-logo-box {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    height: 84px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.rk-sponsor-logo-box:hover {
    transform: translateY(-3px);
    border-color: #0057D9;
    box-shadow: 0 8px 20px rgba(0, 87, 217, 0.08);
}

.rk-sponsor-logo-box img {
    max-height: 40px;
    max-width: 120px;
    object-fit: contain;
}

/* CTA Banner Sponsor */
.rk-sponsor-cta-banner {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    padding: 40px 48px;
    box-shadow: 0 10px 30px rgba(2, 27, 61, 0.15);
}

/* Testimonial Card */
.rk-sponsor-testi-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 22px 26px;
    box-shadow: 0 4px 16px rgba(0, 33, 70, 0.03);
    height: auto !important;
}

.rk-sponsor-quote-icon {
    font-size: 1.5rem;
    color: #0057D9;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.rk-sponsor-testi-text {
    font-size: 0.9375rem;
    color: #334155;
    line-height: 1.65;
    margin-bottom: 24px;
}

/* Accordion FAQs */
.rk-sponsor-faq-item {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color 0.15s ease;
}

.rk-sponsor-faq-btn {
    width: 100%;
    background: none;
    border: none;
    padding: 16px 20px;
    text-align: left;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0F172A;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    cursor: pointer;
}

.rk-sponsor-faq-btn i {
    color: #0F172A;
    font-size: 0.9375rem;
    font-weight: 900;
    transition: transform 0.2s ease;
}

.rk-sponsor-faq-content {
    padding: 0 20px 16px;
    font-size: 0.875rem;
    color: #475569;
    line-height: 1.6;
}

/* ============================================================
   SPONSOR DETAIL PAGE STYLING (100% MOCKUP ALIGNMENT)
   ============================================================ */
.rk-sponsor-detail-banner {
    position: relative;
    height: 340px;
    background-color: #021B3D;
    background-size: cover;
    background-position: center;
    border-radius: 0;
    overflow: hidden;
}

.rk-sponsor-detail-banner-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.15) 0%, rgba(2, 27, 61, 0.75) 100%);
}

.rk-sponsor-detail-header-card {
    background: #FFFFFF;
    border-radius: 16px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 8px 30px rgba(0, 33, 70, 0.06);
    padding: 24px 28px;
    margin-top: -50px;
    position: relative;
    z-index: 10;
}

.rk-sponsor-detail-logo {
    width: 96px;
    height: 96px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    padding: 8px;
}

.rk-sponsor-detail-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rk-sponsor-nav-tabs {
    background: #FFFFFF;
    border-bottom: 1px solid #E2E8F0;
    position: sticky;
    top: 70px;
    z-index: 100;
}

.rk-sponsor-nav-tabs .nav-link {
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748B;
    padding: 14px 18px;
    border: none;
    background: transparent;
    border-bottom: 2px solid transparent;
    transition: color 0.15s ease, border-color 0.15s ease;
}

.rk-sponsor-nav-tabs .nav-link:hover {
    color: #FE6502;
}

.rk-sponsor-nav-tabs .nav-link.active {
    color: #FE6502 !important;
    border-bottom: 2px solid #FE6502 !important;
    font-weight: 700;
}

/* Feature Badge Card in Sponsor Detail (1 Row Mendatar) */
.rk-sponsor-feature-badge-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 100%;
}

.rk-sponsor-feature-badge-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(254, 101, 2, 0.12);
    color: #FE6502;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
    flex-shrink: 0;
}

.rk-sponsor-feature-badge-text {
    font-size: 0.75rem;
    font-weight: 700;
    color: #0B1222;
    line-height: 1.25;
}

/* Product Card */
.rk-sponsor-product-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.rk-sponsor-product-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(0, 33, 70, 0.08);
}

.rk-sponsor-product-img-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: #EEF2F6;
    overflow: hidden;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rk-sponsor-product-img {
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    padding: 0 !important;
    display: block;
}

.rk-sponsor-product-body {
    padding: 10px 8px 12px;
    text-align: left;
    margin-top: auto;
    background: #FFFFFF;
}

.rk-sponsor-product-title {
    font-size: 0.75rem;
    /* 12px */
    font-weight: 700;
    color: #0B1B3D;
    margin-bottom: 2px;
    line-height: 1.25;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rk-sponsor-product-desc {
    font-size: 0.71875rem;
    /* ~11.5px */
    font-weight: 500;
    color: #5A6E85;
    margin-bottom: 0;
    line-height: 1.25;
    letter-spacing: -0.015em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Sidebar Video Card */
.rk-sponsor-sidebar-video {
    position: relative;
    height: 220px;
    border-radius: 16px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 20px;
    margin-bottom: 24px;
}

.rk-sponsor-sidebar-video-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(2, 27, 61, 0.85) 100%);
}

.rk-sponsor-play-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.7);
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    transition: transform 0.2s ease;
}

.rk-sponsor-play-btn:hover {
    transform: scale(1.1);
    background: #FE6502;
    border-color: #FE6502;
}

/* Light Breadcrumb Variant */
.rk-comp-breadcrumb.is-light a,
.rk-breadcrumb-light a {
    color: #64748B !important;
}

.rk-comp-breadcrumb.is-light a:hover,
.rk-breadcrumb-light a:hover {
    color: #0057D9 !important;
}

.rk-comp-breadcrumb.is-light .rk-comp-breadcrumb-sep,
.rk-breadcrumb-light .rk-comp-breadcrumb-sep {
    color: #94A3B8 !important;
}

.rk-comp-breadcrumb.is-light .rk-comp-breadcrumb-active,
.rk-breadcrumb-light .rk-comp-breadcrumb-active {
    color: #0B1222 !important;
    font-weight: 600 !important;
}

/* AIZ-Core Badge Overrides */
.rk-badge,
.rk-badge-pill {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    height: auto !important;
    min-width: unset !important;
    padding: 4px 10px !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    border-radius: 9999px !important;
    white-space: nowrap !important;
}

.rk-tag-badge {
    display: inline-flex !important;
    align-items: center !important;
    width: auto !important;
    height: auto !important;
    min-width: unset !important;
    padding: 3px 8px !important;
    font-size: 0.6875rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    border-radius: 4px !important;
    background: rgba(0, 87, 217, 0.08) !important;
    color: #0057D9 !important;
    white-space: nowrap !important;
}

/* ============================================================
   SPONSOR SLIDER CAROUSEL (100% Symmetrical & Smooth Scroll)
   ============================================================ */
.rk-sponsor-slider-wrapper {
    position: relative;
    padding: 0 44px;
    width: 100%;
}

.rk-sponsor-slider-arrow {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    /* Exact 50% vertical center for 40px height */
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    background: #FFFFFF !important;
    border: 1px solid #CBD5E1 !important;
    box-shadow: 0 4px 14px rgba(0, 33, 70, 0.1) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    color: #0B1222 !important;
    padding: 0;
    transition: all 0.2s ease;
    outline: none !important;
}

.rk-sponsor-slider-arrow:hover {
    background: #FE6502 !important;
    color: #FFFFFF !important;
    border-color: #FE6502 !important;
    box-shadow: 0 4px 16px rgba(254, 101, 2, 0.3) !important;
    transform: scale(1.06);
}

.rk-sponsor-slider-arrow.is-prev {
    left: -6px;
}

.rk-sponsor-slider-arrow.is-next {
    right: -6px;
}

.rk-sponsor-slider-track {
    display: flex;
    align-items: center;
    gap: 16px;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
    padding: 8px 4px;
}

.rk-sponsor-slider-track::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.rk-sponsor-slider-item {
    flex: 0 0 calc(16.666% - 13.5px);
    width: calc(16.666% - 13.5px);
    min-width: 170px;
}

@media (max-width: 991px) {
    .rk-sponsor-slider-wrapper {
        padding: 0 36px;
    }

    .rk-sponsor-slider-arrow.is-prev {
        left: -4px;
    }

    .rk-sponsor-slider-arrow.is-next {
        right: -4px;
    }

    .rk-sponsor-slider-item {
        flex: 0 0 160px;
        min-width: 160px;
    }
}


/* ==========================================================================
   HALAMAN OLAHRAGA & OLAHRAGA DETAIL (2026 MASTER MOCKUP SPECIFICATION)
   Mockup 1: Mockup - Olahraga.png
   Mockup 2: Mockup - Olahraga Detail.png
   ========================================================================== */

/* 1. OLAHRAGA INDEX HERO */
.rk-sport-index-hero {
    background-color: #011A42;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
    position: relative;
    padding: 44px 0 54px;
    color: #FFFFFF;
    overflow: visible;
}

.rk-sport-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(254, 101, 2, 0.15);
    border: 1px solid rgba(254, 101, 2, 0.4);
    color: #FE6502;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.rk-sport-hero-badge i {
    font-size: 0.8125rem;
}

.rk-sport-hero-title {
    font-size: 3.25rem;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
    color: #FFFFFF;
    margin-bottom: 14px;
}

.rk-sport-hero-title span.highlight-orange {
    color: #FE6502;
}

.rk-sport-hero-subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    max-width: 500px;
    margin-bottom: 0;
}

.rk-sport-hero-script {
    color: #FFFFFF;
    font-family: 'Caveat', cursive, sans-serif;
    font-weight: 700;
    font-size: 2.15rem;
    line-height: 1.05;
    text-align: right;
    display: inline-block;
    transform: rotate(-6deg);
    letter-spacing: 0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
}

.rk-sport-hero-script span {
    display: block;
}

.rk-sport-hero-script span.rk-script-highlight {
    position: relative;
    display: inline-block;
}

.rk-sport-hero-script span.rk-script-highlight::after {
    content: '';
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 100%;
    height: 4px;
    background: #FE6502;
    border-radius: 2px;
}

/* 2. FLOATING SEARCH BOX BAR (Floats half on hero bottom, half on light bg) */
.rk-sport-floating-wrap {
    position: relative;
    z-index: 20;
    margin-top: -28px;
    margin-bottom: 24px;
}

.rk-sport-search-wrap {
    width: 100%;
}

.rk-sport-search-box {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 6px 8px 6px 18px;
    box-shadow: 0 8px 30px rgba(0, 33, 70, 0.12);
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #E2E8F0;
}

.rk-sport-search-input-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.rk-sport-search-input-wrap i {
    color: #94A3B8;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.rk-sport-search-input {
    width: 100%;
    border: none;
    outline: none;
    font-size: 0.95rem;
    color: #0F172A;
    background: transparent;
    padding: 8px 0;
}

.rk-sport-search-input::placeholder {
    color: #94A3B8;
    font-weight: 400;
}

.rk-sport-search-btn {
    background: #FE6502;
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 700;
    padding: 10px 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.rk-sport-search-btn:hover {
    background: #E05000;
    color: #FFFFFF;
    box-shadow: 0 4px 14px rgba(254, 101, 2, 0.35);
}

/* 3. STATS BAR WITH VERTICAL DIVIDERS */
.rk-sport-stats-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 33, 70, 0.04);
    padding: 20px 28px;
}

.rk-stat-col:not(:last-child) {
    border-right: 1px solid #E2E8F0;
}

@media (max-width: 991px) {
    .rk-stat-col:nth-child(2) {
        border-right: none;
    }

    .rk-stat-col:nth-child(-n+2) {
        border-bottom: 1px solid #F1F5F9;
        padding-bottom: 12px;
        margin-bottom: 12px;
    }
}

@media (max-width: 767px) {
    .rk-stat-col {
        border-right: none !important;
        border-bottom: 1px solid #F1F5F9;
        padding-bottom: 12px;
        margin-bottom: 12px;
    }

    .rk-stat-col:last-child {
        border-bottom: none !important;
        padding-bottom: 0;
        margin-bottom: 0;
    }
}

.rk-sport-stat-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 4px 12px;
}

.rk-sport-stat-icon {
    font-size: 30px;
    color: #0057D9;
    flex-shrink: 0;
}

.rk-sport-stat-num {
    font-size: 1.5rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.15;
}

.rk-sport-stat-lbl {
    font-size: 0.8125rem;
    color: #64748B;
    font-weight: 500;
    line-height: 1.25;
}

/* 4. 7-COLUMN RESPONSIVE SPORTS GRID WITH ZERO OVERLAP */
.rk-sport-grid-7 {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 14px;
}

@media (max-width: 1200px) {
    .rk-sport-grid-7 {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 991px) {
    .rk-sport-grid-7 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .rk-sport-grid-7 {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .rk-sport-grid-7 {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

.rk-sport-card-v2 {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px 12px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 124px;
    text-decoration: none !important;
    position: relative;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.rk-sport-card-v2:hover {
    transform: translateY(-3px);
    border-color: #0057D9;
    box-shadow: 0 8px 24px rgba(0, 87, 217, 0.12);
}

.rk-sport-card-v2 .rk-sport-icon {
    font-size: 32px;
    margin-top: 4px;
    margin-bottom: 12px;
    transition: transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
}

.rk-sport-card-v2:hover .rk-sport-icon {
    transform: scale(1.1);
}

.rk-sport-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-top: auto;
    gap: 6px;
}

.rk-sport-card-v2 .rk-sport-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #0F172A;
    text-align: left;
    line-height: 1.25;
    margin-bottom: 0;
    flex: 1;
    min-width: 0;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rk-sport-card-v2 .rk-sport-arrow-btn {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #EBF3FF;
    color: #0057D9;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.rk-sport-card-v2:hover .rk-sport-arrow-btn {
    background: #FE6502;
    color: #FFFFFF;
    transform: translateX(2px);
}

/* 5. BOTTOM CTA BANNER (INDEX) */
.rk-sport-cta-banner {
    background-color: #021B3D;
    background-image:
        linear-gradient(90deg, #021B3D 0%, rgba(2, 27, 61, 0.88) 45%, rgba(2, 27, 61, 0.45) 75%, rgba(2, 27, 61, 0.15) 100%),
        url('../../master-asset/Olahraga-02.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    padding: 44px 48px;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
    margin-top: 50px;
    margin-bottom: 24px;
}

.rk-sport-cta-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: #FFFFFF;
    margin-bottom: 8px;
}

.rk-sport-cta-desc {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 520px;
    line-height: 1.55;
    margin-bottom: 20px;
}

.rk-sport-cta-btn {
    background: #FE6502;
    color: #FFFFFF;
    border-radius: 8px;
    padding: 11px 28px;
    font-weight: 700;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.rk-sport-cta-btn:hover {
    background: #E05000;
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(254, 101, 2, 0.4);
}

.rk-sport-cta-script {
    font-family: 'Caveat', cursive, sans-serif;
    color: #FFFFFF;
    font-size: 2.35rem;
    font-weight: 700;
    text-align: right;
    display: inline-block;
    transform: rotate(-6deg);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

/* 6. BOTTOM 3 FEATURES */
.rk-sport-feature-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 100%;
}

.rk-sport-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #EFF6FF;
    color: #0057D9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.rk-sport-feature-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 3px;
}

.rk-sport-feature-text {
    font-size: 0.78125rem;
    color: #64748B;
    margin-bottom: 0;
    line-height: 1.4;
}

/* ==========================================================================
   DETAIL PAGE SPECIFIC STYLES
   ========================================================================== */
.rk-sport-detail-hero {
    background-color: #03132B;
    background-image:
        linear-gradient(90deg, #03132B 0%, rgba(3, 19, 43, 0.92) 48%, rgba(3, 19, 43, 0.45) 80%, rgba(3, 19, 43, 0.15) 100%),
        url('../../master-asset/Olahraga Detail-01.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
    position: relative;
    padding: 34px 0 40px;
    color: #FFFFFF;
    overflow: hidden;
}

.rk-sport-badge-square {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: #FE6502;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(254, 101, 2, 0.35);
}

.rk-sport-detail-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.8);
    text-transform: uppercase;
    margin-bottom: 2px;
}

.rk-sport-detail-title {
    font-size: 2.75rem;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.1;
    margin-bottom: 6px;
}

.rk-sport-detail-tagline {
    font-size: 1.0625rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.92);
    margin-bottom: 12px;
}

.rk-sport-detail-desc {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    max-width: 620px;
    margin-bottom: 22px;
}

.rk-sport-detail-stats {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 24px;
}

.rk-sport-detail-stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84375rem;
    color: rgba(255, 255, 255, 0.9);
}

.rk-sport-detail-stat-item i {
    font-size: 16px;
    color: #FE6502;
}

.rk-sport-detail-script {
    font-family: 'Caveat', cursive, sans-serif;
    color: #FFFFFF;
    font-size: 2.15rem;
    font-weight: 700;
    text-align: right;
    display: inline-block;
    transform: rotate(-6deg);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

/* SUB-NAV TABS */
.rk-sport-tabs-bar {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 33, 70, 0.05);
    display: flex;
    align-items: center;
    margin-top: -18px;
    position: relative;
    z-index: 10;
    overflow-x: auto;
}

.rk-sport-tab-link {
    padding: 14px 24px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #64748B;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease;
}

.rk-sport-tab-link:hover {
    color: #0057D9;
}

.rk-sport-tab-link.active {
    color: #0057D9;
    border-bottom-color: #0057D9;
}

/* DETAIL: ABOUT + QUOTE */
.rk-sport-quote-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 24px;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rk-sport-quote-icon {
    font-size: 24px;
    color: #0057D9;
    margin-bottom: 12px;
}

.rk-sport-quote-text {
    font-size: 0.9375rem;
    color: #1E293B;
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 10px;
}

.rk-sport-quote-author {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #64748B;
    margin-bottom: 0;
}

/* DETAIL: 6-COLUMN DISCIPLINE GRID */
.rk-discipline-grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

@media (max-width: 1100px) {
    .rk-discipline-grid-6 {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .rk-discipline-grid-6 {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .rk-discipline-grid-6 {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

.rk-discipline-card-v2 {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 18px 12px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    min-height: 124px;
    text-decoration: none !important;
    position: relative;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.rk-discipline-card-v2:hover {
    transform: translateY(-3px);
    border-color: #0057D9;
    box-shadow: 0 8px 24px rgba(0, 87, 217, 0.12);
}

.rk-discipline-card-v2 .rk-disc-icon {
    font-size: 30px;
    margin-top: 4px;
    margin-bottom: 8px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.rk-discipline-card-v2:hover .rk-disc-icon {
    transform: scale(1.1);
}

.rk-discipline-card-v2 .rk-disc-title {
    font-size: 0.84375rem;
    font-weight: 700;
    color: #1E293B;
    text-align: center;
    line-height: 1.25;
    margin-bottom: 8px;
}

.rk-discipline-card-v2 .rk-disc-arrow-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #EFF6FF;
    color: #0057D9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: all 0.2s ease;
}

.rk-discipline-card-v2:hover .rk-disc-arrow-btn {
    background: #0057D9;
    color: #FFFFFF;
}

/* DETAIL: 6 BENEFITS */
.rk-benefit-grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}

@media (max-width: 991px) {
    .rk-benefit-grid-6 {
        grid-template-columns: repeat(3, 1fr);
        gap: 14px;
    }
}

@media (max-width: 576px) {
    .rk-benefit-grid-6 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
}

.rk-benefit-card {
    background: #FFFFFF;
    border: 1px solid #F1F5F9;
    border-radius: 12px;
    padding: 16px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    transition: all 0.2s ease;
}

.rk-benefit-card:hover {
    border-color: #E2E8F0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.rk-benefit-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 12px;
}

.rk-benefit-title {
    font-size: 0.8125rem;
    font-weight: 700;
    color: #1E293B;
    line-height: 1.35;
    margin-bottom: 0;
}

/* DETAIL: 4 NEAREST EVENT CARDS */
.rk-sport-event-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.2s ease;
}

.rk-sport-event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 33, 70, 0.1);
    border-color: #BFDBFE;
}

.rk-sport-event-img-wrap {
    height: 160px;
    position: relative;
    overflow: hidden;
}

.rk-sport-event-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.rk-sport-event-card:hover .rk-sport-event-img {
    transform: scale(1.04);
}

.rk-sport-event-date-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(4px);
    border-radius: 8px;
    padding: 6px 10px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    line-height: 1.15;
}

.rk-sport-event-date-day {
    font-size: 1.125rem;
    font-weight: 800;
    color: #0F172A;
    display: block;
}

.rk-sport-event-date-month {
    font-size: 0.6875rem;
    font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    display: block;
}

.rk-sport-event-body {
    padding: 16px 16px 14px;
    display: flex;
    flex-direction: column;
    flex: 1;
    justify-content: space-between;
}

.rk-sport-event-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.35;
    margin-bottom: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.rk-sport-event-loc {
    font-size: 0.78125rem;
    color: #64748B;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
}

.rk-sport-event-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid #F1F5F9;
}

.rk-sport-event-pill {
    background: #EFF6FF;
    color: #0057D9;
    border: 1px solid #DBEAFE;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 6px;
}

.rk-sport-event-circle-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #EFF6FF;
    color: #0057D9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

.rk-sport-event-card:hover .rk-sport-event-circle-btn {
    background: #0057D9;
    color: #FFFFFF;
}

/* DETAIL: BOTTOM CTA BANNER (CONSISTENT SPEC) */
.rk-sport-detail-cta {
    background: linear-gradient(135deg, #F0F7FF 0%, #E2EDFC 100%);
    border: 1px solid #BFDBFE;
    border-radius: 16px;
    padding: 38px 48px;
    margin-top: 48px;
    margin-bottom: 40px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 87, 217, 0.06);
}

.rk-sport-detail-cta-sub {
    font-size: 0.8125rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #0057D9;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.rk-sport-detail-cta-title {
    font-size: 1.85rem;
    font-weight: 800;
    color: #0B1E40;
    line-height: 1.25;
    margin-bottom: 8px;
}

.rk-sport-detail-cta-title span.cta-orange {
    color: #FE6502;
}

.rk-sport-detail-cta-desc {
    font-size: 0.9375rem;
    color: #475569;
    line-height: 1.5;
    margin-bottom: 0;
    max-width: 580px;
}

.rk-sport-detail-cta-calendar {
    font-size: 64px;
    color: #0057D9;
    opacity: 0.9;
}

.rk-sport-detail-cta-btn {
    background: #FE6502;
    color: #FFFFFF;
    border-radius: 8px;
    padding: 12px 30px;
    font-weight: 700;
    font-size: 0.9375rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.rk-sport-detail-cta-btn:hover {
    background: #E05000;
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(254, 101, 2, 0.35);
}

/* ==========================================================================
   RUANGTECH PAGE SPECIFIC STYLES (MATCHING MOCKUP - RUANGTECH.PNG)
   ========================================================================== */

/* 1. HERO SECTION */
.rk-rt-hero {
    background-color: #03132B;
    background-image:
        linear-gradient(90deg, #03132B 0%, rgba(3, 19, 43, 0.94) 42%, rgba(3, 19, 43, 0.52) 75%, rgba(3, 19, 43, 0.15) 100%),
        url('../../master-asset/RuangTech-01.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
    position: relative;
    padding: 42px 0 58px;
    color: #FFFFFF;
    overflow: hidden;
}

.rk-rt-hero-title {
    font-size: 2.85rem;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.1;
    margin-bottom: 8px;
}

.rk-rt-hero-sub {
    font-size: 1.25rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.35;
    margin-bottom: 12px;
}

.rk-rt-hero-desc {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.85);
    line-height: 1.6;
    max-width: 500px;
    margin-bottom: 24px;
}

.rk-rt-btn-primary {
    background: #FE6502;
    color: #FFFFFF;
    padding: 12px 26px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.9375rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    transition: all 0.2s ease;
    border: none;
}

.rk-rt-btn-primary:hover {
    background: #E05000;
    color: #FFFFFF;
    box-shadow: 0 4px 16px rgba(254, 101, 2, 0.35);
}

.rk-rt-btn-video {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #FFFFFF;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.9375rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.rk-rt-btn-video:hover {
    background: rgba(255, 255, 255, 0.22);
    border-color: #FFFFFF;
    color: #FFFFFF;
}

.rk-rt-hero-script {
    font-family: 'Caveat', cursive, sans-serif;
    color: #FFFFFF;
    font-size: 2.15rem;
    font-weight: 700;
    text-align: right;
    display: inline-block;
    transform: rotate(-8deg);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    line-height: 1.15;
}

/* 2. FLOATING QUICK HIGHLIGHTS BAR */
.rk-rt-quick-bar {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    box-shadow: 0 8px 30px rgba(3, 19, 43, 0.08);
    padding: 18px 24px;
    margin-top: -24px;
    position: relative;
    z-index: 10;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
}

.rk-rt-quick-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 8px;
    border-right: 1px solid #F1F5F9;
}

.rk-rt-quick-item:last-child {
    border-right: none;
}

.rk-rt-quick-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #EFF6FF;
    color: #0057D9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.rk-rt-quick-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.25;
    margin-bottom: 2px;
}

.rk-rt-quick-sub {
    font-size: 0.75rem;
    color: #64748B;
    line-height: 1.2;
}

@media (max-width: 991px) {
    .rk-rt-quick-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .rk-rt-quick-item {
        border-right: none;
        border-bottom: 1px solid #F1F5F9;
        padding-bottom: 8px;
    }
}

@media (max-width: 576px) {
    .rk-rt-quick-bar {
        grid-template-columns: 1fr;
    }
}

/* SECTION TITLE WITH ORANGE DASH */
.rk-section-badge-bar {
    display: inline-block;
    width: 22px;
    height: 4px;
    background: #FE6502;
    border-radius: 2px;
    vertical-align: middle;
    margin-right: 8px;
}

.rk-rt-link-more {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0057D9;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none !important;
    transition: all 0.2s ease;
}

.rk-rt-link-more:hover {
    color: #003EA3;
    gap: 10px;
}

/* 3. FITUR RUANGTECH 8-GRID */
.rk-rt-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

@media (max-width: 1100px) {
    .rk-rt-feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .rk-rt-feature-grid {
        grid-template-columns: 1fr;
    }
}

.rk-rt-feature-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    min-height: 170px;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.rk-rt-feature-card:hover {
    transform: translateY(-4px);
    border-color: #0057D9;
    box-shadow: 0 10px 28px rgba(0, 87, 217, 0.1);
}

.rk-rt-feat-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 14px;
}

.rk-rt-feat-title {
    font-size: 1.0625rem;
    font-weight: 800;
    color: #0F172A;
    margin-bottom: 6px;
    line-height: 1.25;
}

.rk-rt-feat-desc {
    font-size: 0.84375rem;
    color: #64748B;
    line-height: 1.5;
    margin-bottom: 16px;
    flex-grow: 1;
}

.rk-rt-card-link {
    font-size: 0.84375rem;
    font-weight: 700;
    color: #0057D9;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none !important;
    transition: gap 0.2s ease;
}

.rk-rt-card-link:hover {
    gap: 10px;
    color: #0044A8;
}

/* 4. MIDDLE CTA BANNER */
.rk-rt-cta-banner {
    background-color: #03132B;
    background-image:
        linear-gradient(90deg, #03132B 0%, rgba(3, 19, 43, 0.94) 46%, rgba(3, 19, 43, 0.45) 80%, rgba(3, 19, 43, 0.15) 100%),
        url('../../master-asset/RuangTech-02.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    padding: 42px 48px;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
    margin: 48px 0;
}

.rk-rt-cta-title {
    font-size: 1.75rem;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.25;
    margin-bottom: 10px;
}

.rk-rt-cta-desc {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.88);
    margin-bottom: 22px;
    max-width: 480px;
    line-height: 1.5;
}

.rk-rt-cta-script {
    font-family: 'Caveat', cursive, sans-serif;
    color: #FFFFFF;
    font-size: 1.95rem;
    font-weight: 700;
    text-align: right;
    display: inline-block;
    transform: rotate(-8deg);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    line-height: 1.15;
}

@media (max-width: 768px) {
    .rk-rt-cta-banner {
        padding: 32px 24px;
    }

    .rk-rt-cta-title {
        font-size: 1.4rem;
    }
}

/* 5. EVENT TYPES GRID */
.rk-rt-event-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

@media (max-width: 1100px) {
    .rk-rt-event-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 576px) {
    .rk-rt-event-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

.rk-rt-event-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none !important;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.rk-rt-event-card:hover {
    transform: translateY(-3px);
    border-color: #0057D9;
    box-shadow: 0 8px 24px rgba(0, 87, 217, 0.12);
}

.rk-rt-event-img-wrap {
    height: 110px;
    width: 100%;
    overflow: hidden;
    position: relative;
    background: #F1F5F9;
}

.rk-rt-event-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.rk-rt-event-card:hover .rk-rt-event-img {
    transform: scale(1.05);
}

.rk-rt-event-body {
    padding: 12px 14px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.rk-rt-event-icon {
    font-size: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

.rk-rt-event-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.25;
    margin-bottom: 2px;
}

.rk-rt-event-sub {
    font-size: 0.71875rem;
    color: #64748B;
    line-height: 1.2;
}

/* 6. STATS STRIP */
.rk-rt-stats-strip {
    background: #03132B;
    color: #FFFFFF;
    padding: 30px 0;
    margin-top: 48px;
}

.rk-rt-stat-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.rk-rt-stat-icon {
    font-size: 30px;
    color: #FE6502;
    flex-shrink: 0;
}

.rk-rt-stat-num {
    font-size: 1.625rem;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.1;
}

.rk-rt-stat-lbl {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 2px;
}

/* 7. TESTIMONIAL & BOTTOM DEMO BANNER */
.rk-rt-testimonial-box {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 32px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 16px rgba(0, 33, 70, 0.04);
}

.rk-rt-testi-quote-icon {
    font-size: 32px;
    color: #03132B;
    margin-bottom: 14px;
}

.rk-rt-testi-text {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #1E293B;
    line-height: 1.65;
    margin-bottom: 20px;
}

.rk-rt-testi-author {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.rk-rt-testi-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #EFF6FF;
}

.rk-rt-testi-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.2;
}

.rk-rt-testi-role {
    font-size: 0.78125rem;
    color: #64748B;
    margin-top: 2px;
}

.rk-rt-round-nav {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #CBD5E1;
    background: #FFFFFF;
    color: #334155;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.rk-rt-round-nav:hover {
    background: #0057D9;
    border-color: #0057D9;
    color: #FFFFFF;
}

.rk-rt-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #CBD5E1;
    margin-right: 4px;
    transition: all 0.2s ease;
}

.rk-rt-dot.active {
    background: #0057D9;
    width: 18px;
    border-radius: 4px;
}

/* DEMO BANNER */
.rk-rt-demo-banner {
    background-color: #03132B;
    background-image:
        linear-gradient(90deg, #03132B 0%, rgba(3, 19, 43, 0.94) 52%, rgba(3, 19, 43, 0.45) 82%, rgba(3, 19, 43, 0.15) 100%),
        url('../../master-asset/RuangTech-03.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    padding: 38px 36px;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.rk-rt-demo-title {
    font-size: 1.45rem;
    font-weight: 800;
    color: #FFFFFF;
    line-height: 1.25;
    margin-bottom: 8px;
}

.rk-rt-demo-desc {
    font-size: 0.84375rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 20px;
    max-width: 380px;
    line-height: 1.5;
}

.rk-rt-demo-script {
    font-family: 'Caveat', cursive, sans-serif;
    color: #FFFFFF;
    font-size: 1.85rem;
    font-weight: 700;
    text-align: right;
    display: inline-block;
    transform: rotate(-8deg);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    line-height: 1.15;
}

/* ==========================================================================
   MARKETPLACE COMPONENTS (MATCHES MOCKUP - MARKETPLACE.PNG & DETAILS)
   ========================================================================== */
.rk-mp-hero {
    background-image:
        linear-gradient(90deg, #03132B 0%, rgba(3, 19, 43, 0.94) 42%, rgba(3, 19, 43, 0.45) 75%, rgba(3, 19, 43, 0.1) 100%),
        url('../../master-asset/Marketplace-01.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;
    padding: 44px 0 64px;
    color: #FFFFFF;
    position: relative;
}

.rk-mp-hero-script {
    font-family: 'Caveat', cursive, sans-serif;
    color: #FFFFFF;
    font-size: 2.15rem;
    font-weight: 700;
    text-align: right;
    display: inline-block;
    transform: rotate(-8deg);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    line-height: 1.2;
}

.rk-mp-search-card {
    margin-top: -30px;
    position: relative;
    z-index: 10;
    background: #FFFFFF;
    border-radius: 14px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.08);
    padding: 14px 18px;
}

.rk-mp-val-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.rk-mp-val-card:hover {
    border-color: #CBD5E1;
    transform: translateY(-2px);
}

.rk-mp-cat-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 16px 8px;
    text-align: center;
    display: block;
    text-decoration: none;
    color: #0F172A;
    height: 100%;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.rk-mp-cat-card:hover {
    border-color: #0057D9;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0, 87, 217, 0.08);
}

.rk-mp-promo-banner {
    background-image:
        linear-gradient(90deg, #03132B 0%, rgba(3, 19, 43, 0.94) 48%, rgba(3, 19, 43, 0.45) 80%, rgba(3, 19, 43, 0.1) 100%),
        url('../../master-asset/Marketplace-02.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    border-radius: 16px;
    padding: 40px 48px;
    color: #FFFFFF;
    position: relative;
    overflow: hidden;
}

.rk-mp-promo-script {
    font-family: 'Caveat', cursive, sans-serif;
    color: #FFFFFF;
    font-size: 2rem;
    font-weight: 700;
    text-align: right;
    display: inline-block;
    transform: rotate(-8deg);
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
    line-height: 1.2;
}

.rk-mp-prod-card {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.rk-mp-prod-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px -4px rgba(15, 23, 42, 0.08);
    border-color: #CBD5E1;
}

.rk-mp-prod-thumb {
    height: 140px;
    background: #F8FAFC;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
    padding: 0 !important;
}

.rk-mp-prod-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    padding: 0 !important;
    margin: 0 !important;
    display: block;
}

.rk-mp-prod-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0F172A;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    margin-bottom: 3px;
    line-height: 1.3;
}

.rk-mp-btn-cart {
    width: 100%;
    height: 36px;
    border-radius: 8px;
    border: 1.5px solid #0057D9;
    background: transparent;
    color: #0057D9;
    font-size: 0.8125rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.2s ease;
    text-decoration: none;
    cursor: pointer;
    margin-top: auto;
    padding: 0 12px;
}

.rk-mp-btn-cart:hover {
    background: #0057D9;
    color: #FFFFFF !important;
    text-decoration: none;
}

.rk-mp-action-card {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.rk-mp-action-card:hover {
    transform: translateY(-3px);
    border-color: #CBD5E1;
}

.rk-mp-brand-card {
    background: #FFFFFF;
    border: 1.5px solid #E2E8F0;
    border-radius: 10px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.rk-mp-brand-card:hover {
    border-color: #0057D9;
    box-shadow: 0 4px 12px rgba(0, 87, 217, 0.08);
}

.rk-mp-brand-card img {
    max-height: 38px;
    max-width: 85%;
    object-fit: contain;
    padding: 0 !important;
    margin: 0 !important;
}

/* Marketplace Custom Grids for 100% Mockup Accuracy */
.rk-mp-cat-grid {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 10px;
}

@media (max-width: 1200px) {
    .rk-mp-cat-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 576px) {
    .rk-mp-cat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.rk-mp-prod-grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 14px;
}

@media (max-width: 1200px) {
    .rk-mp-prod-grid-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 576px) {
    .rk-mp-prod-grid-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

.rk-mp-prod-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

@media (max-width: 992px) {
    .rk-mp-prod-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .rk-mp-prod-grid-4 {
        grid-template-columns: repeat(1, 1fr);
    }
}

/* Category Hero (using Marketplace-02.png) */
.rk-mp-hero-category {
    background-image:
        linear-gradient(90deg, #03132B 0%, rgba(3, 19, 43, 0.94) 42%, rgba(3, 19, 43, 0.45) 75%, rgba(3, 19, 43, 0.1) 100%),
        url('../../master-asset/Marketplace-02.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;
    padding: 44px 0 54px;
    color: #FFFFFF;
    position: relative;
}

/* Top Search Bar (For Category & Detail pages) */
.rk-mp-topbar-wrap {
    background: #FFFFFF;
    border-bottom: 1px solid #E2E8F0;
    padding: 12px 0;
}

.rk-mp-topbar-box {
    display: flex;
    align-items: center;
    gap: 18px;
}

.rk-mp-topbar-form {
    display: flex;
    align-items: stretch;
    flex-grow: 1;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    overflow: hidden;
    background: #FFFFFF;
    height: 44px;
}

.rk-mp-topbar-select {
    width: 175px;
    border: none;
    border-right: 1.5px solid #E2E8F0;
    padding: 0 14px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #475569;
    background: #F8FAFC;
    outline: none;
    cursor: pointer;
}

.rk-mp-topbar-input {
    flex-grow: 1;
    border: none;
    padding: 0 16px;
    font-size: 0.84375rem;
    outline: none;
    color: #0F172A;
}

.rk-mp-topbar-btn {
    background: #FE6502;
    border: none;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 0.84375rem;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.rk-mp-topbar-btn:hover {
    background: #E05600;
}

.rk-mp-topbar-actions {
    display: flex;
    align-items: center;
    gap: 18px;
}

.rk-mp-topbar-action-icon {
    position: relative;
    color: #0F172A;
    font-size: 1.35rem;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    padding: 4px;
    transition: color 0.15s ease;
}

.rk-mp-topbar-action-icon:hover {
    color: #FE6502;
}

.rk-mp-topbar-badge {
    position: absolute;
    top: -4px;
    right: -6px;
    background: #FE6502;
    color: #FFFFFF;
    font-size: 0.625rem;
    font-weight: 700;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
}

/* Subcategory Filter Pills */
.rk-mp-subcat-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 8px;
    border: 1px solid #E2E8F0;
    background: #FFFFFF;
    color: #475569;
    font-size: 0.8125rem;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.rk-mp-subcat-pill:hover {
    border-color: #CBD5E1;
    color: #0F172A;
}

.rk-mp-subcat-pill.active {
    background: #FE6502;
    border-color: #FE6502;
    color: #FFFFFF !important;
}

/* Product Detail Styles */
.rk-mp-thumb-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rk-mp-thumb-item {
    width: 60px;
    height: 52px;
    border: 1.5px solid #E2E8F0;
    border-radius: 8px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s ease;
    overflow: hidden;
    padding: 0 !important;
}

.rk-mp-thumb-item.active,
.rk-mp-thumb-item:hover {
    border-color: #FE6502;
}

.rk-mp-thumb-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.rk-mp-main-preview {
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 0 !important;
}

.rk-mp-main-preview img.rk-mp-main-img,
.rk-mp-main-preview>img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    padding: 0 !important;
    max-height: none !important;
}

.rk-mp-zoom-badge {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(15, 23, 42, 0.75);
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    backdrop-filter: blur(4px);
    cursor: pointer;
}

.rk-mp-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #CBD5E1;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #0F172A;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    transition: background 0.15s ease;
}

.rk-mp-nav-arrow:hover {
    background: #FFFFFF;
    color: #FE6502;
}

.rk-mp-nav-arrow.prev {
    left: 10px;
}

.rk-mp-nav-arrow.next {
    right: 10px;
}

/* Size & Color Controls */
.rk-mp-size-btn {
    min-width: 44px;
    height: 38px;
    border: 1.5px solid #E2E8F0;
    border-radius: 6px;
    background: #FFFFFF;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #0F172A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.rk-mp-size-btn.active,
.rk-mp-size-btn:hover {
    border-color: #FE6502;
    color: #FE6502;
    background: #FFF3EB;
}

.rk-mp-color-btn {
    width: 62px;
    height: 36px;
    border: 1.5px solid #E2E8F0;
    border-radius: 6px;
    background: #FFFFFF;
    padding: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
    overflow: hidden;
}

.rk-mp-color-btn.active,
.rk-mp-color-btn:hover {
    border-color: #FE6502;
}

/* Nav Tabs */
.rk-mp-nav-tabs {
    border-bottom: 2px solid #E2E8F0;
    display: flex;
    gap: 24px;
    list-style: none;
    padding: 0;
    margin-bottom: 24px;
    overflow-x: auto;
}

.rk-mp-nav-tab-link {
    padding: 10px 4px;
    font-size: 0.9375rem;
    font-weight: 600;
    color: #64748B;
    text-decoration: none !important;
    display: inline-block;
    position: relative;
    margin-bottom: -2px;
    white-space: nowrap;
}

.rk-mp-nav-tab-link.active {
    color: #FE6502;
    border-bottom: 2.5px solid #FE6502;
}

/* Poster Card without vertical overlap */
.rk-mp-poster-card {
    background: #0F172A;
    border-radius: 12px;
    padding: 0 !important;
    color: #FFFFFF;
    height: auto;
    min-height: 460px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    position: relative;
    border: 1px solid #E2E8F0;
}

/* ==========================================================================
   Marketplace Dropdowns & Selects (Fixes native browser dropdown overlap)
   ========================================================================== */
.form-select,
.rk-form-select {
    display: block !important;
    width: 100% !important;
    padding: 0.45rem 2.25rem 0.45rem 0.75rem !important;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    line-height: 1.5 !important;
    color: #1E293B !important;
    background-color: #FFFFFF !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2364748B' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 10px 7px !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 8px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
    outline: none !important;
    cursor: pointer !important;
}

.form-select:focus,
.rk-form-select:focus {
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

.form-select-sm {
    padding-top: 0.35rem !important;
    padding-bottom: 0.35rem !important;
    padding-left: 0.65rem !important;
    font-size: 0.8125rem !important;
    border-radius: 6px !important;
}

.rk-mp-topbar-select,
.rk-mp-select,
select.rk-mp-select,
.rk-mp-hero-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: #F8FAFC !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23475569' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 10px 7px !important;
    padding-right: 36px !important;
    padding-left: 14px !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #1E293B !important;
    cursor: pointer !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 8px !important;
    height: 44px !important;
    line-height: 1 !important;
}

.rk-mp-topbar-select {
    width: 180px !important;
    border: none !important;
    border-right: 1.5px solid #E2E8F0 !important;
    border-radius: 0 !important;
}

.rk-mp-sort-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: #FFFFFF !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%230F172A' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 10px 7px !important;
    padding: 6px 28px 6px 12px !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 8px !important;
    outline: none !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: #0F172A !important;
    cursor: pointer !important;
    height: 36px !important;
    line-height: 1.5 !important;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.rk-mp-sort-select:focus {
    border-color: #3B82F6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15) !important;
}

/* ==========================================================================
   Marketplace Badges (No squashed borders, consistent sizing)
   ========================================================================== */
.rk-mp-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    font-size: 0.6875rem !important;
    font-weight: 700 !important;
    padding: 4px 8px !important;
    border-radius: 4px !important;
    color: #FFFFFF !important;
    line-height: 1.2 !important;
    z-index: 2;
    text-transform: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.rk-mp-badge-orange {
    background-color: #FE6502 !important;
}

.rk-mp-badge-blue {
    background-color: #0057D9 !important;
}

.rk-mp-badge-red {
    background-color: #E11D48 !important;
}

.rk-mp-badge-green {
    background-color: #10B981 !important;
}

/* ==========================================================================
   Marketplace Avatars (Exact dimensions, ZERO padding)
   ========================================================================== */
.rk-mp-avatar {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    flex-shrink: 0 !important;
    background: #F1F5F9;
}

.rk-mp-avatar-sm {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
    flex-shrink: 0 !important;
    background: #F1F5F9;
}

/* ==========================================================================
   ROLE-BASED DASHBOARDS (EO, PESERTA, SPONSOR) — MASTER 2026 SPECIFICATION
   Matches Mockup - Dasbor EO, Dasbor Peserta, Dasbor Sponsor
   ========================================================================== */

.rk-dash-body {
    background-color: #F8FAFC !important;
    color: #1E293B;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    margin: 0;
    padding: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* 1. Full-Width Topbar across very top of screen (100% viewport width) */
.rk-dash-topbar {
    width: 100%;
    height: 72px;
    min-height: 72px;
    background-color: #FFFFFF;
    border-bottom: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    position: sticky;
    top: 0;
    z-index: 1050;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.rk-dash-topbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 240px;
}

.rk-dash-topbar-logo img {
    height: 38px;
    width: auto;
    object-fit: contain;
    display: block;
}

.rk-dash-menu-toggle {
    background: none;
    border: none;
    color: #1E293B;
    font-size: 1.5rem;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rk-dash-search-container {
    position: relative;
    width: 100%;
    max-width: 540px;
    margin: 0 24px;
    flex: 1;
}

.rk-dash-search-icon {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: #94A3B8;
    font-size: 1.2rem;
    pointer-events: none;
}

.rk-dash-search-input {
    width: 100%;
    height: 42px;
    background-color: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 999px;
    padding-left: 48px;
    padding-right: 20px;
    font-size: 0.86rem;
    color: #1E293B;
    outline: none;
    transition: all 0.2s ease;
}

.rk-dash-search-input::placeholder {
    color: #94A3B8;
}

.rk-dash-search-input:focus {
    background-color: #FFFFFF;
    border-color: #3B82F6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}

.rk-dash-topbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 240px;
    justify-content: flex-end;
}

.rk-dash-notification-wrap {
    position: relative;
}

.rk-dash-bell-btn {
    position: relative;
    color: #475569;
    text-decoration: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #F1F5F9;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.rk-dash-bell-btn:hover {
    color: #0F172A;
    background-color: #E2E8F0;
}

.rk-dash-bell-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    background-color: #EF4444;
    color: #FFFFFF;
    font-size: 0.68rem;
    font-weight: 700;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #FFFFFF;
    line-height: 1;
}

.rk-dash-user-btn {
    display: flex;
    align-items: center;
    background: none;
    border: none;
    padding: 4px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
}

.rk-dash-user-btn:hover {
    background-color: #F1F5F9;
}

.rk-dash-user-thumb {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 10px;
    background-color: #FFFFFF;
    border: 2px solid #E2E8F0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rk-dash-user-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rk-dash-user-title {
    display: block;
    font-size: 0.88rem;
    font-weight: 700;
    color: #0F172A;
    line-height: 1.25;
}

.rk-dash-user-subtitle {
    display: block;
    font-size: 0.75rem;
    color: #64748B;
    font-weight: 400;
}

.rk-dash-chevron {
    font-size: 0.8rem;
    color: #94A3B8;
    margin-left: 6px;
}

.rk-dash-dropdown-menu {
    min-width: 220px;
    border: 1px solid #E2E8F0;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 8px;
}

/* 2. Middle Section: Sidebar + Main Area */
.rk-dash-middle-layout {
    display: flex;
    width: 100%;
    flex: 1;
    min-height: calc(100vh - 72px);
    position: relative;
}

.rk-dash-sidebar {
    width: 260px;
    min-width: 260px;
    background-color: #0A1128;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    z-index: 1020;
    position: sticky;
    top: 72px;
    height: calc(100vh - 72px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.rk-dash-sidebar::-webkit-scrollbar {
    width: 4px;
}

.rk-dash-sidebar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.rk-dash-sidebar-close {
    background: none;
    border: none;
    color: #94A3B8;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 4px;
}

.rk-dash-sidebar-profile {
    padding: 24px 16px 18px;
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.rk-dash-avatar-wrapper {
    margin-bottom: 12px;
    display: flex;
    justify-content: center;
}

.rk-dash-avatar-circle {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    border: 3px solid #FFFFFF;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.rk-dash-avatar-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rk-dash-profile-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.25;
}

.rk-dash-profile-role {
    font-size: 0.78rem;
    color: #94A3B8;
}

.rk-dash-nav {
    padding: 14px 12px;
    flex: 1;
}

.rk-dash-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rk-dash-nav-link {
    display: flex;
    align-items: center;
    padding: 10px 14px;
    color: #94A3B8;
    text-decoration: none;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
}

.rk-dash-nav-link:hover {
    background-color: rgba(255, 255, 255, 0.06);
    color: #FFFFFF;
}

.rk-dash-nav-item.active .rk-dash-nav-link {
    background-color: #F97316;
    color: #FFFFFF !important;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(249, 115, 22, 0.35);
}

.rk-dash-nav-item.active.rk-dash-nav-blue .rk-dash-nav-link {
    background-color: #0066FF;
    color: #FFFFFF !important;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0, 102, 255, 0.35);
}

.rk-nav-icon {
    font-size: 1.2rem;
    margin-right: 12px;
    width: 22px;
    text-align: center;
    flex-shrink: 0;
}

.rk-nav-text {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rk-badge-counter {
    background-color: #EF4444;
    color: #FFFFFF;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 12px;
    line-height: 1;
    margin-left: 8px;
}

/* Sidebar Bottom Promo Card */
.rk-dash-sidebar-bottom {
    padding: 14px;
    margin-top: auto;
}

.rk-dash-promo-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    min-height: 140px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

.rk-dash-promo-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.85) 100%);
    z-index: 1;
}

.rk-dash-promo-content {
    position: relative;
    z-index: 2;
}

.rk-dash-promo-title {
    color: #FFFFFF;
    font-weight: 800;
    font-size: 0.88rem;
    line-height: 1.25;
    margin-bottom: 8px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.rk-dash-promo-btn {
    font-size: 0.78rem;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: 6px;
    width: 100%;
}

/* Mobile Sidebar Backdrop */
.rk-dash-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1015;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.rk-dash-backdrop.active {
    display: block;
    opacity: 1;
}

/* Main Content Area */
.rk-dash-content-area {
    flex: 1;
    min-width: 0;
    background-color: #F8FAFC;
    padding: 24px 32px 48px 32px;
}

/* 3. Global Full-Width Footer */
.rk-dash-global-footer {
    width: 100%;
    background-color: #0A1128;
    margin-top: auto;
    z-index: 10;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.rk-dash-global-footer .rk-footer {
    background-color: transparent !important;
    padding-top: 40px;
    padding-bottom: 24px;
}

/* Responsive adjustments */
@media (max-width: 991.98px) {
    .rk-dash-topbar {
        padding: 0 16px;
        height: 62px;
        min-height: 62px;
    }

    .rk-dash-topbar-left {
        min-width: auto;
    }

    .rk-dash-topbar-right {
        min-width: auto;
        gap: 12px;
    }

    .rk-dash-search-container {
        display: none;
    }

    .rk-dash-middle-layout {
        min-height: calc(100vh - 62px);
    }

    .rk-dash-sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        height: 100vh;
        transform: translateX(-100%);
        z-index: 1060;
    }

    .rk-dash-sidebar.active {
        transform: translateX(0);
    }

    .rk-dash-content-area {
        padding: 16px;
    }
}

/* 3. Hero Banner */
.rk-dash-container {
    padding: 24px 28px;
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
}

.rk-dash-hero {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    min-height: 220px;
    display: flex;
    align-items: center;
    padding: 28px 36px;
    margin-bottom: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.rk-dash-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(10, 17, 40, 0.94) 0%, rgba(10, 17, 40, 0.78) 50%, rgba(10, 17, 40, 0.25) 100%);
    z-index: 1;
}

.rk-dash-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.rk-dash-hero-title {
    color: #FFFFFF;
    font-size: 1.85rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
}

.rk-dash-hero-desc {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.88rem;
    max-width: 520px;
    margin-bottom: 10px;
    line-height: 1.5;
}

.rk-dash-hero-tagline {
    font-family: 'Caveat', cursive;
    font-size: 1.35rem;
    color: #FB923C;
    font-weight: 700;
}

.rk-dash-cursive-badge {
    font-family: 'Caveat', cursive;
    font-size: 1.45rem;
    color: #FFFFFF;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    display: block;
    text-align: right;
    line-height: 1.15;
}

/* 4. Metric Cards */
.rk-dash-metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 24px;
}

.rk-metric-card {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rk-metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
}

.rk-metric-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.rk-metric-icon-box {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rk-metric-growth {
    font-size: 0.78rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 3px;
    background-color: #F0FDF4;
    color: #16A34A;
    padding: 3px 8px;
    border-radius: 12px;
}

.rk-metric-value {
    font-size: 1.65rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.15;
    margin-bottom: 4px;
}

.rk-metric-label {
    font-size: 0.82rem;
    color: #64748B;
    font-weight: 500;
}

/* Color variations */
.bg-blue-subtle {
    background-color: #EFF6FF !important;
}

.bg-primary-subtle {
    background-color: #EFF6FF !important;
}

.bg-success-subtle {
    background-color: #F0FDF4 !important;
}

.bg-purple-subtle {
    background-color: #FAF5FF !important;
}

.text-purple {
    color: #8B5CF6 !important;
}

.bg-warning-subtle {
    background-color: #FFFBEB !important;
}

/* 5. Two-Column Widgets Grid */
.rk-dash-two-cols {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: 20px;
    margin-bottom: 24px;
}

.rk-card-widget {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
    display: flex;
    flex-direction: column;
}

.rk-card-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.rk-widget-title {
    font-size: 1rem;
    font-weight: 700;
    color: #0F172A;
    margin: 0;
}

.rk-widget-link {
    font-size: 0.82rem;
    font-weight: 600;
    color: #2563EB;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.rk-widget-link:hover {
    text-decoration: underline;
}

.rk-dash-select {
    border-radius: 8px;
    border-color: #E2E8F0;
    font-size: 0.82rem;
    padding: 4px 28px 4px 10px;
    background-color: #F8FAFC;
    color: #475569;
}

/* Donut Chart Center Text */
.rk-donut-center-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
}

.rk-donut-num {
    display: block;
    font-size: 1.55rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1;
}

.rk-donut-lbl {
    display: block;
    font-size: 0.72rem;
    color: #64748B;
    margin-top: 2px;
}

/* Timeline (Agenda Hari Ini) */
.rk-timeline {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
}

.rk-timeline-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    position: relative;
}

.rk-timeline-item:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 19px;
    top: 38px;
    bottom: -16px;
    width: 2px;
    background-color: #E2E8F0;
}

.rk-timeline-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 2;
}

.rk-timeline-content {
    flex: 1;
}

.rk-timeline-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: #0F172A;
    line-height: 1.3;
}

/* Event Item Lists */
.rk-event-item-list {
    display: flex;
    flex-direction: column;
}

.rk-event-item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid #F1F5F9;
}

.rk-event-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.rk-event-thumb {
    flex-shrink: 0;
}

.rk-event-info {
    flex: 1;
    min-width: 0;
}

.rk-event-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: #0F172A;
    margin-bottom: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Recommended Cards (Peserta) */
.rk-recom-card {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rk-recom-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.05);
}

.rk-recom-thumb {
    position: relative;
    height: 160px;
    background-color: #E2E8F0;
}

.rk-recom-heart-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.85);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748B;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}

.rk-recom-heart-btn:hover {
    color: #EF4444;
    background-color: #FFFFFF;
}

.rk-recom-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
}

.rk-recom-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: #0F172A;
    margin-bottom: 4px;
}

/* Badges */
.rk-badge-orange {
    background-color: #FFF3E8;
    color: #EA580C;
    font-weight: 600;
}

.rk-badge-green {
    background-color: #ECFDF5;
    color: #059669;
    font-weight: 600;
}

.rk-badge-blue {
    background-color: #EFF6FF;
    color: #2563EB;
    font-weight: 600;
}

.rk-badge-gray {
    background-color: #F1F5F9;
    color: #64748B;
    font-weight: 600;
}

.rk-badge-cyan {
    background-color: #ECFEFF;
    color: #0891B2;
    font-weight: 600;
}

.rk-badge-red {
    background-color: #FEF2F2;
    color: #DC2626;
    font-weight: 600;
}

/* Hexagon Badges */
.rk-hexagon-badge {
    width: 68px;
    height: 68px;
    margin: 0 auto;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.rk-hex-gold {
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: #FFFFFF;
}

.rk-hex-slate {
    background: linear-gradient(135deg, #64748B 0%, #334155 100%);
    color: #FFFFFF;
}

.rk-hex-blue {
    background: linear-gradient(135deg, #3B82F6 0%, #1D4ED8 100%);
    color: #FFFFFF;
}

/* Calendar Table */
.rk-dash-calendar-table td {
    padding: 6px 2px;
    vertical-align: middle;
}

.rk-cal-dot-day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    color: #FFFFFF;
    font-weight: 600;
    font-size: 0.78rem;
}

.rk-cal-blue {
    background-color: #2563EB;
}

.rk-cal-orange {
    background-color: #F97316;
}

.rk-cal-green {
    background-color: #10B981;
}

/* Legends */
.rk-legend-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.rk-legend-sq {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.bg-light-blue {
    background-color: #E2E8F0;
}

/* Bottom Action Cards */
.rk-dash-bottom-cards {
    margin-top: 8px;
    margin-bottom: 24px;
}

.rk-action-card {
    border-radius: 14px;
    padding: 26px;
    display: flex;
    align-items: center;
    gap: 20px;
    min-height: 120px;
}

.rk-action-blue {
    background-color: #EFF6FF;
    border: 1px solid #DBEAFE;
}

.rk-action-peach {
    background-color: #FFF7ED;
    border: 1px solid #FFEDD5;
}

.rk-action-icon-circle {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.rk-action-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 4px;
}

.rk-action-desc {
    font-size: 0.84rem;
    color: #64748B;
    margin-bottom: 12px;
    line-height: 1.4;
}

.rk-action-btn {
    font-size: 0.85rem;
    padding: 8px 18px;
    border-radius: 8px;
}

/* Footer in Dashboard */
.rk-dash-footer-wrap .rk-footer {
    margin-top: auto;
    border-top: 1px solid #E2E8F0;
}

/* Responsive Breakpoints */
@media (max-width: 1200px) {
    .rk-dash-metrics-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .rk-dash-two-cols {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 992px) {
    .rk-dash-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        transform: translateX(-100%);
    }

    .rk-dash-sidebar.active {
        transform: translateX(0);
    }

    .rk-dash-container {
        padding: 16px 18px;
    }

    .rk-dash-hero {
        padding: 22px;
        min-height: 180px;
    }

    .rk-dash-hero-title {
        font-size: 1.45rem;
    }
}

@media (max-width: 576px) {
    .rk-dash-metrics-grid {
        grid-template-columns: 1fr;
    }

    .rk-action-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
    }
}

/* ==========================================================================
   RUANGKOMPETISI.COM — DASHBOARD CONTENT & CARDS SYSTEM (2026)
   Standardized layout, card containers, metrics, tables, and badges
   ========================================================================== */
.rk-dash-content-area {
    flex: 1;
    min-width: 0;
    background-color: #F8FAFC !important;
    min-height: calc(100vh - 72px);
    display: flex;
    flex-direction: column;
}

.rk-dash-content-inner {
    padding: 28px 32px 48px;
    width: 100%;
    max-width: 100%;
}

.rk-dash-page-title {
    font-size: 1.65rem;
    font-weight: 800;
    color: #0F172A;
    letter-spacing: -0.02em;
    margin-bottom: 4px;
}

.rk-dash-card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.02) !important;
    margin-bottom: 24px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.rk-dash-card:hover {
    border-color: #CBD5E1 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}

.rk-dash-card-header {
    padding: 16px 22px;
    border-bottom: 1px solid #F1F5F9;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.rk-dash-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 0;
}

.rk-dash-card-body {
    padding: 22px;
}

.rk-dash-card-footer {
    padding: 14px 22px;
    background: #FAFAFA;
    border-top: 1px solid #F1F5F9;
}

/* Dashboard Table Styles */
.rk-dash-content-inner .table {
    margin-bottom: 0;
}

.rk-dash-content-inner .table thead th {
    background-color: #F8FAFC !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #64748B !important;
    border-bottom: 1px solid #E2E8F0 !important;
    padding: 12px 16px !important;
}

.rk-dash-content-inner .table tbody td {
    padding: 14px 16px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #F1F5F9 !important;
    font-size: 13.5px !important;
}

.rk-dash-content-inner .table tbody tr:hover td {
    background-color: #F8FAFC !important;
}

/* Badge System standard */
.badge.bg-primary-subtle {
    background-color: #EFF6FF !important;
    color: #2563EB !important;
    font-weight: 600 !important;
}

.badge.bg-success-subtle {
    background-color: #ECFDF5 !important;
    color: #10B981 !important;
    font-weight: 600 !important;
}

.badge.bg-warning-subtle {
    background-color: #FFF7ED !important;
    color: #F97316 !important;
    font-weight: 600 !important;
}

.badge.bg-danger-subtle {
    background-color: #FEF2F2 !important;
    color: #EF4444 !important;
    font-weight: 600 !important;
}

.badge.bg-secondary-subtle {
    background-color: #F1F5F9 !important;
    color: #64748B !important;
    font-weight: 600 !important;
}

/* Flex Gap Utilities (Bootstrap 4 compatibility) */
.gap-1 {
    gap: 0.25rem !important;
}

.gap-2 {
    gap: 0.5rem !important;
}

.gap-3 {
    gap: 1rem !important;
}

.gap-4 {
    gap: 1.5rem !important;
}

.row-gap-1 {
    row-gap: 0.25rem !important;
}

.row-gap-2 {
    row-gap: 0.5rem !important;
}

.row-gap-3 {
    row-gap: 1rem !important;
}

/* ==========================================================================
   STEP 30.2 — ROLE PANEL UI & CSS HARMONIZATION (EO, SPONSOR, PESERTA)
   Strictly scoped under .rk-dash-body to guarantee zero public website impact.
   Brand: Navy #021B3D / #002146 | Accent Orange #FE6502 | Primary Blue #0057D9
   ========================================================================== */

/* 1. FORM CONTROLS (Input, Select, Textarea) */
.rk-dash-body .form-control,
.rk-dash-body .form-select {
    height: 44px;
    background-color: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
    border-radius: 10px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    color: #0F172A !important;
    padding: 0.625rem 1rem !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease !important;
}

.rk-dash-body .form-control::placeholder {
    color: #94A3B8 !important;
    font-weight: 400 !important;
}

.rk-dash-body .form-control:hover,
.rk-dash-body .form-select:hover {
    border-color: #94A3B8 !important;
}

.rk-dash-body .form-control:focus,
.rk-dash-body .form-select:focus {
    border-color: #0057D9 !important;
    background-color: #FFFFFF !important;
    box-shadow: 0 0 0 3px rgba(0, 87, 217, 0.12) !important;
    outline: none !important;
}

.rk-dash-body .form-control:disabled,
.rk-dash-body .form-control[readonly],
.rk-dash-body .form-select:disabled {
    background-color: #F1F5F9 !important;
    border-color: #E2E8F0 !important;
    color: #94A3B8 !important;
    cursor: not-allowed !important;
    opacity: 0.85;
}

/* Form Select Custom Chevron */
.rk-dash-body .form-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 16px 16px !important;
    padding-right: 2.5rem !important;
    cursor: pointer;
}

/* Textarea Standard */
.rk-dash-body textarea.form-control {
    height: auto !important;
    min-height: 110px !important;
    padding: 0.75rem 1rem !important;
    resize: vertical !important;
}

/* Form Sizes */
.rk-dash-body .form-control-sm,
.rk-dash-body .form-select-sm {
    height: 36px !important;
    padding: 0.375rem 0.75rem !important;
    font-size: 0.8125rem !important;
    border-radius: 8px !important;
}

.rk-dash-body .form-control-lg,
.rk-dash-body .form-select-lg {
    height: 52px !important;
    padding: 0.75rem 1.25rem !important;
    font-size: 1rem !important;
    border-radius: 12px !important;
}

/* Input Groups */
.rk-dash-body .input-group {
    border-radius: 10px;
}

.rk-dash-body .input-group-text {
    background-color: #F8FAFC !important;
    border: 1.5px solid #CBD5E1 !important;
    color: #64748B !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    padding: 0.625rem 1rem !important;
    border-radius: 10px;
}

.rk-dash-body .input-group>.form-control:not(:first-child),
.rk-dash-body .input-group>.form-select:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.rk-dash-body .input-group>.input-group-text:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    border-right: none !important;
}

/* Form Labels & Helpers */
.rk-dash-body .form-label {
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    color: #1E293B !important;
    margin-bottom: 6px !important;
    display: block !important;
}

.rk-dash-body .form-text,
.rk-dash-body .help-block {
    font-size: 0.78rem !important;
    color: #64748B !important;
    margin-top: 4px !important;
    display: block !important;
}

/* Validation Feedback */
.rk-dash-body .is-invalid,
.rk-dash-body .form-control.is-invalid,
.rk-dash-body .form-select.is-invalid {
    border-color: #DC2626 !important;
    background-color: #FEF2F2 !important;
}

.rk-dash-body .is-invalid:focus,
.rk-dash-body .form-control.is-invalid:focus,
.rk-dash-body .form-select.is-invalid:focus {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

.rk-dash-body .invalid-feedback {
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: #DC2626 !important;
    margin-top: 5px !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* 2. CHECKBOX & RADIO TREATMENT */
.rk-dash-body .form-check {
    margin-bottom: 8px !important;
    padding-left: 1.85rem !important;
    min-height: 24px !important;
    display: flex !important;
    align-items: center !important;
}

.rk-dash-body .form-check-input {
    width: 18px !important;
    height: 18px !important;
    margin-top: 0 !important;
    margin-left: -1.85rem !important;
    background-color: #FFFFFF !important;
    border: 1.5px solid #CBD5E1 !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    flex-shrink: 0 !important;
}

.rk-dash-body .form-check-input[type="checkbox"] {
    border-radius: 5px !important;
}

.rk-dash-body .form-check-input[type="radio"] {
    border-radius: 50% !important;
}

.rk-dash-body .form-check-input:hover {
    border-color: #0057D9 !important;
}

.rk-dash-body .form-check-input:focus {
    border-color: #0057D9 !important;
    box-shadow: 0 0 0 3px rgba(0, 87, 217, 0.15) !important;
    outline: none !important;
}

.rk-dash-body .form-check-input:checked {
    background-color: #0057D9 !important;
    border-color: #0057D9 !important;
}

.rk-dash-body .form-check-input:disabled {
    background-color: #E2E8F0 !important;
    border-color: #CBD5E1 !important;
    cursor: not-allowed !important;
    opacity: 0.7;
}

.rk-dash-body .form-check-label {
    font-size: 0.86rem !important;
    color: #334155 !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    user-select: none !important;
    margin-bottom: 0 !important;
}

/* 3. BUTTON SYSTEM */
.rk-dash-body .btn {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    padding: 9px 20px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    cursor: pointer !important;
    text-decoration: none !important;
    transition: all 0.15s ease !important;
}

/* Primary Brand Action Button */
.rk-dash-body .btn-primary {
    background-color: #0057D9 !important;
    border: 1.5px solid #0057D9 !important;
    color: #FFFFFF !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.rk-dash-body .btn-primary:hover {
    background-color: #0047B8 !important;
    border-color: #0047B8 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 87, 217, 0.25) !important;
}

.rk-dash-body .btn-primary:focus,
.rk-dash-body .btn-primary:active {
    box-shadow: 0 0 0 3px rgba(0, 87, 217, 0.28) !important;
    outline: none !important;
}

/* Brand Accent CTA Button (Orange) */
.rk-dash-body .btn-warning,
.rk-dash-body .btn-accent {
    background-color: #FE6502 !important;
    border: 1.5px solid #FE6502 !important;
    color: #FFFFFF !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.rk-dash-body .btn-warning:hover,
.rk-dash-body .btn-accent:hover {
    background-color: #E55A00 !important;
    border-color: #E55A00 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(254, 101, 2, 0.32) !important;
}

.rk-dash-body .btn-warning:focus,
.rk-dash-body .btn-accent:focus {
    box-shadow: 0 0 0 3px rgba(254, 101, 2, 0.28) !important;
    outline: none !important;
}

/* Secondary / Neutral Button */
.rk-dash-body .btn-secondary,
.rk-dash-body .btn-light {
    background-color: #F1F5F9 !important;
    border: 1.5px solid #E2E8F0 !important;
    color: #334155 !important;
}

.rk-dash-body .btn-secondary:hover,
.rk-dash-body .btn-light:hover {
    background-color: #E2E8F0 !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}

/* Outline Buttons */
.rk-dash-body .btn-outline-primary {
    background-color: transparent !important;
    border: 1.5px solid #0057D9 !important;
    color: #0057D9 !important;
}

.rk-dash-body .btn-outline-primary:hover {
    background-color: #0057D9 !important;
    border-color: #0057D9 !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
}

.rk-dash-body .btn-outline-secondary {
    background-color: transparent !important;
    border: 1.5px solid #CBD5E1 !important;
    color: #475569 !important;
}

.rk-dash-body .btn-outline-secondary:hover {
    background-color: #F8FAFC !important;
    border-color: #94A3B8 !important;
    color: #0F172A !important;
}

.rk-dash-body .btn-outline-danger {
    background-color: transparent !important;
    border: 1.5px solid #DC2626 !important;
    color: #DC2626 !important;
}

.rk-dash-body .btn-outline-danger:hover {
    background-color: #DC2626 !important;
    border-color: #DC2626 !important;
    color: #FFFFFF !important;
}

/* Danger / Destructive Button */
.rk-dash-body .btn-danger {
    background-color: #DC2626 !important;
    border: 1.5px solid #DC2626 !important;
    color: #FFFFFF !important;
}

.rk-dash-body .btn-danger:hover {
    background-color: #B91C1C !important;
    border-color: #B91C1C !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25) !important;
}

/* Success Button */
.rk-dash-body .btn-success {
    background-color: #16A34A !important;
    border: 1.5px solid #16A34A !important;
    color: #FFFFFF !important;
}

.rk-dash-body .btn-success:hover {
    background-color: #15803D !important;
    border-color: #15803D !important;
    color: #FFFFFF !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25) !important;
}

/* Button Sizes */
.rk-dash-body .btn-sm {
    padding: 6px 14px !important;
    font-size: 0.8125rem !important;
    border-radius: 6px !important;
}

.rk-dash-body .btn-lg {
    padding: 12px 26px !important;
    font-size: 0.95rem !important;
    border-radius: 10px !important;
}

/* 4. CARD SYSTEM (Unifies .rk-dash-card and .card) */
.rk-dash-body .rk-dash-card,
.rk-dash-body .card {
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 1px 2px rgba(15, 23, 42, 0.02) !important;
    margin-bottom: 24px;
    overflow: hidden;
    transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.rk-dash-body .rk-dash-card:hover,
.rk-dash-body .card:hover {
    border-color: #CBD5E1 !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}

.rk-dash-body .rk-dash-card-header,
.rk-dash-body .card-header {
    padding: 16px 22px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    background: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.rk-dash-body .rk-dash-card-title,
.rk-dash-body .card-title,
.rk-dash-body .card-header h6,
.rk-dash-body .card-header h5 {
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    color: #0F172A !important;
    margin-bottom: 0 !important;
}

.rk-dash-body .rk-dash-card-body,
.rk-dash-body .card-body {
    padding: 22px !important;
}

.rk-dash-body .rk-dash-card-footer,
.rk-dash-body .card-footer {
    padding: 14px 22px !important;
    background: #FAFAFA !important;
    border-top: 1px solid #F1F5F9 !important;
}

/* 5. TABLE SYSTEM */
.rk-dash-body .table-responsive {
    border-radius: 12px !important;
    border: 1px solid #E2E8F0 !important;
    background: #FFFFFF !important;
    margin-bottom: 20px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.rk-dash-body .table {
    margin-bottom: 0 !important;
    width: 100% !important;
    background-color: #FFFFFF !important;
}

.rk-dash-body .table thead th {
    background-color: #F8FAFC !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #64748B !important;
    border-bottom: 1px solid #E2E8F0 !important;
    border-top: none !important;
    padding: 12px 18px !important;
    white-space: nowrap !important;
}

.rk-dash-body .table tbody td {
    padding: 14px 18px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #F1F5F9 !important;
    font-size: 13.5px !important;
    color: #1E293B !important;
}

.rk-dash-body .table tbody tr:hover td {
    background-color: #F8FAFC !important;
}

.rk-dash-body .table tbody tr:last-child td {
    border-bottom: none !important;
}

/* 6. STATUS BADGES */
.rk-dash-body .badge {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    line-height: 1.35 !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-family: inherit !important;
    white-space: normal !important;
    text-transform: capitalize;
}

.rk-dash-body .badge.bg-primary-subtle,
.rk-dash-body .badge-primary {
    background-color: #EFF6FF !important;
    color: #2563EB !important;
    border: 1px solid rgba(37, 99, 235, 0.2) !important;
}

.rk-dash-body .badge.bg-success-subtle,
.rk-dash-body .badge-success {
    background-color: #ECFDF5 !important;
    color: #059669 !important;
    border: 1px solid rgba(5, 150, 105, 0.2) !important;
}

.rk-dash-body .badge.bg-warning-subtle,
.rk-dash-body .badge-warning {
    background-color: #FFF7ED !important;
    color: #EA580C !important;
    border: 1px solid rgba(234, 88, 12, 0.2) !important;
}

.rk-dash-body .badge.bg-danger-subtle,
.rk-dash-body .badge-danger {
    background-color: #FEF2F2 !important;
    color: #DC2626 !important;
    border: 1px solid rgba(220, 38, 38, 0.2) !important;
}

.rk-dash-body .badge.bg-secondary-subtle,
.rk-dash-body .badge-secondary {
    background-color: #F1F5F9 !important;
    color: #64748B !important;
    border: 1px solid rgba(100, 116, 139, 0.2) !important;
}

.rk-dash-body .badge.bg-info-subtle,
.rk-dash-body .badge-info {
    background-color: #ECFEFF !important;
    color: #0891B2 !important;
    border: 1px solid rgba(8, 145, 178, 0.2) !important;
}

/* 7. ALERTS & NOTIFICATIONS */
.rk-dash-body .alert {
    border-radius: 12px !important;
    padding: 14px 18px !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    border: 1px solid transparent !important;
    margin-bottom: 20px !important;
}

.rk-dash-body .alert-success {
    background-color: #ECFDF5 !important;
    border-color: #A7F3D0 !important;
    color: #065F46 !important;
}

.rk-dash-body .alert-danger {
    background-color: #FEF2F2 !important;
    border-color: #FECACA !important;
    color: #991B1B !important;
}

.rk-dash-body .alert-warning {
    background-color: #FFFBEB !important;
    border-color: #FDE68A !important;
    color: #92400E !important;
}

.rk-dash-body .alert-info {
    background-color: #EFF6FF !important;
    border-color: #BFDBFE !important;
    color: #1E40AF !important;
}

/* 8. MODALS */
.rk-dash-body .modal-content {
    border-radius: 16px !important;
    border: 1px solid #E2E8F0 !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden !important;
    background: #FFFFFF !important;
}

.rk-dash-body .modal-header {
    padding: 18px 24px !important;
    border-bottom: 1px solid #F1F5F9 !important;
    background: #FFFFFF !important;
}

.rk-dash-body .modal-title {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    color: #0F172A !important;
}

.rk-dash-body .modal-body {
    padding: 24px !important;
}

.rk-dash-body .modal-footer {
    padding: 14px 24px !important;
    border-top: 1px solid #F1F5F9 !important;
    background: #FAFAFA !important;
}

/* 9. TABS & PILLS */
.rk-dash-body .nav-tabs {
    border-bottom: 2px solid #E2E8F0 !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
}

.rk-dash-body .nav-tabs .nav-link {
    border: none !important;
    border-bottom: 2px solid transparent !important;
    color: #64748B !important;
    font-weight: 600 !important;
    font-size: 0.88rem !important;
    padding: 10px 18px !important;
    margin-bottom: -2px !important;
    border-radius: 0 !important;
    background: transparent !important;
    transition: all 0.15s ease !important;
}

.rk-dash-body .nav-tabs .nav-link:hover {
    color: #0057D9 !important;
    border-color: transparent !important;
}

.rk-dash-body .nav-tabs .nav-link.active {
    color: #0057D9 !important;
    border-bottom: 2px solid #0057D9 !important;
    background: transparent !important;
}

.rk-dash-body .nav-pills {
    gap: 6px !important;
}

.rk-dash-body .nav-pills .nav-link {
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    padding: 8px 16px !important;
    color: #64748B !important;
    background-color: #F1F5F9 !important;
    transition: all 0.15s ease !important;
}

.rk-dash-body .nav-pills .nav-link:hover {
    color: #0F172A !important;
    background-color: #E2E8F0 !important;
}

.rk-dash-body .nav-pills .nav-link.active {
    background-color: #0057D9 !important;
    color: #FFFFFF !important;
    box-shadow: 0 2px 8px rgba(0, 87, 217, 0.25) !important;
}

/* 10. PAGINATION */
.rk-dash-body .pagination {
    gap: 4px !important;
    margin-bottom: 0 !important;
}

.rk-dash-body .page-item .page-link {
    border-radius: 8px !important;
    border: 1px solid #E2E8F0 !important;
    color: #475569 !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    padding: 6px 14px !important;
    transition: all 0.15s ease !important;
}

.rk-dash-body .page-item.active .page-link {
    background-color: #0057D9 !important;
    border-color: #0057D9 !important;
    color: #FFFFFF !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 6px rgba(0, 87, 217, 0.25) !important;
}

.rk-dash-body .page-item .page-link:hover {
    background-color: #F8FAFC !important;
    border-color: #CBD5E1 !important;
    color: #0057D9 !important;
}

/* 11. EMPTY STATES */
.rk-dash-body .rk-dash-empty-state {
    padding: 40px 20px !important;
    text-align: center !important;
    border-radius: 12px !important;
    background: #FFFFFF !important;
    border: 1px dashed #CBD5E1 !important;
}

.rk-dash-body .rk-dash-empty-state i {
    font-size: 2.75rem !important;
    color: #94A3B8 !important;
    margin-bottom: 12px !important;
    display: inline-block !important;
}

.rk-dash-body .rk-dash-empty-state h6,
.rk-dash-body .rk-dash-empty-state h5 {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #1E293B !important;
    margin-bottom: 6px !important;
}

.rk-dash-body .rk-dash-empty-state p {
    font-size: 0.85rem !important;
    color: #64748B !important;
    max-width: 440px !important;
    margin: 0 auto 16px !important;
    line-height: 1.45 !important;
}

/* 12. FILTER BAR */
.rk-dash-body .rk-dash-filter-bar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    background: #FFFFFF !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
}

/* 13. RESPONSIVE REFINEMENTS */
@media (max-width: 767.98px) {
    .rk-dash-body .rk-dash-content-inner {
        padding: 16px !important;
    }

    .rk-dash-body .rk-dash-card-body,
    .rk-dash-body .card-body {
        padding: 16px !important;
    }

    .rk-dash-body .rk-dash-filter-bar {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .rk-dash-body .rk-dash-filter-bar>* {
        width: 100% !important;
    }
}

/* ==========================================================================
   14. STEP 30.3 — ROLE PANEL UI, COMPONENT & ACTION HARDENING
   ========================================================================== */
.rk-dash-body .table .btn-sm,
.rk-dash-body .btn-sm {
    min-height: 34px !important;
    padding: 6px 12px !important;
    font-size: 0.8125rem !important;
    line-height: 1.35 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
}

.rk-dash-body .btn-icon-sm {
    width: 34px !important;
    height: 34px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.rk-dash-body td .d-flex.gap-1,
.rk-dash-body td .d-flex.gap-2,
.rk-dash-body .table-action-area {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 6px !important;
}

.rk-dash-body .dropdown-menu {
    z-index: 1060 !important;
    border: 1px solid #E2E8F0 !important;
    border-radius: 10px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.08) !important;
    padding: 6px 0 !important;
}

.rk-dash-body .dropdown-item {
    font-size: 0.85rem !important;
    padding: 8px 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.rk-dash-body .badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: normal !important;
    max-width: 100% !important;
    text-align: center !important;
}

.rk-dash-body .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
}

/* ==========================================================================
   15. VENUE DETAIL PAGE STYLES (rk-vd-*) — CENTRALIZED MASTER STYLES
   ========================================================================== */
.rk-vd-hero {
    position: relative;
    min-height: 380px;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.rk-vd-hero-overlay {
    position: absolute;
    inset: 0;
    /* Bukan full gradasi: Sisi kanan & tengah tetap terang alami, gradasi gelap hanya di sisi kiri untuk teks */
    background:
        linear-gradient(180deg, rgba(11, 18, 34, 0.40) 0%, rgba(11, 18, 34, 0) 25%),
        linear-gradient(90deg, rgba(11, 18, 34, 0.88) 0%, rgba(11, 18, 34, 0.70) 32%, rgba(11, 18, 34, 0.18) 55%, rgba(11, 18, 34, 0) 75%);
    pointer-events: none;
}

.rk-vd-hero-content {
    position: relative;
    z-index: 3;
    padding-top: 32px;
    padding-bottom: 36px;
}

.rk-vd-hero-cursive {
    font-family: 'Caveat', cursive, sans-serif;
    font-size: 1.6rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.2;
    transform: rotate(-3deg);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    text-align: right;
}

.rk-vd-hero-title {
    font-size: 2.75rem;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1.1;
    letter-spacing: -0.5px;
    margin-bottom: 8px;
}

@media (max-width: 767px) {
    .rk-vd-hero-title {
        font-size: 1.875rem;
    }

    .rk-vd-hero-cursive {
        font-size: 1.25rem;
        text-align: left;
        margin-bottom: 12px;
    }
}

.rk-vd-hero-sub {
    font-size: 1.0625rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 12px;
}

.rk-vd-hero-desc {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.65;
    max-width: 650px;
    margin-bottom: 18px;
}

.rk-vd-hero-location {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 24px;
}

.rk-vd-btn-primary {
    background: #FE6502;
    color: #fff !important;
    font-weight: 800;
    font-size: 0.875rem;
    border: none;
    border-radius: 8px;
    padding: 11px 24px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(254, 101, 2, 0.4);
    transition: background 0.2s, transform 0.1s;
}

.rk-vd-btn-primary:hover {
    background: #e05600;
    transform: translateY(-1px);
}

.rk-vd-btn-outline {
    background: rgba(11, 18, 34, 0.45);
    color: #fff !important;
    font-weight: 600;
    font-size: 0.875rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    padding: 11px 20px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    backdrop-filter: blur(4px);
    transition: background 0.2s;
}

.rk-vd-btn-outline:hover {
    background: rgba(255, 255, 255, 0.15);
}

.rk-vd-hero-gallery-btn {
    position: absolute;
    bottom: 24px;
    right: 24px;
    z-index: 4;
    background: rgba(11, 18, 34, 0.75);
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    padding: 8px 16px;
    font-size: 0.8125rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    backdrop-filter: blur(6px);
    transition: background 0.2s;
}

.rk-vd-hero-gallery-btn:hover {
    background: rgba(11, 18, 34, 0.95);
}

/* Tabs */
.rk-vd-tabs {
    background: #fff;
    border-bottom: 1px solid #E2E8F0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
}

.rk-vd-tabs-inner {
    display: flex;
    align-items: center;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 8px;
}

.rk-vd-tabs-inner::-webkit-scrollbar {
    display: none;
}

.rk-vd-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 16px;
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    text-decoration: none;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
    transition: all 0.2s;
}

.rk-vd-tab:hover {
    color: #FE6502;
}

.rk-vd-tab.active {
    color: #FE6502;
    border-bottom-color: #FE6502;
}

/* Section Headers */
.rk-vd-sec-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.rk-vd-sec-title {
    font-size: 1.125rem;
    font-weight: 800;
    color: #0F172A;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}

.rk-vd-sec-title::before {
    content: '';
    display: inline-block;
    width: 14px;
    height: 4px;
    background: #FE6502;
    border-radius: 2px;
}

.rk-vd-sec-link {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #1266E3;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.2s;
}

.rk-vd-sec-link:hover {
    color: #0d4eb3;
    gap: 8px;
}

/* Stat Grid */
.rk-vd-stat-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 991px) {
    .rk-vd-stat-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

.rk-vd-stat-box {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 10px 12px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    min-width: 0;
}

.rk-vd-stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #EFF6FF;
    color: #1266E3;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9375rem;
    flex-shrink: 0;
}

.rk-vd-stat-info {
    min-width: 0;
    overflow: hidden;
}

.rk-vd-stat-val {
    font-size: 0.8125rem;
    font-weight: 800;
    color: #0F172A;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rk-vd-stat-lbl {
    font-size: 0.6875rem;
    color: #64748B;
    margin-top: 1px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Facility Grid */
.rk-vd-facility-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

@media (max-width: 991px) {
    .rk-vd-facility-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 575px) {
    .rk-vd-facility-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.rk-vd-facility-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 16px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    transition: transform 0.15s, box-shadow 0.15s;
}

.rk-vd-facility-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.rk-vd-facility-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
}

.rk-vd-facility-lbl {
    font-size: 0.75rem;
    font-weight: 600;
    color: #1E293B;
    line-height: 1.35;
}

/* Gallery Row */
.rk-vd-gallery-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

@media (max-width: 767px) {
    .rk-vd-gallery-row {
        grid-template-columns: repeat(3, 1fr);
    }
}

.rk-vd-gallery-thumb {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
}

.rk-vd-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s;
}

.rk-vd-gallery-thumb:hover img {
    transform: scale(1.05);
}

.rk-vd-gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(11, 18, 34, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 1.125rem;
    cursor: pointer;
    text-align: center;
    padding: 8px;
    transition: background 0.2s;
}

.rk-vd-gallery-overlay:hover {
    background: rgba(11, 18, 34, 0.88);
}

/* Location Card */
.rk-vd-loc-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    padding: 20px;
}

.rk-vd-loc-map-box {
    border-radius: 10px;
    overflow: hidden;
    height: 220px;
    position: relative;
    background: #F1F5F9;
    border: 1px solid #E2E8F0;
}

.rk-vd-loc-map-btn {
    position: absolute;
    bottom: 12px;
    left: 12px;
    z-index: 2;
    background: #1266E3;
    color: #fff !important;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 6px 14px;
    border-radius: 6px;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(18, 102, 227, 0.4);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rk-vd-access-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.75rem;
    line-height: 1.4;
    color: #475569;
    margin-bottom: 7px;
}

.rk-vd-access-icon {
    width: 16px;
    font-size: 0.75rem;
    color: #1266E3;
    flex-shrink: 0;
    margin-top: 2px;
    text-align: center;
}

/* Event Card in Venue */
.rk-vd-event-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

@media (max-width: 991px) {
    .rk-vd-event-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .rk-vd-event-grid {
        grid-template-columns: 1fr;
    }
}

.rk-vd-event-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    overflow: hidden;
    transition: transform 0.15s, box-shadow 0.15s;
    display: flex;
    flex-direction: column;
}

.rk-vd-event-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}

.rk-vd-event-img-wrap {
    position: relative;
    height: 130px;
    background: #F1F5F9;
}

.rk-vd-event-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rk-vd-event-fav {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748B;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: color 0.15s;
}

.rk-vd-event-fav:hover {
    color: #EF4444;
}

.rk-vd-event-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.rk-vd-event-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: #0F172A;
    margin-bottom: 8px;
    line-height: 1.3;
}

.rk-vd-event-date {
    font-size: 0.75rem;
    color: #64748B;
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
}

.rk-vd-event-badge {
    align-self: flex-start;
    display: inline-block;
    background: #EFF6FF;
    color: #1266E3;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 4px;
}

/* Review Cards */
.rk-vd-review-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 12px;
    padding: 20px;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.rk-vd-review-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    background: #E2E8F0;
    flex-shrink: 0;
}

/* Sidebar Booking Box */
.rk-vd-booking-box {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    margin-bottom: 20px;
}

.rk-vd-booking-price {
    font-size: 1.75rem;
    font-weight: 900;
    color: #0F172A;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

.rk-vd-booking-note {
    font-size: 0.75rem;
    color: #64748B;
    line-height: 1.5;
    margin-top: 4px;
    margin-bottom: 20px;
}

.rk-vd-field-lbl {
    font-size: 0.75rem;
    font-weight: 700;
    color: #334155;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.rk-vd-input {
    border: 1px solid #CBD5E1;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 0.8125rem;
    color: #1E293B;
    background: #fff;
    width: 100%;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.rk-vd-input:focus {
    border-color: #FE6502;
    box-shadow: 0 0 0 3px rgba(254, 101, 2, 0.12);
}

.rk-vd-btn-cta {
    background: #FE6502;
    color: #fff !important;
    font-weight: 800;
    font-size: 0.9375rem;
    border: none;
    border-radius: 8px;
    width: 100%;
    padding: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(254, 101, 2, 0.35);
    transition: background 0.2s, transform 0.1s;
}

.rk-vd-btn-cta:hover {
    background: #e05600;
    transform: translateY(-1px);
}

/* Sidebar Contact Box */
.rk-vd-contact-card {
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 24px;
    margin-bottom: 20px;
}

.rk-vd-contact-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #F1F5F9;
    font-size: 0.8125rem;
}

.rk-vd-contact-item:last-child {
    border-bottom: none;
}

.rk-vd-contact-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
    color: #1266E3;
}

.rk-vd-ask-btn {
    border: 1.5px solid #1266E3;
    background: #fff;
    color: #1266E3 !important;
    font-weight: 700;
    font-size: 0.875rem;
    border-radius: 8px;
    width: 100%;
    padding: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.2s;
    margin-top: 14px;
}

.rk-vd-ask-btn:hover {
    background: #1266E3;
    color: #fff !important;
}

/* Sidebar Promo Card with Layout Gradient (Half Photo, Half Dark Navy + Orange Bottom Bar) */
.rk-vd-banner-card {
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    min-height: 480px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.rk-vd-banner-overlay {
    position: absolute;
    inset: 0;
    /* Bukan full gradasi: bagian atas bening/transparan memperlihatkan foto venue, bagian bawah gradasi navy pekat */
    background: linear-gradient(180deg, rgba(8, 20, 48, 0.10) 0%, rgba(8, 20, 48, 0.05) 30%, rgba(8, 20, 48, 0.85) 50%, rgba(8, 20, 48, 0.98) 70%, #081430 100%);
    pointer-events: none;
    z-index: 1;
}

.rk-vd-banner-top-content {
    position: relative;
    z-index: 2;
    padding: 24px 20px 0;
}

.rk-vd-banner-cursive {
    font-family: 'Caveat', cursive, sans-serif;
    font-size: 1.625rem;
    font-weight: 700;
    color: #FFFFFF;
    line-height: 1.15;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
}

.rk-vd-banner-line {
    width: 60px;
    height: 3px;
    background: #FE6502;
    border-radius: 2px;
    margin-top: 6px;
    box-shadow: 0 1px 4px rgba(254, 101, 2, 0.6);
}

.rk-vd-banner-bottom-content {
    position: relative;
    z-index: 2;
    padding: 20px 20px 14px;
    margin-top: auto;
}

.rk-vd-banner-cat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: #FFFFFF;
}

.rk-vd-banner-cat i {
    width: 20px;
    font-size: 0.9375rem;
    color: #FFFFFF;
    text-align: center;
}

.rk-vd-banner-bottom {
    position: relative;
    z-index: 2;
    background: #FE6502;
    color: #FFFFFF;
    font-size: 0.875rem;
    font-weight: 800;
    text-align: center;
    padding: 12px 16px;
    letter-spacing: 0.3px;
}

/* Gallery Lightbox Modal (Uniform Pop-up with Prev/Next Navigation) */
.rk-vd-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(11, 18, 34, 0.92);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.rk-vd-lightbox.is-open {
    display: flex;
    opacity: 1;
}

.rk-vd-lightbox-dialog {
    position: relative;
    max-width: 960px;
    width: 100%;
    background: #0B1222;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    display: flex;
    flex-direction: column;
}

.rk-vd-lightbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.875rem;
    font-weight: 600;
}

.rk-vd-lightbox-close {
    background: transparent;
    border: none;
    color: #fff;
    font-size: 1.25rem;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}

.rk-vd-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.15);
}

.rk-vd-lightbox-stage {
    position: relative;
    width: 100%;
    height: 520px;
    max-height: 70vh;
    background: #050914;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

@media (max-width: 767px) {
    .rk-vd-lightbox-stage {
        height: 320px;
    }
}

.rk-vd-lightbox-img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    transition: opacity 0.2s ease;
}

.rk-vd-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(11, 18, 34, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.125rem;
    transition: background 0.2s, transform 0.15s;
    z-index: 5;
}

.rk-vd-lightbox-nav:hover {
    background: #FE6502;
    border-color: #FE6502;
    transform: translateY(-50%) scale(1.05);
}

.rk-vd-lightbox-prev {
    left: 16px;
}

.rk-vd-lightbox-next {
    right: 16px;
}

.rk-vd-lightbox-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8125rem;
}