@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;

    background:

    linear-gradient(
    rgba(255,245,250,.95),
    rgba(255,255,255,.95)
    ),

    url('../images/flower.png');

    background-size:cover;
    background-position:center;

}



/* =========================
 SIDEBAR ADMIN
========================= */


.sidebar{

    width:260px;

    height:100vh;

    position:fixed;

    left:0;

    top:0;

    padding:35px 25px;

    color:white;

    background:

    linear-gradient(
    180deg,
    #f78fb3,
    #fbc8dc
    );

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

}



.sidebar h2{

    font-size:38px;

}


.sidebar p{

    margin-bottom:35px;

}



.sidebar a{

    display:block;

    padding:15px;

    margin:12px 0;

    color:white;

    text-decoration:none;

    border-radius:18px;

    transition:.3s;

}



.sidebar a:hover{

    background:white;

    color:#e84393;

    transform:translateX(8px);

}




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


.content{

    margin-left:260px;

    padding:40px;

}





/* HEADER */


.header,
.header-page{

    background:white;

    padding:30px;

    border-radius:30px;

    box-shadow:

    0 10px 30px rgba(0,0,0,.08);

    margin-bottom:30px;

}



.header-page{

    display:flex;

    justify-content:space-between;

    align-items:center;

}



.header h1,
.header-page h1{

    color:#e84393;

}





/* =========================
 CARD DASHBOARD
========================= */


.cards{

    display:flex;

    gap:30px;

    margin-top:40px;

}



.card{

    background:white;

    width:260px;

    padding:30px;

    border-radius:30px;

    box-shadow:

    0 15px 35px rgba(0,0,0,.08);

    border-top:5px solid #f78fb3;

}



.card h3{

    color:#e84393;

}


.card h1{

    font-size:50px;

    color:#555;

}




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


.btn,
button{


    background:

    linear-gradient(
    45deg,
    #e84393,
    #ff9ff3
    );


    color:white;

    border:none;

    padding:14px 30px;

    border-radius:30px;

    cursor:pointer;

    text-decoration:none;

}





/* =========================
 FORM
========================= */


.form-box{


    background:white;

    width:650px;

    padding:40px;

    border-radius:35px;

    box-shadow:

    0 15px 40px rgba(0,0,0,.1);


}



input,
textarea,
select{


    width:100%;

    padding:15px;

    margin:10px 0 20px;

    border-radius:18px;

    border:

    1px solid #f3b4cf;

    outline:none;

}



input:focus,
textarea:focus{

    border:2px solid #e84393;

}



/* =========================
 TABLE PAKET
========================= */


.table-box{

    background:white;

    padding:30px;

    border-radius:30px;

    box-shadow:

    0 15px 40px rgba(0,0,0,.08);

}



table{

    width:100%;

    border-collapse:collapse;

    background:white;

}



th{

    background:#f78fb3;

    color:white;

    padding:18px;

}



td{

    padding:18px;

    text-align:center;

    border-bottom:1px solid #eee;

}



tr:hover{

    background:#fff2f8;

}



img{

    border-radius:20px;

}



/* =========================
 PAKET ACTION
========================= */


.promo{

    background:#ffe1ee;

    color:#e84393;

    padding:8px 15px;

    border-radius:20px;

}



.icon{

    padding:8px 15px;

    border-radius:20px;

    text-decoration:none;

}



.edit{

    background:#eee7ff;

    color:#6c5ce7;

}



.hapus{

    background:#ffe5e5;

    color:#ff4757;

}




/* MOBILE */

@media(max-width:900px){


.sidebar{

    width:80px;

}


.sidebar h2,
.sidebar p{

    display:none;

}


.content{

    margin-left:80px;

    padding:20px;

}


}
/* =========================
 FOTO PAKET
========================= */

.foto-paket{

    width:120px;

    height:90px;

    object-fit:cover;

    border-radius:20px;

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

}


/* =========================
 GALLERY
========================= */

.gallery-box{

    display:grid;

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

    gap:30px;

}



.gallery-card{

    background:white;

    border-radius:25px;

    overflow:hidden;

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

}



.gallery-card img{

    width:100%;

    height:220px;

    object-fit:cover;

}



.gallery-info{

    padding:20px;

}

/* Tombol navigasi */

.page-button{

    display:flex;

    justify-content:space-between;

    margin-top:40px;

}


.page-button a{

    background:#e84393;

    color:white;

    padding:14px 30px;

    border-radius:30px;

    text-decoration:none;

}
/* =========================
   FIX FOTO GALLERY ADMIN
========================= */

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}


.gallery-card{
    background:white;
    border-radius:25px;
    overflow:hidden;
    box-shadow:0 15px 35px rgba(0,0,0,.1);
}


/* foto gallery agar tidak crop */

.gallery-card img{

    width:100% !important;

    height:250px !important;

    object-fit:contain !important;

    background:#fafafa;

    padding:10px;

    display:block;

}
.aksi-buttons{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
}

.aksi-buttons .icon{
    display:flex;
    align-items:center;
    justify-content:center;

    width:110px;
    min-height:42px;
    padding:8px 14px;

    box-sizing:border-box;
    border-radius:25px;
    text-decoration:none;

    font-size:15px;
    font-weight:500;
    transition:0.25s;
}

.aksi-buttons .edit{
    background:#eee8ff;
    color:#6c5ce7;
}

.aksi-buttons .hapus{
    background:#ffe2e2;
    color:#ff4757;
}

.aksi-buttons .edit:hover{
    background:#6c5ce7;
    color:white;
}

.aksi-buttons .hapus:hover{
    background:#ff4757;
    color:white;
}

table td:last-child{
    width:140px;
    text-align:center;
    vertical-align:middle;
}