/* ==========================================================================
   Həllin detal səhifəsi - /{dil}/solutions/{slug}
   --------------------------------------------------------------------------
   Yalnız bu səhifəyə aiddir; `pages/solutions/detail.blade.php`-dən
   `@push('styles')` ilə yüklənir. Prefiks `sd-`, yəni nə tema faylındakı
   `section.support_details` qaydaları (köhnə dizayn), nə də siyahı
   səhifəsinin `sol-` qaydaları ilə toqquşmur.

   Rənglər `style.css`-dəki `:root` dəyişənlərindəndir (--qr-blue, --qr-light),
   tipoqrafiya isə «Həllərimiz» səhifəsi ilə eynidir: Poppins / Poppins Medium.
   ========================================================================== */

.sd-page {
    position: relative;
    --sd-text: #020202;
    --sd-muted: #5B5B5B;
    --sd-border: #E4E4E4;
    --sd-surface: #F7F7F7;
    --sd-blue: var(--qr-blue, #06A4ED);

    color: var(--sd-text);
    background: #fff;
    /* Fon ləkələri konteynerdən çıxır - `clip` yalnız kəsir, sticky/anchor
       davranışını pozmur */
    overflow-x: clip;
    /* `.sd-decor` `z-index: -1`-dədir - öz yığın konteksti olmasa səhifənin
       ağ fonunun altına düşərdi */
    isolation: isolate;
}

/* ── Dekorativ fon ─────────────────────────────────────────────────────── */

.sd-decor {
    position: absolute;
    z-index: -1;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.sd-decor__shape {
    position: absolute;
    display: block;
    opacity: .45;
    filter: blur(3px);
    background: linear-gradient(135deg, rgba(6, 164, 237, .13) 0%, rgba(91, 91, 91, .07) 55%, rgba(91, 91, 91, 0) 100%);
}

.sd-decor__shape--left {
    top: 1%;
    left: -5%;
    width: min(28vw, 420px);
    height: min(38vw, 560px);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.sd-decor__shape--right {
    top: 26%;
    right: -5%;
    width: min(30vw, 460px);
    height: min(42vw, 620px);
    background: linear-gradient(225deg, rgba(6, 164, 237, .11) 0%, rgba(91, 91, 91, .06) 55%, rgba(91, 91, 91, 0) 100%);
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

/* ── Açılma animasiyası (solutions.js) ─────────────────────────────────── */

.sd-page [data-sol-reveal] {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity .5s ease, transform .5s ease;
}

.sd-page [data-sol-reveal].is-visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .sd-page [data-sol-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* ── Hero ──────────────────────────────────────────────────────────────── */

.sd-hero { padding: 34px 0 76px; }

.sd-crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px 0;
    color: var(--sd-muted);
    font: 400 14px/22px "Poppins", sans-serif;
}

.sd-crumbs a {
    color: var(--sd-muted);
    text-decoration: none;
    transition: color .25s ease;
}

.sd-crumbs a:hover { color: var(--sd-blue); }

.sd-crumbs span[aria-current] {
    color: var(--sd-text);
    /* Uzun başlıq breadcrumb-ı iki sətrə salmasın */
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-label {
    display: inline-block;
    margin: 0 0 16px 0;
    padding: 7px 16px;
    border: 1px solid var(--sd-border);
    border-radius: 40px;
    background: var(--sd-surface);
    color: var(--sd-muted);
    font: 400 13px/20px "Poppins", sans-serif;
    letter-spacing: .02em;
}

.sd-hero__title {
    margin: 0 0 18px 0;
    color: var(--sd-text);
    font: 500 44px/62px "Poppins Medium", sans-serif;
}

.sd-hero__lead {
    margin: 0 0 30px 0;
    max-width: 540px;
    color: var(--sd-muted);
    font: 400 17px/30px "Poppins", sans-serif;
}

.sd-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* İkinci dərəcəli düymə - qara `navigation_link` pill-in yanında */
.sd-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12.5px 28px;
    border: 1px solid var(--sd-border);
    border-radius: 36px;
    background: #fff;
    color: var(--sd-text);
    font: 400 16px/24px "Poppins", sans-serif;
    text-decoration: none;
    transition: border-color .25s ease, color .25s ease;
}

.sd-btn-ghost:hover {
    border-color: var(--sd-blue);
    color: var(--sd-blue);
}

/* Şəkil - səhifənin əsas vizualı */

.sd-hero__media {
    position: relative;
    /* Sabit nisbət: şəkil gec yüklənəndə sətir sıçramır (CLS) */
    aspect-ratio: 16 / 9;
    max-width: 100%;
    border: 1px solid #EDEDED;
    border-radius: 20px;
    overflow: hidden;
    background: var(--sd-surface);
    box-shadow: 0 12px 30px rgba(2, 2, 2, .07);
}

.sd-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ── Üstünlük zolağı ───────────────────────────────────────────────────── */

.sd-features { padding: 0 0 80px; }

.sd-features__grid {
    display: grid;
    /* Bənd sayı paneldən gəlir (3 və ya 4) - sabit sütun sayı verilmir */
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}

.sd-feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 22px;
    border: 1px solid var(--sd-border);
    border-radius: 18px;
    background: #fff;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.sd-feature:hover {
    border-color: #D2D2D2;
    box-shadow: 0 6px 18px rgba(2, 2, 2, .04);
}

.sd-feature__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(6, 164, 237, .08);
}

.sd-feature__icon svg {
    width: 20px;
    height: 20px;
}

.sd-feature__icon svg path {
    fill: none;
    stroke: var(--sd-blue);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sd-feature__body { min-width: 0; }

.sd-feature__body h3 {
    margin: 0 0 6px 0;
    color: var(--sd-text);
    font: 500 16px/24px "Poppins Medium", sans-serif;
}

.sd-feature__body p {
    margin: 0;
    color: var(--sd-muted);
    font: 400 14px/22px "Poppins", sans-serif;
}

/* ── Əsas məzmun ───────────────────────────────────────────────────────── */

.sd-main { padding: 0 0 88px; }

.sd-main__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    align-items: start;
    gap: 48px;
}

/* Sol sütun boşdursa çağırış kartı bütün eni tutur */
.sd-main__grid--single { grid-template-columns: minmax(0, 1fr); }

.sd-block + .sd-block { margin-top: 48px; }

.sd-block__title {
    margin: 0 0 18px 0;
    color: var(--sd-text);
    font: 500 30px/44px "Poppins Medium", sans-serif;
}

.sd-text {
    margin: 0 0 16px 0;
    color: var(--sd-muted);
    font: 400 16px/30px "Poppins", sans-serif;
}

.sd-text:last-child { margin-bottom: 0; }

/* Addımlar - nömrələr CSS sayğacındandır */

.sd-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: sd-step;
    display: grid;
    gap: 16px;
}

.sd-step {
    position: relative;
    padding: 20px 22px 20px 68px;
    border: 1px solid var(--sd-border);
    border-radius: 18px;
    background: #fff;
}

.sd-step::before {
    counter-increment: sd-step;
    content: counter(sd-step, decimal-leading-zero);
    position: absolute;
    top: 20px;
    left: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(6, 164, 237, .08);
    color: var(--sd-blue);
    font: 500 13px/20px "Poppins Medium", sans-serif;
}

.sd-step h3 {
    margin: 0 0 6px 0;
    color: var(--sd-text);
    font: 500 18px/28px "Poppins Medium", sans-serif;
}

.sd-step p {
    margin: 0;
    color: var(--sd-muted);
    font: 400 15px/26px "Poppins", sans-serif;
}

/* Yan sütun */

.sd-side {
    display: grid;
    gap: 24px;
}

/* Kimlər üçün uyğundur */

.sd-audience-card {
    padding: 28px 26px;
    border: 1px solid var(--sd-border);
    border-radius: 24px;
    background: #fff;
}

.sd-audience-card h2 {
    margin: 0 0 18px 0;
    color: var(--sd-text);
    font: 500 20px/30px "Poppins Medium", sans-serif;
}

.sd-audience {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sd-audience li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--sd-text);
    font: 400 16px/26px "Poppins", sans-serif;
}

