/* ================================================================
   ALISOFT — Müşteri girişi (ürün seçme ekranı)
   Site menüsü yok; ekranın ortasında logo, başlık ve ürün kartları.
   ================================================================ */

.mg {
    margin: 0;
    min-height: 100vh;
    color: var(--a-ink);
    background:
        radial-gradient(800px 420px at 50% -10%, rgba(66, 99, 235, .12), transparent 70%),
        var(--a-soft);
}

.mg-main { display: flex; flex-direction: column; align-items: center; max-width: 760px; min-height: 100vh; margin: 0 auto; padding: 64px var(--a-gutter) 40px; text-align: center; }

.mg-logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 40px; text-decoration: none; }
.mg-logo img { width: 40px; height: auto; }
.mg-logo span { font-family: 'Plus Jakarta Sans', 'Inter', sans-serif; font-size: 1.625rem; font-weight: 800; letter-spacing: -.03em; color: var(--a-ink); }
.mg-logo b { font-weight: 500; color: var(--a-accent); }

.mg-title { margin: 0 0 8px; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); letter-spacing: -.035em; }
.mg-lead { margin: 0 0 36px; font-size: 1.0625rem; color: var(--a-text); }

.mg-grid { display: grid; gap: 12px; width: 100%; text-align: left; }

/* Ürün renkleri */
.mg-card { --mg-c: #4263EB; --mg-s: #EEF1FD; }
.mg-card--yesil { --mg-c: #079455; --mg-s: #DCFAE6; }
.mg-card--turuncu { --mg-c: #DC6803; --mg-s: #FEF0C7; }
.mg-card--mor { --mg-c: #6938EF; --mg-s: #EBE9FE; }

.mg-card {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    color: inherit;
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--a-line);
    border-radius: 18px;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

a.mg-card:hover { border-color: var(--mg-c); box-shadow: 0 20px 40px -26px rgba(16, 24, 40, .4); transform: translateY(-2px); }
a.mg-card:focus-visible { outline: 2px solid var(--mg-c); outline-offset: 3px; }

.mg-ic { display: grid; flex: none; place-items: center; width: 52px; height: 52px; color: var(--mg-c); background: var(--mg-s); border-radius: 15px; }
.mg-ic svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

.mg-text { flex: 1; min-width: 0; }
.mg-text strong { display: block; font-size: 1.0625rem; letter-spacing: -.01em; }
.mg-text small { font-size: .875rem; color: var(--a-muted); }

.mg-go { display: inline-flex; flex: none; align-items: center; gap: 6px; font-size: .875rem; font-weight: 700; color: var(--mg-c); }
.mg-go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s; }
a.mg-card:hover .mg-go svg { transform: translateX(4px); }

.mg-card.is-soon { opacity: .6; }
.mg-soon { flex: none; padding: 4px 10px; font-size: .75rem; font-weight: 700; color: var(--a-muted); background: #F2F4F7; border-radius: 999px; }

.mg-help { margin: 32px 0 0; font-size: .9375rem; color: var(--a-muted); }
.mg-help a { font-weight: 600; color: var(--a-accent); text-decoration: none; white-space: nowrap; }
.mg-help a:hover { text-decoration: underline; }
.mg-back { margin: auto 0 0; padding-top: 40px; font-size: .875rem; }
.mg-back a { color: var(--a-muted); text-decoration: none; }
.mg-back a:hover { color: var(--a-ink); }

@media (max-width: 520px) {
    .mg-main { padding-top: 40px; }
    .mg-card { gap: 14px; padding: 16px; }
    .mg-go { display: none; }
}