/* ===========================
   STATUS PROJECT JPW
   Dark Mode Modern
=========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;
}

body{
    background:#0f172a;
    color:#fff;
    min-height:100vh;
}

.container{
    width:95%;
    max-width:1400px;
    margin:30px auto;
}

h1{
    text-align:center;
    margin-bottom:30px;
    font-size:34px;
    color:#38bdf8;
}

h1 i{
    margin-right:10px;
}

/* ===========================
   Statistik
=========================== */

.statistik{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-bottom:30px;
}

.card{
    border-radius:15px;
    padding:25px;
    text-align:center;
    color:#fff;
    box-shadow:0 10px 25px rgba(0,0,0,.35);
    transition:.3s;
}

.card:hover{
    transform:translateY(-5px);
}

.card h2{
    font-size:40px;
    margin-bottom:10px;
}

.card span{
    font-size:17px;
    letter-spacing:.5px;
}

.biru{
    background:#2563eb;
}

.merah{
    background:#dc2626;
}

.kuning{
    background:#eab308;
    color:#111;
}

.hijau{
    background:#16a34a;
}

/* ===========================
   Form
=========================== */

.form-box{

    background:#1e293b;

    padding:25px;

    border-radius:15px;

    margin-bottom:30px;

    box-shadow:0 5px 15px rgba(0,0,0,.3);

}

.form-box h2{

    margin-bottom:20px;

    color:#38bdf8;

}

form{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:18px;

}

form label{

    font-weight:600;

    margin-bottom:6px;

    display:block;

}

form input,

form select,

form textarea{

    width:100%;

    padding:12px;

    border:none;

    border-radius:8px;

    background:#334155;

    color:white;

    outline:none;

    transition:.3s;

}

form textarea{

    resize:vertical;

}

form input:focus,

form select:focus,

form textarea:focus{

    border:1px solid #38bdf8;

    background:#3b4b63;

}

button{

    margin-top:10px;

    padding:13px;

    border:none;

    border-radius:8px;

    background:#2563eb;

    color:white;

    cursor:pointer;

    font-size:16px;

    transition:.3s;

}

button:hover{

    background:#1d4ed8;

}

/* ===========================
   Search
=========================== */

#search{

    width:100%;

    padding:15px;

    border:none;

    border-radius:10px;

    margin-bottom:25px;

    background:#1e293b;

    color:white;

    font-size:16px;

}

#search:focus{

    outline:1px solid #38bdf8;

}

/* ===========================
   List Project
=========================== */

#listProject{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:20px;

}

/* Card Project */

.project-card{

    background:#1e293b;

    border-radius:15px;

    overflow:hidden;

    box-shadow:0 8px 20px rgba(0,0,0,.3);

    transition:.3s;

}

.project-card:hover{

    transform:translateY(-5px);

}

/* Header Status */

.status{

    padding:12px;

    text-align:center;

    font-weight:bold;

    font-size:17px;

    color:white;

}

.start{

    background:#dc2626;

}

.proses{

    background:#facc15;

    color:#111;

}

.selesai{

    background:#16a34a;

}

/* Isi Card */

.project-body{

    padding:20px;

}

.project-body h3{

    color:#38bdf8;

    margin-bottom:15px;

    word-break:break-word;

}

.project-body p{

    margin:8px 0;

    line-height:1.6;

    color:#d1d5db;

}

.project-body i{

    width:20px;

    color:#38bdf8;

}

/* Tombol */

.aksi{

display:flex;

gap:12px;

margin-top:18px;

flex-wrap:wrap;

}

.aksi a{

flex:1;

display:flex;

justify-content:center;

align-items:center;

gap:8px;

height:46px;

padding:0 16px;

border-radius:12px;

text-decoration:none;

font-weight:600;

font-size:14px;

transition:all .25s ease;

}
/* ===========================
   Scrollbar
=========================== */

::-webkit-scrollbar{

    width:10px;

}

::-webkit-scrollbar-track{

    background:#0f172a;

}

::-webkit-scrollbar-thumb{

    background:#475569;

    border-radius:10px;

}

