*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;

}


  /* =========================================================
     TOKENLAR — asosiy ranglar va o'lchamlar shu yerda.
     Ranglarni, shriftlarni shu yerdan tez o'zgartirsa bo'ladi.
     ========================================================= */
  :root{
    --cream:        #F6F1E7;
    --cream-2:      #FBF8F1;
    --ink:          #3B2E22;
    --ink-soft:     #6B5B4A;
    --gold:         #B48A56;
    --gold-soft:    #D9C29B;
    --night:        #241C15;
    --night-2:      #171109;

    --serif:        'Cormorant Garamond', serif;
    --display:      'Playfair Display', serif;
    --script:       'Great Vibes', cursive;

    --ease: cubic-bezier(.22,.61,.36,1);
  }

  *{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; }
  body{
    background:var(--cream);
    color:var(--ink);
    font-family:var(--serif);
    overflow-x:hidden;
    -webkit-font-smoothing:antialiased;
  }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  }

  .eyebrow{
    font-family:var(--display);
    font-size:13px;
    letter-spacing:.32em;
    text-transform:uppercase;
    color:var(--gold);
    text-align:center;
  }

  /* ---- ajratuvchi gul belgisi (signature element) ---- */
  .divider{
    display:flex; align-items:center; justify-content:center; gap:14px;
    margin:18px auto 0;
  }
  .divider .line{ width:46px; height:1px; background:var(--gold-soft); }
  .divider svg{ width:20px; height:20px; animation:spin 18s linear infinite; }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  section{ position:relative; padding:96px 24px; }

  /* reveal-on-scroll */
  .reveal{ opacity:0; transform:translateY(28px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
  .reveal.in{ opacity:1; transform:translateY(0); }
  .reveal-delay-1{ transition-delay:.12s; }
  .reveal-delay-2{ transition-delay:.24s; }
  .reveal-delay-3{ transition-delay:.36s; }

  /* =========================================================
     1) MUQOVA (COVER) — to'liq ekranli, orqa fon surat.
     RASM: .cover img src ni o'zingizning fotosuratingiz bilan almashtiring.
     ========================================================= */
  .cover{
    height:100svh; padding:0; display:flex; align-items:flex-end; justify-content:center;
    overflow:hidden;
  }
  .cover img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    filter:brightness(.62) saturate(.92);
    transform:scale(1.08);
    animation:cover-in 3.5s var(--ease) forwards;
  }
  @keyframes cover-in{ to{ transform:scale(1); } }
  .cover::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(23,17,9,.15) 0%, rgba(23,17,9,.05) 40%, rgba(23,17,9,.75) 100%);
  }
  .cover-content{
    position:relative; z-index:2; color:var(--cream-2); text-align:center; padding-bottom:64px;
    display:flex; flex-direction:column; align-items:center; gap:10px;
  }
  .cover-content .eyebrow{ color:var(--gold-soft); opacity:0; animation:fade-up 1s var(--ease) .4s forwards; }
  .cover-names{
    font-family:var(--script); font-size:clamp(52px,14vw,88px); font-weight:400;
    line-height:1; margin:6px 0 4px;
    opacity:0; animation:fade-up 1.1s var(--ease) .65s forwards;
  }
  .cover-date{
    font-family:var(--display); font-size:15px; letter-spacing:.18em;
    opacity:0; animation:fade-up 1s var(--ease) .95s forwards;
  }
  .scroll-hint{
    margin-top:22px; font-size:12px; letter-spacing:.28em; text-transform:uppercase;
    color:var(--gold-soft); display:flex; flex-direction:column; align-items:center; gap:6px;
    opacity:0; animation:fade-up 1s var(--ease) 1.3s forwards;
  }
  .scroll-hint span{ width:1px; height:26px; background:var(--gold-soft); animation:hint-move 1.6s ease-in-out infinite; }
  @keyframes hint-move{ 0%,100%{ transform:scaleY(1); opacity:.5; } 50%{ transform:scaleY(1.4); opacity:1; } }
  @keyframes fade-up{ from{ opacity:0; transform:translateY(16px); } to{ opacity:1; transform:translateY(0); } }

  /* =========================================================
     2) TAKLIF MATNI
     ========================================================= */
  .invite{ text-align:center; }
  .invite h1{
    font-family:var(--display); font-weight:500; font-style:italic;
    font-size:clamp(28px,5.4vw,44px); line-height:1.28; color:var(--ink);
    max-width:640px; margin:22px auto 26px;
  }

  .img2{
    width: 90%;
    margin: 0 auto;
  }
  .img2 img{
    width: 100%;
  }
  .invite p{
    font-size:19px; line-height:1.75; color:var(--ink-soft);
    max-width:480px; margin:0 auto;
  }
  .info-cards{
    display:flex; gap:18px; justify-content:center; flex-wrap:wrap;
    margin-top:44px;
  }
  .info-card{
    border:1px solid var(--gold-soft); background:var(--cream-2);
    padding:22px 30px; min-width:150px; text-align:center;
    transition:transform .4s var(--ease), box-shadow .4s var(--ease);
  }
  .info-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px -18px rgba(59,46,34,.4); }
  .info-card .label{ font-family:var(--display); font-size:11px; letter-spacing:.24em; color:var(--gold); text-transform:uppercase; }
  .info-card .value{ font-family:var(--display); font-size:22px; margin-top:8px; color:var(--ink); }

  /* =========================================================
     3) SANOQ (COUNTDOWN)
     SANA: pastdagi <script> ichida WEDDING_DATETIME ni o'zgartiring.
     ========================================================= */
  .countdown-wrap{ text-align:center; }
  .countdown{
    display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:36px;
  }
  .countdown .box{
    background:var(--cream-2); border:1px solid var(--gold-soft);
    width:82px; padding:18px 0; text-align:center;
  }
  .countdown .box .num{
    font-family:var(--display); font-size:30px; color:var(--gold); font-variant-numeric:tabular-nums;
  }
  .countdown .box .unit{
    font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-soft); margin-top:4px;
  }

  /* =========================================================
     4) XOTIRA LAHZALARI (GALEREYA)
     RASMLAR: .gallery-grid ichidagi <img> larni almashtiring.
     Kerak bo'lsa qo'shimcha <figure> qo'shishingiz mumkin.
     ========================================================= */
  .memories{ background:var(--cream-2); }
  .gallery-grid{
    display:grid; grid-template-columns:repeat(2,1fr); gap:14px;
    max-width:560px; margin:44px auto 0;
  }
  .gallery-grid figure{ overflow:hidden; aspect-ratio:3/4; }
  .gallery-grid img{
    width:100%; 
    display:block;
    transition:transform .7s var(--ease);
  }
  .gallery-grid figure:hover img{ transform:scale(1.06); }

  /* =========================================================
     5) MANZIL
     XARITA: iframe src ni Google Maps "Embed a map" havolasi bilan almashtiring.
     TUGMA: "Yo'nalish olish" href ni Google Maps link bilan almashtiring.
     ========================================================= */
  .location{ text-align:center; }
  .location h2{ font-family:var(--display); font-style:italic; font-weight:500; font-size:clamp(26px,4.6vw,36px); margin:18px 0 8px; }
  .location .addr{ color:var(--ink-soft); font-size:17px; max-width:420px; margin:0 auto 40px; line-height:1.6; }
  .map-frame{
    max-width:560px; margin:0 auto; border:1px solid var(--gold-soft);
    padding:8px; background:var(--cream-2);
  }
  .map-frame iframe{ width:100%; height:320px; display:block; border:0; filter:saturate(.85); }
  .directions-btn{
    display:inline-block; margin-top:32px; padding:16px 40px;
    border:1px solid var(--gold); color:var(--ink); text-decoration:none;
    font-family:var(--display); font-size:13px; letter-spacing:.22em; text-transform:uppercase;
    transition:background .35s var(--ease), color .35s var(--ease);
  }
  .directions-btn:hover{ background:var(--gold); color:var(--cream-2); }

  /* =========================================================
     6) YAKUNIY QISM — quyuq fon
     ========================================================= */
  .closing{
    background:var(--night); background:radial-gradient(120% 90% at 50% 0%, #2b2013 0%, var(--night) 55%, var(--night-2) 100%);
    color:var(--cream-2); text-align:center; padding:120px 24px;
  }
  .closing .eyebrow{ color:var(--gold-soft); }
  .closing .names{ font-family:var(--script); font-size:clamp(46px,11vw,68px); margin:14px 0 6px; }
  .closing .date{ font-family:var(--display); font-size:14px; letter-spacing:.2em; color:var(--gold-soft); }

  /* ---- musiqa avtomatik ijro etiladi (alohida tugmasiz) ---- */

  @media (max-width:420px){
    .info-cards{ gap:12px; }
    .countdown .box{ width:70px; padding:14px 0; }
  }

  /* =========================================================
     0) KIRISH EKRANI (GATE) — "Taklifnomani ochish" tugmasi
     O'ZGARTIRING: fon rasm, ism, sana
     ========================================================= */
  html.locked, html.locked body{ overflow:hidden; height:100%; }
  #gate{
    position:fixed; inset:0; z-index:100;
    display:flex; align-items:center; justify-content:center;
    background:radial-gradient(120% 90% at 50% 30%, #2b2013 0%, var(--night) 55%, var(--night-2) 100%);
    transition:opacity 1s var(--ease), visibility 1s var(--ease);
  }
  #gate.hidden{ opacity:0; visibility:hidden; pointer-events:none; }
  #gate .gate-bg{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    opacity:.35; filter:saturate(.8) brightness(.7);
  }
  #gate .gate-content{
    position:relative; z-index:2; text-align:center; color:var(--cream-2);
    padding:0 24px;
    animation:fade-up 1.2s var(--ease) .2s both;
  }
  #gate .eyebrow{ color:var(--gold-soft); }
  #gate .gate-names{
    font-family:var(--script); font-size:clamp(46px,12vw,72px); margin:14px 0 10px; line-height:1;
  }
  #gate .gate-date{
    font-family:var(--display); font-size:14px; letter-spacing:.2em; color:var(--gold-soft); margin-bottom:44px;
  }
  #openInviteBtn{
    display:inline-flex; align-items:center; gap:10px;
    padding:17px 38px; background:transparent;
    border:1px solid var(--gold-soft); color:var(--cream-2);
    font-family:var(--display); font-size:13px; letter-spacing:.22em; text-transform:uppercase;
    cursor:pointer; transition:background .4s var(--ease), color .4s var(--ease), box-shadow .4s var(--ease);
    box-shadow:0 0 0 0 rgba(212,175,122,.0);
    animation:glow-pulse 2.6s ease-in-out infinite;
  }
  #openInviteBtn:hover{ background:var(--gold-soft); color:var(--night); }
  @keyframes glow-pulse{
    0%,100%{ box-shadow:0 0 0 0 rgba(212,175,122,.25); }
    50%{ box-shadow:0 0 22px 4px rgba(212,175,122,.28); }
  }
  #openInviteBtn svg{ width:14px; height:14px; }

  /* asosiy sahifa gate ochilguncha berkitilgan turadi */
  #site{ opacity:0; transition:opacity 1s var(--ease) .2s; }
  #site.shown{ opacity:1; }

  /* =========================================================
     GULBARG ANIMATSIYASI — tugma bosilganda ekran bo'ylab to'kiladi
     ========================================================= */
  #petals{
    position:fixed; inset:0; z-index:110; pointer-events:none; overflow:hidden;
  }
  .petal{
    position:absolute; top:-40px; will-change:transform, opacity;
    animation-name:petal-fall, petal-sway;
    animation-timing-function:linear, ease-in-out;
    animation-iteration-count:1, infinite;
    opacity:.92;
  }
  .petal svg{ display:block; filter:drop-shadow(0 2px 3px rgba(0,0,0,.15)); }
  @keyframes petal-fall{
    from{ transform:translateY(-5vh) rotate(0deg); }
    to{ transform:translateY(108vh) rotate(360deg); }
  }
  @keyframes petal-sway{
    0%,100%{ margin-left:0px; }
    50%{ margin-left:38px; }
  }


  /* =========================================================
   RESPONSIVE IMPROVEMENTS
   Add this at the END of your CSS
   ========================================================= */

