/* Halaman login Si-AMIKU (auth/login.blade.php + auth/_tentang.blade.php): kartu dua panel, panel merek (>= lg) + panel form.
 * Dimuat hanya di halaman login (layout auth dipakai bersama). Warna mengikuti --bs-primary tema. */

/* ===== Latar halaman: lapisan gelap tipis di atas gambar supaya kartu menonjol ===== */
body.authentication-bg::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(48rem 32rem at 12% 8%, rgba(255, 255, 255, .16), transparent 65%),
        linear-gradient(160deg, rgba(37, 44, 140, .55), rgba(12, 16, 64, .8));
}
body.authentication-bg .home-center { position: relative; z-index: 1; }

/* ===== Kartu ===== */
.login-card { overflow: hidden; border: 0; border-radius: 1.1rem; box-shadow: 0 1.25rem 3.5rem rgba(8, 12, 48, .35); }
@media (prefers-reduced-motion: no-preference) {
    .login-card { animation: login-masuk .5s cubic-bezier(.2, .7, .2, 1) both; }
    @keyframes login-masuk { from { opacity: 0; transform: translateY(.9rem); } }
}

/* ===== Panel merek ===== */
.login-brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    padding: 1.5rem 1.75rem;
    color: #fff;
    background: #3b4fb8;
    background: linear-gradient(150deg, var(--bs-primary, #525ce5) 0%, color-mix(in srgb, var(--bs-primary, #525ce5) 55%, #000) 100%);
    overflow: hidden;
}
.login-brand::before,
.login-brand::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    pointer-events: none;
}
.login-brand::before { width: 18rem; height: 18rem; top: -7rem; right: -7rem; }
.login-brand::after { width: 12rem; height: 12rem; bottom: -5rem; left: -4rem; }
.login-brand > * { position: relative; z-index: 1; }
.login-logo {
    display: inline-flex;
    align-self: flex-start;
    padding: .4rem .65rem;
    margin-bottom: .9rem;
    border-radius: .75rem;
    background: #fff;
    box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .18);
}
.login-logo img { width: 5.25rem; height: auto; }
.login-brand h4 { color: #fff; font-weight: 700; letter-spacing: .02em; }
.login-brand p { color: rgba(255, 255, 255, .85); }
.login-brand-garis { width: 2.5rem; height: 3px; margin: .75rem 0 0; border: 0; border-radius: 2px; background: rgba(255, 255, 255, .55); opacity: 1; }

/* ===== Panel form ===== */
.login-form-pane { display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 2rem 2.25rem; background: #fff; }
.login-judul { display: flex; align-items: center; gap: .85rem; margin-bottom: 1.5rem; }
.login-judul-ikon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .85rem;
    font-size: 1.5rem;
}
.login-judul h4 { margin-bottom: .1rem; font-weight: 700; }
.login-judul p { margin-bottom: 0; font-size: .85rem; }

.login-label { display: flex; align-items: center; margin-bottom: .35rem; font-weight: 600; font-size: .85rem; }
.login-form-pane .input-group-text { background: var(--bs-tertiary-bg, #f4f5f8); color: var(--bs-secondary-color, #6c757d); transition: border-color .15s, color .15s; }
.login-form-pane .form-control { min-height: 2.75rem; }
.login-form-pane .input-group { border-radius: .4rem; transition: box-shadow .15s; }
.login-form-pane .input-group:focus-within { box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--bs-primary, #525ce5) 20%, transparent); }
.login-form-pane .input-group:focus-within .input-group-text,
.login-form-pane .input-group:focus-within .form-control,
.login-form-pane .input-group:focus-within .btn { border-color: var(--bs-primary, #525ce5); }
.login-form-pane .input-group:focus-within .input-group-text { color: var(--bs-primary, #525ce5); }
.login-form-pane .form-control:focus { box-shadow: none; }

.login-caps { display: flex; align-items: center; gap: .35rem; margin-top: .4rem; font-size: .78rem; color: #b27a12; }
.login-caps[hidden] { display: none; }

.login-form-pane .btn-primary {
    min-height: 2.9rem;
    font-weight: 600;
    border: 0;
    background: linear-gradient(135deg, var(--bs-primary, #525ce5), color-mix(in srgb, var(--bs-primary, #525ce5) 70%, #000));
    box-shadow: 0 .4rem 1rem color-mix(in srgb, var(--bs-primary, #525ce5) 35%, transparent);
    transition: transform .15s, box-shadow .15s, filter .15s;
}
.login-form-pane .btn-primary:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 .55rem 1.25rem color-mix(in srgb, var(--bs-primary, #525ce5) 40%, transparent); }
.login-form-pane .btn-primary:active:not(:disabled) { transform: translateY(0); }
.login-form-pane .btn-primary:disabled { opacity: .8; }

.login-bantuan { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .35rem .75rem; margin-top: 1.25rem; font-size: .8rem; color: var(--bs-secondary-color, #74788d); }
.login-tautan-tentang { display: inline-flex; align-items: center; gap: .25rem; font-size: .85rem; text-decoration: none; }

.login-footer { margin-top: 1rem; text-align: center; color: #fff; }
.login-footer a { color: #fff; font-weight: 600; text-decoration: underline; }

@media (max-width: 575.98px) {
    .login-form-pane { padding: 1.75rem 1.25rem; }
    .login-judul { margin-bottom: 1.25rem; }
}

/* ===== Penjelasan Si-AMIKU (auth/_tentang): ringkas, di panel kiri (>= lg) atau di modal (layar sempit) ===== */
.tentang { font-size: .78rem; }
.tentang-lead { margin-bottom: .65rem; }
.tentang-judul { margin: .7rem 0 .3rem; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.tentang-angka-baris { display: grid; grid-template-columns: repeat(2, 1fr); gap: .4rem; }
.tentang-angka-baris > div { padding: .45rem .5rem; border-radius: .5rem; text-align: center; line-height: 1.15; }
.tentang-angka-baris strong { display: block; font-size: 1.05rem; }
.tentang-angka-baris span { font-size: .62rem; }
.tentang-baris { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; }
.tentang-baris > .mdi { margin: 0 -.1rem; font-size: .85rem; opacity: .6; }
.tentang-item { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .5rem; border: 0; border-radius: 1rem; font: inherit; font-size: .7rem; font-weight: 600; color: inherit; cursor: pointer; transition: background-color .15s, color .15s; }
.tentang-item-kecil { padding: .05rem .45rem; font-size: .66rem; }
.tentang-item b { display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; margin-left: -.35rem; border-radius: 50%; font-size: .65rem; }
.tentang-item:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.tentang-detail { margin-top: .8rem; min-height: 5rem; padding: .55rem .7rem; border-radius: .6rem; }
.tentang-detail-judul { margin-bottom: .15rem; font-size: .75rem; font-weight: 700; }
.tentang-detail-isi { font-size: .72rem; line-height: 1.4; }
/* Tema gelap (di atas gradien panel kiri) dan terang (di modal). */
.tentang-gelap { color: rgba(255, 255, 255, .92); }
.tentang-gelap .tentang-angka-baris > div,
.tentang-gelap .tentang-item { background: rgba(255, 255, 255, .14); }
.tentang-gelap .tentang-item:hover { background: rgba(255, 255, 255, .26); }
.tentang-gelap .tentang-item.aktif { background: #fff; color: var(--bs-primary, #525ce5); }
.tentang-gelap .tentang-item b { background: #fff; color: var(--bs-primary, #525ce5); }
.tentang-gelap .tentang-item.aktif b { background: var(--bs-primary, #525ce5); color: #fff; }
.tentang-gelap .tentang-detail { background: rgba(0, 0, 0, .2); }
.tentang-terang .tentang-angka-baris > div,
.tentang-terang .tentang-item { background: var(--bs-tertiary-bg, #f1f3f5); }
.tentang-terang .tentang-item:hover { background: #e3e6ea; }
.tentang-terang .tentang-item.aktif { background: var(--bs-primary, #525ce5); color: #fff; }
.tentang-terang .tentang-item b { background: var(--bs-primary, #525ce5); color: #fff; }
.tentang-terang .tentang-item.aktif b { background: #fff; color: var(--bs-primary, #525ce5); }
.tentang-terang .tentang-angka-baris strong { color: var(--bs-primary, #525ce5); }
.tentang-terang .tentang-detail { background: var(--bs-tertiary-bg, #f1f3f5); }
.login-brand .tentang { margin-top: .9rem; }
/* Layar lebar tapi pendek: buang bagian opsional supaya kartu tetap muat tanpa menggulir. */
@media (min-width: 992px) and (max-height: 780px) { .tentang-gelap .tentang-lead, .tentang-gelap .tentang-angka-baris { display: none; } }
@media (min-width: 992px) and (max-height: 680px) { .tentang-gelap .tentang-blok-peran { display: none; } }