::-webkit-scrollbar-thumb:hover{

    background:#64748b;

}

/* ===========================
   Responsive
=========================== */

@media(max-width:768px){

h1{

font-size:28px;

}

.card h2{

font-size:30px;

}

form{

grid-template-columns:1fr;

}

#listProject{

grid-template-columns:1fr;

}

}

@media(max-width:480px){

.container{

width:96%;

}

.card{

padding:18px;

}

.form-box{

padding:18px;

}

button{

font-size:15px;

}

}

.project-card{

    transition:.25s;

}

.project-card:hover{

    transform:translateY(-5px);

}

#search{

    transition:.3s;

}

#search:focus{

    box-shadow:0 0 15px rgba(56,189,248,.5);

}


.btn-edit,
.btn-hapus{

    flex:1;
    display:flex;
    justify-content:center;
    align-items:center;
    gap:8px;

    padding:12px;

    border-radius:8px;

    text-decoration:none;

    color:white;

    font-weight:bold;

}

.btn-edit{

    background:#2563eb;

}

.btn-edit:hover{

    background:#1d4ed8;

}

.btn-hapus{

    background:#dc2626;

}

.btn-hapus:hover{

    background:#b91c1c;

}

/* ===========================
   RESPONSIVE LIST PROJECT
=========================== */

@media (max-width:1200px){

    #listProject{
        grid-template-columns:repeat(2,1fr);
    }

}

@media (max-width:768px){

    #listProject{
        grid-template-columns:1fr;
    }

}

/* ==========================
   NOTIFIKASI
========================== */

.notif{

    position:fixed;

    top:20px;

    right:20px;

    padding:15px 20px;

    border-radius:10px;

    color:#fff;

    font-weight:bold;

    z-index:9999;

    animation:fadeIn .3s ease;

}

.notif-hapus{

    background:#dc2626;

}

.notif-simpan{

    background:#16a34a;

}

.notif-update{

    background:#2563eb;

}

