@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
    font-family: 'Inter', sans-serif;
    scroll-behavior: smooth;
    background: #f9fafb;
    color: #111827;
    line-height: 1.6;
}

/* ===== Hero Section ===== */
.hero-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
        135deg,
        rgba(102, 126, 234, 0.65),
        rgba(118, 75, 162, 0.55)
    ),
    url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1920&q=80');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: white;
    z-index: 10;
}

.hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 25% 30%, rgba(255,255,255,0.18), transparent 70%),
                radial-gradient(circle at 75% 70%, rgba(0,0,0,0.25), transparent 70%);
    z-index: 1;
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 10;
    text-align: left; /* ubah kalau mau lebih elegan */
    animation: fadeInUp 1.2s ease forwards;
}

/* Tambahan animasi untuk hero */
.hero-section h1 {
    background: linear-gradient(90deg, #a78bfa, #60a5fa, #34d399);
    background-size: 200% 200%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientFlow 6s ease infinite;
}

.hero-section p {
    color: #e0e7ff;
    max-width: 600px;
    animation: fadeIn 2s ease forwards;
}

.hero-section a {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.hero-section a:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 12px 25px rgba(0,0,0,0.25);
}

/* ===== Service Card ===== */
.service-card {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(16px);
    border-radius: 20px;
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.service-card:hover {
    transform: translateY(-14px) scale(1.05);
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.45);
}

/* ===== Gradient Text ===== */
.gradient-text {
    background: linear-gradient(270deg, #667eea, #764ba2, #ff758c, #667eea);
    background-size: 300% 300%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientMove 8s ease infinite;
}

/* ===== Floating Animation ===== */
.floating-animation {
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-18px) scale(1.03); }
}

/* ===== Code Element Style ===== */
.code-element {
    font-family: 'Courier New', monospace;
    background: rgba(255, 255, 255, 0.08);
    padding: 0.9rem 1.3rem;
    border-radius: 12px;
    border-left: 4px solid #667eea;
    transition: all 0.3s ease;
    font-size: 0.95rem;
}

.code-element:hover {
    background: rgba(255, 255, 255, 0.18);
    transform: scale(1.04);
}

/* ===== Tech Stack Icon ===== */
.tech-stack-icon {
    transition: transform 0.4s ease, filter 0.4s ease;
    cursor: pointer;
}

.tech-stack-icon:hover {
    transform: scale(1.3) rotate(8deg);
    filter: drop-shadow(0 0 14px rgba(102, 126, 234, 0.75));
}

/* ===== Animations ===== */
@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes gradientMove {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
/* === Dark Mode Iconpicker === */

/* Popover container */
body .iconpicker-popover.popover {
    background-color: #1f2937 !important;  /* bg-gray-800 */
    border: 1px solid #374151 !important;  /* border-gray-700 */
    box-shadow: 0 4px 12px rgba(0,0,0,0.6) !important;
}

/* Arrow (segitiga) */
body .iconpicker-popover.popover.bottom > .arrow {
    border-top-color: #1f2937 !important;
}
body .iconpicker-popover.popover.top > .arrow {
    border-bottom-color: #1f2937 !important;
}

/* Isi konten popover */
body .iconpicker-popover.popover .popover-content {
    background-color: #1f2937 !important;  /* bg-gray-800 */
    color: #f9fafb !important;             /* text-gray-50 */
}

/* Item grid icon */
body .iconpicker-popover.popover .iconpicker-item {
    color: #000 !important;             /* text-gray-200 */
    background: transparent !important;
    border-radius: 0.375rem !important;    /* rounded-md */
    transition: background 0.2s, color 0.2s;
}

/* Hover effect */
body .iconpicker-popover.popover .iconpicker-item:hover {
    background: #374151 !important;        /* bg-gray-700 */
    color: #ffffff !important;             /* text-white */
}

/* Selected state (pakai outline biar tidak merusak grid) */
body .iconpicker-popover.popover .iconpicker-item.iconpicker-selected {
    background: #111827 !important;        /* bg-gray-900 */
    color: #fff !important;             /* text-indigo-400 */
    /* outline: 2px solid #2563eb !important; indigo border */
    outline-offset: -2px;                  /* rapat ke item */
}

/* Area preview */
.iconpicker .iconpicker-selected-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    margin-bottom: 6px;
    background: #1f2937;                   /* bg-gray-800 */
    border: 1px solid #374151;             /* border-gray-700 */
    border-radius: 0.375rem;               /* rounded-md */
    color: #fff;                        /* text-indigo-400 */
    font-size: 20px;
}