/*--------------------------------------------------------------
# Modern Aesthetic Theme Override
# Gaya ini akan menimpa main.css untuk tampilan yang lebih modern
--------------------------------------------------------------*/

:root {
  /* Tipografi Modern */
  --default-font: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --heading-font: "Outfit", sans-serif;
  --nav-font: "Plus Jakarta Sans", sans-serif;

  /* Palet Warna Modern (Sleek Light Mode) */
  --background-color: #FAFAFB; /* Off-white yang lebih hangat dan mewah */
  --default-color: #52525B; /* Zinc-600: Abu-abu modern yang tidak terlalu pekat */
  --heading-color: #09090B; /* Zinc-950: Hampir hitam untuk kontras tinggi */
  /* --accent-color: #6366F1; /* Indigo-500: Aksen modern yang sangat populer */
  --surface-color: #FFFFFF;
  --contrast-color: #FFFFFF;
  
  /* Variabel Tambahan untuk Estetika */
  --modern-radius: 24px;
  --modern-radius-sm: 12px;
  --modern-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.05);
  --modern-shadow-hover: 0 30px 60px -15px rgba(99, 102, 241, 0.15);
}

/*--------------------------------------------------------------
# Typography & Base
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
  letter-spacing: -0.02em; /* Membuat heading terlihat lebih rapi dan padat */
}

body {
  line-height: 1.7;
}

/*--------------------------------------------------------------
# Global Buttons (Gaya Pil / Pill-shaped)
--------------------------------------------------------------*/
.btn-getstarted, 
.about .btn-primary-custom,
.portfolio .btn-cta-primary,
.contact .btn-submit {
  border-radius: 100px !important; /* Bentuk pil penuh */
  padding: 14px 32px !important;
  font-weight: 600;
  letter-spacing: 0.5px;
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.2);
  transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.btn-getstarted:hover, 
.about .btn-primary-custom:hover,
.portfolio .btn-cta-primary:hover,
.contact .btn-submit:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 25px rgba(99, 102, 241, 0.3);
}

/*--------------------------------------------------------------
# Header & Navigasi (Glassmorphism)
--------------------------------------------------------------*/
.header {
  background-color: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(16px); /* Efek kaca blur */
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.03);
}

.navmenu a {
  font-weight: 500 !important;
}

/*--------------------------------------------------------------
# Hero Section (Gradiasi Halus)
--------------------------------------------------------------*/
.hero {
  background: radial-gradient(circle at top left, rgba(99, 102, 241, 0.05) 0%, transparent 40%),
              radial-gradient(circle at bottom right, rgba(99, 102, 241, 0.08) 0%, transparent 40%);
  background-color: var(--background-color);
}

.hero .stats-grid .stat-card {
  border-radius: var(--modern-radius);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: var(--modern-shadow);
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
}

/*--------------------------------------------------------------
# Cards (Services, Portfolio, Team)
--------------------------------------------------------------*/
.services .service-card,
.portfolio .project-card,
.team .team-card,
.about .feature-box,
.why-us .features-grid .feature-box {
  border-radius: var(--modern-radius) !important;
  border: 1px solid rgba(0, 0, 0, 0.03);
  box-shadow: var(--modern-shadow);
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.services .service-card:hover,
.portfolio .project-card:hover,
.team .team-card:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: var(--modern-shadow-hover);
  border-color: rgba(99, 102, 241, 0.1);
}

/* Menghaluskan Icon Wrappers */
.icon-wrapper, .feature-icon, .cs-icon {
  border-radius: var(--modern-radius-sm) !important;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(99, 102, 241, 0.05)) !important;
}

/*--------------------------------------------------------------
# Section Titles
--------------------------------------------------------------*/
.section-title h2 {
  font-weight: 800;
  letter-spacing: -0.03em;
}

.section-title h2:after {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent-color), rgba(99, 102, 241, 0.3));
}

/*--------------------------------------------------------------
# Form Input (Contact)
--------------------------------------------------------------*/
.contact .form-card .php-email-form .input-group-custom .input-wrapper input, 
.contact .form-card .php-email-form .input-group-custom .input-wrapper textarea {
  border-radius: var(--modern-radius-sm);
  background: #F4F4F5;
  border: 1px solid transparent;
}

.contact .form-card .php-email-form .input-group-custom .input-wrapper input:focus, 
.contact .form-card .php-email-form .input-group-custom .input-wrapper textarea:focus {
  background: var(--surface-color);
  border-color: var(--accent-color);
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.1);
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  background-color: var(--surface-color);
}