/* ASOSIY SILLIQLASH */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: sans-serif;
    background-color: #f6f4ee;
    overflow-x: hidden;
    display: flex;
    justify-content: center;
}

.hidden {
    display: none !important;
}

/* 1. MUQOVA FON RASMI BILAN (OQ EKRANNI MUTLAQO YO'QOTADI) */
.cover-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-image: url('image_fb64d2.jpg') !important; /* Siz yuklagan rasm nomi */
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    z-index: 9999;
    cursor: pointer;
}

/* Matnlar va tugmani pastga tekislash */
.cover-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; 
    height: 100%;
    width: 100%;
    padding-bottom: 60px;
    box-sizing: border-box;
}

.main-action-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 320px;
    gap: 15px;
}

/* Oltin Tugma */
.open-btn {
    width: 90%;
    padding: 16px 20px;
    font-family: 'Georgia', serif;
    font-size: 1.1rem;
    font-weight: bold;
    color: #1e5335;
    letter-spacing: 1.5px;
    background: linear-gradient(135deg, #ffeaa7, #f1c40f, #d4af37, #f39c12);
    border: 2px solid #fff;
    border-radius: 50px;
    cursor: pointer;
    box-shadow: 0 0 20px rgba(241, 196, 15, 0.6), inset 0 0 10px rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    animation: glowAndPulse 2s infinite ease-in-out;
}

.diamond-icon {
    font-size: 1.3rem;
    color: #ffd700;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.guest-text-bottom {
    font-size: 1.05rem;
    color: #ffd700;
    letter-spacing: 2px;
    font-weight: bold;
    font-family: 'Georgia', serif;
    text-transform: uppercase;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.9);
}

@keyframes glowAndPulse {
    0% { transform: scale(1); box-shadow: 0 0 15px rgba(241, 196, 15, 0.5); }
    50% { transform: scale(1.04); box-shadow: 0 0 25px rgba(241, 196, 15, 0.85); }
    100% { transform: scale(1); box-shadow: 0 0 15px rgba(241, 196, 15, 0.5); }
}

/* 2. VIDEO QATLAMI */
.video-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: #000;
    z-index: 9998;
    display: flex;
    justify-content: center;
    align-items: center;
}

