* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
body { font-family: 'Segoe UI', Arial, sans-serif; background: linear-gradient(135deg, #0f0f0f 0%, #1a1a1a 50%, #0f0f0f 100%); color: #fff; }

/* Audio Overlay */
.audio-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.95);
    display: flex; align-items: center; justify-content: center; z-index: 1000;
}
.audio-overlay button {
    background: linear-gradient(135deg, #c41e3a, #8b0000); color: #fff; border: none;
    padding: 25px 50px; font-size: 1.5em; border-radius: 15px;
    cursor: pointer; animation: pulse 2s infinite;
    box-shadow: 0 4px 20px rgba(196,30,58,0.5);
    transition: transform 0.2s;
}
.audio-overlay button:hover { transform: scale(1.05); }

/* Container */
.display-container {
    height: 100vh; display: flex; flex-direction: column;
}

/* Header */
.display-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 20px 40px; background: linear-gradient(135deg, #1a1a1a, #0f0f0f);
    border-bottom: 2px solid #c41e3a;
    flex-shrink: 0; /* Jangan shrink header */
}
.display-header-left { 
    display: flex; align-items: center; gap: 15px; 
    flex-shrink: 0; /* Jangan shrink bagian kiri */
}
.display-header h1 { 
    font-size: 1.8em; color: #c41e3a; text-shadow: 0 0 20px rgba(196,30,58,0.5);
    white-space: nowrap; /* Jangan wrap nama resto */
}
.display-instagram {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: #fff;
    width: 40px; height: 40px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
}
.display-instagram:hover { transform: scale(1.1); }

.clock { 
    font-size: 1.2em; color: rgba(255,255,255,0.8);
    text-align: right;
    white-space: nowrap; /* Jangan wrap jam */
    flex-shrink: 0; /* Jangan shrink jam */
    min-width: 280px; /* Beri ruang minimum agar jam selalu terlihat */
    padding-left: 20px; /* Jarak dari edge */
}

/* Main */
.display-main {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 30px;
}

.display-center { text-align: center; }
.display-label { font-size: 1.8em; color: rgba(255,255,255,0.7); letter-spacing: 3px; margin-bottom: 10px; }
.display-number {
    font-size: 12em; font-weight: bold; color: #c41e3a;
    line-height: 1; transition: all 0.3s ease;
    text-shadow: 0 0 40px rgba(196,30,58,0.5);
}
.display-number.baru {
    animation: pulseNumber 0.6s ease 3;
}
.display-sublabel { font-size: 1.2em; color: rgba(255,255,255,0.7); margin-top: 10px; }

.display-info { display: flex; gap: 40px; }
.info-box {
    background: linear-gradient(135deg, #2d2d2d 0%, #1a1a1a 100%);
    border: 1px solid #3a3a3a;
    border-radius: 15px;
    padding: 20px 40px; text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}
.info-title { display: block; font-size: 1em; color: rgba(255,255,255,0.7); margin-bottom: 8px; }
.info-num { display: block; font-size: 3em; font-weight: bold; color: #c41e3a; }

/* Footer */
.display-footer {
    background: linear-gradient(135deg, #1a1a1a, #0f0f0f);
    padding: 15px 0; overflow: hidden;
    border-top: 1px solid #3a3a3a;
}
.marquee {
    white-space: nowrap; animation: marquee 20s linear infinite;
    font-size: 1.1em; color: rgba(255,255,255,0.8);
}

/* Animations */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

@keyframes pulseNumber {
    0%, 100% { transform: scale(1); color: #c41e3a; }
    50% { transform: scale(1.1); color: #fff; }
}

@keyframes marquee {
    0% { transform: translateX(100vw); }
    100% { transform: translateX(-100%); }
}

/* Responsive for smaller screens */
@media (max-width: 1024px) {
    .display-number { font-size: 8em; }
    .display-label { font-size: 1.4em; }
    .info-num { font-size: 2.5em; }
    .clock { font-size: 1em; min-width: 240px; }
}

@media (max-width: 768px) {
    .display-header { 
        padding: 15px 20px; 
        flex-wrap: wrap; /* Wrap ke bawah jika layar kecil */
    }
    .display-header-left { 
        flex-wrap: wrap;
        width: 100%;
        justify-content: center;
        margin-bottom: 10px;
    }
    .clock { 
        width: 100%; 
        text-align: center; 
        min-width: auto;
        padding-left: 0;
    }
    .display-number { font-size: 6em; }
    .display-label { font-size: 1.2em; }
    .info-num { font-size: 2em; }
}

@media (max-width: 600px) {
    .display-number { font-size: 5em; }
    .display-header h1 { font-size: 1.2em; }
    .display-info { flex-direction: column; gap: 15px; }
    .clock { font-size: 0.9em; }
}