/* Tailwind CSS Directives */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Custom Tailwind Layers */
@layer base {
    html {
        scroll-behavior: smooth;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    body {
        @apply bg-white text-gray-900 text-sm md:text-base;
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
        line-height: 1.6;
    }

    /* Headings — responsive: lebih kecil di mobile, normal di md+ */
    /* h1 default removed — gunakan utility class langsung di elemen */
    h2 { @apply text-xl md:text-3xl font-bold; }
    h3 { @apply text-lg md:text-2xl font-semibold; }
    h4 { @apply text-base md:text-xl font-semibold; }
    h5 { @apply text-sm md:text-lg font-semibold; }
    h6 { @apply text-xs md:text-base font-semibold; }

    /* Links */
    a {
        @apply transition-colors duration-300;
        &:focus {
            @apply outline-none ring-2 ring-yellow-400 ring-offset-2;
        }
    }

    /* Code blocks */
    code {
        @apply bg-gray-100 px-2 py-1 rounded text-sm font-mono;
    }

    pre {
        @apply bg-gray-900 text-gray-100 p-4 rounded-lg overflow-x-auto;
    }

    /* Focus states for accessibility */
    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
        @apply outline-none ring-2 ring-yellow-400 ring-offset-2;
    }
}

@layer components {
    /* Buttons */
    .btn-primary {
        @apply px-6 py-2.5 text-sm font-bold bg-gradient-to-r from-yellow-400 to-yellow-500 text-gray-900 rounded-lg transition-all duration-300 hover:shadow-lg hover:shadow-yellow-400/50 hover:scale-105 focus:outline-none focus:ring-2 focus:ring-yellow-400 focus:ring-offset-2;
    }

    .btn-primary:hover {
        @apply from-yellow-500 to-yellow-600;
    }

    .btn-secondary {
        @apply px-6 py-2.5 text-sm font-bold border-2 border-gray-300 text-gray-700 rounded-lg transition-all duration-300 hover:border-yellow-400 hover:text-yellow-600 hover:scale-105;
    }

    .btn-outline {
        @apply px-6 py-2.5 text-sm font-bold border-2 border-gray-200 text-gray-700 rounded-lg transition-all duration-300 hover:bg-gray-50 hover:border-gray-300;
    }

    /* Cards */
    .card {
        @apply bg-white rounded-lg border border-gray-100 shadow-sm transition-all duration-300 hover:shadow-lg hover:border-yellow-200;
    }

    .card-hover {
        @apply card hover:translate-y-[-4px];
    }

    /* Inputs */
    .input-primary {
        @apply w-full px-4 py-2.5 border-2 border-gray-200 rounded-lg text-sm font-medium placeholder-gray-400 transition-all duration-300 focus:outline-none focus:bg-white focus:border-yellow-400 focus:ring-2 focus:ring-yellow-400/30;
    }

    .input-primary:hover {
        @apply border-gray-300;
    }

    /* Badges */
    .badge {
        @apply inline-flex items-center gap-1 px-3 py-1 rounded-full text-xs font-semibold;
    }

    .badge-yellow {
        @apply badge bg-yellow-100 text-yellow-800;
    }

    .badge-red {
        @apply badge bg-red-100 text-red-800;
    }

    .badge-green {
        @apply badge bg-green-100 text-green-800;
    }

    /* Sections */
    .section {
        @apply py-16 px-4;
    }

    .section-lg {
        @apply py-20 px-4;
    }

    .container-max {
        @apply mx-auto max-w-[1400px];
    }

    /* Backgrounds */
    .bg-gradient-primary {
        @apply bg-gradient-to-r from-yellow-400 to-yellow-500;
    }

    .bg-gradient-secondary {
        @apply bg-gradient-to-r from-gray-50 to-gray-100;
    }

    /* Text utilities */
    .text-gradient {
        @apply bg-gradient-to-r from-yellow-400 to-yellow-600 bg-clip-text text-transparent;
    }

    .text-truncate-2-lines {
        @apply overflow-hidden text-ellipsis line-clamp-2;
    }

    /* Grid utilities */
    .grid-auto-fit {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 1.5rem;
    }

    .grid-auto-fill {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1rem;
    }

    /* Flexbox utilities */
    .flex-center {
        @apply flex items-center justify-center;
    }

    .flex-between {
        @apply flex items-center justify-between;
    }

    .flex-col-center {
        @apply flex flex-col items-center justify-center;
    }

    /* Dividers */
    .divider-y {
        @apply border-b border-gray-100;
    }

    .divider-x {
        @apply border-r border-gray-100;
    }

    /* Shadows */
    .shadow-sm-yellow {
        @apply shadow-sm hover:shadow-md hover:shadow-yellow-400/20 transition-shadow duration-300;
    }

    /* Animations */
    .animate-fade-in {
        @apply animate-in fade-in duration-500;
    }

    .animate-slide-in-top {
        @apply animate-in slide-in-from-top-2 duration-500;
    }

    .animate-slide-in-bottom {
        @apply animate-in slide-in-from-bottom-2 duration-500;
    }

    /* Transitions */
    .transition-smooth {
        @apply transition-all duration-300 ease-in-out;
    }

    /* Icons */
    .icon-sm {
        @apply w-4 h-4;
    }

    .icon-md {
        @apply w-5 h-5;
    }

    .icon-lg {
        @apply w-6 h-6;
    }

    .icon-xl {
        @apply w-8 h-8;
    }

    .icon-yellow {
        @apply text-yellow-500;
    }

    .icon-hover {
        @apply transition-all duration-300 hover:scale-110 hover:text-yellow-600;
    }
}

@layer utilities {
    /* Custom scroll bar */
    .scrollbar-thin::-webkit-scrollbar {
        @apply w-2 h-2;
    }

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

    .scrollbar-thin::-webkit-scrollbar-thumb {
        @apply bg-gray-300 rounded-full hover:bg-gray-400;
    }

    /* Glassmorphism */
    .glass {
        @apply bg-white/30 backdrop-blur-md border border-white/20;
    }

    .glass-dark {
        @apply bg-gray-900/30 backdrop-blur-md border border-gray-700/20;
    }

    /* Gradient text */
    .gradient-text-primary {
        background: linear-gradient(135deg, #FFD600, #FFA500);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* Aspect ratios */
    .aspect-video {
        @apply aspect-video;
    }

    .aspect-square {
        @apply aspect-square;
    }

    /* Truncation */
    .truncate-1 {
        @apply overflow-hidden text-ellipsis whitespace-nowrap;
    }

    .truncate-2 {
        @apply line-clamp-2;
    }

    .truncate-3 {
        @apply line-clamp-3;
    }

    /* Positioning */
    .inset-center {
        @apply top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
    }

    .inset-center-x {
        @apply left-1/2 -translate-x-1/2;
    }

    .inset-center-y {
        @apply top-1/2 -translate-y-1/2;
    }

    /* Border radius utilities */
    .rounded-xl-custom {
        @apply rounded-2xl;
    }

    /* Opacity transitions */
    .opacity-transition {
        @apply transition-opacity duration-300;
    }

    /* Hover lift effect */
    .hover-lift {
        @apply transition-all duration-300 hover:shadow-lg hover:-translate-y-1;
    }

    /* Text shadow */
    .text-shadow-sm {
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    }

    .text-shadow-md {
        text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    /* Box shadow with color */
    .shadow-yellow-soft {
        @apply shadow-lg shadow-yellow-400/20;
    }

    .shadow-gray-soft {
        @apply shadow-lg shadow-gray-400/10;
    }
}