/* PALET WARNA TEMA CERAH */
:root {
    --bg: #F4F6F8;
    --panel: #FFFFFF;
    --panel-soft: #F9FAFB;
    --border: rgba(0,0,0,0.08);
    --border-strong: rgba(217, 119, 6, 0.4);
    --gold: #D97706;
    --gold-soft: rgba(217, 119, 6, 0.12);
    --teal: #0D9488;
    --text: #111827;
    --text-muted: #4B5563;
    --text-faint: #9CA3AF;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text);
    background-color: var(--bg);
    background-image: radial-gradient(rgba(0,0,0,0.06) 1px, transparent 1px);
    background-size: 22px 22px;
    min-height: 100vh;
    overflow-x: hidden;
}

#cursor-blob {
    position: fixed;
    top: 0; left: 0;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(217,119,6,0.15) 0%, rgba(13,148,136,0.15) 50%, transparent 70%);
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: -1;
    filter: blur(50px);
    transition: opacity 0.3s ease;
}

.font-display { font-family: 'Space Grotesk', sans-serif; }
.font-mono { font-family: 'JetBrains Mono', monospace; }

.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.05);
}

.blink { animation: blink 2s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

@keyframes gradientMove { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

.app-card {
    background: var(--panel);
    border: 1px solid var(--border);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    transition: transform 0.2s ease-out, border-color 0.3s ease, box-shadow 0.3s ease;
    animation: rise 0.5s ease both;
    transform-style: preserve-3d;
    position: relative;
    z-index: 1;
    text-align: center; /* Membuat isi card rata tengah */
}

.app-card:hover {
    border-color: var(--border-strong);
    box-shadow: 0 20px 40px -15px rgba(217, 119, 6, 0.25);
    z-index: 10;
}

.app-card .icon-frame { 
    transition: background .3s ease, border-color .3s ease, transform .3s ease; 
    margin-left: auto;
    margin-right: auto; /* Posisikan ikon di tengah */
}

.app-card:hover .icon-frame { background: var(--gold-soft); border-color: var(--gold); transform: scale(1.1) translateZ(10px); }

.app-card .go-arrow { opacity: 0; transform: translateX(-8px); transition: opacity .3s ease, transform .3s ease; }
.app-card:hover .go-arrow { opacity: 1; transform: translateX(0) translateZ(5px); }

/* Bagian footer card dikembalikan agar rata kiri-kanan */
.app-card .mt-auto {
    text-align: left;
}

.app-card:nth-child(1){ animation-delay: .05s; }
.app-card:nth-child(2){ animation-delay: .10s; }
.app-card:nth-child(3){ animation-delay: .15s; }
.app-card:nth-child(4){ animation-delay: .20s; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

.status-dot { position: relative; }
.status-dot::after {
    content: ''; position: absolute; inset: -4px; border-radius: 999px;
    background: var(--teal); opacity: .35; animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { transform: scale(1); opacity: .35; } 50% { transform: scale(1.7); opacity: 0; } }

input:focus-visible, a:focus-visible, button:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
}
#search-input { background-color: var(--panel); }
#search-input:focus {
    outline: 2px solid var(--gold);
    outline-offset: 0px;
    box-shadow: 0 0 0 4px var(--gold-soft);
}

::selection { background: var(--gold-soft); color: var(--gold); }
::placeholder { color: var(--text-faint); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}