/* _content/WEB/Components/Layout/CrmLayout.razor.rz.scp.css */
.crm-layout[b-vxaqi6zftg] {
    min-height: 100vh;
    background: #f5f7fb;
}


/* =========================================
   TOPBAR
========================================= */

.crm-topbar[b-vxaqi6zftg] {
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    min-height: 70px;
    padding: 0 28px;
    background: #ffffff;
    border-bottom: 1px solid #e6e9ef;
    box-shadow: 0 4px 18px rgba(25, 35, 55, 0.045);
}


/* LOGO */

.crm-brand[b-vxaqi6zftg] {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 190px;
}

.crm-brand-logo[b-vxaqi6zftg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, #665bea, #8177f5);
    color: white;
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 5px 13px rgba(102, 91, 234, 0.2);
}

.crm-brand-title[b-vxaqi6zftg] {
    color: #202a40;
    font-size: 14px;
    font-weight: 850;
    letter-spacing: 1px;
}

.crm-brand-subtitle[b-vxaqi6zftg] {
    margin-top: 1px;
    color: #8e96a6;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
}


/* MENU */

.crm-menu[b-vxaqi6zftg] {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 1;
    margin-left: 25px;
}

    .crm-menu a[b-vxaqi6zftg] {
        display: flex;
        align-items: center;
        gap: 7px;
        padding: 9px 12px;
        border-radius: 8px;
        color: #697386;
        font-size: 12px;
        font-weight: 650;
        text-decoration: none;
        transition: all 0.18s ease;
    }

        .crm-menu a i[b-vxaqi6zftg] {
            font-size: 14px;
        }

        .crm-menu a:hover[b-vxaqi6zftg] {
            background: #f2f1ff;
            color: #6258df;
        }

        .crm-menu a[href="/crm"][b-vxaqi6zftg] {
            background: #f0efff;
            color: #6258df;
        }


/* USER */

.crm-topbar-right[b-vxaqi6zftg] {
    display: flex;
    align-items: center;
    gap: 17px;
    margin-left: 15px;
}

.crm-user[b-vxaqi6zftg] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.crm-user-avatar[b-vxaqi6zftg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    background: #f0efff;
    color: #6358e4;
}

.crm-user-info strong[b-vxaqi6zftg] {
    display: block;
    color: #303a50;
    font-size: 11px;
}

.crm-user-info small[b-vxaqi6zftg] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px;
    color: #8e96a5;
    font-size: 9px;
}

.crm-online-dot[b-vxaqi6zftg] {
    width: 6px;
    height: 6px;
    background: #20b486;
    border-radius: 50%;
}

.crm-logout[b-vxaqi6zftg] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    background: #f7f8fa;
    border: 1px solid #e8eaf0;
    border-radius: 9px;
    color: #7f8898;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .crm-logout:hover[b-vxaqi6zftg] {
        background: #fff0f1;
        border-color: #ffd7da;
        color: #d9505c;
    }


/* CONTENT */

.crm-main[b-vxaqi6zftg] {
    width: 100%;
}


/* RESPONSIVE */

@media (max-width: 1100px) {

    .crm-brand[b-vxaqi6zftg] {
        min-width: auto;
    }

    .crm-brand-text[b-vxaqi6zftg] {
        display: none;
    }

    .crm-menu a[b-vxaqi6zftg] {
        padding: 9px;
    }

        .crm-menu a i[b-vxaqi6zftg] {
            font-size: 16px;
        }

    .crm-menu a[b-vxaqi6zftg] {
        font-size: 0;
    }
}


@media (max-width: 700px) {

    .crm-topbar[b-vxaqi6zftg] {
        padding: 0 15px;
    }

    .crm-menu[b-vxaqi6zftg] {
        margin-left: 10px;
    }

    .crm-user-info[b-vxaqi6zftg] {
        display: none;
    }

    .crm-topbar-right[b-vxaqi6zftg] {
        gap: 8px;
    }
}
/* _content/WEB/Components/Layout/MainLayout.razor.rz.scp.css */
/* ==========================================================================\n   GLOBAL RENK DEGISKENLERI\n   ========================================================================== */
:root[b-ihld8ivar3] {
    --color-primary: #1e3a8a;
    --color-evsel: #00bcd4;
    --color-endustriyel: #0d6efd;
    --color-atiksu: #198754;
    --color-gray: #6b7280;
}

/* ==========================================================================\n   GENEL FONT VE SABIT GORUNUM TANIMLARI\n   ========================================================================== */
.font-xxs[b-ihld8ivar3] {
    font-size: 0.85rem;
}

/* Bu elemanlarda gereksiz animasyonlari kapat. Dropdown linkleri haric. */
.mega-card[b-ihld8ivar3],
.card-icon-wrapper[b-ihld8ivar3],
.global-search-wrapper[b-ihld8ivar3],
footer a[b-ihld8ivar3],
.footer-link-pill[b-ihld8ivar3] {
    transition: none !important;
}

/* ==========================================================================\n   MEGA KART STILERI VE RENK ESLESTIRMELERI\n   ========================================================================== */
.mega-card[b-ihld8ivar3] {
    box-sizing: border-box;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 40px 30px;
    text-align: center;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 20px;
}

.card-icon-wrapper[b-ihld8ivar3] {
    position: relative;
    margin-bottom: 1.25rem;
    font-size: 3rem;
    pointer-events: none;
}

.card-evsel[b-ihld8ivar3] {
    border: 1px solid rgba(0, 188, 212, 0.2);
}

    .card-evsel:hover[b-ihld8ivar3] {
        border-color: var(--color-evsel) !important;
    }

.card-endustriyel[b-ihld8ivar3] {
    border: 1px solid rgba(13, 110, 253, 0.2);
}

    .card-endustriyel:hover[b-ihld8ivar3] {
        border-color: var(--color-endustriyel) !important;
    }

.card-atiksu[b-ihld8ivar3] {
    border: 1px solid rgba(25, 135, 84, 0.2);
}

    .card-atiksu:hover[b-ihld8ivar3] {
        border-color: var(--color-atiksu) !important;
    }

/* ==========================================================================\n   MENU VE DROPDOWN SISTEMLERI\n   ========================================================================== */
.custom-nav-dropdown[b-ihld8ivar3],
.tusaser-hover-dropdown[b-ihld8ivar3],
.custom-dropdown-wrapper[b-ihld8ivar3],
.mega-menu-wrapper[b-ihld8ivar3] {
    position: relative;
    display: inline-block;
}

    .custom-dropdown-content[b-ihld8ivar3],
    .custom-dropdown-wrapper .dropdown-menu-custom[b-ihld8ivar3] {
        position: absolute;
        top: 100%;
        z-index: 1050;
        display: none;
        flex-direction: column;
        gap: 0.5rem;
        min-width: 220px;
        padding: 8px 0;
        background: #fff;
        border: none;
        border-radius: 12px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }

        .custom-nav-dropdown:hover .custom-dropdown-content[b-ihld8ivar3],
        .custom-dropdown-content:hover[b-ihld8ivar3],
        .custom-dropdown-wrapper:hover .dropdown-menu-custom[b-ihld8ivar3] {
            display: block !important;
        }

.dropdown-item-custom[b-ihld8ivar3] {
    display: block;
    margin: 2px 10px;
    padding: 10px 16px;
    color: #334155;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 6px;
    transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
}

    .dropdown-item-custom:hover[b-ihld8ivar3] {
        color: #007bff;
        background-color: #eef8fc;
        border-color: transparent;
    }

/* Mega menu: masaustunde tek sutun ve kompakt genislik */
.mega-menu-wrapper[b-ihld8ivar3]::after {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 15px;
    content: "";
    background: transparent;
}

.mega-menu-wrapper .mega-menu-panel[b-ihld8ivar3] {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1080;
    display: none;
    width: 250px;
    max-width: 90vw;
    margin-top: 10px;
    padding: 10px !important;
    background: #fff;
    border: 1px solid #edf1f5;
    border-radius: 16px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
}

    .mega-menu-wrapper:hover .mega-menu-panel[b-ihld8ivar3],
    .mega-menu-wrapper .mega-menu-panel:hover[b-ihld8ivar3] {
        display: block;
    }

/* Sag taraftaki son menulerin panelini sola dogru ac */
.custom-nav-dropdown:nth-last-child(-n+2) .mega-menu-panel[b-ihld8ivar3] {
    right: 0 !important;
    left: auto !important;
}

.mega-menu-panel .dropdown-item-custom[b-ihld8ivar3] {
    width: 100%;
    margin: 0;
    padding: 7px 9px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
}

    .mega-menu-panel .dropdown-item-custom:hover[b-ihld8ivar3] {
        padding-left: 14px;
    }

/* ==========================================================================\n   ARAMA KUTUSU\n   ========================================================================== */
.global-search-wrapper[b-ihld8ivar3] {
    display: flex;
    align-items: center;
    max-width: 300px;
    padding: 4px 12px;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 50px;
}

    .global-search-wrapper:focus-within[b-ihld8ivar3] {
        border-color: #2563eb;
        box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
    }

.global-search-input[b-ihld8ivar3] {
    width: 100%;
    padding: 6px;
    color: #1e293b;
    font-size: 0.9rem;
    background: transparent;
    border: none;
    outline: none;
}

.search-btn[b-ihld8ivar3] {
    padding: 4px 8px;
    color: #64748b;
    cursor: pointer;
    background: transparent;
    border: none;
}

    .search-btn:hover[b-ihld8ivar3] {
        color: #2563eb;
    }

/* ==========================================================================\n   FOOTER TITREME (FLICKERING) GIDERME\n   ========================================================================== */
footer a[b-ihld8ivar3],
.footer-link-pill[b-ihld8ivar3] {
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    backface-visibility: hidden;
    transform: translateZ(0);
}

    footer a:hover[b-ihld8ivar3],
    footer a:focus[b-ihld8ivar3],
    footer a:active[b-ihld8ivar3],
    .footer-link-pill:hover[b-ihld8ivar3] {
        cursor: pointer !important;
        font-weight: inherit !important;
        letter-spacing: normal !important;
        text-decoration: none !important;
        opacity: 1 !important;
        background-color: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }

    /* Sosyal medya ikonlari footer hover kuralindan etkilenmesin */
    footer a.social-icon-btn:hover[b-ihld8ivar3] {
        background-color: initial !important;
        opacity: 1 !important;
    }

/* ==========================================================================\n   SOL ALT KOSede SABIT SIKCA SORULAN SORULAR ETIKETI\n   ========================================================================== */
.faq-floating-tab[b-ihld8ivar3] {
    position: fixed;
    bottom: 20px;
    left: 20px;
    z-index: 1050;
}

.faq-tab-link[b-ihld8ivar3] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    background-color: #26c6da;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

    .faq-tab-link:hover[b-ihld8ivar3] {
        color: #fff !important;
        background-color: #00acc1;
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
    }

.faq-tab-icon[b-ihld8ivar3] {
    font-size: 16px;
}

/* ==========================================================================\n   TABLET VE MOBIL DUZENLEMELER\n   ========================================================================== */
@media (max-width: 991.98px) {
    .navbar-collapse[b-ihld8ivar3] {
        max-height: 80vh;
        margin-top: 15px;
        padding: 20px;
        overflow-y: auto;
        background-color: #fff;
        border-radius: 12px;
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    }

    .mega-menu-wrapper[b-ihld8ivar3],
    .custom-nav-dropdown[b-ihld8ivar3],
    .tusaser-hover-dropdown[b-ihld8ivar3],
    .custom-dropdown-wrapper[b-ihld8ivar3] {
        display: block !important;
        width: 100% !important;
        margin-bottom: 10px !important;
        padding-bottom: 0 !important;
    }

        .mega-menu-wrapper[b-ihld8ivar3]::after {
            display: none;
        }

        .custom-dropdown-content[b-ihld8ivar3],
        .custom-dropdown-wrapper .dropdown-menu-custom[b-ihld8ivar3],
        .mega-menu-wrapper .mega-menu-panel[b-ihld8ivar3] {
            position: static !important;
            display: block !important;
            width: 100% !important;
            max-width: 100% !important;
            margin-top: 0 !important;
            padding: 8px 0 8px 15px !important;
            visibility: visible !important;
            transform: none !important;
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
        }

    .mega-card[b-ihld8ivar3] {
        margin-bottom: 20px;
        padding: 25px 15px;
    }
}

@media (min-width: 992px) {
    .navbar-toggler[b-ihld8ivar3] {
        display: none !important;
    }
}

/* ==========================================================================
   MEGA MENU GENEL HOVER DAVRANISI
   Kurumsal ve tum diger mega menulerde ortak kullanilir.
   ========================================================================== */
.mega-menu-panel .dropdown-item-custom[b-ihld8ivar3] {
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 7px 9px;
    color: #334155;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
    border: 1px solid transparent;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease !important;
}

    .mega-menu-panel .dropdown-item-custom:hover[b-ihld8ivar3] {
        padding-left: 14px !important;
        color: #007bff !important;
        background-color: #eef8fc !important;
    }

        .mega-menu-panel .dropdown-item-custom:hover .fw-bold[b-ihld8ivar3],
        .mega-menu-panel .dropdown-item-custom:focus .fw-bold[b-ihld8ivar3] {
            color: #007bff !important;
        }

    /* Basliklarin buyuk harf gorunmesi */
    .mega-menu-panel .dropdown-item-custom .fw-bold[b-ihld8ivar3] {
        text-transform: uppercase;
    }

/* ==========================================================================
   MENULERE OZEL GENISLIK VE YERLESIMLER
   ========================================================================== */
.cozumler-menu-panel[b-ihld8ivar3] {
    width: 560px !important;
    max-width: 90vw;
    padding: 14px !important;
    box-sizing: border-box;
}

.sektor-menu-panel[b-ihld8ivar3] {
    width: 850px !important;
    max-width: 95vw;
    padding: 14px !important;
    box-sizing: border-box;
}

.sistemler-menu-panel[b-ihld8ivar3] {
    width: 1280px !important;
    max-width: 98vw;
    padding: 16px !important;
    box-sizing: border-box;
}

.ekipmanlar-menu-panel[b-ihld8ivar3],
.teknik-servis-menu-panel[b-ihld8ivar3] {
    width: 750px !important;
    max-width: 90vw;
    padding: 14px !important;
    box-sizing: border-box;
}

    /* Sutun bosluklari */
    .cozumler-menu-panel .row[b-ihld8ivar3],
    .sektor-menu-panel .row[b-ihld8ivar3],
    .sistemler-menu-panel .row[b-ihld8ivar3],
    .ekipmanlar-menu-panel .row[b-ihld8ivar3],
    .teknik-servis-menu-panel .row[b-ihld8ivar3] {
        --bs-gutter-x: 12px;
        --bs-gutter-y: 8px;
    }

    /* Menu kategori basliklari */
    .cozumler-menu-panel .text-primary[b-ihld8ivar3],
    .sektor-menu-panel .text-primary[b-ihld8ivar3],
    .sistemler-menu-panel .text-primary[b-ihld8ivar3],
    .ekipmanlar-menu-panel .text-primary[b-ihld8ivar3],
    .teknik-servis-menu-panel .text-primary[b-ihld8ivar3] {
        font-size: 0.70rem !important;
        margin-bottom: 6px !important;
    }

    /* Menu metin boyutlari */
    .cozumler-menu-panel .dropdown-item-custom .fw-bold[b-ihld8ivar3],
    .sektor-menu-panel .dropdown-item-custom .fw-bold[b-ihld8ivar3],
    .sistemler-menu-panel .dropdown-item-custom .fw-bold[b-ihld8ivar3],
    .ekipmanlar-menu-panel .dropdown-item-custom .fw-bold[b-ihld8ivar3],
    .teknik-servis-menu-panel .dropdown-item-custom .fw-bold[b-ihld8ivar3] {
        font-size: 0.76rem !important;
    }

    .cozumler-menu-panel .dropdown-item-custom small[b-ihld8ivar3],
    .sektor-menu-panel .dropdown-item-custom small[b-ihld8ivar3],
    .sistemler-menu-panel .dropdown-item-custom small[b-ihld8ivar3],
    .ekipmanlar-menu-panel .dropdown-item-custom small[b-ihld8ivar3],
    .teknik-servis-menu-panel .dropdown-item-custom small[b-ihld8ivar3] {
        font-size: 0.62rem !important;
    }

/* Mobil gorunum */
@media (max-width: 991.98px) {
    .cozumler-menu-panel[b-ihld8ivar3],
    .sektor-menu-panel[b-ihld8ivar3],
    .sistemler-menu-panel[b-ihld8ivar3],
    .ekipmanlar-menu-panel[b-ihld8ivar3],
    .teknik-servis-menu-panel[b-ihld8ivar3] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 8px 0 8px 15px !important;
    }

        .cozumler-menu-panel .col-md-6[b-ihld8ivar3],
        .sektor-menu-panel .col-md-6[b-ihld8ivar3],
        .ekipmanlar-menu-panel .col-md-7[b-ihld8ivar3],
        .ekipmanlar-menu-panel .col-md-5[b-ihld8ivar3],
        .teknik-servis-menu-panel .col-md-7[b-ihld8ivar3],
        .teknik-servis-menu-panel .col-md-5[b-ihld8ivar3] {
            width: 100%;
            border-right: none !important;
            border-bottom: 1px solid #e5e7eb;
            padding: 8px !important;
        }

            .cozumler-menu-panel .col-md-6:last-child[b-ihld8ivar3],
            .sektor-menu-panel .col-md-6:last-child[b-ihld8ivar3],
            .ekipmanlar-menu-panel .col-md-5:last-child[b-ihld8ivar3],
            .teknik-servis-menu-panel .col-md-5:last-child[b-ihld8ivar3] {
                border-bottom: none;
            }

        .sistemler-menu-panel .col-md-4[b-ihld8ivar3] {
            width: 100%;
            border-right: none !important;
            border-bottom: 1px solid #e5e7eb;
            padding: 8px !important;
        }

        .sistemler-menu-panel .row + .row[b-ihld8ivar3] {
            margin-top: 0 !important;
            padding-top: 8px !important;
        }
}
/* Akademi ve Blog ba�lant�lar� */
.akademi-blog-link[b-ihld8ivar3] {
    padding: 8px 10px !important;
    white-space: nowrap;
    transition: color 0.2s ease, background-color 0.2s ease !important;
    border-radius: 8px;
}

    .akademi-blog-link:hover[b-ihld8ivar3] {
        color: #007bff !important;
        background-color: #eef8fc !important;
    }

/* TUSASER �ST BAR ARKA PLAN */
.tusaser-topbar[b-ihld8ivar3] {
    background: linear-gradient( 100deg, #EAF5FA 0%, #DCEFF5 55%, #D2EAF1 100% ) !important;
    border: 1px solid #E1EDF2 !important;
    box-shadow: 0 3px 12px rgba(40, 90, 110, 0.06) !important;
}
/* LOGO VE TUSASER ALANI */
.tusaser-brand-area[b-ihld8ivar3] {
    background: linear-gradient( 100deg, #EAF5FA 0%, #DCEFF5 55%, #D2EAF1 100% );
    border-radius: 12px;
    padding: 5px 12px;
}

/* TUSASER YAZISI */
.tusaser-brand-link[b-ihld8ivar3] {
    color: #800020 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 8px;
}

    .tusaser-brand-link:hover[b-ihld8ivar3] {
        background: rgba(255,255,255,0.45) !important;
    }
/* _content/WEB/Components/Layout/NavMenu.razor.rz.scp.css */
.navbar-toggler[b-52vz10t17v] {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

.navbar-toggler:checked[b-52vz10t17v] {
    background-color: rgba(255, 255, 255, 0.5);
}

.top-row[b-52vz10t17v] {
    min-height: 3.5rem;
    background-color: rgba(0,0,0,0.4);
}

.navbar-brand[b-52vz10t17v] {
    font-size: 1.1rem;
}

.bi[b-52vz10t17v] {
    display: inline-block;
    position: relative;
    width: 1.25rem;
    height: 1.25rem;
    margin-right: 0.75rem;
    top: -1px;
    background-size: cover;
}

.bi-house-door-fill-nav-menu[b-52vz10t17v] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
}

.bi-plus-square-fill-nav-menu[b-52vz10t17v] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
}

.bi-list-nested-nav-menu[b-52vz10t17v] {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
}

.nav-item[b-52vz10t17v] {
    font-size: 0.9rem;
    padding-bottom: 0.5rem;
}

    .nav-item:first-of-type[b-52vz10t17v] {
        padding-top: 1rem;
    }

    .nav-item:last-of-type[b-52vz10t17v] {
        padding-bottom: 1rem;
    }

    .nav-item[b-52vz10t17v]  .nav-link {
        color: #d7d7d7;
        background: none;
        border: none;
        border-radius: 4px;
        height: 3rem;
        display: flex;
        align-items: center;
        line-height: 3rem;
        width: 100%;
    }

.nav-item[b-52vz10t17v]  a.active {
    background-color: rgba(255,255,255,0.37);
    color: white;
}

.nav-item[b-52vz10t17v]  .nav-link:hover {
    background-color: rgba(255,255,255,0.1);
    color: white;
}

.nav-scrollable[b-52vz10t17v] {
    display: none;
}

.navbar-toggler:checked ~ .nav-scrollable[b-52vz10t17v] {
    display: block;
}

@media (min-width: 641px) {
    .navbar-toggler[b-52vz10t17v] {
        display: none;
    }

    .nav-scrollable[b-52vz10t17v] {
        /* Never collapse the sidebar for wide screens */
        display: block;

        /* Allow sidebar to scroll for tall menus */
        height: calc(100vh - 3.5rem);
        overflow-y: auto;
    }
}
/* _content/WEB/Components/Pages/AtikSu/Atiksu.razor.rz.scp.css */
/* TUSASER – Snowate referanslı, özgün atıksu arıtma sayfası */

.ww-page[b-2u6wwaer8z] {
    --purple: #6729b8;
    --purple-dark: #35145f;
    --turquoise: #12c8bb;
    --blue: #27a9e8;
    --ink: #14213d;
    --muted: #667085;
    --line: #e7eaf0;
    --soft: #f6f8fb;
    color: var(--ink);
    background: #fff;
    overflow: hidden;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.ww-container[b-2u6wwaer8z] {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.ww-hero[b-2u6wwaer8z] {
    position: relative;
    min-height: 650px;
    color: #fff;
    overflow: hidden;
    background: radial-gradient(circle at 75% 35%, rgba(18,200,187,.28), transparent 28%), radial-gradient(circle at 85% 75%, rgba(103,41,184,.45), transparent 35%), linear-gradient(120deg, #22103e 0%, #32125e 46%, #087f88 100%);
}

.ww-hero-bg[b-2u6wwaer8z] {
    position: absolute;
    inset: 0;
    opacity: .16;
    background-image: linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
    background-size: 55px 55px;
    transform: perspective(500px) rotateX(60deg) scale(1.7) translateY(90px);
    transform-origin: center bottom;
}

.ww-hero-inner[b-2u6wwaer8z] {
    position: relative;
    z-index: 2;
    padding-top: 24px;
}

.ww-hero-grid[b-2u6wwaer8z] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
}

.ww-eyebrow[b-2u6wwaer8z], .ww-section-kicker[b-2u6wwaer8z] {
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.ww-eyebrow[b-2u6wwaer8z] {
    color: #7df5ec;
    margin-bottom: 24px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
    text-transform: uppercase;
}
.ww-hero-copy h1[b-2u6wwaer8z] {
    font-size: clamp(44px, 6vw, 76px);
    line-height: .98;
    letter-spacing: -.045em;
    margin: 0 0 26px;
    font-weight: 300;
}

    .ww-hero-copy h1 strong[b-2u6wwaer8z] {
        font-weight: 800;
        color: #fff;
    }

.ww-hero-copy p[b-2u6wwaer8z] {
    max-width: 610px;
    color: rgba(255,255,255,.78);
    font-size: 17px;
    line-height: 1.8;
    margin: 0 0 32px;
}

.ww-hero-actions[b-2u6wwaer8z] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ww-btn[b-2u6wwaer8z] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 50px;
    padding: 0 22px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 800;
    font-size: 13px;
    transition: .25s ease;
}

.ww-btn-primary[b-2u6wwaer8z] {
    background: var(--turquoise);
    color: #072f33;
}

    .ww-btn-primary:hover[b-2u6wwaer8z] {
        transform: translateY(-3px);
        box-shadow: 0 12px 30px rgba(18,200,187,.25);
    }

.ww-btn-outline[b-2u6wwaer8z] {
    color: #fff;
    border: 1px solid rgba(255,255,255,.35);
}

    .ww-btn-outline:hover[b-2u6wwaer8z] {
        background: rgba(255,255,255,.1);
    }

.ww-btn-white[b-2u6wwaer8z] {
    background: #fff;
    color: var(--purple);
}

.ww-hero-visual[b-2u6wwaer8z] {
    position: relative;
    min-height: 470px;
}

.ww-orbit[b-2u6wwaer8z] {
    position: absolute;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

.orbit-1[b-2u6wwaer8z] {
    width: 300px;
    height: 300px;
    animation: spin-b-2u6wwaer8z 18s linear infinite;
}

.orbit-2[b-2u6wwaer8z] {
    width: 430px;
    height: 250px;
    transform: translate(-50%,-50%) rotate(32deg);
    animation: spin2-b-2u6wwaer8z 22s linear infinite;
}

.orbit-3[b-2u6wwaer8z] {
    width: 500px;
    height: 500px;
    animation: spin-b-2u6wwaer8z 28s linear infinite reverse;
    opacity: .45;
}

.ww-water-circle[b-2u6wwaer8z] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 220px;
    height: 220px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient( circle at 35% 25%, #75fff2 0%, #10aaa7 42%, #35145f 100% );
    box-shadow: 0 0 90px rgba(18,200,187,.35), inset 0 0 50px rgba(255,255,255,.15);
    text-align: center;
}
.ww-drop[b-2u6wwaer8z] {
    font-size: 38px;
    font-weight: 900;
}

.ww-water-circle span[b-2u6wwaer8z] {
    font-size: 10px;
    letter-spacing: .2em;
    margin-top: 8px;
}

.ww-water-circle small[b-2u6wwaer8z] {
    opacity: .7;
    font-size: 9px;
    margin-top: 8px;
}

.ww-float[b-2u6wwaer8z] {
    position: absolute;
    padding: 9px 13px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 30px;
    background: rgba(255,255,255,.07);
    backdrop-filter: blur(8px);
    font-family: inherit;
    font-size: 11px;
    font-weight: 800;
    color: #bffbf7;
    cursor: pointer;
    transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease;
    appearance: none;
    -webkit-appearance: none;
}
    .ww-float:hover[b-2u6wwaer8z] {
        background: rgba(18,200,187,.18);
        border-color: rgba(117,255,242,.65);
        color: #fff;
        box-shadow: 0 0 22px rgba(18,200,187,.25);
        transform: translateY(-5px) scale(1.04);
    }

    .ww-float:focus-visible[b-2u6wwaer8z] {
        outline: 2px solid #7df5ec;
        outline-offset: 4px;
    }

.f1[b-2u6wwaer8z] {
    top: 12%;
    left: 20%;
    animation: float-b-2u6wwaer8z 4s ease-in-out infinite;
}

.f2[b-2u6wwaer8z] {
    top: 26%;
    right: 7%;
    animation: float-b-2u6wwaer8z 5s ease-in-out infinite .5s;
}

.f3[b-2u6wwaer8z] {
    bottom: 22%;
    left: 7%;
    animation: float-b-2u6wwaer8z 4.5s ease-in-out infinite .9s;
}

.f4[b-2u6wwaer8z] {
    bottom: 8%;
    right: 20%;
    animation: float-b-2u6wwaer8z 5s ease-in-out infinite 1.2s;
}

.ww-intro[b-2u6wwaer8z] {
    padding: 95px 0;
    background: #fff;
}

.ww-intro-grid[b-2u6wwaer8z] {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 90px;
}

.ww-side-nav[b-2u6wwaer8z] {
    border-left: 1px solid var(--line);
    width: 100%;
}

.ww-side-title[b-2u6wwaer8z] {
    padding: 0 0 18px 18px;
    font-size: 13px;
    font-weight: 900;
}

.ww-side-nav button[b-2u6wwaer8z] {
    width: 100%;
    height: 52px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0 18px;
    border: 0;
    border-left: 3px solid transparent;
    background: transparent;
    color: #667085;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: color .2s ease, background .2s ease, border-color .2s ease;
}


    .ww-side-nav button span[b-2u6wwaer8z] {
        color: #a3a9b5;
        margin-right: 9px;
        font-size: 11px;
        /* Numaranın genişliği sabit */
        width: 25px;
        flex-shrink: 0;
    }

    .ww-side-nav button:hover[b-2u6wwaer8z] {
        color: var(--purple);
        background: #faf8ff;
    }

    .ww-side-nav button.active[b-2u6wwaer8z] {
        color: var(--purple);
        background: #faf8ff;
        border-left-color: var(--purple);
    }

.ww-intro-copy[b-2u6wwaer8z] {
    max-width: 760px;
}

.ww-section-kicker[b-2u6wwaer8z] {
    color: var(--purple);
    margin-bottom: 15px;
}

.ww-intro-copy h2[b-2u6wwaer8z], .ww-heading-row h2[b-2u6wwaer8z], .ww-heading-centered h2[b-2u6wwaer8z] {
    margin: 0 0 20px;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.05;
    letter-spacing: -.04em;
}

    .ww-intro-copy h2 em[b-2u6wwaer8z] {
        color: var(--purple);
        font-style: normal;
    }

.ww-intro-copy p[b-2u6wwaer8z], .ww-heading-row > p[b-2u6wwaer8z], .ww-heading-centered p[b-2u6wwaer8z] {
    color: var(--muted);
    line-height: 1.85;
    font-size: 16px;
}

.ww-mini-stats[b-2u6wwaer8z] {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 10px;
    margin-top: 38px;
}

    .ww-mini-stats div[b-2u6wwaer8z] {
        border-top: 2px solid var(--line);
        padding-top: 12px;
    }

    .ww-mini-stats strong[b-2u6wwaer8z] {
        display: block;
        color: var(--purple);
        font-size: 22px;
    }

    .ww-mini-stats span[b-2u6wwaer8z] {
        font-size: 11px;
        color: var(--muted);
    }

.ww-flow-section[b-2u6wwaer8z] {
    padding: 90px 0 110px;
    background: var(--soft);
}

.ww-heading-row[b-2u6wwaer8z] {
    display: flex;
    justify-content: space-between;
    gap: 50px;
    align-items: end;
    margin-bottom: 55px;
}

    .ww-heading-row > p[b-2u6wwaer8z] {
        max-width: 390px;
        margin: 0;
    }

.ww-process[b-2u6wwaer8z] {
    position: relative;
    display: grid;
    grid-template-columns: repeat(7,1fr);
    gap: 12px;
}

.ww-process-line[b-2u6wwaer8z] {
    position: absolute;
    top: 29px;
    left: 5%;
    right: 5%;
    height: 2px;
    background: linear-gradient(90deg,var(--purple),var(--turquoise));
    opacity: .3;
}

.ww-process-step[b-2u6wwaer8z] {
    position: relative;
    z-index: 2;
}

.ww-process-icon[b-2u6wwaer8z] {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 12px;
    font-weight: 900;
    background: linear-gradient(135deg,var(--purple),var(--turquoise));
    border: 5px solid var(--soft);
    box-shadow: 0 8px 25px rgba(103,41,184,.18);
}

.ww-process-card[b-2u6wwaer8z] {
    background: #fff;
    border: 1px solid var(--line);
    min-height: 170px;
    padding: 20px 17px;
    transition: .25s;
    box-shadow: 0 8px 25px rgba(24,39,75,.04);
}

    .ww-process-card:hover[b-2u6wwaer8z] {
        transform: translateY(-7px);
        border-color: rgba(103,41,184,.3);
    }

.ww-process-top span[b-2u6wwaer8z] {
    display: block;
    font-size: 9px;
    letter-spacing: .16em;
    color: var(--turquoise);
    font-weight: 900;
}

.ww-process-top b[b-2u6wwaer8z] {
    display: block;
    margin-top: 8px;
    font-size: 15px;
}

.ww-process-card p[b-2u6wwaer8z] {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.65;
    margin-top: 12px;
}

.ww-systems[b-2u6wwaer8z] {
    padding: 105px 0;
}

.ww-heading-centered[b-2u6wwaer8z] {
    text-align: center;
    max-width: 760px;
    margin: 0 auto 60px;
}

.ww-feature-layout[b-2u6wwaer8z] {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 70px;
    align-items: center;
}

.ww-feature-image[b-2u6wwaer8z] {
    position: relative;
}

.ww-image-placeholder[b-2u6wwaer8z] {
    height: 500px;
    border-radius: 8px;
    display: grid;
    place-items: center;
    align-content: center;
    background: linear-gradient(135deg,rgba(103,41,184,.18),rgba(18,200,187,.12)), repeating-linear-gradient(45deg,#f5f6fa 0,#f5f6fa 8px,#eef0f5 8px,#eef0f5 16px);
    border: 1px solid var(--line);
    color: var(--purple);
    font-weight: 900;
    letter-spacing: .12em;
}

    .ww-image-placeholder small[b-2u6wwaer8z] {
        margin-top: 10px;
        color: #8991a1;
        font-size: 10px;
        letter-spacing: 0;
    }

.ww-image-caption[b-2u6wwaer8z] {
    position: absolute;
    bottom: -18px;
    right: -18px;
    background: var(--purple);
    color: #fff;
    padding: 18px 22px;
    min-width: 250px;
    box-shadow: 0 15px 35px rgba(103,41,184,.2);
}

    .ww-image-caption strong[b-2u6wwaer8z], .ww-image-caption span[b-2u6wwaer8z] {
        display: block;
    }

    .ww-image-caption span[b-2u6wwaer8z] {
        margin-top: 5px;
        font-size: 11px;
        opacity: .7;
    }

.ww-feature-content > .ww-number[b-2u6wwaer8z] {
    font-size: 64px;
    font-weight: 900;
    color: #ece7f8;
    line-height: 1;
}

.ww-feature-content h3[b-2u6wwaer8z] {
    font-size: 40px;
    margin: 4px 0 15px;
    letter-spacing: -.04em;
}

.ww-feature-content > p[b-2u6wwaer8z] {
    color: var(--muted);
    line-height: 1.8;
}

.ww-option-list[b-2u6wwaer8z] {
    margin-top: 28px;
    border-top: 1px solid var(--line);
}

.ww-option[b-2u6wwaer8z] {
    display: grid;
    grid-template-columns: 70px 1fr 20px;
    gap: 12px;
    align-items: center;
    width: 100%;
    padding: 16px 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    background: transparent;
    text-align: left;
    cursor: pointer;
}

    .ww-option b[b-2u6wwaer8z] {
        color: var(--purple);
    }

    .ww-option span[b-2u6wwaer8z] {
        color: var(--muted);
        font-size: 12px;
    }

    .ww-option i[b-2u6wwaer8z] {
        color: var(--purple);
        font-style: normal;
    }

    .ww-option:hover[b-2u6wwaer8z] {
        padding-left: 8px;
    }

.ww-selected-box[b-2u6wwaer8z] {
    margin-top: 22px;
    padding: 18px 20px;
    background: #faf8ff;
    border-left: 3px solid var(--purple);
}

    .ww-selected-box span[b-2u6wwaer8z] {
        font-size: 9px;
        letter-spacing: .16em;
        color: var(--purple);
        font-weight: 900;
    }

    .ww-selected-box strong[b-2u6wwaer8z] {
        display: block;
        font-size: 22px;
        margin-top: 5px;
    }

    .ww-selected-box p[b-2u6wwaer8z] {
        margin: 6px 0 0;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.6;
    }

.ww-dark-section[b-2u6wwaer8z] {
    padding: 100px 0;
    background: linear-gradient(135deg,#17102a,#271146);
    color: #fff;
}

.ww-heading-row.light .ww-section-kicker[b-2u6wwaer8z] {
    color: #6ceee5;
}

.ww-heading-row.light h2[b-2u6wwaer8z] {
    color: #fff;
}

.ww-heading-row.light > p[b-2u6wwaer8z] {
    color: rgba(255,255,255,.62);
}

.ww-tech-grid[b-2u6wwaer8z] {
    display: grid;
    grid-template-columns: repeat(5,1fr);
    gap: 12px;
}

.ww-tech-card[b-2u6wwaer8z] {
    min-height: 300px;
    padding: 24px;
    border: 1px solid rgba(255,255,255,.11);
    background: rgba(255,255,255,.045);
    transition: .25s;
}

    .ww-tech-card:hover[b-2u6wwaer8z] {
        transform: translateY(-8px);
        background: rgba(255,255,255,.08);
    }

.ww-tech-no[b-2u6wwaer8z] {
    font-size: 10px;
    color: #6ceee5;
    font-weight: 900;
}

.ww-tech-icon[b-2u6wwaer8z] {
    margin: 40px 0 22px;
    font-size: 24px;
    font-weight: 900;
    color: #fff;
}

.ww-tech-card h3[b-2u6wwaer8z] {
    font-size: 20px;
    margin: 0 0 12px;
}

.ww-tech-card p[b-2u6wwaer8z] {
    font-size: 12px;
    line-height: 1.7;
    color: rgba(255,255,255,.62);
}

.ww-tech-card > span[b-2u6wwaer8z] {
    display: block;
    margin-top: 20px;
    color: #6ceee5;
    font-size: 9px;
    letter-spacing: .14em;
    font-weight: 900;
}

.ww-dtro[b-2u6wwaer8z] {
    padding: 110px 0;
    background: #f7f5fb;
}

.ww-dtro-grid[b-2u6wwaer8z] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;
}

.ww-dtro-copy h2[b-2u6wwaer8z] {
    font-size: clamp(36px,4vw,56px);
    line-height: 1.02;
    margin: 0 0 20px;
    letter-spacing: -.04em;
}

.ww-dtro-copy p[b-2u6wwaer8z] {
    color: var(--muted);
    line-height: 1.8;
    max-width: 620px;
}

.ww-dtro-points[b-2u6wwaer8z] {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 10px;
    margin-top: 32px;
}

    .ww-dtro-points div[b-2u6wwaer8z] {
        background: #fff;
        padding: 18px;
        border: 1px solid var(--line);
    }

    .ww-dtro-points b[b-2u6wwaer8z] {
        display: block;
        color: var(--purple);
        font-size: 20px;
    }

    .ww-dtro-points span[b-2u6wwaer8z] {
        font-size: 10px;
        color: var(--muted);
    }

.ww-dtro-visual[b-2u6wwaer8z] {
    position: relative;
    height: 430px;
    display: grid;
    place-items: center;
}

.ww-dtro-ring[b-2u6wwaer8z] {
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    border: 1px solid rgba(103,41,184,.2);
    box-shadow: inset 0 0 70px rgba(18,200,187,.08);
}

.ww-dtro-core[b-2u6wwaer8z] {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    color: #fff;
    font-size: 31px;
    font-weight: 900;
    background: linear-gradient(135deg,var(--purple),var(--turquoise));
    box-shadow: 0 20px 60px rgba(103,41,184,.25);
}

.ww-dtro-label[b-2u6wwaer8z] {
    position: absolute;
    padding: 8px 11px;
    background: #fff;
    border: 1px solid var(--line);
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .1em;
}

.l1[b-2u6wwaer8z] {
    top: 55px;
    left: 20px;
}

.l2[b-2u6wwaer8z] {
    right: 10px;
    top: 170px;
}

.l3[b-2u6wwaer8z] {
    bottom: 55px;
    left: 75px;
}

.ww-applications[b-2u6wwaer8z] {
    padding: 100px 0;
}

.ww-app-grid[b-2u6wwaer8z] {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 12px;
}

.ww-app-card[b-2u6wwaer8z] {
    display: grid;
    grid-template-columns: 50px 1fr 20px;
    gap: 15px;
    align-items: center;
    padding: 25px;
    border: 1px solid var(--line);
    background: #fff;
    transition: .25s;
}

    .ww-app-card:hover[b-2u6wwaer8z] {
        border-color: var(--purple);
        transform: translateY(-4px);
        box-shadow: 0 15px 35px rgba(20,33,61,.07);
    }

.ww-app-number[b-2u6wwaer8z] {
    color: var(--purple);
    font-size: 12px;
    font-weight: 900;
}

.ww-app-card h3[b-2u6wwaer8z] {
    margin: 0 0 6px;
    font-size: 17px;
}

.ww-app-card p[b-2u6wwaer8z] {
    margin: 0;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.55;
}

.ww-app-card > span[b-2u6wwaer8z] {
    color: var(--purple);
}

.ww-media[b-2u6wwaer8z] {
    padding: 0 0 100px;
}

.ww-media-box[b-2u6wwaer8z] {
    position: relative;
    min-height: 470px;
    overflow: hidden;
    background: #111827;
    color: #fff;
}

.ww-media-overlay[b-2u6wwaer8z] {
    position: relative;
    z-index: 2;
    width: 52%;
    padding: 75px;
}

    .ww-media-overlay .ww-section-kicker[b-2u6wwaer8z] {
        color: #6ceee5;
    }

    .ww-media-overlay h2[b-2u6wwaer8z] {
        font-size: clamp(34px,4vw,52px);
        line-height: 1.05;
        margin: 0 0 18px;
    }

    .ww-media-overlay p[b-2u6wwaer8z] {
        color: rgba(255,255,255,.65);
        line-height: 1.7;
        margin-bottom: 25px;
    }

.ww-media-placeholder[b-2u6wwaer8z] {
    position: absolute;
    inset: 0 0 0 45%;
    display: grid;
    place-items: center;
    align-content: center;
    background: linear-gradient(135deg,#29324a,#0c6f78);
    opacity: .95;
}

    .ww-media-placeholder span[b-2u6wwaer8z] {
        font-size: 12px;
        letter-spacing: .16em;
        font-weight: 900;
    }

    .ww-media-placeholder small[b-2u6wwaer8z] {
        color: rgba(255,255,255,.5);
        margin-top: 8px;
    }

.play[b-2u6wwaer8z] {
    margin-top: 20px;
    width: 65px;
    height: 65px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fff;
    color: var(--purple);
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
}

.ww-cta[b-2u6wwaer8z] {
    background: linear-gradient(100deg,var(--purple),#442077 55%,#0b8f91);
    color: #fff;
    padding: 60px 0;
}

.ww-cta-inner[b-2u6wwaer8z] {
    display: flex;
    justify-content: space-between;
    gap: 35px;
    align-items: center;
}

.ww-cta .ww-section-kicker[b-2u6wwaer8z] {
    color: #79eee6;
}

.ww-cta h2[b-2u6wwaer8z] {
    margin: 0 0 8px;
    font-size: clamp(30px,4vw,48px);
    line-height: 1.05;
}

.ww-cta p[b-2u6wwaer8z] {
    margin: 0;
    color: rgba(255,255,255,.65);
}

@keyframes spin-b-2u6wwaer8z {
    to {
        transform: translate(-50%,-50%) rotate(360deg);
    }
}

@keyframes spin2-b-2u6wwaer8z {
    to {
        transform: translate(-50%,-50%) rotate(-328deg);
    }
}

@keyframes float-b-2u6wwaer8z {
    50% {
        transform: translateY(-10px);
    }
}

@media (max-width: 1000px) {
    .ww-process[b-2u6wwaer8z] {
        grid-template-columns: repeat(4,1fr);
    }

    .ww-process-line[b-2u6wwaer8z] {
        display: none;
    }

    .ww-tech-grid[b-2u6wwaer8z] {
        grid-template-columns: repeat(3,1fr);
    }

    .ww-feature-layout[b-2u6wwaer8z], .ww-dtro-grid[b-2u6wwaer8z] {
        gap: 40px;
    }
}

@media (max-width: 760px) {
    .ww-container[b-2u6wwaer8z] {
        width: min(100% - 28px, 1180px);
    }

    .ww-hero[b-2u6wwaer8z] {
        min-height: auto;
    }

    .ww-hero-grid[b-2u6wwaer8z], .ww-intro-grid[b-2u6wwaer8z], .ww-feature-layout[b-2u6wwaer8z], .ww-dtro-grid[b-2u6wwaer8z] {
        grid-template-columns: 1fr;
    }

    .ww-hero-visual[b-2u6wwaer8z] {
        min-height: 390px;
    }

    .ww-breadcrumb[b-2u6wwaer8z] {
        margin-bottom: 40px;
    }

    .ww-intro-grid[b-2u6wwaer8z] {
        gap: 45px;
    }

    .ww-mini-stats[b-2u6wwaer8z] {
        grid-template-columns: repeat(2,1fr);
    }

    .ww-process[b-2u6wwaer8z] {
        grid-template-columns: repeat(2,1fr);
    }

    .ww-tech-grid[b-2u6wwaer8z], .ww-app-grid[b-2u6wwaer8z] {
        grid-template-columns: 1fr 1fr;
    }

    .ww-heading-row[b-2u6wwaer8z], .ww-cta-inner[b-2u6wwaer8z] {
        flex-direction: column;
        align-items: flex-start;
    }

    .ww-image-placeholder[b-2u6wwaer8z] {
        height: 360px;
    }

    .ww-media-overlay[b-2u6wwaer8z] {
        width: 100%;
        padding: 40px;
    }

    .ww-media-placeholder[b-2u6wwaer8z] {
        position: relative;
        inset: auto;
        height: 220px;
    }

    .ww-media-box[b-2u6wwaer8z] {
        min-height: 0;
    }
}

@media (max-width: 520px) {
    .ww-hero-copy h1[b-2u6wwaer8z] {
        font-size: 44px;
    }

    .ww-process[b-2u6wwaer8z], .ww-tech-grid[b-2u6wwaer8z], .ww-app-grid[b-2u6wwaer8z] {
        grid-template-columns: 1fr;
    }

    .ww-dtro-points[b-2u6wwaer8z] {
        grid-template-columns: 1fr;
    }

    .ww-orbit.orbit-3[b-2u6wwaer8z] {
        width: 350px;
        height: 350px;
    }

    .ww-orbit.orbit-2[b-2u6wwaer8z] {
        width: 320px;
        height: 210px;
    }
}
.ww-water-label[b-2u6wwaer8z] {
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .18em;
    text-transform: uppercase;
}

.ww-waste[b-2u6wwaer8z] {
    color: rgba(255,255,255,.75);
}

.ww-clean[b-2u6wwaer8z] {
    color: #ffffff;
}

.ww-drop[b-2u6wwaer8z] {
    font-size: 42px;
    font-weight: 900;
    line-height: 1;
    margin: 7px 0;
    color: #fff;
}

.ww-arrow-down[b-2u6wwaer8z] {
    font-size: 14px;
    line-height: 1;
    opacity: .65;
}
/* =========================================
   ATIKSU BİLGİ / AÇIKLAMA ALANI
   ========================================= */

.ww-info-content[b-2u6wwaer8z] {
    animation: wwInfoIn-b-2u6wwaer8z .35s ease;
}

    .ww-info-content h2[b-2u6wwaer8z] {
        max-width: 850px;
    }

    .ww-info-content > p[b-2u6wwaer8z] {
        max-width: 820px;
        font-size: 15px;
        line-height: 1.9;
        color: #667085;
        margin-bottom: 18px;
    }

    .ww-info-content h2 em[b-2u6wwaer8z] {
        position: relative;
        color: var(--purple);
        font-style: normal;
    }

        .ww-info-content h2 em[b-2u6wwaer8z]::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: -5px;
            height: 3px;
            border-radius: 10px;
            background: linear-gradient( 90deg, var(--purple), var(--turquoise) );
        }


/* VURGULU BİLGİ KUTUSU */

.ww-info-highlight[b-2u6wwaer8z] {
    position: relative;
    display: flex;
    align-items: center;
    gap: 22px;
    margin: 32px 0;
    padding: 20px 24px;
    background: linear-gradient( 100deg, rgba(103,41,184,.07), rgba(18,200,187,.06) );
    border-left: 4px solid var(--purple);
    border-radius: 0 8px 8px 0;
}

    .ww-info-highlight[b-2u6wwaer8z]::before {
        content: "";
        position: absolute;
        left: -4px;
        top: 0;
        bottom: 0;
        width: 4px;
        background: linear-gradient( 180deg, var(--purple), var(--turquoise) );
        border-radius: 10px;
    }

    .ww-info-highlight strong[b-2u6wwaer8z] {
        min-width: 110px;
        font-size: 11px;
        letter-spacing: .14em;
        color: var(--purple);
    }

    .ww-info-highlight span[b-2u6wwaer8z] {
        font-size: 13px;
        line-height: 1.7;
        color: #596273;
    }


/* ALT BİLGİ KARTLARI */

.ww-info-grid[b-2u6wwaer8z] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 28px;
}

    .ww-info-grid > div[b-2u6wwaer8z] {
        position: relative;
        min-height: 145px;
        padding: 20px;
        background: #fff;
        border: 1px solid #e8eaf0;
        border-radius: 7px;
        overflow: hidden;
        transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
    }

        .ww-info-grid > div[b-2u6wwaer8z]::before {
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 3px;
            background: linear-gradient( 90deg, var(--purple), var(--turquoise) );
            transform: scaleX(0);
            transform-origin: left;
            transition: transform .25s ease;
        }

        .ww-info-grid > div:hover[b-2u6wwaer8z] {
            transform: translateY(-5px);
            border-color: rgba(103,41,184,.25);
            box-shadow: 0 14px 30px rgba(25,35,60,.08);
        }

            .ww-info-grid > div:hover[b-2u6wwaer8z]::before {
                transform: scaleX(1);
            }

    .ww-info-grid b[b-2u6wwaer8z] {
        display: block;
        color: var(--turquoise);
        font-size: 11px;
        letter-spacing: .08em;
        margin-bottom: 12px;
    }

    .ww-info-grid strong[b-2u6wwaer8z] {
        display: block;
        font-size: 15px;
        color: #18233b;
        margin-bottom: 7px;
    }

    .ww-info-grid p[b-2u6wwaer8z] {
        margin: 0;
        color: #7a8392;
        font-size: 11px;
        line-height: 1.6;
    }


@keyframes wwInfoIn-b-2u6wwaer8z {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* MOBİL */

@media (max-width: 900px) {

    .ww-info-grid[b-2u6wwaer8z] {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 600px) {

    .ww-info-grid[b-2u6wwaer8z] {
        grid-template-columns: 1fr;
    }

    .ww-info-highlight[b-2u6wwaer8z] {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}
.ww-process-video[b-2u6wwaer8z] {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    background: #000;
}

.ww-media-placeholder[b-2u6wwaer8z] {
    overflow: hidden;
}
/* _content/WEB/Components/Pages/AtikSu/AtikSuTerimler.razor.rz.scp.css */
body[b-9zawny6ejw] {
}
/* _content/WEB/Components/Pages/AtikSu/AtıksuArıtımAsamalar.razor.rz.scp.css */
.process-detail-page[b-9mfg9adipv] {
    background: #ffffff;
    min-height: 100vh;
}


/* HERO */

.process-detail-hero[b-9mfg9adipv] {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    background: radial-gradient(circle at 85% 30%, rgba(103, 41, 184, .25), transparent 35%), radial-gradient(circle at 15% 80%, rgba(18, 200, 187, .18), transparent 30%), linear-gradient(135deg, #101827, #172033);
}

.process-detail-container[b-9mfg9adipv] {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.process-detail-eyebrow[b-9mfg9adipv] {
    display: block;
    margin-bottom: 18px;
    color: #12c8bb;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.process-detail-hero h1[b-9mfg9adipv] {
    margin: 0;
    color: white;
    font-size: clamp(40px, 5vw, 70px);
    line-height: 1;
    font-weight: 300;
}

    .process-detail-hero h1 strong[b-9mfg9adipv] {
        display: block;
        margin-top: 10px;
        color: #a879ff;
        font-weight: 800;
    }

.process-detail-hero p[b-9mfg9adipv] {
    max-width: 700px;
    margin: 25px 0 0;
    color: #cbd5e1;
    font-size: 17px;
    line-height: 1.8;
}


/* CONTENT */

.process-detail-content[b-9mfg9adipv] {
    padding: 80px 0 110px;
    background: radial-gradient(circle at 90% 10%, rgba(103, 41, 184, .06), transparent 30%), #f8fafc;
}


/* LAYOUT */

.process-detail-layout[b-9mfg9adipv] {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 60px;
    align-items: start;
}


/* SOL MENÜ */

.process-stage-menu[b-9mfg9adipv] {
    position: sticky;
    top: 30px;
    padding: 10px;
    background: white;
    border: 1px solid #e6e9ef;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .08);
}

.process-menu-title[b-9mfg9adipv] {
    padding: 20px 18px 22px;
}

    .process-menu-title span[b-9mfg9adipv] {
        display: block;
        margin-bottom: 6px;
        color: #8a94a6;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1.5px;
    }

    .process-menu-title strong[b-9mfg9adipv] {
        color: #182033;
        font-size: 19px;
    }


/* LİSTE BUTONU */

.process-stage-item[b-9mfg9adipv] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 72px;
    margin: 4px 0;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    border-radius: 14px;
    text-align: left;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

    .process-stage-item:hover[b-9mfg9adipv] {
        background: #f7f4ff;
        transform: translateX(3px);
    }


    /* SEÇİLİ */

    .process-stage-item.selected[b-9mfg9adipv] {
        background: linear-gradient( 100deg, rgba(103, 41, 184, .12), rgba(18, 200, 187, .06) );
    }

.process-stage-number[b-9mfg9adipv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    margin-right: 13px;
    border-radius: 12px;
    background: #f1f3f7;
    color: #697386;
    font-size: 11px;
    font-weight: 900;
}

.process-stage-item.selected .process-stage-number[b-9mfg9adipv] {
    background: #6729b8;
    color: white;
    box-shadow: 0 8px 20px rgba(103, 41, 184, .25);
}

.process-stage-text[b-9mfg9adipv] {
    flex: 1;
}

    .process-stage-text span[b-9mfg9adipv] {
        display: block;
        margin-bottom: 4px;
        color: #9aa2b1;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 1px;
    }

    .process-stage-text strong[b-9mfg9adipv] {
        color: #263043;
        font-size: 14px;
        font-weight: 800;
    }

.process-stage-item.selected .process-stage-text strong[b-9mfg9adipv] {
    color: #6729b8;
}

.process-stage-arrow[b-9mfg9adipv] {
    color: #b2b8c4;
    font-size: 18px;
}

.process-stage-item.selected .process-stage-arrow[b-9mfg9adipv] {
    color: #12a99f;
}


/* SAĞ İÇERİK */

.process-stage-content[b-9mfg9adipv] {
    position: relative;
    min-height: 600px;
    padding: 55px;
    overflow: hidden;
    background: white;
    border: 1px solid #e6e9ef;
    border-radius: 28px;
    box-shadow: 0 25px 70px rgba(15, 23, 42, .08);
}

.process-content-number[b-9mfg9adipv] {
    position: absolute;
    top: -25px;
    right: 25px;
    color: rgba(103, 41, 184, .055);
    font-size: 190px;
    line-height: 1;
    font-weight: 900;
    pointer-events: none;
}

.process-content-kicker[b-9mfg9adipv] {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 14px;
    color: #12a99f;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
}

.process-stage-content h2[b-9mfg9adipv] {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0;
    color: #172033;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.05;
}

.process-content-line[b-9mfg9adipv] {
    width: 80px;
    height: 4px;
    margin: 28px 0;
    border-radius: 10px;
    background: linear-gradient( 90deg, #6729b8, #12c8bb );
}

.process-content-intro[b-9mfg9adipv] {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0;
    color: #5d6675;
    font-size: 17px;
    line-height: 1.9;
}


/* AMAÇ */

.process-info-box[b-9mfg9adipv] {
    margin: 38px 0;
    padding: 25px 28px;
    background: linear-gradient( 135deg, rgba(103, 41, 184, .07), rgba(18, 200, 187, .07) );
    border-left: 4px solid #6729b8;
    border-radius: 0 16px 16px 0;
}

    .process-info-box span[b-9mfg9adipv] {
        display: block;
        margin-bottom: 8px;
        color: #6729b8;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 1.5px;
    }

    .process-info-box p[b-9mfg9adipv] {
        margin: 0;
        color: #414b5c;
        font-size: 15px;
        line-height: 1.7;
    }


/* ALT BAŞLIK */

.process-stage-content h3[b-9mfg9adipv] {
    margin: 45px 0 22px;
    color: #172033;
    font-size: 21px;
}


/* NOKTALAR */

.process-content-grid[b-9mfg9adipv] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.process-point[b-9mfg9adipv] {
    display: flex;
    gap: 14px;
    padding: 20px;
    background: #f8fafc;
    border: 1px solid #edf0f4;
    border-radius: 15px;
}

.process-point-icon[b-9mfg9adipv] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: rgba(18, 200, 187, .12);
    color: #0b9f95;
    font-weight: 900;
}

.process-point strong[b-9mfg9adipv] {
    display: block;
    margin-bottom: 6px;
    color: #263043;
    font-size: 14px;
}

.process-point p[b-9mfg9adipv] {
    margin: 0;
    color: #7a8392;
    font-size: 13px;
    line-height: 1.6;
}


/* SONRAKİ AŞAMA */

.process-next[b-9mfg9adipv] {
    margin-top: 45px;
    padding-top: 30px;
    border-top: 1px solid #edf0f4;
}

    .process-next button[b-9mfg9adipv] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 18px 20px;
        background: #172033;
        border: 0;
        border-radius: 14px;
        color: white;
        text-align: left;
        cursor: pointer;
        transition: transform .2s ease;
    }

        .process-next button:hover[b-9mfg9adipv] {
            transform: translateY(-2px);
        }

    .process-next span[b-9mfg9adipv] {
        color: #9da7b8;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1px;
    }

    .process-next strong[b-9mfg9adipv] {
        color: white;
        font-size: 14px;
    }


/* MOBİL */

@media (max-width: 900px) {

    .process-detail-layout[b-9mfg9adipv] {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .process-stage-menu[b-9mfg9adipv] {
        position: static;
    }

    .process-stage-content[b-9mfg9adipv] {
        padding: 35px 25px;
    }

    .process-content-grid[b-9mfg9adipv] {
        grid-template-columns: 1fr;
    }

    .process-content-number[b-9mfg9adipv] {
        font-size: 120px;
    }
}


@media (max-width: 600px) {

    .process-detail-container[b-9mfg9adipv] {
        width: min(100% - 24px, 1180px);
    }

    .process-detail-hero[b-9mfg9adipv] {
        padding: 65px 0;
    }

    .process-stage-content[b-9mfg9adipv] {
        padding: 30px 20px;
        border-radius: 20px;
    }

    .process-stage-item[b-9mfg9adipv] {
        min-height: 64px;
    }

    .process-content-intro[b-9mfg9adipv] {
        font-size: 15px;
    }
}
/* _content/WEB/Components/Pages/AtikSu/Ileriaritma.razor.rz.scp.css */
.process-detail-page[b-zhof3t4wkq] {
    background: #ffffff;
    min-height: 100vh;
}


/* HERO */

.process-detail-hero[b-zhof3t4wkq] {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    background: radial-gradient(circle at 85% 30%, rgba(103, 41, 184, .25), transparent 35%), radial-gradient(circle at 15% 80%, rgba(18, 200, 187, .18), transparent 30%), linear-gradient(135deg, #101827, #172033);
}

.process-detail-container[b-zhof3t4wkq] {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.process-detail-eyebrow[b-zhof3t4wkq] {
    display: block;
    margin-bottom: 18px;
    color: #12c8bb;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.process-detail-hero h1[b-zhof3t4wkq] {
    margin: 0;
    color: white;
    font-size: clamp(40px, 5vw, 70px);
    line-height: 1;
    font-weight: 300;
}

    .process-detail-hero h1 strong[b-zhof3t4wkq] {
        display: block;
        margin-top: 10px;
        color: #a879ff;
        font-weight: 800;
    }

.process-detail-hero p[b-zhof3t4wkq] {
    max-width: 700px;
    margin: 25px 0 0;
    color: #cbd5e1;
    font-size: 17px;
    line-height: 1.8;
}


/* CONTENT */

.process-detail-content[b-zhof3t4wkq] {
    padding: 80px 0 110px;
    background: radial-gradient(circle at 90% 10%, rgba(103, 41, 184, .06), transparent 30%), #f8fafc;
}


/* LAYOUT */

.process-detail-layout[b-zhof3t4wkq] {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 60px;
    align-items: start;
}


/* SOL MENÜ */

.process-stage-menu[b-zhof3t4wkq] {
    position: sticky;
    top: 30px;
    padding: 10px;
    background: white;
    border: 1px solid #e6e9ef;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .08);
}

.process-menu-title[b-zhof3t4wkq] {
    padding: 20px 18px 22px;
}

    .process-menu-title span[b-zhof3t4wkq] {
        display: block;
        margin-bottom: 6px;
        color: #8a94a6;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1.5px;
    }

    .process-menu-title strong[b-zhof3t4wkq] {
        color: #182033;
        font-size: 19px;
    }


/* LİSTE BUTONU */

.process-stage-item[b-zhof3t4wkq] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 72px;
    margin: 4px 0;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    border-radius: 14px;
    text-align: left;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

    .process-stage-item:hover[b-zhof3t4wkq] {
        background: #f7f4ff;
        transform: translateX(3px);
    }


    /* SEÇİLİ */

    .process-stage-item.selected[b-zhof3t4wkq] {
        background: linear-gradient( 100deg, rgba(103, 41, 184, .12), rgba(18, 200, 187, .06) );
    }

.process-stage-number[b-zhof3t4wkq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    margin-right: 13px;
    border-radius: 12px;
    background: #f1f3f7;
    color: #697386;
    font-size: 11px;
    font-weight: 900;
}

.process-stage-item.selected .process-stage-number[b-zhof3t4wkq] {
    background: #6729b8;
    color: white;
    box-shadow: 0 8px 20px rgba(103, 41, 184, .25);
}

.process-stage-text[b-zhof3t4wkq] {
    flex: 1;
}

    .process-stage-text span[b-zhof3t4wkq] {
        display: block;
        margin-bottom: 4px;
        color: #9aa2b1;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 1px;
    }

    .process-stage-text strong[b-zhof3t4wkq] {
        color: #263043;
        font-size: 14px;
        font-weight: 800;
    }

.process-stage-item.selected .process-stage-text strong[b-zhof3t4wkq] {
    color: #6729b8;
}

.process-stage-arrow[b-zhof3t4wkq] {
    color: #b2b8c4;
    font-size: 18px;
}

.process-stage-item.selected .process-stage-arrow[b-zhof3t4wkq] {
    color: #12a99f;
}


/* SAĞ İÇERİK */

.process-stage-content[b-zhof3t4wkq] {
    position: relative;
    min-height: 600px;
    padding: 55px;
    overflow: hidden;
    background: white;
    border: 1px solid #e6e9ef;
    border-radius: 28px;
    box-shadow: 0 25px 70px rgba(15, 23, 42, .08);
}

.process-content-number[b-zhof3t4wkq] {
    position: absolute;
    top: -25px;
    right: 25px;
    color: rgba(103, 41, 184, .055);
    font-size: 190px;
    line-height: 1;
    font-weight: 900;
    pointer-events: none;
}

.process-content-kicker[b-zhof3t4wkq] {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 14px;
    color: #12a99f;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
}

.process-stage-content h2[b-zhof3t4wkq] {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0;
    color: #172033;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.05;
}

.process-content-line[b-zhof3t4wkq] {
    width: 80px;
    height: 4px;
    margin: 28px 0;
    border-radius: 10px;
    background: linear-gradient( 90deg, #6729b8, #12c8bb );
}

.process-content-intro[b-zhof3t4wkq] {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0;
    color: #5d6675;
    font-size: 17px;
    line-height: 1.9;
}


/* AMAÇ */

.process-info-box[b-zhof3t4wkq] {
    margin: 38px 0;
    padding: 25px 28px;
    background: linear-gradient( 135deg, rgba(103, 41, 184, .07), rgba(18, 200, 187, .07) );
    border-left: 4px solid #6729b8;
    border-radius: 0 16px 16px 0;
}

    .process-info-box span[b-zhof3t4wkq] {
        display: block;
        margin-bottom: 8px;
        color: #6729b8;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 1.5px;
    }

    .process-info-box p[b-zhof3t4wkq] {
        margin: 0;
        color: #414b5c;
        font-size: 15px;
        line-height: 1.7;
    }


/* ALT BAŞLIK */

.process-stage-content h3[b-zhof3t4wkq] {
    margin: 45px 0 22px;
    color: #172033;
    font-size: 21px;
}


/* NOKTALAR */

.process-content-grid[b-zhof3t4wkq] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.process-point[b-zhof3t4wkq] {
    display: flex;
    gap: 14px;
    padding: 20px;
    background: #f8fafc;
    border: 1px solid #edf0f4;
    border-radius: 15px;
}

.process-point-icon[b-zhof3t4wkq] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: rgba(18, 200, 187, .12);
    color: #0b9f95;
    font-weight: 900;
}

.process-point strong[b-zhof3t4wkq] {
    display: block;
    margin-bottom: 6px;
    color: #263043;
    font-size: 14px;
}

.process-point p[b-zhof3t4wkq] {
    margin: 0;
    color: #7a8392;
    font-size: 13px;
    line-height: 1.6;
}


/* SONRAKİ AŞAMA */

.process-next[b-zhof3t4wkq] {
    margin-top: 45px;
    padding-top: 30px;
    border-top: 1px solid #edf0f4;
}

    .process-next button[b-zhof3t4wkq] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 18px 20px;
        background: #172033;
        border: 0;
        border-radius: 14px;
        color: white;
        text-align: left;
        cursor: pointer;
        transition: transform .2s ease;
    }

        .process-next button:hover[b-zhof3t4wkq] {
            transform: translateY(-2px);
        }

    .process-next span[b-zhof3t4wkq] {
        color: #9da7b8;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1px;
    }

    .process-next strong[b-zhof3t4wkq] {
        color: white;
        font-size: 14px;
    }


/* MOBİL */

@media (max-width: 900px) {

    .process-detail-layout[b-zhof3t4wkq] {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .process-stage-menu[b-zhof3t4wkq] {
        position: static;
    }

    .process-stage-content[b-zhof3t4wkq] {
        padding: 35px 25px;
    }

    .process-content-grid[b-zhof3t4wkq] {
        grid-template-columns: 1fr;
    }

    .process-content-number[b-zhof3t4wkq] {
        font-size: 120px;
    }
}


@media (max-width: 600px) {

    .process-detail-container[b-zhof3t4wkq] {
        width: min(100% - 24px, 1180px);
    }

    .process-detail-hero[b-zhof3t4wkq] {
        padding: 65px 0;
    }

    .process-stage-content[b-zhof3t4wkq] {
        padding: 30px 20px;
        border-radius: 20px;
    }

    .process-stage-item[b-zhof3t4wkq] {
        min-height: 64px;
    }

    .process-content-intro[b-zhof3t4wkq] {
        font-size: 15px;
    }
}
/* _content/WEB/Components/Pages/AtikSu/Zoratiksu.razor.rz.scp.css */
.process-detail-page[b-dgvczvxut8] {
    background: #ffffff;
    min-height: 100vh;
}


/* HERO */

.process-detail-hero[b-dgvczvxut8] {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    background: radial-gradient(circle at 85% 30%, rgba(103, 41, 184, .25), transparent 35%), radial-gradient(circle at 15% 80%, rgba(18, 200, 187, .18), transparent 30%), linear-gradient(135deg, #101827, #172033);
}

.process-detail-container[b-dgvczvxut8] {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.process-detail-eyebrow[b-dgvczvxut8] {
    display: block;
    margin-bottom: 18px;
    color: #12c8bb;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
}

.process-detail-hero h1[b-dgvczvxut8] {
    margin: 0;
    color: white;
    font-size: clamp(40px, 5vw, 70px);
    line-height: 1;
    font-weight: 300;
}

    .process-detail-hero h1 strong[b-dgvczvxut8] {
        display: block;
        margin-top: 10px;
        color: #a879ff;
        font-weight: 800;
    }

.process-detail-hero p[b-dgvczvxut8] {
    max-width: 700px;
    margin: 25px 0 0;
    color: #cbd5e1;
    font-size: 17px;
    line-height: 1.8;
}


/* CONTENT */

.process-detail-content[b-dgvczvxut8] {
    padding: 80px 0 110px;
    background: radial-gradient(circle at 90% 10%, rgba(103, 41, 184, .06), transparent 30%), #f8fafc;
}


/* LAYOUT */

.process-detail-layout[b-dgvczvxut8] {
    display: grid;
    grid-template-columns: 330px minmax(0, 1fr);
    gap: 60px;
    align-items: start;
}


/* SOL MENÜ */

.process-stage-menu[b-dgvczvxut8] {
    position: sticky;
    top: 30px;
    padding: 10px;
    background: white;
    border: 1px solid #e6e9ef;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, .08);
}

.process-menu-title[b-dgvczvxut8] {
    padding: 20px 18px 22px;
}

    .process-menu-title span[b-dgvczvxut8] {
        display: block;
        margin-bottom: 6px;
        color: #8a94a6;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1.5px;
    }

    .process-menu-title strong[b-dgvczvxut8] {
        color: #182033;
        font-size: 19px;
    }


/* LİSTE BUTONU */

.process-stage-item[b-dgvczvxut8] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 72px;
    margin: 4px 0;
    padding: 10px 14px;
    background: transparent;
    border: 0;
    border-radius: 14px;
    text-align: left;
    cursor: pointer;
    transition: background .2s ease, transform .2s ease;
}

    .process-stage-item:hover[b-dgvczvxut8] {
        background: #f7f4ff;
        transform: translateX(3px);
    }


    /* SEÇİLİ */

    .process-stage-item.selected[b-dgvczvxut8] {
        background: linear-gradient( 100deg, rgba(103, 41, 184, .12), rgba(18, 200, 187, .06) );
    }

.process-stage-number[b-dgvczvxut8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    min-width: 42px;
    margin-right: 13px;
    border-radius: 12px;
    background: #f1f3f7;
    color: #697386;
    font-size: 11px;
    font-weight: 900;
}

.process-stage-item.selected .process-stage-number[b-dgvczvxut8] {
    background: #6729b8;
    color: white;
    box-shadow: 0 8px 20px rgba(103, 41, 184, .25);
}

.process-stage-text[b-dgvczvxut8] {
    flex: 1;
}

    .process-stage-text span[b-dgvczvxut8] {
        display: block;
        margin-bottom: 4px;
        color: #9aa2b1;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 1px;
    }

    .process-stage-text strong[b-dgvczvxut8] {
        color: #263043;
        font-size: 14px;
        font-weight: 800;
    }

.process-stage-item.selected .process-stage-text strong[b-dgvczvxut8] {
    color: #6729b8;
}

.process-stage-arrow[b-dgvczvxut8] {
    color: #b2b8c4;
    font-size: 18px;
}

.process-stage-item.selected .process-stage-arrow[b-dgvczvxut8] {
    color: #12a99f;
}


/* SAĞ İÇERİK */

.process-stage-content[b-dgvczvxut8] {
    position: relative;
    min-height: 600px;
    padding: 55px;
    overflow: hidden;
    background: white;
    border: 1px solid #e6e9ef;
    border-radius: 28px;
    box-shadow: 0 25px 70px rgba(15, 23, 42, .08);
}

.process-content-number[b-dgvczvxut8] {
    position: absolute;
    top: -25px;
    right: 25px;
    color: rgba(103, 41, 184, .055);
    font-size: 190px;
    line-height: 1;
    font-weight: 900;
    pointer-events: none;
}

.process-content-kicker[b-dgvczvxut8] {
    position: relative;
    z-index: 1;
    display: block;
    margin-bottom: 14px;
    color: #12a99f;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 2px;
}

.process-stage-content h2[b-dgvczvxut8] {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0;
    color: #172033;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1.05;
}

.process-content-line[b-dgvczvxut8] {
    width: 80px;
    height: 4px;
    margin: 28px 0;
    border-radius: 10px;
    background: linear-gradient( 90deg, #6729b8, #12c8bb );
}

.process-content-intro[b-dgvczvxut8] {
    position: relative;
    z-index: 1;
    max-width: 760px;
    margin: 0;
    color: #5d6675;
    font-size: 17px;
    line-height: 1.9;
}


/* AMAÇ */

.process-info-box[b-dgvczvxut8] {
    margin: 38px 0;
    padding: 25px 28px;
    background: linear-gradient( 135deg, rgba(103, 41, 184, .07), rgba(18, 200, 187, .07) );
    border-left: 4px solid #6729b8;
    border-radius: 0 16px 16px 0;
}

    .process-info-box span[b-dgvczvxut8] {
        display: block;
        margin-bottom: 8px;
        color: #6729b8;
        font-size: 10px;
        font-weight: 900;
        letter-spacing: 1.5px;
    }

    .process-info-box p[b-dgvczvxut8] {
        margin: 0;
        color: #414b5c;
        font-size: 15px;
        line-height: 1.7;
    }


/* ALT BAŞLIK */

.process-stage-content h3[b-dgvczvxut8] {
    margin: 45px 0 22px;
    color: #172033;
    font-size: 21px;
}


/* NOKTALAR */

.process-content-grid[b-dgvczvxut8] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.process-point[b-dgvczvxut8] {
    display: flex;
    gap: 14px;
    padding: 20px;
    background: #f8fafc;
    border: 1px solid #edf0f4;
    border-radius: 15px;
}

.process-point-icon[b-dgvczvxut8] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 50%;
    background: rgba(18, 200, 187, .12);
    color: #0b9f95;
    font-weight: 900;
}

.process-point strong[b-dgvczvxut8] {
    display: block;
    margin-bottom: 6px;
    color: #263043;
    font-size: 14px;
}

.process-point p[b-dgvczvxut8] {
    margin: 0;
    color: #7a8392;
    font-size: 13px;
    line-height: 1.6;
}


/* SONRAKİ AŞAMA */

.process-next[b-dgvczvxut8] {
    margin-top: 45px;
    padding-top: 30px;
    border-top: 1px solid #edf0f4;
}

    .process-next button[b-dgvczvxut8] {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: 18px 20px;
        background: #172033;
        border: 0;
        border-radius: 14px;
        color: white;
        text-align: left;
        cursor: pointer;
        transition: transform .2s ease;
    }

        .process-next button:hover[b-dgvczvxut8] {
            transform: translateY(-2px);
        }

    .process-next span[b-dgvczvxut8] {
        color: #9da7b8;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1px;
    }

    .process-next strong[b-dgvczvxut8] {
        color: white;
        font-size: 14px;
    }


/* MOBİL */

@media (max-width: 900px) {

    .process-detail-layout[b-dgvczvxut8] {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .process-stage-menu[b-dgvczvxut8] {
        position: static;
    }

    .process-stage-content[b-dgvczvxut8] {
        padding: 35px 25px;
    }

    .process-content-grid[b-dgvczvxut8] {
        grid-template-columns: 1fr;
    }

    .process-content-number[b-dgvczvxut8] {
        font-size: 120px;
    }
}


@media (max-width: 600px) {

    .process-detail-container[b-dgvczvxut8] {
        width: min(100% - 24px, 1180px);
    }

    .process-detail-hero[b-dgvczvxut8] {
        padding: 65px 0;
    }

    .process-stage-content[b-dgvczvxut8] {
        padding: 30px 20px;
        border-radius: 20px;
    }

    .process-stage-item[b-dgvczvxut8] {
        min-height: 64px;
    }

    .process-content-intro[b-dgvczvxut8] {
        font-size: 15px;
    }
}
/* _content/WEB/Components/Pages/Bloglar/Blog.razor.rz.scp.css */
/* =================================================================
   TUSASER TEKNİK BLOG VE BİLGİ BANKASI - CSS STİL DOSYASI
   ================================================================ */

.blog-container[b-q2ldhjvnb7] {
    max-width: 1250px;
    margin: 0 auto;
    padding: 50px 20px;
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: #1e293b;
    background-color: #f8fafc;
    min-height: 100vh;
}

/* Üst Başlık ve Arama Alanı */
.blog-header[b-q2ldhjvnb7] {
    text-align: center;
    margin-bottom: 45px;
}

.blog-header h1[b-q2ldhjvnb7] {
    font-size: 2.75rem;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.blog-header p[b-q2ldhjvnb7] {
    font-size: 1.15rem;
    color: #64748b;
    max-width: 700px;
    margin: 0 auto 30px auto;
    line-height: 1.5;
}

.search-bar-wrapper[b-q2ldhjvnb7] {
    max-width: 550px;
    margin: 0 auto;
}

.search-input[b-q2ldhjvnb7] {
    width: 100%;
    padding: 14px 24px;
    font-size: 1.05rem;
    border: 2px solid #e2e8f0;
    border-radius: 50px;
    outline: none;
    background-color: #ffffff;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

.search-input:focus[b-q2ldhjvnb7] {
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
    background-color: #ffffff;
}

/* Kategori Filtreleme Sekmeleri */
.category-tabs[b-q2ldhjvnb7] {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 45px;
}

.cat-btn[b-q2ldhjvnb7] {
    background-color: #ffffff;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
}

.cat-btn:hover[b-q2ldhjvnb7] {
    background-color: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}

.cat-btn.active[b-q2ldhjvnb7] {
    background-color: #0f172a;
    color: #ffffff;
    border-color: #0f172a;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
}

/* Öne Çıkan / Manşet Yazı Kartı */
.featured-post-card[b-q2ldhjvnb7] {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    background: #ffffff;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.06);
    margin-bottom: 50px;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featured-post-card:hover[b-q2ldhjvnb7] {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.12);
}

.featured-image[b-q2ldhjvnb7] {
    position: relative;
    overflow: hidden;
}

.featured-image img[b-q2ldhjvnb7] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    min-height: 340px;
    transition: transform 0.5s ease;
}

.featured-post-card:hover .featured-image img[b-q2ldhjvnb7] {
    transform: scale(1.03);
}

.featured-content[b-q2ldhjvnb7] {
    padding: 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.featured-content .badge[b-q2ldhjvnb7] {
    display: inline-block;
    background-color: #eff6ff;
    color: #1d4ed8;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 18px;
    width: fit-content;
}

.featured-content h2[b-q2ldhjvnb7] {
    font-size: 1.85rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 15px;
    line-height: 1.35;
}

.featured-content p[b-q2ldhjvnb7] {
    color: #64748b;
    font-size: 1.05rem;
    margin-bottom: 25px;
    line-height: 1.6;
}

.post-meta[b-q2ldhjvnb7] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: #94a3b8;
    border-top: 1px solid #f1f5f9;
    padding-top: 15px;
}

.read-more[b-q2ldhjvnb7] {
    font-weight: 700;
    color: #2563eb;
    transition: transform 0.2s ease;
}

.featured-post-card:hover .read-more[b-q2ldhjvnb7] {
    transform: translateX(4px);
}

/* Blog Yazıları Izgarası (Grid) */
.blog-grid[b-q2ldhjvnb7] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 30px;
}

.blog-card[b-q2ldhjvnb7] {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover[b-q2ldhjvnb7] {
    transform: translateY(-5px);
    box-shadow: 0 16px 30px -8px rgba(0, 0, 0, 0.1);
}

.card-img[b-q2ldhjvnb7] {
    position: relative;
    height: 220px;
    overflow: hidden;
}

.card-img img[b-q2ldhjvnb7] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.blog-card:hover .card-img img[b-q2ldhjvnb7] {
    transform: scale(1.05);
}

.card-category[b-q2ldhjvnb7] {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(15, 23, 42, 0.8);
    backdrop-filter: blur(6px);
    color: #ffffff;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.card-body[b-q2ldhjvnb7] {
    padding: 28px;
    flex-grow: 1;
}

.card-date[b-q2ldhjvnb7] {
    font-size: 0.85rem;
    color: #94a3b8;
    margin-bottom: 10px;
    display: block;
    font-weight: 500;
}

.card-body h3[b-q2ldhjvnb7] {
    font-size: 1.3rem;
    font-weight: 700;
    color: #0f172a;
    margin-bottom: 12px;
    line-height: 1.4;
}

.card-body p[b-q2ldhjvnb7] {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
}

.card-footer[b-q2ldhjvnb7] {
    padding: 18px 28px;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    background-color: #fafaf9;
}

.read-more-link[b-q2ldhjvnb7] {
    font-weight: 700;
    color: #2563eb;
}

.view-count[b-q2ldhjvnb7] {
    color: #94a3b8;
    font-size: 0.85rem;
}

.no-results[b-q2ldhjvnb7] {
    grid-column: 1 / -1;
    text-align: center;
    padding: 70px;
    color: #64748b;
    font-size: 1.15rem;
    background: #ffffff;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02);
}

/* Mobil Uyumluluk */
@media (max-width: 992px) {
    .featured-post-card[b-q2ldhjvnb7] {
        grid-template-columns: 1fr;
    }

    .featured-image img[b-q2ldhjvnb7] {
        min-height: 250px;
    }

    .blog-header h1[b-q2ldhjvnb7] {
        font-size: 2.2rem;
    }
}
/* _content/WEB/Components/Pages/Cozumlerimiz.razor.rz.scp.css */
/* =========================================================
   COZUMLERIMIZ - GENEL
   ========================================================= */

.min-height-pane[b-0eswl8bjh5] {
    min-height: 520px;
}

.fw-extrabold[b-0eswl8bjh5] {
    font-weight: 800;
}

.shadow-xs[b-0eswl8bjh5] {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.justify-text[b-0eswl8bjh5] {
    text-align: justify;
}


/* =========================================================
   HERO BAŞLIK
   ========================================================= */

.cozumler-hero-title[b-0eswl8bjh5] {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    white-space: nowrap;
}

.cozumler-label[b-0eswl8bjh5] {
    color: #6c4ce6;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.cozumler-hero-title h1[b-0eswl8bjh5] {
    margin: 0;
    color: #17172b;
    font-size: clamp(2rem, 3.5vw, 3.5rem);
    line-height: 1.1;
    font-weight: 800;
    white-space: nowrap;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 992px) {

    /* =====================================================
       SOL MENÜ ANA KUTU
       ===================================================== */

    aside.col-lg-3[b-0eswl8bjh5] {
        min-width: 0;
    }

        aside.col-lg-3 .card[b-0eswl8bjh5] {
            height: 650px !important;
            max-height: 650px !important;
            /*
         * Kartın kendisi scroll olmayacak.
         * Scroll .list-group içerisinde olacak.
         */
            overflow: hidden !important;
            background: #ffffff !important;
            border: 1px solid #e9e8f2 !important;
            border-radius: 20px !important;
            padding: 15px !important;
            box-shadow: 0 10px 35px rgba(30, 25, 70, 0.06) !important;
            position: sticky !important;
            top: 100px;
            z-index: 10;
        }


            /* =====================================================
       SOL MENÜ - BAĞIMSIZ SCROLL
       ===================================================== */

            aside.col-lg-3 .card .list-group[b-0eswl8bjh5] {
                height: 100% !important;
                max-height: 100% !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                overscroll-behavior: contain;
                padding-right: 4px;
                min-height: 0;
                /*
         * Scrollbar
         */
                scrollbar-width: thin;
                scrollbar-color: #6c4ce6 transparent;
            }


                /* =====================================================
       SOL MENÜ SCROLLBAR
       ===================================================== */

                aside.col-lg-3 .card .list-group[b-0eswl8bjh5]::-webkit-scrollbar {
                    width: 6px;
                }

                aside.col-lg-3 .card .list-group[b-0eswl8bjh5]::-webkit-scrollbar-track {
                    background: transparent;
                }

                aside.col-lg-3 .card .list-group[b-0eswl8bjh5]::-webkit-scrollbar-thumb {
                    background: linear-gradient( 180deg, #6c4ce6, #16c7c0 );
                    border-radius: 10px;
                }

                    aside.col-lg-3 .card .list-group[b-0eswl8bjh5]::-webkit-scrollbar-thumb:hover {
                        background: #6c4ce6;
                    }


        /* =====================================================
       SOL MENÜ ELEMANLARI
       ===================================================== */

        aside.col-lg-3 .list-group-item[b-0eswl8bjh5] {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            color: #252536 !important;
            background: transparent !important;
            padding: 13px 13px 13px 16px !important;
            margin-bottom: 4px;
            border-radius: 12px !important;
            border: 1px solid transparent !important;
            overflow: hidden;
            /*
         * Maddelerin küçülmesini engeller.
         * Böylece liste uzadığında scroll oluşur.
         */
            flex-shrink: 0;
            transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        }


            /* =====================================================
       SOL MENÜ SOL ÇİZGİ
       ===================================================== */

            aside.col-lg-3 .list-group-item[b-0eswl8bjh5]::before {
                content: "";
                position: absolute;
                left: 0;
                top: 9px;
                bottom: 9px;
                width: 3px;
                border-radius: 0 5px 5px 0;
                background: transparent;
                transition: background 0.2s ease;
            }


            /* =====================================================
       SOL MENÜ HOVER
       ===================================================== */

            aside.col-lg-3 .list-group-item:hover[b-0eswl8bjh5] {
                background: #f7f5ff !important;
                color: #6040d2 !important;
                border-color: #e7e0ff !important;
                transform: translateX(3px);
            }


                /* Hover ikon */
                aside.col-lg-3 .list-group-item:hover span > i[b-0eswl8bjh5] {
                    color: #6040d2 !important;
                }


                /* Hover ok */
                aside.col-lg-3 .list-group-item:hover > i:last-child[b-0eswl8bjh5] {
                    color: #6040d2 !important;
                    transform: translateX(3px);
                }


            /* =====================================================
       SEÇİLİ / AKTİF MENÜ
       ===================================================== */

            aside.col-lg-3 .list-group-item.active[b-0eswl8bjh5],
            aside.col-lg-3 .list-group-item.active.bg-primary[b-0eswl8bjh5] {
                background: linear-gradient( 135deg, #6c4ce6 0%, #795ee8 65%, #16bfc0 140% ) !important;
                color: #ffffff !important;
                border-color: transparent !important;
                box-shadow: 0 8px 22px rgba(108, 76, 230, 0.20) !important;
                transform: translateX(4px);
            }


                /* Aktif sol çizgi */
                aside.col-lg-3 .list-group-item.active[b-0eswl8bjh5]::before,
                aside.col-lg-3 .list-group-item.active.bg-primary[b-0eswl8bjh5]::before {
                    background: #ffffff;
                }


                /* Aktif yazı */
                aside.col-lg-3 .list-group-item.active span[b-0eswl8bjh5],
                aside.col-lg-3 .list-group-item.active.bg-primary span[b-0eswl8bjh5] {
                    color: #ffffff !important;
                }


                    /* Aktif ikon */
                    aside.col-lg-3 .list-group-item.active span > i[b-0eswl8bjh5],
                    aside.col-lg-3 .list-group-item.active.bg-primary span > i[b-0eswl8bjh5] {
                        color: #ffffff !important;
                    }


                /* Aktif sağ ok */
                aside.col-lg-3 .list-group-item.active > i:last-child[b-0eswl8bjh5],
                aside.col-lg-3 .list-group-item.active.bg-primary > i:last-child[b-0eswl8bjh5] {
                    color: #ffffff !important;
                    transform: translateX(3px);
                }


            /* =====================================================
       NORMAL İKONLAR
       ===================================================== */

            aside.col-lg-3 .list-group-item span > i[b-0eswl8bjh5] {
                color: #6c4ce6;
                transition: color 0.2s ease, transform 0.2s ease;
            }


    /* =====================================================
       SAĞ AÇIKLAMA ALANI
       BAĞIMSIZ SCROLL
       ===================================================== */

    section.col-lg-9[b-0eswl8bjh5] {
        height: 650px !important;
        max-height: 650px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain;
        padding-right: 12px;
        scrollbar-width: thin;
        scrollbar-color: #6c4ce6 transparent;
        /*
         * Sağ taraf kendi alanında kalır.
         */
        min-width: 0;
    }


        /* Sağ içerik kartı */
        section.col-lg-9 > .card[b-0eswl8bjh5] {
            min-height: 100%;
            background: transparent;
        }


        /* =====================================================
       SAĞ İÇERİK SCROLLBAR
       ===================================================== */

        section.col-lg-9[b-0eswl8bjh5]::-webkit-scrollbar {
            width: 6px;
        }

        section.col-lg-9[b-0eswl8bjh5]::-webkit-scrollbar-track {
            background: transparent;
        }

        section.col-lg-9[b-0eswl8bjh5]::-webkit-scrollbar-thumb {
            background: linear-gradient( 180deg, #6c4ce6, #16c7c0 );
            border-radius: 10px;
        }

            section.col-lg-9[b-0eswl8bjh5]::-webkit-scrollbar-thumb:hover {
                background: #6c4ce6;
            }


        /* =====================================================
       SAĞ AÇIKLAMA BAŞLIKLARI
       ===================================================== */

        section.col-lg-9 h2[b-0eswl8bjh5] {
            color: #17172b !important;
        }

        section.col-lg-9 h3[b-0eswl8bjh5] {
            color: #29263d !important;
        }

        section.col-lg-9 h4[b-0eswl8bjh5] {
            color: #29263d !important;
        }


        /* Ana vurgu rengi */
        section.col-lg-9 .text-primary[b-0eswl8bjh5] {
            color: #6c4ce6 !important;
        }


        /* Border */
        section.col-lg-9 .border-light-subtle[b-0eswl8bjh5] {
            border-color: #e8e7f0 !important;
        }


        /* İçerik gölgeleri */
        section.col-lg-9 .shadow-sm[b-0eswl8bjh5] {
            box-shadow: 0 8px 25px rgba(30, 25, 70, 0.05) !important;
        }


        /* =====================================================
       SAĞ İÇERİK PARAGRAFLARI
       ===================================================== */

        section.col-lg-9 p[b-0eswl8bjh5] {
            line-height: 1.8;
        }


        /* =====================================================
       ARTICLE
       ===================================================== */

        section.col-lg-9 article[b-0eswl8bjh5] {
            padding-bottom: 30px;
        }
}


/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 991.98px) {

    /* =====================================================
       HERO
       ===================================================== */

    .cozumler-hero-title[b-0eswl8bjh5] {
        gap: 10px;
        white-space: normal;
        flex-wrap: wrap;
    }

        .cozumler-hero-title h1[b-0eswl8bjh5] {
            font-size: 2rem;
            white-space: normal;
        }


    /* =====================================================
       SOL MENÜ
       ===================================================== */

    aside.col-lg-3 .card[b-0eswl8bjh5] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        position: relative !important;
        top: auto !important;
        padding: 15px !important;
    }


        aside.col-lg-3 .card .list-group[b-0eswl8bjh5] {
            height: auto !important;
            max-height: none !important;
            overflow: visible !important;
            padding-right: 0;
        }


    /* =====================================================
       SAĞ İÇERİK
       ===================================================== */

    section.col-lg-9[b-0eswl8bjh5] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding-right: 0;
    }


        section.col-lg-9 > .card[b-0eswl8bjh5] {
            min-height: auto;
        }
}



/* =========================================================
   TUSASER - YENİ ÇÖZÜMLER SAYFASI
   ========================================================= */

.cozumler-wide[b-0eswl8bjh5] {
    width: 100%;
    max-width: none;
    padding-left: clamp(16px, 2.4vw, 40px);
    padding-right: clamp(16px, 2.4vw, 40px);
}

.cozumler-hero[b-0eswl8bjh5] {
    padding: 52px 0 44px;
    background: linear-gradient(125deg, #f7f8ff 0%, #f0fbfa 58%, #eef5ff 100%);
    border-bottom: 1px solid #e9edf4;
}

.cozumler-hero-title[b-0eswl8bjh5] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
}

    .cozumler-hero-title h1[b-0eswl8bjh5] {
        margin: 0;
        color: #17172b;
        font-size: clamp(2rem, 3.4vw, 3.25rem);
        line-height: 1.12;
        font-weight: 800;
    }

.cozumler-label[b-0eswl8bjh5],
.solution-eyebrow[b-0eswl8bjh5] {
    display: inline-block;
    color: #6c4ce6;
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .13em;
}

.cozumler-hero-subtitle[b-0eswl8bjh5] {
    max-width: 900px;
    margin: 18px 0 0;
    color: #667085;
    font-size: 1.08rem;
    line-height: 1.75;
}

.cozumler-main[b-0eswl8bjh5] {
    padding-top: 36px;
    padding-bottom: 64px;
}

.cozumler-menu-card[b-0eswl8bjh5] {
    position: sticky;
    top: 105px;
    border: 1px solid #e9e8f2;
    border-radius: 20px;
    padding: 18px;
    background: #fff;
    box-shadow: 0 12px 34px rgba(30, 25, 70, .07);
}

.cozumler-menu-heading[b-0eswl8bjh5] {
    padding: 8px 8px 18px;
}

.cozumler-menu-kicker[b-0eswl8bjh5] {
    color: #16a6a0;
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .12em;
}

.cozumler-menu-heading h2[b-0eswl8bjh5] {
    margin: 8px 0 5px;
    color: #202039;
    font-size: 1.25rem;
    font-weight: 800;
}

.cozumler-menu-heading p[b-0eswl8bjh5] {
    margin: 0;
    color: #7a8291;
    font-size: .88rem;
    line-height: 1.55;
}

.cozumler-menu-card nav[b-0eswl8bjh5] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cozumler-menu-card .list-group-item[b-0eswl8bjh5] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 13px 12px;
    border: 1px solid transparent;
    border-radius: 11px !important;
    color: #45465b;
    font-weight: 600;
    transition: .2s ease;
}

    .cozumler-menu-card .list-group-item span[b-0eswl8bjh5] {
        display: flex;
        align-items: center;
        gap: 12px;
    }

        .cozumler-menu-card .list-group-item span i[b-0eswl8bjh5] {
            color: #6c4ce6;
            font-size: 1.15rem;
        }

    .cozumler-menu-card .list-group-item > i[b-0eswl8bjh5] {
        color: #a4a8b5;
        font-size: .8rem;
    }

    .cozumler-menu-card .list-group-item:hover[b-0eswl8bjh5] {
        color: #6040d2;
        background: #f7f5ff;
        border-color: #e8e1ff;
        transform: translateX(3px);
    }

    .cozumler-menu-card .list-group-item.active[b-0eswl8bjh5] {
        color: #fff;
        background: linear-gradient(120deg, #6c4ce6, #16bfc0);
        border-color: transparent;
        box-shadow: 0 8px 20px rgba(108, 76, 230, .18);
    }

        .cozumler-menu-card .list-group-item.active span i[b-0eswl8bjh5],
        .cozumler-menu-card .list-group-item.active > i[b-0eswl8bjh5] {
            color: #fff;
        }

.cozumler-menu-contact[b-0eswl8bjh5] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 20px;
    padding: 15px 12px;
    border-radius: 14px;
    background: #f4f8fb;
}

    .cozumler-menu-contact > i[b-0eswl8bjh5] {
        color: #16a6a0;
        font-size: 1.35rem;
    }

    .cozumler-menu-contact div[b-0eswl8bjh5] {
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 4px;
    }

    .cozumler-menu-contact strong[b-0eswl8bjh5] {
        color: #282940;
        font-size: .82rem;
    }

    .cozumler-menu-contact span[b-0eswl8bjh5] {
        color: #737b8a;
        font-size: .72rem;
        line-height: 1.4;
    }

    .cozumler-menu-contact a[b-0eswl8bjh5] {
        color: #6c4ce6;
        font-size: 1.1rem;
    }

.cozumler-content[b-0eswl8bjh5] {
    min-width: 0;
    padding: 8px 2px 20px;
}

.solution-intro[b-0eswl8bjh5] {
    padding: 10px 0 24px;
}

    .solution-intro h2[b-0eswl8bjh5] {
        margin: 10px 0 18px;
        color: #202039;
        font-size: clamp(1.65rem, 2.5vw, 2.35rem);
        font-weight: 800;
        line-height: 1.2;
    }

    .solution-intro p[b-0eswl8bjh5] {
        color: #697386;
        font-size: 1rem;
        line-height: 1.9;
        text-align: justify;
    }

    .solution-intro .solution-lead[b-0eswl8bjh5] {
        color: #454b5d;
        font-size: 1.16rem;
        font-weight: 500;
        line-height: 1.8;
    }

.solution-stat-grid[b-0eswl8bjh5],
.solution-category-grid[b-0eswl8bjh5],
.solution-detail-grid[b-0eswl8bjh5] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin: 20px 0 34px;
}

    .solution-stat-grid > div[b-0eswl8bjh5],
    .solution-detail-card[b-0eswl8bjh5],
    .solution-category-card[b-0eswl8bjh5] {
        min-width: 0;
        padding: 22px;
        border: 1px solid #e9eaf1;
        border-radius: 17px;
        background: #fff;
        box-shadow: 0 7px 22px rgba(31, 35, 60, .045);
    }

    .solution-stat-grid > div[b-0eswl8bjh5] {
        display: flex;
        flex-direction: column;
        gap: 7px;
    }

    .solution-stat-grid i[b-0eswl8bjh5],
    .solution-detail-card > i[b-0eswl8bjh5] {
        color: #6c4ce6;
        font-size: 1.55rem;
    }

    .solution-stat-grid strong[b-0eswl8bjh5] {
        color: #25263d;
        font-size: 1rem;
    }

    .solution-stat-grid span[b-0eswl8bjh5] {
        color: #7b8291;
        font-size: .85rem;
    }

.solution-section-title[b-0eswl8bjh5] {
    margin: 38px 0 18px;
    color: #202039;
    font-size: 1.45rem;
    font-weight: 800;
}

.solution-category-grid[b-0eswl8bjh5] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.solution-category-card[b-0eswl8bjh5] {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: .2s ease;
}

    .solution-category-card:hover[b-0eswl8bjh5] {
        transform: translateY(-4px);
        border-color: #d9d0ff;
        box-shadow: 0 12px 28px rgba(31, 35, 60, .09);
    }

.category-icon[b-0eswl8bjh5] {
    display: inline-flex;
    width: 48px;
    height: 48px;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    border-radius: 14px;
    color: #6c4ce6;
    background: #f1edff;
    font-size: 1.35rem;
}

.solution-category-card h3[b-0eswl8bjh5] {
    color: #25263d;
    font-size: 1.1rem;
    font-weight: 800;
}

.solution-category-card p[b-0eswl8bjh5] {
    min-height: 48px;
    color: #727b8a;
    font-size: .9rem;
    line-height: 1.65;
}

.solution-category-card > span:last-child[b-0eswl8bjh5] {
    color: #6c4ce6;
    font-size: .85rem;
    font-weight: 700;
}

.solution-detail-grid[b-0eswl8bjh5] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 12px;
}

.solution-detail-card h3[b-0eswl8bjh5] {
    margin: 12px 0;
    color: #292a42;
    font-size: 1.08rem;
    font-weight: 800;
}

.solution-detail-card ul[b-0eswl8bjh5] {
    margin: 0;
    padding-left: 19px;
    color: #697386;
    line-height: 1.9;
}

.solution-detail-card p[b-0eswl8bjh5] {
    color: #697386;
    line-height: 1.9;
}

    .solution-detail-card p i[b-0eswl8bjh5] {
        color: #16a6a0;
        margin: 0 3px;
    }

.solution-media-section[b-0eswl8bjh5] {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid #e9eaf1;
}

    .solution-media-section > h3[b-0eswl8bjh5],
    .solution-section-heading h3[b-0eswl8bjh5] {
        margin: 0 0 18px;
        color: #25263d;
        font-size: 1.35rem;
        font-weight: 800;
    }

.solution-media-grid[b-0eswl8bjh5] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

.media-placeholder[b-0eswl8bjh5] {
    display: flex;
    min-height: 205px;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 20px;
    overflow: hidden;
    border: 1px dashed #c9c5df;
    border-radius: 16px;
    background: linear-gradient(145deg, #f8f7ff, #f1fbfa);
    text-align: center;
}

    .media-placeholder i[b-0eswl8bjh5] {
        color: #8270d8;
        font-size: 2rem;
    }

    .media-placeholder strong[b-0eswl8bjh5] {
        color: #36364e;
        font-size: .92rem;
    }

    .media-placeholder span[b-0eswl8bjh5] {
        color: #82899a;
        font-size: .75rem;
        overflow-wrap: anywhere;
    }

.video-placeholder[b-0eswl8bjh5] {
    display: flex;
    min-height: 150px;
    align-items: center;
    gap: 18px;
    margin-top: 16px;
    padding: 24px;
    border: 1px dashed #b9d9d7;
    border-radius: 16px;
    background: linear-gradient(120deg, #f0fbfa, #f6f5ff);
}

    .video-placeholder > i[b-0eswl8bjh5] {
        color: #16a6a0;
        font-size: 2.8rem;
    }

    .video-placeholder div[b-0eswl8bjh5] {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .video-placeholder strong[b-0eswl8bjh5] {
        color: #292a42;
        font-size: 1rem;
    }

    .video-placeholder span[b-0eswl8bjh5] {
        color: #737b8a;
        font-size: .85rem;
        line-height: 1.6;
    }

.solution-contact-strip[b-0eswl8bjh5] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 42px;
    padding: 28px;
    border: 1px solid #e5e2f5;
    border-radius: 20px;
    background: linear-gradient(115deg, #f7f5ff, #effbfa);
}

    .solution-contact-strip h3[b-0eswl8bjh5] {
        margin: 8px 0;
        color: #24253d;
        font-size: 1.2rem;
        font-weight: 800;
    }

    .solution-contact-strip p[b-0eswl8bjh5] {
        margin: 0;
        color: #70798a;
        line-height: 1.7;
    }

.solution-contact-button[b-0eswl8bjh5] {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-radius: 11px;
    color: #fff;
    background: #6c4ce6;
    font-weight: 700;
    text-decoration: none;
    transition: .2s ease;
}

    .solution-contact-button:hover[b-0eswl8bjh5] {
        color: #fff;
        background: #5838d0;
        transform: translateY(-2px);
    }

.solution-empty[b-0eswl8bjh5] {
    padding: 50px 25px;
    text-align: center;
}

    .solution-empty > i[b-0eswl8bjh5] {
        color: #6c4ce6;
        font-size: 2.5rem;
    }

@media (min-width: 992px) {
    .cozumler-menu-card[b-0eswl8bjh5] {
        max-height: calc(100vh - 130px);
        overflow-y: auto;
    }
}

@media (max-width: 991.98px) {
    .cozumler-hero[b-0eswl8bjh5] {
        padding: 38px 0 30px;
    }

    .cozumler-menu-card[b-0eswl8bjh5] {
        position: static;
        margin-bottom: 10px;
    }

        .cozumler-menu-card nav[b-0eswl8bjh5] {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

    .solution-stat-grid[b-0eswl8bjh5] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .solution-stat-grid[b-0eswl8bjh5],
    .solution-category-grid[b-0eswl8bjh5],
    .solution-detail-grid[b-0eswl8bjh5],
    .solution-media-grid[b-0eswl8bjh5] {
        grid-template-columns: 1fr;
    }

        .solution-stat-grid > div[b-0eswl8bjh5] {
            flex-direction: row;
            align-items: center;
            flex-wrap: wrap;
        }

    .solution-contact-strip[b-0eswl8bjh5] {
        align-items: flex-start;
        flex-direction: column;
        padding: 22px;
    }

    .cozumler-hero-title[b-0eswl8bjh5] {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

        .cozumler-hero-title h1[b-0eswl8bjh5] {
            white-space: normal;
        }

    .solution-intro p[b-0eswl8bjh5] {
        text-align: left;
    }
}

@media (max-width: 480px) {
    .cozumler-menu-card nav[b-0eswl8bjh5] {
        grid-template-columns: 1fr;
    }

    .video-placeholder[b-0eswl8bjh5] {
        align-items: flex-start;
        padding: 18px;
    }
}


/* =========================================================
   TAM GENİŞLİK YERLEŞİMİ - SOL MENÜ + SAĞ AÇIKLAMA
   ========================================================= */

/* Dış kenar boşluklarını kaldır */
.cozumler-wide[b-0eswl8bjh5] {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Hero metni kenara yapışmasın; yalnızca içerik satırı tam genişlik olsun */
.cozumler-hero .cozumler-wide[b-0eswl8bjh5] {
    padding-left: clamp(16px, 2vw, 30px) !important;
    padding-right: clamp(16px, 2vw, 30px) !important;
}

/* Sol menü ve sağ açıklama arasında Bootstrap gutter bırakma */
.cozumler-edge-row[b-0eswl8bjh5] {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    --bs-gutter-x: 0;
}

    /* Kolonların varsayılan iç boşluklarını sıfırla */
    .cozumler-edge-row > .cozumler-sidebar-column[b-0eswl8bjh5],
    .cozumler-edge-row > .cozumler-content-column[b-0eswl8bjh5] {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

/* Sol menü ekranın en solundan başlasın */
.cozumler-sidebar-column[b-0eswl8bjh5] {
    flex: 0 0 280px;
    width: 280px;
    max-width: 280px;
}

    /* Menü kartı sol kenara tam otursun */
    .cozumler-sidebar-column .cozumler-menu-card[b-0eswl8bjh5] {
        margin: 0 !important;
        border-left: 0 !important;
        border-top-left-radius: 0 !important;
        border-bottom-left-radius: 0 !important;
        min-height: 650px;
    }

/* Açıklama alanı menünün bittiği noktadan başlasın ve kalan genişliği kullansın */
.cozumler-content-column[b-0eswl8bjh5] {
    flex: 1 1 0;
    width: auto;
    max-width: none;
    min-width: 0;
    margin: 0 !important;
    padding: 0 !important;
}

/* İçerik kartı sağ kenara kadar uzasın */
.cozumler-content[b-0eswl8bjh5] {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0 !important;
    padding: 28px clamp(22px, 3vw, 48px) 40px !important;
}

    /* Sağ içerikteki bölümler yatayda mevcut alanı kullansın */
    .cozumler-content > section[b-0eswl8bjh5],
    .cozumler-content > div[b-0eswl8bjh5],
    .cozumler-content article[b-0eswl8bjh5] {
        max-width: none;
    }

/* Küçük ekranlarda kolonlar alt alta geçsin; mobilde kontrollü kenar boşluğu */
@media (max-width: 991.98px) {
    .cozumler-edge-row[b-0eswl8bjh5] {
        display: flex;
        flex-direction: column;
    }

        .cozumler-edge-row > .cozumler-sidebar-column[b-0eswl8bjh5],
        .cozumler-edge-row > .cozumler-content-column[b-0eswl8bjh5] {
            flex: 0 0 100%;
            width: 100%;
            max-width: 100%;
        }

    .cozumler-sidebar-column .cozumler-menu-card[b-0eswl8bjh5] {
        min-height: 0;
        margin: 0 12px 18px !important;
        border: 1px solid #e9e8f2 !important;
        border-radius: 18px !important;
    }

    .cozumler-content[b-0eswl8bjh5] {
        padding: 18px 16px 32px !important;
    }
}


/* =========================================================
   SCROLL DÜZENİ
   Sol menüde ve sağ açıklamada iç scroll yok.
   Sayfa, içerik uzunluğu kadar doğal olarak uzar.
   ========================================================= */

/* Sol menü kartı: sabit yükseklik ve sticky davranış kaldırıldı */
@media (min-width: 992px) {
    .cozumler-sidebar-column .cozumler-menu-card[b-0eswl8bjh5],
    aside.col-lg-3 .card[b-0eswl8bjh5] {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        position: static !important;
        top: auto !important;
        overflow: visible !important;
    }

        /* Menüdeki bütün bağlantılar aynı anda görünsün */
        .cozumler-sidebar-column .cozumler-menu-card nav[b-0eswl8bjh5],
        aside.col-lg-3 .card .list-group[b-0eswl8bjh5] {
            display: flex !important;
            flex-direction: column !important;
            height: auto !important;
            min-height: 0 !important;
            max-height: none !important;
            overflow: visible !important;
            overflow-y: visible !important;
            overflow-x: visible !important;
            padding-right: 0 !important;
        }

    /* Sağ açıklama alanı sabit 650px kutu veya iç scroll olmasın */
    .cozumler-content-column[b-0eswl8bjh5],
    section.col-lg-9[b-0eswl8bjh5] {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-y: visible !important;
        overflow-x: visible !important;
        overscroll-behavior: auto !important;
        padding-bottom: 0;
    }

    .cozumler-content[b-0eswl8bjh5] {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
}

/* Sol menüde öğe sayısı kadar yükseklik; kartın içi kırpılmasın */
.cozumler-sidebar-column .cozumler-menu-card[b-0eswl8bjh5] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

/* Mobilde de menü ve açıklama doğal sayfa akışında */
@media (max-width: 991.98px) {
    .cozumler-sidebar-column .cozumler-menu-card[b-0eswl8bjh5],
    .cozumler-content-column[b-0eswl8bjh5],
    section.col-lg-9[b-0eswl8bjh5] {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }
}
/* _content/WEB/Components/Pages/Endustriyel/AtikSuGeriKazanim.razor.rz.scp.css */
/* =========================================================
   TUSASER
   ATIK SU GERİ KAZANIM
   ========================================================= */

.asgr-page[b-wyhnsgbpjx] {
    --purple: #6729b8;
    --purple-dark: #35145f;
    --purple-soft: #f4effb;
    --turquoise: #12c8bb;
    --turquoise-soft: #eafbf9;
    --blue: #2aa8df;
    --ink: #14213d;
    --muted: #667085;
    --soft: #f6f8fb;
    --line: #e6e9ef;
    --white: #ffffff;
    color: var(--ink);
    background: #fff;
    overflow: hidden;
    font-family: Inter, "Segoe UI", Arial, sans-serif;
}

.asgr-container[b-wyhnsgbpjx] {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   HERO
   ========================================================= */

.asgr-hero[b-wyhnsgbpjx] {
    position: relative;
    min-height: 690px;
    color: #fff;
    overflow: hidden;
    background: radial-gradient(circle at 80% 30%, rgba(18,200,187,.30), transparent 27%), radial-gradient(circle at 75% 85%, rgba(103,41,184,.40), transparent 35%), linear-gradient(125deg, #211039 0%, #35145e 45%, #087d86 100%);
}

.asgr-hero-bg[b-wyhnsgbpjx] {
    position: absolute;
    inset: 0;
    opacity: .10;
    background-image: linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
    background-size: 55px 55px;
    transform: perspective(500px) rotateX(60deg) scale(1.7) translateY(100px);
    transform-origin: center bottom;
}

.asgr-hero-inner[b-wyhnsgbpjx] {
    position: relative;
    z-index: 2;
    padding-top: 25px;
}

.asgr-breadcrumb[b-wyhnsgbpjx] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: rgba(255,255,255,.62);
    margin-bottom: 55px;
}

    .asgr-breadcrumb a[b-wyhnsgbpjx] {
        color: rgba(255,255,255,.62);
        text-decoration: none;
    }

        .asgr-breadcrumb a:hover[b-wyhnsgbpjx] {
            color: #fff;
        }

    .asgr-breadcrumb strong[b-wyhnsgbpjx] {
        color: #fff;
        font-weight: 600;
    }

.asgr-hero-grid[b-wyhnsgbpjx] {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 60px;
    align-items: center;
}

.asgr-eyebrow[b-wyhnsgbpjx],
.asgr-section-kicker[b-wyhnsgbpjx] {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .19em;
    text-transform: uppercase;
}

.asgr-eyebrow[b-wyhnsgbpjx] {
    color: #7cf4eb;
    margin-bottom: 25px;
}

.asgr-hero-copy h1[b-wyhnsgbpjx] {
    max-width: 700px;
    font-size: clamp(45px, 6vw, 78px);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 300;
    margin: 0 0 28px;
}

    .asgr-hero-copy h1 strong[b-wyhnsgbpjx] {
        display: block;
        font-weight: 800;
        color: #fff;
    }

.asgr-hero-copy > p[b-wyhnsgbpjx] {
    max-width: 640px;
    color: rgba(255,255,255,.77);
    font-size: 17px;
    line-height: 1.85;
    margin-bottom: 34px;
}

.asgr-hero-actions[b-wyhnsgbpjx] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.asgr-btn[b-wyhnsgbpjx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 23px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
}

    .asgr-btn:hover[b-wyhnsgbpjx] {
        transform: translateY(-2px);
    }

.asgr-btn-primary[b-wyhnsgbpjx] {
    background: linear-gradient(90deg, var(--turquoise), #39d9cf);
    color: #073e3b;
    box-shadow: 0 12px 30px rgba(18,200,187,.18);
}

.asgr-btn-light[b-wyhnsgbpjx] {
    border: 1px solid rgba(255,255,255,.25);
    color: #fff;
    background: rgba(255,255,255,.07);
}

.asgr-btn-outline[b-wyhnsgbpjx] {
    border: 1px solid rgba(255,255,255,.35);
    color: #fff;
    background: transparent;
}

.asgr-hero-stats[b-wyhnsgbpjx] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    max-width: 650px;
    margin-top: 55px;
    border-top: 1px solid rgba(255,255,255,.13);
    padding-top: 25px;
}

    .asgr-hero-stats div[b-wyhnsgbpjx] {
        padding-right: 20px;
    }

    .asgr-hero-stats strong[b-wyhnsgbpjx] {
        display: block;
        font-size: 17px;
        color: #fff;
        margin-bottom: 5px;
    }

    .asgr-hero-stats span[b-wyhnsgbpjx] {
        font-size: 10px;
        line-height: 1.5;
        color: rgba(255,255,255,.53);
    }


/* =========================================================
   IMAGE SLOTS
   ========================================================= */

.asgr-image-slot[b-wyhnsgbpjx] {
    position: relative;
    min-height: 390px;
    border-radius: 28px;
    overflow: hidden;
    background: linear-gradient(145deg, #f8fafc, #edf3f6);
    border: 1px solid rgba(20,33,61,.08);
    box-shadow: 0 25px 70px rgba(20,33,61,.12);
}

.asgr-image-slot-hero[b-wyhnsgbpjx] {
    min-height: 500px;
    background: radial-gradient(circle at 70% 30%, rgba(18,200,187,.12), transparent 30%), linear-gradient(145deg, rgba(255,255,255,.95), rgba(233,240,245,.95));
}

.asgr-image-slot-inner[b-wyhnsgbpjx] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 35px;
    color: #7a8596;
}

    .asgr-image-slot-inner i[b-wyhnsgbpjx] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 76px;
        height: 76px;
        margin-bottom: 20px;
        border-radius: 22px;
        background: linear-gradient( 135deg, rgba(103,41,184,.10), rgba(18,200,187,.12) );
        color: var(--purple);
        font-size: 32px;
    }

    .asgr-image-slot-inner strong[b-wyhnsgbpjx] {
        display: block;
        color: var(--ink);
        font-size: 13px;
        letter-spacing: .08em;
        margin-bottom: 8px;
    }

    .asgr-image-slot-inner span[b-wyhnsgbpjx] {
        max-width: 370px;
        font-size: 13px;
        line-height: 1.7;
        color: var(--muted);
        margin-bottom: 12px;
    }

    .asgr-image-slot-inner small[b-wyhnsgbpjx] {
        font-size: 10px;
        color: #9aa3b1;
    }

.asgr-floating-card[b-wyhnsgbpjx] {
    position: absolute;
    left: -20px;
    bottom: 35px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 20px;
    background: rgba(255,255,255,.95);
    border-radius: 15px;
    color: var(--ink);
    box-shadow: 0 15px 40px rgba(0,0,0,.17);
    backdrop-filter: blur(15px);
}

.asgr-floating-icon[b-wyhnsgbpjx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--turquoise-soft);
    color: var(--turquoise);
    font-size: 20px;
}

.asgr-floating-card strong[b-wyhnsgbpjx] {
    display: block;
    font-size: 10px;
    letter-spacing: .1em;
}

.asgr-floating-card span[b-wyhnsgbpjx] {
    display: block;
    margin-top: 3px;
    font-size: 11px;
    color: var(--muted);
}


/* =========================================================
   SECTIONS
   ========================================================= */

.asgr-section[b-wyhnsgbpjx] {
    padding: 110px 0;
    background: #fff;
}

.asgr-soft-section[b-wyhnsgbpjx] {
    background: #f7f9fc;
}

.asgr-section-heading[b-wyhnsgbpjx] {
    max-width: 850px;
    margin-bottom: 55px;
}

    .asgr-section-heading.centered[b-wyhnsgbpjx] {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .asgr-section-heading.light[b-wyhnsgbpjx] {
        color: #fff;
    }

.asgr-section-kicker[b-wyhnsgbpjx] {
    color: var(--purple);
    margin-bottom: 16px;
}

.asgr-section-heading.light .asgr-section-kicker[b-wyhnsgbpjx] {
    color: #75eee5;
}

.asgr-section-heading h2[b-wyhnsgbpjx] {
    margin: 0 0 20px;
    font-size: clamp(35px, 4vw, 55px);
    line-height: 1.05;
    letter-spacing: -.045em;
    font-weight: 700;
}

    .asgr-section-heading h2 em[b-wyhnsgbpjx] {
        color: var(--purple);
        font-style: normal;
    }

.asgr-section-heading.light h2 em[b-wyhnsgbpjx] {
    color: #6dece3;
}

.asgr-section-heading p[b-wyhnsgbpjx] {
    max-width: 790px;
    margin: 0;
    color: var(--muted);
    font-size: 16px;
    line-height: 1.85;
}

.asgr-section-heading.centered p[b-wyhnsgbpjx] {
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   INTRO
   ========================================================= */

.asgr-intro-grid[b-wyhnsgbpjx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.asgr-intro-copy p[b-wyhnsgbpjx] {
    color: var(--muted);
    font-size: 15px;
    line-height: 1.9;
    text-align: justify;
    margin-bottom: 20px;
}

.asgr-highlight[b-wyhnsgbpjx] {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-top: 30px;
    padding: 22px;
    background: linear-gradient( 100deg, rgba(103,41,184,.06), rgba(18,200,187,.06) );
    border-left: 4px solid var(--purple);
    border-radius: 0 14px 14px 0;
}

.asgr-highlight-icon[b-wyhnsgbpjx] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    height: 45px;
    border-radius: 12px;
    background: var(--purple-soft);
    color: var(--purple);
    font-size: 19px;
}

.asgr-highlight strong[b-wyhnsgbpjx] {
    display: block;
    font-size: 10px;
    letter-spacing: .13em;
    color: var(--purple);
    margin-bottom: 6px;
}

.asgr-highlight span[b-wyhnsgbpjx] {
    display: block;
    font-size: 13px;
    line-height: 1.7;
    color: #596273;
}


/* =========================================================
   LOOP
   ========================================================= */

.asgr-loop-section[b-wyhnsgbpjx] {
    background: linear-gradient(180deg, #f7f9fc, #fff);
}

.asgr-loop-grid[b-wyhnsgbpjx] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.asgr-loop-card[b-wyhnsgbpjx] {
    position: relative;
    min-height: 300px;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 22px;
    background: #fff;
    overflow: hidden;
    transition: .3s ease;
}

    .asgr-loop-card:hover[b-wyhnsgbpjx] {
        transform: translateY(-6px);
        border-color: rgba(103,41,184,.25);
        box-shadow: 0 20px 45px rgba(30,40,70,.09);
    }

.asgr-loop-number[b-wyhnsgbpjx] {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 10px;
    font-weight: 800;
    color: #b0b7c3;
}

.asgr-loop-card > i[b-wyhnsgbpjx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    margin-bottom: 30px;
    border-radius: 16px;
    background: var(--purple-soft);
    color: var(--purple);
    font-size: 23px;
}

.asgr-loop-card h3[b-wyhnsgbpjx] {
    margin: 0;
    font-size: 27px;
    color: var(--ink);
}

.asgr-loop-card h4[b-wyhnsgbpjx] {
    margin: 4px 0 15px;
    font-size: 12px;
    color: var(--purple);
}

.asgr-loop-card p[b-wyhnsgbpjx] {
    margin: 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.75;
}


/* =========================================================
   SOURCE CARDS
   ========================================================= */

.asgr-source-grid[b-wyhnsgbpjx] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.asgr-source-card[b-wyhnsgbpjx] {
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    transition: .3s ease;
}

    .asgr-source-card:hover[b-wyhnsgbpjx] {
        transform: translateY(-4px);
        border-color: rgba(18,200,187,.35);
        box-shadow: 0 18px 40px rgba(20,33,61,.07);
    }

    .asgr-source-card > i[b-wyhnsgbpjx] {
        display: inline-flex;
        width: 48px;
        height: 48px;
        align-items: center;
        justify-content: center;
        border-radius: 13px;
        background: var(--turquoise-soft);
        color: var(--turquoise);
        font-size: 20px;
        margin-bottom: 22px;
    }

    .asgr-source-card h3[b-wyhnsgbpjx] {
        margin: 0 0 10px;
        font-size: 17px;
    }

    .asgr-source-card p[b-wyhnsgbpjx] {
        margin: 0;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.75;
    }


/* =========================================================
   PROCESS
   ========================================================= */

.asgr-process-section[b-wyhnsgbpjx] {
    background: #f7f9fc;
}

.asgr-process[b-wyhnsgbpjx] {
    display: flex;
    align-items: center;
    justify-content: center;
}

.asgr-process-step[b-wyhnsgbpjx] {
    width: 150px;
    text-align: center;
    position: relative;
}

    .asgr-process-step > span[b-wyhnsgbpjx] {
        position: absolute;
        top: -22px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 9px;
        font-weight: 800;
        color: #a7aeba;
    }

    .asgr-process-step i[b-wyhnsgbpjx] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 66px;
        height: 66px;
        margin: 0 auto 15px;
        border-radius: 20px;
        background: #fff;
        color: var(--purple);
        font-size: 24px;
        box-shadow: 0 12px 30px rgba(20,33,61,.08);
    }

    .asgr-process-step strong[b-wyhnsgbpjx] {
        display: block;
        font-size: 12px;
        margin-bottom: 5px;
    }

    .asgr-process-step small[b-wyhnsgbpjx] {
        display: block;
        font-size: 9px;
        line-height: 1.5;
        color: var(--muted);
    }

.asgr-process-line[b-wyhnsgbpjx] {
    width: 35px;
    height: 1px;
    background: linear-gradient( 90deg, rgba(103,41,184,.2), rgba(18,200,187,.6) );
}


/* =========================================================
   TECHNOLOGIES
   ========================================================= */

.asgr-tech-grid[b-wyhnsgbpjx] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.asgr-tech-card[b-wyhnsgbpjx] {
    position: relative;
    padding: 27px;
    min-height: 310px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    transition: .3s ease;
}

    .asgr-tech-card:hover[b-wyhnsgbpjx] {
        transform: translateY(-5px);
        box-shadow: 0 20px 45px rgba(20,33,61,.08);
    }

    .asgr-tech-card.asgr-tech-featured[b-wyhnsgbpjx] {
        background: linear-gradient( 145deg, rgba(103,41,184,.05), rgba(18,200,187,.06) );
        border-color: rgba(103,41,184,.25);
    }

.asgr-tech-top[b-wyhnsgbpjx] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.asgr-tech-icon[b-wyhnsgbpjx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--purple-soft);
    color: var(--purple);
    font-size: 21px;
}

.asgr-tech-top > span[b-wyhnsgbpjx] {
    font-size: 10px;
    font-weight: 800;
    color: #aab1bc;
}

.asgr-tech-card h3[b-wyhnsgbpjx] {
    margin: 0 0 12px;
    font-size: 17px;
}

.asgr-tech-card p[b-wyhnsgbpjx] {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.75;
    margin-bottom: 20px;
}

.asgr-tech-tags[b-wyhnsgbpjx] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

    .asgr-tech-tags span[b-wyhnsgbpjx] {
        padding: 5px 8px;
        border-radius: 6px;
        background: #f4f6f9;
        color: #657084;
        font-size: 9px;
        font-weight: 700;
    }


/* =========================================================
   DARK SECTION
   ========================================================= */

.asgr-dark-section[b-wyhnsgbpjx] {
    background: radial-gradient(circle at 85% 20%, rgba(18,200,187,.15), transparent 30%), linear-gradient(125deg, #211039, #35145e 60%, #0c777d);
    color: #fff;
}

    .asgr-dark-section .asgr-section-kicker[b-wyhnsgbpjx] {
        color: #74eee5;
    }

    .asgr-dark-section h2[b-wyhnsgbpjx] {
        color: #fff;
    }

    .asgr-dark-section p[b-wyhnsgbpjx] {
        color: rgba(255,255,255,.68);
    }

.asgr-feature-grid[b-wyhnsgbpjx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.asgr-feature-copy h2[b-wyhnsgbpjx] {
    margin: 0 0 25px;
    font-size: clamp(35px, 4vw, 54px);
    line-height: 1.05;
    letter-spacing: -.04em;
}

    .asgr-feature-copy h2 em[b-wyhnsgbpjx] {
        color: #72eee5;
        font-style: normal;
    }

.asgr-feature-copy p[b-wyhnsgbpjx] {
    font-size: 14px;
    line-height: 1.85;
    text-align: justify;
    margin-bottom: 18px;
}

.asgr-check-list[b-wyhnsgbpjx] {
    list-style: none;
    padding: 0;
    margin: 30px 0 0;
}

    .asgr-check-list li[b-wyhnsgbpjx] {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 13px;
        font-size: 13px;
        color: rgba(255,255,255,.82);
    }

    .asgr-check-list i[b-wyhnsgbpjx] {
        color: #69e9df;
    }

.asgr-image-slot-dark[b-wyhnsgbpjx] {
    background: linear-gradient( 145deg, rgba(255,255,255,.07), rgba(255,255,255,.02) );
    border-color: rgba(255,255,255,.13);
    box-shadow: none;
}

    .asgr-image-slot-dark .asgr-image-slot-inner strong[b-wyhnsgbpjx] {
        color: #fff;
    }

    .asgr-image-slot-dark .asgr-image-slot-inner span[b-wyhnsgbpjx] {
        color: rgba(255,255,255,.58);
    }

    .asgr-image-slot-dark .asgr-image-slot-inner i[b-wyhnsgbpjx] {
        background: rgba(255,255,255,.07);
        color: #72eee5;
    }


/* =========================================================
   MEMBRANE FLOW
   ========================================================= */

.asgr-membrane-flow[b-wyhnsgbpjx] {
    display: grid;
    grid-template-columns: 1fr 60px 1fr 60px 1fr;
    align-items: center;
}

.asgr-membrane-card[b-wyhnsgbpjx] {
    min-height: 250px;
    padding: 32px;
    border-radius: 22px;
    border: 1px solid var(--line);
    background: #fff;
    box-shadow: 0 15px 40px rgba(20,33,61,.05);
}

    .asgr-membrane-card.featured[b-wyhnsgbpjx] {
        border: 2px solid rgba(103,41,184,.25);
        background: linear-gradient( 145deg, rgba(103,41,184,.05), rgba(18,200,187,.06) );
    }

.asgr-membrane-label[b-wyhnsgbpjx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin-bottom: 25px;
    border-radius: 16px;
    background: var(--purple-soft);
    color: var(--purple);
    font-size: 18px;
    font-weight: 900;
}

.asgr-membrane-card h3[b-wyhnsgbpjx] {
    margin: 0 0 12px;
    font-size: 21px;
}

.asgr-membrane-card p[b-wyhnsgbpjx] {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.7;
    margin-bottom: 20px;
}

.asgr-membrane-card > span[b-wyhnsgbpjx] {
    font-size: 10px;
    font-weight: 800;
    color: var(--purple);
}

.asgr-membrane-arrow[b-wyhnsgbpjx] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--turquoise);
    font-size: 24px;
}


/* =========================================================
   MEDIA
   ========================================================= */

.asgr-media-grid[b-wyhnsgbpjx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 75px;
    align-items: center;
}

    .asgr-media-grid.reverse .asgr-image-slot[b-wyhnsgbpjx] {
        order: 2;
    }

.asgr-media-copy h2[b-wyhnsgbpjx] {
    margin: 0 0 22px;
    font-size: clamp(35px, 4vw, 52px);
    line-height: 1.05;
    letter-spacing: -.04em;
}

    .asgr-media-copy h2 em[b-wyhnsgbpjx] {
        display: block;
        color: var(--purple);
        font-style: normal;
    }

.asgr-media-copy p[b-wyhnsgbpjx] {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.85;
    text-align: justify;
    margin-bottom: 17px;
}

.asgr-info-list[b-wyhnsgbpjx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 25px;
}

    .asgr-info-list div[b-wyhnsgbpjx] {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 11px;
        color: #596273;
    }

    .asgr-info-list i[b-wyhnsgbpjx] {
        color: var(--turquoise);
    }


/* =========================================================
   ZLD
   ========================================================= */

.asgr-zld-section[b-wyhnsgbpjx] {
    background: #f7f9fc;
}

.asgr-zld-grid[b-wyhnsgbpjx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 30px;
}

.asgr-zld-card[b-wyhnsgbpjx] {
    padding: 35px;
    min-height: 330px;
    border: 1px solid var(--line);
    border-radius: 24px;
    background: #fff;
}

    .asgr-zld-card.featured[b-wyhnsgbpjx] {
        border: 2px solid rgba(103,41,184,.25);
        background: linear-gradient( 145deg, rgba(103,41,184,.05), rgba(18,200,187,.05) );
    }

.asgr-zld-number[b-wyhnsgbpjx] {
    font-size: 34px;
    font-weight: 900;
    color: var(--purple);
    margin-bottom: 15px;
}

.asgr-zld-card h3[b-wyhnsgbpjx] {
    margin: 0 0 15px;
    font-size: 21px;
}

.asgr-zld-card p[b-wyhnsgbpjx] {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
}

.asgr-zld-flow[b-wyhnsgbpjx] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 25px;
}

    .asgr-zld-flow span[b-wyhnsgbpjx] {
        padding: 7px 10px;
        background: #f3f5f8;
        border-radius: 7px;
        color: #5c6677;
        font-size: 9px;
        font-weight: 700;
    }

    .asgr-zld-flow i[b-wyhnsgbpjx] {
        color: var(--turquoise);
        font-size: 11px;
    }

.asgr-wide-image[b-wyhnsgbpjx] {
    min-height: 430px;
}


/* =========================================================
   CONCENTRATE
   ========================================================= */

.asgr-concentrate-grid[b-wyhnsgbpjx] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.asgr-concentrate-card[b-wyhnsgbpjx] {
    padding: 30px;
    min-height: 260px;
    border-radius: 20px;
    border: 1px solid var(--line);
    background: #fff;
    transition: .3s ease;
}

    .asgr-concentrate-card:hover[b-wyhnsgbpjx] {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(20,33,61,.08);
    }

    .asgr-concentrate-card i[b-wyhnsgbpjx] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        border-radius: 14px;
        background: var(--turquoise-soft);
        color: var(--turquoise);
        margin-bottom: 22px;
        font-size: 20px;
    }

    .asgr-concentrate-card h3[b-wyhnsgbpjx] {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .asgr-concentrate-card p[b-wyhnsgbpjx] {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.75;
    }


/* =========================================================
   RESOURCE
   ========================================================= */

.asgr-resource-pills[b-wyhnsgbpjx] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 25px;
}

    .asgr-resource-pills span[b-wyhnsgbpjx] {
        padding: 8px 13px;
        border-radius: 50px;
        border: 1px solid rgba(255,255,255,.15);
        background: rgba(255,255,255,.05);
        font-size: 10px;
        color: rgba(255,255,255,.76);
    }


/* =========================================================
   USE
   ========================================================= */

.asgr-use-grid[b-wyhnsgbpjx] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.asgr-use-card[b-wyhnsgbpjx] {
    padding: 28px;
    min-height: 250px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    transition: .3s ease;
}

    .asgr-use-card:hover[b-wyhnsgbpjx] {
        transform: translateY(-5px);
        border-color: rgba(18,200,187,.3);
        box-shadow: 0 18px 40px rgba(20,33,61,.07);
    }

.asgr-use-icon[b-wyhnsgbpjx] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--purple-soft);
    color: var(--purple);
    font-size: 21px;
    margin-bottom: 22px;
}

.asgr-use-card h3[b-wyhnsgbpjx] {
    font-size: 17px;
    margin-bottom: 10px;
}

.asgr-use-card p[b-wyhnsgbpjx] {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.75;
}


/* =========================================================
   SECTOR
   ========================================================= */

.asgr-sector-section[b-wyhnsgbpjx] {
    background: #f7f9fc;
}

.asgr-sector-grid[b-wyhnsgbpjx] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

    .asgr-sector-grid article[b-wyhnsgbpjx] {
        padding: 27px;
        min-height: 240px;
        background: #fff;
        border: 1px solid var(--line);
        border-radius: 18px;
        transition: .3s ease;
    }

        .asgr-sector-grid article:hover[b-wyhnsgbpjx] {
            transform: translateY(-4px);
            box-shadow: 0 18px 40px rgba(20,33,61,.07);
        }

    .asgr-sector-grid i[b-wyhnsgbpjx] {
        display: inline-block;
        font-size: 22px;
        color: var(--purple);
        margin-bottom: 20px;
    }

    .asgr-sector-grid h3[b-wyhnsgbpjx] {
        font-size: 15px;
        margin-bottom: 10px;
    }

    .asgr-sector-grid p[b-wyhnsgbpjx] {
        color: var(--muted);
        font-size: 11px;
        line-height: 1.7;
    }


/* =========================================================
   IMAGE BANNER
   ========================================================= */

.asgr-image-banner[b-wyhnsgbpjx] {
    position: relative;
    min-height: 470px;
    overflow: hidden;
    border-radius: 28px;
    background: #1f2940;
}

.asgr-image-slot-banner[b-wyhnsgbpjx] {
    position: absolute;
    inset: 0;
    min-height: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: linear-gradient( 90deg, rgba(20,25,42,.95), rgba(20,25,42,.45), rgba(20,25,42,.12) );
}

.asgr-image-banner-content[b-wyhnsgbpjx] {
    position: relative;
    z-index: 2;
    width: 52%;
    min-height: 470px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px;
    color: #fff;
}

    .asgr-image-banner-content .asgr-section-kicker[b-wyhnsgbpjx] {
        color: #71ece4;
    }

    .asgr-image-banner-content h2[b-wyhnsgbpjx] {
        margin: 0 0 22px;
        font-size: clamp(35px, 4vw, 52px);
        line-height: 1.04;
        letter-spacing: -.04em;
    }

        .asgr-image-banner-content h2 em[b-wyhnsgbpjx] {
            display: block;
            color: #71ece4;
            font-style: normal;
        }

    .asgr-image-banner-content p[b-wyhnsgbpjx] {
        max-width: 550px;
        color: rgba(255,255,255,.7);
        font-size: 14px;
        line-height: 1.8;
    }


/* =========================================================
   ANALYSIS
   ========================================================= */

.asgr-analysis-grid[b-wyhnsgbpjx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.asgr-analysis-list[b-wyhnsgbpjx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

    .asgr-analysis-list > div[b-wyhnsgbpjx] {
        padding: 20px;
        border: 1px solid var(--line);
        border-radius: 15px;
        background: #fff;
    }

    .asgr-analysis-list span[b-wyhnsgbpjx] {
        display: block;
        font-size: 9px;
        font-weight: 900;
        color: var(--purple);
        margin-bottom: 8px;
    }

    .asgr-analysis-list strong[b-wyhnsgbpjx] {
        display: block;
        font-size: 14px;
        margin-bottom: 4px;
    }

    .asgr-analysis-list small[b-wyhnsgbpjx] {
        color: var(--muted);
        font-size: 10px;
        line-height: 1.5;
    }


/* =========================================================
   PILOT
   ========================================================= */

.asgr-pilot-section[b-wyhnsgbpjx] {
    background: #f7f9fc;
}

.asgr-pilot-grid[b-wyhnsgbpjx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}

.asgr-pilot-copy h2[b-wyhnsgbpjx] {
    margin: 0 0 22px;
    font-size: clamp(35px, 4vw, 52px);
    line-height: 1.05;
    letter-spacing: -.04em;
}

    .asgr-pilot-copy h2 em[b-wyhnsgbpjx] {
        display: block;
        color: var(--purple);
        font-style: normal;
    }

.asgr-pilot-copy > p[b-wyhnsgbpjx] {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.8;
}

.asgr-pilot-steps[b-wyhnsgbpjx] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 30px;
}

    .asgr-pilot-steps > div[b-wyhnsgbpjx] {
        padding: 18px;
        border: 1px solid var(--line);
        background: #fff;
        border-radius: 13px;
    }

    .asgr-pilot-steps span[b-wyhnsgbpjx] {
        display: block;
        color: var(--purple);
        font-size: 9px;
        font-weight: 900;
        margin-bottom: 8px;
    }

    .asgr-pilot-steps strong[b-wyhnsgbpjx] {
        display: block;
        font-size: 12px;
        margin-bottom: 4px;
    }

    .asgr-pilot-steps small[b-wyhnsgbpjx] {
        display: block;
        color: var(--muted);
        font-size: 9px;
    }


/* =========================================================
   DIGITAL
   ========================================================= */

.asgr-digital-grid[b-wyhnsgbpjx] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 40px;
}

    .asgr-digital-grid > div[b-wyhnsgbpjx] {
        padding: 30px;
        border-radius: 20px;
        background: rgba(255,255,255,.055);
        border: 1px solid rgba(255,255,255,.10);
    }

    .asgr-digital-grid i[b-wyhnsgbpjx] {
        display: block;
        font-size: 24px;
        color: #6fece3;
        margin-bottom: 22px;
    }

    .asgr-digital-grid h3[b-wyhnsgbpjx] {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .asgr-digital-grid p[b-wyhnsgbpjx] {
        font-size: 12px;
        line-height: 1.7;
        margin: 0;
    }


/* =========================================================
   MODULAR
   ========================================================= */

.asgr-modular-grid[b-wyhnsgbpjx] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
    margin-bottom: 35px;
}

.asgr-modular-card[b-wyhnsgbpjx] {
    position: relative;
    padding: 32px;
    min-height: 270px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    overflow: hidden;
}

    .asgr-modular-card > span[b-wyhnsgbpjx] {
        position: absolute;
        top: 20px;
        right: 22px;
        font-size: 10px;
        font-weight: 800;
        color: #aab1bc;
    }

    .asgr-modular-card i[b-wyhnsgbpjx] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 55px;
        height: 55px;
        border-radius: 15px;
        background: var(--turquoise-soft);
        color: var(--turquoise);
        font-size: 23px;
        margin-bottom: 25px;
    }

    .asgr-modular-card h3[b-wyhnsgbpjx] {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .asgr-modular-card p[b-wyhnsgbpjx] {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.75;
    }


/* =========================================================
   ENGINEERING
   ========================================================= */

.asgr-engineering-section[b-wyhnsgbpjx] {
    background: #f7f9fc;
}

.asgr-engineering-line[b-wyhnsgbpjx] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 45px;
}

    .asgr-engineering-line > div[b-wyhnsgbpjx] {
        position: relative;
        text-align: center;
    }

        .asgr-engineering-line > div:not(:last-child)[b-wyhnsgbpjx]::after {
            content: "";
            position: absolute;
            top: 34px;
            left: 65%;
            width: 70%;
            height: 1px;
            background: #dce1e8;
        }

    .asgr-engineering-line span[b-wyhnsgbpjx] {
        position: absolute;
        top: -10px;
        right: 15px;
        font-size: 8px;
        font-weight: 900;
        color: #aab1bc;
    }

    .asgr-engineering-line i[b-wyhnsgbpjx] {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 2;
        width: 68px;
        height: 68px;
        margin: 0 auto 18px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid var(--line);
        color: var(--purple);
        font-size: 22px;
    }

    .asgr-engineering-line strong[b-wyhnsgbpjx] {
        display: block;
        font-size: 10px;
    }


/* =========================================================
   BENEFITS
   ========================================================= */

.asgr-benefit-grid[b-wyhnsgbpjx] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

    .asgr-benefit-grid > div[b-wyhnsgbpjx] {
        padding: 28px;
        border: 1px solid var(--line);
        border-radius: 18px;
        background: #fff;
    }

    .asgr-benefit-grid i[b-wyhnsgbpjx] {
        display: block;
        font-size: 25px;
        color: var(--turquoise);
        margin-bottom: 20px;
    }

    .asgr-benefit-grid h3[b-wyhnsgbpjx] {
        font-size: 16px;
        margin-bottom: 10px;
    }

    .asgr-benefit-grid p[b-wyhnsgbpjx] {
        color: var(--muted);
        font-size: 12px;
        line-height: 1.7;
        margin: 0;
    }


/* =========================================================
   FINAL CTA
   ========================================================= */

.asgr-final-cta[b-wyhnsgbpjx] {
    padding: 90px 0;
    background: radial-gradient(circle at 75% 50%, rgba(18,200,187,.20), transparent 30%), linear-gradient(120deg, #281043, #431574 55%, #07858a);
    color: #fff;
}

.asgr-final-inner[b-wyhnsgbpjx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

    .asgr-final-inner .asgr-section-kicker[b-wyhnsgbpjx] {
        color: #72eee5;
    }

    .asgr-final-inner h2[b-wyhnsgbpjx] {
        max-width: 700px;
        margin: 10px 0 15px;
        font-size: clamp(35px, 4vw, 53px);
        line-height: 1.05;
        letter-spacing: -.04em;
    }

        .asgr-final-inner h2 strong[b-wyhnsgbpjx] {
            display: block;
        }

    .asgr-final-inner p[b-wyhnsgbpjx] {
        max-width: 600px;
        color: rgba(255,255,255,.68);
        font-size: 14px;
        line-height: 1.8;
    }

.asgr-final-actions[b-wyhnsgbpjx] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 220px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .asgr-tech-grid[b-wyhnsgbpjx] {
        grid-template-columns: repeat(2, 1fr);
    }

    .asgr-concentrate-grid[b-wyhnsgbpjx] {
        grid-template-columns: repeat(2, 1fr);
    }

    .asgr-sector-grid[b-wyhnsgbpjx] {
        grid-template-columns: repeat(2, 1fr);
    }

    .asgr-engineering-line[b-wyhnsgbpjx] {
        grid-template-columns: repeat(4, 1fr);
        gap: 40px 0;
    }

        .asgr-engineering-line > div:not(:last-child)[b-wyhnsgbpjx]::after {
            display: none;
        }

    .asgr-digital-grid[b-wyhnsgbpjx] {
        grid-template-columns: repeat(2, 1fr);
    }
}


@media (max-width: 900px) {

    .asgr-hero-grid[b-wyhnsgbpjx],
    .asgr-intro-grid[b-wyhnsgbpjx],
    .asgr-feature-grid[b-wyhnsgbpjx],
    .asgr-media-grid[b-wyhnsgbpjx],
    .asgr-analysis-grid[b-wyhnsgbpjx],
    .asgr-pilot-grid[b-wyhnsgbpjx] {
        grid-template-columns: 1fr;
    }

    .asgr-hero-visual[b-wyhnsgbpjx] {
        max-width: 700px;
        margin: 0 auto;
    }

    .asgr-loop-grid[b-wyhnsgbpjx] {
        grid-template-columns: repeat(2, 1fr);
    }

    .asgr-source-grid[b-wyhnsgbpjx] {
        grid-template-columns: repeat(2, 1fr);
    }

    .asgr-use-grid[b-wyhnsgbpjx] {
        grid-template-columns: repeat(2, 1fr);
    }

    .asgr-benefit-grid[b-wyhnsgbpjx] {
        grid-template-columns: repeat(2, 1fr);
    }

    .asgr-membrane-flow[b-wyhnsgbpjx] {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .asgr-membrane-arrow[b-wyhnsgbpjx] {
        transform: rotate(90deg);
    }

    .asgr-zld-grid[b-wyhnsgbpjx] {
        grid-template-columns: 1fr;
    }

    .asgr-image-banner-content[b-wyhnsgbpjx] {
        width: 70%;
    }

    .asgr-final-inner[b-wyhnsgbpjx] {
        flex-direction: column;
        align-items: flex-start;
    }

    .asgr-final-actions[b-wyhnsgbpjx] {
        width: 100%;
        max-width: 320px;
    }
}


@media (max-width: 650px) {

    .asgr-container[b-wyhnsgbpjx] {
        width: min(100% - 28px, 1180px);
    }

    .asgr-section[b-wyhnsgbpjx] {
        padding: 75px 0;
    }

    .asgr-hero[b-wyhnsgbpjx] {
        min-height: auto;
        padding-bottom: 70px;
    }

    .asgr-breadcrumb[b-wyhnsgbpjx] {
        margin-bottom: 35px;
    }

    .asgr-hero-copy h1[b-wyhnsgbpjx] {
        font-size: 44px;
    }

    .asgr-hero-stats[b-wyhnsgbpjx] {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .asgr-image-slot-hero[b-wyhnsgbpjx] {
        min-height: 350px;
    }

    .asgr-floating-card[b-wyhnsgbpjx] {
        left: 15px;
        bottom: 15px;
    }

    .asgr-loop-grid[b-wyhnsgbpjx],
    .asgr-source-grid[b-wyhnsgbpjx],
    .asgr-tech-grid[b-wyhnsgbpjx],
    .asgr-concentrate-grid[b-wyhnsgbpjx],
    .asgr-use-grid[b-wyhnsgbpjx],
    .asgr-sector-grid[b-wyhnsgbpjx],
    .asgr-benefit-grid[b-wyhnsgbpjx],
    .asgr-modular-grid[b-wyhnsgbpjx],
    .asgr-digital-grid[b-wyhnsgbpjx] {
        grid-template-columns: 1fr;
    }

    .asgr-process[b-wyhnsgbpjx] {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 45px 20px;
    }

    .asgr-process-line[b-wyhnsgbpjx] {
        display: none;
    }

    .asgr-process-step[b-wyhnsgbpjx] {
        width: auto;
    }

    .asgr-info-list[b-wyhnsgbpjx],
    .asgr-analysis-list[b-wyhnsgbpjx],
    .asgr-pilot-steps[b-wyhnsgbpjx] {
        grid-template-columns: 1fr;
    }

    .asgr-image-banner[b-wyhnsgbpjx] {
        min-height: 600px;
    }

    .asgr-image-slot-banner[b-wyhnsgbpjx] {
        min-height: 600px;
    }

    .asgr-image-banner-content[b-wyhnsgbpjx] {
        width: 100%;
        min-height: 600px;
        padding: 35px;
        justify-content: flex-end;
        background: linear-gradient( 0deg, rgba(20,25,42,.95), rgba(20,25,42,.15) );
    }

    .asgr-engineering-line[b-wyhnsgbpjx] {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px 10px;
    }

    .asgr-final-inner h2[b-wyhnsgbpjx] {
        font-size: 38px;
    }
}
/* _content/WEB/Components/Pages/Endustriyel/EdiSistemleri.razor.rz.scp.css */
.edi-page[b-4ci30cl93l] {
    color: #172033;
    background: #ffffff;
}

    .edi-page p[b-4ci30cl93l] {
        text-align: justify;
        line-height: 1.8;
        color: #647084;
    }

    .edi-page h1[b-4ci30cl93l],
    .edi-page h2[b-4ci30cl93l],
    .edi-page h3[b-4ci30cl93l] {
        color: #172033;
    }


/* =========================
   HERO
========================= */

.edi-hero[b-4ci30cl93l] {
    position: relative;
    padding: 70px 0 90px;
    background: linear-gradient(135deg, #f5fbff 0%, #ffffff 55%, #f4f1ff 100%);
    overflow: hidden;
}

    .edi-hero[b-4ci30cl93l]::before {
        content: "";
        position: absolute;
        width: 450px;
        height: 450px;
        right: -180px;
        top: -180px;
        border-radius: 50%;
        background: rgba(76, 201, 240, 0.08);
    }

.edi-breadcrumb[b-4ci30cl93l] {
    display: flex;
    gap: 9px;
    align-items: center;
    margin-bottom: 30px;
    font-size: 13px;
    color: #8a94a6;
}

    .edi-breadcrumb a[b-4ci30cl93l] {
        color: #657084;
        text-decoration: none;
    }

        .edi-breadcrumb a:hover[b-4ci30cl93l] {
            color: #6c63d9;
        }

.edi-kicker[b-4ci30cl93l],
.edi-section-kicker[b-4ci30cl93l] {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.8px;
    color: #6672d8;
}

.edi-hero h1[b-4ci30cl93l] {
    font-size: clamp(38px, 4.3vw, 64px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -1.8px;
    margin-bottom: 25px;
}

    .edi-hero h1 span[b-4ci30cl93l] {
        display: block;
        color: #6974d8;
    }

.edi-hero-text[b-4ci30cl93l] {
    max-width: 690px;
    font-size: 18px;
    line-height: 1.85 !important;
    color: #667085 !important;
}

.edi-hero-buttons[b-4ci30cl93l] {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.edi-btn[b-4ci30cl93l] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 23px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 700;
    transition: .25s ease;
}

.edi-btn-primary[b-4ci30cl93l] {
    color: #fff;
    background: linear-gradient(135deg, #6973d8, #7d61ca);
    box-shadow: 0 12px 30px rgba(105, 115, 216, .22);
}

    .edi-btn-primary:hover[b-4ci30cl93l] {
        color: #fff;
        transform: translateY(-3px);
    }

.edi-btn-light[b-4ci30cl93l] {
    color: #475467;
    background: #fff;
    border: 1px solid #e1e6ef;
}

    .edi-btn-light:hover[b-4ci30cl93l] {
        color: #5f68ca;
        border-color: #cbd0f2;
        transform: translateY(-3px);
    }

.edi-hero-stats[b-4ci30cl93l] {
    display: flex;
    gap: 35px;
    margin-top: 42px;
    flex-wrap: wrap;
}

    .edi-hero-stats div[b-4ci30cl93l] {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .edi-hero-stats strong[b-4ci30cl93l] {
        font-size: 25px;
        color: #626dd3;
    }

    .edi-hero-stats span[b-4ci30cl93l] {
        font-size: 12px;
        line-height: 1.4;
        color: #7b8494;
    }

.edi-hero-image[b-4ci30cl93l] {
    position: relative;
    padding: 12px;
}

    .edi-hero-image img[b-4ci30cl93l] {
        width: 100%;
        border-radius: 28px;
        display: block;
        box-shadow: 0 30px 70px rgba(29, 43, 74, .16);
    }

.edi-floating-card[b-4ci30cl93l] {
    position: absolute;
    left: -15px;
    bottom: 30px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 19px;
    border-radius: 16px;
    background: rgba(255, 255, 255, .95);
    box-shadow: 0 15px 35px rgba(30, 45, 80, .15);
    backdrop-filter: blur(10px);
}

.edi-floating-icon[b-4ci30cl93l] {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: #fff;
    background: linear-gradient(135deg, #6c76d8, #42b9c8);
}

.edi-floating-card strong[b-4ci30cl93l],
.edi-floating-card span[b-4ci30cl93l] {
    display: block;
}

.edi-floating-card strong[b-4ci30cl93l] {
    font-size: 12px;
}

.edi-floating-card span[b-4ci30cl93l] {
    margin-top: 3px;
    font-size: 11px;
    color: #7b8494;
}


/* =========================
   GENEL BAŞLIK
========================= */

.edi-section-heading[b-4ci30cl93l] {
    max-width: 820px;
    margin: 0 auto 55px;
}

    .edi-section-heading h2[b-4ci30cl93l],
    .edi-info-section h2[b-4ci30cl93l],
    .edi-module-section h2[b-4ci30cl93l],
    .edi-feed-section h2[b-4ci30cl93l],
    .edi-control-section h2[b-4ci30cl93l],
    .edi-engineering-section h2[b-4ci30cl93l] {
        font-size: clamp(30px, 3.2vw, 46px);
        line-height: 1.15;
        font-weight: 800;
        letter-spacing: -1px;
        margin-bottom: 20px;
    }

    .edi-section-heading p[b-4ci30cl93l] {
        max-width: 720px;
        margin: 0 auto;
    }


/* =========================
   INFO
========================= */

.edi-info-section[b-4ci30cl93l] {
    background: #fff;
}

.edi-highlight[b-4ci30cl93l] {
    display: flex;
    gap: 15px;
    padding: 20px;
    margin-top: 28px;
    border-radius: 17px;
    background: linear-gradient(135deg, #f4f5ff, #f2fbfc);
    border: 1px solid #e2e5fa;
}

    .edi-highlight > i[b-4ci30cl93l] {
        color: #6672d8;
        font-size: 23px;
    }

    .edi-highlight strong[b-4ci30cl93l],
    .edi-highlight span[b-4ci30cl93l] {
        display: block;
    }

    .edi-highlight strong[b-4ci30cl93l] {
        margin-bottom: 5px;
    }

    .edi-highlight span[b-4ci30cl93l] {
        font-size: 14px;
        line-height: 1.7;
        color: #687386;
    }

.edi-image-card[b-4ci30cl93l],
.edi-process-image[b-4ci30cl93l],
.edi-module-image[b-4ci30cl93l],
.edi-feed-image[b-4ci30cl93l],
.edi-control-image[b-4ci30cl93l],
.edi-engineering-image[b-4ci30cl93l] {
    overflow: hidden;
    border-radius: 25px;
    background: #f7f9fc;
    box-shadow: 0 18px 45px rgba(26, 40, 70, .10);
}

    .edi-image-card img[b-4ci30cl93l],
    .edi-process-image img[b-4ci30cl93l],
    .edi-module-image img[b-4ci30cl93l],
    .edi-feed-image img[b-4ci30cl93l],
    .edi-control-image img[b-4ci30cl93l],
    .edi-engineering-image img[b-4ci30cl93l] {
        width: 100%;
        height: auto;
        display: block;
    }


/* =========================
   BENEFITS
========================= */

.edi-benefits-section[b-4ci30cl93l] {
    background: #f7faff;
}

.edi-benefit-card[b-4ci30cl93l] {
    height: 100%;
    padding: 30px 25px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e7ebf3;
    box-shadow: 0 12px 30px rgba(40, 55, 85, .06);
    transition: .25s ease;
}

    .edi-benefit-card:hover[b-4ci30cl93l] {
        transform: translateY(-6px);
        box-shadow: 0 18px 38px rgba(40, 55, 85, .10);
    }

.edi-benefit-icon[b-4ci30cl93l] {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    margin-bottom: 22px;
    border-radius: 15px;
    color: #6672d8;
    background: #f0f1ff;
    font-size: 22px;
}

.edi-benefit-card h3[b-4ci30cl93l] {
    font-size: 19px;
    margin-bottom: 13px;
}

.edi-benefit-card p[b-4ci30cl93l] {
    font-size: 14px;
    margin-bottom: 0;
}


/* =========================
   HOW IT WORKS
========================= */

.edi-how-section[b-4ci30cl93l] {
    background: #fff;
}

.edi-step-list[b-4ci30cl93l] {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.edi-step[b-4ci30cl93l] {
    display: flex;
    gap: 18px;
    padding: 18px;
    border-radius: 16px;
    border: 1px solid #e8ebf2;
    background: #fff;
    transition: .25s ease;
}

    .edi-step:hover[b-4ci30cl93l] {
        border-color: #cdd2f3;
        transform: translateX(4px);
    }

.edi-step-number[b-4ci30cl93l] {
    flex: 0 0 45px;
    width: 45px;
    height: 45px;
    display: grid;
    place-items: center;
    border-radius: 13px;
    color: #6672d8;
    background: #f0f1ff;
    font-weight: 800;
    font-size: 13px;
}

.edi-step h3[b-4ci30cl93l] {
    margin: 0 0 7px;
    font-size: 17px;
}

.edi-step p[b-4ci30cl93l] {
    margin: 0;
    font-size: 13px;
}


/* =========================
   MODULE
========================= */

.edi-module-section[b-4ci30cl93l] {
    background: linear-gradient(135deg, #f7fbff, #f8f7ff);
}

.edi-module-points[b-4ci30cl93l] {
    display: grid;
    gap: 11px;
    margin-top: 25px;
}

    .edi-module-points div[b-4ci30cl93l] {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 14px;
        color: #536075;
    }

    .edi-module-points i[b-4ci30cl93l] {
        color: #5bb6a8;
    }


/* =========================
   RO + EDI
========================= */

.edi-ro-section[b-4ci30cl93l] {
    background: #fff;
}

.edi-flow[b-4ci30cl93l] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 45px;
}

.edi-flow-item[b-4ci30cl93l] {
    min-width: 135px;
    padding: 20px 14px;
    text-align: center;
    border: 1px solid #e6e9f1;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(30, 40, 70, .05);
}

.edi-flow-icon[b-4ci30cl93l] {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin: 0 auto 12px;
    border-radius: 14px;
    color: #6973d8;
    background: #f0f1ff;
    font-size: 20px;
}

.edi-flow-item strong[b-4ci30cl93l],
.edi-flow-item span[b-4ci30cl93l] {
    display: block;
}

.edi-flow-item strong[b-4ci30cl93l] {
    font-size: 14px;
}

.edi-flow-item span[b-4ci30cl93l] {
    margin-top: 4px;
    font-size: 11px;
    color: #8992a2;
}

.edi-flow-active[b-4ci30cl93l] {
    border-color: #bfc5f0;
    background: linear-gradient(135deg, #f5f5ff, #f1fbfc);
}

.edi-flow-arrow[b-4ci30cl93l] {
    color: #9ba3b3;
    font-size: 20px;
}

.edi-ro-image[b-4ci30cl93l] {
    overflow: hidden;
    border-radius: 24px;
    box-shadow: 0 20px 45px rgba(30, 45, 70, .10);
}

    .edi-ro-image img[b-4ci30cl93l] {
        width: 100%;
        display: block;
    }


/* =========================
   FEED WATER
========================= */

.edi-feed-section[b-4ci30cl93l] {
    background: #f8fafc;
}

.edi-warning[b-4ci30cl93l] {
    display: flex;
    gap: 14px;
    margin-top: 25px;
    padding: 19px;
    border-radius: 15px;
    background: #fff8ed;
    border: 1px solid #f3dfbc;
}

    .edi-warning > i[b-4ci30cl93l] {
        color: #d89a35;
        font-size: 20px;
    }

    .edi-warning strong[b-4ci30cl93l],
    .edi-warning span[b-4ci30cl93l] {
        display: block;
    }

    .edi-warning strong[b-4ci30cl93l] {
        margin-bottom: 5px;
    }

    .edi-warning span[b-4ci30cl93l] {
        font-size: 13px;
        line-height: 1.7;
        color: #7d6d54;
    }


/* =========================
   PARAMETERS
========================= */

.edi-parameters-section[b-4ci30cl93l] {
    background: #fff;
}

.edi-parameter-card[b-4ci30cl93l] {
    height: 100%;
    padding: 28px;
    border-radius: 19px;
    background: #f8faff;
    border: 1px solid #e5e9f2;
    transition: .25s ease;
}

    .edi-parameter-card:hover[b-4ci30cl93l] {
        transform: translateY(-5px);
        border-color: #cfd4f3;
    }

    .edi-parameter-card > i[b-4ci30cl93l] {
        display: inline-grid;
        place-items: center;
        width: 45px;
        height: 45px;
        margin-bottom: 18px;
        border-radius: 13px;
        color: #6973d8;
        background: #edeeff;
        font-size: 20px;
    }

    .edi-parameter-card h3[b-4ci30cl93l] {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .edi-parameter-card p[b-4ci30cl93l] {
        margin: 0;
        font-size: 13px;
    }


/* =========================
   COMPARISON
========================= */

.edi-comparison-section[b-4ci30cl93l] {
    background: #f7f9fc;
}

.edi-comparison-table[b-4ci30cl93l] {
    max-width: 950px;
    margin: auto;
    overflow: hidden;
    border-radius: 20px;
    background: #fff;
    border: 1px solid #e1e6ef;
    box-shadow: 0 15px 35px rgba(30, 45, 75, .06);
}

.edi-comparison-row[b-4ci30cl93l] {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1fr;
}

    .edi-comparison-row > div[b-4ci30cl93l] {
        padding: 18px 20px;
        border-right: 1px solid #e8ebf1;
        border-bottom: 1px solid #e8ebf1;
        font-size: 14px;
        color: #687386;
    }

        .edi-comparison-row > div:last-child[b-4ci30cl93l] {
            border-right: 0;
        }

    .edi-comparison-row:last-child > div[b-4ci30cl93l] {
        border-bottom: 0;
    }

.edi-comparison-header > div[b-4ci30cl93l] {
    color: #fff;
    font-weight: 700;
    background: #6973d8;
}

.edi-comparison-row:not(.edi-comparison-header) > div:first-child[b-4ci30cl93l] {
    font-weight: 700;
    color: #263149;
}


/* =========================
   APPLICATIONS
========================= */

.edi-applications-section[b-4ci30cl93l] {
    background: #fff;
}

.edi-application-card[b-4ci30cl93l] {
    height: 100%;
    padding: 27px 23px;
    border-radius: 18px;
    border: 1px solid #e7ebf2;
    background: #fff;
    box-shadow: 0 9px 25px rgba(30, 45, 75, .05);
    transition: .25s ease;
}

    .edi-application-card:hover[b-4ci30cl93l] {
        transform: translateY(-5px);
        box-shadow: 0 15px 35px rgba(30, 45, 75, .09);
    }

.edi-application-icon[b-4ci30cl93l] {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 18px;
    border-radius: 13px;
    color: #6973d8;
    background: #f0f1ff;
    font-size: 20px;
}

.edi-application-card h3[b-4ci30cl93l] {
    font-size: 18px;
    margin-bottom: 10px;
}

.edi-application-card p[b-4ci30cl93l] {
    margin: 0;
    font-size: 13px;
}


/* =========================
   CONTROL
========================= */

.edi-control-section[b-4ci30cl93l] {
    background: linear-gradient(135deg, #f7fbff, #f8f7ff);
}

.edi-control-list[b-4ci30cl93l] {
    display: grid;
    gap: 13px;
    margin-top: 25px;
}

    .edi-control-list div[b-4ci30cl93l] {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #596579;
        font-size: 14px;
    }

    .edi-control-list i[b-4ci30cl93l] {
        color: #5db6a8;
        font-size: 18px;
    }


/* =========================
   ENGINEERING
========================= */

.edi-engineering-section[b-4ci30cl93l] {
    background: #fff;
}

.edi-engineering-grid[b-4ci30cl93l] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 28px;
}

    .edi-engineering-grid div[b-4ci30cl93l] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px;
        border-radius: 13px;
        background: #f7f8fc;
    }

    .edi-engineering-grid strong[b-4ci30cl93l] {
        color: #6973d8;
        font-size: 13px;
    }

    .edi-engineering-grid span[b-4ci30cl93l] {
        font-size: 13px;
        color: #657084;
    }


/* =========================
   SUMMARY
========================= */

.edi-summary-section[b-4ci30cl93l] {
    background: #f7f9fc;
}

.edi-summary[b-4ci30cl93l] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 35px;
    padding: 45px;
    border-radius: 28px;
    background: linear-gradient(135deg, #eef1ff, #eefbfc);
    border: 1px solid #dfe4f4;
}

    .edi-summary > div[b-4ci30cl93l] {
        max-width: 780px;
    }

    .edi-summary span[b-4ci30cl93l] {
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1.7px;
        color: #6973d8;
    }

    .edi-summary h2[b-4ci30cl93l] {
        margin: 12px 0 15px;
        font-size: clamp(27px, 3vw, 40px);
        line-height: 1.15;
    }

    .edi-summary p[b-4ci30cl93l] {
        margin: 0;
    }


/* =========================
   RESPONSIVE
========================= */

@media (max-width: 991px) {

    .edi-hero[b-4ci30cl93l] {
        padding: 45px 0 65px;
    }

    .edi-floating-card[b-4ci30cl93l] {
        left: 20px;
    }

    .edi-flow-arrow[b-4ci30cl93l] {
        display: none;
    }

    .edi-summary[b-4ci30cl93l] {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 767px) {

    .edi-hero h1[b-4ci30cl93l] {
        font-size: 38px;
    }

    .edi-hero-text[b-4ci30cl93l] {
        font-size: 16px;
    }

    .edi-hero-stats[b-4ci30cl93l] {
        gap: 20px;
    }

    .edi-section-heading h2[b-4ci30cl93l],
    .edi-info-section h2[b-4ci30cl93l],
    .edi-module-section h2[b-4ci30cl93l],
    .edi-feed-section h2[b-4ci30cl93l],
    .edi-control-section h2[b-4ci30cl93l],
    .edi-engineering-section h2[b-4ci30cl93l] {
        font-size: 31px;
    }

    .edi-comparison-table[b-4ci30cl93l] {
        overflow-x: auto;
    }

    .edi-comparison-row[b-4ci30cl93l] {
        min-width: 650px;
    }

    .edi-engineering-grid[b-4ci30cl93l] {
        grid-template-columns: 1fr;
    }

    .edi-summary[b-4ci30cl93l] {
        padding: 30px 24px;
    }
}
/* _content/WEB/Components/Pages/Endustriyel/Ekipmanlar/EkipmanDetay.razor.rz.scp.css */
/* =========================================================
   EKİPMANLAR - HERO
   ========================================================= */

.ekipman-hero[b-n916prtyyy] {
    background: linear-gradient( 135deg, #f8fafc 0%, #f4f1ff 55%, #effcfb 100% );
}


/* =========================================================
   HERO BAŞLIK
   ========================================================= */

.ekipman-hero-title[b-n916prtyyy] {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    white-space: nowrap;
}

.ekipman-label[b-n916prtyyy] {
    color: #6c4ce6;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ekipman-hero-title h1[b-n916prtyyy] {
    margin: 0;
    color: #17172b;
    font-size: clamp( 2rem, 3.5vw, 3.5rem );
    line-height: 1.1;
    font-weight: 800;
    white-space: nowrap;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 992px) {


    /* =====================================================
       SOL MENÜ
       ===================================================== */

    aside.col-lg-3[b-n916prtyyy] {
        min-width: 0;
    }


    .ekipman-menu-card[b-n916prtyyy] {
        height: 650px !important;
        max-height: 650px !important;
        overflow: hidden !important;
        background: #ffffff !important;
        border: 1px solid #e9e8f2 !important;
        border-radius: 20px !important;
        padding: 15px !important;
        box-shadow: 0 10px 35px rgba(30, 25, 70, 0.06) !important;
        position: sticky !important;
        top: 100px;
        z-index: 10;
    }


        /* =====================================================
       SOL MENÜ - BAĞIMSIZ SCROLL
       ===================================================== */

        .ekipman-menu-card .list-group[b-n916prtyyy] {
            height: 100% !important;
            max-height: 100% !important;
            overflow-y: auto !important;
            overflow-x: hidden !important;
            overscroll-behavior: contain;
            padding-right: 4px;
            min-height: 0;
            scrollbar-width: thin;
            scrollbar-color: #6c4ce6 transparent;
        }


            /* =====================================================
       SOL SCROLLBAR
       ===================================================== */

            .ekipman-menu-card .list-group[b-n916prtyyy]::-webkit-scrollbar {
                width: 6px;
            }

            .ekipman-menu-card .list-group[b-n916prtyyy]::-webkit-scrollbar-track {
                background: transparent;
            }

            .ekipman-menu-card .list-group[b-n916prtyyy]::-webkit-scrollbar-thumb {
                background: linear-gradient( 180deg, #6c4ce6, #16c7c0 );
                border-radius: 10px;
            }

                .ekipman-menu-card .list-group[b-n916prtyyy]::-webkit-scrollbar-thumb:hover {
                    background: #6c4ce6;
                }


    /* =====================================================
       SOL MENÜ ELEMANLARI
       ===================================================== */

    .ekipman-menu-item[b-n916prtyyy] {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        color: #252536 !important;
        background: transparent !important;
        padding: 13px 13px 13px 16px !important;
        margin-bottom: 4px;
        border-radius: 12px !important;
        border: 1px solid transparent !important;
        overflow: hidden;
        flex-shrink: 0;
        text-decoration: none;
        transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }


        /* =====================================================
       SOL MENÜ SOL ÇİZGİ
       ===================================================== */

        .ekipman-menu-item[b-n916prtyyy]::before {
            content: "";
            position: absolute;
            left: 0;
            top: 9px;
            bottom: 9px;
            width: 3px;
            border-radius: 0 5px 5px 0;
            background: transparent;
            transition: background 0.2s ease;
        }


        /* =====================================================
       HOVER
       ===================================================== */

        .ekipman-menu-item:hover[b-n916prtyyy] {
            background: #f7f5ff !important;
            color: #6040d2 !important;
            border-color: #e7e0ff !important;
            transform: translateX(3px);
        }


            .ekipman-menu-item:hover span i[b-n916prtyyy] {
                color: #6040d2 !important;
            }


            .ekipman-menu-item:hover > i:last-child[b-n916prtyyy] {
                color: #6040d2 !important;
                transform: translateX(3px);
            }


        /* =====================================================
       AKTİF MENÜ
       ===================================================== */

        .ekipman-menu-item.active[b-n916prtyyy] {
            background: linear-gradient( 135deg, #6c4ce6 0%, #795ee8 65%, #16bfc0 140% ) !important;
            color: #ffffff !important;
            border-color: transparent !important;
            box-shadow: 0 8px 22px rgba(108, 76, 230, 0.20) !important;
            transform: translateX(4px);
        }


            /* Aktif sol çizgi */

            .ekipman-menu-item.active[b-n916prtyyy]::before {
                background: #ffffff;
            }


            /* Aktif yazı */

            .ekipman-menu-item.active span[b-n916prtyyy] {
                color: #ffffff !important;
            }


                /* Aktif ikon */

                .ekipman-menu-item.active span i[b-n916prtyyy] {
                    color: #ffffff !important;
                }


            /* Aktif ok */

            .ekipman-menu-item.active > i:last-child[b-n916prtyyy] {
                color: #ffffff !important;
                transform: translateX(3px);
            }


        /* =====================================================
       NORMAL İKON
       ===================================================== */

        .ekipman-menu-item span i[b-n916prtyyy] {
            color: #6c4ce6;
            transition: color 0.2s ease, transform 0.2s ease;
        }


    /* =====================================================
       SAĞ İÇERİK
       ===================================================== */

    .ekipman-content[b-n916prtyyy] {
        height: 650px !important;
        max-height: 650px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain;
        padding-right: 12px;
        min-width: 0;
        scrollbar-width: thin;
        scrollbar-color: #6c4ce6 transparent;
    }


    /* =====================================================
       SAĞ İÇERİK KARTI
       ===================================================== */

    .ekipman-content-card[b-n916prtyyy] {
        min-height: 100%;
        background: #ffffff;
        border: 1px solid #e8e7f0 !important;
        border-radius: 22px !important;
        padding: 38px !important;
        box-shadow: 0 12px 40px rgba(30, 25, 70, 0.06) !important;
    }


    /* =====================================================
       SAĞ SCROLLBAR
       ===================================================== */

    .ekipman-content[b-n916prtyyy]::-webkit-scrollbar {
        width: 6px;
    }

    .ekipman-content[b-n916prtyyy]::-webkit-scrollbar-track {
        background: transparent;
    }

    .ekipman-content[b-n916prtyyy]::-webkit-scrollbar-thumb {
        background: linear-gradient( 180deg, #6c4ce6, #16c7c0 );
        border-radius: 10px;
    }

        .ekipman-content[b-n916prtyyy]::-webkit-scrollbar-thumb:hover {
            background: #6c4ce6;
        }


    /* =====================================================
       SAĞ BAŞLIK
       ===================================================== */

    .ekipman-detail-label[b-n916prtyyy] {
        color: #6c4ce6;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        margin-bottom: 12px;
    }


    .ekipman-content-card h2[b-n916prtyyy] {
        color: #17172b;
        font-size: 2rem;
        font-weight: 800;
        line-height: 1.2;
        margin-bottom: 25px;
        padding-bottom: 20px;
        border-bottom: 1px solid #e8e7f0;
    }


    /* =====================================================
       EKİPMAN İKONU
       ===================================================== */

    .ekipman-icon-box[b-n916prtyyy] {
        width: 68px;
        height: 68px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 18px;
        background: linear-gradient( 135deg, #6c4ce6, #16c7c0 );
        color: #ffffff;
        font-size: 28px;
        margin-bottom: 24px;
        box-shadow: 0 10px 25px rgba(108, 76, 230, 0.18);
    }


    /* =====================================================
       ANA AÇIKLAMA
       ===================================================== */

    .ekipman-lead[b-n916prtyyy] {
        font-size: 1.15rem;
        line-height: 1.8;
        color: #4b5563;
        margin-bottom: 30px;
    }


    /* =====================================================
       BİLGİ KUTUSU
       ===================================================== */

    .ekipman-info-box[b-n916prtyyy] {
        background: linear-gradient( 135deg, #faf9ff, #f5fffe );
        border: 1px solid #ebe8fa;
        border-radius: 16px;
        padding: 25px;
        margin-bottom: 30px;
    }


        .ekipman-info-box h3[b-n916prtyyy] {
            color: #29263d;
            font-size: 1.15rem;
            font-weight: 800;
            margin-bottom: 10px;
        }


        .ekipman-info-box p[b-n916prtyyy] {
            color: #64748b;
            line-height: 1.8;
            margin-bottom: 0;
        }


    /* =====================================================
       DETAY AÇIKLAMA
       ===================================================== */

    .ekipman-description[b-n916prtyyy] {
        padding-bottom: 30px;
    }


        .ekipman-description h3[b-n916prtyyy] {
            color: #29263d;
            font-size: 1.35rem;
            font-weight: 800;
            margin-bottom: 18px;
        }


        .ekipman-description p[b-n916prtyyy] {
            color: #64748b;
            line-height: 1.85;
            font-size: 1rem;
            margin-bottom: 18px;
        }


    /* =====================================================
       ALT BİLGİ KUTUSU
       ===================================================== */

    .ekipman-bottom-box[b-n916prtyyy] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 16px 18px;
        border-radius: 12px;
        background: #f8f7ff;
        color: #6040d2;
        font-weight: 600;
        border: 1px solid #e9e4ff;
    }


        .ekipman-bottom-box i[b-n916prtyyy] {
            font-size: 20px;
        }
}


/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 991.98px) {

    /* Hero */

    .ekipman-hero-title[b-n916prtyyy] {
        gap: 10px;
        white-space: normal;
        flex-wrap: wrap;
    }


        .ekipman-hero-title h1[b-n916prtyyy] {
            font-size: 2rem;
            white-space: normal;
        }


    /* Sol menü */

    .ekipman-menu-card[b-n916prtyyy] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        position: relative !important;
        top: auto !important;
        padding: 15px !important;
    }


        .ekipman-menu-card .list-group[b-n916prtyyy] {
            height: auto !important;
            max-height: none !important;
            overflow: visible !important;
            padding-right: 0;
        }


    /* Sağ içerik */

    .ekipman-content[b-n916prtyyy] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding-right: 0;
    }


    .ekipman-content-card[b-n916prtyyy] {
        min-height: auto;
        padding: 25px !important;
    }


        .ekipman-content-card h2[b-n916prtyyy] {
            font-size: 1.7rem;
        }
}


/* =========================================================
   EKİPMAN DETAY - GENİŞ, SCROLLSUZ VE İÇERİK ODAKLI YERLEŞİM
   ========================================================= */

.ekipman-page-container[b-n916prtyyy] {
    width: 100%;
    max-width: none;
    padding-left: clamp(16px, 3vw, 48px);
    padding-right: clamp(16px, 3vw, 48px);
}

.ekipman-layout-row[b-n916prtyyy] {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.ekipman-sidebar-column[b-n916prtyyy],
.ekipman-content-column[b-n916prtyyy] {
    min-width: 0;
}

.ekipman-menu-card[b-n916prtyyy] {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    position: static !important;
    top: auto !important;
    padding: 16px !important;
}

    .ekipman-menu-card .list-group[b-n916prtyyy] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-y: visible !important;
        overflow-x: visible !important;
        padding-right: 0 !important;
        scrollbar-width: none !important;
    }

        .ekipman-menu-card .list-group[b-n916prtyyy]::-webkit-scrollbar,
        .ekipman-content[b-n916prtyyy]::-webkit-scrollbar {
            display: none !important;
            width: 0 !important;
        }

.ekipman-menu-item[b-n916prtyyy] {
    min-height: 76px;
    height: auto;
    white-space: normal;
    overflow: visible;
    transform: none;
}

    .ekipman-menu-item:hover[b-n916prtyyy],
    .ekipman-menu-item.active[b-n916prtyyy] {
        transform: none;
    }

.ekipman-menu-copy[b-n916prtyyy] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    min-width: 0;
    width: 100%;
}

.ekipman-menu-name[b-n916prtyyy] {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    line-height: 1.35;
}

    .ekipman-menu-name i[b-n916prtyyy] {
        color: #6c4ce6;
        flex: 0 0 auto;
        font-size: 1.05rem;
    }

.ekipman-menu-item small[b-n916prtyyy] {
    display: block;
    padding-left: 27px;
    color: #7b8190;
    font-size: 0.76rem;
    line-height: 1.45;
    font-weight: 400;
}

.ekipman-menu-item.active small[b-n916prtyyy],
.ekipman-menu-item.active .ekipman-menu-name i[b-n916prtyyy] {
    color: rgba(255,255,255,0.88) !important;
}

.ekipman-content[b-n916prtyyy] {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    overscroll-behavior: auto;
    padding-right: 0 !important;
    scrollbar-width: none !important;
}

.ekipman-content-card[b-n916prtyyy] {
    min-height: 0;
    height: auto;
    padding: clamp(22px, 3vw, 44px) !important;
    overflow: visible;
}

    .ekipman-content-card article[b-n916prtyyy],
    .ekipman-description[b-n916prtyyy] {
        width: 100%;
        max-width: none;
    }

        .ekipman-content-card p[b-n916prtyyy],
        .ekipman-description p[b-n916prtyyy],
        .ekipman-lead[b-n916prtyyy],
        .ekipman-info-box p[b-n916prtyyy],
        .ekipman-media-caption p[b-n916prtyyy],
        .ekipman-application-section p[b-n916prtyyy] {
            text-align: justify;
            text-justify: inter-word;
            hyphens: auto;
        }

.ekipman-lead[b-n916prtyyy] {
    max-width: none;
}

.ekipman-info-box[b-n916prtyyy],
.ekipman-description[b-n916prtyyy],
.ekipman-media-section[b-n916prtyyy],
.ekipman-application-section[b-n916prtyyy] {
    width: 100%;
}

    .ekipman-description h3[b-n916prtyyy] {
        margin-top: 28px;
    }

.ekipman-section-heading[b-n916prtyyy] {
    margin-bottom: 22px;
}

    .ekipman-section-heading > span[b-n916prtyyy] {
        display: inline-block;
        margin-bottom: 8px;
        color: #6c4ce6;
        font-size: 0.75rem;
        font-weight: 800;
        letter-spacing: 0.12em;
    }

    .ekipman-section-heading h3[b-n916prtyyy] {
        margin: 0 0 10px;
        color: #29263d;
        font-size: clamp(1.25rem, 2vw, 1.6rem);
        font-weight: 800;
    }

    .ekipman-section-heading p[b-n916prtyyy] {
        margin: 0;
        color: #64748b;
        line-height: 1.75;
    }

.ekipman-media-section[b-n916prtyyy] {
    margin-top: 38px;
    padding-top: 30px;
    border-top: 1px solid #eceaf4;
}

.ekipman-media-card[b-n916prtyyy] {
    height: 100%;
    overflow: hidden;
    border: 1px solid #e8e7f0;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(30, 25, 70, 0.045);
}

.ekipman-media-placeholder[b-n916prtyyy] {
    min-height: 220px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
    background: linear-gradient(135deg, #f5f2ff, #effcfb);
    color: #6c4ce6;
}

    .ekipman-media-placeholder i[b-n916prtyyy] {
        font-size: 2.6rem;
    }

    .ekipman-media-placeholder strong[b-n916prtyyy] {
        color: #29263d;
        font-size: 1rem;
    }

    .ekipman-media-placeholder span[b-n916prtyyy] {
        color: #7b8190;
        font-size: 0.82rem;
    }

.ekipman-video-placeholder[b-n916prtyyy] {
    background: linear-gradient(135deg, #eef7ff, #f3f0ff);
}

.ekipman-media-caption[b-n916prtyyy] {
    padding: 20px;
}

    .ekipman-media-caption h4[b-n916prtyyy] {
        margin: 0 0 9px;
        color: #29263d;
        font-size: 1rem;
        font-weight: 800;
    }

    .ekipman-media-caption p[b-n916prtyyy] {
        margin: 0;
        color: #64748b;
        font-size: 0.92rem;
        line-height: 1.7;
    }

.ekipman-application-section[b-n916prtyyy] {
    margin-top: 32px;
    padding: 26px;
    border: 1px solid #e8e7f0;
    border-radius: 16px;
    background: #fbfaff;
}

    .ekipman-application-section p[b-n916prtyyy] {
        margin: 0;
        color: #64748b;
        line-height: 1.85;
    }

@media (max-width: 991.98px) {
    .ekipman-page-container[b-n916prtyyy] {
        padding-left: 16px;
        padding-right: 16px;
    }

    .ekipman-menu-card[b-n916prtyyy] {
        position: static !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

    .ekipman-content[b-n916prtyyy] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding-right: 0 !important;
    }

    .ekipman-content-card[b-n916prtyyy] {
        padding: 24px !important;
    }

    .ekipman-media-placeholder[b-n916prtyyy] {
        min-height: 180px;
    }
}

@media (max-width: 575.98px) {
    .ekipman-content-card[b-n916prtyyy] {
        padding: 19px !important;
    }

    .ekipman-application-section[b-n916prtyyy] {
        padding: 19px;
    }

    .ekipman-menu-item[b-n916prtyyy] {
        padding: 12px !important;
    }
}


/* =========================================================
   EKIPMAN SOL MENU - NATIF ACILIR/KAPANIR KATEGORILER
   ========================================================= */

.ekipman-category-group[b-n916prtyyy] {
    display: block;
    margin: 0 0 8px;
    border: 1px solid #eceaf4;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
}

.ekipman-category-toggle[b-n916prtyyy] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 15px 16px;
    margin: 0;
    border: 0;
    background: #fff;
    color: #252536;
    font: inherit;
    font-weight: 750;
    text-align: left;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

    .ekipman-category-toggle[b-n916prtyyy]::-webkit-details-marker {
        display: none;
    }

.ekipman-category-title[b-n916prtyyy] {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
}

    .ekipman-category-title > i[b-n916prtyyy] {
        color: #6c4ce6;
        font-size: 1.1rem;
        flex: 0 0 auto;
    }

.ekipman-category-chevron[b-n916prtyyy] {
    color: #6c4ce6;
    transition: transform .2s ease;
    flex: 0 0 auto;
}

.ekipman-category-group[open] > .ekipman-category-toggle[b-n916prtyyy] {
    color: #6040d2;
    background: #f8f6ff;
}

    .ekipman-category-group[open] > .ekipman-category-toggle .ekipman-category-chevron[b-n916prtyyy] {
        transform: rotate(180deg);
    }

.ekipman-subcategory-list[b-n916prtyyy] {
    padding: 5px 10px 10px 18px;
    border-top: 1px solid #f0eef7;
}

    .ekipman-subcategory-list .ekipman-menu-item[b-n916prtyyy] {
        min-height: 42px;
        margin: 3px 0;
        padding: 10px 12px !important;
        border-radius: 8px !important;
        font-size: .94rem;
    }

        .ekipman-subcategory-list .ekipman-menu-item[b-n916prtyyy]::before {
            display: none;
        }

        .ekipman-subcategory-list .ekipman-menu-item.active[b-n916prtyyy] {
            background: linear-gradient(135deg, #6c4ce6 0%, #795ee8 65%, #16bfc0 140%) !important;
            color: #fff !important;
        }

            .ekipman-subcategory-list .ekipman-menu-item.active .ekipman-menu-name[b-n916prtyyy],
            .ekipman-subcategory-list .ekipman-menu-item.active > i[b-n916prtyyy] {
                color: #fff !important;
            }


/* =========================================================
   SOL KATEGORI MENUSU - BAGIMSIZ KAYDIRMA
   Ana içerik sayfa ile birlikte ilerler; kategori listesi
   kendi alanında kaydırılır.
   ========================================================= */

@media (min-width: 992px) {
    .ekipman-menu-card[b-n916prtyyy] {
        position: sticky !important;
        top: 100px !important;
        height: auto !important;
        max-height: calc(100vh - 125px) !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: #6c4ce6 #f1eff8;
        padding: 12px !important;
    }

        .ekipman-menu-card[b-n916prtyyy]::-webkit-scrollbar {
            width: 7px;
        }

        .ekipman-menu-card[b-n916prtyyy]::-webkit-scrollbar-track {
            background: #f1eff8;
            border-radius: 10px;
        }

        .ekipman-menu-card[b-n916prtyyy]::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #6c4ce6, #16c7c0);
            border-radius: 10px;
        }

        .ekipman-menu-card .list-group[b-n916prtyyy] {
            height: auto !important;
            max-height: none !important;
            overflow: visible !important;
        }
}

@media (max-width: 991.98px) {
    .ekipman-menu-card[b-n916prtyyy] {
        position: static !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
    }

        .ekipman-menu-card .list-group[b-n916prtyyy] {
            height: auto !important;
            max-height: none !important;
            overflow: visible !important;
        }
}
/* _content/WEB/Components/Pages/Endustriyel/EndAnaSayfa.razor.rz.scp.css */
/* 1. Genel Yapı */
html[b-0du4d2uwx0], body[b-0du4d2uwx0] {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* 2. Navbar ve Animasyonlar */
.custom-nav[b-0du4d2uwx0] {
    transition: all 0.3s ease;
    padding: 15px 0;
}

.dropdown-menu.animate[b-0du4d2uwx0] {
    animation-duration: 0.3s;
    animation-fill-mode: both;
    display: none;
}

.custom-dropdown:hover .dropdown-menu[b-0du4d2uwx0] {
    display: block;
    animation-name: slideIn-b-0du4d2uwx0;
}

@keyframes slideIn-b-0du4d2uwx0 {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 3. Hero Section */
.hero-section[b-0du4d2uwx0] {
    position: relative;
    height: 85vh;
    min-height: 500px;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}

.hero-img[b-0du4d2uwx0] {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-content[b-0du4d2uwx0] {
    position: relative;
    z-index: 2;
}

/* ANA FOTOĞRAF BUTON LİSTESİ */
.feature-btn[b-0du4d2uwx0] {
    background-color: rgba(135, 206, 250, 0.45) !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    color: #ffffff !important;
    padding: 14px 22px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 420px;
    font-weight: 500;
}

    .feature-btn .text[b-0du4d2uwx0],
    .feature-btn .icon[b-0du4d2uwx0] {
        color: #ffffff !important;
    }
    .feature-btn:hover[b-0du4d2uwx0] {
        background-color: rgba(0, 123, 255, 0.75) !important;
        border-color: #66b2ff !important;
        color: #ffffff !important;
        transform: scale(1.05) translateX(-5px) translateZ(0);
        box-shadow: 0 12px 30px rgba(0, 80, 180, 0.35);
        position: relative;
        z-index: 10;
    }

        .feature-btn:hover .text[b-0du4d2uwx0],
        .feature-btn:hover .icon[b-0du4d2uwx0] {
            color: #ffffff !important;
            font-weight: bold;
        }
.category-card[b-0du4d2uwx0] {
    background: #fff;
    border-radius: 40px;
    overflow: hidden;
    transition: 0.5s;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    height: 100%;
    border: 2px solid #f0f0f0;
}

    .category-card:hover[b-0du4d2uwx0] {
        transform: translateY(-20px);
        box-shadow: 0 30px 60px rgba(0,0,0,0.2);
        border-color: #0d6efd;
    }

.img-box[b-0du4d2uwx0] {
    height: 350px;
    overflow: hidden;
}

    .img-box img[b-0du4d2uwx0] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.6s;
    }

.category-card:hover .img-box img[b-0du4d2uwx0] {
    transform: scale(1.15);
}

.card-content[b-0du4d2uwx0] {
    padding: 40px 35px;
    text-align: center;
}

.btn-detay[b-0du4d2uwx0] {
    display: inline-block;
    padding: 15px 40px;
    background: #0d6efd;
    color: white;
    border-radius: 50px;
    text-decoration: none;
    transition: 0.3s;
}

/* Info Section */
.info-section[b-0du4d2uwx0] {
    padding: 80px 0;
    background: #f8fbff;
    border-top: 5px solid #0d47a1;
}

.section-title[b-0du4d2uwx0] {
    text-align: center;
    font-size: 2.5rem;
    color: #1a237e;
    margin-bottom: 50px;
}

.info-grid[b-0du4d2uwx0] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

.info-card[b-0du4d2uwx0] {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: 0.3s;
    border-bottom: 4px solid transparent;
}

    .info-card:hover[b-0du4d2uwx0] {
        transform: translateY(-10px);
        box-shadow: 0 20px 30px rgba(0,0,0,0.1);
        border-bottom: 4px solid #0d47a1;
    }

    .info-card h3[b-0du4d2uwx0], .info-card h4[b-0du4d2uwx0] {
        color: #0d47a1;
        margin-bottom: 15px;
        font-size: 1.4rem;
        font-weight: 700;
    }

    .info-card p[b-0du4d2uwx0] {
        line-height: 1.7;
        color: #555;
        font-size: 0.95rem;
    }

/* Form Container */
.form-container[b-0du4d2uwx0] {
    max-width: 800px;
    margin: 80px auto;
    padding: 40px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: 0.4s;
}

    .form-container:hover[b-0du4d2uwx0] {
        box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        transform: translateY(-5px);
    }

.form-group[b-0du4d2uwx0] {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .form-group label[b-0du4d2uwx0] {
        width: 30%;
        font-weight: 600;
    }

    .form-group input[b-0du4d2uwx0], .form-group select[b-0du4d2uwx0], .form-group textarea[b-0du4d2uwx0] {
        width: 65%;
        padding: 12px;
        border: 2px solid #e0e0e0;
        border-radius: 10px;
    }

button[b-0du4d2uwx0] {
    display: block;
    width: 100%;
    background: #0d47a1;
    color: white;
    padding: 15px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 20px;
}

    button:hover[b-0du4d2uwx0] {
        background: #0b3a82;
    }

@media (max-width: 992px) {
    .feature-btn[b-0du4d2uwx0] {
        width: 100%;
    }

    .img-box[b-0du4d2uwx0] {
        height: 280px;
    }
}

.info-card-link[b-0du4d2uwx0] {
    display: block;
    height: 100%;
}

    .info-card-link:hover .info-card[b-0du4d2uwx0] {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
        border-color: var(--color-primary);
    }

    .info-card-link:hover .card-action-text i[b-0du4d2uwx0] {
        transform: translateX(4px);
        transition: transform 0.2s ease;
    }

/* ŞEMA GÖRSELİ HOVER ZOOM */
.img-magnifier-container[b-0du4d2uwx0] {
    overflow: hidden;
    position: relative;
    border-radius: 12px;
}

    .img-magnifier-container img[b-0du4d2uwx0] {
        transition: transform 0.1s ease-out;
    }

    .img-magnifier-container:hover img[b-0du4d2uwx0] {
        transform: scale(1.8);
        cursor: zoom-in;
    }

.custom-tab-btn[b-0du4d2uwx0],
.custom-tab-btn:hover[b-0du4d2uwx0],
.custom-tab-btn:focus[b-0du4d2uwx0],
.custom-tab-btn.active[b-0du4d2uwx0] {
    background-color: #ffffff !important;
    border-color: transparent !important;
}
/* _content/WEB/Components/Pages/Endustriyel/Endustriyel.razor.rz.scp.css */
/* ==========================================================================
   GENEL RENK DEĞİŞKENLERİ VE YAPILANDIRMA (BORDO KALDIRILDI)
   ========================================================================== */
:root[b-v5h18ptx9a] {
    --color-turquoise: #00a896; /* Canlı Su Turkuazı */
    --color-light-turq: #e6f6f4; /* Çok Açık/Yumuşak Turkuaz Fon */
    --color-turquoise-hover: #028074; /* Koyu Turkuaz */
    --bg-light-gray: #f8fafc; /* Ferah Arka Plan Beyazı */
    --text-dark: #1e293b; /* Net Okunabilir Koyu Gri/Siyah */
    --text-muted: #64748b; /* İkincil Metin Grisi */
}

/* Tüm sayfada yatay taşmayı kesin olarak engelleyen global koruma */
html[b-v5h18ptx9a], body[b-v5h18ptx9a] {
    max-width: 100%;
    overflow-x: hidden !important;
}

/* ==========================================================================
   1. HERO CAROUSEL VE OVERLAY YAPILANDIRMASI (5 SLAYT)
   ========================================================================== */
.industrial-hero-section[b-v5h18ptx9a] {
    max-width: 1540px;
    margin: 24px auto 0 auto;
    padding: 0 24px;
    width: 100%;
}

.hero-carousel[b-v5h18ptx9a] {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 168, 150, 0.1);
}

.hero-slide-wrapper[b-v5h18ptx9a] {
    position: relative;
    background-size: cover;
    background-position: center;
    height: 100%;
}

/* Slayt 1: Kurumsal Turkuaz Esintisi */
.slide-one[b-v5h18ptx9a] {
    background-image: linear-gradient(135deg, rgba(0, 140, 125, 0.85), rgba(255, 255, 255, 0.2)), url('/images/carousel/industrial-bg1.jpg');
}

/* Slayt 2: Modern Koyu Gri ve Turkuaz Dengesi */
.slide-two[b-v5h18ptx9a] {
    background-image: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(0, 168, 150, 0.3)), url('/images/carousel/industrial-bg2.jpg');
}

/* Slayt 3: Derin Su / Temiz Akış Teması */
.slide-three[b-v5h18ptx9a] {
    background-image: linear-gradient(135deg, rgba(2, 128, 116, 0.85), rgba(248, 250, 252, 0.25)), url('/images/carousel/industrial-bg3.jpg');
}

/* Slayt 4: Ferah Aydınlık Proses Teması */
.slide-four[b-v5h18ptx9a] {
    background-image: linear-gradient(135deg, rgba(15, 23, 42, 0.80), rgba(0, 168, 150, 0.4)), url('/images/carousel/industrial-bg4.jpg');
}

/* Slayt 5: Profesyonel Mühendislik Teması */
.slide-five[b-v5h18ptx9a] {
    background-image: linear-gradient(135deg, rgba(0, 168, 150, 0.80), rgba(30, 41, 59, 0.4)), url('/images/carousel/industrial-bg5.jpg');
}

.hero-overlay-dark[b-v5h18ptx9a] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(1px);
}

.hero-title[b-v5h18ptx9a] {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.hero-subtitle[b-v5h18ptx9a] {
    font-size: 1.15rem;
    font-weight: 400;
    color: #ffffff;
    opacity: 0.95;
}

/* ==========================================================================
   2. ORTAK BAŞLIK VE BAŞLIK ALTI ÇİZGİLERİ (SECTIONS)
   ========================================================================== */
.section-main-title[b-v5h18ptx9a] {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-dark);
    position: relative;
    display: inline-block;
}

.section-sub-title[b-v5h18ptx9a] {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-top: 8px;
}

.title-underline[b-v5h18ptx9a] {
    width: 50px;
    height: 4px;
    background: var(--color-turquoise);
    margin: 12px auto 0 auto;
    border-radius: 2px;
}

/* ==========================================================================
   3. MODERN ÜRÜN KARTLARI (PRODUCT CARDS)
   ========================================================================== */
.modern-product-card[b-v5h18ptx9a] {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .modern-product-card:hover[b-v5h18ptx9a] {
        transform: translateY(-6px);
        box-shadow: 0 12px 25px rgba(0, 168, 150, 0.08);
        border-color: rgba(0, 168, 150, 0.2);
    }

.product-image-box[b-v5h18ptx9a] {
    position: relative;
    height: 220px;
    background-color: #f1f5f9;
    overflow: hidden;
}

.product-img[b-v5h18ptx9a] {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.modern-product-card:hover .product-img[b-v5h18ptx9a] {
    transform: scale(1.04);
}

.product-badge[b-v5h18ptx9a] {
    position: absolute;
    top: 14px;
    left: 14px;
    background-color: var(--color-turquoise);
    color: #ffffff;
    padding: 4px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(0, 168, 150, 0.2);
}

.product-content[b-v5h18ptx9a] {
    padding: 24px;
    flex-grow: 1;
}

.product-title[b-v5h18ptx9a] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
    line-height: 1.4;
}

.product-tech[b-v5h18ptx9a] {
    display: inline-flex;
    align-items: center;
    color: var(--color-turquoise);
    font-size: 0.85rem;
    font-weight: 600;
    background-color: var(--color-light-turq);
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 14px;
}

.product-desc[b-v5h18ptx9a] {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 16px;
}

.product-specs[b-v5h18ptx9a] {
    border-top: 1px dashed #e2e8f0;
    padding-top: 12px;
}

.spec-item[b-v5h18ptx9a] {
    font-size: 0.88rem;
    color: #334155;
    margin-bottom: 4px;
}

    .spec-item strong[b-v5h18ptx9a] {
        color: var(--color-turquoise);
    }

.product-actions-bar[b-v5h18ptx9a] {
    padding: 16px 24px 24px 24px;
    background-color: #fafafa;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ==========================================================================
   4. MÜHENDİSLİK KADROSU KARTLARI (TEAM CARDS)
   ========================================================================== */
.team-member-card[b-v5h18ptx9a] {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    text-align: center;
}

    .team-member-card:hover[b-v5h18ptx9a] {
        box-shadow: 0 10px 25px rgba(0, 168, 150, 0.06);
        border-color: rgba(0, 168, 150, 0.15);
    }

.member-img-frame[b-v5h18ptx9a] {
    position: relative;
    width: 130px;
    height: 130px;
    margin: 0 auto 16px auto;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 3px rgba(0, 168, 150, 0.15);
    transition: box-shadow 0.3s ease;
}

.team-member-card:hover .member-img-frame[b-v5h18ptx9a] {
    box-shadow: 0 0 0 3px var(--color-turquoise);
}

.member-img[b-v5h18ptx9a] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-socials[b-v5h18ptx9a] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 168, 150, 0.9);
    padding: 2px 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.team-member-card:hover .member-socials[b-v5h18ptx9a] {
    opacity: 1;
}

.member-name[b-v5h18ptx9a] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.member-role[b-v5h18ptx9a] {
    font-size: 0.85rem;
    color: var(--color-turquoise);
    font-weight: 600;
}

/* ==========================================================================
   5. REFERANS LOGO ALANI
   ========================================================================== */
.modern-marquee-container[b-v5h18ptx9a] {
    background: #ffffff;
    padding: 20px;
    overflow: hidden;
    position: relative;
    border: 1px solid #f1f5f9;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.01);
    width: 100%;
}

    .modern-marquee-container[b-v5h18ptx9a]::before,
    .modern-marquee-container[b-v5h18ptx9a]::after {
        content: "";
        height: 100%;
        position: absolute;
        width: 50px;
        z-index: 2;
        pointer-events: none;
    }

    .modern-marquee-container[b-v5h18ptx9a]::before {
        top: 0;
        left: 0;
        background: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0) 100%);
    }

    .modern-marquee-container[b-v5h18ptx9a]::after {
        top: 0;
        right: 0;
        background: linear-gradient(to left, #ffffff 0%, rgba(255,255,255,0) 100%);
    }

.marquee-scroll-track[b-v5h18ptx9a] {
    display: flex;
    width: max-content;
    animation: marqueeAnimation-b-v5h18ptx9a 30s linear infinite;
    white-space: nowrap;
}

    .marquee-scroll-track:hover[b-v5h18ptx9a] {
        animation-play-state: paused;
    }

.reference-logo-card[b-v5h18ptx9a] {
    width: 180px;
    margin: 0 8px;
    background: #f8fafc;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e2e8f0;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

    .reference-logo-card:hover[b-v5h18ptx9a] {
        background: #ffffff;
        border-color: var(--color-turquoise);
        box-shadow: 0 4px 12px rgba(0, 168, 150, 0.05);
    }

@keyframes marqueeAnimation-b-v5h18ptx9a {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ==========================================================================
   6. İLETİŞİM ALANI VE HARİTA
   ========================================================================== */
.contact-form-card[b-v5h18ptx9a] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.form-title[b-v5h18ptx9a] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark);
}

.form-subtitle[b-v5h18ptx9a] {
    font-size: 0.92rem;
    color: var(--text-muted);
}

.contact-map-card[b-v5h18ptx9a] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.01);
}

.map-card-title[b-v5h18ptx9a] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
}

.map-iframe-wrapper[b-v5h18ptx9a] {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
}

    .map-iframe-wrapper iframe[b-v5h18ptx9a] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

.contact-info-footer-card[b-v5h18ptx9a] {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
    position: relative;
    overflow: hidden;
}

    .contact-info-footer-card[b-v5h18ptx9a]::after {
        content: "";
        position: absolute;
        width: 250px;
        height: 250px;
        background: rgba(0, 168, 150, 0.12);
        border-radius: 50%;
        bottom: -80px;
        right: -80px;
    }

.info-card-brand[b-v5h18ptx9a] {
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: 1px;
    color: #ffffff;
}

.mud-container[b-v5h18ptx9a] {
    max-width: 100% !important;
    overflow-x: hidden;
}

/* ==========================================================================
   7. MOBİL UYUMLULUK (RESPONSIVE BREAKPOINTS)
   ========================================================================== */
@media (max-width: 960px) {
    .hero-text-content[b-v5h18ptx9a] {
        padding: 20px !important;
    }

    .industrial-hero-section[b-v5h18ptx9a] {
        height: auto !important;
    }

    .mud-grid[b-v5h18ptx9a] {
        margin: 0 !important;
        width: 100% !important;
    }
}

@media (max-width: 768px) {
    .industrial-hero-section[b-v5h18ptx9a] {
        padding: 0 12px;
        margin-top: 12px;
    }

    .hero-carousel[b-v5h18ptx9a] {
        border-radius: 12px;
    }

    .hero-title[b-v5h18ptx9a] {
        font-size: 1.6rem;
    }

    .hero-subtitle[b-v5h18ptx9a] {
        font-size: 0.95rem;
    }

    .section-main-title[b-v5h18ptx9a] {
        font-size: 1.5rem;
    }

    .modern-product-card[b-v5h18ptx9a], .team-member-card[b-v5h18ptx9a] {
        margin-bottom: 12px;
    }

    .map-iframe-wrapper[b-v5h18ptx9a] {
        padding-bottom: 70%;
    }

    .reference-logo-card[b-v5h18ptx9a] {
        width: 130px;
        padding: 8px;
    }
}
/* _content/WEB/Components/Pages/Endustriyel/Hizmetlerimiz.razor.rz.scp.css */
/* ==========================================================================
   GENEL RENK DEĞİŞKENLERİ VE YAPILANDIRMA (BORDO KALDIRILDI)
   ========================================================================== */
:root[b-uhss5jkzpd] {
    --color-turquoise: #00a896; /* Canlı Su Turkuazı */
    --color-light-turq: #e6f6f4; /* Çok Açık/Yumuşak Turkuaz Fon */
    --color-turquoise-hover: #028074; /* Koyu Turkuaz */
    --bg-light-gray: #f8fafc; /* Ferah Arka Plan Beyazı */
    --text-dark: #1e293b; /* Net Okunabilir Koyu Gri/Siyah */
    --text-muted: #64748b; /* İkincil Metin Grisi */
}

/* Tüm sayfada yatay taşmayı kesin olarak engelleyen global koruma */
html[b-uhss5jkzpd], body[b-uhss5jkzpd] {
    max-width: 100%;
    overflow-x: hidden !important;
}

/* ==========================================================================
   1. HERO CAROUSEL VE OVERLAY YAPILANDIRMASI (5 SLAYT)
   ========================================================================== */
.industrial-hero-section[b-uhss5jkzpd] {
    max-width: 1540px;
    margin: 24px auto 0 auto;
    padding: 0 24px;
    width: 100%;
}

.hero-carousel[b-uhss5jkzpd] {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 168, 150, 0.1);
}

.hero-slide-wrapper[b-uhss5jkzpd] {
    position: relative;
    background-size: cover;
    background-position: center;
    height: 100%;
}

/* --- SLIDER ARKA PLAN GRADYANLARI (BORDOSUZ, AÇIK & FERAH) --- */

/* Slayt 1: Kurumsal Turkuaz Esintisi */
.slide-one[b-uhss5jkzpd] {
    background-image: linear-gradient(135deg, rgba(0, 140, 125, 0.85), rgba(255, 255, 255, 0.2)), url('/images/carousel/industrial-bg1.jpg');
}

/* Slayt 2: Modern Koyu Gri ve Turkuaz Dengesi */
.slide-two[b-uhss5jkzpd] {
    background-image: linear-gradient(135deg, rgba(30, 41, 59, 0.85), rgba(0, 168, 150, 0.3)), url('/images/carousel/industrial-bg2.jpg');
}

/* Slayt 3: Derin Su / Temiz Akış Teması (YENİ) */
.slide-three[b-uhss5jkzpd] {
    background-image: linear-gradient(135deg, rgba(2, 128, 116, 0.85), rgba(248, 250, 252, 0.25)), url('/images/carousel/industrial-bg3.jpg');
}

/* Slayt 4: Ferah Aydınlık Proses Teması (YENİ) */
.slide-four[b-uhss5jkzpd] {
    background-image: linear-gradient(135deg, rgba(15, 23, 42, 0.80), rgba(0, 168, 150, 0.4)), url('/images/carousel/industrial-bg4.jpg');
}

/* Slayt 5: Profesyonel Mühendislik Teması (YENİ) */
.slide-five[b-uhss5jkzpd] {
    background-image: linear-gradient(135deg, rgba(0, 168, 150, 0.80), rgba(30, 41, 59, 0.4)), url('/images/carousel/industrial-bg5.jpg');
}

.hero-overlay-dark[b-uhss5jkzpd] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(1px);
}

.hero-title[b-uhss5jkzpd] {
    font-size: 2.6rem;
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.hero-subtitle[b-uhss5jkzpd] {
    font-size: 1.15rem;
    font-weight: 400;
    color: #ffffff;
    opacity: 0.95;
}
/* ==========================================================================
   2. ORTAK BAŞLIK VE BAŞLIK ALTI ÇİZGİLERİ (SECTIONS)
   ========================================================================== */
.section-main-title[b-uhss5jkzpd] {
    font-size: 2.2rem;
    font-weight: 700;
    color: var(--text-dark);
    position: relative;
    display: inline-block;
}

.section-sub-title[b-uhss5jkzpd] {
    font-size: 1.05rem;
    color: var(--text-muted);
    margin-top: 8px;
}

.title-underline[b-uhss5jkzpd] {
    width: 50px;
    height: 4px;
    background: var(--color-turquoise); /* Saf Turkuaz Çizgi */
    margin: 12px auto 0 auto;
    border-radius: 2px;
}

/* ==========================================================================
   3. MODERN ÜRÜN KARTLARI (PRODUCT CARDS)
   ========================================================================== */
.modern-product-card[b-uhss5jkzpd] {
    background: #ffffff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
}

    .modern-product-card:hover[b-uhss5jkzpd] {
        transform: translateY(-6px);
        box-shadow: 0 12px 25px rgba(0, 168, 150, 0.08);
        border-color: rgba(0, 168, 150, 0.2);
    }

.product-image-box[b-uhss5jkzpd] {
    position: relative;
    height: 220px;
    background-color: #f1f5f9;
    overflow: hidden;
}

.product-img[b-uhss5jkzpd] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.modern-product-card:hover .product-img[b-uhss5jkzpd] {
    transform: scale(1.04);
}

.product-badge[b-uhss5jkzpd] {
    position: absolute;
    top: 14px;
    left: 14px;
    background-color: var(--color-turquoise); /* Bordo yerine Turkuaz yapıldı */
    color: #ffffff;
    padding: 4px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: 30px;
    box-shadow: 0 4px 10px rgba(0, 168, 150, 0.2);
}

.product-content[b-uhss5jkzpd] {
    padding: 24px;
    flex-grow: 1;
}

.product-title[b-uhss5jkzpd] {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 8px;
    line-height: 1.4;
}

.product-tech[b-uhss5jkzpd] {
    display: inline-flex;
    align-items: center;
    color: var(--color-turquoise);
    font-size: 0.85rem;
    font-weight: 600;
    background-color: var(--color-light-turq); /* Yumuşak açık turkuaz fon */
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 14px;
}

.product-desc[b-uhss5jkzpd] {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.6;
    margin-bottom: 16px;
}

.product-specs[b-uhss5jkzpd] {
    border-top: 1px dashed #e2e8f0;
    padding-top: 12px;
}

.spec-item[b-uhss5jkzpd] {
    font-size: 0.88rem;
    color: #334155;
    margin-bottom: 4px;
}

    .spec-item strong[b-uhss5jkzpd] {
        color: var(--color-turquoise); /* Vurgular açık turkuaz yapıldı */
    }

.product-actions-bar[b-uhss5jkzpd] {
    padding: 16px 24px 24px 24px;
    background-color: #fafafa;
    border-top: 1px solid #f1f5f9;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ==========================================================================
   4. MÜHENDİSLİK KADROSU KARTLARI (TEAM CARDS)
   ========================================================================== */
.team-member-card[b-uhss5jkzpd] {
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02);
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
    text-align: center;
}

    .team-member-card:hover[b-uhss5jkzpd] {
        box-shadow: 0 10px 25px rgba(0, 168, 150, 0.06);
        border-color: rgba(0, 168, 150, 0.15);
    }

.member-img-frame[b-uhss5jkzpd] {
    position: relative;
    width: 130px;
    height: 130px;
    margin: 0 auto 16px auto;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid #ffffff;
    box-shadow: 0 0 0 3px rgba(0, 168, 150, 0.15);
    transition: box-shadow 0.3s ease;
}

.team-member-card:hover .member-img-frame[b-uhss5jkzpd] {
    box-shadow: 0 0 0 3px var(--color-turquoise);
}

.member-img[b-uhss5jkzpd] {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.member-socials[b-uhss5jkzpd] {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 168, 150, 0.9); /* Turkuaz yapıldı */
    padding: 2px 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.team-member-card:hover .member-socials[b-uhss5jkzpd] {
    opacity: 1;
}

.member-name[b-uhss5jkzpd] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 4px;
}

.member-role[b-uhss5jkzpd] {
    font-size: 0.85rem;
    color: var(--color-turquoise);
    font-weight: 600;
}

/* ==========================================================================
   5. REFERANS LOGO ALANI
   ========================================================================== */
.modern-marquee-container[b-uhss5jkzpd] {
    background: #ffffff;
    padding: 20px;
    overflow: hidden;
    position: relative;
    border: 1px solid #f1f5f9;
    box-shadow: inset 0 0 20px rgba(0,0,0,0.01);
    width: 100%;
}

    .modern-marquee-container[b-uhss5jkzpd]::before,
    .modern-marquee-container[b-uhss5jkzpd]::after {
        content: "";
        height: 100%;
        position: absolute;
        width: 50px;
        z-index: 2;
        pointer-events: none;
    }

    .modern-marquee-container[b-uhss5jkzpd]::before {
        top: 0;
        left: 0;
        background: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0) 100%);
    }

    .modern-marquee-container[b-uhss5jkzpd]::after {
        top: 0;
        right: 0;
        background: linear-gradient(to left, #ffffff 0%, rgba(255,255,255,0) 100%);
    }

.marquee-scroll-track[b-uhss5jkzpd] {
    display: flex;
    width: max-content;
    animation: marqueeAnimation-b-uhss5jkzpd 30s linear infinite;
}

    .marquee-scroll-track:hover[b-uhss5jkzpd] {
        animation-play-state: paused;
    }

.reference-logo-card[b-uhss5jkzpd] {
    width: 180px;
    margin: 0 8px;
    background: #f8fafc;
    border-radius: 12px;
    padding: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #e2e8f0;
    transition: all 0.25s ease;
    flex-shrink: 0;
}

    .reference-logo-card:hover[b-uhss5jkzpd] {
        background: #ffffff;
        border-color: var(--color-turquoise);
        box-shadow: 0 4px 12px rgba(0, 168, 150, 0.05);
    }

@keyframes marqueeAnimation-b-uhss5jkzpd {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ==========================================================================
   6. İLETİŞİM ALANI VE HARİTA (KOYU GRADYAALARDAN BEYAZA GEÇİŞ)
   ========================================================================== */
.contact-form-card[b-uhss5jkzpd] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.02);
}

.form-title[b-uhss5jkzpd] {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--text-dark); /* Sert renk yerine soft siyah */
}

.form-subtitle[b-uhss5jkzpd] {
    font-size: 0.92rem;
    color: var(--text-muted);
}

.contact-map-card[b-uhss5jkzpd] {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 20px rgba(0,0,0,0.01);
}

.map-card-title[b-uhss5jkzpd] {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-dark);
}

.map-iframe-wrapper[b-uhss5jkzpd] {
    overflow: hidden;
    border: 1px solid #e2e8f0;
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
}

    .map-iframe-wrapper iframe[b-uhss5jkzpd] {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

/* İletişim Bilgi Kutusu - Bordo gradyandan Soft Turkuaz/Koyu Gri Gradyanına geçirildi */
.contact-info-footer-card[b-uhss5jkzpd] {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%); /* Tamamen ferahlığı destekleyen koyu slate tonu */
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.15);
    position: relative;
    overflow: hidden;
}

    .contact-info-footer-card[b-uhss5jkzpd]::after {
        content: "";
        position: absolute;
        width: 250px;
        height: 250px;
        background: rgba(0, 168, 150, 0.12); /* Arkadaki halka yumuşak turkuaz esintisi bırakıyor */
        border-radius: 50%;
        bottom: -80px;
        right: -80px;
    }

.info-card-brand[b-uhss5jkzpd] {
    font-size: 1.8rem;
    font-weight: 900;
    letter-spacing: 1px;
    color: #ffffff;
}

/* ==========================================================================
   7. MOBİL UYUMLULUK VE TIRAŞLAMA (RESPONSIVE BREAKPOINTS)
   ========================================================================== */
@media (max-width: 768px) {
    .industrial-hero-section[b-uhss5jkzpd] {
        padding: 0 12px; /* Mobilde kenar boşlukları biraz daha daralır */
        margin-top: 12px;
    }

    .hero-carousel[b-uhss5jkzpd] {
        border-radius: 12px;
    }

    .container[b-uhss5jkzpd], .container-fluid[b-uhss5jkzpd] {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .row[b-uhss5jkzpd] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .hero-title[b-uhss5jkzpd] {
        font-size: 1.6rem;
    }

    .hero-subtitle[b-uhss5jkzpd] {
        font-size: 0.95rem;
    }

    .section-main-title[b-uhss5jkzpd] {
        font-size: 1.5rem;
    }

    .modern-product-card[b-uhss5jkzpd], .team-member-card[b-uhss5jkzpd] {
        margin-bottom: 12px;
    }

    .map-iframe-wrapper[b-uhss5jkzpd] {
        padding-bottom: 70%;
    }

    .reference-logo-card[b-uhss5jkzpd] {
        width: 130px;
        padding: 8px;
    }

    .modern-marquee-container[b-uhss5jkzpd]::before,
    .modern-marquee-container[b-uhss5jkzpd]::after {
        width: 25px;
    }
}
/* Ana kapsayıcı taşmasını engelle */
.mud-container[b-uhss5jkzpd] {
    max-width: 100% !important;
    overflow-x: hidden; /* Yan kaydırma çubuğunu gizler */
}

/* Marquee taşmasını engelle */
.modern-marquee-container[b-uhss5jkzpd] {
    width: 100%;
    overflow: hidden;
    position: relative;
    background: #f8f9fa;
    padding: 20px 0;
}

.marquee-scroll-track[b-uhss5jkzpd] {
    display: flex;
    white-space: nowrap;
    animation: marquee 20s linear infinite;
}

/* Görsellerin kapsayıcı dışına çıkmasını engelle */
.product-img[b-uhss5jkzpd] {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Mobil cihazlarda harita ve formun yan yana değil alt alta gelmesi için */
@media (max-width: 960px) {
    .hero-text-content[b-uhss5jkzpd] {
        padding: 20px !important;
    }

    .industrial-hero-section[b-uhss5jkzpd] {
        height: auto !important;
    }

    .mud-grid[b-uhss5jkzpd] {
        margin: 0 !important;
        width: 100% !important;
    }
}
.section-sub-title[b-uhss5jkzpd] {
    text-align: justify; /* Metni iki yana yaslar */
    text-align-last: center; /* Son satırı ortalar (daha şık durur) */
    line-height: 1.8; /* Satır aralığını açarak okumayı kolaylaştırır */
    color: #444; /* Hafif gri tonu gözü yormaz */
    margin-bottom: 25px; /* Paragraflar arası boşluğu ayarlar */
    white-space: pre-wrap; /* HTML'deki alt satır geçişlerini korur */
    max-width: 1000px; /* Metnin çok genişleyip okunmaz olmasını engeller */
    margin-left: auto;
    margin-right: auto;
}

    /* Paragraf ayrımı için ek boşluk */
    .section-sub-title p[b-uhss5jkzpd] {
        margin-bottom: 20px;
    }

.title-underline[b-uhss5jkzpd] {
    width: 80px;
    height: 3px;
    background-color: #0056b3; /* Kurumsal renginizle değiştirin */
    margin: 20px auto; /* Alt çizgiyi ortalar */
}
/* _content/WEB/Components/Pages/Endustriyel/RoSistemleri.razor.rz.scp.css */
/* =========================================================
   TUSASER - REVERSE OSMOSIS SYSTEMS
   RO-Sistemleri.razor.css
   ========================================================= */

:root[b-aac86sjudq] {
    --ro-primary: #6236a8;
    --ro-primary-light: #8060c5;
    --ro-secondary: #19b8b0;
    --ro-secondary-light: #65d8d1;
    --ro-dark: #182230;
    --ro-text: #334155;
    --ro-muted: #64748b;
    --ro-light: #f6f9fc;
    --ro-border: #e5eaf1;
    --ro-white: #ffffff;
}


/* =========================================================
   GENEL
   ========================================================= */

.ro-page[b-aac86sjudq] {
    overflow: hidden;
    background: #fff;
    color: var(--ro-text);
}

    .ro-page h1[b-aac86sjudq],
    .ro-page h2[b-aac86sjudq],
    .ro-page h3[b-aac86sjudq],
    .ro-page h4[b-aac86sjudq] {
        color: var(--ro-dark);
    }

    .ro-page p[b-aac86sjudq] {
        line-height: 1.75;
    }

    .ro-page .container[b-aac86sjudq] {
        position: relative;
    }


/* =========================================================
   HERO
   ========================================================= */

.ro-hero[b-aac86sjudq] {
    position: relative;
    padding: 90px 0 85px;
    background: radial-gradient(circle at 85% 20%, rgba(25, 184, 176, 0.10), transparent 30%), radial-gradient(circle at 10% 80%, rgba(98, 54, 168, 0.08), transparent 30%), linear-gradient(135deg, #f8fbfd 0%, #ffffff 65%);
}

.ro-kicker[b-aac86sjudq],
.ro-dark-kicker[b-aac86sjudq],
.ro-engineering-kicker[b-aac86sjudq] {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 16px;
    color: var(--ro-secondary);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

    .ro-kicker[b-aac86sjudq]::before,
    .ro-dark-kicker[b-aac86sjudq]::before,
    .ro-engineering-kicker[b-aac86sjudq]::before {
        content: "";
        width: 28px;
        height: 2px;
        background: currentColor;
        display: inline-block;
    }

.ro-title[b-aac86sjudq] {
    max-width: 800px;
    margin-bottom: 22px;
    font-size: clamp(38px, 5vw, 68px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -2px;
}

.ro-lead[b-aac86sjudq] {
    max-width: 760px;
    margin-bottom: 25px;
    color: #64748b;
    font-size: 19px;
    line-height: 1.8;
}

.ro-lead-small[b-aac86sjudq] {
    max-width: 720px;
    margin: 0 auto;
    color: #64748b;
    font-size: 17px;
    line-height: 1.8;
}

.ro-hero-image[b-aac86sjudq] {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 25px 70px rgba(15, 23, 42, 0.12), 0 4px 15px rgba(15, 23, 42, 0.05);
}

    .ro-hero-image[b-aac86sjudq]::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border: 1px solid rgba(255,255,255,.65);
        border-radius: inherit;
    }

    .ro-hero-image img[b-aac86sjudq] {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
    }


/* =========================================================
   PROCESS
   ========================================================= */

.ro-process-card[b-aac86sjudq] {
    position: relative;
    height: 100%;
    padding: 30px 24px;
    background: #fff;
    border: 1px solid var(--ro-border);
    border-radius: 18px;
    text-align: center;
    transition: .3s ease;
}

    .ro-process-card:hover[b-aac86sjudq] {
        transform: translateY(-6px);
        border-color: rgba(25, 184, 176, .35);
        box-shadow: 0 18px 45px rgba(15, 23, 42, .08);
    }

.ro-process-step[b-aac86sjudq] {
    width: 58px;
    height: 58px;
    margin: 0 auto 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ro-primary), var(--ro-primary-light));
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    box-shadow: 0 10px 25px rgba(98, 54, 168, .22);
}

.ro-process-card h3[b-aac86sjudq] {
    margin-bottom: 10px;
    font-size: 19px;
    font-weight: 750;
}

.ro-process-card p[b-aac86sjudq] {
    margin: 0;
    color: var(--ro-muted);
    font-size: 14px;
}

.ro-process-arrow[b-aac86sjudq] {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ro-secondary);
    font-size: 24px;
}


/* =========================================================
   MEMBRANE 4040 / 8040
   ========================================================= */

.ro-membrane-card[b-aac86sjudq] {
    height: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--ro-border);
    border-radius: 24px;
    box-shadow: 0 10px 35px rgba(15, 23, 42, .05);
    transition: .35s ease;
}

    .ro-membrane-card:hover[b-aac86sjudq] {
        transform: translateY(-7px);
        box-shadow: 0 22px 55px rgba(15, 23, 42, .10);
    }

.ro-membrane-image[b-aac86sjudq] {
    min-height: 280px;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8fafc;
}

    .ro-membrane-image img[b-aac86sjudq] {
        width: 100%;
        max-width: 520px;
        height: 280px;
        object-fit: contain;
        transition: transform .4s ease;
    }

.ro-membrane-card:hover .ro-membrane-image img[b-aac86sjudq] {
    transform: scale(1.04);
}

.ro-membrane-card .p-4[b-aac86sjudq] {
    padding: 30px !important;
}

.ro-size[b-aac86sjudq] {
    display: inline-flex;
    align-items: center;
    padding: 7px 13px;
    margin-bottom: 12px;
    border-radius: 30px;
    background: rgba(98, 54, 168, .09);
    color: var(--ro-primary);
    font-size: 13px;
    font-weight: 750;
}

.ro-membrane-card h3[b-aac86sjudq] {
    margin-bottom: 12px;
    font-size: 25px;
    font-weight: 800;
}

.ro-membrane-card p[b-aac86sjudq] {
    color: var(--ro-muted);
    font-size: 15px;
}

.ro-check-list[b-aac86sjudq] {
    padding: 0;
    margin: 20px 0 0;
    list-style: none;
}

    .ro-check-list li[b-aac86sjudq] {
        position: relative;
        padding-left: 29px;
        margin-bottom: 10px;
        color: #475569;
        font-size: 14px;
    }

        .ro-check-list li[b-aac86sjudq]::before {
            content: "\F26E";
            position: absolute;
            left: 0;
            top: 1px;
            font-family: "bootstrap-icons";
            color: var(--ro-secondary);
            font-weight: 700;
        }


/* =========================================================
   RO KATEGORİLERİ
   ========================================================= */

.ro-category-card[b-aac86sjudq] {
    position: relative;
    height: 100%;
    padding: 32px 28px;
    background: #fff;
    border: 1px solid var(--ro-border);
    border-radius: 20px;
    transition: .3s ease;
}

    .ro-category-card[b-aac86sjudq]::before {
        content: "";
        position: absolute;
        top: 0;
        left: 28px;
        right: 28px;
        height: 3px;
        border-radius: 0 0 5px 5px;
        background: linear-gradient(90deg, var(--ro-primary), var(--ro-secondary));
        opacity: 0;
        transition: .3s ease;
    }

    .ro-category-card:hover[b-aac86sjudq] {
        transform: translateY(-6px);
        box-shadow: 0 20px 50px rgba(15, 23, 42, .08);
    }

        .ro-category-card:hover[b-aac86sjudq]::before {
            opacity: 1;
        }

.ro-category-icon[b-aac86sjudq] {
    width: 58px;
    height: 58px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(98,54,168,.11), rgba(25,184,176,.10));
    color: var(--ro-primary);
    font-size: 25px;
}

.ro-category-card h3[b-aac86sjudq] {
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 750;
}

.ro-category-card p[b-aac86sjudq] {
    margin: 0;
    color: var(--ro-muted);
    font-size: 14px;
}


/* =========================================================
   DARK / SEAWATER SECTION
   ========================================================= */

.ro-dark-section[b-aac86sjudq] {
    position: relative;
    overflow: hidden;
    padding: 90px 0;
    background: radial-gradient(circle at 80% 10%, rgba(25,184,176,.14), transparent 32%), radial-gradient(circle at 10% 90%, rgba(98,54,168,.16), transparent 35%), #172231;
    color: #fff;
}

    .ro-dark-section h2[b-aac86sjudq],
    .ro-dark-section h3[b-aac86sjudq] {
        color: #fff;
    }

    .ro-dark-section p[b-aac86sjudq] {
        color: rgba(255,255,255,.72);
    }

.ro-dark-kicker[b-aac86sjudq] {
    color: var(--ro-secondary-light);
}

.ro-dark-section .ro-lead-small[b-aac86sjudq] {
    color: rgba(255,255,255,.70);
}

.ro-mini-stat[b-aac86sjudq] {
    height: 100%;
    padding: 24px;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 16px;
    background: rgba(255,255,255,.045);
    backdrop-filter: blur(10px);
}

    .ro-mini-stat strong[b-aac86sjudq] {
        display: block;
        margin-bottom: 5px;
        color: #fff;
        font-size: 25px;
        font-weight: 800;
    }

    .ro-mini-stat span[b-aac86sjudq] {
        color: rgba(255,255,255,.62);
        font-size: 13px;
    }


/* =========================================================
   FLOW
   ========================================================= */

.ro-flow-wrapper[b-aac86sjudq] {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.ro-flow-item[b-aac86sjudq] {
    min-width: 145px;
    padding: 21px 18px;
    background: #fff;
    border: 1px solid var(--ro-border);
    border-radius: 14px;
    text-align: center;
    box-shadow: 0 8px 25px rgba(15,23,42,.05);
}

    .ro-flow-item strong[b-aac86sjudq] {
        display: block;
        margin-bottom: 5px;
        color: var(--ro-dark);
        font-size: 14px;
    }

    .ro-flow-item span[b-aac86sjudq] {
        color: var(--ro-muted);
        font-size: 12px;
    }

.ro-flow-arrow[b-aac86sjudq] {
    display: flex;
    align-items: center;
    color: var(--ro-secondary);
    font-size: 20px;
}


/* =========================================================
   PRE-TREATMENT
   ========================================================= */

.ro-pre-treatment-list[b-aac86sjudq] {
    padding: 0;
    margin: 0;
    list-style: none;
}

    .ro-pre-treatment-list li[b-aac86sjudq] {
        position: relative;
        padding: 17px 18px 17px 48px;
        margin-bottom: 10px;
        background: #fff;
        border: 1px solid var(--ro-border);
        border-radius: 13px;
        color: #475569;
        font-size: 14px;
        transition: .25s ease;
    }

        .ro-pre-treatment-list li:hover[b-aac86sjudq] {
            transform: translateX(5px);
            border-color: rgba(25,184,176,.35);
            box-shadow: 0 8px 25px rgba(15,23,42,.05);
        }

        .ro-pre-treatment-list li[b-aac86sjudq]::before {
            content: "\F26A";
            position: absolute;
            left: 18px;
            top: 16px;
            font-family: "bootstrap-icons";
            color: var(--ro-secondary);
            font-size: 18px;
        }


/* =========================================================
   APPLICATIONS
   ========================================================= */

.ro-application-card[b-aac86sjudq] {
    height: 100%;
    min-height: 190px;
    padding: 28px;
    border: 1px solid var(--ro-border);
    border-radius: 20px;
    background: #fff;
    transition: .3s ease;
}

    .ro-application-card:hover[b-aac86sjudq] {
        transform: translateY(-6px);
        box-shadow: 0 20px 45px rgba(15,23,42,.08);
    }

    .ro-application-card i[b-aac86sjudq] {
        display: inline-flex;
        width: 52px;
        height: 52px;
        align-items: center;
        justify-content: center;
        margin-bottom: 18px;
        border-radius: 14px;
        background: rgba(25,184,176,.10);
        color: var(--ro-secondary);
        font-size: 23px;
    }

    .ro-application-card h3[b-aac86sjudq] {
        margin-bottom: 9px;
        font-size: 18px;
        font-weight: 750;
    }

    .ro-application-card p[b-aac86sjudq] {
        margin: 0;
        color: var(--ro-muted);
        font-size: 14px;
    }


/* =========================================================
   POST TREATMENT / PURE WATER
   ========================================================= */

.ro-post-card[b-aac86sjudq] {
    height: 100%;
    padding: 30px;
    border-radius: 20px;
    background: linear-gradient(145deg, #f7fafc, #ffffff);
    border: 1px solid var(--ro-border);
}

    .ro-post-card h3[b-aac86sjudq] {
        margin-bottom: 14px;
        font-size: 21px;
        font-weight: 750;
    }

    .ro-post-card p[b-aac86sjudq] {
        color: var(--ro-muted);
        font-size: 14px;
    }

    .ro-post-card ul[b-aac86sjudq] {
        padding-left: 20px;
        margin-bottom: 0;
    }

    .ro-post-card li[b-aac86sjudq] {
        margin-bottom: 9px;
        color: #475569;
        font-size: 14px;
    }


/* =========================================================
   EQUIPMENT
   ========================================================= */

.ro-equipment-card[b-aac86sjudq] {
    height: 100%;
    padding: 28px;
    background: #fff;
    border: 1px solid var(--ro-border);
    border-radius: 18px;
    transition: .3s ease;
}

    .ro-equipment-card:hover[b-aac86sjudq] {
        transform: translateY(-5px);
        box-shadow: 0 18px 40px rgba(15,23,42,.07);
    }

    .ro-equipment-card i[b-aac86sjudq] {
        display: inline-flex;
        width: 52px;
        height: 52px;
        align-items: center;
        justify-content: center;
        margin-bottom: 17px;
        border-radius: 14px;
        background: rgba(98,54,168,.09);
        color: var(--ro-primary);
        font-size: 23px;
    }

    .ro-equipment-card h3[b-aac86sjudq] {
        margin-bottom: 10px;
        font-size: 18px;
        font-weight: 750;
    }

    .ro-equipment-card p[b-aac86sjudq] {
        margin: 0;
        color: var(--ro-muted);
        font-size: 14px;
    }


/* =========================================================
   ENGINEERING
   ========================================================= */

.ro-engineering-section[b-aac86sjudq] {
    position: relative;
    padding: 90px 0;
    background: #f7fafc;
}

.ro-engineering-kicker[b-aac86sjudq] {
    color: var(--ro-primary);
}

.ro-engineering-section h2[b-aac86sjudq] {
    font-weight: 800;
}

.ro-engineering-section p[b-aac86sjudq] {
    color: var(--ro-muted);
}

.engineering-item[b-aac86sjudq] {
    position: relative;
    padding-left: 48px;
    margin-bottom: 24px;
}

    .engineering-item[b-aac86sjudq]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 1px;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: linear-gradient(135deg, var(--ro-primary), var(--ro-secondary));
    }

    .engineering-item[b-aac86sjudq]::after {
        content: "\F26A";
        position: absolute;
        left: 9px;
        top: 7px;
        color: #fff;
        font-family: "bootstrap-icons";
        font-size: 15px;
    }

    .engineering-item h4[b-aac86sjudq] {
        margin-bottom: 6px;
        font-size: 17px;
        font-weight: 750;
    }

    .engineering-item p[b-aac86sjudq] {
        margin: 0;
        font-size: 14px;
    }

.ro-engineering-image[b-aac86sjudq] {
    overflow: hidden;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 20px 55px rgba(15,23,42,.10);
}

    .ro-engineering-image img[b-aac86sjudq] {
        display: block;
        width: 100%;
        height: auto;
        object-fit: contain;
    }


/* =========================================================
   FINAL CTA
   ========================================================= */

.ro-final-cta[b-aac86sjudq] {
    position: relative;
    overflow: hidden;
    padding: 75px 30px;
    border-radius: 28px;
    background: radial-gradient(circle at 85% 20%, rgba(25,184,176,.22), transparent 30%), linear-gradient(135deg, #6236a8, #482487);
    color: #fff;
}

    .ro-final-cta h2[b-aac86sjudq] {
        color: #fff;
        font-size: clamp(30px, 4vw, 46px);
        font-weight: 800;
    }

    .ro-final-cta p[b-aac86sjudq] {
        max-width: 720px;
        margin: 0 auto 25px;
        color: rgba(255,255,255,.78);
    }

    .ro-final-cta .btn[b-aac86sjudq] {
        padding: 13px 27px;
        border-radius: 50px;
        font-weight: 700;
    }


/* =========================================================
   BOOTSTRAP BUTTON OVERRIDE
   ========================================================= */

.ro-page .btn-primary[b-aac86sjudq] {
    background: var(--ro-primary);
    border-color: var(--ro-primary);
}

    .ro-page .btn-primary:hover[b-aac86sjudq] {
        background: #512b8d;
        border-color: #512b8d;
        transform: translateY(-2px);
    }

.ro-page .btn-outline-primary[b-aac86sjudq] {
    color: var(--ro-primary);
    border-color: var(--ro-primary);
}

    .ro-page .btn-outline-primary:hover[b-aac86sjudq] {
        background: var(--ro-primary);
        border-color: var(--ro-primary);
        color: #fff;
    }


/* =========================================================
   SECTION SPACING
   ========================================================= */

.ro-page section[b-aac86sjudq] {
    position: relative;
}

    .ro-page section.py-5[b-aac86sjudq] {
        padding-top: 90px !important;
        padding-bottom: 90px !important;
    }

.ro-page .text-center.mb-5[b-aac86sjudq] {
    margin-bottom: 50px !important;
}


/* =========================================================
   RESPONSIVE - TABLET
   ========================================================= */

@media (max-width: 991.98px) {

    .ro-hero[b-aac86sjudq] {
        padding: 65px 0;
    }

    .ro-title[b-aac86sjudq] {
        font-size: 48px;
    }

    .ro-process-arrow[b-aac86sjudq] {
        display: none;
    }

    .ro-membrane-image[b-aac86sjudq] {
        min-height: 240px;
    }

        .ro-membrane-image img[b-aac86sjudq] {
            height: 230px;
        }

    .ro-flow-item[b-aac86sjudq] {
        min-width: 130px;
    }

    .ro-flow-arrow[b-aac86sjudq] {
        display: none;
    }

    .ro-dark-section[b-aac86sjudq],
    .ro-engineering-section[b-aac86sjudq] {
        padding: 70px 0;
    }
}


/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media (max-width: 767.98px) {

    .ro-hero[b-aac86sjudq] {
        padding: 50px 0 55px;
    }

    .ro-title[b-aac86sjudq] {
        font-size: 38px;
        letter-spacing: -1px;
    }

    .ro-lead[b-aac86sjudq] {
        font-size: 16px;
    }

    .ro-lead-small[b-aac86sjudq] {
        font-size: 15px;
    }

    .ro-page section.py-5[b-aac86sjudq] {
        padding-top: 60px !important;
        padding-bottom: 60px !important;
    }

    .ro-process-card[b-aac86sjudq] {
        padding: 25px 20px;
    }

    .ro-membrane-image[b-aac86sjudq] {
        min-height: 210px;
        padding: 20px;
    }

        .ro-membrane-image img[b-aac86sjudq] {
            height: 200px;
        }

    .ro-membrane-card .p-4[b-aac86sjudq] {
        padding: 24px !important;
    }

    .ro-category-card[b-aac86sjudq],
    .ro-application-card[b-aac86sjudq],
    .ro-equipment-card[b-aac86sjudq],
    .ro-post-card[b-aac86sjudq] {
        padding: 24px;
    }

    .ro-dark-section[b-aac86sjudq],
    .ro-engineering-section[b-aac86sjudq] {
        padding: 60px 0;
    }

    .ro-flow-wrapper[b-aac86sjudq] {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .ro-flow-item[b-aac86sjudq] {
        min-width: 0;
    }

    .ro-final-cta[b-aac86sjudq] {
        padding: 55px 22px;
        border-radius: 20px;
    }

        .ro-final-cta h2[b-aac86sjudq] {
            font-size: 31px;
        }

    .engineering-item[b-aac86sjudq] {
        padding-left: 43px;
    }
}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 480px) {

    .ro-title[b-aac86sjudq] {
        font-size: 32px;
    }

    .ro-flow-wrapper[b-aac86sjudq] {
        grid-template-columns: 1fr;
    }

    .ro-flow-item[b-aac86sjudq] {
        width: 100%;
    }

    .ro-mini-stat[b-aac86sjudq] {
        padding: 20px;
    }

    .ro-hero-image[b-aac86sjudq] {
        border-radius: 18px;
    }

    .ro-membrane-card[b-aac86sjudq] {
        border-radius: 18px;
    }
}

/* =========================================================
   TEXT ALIGNMENT
   ========================================================= */

.ro-page p[b-aac86sjudq],
.ro-page li[b-aac86sjudq] {
    text-align: justify;
}
/* =========================================================
   SOFT COLOR CARDS
   ========================================================= */

.ro-page .ro-process-card[b-aac86sjudq],
.ro-page .ro-membrane-card[b-aac86sjudq],
.ro-page .ro-category-card[b-aac86sjudq],
.ro-page .ro-application-card[b-aac86sjudq],
.ro-page .ro-post-card[b-aac86sjudq],
.ro-page .ro-equipment-card[b-aac86sjudq] {
    background: linear-gradient( 145deg, rgba(98, 54, 168, 0.055), rgba(25, 184, 176, 0.07) );
    border: 2px solid rgba(98, 54, 168, 0.20);
    border-radius: 22px;
    box-shadow: 0 8px 24px rgba(98, 54, 168, 0.08), 0 2px 8px rgba(25, 184, 176, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}

    /* Mouse üzerine gelince */
    .ro-page .ro-process-card:hover[b-aac86sjudq],
    .ro-page .ro-membrane-card:hover[b-aac86sjudq],
    .ro-page .ro-category-card:hover[b-aac86sjudq],
    .ro-page .ro-application-card:hover[b-aac86sjudq],
    .ro-page .ro-post-card:hover[b-aac86sjudq],
    .ro-page .ro-equipment-card:hover[b-aac86sjudq] {
        background: linear-gradient( 145deg, rgba(98, 54, 168, 0.10), rgba(25, 184, 176, 0.12) );
        border-color: rgba(98, 54, 168, 0.38);
        box-shadow: 0 16px 35px rgba(98, 54, 168, 0.13), 0 5px 14px rgba(25, 184, 176, 0.08);
        transform: translateY(-5px);
    }
/* =========================================================
   RO MEMBRANE WORKING ANIMATION
   ========================================================= */

.ro-how-section[b-aac86sjudq] {
    overflow: hidden;
}


/* ANA KUTU */

.ro-membrane-animation[b-aac86sjudq] {
    position: relative;
    background: linear-gradient( 145deg, #f7fbff 0%, #eef7fb 100% );
    border: 2px solid rgba(98, 54, 168, 0.18);
    border-radius: 28px;
    padding: 28px;
    box-shadow: 0 15px 40px rgba(44, 62, 80, 0.08), 0 5px 15px rgba(25, 184, 176, 0.05);
}


/* ÜST BAŞLIK */

.ro-animation-title[b-aac86sjudq] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-bottom: 22px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #6236a8;
}

    .ro-animation-title i[b-aac86sjudq] {
        color: #19b8b0;
        font-size: 18px;
    }


/* ANİMASYON SAHNESİ */

.ro-animation-stage[b-aac86sjudq] {
    position: relative;
    height: 330px;
    border-radius: 20px;
    background: linear-gradient( 90deg, rgba(25, 184, 176, 0.08), rgba(255, 255, 255, 0.75), rgba(98, 54, 168, 0.07) );
    overflow: hidden;
}


/* SOL HAM SU ALANI */

.ro-feed-water[b-aac86sjudq] {
    position: absolute;
    left: 25px;
    top: 30px;
    width: 150px;
    height: 220px;
    border-radius: 18px;
    background: linear-gradient( 180deg, rgba(25, 184, 176, 0.16), rgba(25, 184, 176, 0.04) );
    border: 1px solid rgba(25, 184, 176, 0.15);
}


/* MOLEKÜLLER */

.ro-molecule[b-aac86sjudq] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    background: rgba(25, 184, 176, 0.14);
    border: 1px solid rgba(25, 184, 176, 0.35);
    color: #078f89;
    box-shadow: 0 4px 10px rgba(25, 184, 176, 0.10);
}


/* HAM SU H2O HAREKETLERİ */

.water-1[b-aac86sjudq] {
    top: 45px;
    left: 20px;
    animation: waterToMembrane-b-aac86sjudq 4s infinite ease-in;
}

.water-2[b-aac86sjudq] {
    top: 110px;
    left: 55px;
    animation: waterToMembrane-b-aac86sjudq 4s infinite ease-in;
    animation-delay: 1.2s;
}

.water-3[b-aac86sjudq] {
    top: 175px;
    left: 25px;
    animation: waterToMembrane-b-aac86sjudq 4s infinite ease-in;
    animation-delay: 2.2s;
}


/* İYONLAR */

.ro-ion[b-aac86sjudq] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 30px;
    padding: 0 7px;
    border-radius: 15px;
    font-size: 9px;
    font-weight: 700;
    background: rgba(98, 54, 168, 0.12);
    border: 1px solid rgba(98, 54, 168, 0.30);
    color: #6236a8;
}


/* İYON HAREKETLERİ */

.ion-1[b-aac86sjudq] {
    top: 35px;
    left: 90px;
    animation: ionBlocked-b-aac86sjudq 4s infinite ease-out;
}

.ion-2[b-aac86sjudq] {
    top: 90px;
    left: 35px;
    animation: ionBlocked-b-aac86sjudq 4s infinite ease-out;
    animation-delay: 0.8s;
}

.ion-3[b-aac86sjudq] {
    top: 145px;
    left: 90px;
    animation: ionBlocked-b-aac86sjudq 4s infinite ease-out;
    animation-delay: 1.6s;
}

.ion-4[b-aac86sjudq] {
    top: 195px;
    left: 45px;
    animation: ionBlocked-b-aac86sjudq 4s infinite ease-out;
    animation-delay: 2.4s;
}


/* MEMBRAN */

.ro-membrane[b-aac86sjudq] {
    position: absolute;
    left: 50%;
    top: 30px;
    transform: translateX(-50%);
    width: 90px;
    height: 220px;
    border-radius: 12px;
    background: linear-gradient( 90deg, rgba(98, 54, 168, 0.13), rgba(255, 255, 255, 0.75), rgba(98, 54, 168, 0.13) );
    border: 3px solid rgba(98, 54, 168, 0.30);
    box-shadow: inset 0 0 25px rgba(98, 54, 168, 0.08), 0 8px 25px rgba(98, 54, 168, 0.10);
    z-index: 5;
}


/* MEMBRAN GÖZENEKLERİ */

.ro-membrane-line[b-aac86sjudq] {
    position: absolute;
    left: 20px;
    width: 46px;
    height: 2px;
    background: rgba(98, 54, 168, 0.22);
    border-radius: 5px;
}

    .ro-membrane-line:nth-child(1)[b-aac86sjudq] {
        top: 35px;
    }

    .ro-membrane-line:nth-child(2)[b-aac86sjudq] {
        top: 65px;
    }

    .ro-membrane-line:nth-child(3)[b-aac86sjudq] {
        top: 95px;
    }

    .ro-membrane-line:nth-child(4)[b-aac86sjudq] {
        top: 125px;
    }

    .ro-membrane-line:nth-child(5)[b-aac86sjudq] {
        top: 155px;
    }

    .ro-membrane-line:nth-child(6)[b-aac86sjudq] {
        top: 185px;
    }


/* MEMBRAN YAZISI */

.ro-membrane-label[b-aac86sjudq] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    text-align: center;
    font-size: 8px;
    line-height: 1.5;
    font-weight: 800;
    color: #6236a8;
    letter-spacing: 0.5px;
}


/* PERMEAT */

.ro-permeate[b-aac86sjudq] {
    position: absolute;
    right: 20px;
    top: 30px;
    width: 145px;
    height: 220px;
    border-radius: 18px;
    background: linear-gradient( 180deg, rgba(25, 184, 176, 0.10), rgba(25, 184, 176, 0.025) );
    border: 1px solid rgba(25, 184, 176, 0.15);
}


/* PERMEAT H2O */

.permeate-water-1[b-aac86sjudq] {
    top: 45px;
    left: 25px;
    animation: permeateFlow-b-aac86sjudq 4s infinite ease-out;
}

.permeate-water-2[b-aac86sjudq] {
    top: 110px;
    left: 55px;
    animation: permeateFlow-b-aac86sjudq 4s infinite ease-out;
    animation-delay: 1.2s;
}

.permeate-water-3[b-aac86sjudq] {
    top: 175px;
    left: 25px;
    animation: permeateFlow-b-aac86sjudq 4s infinite ease-out;
    animation-delay: 2.2s;
}


/* PERMEAT ETİKET */

.ro-permeate-label[b-aac86sjudq] {
    position: absolute;
    bottom: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    font-size: 11px;
    font-weight: 800;
    color: #078f89;
}

    .ro-permeate-label i[b-aac86sjudq] {
        font-size: 14px;
    }


/* KONSANTRE */

.ro-concentrate[b-aac86sjudq] {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 190px;
    height: 75px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient( 180deg, rgba(98, 54, 168, 0.09), rgba(98, 54, 168, 0.02) );
    border: 1px solid rgba(98, 54, 168, 0.15);
}


/* KONSANTRE PARÇACIKLARI */

.ro-concentrate-particles[b-aac86sjudq] {
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
}

.concentrate-ion[b-aac86sjudq] {
    font-size: 7px;
    font-weight: 700;
    padding: 4px 6px;
    border-radius: 8px;
    color: #6236a8;
    background: rgba(98, 54, 168, 0.10);
}


/* DRENAJ ÇİZGİSİ */

.ro-drain-line[b-aac86sjudq] {
    position: absolute;
    left: 50%;
    top: 38px;
    width: 2px;
    height: 20px;
    transform: translateX(-50%);
    background: rgba(98, 54, 168, 0.35);
    animation: drainPulse-b-aac86sjudq 2s infinite ease-in-out;
}


/* DRENAJ YAZISI */

.ro-drain-label[b-aac86sjudq] {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 8px;
    font-weight: 800;
    color: #6236a8;
}


/* ALT BİLGİ */

.ro-animation-bottom[b-aac86sjudq] {
    display: flex;
    justify-content: center;
    gap: 45px;
    margin-top: 22px;
}


.ro-animation-result[b-aac86sjudq] {
    display: flex;
    align-items: center;
    gap: 10px;
}


    .ro-animation-result strong[b-aac86sjudq] {
        display: block;
        font-size: 12px;
        color: #334155;
    }


    .ro-animation-result small[b-aac86sjudq] {
        display: block;
        font-size: 10px;
        color: #64748b;
    }


.result-dot[b-aac86sjudq] {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: block;
}


.water-dot[b-aac86sjudq] {
    background: #19b8b0;
    box-shadow: 0 0 0 5px rgba(25, 184, 176, 0.10);
}


.ion-dot[b-aac86sjudq] {
    background: #6236a8;
    box-shadow: 0 0 0 5px rgba(98, 54, 168, 0.10);
}


/* =========================================================
   ANIMATIONS
   ========================================================= */


/* SU MEMBRANA DOĞRU */

@keyframes waterToMembrane-b-aac86sjudq {

    0% {
        transform: translateX(0);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    70% {
        transform: translateX(115px);
        opacity: 1;
    }

    100% {
        transform: translateX(155px);
        opacity: 0;
    }
}


/* İYON MEMBRANA GELİR VE GERİ DÖNER */

@keyframes ionBlocked-b-aac86sjudq {

    0% {
        transform: translateX(0);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    50% {
        transform: translateX(105px);
        opacity: 1;
    }

    58% {
        transform: translateX(80px);
    }

    75% {
        transform: translateX(35px);
        opacity: 0.8;
    }

    100% {
        transform: translateX(0);
        opacity: 0;
    }
}


/* SU MEMBRANDAN GEÇER */

@keyframes permeateFlow-b-aac86sjudq {

    0% {
        transform: translateX(-45px);
        opacity: 0;
    }

    45% {
        opacity: 0;
    }

    55% {
        opacity: 1;
    }

    100% {
        transform: translateX(55px);
        opacity: 0;
    }
}


/* DRENAJ */

@keyframes drainPulse-b-aac86sjudq {

    0%, 100% {
        opacity: 0.35;
    }

    50% {
        opacity: 1;
    }
}


/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 991px) {

    .ro-membrane-animation[b-aac86sjudq] {
        padding: 18px;
    }

    .ro-animation-stage[b-aac86sjudq] {
        height: 300px;
    }

    .ro-feed-water[b-aac86sjudq] {
        left: 10px;
        width: 125px;
    }

    .ro-permeate[b-aac86sjudq] {
        right: 10px;
        width: 125px;
    }

    .ro-membrane[b-aac86sjudq] {
        width: 75px;
    }

    .ro-membrane-line[b-aac86sjudq] {
        left: 14px;
        width: 42px;
    }

    .ro-animation-bottom[b-aac86sjudq] {
        gap: 20px;
    }
}


@media (max-width: 576px) {

    .ro-animation-stage[b-aac86sjudq] {
        transform: scale(0.90);
        transform-origin: center;
        width: 111%;
        margin-left: -5.5%;
    }

    .ro-animation-bottom[b-aac86sjudq] {
        flex-direction: column;
        gap: 12px;
    }
}

/* =========================================================
   RO CROSS FLOW ANIMATION
   ========================================================= */

.ro-how-section[b-aac86sjudq] {
    overflow: hidden;
}


/* ANA KUTU */

.ro-crossflow-box[b-aac86sjudq] {
    padding: 25px;
    border-radius: 28px;
    background: linear-gradient( 145deg, #f9fcff, #eef8f9 );
    border: 2px solid rgba(98,54,168,.16);
    box-shadow: 0 18px 45px rgba(40,60,80,.09), 0 5px 18px rgba(25,184,176,.06);
}


/* BAŞLIK */

.ro-crossflow-header[b-aac86sjudq] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

    .ro-crossflow-header span[b-aac86sjudq] {
        display: block;
        color: #19a8a2;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: 1.4px;
    }

    .ro-crossflow-header strong[b-aac86sjudq] {
        display: block;
        margin-top: 3px;
        color: #334155;
        font-size: 15px;
    }

.ro-crossflow-pressure[b-aac86sjudq] {
    padding: 7px 13px;
    border-radius: 20px;
    background: rgba(98,54,168,.08);
    border: 1px solid rgba(98,54,168,.15);
    color: #6236a8;
    font-size: 9px;
    font-weight: 800;
}


/* =========================================================
   SAHNE
   ========================================================= */

.ro-crossflow-stage[b-aac86sjudq] {
    position: relative;
    height: 410px;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient( 180deg, #f8fcfd, #edf7f8 );
    border: 1px solid rgba(98,54,168,.08);
}


/* =========================================================
   HAM SU
   ========================================================= */

.ro-feed-label[b-aac86sjudq] {
    position: absolute;
    left: 18px;
    top: 103px;
    color: #19a8a2;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .8px;
}

.ro-feed-arrow[b-aac86sjudq] {
    position: absolute;
    left: 70px;
    top: 115px;
    color: #19b8b0;
    font-size: 32px;
    font-weight: 800;
    animation: feedArrow-b-aac86sjudq 1.3s infinite;
}


/* =========================================================
   BESLEME AKIŞ ALANI
   ========================================================= */

.ro-feed-stream[b-aac86sjudq] {
    position: absolute;
    left: 70px;
    right: 75px;
    top: 95px;
    height: 110px;
    border-radius: 55px;
    background: linear-gradient( 180deg, rgba(25,184,176,.05), rgba(25,184,176,.12), rgba(25,184,176,.05) );
    border-top: 1px solid rgba(25,184,176,.16);
    border-bottom: 1px solid rgba(25,184,176,.16);
}


/* =========================================================
   H2O BESLEME MOLEKÜLLERİ
   ========================================================= */

.water-particle[b-aac86sjudq] {
    position: absolute;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient( circle at 35% 30%, #fff, #bcefeb );
    border: 2px solid rgba(25,184,176,.5);
    color: #078f89;
    font-size: 8px;
    font-weight: 800;
    box-shadow: 0 4px 10px rgba(25,184,176,.15);
}


.feed-water-1[b-aac86sjudq] {
    top: 18px;
    left: 0;
    animation: feedMove-b-aac86sjudq 4s infinite linear;
}

.feed-water-2[b-aac86sjudq] {
    top: 55px;
    left: 45px;
    animation: feedMove-b-aac86sjudq 4s infinite linear;
    animation-delay: .8s;
}

.feed-water-3[b-aac86sjudq] {
    top: 18px;
    left: 100px;
    animation: feedMove-b-aac86sjudq 4s infinite linear;
    animation-delay: 1.5s;
}

.feed-water-4[b-aac86sjudq] {
    top: 60px;
    left: 170px;
    animation: feedMove-b-aac86sjudq 4s infinite linear;
    animation-delay: 2.2s;
}

.feed-water-5[b-aac86sjudq] {
    top: 20px;
    left: 250px;
    animation: feedMove-b-aac86sjudq 4s infinite linear;
    animation-delay: 2.9s;
}


/* =========================================================
   İYONLAR
   ========================================================= */

.ro-feed-ions[b-aac86sjudq] {
    position: absolute;
    left: 130px;
    right: 110px;
    top: 120px;
    height: 80px;
    z-index: 10;
}

.ion-particle[b-aac86sjudq] {
    position: absolute;
    min-width: 40px;
    height: 25px;
    padding: 0 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    color: #6236a8;
    background: rgba(98,54,168,.10);
    border: 1px solid rgba(98,54,168,.28);
    font-size: 8px;
    font-weight: 800;
}


.feed-ion-1[b-aac86sjudq] {
    left: 30px;
    top: 5px;
    animation: ionFeed-b-aac86sjudq 4s infinite linear;
}

.feed-ion-2[b-aac86sjudq] {
    left: 95px;
    top: 40px;
    animation: ionFeed-b-aac86sjudq 4s infinite linear;
    animation-delay: .7s;
}

.feed-ion-3[b-aac86sjudq] {
    left: 165px;
    top: 5px;
    animation: ionFeed-b-aac86sjudq 4s infinite linear;
    animation-delay: 1.4s;
}

.feed-ion-4[b-aac86sjudq] {
    left: 230px;
    top: 42px;
    animation: ionFeed-b-aac86sjudq 4s infinite linear;
    animation-delay: 2.1s;
}

.feed-ion-5[b-aac86sjudq] {
    left: 300px;
    top: 8px;
    animation: ionFeed-b-aac86sjudq 4s infinite linear;
    animation-delay: 2.8s;
}


/* =========================================================
   MEMBRAN
   ========================================================= */

.ro-membrane-layer[b-aac86sjudq] {
    position: absolute;
    left: 75px;
    right: 75px;
    top: 210px;
    height: 24px;
    z-index: 20;
    border-radius: 5px;
    background: linear-gradient( 180deg, #8a72b7, #6236a8, #8061b6 );
    border: 2px solid rgba(72,40,120,.5);
    box-shadow: 0 4px 10px rgba(98,54,168,.20);
}


/* MEMBRAN GÖZENEKLERİ */

.ro-membrane-pores[b-aac86sjudq] {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 4px;
    display: flex;
    justify-content: space-around;
}

    .ro-membrane-pores span[b-aac86sjudq] {
        width: 4px;
        height: 14px;
        border-radius: 4px;
        background: rgba(255,255,255,.55);
    }


/* MEMBRAN YAZISI */

.ro-membrane-text[b-aac86sjudq] {
    position: absolute;
    left: 50%;
    top: -22px;
    transform: translateX(-50%);
    white-space: nowrap;
    color: #6236a8;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .7px;
}


/* =========================================================
   PERMEAT AKIŞI
   ========================================================= */

.ro-permeate-flow[b-aac86sjudq] {
    position: absolute;
    left: 75px;
    right: 75px;
    top: 238px;
    height: 100px;
    z-index: 15;
}


/* PERMEAT MOLEKÜLLERİ */

.permeate-particle[b-aac86sjudq] {
    position: absolute;
    width: 27px;
    height: 27px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #078f89;
    background: radial-gradient( circle at 35% 30%, #fff, #b8efeb );
    border: 2px solid rgba(25,184,176,.55);
    font-size: 7px;
    font-weight: 800;
}


.p1[b-aac86sjudq] {
    left: 70px;
    top: 0;
    animation: permeateDown-b-aac86sjudq 3.5s infinite ease-out;
}

.p2[b-aac86sjudq] {
    left: 150px;
    top: 0;
    animation: permeateDown-b-aac86sjudq 3.5s infinite ease-out;
    animation-delay: .6s;
}

.p3[b-aac86sjudq] {
    left: 230px;
    top: 0;
    animation: permeateDown-b-aac86sjudq 3.5s infinite ease-out;
    animation-delay: 1.2s;
}

.p4[b-aac86sjudq] {
    left: 310px;
    top: 0;
    animation: permeateDown-b-aac86sjudq 3.5s infinite ease-out;
    animation-delay: 1.8s;
}

.p5[b-aac86sjudq] {
    left: 390px;
    top: 0;
    animation: permeateDown-b-aac86sjudq 3.5s infinite ease-out;
    animation-delay: 2.4s;
}

.p6[b-aac86sjudq] {
    left: 470px;
    top: 0;
    animation: permeateDown-b-aac86sjudq 3.5s infinite ease-out;
    animation-delay: 3s;
}


/* =========================================================
   PERMEAT KANALI
   ========================================================= */

.ro-permeate-channel[b-aac86sjudq] {
    position: absolute;
    left: 75px;
    right: 75px;
    bottom: 18px;
    height: 62px;
    border-radius: 12px;
    background: linear-gradient( 180deg, rgba(25,184,176,.08), rgba(25,184,176,.16) );
    border: 1px solid rgba(25,184,176,.16);
}

.ro-permeate-flow-line[b-aac86sjudq] {
    position: absolute;
    left: 25px;
    right: 25px;
    top: 18px;
    height: 3px;
    background: repeating-linear-gradient( 90deg, rgba(25,184,176,.5) 0 10px, transparent 10px 18px );
    animation: flowLine-b-aac86sjudq 1.2s linear infinite;
}

.ro-permeate-label[b-aac86sjudq] {
    position: absolute;
    right: 18px;
    bottom: 7px;
    text-align: right;
}

    .ro-permeate-label strong[b-aac86sjudq] {
        display: block;
        color: #078f89;
        font-size: 9px;
    }

    .ro-permeate-label small[b-aac86sjudq] {
        color: #64748b;
        font-size: 8px;
    }


/* =========================================================
   KONSANTRE
   ========================================================= */

.ro-concentrate-flow[b-aac86sjudq] {
    position: absolute;
    right: 0;
    top: 115px;
    height: 95px;
    display: flex;
    align-items: center;
    z-index: 30;
}

.concentrate-arrow[b-aac86sjudq] {
    color: #6236a8;
    font-size: 32px;
    font-weight: 800;
    animation: concentrateArrow-b-aac86sjudq 1.2s infinite;
}

.concentrate-label[b-aac86sjudq] {
    margin-left: 5px;
}

    .concentrate-label strong[b-aac86sjudq] {
        display: block;
        color: #6236a8;
        font-size: 9px;
    }

    .concentrate-label small[b-aac86sjudq] {
        color: #64748b;
        font-size: 8px;
    }


/* =========================================================
   İYONLARIN KONSANTREYE DEVAMI
   ========================================================= */

.ro-rejected-ions[b-aac86sjudq] {
    position: absolute;
    left: 170px;
    right: 120px;
    top: 150px;
    height: 55px;
    z-index: 25;
}

.rejected-ion[b-aac86sjudq] {
    position: absolute;
    min-width: 36px;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 13px;
    color: #6236a8;
    background: rgba(98,54,168,.10);
    border: 1px solid rgba(98,54,168,.28);
    font-size: 7px;
    font-weight: 800;
}

.r1[b-aac86sjudq] {
    left: 0;
    animation: rejectedFlow-b-aac86sjudq 4s infinite linear;
}

.r2[b-aac86sjudq] {
    left: 90px;
    animation: rejectedFlow-b-aac86sjudq 4s infinite linear;
    animation-delay: .8s;
}

.r3[b-aac86sjudq] {
    left: 180px;
    animation: rejectedFlow-b-aac86sjudq 4s infinite linear;
    animation-delay: 1.6s;
}

.r4[b-aac86sjudq] {
    left: 270px;
    animation: rejectedFlow-b-aac86sjudq 4s infinite linear;
    animation-delay: 2.4s;
}


/* =========================================================
   AKIŞ OKLARI
   ========================================================= */

.ro-flow-direction[b-aac86sjudq] {
    position: absolute;
    color: rgba(25,184,176,.45);
    font-size: 26px;
    font-weight: 800;
    z-index: 18;
    animation: flowArrow-b-aac86sjudq 1.3s infinite;
}

.fd1[b-aac86sjudq] {
    left: 240px;
    top: 125px;
}

.fd2[b-aac86sjudq] {
    left: 390px;
    top: 125px;
    animation-delay: .4s;
}

.fd3[b-aac86sjudq] {
    left: 540px;
    top: 125px;
    animation-delay: .8s;
}


/* =========================================================
   H2O GEÇİŞ OKU
   ========================================================= */

.ro-permeation-arrow[b-aac86sjudq] {
    position: absolute;
    left: 50%;
    top: 248px;
    transform: translateX(-50%);
    color: #19b8b0;
    font-size: 28px;
    font-weight: 800;
    animation: permeationArrow-b-aac86sjudq 1.2s infinite;
}

.ro-permeation-text[b-aac86sjudq] {
    position: absolute;
    left: 50%;
    top: 275px;
    transform: translateX(-50%);
    color: #078f89;
    font-size: 8px;
    font-weight: 700;
    white-space: nowrap;
}


/* =========================================================
   FOOTER
   ========================================================= */

.ro-crossflow-footer[b-aac86sjudq] {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin-top: 18px;
    color: #64748b;
    font-size: 9px;
}

    .ro-crossflow-footer > div[b-aac86sjudq] {
        display: flex;
        align-items: center;
        gap: 7px;
    }

.legend-water[b-aac86sjudq],
.legend-ion[b-aac86sjudq],
.legend-concentrate[b-aac86sjudq] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.legend-water[b-aac86sjudq] {
    background: #19b8b0;
}

.legend-ion[b-aac86sjudq] {
    background: #6236a8;
}

.legend-concentrate[b-aac86sjudq] {
    background: #64748b;
}


/* =========================================================
   SOL TARAF
   ========================================================= */

.ro-principle-list[b-aac86sjudq] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 25px;
}

.ro-principle-item[b-aac86sjudq] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .ro-principle-item > span[b-aac86sjudq] {
        width: 11px;
        height: 11px;
        border-radius: 50%;
    }

.ro-water-point[b-aac86sjudq] {
    background: #19b8b0;
    box-shadow: 0 0 0 5px rgba(25,184,176,.10);
}

.ro-ion-point[b-aac86sjudq] {
    background: #6236a8;
    box-shadow: 0 0 0 5px rgba(98,54,168,.10);
}

.ro-principle-item strong[b-aac86sjudq] {
    display: block;
    color: #334155;
    font-size: 12px;
}

.ro-principle-item small[b-aac86sjudq] {
    display: block;
    margin-top: 2px;
    color: #64748b;
    font-size: 10px;
}


/* =========================================================
   ANİMASYONLAR
   ========================================================= */

@keyframes feedArrow-b-aac86sjudq {

    0%, 100% {
        transform: translateX(0);
        opacity: .4;
    }

    50% {
        transform: translateX(8px);
        opacity: 1;
    }
}


@keyframes feedMove-b-aac86sjudq {

    0% {
        transform: translateX(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    70% {
        transform: translateX(380px);
        opacity: 1;
    }

    100% {
        transform: translateX(500px);
        opacity: 0;
    }
}


@keyframes ionFeed-b-aac86sjudq {

    0% {
        transform: translateX(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    65% {
        transform: translateX(300px);
        opacity: 1;
    }

    100% {
        transform: translateX(430px);
        opacity: 0;
    }
}


@keyframes permeateDown-b-aac86sjudq {

    0% {
        transform: translateY(-20px);
        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    70% {
        transform: translateY(65px);
        opacity: 1;
    }

    100% {
        transform: translateY(95px);
        opacity: 0;
    }
}


@keyframes rejectedFlow-b-aac86sjudq {

    0% {
        transform: translateX(0);
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    75% {
        transform: translateX(250px);
        opacity: 1;
    }

    100% {
        transform: translateX(360px);
        opacity: 0;
    }
}


@keyframes concentrateArrow-b-aac86sjudq {

    0%, 100% {
        transform: translateX(0);
        opacity: .45;
    }

    50% {
        transform: translateX(8px);
        opacity: 1;
    }
}


@keyframes flowArrow-b-aac86sjudq {

    0%, 100% {
        transform: translateX(0);
        opacity: .35;
    }

    50% {
        transform: translateX(8px);
        opacity: 1;
    }
}


@keyframes permeationArrow-b-aac86sjudq {

    0%, 100% {
        transform: translate(-50%,0);
        opacity: .4;
    }

    50% {
        transform: translate(-50%,7px);
        opacity: 1;
    }
}


@keyframes flowLine-b-aac86sjudq {

    from {
        background-position: 0 0;
    }

    to {
        background-position: 35px 0;
    }
}


/* =========================================================
    VİDEO
   ========================================================= */

.ro-video-wrapper[b-aac86sjudq] {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    background: #000;
    border-radius: 20px;
    overflow: hidden;
}

    .ro-video-wrapper video[b-aac86sjudq] {
        width: 100%;
        height: auto;
        display: block;
    }

/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 991px) {

    .ro-crossflow-stage[b-aac86sjudq] {
        height: 390px;
    }

    .ro-crossflow-footer[b-aac86sjudq] {
        gap: 12px;
    }
}


@media (max-width: 576px) {

    .ro-crossflow-box[b-aac86sjudq] {
        padding: 16px;
    }

    .ro-crossflow-stage[b-aac86sjudq] {
        transform: scale(.82);
        transform-origin: center top;
        width: 122%;
        margin-left: -11%;
        margin-bottom: -65px;
    }

    .ro-crossflow-footer[b-aac86sjudq] {
        flex-direction: column;
        align-items: center;
    }
}
/* _content/WEB/Components/Pages/Endustriyel/Sistemler.razor.rz.scp.css */
/* Ana Sayfa Yerleşimi */
.kurumsal-page-container[b-l1pu41vowz] {
    display: flex;
    min-height: calc(100vh - 70vh);
    background-color: #f8f9fa;
}

/* Sol Menü Tasarımı */
.kurumsal-sidebar[b-l1pu41vowz] {
    width: 320px;
    background-color: #ffffff;
    border-right: 1px solid #dee2e6;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    flex-shrink: 0;
}

.sidebar-header[b-l1pu41vowz] {
    padding: 1.5rem 1rem 1rem 1.5rem;
    border-bottom: 1px solid #f1f3f5;
}

    .sidebar-header h3[b-l1pu41vowz] {
        font-size: 1.25rem;
        font-weight: 700;
        color: #212529;
        margin-bottom: 0.2rem;
    }

    .sidebar-header p[b-l1pu41vowz] {
        font-size: 0.85rem;
        color: #6c757d;
        margin: 0;
    }

/* Menü Grupları ve Başlıklar */
.system-menu-group[b-l1pu41vowz] {
    border-bottom: 1px solid #f8f9fa;
}

.system-menu-title[b-l1pu41vowz] {
    width: 100%;
    background: transparent;
    border: none;
    padding: 0.85rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.95rem;
    font-weight: 600;
    color: #495057;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

    .system-menu-title:hover[b-l1pu41vowz] {
        background-color: #f1f3f5;
        color: #0d6efd;
    }

    .system-menu-title.open[b-l1pu41vowz] {
        color: #0d6efd;
        background-color: #e7f1ff;
    }

    /* Ok İkonu Dönüş Efekti */
    .system-menu-title .chevron[b-l1pu41vowz] {
        transition: transform 0.25s ease;
        font-size: 0.8rem;
    }

    .system-menu-title.open .chevron[b-l1pu41vowz] {
        transform: rotate(180deg);
    }

/* Alt Menüler (Submenu) */
.system-submenu[b-l1pu41vowz] {
    display: flex;
    flex-direction: column;
    background-color: #fafbfc;
    padding: 0.25rem 0 0.5rem 0;
}

.system-submenu-item[b-l1pu41vowz] {
    padding: 0.55rem 1rem 0.55rem 3.2rem;
    font-size: 0.88rem;
    color: #6c757d;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.2s;
}

    .system-submenu-item:hover[b-l1pu41vowz] {
        color: #0d6efd;
        background-color: #f1f3f5;
    }

    .system-submenu-item.active[b-l1pu41vowz] {
        color: #0d6efd;
        font-weight: 600;
        background-color: #e7f1ff;
        border-left-color: #0d6efd;
    }

/* Sağ İçerik Alanı */
.kurumsal-content-area[b-l1pu41vowz] {
    flex-grow: 1;
    padding: 2.5rem;
    overflow-y: auto;
}

.kurumsal-card[b-l1pu41vowz] {
    background: #ffffff;
    border: 1px solid #e9ecef;
    border-radius: 8px;
    padding: 2rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

    .kurumsal-card h2[b-l1pu41vowz] {
        font-size: 1.5rem;
        font-weight: 700;
        color: #212529;
        margin-bottom: 1rem;
        border-bottom: 2px solid #f1f3f5;
        padding-bottom: 0.5rem;
    }

    .kurumsal-card p[b-l1pu41vowz] {
        font-size: 0.98rem;
        line-height: 1.6;
        color: #495057;
        margin-bottom: 1rem;
    }

/* Responsive Uyumluluk */
@media (max-width: 992px) {
    .kurumsal-page-container[b-l1pu41vowz] {
        flex-direction: column;
    }

    .kurumsal-sidebar[b-l1pu41vowz] {
        width: 100%;
        height: auto;
        position: relative;
    }

    .kurumsal-content-area[b-l1pu41vowz] {
        padding: 1.5rem;
    }
}

.lead-text[b-l1pu41vowz] {
    text-align: justify;
}
/* _content/WEB/Components/Pages/Endustriyel/Ultrafiltrasyon.razor.rz.scp.css */
/* =========================================================
   ULTRAFİLTRASYON - TUSASER
========================================================= */

.uf-page[b-ubfem6p2qf] {
    --uf-primary: #6546b8;
    --uf-primary-dark: #49338f;
    --uf-secondary: #16b8b0;
    --uf-dark: #172033;
    --uf-text: #526071;
    --uf-muted: #7b8797;
    --uf-border: #e5e9f0;
    --uf-light: #f7f9fc;
    --uf-soft-purple: #f3effc;
    --uf-soft-turquoise: #e9faf8;
    color: var(--uf-dark);
}

    .uf-page p[b-ubfem6p2qf],
    .uf-page li[b-ubfem6p2qf] {
        text-align: justify;
    }


/* =========================================================
   HERO
========================================================= */

.uf-hero[b-ubfem6p2qf] {
    position: relative;
    padding: 95px 0 85px;
    overflow: hidden;
    background: radial-gradient(circle at 85% 20%, rgba(22,184,176,.10), transparent 30%), radial-gradient(circle at 10% 80%, rgba(101,70,184,.08), transparent 30%), #ffffff;
}

.uf-kicker[b-ubfem6p2qf],
.uf-section-kicker[b-ubfem6p2qf] {
    display: inline-block;
    margin-bottom: 15px;
    color: var(--uf-primary);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .18em;
}

.uf-hero h1[b-ubfem6p2qf] {
    max-width: 760px;
    margin-bottom: 25px;
    color: var(--uf-dark);
    font-size: clamp(42px, 5vw, 70px);
    line-height: 1.03;
    font-weight: 800;
    letter-spacing: -2px;
}

    .uf-hero h1 span[b-ubfem6p2qf] {
        color: var(--uf-secondary);
    }

.uf-hero-text[b-ubfem6p2qf] {
    max-width: 720px;
    margin-bottom: 32px;
    color: var(--uf-text);
    font-size: 17px;
    line-height: 1.9;
}

.uf-hero-buttons[b-ubfem6p2qf] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.uf-btn[b-ubfem6p2qf] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 50px;
    padding: 0 24px;
    border-radius: 12px;
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    transition: .25s ease;
}

.uf-btn-primary[b-ubfem6p2qf] {
    color: #fff;
    background: linear-gradient(135deg, var(--uf-primary), #7657ce);
    box-shadow: 0 12px 28px rgba(101,70,184,.20);
}

    .uf-btn-primary:hover[b-ubfem6p2qf] {
        color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 17px 35px rgba(101,70,184,.27);
    }

.uf-btn-light[b-ubfem6p2qf] {
    color: var(--uf-dark);
    background: #fff;
    border: 1px solid var(--uf-border);
}

    .uf-btn-light:hover[b-ubfem6p2qf] {
        color: var(--uf-primary);
        border-color: rgba(101,70,184,.3);
        transform: translateY(-2px);
    }

.uf-hero-image[b-ubfem6p2qf] {
    position: relative;
    min-height: 470px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 25px;
}

    .uf-hero-image[b-ubfem6p2qf]::before {
        content: "";
        position: absolute;
        width: 390px;
        height: 390px;
        border-radius: 50%;
        background: linear-gradient( 145deg, rgba(101,70,184,.10), rgba(22,184,176,.12) );
    }

    .uf-hero-image img[b-ubfem6p2qf] {
        position: relative;
        z-index: 2;
        width: 100%;
        max-height: 440px;
        object-fit: contain;
        border-radius: 25px;
    }

.uf-floating-card[b-ubfem6p2qf] {
    position: absolute;
    z-index: 5;
    right: 0;
    bottom: 35px;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 250px;
    padding: 14px 17px;
    border: 1px solid rgba(255,255,255,.8);
    border-radius: 16px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 18px 45px rgba(15,23,42,.12);
    backdrop-filter: blur(12px);
}

.uf-floating-icon[b-ubfem6p2qf] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: var(--uf-secondary);
    background: var(--uf-soft-turquoise);
    font-size: 19px;
}

.uf-floating-card strong[b-ubfem6p2qf],
.uf-floating-card span[b-ubfem6p2qf] {
    display: block;
}

.uf-floating-card strong[b-ubfem6p2qf] {
    margin-bottom: 3px;
    font-size: 11px;
    letter-spacing: .08em;
}

.uf-floating-card span[b-ubfem6p2qf] {
    color: var(--uf-muted);
    font-size: 11px;
}


/* =========================================================
   BENEFITS
========================================================= */

.uf-benefits-section[b-ubfem6p2qf] {
    position: relative;
    z-index: 3;
    margin-top: -10px;
    padding-bottom: 65px;
}

.uf-benefits[b-ubfem6p2qf] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
    border: 1px solid var(--uf-border);
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 20px 55px rgba(15,23,42,.07);
}

.uf-benefit[b-ubfem6p2qf] {
    position: relative;
    padding: 28px 25px;
    text-align: center;
}

    .uf-benefit:not(:last-child)[b-ubfem6p2qf]::after {
        content: "";
        position: absolute;
        top: 25px;
        right: 0;
        bottom: 25px;
        width: 1px;
        background: var(--uf-border);
    }

    .uf-benefit i[b-ubfem6p2qf] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 48px;
        height: 48px;
        margin: 0 auto 14px;
        border-radius: 14px;
        color: var(--uf-primary);
        background: var(--uf-soft-purple);
        font-size: 20px;
    }

    .uf-benefit strong[b-ubfem6p2qf],
    .uf-benefit span[b-ubfem6p2qf] {
        display: block;
    }

    .uf-benefit strong[b-ubfem6p2qf] {
        margin-bottom: 5px;
        font-size: 14px;
    }

    .uf-benefit span[b-ubfem6p2qf] {
        color: var(--uf-muted);
        font-size: 12px;
    }


/* =========================================================
   GENERAL SECTION
========================================================= */

.uf-info-section[b-ubfem6p2qf],
.uf-contaminant-section[b-ubfem6p2qf],
.uf-ro-section[b-ubfem6p2qf],
.uf-cleaning-section[b-ubfem6p2qf] {
    background: #fff;
}

.uf-section-heading[b-ubfem6p2qf] {
    max-width: 800px;
    margin: 0 auto 50px;
}

    .uf-section-heading h2[b-ubfem6p2qf],
    .uf-info-section h2[b-ubfem6p2qf],
    .uf-ro-section h2[b-ubfem6p2qf],
    .uf-cleaning-section h2[b-ubfem6p2qf],
    .uf-engineering-section h2[b-ubfem6p2qf] {
        margin-bottom: 18px;
        color: var(--uf-dark);
        font-size: clamp(30px, 4vw, 44px);
        line-height: 1.15;
        font-weight: 800;
        letter-spacing: -.8px;
    }

    .uf-section-heading p[b-ubfem6p2qf],
    .uf-info-section p[b-ubfem6p2qf],
    .uf-ro-section p[b-ubfem6p2qf],
    .uf-cleaning-section p[b-ubfem6p2qf],
    .uf-engineering-section p[b-ubfem6p2qf] {
        color: var(--uf-text);
        font-size: 15px;
        line-height: 1.9;
    }


/* =========================================================
   HIGHLIGHT
========================================================= */

.uf-highlight[b-ubfem6p2qf] {
    display: flex;
    gap: 15px;
    margin-top: 28px;
    padding: 20px;
    border-left: 4px solid var(--uf-primary);
    border-radius: 0 14px 14px 0;
    background: linear-gradient( 100deg, rgba(101,70,184,.07), rgba(22,184,176,.06) );
}

    .uf-highlight > i[b-ubfem6p2qf] {
        color: var(--uf-primary);
        font-size: 21px;
    }

    .uf-highlight strong[b-ubfem6p2qf],
    .uf-highlight span[b-ubfem6p2qf] {
        display: block;
    }

    .uf-highlight strong[b-ubfem6p2qf] {
        margin-bottom: 5px;
        font-size: 13px;
    }

    .uf-highlight span[b-ubfem6p2qf] {
        color: var(--uf-text);
        font-size: 13px;
        line-height: 1.7;
    }

.uf-image-card[b-ubfem6p2qf] {
    min-height: 420px;
    padding: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 25px;
    background: linear-gradient(145deg, #f6f8fb, #ffffff);
    border: 1px solid var(--uf-border);
}

    .uf-image-card img[b-ubfem6p2qf] {
        width: 100%;
        max-height: 430px;
        object-fit: contain;
    }


/* =========================================================
   PROCESS
========================================================= */

.uf-process-section[b-ubfem6p2qf] {
    background: linear-gradient( 180deg, #f8fafc 0%, #ffffff 100% );
}

.uf-process-flow[b-ubfem6p2qf] {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 18px;
}

.uf-process-item[b-ubfem6p2qf] {
    position: relative;
    min-height: 240px;
    padding: 30px 25px;
    border: 1px solid var(--uf-border);
    border-radius: 20px;
    background: #fff;
    text-align: center;
    box-shadow: 0 12px 35px rgba(15,23,42,.05);
}

.uf-process-number[b-ubfem6p2qf] {
    position: absolute;
    top: 15px;
    right: 18px;
    color: #c8ced8;
    font-size: 11px;
    font-weight: 800;
}

.uf-process-icon[b-ubfem6p2qf] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    margin: 10px auto 20px;
    border-radius: 17px;
    color: var(--uf-primary);
    background: var(--uf-soft-purple);
    font-size: 24px;
}

.uf-process-item h3[b-ubfem6p2qf] {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 750;
}

.uf-process-item p[b-ubfem6p2qf] {
    margin: 0;
    color: var(--uf-muted);
    font-size: 13px;
    line-height: 1.7;
}

.uf-process-arrow[b-ubfem6p2qf] {
    color: var(--uf-secondary);
    font-size: 24px;
}


/* =========================================================
   CONTAMINANTS
========================================================= */

.uf-contaminant-grid[b-ubfem6p2qf] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.uf-contaminant-card[b-ubfem6p2qf] {
    min-height: 190px;
    padding: 25px;
    border: 1px solid var(--uf-border);
    border-radius: 18px;
    background: #fff;
    transition: .25s ease;
}

    .uf-contaminant-card:hover[b-ubfem6p2qf] {
        transform: translateY(-4px);
        border-color: rgba(101,70,184,.25);
        box-shadow: 0 16px 35px rgba(15,23,42,.07);
    }

    .uf-contaminant-card > i[b-ubfem6p2qf] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        margin-bottom: 17px;
        border-radius: 13px;
        color: var(--uf-secondary);
        background: var(--uf-soft-turquoise);
    }

    .uf-contaminant-card h3[b-ubfem6p2qf] {
        margin-bottom: 8px;
        font-size: 16px;
        font-weight: 750;
    }

    .uf-contaminant-card p[b-ubfem6p2qf] {
        margin: 0;
        color: var(--uf-muted);
        font-size: 13px;
        line-height: 1.7;
    }


/* =========================================================
   SYSTEM TYPES
========================================================= */

.uf-type-card[b-ubfem6p2qf] {
    height: 100%;
    overflow: hidden;
    border: 1px solid var(--uf-border);
    border-radius: 20px;
    background: #fff;
    transition: .3s ease;
}

    .uf-type-card:hover[b-ubfem6p2qf] {
        transform: translateY(-7px);
        box-shadow: 0 20px 45px rgba(15,23,42,.08);
    }

.uf-type-image[b-ubfem6p2qf] {
    height: 210px;
    overflow: hidden;
    background: #f5f7fa;
}

    .uf-type-image img[b-ubfem6p2qf] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: .4s ease;
    }

.uf-type-card:hover .uf-type-image img[b-ubfem6p2qf] {
    transform: scale(1.04);
}

.uf-type-content[b-ubfem6p2qf] {
    position: relative;
    padding: 25px;
}

    .uf-type-content > span[b-ubfem6p2qf] {
        color: var(--uf-secondary);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .12em;
    }

    .uf-type-content h3[b-ubfem6p2qf] {
        margin: 8px 0 12px;
        font-size: 19px;
        font-weight: 750;
    }

    .uf-type-content p[b-ubfem6p2qf] {
        margin: 0;
        color: var(--uf-muted);
        font-size: 13px;
        line-height: 1.8;
    }


/* =========================================================
   FLOW
========================================================= */

.uf-flow-box[b-ubfem6p2qf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 35px;
    border: 1px solid rgba(101,70,184,.10);
    border-radius: 24px;
    background: linear-gradient( 100deg, rgba(101,70,184,.06), rgba(22,184,176,.06) );
}

.uf-flow-item[b-ubfem6p2qf] {
    min-width: 125px;
    text-align: center;
}

    .uf-flow-item i[b-ubfem6p2qf] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 55px;
        height: 55px;
        margin: 0 auto 12px;
        border-radius: 16px;
        color: var(--uf-primary);
        background: #fff;
        box-shadow: 0 8px 20px rgba(15,23,42,.06);
        font-size: 21px;
    }

    .uf-flow-item strong[b-ubfem6p2qf],
    .uf-flow-item span[b-ubfem6p2qf] {
        display: block;
    }

    .uf-flow-item strong[b-ubfem6p2qf] {
        font-size: 13px;
    }

    .uf-flow-item span[b-ubfem6p2qf] {
        margin-top: 3px;
        color: var(--uf-muted);
        font-size: 11px;
    }

.uf-flow-main i[b-ubfem6p2qf] {
    color: #fff;
    background: linear-gradient( 135deg, var(--uf-primary), var(--uf-secondary) );
}

.uf-flow-line[b-ubfem6p2qf] {
    flex: 1;
    height: 1px;
    min-width: 30px;
    background: linear-gradient( 90deg, rgba(101,70,184,.25), rgba(22,184,176,.4) );
}


/* =========================================================
   RO PRETREATMENT
========================================================= */

.uf-ro-section[b-ubfem6p2qf] {
    background: #f8fafc;
}

.uf-ro-visual[b-ubfem6p2qf] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 300px;
    padding: 35px;
    border-radius: 25px;
    background: linear-gradient( 145deg, #ffffff, #f1f5f9 );
    border: 1px solid var(--uf-border);
}

.uf-ro-step[b-ubfem6p2qf] {
    width: 105px;
    padding: 20px 12px;
    border: 1px solid var(--uf-border);
    border-radius: 16px;
    background: #fff;
    text-align: center;
}

    .uf-ro-step span[b-ubfem6p2qf],
    .uf-ro-step strong[b-ubfem6p2qf] {
        display: block;
    }

    .uf-ro-step span[b-ubfem6p2qf] {
        margin-bottom: 7px;
        color: var(--uf-secondary);
        font-size: 10px;
        font-weight: 800;
    }

    .uf-ro-step strong[b-ubfem6p2qf] {
        font-size: 15px;
    }

    .uf-ro-step.active[b-ubfem6p2qf] {
        border-color: rgba(101,70,184,.25);
        background: var(--uf-soft-purple);
    }

        .uf-ro-step.active strong[b-ubfem6p2qf] {
            color: var(--uf-primary);
        }

.uf-ro-arrow[b-ubfem6p2qf] {
    color: var(--uf-secondary);
    font-size: 22px;
}

.uf-ro-points[b-ubfem6p2qf] {
    margin-top: 25px;
}

    .uf-ro-points div[b-ubfem6p2qf] {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 13px;
    }

    .uf-ro-points i[b-ubfem6p2qf] {
        color: var(--uf-secondary);
    }

    .uf-ro-points span[b-ubfem6p2qf] {
        color: var(--uf-text);
        font-size: 13px;
    }


/* =========================================================
   TECHNICAL
========================================================= */

.uf-technical-section[b-ubfem6p2qf] {
    background: #fff;
}

.uf-spec-grid[b-ubfem6p2qf] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.uf-spec-card[b-ubfem6p2qf] {
    min-height: 180px;
    padding: 27px;
    border: 1px solid var(--uf-border);
    border-radius: 18px;
    background: linear-gradient( 145deg, #ffffff, #f8fafc );
}

    .uf-spec-card i[b-ubfem6p2qf] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        margin-bottom: 18px;
        border-radius: 13px;
        color: var(--uf-primary);
        background: var(--uf-soft-purple);
    }

    .uf-spec-card span[b-ubfem6p2qf],
    .uf-spec-card strong[b-ubfem6p2qf] {
        display: block;
    }

    .uf-spec-card span[b-ubfem6p2qf] {
        margin-bottom: 7px;
        color: var(--uf-muted);
        font-size: 12px;
    }

    .uf-spec-card strong[b-ubfem6p2qf] {
        font-size: 14px;
        line-height: 1.5;
    }


/* =========================================================
   APPLICATIONS
========================================================= */

.uf-applications-section[b-ubfem6p2qf] {
    background: #f8fafc;
}

.uf-application-card[b-ubfem6p2qf] {
    height: 100%;
    min-height: 205px;
    padding: 28px;
    border: 1px solid var(--uf-border);
    border-radius: 20px;
    background: #fff;
    transition: .25s ease;
}

    .uf-application-card:hover[b-ubfem6p2qf] {
        transform: translateY(-5px);
        box-shadow: 0 18px 40px rgba(15,23,42,.07);
    }

    .uf-application-card i[b-ubfem6p2qf] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 50px;
        margin-bottom: 18px;
        border-radius: 14px;
        color: var(--uf-secondary);
        background: var(--uf-soft-turquoise);
        font-size: 22px;
    }

    .uf-application-card h3[b-ubfem6p2qf] {
        margin-bottom: 9px;
        font-size: 18px;
        font-weight: 750;
    }

    .uf-application-card p[b-ubfem6p2qf] {
        margin: 0;
        color: var(--uf-muted);
        font-size: 13px;
        line-height: 1.8;
    }


/* =========================================================
   CLEANING
========================================================= */

.uf-cleaning-cards[b-ubfem6p2qf] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.uf-cleaning-card[b-ubfem6p2qf] {
    display: flex;
    gap: 17px;
    padding: 20px;
    border: 1px solid var(--uf-border);
    border-radius: 17px;
    background: #fff;
}

    .uf-cleaning-card > div:first-child[b-ubfem6p2qf] {
        flex: 0 0 46px;
    }

    .uf-cleaning-card i[b-ubfem6p2qf] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        border-radius: 13px;
        color: var(--uf-primary);
        background: var(--uf-soft-purple);
    }

    .uf-cleaning-card h3[b-ubfem6p2qf] {
        margin: 0 0 5px;
        font-size: 16px;
        font-weight: 750;
    }

    .uf-cleaning-card p[b-ubfem6p2qf] {
        margin: 0;
        color: var(--uf-muted);
        font-size: 13px;
        line-height: 1.7;
    }


/* =========================================================
   ENGINEERING
========================================================= */

.uf-engineering-section[b-ubfem6p2qf] {
    background: #f8fafc;
}

.uf-engineering-box[b-ubfem6p2qf] {
    padding: 55px;
    border-radius: 28px;
    background: radial-gradient( circle at 90% 10%, rgba(22,184,176,.12), transparent 30% ), linear-gradient( 135deg, #ffffff, #f5f7fb );
    border: 1px solid var(--uf-border);
}

.uf-engineering-list[b-ubfem6p2qf] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .uf-engineering-list div[b-ubfem6p2qf] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 15px 17px;
        border-radius: 13px;
        background: #fff;
        border: 1px solid var(--uf-border);
    }

    .uf-engineering-list i[b-ubfem6p2qf] {
        color: var(--uf-secondary);
    }

    .uf-engineering-list span[b-ubfem6p2qf] {
        color: var(--uf-text);
        font-size: 13px;
    }


/* =========================================================
   CTA
========================================================= */

.uf-cta-section[b-ubfem6p2qf] {
    padding: 70px 0;
    background: linear-gradient( 120deg, #49338f, #6546b8 55%, #16b8b0 );
}

.uf-cta[b-ubfem6p2qf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

    .uf-cta span[b-ubfem6p2qf] {
        display: block;
        margin-bottom: 12px;
        color: rgba(255,255,255,.7);
        font-size: 10px;
        font-weight: 800;
        letter-spacing: .18em;
    }

    .uf-cta h2[b-ubfem6p2qf] {
        max-width: 720px;
        margin-bottom: 15px;
        color: #fff;
        font-size: clamp(28px, 4vw, 42px);
        line-height: 1.15;
        font-weight: 800;
    }

    .uf-cta p[b-ubfem6p2qf] {
        max-width: 680px;
        margin: 0;
        color: rgba(255,255,255,.78);
        font-size: 14px;
        line-height: 1.8;
    }


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px) {

    .uf-benefits[b-ubfem6p2qf] {
        grid-template-columns: 1fr 1fr;
    }

    .uf-benefit:nth-child(2)[b-ubfem6p2qf]::after {
        display: none;
    }

    .uf-process-flow[b-ubfem6p2qf] {
        grid-template-columns: 1fr 1fr;
    }

    .uf-process-arrow[b-ubfem6p2qf] {
        display: none;
    }

    .uf-spec-grid[b-ubfem6p2qf] {
        grid-template-columns: 1fr 1fr;
    }

    .uf-flow-box[b-ubfem6p2qf] {
        flex-wrap: wrap;
        justify-content: center;
    }

    .uf-flow-line[b-ubfem6p2qf] {
        flex: 0 0 40px;
    }
}


@media (max-width: 768px) {

    .uf-hero[b-ubfem6p2qf] {
        padding: 65px 0;
    }

        .uf-hero h1[b-ubfem6p2qf] {
            font-size: 42px;
            letter-spacing: -1px;
        }

    .uf-hero-text[b-ubfem6p2qf] {
        font-size: 15px;
    }

    .uf-hero-image[b-ubfem6p2qf] {
        min-height: 330px;
    }

    .uf-floating-card[b-ubfem6p2qf] {
        right: 10px;
        bottom: 10px;
    }

    .uf-benefits[b-ubfem6p2qf] {
        grid-template-columns: 1fr;
    }

    .uf-benefit:not(:last-child)[b-ubfem6p2qf]::after {
        top: auto;
        right: 20px;
        bottom: 0;
        left: 20px;
        width: auto;
        height: 1px;
    }

    .uf-process-flow[b-ubfem6p2qf] {
        grid-template-columns: 1fr;
    }

    .uf-contaminant-grid[b-ubfem6p2qf] {
        grid-template-columns: 1fr;
    }

    .uf-spec-grid[b-ubfem6p2qf] {
        grid-template-columns: 1fr;
    }

    .uf-flow-box[b-ubfem6p2qf] {
        flex-direction: column;
    }

    .uf-flow-line[b-ubfem6p2qf] {
        width: 1px;
        height: 30px;
        min-width: 0;
    }

    .uf-ro-visual[b-ubfem6p2qf] {
        flex-direction: column;
    }

    .uf-ro-arrow[b-ubfem6p2qf] {
        transform: rotate(90deg);
    }

    .uf-engineering-box[b-ubfem6p2qf] {
        padding: 30px 22px;
    }

    .uf-cta[b-ubfem6p2qf] {
        flex-direction: column;
        align-items: flex-start;
    }
}


@media (max-width: 576px) {

    .uf-hero-buttons[b-ubfem6p2qf] {
        flex-direction: column;
        align-items: stretch;
    }

    .uf-btn[b-ubfem6p2qf] {
        width: 100%;
    }

    .uf-hero-image[b-ubfem6p2qf]::before {
        width: 280px;
        height: 280px;
    }

    .uf-section-heading h2[b-ubfem6p2qf],
    .uf-info-section h2[b-ubfem6p2qf],
    .uf-ro-section h2[b-ubfem6p2qf],
    .uf-cleaning-section h2[b-ubfem6p2qf],
    .uf-engineering-section h2[b-ubfem6p2qf] {
        font-size: 30px;
    }

    .uf-type-image[b-ubfem6p2qf] {
        height: 190px;
    }
}
/* _content/WEB/Components/Pages/Endustriyel/UvDezenfeksiyon.razor.rz.scp.css */
/* =========================================================
   TUSASER
   UV DEZENFEKSİYON
   ========================================================= */

.uv-page[b-ybl8atgmn3] {
    --purple: #6729b8;
    --purple-dark: #35145f;
    --purple-soft: #f4effb;
    --turquoise: #12c8bb;
    --turquoise-soft: #eafbf9;
    --blue: #2aa8df;
    --ink: #14213d;
    --muted: #667085;
    --line: #e6e9ef;
    --soft: #f6f8fb;
    background: #fff;
    color: var(--ink);
    font-family: Inter, "Segoe UI", Arial, sans-serif;
    overflow: hidden;
}

.uv-container[b-ybl8atgmn3] {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}


/* =========================================================
   HERO
   ========================================================= */

.uv-hero[b-ybl8atgmn3] {
    position: relative;
    min-height: 690px;
    overflow: hidden;
    color: #fff;
    background: radial-gradient( circle at 80% 30%, rgba(18,200,187,.28), transparent 28% ), radial-gradient( circle at 70% 85%, rgba(103,41,184,.45), transparent 35% ), linear-gradient( 125deg, #211039, #35145e 48%, #087d86 );
}

.uv-hero-bg[b-ybl8atgmn3] {
    position: absolute;
    inset: 0;
    opacity: .09;
    background-image: linear-gradient( rgba(255,255,255,.15) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.15) 1px, transparent 1px );
    background-size: 55px 55px;
    transform: perspective(500px) rotateX(60deg) scale(1.7) translateY(100px);
    transform-origin: center bottom;
}

.uv-hero-inner[b-ybl8atgmn3] {
    position: relative;
    z-index: 2;
    padding-top: 25px;
}

.uv-breadcrumb[b-ybl8atgmn3] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 55px;
    font-size: 12px;
    color: rgba(255,255,255,.58);
}

    .uv-breadcrumb a[b-ybl8atgmn3] {
        color: rgba(255,255,255,.58);
        text-decoration: none;
    }

        .uv-breadcrumb a:hover[b-ybl8atgmn3] {
            color: #fff;
        }

    .uv-breadcrumb strong[b-ybl8atgmn3] {
        color: #fff;
    }

.uv-hero-grid[b-ybl8atgmn3] {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: 60px;
}

.uv-eyebrow[b-ybl8atgmn3],
.uv-section-kicker[b-ybl8atgmn3] {
    display: inline-block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .19em;
    text-transform: uppercase;
}

.uv-eyebrow[b-ybl8atgmn3] {
    color: #78eee5;
    margin-bottom: 25px;
}

.uv-hero-copy h1[b-ybl8atgmn3] {
    max-width: 700px;
    margin: 0 0 28px;
    font-size: clamp(46px, 6vw, 78px);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 300;
}

    .uv-hero-copy h1 strong[b-ybl8atgmn3] {
        display: block;
        font-weight: 800;
        color: #fff;
    }

.uv-hero-copy > p[b-ybl8atgmn3] {
    max-width: 650px;
    color: rgba(255,255,255,.75);
    font-size: 16px;
    line-height: 1.85;
    margin-bottom: 14px;
}

.uv-hero-actions[b-ybl8atgmn3] {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

.uv-btn[b-ybl8atgmn3] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 23px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: .25s ease;
}

    .uv-btn:hover[b-ybl8atgmn3] {
        transform: translateY(-2px);
    }

.uv-btn-primary[b-ybl8atgmn3] {
    background: linear-gradient( 90deg, var(--turquoise), #41dcd2 );
    color: #073e3b;
    box-shadow: 0 12px 30px rgba(18,200,187,.2);
}

.uv-btn-light[b-ybl8atgmn3] {
    border: 1px solid rgba(255,255,255,.25);
    background: rgba(255,255,255,.06);
    color: #fff;
}

.uv-btn-outline[b-ybl8atgmn3] {
    border: 1px solid rgba(255,255,255,.30);
    color: #fff;
    background: transparent;
}

.uv-hero-stats[b-ybl8atgmn3] {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    max-width: 650px;
    margin-top: 50px;
    padding-top: 25px;
    border-top: 1px solid rgba(255,255,255,.13);
}

    .uv-hero-stats div[b-ybl8atgmn3] {
        padding-right: 20px;
    }

    .uv-hero-stats strong[b-ybl8atgmn3] {
        display: block;
        margin-bottom: 5px;
        font-size: 17px;
    }

    .uv-hero-stats span[b-ybl8atgmn3] {
        font-size: 10px;
        line-height: 1.5;
        color: rgba(255,255,255,.52);
    }


/* =========================================================
   IMAGE PLACEHOLDER
   ========================================================= */

.uv-image-slot[b-ybl8atgmn3] {
    position: relative;
    min-height: 390px;
    overflow: hidden;
    border-radius: 27px;
    border: 1px solid rgba(20,33,61,.08);
    background: linear-gradient( 145deg, #f8fafc, #edf3f6 );
    box-shadow: 0 25px 70px rgba(20,33,61,.10);
}

.uv-image-slot-hero[b-ybl8atgmn3] {
    min-height: 500px;
    background: radial-gradient( circle at 70% 30%, rgba(18,200,187,.14), transparent 32% ), linear-gradient( 145deg, #fff, #eaf0f4 );
}

.uv-image-placeholder[b-ybl8atgmn3] {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 35px;
    text-align: center;
    color: #7a8596;
}

    .uv-image-placeholder i[b-ybl8atgmn3] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 76px;
        height: 76px;
        margin-bottom: 20px;
        border-radius: 22px;
        background: linear-gradient( 135deg, rgba(103,41,184,.10), rgba(18,200,187,.12) );
        color: var(--purple);
        font-size: 31px;
    }

    .uv-image-placeholder strong[b-ybl8atgmn3] {
        display: block;
        margin-bottom: 8px;
        color: var(--ink);
        font-size: 12px;
        letter-spacing: .10em;
    }

    .uv-image-placeholder span[b-ybl8atgmn3] {
        max-width: 390px;
        margin-bottom: 12px;
        color: var(--muted);
        font-size: 13px;
        line-height: 1.7;
    }

    .uv-image-placeholder small[b-ybl8atgmn3] {
        color: #9aa3b1;
        font-size: 10px;
    }

.uv-floating-card[b-ybl8atgmn3] {
    position: absolute;
    left: -20px;
    bottom: 35px;
    display: flex;
    align-items: center;
    gap: 13px;
    padding: 15px 20px;
    border-radius: 15px;
    background: rgba(255,255,255,.96);
    color: var(--ink);
    box-shadow: 0 15px 40px rgba(0,0,0,.17);
}

.uv-floating-icon[b-ybl8atgmn3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--turquoise-soft);
    color: var(--turquoise);
    font-size: 20px;
}

.uv-floating-card strong[b-ybl8atgmn3] {
    display: block;
    font-size: 10px;
    letter-spacing: .1em;
}

.uv-floating-card span[b-ybl8atgmn3] {
    display: block;
    margin-top: 3px;
    color: var(--muted);
    font-size: 11px;
}


/* =========================================================
   SECTION
   ========================================================= */

.uv-section[b-ybl8atgmn3] {
    padding: 110px 0;
    background: #fff;
}

.uv-soft-section[b-ybl8atgmn3] {
    background: #f7f9fc;
}

.uv-section-heading[b-ybl8atgmn3] {
    max-width: 850px;
    margin-bottom: 55px;
}

    .uv-section-heading.centered[b-ybl8atgmn3] {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

.uv-section-kicker[b-ybl8atgmn3] {
    margin-bottom: 16px;
    color: var(--purple);
}

.uv-section-heading h2[b-ybl8atgmn3] {
    margin: 0 0 20px;
    font-size: clamp(35px,4vw,55px);
    line-height: 1.05;
    letter-spacing: -.045em;
}

    .uv-section-heading h2 em[b-ybl8atgmn3] {
        color: var(--purple);
        font-style: normal;
    }

.uv-section-heading p[b-ybl8atgmn3] {
    max-width: 800px;
    margin: 0;
    color: var(--muted);
    font-size: 15px;
    line-height: 1.85;
}

.uv-section-heading.centered p[b-ybl8atgmn3] {
    margin-left: auto;
    margin-right: auto;
}


/* =========================================================
   PRINCIPLE
   ========================================================= */

.uv-principle-grid[b-ybl8atgmn3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}

.uv-principle-step[b-ybl8atgmn3] {
    display: grid;
    grid-template-columns: 45px 1fr;
    gap: 15px;
    margin-bottom: 25px;
}

    .uv-principle-step > span[b-ybl8atgmn3] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 12px;
        background: var(--purple-soft);
        color: var(--purple);
        font-size: 10px;
        font-weight: 900;
    }

    .uv-principle-step strong[b-ybl8atgmn3] {
        display: block;
        margin-bottom: 7px;
        font-size: 15px;
    }

    .uv-principle-step p[b-ybl8atgmn3] {
        margin: 0;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.75;
        text-align: justify;
    }


/* =========================================================
   DOSE
   ========================================================= */

.uv-dose-grid[b-ybl8atgmn3] {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 15px;
}

.uv-dose-card[b-ybl8atgmn3] {
    padding: 30px;
    min-height: 260px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    transition: .3s ease;
}

    .uv-dose-card:hover[b-ybl8atgmn3] {
        transform: translateY(-5px);
        box-shadow: 0 20px 40px rgba(20,33,61,.08);
    }

.uv-dose-icon[b-ybl8atgmn3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 55px;
    height: 55px;
    margin-bottom: 23px;
    border-radius: 15px;
    background: var(--purple-soft);
    color: var(--purple);
    font-size: 22px;
}

.uv-dose-card > strong[b-ybl8atgmn3] {
    display: block;
    margin-bottom: 12px;
    font-size: 12px;
    letter-spacing: .05em;
}

.uv-dose-card p[b-ybl8atgmn3] {
    margin: 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.75;
}

.uv-formula[b-ybl8atgmn3] {
    display: grid;
    grid-template-columns: 1fr 50px 1fr 50px 1fr;
    align-items: center;
    margin-top: 35px;
    padding: 22px;
    border-radius: 20px;
    background: #fff;
    border: 1px solid var(--line);
}

.uv-formula-item[b-ybl8atgmn3] {
    text-align: center;
}

    .uv-formula-item span[b-ybl8atgmn3] {
        display: block;
        margin-bottom: 7px;
        color: #9aa3b1;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .12em;
    }

    .uv-formula-item strong[b-ybl8atgmn3] {
        font-size: 13px;
    }

    .uv-formula-item.highlighted strong[b-ybl8atgmn3] {
        color: var(--purple);
    }

.uv-formula-arrow[b-ybl8atgmn3] {
    text-align: center;
    color: var(--turquoise);
}


/* =========================================================
   TECHNOLOGY
   ========================================================= */

.uv-tech-grid[b-ybl8atgmn3] {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 15px;
}

.uv-tech-card[b-ybl8atgmn3] {
    position: relative;
    min-height: 330px;
    padding: 28px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
    transition: .3s ease;
}

    .uv-tech-card:hover[b-ybl8atgmn3] {
        transform: translateY(-5px);
        box-shadow: 0 20px 45px rgba(20,33,61,.08);
    }

    .uv-tech-card.featured[b-ybl8atgmn3] {
        border-color: rgba(103,41,184,.28);
        background: linear-gradient( 145deg, rgba(103,41,184,.05), rgba(18,200,187,.06) );
    }

.uv-tech-number[b-ybl8atgmn3] {
    position: absolute;
    top: 20px;
    right: 22px;
    color: #aeb5c0;
    font-size: 10px;
    font-weight: 800;
}

.uv-tech-icon[b-ybl8atgmn3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 25px;
    border-radius: 15px;
    background: var(--purple-soft);
    color: var(--purple);
    font-size: 21px;
}

.uv-tech-card h3[b-ybl8atgmn3] {
    margin: 0 0 13px;
    font-size: 17px;
}

.uv-tech-card p[b-ybl8atgmn3] {
    margin-bottom: 20px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.75;
    text-align: justify;
}

.uv-tag-list[b-ybl8atgmn3] {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

    .uv-tag-list span[b-ybl8atgmn3] {
        padding: 5px 8px;
        border-radius: 6px;
        background: #f3f5f8;
        color: #657084;
        font-size: 9px;
        font-weight: 700;
    }


/* =========================================================
   DARK
   ========================================================= */

.uv-dark-section[b-ybl8atgmn3] {
    color: #fff;
    background: radial-gradient( circle at 80% 25%, rgba(18,200,187,.16), transparent 30% ), linear-gradient( 125deg, #211039, #35145e 60%, #087c83 );
}

.uv-section-heading.light h2[b-ybl8atgmn3] {
    color: #fff;
}

    .uv-section-heading.light h2 em[b-ybl8atgmn3] {
        color: #70eee5;
    }

.uv-section-heading.light p[b-ybl8atgmn3] {
    color: rgba(255,255,255,.66);
}

.uv-section-heading.light .uv-section-kicker[b-ybl8atgmn3] {
    color: #70eee5;
}

.uv-smart-grid[b-ybl8atgmn3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 70px;
}

.uv-smart-copy h2[b-ybl8atgmn3] {
    margin: 0 0 22px;
    font-size: clamp(35px,4vw,53px);
    line-height: 1.05;
    letter-spacing: -.04em;
}

    .uv-smart-copy h2 em[b-ybl8atgmn3] {
        display: block;
        color: #70eee5;
        font-style: normal;
    }

.uv-smart-copy > p[b-ybl8atgmn3] {
    color: rgba(255,255,255,.68);
    font-size: 14px;
    line-height: 1.85;
    text-align: justify;
}

.uv-smart-points[b-ybl8atgmn3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 30px;
}

    .uv-smart-points > div[b-ybl8atgmn3] {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 15px;
        border-radius: 13px;
        background: rgba(255,255,255,.055);
        border: 1px solid rgba(255,255,255,.09);
    }

    .uv-smart-points i[b-ybl8atgmn3] {
        color: #70eee5;
        font-size: 20px;
    }

    .uv-smart-points strong[b-ybl8atgmn3] {
        display: block;
        font-size: 11px;
    }

    .uv-smart-points span[b-ybl8atgmn3] {
        display: block;
        margin-top: 3px;
        color: rgba(255,255,255,.48);
        font-size: 9px;
    }

.uv-image-slot-dark[b-ybl8atgmn3] {
    border-color: rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    box-shadow: none;
}

    .uv-image-slot-dark
    .uv-image-placeholder strong[b-ybl8atgmn3] {
        color: #fff;
    }

    .uv-image-slot-dark
    .uv-image-placeholder span[b-ybl8atgmn3] {
        color: rgba(255,255,255,.55);
    }

    .uv-image-slot-dark
    .uv-image-placeholder i[b-ybl8atgmn3] {
        background: rgba(255,255,255,.07);
        color: #70eee5;
    }


/* =========================================================
   CLEANING
   ========================================================= */

.uv-clean-grid[b-ybl8atgmn3] {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 15px;
    margin-bottom: 35px;
}

.uv-clean-card[b-ybl8atgmn3] {
    position: relative;
    min-height: 270px;
    padding: 30px;
    border: 1px solid var(--line);
    border-radius: 20px;
    background: #fff;
}

.uv-clean-number[b-ybl8atgmn3] {
    position: absolute;
    top: 20px;
    right: 20px;
    color: #aab1bc;
    font-size: 10px;
    font-weight: 800;
}

.uv-clean-card > i[b-ybl8atgmn3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 53px;
    height: 53px;
    margin-bottom: 22px;
    border-radius: 15px;
    background: var(--turquoise-soft);
    color: var(--turquoise);
    font-size: 22px;
}

.uv-clean-card h3[b-ybl8atgmn3] {
    margin-bottom: 10px;
    font-size: 17px;
}

.uv-clean-card p[b-ybl8atgmn3] {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.75;
    text-align: justify;
}

.uv-wide-image[b-ybl8atgmn3] {
    min-height: 420px;
}


/* =========================================================
   REACTOR
   ========================================================= */

.uv-reactor-grid[b-ybl8atgmn3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 35px;
}

.uv-reactor-card[b-ybl8atgmn3] {
    padding: 35px;
    min-height: 360px;
    border: 1px solid var(--line);
    border-radius: 23px;
    background: #fff;
}

    .uv-reactor-card.featured[b-ybl8atgmn3] {
        border: 2px solid rgba(103,41,184,.22);
        background: linear-gradient( 145deg, rgba(103,41,184,.05), rgba(18,200,187,.05) );
    }

.uv-reactor-top[b-ybl8atgmn3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 25px;
}

.uv-reactor-icon[b-ybl8atgmn3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 57px;
    height: 57px;
    border-radius: 16px;
    background: var(--purple-soft);
    color: var(--purple);
    font-size: 23px;
}

.uv-reactor-top > span[b-ybl8atgmn3] {
    color: #aab1bc;
    font-size: 10px;
    font-weight: 800;
}

.uv-reactor-card h3[b-ybl8atgmn3] {
    margin-bottom: 13px;
    font-size: 22px;
}

.uv-reactor-card p[b-ybl8atgmn3] {
    color: var(--muted);
    font-size: 13px;
    line-height: 1.8;
    text-align: justify;
}

.uv-reactor-card ul[b-ybl8atgmn3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    padding: 0;
    margin: 25px 0 0;
    list-style: none;
}

.uv-reactor-card li[b-ybl8atgmn3] {
    padding: 8px 10px;
    border-radius: 7px;
    background: #f4f6f8;
    color: #5e6879;
    font-size: 10px;
}


/* =========================================================
   MEDIA
   ========================================================= */

.uv-media-grid[b-ybl8atgmn3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 75px;
    align-items: center;
}

.uv-media-copy h2[b-ybl8atgmn3] {
    margin: 0 0 22px;
    font-size: clamp(35px,4vw,52px);
    line-height: 1.05;
    letter-spacing: -.04em;
}

    .uv-media-copy h2 em[b-ybl8atgmn3] {
        display: block;
        color: var(--purple);
        font-style: normal;
    }

.uv-media-copy p[b-ybl8atgmn3] {
    color: var(--muted);
    font-size: 14px;
    line-height: 1.85;
    text-align: justify;
}

.uv-reuse-flow[b-ybl8atgmn3] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 25px;
}

    .uv-reuse-flow span[b-ybl8atgmn3],
    .uv-reuse-flow strong[b-ybl8atgmn3] {
        padding: 8px 11px;
        border-radius: 7px;
        background: #f3f5f8;
        color: #596273;
        font-size: 10px;
    }

        .uv-reuse-flow span.active[b-ybl8atgmn3] {
            background: var(--purple-soft);
            color: var(--purple);
        }

    .uv-reuse-flow i[b-ybl8atgmn3] {
        color: var(--turquoise);
        font-size: 11px;
    }


/* =========================================================
   AOP
   ========================================================= */

.uv-aop-grid[b-ybl8atgmn3] {
    display: grid;
    grid-template-columns: 1fr 50px 1fr 50px 1fr;
    align-items: center;
    gap: 10px;
}

.uv-aop-card[b-ybl8atgmn3] {
    min-height: 260px;
    padding: 30px;
    border-radius: 20px;
    background: rgba(255,255,255,.055);
    border: 1px solid rgba(255,255,255,.11);
}

    .uv-aop-card.result[b-ybl8atgmn3] {
        background: linear-gradient( 145deg, rgba(103,41,184,.30), rgba(18,200,187,.16) );
    }

    .uv-aop-card > span[b-ybl8atgmn3] {
        display: block;
        margin-bottom: 20px;
        color: #70eee5;
        font-size: 22px;
        font-weight: 900;
    }

    .uv-aop-card i[b-ybl8atgmn3] {
        display: block;
        margin-bottom: 18px;
        color: #fff;
        font-size: 25px;
    }

    .uv-aop-card strong[b-ybl8atgmn3] {
        display: block;
        margin-bottom: 10px;
        font-size: 15px;
    }

    .uv-aop-card p[b-ybl8atgmn3] {
        margin: 0;
        color: rgba(255,255,255,.57);
        font-size: 11px;
        line-height: 1.7;
    }

.uv-aop-plus[b-ybl8atgmn3] {
    text-align: center;
    color: #70eee5;
    font-size: 20px;
}

.uv-aop-note[b-ybl8atgmn3] {
    display: flex;
    gap: 15px;
    margin-top: 25px;
    padding: 20px;
    border-radius: 13px;
    background: rgba(255,255,255,.045);
    border: 1px solid rgba(255,255,255,.08);
}

    .uv-aop-note i[b-ybl8atgmn3] {
        color: #70eee5;
    }

    .uv-aop-note span[b-ybl8atgmn3] {
        color: rgba(255,255,255,.61);
        font-size: 11px;
        line-height: 1.7;
    }


/* =========================================================
   HYBRID
   ========================================================= */

.uv-hybrid-grid[b-ybl8atgmn3] {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 15px;
}

.uv-hybrid-card[b-ybl8atgmn3] {
    display: grid;
    grid-template-columns: auto 25px auto;
    align-items: center;
    column-gap: 8px;
    padding: 25px;
    border-radius: 18px;
    border: 1px solid var(--line);
    background: #fff;
}

    .uv-hybrid-card strong[b-ybl8atgmn3] {
        color: var(--ink);
        font-size: 19px;
    }

    .uv-hybrid-card > i[b-ybl8atgmn3] {
        color: var(--turquoise);
        font-size: 13px;
    }

    .uv-hybrid-card span[b-ybl8atgmn3] {
        color: var(--purple);
        font-size: 19px;
        font-weight: 900;
    }

    .uv-hybrid-card small[b-ybl8atgmn3] {
        grid-column: 1 / -1;
        margin-top: 15px;
        color: var(--muted);
        font-size: 10px;
    }


/* =========================================================
   MONITORING
   ========================================================= */

.uv-monitor-grid[b-ybl8atgmn3] {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    gap: 10px;
    margin-bottom: 35px;
}

.uv-monitor-card[b-ybl8atgmn3] {
    padding: 23px 15px;
    text-align: center;
    border: 1px solid var(--line);
    border-radius: 15px;
    background: #fff;
}

    .uv-monitor-card i[b-ybl8atgmn3] {
        display: block;
        margin-bottom: 13px;
        color: var(--purple);
        font-size: 22px;
    }

    .uv-monitor-card strong[b-ybl8atgmn3] {
        display: block;
        font-size: 11px;
    }

    .uv-monitor-card span[b-ybl8atgmn3] {
        display: block;
        margin-top: 4px;
        color: var(--muted);
        font-size: 9px;
    }


/* =========================================================
   APPLICATION
   ========================================================= */

.uv-application-grid[b-ybl8atgmn3] {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 15px;
}

    .uv-application-grid article[b-ybl8atgmn3] {
        min-height: 240px;
        padding: 28px;
        border: 1px solid var(--line);
        border-radius: 19px;
        background: #fff;
        transition: .3s ease;
    }

        .uv-application-grid article:hover[b-ybl8atgmn3] {
            transform: translateY(-4px);
            box-shadow: 0 18px 40px rgba(20,33,61,.07);
        }

    .uv-application-grid i[b-ybl8atgmn3] {
        display: block;
        margin-bottom: 20px;
        color: var(--purple);
        font-size: 23px;
    }

    .uv-application-grid h3[b-ybl8atgmn3] {
        margin-bottom: 10px;
        font-size: 16px;
    }

    .uv-application-grid p[b-ybl8atgmn3] {
        color: var(--muted);
        font-size: 11px;
        line-height: 1.7;
    }


/* =========================================================
   ENGINEERING
   ========================================================= */

.uv-engineering-section[b-ybl8atgmn3] {
    background: #f7f9fc;
}

.uv-engineering-line[b-ybl8atgmn3] {
    display: grid;
    grid-template-columns: repeat(6,1fr);
    margin-bottom: 45px;
}

    .uv-engineering-line > div[b-ybl8atgmn3] {
        position: relative;
        text-align: center;
    }

        .uv-engineering-line > div:not(:last-child)[b-ybl8atgmn3]::after {
            content: "";
            position: absolute;
            top: 34px;
            left: 65%;
            width: 70%;
            height: 1px;
            background: #dce1e8;
        }

    .uv-engineering-line span[b-ybl8atgmn3] {
        display: block;
        margin-bottom: 8px;
        color: #aab1bc;
        font-size: 8px;
        font-weight: 900;
    }

    .uv-engineering-line i[b-ybl8atgmn3] {
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        z-index: 2;
        width: 68px;
        height: 68px;
        margin: 0 auto 15px;
        border-radius: 50%;
        border: 1px solid var(--line);
        background: #fff;
        color: var(--purple);
        font-size: 22px;
    }

    .uv-engineering-line strong[b-ybl8atgmn3] {
        display: block;
        font-size: 10px;
    }

    .uv-engineering-line small[b-ybl8atgmn3] {
        display: block;
        margin-top: 4px;
        color: var(--muted);
        font-size: 8px;
    }


/* =========================================================
   COMPARISON
   ========================================================= */

.uv-compare[b-ybl8atgmn3] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.uv-compare-column[b-ybl8atgmn3] {
    padding: 35px;
    border-radius: 22px;
    border: 1px solid var(--line);
    background: #fff;
}

.uv-compare-head[b-ybl8atgmn3] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 25px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
}

    .uv-compare-head i[b-ybl8atgmn3] {
        color: var(--purple);
        font-size: 22px;
    }

    .uv-compare-head strong[b-ybl8atgmn3] {
        font-size: 18px;
    }

.uv-compare-column ul[b-ybl8atgmn3] {
    padding: 0;
    margin: 0;
    list-style: none;
}

.uv-compare-column li[b-ybl8atgmn3] {
    position: relative;
    padding-left: 22px;
    margin-bottom: 14px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.6;
}

    .uv-compare-column li[b-ybl8atgmn3]::before {
        content: "✓";
        position: absolute;
        left: 0;
        color: var(--turquoise);
        font-weight: 900;
    }


/* =========================================================
   FINAL
   ========================================================= */

.uv-final[b-ybl8atgmn3] {
    padding: 90px 0;
    color: #fff;
    background: radial-gradient( circle at 75% 50%, rgba(18,200,187,.20), transparent 30% ), linear-gradient( 120deg, #281043, #431574 55%, #07858a );
}

.uv-final-inner[b-ybl8atgmn3] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

    .uv-final-inner .uv-section-kicker[b-ybl8atgmn3] {
        color: #70eee5;
    }

    .uv-final-inner h2[b-ybl8atgmn3] {
        max-width: 700px;
        margin: 10px 0 15px;
        font-size: clamp(35px,4vw,53px);
        line-height: 1.05;
        letter-spacing: -.04em;
    }

        .uv-final-inner h2 strong[b-ybl8atgmn3] {
            display: block;
        }

    .uv-final-inner p[b-ybl8atgmn3] {
        max-width: 600px;
        color: rgba(255,255,255,.65);
        font-size: 14px;
        line-height: 1.8;
    }

.uv-final-actions[b-ybl8atgmn3] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 230px;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {

    .uv-tech-grid[b-ybl8atgmn3] {
        grid-template-columns: repeat(2,1fr);
    }

    .uv-application-grid[b-ybl8atgmn3] {
        grid-template-columns: repeat(2,1fr);
    }

    .uv-monitor-grid[b-ybl8atgmn3] {
        grid-template-columns: repeat(3,1fr);
    }
}


@media (max-width: 900px) {

    .uv-hero-grid[b-ybl8atgmn3],
    .uv-principle-grid[b-ybl8atgmn3],
    .uv-smart-grid[b-ybl8atgmn3],
    .uv-media-grid[b-ybl8atgmn3] {
        grid-template-columns: 1fr;
    }

    .uv-dose-grid[b-ybl8atgmn3] {
        grid-template-columns: repeat(2,1fr);
    }

    .uv-reactor-grid[b-ybl8atgmn3],
    .uv-compare[b-ybl8atgmn3] {
        grid-template-columns: 1fr;
    }

    .uv-clean-grid[b-ybl8atgmn3] {
        grid-template-columns: 1fr;
    }

    .uv-hybrid-grid[b-ybl8atgmn3] {
        grid-template-columns: repeat(2,1fr);
    }

    .uv-engineering-line[b-ybl8atgmn3] {
        grid-template-columns: repeat(3,1fr);
        gap: 40px 0;
    }

        .uv-engineering-line > div:not(:last-child)[b-ybl8atgmn3]::after {
            display: none;
        }

    .uv-aop-grid[b-ybl8atgmn3] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .uv-aop-plus[b-ybl8atgmn3] {
        transform: rotate(90deg);
    }

    .uv-final-inner[b-ybl8atgmn3] {
        flex-direction: column;
        align-items: flex-start;
    }
}


@media (max-width: 650px) {

    .uv-container[b-ybl8atgmn3] {
        width: min(100% - 28px,1180px);
    }

    .uv-section[b-ybl8atgmn3] {
        padding: 75px 0;
    }

    .uv-hero[b-ybl8atgmn3] {
        min-height: auto;
        padding-bottom: 70px;
    }

    .uv-hero-copy h1[b-ybl8atgmn3] {
        font-size: 44px;
    }

    .uv-hero-stats[b-ybl8atgmn3] {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .uv-image-slot-hero[b-ybl8atgmn3] {
        min-height: 350px;
    }

    .uv-floating-card[b-ybl8atgmn3] {
        left: 15px;
        bottom: 15px;
    }

    .uv-dose-grid[b-ybl8atgmn3],
    .uv-tech-grid[b-ybl8atgmn3],
    .uv-application-grid[b-ybl8atgmn3],
    .uv-hybrid-grid[b-ybl8atgmn3],
    .uv-monitor-grid[b-ybl8atgmn3] {
        grid-template-columns: 1fr;
    }

    .uv-formula[b-ybl8atgmn3] {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .uv-formula-arrow[b-ybl8atgmn3] {
        transform: rotate(90deg);
    }

    .uv-reactor-card ul[b-ybl8atgmn3] {
        grid-template-columns: 1fr;
    }

    .uv-smart-points[b-ybl8atgmn3] {
        grid-template-columns: 1fr;
    }

    .uv-engineering-line[b-ybl8atgmn3] {
        grid-template-columns: repeat(2,1fr);
        gap: 40px 10px;
    }

    .uv-final-inner h2[b-ybl8atgmn3] {
        font-size: 38px;
    }
}
/* _content/WEB/Components/Pages/Evsel/AnaSayfaEvsel.razor.rz.scp.css */
/* 1. Genel Yapı */
html[b-atgt39251j], body[b-atgt39251j] {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* 2. Navbar ve Animasyonlar */
.custom-nav[b-atgt39251j] {
    transition: all 0.3s ease;
    padding: 15px 0;
}

.dropdown-menu.animate[b-atgt39251j] {
    animation-duration: 0.3s;
    animation-fill-mode: both;
    display: none;
}

.custom-dropdown:hover .dropdown-menu[b-atgt39251j] {
    display: block;
    animation-name: slideIn-b-atgt39251j;
}

@keyframes slideIn-b-atgt39251j {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 3. Hero Section */
.hero-section[b-atgt39251j] {
    position: relative;
    height: 85vh;
    min-height: 500px;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    overflow: hidden;
    text-shadow: 0 2px 10px rgba(0,0,0,0.7);
}

.hero-img[b-atgt39251j] {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.hero-content[b-atgt39251j] {
    position: relative;
    z-index: 2;
}

/* ANA FOTOĞRAF BUTON LİSTESİ */
.feature-btn[b-atgt39251j] {
    background-color: rgba(135, 206, 250, 0.85) !important; /* Açık mavi zemin */
    border: 1px solid rgba(255, 255, 255, 0.65) !important;
    color: #ffffff !important; /* Beyaz yazı */
    padding: 14px 22px;
    border-radius: 12px;
    text-decoration: none;
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 420px;
    font-weight: 500;
}

    /* Normal durumda yazı ve ikonlar */
    .feature-btn .text[b-atgt39251j],
    .feature-btn .icon[b-atgt39251j] {
        color: #ffffff !important;
    }

    /* MOUSE HOVER */
    .feature-btn:hover[b-atgt39251j] {
        background-color: rgba(230, 230, 230, 0.90) !important; /* Açık gri zemin */
        border-color: #ffffff !important;
        color: #007BFF !important; /* Mavi yazı */
        transform: scale(1.05) translateX(-5px);
        box-shadow: 0 12px 30px rgba(0, 80, 180, 0.25);
        position: relative;
        z-index: 10;
    }

        .feature-btn:hover .text[b-atgt39251j],
        .feature-btn:hover .icon[b-atgt39251j] {
            color: #007BFF !important; /* Beyaz yazı ve ikon */
            font-weight: bold;
        }

.category-card[b-atgt39251j] {
    background: #fff;
    border-radius: 40px;
    overflow: hidden;
    transition: 0.5s;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    height: 100%;
    border: 2px solid #f0f0f0;
}

    .category-card:hover[b-atgt39251j] {
        transform: translateY(-20px);
        box-shadow: 0 30px 60px rgba(0,0,0,0.2);
        border-color: #0d6efd;
    }

.img-box[b-atgt39251j] {
    height: 350px;
    overflow: hidden;
}

    .img-box img[b-atgt39251j] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: 0.6s;
    }

.category-card:hover .img-box img[b-atgt39251j] {
    transform: scale(1.15);
}

.card-content[b-atgt39251j] {
    padding: 40px 35px;
    text-align: center;
}

.btn-detay[b-atgt39251j] {
    display: inline-block;
    padding: 15px 40px;
    background: #0d6efd;
    color: white;
    border-radius: 50px;
    text-decoration: none;
    transition: 0.3s;
}

/* Info Section */
.info-section[b-atgt39251j] {
    padding: 80px 0;
    background: #f8fbff;
    border-top: 5px solid #0d47a1;
}

.section-title[b-atgt39251j] {
    text-align: center;
    font-size: 2.5rem;
    color: #1a237e;
    margin-bottom: 50px;
}

.info-grid[b-atgt39251j] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-bottom: 30px;
}

.info-card[b-atgt39251j] {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: 0.3s;
    border-bottom: 4px solid transparent;
}

    .info-card:hover[b-atgt39251j] {
        transform: translateY(-10px);
        box-shadow: 0 20px 30px rgba(0,0,0,0.1);
        border-bottom: 4px solid #0d47a1;
    }

    .info-card h3[b-atgt39251j], .info-card h4[b-atgt39251j] {
        color: #0d47a1;
        margin-bottom: 15px;
        font-size: 1.4rem;
        font-weight: 700;
    }

    .info-card p[b-atgt39251j] {
        line-height: 1.7;
        color: #555;
        font-size: 0.95rem;
    }

/* Form Container */
.form-container[b-atgt39251j] {
    max-width: 800px;
    margin: 80px auto;
    padding: 40px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: 0.4s;
}

    .form-container:hover[b-atgt39251j] {
        box-shadow: 0 20px 40px rgba(0,0,0,0.15);
        transform: translateY(-5px);
    }

.form-group[b-atgt39251j] {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

    .form-group label[b-atgt39251j] {
        width: 30%;
        font-weight: 600;
    }

    .form-group input[b-atgt39251j], .form-group select[b-atgt39251j], .form-group textarea[b-atgt39251j] {
        width: 65%;
        padding: 12px;
        border: 2px solid #e0e0e0;
        border-radius: 10px;
    }

button[b-atgt39251j] {
    display: block;
    width: 100%;
    background: #0d47a1;
    color: white;
    padding: 15px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
    margin-top: 20px;
}

    button:hover[b-atgt39251j] {
        background: #0b3a82;
    }

@media (max-width: 992px) {
    .feature-btn[b-atgt39251j] {
        width: 100%;
    }

    .img-box[b-atgt39251j] {
        height: 280px;
    }
}

.info-card-link[b-atgt39251j] {
    display: block;
    height: 100%;
}

    .info-card-link:hover .info-card[b-atgt39251j] {
        transform: translateY(-8px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.08);
        border-color: var(--color-primary);
    }

    .info-card-link:hover .card-action-text i[b-atgt39251j] {
        transform: translateX(4px);
        transition: transform 0.2s ease;
    }

/* ŞEMA GÖRSELİ HOVER ZOOM */
.img-magnifier-container[b-atgt39251j] {
    overflow: hidden;
    position: relative;
    border-radius: 12px;
}

    .img-magnifier-container img[b-atgt39251j] {
        transition: transform 0.1s ease-out;
    }

    .img-magnifier-container:hover img[b-atgt39251j] {
        transform: scale(1.8);
        cursor: zoom-in;
    }

.custom-tab-btn[b-atgt39251j],
.custom-tab-btn:hover[b-atgt39251j],
.custom-tab-btn:focus[b-atgt39251j],
.custom-tab-btn.active[b-atgt39251j] {
    background-color: #ffffff !important;
    border-color: transparent !important;
}
/* _content/WEB/Components/Pages/Evsel/EvselDetay.razor.rz.scp.css */

/* =========================================
   GENEL SAYFA
========================================= */

.product-detail-page[b-2flfuw7l24] {
    width: 100%;
    overflow: hidden;
    color: #263746;
}

/* =========================================
   EVSEL HERO BANNER SLIDER
========================================= */

.product-hero[b-2flfuw7l24] {
    position: relative;
    width: 100%;
    aspect-ratio: 1413 / 627;
    min-height: 350px;
    max-height: 570px;
    overflow: hidden;
    background: #eaf5fb;
}

/* SLIDER ALANI */

.product-hero-carousel[b-2flfuw7l24] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

    .product-hero-carousel .carousel-inner[b-2flfuw7l24],
    .product-hero-carousel .carousel-item[b-2flfuw7l24] {
        width: 100%;
        height: 100%;
    }

/* BANNER GÖRSELLERİ */

.product-hero-image[b-2flfuw7l24] {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* KEŞFET BUTONUNUN KONUMU */

.product-hero-inner[b-2flfuw7l24] {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0 8% 32px;
    pointer-events: none;
}

.product-hero-content[b-2flfuw7l24] {
    max-width: none;
    padding: 0;
    color: #fff;
    pointer-events: auto;
}

/* KEŞFET BUTONU */

.product-hero .product-main-button[b-2flfuw7l24] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0;
    padding: 13px 30px;
    background: #00aeca;
    color: #fff;
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 7px;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all .3s ease;
}

    .product-hero .product-main-button:hover[b-2flfuw7l24] {
        background: #087da9;
        color: #fff;
        transform: translateY(-3px);
    }

/* SLIDER OKLARI */

.product-hero-carousel .carousel-control-prev[b-2flfuw7l24],
.product-hero-carousel .carousel-control-next[b-2flfuw7l24] {
    z-index: 4;
    width: 7%;
    opacity: .8;
}

    .product-hero-carousel .carousel-control-prev:hover[b-2flfuw7l24],
    .product-hero-carousel .carousel-control-next:hover[b-2flfuw7l24] {
        opacity: 1;
    }

/* SLIDER NOKTALARI */

.product-hero-carousel .carousel-indicators[b-2flfuw7l24] {
    z-index: 5;
    margin-bottom: 15px;
}

    .product-hero-carousel .carousel-indicators button[b-2flfuw7l24] {
        width: 28px;
        height: 5px;
        border: 0;
        border-radius: 10px;
        opacity: .55;
    }

        .product-hero-carousel .carousel-indicators button.active[b-2flfuw7l24] {
            opacity: 1;
        }

/* =========================================
   GENEL BUTONLAR
========================================= */

.product-main-button[b-2flfuw7l24],
.cta-button[b-2flfuw7l24] {
    display: inline-flex;
    align-items: center;
    gap: 15px;
    background: #00aeca;
    color: white;
    padding: 15px 28px;
    border-radius: 7px;
    text-decoration: none;
    font-weight: 700;
    margin-top: 18px;
    transition: .3s ease;
}

    .product-main-button:hover[b-2flfuw7l24],
    .cta-button:hover[b-2flfuw7l24] {
        background: #087da9;
        color: white;
        transform: translateY(-3px);
    }

/* =========================================
   TANITIM
========================================= */

.product-intro[b-2flfuw7l24] {
    padding-top: 90px;
    padding-bottom: 90px;
    text-align: center;
}

.intro-heading[b-2flfuw7l24] {
    max-width: 800px;
    margin: auto;
}

    .intro-heading h2[b-2flfuw7l24],
    .section-heading h2[b-2flfuw7l24] {
        font-size: clamp(1.8rem, 3vw, 2.6rem);
        font-weight: 800;
        color: #193b56;
        margin-bottom: 20px;
    }

    .intro-heading p[b-2flfuw7l24],
    .section-heading p[b-2flfuw7l24] {
        color: #647585;
        line-height: 1.8;
        font-size: 1rem;
    }

/* =========================================
   BÖLÜM BAŞLIKLARI
========================================= */

.product-eyebrow[b-2flfuw7l24],
.section-label[b-2flfuw7l24] {
    display: inline-block;
    color: #00aeca;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: 2px;
    margin-bottom: 18px;
}

.section-heading[b-2flfuw7l24] {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 45px;
}

/* =========================================
   AVANTAJLAR VE ÜRÜN MODELLERİ
========================================= */

.product-benefits[b-2flfuw7l24],
.product-models[b-2flfuw7l24] {
    background: #f3f8fc;
    padding: 85px 0;
}

.benefit-grid[b-2flfuw7l24] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.benefit-card[b-2flfuw7l24] {
    background: white;
    border: 1px solid #e4edf3;
    border-radius: 14px;
    padding: 32px 24px;
    transition: .3s ease;
}

    .benefit-card:hover[b-2flfuw7l24] {
        transform: translateY(-7px);
        box-shadow: 0 15px 35px rgba(30, 90, 130, .10);
    }

    .benefit-card i[b-2flfuw7l24] {
        font-size: 2.2rem;
        color: #00aeca;
        display: inline-block;
        margin-bottom: 22px;
    }

    .benefit-card h3[b-2flfuw7l24] {
        color: #193b56;
        font-size: 1.1rem;
        font-weight: 700;
    }

    .benefit-card p[b-2flfuw7l24] {
        color: #71808d;
        font-size: .9rem;
        line-height: 1.7;
        margin-bottom: 0;
    }

/* =========================================
   TEKNOLOJİ
========================================= */

.product-technology[b-2flfuw7l24] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 65px;
    align-items: center;
    padding-top: 100px;
    padding-bottom: 100px;
}

.technology-image img[b-2flfuw7l24] {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 18px;
}

.technology-content h2[b-2flfuw7l24] {
    color: #193b56;
    font-size: 2.3rem;
    font-weight: 800;
    margin-bottom: 22px;
}

.technology-content p[b-2flfuw7l24] {
    color: #647585;
    line-height: 1.9;
}

.technology-link[b-2flfuw7l24] {
    display: inline-flex;
    gap: 12px;
    color: #008fb5;
    font-weight: 700;
    text-decoration: none;
    margin-top: 15px;
}

    .technology-link:hover[b-2flfuw7l24] {
        color: #087da9;
    }

/* =========================================
   ÜRÜN MODELLERİ
========================================= */

.model-placeholder[b-2flfuw7l24] {
    background: white;
    border: 1px dashed #b7d6e5;
    border-radius: 15px;
    padding: 55px 25px;
    text-align: center;
}

    .model-placeholder i[b-2flfuw7l24] {
        font-size: 3rem;
        color: #00aeca;
    }

    .model-placeholder h3[b-2flfuw7l24] {
        color: #193b56;
        font-weight: 800;
        margin-top: 18px;
    }

    .model-placeholder p[b-2flfuw7l24] {
        color: #71808d;
    }

/* =========================================
   İLETİŞİM ÇAĞRISI
========================================= */

.product-cta[b-2flfuw7l24] {
    padding: 65px 0;
    background: linear-gradient(110deg, #e9f6fc, #f5fbfd);
}

.cta-content[b-2flfuw7l24] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

    .cta-content h2[b-2flfuw7l24] {
        color: #193b56;
        font-size: 2rem;
        font-weight: 800;
        max-width: 650px;
    }

    .cta-content p[b-2flfuw7l24] {
        color: #647585;
    }

/* =========================================
   ÇÖZÜMLERİMİZ MENÜ HOVER EFEKTİ
========================================= */

.cozumler-menu-panel .dropdown-item-custom[b-2flfuw7l24] {
    transition: all .2s ease !important;
    position: relative;
}

    .cozumler-menu-panel .dropdown-item-custom:hover[b-2flfuw7l24] {
        background-color: #eef8fc !important;
        transform: translateX(5px);
    }

        .cozumler-menu-panel .dropdown-item-custom:hover .fw-bold[b-2flfuw7l24] {
            color: #007bff !important;
        }

        .cozumler-menu-panel .dropdown-item-custom:hover small[b-2flfuw7l24] {
            color: #64748b !important;
        }

/* =========================================
   TABLET UYUMLULUK
========================================= */

@media (max-width: 992px) {

    .benefit-grid[b-2flfuw7l24] {
        grid-template-columns: repeat(2, 1fr);
    }

    .product-technology[b-2flfuw7l24] {
        gap: 35px;
    }
}

/* =========================================
   MOBİL UYUMLULUK
========================================= */

@media (max-width: 768px) {

    /* HERO SLIDER */

    .product-hero[b-2flfuw7l24] {
        aspect-ratio: auto;
        min-height: 380px;
        max-height: none;
    }

    .product-hero-inner[b-2flfuw7l24] {
        padding: 0 5% 25px;
    }

    .product-hero .product-main-button[b-2flfuw7l24] {
        padding: 11px 23px;
        font-size: 14px;
    }

    .product-hero-carousel .carousel-control-prev[b-2flfuw7l24],
    .product-hero-carousel .carousel-control-next[b-2flfuw7l24] {
        width: 10%;
    }

    /* TANITIM */

    .product-intro[b-2flfuw7l24] {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    /* AVANTAJLAR VE MODELLER */

    .product-benefits[b-2flfuw7l24],
    .product-models[b-2flfuw7l24] {
        padding: 60px 0;
    }

    .benefit-grid[b-2flfuw7l24] {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    /* TEKNOLOJİ */

    .product-technology[b-2flfuw7l24] {
        grid-template-columns: 1fr;
        padding-top: 60px;
        padding-bottom: 60px;
    }

    .technology-image img[b-2flfuw7l24] {
        height: 270px;
    }

    .technology-content h2[b-2flfuw7l24] {
        font-size: 1.8rem;
    }

    /* İLETİŞİM */

    .cta-content[b-2flfuw7l24] {
        flex-direction: column;
        align-items: flex-start;
    }

        .cta-content h2[b-2flfuw7l24] {
            font-size: 1.65rem;
        }
}
/* _content/WEB/Components/Pages/Evsel/EvselEsatis.razor.rz.scp.css */
/* =========================================================
   İNCELE BUTONU
   ========================================================= */

.incele-btn[b-55vj150skr] {
    position: relative;
    overflow: hidden;
    border: none !important;
    color: #ffffff !important;
    font-weight: 700;
    min-width: 105px;
    background: linear-gradient( 120deg, #6f42c1, #8b5cf6, #d946ef, #ec4899, #ef4444, #f59e0b, #eab308, #22c55e, #06b6d4, #3b82f6, #6f42c1 );
    background-size: 500% 500%;
    /* SADECE RENK ANİMASYONU */
    animation: inceleRenkDongusu-b-55vj150skr 8s ease infinite;
    box-shadow: 0 6px 18px rgba(111, 66, 193, 0.22);
    /* Büyüklüğü ayrı kontrol ediyoruz */
    scale: 1;
    transition: scale 0.2s ease, box-shadow 0.25s ease;
}


    /* =========================================================
   YAZI + İKON
   ========================================================= */

    .incele-btn span[b-55vj150skr],
    .incele-btn i[b-55vj150skr] {
        position: relative;
        z-index: 2;
        color: #ffffff !important;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    }


    /* =========================================================
   BEYAZ PARLAMA
   ========================================================= */

    .incele-btn[b-55vj150skr]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 110deg, transparent 20%, rgba(255, 255, 255, 0.30) 45%, transparent 70% );
        transform: translateX(-120%);
        animation: inceleParlama-b-55vj150skr 4s ease-in-out infinite;
        pointer-events: none;
    }


/* =========================================================
   NORMAL SALINIM
   ========================================================= */

@keyframes inceleBuyume-b-55vj150skr {

    0% {
        scale: 1;
    }

    15% {
        scale: 1.5;
    }

    30% {
        scale: 0.75;
    }

    45% {
        scale: 1.5;
    }

    60% {
        scale: 0.75;
    }

    75% {
        scale: 1.5;
    }

    90% {
        scale: 0.75;
    }

    100% {
        scale: 1;
    }
}


/* =========================================================
   HOVER
   ========================================================= */

.incele-btn:hover[b-55vj150skr] {
    /* Mouse hangi butondaysa SADECE O buton büyür */
    scale: 1.5;
    color: #ffffff !important;
    box-shadow: 0 12px 30px rgba(111, 66, 193, 0.40);
}


/* =========================================================
   MOUSE AYRILDIĞINDA
   ========================================================= */

.incele-btn:not(:hover)[b-55vj150skr] {
    /* Her buton kendi normal animasyonuna devam eder */
}


/* =========================================================
   TIKLAMA
   ========================================================= */

.incele-btn:active[b-55vj150skr] {
    scale: 1.35;
    box-shadow: 0 4px 12px rgba(111, 66, 193, 0.25);
}


/* =========================================================
   RENK ANİMASYONU
   HER BUTON BAĞIMSIZ RENK DÖNGÜSÜ
   ========================================================= */

@keyframes inceleRenkDongusu-b-55vj150skr {

    0% {
        background-position: 0% 50%;
    }

    20% {
        background-position: 25% 50%;
    }

    40% {
        background-position: 50% 50%;
    }

    60% {
        background-position: 75% 50%;
    }

    80% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}


/* =========================================================
   BEYAZ PARLAMA
   ========================================================= */

@keyframes inceleParlama-b-55vj150skr {

    0% {
        transform: translateX(-120%);
    }

    45% {
        transform: translateX(120%);
    }

    100% {
        transform: translateX(120%);
    }
}
/* _content/WEB/Components/Pages/Evsel/EvselEsatisDetay.razor.rz.scp.css */
.urun-lightbox[b-o51bnqr3mf] {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
}

.urun-lightbox-resim-alani[b-o51bnqr3mf] {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.urun-lightbox-resim[b-o51bnqr3mf] {
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    user-select: none;
    border-radius: 8px;
}

.urun-lightbox-kapat[b-o51bnqr3mf] {
    position: absolute;
    top: 25px;
    right: 30px;
    width: 48px;
    height: 48px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    color: white;
    font-size: 20px;
    z-index: 10;
    cursor: pointer;
    transition: .2s;
}

    .urun-lightbox-kapat:hover[b-o51bnqr3mf] {
        background: rgba(255,255,255,.25);
        transform: scale(1.08);
    }

.urun-lightbox-ok[b-o51bnqr3mf] {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 55px;
    height: 55px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,.14);
    color: white;
    font-size: 28px;
    z-index: 10;
    cursor: pointer;
    transition: .2s;
}

    .urun-lightbox-ok:hover[b-o51bnqr3mf] {
        background: rgba(255,255,255,.28);
        transform: translateY(-50%) scale(1.08);
    }

.urun-lightbox-sol[b-o51bnqr3mf] {
    left: 25px;
}

.urun-lightbox-sag[b-o51bnqr3mf] {
    right: 25px;
}

.urun-lightbox-alt[b-o51bnqr3mf] {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.55);
    color: white;
    padding: 7px 14px;
    border-radius: 20px;
    font-size: 13px;
}

@media (max-width: 768px) {

    .urun-lightbox[b-o51bnqr3mf] {
        padding: 15px;
    }

    .urun-lightbox-resim[b-o51bnqr3mf] {
        max-width: 94vw;
        max-height: 82vh;
    }

    .urun-lightbox-ok[b-o51bnqr3mf] {
        width: 42px;
        height: 42px;
        font-size: 20px;
    }

    .urun-lightbox-sol[b-o51bnqr3mf] {
        left: 10px;
    }

    .urun-lightbox-sag[b-o51bnqr3mf] {
        right: 10px;
    }

    .urun-lightbox-kapat[b-o51bnqr3mf] {
        top: 15px;
        right: 15px;
    }
}
/* =========================================================
   ÜRÜN NAVİGASYON
   ========================================================= */

.urun-navigasyon[b-o51bnqr3mf] {
    background: #ffffff;
    border: 1px solid #e8e6f1;
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 30px rgba(30, 25, 70, 0.06);
}

.urun-navigasyon-ust[b-o51bnqr3mf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 16px;
}

.urun-navigasyon-label[b-o51bnqr3mf] {
    color: #6f42c1;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.urun-navigasyon-baslik[b-o51bnqr3mf] {
    margin: 0;
    color: #17172b;
    font-weight: 800;
}

.urun-sayac[b-o51bnqr3mf] {
    background: #f5f2ff;
    color: #6f42c1;
    padding: 7px 13px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 700;
    white-space: nowrap;
}


/* =========================================================
   FİLTRE BUTONLARI
   ========================================================= */

.urun-filtreler[b-o51bnqr3mf] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.urun-filtre-btn[b-o51bnqr3mf] {
    border: 1px solid #e6e3ef;
    background: #ffffff;
    color: #555568;
    border-radius: 30px;
    padding: 8px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

    .urun-filtre-btn i[b-o51bnqr3mf] {
        margin-right: 5px;
    }

    .urun-filtre-btn:hover[b-o51bnqr3mf] {
        color: #6f42c1;
        background: #f7f5ff;
        border-color: #dcd2ff;
        transform: translateY(-1px);
    }

    .urun-filtre-btn.aktif[b-o51bnqr3mf] {
        color: #ffffff;
        border-color: transparent;
        background: linear-gradient( 135deg, #6f42c1 0%, #795ee8 60%, #16bfc0 140% );
        box-shadow: 0 6px 16px rgba(111, 66, 193, 0.20);
    }


/* =========================================================
   ÜRÜN SEÇİM ALANI
   ========================================================= */

.urun-secim-alani[b-o51bnqr3mf] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.urun-gecis-btn[b-o51bnqr3mf] {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border: 1px solid #e4e1ed;
    background: #ffffff;
    color: #6f42c1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .urun-gecis-btn:hover:not(:disabled)[b-o51bnqr3mf] {
        background: #6f42c1;
        color: #ffffff;
        border-color: #6f42c1;
        transform: scale(1.06);
    }

    .urun-gecis-btn:disabled[b-o51bnqr3mf] {
        opacity: 0.4;
        cursor: not-allowed;
    }


/* =========================================================
   COMBOBOX
   ========================================================= */

.urun-combobox[b-o51bnqr3mf] {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

    .urun-combobox > i[b-o51bnqr3mf] {
        position: absolute;
        left: 16px;
        color: #6f42c1;
        font-size: 18px;
        z-index: 2;
    }

    .urun-combobox select[b-o51bnqr3mf] {
        width: 100%;
        height: 44px;
        border: 1px solid #e3e0eb;
        border-radius: 12px;
        background: #fafafe;
        color: #252536;
        font-size: 0.85rem;
        font-weight: 600;
        padding: 0 42px 0 45px;
        outline: none;
        cursor: pointer;
        transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    }

        .urun-combobox select:hover[b-o51bnqr3mf] {
            background: #ffffff;
            border-color: #cfc5f5;
        }

        .urun-combobox select:focus[b-o51bnqr3mf] {
            background: #ffffff;
            border-color: #6f42c1;
            box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.10);
        }


/* =========================================================
   SIRALAMA
   ========================================================= */

.urun-siralama[b-o51bnqr3mf] {
    margin-top: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    color: #77758a;
    font-size: 0.76rem;
    font-weight: 600;
}

    .urun-siralama span[b-o51bnqr3mf] {
        display: flex;
        align-items: center;
        gap: 5px;
    }

        .urun-siralama span i[b-o51bnqr3mf] {
            color: #6f42c1;
            font-size: 15px;
        }

    .urun-siralama select[b-o51bnqr3mf] {
        border: 1px solid #e3e0eb;
        background: #fafafe;
        color: #454456;
        border-radius: 9px;
        padding: 6px 30px 6px 10px;
        font-size: 0.75rem;
        font-weight: 600;
        outline: none;
        cursor: pointer;
    }

        .urun-siralama select:focus[b-o51bnqr3mf] {
            border-color: #6f42c1;
            box-shadow: 0 0 0 3px rgba(111, 66, 193, 0.08);
        }


/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 768px) {

    .urun-navigasyon[b-o51bnqr3mf] {
        padding: 15px;
        border-radius: 16px;
    }

    .urun-navigasyon-ust[b-o51bnqr3mf] {
        align-items: flex-start;
        margin-bottom: 14px;
    }

    .urun-navigasyon-baslik[b-o51bnqr3mf] {
        font-size: 1rem;
    }

    .urun-sayac[b-o51bnqr3mf] {
        font-size: 0.7rem;
        padding: 6px 10px;
    }

    .urun-filtreler[b-o51bnqr3mf] {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 5px;
        scrollbar-width: thin;
    }

    .urun-filtre-btn[b-o51bnqr3mf] {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .urun-secim-alani[b-o51bnqr3mf] {
        gap: 7px;
    }

    .urun-gecis-btn[b-o51bnqr3mf] {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .urun-combobox select[b-o51bnqr3mf] {
        height: 40px;
        font-size: 0.78rem;
    }

    .urun-siralama[b-o51bnqr3mf] {
        justify-content: space-between;
    }
}
/* =========================================================
   ÜRÜN SINIF ETİKETLERİ
   ========================================================= */

.urun-etiketler[b-o51bnqr3mf] {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.urun-etiket[b-o51bnqr3mf] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 11px;
    border-radius: 20px;
    background: #f5f2ff;
    border: 1px solid #e5defb;
    color: #6f42c1;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
    transition: all .2s ease;
}

    .urun-etiket i[b-o51bnqr3mf] {
        font-size: 0.75rem;
    }

    .urun-etiket:hover[b-o51bnqr3mf] {
        background: #6f42c1;
        border-color: #6f42c1;
        color: #ffffff;
        transform: translateY(-1px);
    }


/* =========================================================
   ÜRÜN FİLTRE ALANI - ÇOKLU SINIF
   ========================================================= */

.urun-filtreler[b-o51bnqr3mf] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.urun-filtre-btn[b-o51bnqr3mf] {
    border: 1px solid #e6e3ef;
    background: #ffffff;
    color: #555568;
    border-radius: 30px;
    padding: 8px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

    .urun-filtre-btn:hover[b-o51bnqr3mf] {
        color: #6f42c1;
        background: #f7f5ff;
        border-color: #dcd2ff;
        transform: translateY(-1px);
    }

    .urun-filtre-btn.aktif[b-o51bnqr3mf] {
        color: #ffffff;
        border-color: transparent;
        background: linear-gradient( 135deg, #6f42c1 0%, #795ee8 60%, #16bfc0 140% );
        box-shadow: 0 6px 16px rgba(111, 66, 193, .20);
    }


/* =========================================================
   MOBİL SINIFLAR
   ========================================================= */

@media (max-width: 768px) {

    .urun-etiketler[b-o51bnqr3mf] {
        gap: 5px;
    }

    .urun-etiket[b-o51bnqr3mf] {
        font-size: 0.68rem;
        padding: 5px 9px;
    }
}
/* _content/WEB/Components/Pages/Evsel/Kategoriler/Kompakt.razor.rz.scp.css */
.transition-hover[b-jaw2fitt9g] {
    transition: all 0.3s ease;
}

    .transition-hover:hover[b-jaw2fitt9g] {
        transform: scale(1.03);
        box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
        z-index: 10;
    }
/* _content/WEB/Components/Pages/Girisler/Crm.razor.rz.scp.css */
/* =========================================================
   TUSASER CRM - ANA ALAN
   ========================================================= */

.crm-workspace[b-7a2fn1orq4] {
    display: flex;
    width: 100%;
    min-height: calc(100vh - 72px);
    background: #f5f7fb;
}


/* =========================================================
   SOL CRM MENÜ
   ========================================================= */

.crm-sidebar[b-7a2fn1orq4] {
    width: 250px;
    min-width: 250px;
    background: #ffffff;
    border-right: 1px solid #e7eaf0;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 72px);
    position: sticky;
    top: 72px;
    overflow: hidden;
}


/* Başlık */

.crm-sidebar-header[b-7a2fn1orq4] {
    padding: 22px 18px 16px;
    border-bottom: 1px solid #edf0f5;
}

.crm-sidebar-title[b-7a2fn1orq4] {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .crm-sidebar-title > i[b-7a2fn1orq4] {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: #eef2ff;
        color: #6658d3;
        font-size: 18px;
    }

    .crm-sidebar-title strong[b-7a2fn1orq4] {
        display: block;
        font-size: 12px;
        font-weight: 800;
        color: #273044;
        letter-spacing: .5px;
    }

    .crm-sidebar-title span[b-7a2fn1orq4] {
        display: block;
        margin-top: 2px;
        font-size: 11px;
        color: #9299a8;
    }


/* =========================================================
   MODÜL ARAMA
   ========================================================= */

.crm-module-search[b-7a2fn1orq4] {
    margin: 14px 14px 10px;
    position: relative;
}

    .crm-module-search > i[b-7a2fn1orq4] {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #9ba3b2;
        font-size: 14px;
    }

    .crm-module-search input[b-7a2fn1orq4] {
        width: 100%;
        height: 38px;
        padding: 0 12px 0 36px;
        border: 1px solid #e5e8ee;
        border-radius: 9px;
        outline: none;
        background: #f8f9fb;
        color: #303746;
        font-size: 12px;
        transition: .2s;
    }

        .crm-module-search input:focus[b-7a2fn1orq4] {
            border-color: #8b7ee8;
            background: #ffffff;
            box-shadow: 0 0 0 3px rgba(102, 88, 211, .08);
        }


/* =========================================================
   MODÜL LİSTESİ
   ========================================================= */

.crm-sidebar-modules[b-7a2fn1orq4] {
    flex: 1;
    overflow-y: auto;
    padding: 4px 10px 18px;
}

    .crm-sidebar-modules[b-7a2fn1orq4]::-webkit-scrollbar {
        width: 5px;
    }

    .crm-sidebar-modules[b-7a2fn1orq4]::-webkit-scrollbar-thumb {
        background: #d7dce5;
        border-radius: 10px;
    }

.crm-sidebar-module[b-7a2fn1orq4] {
    width: 100%;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    margin-bottom: 3px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #596274;
    cursor: pointer;
    text-align: left;
    transition: all .18s ease;
}

    .crm-sidebar-module:hover[b-7a2fn1orq4] {
        background: #f5f6fb;
        color: #4036a5;
    }

    .crm-sidebar-module.active[b-7a2fn1orq4] {
        background: linear-gradient( 90deg, #eeeafd 0%, #f5f3ff 100% );
        color: #5446c2;
        font-weight: 700;
    }

.crm-module-icon[b-7a2fn1orq4] {
    width: 30px;
    height: 30px;
    min-width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: #f4f5f8;
    color: #737b8b;
    font-size: 14px;
}

.crm-sidebar-module.active .crm-module-icon[b-7a2fn1orq4] {
    background: #ffffff;
    color: #6658d3;
    box-shadow: 0 2px 7px rgba(50, 40, 120, .08);
}

.crm-module-name[b-7a2fn1orq4] {
    flex: 1;
    font-size: 12px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.crm-module-active[b-7a2fn1orq4] {
    color: #6658d3;
    font-size: 12px;
}


/* =========================================================
   SAĞ ANA ALAN
   ========================================================= */

.crm-content[b-7a2fn1orq4] {
    flex: 1;
    min-width: 0;
    padding: 26px 30px 40px;
}


/* =========================================================
   SAYFA BAŞLIĞI
   ========================================================= */

.crm-content-header[b-7a2fn1orq4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.crm-page-title[b-7a2fn1orq4] {
    display: flex;
    align-items: center;
    gap: 14px;
}

.crm-page-icon[b-7a2fn1orq4] {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: linear-gradient(135deg, #6d5dd3, #8174e4);
    color: #ffffff;
    font-size: 22px;
    box-shadow: 0 8px 20px rgba(102, 88, 211, .18);
}

.crm-page-eyebrow[b-7a2fn1orq4] {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.2px;
    color: #8b92a2;
    margin-bottom: 3px;
}

.crm-page-title h1[b-7a2fn1orq4] {
    margin: 0;
    font-size: 25px;
    font-weight: 800;
    color: #202635;
}

.crm-page-title p[b-7a2fn1orq4] {
    margin: 4px 0 0;
    font-size: 12px;
    color: #858c9c;
}


/* =========================================================
   ÜST BUTONLAR
   ========================================================= */

.crm-page-actions[b-7a2fn1orq4] {
    display: flex;
    align-items: center;
    gap: 9px;
}

.crm-record-count[b-7a2fn1orq4] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: #ffffff;
    border: 1px solid #e8ebf1;
    border-radius: 9px;
}

    .crm-record-count span[b-7a2fn1orq4] {
        color: #8c94a4;
        font-size: 11px;
    }

    .crm-record-count strong[b-7a2fn1orq4] {
        color: #31394a;
        font-size: 15px;
    }

.crm-refresh-button[b-7a2fn1orq4],
.crm-new-button[b-7a2fn1orq4] {
    height: 40px;
    border-radius: 9px;
    padding: 0 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition: .2s;
}

.crm-refresh-button[b-7a2fn1orq4] {
    border: 1px solid #e2e5eb;
    background: #ffffff;
    color: #5d6575;
}

    .crm-refresh-button:hover[b-7a2fn1orq4] {
        background: #f7f8fa;
        border-color: #d5d9e1;
    }

.crm-new-button[b-7a2fn1orq4] {
    border: 0;
    background: #6658d3;
    color: #ffffff;
    box-shadow: 0 5px 14px rgba(102, 88, 211, .18);
}

    .crm-new-button:hover[b-7a2fn1orq4] {
        background: #5749c4;
        transform: translateY(-1px);
    }


/* =========================================================
   FİLTRE PANELİ
   ========================================================= */

.crm-filter-panel[b-7a2fn1orq4],
.crm-data-panel[b-7a2fn1orq4],
.crm-form-panel[b-7a2fn1orq4] {
    background: #ffffff;
    border: 1px solid #e7eaf0;
    border-radius: 14px;
    box-shadow: 0 3px 14px rgba(35, 42, 60, .035);
}

.crm-filter-panel[b-7a2fn1orq4] {
    padding: 19px 20px;
    margin-bottom: 18px;
}

.crm-filter-header[b-7a2fn1orq4] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.crm-section-label[b-7a2fn1orq4] {
    display: block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.1px;
    color: #8f96a5;
    margin-bottom: 3px;
}

.crm-filter-header h2[b-7a2fn1orq4],
.crm-data-header h2[b-7a2fn1orq4],
.crm-form-header h2[b-7a2fn1orq4] {
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    color: #283042;
}

.crm-filter-clear[b-7a2fn1orq4] {
    border: 0;
    background: transparent;
    color: #8a91a0;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
}

    .crm-filter-clear:hover[b-7a2fn1orq4] {
        color: #6658d3;
    }


/* =========================================================
   FİLTRE ALANLARI
   ========================================================= */

.crm-filter-grid[b-7a2fn1orq4] {
    display: grid;
    grid-template-columns: minmax(220px, 1.6fr) repeat(4, minmax(150px, 1fr));
    gap: 12px;
}

.crm-filter-item label[b-7a2fn1orq4] {
    display: block;
    margin-bottom: 6px;
    font-size: 10px;
    font-weight: 700;
    color: #626b7c;
}

.crm-filter-item input[b-7a2fn1orq4],
.crm-filter-item select[b-7a2fn1orq4] {
    width: 100%;
    height: 38px;
    padding: 0 11px;
    border: 1px solid #e1e5eb;
    border-radius: 8px;
    outline: none;
    background: #fafbfc;
    color: #353d4d;
    font-size: 12px;
    transition: .2s;
}

    .crm-filter-item input:focus[b-7a2fn1orq4],
    .crm-filter-item select:focus[b-7a2fn1orq4] {
        background: #ffffff;
        border-color: #8174df;
        box-shadow: 0 0 0 3px rgba(102, 88, 211, .07);
    }

.crm-input-wrapper[b-7a2fn1orq4] {
    position: relative;
}

    .crm-input-wrapper i[b-7a2fn1orq4] {
        position: absolute;
        left: 12px;
        top: 50%;
        transform: translateY(-50%);
        color: #9aa1af;
        font-size: 13px;
    }

    .crm-input-wrapper input[b-7a2fn1orq4] {
        padding-left: 34px;
    }


/* =========================================================
   DATA PANEL
   ========================================================= */

.crm-data-panel[b-7a2fn1orq4] {
    overflow: hidden;
}

.crm-data-header[b-7a2fn1orq4] {
    min-height: 68px;
    padding: 15px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #edf0f4;
}

.crm-data-tools[b-7a2fn1orq4] {
    font-size: 11px;
    color: #9299a7;
}


/* =========================================================
   DATA TABLE
   ========================================================= */

.crm-table-wrapper[b-7a2fn1orq4] {
    width: 100%;
    overflow-x: auto;
}

    .crm-table-wrapper[b-7a2fn1orq4]::-webkit-scrollbar {
        height: 6px;
    }

    .crm-table-wrapper[b-7a2fn1orq4]::-webkit-scrollbar-thumb {
        background: #d4d9e2;
        border-radius: 10px;
    }

.crm-data-table[b-7a2fn1orq4] {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    font-size: 11px;
}

    .crm-data-table thead[b-7a2fn1orq4] {
        background: #f8f9fb;
    }

    .crm-data-table th[b-7a2fn1orq4] {
        padding: 12px 14px;
        text-align: left;
        white-space: nowrap;
        color: #697284;
        font-size: 10px;
        font-weight: 800;
        border-bottom: 1px solid #e9ecf1;
    }

    .crm-data-table td[b-7a2fn1orq4] {
        padding: 12px 14px;
        color: #414958;
        border-bottom: 1px solid #f0f2f5;
        white-space: nowrap;
        max-width: 320px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .crm-data-table tbody tr[b-7a2fn1orq4] {
        transition: background .15s ease;
    }

        .crm-data-table tbody tr:hover[b-7a2fn1orq4] {
            background: #fafaff;
        }

        .crm-data-table tbody tr:last-child td[b-7a2fn1orq4] {
            border-bottom: 0;
        }


/* =========================================================
   SATIR İŞLEMLERİ
   ========================================================= */

.crm-action-column[b-7a2fn1orq4] {
    text-align: center !important;
    width: 120px;
}

.crm-row-actions[b-7a2fn1orq4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

    .crm-row-actions button[b-7a2fn1orq4] {
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #e4e7ed;
        border-radius: 7px;
        background: #ffffff;
        color: #737b8b;
        cursor: pointer;
        transition: .18s;
    }

        .crm-row-actions button:hover[b-7a2fn1orq4] {
            border-color: #8174df;
            color: #6658d3;
            background: #f7f6ff;
        }

        .crm-row-actions button.danger:hover[b-7a2fn1orq4] {
            border-color: #efb5bd;
            color: #d64e60;
            background: #fff6f7;
        }


/* =========================================================
   YÜKLENİYOR
   ========================================================= */

.crm-loading[b-7a2fn1orq4] {
    min-height: 260px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    color: #697284;
}

    .crm-loading .spinner-border[b-7a2fn1orq4] {
        width: 28px;
        height: 28px;
        color: #6658d3;
    }

    .crm-loading strong[b-7a2fn1orq4] {
        font-size: 13px;
    }

    .crm-loading span[b-7a2fn1orq4] {
        font-size: 11px;
        color: #9aa1af;
    }


/* =========================================================
   BOŞ DURUM
   ========================================================= */

.crm-empty[b-7a2fn1orq4] {
    min-height: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
}

.crm-empty-icon[b-7a2fn1orq4] {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: #f1f0ff;
    color: #6658d3;
    font-size: 25px;
    margin-bottom: 14px;
}

.crm-empty h3[b-7a2fn1orq4] {
    margin: 0 0 5px;
    font-size: 15px;
    color: #303848;
}

.crm-empty p[b-7a2fn1orq4] {
    margin: 0 0 17px;
    color: #9299a7;
    font-size: 11px;
}


/* =========================================================
   HATA
   ========================================================= */

.crm-error[b-7a2fn1orq4] {
    margin: 20px;
    padding: 15px 17px;
    display: flex;
    gap: 12px;
    border: 1px solid #f1c6cc;
    border-radius: 10px;
    background: #fff7f8;
    color: #b43d4e;
}

    .crm-error > i[b-7a2fn1orq4] {
        font-size: 19px;
    }

    .crm-error strong[b-7a2fn1orq4] {
        display: block;
        font-size: 12px;
    }

    .crm-error p[b-7a2fn1orq4] {
        margin: 3px 0 0;
        font-size: 11px;
    }


/* =========================================================
   FORM
   ========================================================= */

.crm-form-panel[b-7a2fn1orq4] {
    margin-top: 18px;
    overflow: hidden;
}

.crm-form-header[b-7a2fn1orq4] {
    min-height: 66px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #edf0f4;
}

.crm-form-close[b-7a2fn1orq4] {
    width: 34px;
    height: 34px;
    border: 1px solid #e3e6eb;
    border-radius: 8px;
    background: #ffffff;
    color: #7a8291;
    cursor: pointer;
}

    .crm-form-close:hover[b-7a2fn1orq4] {
        background: #f7f7fa;
        color: #6658d3;
    }

.crm-form-content[b-7a2fn1orq4] {
    padding: 35px;
}

.crm-form-placeholder[b-7a2fn1orq4] {
    min-height: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.crm-form-placeholder-icon[b-7a2fn1orq4] {
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: #f1f0ff;
    color: #6658d3;
    font-size: 21px;
    margin-bottom: 12px;
}

.crm-form-placeholder h3[b-7a2fn1orq4] {
    margin: 0 0 5px;
    font-size: 15px;
    color: #303848;
}

.crm-form-placeholder p[b-7a2fn1orq4] {
    max-width: 500px;
    margin: 0;
    font-size: 11px;
    line-height: 1.6;
    color: #8e96a5;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {

    .crm-sidebar[b-7a2fn1orq4] {
        width: 220px;
        min-width: 220px;
    }

    .crm-content[b-7a2fn1orq4] {
        padding: 22px;
    }

    .crm-filter-grid[b-7a2fn1orq4] {
        grid-template-columns: repeat(3, 1fr);
    }

    .crm-filter-wide[b-7a2fn1orq4] {
        grid-column: span 2;
    }
}


@media (max-width: 900px) {

    .crm-sidebar[b-7a2fn1orq4] {
        width: 200px;
        min-width: 200px;
    }

    .crm-content-header[b-7a2fn1orq4] {
        align-items: flex-start;
        flex-direction: column;
    }

    .crm-page-actions[b-7a2fn1orq4] {
        width: 100%;
    }

    .crm-filter-grid[b-7a2fn1orq4] {
        grid-template-columns: repeat(2, 1fr);
    }

    .crm-filter-wide[b-7a2fn1orq4] {
        grid-column: span 2;
    }
}


@media (max-width: 700px) {

    .crm-workspace[b-7a2fn1orq4] {
        display: block;
    }

    .crm-sidebar[b-7a2fn1orq4] {
        position: relative;
        top: 0;
        width: 100%;
        min-width: 100%;
        height: auto;
        max-height: 280px;
    }

    .crm-sidebar-modules[b-7a2fn1orq4] {
        max-height: 180px;
    }

    .crm-content[b-7a2fn1orq4] {
        padding: 18px 14px;
    }

    .crm-page-actions[b-7a2fn1orq4] {
        flex-wrap: wrap;
    }

    .crm-filter-grid[b-7a2fn1orq4] {
        grid-template-columns: 1fr;
    }

    .crm-filter-wide[b-7a2fn1orq4] {
        grid-column: span 1;
    }

    .crm-record-count[b-7a2fn1orq4] {
        flex: 1;
    }
}


@media (max-width: 480px) {

    .crm-page-title h1[b-7a2fn1orq4] {
        font-size: 21px;
    }

    .crm-page-icon[b-7a2fn1orq4] {
        width: 46px;
        height: 46px;
        font-size: 18px;
    }

    .crm-refresh-button span[b-7a2fn1orq4],
    .crm-new-button span[b-7a2fn1orq4] {
        display: none;
    }

    .crm-refresh-button[b-7a2fn1orq4],
    .crm-new-button[b-7a2fn1orq4] {
        width: 40px;
        padding: 0;
    }

    .crm-filter-panel[b-7a2fn1orq4] {
        padding: 15px;
    }

    .crm-filter-header[b-7a2fn1orq4] {
        align-items: flex-start;
        gap: 10px;
    }
}
/* _content/WEB/Components/Pages/Girisler/UyeKayit.razor.rz.scp.css */
/* Genel Sayfa Düzeni */
.mud-container[b-dfh6se7foc] {
    padding-top: 2rem;
    padding-bottom: 4rem;
}

/* Kartın modern görünümü */
.mud-paper[b-dfh6se7foc] {
    border-radius: 16px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
    border: 1px solid rgba(0,0,0,0.05);
}

/* Giriş Alanlarının Şekillendirilmesi */
.mud-input-outlined[b-dfh6se7foc] {
    background-color: #ffffff;
    transition: all 0.3s ease;
}

    .mud-input-outlined:focus-within[b-dfh6se7foc] {
        border-color: #800020 !important; /* TUSASER Kurumsal Rengi */
        box-shadow: 0 0 8px rgba(128, 0, 32, 0.2);
    }

/* Buton Tasarımı */
.mud-button-filled.mud-button-filled-primary[b-dfh6se7foc] {
    background-color: #800020 !important;
    color: white !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: transform 0.2s ease, background 0.3s ease;
}

    .mud-button-filled.mud-button-filled-primary:hover[b-dfh6se7foc] {
        background-color: #a00028 !important;
        transform: translateY(-2px);
    }

/* Link Tasarımı */
.mud-link[b-dfh6se7foc] {
    color: #800020 !important;
    font-weight: 500;
}

/* Başlık */
.mud-typography-h5[b-dfh6se7foc] {
    color: #2c3e50;
    font-weight: 700 !important;
    border-bottom: 3px solid #800020;
    display: inline-block;
    padding-bottom: 5px;
}
/* _content/WEB/Components/Pages/Girisler/UyeMusteriKayit.razor.rz.scp.css */
/* Genel Sayfa Düzeni */
.mud-container[b-w5z6db3aa9] {
    padding-top: 2rem;
    padding-bottom: 4rem;
}

/* Kartın modern görünümü */
.mud-paper[b-w5z6db3aa9] {
    border-radius: 16px !important;
    background: linear-gradient(180deg, #ffffff 0%, #f9f9f9 100%) !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
    border: 1px solid rgba(0,0,0,0.05);
}

/* Giriş Alanlarının Şekillendirilmesi */
.mud-input-outlined[b-w5z6db3aa9] {
    background-color: #ffffff;
    transition: all 0.3s ease;
}

    .mud-input-outlined:focus-within[b-w5z6db3aa9] {
        border-color: #800020 !important; /* TUSASER Kurumsal Rengi */
        box-shadow: 0 0 8px rgba(128, 0, 32, 0.2);
    }

/* Buton Tasarımı */
.mud-button-filled.mud-button-filled-primary[b-w5z6db3aa9] {
    background-color: #800020 !important;
    color: white !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: transform 0.2s ease, background 0.3s ease;
}

    .mud-button-filled.mud-button-filled-primary:hover[b-w5z6db3aa9] {
        background-color: #a00028 !important;
        transform: translateY(-2px);
    }

/* Link Tasarımı */
.mud-link[b-w5z6db3aa9] {
    color: #800020 !important;
    font-weight: 500;
}

/* Başlık */
.mud-typography-h5[b-w5z6db3aa9] {
    color: #2c3e50;
    font-weight: 700 !important;
    border-bottom: 3px solid #800020;
    display: inline-block;
    padding-bottom: 5px;
}
/* _content/WEB/Components/Pages/Iletisim.razor.rz.scp.css */
/* İletişim Sayfası Özel Stilleri */
address[b-z4pqjbr6bz] {
    font-style: normal;
}

.card[b-z4pqjbr6bz] {
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

    .card:hover[b-z4pqjbr6bz] {
        box-shadow: 0 .5rem 1rem rgba(0,0,0,.08) !important;
    }

iframe[b-z4pqjbr6bz] {
    filter: saturate(1.1);
}
/* _content/WEB/Components/Pages/Kurumsal.razor.rz.scp.css */
/* =========================================================
   KURUMSAL SAYFA - GENEL
   ========================================================= */

/* Ana içerik bölümünün tüm alanı kullanmasını sağlar */
section.col-lg-9[b-ej20ub913l] {
    flex: 1 1 auto;
    max-width: 100%;
}

/* Hero alanı */
header.border-bottom[b-ej20ub913l] {
    display: block;
    width: 100% !important;
}

    header.border-bottom h1[b-ej20ub913l],
    header.border-bottom p[b-ej20ub913l] {
        white-space: normal;
        word-break: keep-all;
    }


/* =========================================================
   HERO BAŞLIK
   ========================================================= */

.kurumsal-hero-title[b-ej20ub913l] {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    white-space: nowrap;
}

.kurumsal-label[b-ej20ub913l] {
    color: #6c4ce6;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.kurumsal-hero-title h1[b-ej20ub913l] {
    margin: 0;
    color: #17172b;
    font-size: clamp(2rem, 3.5vw, 3.5rem);
    line-height: 1.1;
    font-weight: 800;
    white-space: nowrap;
}


/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 992px) {

    /* =====================================================
       SOL MENÜ KUTUSU
       ===================================================== */

    aside.col-lg-3[b-ej20ub913l] {
        min-width: 0;
    }

        aside.col-lg-3 .card[b-ej20ub913l] {
            height: 650px !important;
            max-height: 650px !important;
            /*
         * Kartın kendisi scroll olmayacak.
         * Scroll içindeki .list-group'a verilecek.
         */
            overflow: hidden !important;
            background: #ffffff !important;
            border: 1px solid #e9e8f2 !important;
            border-radius: 20px !important;
            padding: 15px !important;
            box-shadow: 0 10px 35px rgba(30, 25, 70, 0.06) !important;
            position: sticky !important;
            top: 110px;
        }


            /* =====================================================
       SOL MENÜ - ASIL SCROLL ALANI
       ===================================================== */

            aside.col-lg-3 .card .list-group[b-ej20ub913l] {
                height: 100% !important;
                max-height: 100% !important;
                overflow-y: auto !important;
                overflow-x: hidden !important;
                overscroll-behavior: contain;
                padding-right: 4px;
                /*
         * Bootstrap'in flex davranışı nedeniyle
         * scroll oluşmasını garanti eder.
         */
                min-height: 0;
            }


            /* =====================================================
       SOL MENÜ SCROLLBAR
       ===================================================== */

            aside.col-lg-3 .card .list-group[b-ej20ub913l] {
                scrollbar-width: thin;
                scrollbar-color: #6c4ce6 transparent;
            }

                aside.col-lg-3 .card .list-group[b-ej20ub913l]::-webkit-scrollbar {
                    width: 6px;
                }

                aside.col-lg-3 .card .list-group[b-ej20ub913l]::-webkit-scrollbar-track {
                    background: transparent;
                }

                aside.col-lg-3 .card .list-group[b-ej20ub913l]::-webkit-scrollbar-thumb {
                    background: linear-gradient( 180deg, #6c4ce6, #16c7c0 );
                    border-radius: 10px;
                }

                    aside.col-lg-3 .card .list-group[b-ej20ub913l]::-webkit-scrollbar-thumb:hover {
                        background: #6c4ce6;
                    }


        /* =====================================================
       SOL MENÜ ELEMANLARI
       ===================================================== */

        aside.col-lg-3 .list-group-item[b-ej20ub913l] {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            color: #252536 !important;
            background: transparent !important;
            padding: 13px 13px 13px 16px !important;
            margin-bottom: 4px;
            border-radius: 12px !important;
            border: 1px solid transparent !important;
            overflow: hidden;
            /*
         * Menü elemanlarının sıkışmasını engeller.
         */
            flex-shrink: 0;
            transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
        }


            /* =====================================================
       SOL MENÜ SOL ÇİZGİ
       ===================================================== */

            aside.col-lg-3 .list-group-item[b-ej20ub913l]::before {
                content: "";
                position: absolute;
                left: 0;
                top: 9px;
                bottom: 9px;
                width: 3px;
                border-radius: 0 5px 5px 0;
                background: transparent;
                transition: background 0.2s ease;
            }


            /* =====================================================
       SOL MENÜ HOVER
       ===================================================== */

            aside.col-lg-3 .list-group-item:hover[b-ej20ub913l] {
                background: #f7f5ff !important;
                color: #6040d2 !important;
                border-color: #e7e0ff !important;
                transform: translateX(3px);
            }


                /* Hover ikon */
                aside.col-lg-3 .list-group-item:hover span > i[b-ej20ub913l] {
                    color: #6040d2 !important;
                }


                /* Hover sağ ok */
                aside.col-lg-3 .list-group-item:hover > i:last-child[b-ej20ub913l] {
                    color: #6040d2 !important;
                    transform: translateX(3px);
                }


            /* =====================================================
       AKTİF / SEÇİLİ MENÜ
       ===================================================== */

            aside.col-lg-3 .list-group-item.active[b-ej20ub913l],
            aside.col-lg-3 .list-group-item.active.bg-primary[b-ej20ub913l] {
                background: linear-gradient( 135deg, #6c4ce6 0%, #795ee8 65%, #16bfc0 140% ) !important;
                color: #ffffff !important;
                border-color: transparent !important;
                box-shadow: 0 8px 22px rgba(108, 76, 230, 0.20) !important;
                transform: translateX(4px);
            }


                /* Aktif sol çizgi */
                aside.col-lg-3 .list-group-item.active[b-ej20ub913l]::before,
                aside.col-lg-3 .list-group-item.active.bg-primary[b-ej20ub913l]::before {
                    background: #ffffff;
                }


                /* Aktif yazılar */
                aside.col-lg-3 .list-group-item.active span[b-ej20ub913l],
                aside.col-lg-3 .list-group-item.active.bg-primary span[b-ej20ub913l] {
                    color: #ffffff !important;
                }


                    /* Aktif ikon */
                    aside.col-lg-3 .list-group-item.active span > i[b-ej20ub913l],
                    aside.col-lg-3 .list-group-item.active.bg-primary span > i[b-ej20ub913l] {
                        color: #ffffff !important;
                    }


                /* Aktif sağ ok */
                aside.col-lg-3 .list-group-item.active > i:last-child[b-ej20ub913l],
                aside.col-lg-3 .list-group-item.active.bg-primary > i:last-child[b-ej20ub913l] {
                    color: #ffffff !important;
                    transform: translateX(3px);
                }


            /* =====================================================
       NORMAL İKONLAR
       ===================================================== */

            aside.col-lg-3 .list-group-item span > i[b-ej20ub913l] {
                color: #6c4ce6;
                transition: color 0.2s ease, transform 0.2s ease;
            }


    /* =====================================================
       SAĞ İÇERİK - BAĞIMSIZ SCROLL
       ===================================================== */

    section.col-lg-9[b-ej20ub913l] {
        height: 650px;
        max-height: 650px;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior: contain;
        scrollbar-width: thin;
        scrollbar-color: #6c4ce6 transparent;
        padding-right: 12px;
    }


        /* Sağ içerik kartı */
        section.col-lg-9 > .card[b-ej20ub913l] {
            min-height: 100%;
        }


        /* =====================================================
       SAĞ İÇERİK BAŞLIKLARI
       ===================================================== */

        section.col-lg-9 h2[b-ej20ub913l] {
            color: #17172b;
        }

        section.col-lg-9 h3[b-ej20ub913l] {
            color: #29263d;
        }

        section.col-lg-9 h4[b-ej20ub913l] {
            color: #29263d;
        }


        /* Bootstrap text-primary renklerini TUSASER rengine çek */
        section.col-lg-9 .text-primary[b-ej20ub913l] {
            color: #6c4ce6 !important;
        }


        /* İnce borderlar */
        section.col-lg-9 .border-light-subtle[b-ej20ub913l] {
            border-color: #e8e7f0 !important;
        }


        /* İçerik kartlarının gölgesi */
        section.col-lg-9 .shadow-sm[b-ej20ub913l] {
            box-shadow: 0 8px 25px rgba(30, 25, 70, 0.05) !important;
        }


        /* =====================================================
       SAĞ SCROLLBAR
       ===================================================== */

        section.col-lg-9[b-ej20ub913l]::-webkit-scrollbar {
            width: 6px;
        }

        section.col-lg-9[b-ej20ub913l]::-webkit-scrollbar-track {
            background: transparent;
        }

        section.col-lg-9[b-ej20ub913l]::-webkit-scrollbar-thumb {
            background: linear-gradient( 180deg, #6c4ce6, #16c7c0 );
            border-radius: 10px;
        }

            section.col-lg-9[b-ej20ub913l]::-webkit-scrollbar-thumb:hover {
                background: #6c4ce6;
            }
}


/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 991.98px) {

    /* Hero */
    .kurumsal-hero-title[b-ej20ub913l] {
        gap: 10px;
        white-space: normal;
        flex-wrap: wrap;
    }

        .kurumsal-hero-title h1[b-ej20ub913l] {
            font-size: 2rem;
            white-space: normal;
        }


    /* =====================================================
       SOL MENÜ MOBİL
       ===================================================== */

    aside.col-lg-3 .card[b-ej20ub913l] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        position: relative !important;
        top: auto !important;
        padding: 15px !important;
    }


        aside.col-lg-3 .card .list-group[b-ej20ub913l] {
            height: auto !important;
            max-height: none !important;
            overflow: visible !important;
            padding-right: 0;
        }


    /* =====================================================
       SAĞ İÇERİK MOBİL
       ===================================================== */

    section.col-lg-9[b-ej20ub913l] {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding-right: 0;
    }
}
/* _content/WEB/Components/Pages/Proje/SuAritmaSimulasyonu.razor.rz.scp.css */
.water-engine-page[b-tla85garao] {
    min-height: 100vh;
    padding: 40px 20px 80px;
    background: linear-gradient(135deg, #f7fbff 0%, #f5f3ff 50%, #eefcff 100%);
    color: #172033;
}

.engine-hero[b-tla85garao] {
    max-width: 1400px;
    margin: 0 auto 30px;
    padding: 42px 48px;
    border-radius: 28px;
    background: linear-gradient(135deg, #ffffff, #f5fbff);
    border: 1px solid rgba(95, 80, 180, .15);
    box-shadow: 0 18px 50px rgba(40, 70, 120, .08);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.engine-badge[b-tla85garao] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 50px;
    background: #f0edff;
    color: #6356c7;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
}

.engine-hero h1[b-tla85garao] {
    margin: 18px 0 12px;
    font-size: clamp(30px, 4vw, 48px);
    font-weight: 800;
    letter-spacing: -.03em;
}

.engine-hero p[b-tla85garao] {
    max-width: 850px;
    margin: 0;
    color: #657084;
    font-size: 16px;
    line-height: 1.8;
}

.engine-hero-icon[b-tla85garao] {
    width: 100px;
    height: 100px;
    flex: 0 0 100px;
    border-radius: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #e9e5ff, #ddf8fa);
    color: #6558c9;
    font-size: 42px;
}

.engine-main[b-tla85garao] {
    max-width: 1400px;
    margin: 0 auto;
}

.engine-card[b-tla85garao] {
    background: rgba(255,255,255,.96);
    border: 2px solid #e4e2f5;
    border-radius: 24px;
    padding: 30px;
    margin-bottom: 24px;
    box-shadow: 0 12px 35px rgba(44, 66, 110, .07);
}

.section-title[b-tla85garao] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
}

.section-number[b-tla85garao] {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6c60cf, #50c8ce);
    color: white;
    font-weight: 800;
}

.section-title h2[b-tla85garao] {
    margin: 0 0 5px;
    font-size: 22px;
    font-weight: 750;
}

.section-title p[b-tla85garao] {
    margin: 0;
    color: #788295;
    font-size: 14px;
}

.project-grid[b-tla85garao] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.form-group[b-tla85garao] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .form-group label[b-tla85garao] {
        font-size: 13px;
        font-weight: 700;
        color: #4d586b;
    }

    .form-group input[b-tla85garao],
    .form-group select[b-tla85garao] {
        width: 100%;
        height: 46px;
        border: 1px solid #dfe3ed;
        border-radius: 12px;
        padding: 0 13px;
        background: #fbfcfe;
        color: #1e293b;
        outline: none;
        transition: .2s;
    }

        .form-group input:focus[b-tla85garao],
        .form-group select:focus[b-tla85garao] {
            border-color: #7164d2;
            box-shadow: 0 0 0 3px rgba(113,100,210,.1);
        }


/* =========================================================
   ANALİZ TABLOSU
   ========================================================= */

.analysis-table[b-tla85garao] {
    width: 100%;
    border: 1px solid #e1e5ef;
    border-radius: 18px;
    overflow: hidden;
}

.analysis-header[b-tla85garao],
.analysis-row[b-tla85garao] {
    display: grid;
    grid-template-columns: 1.25fr 1fr 1fr;
}

.analysis-header[b-tla85garao] {
    background: linear-gradient(135deg, #f5f3ff, #effcfd);
    border-bottom: 2px solid #dddff0;
}

    .analysis-header > div[b-tla85garao] {
        padding: 17px 18px;
    }

.parameter-header[b-tla85garao],
.input-header[b-tla85garao],
.target-header[b-tla85garao] {
    font-size: 14px;
    font-weight: 800;
}

.input-header[b-tla85garao] {
    color: #5264ba;
}

.target-header[b-tla85garao] {
    color: #159ba1;
}

    .input-header i[b-tla85garao],
    .target-header i[b-tla85garao] {
        margin-right: 7px;
    }

.analysis-row[b-tla85garao] {
    min-height: 70px;
    border-bottom: 1px solid #edf0f5;
    align-items: center;
    transition: background .2s;
}

    .analysis-row:last-child[b-tla85garao] {
        border-bottom: none;
    }

    .analysis-row:hover[b-tla85garao] {
        background: #fbfcff;
    }

    .analysis-row > div[b-tla85garao] {
        padding: 10px 18px;
    }

.parameter-name[b-tla85garao] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .parameter-name strong[b-tla85garao] {
        font-size: 14px;
        color: #263246;
    }

    .parameter-name span[b-tla85garao] {
        font-size: 11px;
        color: #8992a3;
    }

.analysis-input input[b-tla85garao] {
    width: 100%;
    height: 42px;
    border: 1px solid #dce1eb;
    border-radius: 10px;
    padding: 0 12px;
    background: white;
    color: #1d2939;
    outline: none;
    transition: .2s;
}

    .analysis-input input:focus[b-tla85garao] {
        border-color: #6d60d1;
        box-shadow: 0 0 0 3px rgba(109,96,209,.09);
    }

.analysis-row .target-header[b-tla85garao] {
    background: #f4ffff;
}


/* =========================================================
   MİKROBİYOLOJİ
   ========================================================= */

.microbial-options[b-tla85garao] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.microbial-option[b-tla85garao] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid #dfe3ed;
    border-radius: 12px;
    background: #fafbfe;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
}

    .microbial-option input[b-tla85garao] {
        accent-color: #6659cb;
    }


/* =========================================================
   MALİYET
   ========================================================= */

.cost-option[b-tla85garao] {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
}

    .cost-option label[b-tla85garao] {
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: 700;
        color: #3f4a5d;
    }

    .cost-option input[b-tla85garao] {
        width: 18px;
        height: 18px;
        accent-color: #6659cb;
    }

    .cost-option small[b-tla85garao] {
        color: #858ea0;
        font-size: 12px;
    }


/* =========================================================
   ANALİZ BUTONU
   ========================================================= */

.analyze-button[b-tla85garao] {
    width: 100%;
    min-height: 58px;
    margin-bottom: 30px;
    border: none;
    border-radius: 16px;
    background: linear-gradient(135deg, #675bd0, #3fbfc5);
    color: white;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 12px 28px rgba(83, 104, 190, .2);
    transition: .25s;
}

    .analyze-button:hover:not(:disabled)[b-tla85garao] {
        transform: translateY(-2px);
        box-shadow: 0 16px 32px rgba(83, 104, 190, .27);
    }

    .analyze-button:disabled[b-tla85garao] {
        opacity: .65;
        cursor: not-allowed;
    }


/* =========================================================
   SONUÇ ALANI
   ========================================================= */

.engine-result-area[b-tla85garao] {
    width: 100%;
}

.empty-result[b-tla85garao],
.loading-result[b-tla85garao] {
    padding: 70px 30px;
    text-align: center;
    background: rgba(255,255,255,.95);
    border: 2px dashed #dcdff0;
    border-radius: 24px;
}

.empty-icon[b-tla85garao],
.loading-circle[b-tla85garao] {
    width: 76px;
    height: 76px;
    margin: 0 auto 20px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f0eeff;
    color: #675bd0;
    font-size: 30px;
}

.empty-result h3[b-tla85garao],
.loading-result h3[b-tla85garao] {
    margin-bottom: 10px;
    font-size: 22px;
}

.empty-result p[b-tla85garao],
.loading-result p[b-tla85garao] {
    max-width: 700px;
    margin: 0 auto;
    color: #778194;
    line-height: 1.7;
}

.empty-flow[b-tla85garao] {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 30px;
}

    .empty-flow span[b-tla85garao] {
        padding: 9px 14px;
        border-radius: 30px;
        background: #f4f5fa;
        font-size: 13px;
        font-weight: 700;
    }

    .empty-flow i[b-tla85garao] {
        color: #6c60cf;
    }

.loading-circle[b-tla85garao] {
    animation: pulse-engine-b-tla85garao 1.5s infinite;
}

@keyframes pulse-engine-b-tla85garao {

    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }

    100% {
        transform: scale(1);
    }
}


/* =========================================================
   SONUÇ BAŞLIĞI
   ========================================================= */

.result-header[b-tla85garao] {
    margin-bottom: 20px;
}

.result-badge[b-tla85garao] {
    display: inline-block;
    padding: 7px 13px;
    border-radius: 30px;
    background: #e8faf7;
    color: #168c86;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
}

.result-header h2[b-tla85garao] {
    margin: 12px 0 6px;
    font-size: 28px;
}

.result-header p[b-tla85garao] {
    margin: 0;
    color: #788295;
}


/* =========================================================
   GENEL DEĞERLENDİRME
   ========================================================= */

.assessment-card[b-tla85garao] {
    display: flex;
    gap: 18px;
    padding: 24px;
    margin-bottom: 20px;
    border: 1px solid #dfe4f0;
    border-radius: 18px;
    background: white;
}

.assessment-icon[b-tla85garao] {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1eeff;
    color: #685bd0;
    font-size: 20px;
}

.assessment-card h3[b-tla85garao] {
    margin: 0 0 7px;
    font-size: 17px;
}

.assessment-card p[b-tla85garao] {
    margin: 0;
    color: #667085;
    line-height: 1.7;
}


/* =========================================================
   ALTERNATİFLER
   ========================================================= */

.alternative-card[b-tla85garao] {
    margin-bottom: 20px;
    padding: 26px;
    border: 2px solid #e2e4f1;
    border-radius: 22px;
    background: white;
    box-shadow: 0 10px 30px rgba(43, 58, 100, .06);
}

.alternative-header[b-tla85garao] {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.alternative-number[b-tla85garao] {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #6b5fd0, #51bdc2);
    color: white;
    font-size: 18px;
    font-weight: 800;
}

.alternative-title[b-tla85garao] {
    flex: 1;
}

    .alternative-title span[b-tla85garao] {
        color: #7c8495;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .08em;
    }

    .alternative-title h3[b-tla85garao] {
        margin: 4px 0 0;
        font-size: 20px;
    }

.recommended-badge[b-tla85garao] {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 30px;
    background: #e9faf5;
    color: #15846d;
    font-size: 11px;
    font-weight: 800;
}


/* =========================================================
   PROSES AKIŞI
   ========================================================= */

.process-flow[b-tla85garao] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 20px;
    border-radius: 16px;
    background: #f8f9fc;
}

.process-item[b-tla85garao] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 12px;
    background: white;
    border: 1px solid #e0e4ed;
}

.process-icon[b-tla85garao] {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #eeecff;
    color: #685bd0;
}

.process-item strong[b-tla85garao] {
    display: block;
    font-size: 13px;
}

.process-item small[b-tla85garao] {
    display: block;
    max-width: 220px;
    margin-top: 3px;
    color: #7d8798;
    line-height: 1.4;
}

.process-arrow[b-tla85garao] {
    color: #8177d5;
}


/* =========================================================
   ALTERNATİF BİLGİLERİ
   ========================================================= */

.alternative-info[b-tla85garao] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 18px;
}

    .alternative-info > div[b-tla85garao] {
        padding: 16px;
        border-radius: 13px;
        background: #f8f9fc;
    }

    .alternative-info span[b-tla85garao] {
        display: block;
        margin-bottom: 6px;
        color: #7e8797;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
    }

    .alternative-info strong[b-tla85garao] {
        display: block;
        color: #273247;
        font-size: 13px;
        line-height: 1.5;
    }


/* =========================================================
   MÜHENDİSLİK NOTU
   ========================================================= */

.engineering-note[b-tla85garao] {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f1fbfc;
    color: #416c72;
    font-size: 13px;
    line-height: 1.6;
}

    .engineering-note i[b-tla85garao] {
        margin-top: 2px;
    }


/* =========================================================
   FİNAL
   ========================================================= */

.final-recommendation[b-tla85garao] {
    display: flex;
    gap: 18px;
    padding: 26px;
    border-radius: 22px;
    background: linear-gradient(135deg, #f1efff, #edfbfb);
    border: 2px solid #dddaf5;
}

.final-icon[b-tla85garao] {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    color: #685bd0;
    font-size: 23px;
}

.final-recommendation > div:last-child > span[b-tla85garao] {
    font-size: 11px;
    font-weight: 800;
    color: #6c60cf;
    letter-spacing: .08em;
}

.final-recommendation h3[b-tla85garao] {
    margin: 5px 0 8px;
    font-size: 20px;
}

.final-recommendation p[b-tla85garao] {
    margin: 0;
    color: #5e6879;
    line-height: 1.7;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .project-grid[b-tla85garao] {
        grid-template-columns: repeat(2, 1fr);
    }

    .microbial-options[b-tla85garao] {
        grid-template-columns: repeat(2, 1fr);
    }

    .alternative-info[b-tla85garao] {
        grid-template-columns: repeat(2, 1fr);
    }

    .engine-hero[b-tla85garao] {
        padding: 32px;
    }
}


@media (max-width: 700px) {

    .water-engine-page[b-tla85garao] {
        padding: 20px 10px 50px;
    }

    .engine-hero[b-tla85garao] {
        flex-direction: column;
        align-items: flex-start;
        padding: 26px;
    }

    .engine-hero-icon[b-tla85garao] {
        display: none;
    }

    .engine-card[b-tla85garao] {
        padding: 18px;
        border-radius: 18px;
    }

    .project-grid[b-tla85garao] {
        grid-template-columns: 1fr;
    }

    .microbial-options[b-tla85garao] {
        grid-template-columns: 1fr;
    }

    .analysis-table[b-tla85garao] {
        overflow-x: auto;
    }

    .analysis-header[b-tla85garao],
    .analysis-row[b-tla85garao] {
        min-width: 650px;
        grid-template-columns: 1.2fr 1fr 1fr;
    }

    .alternative-info[b-tla85garao] {
        grid-template-columns: 1fr;
    }

    .alternative-header[b-tla85garao] {
        align-items: flex-start;
    }

    .recommended-badge[b-tla85garao] {
        display: none;
    }

    .process-flow[b-tla85garao] {
        align-items: stretch;
        flex-direction: column;
    }

    .process-arrow[b-tla85garao] {
        transform: rotate(90deg);
        align-self: center;
    }
}
/* _content/WEB/Components/Pages/Sektorler.razor.rz.scp.css */
/* =========================================================
   SEKTÖRLER - HERO
   ========================================================= */

.sektorler-hero-title[b-0mvc4tfhrf] {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    white-space: nowrap;
    margin-bottom: 45px !important;
}

.sektorler-label[b-0mvc4tfhrf] {
    color: #6c4ce6;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.sektorler-hero-title h1[b-0mvc4tfhrf] {
    position: relative;
    margin: 0;
    color: #15152a;
    font-size: clamp(2rem, 3.5vw, 3.4rem);
    line-height: 1.1;
    font-weight: 800;
    white-space: nowrap;
}


/* =========================================================
   ANA YAPI
   ========================================================= */
.sektor-menu[b-0mvc4tfhrf] {
    background: #ffffff;
    border: 1px solid #e9e8f2;
    border-radius: 20px;
    padding: 15px;
    box-shadow: 0 10px 35px rgba(30, 25, 70, 0.06);
    position: sticky;
    top: 25px;
    /* BAĞIMSIZ SCROLL */
    height: 650px;
    overflow-y: auto;
    /* Mouse tekerleğinin bu alanda kalmasını sağlar */
    overscroll-behavior: contain;
}


/* =========================================================
   SOL MENÜ BAŞLIKLARI
   ========================================================= */

.sektor-menu-title[b-0mvc4tfhrf] {
    display: flex;
    align-items: center;
    gap: 9px;
    color: #6c4ce6;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 10px 12px 12px;
}

    /* Başlığın önündeki küçük çizgi */

    .sektor-menu-title[b-0mvc4tfhrf]::before {
        content: "";
        width: 4px;
        height: 18px;
        background: linear-gradient( 180deg, #6c4ce6, #16c7c0 );
        border-radius: 10px;
    }

.sektor-menu-title-second[b-0mvc4tfhrf] {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #eeeeF4;
}


/* =========================================================
   SOL MENÜ ITEM
   ========================================================= */

.sektor-menu-item[b-0mvc4tfhrf] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-decoration: none;
    color: #252536;
    padding: 13px 13px 13px 16px;
    margin-bottom: 4px;
    border-radius: 12px;
    border: 1px solid transparent;
    overflow: hidden;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}


    /* Sol taraftaki aktif çizgi */

    .sektor-menu-item[b-0mvc4tfhrf]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 9px;
        bottom: 9px;
        width: 3px;
        border-radius: 0 5px 5px 0;
        background: transparent;
        transition: background 0.2s ease;
    }


    /* Hover */

    .sektor-menu-item:hover[b-0mvc4tfhrf] {
        background: #f7f5ff;
        color: #6040d2;
        border-color: #e7e0ff;
        transform: translateX(3px);
    }


    /* =========================================================
   AKTİF / SEÇİLİ ITEM
   ========================================================= */

    .sektor-menu-item.active[b-0mvc4tfhrf] {
        background: linear-gradient( 135deg, #6c4ce6 0%, #795ee8 65%, #16bfc0 140% );
        color: #ffffff;
        border-color: transparent;
        box-shadow: 0 8px 22px rgba(108, 76, 230, 0.20);
        transform: translateX(4px);
    }

        .sektor-menu-item.active[b-0mvc4tfhrf]::before {
            background: #ffffff;
        }


        /* Aktif başlık */

        .sektor-menu-item.active .sektor-menu-item-title[b-0mvc4tfhrf] {
            color: #ffffff;
        }


        /* Aktif açıklama */

        .sektor-menu-item.active .sektor-menu-item-subtitle[b-0mvc4tfhrf] {
            color: rgba(255, 255, 255, 0.78);
        }


        /* Aktif ok */

        .sektor-menu-item.active i[b-0mvc4tfhrf] {
            color: #ffffff;
            transform: translateX(3px);
        }


/* =========================================================
   MENÜ YAZILARI
   ========================================================= */

.sektor-menu-content[b-0mvc4tfhrf] {
    min-width: 0;
}

.sektor-menu-item-title[b-0mvc4tfhrf] {
    color: #222234;
    font-size: 0.88rem;
    font-weight: 750;
    line-height: 1.35;
    transition: color 0.2s ease;
}

.sektor-menu-item-subtitle[b-0mvc4tfhrf] {
    color: #858594;
    font-size: 0.70rem;
    line-height: 1.45;
    margin-top: 4px;
    transition: color 0.2s ease;
}

.sektor-menu-item i[b-0mvc4tfhrf] {
    flex-shrink: 0;
    color: #aaa8b8;
    font-size: 0.9rem;
    transition: transform 0.2s ease, color 0.2s ease;
}


/* =========================================================
   SAĞ DETAY KARTI
   ========================================================= */

.sektor-detail[b-0mvc4tfhrf] {
    position: relative;
    background: #ffffff;
    border: 1px solid #e8e7f0;
    border-radius: 22px;
    padding: 42px;
    /* SOL MENÜ İLE AYNI YÜKSEKLİK */
    height: 650px;
    /* SAĞ TARAF BAĞIMSIZ SCROLL */
    overflow-y: auto;
    /* Scroll sağ alanda tutulur */
    overscroll-behavior: contain;
    box-shadow: 0 12px 40px rgba(30, 25, 70, 0.06);
}


    /* Sağ üst dekoratif renk */

    .sektor-detail[b-0mvc4tfhrf]::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        right: -100px;
        top: -100px;
        background: radial-gradient( circle, rgba(108, 76, 230, 0.10), rgba(22, 199, 192, 0) );
        pointer-events: none;
    }


/* =========================================================
   SAĞ ÜST ETİKET
   ========================================================= */

.sektor-detail-label[b-0mvc4tfhrf] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #6c4ce6;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    margin-bottom: 14px;
}

    .sektor-detail-label[b-0mvc4tfhrf]::before {
        content: "";
        width: 24px;
        height: 2px;
        background: linear-gradient( 90deg, #6c4ce6, #16c7c0 );
        border-radius: 5px;
    }


/* =========================================================
   SAĞ ANA BAŞLIK
   ========================================================= */

.sektor-detail h2[b-0mvc4tfhrf] {
    color: #17172b;
    font-size: clamp(2rem, 3vw, 2.9rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 20px;
    max-width: 850px;
}


/* =========================================================
   GİRİŞ AÇIKLAMASI
   ========================================================= */

.sektor-detail-intro[b-0mvc4tfhrf] {
    color: #626275;
    font-size: 1rem;
    line-height: 1.85;
    max-width: 850px;
    margin-bottom: 35px;
}


/* =========================================================
   SAĞ İÇERİK BÖLÜMLERİ
   ========================================================= */

.sektor-detail-section[b-0mvc4tfhrf] {
    position: relative;
    padding: 25px 0;
    border-top: 1px solid #ecebf2;
}

    .sektor-detail-section h3[b-0mvc4tfhrf] {
        display: flex;
        align-items: center;
        gap: 10px;
        color: #29263d;
        font-size: 1.05rem;
        font-weight: 800;
        margin-bottom: 11px;
    }


        /* Başlıkların önündeki renkli nokta */

        .sektor-detail-section h3[b-0mvc4tfhrf]::before {
            content: "";
            width: 8px;
            height: 8px;
            flex-shrink: 0;
            border-radius: 50%;
            background: #16c7c0;
            box-shadow: 0 0 0 4px rgba(22, 199, 192, 0.10);
        }

    .sektor-detail-section p[b-0mvc4tfhrf] {
        color: #69697a;
        font-size: 0.94rem;
        line-height: 1.8;
        margin-bottom: 0;
    }


/* =========================================================
   SİSTEM LİSTESİ
   ========================================================= */

.system-list[b-0mvc4tfhrf] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}

.system-item[b-0mvc4tfhrf] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #fafafe;
    border: 1px solid #ecebf4;
    border-radius: 10px;
    color: #4e4e60;
    font-size: 0.84rem;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

    .system-item:hover[b-0mvc4tfhrf] {
        background: #f5f2ff;
        border-color: #ddd4ff;
        transform: translateY(-2px);
    }

    .system-item i[b-0mvc4tfhrf] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 23px;
        height: 23px;
        flex-shrink: 0;
        color: #ffffff;
        background: linear-gradient( 135deg, #6c4ce6, #16c7c0 );
        border-radius: 50%;
        font-size: 0.75rem;
    }


/* =========================================================
   ALT CTA
   ========================================================= */

.sektor-detail-footer[b-0mvc4tfhrf] {
    margin-top: 30px;
    padding: 25px;
    background: linear-gradient( 135deg, #f7f5ff, #f1fbfb );
    border: 1px solid #e8e4fa;
    border-radius: 15px;
}

    .sektor-detail-footer strong[b-0mvc4tfhrf] {
        display: block;
        color: #29263d;
        font-size: 1rem;
        margin-bottom: 7px;
    }

    .sektor-detail-footer p[b-0mvc4tfhrf] {
        color: #6b6b7b;
        font-size: 0.87rem;
        line-height: 1.65;
        margin-bottom: 18px;
    }

    .sektor-detail-footer .btn-primary[b-0mvc4tfhrf] {
        background: linear-gradient( 135deg, #6c4ce6, #16bfc0 );
        border: none;
        border-radius: 9px;
        font-weight: 700;
        padding: 10px 18px;
        box-shadow: 0 6px 18px rgba(108, 76, 230, 0.18);
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

        .sektor-detail-footer .btn-primary:hover[b-0mvc4tfhrf] {
            transform: translateY(-2px);
            box-shadow: 0 9px 22px rgba(108, 76, 230, 0.25);
        }


/* =========================================================
   MOBİL
   ========================================================= */
@media (max-width: 768px) {

    .sektorler-hero-title[b-0mvc4tfhrf] {
        gap: 10px;
        white-space: normal;
        flex-wrap: wrap;
        margin-bottom: 30px !important;
    }

        .sektorler-hero-title h1[b-0mvc4tfhrf] {
            font-size: 2rem;
            white-space: normal;
        }

    .sektor-menu[b-0mvc4tfhrf] {
        position: relative;
        top: auto;
        height: auto;
        max-height: none;
        overflow-y: visible;
        border-radius: 16px;
        padding: 12px;
    }

    .sektor-detail[b-0mvc4tfhrf] {
        height: auto;
        max-height: none;
        overflow-y: visible;
        padding: 25px;
        min-height: auto;
        border-radius: 18px;
    }

        .sektor-detail h2[b-0mvc4tfhrf] {
            font-size: 2rem;
        }

    .sektor-detail-intro[b-0mvc4tfhrf] {
        font-size: 0.95rem;
    }

    .system-list[b-0mvc4tfhrf] {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   SCROLLBAR
   ========================================================= */

.sektor-menu[b-0mvc4tfhrf]::-webkit-scrollbar,
.sektor-detail[b-0mvc4tfhrf]::-webkit-scrollbar {
    width: 6px;
}

.sektor-menu[b-0mvc4tfhrf]::-webkit-scrollbar-track,
.sektor-detail[b-0mvc4tfhrf]::-webkit-scrollbar-track {
    background: transparent;
}

.sektor-menu[b-0mvc4tfhrf]::-webkit-scrollbar-thumb,
.sektor-detail[b-0mvc4tfhrf]::-webkit-scrollbar-thumb {
    background: linear-gradient( 180deg, #6c4ce6, #16c7c0 );
    border-radius: 10px;
}

    .sektor-menu[b-0mvc4tfhrf]::-webkit-scrollbar-thumb:hover,
    .sektor-detail[b-0mvc4tfhrf]::-webkit-scrollbar-thumb:hover {
        background: #6c4ce6;
    }

/* =========================================================
   SEKTÖRLER SAYFASI - TAM GENİŞLİK VE DOĞAL SCROLL
   Sol menü ve sağ detay alanı kendi içinde kaymaz.
   ========================================================= */

/* Sayfanın ana kapsayıcısı ekranın tamamını kullansın */
.sektorler-page-container[b-0mvc4tfhrf] {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

    /* Başlıkta kontrollü kenar boşluğu */
    .sektorler-page-container > .sektorler-hero-title[b-0mvc4tfhrf] {
        padding: 28px clamp(16px, 2.2vw, 36px) 24px;
        margin-bottom: 0 !important;
    }

/* Kolonlar arasında boşluk yok */
.sektorler-layout-row[b-0mvc4tfhrf] {
    width: 100% !important;
    margin: 0 !important;
    --bs-gutter-x: 0;
}

    /* Bootstrap kolon iç boşluklarını sıfırla */
    .sektorler-layout-row > .sektorler-sidebar-column[b-0mvc4tfhrf],
    .sektorler-layout-row > .sektorler-detail-column[b-0mvc4tfhrf] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        min-width: 0;
    }

/* Sol liste: tüm öğeler görünsün, sabit yükseklik ve scroll olmasın */
.sektor-menu[b-0mvc4tfhrf] {
    position: static !important;
    top: auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    overscroll-behavior: auto !important;
    margin: 0 !important;
    border-left: 0 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Sağ açıklama: içerik kadar uzasın, kendi içinde scroll olmasın */
.sektor-detail[b-0mvc4tfhrf] {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    overflow-x: visible !important;
    overscroll-behavior: auto !important;
    margin: 0 !important;
    border-right: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
    padding: clamp(24px, 3vw, 48px) !important;
}

    /* İçerik metinleri sağ alanda tam genişliği kullansın */
    .sektor-detail h2[b-0mvc4tfhrf],
    .sektor-detail-intro[b-0mvc4tfhrf] {
        max-width: none !important;
    }

    /* İç scroll için tanımlanmış scrollbar görünümünü etkisizleştir */
    .sektor-menu[b-0mvc4tfhrf]::-webkit-scrollbar,
    .sektor-detail[b-0mvc4tfhrf]::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
    }

.sektor-menu[b-0mvc4tfhrf],
.sektor-detail[b-0mvc4tfhrf] {
    scrollbar-width: none !important;
}

/* Mobil/tablet: alanlar alt alta ve doğal akışta */
@media (max-width: 991.98px) {
    .sektorler-page-container > .sektorler-hero-title[b-0mvc4tfhrf] {
        padding: 24px 16px 20px;
    }

    .sektorler-layout-row[b-0mvc4tfhrf] {
        display: flex;
        flex-direction: column;
    }

        .sektorler-layout-row > .sektorler-sidebar-column[b-0mvc4tfhrf],
        .sektorler-layout-row > .sektorler-detail-column[b-0mvc4tfhrf] {
            flex: 0 0 100%;
            width: 100%;
            max-width: 100%;
        }

    .sektor-menu[b-0mvc4tfhrf] {
        margin: 0 12px 18px !important;
        border: 1px solid #e9e8f2 !important;
        border-radius: 16px !important;
        padding: 14px !important;
    }

    .sektor-detail[b-0mvc4tfhrf] {
        margin: 0 !important;
        border: 0 !important;
        border-top: 1px solid #e8e7f0 !important;
        border-radius: 0 !important;
        padding: 24px 16px 32px !important;
    }
}

@media (max-width: 768px) {
    .sektorler-page-container > .sektorler-hero-title[b-0mvc4tfhrf] {
        flex-wrap: wrap;
        white-space: normal;
        gap: 10px;
    }

    .sektorler-hero-title h1[b-0mvc4tfhrf] {
        white-space: normal !important;
    }
}
/* _content/WEB/Components/Pages/TeknikServis.razor.rz.scp.css */
.min-height-pane[b-hjr18magaz] {
    min-height: 520px;
}

.fw-extrabold[b-hjr18magaz] {
    font-weight: 800;
}

.shadow-xs[b-hjr18magaz] {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.justify-text[b-hjr18magaz] {
    text-align: justify;
}

/* Mobil görünümde menü esnekliği */
@media (max-width: 991.98px) {
    aside.col-lg-3[b-hjr18magaz] {
        margin-bottom: 2rem;
    }
}
.teknik-servis-hero-title[b-hjr18magaz] {
    display: flex;
    align-items: center;
    gap: 18px;
    width: 100%;
    white-space: nowrap;
}

.teknik-servis-label[b-hjr18magaz] {
    color: #0d6efd;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    white-space: nowrap;
}

.teknik-servis-hero-title h1[b-hjr18magaz] {
    margin: 0;
    font-size: clamp(2rem, 3.5vw, 3.5rem);
    line-height: 1.1;
    font-weight: 800;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .teknik-servis-hero-title[b-hjr18magaz] {
        gap: 10px;
        white-space: normal;
        flex-wrap: wrap;
    }

        .teknik-servis-hero-title h1[b-hjr18magaz] {
            font-size: 2rem;
            white-space: normal;
        }
}
/* _content/WEB/Components/Pages/Uygulamalarimiz.razor.rz.scp.css */
.min-height-pane[b-o5zc3izdsy] {
    min-height: 520px;
}

.fw-extrabold[b-o5zc3izdsy] {
    font-weight: 800;
}

.shadow-xs[b-o5zc3izdsy] {
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.justify-text[b-o5zc3izdsy] {
    text-align: justify;
}