a {
color : #007bff;
text-decoration : none;
}
div span a img {
width: 100px;
height: 25px;
}
img {
  border: 0;
  padding: 0;
  margin: 0;
  vertical-align: middle; 
} 
input, textarea, select {
background: #fff;
padding: 5px;
margin: 1px;
border: #ddd 1px solid;
color: #333; 
}
input[type="radio"]{
padding: 1px;
}
body {
color : #333;
font-size : 12px;
background : #fff;
font-family : 'Arial', sans-serif;
margin : 0;
padding : 0;
margin: auto; 
max-width: 800px;
}
form {
font-size : small;
margin : 0;
padding : 0;
}
h3 {
margin : 0;
padding : 0;
padding-bottom : 2px;
}
hr {
border : 0;
border-top : 1px dotted #ccc;
margin : 0; 
}
p {
margin: 1px;
}
ul {
margin : 0;
padding-left : 20px;
}
/* Header */
.header {
background:#0056b3;
padding: 7px;
margin: 0;
color: #fff;
font-weight:bold;
}
.header img { max-width:760px; }
@media screen and (min-device-width:100px) and (max-device-width:130px){ .header img,. screenshot, img { max-width: 80px; } }
@media screen and (min-device-width:131px) and (max-device-width:180px){ .header img, .screenshot, img { max-width: 150px; } } 
@media screen and (min-device-width:181px) and (max-device-width:250px) { .header img, .screenshot, img { max-width:180px; }}
@media screen and (min-device-width:251px) and (max-device-width:320px){ .header img, .screenshot, img { max-width:280px; }} 
@media screen and (min-device-width:321px) and (max-device-width:480px){ .header img, .screenshot , img{ max-width: 420px; }}
@media screen and (min-device-width:481px) and (max-device-width:640px){ .header img, .screenshot , img{ max-width: 480px; }}
@media screen and (min-device-width:641px) and (max-device-width:720px){ .header img, .screenshot , img{ max-width: 480px; }}
@media screen and (min-device-width:720px) and (max-device-width:5000px){ .header img, .screenshot , img{ max-width: 480px; }}
 
.navigation {
background:#007bff;
color: #fff;
padding: 0;
margin:0;
}
.navigation .select {
background: #004085;
padding: 7px 0;
margin: 0;
}
.navigation span a {
display: inline-block;
color: #fff;
padding: 7px 5px;
margin: 0;
font-weight: bold;
border-right: 1px solid #0062cc;
}

/* Footer */
.qfooter {
background: #004085;
color: #fff;
padding: 5px 7px;
margin:0;
font-weight: bold;
}
.qfooter input, .qfooter select, .qfooter .button{
padding: 3px 5px;
display: inline-block;
}
.qfooter .button{
background: #6c757d;
border: 1px solid #545b62;
}
.nav-footer {
background: #f8f9fa;
color: #333;
font-weight: bold;
padding: 7px;
}
.footer {
background: #343a40;
padding: 7px;
margin: 0;
color: #dee2e6;
text-align: center;
}
.footer a{
color: #80bdff;
text-decoration: none;
}

