/* Base Settings */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc;
    /* Slate 50 */
    color: #1e293b;
    /* Slate 800 */
    overflow-x: hidden;
}

h1,
h2,
h3,
.heading-font {
    font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Color Utilities */
.text-telkom-red {
    color: #ee2e24;
}

.bg-telkom-red {
    background-color: #ee2e24;
}

/* Component: Clean Card */
.clean-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

.clean-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.025);
    border-color: #cbd5e1;
}

/* Component: Gradient Text */
.gradient-text-red {
    background: linear-gradient(135deg, #cc0000 0%, #ff4d4d 100%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Component: Custom Select Input */
.select-custom {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.5rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    appearance: none;
}

/* Component: Premium Result Panel Gradient */
/* Top: #131f36, Bottom-Left: #7e7d9f, Bottom-Right: #6b84ad */
.panel-premium-gradient {
    background: linear-gradient(to bottom, #131f36 30%, transparent 100%),
        linear-gradient(to right, #7e7d9f 0%, #6b84ad 100%);
}

/* Component: Glow Effects */
.glow-decoration {
    background-color: #dc2626;
    /* red-600 */
    filter: blur(60px);
    opacity: 0.2;
}


.bar-glow-effect {
    box-shadow: 0 0 10px rgba(239, 68, 68, 0.5);
}