/* Custom CSS untuk Landing Page Parfum Desainer */

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

/* Navigation Styles */
.nav-link {
    @apply text-gray-700 font-medium hover:text-purple-600 transition-colors duration-300 relative;
}

.nav-link::after {
    content: '';
    @apply absolute bottom-0 left-0 w-0 h-0.5 bg-purple-600 transition-all duration-300;
}

.nav-link:hover::after {
    @apply w-full;
}

/* Button Styles */
.btn-primary {
    @apply bg-gradient-to-r from-purple-600 to-pink-600 text-white font-semibold px-8 py-3 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 inline-block;
}

.btn-secondary {
    @apply bg-white text-purple-600 font-semibold px-8 py-3 rounded-full border-2 border-purple-600 shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 inline-block hover:bg-purple-50;
}

.btn-add-cart {
    @apply bg-purple-600 text-white font-semibold px-4 py-2 rounded-lg hover:bg-purple-700 transform hover:scale-105 transition-all duration-300;
}

.btn-overlay {
    @apply bg-white text-purple-600 font-semibold px-6 py-3 rounded-full shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300;
}

/* Product Card Styles */
.product-card {
    @apply bg-white rounded-2xl shadow-lg overflow-hidden transform hover:scale-105 transition-all duration-300 hover:shadow-2xl;
}

.product-image-wrapper {
    @apply relative overflow-hidden;
}

.product-image {
    @apply w-full h-64 transition-transform duration-500;
}

.group:hover .product-image {
    @apply transform scale-110;
}

.product-overlay {
    @apply absolute inset-0 bg-black bg-opacity-0 flex items-center justify-center transition-all duration-300;
    z-index: 10;
    pointer-events: none;
}

.product-overlay .btn-overlay {
    pointer-events: all;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}

.group:hover .product-overlay {
    @apply bg-opacity-50;
}

.group:hover .product-overlay .btn-overlay {
    opacity: 1;
    transform: translateY(0);
}

/* Show button on touch devices */
@media (hover: none) {
    .product-overlay .btn-overlay {
        opacity: 1;
        transform: translateY(0);
    }
    
    .group:hover .product-overlay {
        @apply bg-opacity-70;
    }
}

/* Testimoni Card Styles */
.testimoni-card {
    @apply bg-white rounded-xl shadow-lg p-6 hover:shadow-2xl transform hover:scale-105 transition-all duration-300;
}

/* Animations */
@keyframes blob {
    0% {
        transform: translate(0px, 0px) scale(1);
    }
    33% {
        transform: translate(30px, -50px) scale(1.1);
    }
    66% {
        transform: translate(-20px, 20px) scale(0.9);
    }
    100% {
        transform: translate(0px, 0px) scale(1);
    }
}

.animate-blob {
    animation: blob 7s infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in 1s ease-out;
}

.animate-fade-in-delay {
    animation: fade-in 1s ease-out 0.3s both;
}

.animate-fade-in-delay-2 {
    animation: fade-in 1s ease-out 0.6s both;
}

/* Modal Styles */
.modal {
    @apply fixed inset-0 z-50 flex items-center justify-center;
    background-color: rgba(0, 0, 0, 0.5);
    transition: opacity 0.3s ease, visibility 0.3s ease;
    opacity: 1;
    visibility: visible;
}

.modal.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.modal-content {
    @apply bg-white rounded-2xl shadow-2xl max-w-3xl w-full mx-4 max-h-[90vh] overflow-y-auto relative transform transition-all duration-300;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal.hidden .modal-content {
    animation: modalSlideOut 0.3s ease-in;
}

@keyframes modalSlideOut {
    from {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
    to {
        opacity: 0;
        transform: translateY(-20px) scale(0.95);
    }
}

.modal-close {
    @apply absolute top-4 right-4 text-gray-600 text-3xl font-bold hover:text-gray-800 cursor-pointer transition-colors z-10;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.9);
}

.modal-close:hover {
    @apply bg-gray-100;
    transform: rotate(90deg);
    transition: all 0.3s ease;
}

.modal-product-header {
    border-bottom: 1px solid #e5e7eb;
}

.modal-body {
    @apply p-6 md:p-8;
}

/* Cart Sidebar Styles */
.cart-sidebar {
    @apply fixed top-0 right-0 h-full w-96 bg-white shadow-2xl z-50 transform transition-transform duration-300 flex flex-col;
    transform: translateX(100%);
}

.cart-sidebar.open {
    transform: translateX(0);
}

.cart-header {
    @apply flex justify-between items-center p-6 border-b border-gray-200;
}

.cart-items {
    @apply flex-1 overflow-y-auto p-6;
}

.cart-footer {
    @apply p-6 border-t border-gray-200;
}

.cart-summary {
    @apply space-y-2;
}

.cart-total {
    @apply text-gray-800;
}

.btn-checkout {
    @apply bg-gradient-to-r from-green-500 to-green-600 text-white font-semibold px-6 py-3 rounded-lg shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300 flex items-center justify-center;
}

.btn-checkout:hover {
    @apply from-green-600 to-green-700;
}

.btn-checkout:active {
    @apply transform scale-95;
}

.cart-item {
    @apply flex justify-between items-center p-4 bg-gray-50 rounded-lg mb-4;
}

.cart-item-info {
    @apply flex-1;
}

.cart-item-name {
    @apply font-semibold text-gray-800;
}

.cart-item-price {
    @apply text-purple-600 font-bold;
}

.cart-item-remove {
    @apply text-red-500 hover:text-red-700 cursor-pointer ml-4;
}

/* Cart Button */
.cart-button {
    @apply fixed bottom-8 right-8 bg-gradient-to-r from-purple-600 to-pink-600 text-white p-4 rounded-full shadow-lg hover:shadow-xl transform hover:scale-110 transition-all duration-300 z-40 flex items-center justify-center;
}

.cart-badge {
    @apply absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center;
}

.cart-button:hover {
    @apply shadow-2xl;
}

/* Message Box */
.message-box {
    @apply fixed top-20 right-4 z-50 p-4 rounded-lg shadow-lg transform transition-all duration-300 max-w-md;
}

.message-box.success {
    @apply bg-green-500 text-white;
}

.message-box.error {
    @apply bg-red-500 text-white;
}

.message-box.show {
    @apply transform translate-x-0 opacity-100;
}

.message-box.hidden {
    @apply transform translate-x-full opacity-0;
}

/* Form Styles */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent transition-all outline-none;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
    @apply shadow-lg;
}

/* Loading Spinner */
.loading {
    @apply inline-block w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .cart-sidebar {
        @apply w-full;
    }
    
    .product-image {
        @apply h-48;
    }
    
    .modal-content {
        @apply mx-2;
    }
}

/* Print Styles */
@media print {
    .cart-button,
    .cart-sidebar,
    nav,
    footer {
        @apply hidden;
    }
}

/* Accessibility */
.visually-hidden {
    @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
    clip: rect(0, 0, 0, 0);
}

/* Smooth transitions for all interactive elements */
a, button {
    @apply transition-all duration-300;
}

/* Focus styles for accessibility */
a:focus,
button:focus {
    @apply outline-none ring-2 ring-purple-500 ring-offset-2;
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    @apply bg-gray-100;
}

::-webkit-scrollbar-thumb {
    @apply bg-purple-600 rounded-full;
}

::-webkit-scrollbar-thumb:hover {
    @apply bg-purple-700;
}