/* Menu */
.mainpage {
padding: 7px;
border-top: 0;
border-bottom: 0;
}
.tmenu, .tnews {
background: #e9ecef;
padding: 7px;
color: #495057;
margin: 5px 0 0 0;
font-weight: bold;
border: 1px solid #dee2e6;
}
.tnews {
margin: 0;
}
.menu, .container, .list, .back-menu, .news {
padding: 7px;
color: #495057;
margin: 0;
border: 1px solid #dee2e6;
border-top: 0;
}
.container .textarea {
width: 90%;
}
.back-menu {
padding: 3px;
}
.back-menu a {
display: inline-block;
padding: 5px;
font-weight: bold;
}
.back-menu .back {
background: #007bff;
color: #fff;
border: 1px solid #0062cc;
}
.back-menu .next {
background: #28a745;
color: #fff;
border: 1px solid #1e7e34;
float:right;
}
.dlads {
text-align: center;
}
.dfile .dl {
background: #007bff;
border: 1px solid #007bff;
padding: 10px;
margin: 5px 5px 0px 5px;
color: #fff;
font-weight: bold;
text-align: center;
display: inline-block;
}
/* guestbook */
.guest-form {
padding: 7px;
margin: 0;
border: 1px solid #dee2e6;
border-top: 0;
}
.guest-form .textarea, .guest-form .input {
width: 90%;
}
.block-comment{
padding: 0;
margin: 5px 0 0 0;
position: relative;
}
.block-comment .thumbnail {
position:absolute;
border: 1px solid #dee2e6;
top:0px;
left:0px;
width:32px;
height:32px;
padding:1px;
}
.comment-author {
padding: 3px;
}
.comment-author .date {
color: #6c757d;
}
.comment-list {
margin: 0 0 0 40px;
background: #fff;
border: 1px solid #dee2e6;
padding: 5px;
}
.comment-message, .comment-actions{
padding: 3px 0;
}
.comment-actions a, .comment-actions span{
background: #28a745;
padding: 3px 7px;
display: inline-block;
color: #fff;
font-weight: bold;
}
.comment-actions span{
background: #dc3545;
}
.block-reply {
margin: 0 1px 1px 15px;
padding: 5px 0 5px 5px;
}
.block-reply .block-comment {
border: 0;
}
.block-reply .thumbnail {
left: 0;
}
.block-reply .comment-list {
margin: 0 0 0 40px;
}
/* paging */
.pagelink {
  background: #e9ecef;
 padding: 7px;
 color: #495057;
 margin: 5px 0 0 0;
 font-weight: bold;
 border: 1px solid #dee2e6
 font-family:'Arial', serif;
 text-align:center;
}
.page span, .pag, .pagelink {
  font-size: 0px;
  color: #FFFFFF;
}
.page span .pag b, .pagelink  b {
  color:#FFFFFF;
  background-color: #007bff;
  border: 1px solid #0062cc;
  padding: 2px 5px 2px 5px;
  font-size: 12px !important; font-weight: bold;
}
.page span a, .pag a, .pagelink  a {
  border: 1px solid #0062cc;
  background-color: #cce7ff;
  padding: 2px 5px 2px 5px;
  text-decoration: none;font-size: 12px !important;
  color:#0056b3;
}
.page span a:hover, .pag a:hover, .pagelink a:hover {
  background-color: #b3d7ff;
  font-size: 12px !important;
  border: 1px solid #0062cc;
}
 
/* Error Message */
.error {
  background:#dc3545;
  color:#fff;
  padding:5px;
  margin:5px;
  border-radius:4px;
  font-family:'Arial', Verdana;
  text-align:center;
  text-decoration:none;
}

/* Vote situs*/
.vote_cont {
border: 1px solid #dee2e6;
}
.vote_cont h3{
background: #f8f9fa;
border-bottom: 1px solid #dee2e6;
margin: 0;
padding: 7px;
}
.container h3{
font-size: 13px;
margin: 0;
}

.vote_cont .answer, .vote_cont .submit, .vote_cont .result{
padding: 5px 7px;
}
.vote_cont #answer1, .vote_cont #answer2, .vote_cont #answer3, .vote_cont #answer4, .vote_cont #answer5, .container #answer1, .container #answer2, .container #answer3, .container #answer4, .container #answer5 {
padding: 1px;
}
.container #answer1, .container #answer2, .container #answer3, .container #answer4, .container #answer5 {
display: inline-block;
}

