/* ======================================================================
   BRAM Shipping — tema gelap
   ====================================================================== */

/* ---- Latar foto kapal (dalam panel: sangat redup agar konten terbaca) ---- */
body.fi-body {
    background: linear-gradient(rgba(3, 7, 18, .93), rgba(3, 7, 18, .96)),
        url('/images/kapal-4.jpg') center / cover no-repeat fixed;
}

.fi-sidebar {
    background: rgba(7, 11, 21, .82) !important;
    backdrop-filter: blur(10px);
}

.fi-topbar > nav {
    background: rgba(7, 11, 21, .82) !important;
    backdrop-filter: blur(10px);
}

/* ======================================================================
   HALAMAN LOGIN (simple layout) — tampilan modern
   ====================================================================== */
body.fi-body:has(.fi-simple-layout) {
    background:
        radial-gradient(1100px 600px at 50% -10%, rgba(14, 165, 233, .18), transparent 60%),
        linear-gradient(165deg, rgba(2, 6, 17, .55), rgba(2, 6, 17, .92)),
        url('/images/kapal-1.jpg') center / cover no-repeat fixed;
}

/* Kartu login */
.fi-simple-main {
    position: relative;
    padding: 2.5rem 2.25rem 2.25rem !important;
    background: linear-gradient(180deg, rgba(15, 23, 42, .82), rgba(7, 12, 23, .88)) !important;
    backdrop-filter: blur(20px) saturate(120%);
    -webkit-backdrop-filter: blur(20px) saturate(120%);
    border: 1px solid rgba(148, 163, 184, .16);
    border-radius: 22px;
    box-shadow:
        0 30px 70px -15px rgba(0, 0, 0, .65),
        0 0 0 1px rgba(255, 255, 255, .02) inset,
        0 1px 0 0 rgba(255, 255, 255, .06) inset;
    animation: bram-card-in .55s cubic-bezier(.21, 1, .25, 1);
}

/* Garis aksen bercahaya di tepi atas kartu */
.fi-simple-main::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: 22px 22px 0 0;
    background: linear-gradient(90deg, transparent, #38bdf8 35%, #0ea5e9 50%, #38bdf8 65%, transparent);
    opacity: .85;
}

@keyframes bram-card-in {
    from { opacity: 0; transform: translateY(14px) scale(.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Logo BRAM di atas form */
.fi-simple-main .fi-logo {
    display: block;
    margin: 0 auto .35rem;
    height: 3.5rem !important;
    width: auto;
    filter: drop-shadow(0 6px 16px rgba(0, 0, 0, .55));
}

/* Header (logo + judul) di tengah */
.fi-simple-header {
    text-align: center;
    margin-bottom: .25rem;
}

.fi-simple-header-heading {
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    letter-spacing: -.01em;
    background: linear-gradient(180deg, #fff, #cbd5e1);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Sub-teks tagline */
.fi-simple-header::after {
    content: 'Sistem Manajemen Pelayaran';
    display: block;
    margin-top: .35rem;
    font-size: .8rem;
    font-weight: 500;
    letter-spacing: .02em;
    color: rgba(148, 163, 184, .9);
}

/* ---- Input ---- */
.fi-simple-main .fi-input-wrp {
    border-radius: 12px;
    background: rgba(2, 6, 17, .55) !important;
    border-color: rgba(148, 163, 184, .22) !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.fi-simple-main .fi-input-wrp:focus-within {
    border-color: #0ea5e9 !important;
    background: rgba(2, 6, 17, .75) !important;
    box-shadow: 0 0 0 4px rgba(14, 165, 233, .18);
}

.fi-simple-main .fi-input {
    font-size: .95rem;
}

/* Label */
.fi-simple-main .fi-fo-field-wrp-label,
.fi-simple-main label {
    font-weight: 600;
    letter-spacing: .01em;
}

/* ---- Tombol Masuk ---- */
.fi-simple-main .fi-btn[type="submit"],
.fi-simple-main .fi-ac-action {
    border-radius: 12px;
    font-weight: 600;
    letter-spacing: .02em;
    padding-top: .7rem;
    padding-bottom: .7rem;
    background: linear-gradient(180deg, #38bdf8, #0ea5e9) !important;
    border: none !important;
    box-shadow: 0 10px 24px -8px rgba(14, 165, 233, .65);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}

.fi-simple-main .fi-btn[type="submit"]:hover,
.fi-simple-main .fi-ac-action:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
    box-shadow: 0 14px 30px -8px rgba(14, 165, 233, .8);
}

.fi-simple-main .fi-btn[type="submit"]:active,
.fi-simple-main .fi-ac-action:active {
    transform: translateY(0);
}