/*body*/
* {box-sizing: border-box;}

body { font-family: Arial, Helvetica, sans-serif; padding: 0px; margin: 0px auto;}

@media (max-width: 768px) {body {flex-direction: column; align-items: stretch;}
}

/*HEADER*/
header {background: rgb(0, 128, 115); color: white; display: flex;}


/*CONTAINER*/
.container {width: 100%; padding: 0px; margin: 0px; box-sizing: border-box;}
.container-cari {width: 100%; display: flex; justify-content: center; align-items: center;}
.container-cari1 {width: 100%; display: flex; justify-content: center; margin: 0px; padding: 0px;}
.container1 {width: 100%; display: flex; justify-content: center; margin: 0px auto; padding: none;}
.container2 {width: 100%; display: flex; justify-content: center; align-items: center; margin: 0px auto; padding: none; flex-direction: column;}
.container-40 {width: 40%; justify-content: center; align-items: center; margin: 0px auto; flex-direction: column;}
.container-form {width: 40%; padding: 5px; justify-content: center; padding: none; margin: 0px auto; }
.container-nav {width: 5%; display: flex; justify-content: center; margin: 0px auto; gap: 5px;}
@media (max-width: 768px) {
    .container {width: 100%;}
    .container-cari {width: 100%;}
    .container-cari1 {width: 100%;}
    .container1 {width: 100%; flex-direction: column; align-items: stretch;}
    .container2 {width: 100%;}
    .container-form {width: 95%;}
    .container-nav {width: 5%;}

}


/*BOX*/
.box-atas {width: 100%; height: 20vh; padding: 10px; justify-content: center; background: none;}
.box-bawah {width: 95%; height: 100%; padding: 10px; margin: 0px auto; border-radius: 20px 20px 0px 0px; background: rgba(255, 255, 255, 0.63);}
@media (max-width: 768px) {
            .box-atas {grid-template-columns: repeat(2, minmax(0, 1fr));}
            .box-bawah {grid-template-columns: repeat(1, minmax(0, 1fr));}
            }


/*GRID*/
.grid-2 {column-count: 2; column-gap: 5px; width:100%; margin:auto;}
.grid-3 {column-count: 3; column-gap: 5px; width:100%; margin:auto;}
.grid-4 {column-count: 4; column-gap: 5px; width:100%; margin:auto;}
.grid-5 {column-count: 5; column-gap: 5px; width:100%; margin:auto;}
.grid-6 {column-count: 6; column-gap: 5px; width:100%; margin:auto;}
        @media (max-width: 768px) {
            .grid-2 {column-count: 1; column-gap: 2px; width:100%; margin:auto;}
            .grid-3 {column-count: 2; column-gap: 2px; width:100%; margin:auto;}
            .grid-4 {column-count: 2; column-gap: 2px; width:100%; margin:auto;}
            .grid-5 {column-count: 3; column-gap: 2px; width:100%; margin:auto;}
            .grid-6 {column-count: 2; column-gap: 2px; width:100%; margin:auto;}
            }


/*GRID dan CARD*/
.card {width: 100%; display: flex; justify-content: center; margin: 0px auto; padding: 8px; text-decoration: none;}

.card1 {width: 100%; background: #ffffff; display: flex; justify-content: center; align-items: center; margin: 0px auto; flex-direction: column; 
        text-decoration: none; padding: 5px; border-radius: 10px; box-shadow: 1px 1px 5px rgba(120, 120, 120, 0.575);}

.card2 {width: 100%; background: #ffffff; display: flex; justify-content: center; align-items: center; margin: 0px auto; flex-direction: column; 
        text-decoration: none; padding: 5px; box-shadow: 1px 1px 5px rgba(120, 120, 120, 0.575);}

.card-img{break-inside: avoid; margin-bottom: 0px; background:rgb(209, 254, 255); border-radius:10px; overflow:hidden; box-shadow:0 3px 10px rgba(0, 0, 0, 0.582);}

.card-body {width: 100%; padding: 0px 20px 10px 20px; box-sizing: border-box; text-decoration: none;}

