/* =======================================================
   GLOBAL BACKGROUND
======================================================= */
body {
    margin:0;
    padding:0;
    font-family:"Poppins",sans-serif;
    background: linear-gradient(135deg, #0f172a, #1e293b, #0f172a);
    background-size: 300% 300%;
    animation: gradientBG 12s ease infinite;
    color:#fff;
    overflow:hidden;
}

@keyframes gradientBG {
    0%{background-position:0% 50%}
    50%{background-position:100% 50%}
    100%{background-position:0% 50%}
}

/* Glass style */
.glass {
    backdrop-filter: blur(22px);
    background: rgba(255,255,255,0.10);
    border: 1px solid rgb(78, 78, 78);
    box-shadow: 0 20px 40px rgba(0,0,0,0.45);
    border-radius: 22px;
}

/* =======================================================
   FULLSCREEN BUTTON
======================================================= */
.fullscreen-toggle{
    position: fixed;
    right:20px;
    top:15px;
    padding: 8px 16px;
    background: rgba(255,255,255,0.15);
    border:1px solid rgba(255,255,255,0.25);
    backdrop-filter:blur(8px);
    border-radius:10px;
    color:#fff;
    cursor:pointer;
    font-size:13px;
    z-index:9999;
}

/* =======================================================
   HEADER & DATE TIME
======================================================= */
.header-area{
    text-align:center;
    margin-top:50px;
}
.header-title{
    font-size:40px;
    font-weight:700;
    letter-spacing:2px;
}
.header-subtitle{
    opacity:.65;
    margin-top:-8px;
    font-size:14px;
}

.date-time-wide{
    display:flex;
    justify-content:center;
    gap:25px;
    margin-top:20px;
}

.date-box, .clock-box{
    padding:14px 32px;
    border-radius:20px;
    font-size:22px;
    font-weight:600;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    background:rgba(0,0,0,.35);
}

.zona-waktu {
    margin-left: 8px;
}

.clock-box{
    font-size:36px;
    background:rgba(0,0,0,.35);
}

/* =======================================================
   PORTRAIT MODE
======================================================= */
@media (orientation: portrait) {

    .preview-wrapper {
        width:100%;
        height: calc(100vh - 160px);
        display:flex;
        justify-content:center;
        align-items:center;
        padding:15px;
    }

    .portrait-card {
        width: 85%;
        padding: 30px;
        display:flex;
        flex-direction:column;
        gap:30px;
    }

    /* Foto */
    .photo-frame {
        width: 340px;
        height: 440px;
        border-radius: 25px;
        overflow:hidden;
        margin:0 auto;
    }

    .photo-frame img {
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .portrait-info {
        text-align:center;
    }

    .student-name {
        font-size:40px;
        font-weight:700;
    }

    .student-meta {
        font-size:22px;
        opacity:.7;
    }

    .info-grid {
        margin-top:20px;
        display:grid;
        grid-template-columns: 1fr 1fr;
        gap:25px;
    }

    .info-label { opacity:.7; }
    .info-value {
        font-size:26px;
        font-weight:600;
    }
}

/* =======================================================
   LANDSCAPE MODE
======================================================= */
@media (orientation: landscape) {

    .landscape-wrapper{
        display:flex;
        max-width: 1600px;     /* NEW: batas lebar */
        margin: 0 auto;        /* NEW: biar center */
        height: calc(100vh - 210px);
        justify-content: center;
        align-items: center;
        gap: 60px;
        padding: 0 40px;       /* NEW: margin kiri-kanan */
    }

    .photo-frame{
        width: 470px;
        height: 580px;
        border-radius:28px;
        overflow:hidden;
    }

    .photo-frame img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .info-glass{
        width: 50%;
        padding:40px;
    }

    .student-name{
        font-size:50px;
        font-weight:700;
    }

    .student-meta{
        font-size:26px;
        opacity:.7;
        margin-bottom:25px;
    }

    .info-grid{
        display:grid;
        grid-template-columns:repeat(2,1fr);
        gap:35px;
    }

    .info-label{opacity:.6;}
    .info-value{
        font-size:30px;
        font-weight:600;
    }
}

/* =======================================================
   STATUS BADGE
======================================================= */
.status-pill{
    padding:12px 32px;
    border-radius:35px;
    font-size:22px;
    font-weight:700;
    display:inline-block;
    color:#000;
}

.status-hadir{
    background: linear-gradient(135deg,#4ade80,#22c55e);
    box-shadow:0 0 22px #22c55e;
}

.status-terlambat{
    background: linear-gradient(135deg,#fb923c,#f97316);
    box-shadow:0 0 22px #fb923c;
}

/* =======================================================
   STANDBY MODE
======================================================= */
.standby-box{
    text-align:center;
    margin-top:80px;
}
.standby-title{
    font-size:80px;
    font-weight:800;
}
.standby-desc{
    font-size:35px;
    opacity:.7;
}