/* Sharer */
.share-button {
padding: 7px;
font-weight: bold;
border: 1px solid #dee2e6;
border-top: 0;
}
.share-button a{
display: inline-block;
}
.social-button{
padding: 3px 0px;
font-weight: bold;
}
.share-button .fb-share {
background: #3b5998;
padding: 5px;
margin: 1px;
color: #fff;
font-weight: bold;
}
.share-button .tw-share {
background: #1da1f2;
padding: 5px;
margin: 1px;
color: #fff;
font-weight: bold;
}
.share-button .gp-share {
background: #db4437;
padding: 5px;
margin: 1px;
color: #fff;
font-weight: bold;
}

/* Search */
#search {
  background:#f8f9fa;
  color:#333;
  padding:5px;
  margin:5px;
  font-family:'Arial', serif;
  font-size:12px;
  border-radius:6px;
  border:2px solid #007bff;
  width:70%
}
#button {
  background:#007bff;
  color:#fff;
  padding:5px;
  margin:5px;
  font-family:'Arial', serif;
  font-size:12px;
  border-radius:6px;
  border:2px solid #0056b3;
  transition: all 0.8s;
  -moz-transition: all 0.8s;
  -webkit-transition: all 0.8s;
  -ms-transition: all 0.8s;
  -o-transition: all 0.8s;
}
#button:hover {
  background: #0056b3;
  color: #fff;
  text-shadow: 1px 2px 2px #000;
  transform:rotate(360deg);
  -webkit-transform:rotate(360deg);
  -moz-transform:rotate(360deg);
  box-shadow: 2px 4px 3px 2px #333;
}
/*Breadcrumbs*/
#breadcrumbs {
  background:#e9ecef;
  color:#495057;
  font-family:'Arial', serif;
  padding:5px;
  margin:5px;
  border:1px solid #dee2e6;
  border-radius:4px;
/* smile */
.smile {
padding: 7px;
border: 1px solid #dee2e6;
border-top: 0;
margin: 0;
}
.smile span {
margin: 1px;
display: inline-block;
}
/*Image Rotation*/
.img {
  -o-transition:all 1.5s ease;
  -moz-transition:all 1.5s ease;
  -webkit-transition:all 1.5s ease;
}
.img:hover {
  -o-transform:scale(1) rotate(360deg) translate(0px);
  -moz-transform:scale(1) rotate(360deg) translate(0px);
  -webkit-transform:scale(1.5) rotate(360deg) translate(0px);
  -o-transition:all 1.5s ease;-moz-transition:all 1.5s ease;
  -webkit-transition:all 1.5s ease;
}
.gallery {     overflow-x: auto; 
    white-space: nowrap; 
    padding: 5px;
    background-color: #f8f9fa;
}
.gallery img { 
    max-height: 200px; 
    margin-right: 5px; 
    display: inline-block; 
    vertical-align: middle;
    border: 1px solid #dee2e6;
}
/* Untuk daftar gambar yang sudah ada */.image-selector-container {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #dee2e6;
    padding: 5px;
    background-color: #f8f9fa;
}
.image-selector-label {
    display: inline-block;
    margin: 3px;
    cursor: pointer;
    border: 2px solid transparent;
}
.image-selector-label img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    vertical-align: middle;
}
.image-selector-label input[type="checkbox"]:checked + img {
    border: 2px solid #007bff;
}

/* CSS BARU untuk tombol '+' */
.add-image-button {
    width: 64px;
    height: 64px;
    font-size: 32px;
    font-weight: bold;
    color: #6c757d;
    background-color: #f8f9fa;
    border: 2px dashed #dee2e6;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    line-height: 60px; /* Atur agar '+' pas di tengah */
}
.add-image-button:hover {
    background-color: #e9ecef;
    border-color: #adb5bd;
}
/* -- CSS UNTUK GALERI GAMBAR BARU -- */
.image-gallery-container {
    padding: 5px;
}

/* Wadah untuk gambar utama */
.main-image-wrapper {
    width: 100%;
    margin-bottom: 5px;
}

