@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

body{
    min-height:100vh;

    display:flex;
    justify-content:center;
    align-items:center;

    padding:20px;
    overflow:hidden;

    background:
    linear-gradient(
        rgba(255,255,255,.15),
        rgba(255,255,255,.15)
    ),
    url('bground.jpeg');

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    background-attachment:fixed;
}

body::before{
    content:"";
    position:fixed;

    top:0;
    left:0;

    width:100%;
    height:100%;

    backdrop-filter:blur(1px);
    -webkit-backdrop-filter:blur(1px);

    background:rgba(255,255,255,.08);

    z-index:-1;
}

@keyframes gradientMove{
    0%{
        background-position:0% 50%;
    }
    50%{
        background-position:100% 50%;
    }
    100%{
        background-position:0% 50%;
    }
}

/* efek cahaya */
body::before{
    content:"";
    position:fixed;
    inset:0;

    background:rgba(255,255,255,.08);

    backdrop-filter:blur(0px);
    -webkit-backdrop-filter:blur(0px);

    z-index:-1;
}

/* KOTAK UTAMA */
.container{
    width:100%;
    max-width:520px;

    text-align:center;

    padding:40px 35px;

    background:rgba(255,255,255,.20);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

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

    border-radius:30px;

    box-shadow:
    0 20px 50px rgba(0,0,0,.30);

    animation:fadeIn 1s;
}

