/* Page 6 traffic dashboard.
 * Component and responsive rules retain their original cascade order.
 * Edit this file rather than adding inline <style> blocks to the PHP page.
 */

    html, body { margin: 0; padding: 0; width: 100vw; height: 100vh; overflow: hidden !important; background-color: #050b14; display: flex; flex-direction: column; font-family: system-ui, sans-serif; }
    .tv-dashboard-wrapper { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; width: 100%; }

    /* ==========================================
       HERO BANNER - CONCEPT B / PAJ SMART MOBILITY
       Background: images/bas-bg4.png
       Recommended image size: 3840 x 400 px
    ========================================== */

    @keyframes pageHeroSweep {
        0% { left: -500px; opacity: 0; }
        12% { opacity: .55; }
        86% { opacity: .55; }
        100% { left: calc(100% + 500px); opacity: 0; }
    }

    .paj-back-btn {
        position: relative;
        z-index: 3;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        background:
            linear-gradient(
                135deg,
                rgba(13, 75, 125, 0.76),
                rgba(7, 44, 81, 0.72)
            );
        border: 1px solid rgba(104, 220, 255, 0.66);
        color: #ffffff;
        padding: clamp(8px, 1.2vh, 16px) clamp(12px, 1.5vw, 25px);
        border-radius: 12px;
        text-decoration: none;
        font-weight: 700;
        white-space: nowrap;
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.10),
            0 12px 28px rgba(0,0,0,0.20),
            0 0 18px rgba(41,168,224,0.12);
        transition:
            transform .30s ease,
            background .30s ease,
            border-color .30s ease,
            box-shadow .30s ease;
    }

    .paj-back-btn:hover {
        background:
            linear-gradient(
                135deg,
                rgba(34, 159, 215, 0.42),
                rgba(8, 69, 116, 0.88)
            );
        color: #ffffff;
        border-color: #7ce4ff;
        transform: translateY(-3px);
        box-shadow:
            0 14px 32px rgba(0,0,0,0.25),
            0 0 26px rgba(41,168,224,0.27);
    }

    @media (max-width: 768px) {

        .paj-back-btn {
            padding: 10px 14px;
        }
    }

    /* ===================== LISTING GRID ===================== */
    .workspace-layout { flex: 1; position: relative; display: flex; flex-direction: column; padding: 25px 40px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
    .listing-header { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; margin-bottom: 20px; gap: 16px; }
    .category-view-hidden { display: none !important; }
    .study-card.category-hidden { display: none !important; }

    /* ===================== PEMILIHAN KATEGORI PROJEK ===================== */
    .category-select-screen { flex: 1; display: flex; align-items: center; justify-content: center; padding: 30px 40px; overflow: hidden; }
    .category-select-inner { width: 100%; max-width: 1100px; text-align: center; }
    .category-select-kicker { color: #29a8e0; font-weight: 800; font-size: 22px; letter-spacing: 0.5px; text-transform: uppercase; }
    .category-select-desc { color: #94a3b8; font-size: 16px; margin: 10px auto 35px; max-width: 640px; }
    .category-select-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
    .category-select-card {
        background: linear-gradient(160deg, rgba(41,168,224,0.10) 0%, rgba(5,11,20,0.6) 100%);
        border: 2px solid rgba(41,168,224,0.25);
        border-radius: 18px;
        padding: 40px 30px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        cursor: pointer;
        transition: 0.3s cubic-bezier(0.4,0,0.2,1);
        color: #fff;
    }
    .category-select-card:hover {
        transform: translateY(-8px);
        border-color: #29a8e0;
        box-shadow: 0 20px 45px -15px rgba(41,168,224,0.5);
        background: linear-gradient(160deg, rgba(41,168,224,0.18) 0%, rgba(5,11,20,0.7) 100%);
    }
    .category-select-icon { font-size: 44px; color: #29a8e0; margin-bottom: 18px; }
    .category-select-title { font-size: 24px; font-weight: 800; text-transform: uppercase; margin-bottom: 10px; }
    .category-select-sub { font-size: 15px; color: #94a3b8; line-height: 1.5; margin-bottom: 18px; }
    .category-select-count { font-family: monospace; font-size: 14px; color: #29a8e0; font-weight: 700; background: rgba(41,168,224,0.12); padding: 6px 16px; border-radius: 20px; margin-bottom: 18px; }
    .category-select-cta { font-size: 15px; font-weight: 700; color: #29a8e0; display: flex; align-items: center; }
    @media (max-width: 800px) {
        .category-select-grid { grid-template-columns: 1fr; }
        .category-select-screen { padding: 20px; }
    }

    .category-back-btn {
        display: flex; align-items: center; gap: 8px;
        background: rgba(255,255,255,0.04); border: 2px solid rgba(255,255,255,0.14);
        color: #cbd5e1; padding: 10px 18px; border-radius: 10px; font-size: 15px; font-weight: 700;
        cursor: pointer; transition: 0.25s; flex-shrink: 0;
    }
    .category-back-btn:hover { border-color: #29a8e0; color: #29a8e0; background: rgba(41,168,224,0.08); }
    .section-title { font-size: 20px; font-weight: 700; color: #29a8e0; letter-spacing: 1.5px; text-transform: uppercase; margin: 0; }
    
    .kajian-grid { 
        flex: 1; display: flex; flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; 
        gap: 30px; padding: 10px 10px 30px 10px; scroll-behavior: smooth;
    }
    .kajian-grid::-webkit-scrollbar { height: 12px; }
    .kajian-grid::-webkit-scrollbar-thumb { background: rgba(41, 168, 224, 0.4); border-radius: 10px; }
    .kajian-grid::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); border-radius: 10px; }

    .study-card {
        --radius: 16px; --ease: cubic-bezier(0.22, 1, 0.36, 1); border-radius: var(--radius); overflow: hidden; isolation: isolate;
        transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), filter 0.4s var(--ease);
        width: 400px; flex-shrink: 0; scroll-snap-align: start; display: flex; flex-direction: column;
    }
    .study-card-visual { position: relative; width: 100%; height: 100%; overflow: hidden; background: #0d1b2a; display: flex; flex-direction: column;}
    .study-card-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transform: none; transition: transform 0.55s var(--ease), filter 0.55s var(--ease); z-index: 0; image-rendering: auto; backface-visibility: hidden; }
    .study-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(5, 11, 20, 0.95) 0%, rgba(5, 11, 20, 0.4) 60%, transparent 100%); z-index: 1; opacity: 1; }
    .study-card-badge-no { position: absolute; top: 15px; left: 15px; z-index: 3; background: rgba(10, 16, 38, 0.82); color: #29a8e0; font-weight: 800; font-size: 18px; padding: 8px 18px; border-radius: 10px; font-family: monospace; }
    
    .study-card-title-bar { position: absolute; inset: auto 0 0; padding: 30px 20px 20px; z-index: 2; width: 100%;}
    .study-card-panel-title { font-size: 20px; font-weight: 800; color: #fff; line-height: 1.35; text-transform: uppercase; }
    .study-card-desc { font-size: 15px; color: #94a3b8; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin-top: 8px;}

    .kajian-grid:hover .study-card:not(:hover) { opacity: 0.5; filter: blur(3px); transform: scale(0.97); }
    .study-card:hover { z-index: 5; transform: translateY(-8px) scale(1.02); box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.6); outline: 3px solid #29a8e0; outline-offset: 2px; }
    .study-card:hover .study-card-photo { transform: scale(1.015); filter: brightness(1.08); }

    /* Card image quality protection */
    .study-card-visual { contain: paint; }
    .study-card-photo[src$=".png"], .study-card-photo[src$=".jpg"], .study-card-photo[src$=".jpeg"], .study-card-photo[src$=".webp"] {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    /* ===================== DYNAMIC DETAIL PANE ===================== */
    #project-detail-pane { top: 0; left: 0; right: 0; bottom: 0; background: #050b14; z-index: 60;
        display: flex; flex-direction: column; padding: 40px 50px; transform: translateX(100%); opacity: 0;
        transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none;
    }
    .detail-open #project-detail-pane { transform: translateX(0); opacity: 1; pointer-events: auto; }
    .detail-open .workspace-layout { transform: translateX(-100%); opacity: 0; pointer-events: none; }
    
    /* Vertical Side Navigation */
    .side-nav-bar { width: 380px; flex-shrink: 0; display: flex; flex-direction: column; gap: 15px; padding-right: 20px; }
    .side-nav-bar::-webkit-scrollbar { width: 8px; }
    .side-nav-bar::-webkit-scrollbar-thumb { background: rgba(41, 168, 224, 0.4); border-radius: 8px; }
    
    .side-menu-btn {
        display: flex; align-items: center; justify-content: space-between; width: 100%;
        padding: 22px 30px; background: rgba(255, 255, 255, 0.03);
        border: 1px solid rgba(255, 255, 255, 0.05); border-left: 6px solid transparent; border-radius: 16px;
        color: #94a3b8; font-size: 20px; font-weight: 700; text-transform: uppercase;
        transition: all 0.3s ease; cursor: pointer; text-align: left; letter-spacing: 0.5px;
    }
    .side-menu-btn i.icon-left { font-size: 28px; margin-right: 18px; width: 35px; text-align: center; }
    .side-menu-btn i.icon-right { font-size: 24px; opacity: 0.5; transition: 0.3s;}
    .side-menu-btn:hover { background: rgba(41, 168, 224, 0.08); color: #fff; border-color: rgba(41, 168, 224, 0.2); }
    .side-menu-btn:hover i.icon-right { opacity: 1; transform: translateX(5px); color: #29a8e0;}
    .side-menu-btn.active {
        background: linear-gradient(90deg, rgba(41, 168, 224, 0.15) 0%, transparent 100%); border-color: rgba(41, 168, 224, 0.3); border-left: 8px solid #29a8e0; box-shadow: 0 4px 20px rgba(41, 168, 224, 0.15);
    }
    .side-menu-btn.active i { opacity: 1; color: #29a8e0; }

    .side-nav-content { min-width: 0; background: rgba(0,0,0,0.3); border: 2px solid rgba(41, 168, 224, 0.15); border-radius: 20px; position: relative; }
    
    .content-pane { display: none; width: 100%; padding: 50px; animation: fadeInPane 0.4s ease; }
    .content-pane.active { display: flex; flex-direction: column; }
    @keyframes fadeInPane { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }

    .content-pane::-webkit-scrollbar { width: 10px; }
    .content-pane::-webkit-scrollbar-thumb { background: rgba(41, 168, 224, 0.4); border-radius: 10px; }

    /* CSS Modul Dinamik */
    .pane-title { font-size: 34px; font-weight: 800; color: #29a8e0; text-transform: uppercase; margin-bottom: 30px; border-bottom: 2px dashed rgba(255,255,255,0.1); padding-bottom: 20px; display: flex; align-items: center; gap: 15px;}
    .pane-desc { font-size: 26px; color: #cbd5e1; line-height: 1.7; margin-bottom: 40px;}
    .pane-map-img { width: 100%; max-height: 650px; object-fit: contain; border-radius: 16px; background: #000; border: 1px solid rgba(41,168,224,0.3); margin-bottom: 35px;}

    /* Grid Maklumat Utama */
    .box-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); gap: 25px; }
    .info-box { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 30px; display: flex; align-items: flex-start; gap: 25px; transition: 0.3s;}
    .info-box:hover { background: rgba(41,168,224,0.08); border-color: rgba(41,168,224,0.3); transform: translateY(-4px);}
    .info-box i { font-size: 45px; color: #29a8e0; background: rgba(41,168,224,0.1); width: 85px; height: 85px; border-radius: 16px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
    .ib-title { font-size: 20px; color: #94a3b8; font-weight: 700; text-transform: uppercase; margin-bottom: 10px;}
    .ib-val { font-size: 28px; color: #fff; font-weight: 700; line-height: 1.4;}

    /* Senarai Komponen */
    .clean-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px;}
    .clean-list li { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); padding: 25px 30px; border-radius: 16px; font-size: 26px; color: #e2e8f0; display: flex; align-items: center; gap: 20px;}
    .clean-list li::before { content: "\F26A"; font-family: "bootstrap-icons"; color: #29a8e0; font-size: 30px; }

    /* ---------------------------------------------------------------- */
    /* GALERI — TAB FOLDER + GRID MEDIA */
    /* ---------------------------------------------------------------- */
    .gallery-showcase{
        display:flex;
        flex-direction:column;
        gap:20px;
    }
    .gallery-folder-switcher{
        display:grid;
        grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
        gap:14px;
        align-items:stretch;
    }
    .gallery-folder-btn{
        appearance:none;
        border:2px solid rgba(40,72,122,.95);
        background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(237,244,255,.98));
        color:#0b1c3e;
        border-radius:10px;
        min-height:58px;
        font-size:18px;
        font-weight:900;
        text-transform:uppercase;
        letter-spacing:.25px;
        padding:14px 18px;
        display:flex;
        align-items:center;
        justify-content:center;
        text-align:center;
        cursor:pointer;
        transition:all .22s ease;
        box-shadow:0 10px 24px rgba(3,16,39,.12);
    }
    .gallery-folder-btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(3,16,39,.16);}
    .gallery-folder-btn.active{
        background:linear-gradient(180deg, #fff76c, #f3e400);
        border-color:#263b74;
        color:#111827;
        box-shadow:0 14px 28px rgba(243,228,0,.18);
    }
    .gallery-folder-content{display:none;}
    .gallery-folder-content.active{display:block;}
    .gallery-media-grid{
        display:grid;
        grid-template-columns:repeat(3, minmax(0,1fr));
        gap:14px;
        width:100%;
        max-width:1180px;
        margin:0 auto;
        align-items:start;
    }
    .gallery-media-card{
        position:relative;
        border-radius:0;
        overflow:hidden;
        background:#0b1733;
        border:1px solid rgba(255,255,255,.10);
        box-shadow:0 14px 30px rgba(3,16,39,.16);
        aspect-ratio: 16 / 10;
        max-height:260px;
        cursor:pointer;
        transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    }
    .gallery-media-card:hover{
        transform:translateY(-3px);
        border-color:rgba(255,244,77,.68);
        box-shadow:0 18px 34px rgba(3,16,39,.2);
    }
    .gallery-media-card img,
    .gallery-media-card video{
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
        transition:transform .28s ease, filter .28s ease;
    }
    .gallery-media-card:hover img,
    .gallery-media-card:hover video{
        transform:scale(1.025);
        filter:brightness(1.05);
    }
    .gallery-media-overlay{
        position:absolute;
        inset:auto 0 0 0;
        padding:8px 10px;
        background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.78));
        display:flex;
        justify-content:space-between;
        align-items:center;
        gap:12px;
        color:#fff;
        font-size:12px;
        font-weight:700;
    }
    .gallery-media-type{
        display:inline-flex;
        align-items:center;
        gap:6px;
        padding:6px 10px;
        border-radius:999px;
        background:rgba(255,255,255,.12);
        backdrop-filter:blur(8px);
        font-size:12px;
        text-transform:uppercase;
        letter-spacing:.2px;
    }
    .gallery-folder-meta{
        color:#d9e8ff;
        font-size:16px;
        line-height:1.55;
        margin-bottom:6px;
    }

    /* FULLSCREEN MODAL UNTUK GALERI (LIGHTBOX) */
    .modal-fullscreen-custom { 
        position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(5,11,20,0.98); 
        z-index: 999999; display: flex; flex-direction: column; opacity: 0; pointer-events: none; 
        transition: 0.4s ease; backdrop-filter: blur(15px); 
    }
    .modal-fullscreen-custom.active { opacity: 1; pointer-events: auto; }
    
    .modal-title-overlay { 
        position: absolute; top: 40px; left: 50px; color: #fff; font-size: 32px; font-weight: 800; 
        text-transform: uppercase; z-index: 10; text-shadow: 0 4px 10px rgba(0,0,0,0.8); 
        border-left: 6px solid #29a8e0; padding-left: 15px; 
    }
    
    .btn-close-modal { 
        position: absolute; top: 30px; right: 40px; background: rgba(255,255,255,0.1); 
        border: 2px solid rgba(255,255,255,0.2); color: #fff; width: 60px; height: 60px; 
        border-radius: 50%; font-size: 28px; z-index: 10; cursor: pointer; transition: 0.3s; 
    }
    .btn-close-modal:hover { background: #ef4444; border-color: #ef4444; transform: rotate(90deg); }

    .gallery-single-view{
        flex:1;
        width:100%;
        height:100%;
        display:flex;
        align-items:center;
        justify-content:center;
        padding:92px 34px 28px;
        overflow:hidden;
    }
    .gallery-single-view img,
    .gallery-single-view video{
        display:block;
        width:auto;
        height:auto;
        max-width:88vw;
        max-height:78vh;
        object-fit:contain;
        border-radius:16px;
        box-shadow:0 24px 70px rgba(0,0,0,.58);
        background:#020711;
    }
    .gallery-single-view img{
        image-rendering:auto;
        transform-origin:center center;
    }
    @media (max-width: 1366px){
        .gallery-single-view{padding:82px 24px 22px;}
        .gallery-single-view img,
        .gallery-single-view video{max-width:90vw;max-height:76vh;}
    }
    .gallery-single-empty{
        color:#fff;
        font-size:30px;
        font-weight:800;
        text-align:center;
    }

    /* Document Section CSS */
    .qr-box-container {
        width: 350px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; 
        justify-content: center; background: rgba(255,255,255,0.03); padding: 40px; 
        border-radius: 16px; border: 1px solid rgba(41,168,224,0.3); box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    }
    .qr-box-container img { width: 100%; border-radius: 12px; border: 8px solid #fff; }

    /* ---------------------------------------------------------------- */
    /* GAYA BARU UNTUK TEKS & GAMBAR (KIRI GAMBAR, KANAN TEKS) */
    /* ---------------------------------------------------------------- */
    .text-image-split {
        display: flex; flex-direction: row; gap: 40px; align-items: flex-start; margin-bottom: 40px;
    }
    .text-image-split .image-side {
        flex: 0 0 45%; /* Gambar ambil 45% dari lebar */
    }
    .text-image-split .image-side img {
        width: 100%; height: auto; max-height: 550px; object-fit: cover; border-radius: 16px; 
        border: 1px solid rgba(255,255,255,0.1); box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    }
    .text-image-split .text-side {
        flex: 1; /* Teks ambil baki ruang */
    }
    .empty-state { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: rgba(255,255,255,0.3); font-size: 26px; text-align: center; padding: 50px;}
    .empty-state i { font-size: 80px; margin-bottom: 20px; color: rgba(41,168,224,0.3); }

    /* =========================================================
        RTS-LIKE DETAIL LAYOUT — NEW VISUAL OVERRIDE
        ========================================================= */
    #project-detail-pane{
        padding:0 !important;
        background:
            radial-gradient(circle at 78% 18%, rgba(31,115,255,.25), transparent 24%),
            radial-gradient(circle at 28% 82%, rgba(0,211,255,.13), transparent 28%),
            linear-gradient(135deg, #06152f 0%, #082a59 46%, #0b3a75 100%) !important;
        color:#eaf4ff;
    }

    #project-detail-pane::after{
        content:"";
        position:absolute;
        inset:0;
        pointer-events:none;
        background:
            linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
        background-size:42px 42px;
        mask-image:linear-gradient(to bottom, rgba(0,0,0,.7), transparent 85%);
        z-index:0;
    }

    #project-detail-pane > *{position:relative; z-index:1;}

    #project-detail-pane > .d-flex.align-items-center.justify-content-between{
        position:absolute;
        right:22px;
        top:18px;
        z-index:30;
        margin:0 !important;
        padding:0 !important;
        border:0 !important;
        width:auto;
    }

    #project-detail-pane .dashboard-header-title{display:none !important;}

    #project-detail-pane .paj-back-btn{
        border:1px solid rgba(7,39,82,.18) !important;
        background:rgba(255,255,255,.86) !important;
        color:#0b2d5c !important;
        box-shadow:0 10px 28px rgba(7,39,82,.15);
        backdrop-filter:blur(12px);
        padding:11px 18px !important;
        font-size:15px !important;
        border-radius:12px !important;
    }

    #project-detail-pane > .d-flex.flex-row{
        gap:0 !important;
        height:100%;
    }

    .side-nav-bar{
        width:230px !important;
        padding:24px 15px 18px !important;
        gap:8px !important;
        background:linear-gradient(180deg,#041a36 0%,#062447 58%,#07315d 100%);
        border-right:1px solid rgba(255,255,255,.12);
        box-shadow:14px 0 34px rgba(3,23,48,.24);
    }

    .side-nav-bar::before{
        content:attr(data-project-code);
        display:flex;
        align-items:center;
        justify-content:center;
        width:170px;
        min-height:58px;
        margin:0 auto 18px;
        padding:8px 12px;
        color:#fff;
        font-size:19px;
        line-height:1.15;
        font-weight:900;
        font-style:italic;
        letter-spacing:-.3px;
        text-align:center;
        text-transform:uppercase;
        white-space:normal;
        text-shadow:0 3px 12px rgba(0,0,0,.38);
        border-bottom:3px solid #e11d48;
    }

    /* Warna lencana kategori: Quick Win = biru/teal, Jangka Panjang = oren/emas */
    .side-nav-bar[data-project-category="jangka_panjang"]::before{
        border-bottom-color:#f59e0b;
        background:rgba(245,158,11,.12);
        border-radius:10px 10px 0 0;
    }
    .side-nav-bar[data-project-category="quick_win"]::before{
        border-bottom-color:#20d3ce;
        background:rgba(32,211,206,.12);
        border-radius:10px 10px 0 0;
    }

    .side-menu-btn{
        min-height:68px;
        padding:13px 14px !important;
        border:1px solid transparent !important;
        border-left:4px solid transparent !important;
        border-radius:10px !important;
        background:rgba(255,255,255,.03) !important;
        color:rgba(255,255,255,.88) !important;
        font-size:14px !important;
        letter-spacing:.2px !important;
        box-shadow:none !important;
        transition:background .2s ease, transform .2s ease, border-color .2s ease;
    }

    .side-menu-btn > div{
        display:flex;
        align-items:center;
        min-width:0;
    }

    .side-menu-btn i.icon-left{
        width:34px !important;
        margin-right:10px !important;
        font-size:23px !important;
        color:#fff !important;
    }

    .side-menu-btn i.icon-right{display:none;}

    .side-menu-btn:hover{
        background:rgba(255,255,255,.08) !important;
        transform:translateX(2px);
    }

    /* ===== Warna berlainan untuk setiap subtopik (ikut susunan tab) ===== */
    .side-menu-btn:nth-child(8n+1){ border-left-color:#29a8e0 !important; }
    .side-menu-btn:nth-child(8n+1) i.icon-left{ color:#29a8e0 !important; }
    .side-menu-btn:nth-child(8n+2){ border-left-color:#22c55e !important; }
    .side-menu-btn:nth-child(8n+2) i.icon-left{ color:#22c55e !important; }
    .side-menu-btn:nth-child(8n+3){ border-left-color:#f97316 !important; }
    .side-menu-btn:nth-child(8n+3) i.icon-left{ color:#f97316 !important; }
    .side-menu-btn:nth-child(8n+4){ border-left-color:#a855f7 !important; }
    .side-menu-btn:nth-child(8n+4) i.icon-left{ color:#a855f7 !important; }
    .side-menu-btn:nth-child(8n+5){ border-left-color:#14b8a6 !important; }
    .side-menu-btn:nth-child(8n+5) i.icon-left{ color:#14b8a6 !important; }
    .side-menu-btn:nth-child(8n+6){ border-left-color:#ec4899 !important; }
    .side-menu-btn:nth-child(8n+6) i.icon-left{ color:#ec4899 !important; }
    .side-menu-btn:nth-child(8n+7){ border-left-color:#eab308 !important; }
    .side-menu-btn:nth-child(8n+7) i.icon-left{ color:#eab308 !important; }
    .side-menu-btn:nth-child(8n+8){ border-left-color:#6366f1 !important; }
    .side-menu-btn:nth-child(8n+8) i.icon-left{ color:#6366f1 !important; }

    .side-menu-btn.active{
        color:#fff !important;
        background:linear-gradient(180deg,#1178ef 0%,#0754bd 100%) !important;
        border-color:#34c7ff !important;
        box-shadow:0 11px 23px rgba(0,107,235,.32) !important;
    }
    .side-menu-btn.active i.icon-left{ color:#fff !important; }

    .side-menu-btn:nth-child(8n+1).active{ background:linear-gradient(180deg,#29a8e0 0%,#0f6fae 100%) !important; border-color:#29a8e0 !important; box-shadow:0 11px 23px rgba(41,168,224,.35) !important; }
    .side-menu-btn:nth-child(8n+2).active{ background:linear-gradient(180deg,#22c55e 0%,#15803d 100%) !important; border-color:#22c55e !important; box-shadow:0 11px 23px rgba(34,197,94,.35) !important; }
    .side-menu-btn:nth-child(8n+3).active{ background:linear-gradient(180deg,#f97316 0%,#c2410c 100%) !important; border-color:#f97316 !important; box-shadow:0 11px 23px rgba(249,115,22,.35) !important; }
    .side-menu-btn:nth-child(8n+4).active{ background:linear-gradient(180deg,#a855f7 0%,#7e22ce 100%) !important; border-color:#a855f7 !important; box-shadow:0 11px 23px rgba(168,85,247,.35) !important; }
    .side-menu-btn:nth-child(8n+5).active{ background:linear-gradient(180deg,#14b8a6 0%,#0f766e 100%) !important; border-color:#14b8a6 !important; box-shadow:0 11px 23px rgba(20,184,166,.35) !important; }
    .side-menu-btn:nth-child(8n+6).active{ background:linear-gradient(180deg,#ec4899 0%,#be185d 100%) !important; border-color:#ec4899 !important; box-shadow:0 11px 23px rgba(236,72,153,.35) !important; }
    .side-menu-btn:nth-child(8n+7).active{ background:linear-gradient(180deg,#eab308 0%,#a16207 100%) !important; border-color:#eab308 !important; box-shadow:0 11px 23px rgba(234,179,8,.35) !important; }
    .side-menu-btn:nth-child(8n+8).active{ background:linear-gradient(180deg,#6366f1 0%,#4338ca 100%) !important; border-color:#6366f1 !important; box-shadow:0 11px 23px rgba(99,102,241,.35) !important; }

    .side-nav-content{
        flex:1;
        border:0 !important;
        border-radius:0 !important;
        background:transparent !important;
    }

    .content-pane{
        padding:34px 46px 34px 40px !important;
        color:#0c1e42;
        background:transparent;
    }

    .content-pane.active{display:block !important;}

    .rts-page-head{
        display:flex;
        align-items:flex-start;
        gap:20px;
        max-width:1160px;
        margin:0 80px 14px 0;
    }

    .rts-number{
        width:74px;
        height:74px;
        flex:0 0 74px;
        border-radius:9px;
        display:flex;
        align-items:center;
        justify-content:center;
        background:linear-gradient(180deg,#1776ef,#0a4dbc);
        color:#fff;
        font-size:34px;
        font-weight:900;
        box-shadow:0 10px 20px rgba(0,78,178,.28);
    }

    .rts-kicker{
        font-size:19px;
        line-height:1;
        font-weight:900;
        color:#102249;
        text-transform:uppercase;
        margin:3px 0 7px;
    }

    .rts-title{
        margin:0;
        color:#071c42;
        font-size:clamp(30px,3vw,48px);
        line-height:1.03;
        font-weight:900;
        letter-spacing:.2px;
        text-transform:uppercase;
        border-bottom:1px solid #2f75dd;
        padding-bottom:8px;
    }

    .rts-tagline{
        color:#0756c9;
        font-size:17px;
        margin-top:8px;
        font-weight:500;
    }

    .rts-summary{
        width:min(425px,45%);
        min-height:210px;
        margin:34px 0 32px 4px;
        padding:25px 30px;
        border-radius:18px;
        background:rgba(255,255,255,.94);
        box-shadow:0 16px 38px rgba(6,35,76,.18);
        border:1px solid rgba(255,255,255,.9);
        backdrop-filter:blur(10px);
    }

    .rts-summary h3{
        color:#0d2148;
        font-size:25px;
        font-weight:900;
        margin:0 0 14px;
        text-transform:uppercase;
    }

    .rts-summary p{
        color:#17233e;
        font-size:15px;
        line-height:1.65;
        margin:0;
    }

    .rts-facts{
        display:grid;
        grid-template-columns:repeat(5,minmax(0,1fr));
        width:100%;
        background:rgba(255,255,255,.95);
        border:1px solid rgba(255,255,255,.95);
        border-radius:18px;
        box-shadow:0 18px 42px rgba(3,31,68,.20);
        overflow:hidden;
        backdrop-filter:blur(10px);
    }

    .rts-fact{
        position:relative;
        min-height:175px;
        padding:20px 15px 18px;
        text-align:center;
        display:flex;
        flex-direction:column;
        align-items:center;
    }

    .rts-fact:not(:nth-child(5n))::after{
        content:"";
        position:absolute;
        right:0;
        top:18px;
        bottom:18px;
        width:1px;
        background:#d9e1eb;
    }

    .rts-fact:nth-child(n+6){border-top:1px solid #d9e1eb;}

    .rts-fact-icon{
        width:67px;
        height:67px;
        border-radius:50%;
        display:flex;
        align-items:center;
        justify-content:center;
        margin-bottom:10px;
        background:#fff;
        color:#08aeb2;
        font-size:31px;
        box-shadow:0 6px 17px rgba(15,53,82,.12);
        border:1px solid #e7edf3;
    }

    .rts-fact-label{
        color:#071c42;
        font-size:14px;
        font-weight:900;
        line-height:1.25;
        margin-bottom:8px;
    }

    .rts-fact-value{
        color:#334155;
        font-size:13px;
        line-height:1.45;
    }

    /* Other tab layouts */
    .pane-title{
        width:max-content;
        max-width:100%;
        margin:0 0 24px !important;
        color:#0a2450 !important;
        border-bottom:2px solid #1a6dd4 !important;
        font-size:30px !important;
    }

    .pane-title i{color:#0b64cf !important;}
    .pane-desc{color:#23334f !important; font-size:20px !important;}
    .pane-map-img{background:#fff !important; box-shadow:0 15px 35px rgba(5,37,78,.18);}

    .info-box,.clean-list li{
        background:rgba(255,255,255,.93) !important;
        border-color:rgba(12,61,119,.12) !important;
        box-shadow:0 10px 24px rgba(5,37,78,.12);
    }

    .ib-title{color:#42617f !important;}
    .ib-val,.clean-list li{color:#0e2349 !important;}

    .gal-folder-card{
        box-shadow:0 12px 28px rgba(4,32,70,.18);
        border-color:rgba(255,255,255,.8) !important;
    }

    /* Route & Station layout */
    .route-station-layout{
        grid-template-columns:minmax(0, 1.9fr) minmax(290px, .95fr);
        gap:22px;
        align-items:start;
    }
    .route-map-card,
    .route-stations-card{
        background:rgba(255,255,255,.94);
        border:1px solid rgba(12,61,119,.12);
        border-radius:18px;
        box-shadow:0 14px 34px rgba(5,37,78,.14);
        overflow:hidden;
    }
    .route-map-card{
        padding:14px;
    }
    .route-map-scene{
        position:relative;
        overflow:hidden;
        border-radius:14px;
        background:#071b3b;
        isolation:isolate;
    }
    .route-map-scene::after{
        content:"";
        position:absolute;
        inset:0;
        background:linear-gradient(180deg, rgba(255,255,255,.10), rgba(0,0,0,.08));
        pointer-events:none;
        z-index:1;
    }
    .route-map-card img.route-map-img{
        width:100%;
        display:block;
        border-radius:14px;
        object-fit:cover;
        background:#dbe7f5;
        max-height:720px;
        animation:none !important;
        transform-origin:center center;
    }
    @keyframes routeMapZoom {
        0% { transform: scale(1) translateY(0); }
        100% { transform: scale(1.045) translateY(-6px); }
    }

    .route-line-svg{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible;}
    .route-line-under{fill:none;stroke:rgba(141,92,255,.46);stroke-width:3.35;stroke-linecap:round;stroke-linejoin:round;filter:blur(3px) drop-shadow(0 0 12px rgba(139,92,246,.98)) drop-shadow(0 0 26px rgba(168,85,247,.96)) drop-shadow(0 0 42px rgba(216,180,254,.72));opacity:.96;animation:routeGlowPulse 2.8s ease-in-out infinite alternate;}
    .route-line-main{fill:none;stroke:url(#routePurpleGradient);stroke-width:2.35;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(216,180,254,.98)) drop-shadow(0 0 16px rgba(139,92,246,.98)) drop-shadow(0 0 32px rgba(124,58,237,.98));animation:routeGlowPulseStrong 2.2s ease-in-out infinite alternate;}
    .route-line-core{fill:none;stroke:rgba(252,249,255,.98);stroke-width:.82;stroke-linecap:round;stroke-linejoin:round;opacity:.98;}
    .route-line-sheen{fill:none;stroke:rgba(255,255,255,.72);stroke-width:.20;stroke-linecap:round;stroke-linejoin:round;opacity:.9;}
    .route-mover-ring{fill:rgba(175,109,255,.34);filter:drop-shadow(0 0 8px rgba(168,85,247,.96)) drop-shadow(0 0 18px rgba(216,180,254,.88));}
    .route-mover-core{fill:#ffffff;filter:drop-shadow(0 0 6px rgba(255,255,255,1)) drop-shadow(0 0 12px rgba(216,180,254,.96));animation:routeMoverPulse 1.15s ease-in-out infinite alternate;}
    @keyframes routeGlowPulse{0%{opacity:.82;}100%{opacity:1;}}
    @keyframes routeGlowPulseStrong{0%{filter:drop-shadow(0 0 4px rgba(216,180,254,.92)) drop-shadow(0 0 10px rgba(139,92,246,.92)) drop-shadow(0 0 22px rgba(124,58,237,.9));}100%{filter:drop-shadow(0 0 7px rgba(255,255,255,.98)) drop-shadow(0 0 20px rgba(216,180,254,.98)) drop-shadow(0 0 36px rgba(168,85,247,.98));}}
    @keyframes routeMoverPulse{0%{transform:scale(.92);opacity:.9;}100%{transform:scale(1.08);opacity:1;}}
    .route-marker{
        position:absolute;
        transform:translate(-50%, -50%);
        z-index:3;
    }
    .route-marker-btn{
        width:32px;
        height:32px;
        border-radius:50%;
        border:2px solid rgba(255,255,255,.95);
        background:linear-gradient(180deg, #8f5aff 0%, #5b2fd0 100%);
        color:#fff;
        display:flex;
        align-items:center;
        justify-content:center;
        box-shadow:0 0 0 4px rgba(125,88,255,.18), 0 10px 18px rgba(36,18,87,.35);
        cursor:pointer;
        position:relative;
        z-index:2;
    }
    .route-marker-btn::before,
    .route-marker-btn::after{
        content:"";
        position:absolute;
        inset:-7px;
        border-radius:50%;
        border:2px solid rgba(194,170,255,.55);
        animation: routeMarkerPulse 2s infinite;
    }
    .route-marker-btn::after{ animation-delay:1s; }
    @keyframes routeMarkerPulse {
        0% { transform:scale(.75); opacity:.95; }
        100% { transform:scale(1.5); opacity:0; }
    }
    .route-marker-popup{
        position:absolute;
        left:50%;
        bottom:46px;
        transform:translateX(-50%) scale(.95);
        min-width:180px;
        max-width:240px;
        background:rgba(38,18,84,.96);
        color:#fff;
        padding:12px 14px;
        border-radius:12px;
        box-shadow:0 12px 26px rgba(18,8,43,.42);
        opacity:0;
        visibility:hidden;
        transition:.25s ease;
        pointer-events:none;
    }
    .route-marker-popup::after{
        content:"";
        position:absolute;
        left:50%;
        transform:translateX(-50%);
        bottom:-8px;
        border-left:8px solid transparent;
        border-right:8px solid transparent;
        border-top:8px solid rgba(38,18,84,.96);
    }
    .route-marker.active .route-marker-popup{
        opacity:1;
        visibility:visible;
        transform:translateX(-50%) scale(1);
    }
    .route-popup-title{
        font-size:13px;
        font-weight:800;
        line-height:1.25;
        text-transform:uppercase;
        margin-bottom:2px;
        letter-spacing:.2px;
    }
    .route-popup-subtitle{
        font-size:11px;
        line-height:1.35;
        color:rgba(255,255,255,.82);
    }
    .route-map-caption{
        margin-top:12px;
        color:#31435f;
        font-size:14px;
        line-height:1.6;
    }
    .route-stations-card{
        padding:18px;
        display:grid;
        grid-template-columns:1fr;
        gap:16px;
        background:transparent !important;
        border:0 !important;
        box-shadow:none !important;
    }
    .station-section{
        position:relative;
        overflow:hidden;
        padding:22px 22px 20px;
        border-radius:20px;
        background:linear-gradient(155deg, rgba(16,64,126,.96), rgba(5,31,70,.97));
        border:1px solid rgba(95,188,255,.28);
        box-shadow:0 16px 34px rgba(0,18,48,.26), inset 0 1px 0 rgba(255,255,255,.06);
        transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
    }
    .station-section::before{
        content:"";
        position:absolute;
        inset:0 0 auto 0;
        height:4px;
        background:linear-gradient(90deg,#23d3cf,#2f9dff,#6d69ff);
    }
    .station-section::after{
        content:"";
        position:absolute;
        right:-45px;
        top:-45px;
        width:150px;
        height:150px;
        border-radius:50%;
        background:radial-gradient(circle,rgba(38,168,255,.18),transparent 68%);
        pointer-events:none;
    }
    .station-section:hover{
        transform:translateY(-3px);
        border-color:rgba(93,213,255,.58);
        box-shadow:0 20px 40px rgba(0,18,48,.34),0 0 22px rgba(35,158,255,.10);
    }
    .station-section + .station-section{
        margin-top:0;
        padding-top:22px;
        border-top:1px solid rgba(95,188,255,.28);
    }
    .station-card-head{
        position:relative;
        z-index:1;
        display:flex;
        align-items:center;
        gap:14px;
        margin-bottom:16px;
    }
    .station-card-icon{
        width:54px;
        height:54px;
        flex:0 0 54px;
        border-radius:16px;
        display:flex;
        align-items:center;
        justify-content:center;
        background:linear-gradient(145deg,rgba(27,126,225,.78),rgba(8,62,126,.95));
        border:1px solid rgba(133,220,255,.34);
        box-shadow:0 10px 22px rgba(0,20,53,.24),inset 0 1px 0 rgba(255,255,255,.14);
        color:#8deeff;
        font-size:26px;
    }
    .station-title{
        position:relative;
        z-index:1;
        font-size:25px;
        line-height:1.12;
        font-weight:900;
        color:#fff;
        text-transform:uppercase;
        margin:0;
        letter-spacing:.2px;
    }
    .station-subtitle{
        position:relative;
        z-index:1;
        margin-top:4px;
        color:#a9d7ff;
        font-size:13px;
        font-weight:700;
        text-transform:uppercase;
        letter-spacing:.6px;
    }
    .station-list{
        position:relative;
        z-index:1;
        list-style:none;
        margin:0;
        padding:0;
        display:grid;
        gap:10px;
    }
    .station-list li{
        position:relative;
        margin:0;
        padding:11px 12px 11px 42px;
        border-radius:13px;
        background:rgba(255,255,255,.06);
        border:1px solid rgba(255,255,255,.08);
        color:#edf6ff;
        font-size:15px;
        line-height:1.5;
    }
    .station-list li::before{
        content:"✓";
        position:absolute;
        left:12px;
        top:50%;
        transform:translateY(-50%);
        width:20px;
        height:20px;
        border-radius:50%;
        display:flex;
        align-items:center;
        justify-content:center;
        background:rgba(45,212,191,.16);
        border:1px solid rgba(94,234,212,.32);
        color:#88f5e9;
        font-size:11px;
        font-weight:900;
    }
    /* Project components layout */
    .component-showcase{
        position:relative;
        border-radius:22px;
        background:linear-gradient(180deg, rgba(3,20,49,.96), rgba(2,17,41,.94));
        border:1px solid rgba(64,155,255,.20);
        box-shadow:0 20px 44px rgba(3,18,43,.28);
        padding:24px 22px 18px;
        overflow:hidden;
        min-height:100%;
        display:flex;
        flex-direction:column;
    }
    .component-showcase::before{
        content:"";
        position:absolute;
        inset:auto -40px 58% 52%;
        height:180px;
        background:radial-gradient(circle at center, rgba(0,149,255,.26), transparent 62%);
        filter:blur(8px);
        pointer-events:none;
    }
    .component-showcase::after{
        content:"";
        position:absolute;
        top:14px;
        right:20px;
        width:280px;
        height:92px;
        border-radius:100px 100px 14px 14px;
        border:1px solid rgba(36,145,255,.42);
        border-left-color:transparent;
        border-bottom-color:transparent;
        opacity:.35;
        transform:skewX(-18deg);
        pointer-events:none;
    }
    .component-head{position:relative;z-index:1;max-width:760px;margin-bottom:18px;}
    .component-headline{display:flex;align-items:center;gap:12px;margin-bottom:10px;color:#fff;}
    .component-badge{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#35a2ff,#1c66d8);font-size:26px;font-weight:900;color:#fff;box-shadow:0 8px 18px rgba(29,102,216,.35);}
    .component-headline h3{margin:0;font-size:30px;line-height:1.05;font-weight:900;text-transform:uppercase;color:#fff;letter-spacing:.2px;}
    .component-head p{margin:0;color:#d8e8ff;font-size:15px;line-height:1.6;max-width:760px;}
    .component-cards-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-content:start;flex:1;}
    .comp-card{
        --accent:#1d4ed8;
        display:grid;
        grid-template-columns:minmax(0, 56%) minmax(0, 44%);
        background:linear-gradient(180deg, rgba(7,25,58,.97), rgba(5,21,50,.97));
        border:1px solid color-mix(in srgb, var(--accent) 68%, white 8%);
        border-radius:14px;
        overflow:hidden;
        box-shadow:0 14px 26px rgba(1,11,30,.24), inset 0 1px 0 rgba(255,255,255,.05);
        position:relative;
        min-height:252px;
    }
    .comp-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,var(--accent), rgba(255,255,255,.08));opacity:.9;}
    .comp-card-no{position:absolute;left:0;top:0;min-width:62px;padding:10px 14px 9px;border-radius:0 0 16px 0;background:linear-gradient(180deg,color-mix(in srgb, var(--accent) 90%, white 10%), color-mix(in srgb, var(--accent) 76%, black 18%));color:#fff;font-size:30px;font-weight:900;line-height:1;z-index:2;box-shadow:0 10px 20px rgba(0,0,0,.18);}
    .comp-card-media{
        height:100%;
        min-height:252px;
        overflow:hidden;
        border-right:1px solid rgba(255,255,255,.08);
        background:linear-gradient(135deg, rgba(21,51,101,.8), rgba(4,15,36,.96));
    }
    .comp-card-media img{
        width:100%;
        height:100%;
        min-height:252px;
        object-fit:cover;
        display:block;
        transition:transform .45s ease, filter .45s ease;
    }
    .comp-card:hover .comp-card-media img{transform:scale(1.035);filter:brightness(1.08);}
    .comp-card-body{
        padding:18px 16px 16px;
        color:#e8f2ff;
        display:flex;
        flex-direction:column;
        justify-content:center;
        min-width:0;
    }
    .comp-card-title{display:flex;align-items:center;gap:11px;margin-bottom:8px;}
    .comp-card-title h4{margin:0;color:#fff;font-size:16px;line-height:1.15;font-weight:900;text-transform:uppercase;}
    .comp-card-icon{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--accent) 78%, white 14%), color-mix(in srgb, var(--accent) 82%, black 18%));border:1px solid color-mix(in srgb, var(--accent) 72%, white 22%);box-shadow:0 0 0 4px rgba(255,255,255,.03), 0 10px 18px rgba(2,11,31,.22);color:#fff;font-size:20px;flex:0 0 42px;}
    .comp-card-desc{font-size:13px;line-height:1.5;color:#d3e3ff;margin-bottom:12px;min-height:0;}
    .comp-card-points{list-style:none;margin:0;padding:0;display:grid;gap:7px;}
    .comp-card-points li{position:relative;padding-left:23px;color:#dbeafe;font-size:11px;}
    .comp-card-points li::before{content:"";position:absolute;left:0;top:2px;width:15px;height:15px;border-radius:5px;background:color-mix(in srgb, var(--accent) 84%, black 6%);box-shadow:0 0 0 1px rgba(255,255,255,.08) inset;}
    .comp-card-points li::after{content:"✓";position:absolute;left:3px;top:0px;font-size:10px;color:#fff;font-weight:700;}
    .component-footer-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin-top:14px;border:1px solid rgba(44,117,208,.32);border-radius:14px;overflow:hidden;background:linear-gradient(180deg, rgba(5,25,57,.84), rgba(3,17,40,.84));}
    .component-footer-item{padding:12px 14px;display:flex;gap:11px;align-items:flex-start;border-right:1px solid rgba(44,117,208,.22);}
    .component-footer-item:last-child{border-right:0;}
    .component-footer-icon{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#9ed8ff;background:rgba(20,111,222,.14);border:1px solid rgba(76,173,255,.28);font-size:19px;flex:0 0 36px;}
    .component-footer-title{color:#fff;font-size:14px;font-weight:900;text-transform:uppercase;margin-bottom:3px;}
    .component-footer-desc{color:#c6daff;font-size:12px;line-height:1.45;}

    /* Benefit grid layout — polished, larger and easier to read */
    .benefit-showcase{
        position:relative;
        min-height:100%;
        padding:6px 8px 28px;
        overflow:hidden;
    }
    .benefit-showcase::before{
        content:"";
        position:absolute;
        inset:-140px -120px auto auto;
        width:420px;
        height:420px;
        border-radius:50%;
        background:radial-gradient(circle, rgba(38,168,255,.18), transparent 66%);
        filter:blur(8px);
        pointer-events:none;
    }
    .benefit-head{
        position:relative;
        z-index:1;
        max-width:980px;
        margin:0 0 30px;
    }
    .benefit-headline{
        display:flex;
        align-items:center;
        gap:14px;
        margin-bottom:12px;
    }
    .benefit-badge{
        width:50px;
        height:50px;
        flex:0 0 50px;
        border-radius:14px;
        display:flex;
        align-items:center;
        justify-content:center;
        background:linear-gradient(180deg,#3db6ff 0%,#1266dc 100%);
        color:#fff;
        font-size:30px;
        font-weight:900;
        box-shadow:0 12px 26px rgba(9,100,221,.32), inset 0 1px 0 rgba(255,255,255,.35);
    }
    .benefit-headline h3{
        margin:0;
        color:#fff;
        font-size:clamp(32px,2.6vw,46px);
        line-height:1.02;
        font-weight:900;
        letter-spacing:.3px;
        text-transform:uppercase;
    }
    .benefit-desc{
        margin:0 0 0 64px;
        color:#cfe8ff;
        font-size:18px;
        line-height:1.7;
        max-width:900px;
    }
    .benefit-grid{
        position:relative;
        z-index:1;
        display:grid;
        grid-template-columns:repeat(3,minmax(0,1fr));
        gap:22px;
        align-items:stretch;
    }
    .benefit-item{
        position:relative;
        min-height:270px;
        padding:26px 24px 24px;
        border-radius:20px;
        border:1px solid rgba(88,181,255,.25);
        background:linear-gradient(155deg,rgba(15,61,120,.88),rgba(5,31,70,.93));
        box-shadow:0 18px 38px rgba(0,15,42,.27), inset 0 1px 0 rgba(255,255,255,.06);
        color:#eaf4ff;
        overflow:hidden;
        transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
    }
    .benefit-item::before{
        content:"";
        position:absolute;
        inset:0 0 auto 0;
        height:4px;
        background:linear-gradient(90deg,#26d7d0,#3397ff,#7c6dff);
    }
    .benefit-item:hover{
        transform:translateY(-5px);
        border-color:rgba(73,202,255,.58);
        box-shadow:0 22px 45px rgba(0,18,48,.35),0 0 24px rgba(35,158,255,.10);
    }
    .benefit-top{
        display:flex;
        align-items:center;
        gap:16px;
        margin-bottom:18px;
    }
    .benefit-icon-wrap{
        width:72px;
        height:72px;
        flex:0 0 72px;
        margin:0;
        border-radius:18px;
        display:flex;
        align-items:center;
        justify-content:center;
        border:1px solid rgba(135,219,255,.34);
        background:linear-gradient(145deg,rgba(30,127,224,.62),rgba(8,63,127,.72));
        box-shadow:0 12px 24px rgba(0,20,53,.24),inset 0 1px 0 rgba(255,255,255,.16);
    }
    .benefit-icon-wrap i{
        font-size:34px;
        color:#65f0e4;
        filter:drop-shadow(0 0 10px rgba(101,240,228,.22));
    }
    .benefit-item-title{
        margin:0;
        min-height:0;
        display:block;
        color:#fff;
        font-size:22px;
        font-weight:900;
        letter-spacing:.15px;
        text-transform:uppercase;
        text-align:left;
    }
    .benefit-points{
        list-style:none;
        margin:0;
        padding:0;
        display:grid;
        gap:12px;
        color:#dcecff;
        font-size:16px;
        line-height:1.55;
        text-align:left;
    }
    .benefit-points li{
        position:relative;
        padding-left:25px;
    }
    .benefit-points li::before{
        content:"✓";
        position:absolute;
        left:0;
        top:1px;
        width:18px;
        height:18px;
        border-radius:50%;
        display:flex;
        align-items:center;
        justify-content:center;
        background:rgba(45,212,191,.18);
        border:1px solid rgba(94,234,212,.38);
        color:#7ff5e8;
        font-size:11px;
        font-weight:900;
    }

    /* Status project dashboard */
    .status-showcase{
        position:relative;
        border-radius:24px;
        background:linear-gradient(180deg, rgba(3,20,49,.96), rgba(2,17,41,.94));
        border:1px solid rgba(64,155,255,.18);
        box-shadow:0 20px 44px rgba(3,18,43,.28);
        padding:26px 24px 22px;
        overflow:hidden;
    }
    .status-showcase::before{
        content:"";
        position:absolute;
        inset:-80px -80px auto auto;
        width:360px;
        height:360px;
        border-radius:50%;
        background:radial-gradient(circle, rgba(40,153,255,.18), transparent 66%);
        filter:blur(8px);
        pointer-events:none;
    }
    .status-head{position:relative;z-index:1;max-width:900px;margin-bottom:18px;}
    .status-headline{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
    .status-badge{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,#35a2ff,#1c66d8);font-size:26px;font-weight:900;color:#fff;box-shadow:0 8px 18px rgba(29,102,216,.35);}
    .status-headline h3{margin:0;font-size:34px;line-height:1.05;font-weight:900;text-transform:uppercase;color:#fff;letter-spacing:.2px;}
    .status-head p{margin:0;color:#d8e8ff;font-size:17px;line-height:1.6;max-width:760px;}
    .status-main-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr 1.35fr;gap:18px;margin-bottom:18px;align-items:stretch;}
    .status-bottom-grid{position:relative;z-index:1;display:grid;grid-template-columns:.95fr 1.05fr;gap:18px;}
    .status-panel{position:relative;background:linear-gradient(180deg, rgba(7,25,58,.97), rgba(5,21,50,.97));border:1px solid rgba(64,155,255,.16);border-radius:18px;padding:18px 18px 16px;box-shadow:0 12px 26px rgba(1,11,30,.22), inset 0 1px 0 rgba(255,255,255,.04);overflow:hidden;}
    .status-panel::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:linear-gradient(90deg,#26d7d0,#3397ff,#7c6dff);opacity:.9;}
    .status-panel-title{display:flex;align-items:center;gap:10px;color:#fff;font-size:22px;font-weight:900;text-transform:uppercase;margin-bottom:14px;}
    .status-panel-title i{color:#53cfff;font-size:22px;}
    .status-progress-wrap{display:grid;grid-template-columns:230px 1fr;gap:18px;align-items:center;}
    .status-progress-circle{--size:170px;--progress:0;--progress-angle: calc(var(--progress) * 3.6deg);width:var(--size);height:var(--size);margin:0 auto;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#23d1ff var(--progress-angle), rgba(255,255,255,.12) 0);position:relative;box-shadow:0 0 0 10px rgba(255,255,255,.03), 0 14px 28px rgba(1,15,37,.28);}
    .status-progress-circle::before{content:"";position:absolute;inset:12px;border-radius:50%;background:linear-gradient(180deg, rgba(6,20,46,.98), rgba(4,16,38,.98));border:1px solid rgba(130,220,255,.14);}
    .status-progress-core{position:relative;z-index:1;text-align:center;}
    .status-progress-percent{font-size:52px;font-weight:900;color:#fff;line-height:1;margin-bottom:7px;}
    .status-progress-label{font-size:15px;font-weight:700;color:#9fdcff;text-transform:uppercase;letter-spacing:.8px;line-height:1.35;}
    .status-progress-target{margin-top:14px;font-size:17px;font-weight:700;color:#79f4df;text-align:center;}
    .status-progress-list{list-style:none;margin:0;padding:0;display:grid;gap:11px;}
    .status-progress-list li{display:flex;align-items:center;gap:12px;color:#e3efff;font-size:18px;line-height:1.45;}
    .status-dot{width:24px;height:24px;flex:0 0 24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);}
    .status-dot.done{background:rgba(34,197,94,.18);border:1px solid rgba(74,222,128,.42);color:#a7f3b5;}
    .status-dot.current{background:rgba(41,168,224,.18);border:1px solid rgba(92,211,255,.46);color:#9ee8ff;}
    .status-dot.pending{background:rgba(148,163,184,.18);border:1px solid rgba(203,213,225,.28);color:#dbe4ef;}
    .status-roadmap{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;position:relative;}
    .status-roadmap::before{content:"";position:absolute;left:25px;right:25px;top:34px;height:2px;background:linear-gradient(90deg, rgba(41,168,224,.45), rgba(102,126,234,.45));z-index:0;}
    .status-phase{position:relative;z-index:1;text-align:center;padding-top:4px;}
    .status-phase-icon{width:56px;height:56px;border-radius:50%;margin:0 auto 10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(145deg,rgba(14,87,168,.82),rgba(8,46,99,.95));border:1px solid rgba(105,197,255,.32);color:#dff6ff;font-size:24px;box-shadow:0 10px 20px rgba(0,16,40,.2);}
    .status-phase-year{font-size:15px;font-weight:800;color:#70c9ff;margin-bottom:5px;letter-spacing:.2px;}
    .status-phase-title{font-size:18px;font-weight:900;color:#fff;line-height:1.25;margin-bottom:3px;text-transform:uppercase;}
    .status-phase-sub{font-size:14px;color:#c6daff;line-height:1.4;}
    .status-list{list-style:none;padding:0;margin:0;display:grid;gap:12px;}
    .status-list li{display:flex;align-items:center;gap:12px;color:#e3efff;font-size:18px;line-height:1.45;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.04);}
    .status-list li .status-text strong{display:block;color:#fff;font-size:18px;line-height:1.2;}
    .status-list li .status-text small{display:block;color:#9fc5ef;font-size:14px;line-height:1.3;margin-top:2px;}
    .status-timeline{position:relative;padding-left:14px;display:grid;gap:14px;}
    .status-timeline::before{content:"";position:absolute;left:17px;top:4px;bottom:4px;width:2px;background:linear-gradient(180deg, rgba(70,208,255,.65), rgba(70,208,255,.12));}
    .status-timeline-item{position:relative;padding-left:28px;}
    .status-timeline-item::before{content:"";position:absolute;left:8px;top:6px;width:18px;height:18px;border-radius:50%;background:linear-gradient(180deg,#3ec2ff,#1268df);border:3px solid rgba(2,17,41,.95);box-shadow:0 0 0 2px rgba(74,194,255,.20);}
    .status-timeline-year{font-size:15px;font-weight:800;color:#70c9ff;margin-bottom:4px;}
    .status-timeline-title{font-size:19px;font-weight:900;color:#fff;line-height:1.2;margin-bottom:3px;}
    .status-timeline-sub{font-size:15px;color:#c6daff;line-height:1.4;}
    .status-inline-empty{padding:14px;border-radius:12px;background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.12);color:#c6daff;font-size:16px;text-align:center;}

    @media (max-width: 1200px){
        .rts-facts{grid-template-columns:repeat(3,minmax(0,1fr));}
        .rts-fact:not(:nth-child(5n))::after{display:none;}
        .rts-fact:nth-child(n+4){border-top:1px solid #d9e1eb;}
        .route-station-layout{grid-template-columns:1fr;}
        .component-cards-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
        .comp-card{grid-template-columns:52% 48%;}
        .component-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
        .component-showcase::after{display:none;}
        .benefit-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
        .benefit-item{min-height:250px;}
        .status-main-grid,.status-bottom-grid{grid-template-columns:1fr;}
        .status-progress-wrap{grid-template-columns:190px 1fr;}
        .status-roadmap{grid-template-columns:repeat(2,minmax(0,1fr));}
        .status-roadmap::before{display:none;}
    }

    @media (max-width: 800px){
        html,body{overflow:auto !important; height:auto;}
        .tv-dashboard-wrapper{height:auto; min-height:100vh;}
        #project-detail-pane{position:fixed; overflow:auto;}
        #project-detail-pane > .d-flex.flex-row{display:block !important; overflow:auto !important;}
        .side-nav-bar{
            width:100% !important;
            height:auto;
            flex-direction:row !important;
            overflow-x:auto;
            padding:10px !important;
        }
        .side-nav-bar::before{display:none;}
        .side-menu-btn{min-width:160px;}
        .content-pane{padding:90px 18px 24px !important;}
        .rts-page-head{margin-right:0;}
        .rts-number{width:58px;height:58px;flex-basis:58px;font-size:26px;}
        .rts-title{font-size:27px;}
        .rts-summary{width:100%; margin-top:22px;}
        .rts-facts{grid-template-columns:1fr 1fr;}
        .rts-fact:nth-child(n+3){border-top:1px solid #d9e1eb;}
        .route-map-card{padding:10px;}
        .route-stations-card{padding:18px;}
        .station-list{font-size:16px;}
        .station-title{font-size:22px;}
        .station-section{padding:18px;}
        .route-marker-popup{min-width:150px; max-width:180px;}
        .component-showcase{padding:18px 14px 14px;}
        .component-headline h3{font-size:24px;}
        .component-cards-grid{grid-template-columns:1fr;}
        .comp-card{grid-template-columns:46% 54%;min-height:230px;}
        .comp-card-media,.comp-card-media img{min-height:230px;}
        .component-footer-grid{grid-template-columns:1fr;}
        .component-footer-item{border-right:0;border-bottom:1px solid rgba(44,117,208,.22);}
        .component-footer-item:last-child{border-bottom:0;}
        .benefit-grid{grid-template-columns:1fr;}
        .benefit-headline h3{font-size:30px;}
        .benefit-desc{margin-left:0;font-size:16px;}
        .benefit-item{min-height:auto;padding:22px 20px;}
        .benefit-item-title{font-size:20px;}
        .benefit-points{font-size:15px;}
        .status-showcase{padding:18px 14px 14px;}
        .status-headline h3{font-size:28px;}
        .status-progress-wrap{grid-template-columns:1fr;}
        .status-progress-circle{--size:150px;}
        .status-progress-percent{font-size:44px;}
        .status-roadmap{grid-template-columns:1fr;}
        .status-phase{padding-bottom:8px;}
    }

    @media (max-width: 560px){
        .comp-card{grid-template-columns:1fr;}
        .comp-card-media{height:210px;min-height:210px;border-right:0;border-bottom:1px solid rgba(255,255,255,.08);}
        .comp-card-media img{height:210px;min-height:210px;}
        .comp-card-body{padding:16px;}
    }

    .study-card,
    .study-card * {
        pointer-events: auto;
    }

    .study-card {
        cursor: pointer !important;
        position: relative;
        z-index: 5;
        pointer-events: auto !important;
        touch-action: manipulation;
    }

    .study-card-photo,
    .study-card-overlay,
    .study-card-title-bar,
    .study-card-badge-no {
        pointer-events: none;
    }

    /* CLEANER BORDERLESS ROUTE UI */
    .route-map-card,
    .route-stations-card {
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
    .route-map-card { padding: 0 !important; }
    .route-map-scene {
        border-radius: 18px !important;
        box-shadow: 0 18px 45px rgba(3, 25, 58, .22);
    }
    .route-map-img { border-radius: 18px !important; }
    .route-stations-card { padding: 0 !important; }
    .station-section {
        background: rgba(255,255,255,.78);
        backdrop-filter: blur(12px);
        border-radius: 15px;
        padding: 18px 20px;
        box-shadow: 0 12px 30px rgba(3, 25, 58, .12);
    }
    .station-section + .station-section {
        margin-top: 14px !important;
        padding-top: 18px !important;
        border-top: 0 !important;
    }

    /* =========================================================
        FIXED BLUE THEME — ALL DETAIL TABS
        ========================================================= */
    .side-nav-content{
        background:linear-gradient(180deg, rgba(5,22,50,.32), rgba(5,18,42,.14)) !important;
    }

    .content-pane{
        color:#e8f3ff !important;
    }

    .pane-title,
    .rts-kicker,
    .rts-title,
    .station-title,
    .component-headline h3{
        color:#ffffff !important;
    }

    .rts-tagline,
    .route-map-caption,
    .component-head p{
        color:#b9dbff !important;
    }

    .rts-summary,
    .rts-facts,
    .route-map-card,
    .route-stations-card,
    .info-box,
    .clean-list li,
    .qr-box-container{
        background:linear-gradient(145deg, rgba(12,48,95,.94), rgba(7,31,68,.94)) !important;
        border:1px solid rgba(74,166,255,.28) !important;
        box-shadow:0 16px 36px rgba(1,12,31,.28), inset 0 1px 0 rgba(255,255,255,.04) !important;
        color:#edf7ff !important;
        backdrop-filter:blur(12px);
    }

    .rts-summary h3,
    .rts-summary p,
    .rts-fact-label,
    .rts-fact-value,
    .ib-val,
    .clean-list li,
    .station-list,
    .component-footer-title{
        color:#f3f9ff !important;
    }

    .ib-title,
    .component-footer-desc{
        color:#9fc9f6 !important;
    }

    .rts-fact:not(:nth-child(5n))::after,
    .rts-fact:nth-child(n+6),
    .station-section + .station-section{
        border-color:rgba(112,181,255,.16) !important;
    }

    .rts-fact-icon,
    .comp-card-icon,
    .component-footer-icon{
        background:linear-gradient(145deg, rgba(16,76,145,.95), rgba(8,41,87,.95)) !important;
        border-color:rgba(90,180,255,.30) !important;
        color:#80d9ff !important;
        box-shadow:0 8px 20px rgba(0,14,38,.24), 0 0 18px rgba(20,138,255,.10) !important;
    }

    .route-map-scene{
        border:1px solid rgba(82,172,255,.25);
        box-shadow:0 16px 38px rgba(0,12,34,.34);
    }

    .component-showcase{
        background:linear-gradient(145deg, rgba(5,28,64,.98), rgba(3,20,48,.98)) !important;
        border-color:rgba(50,145,255,.30) !important;
    }

    .comp-card{
        background:linear-gradient(165deg, rgba(8,42,86,.98), rgba(4,25,58,.98)) !important;
    }

    .component-footer-grid{
        background:linear-gradient(180deg, rgba(8,38,80,.92), rgba(4,24,55,.92)) !important;
    }

    .gal-folder-card{
        background:#06214a !important;
        border-color:rgba(77,170,255,.28) !important;
    }

    .empty-state{
        color:rgba(211,235,255,.62) !important;
    }

    .empty-state i{
        color:rgba(70,171,255,.55) !important;
    }

    /* Larger text for component information panel */
    .comp-card-body{
        padding:20px 18px 18px !important;
    }
    .comp-card-title{
        gap:13px !important;
        margin-bottom:11px !important;
    }
    .comp-card-title h4{
        font-size:20px !important;
        line-height:1.2 !important;
        letter-spacing:.2px;
    }
    .comp-card-icon{
        width:48px !important;
        height:48px !important;
        flex:0 0 48px !important;
        font-size:23px !important;
    }
    .comp-card-desc{
        font-size:15px !important;
        line-height:1.58 !important;
        margin-bottom:14px !important;
    }
    .comp-card-points{
        gap:9px !important;
    }
    .comp-card-points li{
        font-size:13px !important;
        line-height:1.45 !important;
        padding-left:27px !important;
    }
    .comp-card-points li::before{
        width:17px !important;
        height:17px !important;
        top:1px !important;
    }
    .comp-card-points li::after{
        left:4px !important;
        top:0 !important;
        font-size:11px !important;
    }
    .component-footer-title{
        font-size:15px !important;
    }
    .component-footer-desc{
        font-size:13px !important;
        line-height:1.5 !important;
    }

    @media (max-width: 1200px){
        .comp-card-title h4{font-size:18px !important;}
        .comp-card-desc{font-size:14px !important;}
        .comp-card-points li{font-size:12px !important;}
    }
    .route-station-layout .route-stations-card{
        background:transparent !important;
        border:0 !important;
        box-shadow:none !important;
        border-radius:0 !important;
        gap:18px !important;
    }
    .route-station-layout .station-section{
        position:relative !important;
        padding:22px 22px 20px !important;
        border-radius:22px !important;
        background:linear-gradient(155deg, rgba(12,55,111,.96), rgba(6,29,67,.98)) !important;
        border:1px solid rgba(88,190,255,.24) !important;
        box-shadow:0 18px 34px rgba(0,18,48,.26), inset 0 1px 0 rgba(255,255,255,.06) !important;
        backdrop-filter:none !important;
    }
    .route-station-layout .station-section::before{
        content:"";
        position:absolute;
        inset:0 0 auto 0;
        height:4px;
        background:linear-gradient(90deg,#23d3cf,#2f9dff,#6d69ff);
    }
    .route-station-layout .station-section::after{
        content:"";
        position:absolute;
        right:-42px;
        top:-42px;
        width:150px;
        height:150px;
        border-radius:50%;
        background:radial-gradient(circle,rgba(44,166,255,.18),transparent 68%);
        pointer-events:none;
    }
    .route-station-layout .station-section + .station-section{
        padding-top:22px !important;
        border-top:1px solid rgba(88,190,255,.22) !important;
    }
    .route-station-layout .station-card-icon{
        background:linear-gradient(145deg,rgba(31,132,229,.88),rgba(10,69,135,.98)) !important;
        color:#97efff !important;
        border:1px solid rgba(133,220,255,.34) !important;
        box-shadow:0 12px 24px rgba(0,20,53,.28), inset 0 1px 0 rgba(255,255,255,.16) !important;
    }
    .route-station-layout .station-title{color:#ffffff !important;}
    .route-station-layout .station-subtitle{color:#99d9ff !important;}
    .route-station-layout .station-list{
        background:transparent !important;
        border:0 !important;
        box-shadow:none !important;
        padding:0 !important;
        pointer-events:auto !important;
    }
    .route-station-layout .station-list li{
        background:rgba(255,255,255,.06) !important;
        border:1px solid rgba(255,255,255,.08) !important;
        color:#edf6ff !important;
        box-shadow:none !important;
    }
    .route-station-layout .station-list li::before{
        background:rgba(45,212,191,.16) !important;
        border:1px solid rgba(94,234,212,.32) !important;
        color:#88f5e9 !important;
    }

    /* TV TOUCHSCREEN OPTIMIZATION */
    @media (min-width: 1500px) and (min-height: 800px){
        .gallery-showcase{
            gap:18px;
        }
        .gallery-folder-switcher{
            grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
            gap:16px;
        }
        .gallery-folder-btn{
            min-height:64px;
            font-size:20px;
            padding:15px 22px;
            border-radius:12px;
            touch-action:manipulation;
        }
        .gallery-media-grid{
            grid-template-columns:repeat(3, minmax(0,1fr));
            gap:16px;
            max-width:1320px;
        }
        .gallery-media-card{
            aspect-ratio:16 / 9;
            max-height:235px;
            border-radius:12px;
        }
        .gallery-media-overlay{
            padding:10px 12px;
            font-size:14px;
        }
        .gallery-media-type{
            font-size:13px;
            padding:7px 11px;
        }
        .gallery-folder-meta{
            font-size:18px;
            margin-bottom:8px;
        }
    }

    @media (min-width: 2800px){
        .gallery-media-grid{
            max-width:1800px;
            grid-template-columns:repeat(4, minmax(0,1fr));
            gap:20px;
        }
        .gallery-media-card{
            max-height:260px;
        }
        .gallery-folder-btn{
            min-height:72px;
            font-size:23px;
        }
    }

    /* ================= KOMUTER SELATAN ================= */
    .commuter-selatan-wrap {
        position: relative;
        width: 100%;
        min-height: 720px;
        border-radius: 26px;
        overflow: hidden;
        border: 1px solid rgba(59, 130, 246, 0.28);
        background: linear-gradient(135deg, rgba(2,6,23,0.95), rgba(6,35,91,0.92));
        box-shadow: 0 26px 60px rgba(2, 8, 23, 0.35);
    }
    .commuter-map-bg {
        position: absolute; inset: 0;
        background-size: cover;
        background-position: center;
        filter: saturate(1.05) contrast(1.02);
        transform: scale(1.02);
    }
    .commuter-map-overlay {
        position: absolute; inset: 0;
        background:
        linear-gradient(180deg, rgba(2,6,23,0.26) 0%, rgba(2,6,23,0.42) 100%),
        radial-gradient(circle at 50% 60%, rgba(59,130,246,0.20), transparent 40%),
        linear-gradient(90deg, rgba(2,6,23,0.72) 0%, rgba(2,6,23,0.12) 38%, rgba(2,6,23,0.45) 100%);
    }
    .commuter-map-intro {
        position: absolute; left: 22px; top: 18px; z-index: 5;
        color: #fff;
        max-width: 280px;
    }
    .commuter-map-kicker {
        font-size: clamp(22px, 1.7vw, 34px);
        line-height: 1.05; font-weight: 900; text-transform: uppercase;
        margin-bottom: 6px; letter-spacing: 0.02em;
    }
    .commuter-map-hint { color: rgba(255,255,255,0.82); font-size: 15px; font-weight: 600; }
    .commuter-service-copy {
        position: absolute; left: 22px; bottom: 18px; z-index: 5; color: #fff; max-width: 450px;
    }
    .commuter-service-copy h3 { margin: 0 0 6px; font-size: clamp(30px, 2.2vw, 42px); line-height: 1.05; font-weight: 900; text-transform: uppercase; }
    .commuter-service-copy p { margin: 0; color: rgba(255,255,255,0.85); font-size: 15px; font-weight: 700; }
    .commuter-route-toggles {
        position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
        z-index: 7; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; max-width: calc(100% - 260px);
    }
    .commuter-toggle {
        min-width: 250px; border-radius: 18px; padding: 13px 16px; color: #fff; cursor: pointer;
        border: 2px solid rgba(255,255,255,0.7); backdrop-filter: blur(8px);
        box-shadow: 0 10px 26px rgba(2,8,23,0.28), inset 0 1px 0 rgba(255,255,255,0.2);
        transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    }
    .commuter-toggle:hover { transform: translateY(-1px); }
    .commuter-toggle:not(.active) { opacity: 0.58; box-shadow: 0 6px 14px rgba(2,8,23,0.18); }
    .commuter-toggle-a { background: linear-gradient(135deg, rgba(108,43,217,0.95), rgba(73,39,122,0.92)); }
    .commuter-toggle-b { background: linear-gradient(135deg, rgba(26,128,229,0.95), rgba(8,63,130,0.92)); }
    .commuter-toggle-head { display: flex; align-items: center; gap: 12px; }
    .commuter-toggle-badge {
        width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
        background: rgba(255,255,255,0.22); font-weight: 900; font-size: 15px; flex: 0 0 28px;
    }
    .commuter-toggle-name { font-size: 20px; font-weight: 900; line-height: 1.05; text-transform: uppercase; }
    .commuter-toggle-meta { margin-left: 40px; margin-top: 4px; font-size: 13px; font-weight: 700; opacity: 0.92; }
    .commuter-map-scene { position: relative; width: 100%; height: 100%; min-height: 720px; z-index: 2; }
    .commuter-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; }
    .commuter-route-group { transition: opacity .22s ease; }
    .commuter-route-group:not(.active) { opacity: 0; pointer-events: none; }
    .commuter-path-glow { fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: 0.52; filter: blur(8px); }
    .commuter-path-main {
        fill:none;
        stroke-linecap:round;
        stroke-linejoin:round;
        opacity:.98;
        filter:drop-shadow(0 0 4px currentColor) drop-shadow(0 0 12px currentColor);
        animation:commuterLineBreath 2.8s ease-in-out infinite alternate;
    }
    @keyframes commuterLineBreath {
        from { opacity:.86; filter:drop-shadow(0 0 3px currentColor) drop-shadow(0 0 9px currentColor); }
        to { opacity:1; filter:drop-shadow(0 0 6px currentColor) drop-shadow(0 0 16px currentColor); }
    }
    .commuter-route-group.is-drawing .commuter-path-main,
    .commuter-route-group.is-drawing .commuter-path-glow {
        animation: none !important;
    }
    .commuter-stop.route-entrance-hidden {
        opacity: 0 !important;
        transform: translate(-50%, -50%) scale(.55) !important;
    }
    .commuter-stop.route-entrance-visible {
        animation: commuterStopReveal .42s cubic-bezier(.2,.8,.2,1) both;
    }
    @keyframes commuterStopReveal {
        from { opacity: 0; transform: translate(-50%, -50%) scale(.55); }
        to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }
    .commuter-hub.hub-entrance-hidden {
        opacity: 0;
        transform: translate(-50%, -50%) scale(.68);
    }
    .commuter-hub.hub-entrance-visible {
        animation: commuterHubReveal .58s cubic-bezier(.16,1,.3,1) both;
    }
    @keyframes commuterHubReveal {
        0% { opacity: 0; transform: translate(-50%, -50%) scale(.68); }
        70% { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
        100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    }
    .commuter-hub {
        position: absolute; z-index: 6; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px;
    }
    .commuter-hub-orb {
        width: 84px; height: 84px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.35), rgba(168,85,247,0.95));
        border: 5px solid rgba(255,255,255,0.9); box-shadow: 0 0 0 8px rgba(168,85,247,0.18), 0 0 28px rgba(168,85,247,0.45);
        color: #fff; font-size: 36px;
    }
    .commuter-hub-label {
        background: linear-gradient(135deg, rgba(109,40,217,0.98), rgba(76,29,149,0.98)); color: #fff;
        padding: 7px 14px; border-radius: 10px; font-size: 18px; font-weight: 900; text-transform: uppercase;
        box-shadow: 0 10px 18px rgba(2,8,23,0.25);
    }
    .commuter-stop {
        position: absolute; z-index: 6; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 6px;
        transition: opacity .22s ease, transform .22s ease;
    }
    .commuter-stop.is-hidden { opacity: 0; pointer-events: none; }
    .commuter-stop-dot {
        width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
        border: 3px solid rgba(255,255,255,0.92); color: #fff; font-size: 13px; font-weight: 900;
        box-shadow: 0 0 18px color-mix(in srgb, var(--route-color) 55%, transparent), 0 0 0 6px color-mix(in srgb, var(--route-color) 18%, transparent);
        background: linear-gradient(135deg, color-mix(in srgb, var(--route-color) 86%, white 8%), color-mix(in srgb, var(--route-color) 92%, black 4%));
    }
    .commuter-stop-label {
        display: inline-flex; align-items: center; justify-content: center;
        padding: 4px 8px; border-radius: 7px; background: rgba(5, 12, 24, 0.88); color: #fff;
        font-size: 12px; font-weight: 800; line-height: 1.1; text-align: center; white-space: nowrap;
        border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 8px 16px rgba(2,8,23,0.26);
    }
    .commuter-stop.route-a .commuter-stop-label { box-shadow: 0 8px 16px rgba(109,40,217,0.22); }
    .commuter-stop.route-b .commuter-stop-label { box-shadow: 0 8px 16px rgba(14,165,233,0.2); }
    @media (max-width: 1199.98px) {
        .commuter-selatan-wrap, .commuter-map-scene { min-height: 620px; }
        .commuter-route-toggles { max-width: calc(100% - 80px); }
    }
    @media (max-width: 991.98px) {
        .commuter-selatan-wrap, .commuter-map-scene { min-height: 560px; }
        .commuter-route-toggles { position: relative; left: auto; top: auto; transform: none; padding: 18px 18px 0; max-width: 100%; }
        .commuter-map-intro { top: 112px; }
    }
    @media (max-width: 767.98px) {
        .commuter-selatan-wrap, .commuter-map-scene { min-height: 500px; }
        .commuter-toggle { min-width: 100%; }
        .commuter-toggle-name { font-size: 17px; }
        .commuter-hub-orb { width: 72px; height: 72px; font-size: 30px; }
        .commuter-service-copy h3 { font-size: 22px; }
        .commuter-service-copy p { font-size: 13px; }
        .commuter-stop-label { font-size: 10px; }
    }

    .status-main-grid.single-panel, .status-bottom-grid.single-panel { grid-template-columns: minmax(0, 1fr); }

    /* ===== Layout tambahan: Lokasi (Gambar Besar + Banyak Info) ===== */
    .location-showcase-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.9fr) minmax(330px, 0.95fr);
        gap: 18px;
        width: 100%;
        min-height: 560px;
    }
    .location-showcase-visual {
        position: relative;
        min-height: 560px;
        overflow: hidden;
        border-radius: 22px;
        border: 1px solid rgba(56, 189, 248, 0.35);
        background: rgba(2, 8, 23, 0.58);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,0.025), 0 18px 45px rgba(2, 8, 23, 0.25);
    }
    .location-showcase-image {
        width: 100%;
        height: 100%;
        min-height: 560px;
        display: block;
        object-position: center;
    }
    .location-showcase-image.is-cover { object-fit: cover; }
    .location-showcase-image.is-contain { object-fit: contain; background: rgba(2, 8, 23, 0.92); }
    .location-showcase-caption {
        position: absolute;
        left: 18px;
        right: 18px;
        bottom: 18px;
        padding: 15px 18px;
        border-radius: 15px;
        background: linear-gradient(135deg, rgba(3, 15, 34, 0.90), rgba(5, 33, 77, 0.84));
        border: 1px solid rgba(56, 189, 248, 0.28);
        backdrop-filter: blur(10px);
    }
    .location-showcase-caption h3 {
        margin: 0 0 5px;
        color: #fff;
        font-size: clamp(22px, 2vw, 34px);
        font-weight: 900;
        text-transform: uppercase;
    }
    .location-showcase-caption p {
        margin: 0;
        color: #dbeafe;
        font-size: 15px;
        line-height: 1.55;
    }
    .location-showcase-info {
        display: flex;
        flex-direction: column;
        gap: 14px;
        max-height: 560px;
        overflow-y: auto;
        padding-right: 5px;
    }
    .location-info-card {
        position: relative;
        overflow: hidden;
        border-radius: 18px;
        padding: 15px;
        background: linear-gradient(145deg, rgba(8, 38, 82, 0.97), rgba(4, 24, 57, 0.97));
        border: 1px solid rgba(56, 189, 248, 0.30);
        box-shadow: 0 14px 28px rgba(2, 8, 23, 0.20);
    }
    .location-info-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, #22d3ee, #3b82f6, #8b5cf6);
    }
    .location-info-head {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 12px;
    }
    .location-info-icon {
        width: 46px;
        height: 46px;
        flex: 0 0 46px;
        border-radius: 13px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 22px;
        color: #fff;
        background: linear-gradient(145deg, #0891b2, #2563eb);
        box-shadow: 0 8px 18px rgba(37, 99, 235, 0.32);
    }
    .location-info-title {
        color: #fff;
        font-size: 20px;
        font-weight: 900;
        line-height: 1.05;
        text-transform: uppercase;
    }
    .location-info-subtitle {
        margin-top: 4px;
        color: #93c5fd;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .04em;
    }
    .location-info-points {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .location-info-point {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        padding: 10px 11px;
        border-radius: 10px;
        color: #e5efff;
        background: rgba(255,255,255,0.055);
        border: 1px solid rgba(148, 163, 184, 0.17);
        font-size: 13px;
        line-height: 1.45;
    }
    .location-info-point i {
        color: #22d3ee;
        margin-top: 1px;
    }
    .location-info-empty {
        padding: 20px;
        border: 1px dashed rgba(148, 163, 184, 0.28);
        border-radius: 14px;
        color: #94a3b8;
        text-align: center;
    }
    @media (min-width: 1800px) {
        .location-showcase-layout { grid-template-columns: minmax(0, 2.1fr) minmax(390px, 0.9fr); min-height: 650px; }
        .location-showcase-visual, .location-showcase-image { min-height: 650px; }
        .location-showcase-info { max-height: 650px; }
        .location-info-card { padding: 18px; }
        .location-info-title { font-size: 24px; }
        .location-info-point { font-size: 15px; padding: 12px 13px; }
    }
    @media (max-width: 1100px) {
        .location-showcase-layout { grid-template-columns: 1fr; }
        .location-showcase-info { max-height: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; }
    }
    @media (max-width: 700px) {
        .location-showcase-visual, .location-showcase-image { min-height: 360px; }
        .location-showcase-info { grid-template-columns: 1fr; }
        .location-showcase-caption { left: 10px; right: 10px; bottom: 10px; }
    }

    /* Layout Utama: ringkasan lebih jelas + info tambahan kekal di bawah */
    .rts-main-layout{
        min-height:100%;
        display:flex;
        flex-direction:column;
    }
    .rts-main-layout .rts-summary{
        width:min(760px,72%);
        min-height:240px;
        margin:28px 0 28px 4px;
        padding:30px 34px;
        border-radius:20px;
    }
    .rts-main-layout .rts-summary h3{
        font-size:clamp(27px,2.1vw,36px);
        margin-bottom:16px;
        letter-spacing:.3px;
    }
    .rts-main-layout .rts-summary p{
        font-size:clamp(20px,1.45vw,27px);
        line-height:1.65;
        letter-spacing:.1px;
    }
    .rts-main-layout .rts-facts{
        margin-top:auto;
        flex-shrink:0;
    }
    @media (max-width: 991.98px){
        .rts-main-layout .rts-summary{
            width:100%;
            min-height:auto;
            margin:22px 0 24px;
            padding:24px;
        }
        .rts-main-layout .rts-summary p{
            font-size:19px;
        }
        .rts-main-layout .rts-facts{
            margin-top:24px;
        }
    }

    /* ================= BOUNDARY MAP / SMART TRAFFIC - CLEAN TV UI ================= */
    .boundary-map-layout {
        display:grid;
        grid-template-columns:minmax(0,3fr) minmax(300px,1fr);
        gap:16px;
        width:100%;
        align-items:stretch;
    }
    .boundary-map-stage {
        position:relative;
        min-height:690px;
        overflow:hidden;
        border-radius:24px;
        border:1px solid rgba(59,130,246,.30);
        background:#031227;
        box-shadow:0 24px 55px rgba(2,8,23,.35), inset 0 1px 0 rgba(255,255,255,.04);
    }
    .boundary-map-image,
    .boundary-map-overlay-image {
        position:absolute;
        inset:0;
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center;
    }
    .boundary-map-image {
        z-index:1;
        filter:brightness(.68) saturate(.42) contrast(1.08);
        transform:scale(1.005);
    }
    .boundary-map-stage::after {
        content:'';
        position:absolute;
        inset:0;
        z-index:2;
        pointer-events:none;
        background:linear-gradient(180deg,rgba(2,8,23,.06),rgba(2,8,23,.18)),linear-gradient(90deg,rgba(2,8,23,.34),transparent 38%);
    }
    .boundary-map-overlay-image {
        z-index:3;
        opacity:0;
        pointer-events:none;
        transition:opacity .32s ease,filter .32s ease;
        filter:drop-shadow(0 0 10px rgba(255,255,255,.08));
    }
    .boundary-map-overlay-image.active { opacity:1; }
    .boundary-map-headline {
        position:absolute;
        left:24px;
        top:22px;
        z-index:5;
        max-width:520px;
        padding:16px 18px;
        border-radius:18px;
        background:linear-gradient(135deg,rgba(2,8,23,.82),rgba(5,20,51,.58));
        border:1px solid rgba(255,255,255,.10);
        backdrop-filter:blur(7px);
        box-shadow:0 14px 28px rgba(2,8,23,.28);
        text-shadow:0 3px 12px rgba(0,0,0,.6);
    }
    .boundary-map-kicker {
        color:#fff;
        font-size:clamp(18px,1.35vw,27px);
        font-weight:900;
        line-height:1.05;
        text-transform:uppercase;
        letter-spacing:.01em;
    }
    .boundary-map-title {
        margin-top:4px;
        color:#facc15;
        font-size:clamp(34px,2.7vw,56px);
        line-height:.96;
        font-weight:1000;
        text-transform:uppercase;
    }
    .boundary-map-subtitle {
        display:flex;
        align-items:center;
        gap:11px;
        margin-top:11px;
        color:rgba(255,255,255,.92);
        font-size:16px;
        font-weight:700;
    }
    .boundary-map-subtitle::before {
        content:'';
        width:48px;
        height:2px;
        border-radius:999px;
        background:rgba(255,255,255,.82);
    }
    .boundary-map-side {
        display:flex;
        flex-direction:column;
        gap:14px;
        min-width:0;
    }
    .boundary-legend-card,
    .boundary-info-card {
        border-radius:22px;
        border:1px solid rgba(59,130,246,.25);
        background:linear-gradient(180deg,rgba(8,31,77,.96),rgba(4,19,47,.98));
        box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 18px 32px rgba(2,8,23,.18);
    }
    .boundary-legend-card { padding:18px; }
    .boundary-info-card { padding:17px 18px; }
    .boundary-legend-title {
        margin:0 0 5px;
        color:#fff;
        font-size:22px;
        font-weight:950;
        text-transform:uppercase;
    }
    .boundary-legend-hint {
        margin-bottom:12px;
        color:rgba(255,255,255,.66);
        font-size:13px;
        line-height:1.45;
    }
    .boundary-legend-list { display:flex;flex-direction:column;gap:9px; }
    .boundary-show-all-btn,
    .boundary-legend-btn {
        width:100%;
        min-height:58px;
        display:flex;
        align-items:center;
        gap:12px;
        padding:11px 13px;
        border-radius:15px;
        border:1px solid rgba(255,255,255,.10);
        color:#fff;
        text-align:left;
        cursor:pointer;
        transition:transform .18s ease,background .18s ease,box-shadow .18s ease,border-color .18s ease;
    }
    .boundary-show-all-btn {
        justify-content:center;
        margin-bottom:3px;
        background:linear-gradient(135deg,rgba(37,99,235,.30),rgba(14,165,233,.16));
        border-color:rgba(96,165,250,.30);
        font-size:15px;
        font-weight:900;
        text-transform:uppercase;
    }
    .boundary-show-all-btn i { font-size:18px; }
    .boundary-show-all-btn:hover,
    .boundary-legend-btn:hover { transform:translateY(-1px); }
    .boundary-show-all-btn.active {
        background:linear-gradient(135deg,#1d4ed8,#0284c7);
        box-shadow:0 10px 20px rgba(37,99,235,.28);
    }
    .boundary-legend-btn { background:rgba(255,255,255,.045); }
    .boundary-legend-btn.active {
        background:linear-gradient(135deg,color-mix(in srgb,var(--legend-color) 24%,rgba(255,255,255,.06)),rgba(255,255,255,.055));
        border-color:color-mix(in srgb,var(--legend-color) 66%,rgba(255,255,255,.10));
        box-shadow:inset 3px 0 0 var(--legend-color),0 0 18px color-mix(in srgb,var(--legend-color) 20%,transparent);
    }
    .boundary-legend-swatch {
        width:15px;
        height:15px;
        flex:0 0 15px;
        border-radius:5px;
        background:var(--legend-color);
        box-shadow:0 0 0 4px color-mix(in srgb,var(--legend-color) 17%,transparent);
    }
    .boundary-legend-text { min-width:0; }
    .boundary-legend-text strong {
        display:block;
        color:#fff;
        font-size:15px;
        font-weight:900;
        line-height:1.12;
        text-transform:uppercase;
    }
    .boundary-legend-text span {
        display:block;
        margin-top:3px;
        color:rgba(255,255,255,.66);
        font-size:11px;
        line-height:1.25;
    }
    .boundary-preview-head { display:flex;align-items:center;gap:10px;margin-bottom:10px; }
    .boundary-preview-dot { width:11px;height:11px;border-radius:50%;background:#3b82f6;box-shadow:0 0 0 4px rgba(59,130,246,.14); }
    .boundary-preview-title { color:#60a5fa;font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.04em; }
    .boundary-preview-body { color:rgba(255,255,255,.73);font-size:13px;line-height:1.55; }
    .boundary-preview-empty { padding:15px;border-radius:15px;background:rgba(255,255,255,.045);color:rgba(255,255,255,.62);text-align:center; }
    @media (min-width:1800px) {
        .boundary-map-layout { grid-template-columns:minmax(0,4fr) minmax(340px,1fr); }
        .boundary-map-stage { min-height:760px; }
        .boundary-show-all-btn,.boundary-legend-btn { min-height:64px; }
    }
    @media (max-width:1199.98px) {
        .boundary-map-layout { grid-template-columns:1fr; }
        .boundary-map-stage { min-height:580px; }
        .boundary-map-side { display:grid;grid-template-columns:1.15fr .85fr; }
    }
    @media (max-width:767.98px) {
        .boundary-map-stage { min-height:430px; }
        .boundary-map-side { display:flex; }
        .boundary-map-headline { left:12px;top:12px;right:12px;max-width:none;padding:13px 14px; }
        .boundary-map-title { font-size:31px; }
        .boundary-map-kicker { font-size:17px; }
        .boundary-map-subtitle { font-size:13px; }
    }

    /* ================= KOMUTER INFO FRIENDLY ================= */
    .komuter-info-layout{display:grid;grid-template-columns:230px minmax(0,1fr) 370px;gap:18px;min-height:650px;align-items:stretch}
    .komuter-info-menu,.komuter-info-panel{background:linear-gradient(180deg,rgba(6,27,68,.97),rgba(4,18,48,.96));border:1px solid rgba(59,130,246,.28);border-radius:24px;padding:18px;box-shadow:0 20px 42px rgba(2,8,23,.22)}
    .komuter-info-menu{display:flex;flex-direction:column;gap:10px}
    .komuter-menu-btn{width:100%;min-height:62px;border:none;border-radius:16px;padding:12px 13px;text-align:left;color:#dbeafe;background:rgba(255,255,255,.045);display:flex;align-items:center;gap:12px;font-size:15px;font-weight:850;line-height:1.15;cursor:pointer;border:1px solid rgba(255,255,255,.08);transition:.18s ease}
    .komuter-menu-btn:hover{transform:translateX(2px);background:rgba(255,255,255,.08)}
    .komuter-menu-btn.active{color:#fff;background:linear-gradient(135deg,rgba(34,197,94,.28),rgba(14,165,233,.18));border-color:rgba(74,222,128,.7);box-shadow:0 10px 22px rgba(34,197,94,.15)}
    .komuter-menu-btn i{font-size:22px;color:#4ade80;flex:0 0 24px}
    .komuter-info-map{position:relative;overflow:hidden;border-radius:24px;border:1px solid rgba(59,130,246,.25);background:#06162f;min-height:650px}
    .komuter-info-map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
    .komuter-info-map img.contain{object-fit:contain;background:#05142b}
    .komuter-info-map::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,23,.03),rgba(2,6,23,.2));pointer-events:none}
    .komuter-map-title{position:absolute;left:20px;top:18px;z-index:2;padding:15px 18px;border-radius:18px;background:rgba(3,15,38,.86);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.12);color:#fff;max-width:420px}
    .komuter-map-title small{display:block;font-size:15px;font-weight:900;letter-spacing:.08em}
    .komuter-map-title strong{display:block;color:#4ade80;font-size:clamp(30px,2.6vw,48px);line-height:.95;font-weight:1000;text-transform:uppercase}
    .komuter-map-title span{display:block;font-size:14px;font-weight:800;margin-top:5px;color:#dbeafe}
    .komuter-info-panel{overflow:hidden;display:flex;flex-direction:column}
    .komuter-panel-item{display:none;height:100%;overflow:auto;padding-right:4px}
    .komuter-panel-item.active{display:block;animation:komuterPanelIn .24s ease}
    @keyframes komuterPanelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
    .komuter-panel-heading{display:flex;align-items:center;gap:10px;color:#fff;font-size:22px;font-weight:950;text-transform:uppercase;padding-bottom:14px;margin-bottom:14px;border-bottom:2px solid rgba(74,222,128,.55)}
    .komuter-panel-heading i{color:#4ade80}
    .komuter-panel-copy{color:#eef6ff;font-size:17px;line-height:1.55;white-space:pre-line}
    .komuter-panel-copy strong{color:#facc15}
    .komuter-info-empty{display:flex;align-items:center;justify-content:center;min-height:200px;text-align:center;color:#93a4bf;padding:20px;border:1px dashed rgba(255,255,255,.15);border-radius:16px}
    @media(max-width:1199.98px){.komuter-info-layout{grid-template-columns:190px minmax(0,1fr) 320px}.komuter-info-map{min-height:590px}.komuter-info-layout{min-height:590px}}
    @media(max-width:991.98px){.komuter-info-layout{grid-template-columns:1fr}.komuter-info-menu{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.komuter-info-map{min-height:480px}.komuter-info-panel{min-height:260px}}
    @media(max-width:575.98px){.komuter-info-menu{grid-template-columns:1fr}.komuter-info-map{min-height:360px}.komuter-map-title{left:10px;top:10px;max-width:calc(100% - 20px)}.komuter-map-title strong{font-size:30px}.komuter-panel-copy{font-size:15px}}

    /* ===== KOMUTER INFO: SVG ROUTE TOGGLE ===== */
    .komuter-info-map .ki-route-controls{
    position:absolute;left:50%;top:18px;transform:translateX(-50%);z-index:8;
    display:flex;gap:10px;flex-wrap:wrap;justify-content:center;width:min(94%,760px);
    }
    .ki-route-btn{
    appearance:none;border:1px solid rgba(255,255,255,.62);border-radius:14px;padding:11px 16px;
    color:#fff;background:rgba(3,17,44,.88);backdrop-filter:blur(10px);font-weight:900;
    font-size:15px;letter-spacing:.01em;cursor:pointer;display:flex;align-items:center;gap:10px;
    box-shadow:0 10px 25px rgba(2,8,23,.3);transition:.2s ease;
    }
    .ki-route-btn:hover{transform:translateY(-1px)}
    .ki-route-btn .ki-route-dot{width:14px;height:14px;border-radius:50%;background:var(--route-color);box-shadow:0 0 0 4px color-mix(in srgb,var(--route-color) 18%,transparent),0 0 18px var(--route-color)}
    .ki-route-btn.active{border-color:var(--route-color);background:color-mix(in srgb,var(--route-color) 22%,rgba(3,17,44,.9));box-shadow:0 10px 28px color-mix(in srgb,var(--route-color) 24%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--route-color) 45%,transparent)}
    .ki-route-svg{position:absolute;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
    .ki-route-layer{opacity:0;transition:opacity .18s ease}
    .ki-route-layer.active{opacity:1}
    .ki-route-glow,.ki-route-line{fill:none;stroke-linecap:round;stroke-linejoin:round}
    .ki-route-glow{stroke-width:3.4;filter:blur(3.2px);opacity:.72}
    .ki-route-line{stroke-width:1.25}
    .ki-route-station{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.7);transition:opacity .28s ease,transform .28s ease}
    .ki-route-layer.active .ki-route-station{opacity:1;transform:scale(1)}
    .ki-route-station circle{fill:#fff;stroke-width:.7}
    .ki-route-label-bg{fill:rgba(1,46,28,.92);stroke:rgba(255,255,255,.5);stroke-width:.18}
    .ki-route-layer-yellow .ki-route-label-bg{fill:rgba(85,66,0,.94)}
    .ki-route-label{fill:#fff;font-size:2.55px;font-weight:900;text-anchor:middle;dominant-baseline:middle;paint-order:stroke;stroke:rgba(0,0,0,.5);stroke-width:.24px}
    .ki-route-draw{stroke-dasharray:1;stroke-dashoffset:1;animation:kiRouteDraw 1.55s cubic-bezier(.22,.72,.22,1) forwards}
    @keyframes kiRouteDraw{to{stroke-dashoffset:0}}
    @media(max-width:767.98px){.komuter-info-map .ki-route-controls{top:10px}.ki-route-btn{font-size:12px;padding:9px 11px}.komuter-map-title{top:86px}}

    /* ================= COMMUTER ROUTE MAP - USER ANIMATION CODE ================= */
    .crm2-map-card{position:relative;width:100%;min-height:700px;overflow:hidden;border-radius:26px;background:#0a211c;box-shadow:0 26px 80px rgba(0,0,0,.38);isolation:isolate;border:1px solid rgba(59,130,246,.2)}
    .crm2-map-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.72) contrast(1.08);transform:scale(1.015);z-index:-3}
    .crm2-map-card::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,rgba(1,18,14,.58) 0%,rgba(1,18,14,.14) 45%,rgba(1,18,14,.05) 100%),linear-gradient(180deg,rgba(2,22,17,.08),rgba(0,9,7,.24))}
    .crm2-map-card::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 50% 45%,transparent 36%,rgba(0,0,0,.24) 100%)}
    .crm2-hero-title{position:absolute;top:4%;left:3.5%;z-index:8;text-transform:uppercase;line-height:.9;text-shadow:0 4px 16px rgba(0,0,0,.7)}
    .crm2-hero-title small{display:block;font-size:clamp(16px,1.55vw,27px);font-weight:900;letter-spacing:.02em;color:#fff}
    .crm2-hero-title strong{display:block;font-size:clamp(36px,4.1vw,66px);font-weight:1000;letter-spacing:-.045em;background:linear-gradient(90deg,#28ff69,#ffe450);-webkit-background-clip:text;color:transparent}
    .crm2-hero-title span{display:block;margin-top:7px;font-size:clamp(14px,1.3vw,23px);font-weight:800;color:#fff}
    .crm2-controls{position:absolute;right:3%;top:4%;z-index:10;display:flex;gap:10px;flex-direction:column;width:min(330px,38%)}
    .crm2-route-btn{border:1px solid rgba(255,255,255,.18);padding:13px 16px;border-radius:14px;background:rgba(4,25,22,.78);backdrop-filter:blur(12px);color:white;font-weight:800;cursor:pointer;transition:.25s ease;display:flex;align-items:center;gap:9px;box-shadow:0 8px 28px rgba(0,0,0,.26)}
    .crm2-route-btn:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.4)}
    .crm2-route-btn.is-off{opacity:.5;filter:grayscale(.35)}
    .crm2-route-btn .crm2-dot{width:12px;height:12px;border-radius:50%;box-shadow:0 0 14px currentColor;background:currentColor;flex:0 0 12px}
    .crm2-green-btn{color:#39ff6a}.crm2-yellow-btn{color:#ffd43b}
    .crm2-map-svg{position:absolute;inset:0;width:100%;height:100%;z-index:4;overflow:visible}
    .crm2-route-shadow{fill:none;stroke:rgba(0,0,0,.44);stroke-width:13;stroke-linecap:round;stroke-linejoin:round}
    .crm2-route-glow{fill:none;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;filter:blur(4px);opacity:.82}
    .crm2-route-main{fill:none;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1600;stroke-dashoffset:1600;animation:crm2DrawRoute 2.1s ease forwards}
    .crm2-route-highlight{fill:none;stroke:rgba(255,255,255,.70);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:7 26;animation:crm2Flow 1.4s linear infinite}
    .crm2-green{stroke:#39ff6a}.crm2-yellow{stroke:#ffd43b}
    .crm2-route-group.crm2-hidden{opacity:0;pointer-events:none}.crm2-route-group{transition:opacity .35s ease}
    @keyframes crm2DrawRoute{to{stroke-dashoffset:0}}@keyframes crm2Flow{to{stroke-dashoffset:-66}}@keyframes crm2Pulse{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.35);opacity:.38}}
    .crm2-station{position:absolute;z-index:7;transform:translate(-50%,-50%);transition:opacity .25s ease}
    .crm2-station-point{width:20px;height:20px;border:4px solid #fff;border-radius:50%;background:var(--station-color);box-shadow:0 0 0 4px rgba(255,255,255,.18),0 0 22px var(--station-color);cursor:pointer;position:relative;padding:0}
    .crm2-station-point::after{content:"";position:absolute;inset:-9px;border:2px solid var(--station-color);border-radius:50%;animation:crm2Pulse 1.8s infinite}
    .crm2-station-label{position:absolute;left:50%;transform:translateX(-50%);bottom:32px;white-space:nowrap;background:rgba(8,52,40,.9);border:1px solid rgba(255,255,255,.22);padding:7px 13px;border-radius:7px;font-size:clamp(10px,.9vw,14px);font-weight:900;box-shadow:0 8px 22px rgba(0,0,0,.34);color:#fff;text-align:center;line-height:1.1}
    .crm2-station-label.crm2-down{top:32px;bottom:auto}.crm2-station-label.crm2-yellow-label{background:rgba(102,82,7,.9)}
    .crm2-connector{position:absolute;left:50%;width:1px;height:26px;background:rgba(255,255,255,.82);bottom:20px}.crm2-connector.crm2-down{top:20px;bottom:auto}
    .crm2-kulai{left:20.5%;top:32%}.crm2-kempas{left:41.5%;top:67%}.crm2-jb{left:52.3%;top:86%}.crm2-pasir{left:87.4%;top:82%}
    @media(max-width:991.98px){.crm2-map-card{min-height:610px}.crm2-controls{top:auto;bottom:3%;left:3%;right:3%;width:auto;max-width:none;flex-direction:row}.crm2-route-btn{flex:1;justify-content:center}}
    @media(max-width:767.98px){.crm2-map-card{min-height:520px;border-radius:20px}.crm2-controls{flex-direction:column}.crm2-route-btn{font-size:12px;padding:10px}.crm2-station-label{font-size:9px;padding:5px 7px}.crm2-station-point{width:17px;height:17px;border-width:3px}.crm2-kulai{left:20.5%;top:31%}.crm2-kempas{left:41.5%;top:66%}.crm2-jb{left:52.3%;top:85%}.crm2-pasir{left:87.4%;top:80%}}
    @media(max-width:1199.98px){.crm2-service-panel{grid-template-columns:1fr 1fr}.crm2-service-title,.crm2-duration{grid-column:span 1}}
    @media(max-width:767.98px){.crm2-service-panel{grid-template-columns:1fr;padding:14px}.crm2-service-title,.crm2-duration{grid-column:auto}.crm2-layout-shell{gap:12px}}

    /* ===== Komuter Selatan: Laluan & Kekerapan ===== */
    .crm2-layout-shell{display:flex;flex-direction:column;gap:18px;width:100%}
    .crm2-service-panel{
        position:relative;
        z-index:11;
        width:100%;
        padding:22px 24px;
        border-radius:20px;
        border:1px solid rgba(255,255,255,.18);
        background:linear-gradient(180deg,rgba(5,25,30,.92),rgba(3,18,23,.88));
        backdrop-filter:blur(14px);
        box-shadow:0 18px 42px rgba(0,0,0,.34),inset 0 1px 0 rgba(255,255,255,.08);
        color:#f8fffb;
        display:grid;
        grid-template-columns:250px minmax(0,1fr) minmax(0,1fr) 330px;
        gap:14px;
        align-items:stretch;
    }
    .crm2-service-title{
        display:flex;
        align-items:center;
        gap:10px;
        margin-bottom:0;
        padding:14px;
        border-radius:16px;
        background:rgba(255,255,255,.05);
        border:1px solid rgba(255,255,255,.08);
        font-size:22px;
        font-weight:950;
        letter-spacing:.02em;
        text-transform:uppercase;
    }
    .crm2-service-title i{
        width:34px;
        height:34px;
        display:grid;
        place-items:center;
        border-radius:10px;
        color:#65f58a;
        background:rgba(57,255,106,.12);
        border:1px solid rgba(57,255,106,.25);
    }
    .crm2-service-route{
        padding:17px 18px;
        height:100%;
        border-radius:15px;
        background:rgba(255,255,255,.055);
        border:1px solid rgba(255,255,255,.09);
    }
    .crm2-service-route + .crm2-service-route{margin-top:0}
    .crm2-service-route.green{border-left:4px solid #39ff6a}
    .crm2-service-route.yellow{border-left:4px solid #ffd43b}
    .crm2-service-route h4{
        margin:0 0 6px;
        font-size:18px;
        line-height:1.35;
        font-weight:950;
        color:#fff;
    }
    .crm2-service-count{
        display:inline-flex;
        align-items:center;
        gap:6px;
        margin-bottom:7px;
        padding:4px 8px;
        border-radius:999px;
        background:rgba(255,255,255,.08);
        font-size:14px;
        font-weight:850;
        color:#eafff1;
    }
    .crm2-service-list{
        display:grid;
        gap:5px;
        margin:0;
        padding:0;
        list-style:none;
    }
    .crm2-service-list li{
        display:grid;
        grid-template-columns:64px 1fr;
        gap:10px;
        align-items:start;
        font-size:15px;
        line-height:1.45;
        color:rgba(255,255,255,.84);
    }
    .crm2-service-list strong{color:#fff;font-weight:850}
    .crm2-duration{height:100%;
        display:flex;
        align-items:center;
        gap:10px;
        margin-top:11px;
        padding:10px 12px;
        border-radius:14px;
        background:linear-gradient(135deg,rgba(50,155,255,.15),rgba(57,255,106,.10));
        border:1px solid rgba(102,190,255,.20);
    }
    .crm2-duration i{font-size:24px;color:#58b8ff}
    .crm2-duration span{font-size:14px;color:rgba(255,255,255,.72)}
    .crm2-duration strong{display:block;margin-top:3px;font-size:17px;color:#fff}
    @media(max-width:1250px){
        .crm2-service-panel{width:360px;right:2.2%;bottom:3%}
    }
    @media(max-width:991.98px){
        .crm2-service-panel{position:relative;right:auto;bottom:auto;width:auto;margin:14px;background:rgba(5,25,30,.96)}
        .crm2-map-card{padding-bottom:0}
    }
    @media(max-width:600px){
        .crm2-service-panel{padding:14px;margin:10px;border-radius:16px}
        .crm2-service-route{padding:10px}
        .crm2-service-list li{grid-template-columns:45px 1fr;font-size:11px}
    }

    /* =========================================================
    LAYOUT 16 - LOKASI PEMANTAUAN MODEN
    UI INTERAKTIF + PANEL KANAN SEIMBANG + POPUP BESAR
    ========================================================= */
    .location-monitoring-layout{
    --lm-map-height:67vh;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(410px,24vw);
    gap:22px;
    color:#172033;
    width:100%;
    max-width:none;
    margin:0;
    }
    .location-monitoring-main{min-width:0;display:flex;flex-direction:column;gap:16px;width:100%;margin:0}
    .location-monitoring-heading{display:flex;align-items:flex-end;justify-content:space-between;padding:0 2px;min-height:58px}
    .location-monitoring-heading .lm-eyebrow{color:#35b9ff;font-size:13px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;margin-bottom:5px}
    .location-monitoring-heading h3{margin:0;color:#fff;font-size:clamp(26px,2.35vw,40px);font-weight:950;letter-spacing:-.025em;text-shadow:0 2px 14px rgba(0,0,0,.16)}

    .lm-map-card{
    background:linear-gradient(145deg,#eaf1f6,#dbe7ef);
    border:1px solid rgba(255,255,255,.28);
    height:var(--lm-map-height);
    min-height:540px;
    }
    .lm-map-card img{object-fit:fill !important;background:#eef3f7}
    .lm-map-card:after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
    .lm-map-badge{position:absolute;left:20px;bottom:20px;display:flex;align-items:center;gap:10px;padding:11px 16px;border-radius:999px;background:rgba(4,27,49,.91);backdrop-filter:blur(12px);color:#fff;font-size:14px;font-weight:900;box-shadow:0 10px 28px rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.13)}
    .lm-map-badge-dot{width:11px;height:11px;border-radius:50%;background:#f5c518;box-shadow:0 0 0 5px rgba(245,197,24,.18),0 0 14px rgba(245,197,24,.55)}

    .lm-info-grid{display:grid;grid-template-columns:1.25fr .7fr 1.5fr;gap:14px}
    .lm-info-card{position:relative;overflow:hidden;background:rgba(255,255,255,.98);border:1px solid rgba(13,49,78,.09);border-radius:18px;padding:16px 17px;box-shadow:0 10px 26px rgba(0,0,0,.10)}
    .lm-info-card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:linear-gradient(180deg,#ffe15a,#f5b800)}
    .lm-info-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:12px;background:#fff6c8;color:#8d6c00;font-size:18px;margin-bottom:10px}
    .lm-info-label{font-size:11px;color:#758193;font-weight:900;letter-spacing:.11em;text-transform:uppercase;margin-bottom:5px}
    .lm-info-value{font-size:16px;color:#082a4a;line-height:1.38;white-space:pre-line}

    /* Panel kanan disamakan dengan tinggi peta */
    .location-monitoring-side{
    height:var(--lm-map-height);
    min-height:540px;
    margin-top:74px;
    grid-template-rows:minmax(0,1fr) minmax(0,1fr) auto;
    gap:14px;
    }
    .lm-photo-card,.lm-safety-card{
    background:rgba(255,255,255,.985);
    border:1px solid rgba(13,49,78,.10);
    border-radius:21px;
    box-shadow:0 14px 34px rgba(0,0,0,.14);
    overflow:hidden;
    }
    .lm-photo-card{min-height:0}
    .lm-photo-head{display:flex;align-items:center;justify-content:space-between;padding:13px 15px 10px;color:#082a4a;flex:0 0 auto}
    .lm-photo-head strong{font-weight:950;text-transform:uppercase;letter-spacing:.01em}
    .lm-photo-head span{font-size:9px;font-weight:900;letter-spacing:.1em;background:#edf3f8;color:#627084;border-radius:999px;padding:5px 9px}
    .lm-photo-frame{margin:0 11px 11px;border-radius:15px;background:#e9eef4;cursor:zoom-in;flex:1;aspect-ratio:auto;border:1px solid rgba(8,42,74,.07)}
    .lm-photo-frame:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
    .lm-photo-frame:after{content:"Tap untuk paparan penuh";position:absolute;right:10px;bottom:10px;z-index:2;padding:6px 10px;border-radius:999px;background:rgba(4,29,52,.88);color:#fff;font-weight:850;opacity:.92;transform:none;transition:.2s ease;pointer-events:none;backdrop-filter:blur(7px)}
    .lm-photo-frame:hover:after{background:rgba(13,89,155,.95)}
    .lm-photo-frame img{object-fit:fill !important;transition:transform .28s ease,filter .28s ease}
    .lm-photo-frame:hover img{transform:scale(1.025);filter:saturate(1.05)}
    .lm-photo-empty{height:100%;display:grid;place-items:center;color:#8a95a3;font-size:13px;font-weight:700;text-align:center;padding:12px}

    .lm-safety-card{padding:15px 16px 14px}
    .lm-safety-head{display:flex;gap:11px;align-items:center;margin-bottom:10px}
    .lm-safety-icon{width:40px;height:40px;border-radius:12px;background:#fff5c1;color:#886900;display:grid;place-items:center;font-size:19px;flex:0 0 40px}
    .lm-safety-head strong{display:block;color:#082a4a;font-size:16px;font-weight:950}
    .lm-safety-head small{display:block;color:#7a8594;font-size:10px;margin-top:3px}
    .lm-safety-list{display:grid;grid-template-columns:1fr;gap:6px}
    .lm-safety-item{display:flex;align-items:flex-start;gap:8px;background:#f6f9fc;border:1px solid #eef2f6;border-radius:10px;padding:7px 9px;color:#344154;font-size:12px;font-weight:750;line-height:1.25}
    .lm-check{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;background:#e4f7ed;color:#139357;font-size:10px;font-weight:1000;flex:0 0 18px}

    /* Popup gambar: betul-betul besar untuk paparan interaktif */
    .lm-image-modal{
    position:fixed;
    inset:0;
    z-index:99999;
    display:none;
    align-items:center;
    justify-content:center;
    padding:2.5vh 2vw;
    background:rgba(1,10,20,.93);
    backdrop-filter:blur(12px);
    }
    .lm-image-modal.open{display:flex}
    .lm-image-modal-box{
    position:relative;
    width:96vw;
    height:94vh;
    max-width:none;
    max-height:none;
    border-radius:24px;
    overflow:hidden;
    background:#051321;
    border:1px solid rgba(255,255,255,.18);
    box-shadow:0 35px 110px rgba(0,0,0,.62);
    display:flex;
    align-items:center;
    justify-content:center;
    }
    .lm-image-modal-img{
    display:block;
    width:100%;
    height:100%;
    max-width:none;
    max-height:none;
    object-fit:contain;
    object-position:center;
    background:#051321;
    }
    .lm-image-modal-close{
    position:absolute;
    top:18px;
    right:18px;
    width:54px;
    height:54px;
    border:1px solid rgba(255,255,255,.28);
    border-radius:50%;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.96);
    color:#082a4a;
    font-size:32px;
    line-height:1;
    cursor:pointer;
    box-shadow:0 9px 26px rgba(0,0,0,.32);
    z-index:3;
    transition:.2s ease;
    }
    .lm-image-modal-close:hover{transform:scale(1.06);background:#fff}
    .lm-image-modal-caption{
    position:absolute;
    left:22px;
    bottom:20px;
    z-index:3;
    padding:10px 15px;
    border-radius:12px;
    background:rgba(3,28,50,.88);
    border:1px solid rgba(255,255,255,.14);
    color:#fff;
    font-size:16px;
    font-weight:900;
    max-width:70%;
    backdrop-filter:blur(9px);
    }

    @media(min-width:1800px){
    .location-monitoring-layout{--lm-map-height:69vh;grid-template-columns:minmax(0,1fr) minmax(440px,23vw)}
    .location-monitoring-side{margin-top:78px}
    }
    @media(max-width:1350px){
    .location-monitoring-layout{grid-template-columns:minmax(0,1fr) 370px}
    .location-monitoring-side{margin-top:70px}
    }
    @media(max-width:1150px){
    .location-monitoring-layout{grid-template-columns:minmax(0,1fr) 330px;--lm-map-height:62vh}
    .location-monitoring-side{margin-top:68px;min-height:500px}
    .lm-info-grid{grid-template-columns:1fr 1fr}
    .lm-info-card:last-child{grid-column:1/-1}
    }
    @media(max-width:850px){
    .location-monitoring-layout{display:block}
    .location-monitoring-side{height:auto;min-height:0;margin-top:16px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:14px}
    .lm-photo-card{min-height:260px}
    .lm-safety-card{grid-column:1/-1}
    .lm-image-modal{padding:12px}
    .lm-image-modal-box{width:100%;height:92vh;border-radius:18px}
    }
    @media(max-width:600px){
    .lm-map-card{height:auto}
    .lm-info-grid,.location-monitoring-side{grid-template-columns:1fr}
    .lm-info-card:last-child,.lm-safety-card{grid-column:auto}
    .lm-photo-card{min-height:230px}
    .lm-image-modal-box{height:90vh}
    .lm-image-modal-close{width:46px;height:46px;font-size:27px;top:12px;right:12px}
    .lm-image-modal-caption{left:14px;bottom:14px;font-size:13px;max-width:72%}
    }

    /* =========================================================
    LAYOUT 16 REFINEMENT - TEKS BESAR + UI INTERAKTIF TANPA BORDER PUTIH
    ========================================================= */

    /* Peta - lebih clean tanpa outline putih */
    .lm-map-card{
    background:#092542;
    box-shadow:0 22px 54px rgba(0,0,0,.28);
    }
    .lm-map-card img{background:#0b2b4b}
    .lm-map-badge{
    font-size:16px;
    padding:13px 18px;
    border:0 !important;
    background:linear-gradient(135deg,rgba(4,31,55,.96),rgba(10,65,108,.94));
    box-shadow:0 12px 30px rgba(0,0,0,.32);
    }

    /* Kad info bawah peta */
    .lm-info-card{
    background:linear-gradient(145deg,#0b3154,#0a2744) !important;
    border:0 !important;
    padding:19px 20px 18px;
    box-shadow:0 14px 30px rgba(0,0,0,.19);
    }
    .lm-info-card:before{
    background:linear-gradient(180deg,#ffe66a,#ffbe16);
    }
    .lm-info-icon{
    width:44px;height:44px;
    margin-bottom:12px;
    border-radius:13px;
    background:rgba(255,220,60,.16);
    font-size:21px;
    }
    .lm-info-label{
    color:#86b9df;
    font-size:13px;
    margin-bottom:7px;
    }
    .lm-info-value{
    color:#fff;
    font-size:19px;
    }

    /* Panel kanan - dark premium, tiada border putih */
    .lm-photo-card,.lm-safety-card{
    background:linear-gradient(150deg,#0b3154 0%,#092641 100%) !important;
    border:0 !important;
    box-shadow:0 16px 36px rgba(0,0,0,.20);
    border-radius:22px;
    }
    .lm-photo-head{
    padding:16px 17px 13px;
    color:#fff;
    }
    .lm-photo-head strong{
    color:#fff;
    font-size:18px;
    letter-spacing:.025em;
    }
    .lm-photo-head span{
    font-size:11px;
    padding:6px 11px;
    background:rgba(255,255,255,.10);
    color:#bcdcff;
    border:0;
    }
    .lm-photo-frame{
    background:#071d31;
    box-shadow:none;
    }
    .lm-photo-frame:after{
    padding:8px 12px;
    font-size:12px;
    background:rgba(5,30,51,.88);
    box-shadow:0 6px 18px rgba(0,0,0,.24);
    }

    /* Safety - font jauh lebih jelas */
    .lm-safety-card{padding:18px 18px 17px}
    .lm-safety-head{gap:13px;margin-bottom:14px}
    .lm-safety-icon{
    width:46px;height:46px;flex-basis:46px;
    border-radius:14px;
    background:rgba(255,220,60,.15);
    color:#ffdc3c;
    font-size:22px;
    }
    .lm-safety-head strong{
    color:#fff;
    font-size:20px;
    line-height:1.15;
    }
    .lm-safety-head small{
    color:#9fc6e6;
    font-size:12px;
    margin-top:5px;
    }
    .lm-safety-item{
    background:rgba(255,255,255,.065) !important;
    border:0 !important;
    border-radius:12px;
    padding:10px 11px;
    color:#f3f8fc;
    font-size:14px;
    font-weight:800;
    line-height:1.35;
    }
    .lm-check{
    width:22px;height:22px;flex-basis:22px;
    background:#dff7e9;
    color:#11874f;
    font-size:12px;
    }

    /* Empty state */
    .lm-photo-empty{
    color:#a9c5dc;
    font-size:14px;
    }

    @media (max-width:1200px){
    .lm-info-value{font-size:17px}
    .lm-photo-head strong{font-size:16px}
    .lm-safety-head strong{font-size:18px}
    .lm-safety-item{font-size:13px}
    }

    /* LAYOUT 16 - PETA PENUH IKUT SAIZ KOTAK */
    .lm-map-card img{
    object-fit:cover !important;
    }

    /* LAYOUT 16 - MAP FIT EXACT: kotak ikut nisbah gambar, tiada crop/ruang kosong */
    .lm-map-card img{
    position:relative !important;
    inset:auto !important;
    height:auto !important;
    max-width:100% !important;
    }

    /* =========================================================
       UTAMA — COMPACT PROFESSIONAL LAYOUT
       Ringkasan kiri + info CMS kanan (2x2), tanpa tambah maklumat baru
       ========================================================= */
    .rts-main-layout{
        height:100%;
        min-height:0;
        display:grid !important;
        /* Kiri kekal besar, kanan diberi ruang sedikit lebih luas */
        grid-template-columns:minmax(0, 1.25fr) minmax(520px, .95fr);
        grid-template-rows:auto minmax(0,1fr);
        column-gap:18px;
        row-gap:18px;
        align-items:stretch;
        align-content:start;
        padding-bottom:6px;
    }

    .rts-main-layout .rts-kicker{
        font-size:24px !important;
    }

    .rts-main-layout .rts-title{
        font-size:clamp(38px,3.6vw,58px) !important;
    }

    .rts-main-layout .rts-tagline{
        font-size:21px !important;
    }

    .rts-main-layout .rts-page-head{
        grid-column:1 / -1;
        margin:0 90px 0 0 !important;
        max-width:none !important;
        animation:utamaHeadIn .55s ease both;
    }

    .rts-main-layout .rts-summary{
        grid-column:1;
        grid-row:2;
        width:100% !important;
        min-height:0 !important;
        height:100%;
        margin:0 !important;
        padding:32px 34px !important;
        border-radius:18px !important;
        position:relative;
        overflow:hidden;
        display:flex;
        flex-direction:column;
        justify-content:center;
        background:
            linear-gradient(145deg, rgba(12,52,105,.96), rgba(7,32,70,.95)) !important;
        border:1px solid rgba(74,166,255,.34) !important;
        box-shadow:
            0 18px 42px rgba(1,12,31,.26),
            inset 0 1px 0 rgba(255,255,255,.05) !important;
        animation:utamaCardIn .6s .08s ease both;
    }

    .rts-main-layout .rts-summary::before{
        content:"";
        position:absolute;
        left:0;
        top:0;
        bottom:0;
        width:4px;
        background:linear-gradient(180deg,#42d6ff,#1979f3);
        box-shadow:0 0 18px rgba(49,176,255,.58);
    }

    .rts-main-layout .rts-summary::after{
        content:"";
        position:absolute;
        width:280px;
        height:280px;
        border-radius:50%;
        right:-115px;
        bottom:-145px;
        background:radial-gradient(circle,rgba(39,140,255,.18),transparent 68%);
        pointer-events:none;
    }

    .rts-main-layout .rts-summary h3{
        position:relative;
        z-index:1;
        margin:0 0 18px !important;
        color:#fff !important;
        font-size:clamp(32px,2.3vw,42px) !important;
        line-height:1.1;
        font-weight:900;
        letter-spacing:.2px;
        text-transform:uppercase;
        display:flex;
        align-items:center;
        gap:12px;
    }

    .rts-main-layout .rts-summary h3::before{
        content:"";
        width:11px;
        height:11px;
        flex:0 0 11px;
        border-radius:3px;
        background:#62d8ff;
        box-shadow:0 0 0 6px rgba(67,190,255,.10),0 0 16px rgba(67,190,255,.34);
    }

    .rts-main-layout .rts-summary p{
        position:relative;
        z-index:1;
        margin:0 !important;
        color:#eef7ff !important;
        font-size:clamp(22px,1.6vw,28px) !important;
        line-height:1.72 !important;
        font-weight:600 !important;
        max-width:900px;
    }

    .rts-main-layout .rts-facts{
        grid-column:2;
        grid-row:2;
        margin:0 !important;
        width:100%;
        height:100%;
        min-height:0;
        display:grid !important;
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        /* 9 kad = 5 baris. Gap dirapatkan supaya semua muat dalam skrin TV */
        grid-auto-rows:minmax(0,1fr);
        gap:8px 10px;
        padding:0 !important;
        overflow:visible !important;
        background:transparent !important;
        border:0 !important;
        border-radius:0 !important;
        box-shadow:none !important;
        backdrop-filter:none !important;
        align-content:stretch;
        animation:utamaFactsIn .6s .16s ease both;
    }

    .rts-main-layout .rts-fact{
        min-height:0 !important;
        height:100%;
        box-sizing:border-box;
        /* Icon diapungkan, jadi padding boleh lebih kompak tanpa potong teks */
        padding:20px 10px 8px !important;
        border-radius:14px;
        text-align:center;
        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        overflow:visible;
        position:relative;
        background:
            linear-gradient(150deg,rgba(15,65,126,.97),rgba(7,38,82,.96));
        border:1px solid rgba(73,164,255,.28) !important;
        box-shadow:
            0 10px 24px rgba(1,13,35,.18),
            inset 0 1px 0 rgba(255,255,255,.045);
        transition:
            transform .25s ease,
            border-color .25s ease,
            box-shadow .25s ease;
    }

    .rts-main-layout .rts-fact::before{
        content:"";
        position:absolute;
        right:-38px;
        top:-48px;
        width:120px;
        height:120px;
        border-radius:50%;
        background:radial-gradient(circle,rgba(44,155,255,.15),transparent 68%);
        pointer-events:none;
    }

    .rts-main-layout .rts-fact::after{
        display:none !important;
    }

    .rts-main-layout .rts-fact:nth-child(n+6){
        border-top:1px solid rgba(73,164,255,.28) !important;
    }

    .rts-main-layout .rts-fact:hover{
        transform:translateY(-4px);
        border-color:rgba(91,201,255,.62) !important;
        box-shadow:
            0 18px 36px rgba(1,13,35,.28),
            0 0 22px rgba(44,155,255,.10);
    }

    .rts-main-layout .rts-fact-icon{
        position:absolute;
        top:-10px;
        left:50%;
        transform:translateX(-50%);
        width:34px !important;
        height:34px !important;
        flex:0 0 34px;
        margin:0 !important;
        border-radius:50% !important;
        display:flex;
        align-items:center;
        justify-content:center;
        font-size:16px !important;
        color:#7edcff !important;
        background:linear-gradient(145deg,rgba(20,84,157,.98),rgba(8,45,96,.98)) !important;
        border:1px solid rgba(103,200,255,.34) !important;
        box-shadow:
            0 5px 14px rgba(0,14,38,.24),
            0 0 14px rgba(20,138,255,.10) !important;
        transition:transform .25s ease,box-shadow .25s ease;
        z-index:2;
    }

    .rts-main-layout .rts-fact:hover .rts-fact-icon{
        transform:translateX(-50%) scale(1.06);
        box-shadow:
            0 0 0 4px rgba(70,180,255,.07),
            0 0 18px rgba(40,164,255,.17) !important;
    }

    .rts-main-layout .rts-fact-label{
        margin:0 0 4px !important;
        color:#fff !important;
        font-size:clamp(14px,.86vw,17px) !important;
        line-height:1.12;
        font-weight:900;
        text-transform:uppercase;
        letter-spacing:.15px;
        white-space:normal;
        overflow:visible;
        overflow-wrap:anywhere;
    }

    .rts-main-layout .rts-fact-value{
        color:#dcecff !important;
        font-size:clamp(12px,.74vw,15px) !important;
        line-height:1.18;
        font-weight:700;
        white-space:normal;
        overflow:visible;
        overflow-wrap:anywhere;
    }

    @keyframes utamaHeadIn{
        from{opacity:0;transform:translateY(-10px);}
        to{opacity:1;transform:translateY(0);}
    }

    @keyframes utamaCardIn{
        from{opacity:0;transform:translateY(16px) scale(.99);}
        to{opacity:1;transform:translateY(0) scale(1);}
    }

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

    @media (max-width:1200px){
        .rts-main-layout{
            grid-template-columns:minmax(0,1.10fr) minmax(390px,.90fr);
        }
        .rts-main-layout .rts-summary{
            padding:28px !important;
        }
        .rts-main-layout .rts-fact-label{
            font-size:13px !important;
        }
        .rts-main-layout .rts-fact-value{
            font-size:12px !important;
        }
    }

    @media (max-width:900px){
        .rts-main-layout{
            height:auto;
            display:grid !important;
            grid-template-columns:1fr;
            grid-template-rows:auto auto auto;
            gap:16px;
        }
        .rts-main-layout .rts-page-head{
            grid-column:1;
            grid-row:1;
            margin-right:0 !important;
        }
        .rts-main-layout .rts-summary{
            grid-column:1;
            grid-row:2;
            height:auto;
            padding:24px !important;
        }
        .rts-main-layout .rts-facts{
            grid-column:1;
            grid-row:3;
            height:auto;
            grid-template-columns:repeat(2,minmax(0,1fr)) !important;
            grid-auto-rows:minmax(150px,auto);
        }
    }

    @media (max-width:560px){
        .rts-main-layout .rts-facts{
            grid-template-columns:1fr !important;
        }
        .rts-main-layout .rts-fact{
            min-height:145px !important;
        }
        .rts-main-layout .rts-summary p{
            font-size:19px !important;
        }
    }
    .content-pane.active:has(.route-station-layout){
        height:100% !important;
        min-height:0 !important;
        overflow:hidden !important;
        padding:22px 30px 24px 28px !important;
    }

    .content-pane.active:has(.route-station-layout) .pane-title{
        margin:0 0 14px !important;
        padding-bottom:10px !important;
        font-size:clamp(25px,1.65vw,34px) !important;
        line-height:1.05 !important;
    }

    .route-station-layout{
        width:100% !important;
        height:calc(100% - 58px) !important;
        min-height:0 !important;
        display:grid !important;
        grid-template-columns:minmax(0,2.05fr) minmax(430px,1fr) !important;
        gap:14px !important;
        align-items:stretch !important;
    }

    .route-station-layout .route-map-card{
        height:100% !important;
        min-height:0 !important;
        display:flex !important;
        flex-direction:column !important;
        padding:0 !important;
        background:transparent !important;
        border:0 !important;
        box-shadow:none !important;
    }

    .route-station-layout .route-map-scene{
        flex:1 1 auto !important;
        height:100% !important;
        min-height:0 !important;
        border-radius:12px !important;
        overflow:hidden !important;
    }

    .route-station-layout .route-map-img,
    .route-station-layout img.route-map-img{
        width:100% !important;
        height:100% !important;
        min-height:100% !important;
        max-height:none !important;
        object-fit:cover !important;
        object-position:center !important;
        border-radius:12px !important;
    }

    .route-station-layout .route-map-caption{
        flex:0 0 auto;
        margin:8px 2px 0 !important;
        font-size:15px !important;
        line-height:1.4 !important;
    }

    .route-station-layout .route-stations-card{
        height:100% !important;
        min-height:0 !important;
        display:grid !important;
        grid-template-rows:repeat(2,minmax(0,1fr)) !important;
        gap:12px !important;
        overflow:hidden !important;
        padding:0 !important;
    }

    .route-station-layout .station-section{
        min-height:0 !important;
        height:100% !important;
        padding:18px 18px 16px !important;
        border-radius:16px !important;
        display:flex !important;
        flex-direction:column !important;
        overflow:hidden !important;
    }

    .route-station-layout .station-section + .station-section{
        margin-top:0 !important;
        padding-top:18px !important;
    }

    .route-station-layout .station-card-head{
        flex:0 0 auto !important;
        gap:12px !important;
        margin-bottom:12px !important;
    }

    .route-station-layout .station-card-icon{
        width:52px !important;
        height:52px !important;
        flex:0 0 52px !important;
        border-radius:14px !important;
        font-size:25px !important;
    }

    .route-station-layout .station-title{
        font-size:clamp(22px,1.45vw,30px) !important;
        line-height:1.08 !important;
        letter-spacing:.15px !important;
    }

    .route-station-layout .station-subtitle{
        margin-top:4px !important;
        font-size:14px !important;
        line-height:1.25 !important;
        letter-spacing:.45px !important;
    }

    .route-station-layout .station-list{
        flex:1 1 auto !important;
        min-height:0 !important;
        overflow-y:auto !important;
        overscroll-behavior:contain;
        scrollbar-width:thin;
        padding-right:3px !important;
        gap:8px !important;
    }

    .route-station-layout .station-list::-webkit-scrollbar{width:6px;}
    .route-station-layout .station-list::-webkit-scrollbar-thumb{
        background:rgba(83,183,255,.35);
        border-radius:999px;
    }

    .route-station-layout .station-list li{
        min-height:46px !important;
        padding:10px 12px 10px 41px !important;
        border-radius:10px !important;
        display:flex !important;
        align-items:center !important;
        font-size:clamp(15px,.92vw,18px) !important;
        line-height:1.25 !important;
        touch-action:manipulation;
    }

    .route-station-layout .station-list li::before{
        left:12px !important;
        width:19px !important;
        height:19px !important;
        font-size:11px !important;
    }

    .route-station-layout .route-marker-btn{
        width:38px !important;
        height:38px !important;
        font-size:16px !important;
        touch-action:manipulation;
    }

    #project-detail-pane:has(.route-station-layout) .paj-back-btn{
        min-height:48px !important;
        padding:11px 18px !important;
        font-size:16px !important;
        border-radius:11px !important;
        touch-action:manipulation;
    }

    /* Full-HD / TV landscape */
    @media (min-width:1500px) and (min-height:700px){
        .content-pane.active:has(.route-station-layout){
            padding:18px 28px 20px 26px !important;
        }
        .route-station-layout{
            grid-template-columns:minmax(0,2.08fr) minmax(470px,1fr) !important;
            gap:14px !important;
        }
        .route-station-layout .station-list li{
            min-height:48px !important;
        }
    }
    @media (max-width:1499px){
        .content-pane.active:has(.route-station-layout){
            overflow-y:auto !important;
            padding:22px !important;
        }
        .route-station-layout{
            height:auto !important;
            min-height:620px !important;
            grid-template-columns:minmax(0,1.7fr) minmax(360px,.9fr) !important;
        }
        .route-station-layout .route-map-scene{min-height:560px !important;}
    }

    @media (max-width:1100px){
        .route-station-layout{
            grid-template-columns:1fr !important;
            height:auto !important;
            min-height:0 !important;
        }
        .route-station-layout .route-map-scene{min-height:480px !important;}
        .route-station-layout .route-stations-card{
            height:auto !important;
            grid-template-rows:none !important;
            overflow:visible !important;
        }
        .route-station-layout .station-section{height:auto !important;}
        .route-station-layout .station-list{overflow:visible !important;}
    }

    /* =========================================================
       LALUAN & STESEN — PREMIUM ROUTE ANIMATION
       Peta kekal statik. Laluan dilukis sekali apabila tab dibuka,
       kemudian kekal dengan glow lembut + satu titik perjalanan.
       ========================================================= */
    .route-station-layout .route-map-img,
    .route-station-layout img.route-map-img{
        animation:none !important;
        transform:none !important;
    }

    .route-station-layout .route-map-scene::after{
        background:linear-gradient(180deg, rgba(255,255,255,.055), rgba(0,0,0,.035)) !important;
    }

    .route-station-layout .route-line-under,
    .route-station-layout .route-line-main,
    .route-station-layout .route-line-core,
    .route-station-layout .route-line-sheen{
        stroke-dasharray:1;
        stroke-dashoffset:1;
        animation:routeDrawIn 1.85s cubic-bezier(.22,.75,.2,1) forwards !important;
    }
    .route-station-layout .route-line-under{animation-delay:.05s !important;}
    .route-station-layout .route-line-main{animation-delay:.10s !important;}
    .route-station-layout .route-line-core{animation-delay:.14s !important;}
    .route-station-layout .route-line-sheen{animation-delay:.18s !important;}

    @keyframes routeDrawIn{
        0%{stroke-dashoffset:1;opacity:.15;}
        100%{stroke-dashoffset:0;opacity:1;}
    }

    /* Glow selepas line selesai dilukis — sangat lembut */
    .route-station-layout .route-line-main{
        stroke-width:1.55 !important;
        filter:drop-shadow(0 0 3px rgba(216,180,254,.78))
               drop-shadow(0 0 8px rgba(139,92,246,.56))
               drop-shadow(0 0 16px rgba(124,58,237,.36)) !important;
    }
    .route-station-layout .route-line-under{
        stroke-width:2.35 !important;
        filter:blur(1.9px) drop-shadow(0 0 7px rgba(139,92,246,.54)) !important;
        opacity:.60;
    }
    .route-station-layout .route-line-core{
        stroke-width:.54 !important;
        opacity:.96 !important;
    }
    .route-station-layout .route-line-sheen{
        stroke-width:.14 !important;
        opacity:.78 !important;
    }

    /* Moving light: jangan pulse agresif */
    .route-station-layout .route-mover-ring,
    .route-station-layout .route-mover-core{
        opacity:0;
        animation:routeTravelerReveal 8.5s linear infinite 1.95s !important;
    }
    .route-station-layout .route-mover-core{
        filter:drop-shadow(0 0 5px rgba(255,255,255,.96))
               drop-shadow(0 0 10px rgba(216,180,254,.80)) !important;
    }
    .route-station-layout .route-mover-ring{
        filter:drop-shadow(0 0 7px rgba(168,85,247,.80)) !important;
    }
    @keyframes routeTravelerReveal{
        0%,6%{opacity:0;}
        12%,72%{opacity:1;}
        82%,100%{opacity:0;}
    }

    /* Marker muncul sekali; tiada radar pulse berterusan */
    .route-station-layout .route-marker{
        opacity:0;
        animation:routeMarkerEnter .48s cubic-bezier(.2,.8,.2,1) forwards;
    }
    .route-station-layout .route-marker:nth-of-type(1){animation-delay:1.15s;}
    .route-station-layout .route-marker:nth-of-type(2){animation-delay:1.35s;}
    .route-station-layout .route-marker:nth-of-type(3){animation-delay:1.55s;}
    .route-station-layout .route-marker:nth-of-type(n+4){animation-delay:1.7s;}

    @keyframes routeMarkerEnter{
        from{opacity:0;transform:translate(-50%,-50%) scale(.72);}
        to{opacity:1;transform:translate(-50%,-50%) scale(1);}
    }

    .route-station-layout .route-marker-btn::before,
    .route-station-layout .route-marker-btn::after{
        animation:routeMarkerSinglePulse 1.25s ease-out 1 forwards !important;
    }
    .route-station-layout .route-marker-btn::after{animation-delay:.18s !important;}
    @keyframes routeMarkerSinglePulse{
        0%{transform:scale(.78);opacity:.75;}
        100%{transform:scale(1.45);opacity:0;}
    }

    .route-station-layout .route-marker-btn:hover,
    .route-station-layout .route-marker.active .route-marker-btn{
        box-shadow:0 0 0 5px rgba(125,88,255,.16),0 0 24px rgba(168,85,247,.60),0 12px 20px rgba(36,18,87,.35) !important;
        transform:scale(1.06);
    }

    @media (prefers-reduced-motion:reduce){
        .route-station-layout .route-line-under,
        .route-station-layout .route-line-main,
        .route-station-layout .route-line-core,
        .route-station-layout .route-line-sheen,
        .route-station-layout .route-marker,
        .route-station-layout .route-marker-btn::before,
        .route-station-layout .route-marker-btn::after,
        .route-station-layout .route-mover-ring,
        .route-station-layout .route-mover-core{
            animation:none !important;
            opacity:1 !important;
            stroke-dashoffset:0 !important;
        }
    }

  /* ==========================================
     FORCE HERO ICON BOX - PAGE 4 TO PAGE 7
     Elak Bootstrap d-md-block override display:flex
  ========================================== */

    /* =========================================================
       LAYOUT POB LOKASI
       Tambahan sahaja - tidak mengubah footer / layout sedia ada
       ========================================================= */
    .pob-location-layout{
        --pob-cyan:#32d5ff;
        width:100%;
        min-height:0;
        display:flex;
        flex-direction:column;
        gap:14px;
        color:#f7fbff;
    }
    .pob-location-head{
        display:flex;
        align-items:flex-end;
        justify-content:space-between;
        gap:18px;
        flex:0 0 auto;
        padding:0 2px 4px;
    }
    .pob-location-title{
        margin:0;
        color:#fff;
        font-size:clamp(28px,2.25vw,46px);
        line-height:1.05;
        font-weight:950;
        letter-spacing:.35px;
        text-transform:uppercase;
        text-shadow:0 4px 14px rgba(0,0,0,.35);
    }
    .pob-location-subtitle{
        margin:7px 0 0;
        color:#61dbff;
        font-size:clamp(13px,1.05vw,19px);
        font-weight:800;
        letter-spacing:.4px;
        text-transform:uppercase;
    }
    .pob-location-grid{
        display:grid;
        grid-template-columns:minmax(0,2.1fr) minmax(360px,.95fr);
        gap:18px;
        width:100%;
        min-height:560px;
        align-items:stretch;
    }
    .pob-map-panel{
        min-width:0;
        min-height:560px;
        display:flex;
        flex-direction:column;
        border-radius:22px;
        overflow:hidden;
        border:1px solid rgba(52,195,255,.48);
        background:rgba(4,22,43,.88);
        box-shadow:0 22px 55px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.04);
    }
    .pob-map-stage{
        flex:1;
        min-height:0;
        position:relative;
        background:#02060c;
        overflow:hidden;
    }
    .pob-map-stage img{
        width:100%;
        height:100%;
        object-fit:cover;
        object-position:center;
        display:block;
        filter:saturate(.95) contrast(1.03);
    }
    .pob-map-stage::after{
        content:"";
        position:absolute;
        inset:0;
        pointer-events:none;
        background:
            linear-gradient(to top,rgba(2,15,31,.45),transparent 32%),
            linear-gradient(90deg,rgba(1,10,22,.18),transparent 25%,transparent 75%,rgba(1,10,22,.14));
    }
    .pob-map-footer{
        min-height:86px;
        padding:15px 20px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:18px;
        background:linear-gradient(100deg,rgba(5,28,55,.98),rgba(4,20,42,.97));
        border-top:1px solid rgba(63,193,255,.32);
    }
    .pob-map-footer-left{display:flex;align-items:center;gap:15px}
    .pob-map-footer-icon{
        width:52px;height:52px;border-radius:50%;
        border:1px solid rgba(53,205,255,.46);
        background:rgba(26,132,212,.12);
        display:grid;place-items:center;
        color:var(--pob-cyan);
        font-size:24px;
        box-shadow:0 0 22px rgba(41,187,255,.15);
    }
    .pob-map-footer-title{font-size:20px;font-weight:950;text-transform:uppercase;margin-bottom:4px}
    .pob-map-footer-sub{color:#a9bfd6;font-size:14px}
    .pob-map-indicator{display:flex;align-items:center;gap:5px;opacity:.85}
    .pob-map-indicator span{width:6px;height:6px;border-radius:50%;background:#4ccfff}
    .pob-map-indicator span:last-child{width:34px;border-radius:10px}

    .pob-location-panel{
        min-height:560px;
        display:flex;
        flex-direction:column;
        padding:16px;
        border-radius:22px;
        border:1px solid rgba(52,195,255,.28);
        background:linear-gradient(180deg,rgba(6,25,48,.95),rgba(4,18,37,.95));
        box-shadow:0 22px 55px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.03);
    }
    .pob-location-panel-head{
        display:flex;
        align-items:flex-end;
        justify-content:space-between;
        gap:15px;
        padding:4px 4px 14px;
        border-bottom:1px solid rgba(255,255,255,.07);
        margin-bottom:12px;
    }
    .pob-location-panel-title{
        margin:0;
        font-size:18px;
        font-weight:950;
        text-transform:uppercase;
        letter-spacing:.5px;
        color:#fff;
    }
    .pob-location-panel-meta{
        color:#6bdcff;
        font-size:12px;
        font-weight:850;
        text-transform:uppercase;
    }
    .pob-location-list{
        min-height:0;
        flex:1;
        overflow-y:auto;
        display:flex;
        flex-direction:column;
        gap:11px;
        padding-right:4px;
    }
    .pob-location-list::-webkit-scrollbar{width:5px}
    .pob-location-list::-webkit-scrollbar-thumb{background:rgba(53,207,255,.32);border-radius:20px}
    .pob-location-card{
        --accent:#34d6ff;
        min-height:88px;
        padding:12px 14px;
        border-radius:16px;
        border:1px solid rgba(92,157,221,.20);
        background:linear-gradient(120deg,rgba(9,38,75,.95),rgba(6,28,56,.9));
        display:grid;
        grid-template-columns:58px minmax(0,1fr);
        align-items:center;
        gap:12px;
        position:relative;
        overflow:hidden;
        cursor:pointer;
        transition:.24s ease;
        color:inherit;
        width:100%;
        text-align:left;
    }
    .pob-location-card::before{
        content:"";
        position:absolute;
        inset:0 auto 0 0;
        width:3px;
        background:var(--accent);
        box-shadow:0 0 14px var(--accent);
        opacity:.85;
    }
    .pob-location-card:hover,
    .pob-location-card.active{
        transform:translateX(-3px);
        border-color:color-mix(in srgb,var(--accent) 55%,transparent);
        background:linear-gradient(120deg,rgba(11,47,91,.98),rgba(7,33,66,.96));
        box-shadow:0 12px 26px rgba(0,0,0,.22);
    }
    .pob-location-icon{
        width:52px;height:52px;border-radius:50%;
        display:grid;place-items:center;color:var(--accent);
        border:2px solid color-mix(in srgb,var(--accent) 75%,white 5%);
        background:color-mix(in srgb,var(--accent) 11%,#071a32 89%);
        font-size:25px;
        box-shadow:0 0 18px color-mix(in srgb,var(--accent) 30%,transparent);
    }
    .pob-location-main{min-width:0}
    .pob-location-title-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px;min-width:0}
    .pob-location-no{
        min-width:34px;height:30px;padding:0 7px;border-radius:7px;
        display:inline-flex;align-items:center;justify-content:center;
        background:rgba(255,255,255,.06);
        border:1px solid rgba(255,255,255,.08);
        color:#b9cbe0;font-size:13px;font-weight:800;
    }
    .pob-location-name{
        flex:1 1 auto;
        min-width:0;
        color:#fff;
        font-size:clamp(15px,1.18vw,21px);
        font-weight:950;
        line-height:1.22;
        text-transform:uppercase;
        white-space:normal;
        overflow:visible;
        text-overflow:clip;
        overflow-wrap:anywhere;
    }
    .pob-location-distance{
        display:flex;
        align-items:center;
        gap:8px;
        color:var(--accent);
        font-size:14px;
        font-weight:900;
        text-transform:uppercase;
    }
    .pob-location-empty{
        flex:1;
        display:grid;
        place-items:center;
        min-height:180px;
        border:1px dashed rgba(255,255,255,.15);
        border-radius:16px;
        color:#9eb6cf;
        text-align:center;
        padding:20px;
    }
    @media(max-width:1200px){
        .pob-location-grid{grid-template-columns:minmax(0,1.7fr) minmax(320px,.9fr)}
        .pob-location-card{grid-template-columns:50px minmax(0,1fr)}
        .pob-location-icon{width:46px;height:46px}
    }
    @media(max-width:850px){
        .pob-location-grid{grid-template-columns:1fr}
        .pob-map-panel,.pob-location-panel{min-height:500px}
    }
    .lm-photo-frame{
        display:flex !important;
        background:#092542 !important;
        border-radius:20px !important;
    }
    .lm-photo-frame img{
        object-position:center center !important;
        background:#092542 !important;
    }
    .lm-map-card{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:var(--lm-map-height) !important;
    min-height:540px !important;
    aspect-ratio:auto !important;
    background:#092542 !important;
    box-shadow:0 22px 54px rgba(0,0,0,.28) !important;
    }
    .lm-map-card img{
    position:relative !important;
    inset:auto !important;
    max-width:100% !important;
    max-height:100% !important;
    background:#092542 !important;
    }
    @media(max-width:1150px){
    .lm-map-card{min-height:500px !important;}
    }
    @media(max-width:850px){
    .lm-map-card{height:auto !important;min-height:0 !important;aspect-ratio:16/10 !important;}
    }
    /* =========================================================
    LAYOUT 16 PREMIUM TOUCHSCREEN
    - gambar fit ikut border
    - kurang nampak stretch
    - panel kanan lebih premium
    ========================================================= */
    .location-monitoring-layout{
    align-items:stretch !important;
    }
    .location-monitoring-main{
    gap:18px !important;
    }
    .location-monitoring-heading{
    padding:0 4px !important;
    min-height:62px !important;
    }
    .location-monitoring-heading .lm-eyebrow{
    font-size:12px !important;
    letter-spacing:.16em !important;
    color:#58c3ff !important;
    }
    .location-monitoring-heading h3{
    font-size:clamp(28px,2.4vw,42px) !important;
    line-height:1.08 !important;
    }
    .lm-map-card{
    height:68vh !important;
    min-height:560px !important;
    padding:10px !important;
    border-radius:28px !important;
    background:linear-gradient(180deg,rgba(10,38,66,.98),rgba(6,24,43,.98)) !important;
    border:1px solid rgba(88,170,255,.22) !important;
    box-shadow:0 22px 56px rgba(0,0,0,.30) !important;
    }
    .lm-map-card img{
    object-position:center center !important;
    background:#071a2d !important;
    border-radius:20px !important;
    }
    .lm-map-badge{
    left:22px !important;
    bottom:22px !important;
    background:rgba(5,23,41,.92) !important;
    border:1px solid rgba(255,255,255,.10) !important;
    box-shadow:0 12px 32px rgba(0,0,0,.28) !important;
    }
    .location-monitoring-side{
    height:68vh !important;
    min-height:560px !important;
    margin-top:58px !important;
    grid-template-rows:minmax(0,1fr) minmax(0,1fr) auto !important;
    gap:16px !important;
    }
    .lm-photo-card,
    .lm-safety-card{
    background:linear-gradient(180deg,rgba(9,37,63,.98),rgba(7,29,51,.98)) !important;
    border:1px solid rgba(88,170,255,.16) !important;
    border-radius:24px !important;
    box-shadow:0 16px 36px rgba(0,0,0,.24) !important;
    }
    .lm-photo-head{
    padding:14px 16px 10px !important;
    }
    .lm-photo-head strong,
    .lm-safety-head strong{
    color:#ffffff !important;
    }
    .lm-photo-head strong{
    font-size:15px !important;
    letter-spacing:.04em !important;
    }
    .lm-photo-head span{
    font-size:10px !important;
    color:rgba(255,255,255,.82) !important;
    background:rgba(255,255,255,.08) !important;
    padding:5px 10px !important;
    }
    .lm-photo-frame{
    border-radius:18px !important;
    background:#081a2d !important;
    border:1px solid rgba(255,255,255,.06) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    }
    .lm-photo-frame:after{
    right:12px !important;
    bottom:12px !important;
    font-size:10px !important;
    padding:6px 11px !important;
    background:rgba(6,24,43,.92) !important;
    }
    .lm-photo-frame img{
    object-position:center center !important;
    background:#081a2d !important;
    }
    .lm-safety-card{
    padding:16px !important;
    }
    .lm-safety-icon{
    background:rgba(255,229,112,.14) !important;
    color:#ffd95e !important;
    }
    .lm-safety-head small{
    color:rgba(255,255,255,.70) !important;
    font-size:11px !important;
    }
    .lm-safety-list{
    gap:8px !important;
    }
    .lm-safety-item{
    background:rgba(255,255,255,.05) !important;
    border:1px solid rgba(255,255,255,.06) !important;
    color:#eef6ff !important;
    font-size:13px !important;
    padding:9px 10px !important;
    }
    .lm-check{
    background:rgba(89,234,156,.16) !important;
    color:#7effb1 !important;
    }
    .lm-info-grid{
    gap:15px !important;
    }
    .lm-info-card{
    background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(247,250,254,.98)) !important;
    border:1px solid rgba(13,49,78,.08) !important;
    box-shadow:0 14px 30px rgba(0,0,0,.11) !important;
    }
    .lm-info-value{
    font-size:17px !important;
    line-height:1.4 !important;
    }
    @media(max-width:1200px){
    .location-monitoring-layout{
        grid-template-columns:minmax(0,1fr) 360px !important;
    }
    }
    @media(max-width:991.98px){
    .location-monitoring-side{
        height:auto !important;
        min-height:0 !important;
    }
    .lm-map-card{
        height:auto !important;
        min-height:0 !important;
        aspect-ratio:4/3 !important;
    }
    }
    @media(max-width:600px){
    .lm-map-card{aspect-ratio:4/3 !important;padding:8px !important;}
    .location-monitoring-heading h3{font-size:30px !important;}
    }
    /* =========================================================
    LAYOUT 16 - EXACT FIT IKUT BORDER
    - tiada ruang biru kosong
    - tiada crop
    - tiada stretch
    - kad bawah kekal putih seperti asal
    ========================================================= */
    .location-monitoring-layout{
    grid-template-columns:minmax(0,72%) minmax(430px,28%) !important;
    gap:24px !important;
    align-items:start !important;
    }
    /* PETA: border ikut nisbah sebenar gambar */
    .lm-map-card{
    position:relative !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:var(--lm-map-ratio, 16 / 10) !important;
    padding:0 !important;
    overflow:hidden !important;
    border:0 !important;
    border-radius:24px !important;
    background:transparent !important;
    box-shadow:0 18px 46px rgba(0,0,0,.24) !important;
    }
    .lm-map-card img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
    background:transparent !important;
    border:0 !important;
    border-radius:inherit !important;
    display:block !important;
    }
    .lm-map-card:after{display:none !important;}
    /* Panel kanan ikut tinggi blok peta secara visual */
    .location-monitoring-side{
    height:auto !important;
    min-height:0 !important;
    margin-top:56px !important;
    display:grid !important;
    grid-template-rows:auto auto auto !important;
    gap:18px !important;
    }
    /* ENTRY / EXIT: frame ikut nisbah gambar sebenar */
    .lm-photo-card{
    display:flex !important;
    flex-direction:column !important;
    background:linear-gradient(180deg,rgba(9,37,63,.98),rgba(7,29,51,.98)) !important;
    border:1px solid rgba(88,170,255,.16) !important;
    border-radius:22px !important;
    overflow:hidden !important;
    }
    .lm-photo-frame{
    position:relative !important;
    width:calc(100% - 24px) !important;
    height:auto !important;
    min-height:0 !important;
    aspect-ratio:var(--lm-photo-ratio, 16 / 9) !important;
    margin:0 12px 12px !important;
    padding:0 !important;
    overflow:hidden !important;
    border:0 !important;
    border-radius:16px !important;
    background:transparent !important;
    display:block !important;
    }
    .lm-photo-frame img{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    max-width:none !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center !important;
    background:transparent !important;
    border-radius:inherit !important;
    transform:none !important;
    display:block !important;
    }
    .lm-photo-frame:hover img{transform:none !important;filter:none !important;}
    .lm-photo-frame:before{display:none !important;}
    /* Kad maklumat bawah - dark premium + teks lebih besar */
    .lm-info-grid{gap:16px !important;}
    .lm-info-card{
    background:linear-gradient(145deg,#0c355d 0%,#082844 100%) !important;
    border:1px solid rgba(90,180,255,.18) !important;
    border-radius:20px !important;
    padding:22px 22px 21px !important;
    box-shadow:0 14px 34px rgba(0,0,0,.22) !important;
    }
    .lm-info-card:before{
    width:5px !important;
    background:linear-gradient(180deg,#ffe66a,#ffbf18) !important;
    }
    .lm-info-icon{
    width:48px !important;
    height:48px !important;
    margin-bottom:13px !important;
    border-radius:14px !important;
    background:rgba(255,220,60,.15) !important;
    color:#ffdc3c !important;
    font-size:22px !important;
    }
    .lm-info-label{
    color:#8fc8f2 !important;
    font-size:15px !important;
    line-height:1.2 !important;
    letter-spacing:.09em !important;
    margin-bottom:8px !important;
    }
    .lm-info-value{
    color:#ffffff !important;
    font-size:22px !important;
    line-height:1.42 !important;
    font-weight:900 !important;
    }
    @media(max-width:991.98px){
    .location-monitoring-layout{grid-template-columns:1fr !important;}
    .location-monitoring-side{margin-top:0 !important;}
    }
    /* Layout 17: Pemantauan Trafik - isolated adaptation from user source */
    .ta-analysis-wrap{--ta-blue-dark:#063a86;--ta-blue:#0756bd;--ta-orange:#f47421;--ta-green:#17943a;--ta-red:#e73328;--ta-border:#d9e5f3;width:100%;padding:24px;border-radius:24px;background:radial-gradient(circle at 15% 15%,rgba(18,109,224,.12),transparent 28%),radial-gradient(circle at 90% 10%,rgba(244,116,33,.10),transparent 25%),linear-gradient(135deg,#eef6ff,#fff 45%,#f4f9ff);color:#12233f;position:relative}
    .ta-analysis-wrap:before{content:"";position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(2,75,170,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(2,75,170,.025) 1px,transparent 1px);background-size:40px 40px}
    .ta-analysis-inner{position:relative;z-index:1}
    .ta-main-heading{text-align:center;margin-bottom:24px}
    .ta-eyebrow{display:inline-flex;padding:7px 14px;border-radius:999px;background:#e9f3ff;color:#063a86;font-size:12px;font-weight:900;letter-spacing:1px;border:1px solid #d5e8ff;margin-bottom:10px}
    .ta-main-heading h3{margin:0;color:#10284f;font-size:clamp(27px,2.5vw,40px);font-weight:900}
    .ta-main-heading p{margin:8px 0 0;color:#6b7b91;font-size:14px}
    .ta-traffic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:start}
    .ta-direction-column{background:rgba(255,255,255,.46);padding:10px;border-radius:24px;border:1px solid rgba(255,255,255,.9);backdrop-filter:blur(10px);box-shadow:0 18px 50px rgba(27,66,113,.09)}
    .ta-direction-header{min-height:66px;padding:15px 22px;border-radius:17px 17px 9px 9px;background:linear-gradient(135deg,#f47421,#ff8c3c);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;box-shadow:0 10px 25px rgba(244,116,33,.22)}
    .ta-direction-header:before{content:"";position:absolute;right:-40px;top:-65px;width:170px;height:170px;border-radius:50%;border:25px solid rgba(255,255,255,.10)}
    .ta-direction-header h4{margin:0;color:#fff;font-size:clamp(19px,1.55vw,27px);font-weight:900;text-align:center;position:relative;z-index:2}
    .ta-traffic-card{margin-top:14px;background:rgba(255,255,255,.97);border-radius:18px;border:1px solid #dce8f6;box-shadow:0 14px 30px rgba(19,70,135,.08);overflow:hidden;animation:taReveal .55s ease both}
    .ta-after{animation-delay:.15s}
    .ta-card-top{display:flex;align-items:center;justify-content:space-between;background:linear-gradient(90deg,#eef6ff,#fff);border-bottom:1px solid var(--ta-border);min-height:55px;padding-right:14px}
    .ta-card-status{position:relative;background:linear-gradient(135deg,#06419b,#0763cd);color:#fff;min-width:165px;padding:15px 28px 15px 18px;font-size:22px;font-weight:900}
    .ta-card-status:after{content:"";position:absolute;top:0;right:-22px;border-top:55px solid #0763cd;border-right:22px solid transparent}
    .ta-route-pill{padding:7px 11px;background:#e5f0ff;border:1px solid #bdd9ff;border-radius:999px;color:#074aa1;font-size:12px;font-weight:800}
    .ta-after .ta-route-pill{background:#e9f8ec;color:#157232;border-color:#bfe5c8}
    .ta-table-title{display:grid;grid-template-columns:1fr 1.1fr;background:#f6faff;border-bottom:1px solid var(--ta-border)}
    .ta-table-title div{min-height:44px;display:grid;place-items:center;font-weight:900;color:#144b9a;font-size:14px}
    .ta-metric-row{display:grid;grid-template-columns:1fr 1.1fr;min-height:76px;border-bottom:1px solid var(--ta-border);transition:.2s}
    .ta-metric-row:last-child{border-bottom:0}
    .ta-metric-row:hover{background:#f8fbff;box-shadow:inset 4px 0 #0756bd;transform:translateX(2px)}
    .ta-metric-name{display:flex;align-items:center;gap:14px;padding:11px 15px;border-right:1px solid var(--ta-border)}
    .ta-metric-icon{width:45px;min-width:45px;height:45px;border-radius:50%;background:#eaf4ff;display:grid;place-items:center;color:#0756bd;font-size:22px;box-shadow:inset 0 0 0 1px #d8eafe}
    .ta-metric-icon.ta-warning{background:#fff5d9;color:#e89a00}
    .ta-metric-name span{font-size:14px;font-weight:800}
    .ta-metric-value{display:flex;align-items:center;justify-content:center;padding:10px 14px;text-align:center}
    .ta-value-main{font-size:21px;font-weight:900;color:#084799}
    .ta-value-main.ta-green{color:#17943a}
    .ta-value-main.ta-red{color:#e73328}
    .ta-value-sub{margin-top:4px;font-size:12.5px;font-weight:650;color:#20324d;white-space:pre-line}
    .ta-circle-number{width:45px;height:45px;border-radius:50%;display:grid;place-items:center;font-size:23px;font-weight:900;color:#fff;box-shadow:0 6px 15px rgba(0,0,0,.15)}
    .ta-circle-number.ta-orange{background:linear-gradient(135deg,#ff763a,#f02a10)}
    .ta-circle-number.ta-green{background:linear-gradient(135deg,#54bc51,#149333)}
    .ta-circle-number.ta-red{background:linear-gradient(135deg,#ff6048,#dd2119)}
    .ta-circle-number.ta-grey{background:#d9e1ea;color:#4c627e}
    .ta-change-divider{margin:8px 0;display:flex;align-items:center;gap:13px;padding:8px 13px}
    .ta-divider-line{height:1px;flex:1;background:repeating-linear-gradient(to right,#b8c9df 0 5px,transparent 5px 9px)}
    .ta-change-content{display:flex;align-items:center;gap:9px;color:#218a3b;font-size:13px;font-weight:900;white-space:nowrap}
    .ta-change-arrow{width:41px;height:41px;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(135deg,#68c95c,#189136);box-shadow:0 0 0 4px rgba(39,169,67,.10);animation:taArrow 1.8s ease-in-out infinite}
    .ta-result-layout{width:100%;display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
    .ta-result-badge{min-width:94px;min-height:51px;padding:6px 8px;border-radius:10px;display:flex;flex-direction:column;justify-content:center;align-items:center;font-weight:900}
    .ta-result-badge.ta-good{background:#eaf8ed;color:#168736;border:1px solid #c5e8cd}
    .ta-result-badge.ta-bad{background:#fff0ee;color:#dd281f;border:1px solid #ffc4bf}
    .ta-result-badge.ta-neutral{background:#f0f3f7;color:#5f7188;border:1px solid #dbe1e8}
    .ta-result-badge strong{display:flex;align-items:center;gap:4px;font-size:14px}
    .ta-result-badge small{font-size:9px;margin-top:4px}
    .ta-mini-arrow{width:19px;height:19px;border-radius:50%;color:#fff;display:grid;place-items:center;font-size:11px}
    .ta-good .ta-mini-arrow{background:#17943a}
    .ta-bad .ta-mini-arrow{background:#e73328}
    .ta-legend{margin:25px auto 0;width:min(950px,100%);padding:13px;background:rgba(255,255,255,.9);border-radius:18px;box-shadow:0 14px 30px rgba(27,69,117,.10);border:1px solid #dfebf7;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
    .ta-legend-item{display:flex;align-items:center;gap:11px;padding:6px 10px}
    .ta-legend-icon{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:900;flex:0 0 38px}
    .ta-legend-icon.ta-green{background:#17943a}
    .ta-legend-icon.ta-red{background:#e73328}
    .ta-legend-icon.ta-grey{background:#ccd5df;color:#41546d}
    .ta-legend-text strong{display:block;font-size:12px;margin-bottom:2px}
    .ta-legend-text span{display:block;font-size:10px;color:#75849a}
    @keyframes taReveal{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
    @keyframes taArrow{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}
    @media(max-width:1100px){.ta-traffic-grid{grid-template-columns:1fr}.ta-direction-column{max-width:850px;width:100%;margin:auto}}
    @media(max-width:650px){.ta-analysis-wrap{padding:12px}.ta-card-status{min-width:130px;font-size:17px}.ta-metric-row{grid-template-columns:45% 55%}.ta-metric-name{gap:8px;padding:8px}.ta-metric-icon{width:37px;min-width:37px;height:37px}.ta-metric-name span{font-size:11px}.ta-value-main{font-size:17px}.ta-value-sub{font-size:10px}.ta-result-layout{grid-template-columns:1fr}.ta-result-badge{min-width:0;min-height:38px}.ta-legend{grid-template-columns:1fr}}
    /* =========================================================
    LAYOUT 17 - BACKGROUND KHAS PEMANTAUAN TRAFIK
    Ubah background layout ini sahaja, layout lain tidak disentuh
    ========================================================= */
    .ta-analysis-wrap{
    background:
        radial-gradient(circle at 12% 18%, rgba(26,118,255,.18), transparent 30%),
        radial-gradient(circle at 88% 12%, rgba(244,116,33,.14), transparent 28%),
        linear-gradient(135deg,#061b33 0%,#0a2a4f 48%,#0b315a 100%) !important;
    border:1px solid rgba(81,162,255,.18) !important;
    box-shadow:0 24px 70px rgba(0,0,0,.28) !important;
    }
    .ta-analysis-wrap:before{
    background-image:
        linear-gradient(rgba(112,181,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(112,181,255,.035) 1px,transparent 1px) !important;
    background-size:44px 44px !important;
    }
    .ta-main-heading h3{color:#ffffff !important;text-shadow:0 3px 18px rgba(0,0,0,.28)}
    .ta-main-heading p{color:#b9cde2 !important}
    .ta-eyebrow{
    background:rgba(43,136,255,.14) !important;
    color:#79c7ff !important;
    border-color:rgba(121,199,255,.26) !important;
    }
    .ta-direction-column{
    background:rgba(6,28,52,.72) !important;
    border:1px solid rgba(88,170,255,.16) !important;
    box-shadow:0 18px 46px rgba(0,0,0,.22) !important;
    }
    .ta-change-content{color:#86efa0 !important}
    .ta-divider-line{
    background:repeating-linear-gradient(to right,rgba(164,202,239,.42) 0 5px,transparent 5px 9px) !important;
    }
    .ta-legend{
    background:rgba(7,29,53,.92) !important;
    border:1px solid rgba(88,170,255,.14) !important;
    box-shadow:0 16px 38px rgba(0,0,0,.22) !important;
    }
    .ta-legend-text strong{color:#fff}
    .ta-legend-text span{color:#b7c9dc !important}
    html,
body{
    width:100% !important;
    height:100dvh !important;
    min-height:0 !important;
    max-height:100dvh !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    overscroll-behavior:none !important;
}
    /* Body jadi column sebenar: HEADER + CONTENT + FOOTER semuanya muat dalam TV. */
    body{
    position:relative !important;
    inset:auto !important;
    display:flex !important;
    flex-direction:column !important;
}
    /* Wrapper TIDAK lagi paksa 100vh. Ia cuma ambil baki ruang selepas header/footer. */
    .tv-dashboard-wrapper,
#main-wrapper{
    position:relative !important;
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    flex:1 1 0 !important;
    display:flex !important;
    flex-direction:column !important;
    overflow:hidden !important;
}
    /* Pastikan footer yang datang daripada includes/footer.php kekal nampak. */
    footer,
.site-footer,
.main-footer,
.page-footer,
#footer{
    flex:0 0 auto !important;
    position:relative !important;
    z-index:80 !important;
    margin-top:0 !important;
}
    .workspace-layout{
    flex:1 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
}
    #project-detail-pane{
    position:absolute !important;
    inset:0 !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
    overflow:hidden !important;
}
    #project-detail-pane > .d-flex.flex-row{
    flex:1 1 auto !important;
    min-height:0 !important;
    height:auto !important;
    max-height:100% !important;
    overflow:hidden !important;
}
    .side-nav-bar{
    min-height:0 !important;
    max-height:100% !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
}
    .side-nav-content{
    min-height:0 !important;
    height:100% !important;
    max-height:100% !important;
    overflow:hidden !important;
}
    .content-pane{
    min-height:0 !important;
    height:100% !important;
    max-height:100% !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    scrollbar-gutter:stable !important;
}
    .ta-analysis-wrap{
    min-height:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
}
    @media (max-width:800px){
    html,body{
        position:static !important;
        height:auto !important;
        min-height:100% !important;
        max-height:none !important;
        overflow:auto !important;
    }
    body{display:block !important;}
    .tv-dashboard-wrapper,#main-wrapper{
        height:auto !important;
        min-height:100vh !important;
        max-height:none !important;
        flex:auto !important;
        overflow:visible !important;
    }
}
    /* =========================================================
   PAGE 6 - 5 KAD SATU PAPARAN + SLIDER JIKA LEBIH 5
========================================================= */
    .kajian-grid{
    gap:18px !important;
    padding:10px 4px 20px !important;
    scroll-snap-type:x mandatory !important;
    scroll-padding-inline:4px;
    scrollbar-width:thin;
}
    .kajian-grid .study-card{
    width:auto !important;
    flex:0 0 calc((100% - 72px) / 5) !important;
    min-width:0 !important;
    max-width:none !important;
    scroll-snap-align:start !important;
    scroll-snap-stop:always;
}
    .project-slider-tools{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:16px;
    min-width:0;
}
    .project-slider-hint{
    color:rgba(255,255,255,.55);
    font-size:17px;
    white-space:nowrap;
}
    .project-slider-actions{
    display:flex;
    align-items:center;
    gap:8px;
}
    .project-slide-btn{
    width:44px;
    height:44px;
    border-radius:12px;
    border:1px solid rgba(94,190,255,.32);
    background:linear-gradient(145deg,rgba(12,57,108,.95),rgba(7,35,73,.95));
    color:#fff;
    display:grid;
    place-items:center;
    font-size:20px;
    cursor:pointer;
    transition:.2s ease;
    box-shadow:0 8px 20px rgba(0,0,0,.18);
}
    .project-slide-btn:hover:not(:disabled){
    transform:translateY(-2px);
    border-color:#52c7ff;
    background:linear-gradient(145deg,#126dcc,#0b4e9a);
}
    .project-slide-btn:disabled{
    opacity:.28;
    cursor:default;
}
    .project-slide-page{
    min-width:54px;
    text-align:center;
    color:#cfe8ff;
    font-size:14px;
    font-weight:900;
}
    .project-slider-tools.is-single-page .project-slider-actions{
    display:none;
}
    .project-slider-tools.is-single-page .project-slider-hint{
    display:none;
}
    @media(max-width:1200px){
    .kajian-grid .study-card{
        flex-basis:calc((100% - 36px) / 3) !important;
    }
    .project-slider-hint{display:none;}
}
    @media(max-width:800px){
    .kajian-grid .study-card{
        flex-basis:calc((100% - 18px) / 2) !important;
    }
}
    @media(max-width:560px){
    .kajian-grid .study-card{
        flex-basis:100% !important;
    }
}
    *, *::before, *::after { box-sizing:border-box; }
    @media (max-width:1920px){

    .workspace-layout{padding:16px 26px !important;}
    .listing-header{margin-bottom:12px !important;}
    .section-title{font-size:16px !important;}
    .project-slider-hint{font-size:13px !important;}
    .project-slide-btn{width:36px !important;height:36px !important;font-size:16px !important;}
    .kajian-grid{gap:14px !important;padding:6px 3px 12px !important;}
    .kajian-grid .study-card{flex-basis:calc((100% - 56px) / 5) !important;}
    .study-card-badge-no{top:10px !important;left:10px !important;font-size:14px !important;padding:6px 11px !important;}
    .study-card-title-bar{padding:24px 14px 14px !important;}
    .study-card-panel-title{font-size:clamp(13px,1vw,17px) !important;}
    .study-card-desc{font-size:12px !important;line-height:1.4 !important;}
    .study-card-photo{
        object-fit:cover !important;
        object-position:center !important;
        background:#07111f !important;
    }

    #project-detail-pane{padding:20px 28px !important;}
    #project-detail-pane .dashboard-header-title{font-size:28px !important;}
    #project-detail-pane .title-badge{font-size:20px !important;padding:6px 12px !important;}
    #project-detail-pane > .d-flex.justify-content-between .paj-back-btn{
        padding:9px 16px !important;font-size:15px !important;
    }
    #project-detail-pane > .d-flex.flex-row{gap:18px !important;}
    .side-nav-bar{width:275px !important;gap:9px !important;padding-right:12px !important;}
    .side-menu-btn{padding:12px 15px !important;font-size:14px !important;border-radius:11px !important;}
    .side-menu-btn i.icon-left{font-size:19px !important;margin-right:9px !important;width:24px !important;}
    .side-menu-btn i.icon-right{font-size:16px !important;}
    .side-nav-content{border-radius:14px !important;}
    .content-pane{padding:24px !important;}
    .pane-title{font-size:23px !important;margin-bottom:18px !important;padding-bottom:12px !important;}
    .pane-desc{font-size:17px !important;line-height:1.55 !important;margin-bottom:22px !important;}
    .box-grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr)) !important;gap:15px !important;}
    .info-box{padding:17px !important;gap:14px !important;}
    .info-box i{width:52px !important;height:52px !important;font-size:27px !important;}
    .ib-title{font-size:13px !important;margin-bottom:5px !important;}
    .ib-val{font-size:18px !important;}
    .clean-list{gap:12px !important;}
    .clean-list li{padding:15px 18px !important;font-size:17px !important;gap:12px !important;}
    .clean-list li::before{font-size:20px !important;}

}
    @media (max-width:1600px) and (min-width:1201px){
    .kajian-grid .study-card{flex-basis:calc((100% - 42px) / 4) !important;}

    .side-nav-bar{width:245px !important;}
    .content-pane{padding:19px !important;}
}
    @media (max-width:1200px){
    .kajian-grid .study-card{flex-basis:calc((100% - 28px) / 3) !important;}
}
    @media (min-width:1201px){
    .content-pane.active:has(.route-station-layout){
        width:100% !important;
        padding:14px 16px !important;
    }
    .content-pane.active:has(.route-station-layout) > .pane-title{
        margin:0 0 12px !important;
        padding:0 0 10px !important;
        font-size:24px !important;
        line-height:1.15 !important;
    }
    .route-station-layout{
        flex:1 1 0 !important;
        display:grid !important;
        grid-template-columns:minmax(0,1.75fr) minmax(360px,.9fr) !important;
        grid-template-rows:minmax(0,1fr) !important;
        max-height:100% !important;
        gap:14px !important;
        overflow:hidden !important;
    }
    .route-station-layout .route-map-card,
    .route-station-layout .route-stations-card{
        width:100% !important;
        height:100% !important;
        min-height:0 !important;
        max-height:100% !important;
        overflow:hidden !important;
    }
    .route-station-layout .route-map-scene{
        width:100% !important;
        height:100% !important;
        min-height:0 !important;
        max-height:100% !important;
        aspect-ratio:auto !important;
        overflow:hidden !important;
    }
    .route-station-layout .route-map-img,
    .route-station-layout img.route-map-img{
        width:100% !important;
        object-position:center !important;
    }
    .route-station-layout .route-stations-card{
        gap:8px !important;
        padding:14px !important;
    }
    .route-station-layout .station-section{
        width:100% !important;
        padding:12px !important;
    }
    .route-station-layout .station-card-head{
        flex:0 0 auto !important;
        margin-bottom:9px !important;
    }
    .route-station-layout .station-card-icon{
        width:48px !important;
        height:48px !important;
        flex:0 0 48px !important;
        font-size:22px !important;
    }
    .route-station-layout .station-title{
        font-size:clamp(17px,5cqw,25px) !important;
        line-height:1.1 !important;
    }
    .route-station-layout .station-subtitle{
        font-size:clamp(11px,3.2cqw,15px) !important;
        line-height:1.25 !important;
    }
    .route-station-layout .station-list{
        display:grid !important;
        align-content:start !important;
        gap:7px !important;
        width:100% !important;
        margin:0 !important;
        padding:0 3px 0 0 !important;
        scrollbar-width:thin !important;
        scrollbar-color:rgba(73,185,255,.42) transparent !important;
    }
    .route-station-layout .station-list li{
        display:flex !important;
        align-items:center !important;
        min-height:42px !important;
        height:auto !important;
        padding:7px 10px 7px 35px !important;
        font-size:clamp(11px,3.2cqw,14px) !important;
        line-height:1.25 !important;
    }
}
    @media (min-width:1201px) and (max-height:800px){
    .content-pane.active:has(.route-station-layout) > .pane-title{
        margin-bottom:8px !important;
        padding-bottom:7px !important;
        font-size:21px !important;
    }
    .route-station-layout .route-stations-card{padding:10px !important;}
    .route-station-layout .station-section{padding:9px !important;}
    .route-station-layout .station-list{gap:5px !important;}
    .route-station-layout .station-list li{min-height:36px !important;padding-top:5px !important;padding-bottom:5px !important;}
}
    /* =========================================================
   KOMPONEN PROJEK — TAJUK PANJANG TANPA POTONG PERKATAAN
========================================================= */
    @media (min-width:1201px){
    .comp-card.is-long-title{
        grid-template-columns:minmax(0,48%) minmax(0,52%) !important;
    }
    .comp-card.is-long-title .comp-card-title h4{
        font-size:clamp(12px,6.3cqw,15px) !important;
    }
}
    /* =========================================================
   CONTAINER-RESPONSIVE TYPOGRAPHY
   Font mengikut ruang komponen, bukan zoom browser.
========================================================= */
    /* Daftarkan setiap kad/panel sebagai size container. */
    .study-card,
.comp-card-body,
.benefit-item,
.info-box,
.rts-fact,
.status-panel,
.status-phase,
.station-section,
.gal-folder-card,
.component-footer-item,
.boundary-preview-card,
.location-info-card,
.lm-info-card,
.lm-photo-card,
.lm-safety-card{
    container-type:inline-size;
    min-width:0;
}
    /* Semua teks panjang dibenarkan wrap dengan selamat. */
    .study-card-panel-title,
.study-card-desc,
.comp-card-title h4,
.comp-card-desc,
.comp-card-points li,
.benefit-item-title,
.benefit-points li,
.ib-title,
.ib-val,
.rts-fact-label,
.rts-fact-value,
.status-panel-title,
.status-phase-title,
.status-phase-sub,
.station-title,
.station-subtitle,
.station-list li,
.component-footer-title,
.component-footer-desc{
    min-width:0 !important;
    max-width:100% !important;
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
}
    /* Kad senarai projek. */
    /* Komponen Projek: container ialah bahagian teks sebelah kanan. */
    /* Manfaat. */
    /* Kad info dan ringkasan utama. */
    .ib-title,
.rts-fact-label{
    font-size:clamp(10px,4cqw,14px) !important;
    line-height:1.25 !important;
}
    .ib-val,
.rts-fact-value{
    font-size:clamp(13px,5.2cqw,20px) !important;
    line-height:1.38 !important;
}
    /* Status. */
    /* Laluan dan stesen. */
    /* Footer komponen jika digunakan pada resolusi lain. */
    .component-footer-title{
    font-size:clamp(11px,8cqw,15px) !important;
    line-height:1.2 !important;
}
    .component-footer-desc{
    font-size:clamp(9.5px,6cqw,13px) !important;
    line-height:1.4 !important;
}
    /* Fallback untuk browser lama yang belum menyokong cqw. */
    @supports not (font-size:1cqw){
    .comp-card-title h4{font-size:16px !important;}
    .comp-card-desc{font-size:12px !important;}
    .comp-card-points li{font-size:10.5px !important;}
    .benefit-item-title{font-size:18px !important;}
    .benefit-points{font-size:13px !important;}
}
    @media (min-width:1201px){
    /* Asas semua content pane */
    .content-pane,
    .content-pane.active{
        width:100% !important;
        min-width:0 !important;
        min-height:0 !important;
        height:100% !important;
        padding:20px !important;
        overflow-x:hidden !important;
        overflow-y:auto !important;
    }
    .content-pane > *{
        max-width:100% !important;
    }

    /* UTAMA / RINGKASAN */
    .rts-main-layout{
        padding:18px 20px !important;
        overflow:visible !important;
    }
    .rts-page-head{margin-bottom:16px !important;}
    .rts-number{width:54px !important;height:54px !important;flex-basis:54px !important;font-size:25px !important;}
    .rts-title{font-size:clamp(27px,2vw,36px) !important;}
    .rts-tagline{font-size:13px !important;}
    .rts-summary{padding:16px 18px !important;margin-bottom:16px !important;}
    .rts-summary h3{font-size:17px !important;}
    .rts-summary p{font-size:14px !important;line-height:1.55 !important;}
    .rts-facts{gap:10px !important;}
    .rts-fact{padding:12px !important;min-height:110px !important;}
    .rts-fact-icon{width:38px !important;height:38px !important;font-size:18px !important;}
    .rts-fact-label{font-size:10px !important;}
    .rts-fact-value{font-size:14px !important;}

    /* LALUAN & STESEN */
    .content-pane.active:has(.route-station-layout){padding:16px !important;}
    .route-station-layout{
        width:100% !important;
        min-height:0 !important;
        height:auto !important;
        grid-template-columns:minmax(0,1.65fr) minmax(280px,.85fr) !important;
        gap:16px !important;
        overflow:visible !important;
    }
    .route-station-layout .route-map-card,
    .route-station-layout .route-stations-card{min-width:0 !important;height:auto !important;}
    .route-station-layout .route-map-scene{min-height:480px !important;height:calc(100vh - 330px) !important;max-height:610px !important;}
    .route-station-layout .station-section{padding:15px !important;}
    .route-station-layout .station-list{font-size:13px !important;overflow:visible !important;}
    .route-station-layout .station-list li{padding:8px 9px 8px 32px !important;font-size:12px !important;}

    /* MANFAAT — betulkan kad kosong/teks terkeluar */
    .benefit-showcase{
        width:100% !important;
        min-height:0 !important;
        height:auto !important;
        padding:10px 12px 18px !important;
        overflow:visible !important;
    }
    .benefit-head{margin:0 0 18px !important;max-width:100% !important;}
    .benefit-headline{gap:12px !important;margin-bottom:7px !important;}
    .benefit-badge{width:42px !important;height:42px !important;flex-basis:42px !important;font-size:24px !important;}
    .benefit-headline h3{font-size:30px !important;}
    .benefit-desc{margin-left:54px !important;font-size:14px !important;line-height:1.5 !important;}
    .benefit-grid{
        width:100% !important;
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        grid-auto-rows:auto !important;
        gap:16px !important;
        align-items:stretch !important;
    }
    .benefit-item{
        position:relative !important;
        display:block !important;
        width:auto !important;
        min-width:0 !important;
        height:auto !important;
        min-height:225px !important;
        padding:20px !important;
        overflow:hidden !important;
        text-align:left !important;
        transform:none !important;
    }
    .benefit-top{
        position:static !important;
        width:100% !important;
        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:13px !important;
        margin:0 0 15px !important;
        transform:none !important;
    }
    .benefit-icon-wrap{
        position:static !important;
        width:52px !important;
        height:52px !important;
        flex:0 0 52px !important;
        margin:0 !important;
        transform:none !important;
    }
    .benefit-icon-wrap i{font-size:25px !important;}
    .benefit-item-title{
        position:static !important;
        display:block !important;
        width:auto !important;
        min-width:0 !important;
        font-size:18px !important;
        line-height:1.2 !important;
        text-align:left !important;
        transform:none !important;
    }
    .benefit-points{
        position:static !important;
        display:grid !important;
        width:100% !important;
        margin:0 !important;
        padding:0 !important;
        gap:8px !important;
        font-size:13px !important;
        line-height:1.45 !important;
        text-align:left !important;
        transform:none !important;
    }
    .benefit-points li{position:relative !important;width:100% !important;padding-left:24px !important;}

    /* STATUS */
    .status-showcase{
        width:100% !important;
        min-height:0 !important;
        height:auto !important;
        padding:18px !important;
        overflow:visible !important;
    }
    .status-head{margin-bottom:16px !important;}
    .status-headline h3{font-size:28px !important;}
    .status-head p{font-size:14px !important;}
    .status-main-grid,.status-bottom-grid{gap:14px !important;margin-bottom:14px !important;}
    .status-panel{padding:16px !important;}
    .status-panel-title{font-size:17px !important;margin-bottom:10px !important;}
    .status-progress-percent{font-size:39px !important;}
    .status-progress-list li,.status-list li{font-size:13px !important;padding:7px 9px !important;}
    .status-phase-icon{width:44px !important;height:44px !important;font-size:19px !important;}
    .status-phase-title{font-size:14px !important;}

    /* GALERI */
    .gallery-showcase{width:100% !important;height:auto !important;min-height:0 !important;overflow:visible !important;gap:14px !important;}
    .gallery-folder-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:14px !important;}
    .gal-folder-card{min-width:0 !important;min-height:190px !important;height:auto !important;}

    /* LIST / INFO GRID / FAQ / DOKUMEN */
    .box-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
    .clean-list li{width:100% !important;white-space:normal !important;}
    .document-layout,.pdf-layout,.faq-layout{width:100% !important;min-width:0 !important;overflow:visible !important;}
}
    @media (min-width:1201px) and (max-width:1500px){
    .benefit-grid,.box-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
    .gallery-folder-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
    .route-station-layout{grid-template-columns:minmax(0,1.4fr) minmax(260px,.8fr) !important;}
}
    /* =========================================================
   KOMPONEN PROJEK — 3 x 2 SEPERTI RUJUKAN
========================================================= */
    @media (min-width:1201px){
    #project-detail-pane{
        padding-left:0 !important;
        padding-right:0 !important;
    }
    #project-detail-pane > .d-flex.flex-row{
        gap:36px !important;
    }
    .side-nav-bar{
        width:215px !important;
        flex:0 0 215px !important;
        padding:18px 14px 10px !important;
        gap:10px !important;
        background:rgba(5,32,69,.92) !important;
        border-right:1px solid rgba(74,166,255,.24) !important;
    }
    .side-menu-btn{
        min-height:64px !important;
        padding:11px 14px !important;
        font-size:13px !important;
        line-height:1.25 !important;
        border-radius:11px !important;
    }
    .side-nav-content{
        margin-right:44px !important;
    }
    .content-pane{
        padding:20px !important;
    }
    .component-showcase{
        min-height:0 !important;
        height:auto !important;
        padding:20px 20px 0 !important;
        overflow:hidden !important;
    }
    .component-head{
        margin-bottom:14px !important;
    }
    .component-headline{
        margin-bottom:8px !important;
    }
    .component-badge{
        width:35px !important;
        height:35px !important;
        font-size:22px !important;
    }
    .component-headline h3{
        font-size:27px !important;
    }
    .component-head p{
        font-size:13px !important;
        line-height:1.45 !important;
    }
    .component-cards-grid{
        flex:0 0 auto !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        grid-template-rows:repeat(2,290px) !important;
        grid-auto-rows:290px !important;
        align-content:start !important;
        align-items:stretch !important;
        gap:14px !important;
    }
    .comp-card{
        height:290px !important;
        min-height:0 !important;
        grid-template-columns:minmax(0,56%) minmax(0,44%) !important;
    }
    .comp-card-media{
        height:290px !important;
        min-height:0 !important;
    }
    .comp-card-media img{
        width:100% !important;
        height:290px !important;
        min-height:0 !important;
        object-fit:cover !important;
        object-position:center !important;
    }
    .comp-card-body{
        padding:14px 14px 12px !important;
        justify-content:center !important;
    }
    .comp-card-title{
        gap:10px !important;
        margin-bottom:8px !important;
    }
    .comp-card-title h4{
        font-size:17px !important;
        line-height:1.15 !important;
    }
    .comp-card-icon{
        width:40px !important;
        height:40px !important;
        flex-basis:40px !important;
        font-size:19px !important;
    }
    .comp-card-desc{
        font-size:12px !important;
        line-height:1.5 !important;
        margin-bottom:10px !important;
    }
    .comp-card-points{
        gap:6px !important;
    }
    .comp-card-points li{
        padding-left:22px !important;
        font-size:10.5px !important;
        line-height:1.35 !important;
    }
    .comp-card-points li::before{
        width:15px !important;
        height:15px !important;
    }
    .comp-card-points li::after{
        left:3px !important;
        font-size:10px !important;
    }
    .comp-card-no{
        min-width:58px !important;
        padding:8px 12px !important;
        font-size:25px !important;
    }
    .component-footer-grid{
        display:none !important;
    }
}
    @media (min-width:1201px) and (max-height:920px){
    .component-cards-grid{
        grid-template-rows:repeat(2,290px) !important;
        grid-auto-rows:290px !important;
    }
}
    .study-card-panel-title{font-size:clamp(13px,7cqw,19px) !important;line-height:1.22 !important;}
    .study-card-desc{font-size:clamp(11px,4.8cqw,14px) !important;line-height:1.4 !important;}
    .comp-card-title h4{font-size:clamp(14px,9cqw,20px) !important;line-height:1.16 !important;}
    .comp-card-desc{font-size:clamp(11px,6.1cqw,15px) !important;line-height:1.48 !important;}
    .comp-card-points li{font-size:clamp(9.5px,5.1cqw,13px) !important;line-height:1.35 !important;}
    .benefit-item-title{font-size:clamp(15px,5.3cqw,22px) !important;line-height:1.18 !important;}
    .benefit-points{font-size:clamp(11.5px,3.7cqw,16px) !important;line-height:1.48 !important;}
    .ib-title,.rts-fact-label{font-size:clamp(10px,4cqw,14px) !important;line-height:1.25 !important;}
    .ib-val,.rts-fact-value{font-size:clamp(13px,5.2cqw,20px) !important;line-height:1.38 !important;}
    .status-panel-title{font-size:clamp(14px,4.5cqw,21px) !important;line-height:1.2 !important;}
    .status-phase-title{font-size:clamp(12px,8cqw,18px) !important;line-height:1.2 !important;}
    .status-phase-sub{font-size:clamp(10.5px,6cqw,14px) !important;line-height:1.35 !important;}
    .station-title{font-size:clamp(15px,7cqw,22px) !important;line-height:1.2 !important;}
    .station-subtitle{font-size:clamp(11px,4.4cqw,15px) !important;line-height:1.35 !important;}
    .station-list li{font-size:clamp(11px,4.2cqw,15px) !important;line-height:1.4 !important;}
    /* =========================================================
   HARD RESET UTAMA
   Mengatasi blok lama `.rts-main-layout ... !important`
   yang mempunyai specificity lebih tinggi.
========================================================= */
    @media (min-width:1201px){
    .rts-main-layout{
        grid-template-columns:minmax(0,.95fr) minmax(600px,1.05fr) !important;
        grid-template-rows:auto minmax(0,1fr) !important;
        column-gap:16px !important;
        row-gap:14px !important;
        padding:14px 16px !important;
        overflow:visible !important;
    }
    .rts-main-layout .rts-page-head{
        gap:14px !important;
    }
    .rts-main-layout .rts-number{
        width:48px !important;
        height:48px !important;
        flex:0 0 48px !important;
        font-size:21px !important;
        border-radius:10px !important;
    }
    .rts-main-layout .rts-kicker{
        font-size:14px !important;
        line-height:1.2 !important;
    }
    .rts-main-layout .rts-title{
        font-size:clamp(28px,2vw,38px) !important;
        line-height:1.05 !important;
        margin:4px 0 7px !important;
    }
    .rts-main-layout .rts-tagline{
        font-size:14px !important;
        line-height:1.35 !important;
    }
    .rts-main-layout .rts-summary{
        height:100% !important;
        min-height:0 !important;
        max-height:100% !important;
        padding:20px 22px !important;
        overflow:auto !important;
    }
    .rts-main-layout .rts-summary h3{
        margin:0 0 12px !important;
        font-size:20px !important;
    }
    .rts-main-layout .rts-summary p{
        margin:0 !important;
        max-width:100% !important;
        font-size:clamp(14px,1vw,17px) !important;
        line-height:1.55 !important;
        overflow-wrap:anywhere !important;
    }
    .rts-main-layout .rts-facts{
        min-height:0 !important;
        gap:12px !important;
    }
    .rts-main-layout .rts-fact{
        padding:12px 10px !important;
    }
    .rts-main-layout .rts-fact-icon{
        width:34px !important;
        height:34px !important;
        font-size:15px !important;
        margin-bottom:6px !important;
    }
    .rts-main-layout .rts-fact-label{
        font-size:clamp(10px,5.3cqw,13px) !important;
    }
    .rts-main-layout .rts-fact-value{
        font-size:clamp(9px,4.3cqw,12px) !important;
    }
}
    @media (min-width:1201px) and (max-width:1550px){
    .rts-main-layout{
        grid-template-columns:minmax(0,1fr) minmax(500px,1fr) !important;
    }
    .rts-main-layout .rts-facts{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        grid-template-rows:repeat(3,minmax(0,1fr)) !important;
    }
}
    @media (min-width:1201px){
    .rts-main-layout{
        display:grid !important;
        grid-template-columns:minmax(0,1fr) !important;
        grid-template-rows:auto auto minmax(250px,1fr) !important;
        gap:12px !important;
        width:100% !important;
        height:100% !important;
        min-height:0 !important;
        padding:12px 16px 14px !important;
        overflow:hidden !important;
    }
    .rts-main-layout .rts-page-head{
        grid-column:1 !important;
        grid-row:1 !important;
        width:100% !important;
        margin:0 76px 0 0 !important;
        min-height:0 !important;
    }
    .rts-main-layout .rts-summary{
        grid-column:1 !important;
        grid-row:2 !important;
        width:100% !important;
        height:auto !important;
        min-height:115px !important;
        max-height:none !important;
        margin:0 !important;
        padding:15px 20px !important;
        overflow:hidden !important;
        justify-content:flex-start !important;
        scrollbar-width:none !important;
        -ms-overflow-style:none !important;
    }
    .rts-main-layout .rts-summary::-webkit-scrollbar{
        display:none !important;
        width:0 !important;
        height:0 !important;
    }
    .rts-main-layout .rts-summary h3{
        margin:0 0 7px !important;
        font-size:18px !important;
        line-height:1.15 !important;
    }
    .rts-main-layout .rts-summary h3::before{
        width:9px !important;
        height:9px !important;
        flex-basis:9px !important;
    }
    .rts-main-layout .rts-summary p{
        display:block !important;
        color:#eef7ff !important;
        font-size:clamp(13px,.9vw,16px) !important;
        line-height:1.5 !important;
        font-weight:500 !important;
        visibility:visible !important;
        opacity:1 !important;
        width:100% !important;
        white-space:normal !important;
        overflow-wrap:break-word !important;
    }
    .rts-main-layout .rts-facts{
        grid-column:1 !important;
        grid-row:3 !important;
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        grid-template-rows:repeat(2,minmax(0,1fr)) !important;
        grid-auto-rows:minmax(0,1fr) !important;
        width:100% !important;
        height:100% !important;
        min-height:250px !important;
        gap:10px !important;
        overflow:hidden !important;
    }
    .rts-main-layout .rts-fact{
        position:relative !important;
        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        width:100% !important;
        height:100% !important;
        min-width:0 !important;
        min-height:0 !important;
        padding:12px 14px !important;
        overflow:hidden !important;
        text-align:center !important;
    }
    .rts-main-layout .rts-fact-icon{
        position:static !important;
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        width:38px !important;
        height:38px !important;
        min-width:38px !important;
        min-height:38px !important;
        flex:0 0 38px !important;
        margin:0 0 7px !important;
        font-size:18px !important;
        line-height:1 !important;
        visibility:visible !important;
        opacity:1 !important;
        transform:none !important;
    }
    .rts-main-layout .rts-fact-icon i{
        display:block !important;
        font-size:18px !important;
        line-height:1 !important;
        visibility:visible !important;
        opacity:1 !important;
    }
    .rts-main-layout .rts-fact-label{
        display:block !important;
        width:100% !important;
        margin:0 0 4px !important;
        color:#fff !important;
        font-size:clamp(11px,3.3cqw,14px) !important;
        line-height:1.25 !important;
        font-weight:900 !important;
        visibility:visible !important;
        opacity:1 !important;
    }
    .rts-main-layout .rts-fact-value{
        display:block !important;
        width:100% !important;
        color:#d9eaff !important;
        font-size:clamp(10px,2.7cqw,13px) !important;
        line-height:1.35 !important;
        font-weight:600 !important;
        visibility:visible !important;
        opacity:1 !important;
    }
}
    @media (min-width:1201px) and (max-height:800px){
    .rts-main-layout{
        grid-template-rows:auto auto minmax(210px,1fr) !important;
        gap:8px !important;
    }
    .rts-main-layout .rts-summary{
        min-height:95px !important;
        max-height:none !important;
        padding:11px 16px !important;
        overflow:hidden !important;
    }
    .rts-main-layout .rts-summary h3{font-size:16px !important;margin-bottom:5px !important;}
    .rts-main-layout .rts-summary p{font-size:12px !important;line-height:1.4 !important;}
    .rts-main-layout .rts-facts{min-height:210px !important;gap:8px !important;}
    .rts-main-layout .rts-fact{padding:8px 10px !important;}
    .rts-main-layout .rts-fact-icon{width:32px !important;height:32px !important;min-width:32px !important;min-height:32px !important;flex-basis:32px !important;margin-bottom:4px !important;}
}
    @media (min-width:1201px){
    .content-pane.active:has(.route-station-layout){display:flex !important;flex-direction:column !important;height:100% !important;min-height:0 !important;overflow:hidden !important;}
    .content-pane.active:has(.route-station-layout) > .pane-title{flex:0 0 auto !important;margin-bottom:12px !important;}
    .content-pane.active:has(.route-station-layout) > .route-station-layout,
    .route-station-layout{flex:1 1 0 !important;height:auto !important;min-height:0 !important;max-height:100% !important;grid-template-rows:minmax(0,1fr) !important;overflow:hidden !important;}
    .route-station-layout .route-map-card,
    .route-station-layout .route-map-scene,
    .route-station-layout .route-stations-card{height:100% !important;min-height:0 !important;max-height:100% !important;overflow:hidden !important;}
    .route-station-layout .route-map-img,
    .route-station-layout img.route-map-img{height:100% !important;min-height:0 !important;max-height:100% !important;object-fit:cover !important;}
    .route-station-layout .route-stations-card{display:flex !important;flex-direction:column !important;}
    .route-station-layout .station-section{flex:1 1 0 !important;display:flex !important;flex-direction:column !important;height:auto !important;min-height:0 !important;overflow:hidden !important;}
    .route-station-layout .station-list{flex:1 1 0 !important;min-height:0 !important;overflow-y:auto !important;overflow-x:hidden !important;}
}
    @media (min-width:1201px){
    .comp-card.is-long-title{grid-template-columns:minmax(0,44%) minmax(0,56%) !important;}
    .comp-card .comp-card-body{min-width:0 !important;}
    .comp-card .comp-card-title{display:flex !important;align-items:center !important;width:100% !important;min-width:0 !important;}
    .comp-card .comp-card-title h4{flex:1 1 auto !important;width:auto !important;min-width:0 !important;max-width:100% !important;white-space:normal !important;word-break:normal !important;overflow-wrap:normal !important;hyphens:none !important;}
    .comp-card.is-long-title .comp-card-title{gap:8px !important;}
    .comp-card.is-long-title .comp-card-icon{width:34px !important;height:34px !important;min-width:34px !important;flex:0 0 34px !important;font-size:16px !important;}
    .comp-card.is-long-title .comp-card-body{padding-left:11px !important;padding-right:11px !important;}
    .comp-card.is-long-title .comp-card-title h4{font-size:clamp(12px,5.6cqw,14px) !important;line-height:1.15 !important;letter-spacing:0 !important;overflow:visible !important;text-overflow:clip !important;}
}
    .hero-banner .paj-back-btn { all:unset; cursor:pointer; }
    /* HERO BANNER - SAMA DENGAN PILIHAN BAS */
    .hero-banner{
  position:relative;
  z-index:5;
  flex:0 0 auto;
  min-height:76px;
  padding:12px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  overflow:hidden;
  border-bottom:1px solid rgba(41,168,224,.5);
  background:
    linear-gradient(90deg,rgba(5,22,43,.95),rgba(5,30,58,.78),rgba(5,30,58,.28)),
    url('images/bg-paj.png') center/cover no-repeat;
}
    .hero-text-group{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
    .page-num{
  font-size:34px;
  font-weight:900;
  color:rgba(255,255,255,.08);
  line-height:1;
}
    .page-icon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(41,168,224,.14);
  border:1px solid rgba(41,168,224,.25);
  color:#70d3ff;
  font-size:22px;
}
    .hero-title{
  font-size:clamp(21px,2vw,31px);
  font-weight:900;
  color:#fff;
  line-height:1.1;
  margin:0 0 3px;
}
    .hero-sub{
  font-size:11px;
  color:#bad0e6;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:850px;
}
    .hero-banner .paj-back-btn{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:8px 12px;
  border-radius:8px;
  text-decoration:none;
  color:#e7f6ff;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}
    .hero-banner .paj-back-btn:hover{
  color:#fff;
  background:rgba(41,168,224,.12);
  border-color:rgba(41,168,224,.35);
}
    .hero-content {
  position:relative;
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-width:0;
}
    .hero-text-group > div:last-child { min-width:0; }
    .hero-sub { margin:0; font-weight:400; }
    .hero-title { letter-spacing:normal; text-transform:uppercase; }
    .hero-text-group > .d-none { flex-shrink:0; }
    /* Keep the page icon centered with Bootstrap display utilities. */
    .hero-text-group > .page-icon { display:flex !important; }
    @media (max-width:767.98px) {
  .hero-content { flex-direction:column; align-items:stretch; gap:12px; }
  .hero-sub { white-space:normal; }
  .hero-banner .paj-back-btn { align-self:flex-start; }
}
    /* Natural page scrolling on phones and tablets, including landscape iPads. */
    @media (max-width:1200px), (max-width:1400px) and (pointer:coarse) {
 html, body {width:100%!important;height:auto!important;min-height:100%!important;max-height:none!important;overflow-x:clip!important;overflow-y:visible!important;overscroll-behavior:auto!important;}
 body {display:block!important;position:static!important;}
 .paj-topbar {position:relative!important;}
 #main-wrapper, .workspace-layout, .category-select-screen {height:auto!important;min-height:0!important;max-height:none!important;flex:none!important;overflow:visible!important;}
 .category-select-screen, .workspace-layout {padding:20px!important;}
 .category-select-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;}
 .category-select-card {min-width:0;}
 .hero-content, .listing-header {flex-wrap:wrap!important;gap:12px!important;}
 .hero-text-group, .hero-text-group > div:last-child {min-width:0!important;}
 .hero-title, .hero-sub {white-space:normal!important;overflow:visible!important;overflow-wrap:anywhere;}
 .kajian-grid {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;height:auto!important;min-height:0!important;overflow:visible!important;scroll-snap-type:none!important;gap:16px!important;}
 .kajian-grid .study-card {width:100%!important;height:340px!important;min-height:0!important;max-height:none!important;}
 .project-slider-tools {display:none!important;}
 #project-detail-pane {display:none!important;position:static!important;inset:auto!important;height:auto!important;max-height:none!important;overflow:visible!important;padding:20px!important;transform:none!important;transition:none!important;}
 .detail-open #project-detail-pane {display:flex!important;}
 .detail-open .workspace-layout, .detail-open .category-select-screen {display:none!important;}
 #project-detail-pane > .d-flex:first-child {flex-wrap:wrap!important;gap:14px!important;}
 #project-detail-pane .dashboard-header-title {min-width:0!important;font-size:24px!important;line-height:1.3;}
 #detail-title-text {min-width:0;overflow-wrap:anywhere;margin-left:12px!important;}
 #project-detail-pane > .d-flex.flex-row {display:flex!important;flex-direction:column!important;gap:16px!important;height:auto!important;max-height:none!important;overflow:visible!important;}
 #dynamic-sidebar {display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;grid-auto-rows:auto!important;width:100%!important;height:auto!important;flex:none!important;max-height:none!important;overflow:visible!important;padding:0!important;}
 .side-menu-btn {min-width:0!important;min-height:44px;white-space:normal!important;}
 #dynamic-content, #dynamic-content .content-pane {width:100%!important;height:auto!important;max-height:none!important;min-height:0!important;overflow:visible!important;overscroll-behavior:auto!important;}
 #dynamic-content .content-pane {padding:18px!important;}
 #dynamic-content .content-pane.active {display:block!important;}
 .rts-main-layout, .route-station-layout, .location-showcase-layout, .komuter-info-layout {grid-template-columns:minmax(0,1fr)!important;height:auto!important;max-height:none!important;overflow:visible!important;}
 .route-station-layout .route-map-card, .route-station-layout .route-stations-card, .route-station-layout .station-section, .route-station-layout .station-list, .rts-main-layout .rts-summary {height:auto!important;max-height:none!important;overflow:visible!important;}
 .route-station-layout .route-map-scene {height:55vh!important;min-height:320px!important;max-height:620px!important;}
 .box-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important;}
 .content-pane iframe {width:100%!important;min-height:400px!important;height:70vh!important;}
 .paj-footer {position:static!important;}
}
    @media (max-width:767.98px) {
 .category-select-screen, .workspace-layout, #project-detail-pane {padding:14px!important;}
 .category-select-grid, .kajian-grid, #dynamic-sidebar, .box-grid {grid-template-columns:minmax(0,1fr)!important;}
 .hero-text-group > .page-icon {display:none!important;}
 .hero-banner {padding:14px!important;}
 .hero-title {font-size:23px!important;}
 .hero-sub {font-size:13px!important;line-height:1.45!important;}
 .category-select-card {padding:24px 18px!important;}
 .category-select-title {font-size:24px!important;}
 .listing-header .section-title {font-size:20px!important;}
 #project-detail-pane .dashboard-header-title {font-size:20px!important;}
 #project-detail-pane .title-badge {font-size:18px!important;padding:6px 10px!important;flex-shrink:0;}
 #project-detail-pane .paj-back-btn {font-size:14px!important;padding:12px!important;min-height:44px;}
 #dynamic-content .content-pane {padding:14px!important;}
 .pane-title {font-size:22px!important;}
 .pane-desc {font-size:16px!important;}
}
    /* Shared benefit cards: separate the heading from the full-width body. */
    .benefit-showcase .benefit-grid {
 display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))!important;
 align-items:stretch!important;gap:18px!important;
}
    .benefit-showcase .benefit-item {
 display:flex!important;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;
 width:100%!important;min-width:0!important;min-height:0!important;height:auto!important;
 padding:22px!important;gap:0!important;container-type:normal!important;text-align:left!important;
}
    .benefit-showcase .benefit-top {
 display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;
 width:100%!important;min-width:0!important;gap:14px!important;margin:0 0 18px!important;
}
    .benefit-showcase .benefit-icon-wrap {width:48px!important;height:48px!important;flex:0 0 48px!important;border-radius:13px!important;}
    .benefit-showcase .benefit-icon-wrap i {font-size:24px!important;}
    .benefit-showcase .benefit-item-title {
 display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;
 font-size:18px!important;line-height:1.35!important;font-weight:800!important;letter-spacing:.2px!important;
 white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important;
}
    .benefit-showcase .benefit-points {
 display:grid!important;grid-template-columns:minmax(0,1fr)!important;align-content:start!important;
 width:100%!important;margin:0!important;padding:0!important;gap:14px!important;
 font-size:15px!important;line-height:1.65!important;text-align:left!important;
}
    .benefit-showcase .benefit-points li {
 display:block!important;width:100%!important;min-width:0!important;margin:0!important;padding:0 0 0 26px!important;
 font-size:inherit!important;line-height:inherit!important;font-weight:400!important;
 white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important;
}
    .benefit-showcase .benefit-points li::before {top:4px!important;left:0!important;}
    @media(max-width:600px) {
 .benefit-showcase .benefit-grid {grid-template-columns:minmax(0,1fr)!important;gap:16px!important;}
 .benefit-showcase .benefit-item {padding:20px!important;}
 .benefit-showcase .benefit-desc {margin-left:0!important;}
}
    /* Keep trip information readable independently of the map width. */
    .crm2-layout-shell .crm2-service-panel {
 position:relative!important;inset:auto!important;width:100%!important;min-width:0!important;
 margin:0!important;padding:22px!important;display:grid!important;
 grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:18px!important;
}
    .crm2-service-panel .crm2-service-title {
 grid-column:1/-1!important;min-width:0!important;padding:0 0 16px!important;
 border:0!important;border-bottom:1px solid rgba(255,255,255,.12)!important;
 border-radius:0!important;background:none!important;font-size:20px!important;line-height:1.35!important;
}
    .crm2-service-panel .crm2-service-title i {flex:0 0 34px;}
    .crm2-service-panel .crm2-service-route {
 display:flex!important;flex-direction:column!important;align-items:flex-start!important;
 min-width:0!important;height:auto!important;padding:20px!important;
}
    .crm2-service-panel .crm2-service-route h4 {
 width:100%;min-width:0;font-size:19px!important;line-height:1.4!important;margin:0 0 12px!important;
 white-space:normal!important;word-break:normal!important;overflow-wrap:break-word!important;
}
    .crm2-service-panel .crm2-service-count {font-size:14px!important;line-height:1.5!important;margin:0 0 16px!important;white-space:normal!important;}
    .crm2-service-panel .crm2-service-list {width:100%!important;gap:12px!important;}
    .crm2-service-panel .crm2-service-list li {
 display:grid!important;grid-template-columns:48px minmax(0,1fr)!important;
 gap:12px!important;font-size:15px!important;line-height:1.6!important;
}
    .crm2-service-panel .crm2-service-list li span {min-width:0;white-space:normal!important;overflow-wrap:break-word;}
    .crm2-service-panel .crm2-duration {
 grid-column:1/-1!important;height:auto!important;margin:0!important;padding:16px!important;
 align-items:flex-start!important;
}
    .crm2-service-panel .crm2-duration i {flex-shrink:0;}
    .crm2-service-panel .crm2-duration strong {font-size:17px!important;line-height:1.45!important;}
    @media(max-width:700px) {
 .crm2-layout-shell .crm2-service-panel {grid-template-columns:minmax(0,1fr)!important;padding:16px!important;gap:14px!important;}
 .crm2-service-panel .crm2-service-route {padding:16px!important;}
 .crm2-service-panel .crm2-service-title {font-size:18px!important;}
 .crm2-service-panel .crm2-service-route h4 {font-size:18px!important;}
}

/* =========================================================
   PAGE 6 — ABSTRACT ROAD FLOW BACKGROUND
   Tiada grid: hanya gradient, glow dan lengkungan laluan.
========================================================= */
.category-select-screen,
.workspace-layout {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at 16% 22%, rgba(24, 151, 255, 0.13) 0%, transparent 32%),
        radial-gradient(circle at 84% 72%, rgba(45, 212, 191, 0.09) 0%, transparent 34%),
        radial-gradient(ellipse at 50% 108%, rgba(22, 119, 230, 0.16) 0%, transparent 55%),
        linear-gradient(135deg, #020914 0%, #061526 48%, #030b16 100%);
}

/* Lengkungan besar seperti aliran jalan di bahagian kiri bawah. */
.category-select-screen::before,
.workspace-layout::before {
    content: "";
    position: absolute;
    left: -330px;
    bottom: -330px;
    width: 900px;
    height: 520px;
    border: 2px solid rgba(52, 184, 255, 0.16);
    border-radius: 50%;
    box-shadow:
        0 0 24px rgba(41, 168, 224, 0.10),
        0 0 0 58px rgba(41, 168, 224, 0.026),
        0 0 0 116px rgba(41, 168, 224, 0.017),
        0 0 0 174px rgba(41, 168, 224, 0.010);
    transform: rotate(-13deg);
    pointer-events: none;
    z-index: 0;
}

/* Laluan kedua dari penjuru kanan supaya komposisi lebih seimbang. */
.category-select-screen::after,
.workspace-layout::after {
    content: "";
    position: absolute;
    right: -390px;
    top: -360px;
    width: 820px;
    height: 570px;
    border: 2px solid rgba(45, 212, 191, 0.11);
    border-radius: 50%;
    box-shadow:
        0 0 28px rgba(45, 212, 191, 0.07),
        0 0 0 70px rgba(45, 212, 191, 0.018),
        0 0 0 140px rgba(45, 212, 191, 0.010);
    transform: rotate(16deg);
    pointer-events: none;
    z-index: 0;
}

.category-select-screen > *,
.workspace-layout > * {
    position: relative;
    z-index: 1;
}

/* Tambah depth halus pada kad tanpa menjadikannya terlalu terang. */
.category-select-card {
    background:
        radial-gradient(circle at 50% 0%, rgba(35, 157, 255, 0.08), transparent 42%),
        linear-gradient(160deg, rgba(8, 31, 52, 0.94), rgba(3, 15, 28, 0.96)) !important;
    box-shadow:
        0 22px 55px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

@media (max-width: 800px) {
    .category-select-screen::before,
    .workspace-layout::before {
        left: -520px;
        bottom: -370px;
    }

    .category-select-screen::after,
    .workspace-layout::after {
        right: -560px;
        top: -410px;
    }
}

/* =========================================================
   CATEGORY SCREEN — VISIBLE TRAFFIC FLOW ARTWORK
   SVG code-native digunakan supaya lengkungan jelas pada TV.
========================================================= */
.category-select-screen {
    background:
        radial-gradient(circle at 50% 46%, rgba(13, 104, 198, 0.14) 0%, transparent 39%),
        radial-gradient(circle at 84% 22%, rgba(26, 201, 194, 0.08) 0%, transparent 30%),
        linear-gradient(145deg, #020913 0%, #051424 54%, #020a14 100%) !important;
}

.category-select-screen::before,
.category-select-screen::after {
    display: none !important;
}

.traffic-flow-bg {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    overflow: hidden;
    pointer-events: none;
}

.traffic-flow-bg::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -230px;
    width: 1080px;
    height: 430px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(15, 130, 238, 0.22), transparent 68%);
    filter: blur(35px);
}

.traffic-flow-bg svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
}

.traffic-flow-glow,
.traffic-flow-line,
.traffic-flow-dash {
    fill: none;
    vector-effect: non-scaling-stroke;
}

.traffic-flow-glow {
    stroke: url(#trafficFlowBlue);
    stroke-width: 26;
    opacity: 0.28;
    filter: url(#trafficFlowGlow);
}

.traffic-flow-glow-soft { opacity: 0.16; }

.traffic-flow-line {
    stroke: url(#trafficFlowBlue);
    stroke-linecap: round;
}

.traffic-flow-line-main {
    stroke-width: 2.8;
    opacity: 0.78;
}

.traffic-flow-line-soft {
    stroke-width: 1.5;
    opacity: 0.38;
}

.traffic-flow-dash {
    stroke: rgba(126, 218, 255, 0.38);
    stroke-width: 1.4;
    stroke-linecap: round;
    stroke-dasharray: 3 18;
    animation: trafficFlowMove 18s linear infinite;
}

.traffic-flow-points circle {
    opacity: 0.85;
    filter: drop-shadow(0 0 8px rgba(64, 206, 255, 0.95));
}

.category-select-inner {
    position: relative !important;
    z-index: 2 !important;
}

@keyframes trafficFlowMove {
    to { stroke-dashoffset: -210; }
}

@media (prefers-reduced-motion: reduce) {
    .traffic-flow-dash { animation: none; }
}

@media (max-width: 800px) {
    .traffic-flow-bg { opacity: 0.72; }

    .traffic-flow-bg svg {
        width: 150%;
        left: -25%;
    }
}