/* ============================================================
   Ana səhifə — kompakt promo şəbəkəsi (2×2)
   ------------------------------------------------------------
   Əvvəlki 4 iri banner (Təcili İş, Paylaş Qazan, Restoran, Yarışma)
   bir-birinin altında təxminən 900px yer tuturdu. Bu şəbəkə eyni
   məzmunu ~2 dəfə az yerdə, daha yığcam və oxunaqlı göstərir.

   Hər kartın öz vurğu rəngi var — kartın üzərində
   --hp-1 / --hp-2 (gradient) və --hp-tint (fon çaları) təyin olunur.
   ============================================================ */

.hp-grid {
  --hp-ease: cubic-bezier(.22, .85, .3, 1);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  /* Yuxarıdakı bölmənin alt boşluğu ilə eyni məsafə aşağıda da qalsın —
     əks halda şəbəkə özündən sonrakı bölməyə yapışıq görünürdü. */
  margin-top: 28px;
  margin-bottom: 28px;
}
/* Kartların sayı tək olarsa, sonuncu bütün eni tutsun — boş xana qalmasın */
.hp-grid > :last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---------------- Kart ---------------- */
.hp-card {
  --hp-1: var(--color-primary);
  --hp-2: var(--color-primary-darker);
  --hp-tint: rgba(244, 63, 94, .1);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 18px 18px 16px;
  border-radius: 20px;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(135deg, var(--hp-tint) 0%, #fff 62%);
  border: 1px solid var(--color-border);
  box-shadow: 0 1px 2px rgba(36, 20, 23, .04);
  transition: transform .28s var(--hp-ease), box-shadow .28s var(--hp-ease), border-color .28s var(--hp-ease);
}
/* Sağ tərəfdəki dekorativ işıq — şəkil əvəzinə */
.hp-card::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -55%;
  right: -14%;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--hp-tint) 0%, transparent 70%);
  pointer-events: none;
  transition: transform .45s var(--hp-ease);
}
.hp-card:hover {
  transform: translateY(-3px);
  border-color: transparent;
  box-shadow: 0 0 0 1px var(--hp-tint), 0 18px 32px -20px rgba(36, 20, 23, .45);
}
.hp-card:hover::before { transform: scale(1.15) translate(-8px, 6px); }
.hp-card:focus-visible { outline: 2px solid var(--hp-1); outline-offset: 3px; }

/* ---------------- İkon ---------------- */
.hp-icon {
  width: 52px;
  height: 52px;
  flex: 0 0 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--hp-1), var(--hp-2));
  box-shadow: 0 8px 16px -8px var(--hp-2), inset 0 1px 0 rgba(255, 255, 255, .35);
  transition: transform .28s var(--hp-ease);
}
.hp-card:hover .hp-icon { transform: scale(1.05) rotate(-3deg); }
.hp-icon svg { width: 25px; height: 25px; }

/* ---------------- Mətn ---------------- */
.hp-body { min-width: 0; flex: 1; padding-right: 34px; }

.hp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--hp-2);
  background: #fff;
  border: 1px solid var(--hp-tint);
  border-radius: var(--radius-full);
  padding: 3px 9px;
  margin-bottom: 7px;
}
.hp-badge i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--hp-1);
  box-shadow: 0 0 0 3px var(--hp-tint);
}

.hp-card h3 {
  font-family: var(--font-display);
  font-size: 17.5px;
  line-height: 1.2;
  letter-spacing: -.015em;
  margin: 0 0 5px;
  color: var(--color-ink);
}
.hp-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-ink-faint);
}
.hp-card p b { color: var(--hp-2); }

/* Alt sətir — "kiçik CTA" */
.hp-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 11px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--hp-2);
  background: #fff;
  border: 1px solid var(--hp-tint);
  border-radius: var(--radius-full);
  padding: 6px 13px;
  transition: gap .25s var(--hp-ease), background .25s var(--hp-ease);
}
.hp-card:hover .hp-link { gap: 9px; background: var(--hp-tint); }
.hp-link svg { width: 13px; height: 13px; }

/* ---------------- Sağ üstdəki ox ---------------- */
.hp-arrow {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(145deg, var(--hp-1), var(--hp-2));
  box-shadow: 0 6px 14px -7px var(--hp-2);
  transition: transform .28s var(--hp-ease);
}
.hp-card:hover .hp-arrow { transform: translateX(3px); }
.hp-arrow svg { width: 16px; height: 16px; }

/* ---------------- Yarışma kartındakı geri sayım ---------------- */
.hp-countdown {
  display: flex;
  gap: 5px;
  margin-top: 9px;
  font-variant-numeric: tabular-nums;
}
.hp-countdown-unit {
  min-width: 40px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--hp-tint);
  border-radius: 10px;
  padding: 4px 5px;
}
.hp-countdown-unit b {
  display: block;
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.1;
  color: var(--hp-2);
}
.hp-countdown-unit span {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-ink-faint);
  margin-top: 1px;
}

/* ---------------- Mobil ---------------- */
@media (max-width: 760px) {
  .hp-grid {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 22px;
    margin-bottom: 22px;
  }
  .hp-grid > :last-child:nth-child(odd) { grid-column: auto; }

  .hp-card { padding: 15px 15px 14px; gap: 12px; border-radius: 17px; }
  .hp-icon { width: 44px; height: 44px; flex-basis: 44px; border-radius: 13px; }
  .hp-icon svg { width: 21px; height: 21px; }
  .hp-body { padding-right: 30px; }
  .hp-card h3 { font-size: 16px; }
  .hp-card p { font-size: 12.5px; }
  .hp-arrow { top: 15px; right: 15px; width: 30px; height: 30px; }
  .hp-arrow svg { width: 14px; height: 14px; }
  .hp-link { margin-top: 9px; font-size: 12px; padding: 5px 11px; }
  .hp-countdown-unit { min-width: 36px; }
}

/* Çox dar ekranlarda ikon və mətn üst-üstə düşməsin */
@media (max-width: 360px) {
  .hp-card { flex-direction: column; }
  .hp-body { padding-right: 26px; }
}

@media (prefers-reduced-motion: reduce) {
  .hp-card, .hp-card::before, .hp-icon, .hp-arrow, .hp-link { transition: none; }
  .hp-card:hover { transform: none; }
}