/* Landing — dizaynın öz inline stilləri toxunulmamışdır.
   Bu fayl yalnız iki şey edir:
     1) animasiyalar (dizaynın <helmet> hissəsindən)
     2) mobil/planşet qatı — kətan 1280px üçün çəkilib, telefonda düzəlməlidir */

html, body { margin: 0; padding: 0; background: #FDF3E0; }
body { -webkit-text-size-adjust: 100%; }
img { max-width: 100%; }
a { color: #EF3E52; text-decoration: none; }
a:hover { color: #C92C41; }
button { font-family: inherit; }
*:focus-visible { outline: 3px solid #FFC93C; outline-offset: 3px; border-radius: 8px; }

@keyframes mimoFloat { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-9px) } }
@keyframes riseIn { from { transform: translateY(14px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes marquee { from { transform: translateX(0) } to { transform: translateX(-50%) } }

/* hərəkəti azaltmaq istəyənlər üçün */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ── planşet: 1100px-dən aşağı ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .lp-hero-grid { grid-template-columns: 1fr 360px !important; gap: 32px !important; }
  .lp-h1 { font-size: 50px !important; }
  .lp-mimo-side { display: none; }
  .lp-nav { gap: 18px !important; margin-left: 24px !important; }
  .lp-f1, .lp-f2 { grid-template-columns: 1fr 1fr !important; }
  .lp-safe { grid-column: 1 / -1; }
}

/* ── telefon: 880px-dən aşağı ──────────────────────────────────────────── */
@media (max-width: 880px) {
  .lp-hdr { padding: 12px 20px !important; }
  .lp-nav, .lp-signin { display: none !important; }

  .lp-hero { padding: 34px 20px 52px !important; }
  .lp-hero-grid { grid-template-columns: 1fr !important; gap: 38px !important; }
  .lp-h1 { font-size: 38px !important; line-height: 1.1 !important; }
  .lp-sub { font-size: 16px !important; max-width: none !important; }
  .lp-blob { display: none; }

  /* Telefon maketi: çərçivəni DARALTMIRIQ — içindəki tərtibat 352px üçün çəkilib,
     daraltsaq sıxılıb pozulur. Əvəzinə bütöv maketi miqyaslayırıq: nisbətlər qorunur.
     Maketin tam eni 352 + 2×11 haşiyə = 374px, hündürlüyü 712 + 22 = 734px. */
  /* Sarğı miqyasdan SONRAKI real ölçüdədir və `margin:auto` ilə mərkəzlənir;
     maket öz sol-üst küncündən miqyaslanır. `transform` layout eninə təsir
     etmədiyi üçün maketi birbaşa mərkəzləmək olmur — sarğı bunu həll edir. */
  .lp-phone-wrap {
    display: block !important;
    width: calc(374px * var(--ph, 1));
    height: calc(734px * var(--ph, 1));
    margin: 0 auto;
  }
  .lp-phone {
    transform: scale(var(--ph, 1));
    transform-origin: top left;
    flex: none;
  }

  /* yükləmə düymələri bir-birinin altına */
  .lp-btns { flex-direction: column !important; align-items: stretch !important; }
  .lp-btns > a, .lp-btns > span { justify-content: center; }

  .lp-proof { flex-wrap: wrap; gap: 14px !important; }

  .lp-sec { padding-left: 20px !important; padding-right: 20px !important; padding-top: 56px !important; }
  .lp-sec-head { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; }
  .lp-sec-note { margin-left: 0 !important; max-width: none !important; }
  .lp-h2 { font-size: 30px !important; }

  .lp-3, .lp-f1, .lp-f2, .lp-faq { grid-template-columns: 1fr !important; }
  .lp-prem { grid-template-columns: 1fr !important; padding: 28px !important; gap: 28px !important; }
  .lp-safe { flex-direction: column !important; align-items: flex-start !important; }

  .lp-cta { padding: 34px 24px !important; border-radius: 28px !important; }
  .lp-cta-mimo { display: none; }

  .lp-mq { font-size: 14px !important; }

  .lp-foot { flex-wrap: wrap; padding: 34px 20px 40px !important; }
  .lp-foot-links { margin-left: 0 !important; width: 100%; gap: 14px !important; }
}

/* ── planşet aralığı: FAQ iki sütun qalsın (tək sütunda çox seyrək olur) ── */
@media (min-width: 620px) and (max-width: 880px) {
  .lp-faq { grid-template-columns: 1fr 1fr !important; }
  .lp-f1, .lp-f2 { grid-template-columns: 1fr 1fr !important; }
  .lp-safe { grid-column: 1 / -1; flex-direction: row !important; align-items: center !important; }
}

/* ── telefon maketinin miqyası (ekran daraldıqca kiçilir) ──────────────── */
/* Sıra vacibdir: aşağıdaki qayda yuxarıdakını üstələyir. */
@media (max-width: 880px) { :root { --ph: 1 } }     /* 414px+ → tam ölçü sığır */
@media (max-width: 452px) { :root { --ph: .86 } }   /* 374 → 322 */
@media (max-width: 400px) { :root { --ph: .80 } }   /* 374 → 299 */
@media (max-width: 360px) { :root { --ph: .72 } }   /* 374 → 269 */
@media (max-width: 330px) { :root { --ph: .64 } }   /* 374 → 239 */

/* ── kiçik telefonlar ──────────────────────────────────────────────────── */
@media (max-width: 400px) {
  .lp-h1 { font-size: 33px !important; }
  .lp-h2 { font-size: 26px !important; }
  .lp-sec { padding-top: 46px !important; }
}

/* ── toxunma hədəfləri: barmaq üçün min 44px ───────────────────────────── */
@media (max-width: 880px) {
  .lp-hdr a[href="#yukle"] { padding: 13px 20px !important; }
  .lp-btns > a, .lp-btns > span { padding: 17px 24px !important; }
  [data-vote] { min-height: 44px; }

  /* mətn linkləri də barmaqla rahat tutulsun */
  .lp-foot-links a,
  .lp-safe a,
  .lp-sec > p > a {
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 2px;
  }
  .lp-safe a { padding: 12px 15px !important; }
  .lp-foot-links { gap: 4px 18px !important; }
}