/* ==========================================================================
   «Həllərimiz» səhifəsi - /{dil}/solutions
   --------------------------------------------------------------------------
   Yalnız bu səhifəyə aiddir; `pages/solutions/index.blade.php`-dən
   `@push('styles')` ilə yüklənir. Tema faylı `style.css`-ə toxunulmayıb -
   köhnə `section.solutions` qaydaları orada qalır, amma yeni markup `sol-`
   prefiksi işlətdiyi üçün toqquşmur.

   Rənglər `style.css`-dəki `:root` dəyişənlərindəndir (--qr-blue, --qr-black,
   --qr-light) - yeni palitra uydurulmur. Tipoqrafiya «Üstünlüklər» səhifəsi
   ilə eynidir: Poppins / Poppins Medium.
   ========================================================================== */

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

    color: var(--sol-text);
    background: #fff;
    /* Fon ləkələri konteynerdən kənara çıxır - `hidden` olsaydı sticky/anchor
       davranışı pozulardı, `clip` yalnız kəsir */
    overflow-x: clip;
    /*
       Öz yığın konteksti: `.sol-decor` `z-index: -1` ilə çəkilir və
       `isolation` olmasa səhifənin ağ fonunun ALTINA düşüb görünməzdi.
    */
    isolation: isolate;
}

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

/*
   İki böyük, çox zəif üçbucaq kölgəsi - solda biri, sağda biri. Yalnız
   dərinlik üçündür: `z-index: -1` ilə bütün məzmunun arxasındadır,
   `pointer-events` bağlıdır, ekran oxuyucuya `aria-hidden` ilə görünmür.

   Şəkil işlədilmir (köhnə `grayback*.png` faylları) - forma `clip-path`,
   yumşaqlıq isə `blur` + aşağı `opacity` ilə qurulur.
*/
.sol-decor {
    position: absolute;
    z-index: -1;
    inset: 0;
    /* Formalar kənardan çıxır - üfüqi sürüşmə yaranmasın */
    overflow: hidden;
    pointer-events: none;
}

.sol-decor__shape {
    position: absolute;
    display: block;
    opacity: .5;
    /* Kəskin künc olmasın - forma «kölgəvari» qalsın */
    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%);
}

