/* General Body Styles */
html,
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    scroll-behavior: smooth;
    cursor: none;
    /* Hide default cursor */
    overflow-x: hidden;
    /* FIX: Prevent horizontal scrolling, especially on mobile */
}

/* Hide cursor for interactive elements */
a,
button,
.swap,
[role="button"],
input,
label,
.toggle,
.slider {
    cursor: none;
}

/* Animated Gradient Text */
.gemini-gradient-text {
    background: linear-gradient(90deg, #4285F4, #9B72CB, #D96570, #F2A60C, #4285F4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    background-size: 250% auto;
    animation: text-gradient-animation 10s linear infinite;
}

/* Keyframes for Animations */
@keyframes text-gradient-animation {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

/* Card Hover Effect */
.card-hover {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Section Fade-in Animation */
.section-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.section-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Gradient Cursor and Trail Styles */
.custom-cursor {
    position: fixed;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    pointer-events: none;
    transform: translate(-50%, -50%);
    transition: width 0.2s ease-out, height 0.2s ease-out;
    z-index: 10000;
    background: linear-gradient(90deg, #4285F4, #9B72CB, #D96570, #F2A60C, #4285F4);
    background-size: 250% auto;
    animation: text-gradient-animation 10s linear infinite;
}

.custom-cursor.grow {
    width: 40px;
    height: 40px;
    background-color: rgba(155, 114, 203, 0.3);
    animation: none;
    /* Stop gradient animation on hover */
    background-image: none;
}

#cursor-trail {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

.trail {
    position: absolute;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(66, 133, 244, 0.4) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    opacity: 1;
}

/* Custom Theme Toggle Switch */
.theme-toggle-label {
    position: relative;
    display: inline-block;
    width: 64px;
    height: 34px;
}

.theme-toggle-label .theme-controller {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #3D3D3D;
    /* Dark mode track */
    transition: .4s;
    border-radius: 34px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 26px;
    width: 26px;
    left: 4px;
    bottom: 4px;
    background-color: #505050;
    /* Dark mode thumb */
    transition: .4s;
    border-radius: 50%;
    /* Moon Icon for Dark mode (unchecked) */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23D0D0D0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
}

.theme-controller:checked+.slider {
    background-color: #E0E0E0;
    /* Light mode track */
}

.theme-controller:checked+.slider:before {
    transform: translateX(30px);
    background-color: #FFFFFF;
    /* Light mode thumb */
    /* Sun Icon for Light mode (checked) - FIXED SVG */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23404040' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3ccircle cx='12' cy='12' r='4'/%3e%3cpath d='M12 2v2'/%3e%3cpath d='M12 20v2'/%3e%3cpath d='m4.93 4.93 1.41 1.41'/%3e%3cpath d='m17.66 17.66 1.41 1.41'/%3e%3cpath d='M2 12h2'/%3e%3cpath d='M20 12h2'/%3e%3cpath d='m6.34 17.66-1.41 1.41'/%3e%3cpath d='m19.07 4.93-1.41 1.41'/%3e%3c/svg%3e");
}

/* Swiper Carousel Styles */
.swiper-container {
    width: 100%;
    padding-top: 50px;
    padding-bottom: 50px;
}

.swiper-slide {
    background-position: center;
    background-size: cover;
}

.swiper-slide .card {
    min-height: 425px;
    /* Disesuaikan dari 450px */
    /* Ensure cards have a consistent height */
}

/* Custom Swiper Navigation Styles */
.swiper-button-next,
.swiper-button-prev {
    color: hsl(var(--p)) !important;
    transition: transform 0.2s ease;
}

/* Inner Dashboard Swiper Styles */
.dashboard-swiper-container {
    width: 100%;
    height: 200px;
    /* Diubah dari 225px untuk bentuk yang lebih persegi panjang */
    border-radius: 0.75rem;
    /* rounded-xl */
}

.dashboard-swiper-container .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    transform: scale(1.2);
}

.swiper-button-next::after,
.swiper-button-prev::after {
    font-size: 28px !important;
    font-weight: 900;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

/* Modal styles */
.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

.modal-backdrop.active {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    background-color: var(--b1);
    color: var(--bc);
    border-radius: 1rem;
    max-width: 90vw;
    lg: max-width: 70vw;
    xl: max-width: 60rem;
    /* Increased max-width for larger screens */
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: scale(0.95);
    transition: transform 0.3s ease-in-out;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.modal-backdrop.active .modal-content {
    transform: scale(1);
}

/* -- PERBAIKAN: Animasi fade-in untuk konten modal -- */
.modal-backdrop.active .modal-content>* {
    animation: fadeIn 0.4s 0.2s ease-out backwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


.modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    cursor: none;
    z-index: 20;
    /* Ensure it's above other content */
}

/* New style for blurring background */
#page-content.blur-active {
    filter: blur(12px);
    transition: filter 0.3s ease-out;
}

/* --- PERBAIKAN: Konsistensi warna biru di dark mode --- */
[data-theme="dark"] .text-blue-600 {
    color: #60a5fa;
    /* Tailwind's blue-400 for better contrast */
}

[data-theme="dark"] .hover\:text-blue-600:hover {
    color: #93c5fd;
    /* Tailwind's blue-300 for hover */
}

[data-theme="dark"] .bg-blue-600 {
    background-color: #60a5fa;
}

[data-theme="dark"] .text-blue-700 {
    color: #93c5fd;
}