/* Layout halaman login: kiri = form, kanan = poster berdampingan */



/* Layout halaman login: kiri = form, kanan = poster berdampingan */



.login-page-layout {

    display: grid;

    grid-template-columns: minmax(300px, 420px) 1fr;

    gap: 36px 40px;

    width: 100%;

    max-width: 1440px;

    min-height: calc(100vh - 56px);

    margin: 0 auto;

    align-items: stretch;

}



/* —— Kolom kiri: menu login —— */

.login-left {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 24px;

    padding: 8px 0;

}



.login-left .login-card {

    width: 100%;

    max-width: 420px;

}



.login-left .login-credit-bar {

    width: 100%;

    max-width: 420px;

}



/* —— Zona kanan: poster di tengah (vertikal & horizontal) —— */

.login-posters-zone {

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 8px 0;

    min-width: 0;

    width: 100%;

}





/* —— Slideshow login: Info ↔ Sambutan —— */

.login-slideshow {

    width: 100%;

    max-width: 960px;

}



.login-slideshow-nav {

    display: flex;

    justify-content: center;

    gap: 12px;

    margin-bottom: 14px;

    flex-wrap: wrap;

}



/* Pastikan tab berada di atas slide sehingga dapat diklik */

.login-slideshow-nav {

    position: relative;

    z-index: 5;

}



.login-slideshow-tab {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    padding: 10px 18px;

    border-radius: 24px;

    border: 2px solid rgba(255, 255, 255, 0.65);

    background: rgba(255, 255, 255, 0.15);

    color: #fff;

    cursor: pointer;

    font-size: 0.88rem;

    font-weight: 700;

    transition: all 0.25s ease;

    backdrop-filter: blur(4px);

    position: relative;

    z-index: 6;

}



.login-slideshow-tab .bi {

    font-size: 1rem;

}



.login-slideshow-tab:hover {

    background: rgba(255, 255, 255, 0.28);

    border-color: #fff;

}



.login-slideshow-tab.is-active {

    background: #fff;

    color: #b00000;

    border-color: #fff;

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);

}



.login-slideshow-viewport {

    position: relative;

    width: 100%;

    transition: min-height 0.4s ease;

}



.login-slide {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    opacity: 0;

    transition: opacity var(--login-slide-fade-ms, 800ms) ease-in-out;

    pointer-events: none;

    z-index: 0;

}



.login-slide.is-active {

    position: relative;

    opacity: 1;

    z-index: 2;

    pointer-events: auto;

}



.login-slide.is-measuring {

    position: relative !important;

    opacity: 0 !important;

    pointer-events: none !important;

    z-index: -1 !important;

}



.login-posters-row {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 14px;

    width: 100%;

    max-width: 680px;

    align-items: stretch;

}



.login-poster {

    width: 100%;

    min-width: 0;

    display: flex;

    flex-direction: column;

}



/* Kartu poster — area bergulir */

.login-posters-zone .poster-card {

    background: linear-gradient(165deg, #ffffff 0%, #fafafa 100%);

    border-radius: 14px;

    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.85);

    font-size: 0.88rem;

    display: flex;

    flex-direction: column;

    flex: 1;

}



.login-posters-zone .poster-card.poster-scroll {

    max-height: min(520px, calc(100vh - 100px));

    overflow-y: auto;

    overflow-x: hidden;

    scrollbar-width: thin;

    scrollbar-color: rgba(176, 0, 0, 0.45) rgba(0, 0, 0, 0.06);

}



.poster-scroll::-webkit-scrollbar {

    width: 6px;

}



.poster-scroll::-webkit-scrollbar-track {

    background: rgba(0, 0, 0, 0.04);

    border-radius: 4px;

}



.poster-scroll::-webkit-scrollbar-thumb {

    background: rgba(176, 0, 0, 0.4);

    border-radius: 4px;

}



.poster-scroll::-webkit-scrollbar-thumb:hover {

    background: rgba(176, 0, 0, 0.6);

}



