/* Company Profile - Custom Styles */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --primary: #4f46e5;
  --primary-dark: #4338ca;
  --accent: #f59e0b;
  --accent-dark: #d97706;
}

* { box-sizing: border-box; }
body { font-family: 'Plus Jakarta Sans', sans-serif; scroll-behavior: smooth; }

/* Animations */
.fade-in { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* Hero */
.hero-bg {
  background: linear-gradient(135deg, #312e81 0%, #4f46e5 50%, #6366f1 100%);
  position: relative; overflow: hidden;
}
.hero-bg::before {
  content: ''; position: absolute; top: -50%; right: -20%; width: 600px; height: 600px;
  border-radius: 50%; background: rgba(245,158,11,0.1);
}

/* Card */
.card-hover { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.card-hover:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(0,0,0,0.1); }

/* Gallery grid */
.galeri-item { position: relative; overflow: hidden; border-radius: 12px; cursor: pointer; }
.galeri-item img { transition: transform 0.5s ease; }
.galeri-item:hover img { transform: scale(1.1); }
.galeri-overlay {
  position: absolute; inset: 0; background: rgba(79,70,229,0.8); display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.3s; color: white; font-weight: 600;
}
.galeri-item:hover .galeri-overlay { opacity: 1; }

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.95); z-index: 3000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 90vw; max-height: 85vh; border-radius: 12px; }
.lightbox-close { position: absolute; top: 24px; right: 24px; width: 48px; height: 48px; background: rgba(255,255,255,0.1); border: none; border-radius: 50%; color: white; font-size: 24px; cursor: pointer; }
.lightbox-close:hover { background: rgba(255,255,255,0.2); }
.lightbox-caption { position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%); color: white; text-align: center; background: rgba(0,0,0,0.6); padding: 12px 24px; border-radius: 12px; backdrop-filter: blur(8px); }

/* Team card */
.team-card { text-align: center; }
.team-card .team-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 4px solid #e0e7ff; margin: 0 auto; }

/* Blog card */
.blog-card img { height: 200px; object-fit: cover; }

/* Carousel (team) */
.carousel-container { overflow: hidden; }
.carousel-track { display: flex; transition: transform 0.5s ease; }

/* Admin */
.admin-card { background: white; border-radius: 12px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); padding: 24px; margin-bottom: 16px; }
.admin-input { width: 100%; padding: 10px 14px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 14px; transition: border-color 0.2s; }
.admin-input:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,0.1); }
.sidebar-item.active { background: #eef2ff; color: #4f46e5; border-right: 3px solid #4f46e5; }

.btn-primary { background: #4f46e5; color: white; padding: 10px 20px; border-radius: 8px; font-weight: 500; cursor: pointer; border: none; }
.btn-primary:hover { background: #4338ca; }
.btn-secondary { background: #f3f4f6; color: #374151; padding: 10px 20px; border-radius: 8px; font-weight: 500; cursor: pointer; border: none; }
.btn-danger { background: #ef4444; color: white; padding: 10px 20px; border-radius: 8px; font-weight: 500; cursor: pointer; border: none; }

.toast { position: fixed; bottom: 24px; right: 24px; z-index: 9999; padding: 12px 24px; border-radius: 8px; color: white; font-weight: 500; animation: slideIn 0.3s ease; }
.toast-success { background: #4f46e5; }
.toast-error { background: #dc2626; }
@keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* WhatsApp */
.wa-float { position: fixed; bottom: 24px; right: 24px; width: 60px; height: 60px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(37,211,102,0.4); z-index: 1000; transition: transform 0.3s; text-decoration: none; }
.wa-float:hover { transform: scale(1.1); }
.wa-float svg { width: 32px; height: 32px; fill: white; }
@keyframes pulse-wa { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,0.5); } 70% { box-shadow: 0 0 0 15px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
.wa-float { animation: pulse-wa 2s infinite; }
.wa-float:hover { animation: none; }

@media (max-width: 768px) {
  .wa-float { width: 52px; height: 52px; bottom: 16px; right: 16px; }
  .wa-float svg { width: 26px; height: 26px; }
}