/* SewaProjektor.com - Custom Styles */

/* Smooth scrolling */
html { scroll-behavior: smooth; }

/* Custom scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #f97316; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #ea580c; }

/* Hero section min height fix */
@media (min-width: 1024px) {
    #hero { min-height: 100vh; }
}

/* Article content styling */
.article-content h2 { font-size: 1.5rem; font-weight: 800; color: #111827; margin-top: 2.5rem; margin-bottom: 1rem; padding-bottom: 0.5rem; border-bottom: 2px solid #f97316; }
.article-content h3 { font-size: 1.25rem; font-weight: 700; color: #1f2937; margin-top: 2rem; margin-bottom: 0.75rem; }
.article-content p { color: #4b5563; line-height: 1.8; margin-bottom: 1.25rem; }
.article-content ul, .article-content ol { margin-bottom: 1.25rem; padding-left: 1.5rem; }
.article-content li { color: #4b5563; line-height: 1.7; margin-bottom: 0.5rem; }
.article-content ul li { list-style-type: disc; }
.article-content ol li { list-style-type: decimal; }
.article-content a { color: #f97316; text-decoration: underline; }
.article-content a:hover { color: #ea580c; }
.article-content strong { color: #111827; font-weight: 700; }
.article-content blockquote { border-left: 4px solid #f97316; padding-left: 1rem; margin: 1.5rem 0; color: #6b7280; font-style: italic; }
.article-content img { border-radius: 0.75rem; max-width: 100%; height: auto; margin: 1.5rem 0; }
.article-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.article-content th { background: #111827; color: white; padding: 0.75rem 1rem; text-align: left; font-size: 0.875rem; }
.article-content td { padding: 0.75rem 1rem; border-bottom: 1px solid #f3f4f6; font-size: 0.875rem; color: #374151; }
.article-content tr:hover td { background: #fafafa; }

/* Line clamp utilities */
.line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* Navigation active state indicator */
#main-header { transition: box-shadow 0.3s ease; }
#main-header.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.08); }

/* WhatsApp float button pulse ring */
#wa-float span.animate-ping { animation: ping 1.5s cubic-bezier(0,0,0.2,1) infinite; }

/* Booking form radio button indicator */
input[type="radio"]:checked ~ div .check-indicator {
    display: flex;
}

/* Smooth page transitions */
.page-transition { animation: fadeIn 0.3s ease-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Custom focus styles */
input:focus, textarea:focus, select:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.15);
}

/* Pricing card hover effect */
.pricing-card:hover { transform: translateY(-4px); }

/* Service card gradient overlay */
.service-card-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
}

/* Stats counter animation */
@keyframes countUp {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Mobile menu animation */
#mobile-menu { transition: all 0.2s ease; }

/* Button press effect */
button:active, a[class*="bg-primary"]:active { transform: scale(0.98); }

/* Toast/flash message auto-hide */
#flash-message { animation: slideDown 0.4s ease-out; }
@keyframes slideDown { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Print styles */
@media print {
    header, footer, .wa-float, #wa-float { display: none !important; }
    body { background: white; }
}