/*
 * Dark Mode Modern theme override for peryroybowo.com
 * -----------------------------------------------------
 * Dimuat SETELAH css/styles.css (bundle Bootstrap/StartBootstrap asli).
 * File ini TIDAK mengubah styles.css sama sekali - hanya menimpa variabel
 * dan beberapa class lewat urutan pemuatan CSS, supaya:
 *   1) styles.css yang besar (bundle vendor) tidak perlu disentuh/di-upload ulang,
 *   2) perubahan tema jadi satu tempat yang mudah di-maintain/di-rollback,
 *   3) tetap kompatibel dengan semua halaman yang sudah ada tanpa perlu
 *      mengubah class Bootstrap di tiap halaman satu per satu.
 */

/* ===== 1. Palet warna ===== */
:root {
  --pb-bg: #0a0e17;              /* latar utama halaman - near-black navy */
  --pb-surface: #12172a;         /* kartu, navbar, footer */
  --pb-surface-2: #1a2140;       /* hover / elemen sekunder */
  --pb-surface-3: #212a4d;       /* input, elemen interaktif */
  --pb-border: rgba(255, 255, 255, 0.09);
  --pb-border-strong: rgba(255, 255, 255, 0.16);
  --pb-text: #e8ebf5;            /* teks utama */
  --pb-text-muted: #a7b0c8;      /* teks sekunder */
  --pb-accent-1: #4f6bff;        /* biru - versi lebih terang dari #1e30f3 agar kontras di latar gelap */
  --pb-accent-2: #ff3fa6;        /* pink/magenta - versi lebih terang dari #e21e80 */
  --pb-gradient: linear-gradient(135deg, var(--pb-accent-1) 0%, var(--pb-accent-2) 100%);
  --pb-glow: 0 0 0 1px rgba(79, 107, 255, 0.25), 0 8px 30px rgba(79, 107, 255, 0.18);
}

/* ===== 2. Variabel inti Bootstrap (body, link, border) ===== */
:root {
  --bs-body-bg: var(--pb-bg);
  --bs-body-bg-rgb: 10, 14, 23;
  --bs-body-color: var(--pb-text);
  --bs-body-color-rgb: 232, 235, 245;
  --bs-border-color: var(--pb-border);
  --bs-border-color-translucent: var(--pb-border);
  --bs-link-color: var(--pb-accent-1);
  --bs-link-hover-color: var(--pb-accent-2);
  --bs-link-color-rgb: 79, 107, 255;
  --bs-link-hover-color-rgb: 255, 63, 166;
  --bs-secondary-color: var(--pb-text-muted);
  --bs-tertiary-bg: var(--pb-surface);
  --bs-heading-color: #ffffff;
}

html {
  background-color: var(--pb-bg);
}

body {
  background-color: var(--pb-bg);
  color: var(--pb-text);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: #ffffff;
}

hr {
  border-color: var(--pb-border);
  opacity: 1;
}

::selection {
  background: var(--pb-accent-1);
  color: #fff;
}

/* Scrollbar gaya modern (WebKit/Blink) */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--pb-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--pb-surface-3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--pb-accent-1);
}

/* ===== 3. Latar (bg-*) & teks (text-muted) yang dipakai di banyak halaman ===== */
.bg-white {
  background-color: var(--pb-surface) !important;
}
.bg-light {
  background-color: var(--pb-surface-2) !important;
}
.bg-dark {
  background-color: var(--pb-surface) !important;
}
.text-muted {
  color: var(--pb-text-muted) !important;
}
.border,
.border-top,
.border-bottom,
.border-start,
.border-end {
  border-color: var(--pb-border) !important;
}