.sd-audience em {
    display: block;
    color: var(--sd-muted);
    font: 400 14px/22px "Poppins", sans-serif;
    font-style: normal;
}

.sd-audience__mark {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-top: 9px;
    border-radius: 50%;
    background: var(--sd-blue);
    opacity: .55;
}

/* Çağırış kartı */

.sd-cta {
    padding: 32px 30px;
    border-radius: 24px;
    background:
        radial-gradient(60% 120% at 18% 12%, rgba(6, 164, 237, .12), transparent 70%),
        radial-gradient(52% 110% at 88% 92%, rgba(6, 164, 237, .08), transparent 70%),
        var(--sd-surface);
}

.sd-cta h2 {
    margin: 0 0 12px 0;
    color: var(--sd-text);
    font: 500 24px/36px "Poppins Medium", sans-serif;
}

.sd-cta p {
    margin: 0 0 24px 0;
    color: var(--sd-muted);
    font: 400 15px/26px "Poppins", sans-serif;
}

.sd-cta__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* Sol sütun boşdursa (paneldən yeni əlavə olunmuş həll) kartlar yan-yana
   düzülür - tək dar sütun səhifənin ortasında qalmasın */
.sd-main__grid--single .sd-side {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    align-items: start;
}

.sd-main__grid--single .sd-cta { padding: 36px 34px; }

/* ── Digər həllərimiz ──────────────────────────────────────────────────── */