@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(-20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

/* ==========================
POPUP
========================== */

.popup{

display:none;

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

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

justify-content:center;

align-items:center;

z-index:99999;

}

.popup-content{

width:95%;

max-width:600px;

background:#1e293b;

border-radius:15px;

padding:25px;

color:white;

position:relative;

animation:popup .25s;

}

@keyframes popup{

from{

transform:scale(.8);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

.closePopup{

position:absolute;

top:15px;

right:20px;

font-size:30px;

cursor:pointer;

}

.popup-content h2{

margin-bottom:20px;

color:#38bdf8;

}

.popup-content p{

margin:10px 0;

line-height:1.7;

}

.popupButton{

margin-top:25px;

display:flex;

gap:10px;

}

.popupButton button{

flex:1;

}

.domain-title a{

color:inherit;

text-decoration:none;

}

.domain-title a:hover{

color:#60a5fa;

text-decoration:underline;

}

/* ==========================
   FORM PROJECT BARU
========================== */

.form-grid{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:18px;

}

.form-group{

display:flex;

flex-direction:column;

}

.form-group.full{

grid-column:1/-1;

}

.form-group label{

margin-bottom:8px;

font-weight:600;

color:#cbd5e1;

font-size:14px;

}

.form-group input,

.form-group select,

.form-group textarea{

width:100%;

padding:12px 14px;

border-radius:10px;

border:1px solid #334155;

background:#0f172a;

color:white;

font-size:15px;

transition:.25s;

}

.form-group input:focus,

.form-group select:focus,

.form-group textarea:focus{

border-color:#38bdf8;

box-shadow:0 0 10px rgba(56,189,248,.3);

}

.form-group textarea{

resize:vertical;

min-height:120px;

}

.form-button{

grid-column:1/-1;

display:flex;

justify-content:flex-end;

gap:12px;

margin-top:10px;

}

.form-button button{

min-width:170px;

padding:13px;

border-radius:10px;

font-size:15px;

}

.form-button button[type=reset]{

background:#475569;

}

.form-button button[type=submit]{

background:#2563eb;

}

.form-button button:hover{

transform:translateY(-2px);

}

@media(max-width:768px){

.form-grid{

grid-template-columns:1fr;

}

.form-button{

flex-direction:column;

}

.form-button button{

width:100%;

}

}

/* Tombol Kembali */

.btn-kembali{

display:flex;
align-items:center;
justify-content:center;
gap:8px;

padding:13px 20px;

background:#475569;

color:#fff;

border-radius:10px;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.btn-kembali:hover{

background:#334155;

}
/*==========================================
HEADER DASHBOARD V2
==========================================*/

.header-dashboard{

display:flex;

justify-content:space-between;

align-items:center;

gap:30px;

padding:25px 30px;

margin-bottom:25px;

border-radius:18px;

background:linear-gradient(135deg,#0f172a,#1e293b);

border:1px solid #334155;

box-shadow:0 15px 35px rgba(0,0,0,.35);

}

.header-left h1{

font-size:34px;

font-weight:700;

color:#38bdf8;

margin-bottom:8px;

}

.header-left h1 i{

margin-right:10px;

}

.header-logo{

margin-bottom:10px;

}

.header-logo img{

max-width:280px;
max-height:70px;
object-fit:contain;
display:block;

}

@media(max-width:600px){

.header-logo img{
max-width:220px;
max-height:56px;
}

}

.header-left p{

color:#94a3b8;

font-size:15px;

}

.header-right{

text-align:right;

}

#jam{

font-size:34px;

font-weight:bold;

color:#ffffff;

}

#tanggal{

margin-top:8px;

color:#94a3b8;

font-size:15px;

}

.btn-admin-login{

display:inline-flex;
align-items:center;
justify-content:center;
width:38px;
height:38px;
margin-top:12px;
border-radius:50%;
background:#1e293b;
color:#38bdf8;
border:1px solid #334155;
text-decoration:none;
font-size:15px;
transition:.2s;

}

.btn-admin-login:hover{

background:#38bdf8;
color:#0f172a;

}

@media(max-width:900px){

.header-dashboard{

flex-direction:column;

align-items:flex-start;

}

.header-right{

width:100%;

text-align:left;

margin-top:15px;

}

#jam{

font-size:28px;

}

}
/*========================================
Dashboard Statistik V2
========================================*/

.dashboard-stat{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

gap:22px;

margin-bottom:35px;

}

.stat-card{

display:flex;

align-items:center;

gap:18px;

padding:25px;

border-radius:18px;

background:#1e293b;

border:1px solid #334155;

transition:.35s;

overflow:hidden;

position:relative;

}

.stat-card::before{

content:"";

position:absolute;

left:0;

top:0;

width:6px;

height:100%;

}

.total::before{

background:#3b82f6;

}

.start::before{

background:#ef4444;

}

.proses::before{

background:#facc15;

}

.selesai::before{

background:#22c55e;

}

.stat-card:hover{

transform:translateY(-10px) scale(1.02);

box-shadow:0 25px 45px rgba(0,0,0,.45);

}

.stat-card:hover .stat-icon{

transform:rotate(8deg) scale(1.08);

}

.stat-icon{

width:74px;

height:74px;

display:flex;

justify-content:center;

align-items:center;

border-radius:50%;

font-size:30px;

color:#fff;

transition:.35s;

box-shadow:0 0 25px rgba(255,255,255,.08);

}


.total .stat-icon{

background:#2563eb;

}

.start .stat-icon{

background:#dc2626;

}

.proses .stat-icon{

background:#facc15;

color:#111;

}

.selesai .stat-icon{

background:#16a34a;

}

.stat-info{

flex:1;

}

.stat-info h4{

font-size:15px;

color:#94a3b8;

margin-bottom:6px;

}

.stat-info h2{

font-size:36px;

margin-bottom:4px;

color:#fff;

}

.stat-info p{

font-size:14px;

color:#64748b;

}

@media(max-width:768px){

.dashboard-stat{

grid-template-columns:1fr;

}

}

/*========================================
PROJECT CARD PREMIUM
========================================*/

.project-card{

background:#1e293b;

border-radius:18px;

padding:22px;

border:1px solid #334155;

transition:.35s;

box-shadow:0 12px 25px rgba(0,0,0,.25);

}

.project-card:hover{

transform:translateY(-8px);

box-shadow:0 18px 35px rgba(0,0,0,.4);

}

.card-header{

display:flex;

justify-content:space-between;

align-items:flex-start;

gap:15px;

margin-bottom:20px;

}

.domain-title{

font-size:21px;

font-weight:700;

color:#38bdf8;

cursor:pointer;

line-height:1.5;

word-break:break-word;

}

.domain-title:hover{

color:#60a5fa;

}

.badge-status{

padding:8px 15px;

border-radius:30px;

font-size:12px;

font-weight:bold;

}

.badge-status.start{

background:#dc2626;

}

.badge-status.proses{

background:#facc15;

color:#111;

}

.badge-status.revisi{

background:#a855f7;

}

.badge-status.selesai{

background:#16a34a;

}

.card-info{

display:flex;

gap:10px;

margin-bottom:18px;

flex-wrap:wrap;

}

.badge{

padding:8px 14px;

border-radius:30px;

font-size:13px;

background:#334155;

}

.badge i{

margin-right:6px;

}

.tanggal-box{

display:flex;

justify-content:space-between;

gap:20px;

margin-bottom:15px;

font-size:14px;

color:#cbd5e1;

flex-wrap:wrap;

}

.deadline{

background:#0f172a;

padding:12px;

border-radius:10px;

text-align:center;

margin:18px 0;

font-weight:600;

color:#38bdf8;

}

.aksi{

display:flex;

gap:10px;

}

.aksi a{

flex:1;

text-align:center;

padding:12px;

border-radius:10px;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.btn-detail{

background:#475569;

color:#fff;

}

.btn-edit{

background:#2563eb;

color:#fff;

}

.btn-hapus{

background:#dc2626;

color:#fff;

}

.aksi a:hover{

transform:translateY(-3px);

box-shadow:0 10px 20px rgba(0,0,0,.25);

}

/*=======================================
POPUP PREMIUM
=======================================*/

.popup{

display:none;

position:fixed;

left:0;

top:0;

width:100%;

height:100%;

background:rgba(15,23,42,.82);

justify-content:center;

align-items:center;

z-index:999999;

backdrop-filter:blur(4px);

}

.popup-box{

width:95%;

max-width:720px;

background:#1e293b;

border-radius:18px;

overflow:hidden;

animation:popupShow .25s;

border:1px solid #334155;

box-shadow:0 25px 60px rgba(0,0,0,.5);

}

.popup-header{

padding:20px 25px;

display:flex;

justify-content:space-between;

align-items:center;

background:#0f172a;

}

.popup-header h2{

color:#38bdf8;

font-size:22px;

}

.popup-header span{

cursor:pointer;

font-size:28px;

}

.popup-body{

padding:25px;

max-height:65vh;

overflow:auto;

}

.popup-footer{

display:flex;

gap:12px;

padding:20px;

background:#0f172a;

flex-wrap:wrap;

}

.popup-footer button{

flex:1;

min-width:120px;

}

.popup-pesan-box{

margin-top:18px;

}

.popup-pesan-box hr{

border:none;

border-top:1px solid #334155;

margin-bottom:18px;

}

.popup-pesan-label{

display:block;

margin-bottom:10px;

font-size:13px;

color:#94a3b8;

font-weight:600;

}

.popup-pesan-box input,
.popup-pesan-box textarea{

width:100%;

padding:11px 12px;

border-radius:8px;

border:1px solid #334155;

background:#1e293b;

color:#fff;

font-size:14px;

margin-bottom:12px;

resize:vertical;

}

.btn-kirim-pesan{

width:100%;

padding:12px;

border:none;

border-radius:8px;

background:#22c55e;

color:#fff;

font-weight:bold;

font-size:14px;

cursor:pointer;

display:flex;

align-items:center;

justify-content:center;

gap:8px;

}

.btn-kirim-pesan:hover{ background:#16a34a; }

.btn-kirim-pesan:disabled{ opacity:.7; cursor:not-allowed; }

.popup-item{

margin-bottom:18px;

}

.popup-item label{

display:block;

margin-bottom:6px;

font-size:13px;

color:#94a3b8;

}

.popup-value{

padding:12px;

background:#0f172a;

border-radius:10px;

}

.popup-status{

display:inline-block;

padding:8px 18px;

border-radius:30px;

font-weight:bold;

}

@keyframes popupShow{

from{

transform:scale(.85);

opacity:0;

}

to{

transform:scale(1);

opacity:1;

}

}

/*==================================
FILTER STATUS
==================================*/

.status-filter{

display:flex;

gap:10px;

flex-wrap:wrap;

margin:18px 0 25px;

}

.filter-btn{

padding:10px 18px;

border:none;

border-radius:30px;

background:#1e293b;

color:#fff;

cursor:pointer;

transition:.3s;

font-weight:600;

}

.filter-btn:hover{

background:#2563eb;

}

.filter-btn.active{

background:#38bdf8;

color:#111827;

}

/*==================================
TOAST NOTIFICATION
==================================*/

#toast{

position:fixed;

top:25px;

right:25px;

min-width:300px;

max-width:420px;

padding:16px 20px;

border-radius:12px;

background:#1f2937;

color:#fff;

font-size:15px;

font-weight:600;

box-shadow:0 10px 25px rgba(0,0,0,.25);

opacity:0;

visibility:hidden;

transform:translateY(-20px);

transition:.35s;

z-index: 99999999 !important;

}

#toast.show{

opacity:1;

visibility:visible;

transform:translateY(0);

}

#toast.success{

background:#16a34a;

}

#toast.error{

background:#dc2626;

}

