/* --- Reset & Base --- */
* { margin: 0; padding: 0; box-sizing: border-box; }

body { 
    background-color: #eef2fe; 
    color: #000000; 
    font-family: arial, helvetica, sans-serif; 
    font-size: 10pt; 
    padding: 10px 15px; 
}

/* ==========================================
   CLASS FONT (DIPAKSA SERAGAM KE ARIAL)
   ========================================== */
.font-times, .font-courier, .font-comic, .font-ms { 
    font-family: arial, helvetica, sans-serif !important; 
}
.italic-text { font-style: italic; }

/* ==========================================
   NAVIGASI BOARD ATAS
   ========================================== */
.board-nav {
    background-color: #eef2ff; 
    border: 1px solid #b7c5d9; 
    padding: 6px 12px;
    margin-top: 15px;
    display: inline-block; 
    font-size: 13px;
    font-weight: bold;
    word-break: break-all; 
}
.board-nav a { color: #0000ee; text-decoration: none; margin: 0 3px; }
.board-nav a:hover { color: #ff0000; text-decoration: underline; }

/* ==========================================
   KONTEN WEBSITE UTAMA
   ========================================== */
.content-wrapper { max-width: 800px; margin: 0 auto; width: 100%; }

.web-header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 15px; margin-bottom: 30px; padding-top: 10px; }
.profile-pic { width: 100%; max-width: 180px; height: auto; border: 2px solid #000; }
.header-text h1 { font-size: 28px; margin-bottom: 5px; color: #af0a0f; } 
.subtitle { font-size: 16px; font-weight: bold; margin-bottom: 15px; }
.quote { font-size: 16px; margin-bottom: 15px; }
.last-updated { font-size: 12px; color: #707070; }

.gray-button { background-color: #f0f0f0; border: 1px solid #888; display: inline-block; padding: 5px 15px; font-weight: bold; color: #000; cursor: pointer; font-size: 10pt; }
.gray-button:active { background-color: #e0e0e0; }

hr { border: 0; border-top: 1px solid #b7c5d9; margin: 20px 0; }
.dotted-hr { border: 0; border-top: 1px dashed #b7c5d9; }

.section-container { padding-top: 10px; text-align: center; width: 100%; overflow: hidden;}
.section-title { font-size: 22px; font-weight: bold; margin-bottom: 15px; text-align: center; color: #af0a0f; }

/* Judul Board */
.boardTitle { color: #af0a0f; font-size: 22px; font-weight: bold; letter-spacing: 1px; margin-bottom: 20px;}

/* Semua paragraf / text diubah menjadi center */
.body-text { font-size: 10pt; line-height: 1.5; margin-bottom: 15px; text-align: center; }
ul.body-text { padding-left: 0; text-align: center; list-style-position: inside; }

/* Struktur Grid Collection */
.collection-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
}
.collection-item {
    text-align: center;
    padding: 10px;
}
.collection-item img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    border: 1px solid #000;
    margin-bottom: 10px;
}

/* Social Links */
.social-links a { color: #34345c; font-weight: bold; text-decoration: none; margin: 0 10px; font-size: 12pt; }
.social-links a:hover { color: #dd0000; text-decoration: underline; }
.web-footer { text-align: center; font-size: 9pt; margin-top: 30px; padding-bottom: 20px; color: #707070;}

/* ==========================================
   FORUM / IMAGEBOARD STYLING
   ========================================== */
.postForm { width: 100%; overflow-x: auto; margin-bottom: 10px;}

/* Kotak komentar diubah ke skema biru d6daf0 / 34345c */
.forum-table { background-color: #d6daf0; border: 1px solid #34345c; margin: 0 auto; text-align: left; max-width: 100%; }
.forum-table td { padding: 4px; }
.postBlock { background-color: #d6daf0; color: #34345c; font-weight: bold; font-size: 10pt;}
.input-field { border: 1px solid #aaa; background: #ffffff; padding: 4px; width: 100%; box-sizing: border-box; font-family: arial, helvetica, sans-serif;}
.file-action-area { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }

/* OP Thread Styling */
.thread-box { background-color: #eef2ff; padding: 10px; margin-bottom: 15px; clear: both; overflow: hidden; word-wrap: break-word; border-top: 1px solid #b7c5d9;}

/* Reply Thread Styling */
.reply-box {
    background-color: #d6daf0; 
    border: 1px solid #b7c5d9;
    border-right: none; border-bottom: none;
    padding: 8px;
    margin: 6px 0 6px 10px; 
    display: inline-block;
    max-width: 95%; 
    clear: both;
}

.reply-arrows { color: #707070; margin-right: 5px; font-weight: bold; }
.post-header { margin-bottom: 8px; font-size: 10pt; color: #000; }
.post-name { color: #117743; font-weight: bold; }
.post-date { margin: 0 5px; }
/* Ganti .file-info a menjadi seperti ini, agar nama file terlihat sebagai teks biasa */
.file-info { font-size: 9pt; color: #707070; margin-bottom: 5px; word-break: break-all; }

/* Hapus "cursor: pointer;" pada .post-img agar tidak terlihat seperti tombol */
.post-img { float: left; margin: 0 10px 10px 0; max-width: 100%; width: auto; height: auto; border: 1px solid #000; }
/* Gambar Resposif */
.post-img { float: left; margin: 0 10px 10px 0; max-width: 100%; width: auto; height: auto; border: 1px solid #000; cursor: pointer; }

/* Teks Komentar */
.post-msg { font-size: 10pt; line-height: 1.4; word-wrap: break-word; overflow-wrap: break-word; margin-top: 5px; margin-left: 0; }
.quote { color: #789922; }
.quote-link { color: #dd0000; text-decoration: underline; font-weight: bold; cursor: pointer; }

/* ==========================================
   PENGATURAN LAYAR HP (MOBILE RESPONSIVE)
   ========================================== */
@media (min-width: 768px) {
    .web-header { flex-direction: row; text-align: left; }
    .post-img { max-width: 250px; max-height: 250px; }
    .post-msg { margin-left: 20px; }
    .reply-box { margin-left: 20px; max-width: 80%; }
    .forum-table { width: auto; }
}