/* Tablets */
@media (max-width:768px){

  section{
    padding:70px 20px;
  }

  .cover-content{
    padding-bottom:50px;
  }

  .cover-names{
    font-size:clamp(48px,13vw,72px);
  }

  .invite h1{
    font-size:34px;
    line-height:1.3;
  }

  .invite p{
    font-size:18px;
    line-height:1.7;
  }

  .gallery-grid{
    gap:12px;
  }

  .map-frame iframe{
    height:280px;
  }

}

/* Phones */
@media (max-width:480px){

  section{
    padding:60px 18px;
  }

  .cover-content{
    padding:0 18px 45px;
  }

  .cover-names{
    font-size:56px;
  }

  .cover-date{
    font-size:14px;
    letter-spacing:.15em;
  }

  .invite h1{
    font-size:30px;
    margin:18px auto;
  }

  .invite p{
    font-size:17px;
    line-height:1.65;
  }

  .info-cards{
    gap:12px;
  }

  .info-card{
    min-width:130px;
    padding:18px 20px;
  }

  .info-card .value{
    font-size:20px;
  }

  .countdown{
    gap:10px;
  }

  .countdown .box{
    width:70px;
    padding:14px 0;
  }

  .countdown .num{
    font-size:26px;
  }




  .map-frame iframe{
    height:240px;
  }

  .directions-btn{
    width:100%;
    max-width:300px;
    padding:16px;
  }

  .closing{
    padding:90px 20px;
  }

}

