/* ── هروی دوتکهٔ قلقلی (فقط دسکتاپ) ───────────────────────────────────────
   زیر ۱۰۲۴ پیکسل هیچ اثری ندارد: هم display:none و هم در hero.js گارد
   matchMedia هست تا چهرهٔ موبایل/تبلت فروشگاه دست‌نخورده بماند. */

.gg-hero-split { display: none; }

@media (min-width: 1024px) {
  .gg-hero-split {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 18px;
    align-items: stretch;
    direction: rtl;
    padding: 4px 0 10px;
  }

  /* ── نیمهٔ تصویر ── */
  .gg-hero-media {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    min-height: 430px;
    box-shadow: 0 18px 44px rgba(2, 24, 16, 0.35);
    animation: ggRise 0.7s cubic-bezier(0.22, 0.9, 0.3, 1) both;
  }
  .gg-hero-media img {
    position: absolute;
    inset: 0;
    /* !important چون CSS قالب/المنتور به همهٔ img ها height:auto می‌دهد
       و بدون آن پایینِ جعبه خالی می‌ماند (نوار خاکستری). */
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover;
    object-position: center 38%;
    animation: ggKenBurns 18s ease-in-out infinite alternate;
  }
  .gg-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(200deg, rgba(0, 212, 154, 0.10), rgba(4, 18, 30, 0.42) 78%);
    pointer-events: none;
  }

  /* ── نیمهٔ کارتِ ورود ── */
  .gg-hero-auth {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    min-height: 430px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
      radial-gradient(120% 90% at 85% 8%, rgba(0, 212, 154, 0.16), transparent 55%),
      radial-gradient(110% 90% at 12% 95%, rgba(28, 120, 255, 0.16), transparent 55%),
      linear-gradient(150deg, #0d1b2c, #081120 60%, #071019);
    border: 1px solid rgba(0, 212, 154, 0.22);
    box-shadow: 0 18px 44px rgba(2, 12, 24, 0.45), 0 0 26px rgba(0, 212, 154, 0.10) inset;
    animation: ggRise 0.7s 0.08s cubic-bezier(0.22, 0.9, 0.3, 1) both;
  }
  .gg-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(46px);
    opacity: 0.5;
    pointer-events: none;
  }
  .gg-orb-a { width: 210px; height: 210px; background: #00d49a; top: -80px; left: -60px; animation: ggDrift 9s ease-in-out infinite alternate; }
  .gg-orb-b { width: 240px; height: 240px; background: #1c78ff; bottom: -100px; right: -70px; animation: ggDrift 11s 0.6s ease-in-out infinite alternate-reverse; }

  .gg-card {
    position: relative;
    z-index: 2;
    width: min(376px, 88%);
    padding: 18px 20px 20px;
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(19, 34, 56, 0.92), rgba(10, 20, 36, 0.94));
    border: 1.5px solid rgba(0, 212, 154, 0.28);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), 0 0 20px rgba(0, 212, 154, 0.12);
    text-align: center;
    animation: ggCardIn 0.55s 0.18s cubic-bezier(0.22, 0.9, 0.3, 1) both;
  }
  .gg-logo {
    width: 132px;
    margin: 0 auto 4px;
    display: block;
    filter: drop-shadow(0 6px 18px rgba(0, 212, 154, 0.35));
    animation: ggBob 4.2s ease-in-out infinite;
  }
  .gg-card h2 {
    margin: 2px 0 0;
    font-size: 20px;
    font-weight: 800;
    color: #fff;
  }
  .gg-card .gg-sub {
    margin: 4px 0 12px;
    color: #94a3b8;
    font-size: 12.5px;
    line-height: 1.8;
  }
  .gg-fields { display: flex; flex-direction: column; gap: 10px; }
  .gg-fields input {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    padding: 11px 14px;
    font: inherit;
    font-size: 13.5px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  }
  .gg-fields input::placeholder { color: #7c8ba1; }
  .gg-fields input:focus {
    border-color: #00d49a;
    box-shadow: 0 0 0 3px rgba(0, 212, 154, 0.18);
    background: rgba(255, 255, 255, 0.09);
  }
  .gg-fields input.gg-code {
    text-align: center;
    letter-spacing: 6px;
    font-size: 18px;
    font-weight: 800;
  }
  .gg-mini {
    background: none;
    border: none;
    padding: 0;
    color: #7dd3fc;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    align-self: flex-start;
  }
  .gg-mini + .gg-mini { color: #94a3b8; align-self: flex-end; }
  .gg-minirow { display: flex; justify-content: space-between; }

  .gg-msg {
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 700;
    animation: ggFade 0.25s both;
  }
  .gg-msg.err { background: rgba(239, 68, 68, 0.15); border: 1px solid #ef4444; color: #fca5a5; }
  .gg-msg.ok  { background: rgba(34, 197, 94, 0.15); border: 1px solid #22c55e; color: #86efac; }

  .gg-btn {
    margin-top: 12px;
    width: 100%;
    height: 47px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(90deg, #00d49a, #1c78ff);
    background-size: 180% 100%;
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(0, 212, 154, 0.35);
    transition: background-position 0.35s, transform 0.12s, box-shadow 0.2s;
  }
  .gg-btn:hover { background-position: 90% 0; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(0, 212, 154, 0.45); }
  .gg-btn[disabled] { opacity: 0.65; cursor: wait; transform: none; }

  /* ── متنِ راهنما، هشدارِ «پیامک وصل نشده» و شمارشِ معکوسِ کد (راندِ ۴۰) ── */
  .gg-note {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.9;
    color: #7c8ba1;
    text-align: center;
  }
  .gg-note.good { color: #bef264; }
  .gg-note.warn {
    color: #fde68a;
    background: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.4);
    border-radius: 10px;
    padding: 9px 10px;
    font-weight: 700;
  }
  .gg-count {
    padding: 9px 12px;
    border-radius: 10px;
    text-align: center;
    font-size: 12.5px;
    font-weight: 700;
    color: #bfdbfe;
    background: rgba(28, 120, 255, 0.12);
    border: 1px solid rgba(28, 120, 255, 0.4);
  }
  .gg-count.off {
    color: #fecaca;
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.5);
  }

  /* ── کی‌فریم‌ها ── */
  @keyframes ggRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
  @keyframes ggCardIn { from { opacity: 0; transform: translateY(16px) scale(0.97); } to { opacity: 1; transform: none; } }
  @keyframes ggBob { 0%, 100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-7px) rotate(1.5deg); } }
  @keyframes ggDrift { from { transform: translate(0, 0) scale(1); } to { transform: translate(26px, 18px) scale(1.12); } }
  @keyframes ggKenBurns { from { transform: scale(1); } to { transform: scale(1.09); } }
  @keyframes ggFade { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}