.bg-video-frame {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* 3. ASOSIY SAYT (ORALIQLAR KENGAYTIRILDI) */
.main-content {
    width: 100vw;
    max-width: 420px;
    min-height: 100vh;
    background: url('video-end-DNjRu6xE.jpg'),rgba(255, 255, 255, 0.9);
    background-size: 100% auto;
    background-blend-mode: multiply;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: top center;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px 80px 20px; /* Yuqori va pastki erkin joy */
}

/* HAR BIR BLOK ORASIDAGI MASOFA CHIROYLI KENGAYTIRILDI */
.names-section,
.quran-section,
.calendar-section,
.events-container,
.hadis-section,
.location-section,
.gift-section,
.closing-section {
    margin-bottom: 75px; /* Bloklar orasidagi nafis masofa */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ISMLAR */
.names-section { text-align: center; margin-top: 20px; }
.parent-text { font-family: 'Cinzel', serif; color: #8d7355; font-size: 13px; letter-spacing: 2px; }
.groom-name, .bride-name { font-family: 'Great Vibes', cursive; color: #1e5335; font-size: 52px; font-weight: 500; }
.and-word { font-family: 'Cinzel', serif; color: #b89b72; font-size: 14px; margin: -5px 0; }
.invitation-p { font-family: 'Cinzel', serif; color: #555; font-size: 13px; line-height: 1.6; max-width: 290px; margin: 12px auto; text-align: center; }
.section-divider { color: #c5a880; font-size: 14px; }

/* OYAT */
.quran-section { text-align: center; width: 90%; }
.quran-img { width: 130px; height: auto; margin-bottom: 5px; }
.quote-sign { font-family: 'Great Vibes', cursive; color: #c5a880; font-size: 30px; }
.ayat-text { font-family: 'Cinzel', serif; color: #4a4a4a; font-size: 13px; line-height: 1.7; font-style: italic; }
.ayat-source { font-family: 'Cinzel', serif; color: #927959; font-size: 11px; font-weight: bold; margin-top: 8px; letter-spacing: 1px; }

/* KALENDAR */
.calendar-section { background: rgba(255, 255, 255, 0.75); border: 1px dashed #e2d1b8; border-radius: 20px; padding: 25px 20px; max-width: 340px; text-align: center; }
.calendar-month { font-family: 'Cinzel', serif; color: #1e5335; font-size: 16px; letter-spacing: 2px; margin-bottom: 15px; }
.weekdays { display: flex; justify-content: space-between; font-size: 11px; font-weight: bold; color: #8d7355; margin-bottom: 12px; width: 100%; }
.weekdays span { width: 13%; text-align: center; }
.weekdays .weekend { color: #1e5335; }
.calendar-days { display: flex; flex-wrap: wrap; justify-content: space-between; row-gap: 12px; width: 100%; }
.calendar-days span { width: 13%; font-size: 13px; color: #4a4a4a; height: 28px; display: inline-flex; align-items: center; justify-content: center; position: relative; }
.calendar-days .other-month { color: #ccc; }
.calendar-days .wedding-day { background: #1e5335; color: #fff; font-weight: bold; border-radius: 50%; }
.star-mini { position: absolute; top: -4px; right: -2px; color: #ffcc00; font-size: 8px; }
.calendar-footer { margin-top: 20px; font-family: 'Cinzel', serif; font-size: 12px; color: #4a4a4a; font-weight: bold; }
.footer-pattern { color: #c5a880; font-size: 10px; margin: 0 4px; }

/* TADBIRLAR */
.events-container { display: flex; flex-direction: column; gap: 25px; }
.event-card { position: relative; background: rgba(255, 255, 255, 0.75); border: 1px dashed #e2d1b8; border-radius: 20px; padding: 25px 20px; width: 100%; max-width: 340px; text-align: center; }
.corner-pattern { position: absolute; color: #c5a880; font-size: 10px; opacity: 0.7; }
.top-left { top: 8px; left: 8px; } .top-right { top: 8px; right: 8px; }
.bottom-left { bottom: 8px; left: 8px; } .bottom-right { bottom: 8px; right: 8px; }
.event-img-fixed { width: 85px; height: 85px;  margin-bottom: 10px; border-radius: 50%; }
.event-title { font-family: 'Cinzel', serif; color: #333; font-size: 18px; }
.event-divider { color: #c5a880; font-size: 12px; margin: 3px 0; }
.event-time { color: #1e5335; font-size: 24px; font-weight: bold; }
.event-location { color: #555; font-size: 13.5px; font-weight: 500; }
.event-note { color: #888; font-size: 12px; font-style: italic; }

/* TAYMER (YON ATROFGA RASYALASH) */
.timer-section { 
    width: 100vw; 
    margin-left: calc(-50vw + 50%); 
    margin-right: calc(-50vw + 50%); 
    background-image: url('nighty-bg-CrIc4HVr.webp'); 
    background-size: cover; 
    background-position: center; 
    padding: 60px 20px; 
}
.timer-title { font-family: 'Cinzel', serif; color: #dfcdb3; font-size: 15px; letter-spacing: 2px; margin-bottom: 25px; text-shadow: 0 2px 4px rgba(0,0,0,0.8); text-align: center; }
.countdown-container { display: flex; justify-content: center; align-items: center; gap: 8px; }
.time-card { background: rgba(15, 30, 20, 0.75); border: 1px solid rgba(226, 209, 184, 0.3); border-radius: 12px; padding: 12px 2px; width: 70px; display: flex; flex-direction: column; align-items: center; backdrop-filter: blur(3px); }
.time-num { font-family: 'Cinzel', serif; color: #fff; font-size: 22px; font-weight: bold; }
.time-label { color: #dfcdb3; font-size: 9px; margin-top: 4px; letter-spacing: 1px; }
.time-separator { color: #c5a880; font-size: 14px; }

/* HADIS */
.hadis-card { position: relative; background: rgba(255, 255, 255, 0.7); border: 1px dashed #e2d1b8; border-radius: 16px; padding: 30px 20px; width: 100%; max-width: 340px; text-align: center; }
.hadis-quote { font-family: 'Great Vibes', cursive; color: #c5a880; font-size: 30px; }
.hadis-text { font-family: 'Cinzel', serif; color: #4a4a4a; font-size: 13px; font-style: italic; line-height: 1.6; margin: 5px 0; }
.hadis-source { font-family: 'Cinzel', serif; color: #1e5335; font-size: 11px; font-weight: bold; letter-spacing: 1px; }

/* XARITA */
.location-card { position: relative; background: rgba(255, 255, 255, 0.75); border: 1px dashed #e2d1b8; border-radius: 20px; padding: 30px 20px; width: 100%; max-width: 340px; text-align: center; }
.location-subtitle { font-family: 'Cinzel', serif; color: #927959; font-size: 12px; letter-spacing: 2px; }
.restaurant-name { font-family: 'Cinzel', serif; color: #1e5335; font-size: 24px; margin-top: 5px; }
.star-center { color: #c5a880; font-size: 12px; margin: 5px 0; }
.address-text { color: #555; font-size: 13px; margin-bottom: 15px; }
.map-wrapper { width: 100%; height: 185px; border-radius: 12px; overflow: hidden; border: 1px solid #e2d1b8; margin-bottom: 15px; }
.map-btn { width: 100%; background: #1e5335; color: #fff; border: none; padding: 12px 0; border-radius: 25px; font-size: 13px; font-weight: bold; cursor: pointer; }

/* KARTA RAQAMI */
.gift-title { font-family: 'Cinzel', serif; color: #927959; font-size: 14px; letter-spacing: 2px; }
.gift-ornament { color: #c5a880; font-size: 11px; }
.gift-subtitle { font-family: 'Cinzel', serif; color: #666; font-size: 12px; text-align: center; max-width: 300px; margin-bottom: 20px; line-height: 1.5; }
.bank-card { position: relative; width: 100%; max-width: 320px; height: 180px; background: #153b26; border-radius: 15px; padding: 20px; text-align: left; box-shadow: 0 8px 15px rgba(0,0,0,0.15); }
.bank-name { font-family: 'Cinzel', serif; color: #dfcdb3; font-size: 12px; letter-spacing: 1px; }
.card-chip { width: 38px; height: 28px; background: linear-gradient(135deg, #e2d1b8, #b89b72); border-radius: 4px; position: absolute; right: 20px; top: 20px; }
.card-num { font-family: 'Cinzel', serif; color: #dfcdb3; font-size: 18px; margin-top: 45px; word-spacing: 3px; }
.card-holder { margin-top: 25px; }
.card-holder span { font-size: 8px; color: #8fa397; }
.holder-name { color: #fff; font-size: 14px; font-weight: bold; }
.copy-button { margin-top: 15px; background: #fff; border: 1px solid #e2d1b8; padding: 10px 25px; border-radius: 25px; color: #1e5335; font-weight: bold; font-size: 13px; cursor: pointer; }

/* YAKUNIY QISM */
.closing-section { margin-bottom: 0px; }
.arabic-blessing { font-family: 'Great Vibes', cursive; color: #b89b72; font-size: 34px; }
.uzb-blessing { font-family: 'Cinzel', serif; color: #777; font-size: 12px; margin-bottom: 30px; }
.final-invitation { font-family: 'Cinzel', serif; color: #222; font-size: 19px; margin-bottom: 20px; }
.final-moon-img { width: 50%; max-width: 180px; height: auto; }

/* MODAL OYNA */
.modal-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(3px); z-index: 100000; display: flex; justify-content: center; align-items: center; }
.modal-content { background: #fff; padding: 25px; border-radius: 15px; width: 80%; max-width: 290px; text-align: center; border: 1px solid #e2d1b8; }
.modal-content h3 { font-family: 'Cinzel', serif; color: #1e5335; margin-bottom: 15px; }
.modal-buttons { display: flex; flex-direction: column; gap: 10px; margin-bottom: 15px; }
.modal-link { display: block; padding: 12px; border-radius: 25px; text-decoration: none; font-weight: bold; font-size: 14px; text-align: center; }
.google-maps { background: #ea4335; color: white; }
.yandex-maps { background: #ffcc00; color: black; }
#close-modal-btn { background: transparent; border: none; color: #999; font-size: 13px; cursor: pointer; text-decoration: underline; }

/* SILLIQ VA CHIROYLI PAYDO BO'LISH ANIMATSIYASI (CUBIC-BEZIER) */
.animate-item {
    opacity: 0;
    transform: translateY(45px); /* Biroz chuqurroq joydan chiqadi */
    transition: opacity 1.2s cubic-bezier(0.215, 0.610, 0.355, 1), 
                transform 1.2s cubic-bezier(0.215, 0.610, 0.355, 1);
    will-change: transform, opacity;
}

/* Skrol qilinganda qo'shiladigan klass */
.animate-item.show {
    opacity: 1;
    transform: translateY(0);
}