/* =========================================================
   HEROBIZZ LIGHT LOGIN — FINAL CLEAN
   CSS ONLY | RINGAN | KONSISTEN
========================================================= */

/* =====================
   Layout
===================== */

.ui.grid.centered {
    margin-top: 3.2rem !important;
}

/* =====================
   Logo
===================== */

.ui.grid .ui.image .image.icon {
    max-width: 160px;
    margin-bottom: 1.8rem;
    opacity: .95;
}

/* =====================
   PRIMARY CARD (LOGIN)
===================== */

.ui.stacked.segment {
    background: #fff;
    border-radius: 16px !important;
    padding: 2.1rem 2rem !important;
    border: 1px solid rgba(0,0,0,.04) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.06) !important;
    margin-bottom: 1.2rem !important;
}

/* Matikan efek stacked bawaan Semantic UI */
.ui.stacked.segment::before,
.ui.stacked.segment::after {
    display: none !important;
}

/* =====================
   Input
===================== */

.ui.form .ui.input input {
    height: 50px;
    border-radius: 12px !important;
    border: 1px solid #e5e7eb !important;
    font-size: 15px;
    color: #333;
    background: #fff;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.ui.form .ui.input input::placeholder {
    color: #b0b6bc;
}

.ui.form .ui.input input:focus {
    border-color: #21ba9a !important;
    box-shadow: 0 0 0 3px rgba(33,186,154,.08);
}

.ui.form .ui.input > i.icon {
    color: #b0b6bc;
}

/* =====================
   Button
===================== */

.ui.teal.button,
.ui.teal.buttons .button {
    height: 50px;
    border-radius: 14px !important;
    background: #21ba9a !important;
    font-weight: 600;
    letter-spacing: .3px;
}

.ui.teal.button:hover {
    background: #1fa38a !important;
}

/* =====================
   SECONDARY CARD (LUPA PASSWORD)
===================== */

.ui.message {
    background: #fff;
    border-radius: 16px;                  /* SAMA dengan login */
    border: 1px solid rgba(0,0,0,.04);    /* SAMA */
    box-shadow: 0 12px 28px rgba(0,0,0,.05); /* sedikit lebih ringan */
    font-size: 13.5px;
    color: #555;
    line-height: 1.6;
    margin-top: 0 !important;
}

.ui.message a {
    font-weight: 600;
}

/* =====================
   Divider OFF
===================== */

.ui.divider,
.ui.horizontal.divider {
    display: none !important;
}

/* =====================
   Mobile
===================== */

@media (max-width: 600px) {
    .ui.stacked.segment {
        padding: 1.7rem 1.5rem !important;
    }
}

/* =========================================================
   FINAL FIX — SAMAKAN CARD "LUPA PASSWORD"
   TARGET ELEMEN SEBENARNYA
========================================================= */

/* Card lupa password (Sejoli / Semantic UI) */
.ui.message.segment,
.ui.secondary.segment {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1px solid rgba(0,0,0,0.04) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.05) !important;
    margin-top: 0 !important;
}

/* pastikan tidak ada garis tambahan */
.ui.message.segment::before,
.ui.message.segment::after {
    display: none !important;
}

/* =========================================================
   FINAL ACTUAL FIX
   SAMAKAN LOGIN & LUPA PASSWORD (PUTUS BORDER PARENT)
========================================================= */

/* putus border / garis dari container column */
.ui.grid > .column {
    border: none !important;
    box-shadow: none !important;
}

/* pastikan hanya card yang terlihat */
.ui.grid > .column > .ui.message {
    margin-top: 0 !important;
}

/* rapikan jarak antar card */
.ui.stacked.segment {
    margin-bottom: 14px !important;
}

/* =========================================================
   LOGIN — FIX CARD MUNGIL DI TABLET
   (768px – 1024px)
========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    /* Paksa column login melebar */
    .ui.grid.centered > .column {
        width: 100% !important;
        max-width: 520px !important;   /* ← ukuran ideal tablet */
        flex: none !important;
    }

    /* Pastikan tidak dikunci oleh class wide */
    .ui.grid.centered > .column[class*="wide"] {
        width: 100% !important;
        max-width: 520px !important;
    }
}

/* =========================================================
   LOGIN — FIX LEBAR MUNGIL DI TABLET
   AKAR MASALAH: .ui.container
========================================================= */

@media (min-width: 768px) and (max-width: 1024px) {

    /* Lepaskan pengunci lebar Semantic UI */
    .ui.container {
        max-width: 100% !important;
    }

    /* Batasi ulang agar tetap elegan */
    .ui.grid.centered {
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
}