/* ============================================================
   SAC-Shortlink — Public Pages Stylesheet
   Premium corporate editorial / modern Gen-Z campaign style
   Corporate Colors:
   --primary   : #006885 (biru tua)
   --secondary : #00AAAD (teal)
   --accent    : #F15A22 (oranye kemerahan)
   --accent-2  : #F99D1F (oranye kuning)
   ============================================================ */

:root {
    --primary: #006885;
    --secondary: #00AAAD;
    --accent: #F15A22;
    --accent-2: #F99D1F;
    --bg: #f4f9fa;
    --text: #16262c;
    --text-muted: #6b8087;
    --white: #ffffff;
    --radius: 22px;
    --shadow: 0 20px 60px rgba(0, 104, 133, 0.14);
    --transition: all .25s cubic-bezier(.4,0,.2,1);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Inter', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    background:
        radial-gradient(circle at 10% 8%, rgba(0,170,173,.14) 0%, transparent 42%),
        radial-gradient(circle at 92% 18%, rgba(249,157,31,.14) 0%, transparent 40%),
        radial-gradient(circle at 15% 92%, rgba(241,90,34,.08) 0%, transparent 35%),
        linear-gradient(180deg, #f2f9fb 0%, #e7f3f5 55%, #eef8f6 100%);
    color: var(--text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow-x: hidden;
}

h1, h2, h3 { font-family: 'Outfit', 'Inter', sans-serif; letter-spacing: -.01em; }

a { text-decoration: none; }

/* subtle doodle scribbles / stars scattered across the page */
body::before, body::after {
    content: "";
    position: fixed;
    pointer-events: none;
    background-repeat: no-repeat;
}
body::before {
    top: 8%; left: 6%;
    width: 90px; height: 90px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cpath d='M45 4 L52 34 L82 41 L52 48 L45 78 L38 48 L8 41 L38 34 Z' fill='%23F99D1F' opacity='0.25'/%3E%3C/svg%3E");
}
body::after {
    bottom: 10%; right: 7%;
    width: 130px; height: 60px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='60' viewBox='0 0 130 60'%3E%3Cpath d='M2 50 Q 30 10 50 40 T 128 12' stroke='%2300AAAD' stroke-width='3' fill='none' opacity='0.3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.public-header {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 26px 32px;
    position: relative;
    z-index: 1;
}

.public-header .logo {
    font-weight: 800;
    font-size: 1.35rem;
    color: var(--primary);
    letter-spacing: -.01em;
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Outfit', sans-serif;
}

.public-header .logo img { height: 36px; }
.public-header .logo .logo-mark {
    width: 38px; height: 38px;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: .95rem;
    flex-shrink: 0;
}
.public-header .logo span.hi { color: var(--accent); }

.public-main {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    position: relative;
    z-index: 1;
}

.card {
    background: var(--white);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 46px 40px;
    width: 100%;
    max-width: 440px;
    text-align: center;
    animation: fadeUp .5s ease;
    position: relative;
}

@keyframes fadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.card .icon-circle {
    width: 78px;
    height: 78px;
    border-radius: 24px;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 22px;
    color: #fff;
    font-size: 30px;
}
.card .icon-circle img { width: 100%; height: 100%; object-fit: contain; border-radius: 24px; }

.card h1 {
    font-size: 1.5rem;
    margin: 0 0 10px;
    color: var(--primary);
    font-weight: 800;
}

.card p {
    color: var(--text-muted);
    font-size: .96rem;
    line-height: 1.6;
    margin-bottom: 26px;
}

.form-group { text-align: left; margin-bottom: 18px; }

.form-group label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text);
}

.form-control {
    width: 100%;
    padding: 13px 15px;
    border: 1.5px solid #dfe7e9;
    border-radius: 12px;
    font-size: .95rem;
    font-family: inherit;
    transition: var(--transition);
    background: #fbfdfd;
}

.form-control:focus {
    outline: none;
    border-color: var(--secondary);
    box-shadow: 0 0 0 3px rgba(0, 170, 173, .15);
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 14px 20px;
    border-radius: 12px;
    border: none;
    font-size: .95rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #fff;
    transition: var(--transition);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(0, 104, 133, .3);
}

.btn.btn-accent {
    background: linear-gradient(135deg, var(--accent), var(--accent-2));
}

.alert {
    padding: 13px 16px;
    border-radius: 12px;
    font-size: .88rem;
    margin-bottom: 18px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 10px;
}

.alert-error { background: #fdecea; color: #c0392b; border: 1px solid #f5c2be; }
.alert-success { background: #e9f9f3; color: #1c7a52; border: 1px solid #b9ecd7; }

.public-footer {
    text-align: center;
    padding: 20px;
    font-size: .8rem;
    color: var(--text-muted);
    position: relative;
    z-index: 1;
}

@media (max-width: 480px) {
    .card { padding: 34px 26px; }
    .public-header { padding: 20px 20px; }
    body::before, body::after { display: none; }
}