.sd-others { padding: 0 0 96px; }

.sd-others__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin: 0 0 28px 0;
}

.sd-others__head h2 {
    margin: 0;
    color: var(--sd-text);
    font: 500 30px/44px "Poppins Medium", sans-serif;
}

.sd-others__all {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--sd-text);
    font: 400 16px/24px "Poppins", sans-serif;
    text-decoration: none;
}

.sd-others__all .icon,
.sd-other__more .icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
}

/* Kartın hər yeri linkdir - markup dəyişmir, ekran oxuyucuda tək link qalır */
.sd-other__more::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.sd-others__all .icon img,
.sd-other__more .icon img { transition: transform .25s ease; }

.sd-others__all:hover,
.sd-other__more:hover { color: var(--sd-blue); }

.sd-others__all:hover .icon img,
.sd-other__more:hover .icon img { transform: translateX(6px); }

.sd-others__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.sd-other {
    display: flex;
    flex-direction: column;
    /* Kartın hər yeri kliklənir - «Daha çox» linki görünməz təbəqə sərir
       (ana səhifədəki `.hs-card` ilə eyni qəlib) */
    position: relative;
    padding: 26px 26px 24px;
    border: 1px solid var(--sd-border);
    border-radius: 20px;
    background: #fff;
    transition: transform .3s ease, border-color .25s ease, box-shadow .25s ease;
}

.sd-other:hover {
    transform: translateY(-4px);
    border-color: #DCDCDC;
    box-shadow: 0 12px 28px rgba(2, 2, 2, .07);
}

.sd-other__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    margin: 0 0 16px 0;
    padding: 10px;
    border-radius: 13px;
    background: rgba(6, 164, 237, .08);
}

.sd-other__icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.sd-other__title {
    margin: 0 0 10px 0;
    color: var(--sd-text);
    font: 500 20px/30px "Poppins Medium", sans-serif;
}

.sd-other__text {
    margin: 0 0 20px 0;
    color: var(--sd-muted);
    font: 400 15px/26px "Poppins", sans-serif;
    /* Kartların hündürlüyü bir-birindən çox fərqlənməsin */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.sd-other__more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    /* Mətn qısa olan kartlarda da link altda qalır */
    margin-top: auto;
    align-self: flex-start;
    color: var(--sd-text);
    font: 400 15px/24px "Poppins", sans-serif;
    text-decoration: none;
}

/* ── Breakpoint-lər ────────────────────────────────────────────────────── */

@media only screen and (max-width: 1199.98px) {
    .sd-hero__title { font: 500 38px/54px "Poppins Medium", sans-serif; }
    .sd-main__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 330px); gap: 36px; }
    .sd-block__title,
    .sd-others__head h2 { font: 500 27px/40px "Poppins Medium", sans-serif; }
}

@media only screen and (max-width: 991.98px) {
    .sd-hero { padding: 26px 0 56px; }
    .sd-hero__title { font: 500 32px/46px "Poppins Medium", sans-serif; }
    .sd-hero__lead { font: 400 16px/28px "Poppins", sans-serif; }
    /* Şəkil mətnin altına düşür - aradakı boşluq buradan gəlir */
    .sd-hero__visual { margin-top: 34px; }
    .sd-features { padding-bottom: 56px; }
    .sd-main { padding-bottom: 64px; }
    .sd-main__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
    .sd-others { padding-bottom: 72px; }
    .sd-others__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media only screen and (max-width: 767.98px) {
    .sd-hero__title { font: 500 28px/40px "Poppins Medium", sans-serif; }
    .sd-block__title,
    .sd-others__head h2 { font: 500 24px/36px "Poppins Medium", sans-serif; }
    .sd-others__grid { grid-template-columns: minmax(0, 1fr); }
}

@media only screen and (max-width: 575.98px) {
    .sd-hero { padding: 20px 0 44px; }
    .sd-hero__title { font: 500 25px/36px "Poppins Medium", sans-serif; }
    .sd-crumbs { font: 400 13px/20px "Poppins", sans-serif; }
    .sd-crumbs span[aria-current] { max-width: 160px; }
    /* Düymələr dar ekranda alt-alta və tam enli olur */
    .sd-actions,
    .sd-cta__actions { width: 100%; }
    .sd-actions > *,
    .sd-cta__actions > * { flex: 1 1 100%; justify-content: center; }
    .sd-hero__media { aspect-ratio: 16 / 10; border-radius: 16px; }
    .sd-block + .sd-block { margin-top: 36px; }
    .sd-step { padding: 18px 18px 18px 60px; }
    .sd-step::before { left: 18px; }
    .sd-cta,
    .sd-main__grid--single .sd-cta { padding: 26px 22px; }
    .sd-audience-card { padding: 24px 20px; }
    .sd-other { padding: 22px 20px; }
}