﻿/*––––––––– GENİŞLİK & KONTEYNER –––––––––*/
.landing {
    display: grid; /* tek satır – ortada */
    place-items: center;
    padding: 6vh 1rem;
}

/* kart */
.card {
    background: var(--card);
    border-radius: 28px;
    box-shadow: 0 12px 32px rgba(0,0,0,.06);
    width: clamp(280px,90vw,420px); /*  ≤420px, ≥280px */
    padding: 3rem 2rem 2.5rem;
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
}

    .card:hover {
        transform: translateY(-4px);
        box-shadow: 0 20px 40px rgba(0,0,0,.08);
    }

/* başlık & alt-başlık */
.app-name {
    margin: 0 0 .35rem;
    font: 600 2.2rem/1.1 system-ui,sans-serif;
    color: var(--purple);
    letter-spacing: .5px;
}

.tag {
    margin: 0 0 1.4rem;
    font: 600 1.25rem/1.3 system-ui,sans-serif;
}

.home-link {
    display: flex;
    align-items: center;
    gap: .35rem; /* emoji-metin aralığı  */
    font-weight: 600;
    color: #555;
    text-decoration: none;
}

/* madde listesi */
.features {
    list-style: none; /* Madde işaretlerini kaldır */
    padding: 0; /* Varsayılan padding’i sıfırla */
    margin: 0 auto; /* Yatayda ortala */
    max-width: 400px; /* İstersen genişlik sınırı */
    text-align: center; /* Metinleri ortala */
}

    .features li {
        margin: 0.5rem 0; /* Satırlar arası boşluk */
        padding-left: 0; /* Soldaki boşluğu sıfırla */
        display: inline-block; /* Her öğeyi ortalanmış satır yap */
    }



/* CTA butonu */
.cta-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--purple);
    border: none;
    padding: .9rem 1.8rem;
    font: 600 1.1rem/1 system-ui,sans-serif;
    border-radius: 12px;
    cursor: pointer;
    transition: background .2s, transform .18s, box-shadow .18s;
    color: var(--purple);
    text-shadow: 0 1px 2px rgba(0,0,0,.25); /* hafif gölge → kontrast */
}

    .cta-btn:hover {
        background: var(--purple-d);
        box-shadow: 0 6px 20px rgba(0,0,0,.15);
    }

    .cta-btn:active {
        transform: scale(.94);
    }

.soon {
    display: block; /* kendi satır */
    margin-top: .6rem; /* butonla aralık */
    text-align: center;
}

.features li {
    color: #444;
}

/* –––––––– M O B I L E –––––––– */
@media(max-width:480px) {
    .card {
        padding: 2.2rem 1.3rem
    }

    .app-name {
        font-size: 1.9rem
    }

    .features {
        font-size: .98rem
    }

    .cta-btn {
        font-size: 1rem;
        padding: .75rem 1.4rem
    }

    .home-text {
        display: none;
    }
}
