body{
    margin:0;
    padding:20px;
    font-family:Arial, sans-serif;
    background:linear-gradient(
        135deg,
        #f8fafc,
        #edf4ff
    );
}

/* HEADER */

.header{
    text-align:center;
    margin-bottom:20px;
}

.logo{
    height:80px;
    margin-bottom:10px;
}

.header h1{
    margin:0;
    color:#003366;
}

.header p{
    color:#666;
}

/* SUMMARY */

.summary{
    display:flex;
    gap:15px;
    margin-bottom:20px;
}

.card-summary{
    flex:1;
    background:white;
    padding:20px;
    border-radius:15px;
    text-align:center;
    box-shadow:0 3px 15px rgba(0,0,0,.08);
}

.angka{
    font-size:42px;
    font-weight:bold;
}

.tersedia .angka{
    color:#28a745;
}

.terisi-card .angka{
    color:#dc3545;
}

/* LAYOUT */

.container{
    display:flex;
    gap:20px;
    align-items:flex-start;
}

.kiri{
    flex:1;
}

/* DENAH */

.denah{
    background:white;
    padding:15px;
    border-radius:15px;
    box-shadow:0 3px 15px rgba(0,0,0,.08);
}

.denah img{
    width:100%;
    border-radius:10px;
}

/* KATEGORI */

.kategori{
    margin-top:20px;
    background:white;
    padding:15px;
    border-radius:15px;
    box-shadow:0 3px 15px rgba(0,0,0,.08);
}

.kategori h2{
    margin-top:0;
    color:#003366;
    font-size:18px;
}

/* DAFTAR KAMAR */

.daftar-kamar{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.btn-kamar{

    width:40px;
    height:40px;

    border:none;

    border-radius:10px;

    color:white;

    font-weight:bold;

    font-size:14px;

    cursor:pointer;

    transition:.2s;
}

.btn-kamar:hover{
    transform:scale(1.08);
}

.kosong{
    background:#28a745;
}

.terisi{
    background:#dc3545;
}

/* PANEL INFO */

.info{
    width:420px;
    background:white;
    border-radius:15px;
    padding:20px;
    box-shadow:0 3px 15px rgba(0,0,0,.08);
}

#fotoKamar{
    width:100%;
    height:250px;
    object-fit:cover;
    border-radius:10px;
    background:#eee;
}

#namaKamar{
    color:#003366;
    margin-top:15px;
    margin-bottom:10px;
}

/* STATUS */

.badge{
    display:inline-block;
    padding:8px 15px;
    border-radius:20px;
    color:white;
    font-weight:bold;
    margin-bottom:15px;
}

.badge-kosong{
    background:#28a745;
}

.badge-terisi{
    background:#dc3545;
}

/* TIPE */

.tipe{
    background:#eef4ff;
    color:#0056b3;
    padding:12px;
    border-radius:10px;
    margin-bottom:15px;
    line-height:1.8;
}

/* HARGA */

.harga-card{
    margin:15px 0;
}

.harga-bulanan{
    background:#fff3e6;
    border-left:5px solid #ff6b00;
    padding:12px;
    border-radius:10px;
    margin-bottom:10px;
}

.harga-bulanan small{
    color:#666;
}

.harga-bulanan div{
    font-size:28px;
    font-weight:bold;
    color:#ff6b00;
}

.harga-tahunan{
    background:#eef7ff;
    border-left:5px solid #0066cc;
    padding:12px;
    border-radius:10px;
}

.harga-tahunan small{
    color:#666;
}

.harga-tahunan div{
    font-size:24px;
    font-weight:bold;
    color:#0066cc;
}

/* FASILITAS */

.grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}

.box{
    background:#f5f5f5;
    padding:10px;
    border-radius:8px;
    text-align:center;
}

/* TERMASUK */

.termasuk{
    background:#f8fbff;
    padding:12px;
    border-radius:10px;
    line-height:1.8;
}

/* CATATAN */

.catatan{
    background:#fff8e1;
    border-left:5px solid orange;
    padding:12px;
    border-radius:10px;
    line-height:1.8;
}

/* WHATSAPP */

.wa-btn{

    display:block;

    margin-top:20px;

    text-align:center;

    background:#25D366;

    color:white;

    text-decoration:none;

    padding:15px;

    border-radius:12px;

    font-weight:bold;

    transition:.2s;
}

.wa-btn:hover{
    opacity:.9;
}

/* MOBILE */

@media(max-width:768px){

    body{
        padding:10px;
    }

    .summary{
        flex-direction:column;
    }

    .container{
        flex-direction:column;
    }

    .info{
        width:auto;
    }

    #fotoKamar{
        height:200px;
    }

    .btn-kamar{
        width:35px;
        height:35px;
        font-size:12px;
    }

    .angka{
        font-size:32px;
    }
}