@media (max-width: 768px) {
            .card {padding: 5px;}
            .card1 {width: 100%;}
            .card2 {width: 100%;}
            .card-img {width: 100%;}
            .card-body {width: 100%;}
            }


/*FORM*/
label {display: inline-block; font-size: 12px; font-weight: bold; margin: 0px; padding: 8px; margin-bottom: 5px;}
input, select {width: 100%; background: white; font-size: 12px; border: 1px solid rgba(0, 0, 0, 0.442); border-radius: 6px; padding: 8px; margin-bottom: 5px;}
input[readonly] {width: 100%; font-size: 12px; border: 1px solid rgba(0, 0, 0, 0.442); border-radius: 6px; padding: 8px; margin-bottom: 5px;}

textarea { width: 100%; height: 200px; padding: 8px; font-size: 12px; border-radius: 6px; 
                border: 1px solid #6c757d; resize: vertical;}
.pesan{background:#d4edda; color:#155724; padding:8px; margin:10px 0; border-radius: 6px; border:1px solid #c3e6cb;}

.form-group {width: 100%; display: flex; align-items: center; margin-bottom: 5px;}
        .form-group label {background-color: none; width: 35%; font-size: 12px; margin-bottom: 0px; align-items: center; padding: 3px;}

        .form-group input, select {background-color: none; width: 100%; font-size: 12px; font-weight: bold; padding: 10px; border: solid 1px #4343437d; 
                                        border-radius: 8px; align-items: center;}

        .form-group input[readonly] {background: none; width: 100%; font-size: 12px; font-weight: bold; border: solid 1px #4343437d; padding: 5px; 
                                        border-radius: 8px; cursor: pointer; align-items: center;}


/*BUTTON*/
.btn-orange {display: inline-block; background: rgb(255, 111, 0); border-radius: 10px; font-size: 12px; color: #ffffff !important; text-align: center; padding: 10px 20px; 
                margin: 5px; text-decoration: none;}
    .btn-cover:hover {background: rgb(231, 156, 99);}

.btn-biru {display: inline-block; background: #05005f; border-radius: 10px; font-size: 12px; color: #ffffff !important; text-align: center; padding: 10px 20px; 
            margin: 5px; text-decoration: none;}
    .btn-biru:hover {background: #322bff;}

.btn-hijau {display: inline-block; background: #00510e; border-radius: 10px; font-size: 12px; color: #ffffff !important; text-align: center; padding: 10px 20px; 
            margin: 5px; text-decoration: none;}
    .btn-hijau:hover {background: #47bb1d;}

.btn-merah {display: inline-block; background: #a50000; border-radius: 10px; font-size: 12px; color: #ffffff !important; text-align: center; padding: 10px 20px; 
            margin: 5px; text-decoration: none;}
    .btn-merah:hover {background: #ff6464;}

button {display: inline-block; padding: 10px 20px; margin: 5px; border: 0px solid #ccc; border-radius: 10px; font-size: 12px; font-weight: bold; 
        background-color: orange; cursor: pointer; color: #ffffffff; text-align: center;}
    button:hover {background-color: rgb(255, 197, 88); cursor: pointer; color: #ffffffff;}

.btn-nav1 {background-color: rgb(255, 68, 0); border-radius: 10px; padding: 8px 8px; font-size: 10px;
        cursor: pointer; color: #ffffffff; text-align: center; margin: 5px; display: flex; text-decoration: none;}
    .btn-cover:hover {background-color: rgb(255, 153, 106); cursor: pointer; color: #ffffffff;}

.btn-nav2 {background-color: rgb(0, 41, 188); border-radius: 10px; padding: 8px 8px; font-size: 10px;
        cursor: pointer; color: rgb(255, 255, 255); text-align: center; margin: 5px; display: flex; text-decoration: none;}
    .btn-cover:hover {background-color: rgb(75, 162, 255); cursor: pointer; color: #ffffffff;}

.clickable-row {cursor: pointer; background-color: #ffffffff;}
        .clickable-row:hover {background-color: #c3e2ffff; transition: background-color 0.3s ease;}



/*HURUF*/
h1 {font-size: 45px; color: black; margin: 0; font-weight: normal;}
h2 {font-size: 30px; color: black; margin: 0; font-weight: normal;}
h3 {font-size: 20px; color: black; margin: 0; font-weight: normal;}
h4 {font-size: 14px; color: black; margin: 0; font-weight: normal;}
h5 {font-size: 12px; color: black; margin: 0; font-weight: normal;}
    @media (max-width: 768px) {
            h1 {font-size: 40px;}
            h2 {font-size: 20px;}
            h3 {font-size: 16px;}
            h4 {font-size: 12px;}
            h5 {font-size: 10px;}
            }



/*TABEL*/
table {background-color: white; width: 100%; border-collapse: collapse; font-size: 12px;}
th, td {padding: 8px; border: 1px solid #ccc; text-align: left;}
.table-wrapper {width: 100%; overflow-x: auto; overflow-y: hidden; border: 1px solid #ccc; background: #fff; padding: 0px;}
.table-wrapper table {border-collapse: collapse; min-width: 800px; width: 100%;}
.table-wrapper th,
.table-wrapper td {padding-bottom: 10px; text-align: left; white-space: normal;}
.table-container {width: 100%; overflow-x: auto;}
.table img{max-width: 80px; height: auto; border-radius : 5px;}
.tabel-btn{display:flex; gap:5px;}




/*DETAIL*/
.judul {color: #ff0000; font-weight: bold; margin-bottom: 0px; font-size: 15px; display: flex; align-items: center; text-decoration: none;}

.subjudul {color: #003cff; font-weight: bold; margin-bottom: 0px; font-size: 13px; display: flex; align-items: center; text-decoration: none;}

.deskripsi{color: #000000; margin-bottom: 4px; font-size: 13px; overflow-wrap: break-word; word-break: break-all; display: -webkit-box;
            -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}

.titik {margin-right: 10px; text-decoration: none;}

  @media (max-width: 768px) {
    .judul {margin-bottom: 3px; font-size: 18px;}
    .deskripsi {margin-bottom: 3px; font-size: 14px;}
    .titik {margin-right: 8px;}
    }


/*IMAGE*/
img {width: 100%;}
.img-1 {width: 40%; border-radius: 8px;}
.img-preview {max-width:150px;margin-top:10px;border-radius:5px;}
.icon-img {width: 100%; padding: auto;}
.cover-img {width: 100%; justify-content: center; text-align: center;}
.logoKecil-img {width: 100px; height: auto; justify-content: center; text-align: center;}
.logoBesar-img {width: 150px; height: auto; justify-content: center; text-align: center;}
.fotoKecil-img {width: 200px; height: auto; justify-content: center; text-align: center; border-radius: 10px;}
.fotoBesar-img {width: 350px; height: auto; justify-content: center; text-align: center; margin: 0px auto;}
    @media (max-width: 768px) {
        .cover-img {width: 100%;}
        .card-img {width: 100%; height: auto;}
        .logoKecil-img {width: 50px;}
        .logoBesar-img {width: 80px;}
        .fotoKecil-img {width: 90px;}
        .fotoBesar-img {width: 200px;}
    }


/*ikon mata buka tutup unyuk password*/
.password-wrapper {position: relative; width: 100%; max-width: 420px; margin: 0;}

/* style input agar ada ruang untuk ikon di kanan */
.password-wrapper input {width: 100%; padding: 10px 44px 10px 12px; font-size: 16px; border: 1px solid #ccc; border-radius: 8px; outline: none;
                            transition: border-color .15s ease, box-shadow .15s ease; box-sizing: border-box;}

/* fokus input */
.password-wrapper input:focus {border-color: #356cb8; box-shadow: 0 0 0 3px rgba(53,108,184,0.12);}

/* lihat dan sembunyikan password */
.toggle-text {color: #f10303; padding: 10px; cursor: pointer; font-size: 16px; text-decoration: none; box-sizing: border-box;}

.error-message, .success-message {padding: 10px; border-radius: 5px; margin-bottom: 20px; text-align: center; margin: auto;}
        .error-message {background-color: none; color: blue; border: 1px solid none;}
        .success-message {background-color: none; color: red; border: 1px solid none;}