/* ==========================================
   DARK MODE
========================================== */

body.dark-mode{

    background:#121212;

    color:#e5e7eb;

}

body.dark-mode .site-header{

    background:#111827;

}

body.dark-mode .main-nav{

    background:#1e3a8a;

}

body.dark-mode .background,
body.dark-mode .content-area,
body.dark-mode article,
body.dark-mode .widget,
body.dark-mode .card{

    background:#1f2937;

    color:#f3f4f6;

}

body.dark-mode a{

    color:#60a5fa;

}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4{

    color:#fff;

}

body.dark-mode img{

    opacity:.95;

}

#dark-mode-toggle{

position:fixed;

bottom:24px;

right:24px;

width:52px;

height:52px;

border-radius:50%;

background:#1d4ed8;

color:#fff;

border:none;

cursor:pointer;

box-shadow:0 8px 24px rgba(0,0,0,.18);

z-index:99999;

transition:.25s;

}

#dark-mode-toggle:hover{

transform:scale(1.08);

}

/* =====================================================
   PROGRESNEWS DARK MODE
===================================================== */

body.dark-mode{

    background:#111827;

    color:#e5e7eb;

    transition:background .25s ease,color .25s ease;

}

/* =============================
   HEADER
============================= */

body.dark-mode .site-header{

    background:#0f172a;

}

body.dark-mode .main-nav{

    background:#1e3a8a;

}

/* =============================
   CONTENT
============================= */

body.dark-mode article,
body.dark-mode .post,
body.dark-mode .card,
body.dark-mode .widget,
body.dark-mode .entry-content{

    background:#1f2937;

    color:#e5e7eb;

}

/* =============================
   HEADING
============================= */

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6{

    color:#fff;

}

/* =============================
   LINK
============================= */

body.dark-mode a{

    color:#60a5fa;

}

body.dark-mode a:hover{

    color:#93c5fd;

}

/* =============================
   PARAGRAPH
============================= */

body.dark-mode p,
body.dark-mode li,
body.dark-mode span{

    color:#d1d5db;

}

/* =============================
   IMAGE
============================= */

body.dark-mode img{

    opacity:.96;

}

/* ===================================
   TOGGLE BUTTON
=================================== */

#dark-mode-toggle{

    position:fixed;

    right:24px;

    bottom:24px;

    width:54px;

    height:54px;

    border:none;

    border-radius:50%;

    background:#2563eb;

    color:#fff;

    cursor:pointer;

    font-size:22px;

    box-shadow:0 8px 24px rgba(0,0,0,.18);

    z-index:99999;

    transition:.25s;

}

#dark-mode-toggle:hover{

    transform:scale(1.08);

}

/* =============================
   GLOBAL DARK BACKGROUND
============================= */

body.dark-mode,
body.dark-mode html,
body.dark-mode #page,
body.dark-mode #wrapper,
body.dark-mode #content,
body.dark-mode #primary,
body.dark-mode #secondary,
body.dark-mode .site,
body.dark-mode .site-content,
body.dark-mode .content-area,
body.dark-mode .container,
body.dark-mode .wrap,
body.dark-mode .main-content{

    background:#111827 !important;
    color:#e5e7eb;

}

/* Semua section */
body.dark-mode section,
body.dark-mode article,
body.dark-mode aside,
body.dark-mode nav,
body.dark-mode footer,
body.dark-mode header,
body.dark-mode main{

    background:#111827 !important;

}

/* Semua div yang masih putih */
body.dark-mode div{

    background-color:transparent;

}

/* Box/Card */
body.dark-mode .card,
body.dark-mode .widget,
body.dark-mode .post,
body.dark-mode .entry,
body.dark-mode .entry-content,
body.dark-mode .sidebar{

    background:#1f2937 !important;

}

/* Form */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select{

    background:#1f2937;
    color:#fff;
    border:1px solid #374151;

}