/* ============================================================
   RECRUITMENT RSIA MAHATI
   MODERN MAHATI THEME
   ============================================================ */

:root {
    --mahati-blue: #1f5dbd;
    --mahati-blue-dark: #174a98;
    --mahati-teal: #16839a;
    --mahati-teal-dark: #106f82;

    --mahati-navy: #172033;
    --mahati-text: #334155;
    --mahati-muted: #64748b;

    --mahati-peach: #f7cfc7;
    --mahati-pink: #fbe3df;
    --mahati-soft-blue: #edf5ff;
    --mahati-bg: #f8fbff;

    --mahati-border: #e2e8f0;
    --mahati-shadow: 0 12px 35px rgba(31, 93, 189, .08);
}

/* ============================================================
   GLOBAL
   ============================================================ */

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family:
        "Poppins",
        "Nunito",
        "Inter",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    color: var(--mahati-navy);
    background: var(--mahati-bg);
}

/* ============================================================
   TOP BAR
   ============================================================ */

header .top-bar,
.top-bar,
.top-header,
.header-top {
    background: var(--mahati-pink) !important;
}

.top-bar,
.top-header,
.header-top {
    min-height: 54px !important;
    height: 54px !important;
    padding: 0 6% !important;

    display: flex !important;
    align-items: center !important;
}

/* ============================================================
   MAIN HEADER
   ============================================================ */

header {
    background: #fff;
}

header nav {
    background: #fff !important;
}

.navbar,
.main-header,
.site-header,
.header-main {
    min-height: 112px !important;
    background: #fff !important;

    display: flex;
    align-items: center;
}

.navbar-container,
.header-container,
.container {
    max-width: 1500px;
}

/* ============================================================
   LOGO
   ============================================================ */

header img,
.navbar-brand img,
.logo img,
.brand img {
    max-height: 64px;
    width: auto;
}

.navbar-brand,
.logo,
.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ============================================================
   NAVIGATION
   ============================================================ */

nav a,
.navbar a {
    color: var(--mahati-navy) !important;
    font-weight: 600 !important;
    text-decoration: none !important;

    transition:
        color .2s ease,
        transform .2s ease;
}

nav a:hover,
.navbar a:hover {
    color: var(--mahati-teal) !important;
}

nav ul,
.navbar-nav {
    gap: 28px !important;
    align-items: center;
}

/* ============================================================
   LOGIN BUTTON
   ============================================================ */

a[href*="login"],
button.login,
.btn-login {
    border-radius: 20px !important;
    border: 1.5px solid var(--mahati-teal) !important;

    color: var(--mahati-teal) !important;
    background: #fff !important;

    font-weight: 700 !important;

    padding: 16px 34px !important;

    transition:
        all .25s ease;
}

a[href*="login"]:hover,
button.login:hover,
.btn-login:hover {
    color: #fff !important;
    background: var(--mahati-teal) !important;
    transform: translateY(-2px);
}

/* ============================================================
   REGISTER / DAFTAR PELAMAR
   ============================================================ */

a[href*="register"],
a[href*="daftar"],
.btn-register,
.btn-primary {
    border-radius: 20px !important;

    background: var(--mahati-teal) !important;
    border-color: var(--mahati-teal) !important;

    color: #fff !important;

    font-weight: 700 !important;

    box-shadow:
        0 10px 25px rgba(22, 131, 154, .18);

    transition:
        all .25s ease;
}

a[href*="register"]:hover,
a[href*="daftar"]:hover,
.btn-register:hover,
.btn-primary:hover {
    background: var(--mahati-teal-dark) !important;
    transform: translateY(-2px);
}

/* ============================================================
   HERO
   ============================================================ */

.hero,
.hero-section,
.home-hero,
.landing-hero {
    position: relative;

    min-height: 650px;

    padding:
        85px
        6%
        100px !important;

    background:
        linear-gradient(
            135deg,
            #f8fbff 0%,
            #ffffff 60%,
            #f5fbfd 100%
        ) !important;

    overflow: hidden;
}

/* dekorasi peach */

.hero::before,
.hero-section::before,
.home-hero::before,
.landing-hero::before {
    content: "";

    position: absolute;

    width: 330px;
    height: 650px;

    left: -170px;
    top: 20px;

    background: rgba(247, 207, 199, .42);

    border-radius: 0 180px 180px 0;

    transform: rotate(15deg);

    pointer-events: none;
}

/* ============================================================
   HERO CONTENT
   ============================================================ */

.hero h1,
.hero-section h1,
.home-hero h1,
.landing-hero h1 {
    position: relative;
    z-index: 2;

    color: var(--mahati-navy);

    font-size: clamp(56px, 5.2vw, 84px) !important;

    line-height: 1.08 !important;

    font-weight: 800 !important;

    letter-spacing: -2px;

    margin-bottom: 25px !important;
}

.hero h1 span,
.hero-section h1 span,
.home-hero h1 span,
.landing-hero h1 span {
    color: var(--mahati-blue);
}

/* ============================================================
   HERO PARAGRAPH
   ============================================================ */

.hero p,
.hero-section p,
.home-hero p,
.landing-hero p {
    color: #58708e;

    font-size: 20px;

    line-height: 1.8;

    max-width: 760px;
}

/* ============================================================
   HERO BADGE
   ============================================================ */

.hero .badge,
.hero-section .badge,
.hero-label,
.hero-badge {
    display: inline-flex;

    align-items: center;

    padding: 12px 25px;

    border-radius: 40px;

    background: #e7f1ff !important;

    color: var(--mahati-blue) !important;

    font-weight: 700;

    letter-spacing: .2px;
}

/* ============================================================
   CARD
   ============================================================ */

.card,
.form-card,
.login-card,
.register-card {
    border: 1px solid var(--mahati-border) !important;

    border-radius: 24px !important;

    background: rgba(255,255,255,.96) !important;

    box-shadow: var(--mahati-shadow) !important;
}

/* ============================================================
   INPUT
   ============================================================ */

input,
select,
textarea {
    border: 1px solid #d8e1eb !important;

    border-radius: 14px !important;

    min-height: 52px;

    background: #fff !important;

    color: var(--mahati-navy) !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--mahati-teal) !important;

    box-shadow:
        0 0 0 4px rgba(22,131,154,.10) !important;

    outline: none !important;
}

/* ============================================================
   BUTTON
   ============================================================ */

button,
.btn {
    border-radius: 15px !important;
    font-weight: 700 !important;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 1200px) {

    nav ul,
    .navbar-nav {
        gap: 18px !important;
    }

    .hero,
    .hero-section,
    .home-hero,
    .landing-hero {
        padding-left: 5% !important;
        padding-right: 5% !important;
    }
}

@media (max-width: 900px) {

    .navbar,
    .main-header,
    .header-main {
        min-height: 90px !important;
    }

    .hero,
    .hero-section,
    .home-hero,
    .landing-hero {
        min-height: auto;

        padding:
            60px 25px 70px !important;
    }

    .hero h1,
    .hero-section h1,
    .home-hero h1,
    .landing-hero h1 {
        font-size: 54px !important;
    }

    nav ul,
    .navbar-nav {
        gap: 10px !important;
    }
}

@media (max-width: 600px) {

    .top-bar,
    .top-header,
    .header-top {
        height: auto !important;
        min-height: 42px !important;

        padding: 8px 15px !important;
    }

    .hero h1,
    .hero-section h1,
    .home-hero h1,
    .landing-hero h1 {
        font-size: 43px !important;
        letter-spacing: -1px;
    }

    .hero p,
    .hero-section p,
    .home-hero p,
    .landing-hero p {
        font-size: 17px;
    }
}