:root {
    --gs-bg: #edf8ff;
    --gs-surface: #ffffff;
    --gs-surface-soft: #f7fcff;
    --gs-border: rgba(67, 137, 185, 0.16);
    --gs-text: #24384a;
    --gs-muted: #6d8293;
    --gs-primary: #3d95c9;
    --gs-primary-soft: #e4f5ff;
    --gs-blue: #74b7ea;
    --gs-shadow: 0 18px 45px rgba(73, 145, 193, 0.16);
    --gs-shadow-soft: 0 10px 28px rgba(73, 145, 193, 0.11);
    --gs-radius: 24px;
    --gs-radius-sm: 16px;
}

html {
    scroll-behavior: smooth;
}

body {
    background:
        radial-gradient(circle at 14% 8%, rgba(255, 255, 255, 0.92), transparent 16rem),
        radial-gradient(circle at 78% 2%, rgba(174, 219, 250, 0.55), transparent 26rem),
        linear-gradient(180deg, #f7fcff 0%, #e8f6ff 48%, var(--gs-bg) 100%) !important;
    color: var(--gs-text);
    font-family: Arial, sans-serif;
}

.container,
.main {
    color: var(--gs-text);
}

.card,
.register-card,
.login-card,
.card-login,
.card-register,
.card-custom,
.edit-card {
    border: 1px solid var(--gs-border) !important;
    border-radius: var(--gs-radius) !important;
    background: rgba(255, 255, 255, 0.88) !important;
    box-shadow: var(--gs-shadow-soft) !important;
    backdrop-filter: blur(10px);
}

.card {
    overflow: hidden;
}

.card:hover,
.card-custom:hover,
.card-gunung:hover {
    transform: translateY(-3px);
    box-shadow: var(--gs-shadow) !important;
}

.card,
.btn,
.form-control,
.form-select,
.alert,
.badge,
.table,
.sidebar,
.navbar {
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.card-body {
    color: var(--gs-text);
}

.card-footer {
    background: rgba(255, 255, 255, 0.88) !important;
}

.btn {
    border: 0 !important;
    border-radius: 999px !important;
    padding: 0.65rem 1.15rem;
    font-weight: 700;
    box-shadow: 0 10px 22px rgba(73, 145, 193, 0.16);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px rgba(73, 145, 193, 0.22);
}

.btn-primary,
.bg-primary {
    background-color: #66afe4 !important;
}

.btn-success,
.bg-success {
    background-color: var(--gs-primary) !important;
}

.btn-secondary,
.btn-dark {
    background-color: #4c5f53 !important;
}

.btn-danger,
.bg-danger {
    background-color: #d35d5d !important;
}

.btn-light {
    background-color: #ffffff !important;
    color: var(--gs-text) !important;
}

.form-control,
.form-select {
    border: 1px solid var(--gs-border) !important;
    border-radius: var(--gs-radius-sm) !important;
    background-color: rgba(255, 255, 255, 0.92) !important;
    color: var(--gs-text) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
}

.form-control:focus,
.form-select:focus {
    border-color: rgba(61, 149, 201, 0.46) !important;
    box-shadow: 0 0 0 0.22rem rgba(116, 183, 234, 0.22) !important;
}

.form-label,
label {
    color: #37566d;
}

.alert {
    border: 1px solid var(--gs-border) !important;
    border-radius: var(--gs-radius-sm) !important;
    box-shadow: 0 10px 22px rgba(37, 74, 54, 0.07);
}

.alert-info {
    background-color: #e8f7ff !important;
    color: #315c78 !important;
}

.alert-success {
    background-color: #e7f7ff !important;
    color: #28637f !important;
}

.alert-danger {
    background-color: #fff0f0 !important;
    color: #8a3b3b !important;
}

.alert-warning {
    background-color: #fff8e6 !important;
    color: #77602d !important;
}

.badge {
    border-radius: 999px;
    padding: 0.45em 0.72em;
}

.navbar {
    border-bottom: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 10px 26px rgba(73, 145, 193, 0.16);
}

.sidebar {
    border-right: 1px solid var(--gs-border);
    background: rgba(255, 255, 255, 0.76) !important;
    box-shadow: 12px 0 34px rgba(73, 145, 193, 0.13) !important;
    backdrop-filter: blur(12px);
}

.sidebar a {
    background: var(--gs-primary-soft) !important;
    color: var(--gs-primary) !important;
}

.sidebar a:hover {
    background: var(--gs-primary) !important;
    color: #ffffff !important;
}

.hero {
    border-bottom-left-radius: 36px;
    overflow: hidden;
}

.hero-text h1,
h1,
h2,
h3,
h4,
h5 {
    letter-spacing: 0;
}

.section {
    border-radius: 34px;
}

.mountain-img,
.product-img,
.gambar-gunung,
.card-img-top,
.img-fluid {
    border-radius: 20px;
}

.card .mountain-img,
.card .product-img,
.card .gambar-gunung,
.card > .card-img-top {
    border-radius: 0;
}

.table {
    border-color: var(--gs-border) !important;
    overflow: hidden;
    border-radius: var(--gs-radius-sm);
}

.table th {
    background-color: #e7f6ff !important;
    color: #315b75;
}

.table td,
.table th {
    border-color: var(--gs-border) !important;
    vertical-align: middle;
}

hr {
    border-color: var(--gs-border);
    opacity: 1;
}

a {
    color: #2f7aa8;
}

a:hover {
    color: #235e82;
}

@media (max-width: 768px) {
    .hero {
        min-height: 78vh;
        height: auto !important;
        padding: 5rem 1.25rem;
        border-bottom-left-radius: 26px;
    }

    .hero-text {
        padding-left: 0 !important;
    }

    .hero-text h1 {
        font-size: 3rem !important;
    }

    .section {
        padding: 3rem 1rem !important;
    }

    .sidebar {
        width: 74px !important;
    }

    .main {
        margin-left: 74px !important;
    }
}