/* Gambar utama agar responsif */
#main-forum-image {
    width: 100%;
    height: auto;
    max-height: 400px; /* Batasi tinggi maksimum */
    object-fit: contain; /* Pastikan gambar tidak terpotong */
    border: 1px solid #dee2e6;
    border-radius: 3px;
}

/* Wadah untuk thumbnail yang bisa digeser */
.thumbnail-wrapper {
    overflow-x: auto; /* Memungkinkan scroll horizontal */
    white-space: nowrap; /* Mencegah thumbnail turun ke baris baru */
    padding: 5px 0;
}

/* Gaya untuk setiap gambar thumbnail */
.forum-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover; /* Membuat gambar thumbnail seragam */
    border: 1px solid #dee2e6;
    border-radius: 3px;
    margin-right: 5px;
    cursor: pointer;
    display: inline-block; /* Agar bisa berjajar horizontal */
}

.forum-thumb:hover {
    border-color: #007bff;
}
/* -- CSS UNTUK GALERI GAMBAR -- */
.image-gallery-container {
    padding: 5px;
}

.main-image-wrapper {
    width: 100%;
    margin-bottom: 5px;
    background-color: #f8f9fa; /* Latar belakang untuk gambar */
    border: 1px solid #dee2e6;
    border-radius: 5px;
    overflow: hidden; /* Mencegah gambar keluar dari bingkai */
}

#main-product-image {
    display: block;
    width: 100%;
    height: auto; /* Tinggi otomatis menyesuaikan lebar */
    max-height: 350px; /* Batasi tinggi maksimum */
    object-fit: contain; /* Pastikan seluruh gambar terlihat */
}

/* Wadah thumbnail yang bisa digeser */
.thumbnail-wrapper {
    overflow-x: auto; /* Scroll horizontal */
    white-space: nowrap; /* Jaga thumbnail tetap satu baris */
    padding: 5px 0;
}

/* Setiap gambar thumbnail */
.product-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border: 2px solid #dee2e6;
    border-radius: 5px;
    margin-right: 5px;
    cursor: pointer;
    display: inline-block;
}

.product-thumb:hover {
    border-color: #007bff;
}
/* Wadah utama untuk setiap entri file (pembatas per file) */
.file-entry {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    margin-bottom: 20px; /* Jarak antar 'kotak' file */
    padding: 15px 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* Efek bayangan halus */
}

/* Header: berisi nama file dan tombol. Menggunakan Flexbox. */
.file-header {
    display: flex;
    justify-content: space-between; /* Mendorong item ke ujung: nama di kiri, tombol di kanan */
    align-items: center;            /* Menyejajarkan item secara vertikal di tengah */
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0; /* Garis pemisah antara header dan detail */
}

/* Styling untuk nama file */
.file-name {
    font-size: 1.1em;
    font-weight: bold;
}
.file-name a {
    color: #333;
    text-decoration: none;
}
.file-name a:hover {
    color: #007bff;
}

/* Wadah untuk tombol-tombol aksi */
.file-actions {
    /* Flexbox akan secara otomatis menempatkannya di kanan */
    white-space: nowrap; /* Mencegah tombol turun baris jika layar sempit */
}

/* Detail file di bawah header */
.file-details {
    display: flex;
    flex-wrap: wrap; /* Agar bisa turun baris jika tidak muat */
    gap: 20px;       /* Jarak antar item detail */
    font-size: 0.9em;
    color: #555;
}
.file-details span {
    color: #666;
}

/* Styling umum untuk tombol */
.action-button {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 5px;
    color: white;
    text-decoration: none;
    font-size: 0.85em;
    font-weight: 500;
    transition: background-color 0.2s ease; /* Transisi halus saat hover */
}

/* Warna tombol Ubah */
.action-button.edit {
    background-color: #007bff; /* Biru */
}
.action-button.edit:hover {
    background-color: #0056b3;
}

/* Warna tombol Hapus */
.action-button.delete {
    background-color: #dc3545; /* Merah */
}
.action-button.delete:hover {
    background-color: #c82333;
}