/* ===== 4. Navbar ===== */
.site-navbar {
  background-color: rgba(10, 14, 23, 0.85) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pb-border);
  position: sticky;
  top: 0;
  z-index: 1030;
}
.site-navbar .navbar-brand span {
  letter-spacing: 0.02em;
}
.site-navbar .nav-link {
  color: var(--pb-text-muted) !important;
  transition: color 0.15s ease-in-out;
}
.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus,
.site-navbar .nav-item.active .nav-link,
.site-navbar .nav-link.active {
  color: #ffffff !important;
}
.site-navbar .navbar-toggler {
  border-color: var(--pb-border-strong);
}
.site-navbar .navbar-toggler-icon {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.dropdown-menu {
  --bs-dropdown-bg: var(--pb-surface);
  --bs-dropdown-color: var(--pb-text);
  --bs-dropdown-link-color: var(--pb-text);
  --bs-dropdown-link-hover-color: #ffffff;
  --bs-dropdown-link-hover-bg: var(--pb-surface-2);
  --bs-dropdown-link-active-color: #ffffff;
  --bs-dropdown-link-active-bg: var(--pb-accent-1);
  --bs-dropdown-border-color: var(--pb-border);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
}

/* ===== 5. Footer ===== */
.site-footer {
  background-color: var(--pb-surface) !important;
  border-top: 1px solid var(--pb-border);
  color: var(--pb-text-muted);
}
.site-footer a {
  color: var(--pb-text-muted);
}
.site-footer a:hover {
  color: #ffffff;
}

/* ===== 6. Kartu (card) - dipakai di hampir semua halaman ===== */
.card {
  --bs-card-bg: var(--pb-surface);
  --bs-card-color: var(--pb-text);
  --bs-card-border-color: var(--pb-border);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.card.shadow,
.card.shadow-sm {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--pb-border-strong);
  box-shadow: var(--pb-glow) !important;
}
.card-header,
.card-footer {
  background-color: rgba(255, 255, 255, 0.03);
  border-color: var(--pb-border);
}

/* ===== 7. Form (login, contact, reset password, upload artikel) ===== */
.form-control,
.form-select {
  background-color: var(--pb-surface-3) !important;
  color: var(--pb-text) !important;
  border: 1px solid var(--pb-border-strong) !important;
}
.form-control::placeholder {
  color: var(--pb-text-muted);
  opacity: 0.8;
}
.form-control:focus,
.form-select:focus {
  background-color: var(--pb-surface-3) !important;
  color: var(--pb-text) !important;
  border-color: var(--pb-accent-1) !important;
  box-shadow: 0 0 0 0.25rem rgba(79, 107, 255, 0.25) !important;
}
.form-label {
  color: var(--pb-text);
}
.form-text {
  color: var(--pb-text-muted);
}
.input-group-text {
  background-color: var(--pb-surface-2);
  color: var(--pb-text);
  border-color: var(--pb-border-strong);
}

/* ===== 8. Tombol ===== */
.btn-primary {
  --bs-btn-bg: var(--pb-accent-1);
  --bs-btn-border-color: var(--pb-accent-1);
  --bs-btn-hover-bg: #3a56f0;
  --bs-btn-hover-border-color: #3a56f0;
  --bs-btn-active-bg: #3348d6;
  --bs-btn-active-border-color: #3348d6;
  box-shadow: 0 4px 16px rgba(79, 107, 255, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(79, 107, 255, 0.45);
}
.btn-outline-primary {
  --bs-btn-color: var(--pb-accent-1);
  --bs-btn-border-color: var(--pb-accent-1);
  --bs-btn-hover-bg: var(--pb-accent-1);
  --bs-btn-hover-border-color: var(--pb-accent-1);
}

/* ===== 9. Gradient brand (dipertahankan, sedikit diperkuat untuk latar gelap) ===== */
.text-gradient {
  background: -webkit-linear-gradient(315deg, var(--pb-accent-1) 0%, var(--pb-accent-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.bg-gradient-primary-to-secondary {
  background: var(--pb-gradient) !important;
}
.feature.bg-gradient-primary-to-secondary,
.feature.bg-primary {
  box-shadow: 0 6px 20px rgba(79, 107, 255, 0.35);
}

/* ===== 10. Alert (form contact & upload artikel) ===== */
.alert-success {
  --bs-alert-color: #7CFFC4;
  --bs-alert-bg: rgba(25, 135, 84, 0.15);
  --bs-alert-border-color: rgba(25, 135, 84, 0.35);
}
.alert-danger {
  --bs-alert-color: #FF9FAE;
  --bs-alert-bg: rgba(220, 53, 69, 0.15);
  --bs-alert-border-color: rgba(220, 53, 69, 0.35);
}

/* ===== 11. Pagination & list group (blog) ===== */
.pagination {
  --bs-pagination-bg: var(--pb-surface);
  --bs-pagination-color: var(--pb-text);
  --bs-pagination-border-color: var(--pb-border);
  --bs-pagination-hover-bg: var(--pb-surface-2);
  --bs-pagination-hover-color: #fff;
  --bs-pagination-hover-border-color: var(--pb-border-strong);
  --bs-pagination-active-bg: var(--pb-accent-1);
  --bs-pagination-active-border-color: var(--pb-accent-1);
  --bs-pagination-disabled-bg: var(--pb-surface);
  --bs-pagination-disabled-color: var(--pb-text-muted);
}
.list-group-item {
  --bs-list-group-bg: transparent;
  --bs-list-group-color: var(--pb-text);
  --bs-list-group-border-color: var(--pb-border);
  --bs-list-group-action-hover-color: #fff;
  --bs-list-group-action-hover-bg: var(--pb-surface-2);
  --bs-list-group-action-active-bg: var(--pb-surface-2);
}

/* ===== 12. Sentuhan kecil di beberapa halaman ===== */
/* Jam digital di blog.php */
.jam-digital #jam {
  background: -webkit-linear-gradient(315deg, var(--pb-accent-1) 0%, var(--pb-accent-2) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Kartu skill di resume.php (div.bg-light dipakai sebagai pill) */
.bg-light.rounded-4,
.bg-light.rounded-12 {
  border: 1px solid var(--pb-border);
}

/* Tombol WhatsApp mengambang - biarkan warnanya, tambah sedikit glow agar menyatu */
.whats-app-bubble {
  filter: drop-shadow(0 6px 16px rgba(0, 131, 97, 0.45));
}