@keyframes fadeIn{
    from{
        opacity:0;
        transform:translateY(30px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}


/* PROFIL */
.profile{
    margin-bottom:30px;
}

.profile img{
    width:130px;
    height:130px;
    object-fit:cover;
    border-radius:50%;
    border:4px solid rgba(255,255,255,.6);

    box-shadow:
        0 0 20px rgba(255,255,255,.5),
        0 0 40px rgba(255,215,0,.8);
}

@keyframes logoMove{

    0%{
        transform:translateX(-40px);
    }

    50%{
        transform:translateX(40px);
    }

    100%{
        transform:translateX(-40px);
    }

}

@keyframes pulseGlow{
    0%{
        box-shadow:0 0 15px rgba(255,255,255,.3);
    }

    50%{
        box-shadow:0 0 35px rgba(255,215,0,.8);
    }

    100%{
        box-shadow:0 0 15px rgba(255,255,255,.3);
    }
}


/* JUDUL */
.profile h3{
    color:#1f2937;
    text-shadow:
        0 2px 10px rgba(255,255,255,.8);
}

.profile p{
    color:#374151;
}


/* TOMBOL */
.link-btn{
    display:block;
    margin:15px 0;
    padding:18px;

    text-decoration:none;

    color:white;
    font-weight:600;
    font-size:17px;

    border-radius:18px;

    background:
    linear-gradient(
    135deg,
    #198754,
    #6dbf48);

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

    transition:.4s;
}

.link-btn:hover{
    transform:translateY(-5px);

    background:
    linear-gradient(
    135deg,
    #146c43,
    #4e9a31);

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


/* RESPONSIVE */
@media(max-width:768px){

    .container{
        max-width:100%;
        padding:30px 25px;
    }

    .profile h3{
        font-size:26px;
    }

    .profile img{
        width:110px;
        height:110px;
    }

    .link-btn{
        font-size:16px;
        padding:16px;
    }

}

.sky {
    position: fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    overflow:hidden;
    z-index:-2;
}

/* bentuk awan */
/* AWAN REALISTIS */
/* AWAN REALISTIS */
.cloud{
    position:absolute;

    width:550px;
    height:220px;

    opacity:.45;

    background:

    radial-gradient(circle at 8% 55%,
    rgba(255,255,255,.95) 0,
    rgba(255,255,255,.55) 20%,
    transparent 50%),

    radial-gradient(circle at 20% 35%,
    rgba(255,255,255,.95) 0,
    rgba(255,255,255,.65) 25%,
    transparent 55%),

    radial-gradient(circle at 38% 55%,
    rgba(255,255,255,.95) 0,
    rgba(255,255,255,.65) 25%,
    transparent 55%),

    radial-gradient(circle at 55% 30%,
    rgba(255,255,255,.95) 0,
    rgba(255,255,255,.55) 25%,
    transparent 55%),

    radial-gradient(circle at 72% 48%,
    rgba(255,255,255,.95) 0,
    rgba(255,255,255,.55) 25%,
    transparent 55%),

    radial-gradient(circle at 90% 40%,
    rgba(255,255,255,.9) 0,
    rgba(255,255,255,.45) 25%,
    transparent 55%);

    filter:blur(20px);
}

.cloud::before{
    content:"";
    position:absolute;
    inset:-50px;

    background:

    radial-gradient(circle at 25% 50%,
    rgba(255,255,255,.18),
    transparent 70%),

    radial-gradient(circle at 70% 40%,
    rgba(255,255,255,.15),
    transparent 70%);

    filter:blur(45px);
}


.cloud1{ top:10%; left:-300px; animation:moveCloud 60s linear infinite; }
.cloud2{ top:35%; left:-400px; transform:scale(1.2); animation:moveCloud 80s linear infinite; }
.cloud3{ top:65%; left:-500px; transform:scale(0.9); animation:moveCloud 70s linear infinite; }

@keyframes cloudMove{

    0%{
        transform:
        translateX(0)
        translateY(0);
    }

    25%{
        transform:
        translateX(60vw)
        translateY(-10px);
    }

    50%{
        transform:
        translateX(120vw)
        translateY(8px);
    }

    75%{
        transform:
        translateX(180vw)
        translateY(-6px);
    }

    100%{
        transform:
        translateX(250vw)
        translateY(0);
    }

}

body {
    background:
    linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10)),
    url('pemandangan3.png');
    background-size:cover;
    animation: slowPan 30s infinite alternate ease-in-out;
}

@keyframes slowPan {
    from { background-position: 40% 50%; }
    to   { background-position: 60% 50%; }
}

.fog{
    position:absolute;
    width:200%;
    height:200%;
    background:radial-gradient(circle,
        rgba(255,255,255,0.25),
        transparent 60%);
    filter:blur(40px);
    opacity:0.5;
}

.fog1{
    top:-30%;
    left:-20%;
    animation:fogMove1 40s linear infinite;
}

.fog2{
    bottom:-40%;
    right:-30%;
    animation:fogMove2 55s linear infinite;
}

@keyframes fogMove1{
    0%{ transform:translateX(0); }
    50%{ transform:translateX(120px); }
    100%{ transform:translateX(0); }
}

@keyframes fogMove2{
    0%{ transform:translateX(0); }
    50%{ transform:translateX(-140px); }
    100%{ transform:translateX(0); }
}

/* DASHBOARD */

.dashboard{
    width:95%;
    max-width:1100px;

    background:rgba(255,255,255,.90);

    padding:30px;

    border-radius:20px;

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

    backdrop-filter:blur(10px);
}

.dashboard h2{
    text-align:center;
    margin-bottom:25px;
    color:#1e293b;
}

.dashboard form{
    display:flex;
    gap:10px;
    margin-bottom:25px;
}

.dashboard input{
    flex:1;
    padding:12px;
    border:1px solid #ddd;
    border-radius:8px;
}

.dashboard button{
    background:#16a34a;
    color:white;
    border:none;
    padding:12px 20px;
    border-radius:8px;
    cursor:pointer;
}

.dashboard button:hover{
    background:#15803d;
}

/* TABEL */

.admin-table{
    width:100%;
    border-collapse:collapse;
}

.admin-table th{
    background:#166534;
    color:white;
    padding:14px;
}

.admin-table td{
    padding:12px;
    border-bottom:1px solid #ddd;
}

.admin-table tr:hover{
    background:#f5f5f5;
}

/* TOMBOL */

.btn-edit{
    display:inline-block;
    padding:8px 15px;
    background:#f59e0b;
    color:white;
    text-decoration:none;
    border-radius:6px;
    margin-right:5px;
}

.btn-edit:hover{
    background:#d97706;
}

.btn-delete{
    display:inline-block;
    padding:8px 15px;
    background:#dc2626;
    color:white;
    text-decoration:none;
    border-radius:6px;
}

.btn-delete:hover{
    background:#b91c1c;
}

.cloud1{
    top:8%;
    left:-700px;
    transform:scale(1.8);
    animation:cloudMove 300s linear infinite;
}

.cloud2{
    top:18%;
    left:-600px;
    transform:scale(1.3);
    animation:cloudMove 230s linear infinite;
}

.cloud3{
    top:35%;
    left:-800px;
    transform:scale(2);
    animation:cloudMove 360s linear infinite;
}

.cloud4{
    top:50%;
    left:-500px;
    transform:scale(1.1);
    animation:cloudMove 210s linear infinite;
}

.cloud5{
    top:65%;
    left:-900px;
    transform:scale(1.7);
    animation:cloudMove 330s linear infinite;
}

.cloud6{
    top:80%;
    left:-600px;
    transform:scale(1.2);
    animation:cloudMove 240s linear infinite;
}

.cloud7{
    top:90%;
    left:-1000px;
    transform:scale(2.2);
    animation:cloudMove 420s linear infinite;
}