/* =====================================================================
   Masajlar sayfası (private/el-massages.php)
   ===================================================================== */
:root { --mp-ink: #0b5566; --mp-text: #2a5d68; }

.el-mpage { padding: clamp(2rem, 4.5vw, 3.75rem) 0 clamp(2.5rem, 6vw, 4.5rem); border-top: 4px solid var(--el-teal); }
.el-mpage__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: clamp(2rem, 6vw, 6rem); align-items: start; }

.el-mpage__title {
    margin: 0 0 1.2rem;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: clamp(2.2rem, 4.6vw, 3.4rem);
    letter-spacing: -.03em;
    line-height: 1.05;
    color: var(--mp-ink);
}
.el-mpage__text { color: var(--mp-text); font-size: clamp(1.02rem, 1.4vw, 1.2rem); line-height: 1.75; max-width: 62ch; }
.el-mpage__text p { margin: 0 0 1.25em; }
.el-mpage__text > :last-child { margin-bottom: 0; }

.el-mpage__btn {
    display: inline-flex; align-items: center; justify-content: center;
    margin-top: clamp(1.6rem, 3vw, 2.4rem);
    padding: .95em 2.6em;
    border: 2px solid var(--mp-ink);
    border-radius: 999px;
    color: var(--mp-ink);
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.el-mpage__btn:hover, .el-mpage__btn:focus-visible { background: var(--mp-ink); color: #fff; }

/* Sağ sütun: menüdeki masaj listeleri */
.el-mpage__side { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); }
.el-mpage__gtitle {
    margin: 0 0 .7rem;
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: clamp(1.35rem, 2vw, 1.75rem);
    letter-spacing: -.02em;
    line-height: 1.2;
    color: var(--mp-ink);
}
.el-mpage__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.el-mpage__group li { position: relative; padding-left: 1.6rem; }
.el-mpage__group li::before { content: ""; position: absolute; left: .35rem; top: .62em; width: 7px; height: 7px; border-radius: 50%; background: var(--mp-ink); }
.el-mpage__group a {
    color: var(--mp-ink);
    font-size: 1.08rem;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}
.el-mpage__group a:hover { color: var(--el-teal); text-decoration-thickness: 2px; }

/* Tablet ve telefon: liste metnin altına iner */
@media (max-width: 900px) {
    .el-mpage__grid { grid-template-columns: 1fr; }
    .el-mpage__side { grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--el-line); padding-top: 1.8rem; }
}
@media (max-width: 520px) {
    .el-mpage__side { grid-template-columns: 1fr; }
    .el-mpage__btn { width: 100%; }
}

/* Faydalar / SSS bağlantıları (sağ sütun altı) */
.el-mpage__more { display: grid; gap: .55rem; padding-top: 1.2rem; border-top: 1px solid var(--el-line); }
.el-mpage__more a { color: var(--mp-ink); font-weight: 800; font-size: 1.1rem; text-decoration: none; }
.el-mpage__more a:hover, .el-mpage__more a[aria-current] { color: var(--el-teal); text-decoration: underline; text-underline-offset: 4px; }

