.yasal-sayfa {
    padding: 18px 18px 96px;
}

.yasal-hero {
    background: linear-gradient(135deg, #079ca8 0%, #0ca6b5 100%);
    color: #fff;
    margin: -18px -18px 0;
    padding: 26px 22px 74px;
}

.yasal-geri {
    align-items: center;
    color: #fff;
    display: inline-flex;
    font-weight: 800;
    gap: 8px;
    margin-bottom: 16px;
    text-decoration: none;
}

.yasal-hero h1 {
    font-size: 2.05rem;
    font-weight: 900;
    letter-spacing: 0;
    margin: 0;
}

.yasal-hero p {
    color: rgba(255, 255, 255, .9);
    font-size: .98rem;
    line-height: 1.5;
    margin: 8px 0 0;
    max-width: 680px;
}

.yasal-kapsayici {
    display: grid;
    gap: 14px;
    margin: -46px auto 0;
    max-width: 780px;
}

.yasal-kart,
.yasal-detay-kart,
.yasal-bos,
.yasal-digerleri {
    background: #fff;
    border: 1px solid #d7e5ee;
    border-radius: 8px;
    box-shadow: 0 18px 36px rgba(15, 23, 42, .12);
}

.yasal-kart {
    align-items: center;
    display: flex;
    gap: 16px;
    padding: 18px;
}

.yasal-ikon {
    align-items: center;
    background: #e6f7fa;
    border-radius: 8px;
    color: #079ca8;
    display: inline-flex;
    flex: 0 0 58px;
    font-size: 1.45rem;
    height: 58px;
    justify-content: center;
    width: 58px;
}

.yasal-kart h2,
.yasal-detay-baslik h2 {
    color: #07142c;
    font-size: 1.08rem;
    font-weight: 900;
    letter-spacing: 0;
    margin: 0 0 6px;
}

.yasal-kart p,
.yasal-detay-baslik p {
    color: #5c6c81;
    font-size: .92rem;
    line-height: 1.48;
    margin: 0;
}

.yasal-kart a {
    align-items: center;
    color: #078894;
    display: inline-flex;
    font-size: .9rem;
    font-weight: 900;
    gap: 8px;
    margin-top: 12px;
    text-decoration: none;
}

.yasal-detay-kart {
    padding: 20px;
}

.yasal-detay-baslik {
    align-items: center;
    border-bottom: 1px solid #e3edf3;
    display: flex;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 18px;
}

.yasal-metin {
    color: #24364f;
    font-size: .98rem;
    line-height: 1.72;
}

.yasal-bos {
    color: #5c6c81;
    font-weight: 800;
    padding: 20px;
}

.yasal-digerleri {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 14px;
}

.yasal-digerleri a {
    background: #f2f8fb;
    border: 1px solid #cfe1ea;
    border-radius: 999px;
    color: #0f3d56;
    font-size: .82rem;
    font-weight: 900;
    padding: 8px 12px;
    text-decoration: none;
}

@media (max-width: 620px) {
    .yasal-kart,
    .yasal-detay-baslik {
        align-items: flex-start;
    }

    .yasal-hero h1 {
        font-size: 1.8rem;
    }
}