/* Small Phones (320px) */
@media (max-width:360px){

  section{
    padding:50px 15px;
  }

  .eyebrow{
    font-size:11px;
    letter-spacing:.22em;
  }

  .cover-names{
    font-size:46px;
  }

  .cover-date{
    font-size:12px;
  }

  .invite h1{
    font-size:26px;
  }

  .invite p{
    font-size:16px;
  }

  .info-card{
    width:100%;
    min-width:auto;
    max-width:220px;
    padding:16px;
  }

  .countdown{
    gap:8px;
  }

  .countdown .box{
    width:62px;
    padding:12px 0;
  }

  .countdown .num{
    font-size:22px;
  }

  .countdown .unit{
    font-size:10px;
    letter-spacing:.12em;
  }

  .location h2{
    font-size:28px;
  }

  .location .addr{
    font-size:15px;
  }

  #gate .gate-names{
    font-size:44px;
  }

  #gate .gate-date{
    font-size:12px;
    letter-spacing:.14em;
    margin-bottom:32px;
  }

  #openInviteBtn{
    padding:14px 28px;
    font-size:12px;
    letter-spacing:.16em;
  }

}

/* Extra Small Phones (300px and below) */
@media (max-width:300px){

  body{
    min-width:300px;
  }

  .cover-names{
    font-size:38px;
  }

  .invite h1{
    font-size:22px;
  }

  .invite p{
    font-size:15px;
    line-height:1.6;
  }

  .info-card{
    max-width:180px;
  }

  .countdown{
    gap:6px;
  }

  .countdown .box{
    width:56px;
    padding:10px 0;
  }

  .countdown .num{
    font-size:20px;
  }

  .countdown .unit{
    font-size:9px;
  }

  #gate .gate-names{
    font-size:36px;
  }

  .closing .names{
    font-size:42px;
  }

}