/* ===== Global ===== */
body {
  padding-top: 56px;
  font-family: "Arial", sans-serif;
  line-height: 1.6;
  transition: background-color 0.3s, color 0.3s;
}

a {
  text-decoration: none;
  transition: color 0.3s;
}

img {
  max-width: 100%;
  border-radius: 8px;
}

/* ===== Navbar ===== */
.navbar {
  transition: background-color 0.3s, box-shadow 0.3s;
}

.navbar.shadow {
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.navbar .nav-link {
  margin: 0 10px;
  font-weight: 500;
  transition: color 0.3s;
}

.navbar .nav-link.active {
  color: #ffc107 !important; /* Highlight aktif */
  font-weight: 700;
}

/* ===== Hero Section ===== */
header {
  height: 100vh;
  background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)),
              url("https://picsum.photos/1920/1080") center/cover no-repeat;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

header h1 {
  font-size: 3rem;
  font-weight: 700;
}

header p {
  font-size: 1.25rem;
}

/* ===== Cards (Projects, Services, etc.) ===== */
.card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* ===== Project Modal ===== */
#projectModal .modal-content {
  border-radius: 12px;
  overflow: hidden;
}

/* ===== Contact Form ===== */
form .form-control {
  border-radius: 8px;
  transition: border-color 0.3s, box-shadow 0.3s;
}

form .form-control:focus {
  border-color: #ffc107;
  box-shadow: 0 0 6px rgba(255, 193, 7, 0.5);
}

.was-validated .form-control:invalid {
  border-color: #dc3545;
}

.was-validated .form-control:valid {
  border-color: #28a745;
}

/* ===== Back to Top Button ===== */
.back-to-top {
  background: #ffc107;
  color: #000;
  border: none;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  font-size: 1.25rem;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3);
  transition: background-color 0.3s, transform 0.3s;
  z-index: 1000;
}

.back-to-top:hover {
  background: #ffcd39;
  transform: scale(1.1);
}

/* ===== Footer ===== */
footer {
  background: #f8f9fa;
  padding: 20px 0;
  text-align: center;
  font-size: 0.9rem;
  border-top: 1px solid #ddd;
}

/* ===== Dark Theme ===== */
body.dark-mode {
  background-color: #121212;
  color: #eee;
}

body.dark-mode .navbar,
body.dark-mode footer {
  background-color: #1e1e1e;
}

body.dark-mode .card {
  background-color: #1e1e1e;
  color: #eee;
  box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}

body.dark-mode .form-control {
  background-color: #2c2c2c;
  color: #eee;
  border-color: #444;
}

body.dark-mode .form-control:focus {
  border-color: #ffc107;
  background-color: #333;
}

body.dark-mode .back-to-top {
  background: #ffc107;
  color: #000;
}

/* ===== Animations (for fade-in cards, etc.) ===== */
.animate__animated {
  visibility: visible !important;
}