/* ==========================================
   DARK.CSS
   Dark Theme
========================================== */

/* Animasi perpindahan tema */

body,
.topbar,
.card,
.clock,
.search-box,
.bottom-nav,
.modal-content,
button,
input{

    transition:
        background .35s ease,
        color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;

}

/* ========================================== */

body.dark{

    background:#07140f;

    color:#f3f3f3;

}

/* Overlay */

body.dark::before{

    background:rgba(0,0,0,.55);

}

/* ========================================== */

body.dark .topbar{

    background:rgba(16,22,20,.78);

    border-bottom:1px solid rgba(255,255,255,.08);

}

/* ========================================== */

body.dark .search-box{

    background:#1b2422;

    box-shadow:none;

}

body.dark .search-box input{

    color:#ffffff;

}

body.dark .search-box input::placeholder{

    color:#9ca7a3;

}

body.dark .search-box i{

    color:#9ca7a3;

}

/* ========================================== */

body.dark .top-icons button{

    background:#1b2422;

    color:white;

    box-shadow:none;

}

/* ========================================== */

body.dark .logo-area{

    color:#eafdf4;

}

/* ========================================== */

body.dark .clock{

    background:#16211f;

    box-shadow:none;

}

body.dark #clock{

    color:#19d393;

}

body.dark #date{

    color:#a9b6b2;

}

/* ========================================== */

body.dark .card{

    background:#17211f;

    color:white;

    box-shadow:none;

    border:1px solid rgba(255,255,255,.04);

}

body.dark .card:hover{

    background:#1b2b28;

}

body.dark .card h3{

    color:white;

}

body.dark .card p{

    color:#a9b6b2;

}

body.dark .card i{

    color:#20d898;

}

/* ========================================== */

body.dark .bottom-nav{

    background:rgba(18,22,21,.92);

    border-top:1px solid rgba(255,255,255,.06);

}

body.dark .bottom-nav a{

    color:#98a29f;

}

body.dark .bottom-nav a.active{

    color:#1bd896;

}

/* ========================================== */

body.dark .modal-content{

    background:#1b2422;

    color:white;

}

body.dark .modal-content p{

    color:#b8c3bf;

}

body.dark .modal-content button{

    background:#12c48b;

}

/* ========================================== */

body.dark input{

    color:white;

}

/* ========================================== */

body.dark ::-webkit-scrollbar{

    width:8px;

}

body.dark ::-webkit-scrollbar-track{

    background:#0f1715;

}

body.dark ::-webkit-scrollbar-thumb{

    background:#2b6653;

    border-radius:20px;

}

body.dark ::-webkit-scrollbar-thumb:hover{

    background:#3b8b70;

}

/* ========================================== */

/* Glow Effect */

body.dark .card:hover{

    box-shadow:
        0 0 0 1px rgba(18,196,139,.15),
        0 10px 25px rgba(18,196,139,.12);

}

/* ========================================== */

body.dark .hero-logo{

    filter:

    drop-shadow(0 0 18px rgba(18,196,139,.25));

}

/* ========================================== */

body.dark .search-box:focus-within{

    outline:2px solid #19d393;

}

/* ========================================== */

body.dark .top-icons button:hover{

    background:#24302d;

}

body.dark .bottom-nav a:hover{

    color:#1bd896;

}

body.dark .card:active{

    transform:scale(.97);

}

/* ========================================== */

body.dark .modal{

    background:rgba(0,0,0,.72);

}

/* ========================================== */

body.dark .hero h1{

    color:white;

}