.elementor-2382 .elementor-element.elementor-element-6d1091d4{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--gap:24px 24px;--row-gap:24px;--column-gap:24px;--margin-top:0px;--margin-bottom:20px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:20px;--padding-left:0px;--padding-right:0px;--z-index:5;}.elementor-2382 .elementor-element.elementor-element-62de23a4{--display:flex;}.elementor-2382 .elementor-element.elementor-element-241676e4{--display:flex;--min-height:524px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:24px 24px;--row-gap:24px;--column-gap:24px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2382 .elementor-element.elementor-element-30e8e47f{width:100%;max-width:100%;}@media(min-width:768px){.elementor-2382 .elementor-element.elementor-element-6d1091d4{--content-width:100%;}}/* Start custom CSS for text-editor, class: .elementor-element-30e8e47f *//* Armor-Plated CSS */
    #dipSearch { width: 100% !important; padding: 15px 20px !important; font-size: 16px !important; border: 1px solid #ddd !important; border-radius: 8px !important; box-sizing: border-box !important; background-color: #ffffff !important; color: #333 !important; }
    #dipSearch:focus { outline: none !important; border-color: #0056b3 !important; box-shadow: 0 0 8px rgba(0,86,179,0.2) !important; }

    /* Controls Row */
    .controls-row { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 30px !important; gap: 15px !important; }
    
    /* Tabs */
    .dip-tabs { display: flex !important; gap: 8px !important; }
    .dip-tab { padding: 8px 16px !important; border: 1px solid #e0e0e0 !important; background: #f8f9fa !important; color: #555 !important; border-radius: 20px !important; cursor: pointer !important; font-size: 14px !important; font-weight: 500 !important; transition: all 0.2s !important; white-space: nowrap !important; }
    .dip-tab:hover { background: #e9ecef !important; }
    .dip-tab.active { background: #0056b3 !important; color: white !important; border-color: #0056b3 !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important; }

    /* Sort Dropdown */
    #dipSort { padding: 8px 15px !important; border-radius: 6px !important; border: 1px solid #ddd !important; font-size: 14px !important; cursor: pointer !important; background: #ffffff !important; color: #333 !important; }

    /* Grid & Cards */
    .dip-grid { display: flex !important; flex-direction: column !important; gap: 15px !important; margin-bottom: 30px !important; }
    .dip-card { background-color: #ffffff !important; border: 1px solid #e6e6e6 !important; border-radius: 8px !important; padding: 20px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important; transition: box-shadow 0.2s !important; }
    .dip-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important; border-color: #d2d2d2 !important; }
    .card-content-dip h3 { margin: 0 0 8px 0 !important; font-size: 18px !important; color: #164b7e !important; font-weight: bold !important; line-height: 1.2 !important; }
    .card-content-dip p { margin: 0 !important; font-size: 14px !important; color: #5f6368 !important; line-height: 1.5 !important; }
    .card-meta { display: flex !important; gap: 15px !important; margin-top: 10px !important; font-size: 12px !important; color: #80868b !important; flex-wrap: wrap !important;}
    
    /* Status Badges */
    .badge-rahasia { color: #d32f2f !important; font-weight: bold !important; background: #ffebee !important; padding: 4px 10px !important; border-radius: 4px !important; display: inline-block !important;}

    /* Download Button */
    .btn-download { background: #ffffff !important; border: 1px solid #dadce0 !important; color: #164b7e !important; padding: 8px 20px !important; border-radius: 20px !important; text-decoration: none !important; font-weight: 600 !important; font-size: 14px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; margin-left: 15px !important; white-space: nowrap !important; }
    .btn-download:hover { background: #f8f9fa !important; border-color: #d2e3fc !important; color: #174ea6 !important; }

    /* Pagination */
    .dip-pagination { display: flex !important; justify-content: center !important; gap: 5px !important; flex-wrap: wrap !important; }
    .page-btn { padding: 8px 14px !important; border: 1px solid #ddd !important; background: white !important; cursor: pointer !important; border-radius: 4px !important; color: #333 !important; }
    .page-btn.active { background: #0056b3 !important; color: white !important; border-color: #0056b3 !important; }

    /* ====== MOBILE MAGIC ====== */
    @media (max-width: 768px) {
        /* Stack the controls vertically */
        .controls-row { flex-direction: column !important; align-items: stretch !important; gap: 12px !important; }
        
        /* Wrap tabs into a grid (3 on top, 2 on bottom) */
        .dip-tabs { 
            flex-wrap: wrap !important; 
            overflow-x: visible !important; 
            gap: 6px !important; 
            justify-content: center !important;
        }
        
        /* Flex magic: Forces 3 items per row, lets the text wrap safely */
        .dip-tab { 
            flex: 1 1 calc(33% - 6px) !important; 
            padding: 8px 4px !important; 
            font-size: 12px !important; 
            white-space: normal !important; 
            text-align: center !important;
            line-height: 1.2 !important;
        }

        /* Make dropdown and buttons full width */
        #dipSort { width: 100% !important; padding: 10px !important; }
        
        /* Card Adjustments */
        .dip-card { flex-direction: column !important; align-items: flex-start !important; gap: 15px !important; }
        .btn-download { margin-left: 0 !important; width: 100% !important; box-sizing: border-box !important; justify-content: center !important; }
    }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-62de23a4 */.elementor-2382 .elementor-element.elementor-element-62de23a4{
    margin-top: 100px;
    max-width: 1200px;
}/* End custom CSS */