/* ========================================
   PT. Grand Anugerah Surya - Custom Styles
   Warna dominan: KAI Red (#C8102E)
   ======================================== */

:root {
  --kai-blue: #002147;
  --kai-red: #f50505;
  --kai-red-dark: #a00d25;
  --kai-white: #FFFFFF;
  --kai-gray: #555555;
  --kai-org: #f56105;
  --kai-light-gray: #f5f5f5;
  --kai-border: #e0e0e0;
}

/* === Navbar === */
.navbar.bg-primary {
  background-color: var(--kai-blue) !important;
}
.navbar-brand img {
  height: 40px;
}
.navbar-brand span {
  color: white !important;
  font-weight: 600;
}
.navbar-nav .nav-link {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 500;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
  color: white !important;
}

/* === Hero Section === */
.hero-section {
  background: linear-gradient(rgba(200, 16, 46, 0.85), rgba(200, 16, 46, 0.9)),
              url('https://via.placeholder.com/1920x600?text=KA+Logistics') center/cover no-repeat !important;
  color: white !important;
  padding: 100px 20px;
  text-align: center;
}
.hero-section h1 {
  font-weight: 700;
}
.hero-section .btn {
  font-weight: 600;
  padding: 0.6rem 1.5rem;
}

/* === Running Text (Marquee) === */
.marquee-container {
  background-color: var(--kai-red);
  color: white;
  padding: 8px 0;
}
.marquee-text {
  overflow: hidden;
  white-space: nowrap;
}
.marquee-text span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 18s linear infinite;
}
.marquee-text:hover span {
  animation-play-state: paused;
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* === Card & Services === */
.card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid var(--kai-border);
}
.card:hover {
  transform: translateY(-5px);
  transition: transform 0.3s ease;
  box-shadow: 0 8px 20px rgba(200, 16, 46, 0.15) !important;
}

.card .card-img-overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.card:hover .card-img-overlay {
    opacity: 1;
}

.card .btn-outline-primary {
  border-color: var(--kai-red);
  color: var(--kai-red);
}
.card .btn-outline-primary:hover {
  background-color: var(--kai-red);
  color: white;
}

/* === Primary Colors === */
.text-primary {
  color: var(--kai-blue) !important;
}

.text-red {
  color: var(--kai-red) !important;
}
.bg-primary {
  background-color: var(--kai-blue) !important;
}

.bg-org {
  background-color: var(--kai-org) !important;
}

.bg-red {
  background-color: var(--kai-red) !important;
}
.btn-primary {
  background-color: var(--kai-red) !important;
  border-color: var(--kai-red) !important;
}
.btn-primary:hover {
  background-color: var(--kai-red-dark) !important;
  border-color: var(--kai-red-dark) !important;
}
.badge.bg-primary {
  background-color: var(--kai-red) !important;
}

/* === Footer === */
.footer {
  background-color: var(--kai-blue) !important;
  color: var(--kai-white) !important;
  padding: 40px 20px;
}
.footer a {
  color: var(--kai-white) !important;
  text-decoration: none;
}
.footer a:hover {
  color: #ffcccb !important;
  text-decoration: underline;
}

/* === Gallery Cards === */
.gallery-card img {
  height: 200px;
  object-fit: cover;
}

/* === Informasi Sidebar === */
.sidebar-nav .nav-link {
  padding: 0.4rem 0;
  color: var(--kai-gray);
}
.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.active {
  color: var(--kai-red);
  font-weight: 600;
}

/* === Timeline Sejarah === */
.timeline-dot {
  width: 40px;
  height: 40px;
  background: var(--kai-red);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: bold;
}

/* === Responsive === */
@media (max-width: 768px) {
  .hero-section {
    padding: 60px 15px;
  }
  .navbar-brand span {
    display: none !important;
  }
  .service-card,
  .gallery-card {
    margin-bottom: 1rem;
  }
  .marquee-container {
    font-size: 0.85rem;
  }
}

/* === Animations === */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in-up {
  animation: fadeInUp 0.6s ease-out forwards;
}