#toast.warning{

background:#d97706;

}

#toast.info{

background:#2563eb;

}

/* ==========================================
   PASSWORD POPUP
========================================== */

.password-modal{

display:none;

position:fixed;

inset:0;

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

backdrop-filter:blur(6px);

justify-content:center;

align-items:center;

z-index:999999;

}

.password-card{
    max-width:92%;

    background:#ffffff;

    border-radius:18px;

    padding:35px 35px 28px;

    text-align:center;

    box-shadow:0 20px 60px rgba(0,0,0,.35);

    animation:popupScale .25s ease;

}

.password-icon{

    width:90px;
    height:90px;
    margin:0 auto 20px;
    border-radius:50%;
    background:#2563eb;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:38px;

}

.password-icon i{
    font-size:36px;
    color:#fff;
}

.password-group:focus-within{
    border-color:#2563eb;
    box-shadow:0 0 0 4px rgba(37,99,235,.15);
}

#togglePassword:hover{
    background:#e5e7eb;
    color:#2563eb;

}

.password-button button{
    transition:.25s;
}

.password-button button:hover{
    transform:translateY(-2px);
}

.password-group{

    display:flex;

    align-items:center;

    border:1px solid #d1d5db;

    border-radius:12px;

    overflow:hidden;

    margin-bottom:28px;

    height:52px;

}

.password-button{

    display:flex;

    gap:12px;

}

#adminPassword{

    flex:1;

    border:none;

    outline:none;

    padding:0 18px;

    font-size:16px;

    background:white;

}

#togglePassword{

    width:58px;

    height:52px;

    border:none;

    background:#f3f4f6;

    cursor:pointer;

    color:#6b7280;

    font-size:18px;

}

.password-button button{

    flex:1;

    height:50px;

    border-radius:10px;

    font-size:16px;

    font-weight:600;

}

#passwordTitle{

    display:block;

    color:#111827;

    font-size:28px;

    font-weight:700;

    margin:18px 0 10px;

}

#passwordMessage{

    display:block;

    color:#6b7280;

    font-size:15px;

    margin-bottom:25px;

}

#passwordError{
    display:block;
    width:100%;
    color:#dc2626;
    font-size:14px;
    font-weight:600;
    text-align:center;
    min-height:24px;
    margin:10px 0 15px 0;
    line-height:24px;
}