/* ===== Masaj Çeşitleri ve Terapötik Masaj Eklentileri (private/el-massage-types.php) ===== */
.el-types { padding: clamp(2rem, 4.5vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4rem); scroll-margin-top: 84px; }
.el-types:first-of-type { border-top: 4px solid var(--el-teal); }
.el-types--addons { background: #e9f1ee; padding-top: clamp(2.2rem, 4.5vw, 3.4rem); }
.el-types__title {
    margin: 0 0 .55rem;
    font-family: var(--font-sans); font-weight: 800;
    font-size: clamp(1.75rem, 3.3vw, 2.5rem); letter-spacing: -.025em; line-height: 1.15;
    color: var(--mp-ink);
}
.el-types__title--sub { font-size: clamp(1.6rem, 2.9vw, 2.2rem); }
.el-types__lead { margin: 0 0 clamp(1.4rem, 3vw, 2.2rem); max-width: 46rem; color: var(--mp-text); font-size: clamp(1rem, 1.3vw, 1.12rem); line-height: 1.6; }
.el-types__lead p { margin: 0; }

.el-tgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.6rem, 3vw, 2.6rem) clamp(1rem, 2.4vw, 2rem); }
.el-tgrid--plain { gap: clamp(1.4rem, 2.6vw, 2.2rem) clamp(1rem, 2.4vw, 2rem); }
.el-tcard { display: flex; flex-direction: column; }
.el-tcard__img { display: block; aspect-ratio: 5 / 4; overflow: hidden; border-radius: 4px; background: #eef3f4; margin-bottom: .9rem; }
.el-tcard__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.el-tcard:hover .el-tcard__img img { transform: scale(1.04); }
.el-tcard__name {
    margin: 0 0 .35rem;
    font-family: var(--font-sans); font-weight: 800;
    font-size: clamp(1rem, 1.35vw, 1.12rem); letter-spacing: .02em; text-transform: uppercase; line-height: 1.3;
}
.el-tcard__name a { color: var(--mp-ink); text-decoration: none; }
.el-tcard__name a:hover { text-decoration: underline; text-underline-offset: 4px; }
.el-tcard__desc {
    margin: 0 0 .95rem; color: #3f5f66; font-size: .95rem; line-height: 1.5;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.el-tcard__actions { margin-top: auto; display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.el-tcard__btn {
    display: inline-flex; align-items: center; justify-content: center; text-align: center;
    padding: .62em .6em; border: 1.5px solid var(--mp-ink); border-radius: 999px;
    color: var(--mp-ink); background: transparent;
    font-weight: 800; font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}
.el-tcard__btn:hover, .el-tcard__btn:focus-visible { background: var(--mp-ink); color: #fff; }

@media (max-width: 1024px) { .el-tgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
    .el-tgrid { grid-template-columns: 1fr; }
    .el-tcard__img { aspect-ratio: 16 / 10; }
    .el-tgrid--plain { gap: 1.4rem; }
    .el-tcard--plain { padding-bottom: 1.4rem; border-bottom: 1px solid rgba(11, 85, 102, .15); }
    .el-tcard--plain:last-child { border-bottom: 0; padding-bottom: 0; }
    .el-tcard__btn { font-size: .78rem; padding: .75em .6em; }
    .el-types { scroll-margin-top: 72px; }
}

/* ===== Masajın Faydaları / SSS (partials/el-info-page.php) ===== */
.el-ipage { padding: clamp(1.8rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 4rem); border-top: 4px solid var(--el-teal); }
.el-ipage__title {
    margin: 0 0 1rem;
    font-family: var(--font-sans); font-weight: 800;
    font-size: clamp(1.75rem, 3.2vw, 2.4rem); letter-spacing: -.02em; line-height: 1.15;
    color: var(--mp-ink);
}
.el-ipage__body::after { content: ""; display: block; clear: both; }
.el-ipage__img {
    float: right; width: min(36%, 420px); height: auto; aspect-ratio: 5 / 4; object-fit: cover;
    margin: .3rem 0 1.2rem clamp(1.2rem, 3vw, 2.2rem); border-radius: 2px; background: #eef3f4;
}
.el-ipage__text { color: var(--mp-text); font-size: clamp(1rem, 1.2vw, 1.06rem); line-height: 1.7; }
.el-ipage__text p { margin: 0 0 1.2em; }
.el-ipage__text > :last-child { margin-bottom: 0; }
.el-ipage__text ul, .el-ipage__text ol { margin: -.6em 0 .7em; padding-left: 2.2rem; }
.el-ipage__text li { margin: .2em 0; }
.el-ipage__text li::marker { color: var(--mp-ink); }
.el-ipage__text h2, .el-ipage__text h3, .el-ipage__text h4 { color: var(--mp-ink); font-family: var(--font-sans); font-weight: 800; letter-spacing: -.015em; line-height: 1.25; margin: 1.5em 0 .5em; }
.el-ipage__text h2 { font-size: 1.4rem; }
.el-ipage__text h3 { font-size: 1.2rem; }
.el-ipage__text > :first-child { margin-top: 0; }
.el-ipage__text strong { color: var(--mp-ink); }
/* Yalnızca kalın yazıdan oluşan paragraf → vurgu satırı ("Kendinize zaman ayırın…") */
.el-ipage__text p > strong:only-child { display: block; font-size: 1.2em; font-weight: 800; line-height: 1.4; }
.el-ipage__btn { margin-top: clamp(1.4rem, 2.6vw, 2rem); padding: .85em 2.6em; }

/* SSS: soru başlığı + kısa cevap, sıkı aralık; buton ortada */
.el-ipage--faq .el-ipage__text { font-size: clamp(.95rem, 1.1vw, 1rem); line-height: 1.6; }
.el-ipage--faq .el-ipage__text h2, .el-ipage--faq .el-ipage__text h3, .el-ipage--faq .el-ipage__text h4 { font-size: clamp(1.1rem, 1.5vw, 1.25rem); margin: 1.6em 0 .35em; }
.el-ipage--faq .el-ipage__text p { margin: 0 0 .5em; }
.el-ipage__cta { text-align: center; }

@media (max-width: 760px) {
    .el-ipage__img { float: none; display: block; width: 100%; aspect-ratio: 16 / 11; margin: 0 0 1.2rem; }
}
@media (max-width: 520px) {
    .el-ipage__btn { width: 100%; }
    .el-ipage__text ul, .el-ipage__text ol { padding-left: 1.4rem; }
}
