/*
Theme Name: Keceslot nih bos
Theme URI: BUATSENDIRI.BIJI
Author: Your Name
Author URI: https://jackpotkeceslot.com/
Description: A fresh, clean WordPress theme for Keceslot with pink and black design.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: keceslot-new-theme
*/

/* --- Custom Styles for Keceslot Theme --- */
body {
    font-family: 'Inter', sans-serif;
    background-color: #000000; /* Black background */
    color: #f0f0f0; /* Light text color for contrast */
    font-size: 16px; /* Base font size for desktop */
}

/* Mobile adjustments for screens smaller than 768px */
@media (max-width: 767px) {
    body {
        font-size: 14px; /* Slightly smaller base font size for mobile */
    }
    .btn-primary {
        padding-left: 1.5rem; /* Smaller padding for buttons on mobile */
        padding-right: 1.5rem;
        font-size: 1rem; /* Slightly smaller font for buttons */
    }
    .card {
        padding: 1rem; /* Smaller padding for cards on mobile */
    }
    .modal-content {
        padding: 20px; /* Smaller padding for modal content on mobile */
    }
}

.gradient-bg {
    /* Pink to darker pink gradient for hero section */
    background: linear-gradient(to right, #d4217c, #a91a62); /* Warna pink baru */
}
.btn-primary {
    display: inline-block;
    padding-left: 2rem; /* px-8 */
    padding-right: 2rem; /* px-8 */
    padding-top: 0.75rem; /* py-3 */
    padding-bottom: 0.75rem; /* py-3 */
    font-size: 1.125rem; /* text-lg */
    font-weight: 600; /* font-semibold */
    color: #fff;
    border-radius: 9999px; /* rounded-full */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    transition: all 0.3s ease-in-out;
    background: linear-gradient(to right, #d4217c, #a91a62); /* Warna pink baru */
}
.btn-primary:hover {
    transform: scale(1.05); /* scale-105 */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* shadow-xl */
    background: linear-gradient(to right, #a91a62, #d4217c); /* Warna pink baru */
}
.card {
    background-color: #1a1a1a; /* bg-gray-900 */
    padding: 1.5rem; /* p-6 */
    border-radius: 0.75rem; /* rounded-xl */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* shadow-lg */
    transition: all 0.3s ease-in-out;
}
.card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); /* hover:shadow-2xl */
}
/* Custom scrollbar for better aesthetics with black/pink theme */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    background: #d4217c; /* Warna pink baru */
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
    background: #a91a62; /* Warna pink baru */
}

/* Modal specific styles */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1000; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgba(0, 0, 0, 0.8); /* Black w/ opacity */
    display: flex; /* Use flexbox for centering */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
}

.modal-content {
    background-color: #1a1a1a; /* Dark background for modal content */
    margin: auto;
    padding: 30px;
    border-radius: 15px;
    width: 90%; /* Responsive width */
    max-width: 800px; /* Max width for larger screens */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    position: relative;
    animation: fadeIn 0.3s ease-out; /* Simple fade-in animation */
}

.close-button {
    color: #aaa;
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}

.close-button:hover,
.close-button:focus {
    color: #d4217c; /* Warna pink baru */
    text-decoration: none;
    cursor: pointer;
}

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

/* CSS for fade-in animation (for sections) */
.opacity-0 { opacity: 0; }
.transition-opacity { transition: opacity; }
.duration-1000 { transition-duration: 1000ms; }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.fade-in { opacity: 1 !important; }