/*
   Mobula — Çözüm alt sayfaları (uygulama tanıtım sayfaları) ortak stilleri.
   Ana temayı (css/style.css) tamamlar; onu değiştirmez.
*/

/* Alt sayfa hero'su: ana sayfa hero'sunun daha kısa hali */
.hero-sub {
    padding: 170px 0px 110px;
}

/* Hero'daki uygulama logosu */
.app-logo-hero {
    height: 72px;
    width: 72px;
    border-radius: 18px;
    box-shadow: 0 10px 35px 0 rgba(0, 0, 0, 0.25);
}

/* Ana sayfadaki çözüm kartı logosu */
.app-logo-card {
    height: 84px;
    width: 84px;
    border-radius: 20px;
}

/* "Yakında Google Play'de" rozeti */
.app-badge {
    display: inline-block;
    padding: 8px 20px;
    border-radius: 30px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    font-family: "Karla", sans-serif;
    font-size: 15px;
}

.app-badge i {
    margin-right: 6px;
}

/* Pasif rozet (örn. "App Store'da çok yakında") */
.app-badge-muted {
    opacity: 0.55;
}

/* Künye (etiket-değer) listesi */
.project-meta {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.project-meta li {
    padding: 10px 0;
    border-bottom: 1px solid #e6eaf9;
}

.project-meta li:last-child {
    border-bottom: none;
}

.project-meta .meta-label {
    font-family: "Karla", sans-serif;
    font-weight: 600;
    color: #28282e;
    margin-right: 8px;
}

/* Teknik yaklaşım maddeleri */
.tech-item i {
    color: #672fed;
    font-size: 20px;
}

/* Ana sayfa kartındaki rozet (açık zemin) */
.app-badge-light {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 30px;
    background: #dfd3fb;
    color: #672fed;
    font-family: "Karla", sans-serif;
    font-size: 13px;
}

/* Telefon çerçevesi */
.phone-frame {
    display: inline-block;
    padding: 10px;
    background: #28282e;
    border-radius: 28px;
    box-shadow: 0 10px 35px 0 rgba(40, 40, 46, 0.25);
}

.phone-frame img {
    display: block;
    max-width: 100%;
    border-radius: 20px;
}

.hero-sub .phone-frame {
    max-width: 250px;
}

/* Özellik kartı ikonu */
.solution-icon i {
    font-size: 26px;
    color: #672fed;
    height: 54px;
    width: 54px;
    line-height: 54px;
    text-align: center;
    background: #dfd3fb;
    border-radius: 50%;
    display: inline-block;
}

/* "Nasıl çalışır" adım numarası */
.step-circle {
    height: 56px;
    width: 56px;
    line-height: 56px;
    border-radius: 50%;
    background: #dfd3fb;
    color: #672fed;
    font-family: "Karla", sans-serif;
    font-size: 22px;
    font-weight: 600;
    display: inline-block;
}

/* Örnek senaryo kutusu */
.scenario-box {
    background: #ffffff;
    border-radius: 7px;
    box-shadow: 0 10px 35px 0 rgba(154, 161, 171, 0.1);
}

.scenario-amount {
    font-family: "Karla", sans-serif;
    font-weight: 600;
    font-size: 1.4rem;
    color: #672fed;
}

/* SSS akordeonu — site paletine uyum */
.accordion-item {
    border-color: #e6eaf9;
}

.accordion-button {
    font-family: "Karla", sans-serif;
    font-weight: 600;
    color: #28282e;
}

.accordion-button:not(.collapsed) {
    color: #672fed;
    background-color: #f3eefe;
    box-shadow: none;
}

.accordion-button:focus {
    border-color: #dfd3fb;
    box-shadow: 0 0 0 0.15rem #dfd3fb;
}

/* Metin sayfaları (gizlilik politikası vb.) başlık şeridi */
.page-head {
    padding: 140px 0px 60px;
}

/* Metin sayfası içeriği */
.policy-content h5 {
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

.policy-content p,
.policy-content li {
    color: #6c757d;
    line-height: 1.7;
}

.policy-content ul {
    padding-left: 1.25rem;
}

.policy-content li {
    margin-bottom: 0.4rem;
}

@media (min-width: 200px) and (max-width: 768px) {
    .hero-sub {
        padding: 120px 0px 90px;
    }

    .hero-sub .phone-frame {
        margin-top: 30px;
        max-width: 210px;
    }

    .page-head {
        padding: 110px 0px 45px;
    }
}