/* NON-CRITICAL CSS - Load Async */
/* HAPUS animasi berat, tambahkan media query untuk reduced-motion */
@media (prefers-reduced-motion: no-preference) {
  .urgency-badge {
    animation: gentleShake 3s ease-in-out infinite;
  }
  
  .modern-header::before {
    animation: optimizedFloat 30s infinite linear;
  }
}

/* OPTIMALKAN: Matikan animasi secara default, aktifkan hanya jika user setuju */
.animation-disabled * {
  animation: none !important;
  transition: none !important;
}

/* Product Grid & Cards - FULL STYLING dengan animasi yang dioptimalkan */
.product-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem;margin-top:1rem}
.product-card {background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,0.1);transition:transform 0.3s ease, box-shadow 0.3s ease}
.product-card:hover {transform:translateY(-5px);box-shadow:0 10px 25px rgba(0,0,0,0.15)}
.product-image {width:100%;height:200px;object-fit:cover}
.product-info {padding:1.5rem}
.product-title {font-size:1.3rem;color:#0066cc;margin-bottom:0.5rem}
.product-description {color:#555;margin-bottom:1rem;line-height:1.5}
.product-price {font-size:1.4rem;font-weight:bold;color:#e74c3c;margin-bottom:1.5rem}

/* Filter Buttons - FULL STYLING */
.filter-buttons {display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-bottom:2rem}
.filter-btn {padding:8px 16px;background:white;border:2px solid #0066cc;border-radius:5px;color:#0066cc;cursor:pointer;transition:all 0.3s ease}
.filter-btn.active, .filter-btn:hover {background:#0066cc;color:white}

/* Testimoni - FULL STYLING */
.testimoni-item p{margin:0 0 .5rem 0;font-style:italic;color:#444}
.testimoni-item cite{color:#555;font-size:.9rem;font-weight:500}

/* Artikel & Tips - FULL STYLING */
.article-summary h3{color:#0066cc;margin-top:0}
.readmore{color:#0066cc;text-decoration:none;font-weight:bold}

/* Area Grid & Items - FULL STYLING */
.area-item h3{margin-top:0}
.area-item ul{padding-left:1.5rem;margin-bottom:0}

/* Footer & Additional Styles - FULL STYLING dengan KONTRAKS TINGGI */
.footer-links {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;margin-bottom:2rem;text-align:left}
.footer-section{display:flex;flex-direction:column}
.footer-section h4{color:#fff;margin-bottom:1rem;border-bottom:1px solid rgba(255,255,255,0.2);padding-bottom:0.5rem}
.footer-section a{color:#e0e0e0;text-decoration:none;margin-bottom:0.5rem;transition:color 0.3s;font-weight:500}

/* Hover Effects - FULL STYLING */
.footer-section a:hover{color:#fff;text-decoration:underline}

/* WhatsApp Icon - FULL STYLING */
.whatsapp-icon{display:inline-block;margin-right:8px;vertical-align:middle}

/* Additional Mobile Styles - FULL STYLING */
@media(max-width:768px){
  .product-grid{grid-template-columns:1fr}
  .filter-buttons{flex-direction:column;align-items:center}
  .footer-links{grid-template-columns:1fr;text-align:center;gap:1.5rem}
  .footer-section h4{text-align:center}
  .footer-section a{font-size:0.95rem;padding:2px 0}
}

/* Gambar Teknisi - FULL STYLING */
.gambar-teknisi{max-width:300px;height:auto;border-radius:8px;float:right;margin:0 0 1rem 1rem}

/* Price Table - FULL STYLING */
.price-table{width:100%;border-collapse:collapse;margin-top:1rem}
.price-table th,.price-table td{padding:0.75rem;text-align:left;border-bottom:1px solid #ddd}
.price-table th{background:#f4f4f4;font-weight:bold}

/* Product Links - FULL STYLING */
.product-links{display:flex;gap:1rem;align-items:center;margin:1rem 0}

/* Dropdown Styles - FULL STYLING */
.dropdown {position:relative;display:inline-block}
.dropdown-content {display:none;position:absolute;background-color:#004a99;min-width:200px;box-shadow:0 8px 16px rgba(0,0,0,0.2);z-index:1000;border-radius:4px;overflow:hidden}
.dropdown-content a {color:white;padding:12px 16px;text-decoration:none;display:block;text-align:left;border-bottom:1px solid #003366}
.dropdown-content a:last-child {border-bottom:none}
.dropdown-content a:hover {background:#003366}
.dropdown:hover .dropdown-content {display:block}

/* Modern Card Additional Styles */
.modern-card {background:white;border-radius:15px;padding:2rem;box-shadow:0 10px 30px rgba(0,0,0,0.1);transition:all 0.3s ease;position:relative;overflow:hidden}
.modern-card::before {content:'';position:absolute;top:0;left:0;width:5px;height:100%;background:linear-gradient(135deg,#0066cc,#004a99)}
.modern-card:hover {transform:translateY(-5px);box-shadow:0 20px 40px rgba(0,0,0,0.15)}

/* Service Grid Additional */
.service-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1rem;margin-top:1rem}
.service-item{background:#f9f9f9;padding:1rem;border-radius:8px;border-left:4px solid #0066cc}

/* Internal Links Additional */
.internal-links {background:#f0f8ff;padding:1rem;border-radius:8px;margin:1rem 0;border:1px solid #0066cc}
.internal-links-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-top:1rem}
.internal-link-item {display:block;padding:0.75rem;background:white;border-radius:4px;text-decoration:none;color:#0066cc;border:1px solid #0066cc;transition:all 0.3s ease;text-align:center;font-weight:600}
.internal-link-item:hover {background:#0066cc;color:white;transform:translateY(-2px)}

/* Form Keluhan Button */
.form-keluhan-button {display:inline-block;padding:0.75rem 1.5rem;background:#28a745;color:#fff;text-decoration:none;border-radius:8px;font-weight:bold;transition:background .3s;margin-left:10px}
.form-keluhan-button:hover {background:#218838}

/* Urgency Badge Animation - OPTIMIZED */
@keyframes gentleShake {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-1deg); }
  75% { transform: rotate(1deg); }
}
.urgency-badge {
  background:linear-gradient(135deg,#ff6b35,#ff4757);
  color:white;
  padding:8px 15px;
  border-radius:20px;
  font-size:0.8rem;
  font-weight:bold;
  display:inline-block;
  margin-bottom:1rem;
  animation: gentleShake 3s ease-in-out infinite;
}

/* Modern Header Effects - OPTIMIZED */
.modern-header::before {
  content:'';
  position:absolute;
  top:-50%;
  left:-50%;
  width:200%;
  height:200%;
  background:radial-gradient(circle,rgba(255,255,255,0.1) 1%,transparent 1%);
  background-size:50px 50px;
  animation:optimizedFloat 30s infinite linear;
  will-change: transform;
}
@keyframes optimizedFloat {
  0% { transform: translate(0,0) rotate(0deg); }
  100% { transform: translate(-50px,-50px) rotate(360deg); }
}

/* Hero Section Additional */
.hero-section::before {
  content:'';
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000"><polygon fill="rgba(255,255,255,0.05)" points="0,1000 1000,0 1000,1000"/></svg>');
  pointer-events: none;
}

/* === PERBAIKAN: Dark theme hanya untuk hero section === */
.hero-section {
  background: linear-gradient(135deg, #001f3f 0%, #000a18 100%);
  color: #e0e0e0;
  position: relative;
  overflow: hidden;
}

/* Body dan section tetap terang untuk keterbacaan */
body {
  background: #f4f4f4;
  color: #333;
}

section, .modern-card, .service-item, .area-item, .product-card {
  background: #fff;
  color: #333;
}

/* Pastikan semua teks terbaca */
section h1, section h2, section h3, section h4, section h5, section h6,
section p, section li, section ul, section div {
  color: #333;
}

/* CTA buttons dengan efek neon - OPTIMIZED */
.cta-button, .hero-cta-primary, .floating-whatsapp {
  background: #25D366;
  color: #000;
  box-shadow: 0 0 10px #25D366, 0 0 20px rgba(37,211,102,0.5);
  transition: all 0.3s ease-in-out;
  border-radius: 50px;
}
.cta-button:hover, .hero-cta-primary:hover, .floating-whatsapp:hover {
  box-shadow: 0 0 25px #25D366, 0 0 50px rgba(37,211,102,0.7);
  transform: scale(1.05);
}

/* PERBAIKAN KONTRAKS: Floating Form dengan kontras memadai */
.floating-form {
  background: #d84315 !important; /* Orange gelap untuk kontras 4.5:1+ */
  color: white !important;
  padding: 12px 18px;
  border-radius: 50px;
  text-decoration: none;
  font-weight: 700 !important;
  box-shadow: 0 8px 25px rgba(216, 67, 21, 0.4);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all .3s ease;
}

.floating-form:hover {
  background: #bf360c !important;
  color: white !important;
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(216, 67, 21, 0.6);
}

/* Badge LED Pulse - OPTIMIZED */
.experience-badge {
  border: 2px solid #25D366;
  color: #25D366;
  background: rgba(37,211,102,0.1);
  padding: 10px 25px;
  border-radius: 30px;
  font-weight: bold;
  font-size: 1rem;
  display: inline-block;
  animation: optimizedGlowPulse 4s ease-in-out infinite;
}
@keyframes optimizedGlowPulse {
  0%, 100% { 
    box-shadow: 0 0 5px #25D366, 0 0 10px rgba(37,211,102,0.5);
    transform: scale(1);
  }
  50% { 
    box-shadow: 0 0 15px #25D366, 0 0 30px rgba(37,211,102,0.7);
    transform: scale(1.02);
  }
}

/* Trust badges dengan kontras memadai */
.trust-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: #f8f9fa;
  border-radius: 10px;
  font-size: .9rem;
  color: #2c3e50;
  font-weight: 600;
  border: 1px solid #dee2e6;
}

/* Stat items dengan kontras better */
.stat-label {
  color: #555;
  font-size: .9rem;
  font-weight: 600;
}

/* Article summary dengan kontras better */
.article-summary {
  background: #f9f9f9;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 10px;
  border-left: 4px solid #00cc66;
  color: #333;
}

.article-summary p {
  color: #555;
}

/* Optional hero overlay */
.hero-section {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(0,10,25,0.85) 0%, rgba(0,0,0,0.6) 100%), url('images/hero.webp') center/cover no-repeat;
}
.hero-section .content {
  animation: fadeUp 1s ease forwards;
  opacity: 0;
}
@keyframes fadeUp {
  to { opacity: 1; transform: translateY(0); }
}

/* === SOCIAL PROOF STYLES === */
.social-proof-badges {
  background: #f8f9fa;
  padding: 1.5rem;
  border-radius: 10px;
  margin-bottom: 2rem;
  border: 1px solid #e9ecef;
}

.platform-rating {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.rating-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  background: white;
  border-radius: 8px;
  border: 1px solid #dee2e6;
}

.platform {
  font-weight: bold;
  color: #0066cc;
  margin-bottom: 0.5rem;
}

.stars {
  color: #ffc107;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
}

.score {
  color: #666;
  font-size: 0.9rem;
}

/* === PERBAIKAN AKSESIBILITAS TAMBAHAN === */

/* High contrast mode support */
@media (prefers-contrast: high) {
  .footer-section a {
    color: #ffffff !important;
    font-weight: 700 !important;
  }
  
  .trust-badge {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
  }
  
  .product-description,
  .stat-label,
  .testimoni-item cite,
  .article-summary p {
    color: #000000 !important;
  }
  
  .internal-link-item {
    border: 2px solid #0066cc !important;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .experience-badge,
  .urgency-badge,
  .floating-whatsapp,
  .modern-header::before {
    animation: none;
  }
  
  .product-card,
  .modern-card,
  .internal-link-item,
  .floating-form,
  .floating-whatsapp {
    transition: none;
    transform: none !important;
  }
  
  .footer-section a,
  .internal-link-item,
  .trust-badge {
    transition: color 0.1s ease !important;
  }
}

/* Focus styles untuk aksesibilitas keyboard */
.cta-button:focus,
.hero-cta-primary:focus,
.hero-cta-secondary:focus,
.floating-whatsapp:focus,
.floating-form:focus,
.filter-btn:focus,
.internal-link-item:focus,
.footer-section a:focus {
  outline: 3px solid #0066cc;
  outline-offset: 2px;
}

/* Print styles */
@media print {
  .floating-cta,
  .hero-cta-container {
    display: none !important;
  }
  
  .modern-card {
    box-shadow: none !important;
    border: 1px solid #ccc !important;
  }
}

/* === MOBILE RESPONSIVENESS ENHANCEMENT === */
@media screen and (max-width: 768px) {
  .hero-section {
    padding: 2rem 1rem !important;
    margin: 1rem 0 !important;
  }
  
  .hero-section h2 {
    font-size: 1.5rem !important;
    line-height: 1.3 !important;
  }
  
  .hero-section p {
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }
  
  .stats-container {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.5rem !important;
    margin: 1.5rem 0 !important;
  }
  
  .stat-item {
    padding: 1rem 0.5rem !important;
  }
  
  .stat-number {
    font-size: 1.5rem !important;
  }
  
  .stat-label {
    font-size: 0.8rem !important;
  }
  
  nav {
    flex-direction: column;
    padding: 0.5rem !important;
  }
  
  nav a {
    width: 100%;
    margin: 0.25rem 0 !important;
    text-align: center;
    padding: 0.75rem !important;
  }
  
  .modern-card {
    padding: 1rem !important;
    margin: 0.5rem 0 !important;
  }
  
  .service-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }
  
  .area-grid {
    grid-template-columns: 1fr !important;
  }
  
  .internal-links-grid {
    grid-template-columns: 1fr !important;
  }
  
  .gambar-teknisi {
    float: none !important;
    margin: 1rem auto !important;
    display: block;
    max-width: 100% !important;
  }
  
  .platform-rating {
    grid-template-columns: 1fr !important;
  }
  
  .dropdown-content {
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
  }
}

/* === CTA OPTIMIZATION STYLES === */
.cta-banner {
  background: linear-gradient(135deg, #0066cc 0%, #004a99 100%) !important;
  color: white !important;
  text-align: center;
}

.cta-banner h3 {
  color: white !important;
  margin-bottom: 1rem;
}

.cta-banner p {
  color: rgba(255,255,255,0.9) !important;
  margin-bottom: 2rem;
}

.cta-buttons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap;
}

.cta-button.primary {
  background: #25D366;
  color: white;
}

.cta-button.secondary {
  background: rgba(255,255,255,0.2);
  color: white;
  border: 2px solid white;
}

.cta-button.urgent {
  background: linear-gradient(135deg, #ff6b35, #ff4757);
  color: white;
  animation: pulse 2s infinite;
}

.urgency-cta {
  background: linear-gradient(135deg, #fff3cd 0%, #ffeaa7 100%) !important;
  border: 2px solid #ffc107 !important;
  text-align: center;
}

.urgency-content h3 {
  color: #856404 !important;
}

.urgency-content p {
  color: #666 !important;
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Mobile CTA optimization */
@media screen and (max-width: 768px) {
  .cta-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .cta-button {
    width: 100%;
    max-width: 300px;
    text-align: center;
  }
  
  .cta-banner,
  .urgency-cta {
    padding: 1.5rem 1rem !important;
  }
  
  .floating-cta {
    bottom: 70px;
    right: 15px;
  }
  
  .floating-whatsapp,
  .floating-form {
    padding: 12px 15px;
    font-size: 0.9rem;
  }
}