/* /services/{slug} — sakit, yığcam detal: geniş cover, başlıq, «nələr daxildir», sağda əlaqə kartı */
.svs-page { background: #f8fafc; padding: 1rem 1rem 3rem; }
.svs-wrap { max-width: 72rem; margin: 0 auto; }
.svs-crumb { margin-bottom: .75rem; }
.svs-crumb a { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; font-size: .875rem; font-weight: 600; color: #283571; text-decoration: none; }
.svs-crumb a:hover { color: #00AEEF; }

.svs-grid { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "cta" "body"; }
@media (min-width: 1024px) {
    .svs-grid { grid-template-columns: minmax(0, 1fr) 21rem; grid-template-areas: "head cta" "body cta"; gap: 1.25rem; align-items: start; }
    .svs-cta { position: sticky; top: 6rem; }
}
.svs-head { grid-area: head; background: #fff; border: 1px solid #e2e8f0; border-radius: .875rem; overflow: hidden; box-shadow: 0 1px 3px rgb(15 23 42 / .05); }
.svs-body { grid-area: body; display: flex; flex-direction: column; gap: 1rem; min-width: 0; }

.svs-cover { position: relative; margin: 0; aspect-ratio: 2 / 1; background: #1e293b; cursor: zoom-in; overflow: hidden; }
.svs-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svs-cover:focus-visible { outline: 3px solid #00AEEF; outline-offset: -3px; }
.svs-cover--ph { display: flex; align-items: center; justify-content: center; color: #fff; cursor: default; }
.svs-cover--ph i { font-size: 3rem; opacity: .9; }
.svs-cover__hint { position: absolute; right: .75rem; bottom: .75rem; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; font-size: .75rem; font-weight: 600; color: #fff; background: rgb(15 23 42 / .6); border-radius: 9999px; pointer-events: none; }

.svs-title { padding: 1rem 1.125rem 1.25rem; }
@media (min-width: 768px) { .svs-title { padding: 1.5rem 1.75rem 1.75rem; } }
.svs-tags { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .625rem; }
.svs-tag { display: inline-flex; align-items: center; min-height: 28px; padding: .125rem .75rem; font-size: .75rem; font-weight: 600; color: #0369a1; background: #f0f9ff; border-radius: 9999px; text-decoration: none; }
a.svs-tag:hover { background: #e0f2fe; }
.svs-tag--gold { color: #92400e; background: #fef3c7; }
.svs-title__row { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.svs-title h1 { margin: 0; font-size: 1.5rem; font-weight: 800; line-height: 1.2; color: #111827; letter-spacing: -.01em; overflow-wrap: anywhere; }
@media (min-width: 768px) { .svs-title h1 { font-size: 2rem; } }
.svs-lead { margin: .75rem 0 0; font-size: 1rem; line-height: 1.55; color: #475569; }
.svs-meta { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-top: .875rem; font-size: .875rem; color: #64748b; }
.svs-meta__price { font-weight: 800; color: #283571; }

/* əlaqə kartı */
.svs-cta { grid-area: cta; background: #fff; border: 1px solid #e2e8f0; border-radius: .875rem; padding: 1.125rem; box-shadow: 0 1px 3px rgb(15 23 42 / .05); }
.svs-cta h2 { margin: 0; font-size: 1.125rem; font-weight: 800; color: #111827; }
.svs-cta > p { margin: .25rem 0 .875rem; font-size: .8125rem; line-height: 1.45; color: #475569; }
.svs-cta__list { display: flex; flex-direction: column; gap: .5rem; }
.svs-wa { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 52px; padding: .5rem .875rem; color: #166534; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: .75rem; text-decoration: none; cursor: pointer; text-align: left; transition: background .15s; }
.svs-wa:hover { background: #dcfce7; }
.svs-wa i { font-size: 1.5rem; flex: none; }
.svs-wa span { display: flex; flex-direction: column; min-width: 0; }
.svs-wa b { font-size: .9375rem; font-weight: 700; }
.svs-wa small { font-size: .75rem; opacity: .85; overflow-wrap: anywhere; }
.svs-wa.is-main { color: #fff; background: #16a34a; border-color: #16a34a; }
.svs-wa.is-main:hover { background: #15803d; }
.svs-call { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; margin-top: .5rem; font-size: .875rem; font-weight: 700; color: #283571; background: #f1f5f9; border-radius: .75rem; text-decoration: none; }
.svs-call:hover { background: #e2e8f0; }
.svs-reg { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: .5rem; font-size: .875rem; font-weight: 600; color: #283571; text-decoration: none; border-radius: .75rem; }
.svs-reg:hover { color: #00AEEF; }
.svs-wa:focus-visible, .svs-call:focus-visible, .svs-reg:focus-visible { outline: 2px solid #00AEEF; outline-offset: 2px; }

/* təsvir */
.svs-card { background: #fff; border: 1px solid #e2e8f0; border-radius: .875rem; padding: 1.125rem; box-shadow: 0 1px 3px rgb(15 23 42 / .05); }
@media (min-width: 768px) { .svs-card { padding: 1.5rem 1.75rem; } }
.svs-card h2 { margin: 0 0 .75rem; font-size: 1.125rem; font-weight: 800; color: #111827; }
.svs-prose { font-size: 1rem; line-height: 1.65; color: #334155; }
.svs-prose p { margin: 0 0 .75rem; }
.svs-prose ul { list-style: none; padding: 0; margin: .5rem 0 .75rem; display: grid; gap: .5rem; }
.svs-prose ul li { position: relative; padding: .625rem .875rem .625rem 2.5rem; background: #f8fafc; border: 1px solid #eef2f7; border-radius: .625rem; }
.svs-prose ul li::before { content: "\f00c"; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", sans-serif; font-weight: 900; position: absolute; left: .875rem; top: .625rem; color: #16a34a; font-size: .875rem; }
@media (min-width: 768px) { .svs-prose ul { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.svs-prose h2, .svs-prose h3 { margin: 1rem 0 .5rem; font-weight: 800; color: #111827; }

.svs-links { display: flex; flex-wrap: wrap; gap: .5rem; }
.svs-link { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .5rem 1rem; font-size: .875rem; font-weight: 600; color: #283571; background: #fff; border: 1px solid #e2e8f0; border-radius: .75rem; text-decoration: none; }
.svs-link:hover { border-color: #00AEEF; }
.svs-link--youtube { color: #b91c1c; }
.svs-link--whatsapp { color: #166534; }

.svs-page .service-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; }
.svs-page .service-action { min-height: 44px; }

.svs-pn { display: grid; gap: .5rem; grid-template-columns: 1fr; margin-top: 1.5rem; }
@media (min-width: 640px) { .svs-pn { grid-template-columns: 1fr 1fr; } }
.svs-pn a { display: flex; flex-direction: column; gap: .125rem; padding: .75rem 1rem; min-height: 56px; background: #fff; border: 1px solid #e2e8f0; border-radius: .75rem; text-decoration: none; }
.svs-pn a:hover { border-color: #00AEEF; }
.svs-pn small { font-size: .6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
.svs-pn b { font-size: .875rem; color: #111827; }
.svs-pn .is-next { text-align: right; }

.svs-related { margin-top: 2rem; }
.svs-related h2 { margin: 0 0 .75rem; font-size: 1.25rem; font-weight: 800; color: #111827; }
.svs-related .svc-grid { grid-template-columns: 1fr; }
@media (min-width: 640px) { .svs-related .svc-grid { grid-template-columns: repeat(3, 1fr); } }

@media (prefers-reduced-motion: reduce) { .svs-wa { transition: none; } }

/* «Uyğun kurslarım» siyahısı — tək sütun, kitab ikonu */
.svs-prose .svs-courses-h { margin: 1.25rem 0 .375rem; font-size: 1.0625rem; }
.svs-prose ul.svs-courses { grid-template-columns: minmax(0, 1fr); }
.svs-prose ul.svs-courses li { font-size: .9375rem; line-height: 1.5; }
.svs-prose ul.svs-courses li::before { content: "\f02d"; color: #283571; }
.svs-prose ul.svs-courses a { color: #283571; text-decoration: none; }
.svs-prose ul.svs-courses a:hover { color: #2962FF; text-decoration: underline; }

/* «Uyğun kurslarım» — şəkilli kurs kartları: mobildə native scroll-snap rail, ≥768px grid */
.svs-courses-sec { grid-area: courses; background: #fff; border: 1px solid #e2e8f0; border-radius: .875rem; padding: 1.125rem; box-shadow: 0 1px 3px rgb(15 23 42 / .05); min-width: 0; }
@media (min-width: 768px) { .svs-courses-sec { padding: 1.5rem 1.75rem; } }
.svs-courses-sec h2 { margin: 0; font-size: 1.25rem; font-weight: 800; color: #111827; }
.svs-courses-sec__sub { margin: .25rem 0 .875rem; font-size: .875rem; line-height: 1.45; color: #475569; }
.svs-ccards { display: grid; gap: .875rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .svs-ccards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.svs-ccard { display: flex; flex-direction: column; min-width: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: .875rem; overflow: hidden; transition: border-color .15s, box-shadow .15s; }
.svs-ccard:hover { border-color: #00AEEF; box-shadow: 0 6px 18px rgb(15 23 42 / .08); }
.svs-ccard__img { display: block; aspect-ratio: 16 / 9; background: #e2e8f0; overflow: hidden; }
.svs-ccard__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.svs-ccard__ph { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff; font-size: 2rem; background: #283571; }
.svs-ccard__body { display: flex; flex-direction: column; gap: .5rem; flex: 1; padding: .75rem .875rem .875rem; }
.svs-ccard__body h3 { margin: 0; font-size: .9375rem; font-weight: 800; line-height: 1.3; }
.svs-ccard__body h3 a { color: #111827; text-decoration: none; }
.svs-ccard__body h3 a:hover { color: #283571; text-decoration: underline; }
.svs-ccard__d { margin: 0; font-size: .8125rem; line-height: 1.45; color: #475569; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.svs-ccard__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem .75rem; margin-top: auto; font-size: .8125rem; color: #475569; }
.svs-ccard__t { min-width: 0; overflow-wrap: anywhere; }
.svs-ccard__p { font-weight: 800; color: #283571; font-size: .9375rem; }
.svs-ccard__p s { font-weight: 500; color: #64748b; font-size: .8125rem; }
.svs-ccard__btn { display: flex; align-items: center; justify-content: center; gap: .5rem; min-height: 44px; font-size: .875rem; font-weight: 700; color: #fff; background: #283571; border-radius: .75rem; text-decoration: none; }
.svs-ccard__btn:hover { background: #1e2a5a; }
.svs-ccard__btn:focus-visible, .svs-ccard__body h3 a:focus-visible, .svs-ccards:focus-visible { outline: 2px solid #00AEEF; outline-offset: 2px; }
@media (max-width: 767.98px) {
    .svs-ccards { display: flex; gap: .75rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: .25rem; }
    .svs-ccards::-webkit-scrollbar { display: none; }
    .svs-ccard { flex: 0 0 82%; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .svs-ccard { transition: none; } }

.svs-grid--courses { grid-template-areas: "head" "courses" "cta" "body"; }
@media (min-width: 1024px) { .svs-grid--courses { grid-template-areas: "head cta" "courses cta" "body cta"; } }