.poster-scroll-hint {

    flex-shrink: 0;

    padding: 6px 10px 8px;

    font-size: 0.58rem;

    color: #888;

    text-align: center;

    background: linear-gradient(180deg, transparent, #f5f5f5);

    border-top: 1px solid #eee;

}



.poster-scroll-hint .bi {

    font-size: 0.65rem;

    vertical-align: middle;

    color: #b00000;

}



.login-posters-zone .poster-header {

    padding: 14px 14px 12px;

    color: #ffffff;

    text-align: center;

}



.poster-header-flow {

    background: linear-gradient(135deg, #003366 0%, #004d99 100%);

}



.poster-header-schedule {

    background: linear-gradient(135deg, #b00000 0%, #8a0000 100%);

}



.login-posters-zone .poster-badge {

    display: inline-block;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1px;

    padding: 3px 10px;

    border-radius: 20px;

    background: rgba(255, 255, 255, 0.22);

    margin-bottom: 6px;

}



.login-posters-zone .poster-title {

    font-size: 0.95rem;

    font-weight: 800;

    margin: 0 0 2px;

    line-height: 1.25;

    text-transform: uppercase;

    letter-spacing: 0.4px;

}



.login-posters-zone .poster-sub {

    margin: 0;

    font-size: 0.72rem;

    opacity: 0.92;

}



/* Alur pendaftaran */

.login-posters-zone .flow-steps {

    list-style: none;

    margin: 0;

    padding: 12px 12px 4px;

}



.login-posters-zone .flow-step {

    display: flex;

    gap: 10px;

    padding-bottom: 12px;

    position: relative;

}



.login-posters-zone .flow-step:not(.flow-step-last)::before {

    content: "";

    position: absolute;

    left: 12px;

    top: 28px;

    bottom: 0;

    width: 2px;

    background: linear-gradient(180deg, #003366 0%, rgba(0, 51, 102, 0.12) 100%);

}



.login-posters-zone .flow-num {

    flex-shrink: 0;

    width: 26px;

    height: 26px;

    border-radius: 50%;

    background: linear-gradient(135deg, #003366, #004d99);

    color: #fff;

    font-size: 11px;

    font-weight: 800;

    display: flex;

    align-items: center;

    justify-content: center;

    box-shadow: 0 3px 8px rgba(0, 51, 102, 0.3);

    z-index: 1;

}



.login-posters-zone .flow-body strong {

    display: block;

    font-size: 0.74rem;

    color: #1a1a1a;

    margin-bottom: 2px;

    line-height: 1.3;

}



.login-posters-zone .flow-body p {

    margin: 0;

    font-size: 0.68rem;

    color: #555;

    line-height: 1.45;

}



.login-posters-zone .flow-body em {

    font-style: normal;

    font-weight: 700;

    color: #b00000;

}



/* Jadwal kegiatan */

.login-posters-zone .schedule-list {

    list-style: none;

    margin: 0;

    padding: 10px 10px 4px;

}



.login-posters-zone .schedule-item {

    display: flex;

    gap: 8px;

    padding: 8px;

    margin-bottom: 6px;

    border-radius: 10px;

    background: #f5f7fa;

    border: 1px solid #e8ecf0;

}



.login-posters-zone .schedule-item-highlight {

    background: linear-gradient(135deg, #fff8e6 0%, #fff3cd 100%);

    border-color: #ffc107;

}



.login-posters-zone .schedule-icon {

    flex-shrink: 0;

    width: 28px;

    height: 28px;

    border-radius: 8px;

    background: #ffffff;

    color: #b00000;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 0.85rem;

    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);

}



.login-posters-zone .schedule-item-highlight .schedule-icon {

    background: #b00000;

    color: #ffffff;

}



.login-posters-zone .schedule-body strong {

    display: block;

    font-size: 0.7rem;

    color: #1a1a1a;

    margin-bottom: 1px;

    line-height: 1.25;

}



.login-posters-zone .schedule-date {

    display: block;

    font-size: 0.66rem;

    font-weight: 700;

    color: #003366;

    margin-bottom: 2px;

}



.login-posters-zone .schedule-body p {

    margin: 0;

    font-size: 0.62rem;

    color: #666;

    line-height: 1.4;

}



.login-posters-zone .poster-footnote {

    padding: 8px 12px 10px;

    font-size: 0.62rem;

    color: #666;

    text-align: center;

    border-top: 1px dashed #ddd;

    background: #fafafa;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 5px;

}



.login-posters-zone .poster-footnote .bi {

    color: #b00000;

    font-size: 0.75rem;

}



/* —— Sambutan Kepala Sekolah (slide login) —— */

.login-sambutan-card {

    max-height: min(640px, calc(100vh - 80px));

    border: 1px solid rgba(255, 255, 255, 0.85);

    font-size: 1rem;

}



.login-sambutan-hero {

    padding: 22px 24px 20px;

    text-align: center;

    color: #fff;

    background: linear-gradient(120deg, #b00000 0%, #8a0000 45%, #003366 100%);

}



.login-sambutan-hero .poster-badge {

    font-size: 11px;

    padding: 4px 14px;

    margin-bottom: 8px;

}



.login-sambutan-title {

    margin: 6px 0 4px;

    font-size: 1.2rem;

    font-weight: 800;

    text-transform: uppercase;

    letter-spacing: 0.5px;

    line-height: 1.3;

}



.login-sambutan-year {

    margin: 0 0 10px;

    font-size: 0.92rem;

    opacity: 0.92;

}



.login-sambutan-salam {

    margin: 0;

    font-size: 0.88rem;

    line-height: 1.55;

    font-style: italic;

    opacity: 0.95;

    padding: 0 8px;

    max-width: 820px;

    margin-left: auto;

    margin-right: auto;

}



.login-sambutan-body {

    padding: 18px 22px 12px;

}



.login-sambutan-quote {

    margin: 0 0 14px;

    padding: 14px 16px 14px 44px;

    position: relative;

    background: linear-gradient(135deg, #fff8e6, #fff3cd);

    border-left: 5px solid #b00000;

    border-radius: 0 12px 12px 0;

    font-size: 1.05rem;

    font-weight: 700;

    font-style: italic;

    color: #5c4a00;

    line-height: 1.45;

}



.login-sambutan-quote .bi {

    position: absolute;

    left: 14px;

    top: 12px;

    font-size: 1.25rem;

    color: #b00000;

    opacity: 0.5;

}



.login-sambutan-p {

    margin: 0 0 12px;

    font-size: 0.92rem;

    color: #333;

    line-height: 1.65;

    text-align: justify;

}



.login-sambutan-subtitle {

    margin: 16px 0 12px;

    font-size: 1rem;

    font-weight: 800;

    color: #003366;

    text-align: center;

    line-height: 1.35;

}



.login-sambutan-alasan {

    list-style: none;

    margin: 0 0 14px;

    padding: 0;

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 10px;

}



.login-sambutan-alasan-item {

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    gap: 8px;

    padding: 14px 12px;

    border-radius: 12px;

    background: #f5f7fa;

    border: 1px solid #e8ecf0;

}



.login-sambutan-alasan-icon {

    flex-shrink: 0;

    width: 40px;

    height: 40px;

    border-radius: 50%;

    background: linear-gradient(135deg, #b00000, #8a0000);

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.1rem;

}



.login-sambutan-alasan-item strong {

    display: block;

    font-size: 0.88rem;

    color: #1a1a1a;

    margin-bottom: 4px;

    line-height: 1.3;

}



.login-sambutan-alasan-item p {

    margin: 0;

    font-size: 0.82rem;

    color: #555;

    line-height: 1.5;

}



.login-sambutan-sign {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 16px;

    margin-top: 16px;

    padding-top: 14px;

    border-top: 1px dashed #ddd;

}



.login-sambutan-foto {

    flex-shrink: 0;

    width: 72px;

    height: 72px;

    border-radius: 50%;

    overflow: hidden;

    border: 3px solid #b00000;

    box-shadow: 0 4px 14px rgba(176, 0, 0, 0.25);

}



.login-sambutan-foto img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.login-sambutan-foto-ph {

    background: linear-gradient(135deg, #003366, #004d99);

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1.75rem;

}



.login-sambutan-salam-akhir {

    margin: 0 0 4px;

    font-size: 0.88rem;

    color: #666;

}



.login-sambutan-nama {

    margin: 0;

    font-size: 1.05rem;

    font-weight: 800;

    color: #b00000;

}



.login-sambutan-jabatan {

    margin: 0;

    font-size: 0.9rem;

    color: #003366;

    font-weight: 600;

}



/* —— Responsif —— */

@media (max-width: 1024px) {

    .login-page-layout {

        grid-template-columns: 1fr;

        min-height: auto;

        max-width: 520px;

        gap: 24px;

    }



    .login-left {

        order: 1;

    }



    .login-posters-zone {

        order: 2;

        padding: 0;

    }



    .login-slideshow,

    .login-posters-row {

        max-width: 100%;

    }



    .login-posters-zone .poster-card.poster-scroll {

        max-height: 360px;

    }



    .login-sambutan-card {

        max-height: 480px;

    }



    .login-sambutan-alasan {

        grid-template-columns: 1fr;

    }



    .login-sambutan-p {

        font-size: 0.88rem;

    }

}



@media (max-width: 640px) {

    .login-posters-row {

        grid-template-columns: 1fr;

        gap: 16px;

    }



    .login-sambutan-title {

        font-size: 1.05rem;

    }



    .login-sambutan-p {

        font-size: 0.85rem;

    }

}



@media (max-width: 480px) {

    .login-posters-zone .poster-title {

        font-size: 0.88rem;

    }

}