.sol-decor__shape--left {
    top: 3%;
    left: -5%;
    width: min(30vw, 460px);
    height: min(40vw, 600px);
    clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.sol-decor__shape--right {
    top: 22%;
    right: -5%;
    width: min(34vw, 520px);
    height: min(45vw, 680px);
    background: linear-gradient(225deg, rgba(6, 164, 237, .12) 0%, rgba(91, 91, 91, .07) 55%, rgba(91, 91, 91, 0) 100%);
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

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

/*
   Quruluş «Üstünlüklər» hero-su ilə eynidir: sola düzülmüş mətn sütunu +
   sağda yüngül illüstrasiya, eyni konteyner eni (Bootstrap `col-lg-6`),
   eyni tipoqrafiya və eyni düymə cütü.
*/

.sol-hero { padding: 24px 0 72px; }

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

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

/* Açar mətnində `<span>` var - mavi accent oradan gəlir */
.sol-hero__title span { color: var(--sol-blue); }

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

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

.sol-hero__visual { position: relative; }

/* Çox açıq mavi/yaşıl işıq - ağır gradient yox, yalnız fon hissi */
.sol-hero__visual::before {
    content: "";
    position: absolute;
    inset: -6% -4%;
    border-radius: 50%;
    background:
        radial-gradient(46% 46% at 34% 36%, rgba(6, 164, 237, .12), transparent 70%),
        radial-gradient(40% 40% at 72% 70%, rgba(169, 245, 4, .14), transparent 70%);
    z-index: 0;
}

.sol-orb {
    position: relative;
    z-index: 1;
    max-width: 480px;
    margin-inline: auto;
}

.sol-orb svg { display: block; width: 100%; height: auto; }

/* ── İllüstrasiyanın qələmləri ─────────────────────────────────────────── */

.sol-orb__ring { stroke: #E8E8E8; stroke-width: 1.2; fill: none; }
.sol-orb__ring--tilt { stroke: #F0F0F0; }

.sol-shape { stroke: #D9D9D9; stroke-width: 1.5; fill: none; }
.sol-shape--soft { stroke: #ECECEC; }
.sol-shape--line { fill: #E4E4E4; stroke: none; }

.sol-card { fill: #fff; stroke: var(--sol-border); stroke-width: 1.5; }

.sol-qr__frame,
.sol-qr__eye { fill: none; stroke: var(--sol-text); stroke-width: 1.5; }
.sol-qr__dot { fill: var(--sol-blue); stroke: none; }

/* Skan çərçivəsi - tək açıq mavi element, diqqəti QR-a yığır */
.sol-scan path {
    fill: none;
    stroke: var(--sol-blue);
    stroke-width: 2;
    stroke-linecap: round;
}

.sol-shield { fill: rgba(169, 245, 4, .12); stroke: var(--sol-text); stroke-width: 1.5; stroke-linejoin: round; }
.sol-check { fill: none; stroke: var(--sol-text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.sol-zone { fill: rgba(6, 164, 237, .07); stroke: var(--sol-blue); stroke-width: 1.4; }
.sol-pin { fill: #fff; stroke: var(--sol-text); stroke-width: 1.5; stroke-linejoin: round; }
.sol-pin__dot { fill: var(--sol-blue); stroke: none; }

.sol-bar { fill: rgba(6, 164, 237, .18); }
.sol-bar--accent { fill: rgba(6, 164, 237, .42); }
.sol-axis { stroke: #ECECEC; stroke-width: 1.2; }

.sol-dot--blue { fill: var(--sol-blue); }
.sol-dot--green { fill: var(--qr-green, #A9F504); }

/* Çox zəif üzmə - diqqəti yayındırmır */
.sol-orb .sol-float { animation: sol-float 7s ease-in-out infinite; transform-origin: center; }
.sol-orb .sol-float--b { animation-duration: 8.5s; animation-delay: -2s; }
.sol-orb .sol-float--c { animation-duration: 9.5s; animation-delay: -4s; }

@keyframes sol-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-7px); }
}

/* ── Zig-zag bloklar ───────────────────────────────────────────────────── */

.sol-list {
    padding: 0 0 96px;
    /* Nömrələr (01…06) buradan sayılır - Blade-də sayğac yoxdur */
    counter-reset: sol-item;
}

.sol-row {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 480px) minmax(0, 640px);
    justify-content: space-between;
    align-items: center;
    column-gap: 60px;
    /*
       Öz yığın konteksti: aşağıdakı `::before` ləkəsi `z-index: -1` ilə
       çəkilir və `isolation` olmasa səhifənin ağ fonunun ALTINA düşərdi.
    */
    isolation: isolate;
}

/*
   Çox zəif fon ləkəsi - şəklin arxasından çıxır. Tək məqsəd ağ səhifəni
   tamam boş buraxmamaqdır; qonşu bloklarda tərəfi dəyişir.
*/
.sol-row::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 50%;
    right: -6%;
    width: 46%;
    aspect-ratio: 1 / 1;
    transform: translateY(-50%);
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(6, 164, 237, .10), transparent 100%);
}

.sol-row:nth-child(even)::before {
    right: auto;
    left: -6%;
}

.sol-row + .sol-row { margin-top: 128px; }

.sol-row__body { order: 1; }
.sol-row__media { order: 2; }

/*
   Cüt bloklar: şəkil sola, mətn sağa. Sütun enləri də yerini dəyişir -
   yalnız `order` verilsəydi şəkil dar sütuna düşərdi.
*/
.sol-row:nth-child(even) { grid-template-columns: minmax(0, 640px) minmax(0, 480px); }
.sol-row:nth-child(even) .sol-row__media { order: 1; }
.sol-row:nth-child(even) .sol-row__body { order: 2; }

/* Nömrə + incə xətt */

.sol-row__no {
    color: var(--sol-blue);
    font: 500 15px/22px "Poppins Medium", sans-serif;
    letter-spacing: .06em;
}

.sol-row__no::before {
    counter-increment: sol-item;
    content: counter(sol-item, decimal-leading-zero);
}

.sol-row__rule {
    display: block;
    width: 40px;
    height: 2px;
    margin: 14px 0 20px 0;
    border-radius: 2px;
    background: var(--sol-blue);
    opacity: .45;
}

.sol-row__title {
    margin: 0 0 16px 0;
    color: var(--sol-text);
    font: 500 32px/46px "Poppins Medium", sans-serif;
}

.sol-row__text {
    margin: 0;
    max-width: 520px;
    color: var(--sol-muted);
    font: 400 16px/28px "Poppins", sans-serif;
}

.sol-row__more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 24px 0 0 0;
    color: var(--sol-text);
    font: 500 16px/24px "Poppins", sans-serif;
    text-decoration: none;
}

.sol-row__more .icon {
    display: inline-flex;
    width: 20px;
    height: 20px;
}

.sol-row__more .icon img { transition: transform .25s ease; }

.sol-row__more:hover { color: var(--sol-blue); }
.sol-row__more:hover .icon img { transform: translateX(6px); }

/* Şəkil */

.sol-row__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 20px;
}

/* ── Qısa xülasə zolağı ────────────────────────────────────────────────── */

.sol-benefits { padding: 0 0 96px; }

.sol-benefits__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

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

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

.sol-benefit__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: var(--sol-surface);
}

.sol-benefit__icon svg { width: 22px; height: 22px; }

.sol-benefit__icon svg path,
.sol-benefit__icon svg circle {
    fill: none;
    stroke: var(--sol-text);
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sol-benefit__body { min-width: 0; }

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

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

/* ── CTA ───────────────────────────────────────────────────────────────── */

.sol-cta { padding: 0 0 100px; }

.sol-cta__card {
    padding: 56px 48px;
    border-radius: 28px;
    text-align: center;
    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(--sol-surface);
}

.sol-cta__card h2 {
    margin: 0 0 12px 0;
    color: var(--sol-text);
    font: 500 32px/48px "Poppins Medium", sans-serif;
}

.sol-cta__card p {
    max-width: 620px;
    margin: 0 auto 28px auto;
    color: var(--sol-muted);
    font: 400 16px/28px "Poppins", sans-serif;
}

.sol-cta__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

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

.sol-btn-ghost:hover,
.sol-btn-ghost:focus-visible {
    border-color: var(--sol-text);
    background: var(--sol-surface);
    color: var(--sol-text);
}

/* ── Görünəndə yumşaq açılma (solutions.js `.is-visible` verir) ────────── */

.sol-page [data-sol-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .6s ease, transform .6s cubic-bezier(.22, .61, .36, 1);
}

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

@media (prefers-reduced-motion: reduce) {
    .sol-page [data-sol-reveal] { opacity: 1; transform: none; transition: none; }
    .sol-row__more .icon img { transition: none; }
    .sol-orb .sol-float { animation: none; }
}

/* ── Responsive ────────────────────────────────────────────────────────── */

@media only screen and (max-width: 1199.98px) {
    .sol-hero__title { font-size: 38px; line-height: 54px; }
    .sol-row { column-gap: 44px; }
    .sol-row__title { font-size: 28px; line-height: 40px; }
    .sol-cta__card h2 { font-size: 28px; line-height: 42px; }
}

@media only screen and (max-width: 991.98px) {
    /*
       Mobil sıra: breadcrumb → badge → H1 → izah → CTA → illüstrasiya.
       Bootstrap sütunları onsuz da bu ardıcıllıqla düzülür - `order` lazım
       deyil, yalnız mətn sütununun altına boşluq verilir.
    */
    .sol-hero { padding: 16px 0 48px; }
    .sol-hero__text { margin: 0 0 36px 0; }
    .sol-hero__title { font-size: 32px; line-height: 46px; }
    .sol-hero__lead { max-width: none; }
    .sol-orb { max-width: 380px; }

    /*
       Tək sütun. DOM sırası onsuz da «mətn → şəkil»-dir, ona görə cüt
       bloklardakı `order` sıfırlanır - bütün bloklar eyni ritmlə gedir.
    */
    .sol-row,
    .sol-row:nth-child(even) { grid-template-columns: minmax(0, 1fr); }

    .sol-row__body,
    .sol-row__media,
    .sol-row:nth-child(even) .sol-row__body { order: 1; }

    .sol-row:nth-child(even) .sol-row__media { order: 2; }

    .sol-row__media { margin-top: 28px; }

    /* Dar ekranda ləkə şəkli üst-üstə düşürdü */
    .sol-row::before,
    .sol-row:nth-child(even)::before { display: none; }

    /* Dekorativ üçbucaqlar planşetdə daha da zəifləyir - yer tutmasınlar */
    .sol-decor__shape { opacity: .32; }
    .sol-decor__shape--left { width: 36vw; height: 46vw; }
    .sol-decor__shape--right { width: 40vw; height: 52vw; }

    .sol-row + .sol-row { margin-top: 72px; }
    .sol-list { padding: 0 0 72px; }

    .sol-row__text { max-width: none; }

    .sol-benefits { padding: 0 0 72px; }
    .sol-benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    .sol-cta { padding: 0 0 72px; }
    .sol-cta__card { padding: 40px 28px; }
}

@media only screen and (max-width: 575.98px) {
    .sol-hero__title { font-size: 27px; line-height: 40px; }
    .sol-hero__lead { font-size: 16px; line-height: 27px; }
    .sol-orb { max-width: 320px; }

    /* Telefonda düymələr tam enli olur - «Üstünlüklər» səhifəsindəki kimi */
    .sol-actions { flex-direction: column; align-items: stretch; }
    .sol-actions .navigation_link { justify-content: center; }

    .sol-row__title { font-size: 22px; line-height: 32px; }
    .sol-row__text { font-size: 15px; line-height: 26px; }
    .sol-row__media { margin-top: 22px; }
    .sol-row__media img { border-radius: 14px; }
    .sol-row + .sol-row { margin-top: 56px; }

    .sol-benefits__grid { grid-template-columns: minmax(0, 1fr); }

    /* Telefonda dekorativ formalar mətnin arxasında darısqallıq yaradırdı */
    .sol-decor { display: none; }

    .sol-cta__card { padding: 32px 20px; border-radius: 20px; }
    .sol-cta__card h2 { font-size: 24px; line-height: 36px; }
    .sol-cta__card p { font-size: 15px; line-height: 26px; }
    .sol-cta__actions { flex-direction: column; align-items: stretch; }
    .sol-cta__actions .navigation_link { justify-content: center; }
}