.elementor-4539 .elementor-element.elementor-element-26501cd{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;overflow:visible;}.elementor-4539 .elementor-element.elementor-element-863c3a8 > .elementor-container{max-width:1400px;}.elementor-4539 .elementor-element.elementor-element-863c3a8{padding:120px 0px 140px 0px;overflow:visible;}.elementor-bc-flex-widget .elementor-4539 .elementor-element.elementor-element-472431f.elementor-column .elementor-widget-wrap{align-items:center;}.elementor-4539 .elementor-element.elementor-element-472431f.elementor-column.elementor-element[data-element_type="column"] > .elementor-widget-wrap.elementor-element-populated{align-content:center;align-items:center;}.elementor-4539 .elementor-element.elementor-element-472431f > .elementor-widget-wrap > .elementor-widget:not(.elementor-widget__width-auto):not(.elementor-widget__width-initial):not(:last-child):not(.elementor-absolute){--kit-widget-spacing:0px;}.elementor-4539 .elementor-element.elementor-element-472431f > .elementor-element-populated{padding:0px 15px 0px 15px;}.elementor-4539 .elementor-element.elementor-element-06c455c{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 30px) 0px;padding:0px 0px 0px 0px;}.elementor-4539 .elementor-element.elementor-element-06c455c .elementor-heading-title{font-family:"Work Sans", Sans-serif;font-size:40px;font-weight:700;line-height:50px;color:var( --e-global-color-secondary );}.elementor-4539 .elementor-element.elementor-element-d3ebb1b .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-4539 .elementor-element.elementor-element-d3ebb1b .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-4539 .elementor-element.elementor-element-d3ebb1b .elementor-field-group.recaptcha_v3-bottomleft, .elementor-4539 .elementor-element.elementor-element-d3ebb1b .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-4539 .elementor-element.elementor-element-d3ebb1b .elementor-labels-inline .elementor-field-group > label{padding-left:14px;}body:not(.rtl) .elementor-4539 .elementor-element.elementor-element-d3ebb1b .elementor-labels-inline .elementor-field-group > label{padding-right:14px;}body .elementor-4539 .elementor-element.elementor-element-d3ebb1b .elementor-labels-above .elementor-field-group > label{padding-bottom:14px;}.elementor-4539 .elementor-element.elementor-element-d3ebb1b .elementor-field-type-html{padding-bottom:0px;}.elementor-4539 .elementor-element.elementor-element-d3ebb1b .elementor-field-group .elementor-field:not(.elementor-select-wrapper){background-color:#ffffff;}.elementor-4539 .elementor-element.elementor-element-d3ebb1b .elementor-field-group .elementor-select-wrapper select{background-color:#ffffff;}.elementor-4539 .elementor-element.elementor-element-d3ebb1b .e-form__buttons__wrapper__button-next{background-color:var( --e-global-color-primary );color:#ffffff;}.elementor-4539 .elementor-element.elementor-element-d3ebb1b .elementor-button[type="submit"]{background-color:var( --e-global-color-primary );color:#ffffff;}.elementor-4539 .elementor-element.elementor-element-d3ebb1b .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-4539 .elementor-element.elementor-element-d3ebb1b .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-4539 .elementor-element.elementor-element-d3ebb1b .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-4539 .elementor-element.elementor-element-d3ebb1b .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-4539 .elementor-element.elementor-element-d3ebb1b .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-4539 .elementor-element.elementor-element-d3ebb1b .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-4539 .elementor-element.elementor-element-d3ebb1b{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}.elementor-4539 .elementor-element.elementor-element-f095402 > .elementor-element-populated{padding:0px 15px 0px 115px;}.elementor-4539 .elementor-element.elementor-element-ff80455:not(.elementor-motion-effects-element-type-background), .elementor-4539 .elementor-element.elementor-element-ff80455 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F8F8F8;}.elementor-4539 .elementor-element.elementor-element-ff80455{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;padding:50px 50px 105px 50px;overflow:visible;}.elementor-4539 .elementor-element.elementor-element-ff80455 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-4539 .elementor-element.elementor-element-018bbf5 > .elementor-element-populated{padding:0px 0px 0px 0px;}.elementor-4539 .elementor-element.elementor-element-5b4bdc3{padding:0px 0px 50px 0px;}.elementor-4539 .elementor-element.elementor-element-5b4bdc3 .elementskit-section-title-wraper .elementskit-section-title{color:var( --e-global-color-secondary );font-family:"Work Sans", Sans-serif;font-size:50px;font-weight:700;line-height:59px;}.elementor-4539 .elementor-element.elementor-element-5b4bdc3 .elementskit-section-title-wraper .elementskit-section-title > span{color:var( --e-global-color-text );}.elementor-4539 .elementor-element.elementor-element-5b4bdc3 .elementskit-section-title-wraper .elementskit-section-title:hover > span{color:#000000;}.elementor-4539 .elementor-element.elementor-element-5b4bdc3 .elementskit-section-title-wraper .elementskit-section-subtitle{color:#50545E;font-family:"Roboto", Sans-serif;font-size:16px;font-weight:400;line-height:28px;}.elementor-4539 .elementor-element.elementor-element-fde0c41.ekit-equal-height-enable,
					.elementor-4539 .elementor-element.elementor-element-fde0c41.ekit-equal-height-enable > div,
					.elementor-4539 .elementor-element.elementor-element-fde0c41.ekit-equal-height-enable .ekit-wid-con,
					.elementor-4539 .elementor-element.elementor-element-fde0c41.ekit-equal-height-enable .ekit-wid-con .elementskit-infobox{height:100%;}.elementor-4539 .elementor-element.elementor-element-fde0c41 .elementskit-infobox{background-color:#00000000;padding:0px 0px 5px 0px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#f5f5f5;border-radius:0px 0px 0px 0px;}.elementor-4539 .elementor-element.elementor-element-fde0c41{padding:0px 0px 5px 0px;}.elementor-4539 .elementor-element.elementor-element-fde0c41 .elementskit-infobox .elementskit-info-box-title{margin:0px 0px 5px 0px;padding:0px 0px 0px 0px;color:var( --e-global-color-secondary );font-family:"Roboto", Sans-serif;font-size:16px;font-weight:700;line-height:21px;}.elementor-4539 .elementor-element.elementor-element-fde0c41 .elementskit-infobox .box-body > p{color:var( --e-global-color-secondary );font-family:"Work Sans", Sans-serif;font-size:26px;font-weight:700;line-height:30px;}.elementor-4539 .elementor-element.elementor-element-8c3da8f.ekit-equal-height-enable,
					.elementor-4539 .elementor-element.elementor-element-8c3da8f.ekit-equal-height-enable > div,
					.elementor-4539 .elementor-element.elementor-element-8c3da8f.ekit-equal-height-enable .ekit-wid-con,
					.elementor-4539 .elementor-element.elementor-element-8c3da8f.ekit-equal-height-enable .ekit-wid-con .elementskit-infobox{height:100%;}.elementor-4539 .elementor-element.elementor-element-8c3da8f .elementskit-infobox{background-color:#00000000;padding:0px 0px 0px 0px;border-style:solid;border-width:1px 1px 1px 1px;border-color:#f5f5f5;border-radius:0px 0px 0px 0px;}.elementor-4539 .elementor-element.elementor-element-8c3da8f{padding:0px 0px 10px 0px;}.elementor-4539 .elementor-element.elementor-element-8c3da8f .elementskit-infobox .elementskit-info-box-title{margin:0px 0px 5px 0px;padding:0px 0px 0px 0px;color:var( --e-global-color-secondary );font-family:"Roboto", Sans-serif;font-size:16px;font-weight:700;line-height:21px;}.elementor-4539 .elementor-element.elementor-element-8c3da8f .elementskit-infobox .box-body > p{color:var( --e-global-color-secondary );font-family:"Work Sans", Sans-serif;font-size:26px;font-weight:700;line-height:30px;}.elementor-4539 .elementor-element.elementor-element-88ad5b4 .elementor-heading-title{font-family:"Roboto", Sans-serif;font-size:16px;font-weight:700;line-height:21px;color:var( --e-global-color-secondary );}.elementor-4539 .elementor-element.elementor-element-b12e798 .elementor-repeater-item-429a99c > a{color:#6A6874;background-color:#FFFFFF;box-shadow:0px 1px 2px 0px rgba(0, 13.000000000000028, 49.00000000000001, 0.06274509803921569);}.elementor-4539 .elementor-element.elementor-element-b12e798 .elementor-repeater-item-429a99c > a svg path{stroke:#6A6874;fill:#6A6874;}.elementor-4539 .elementor-element.elementor-element-b12e798 .elementor-repeater-item-429a99c > a:hover{color:#FFFFFF;background-color:#6EC1E4;}.elementor-4539 .elementor-element.elementor-element-b12e798 .elementor-repeater-item-429a99c > a:hover svg path{stroke:#FFFFFF;fill:#FFFFFF;}.elementor-4539 .elementor-element.elementor-element-b12e798 .elementor-repeater-item-578e611 > a{color:#6A6874;background-color:#FFFFFF;}.elementor-4539 .elementor-element.elementor-element-b12e798 .elementor-repeater-item-578e611 > a svg path{stroke:#6A6874;fill:#6A6874;}.elementor-4539 .elementor-element.elementor-element-b12e798 .elementor-repeater-item-578e611 > a:hover{color:#FFFFFF;background-color:#6EC1E4;}.elementor-4539 .elementor-element.elementor-element-b12e798 .elementor-repeater-item-578e611 > a:hover svg path{stroke:#FFFFFF;fill:#FFFFFF;}.elementor-4539 .elementor-element.elementor-element-b12e798 .elementor-repeater-item-c001364 > a{color:#222222;background-color:#FFFFFF;}.elementor-4539 .elementor-element.elementor-element-b12e798 .elementor-repeater-item-c001364 > a svg path{stroke:#222222;fill:#222222;}.elementor-4539 .elementor-element.elementor-element-b12e798 .elementor-repeater-item-c001364 > a:hover{background-color:#3b5998;}.elementor-4539 .elementor-element.elementor-element-b12e798 > .elementor-widget-container{margin:-5px 0px 0px 0px;}.elementor-4539 .elementor-element.elementor-element-b12e798 .ekit_social_media{text-align:left;}.elementor-4539 .elementor-element.elementor-element-b12e798 .ekit_social_media > li > a{text-align:center;text-decoration:none;border-radius:0% 0% 0% 0%;width:44px;height:44px;line-height:40px;}.elementor-4539 .elementor-element.elementor-element-b12e798 .ekit_social_media > li{display:inline-block;margin:0px 6px 5px 0px;}@media(min-width:768px){.elementor-4539 .elementor-element.elementor-element-26501cd{--width:1400%;}}@media(max-width:1024px){.elementor-4539 .elementor-element.elementor-element-863c3a8{padding:80px 0px 80px 0px;}.elementor-4539 .elementor-element.elementor-element-06c455c .elementor-heading-title{line-height:40px;}.elementor-4539 .elementor-element.elementor-element-f095402 > .elementor-element-populated{padding:0px 15px 0px 15px;}.elementor-4539 .elementor-element.elementor-element-ff80455{padding:40px 30px 40px 30px;}}@media(max-width:767px){.elementor-4539 .elementor-element.elementor-element-472431f > .elementor-element-populated{margin:0px 0px 40px 0px;--e-column-margin-right:0px;--e-column-margin-left:0px;}.elementor-4539 .elementor-element.elementor-element-06c455c .elementor-heading-title{font-size:35px;}.elementor-4539 .elementor-element.elementor-element-5b4bdc3 .elementskit-section-title-wraper .elementskit-section-title{font-size:45px;line-height:40px;}}/* Start custom CSS for html, class: .elementor-element-9dca17d */.sa-page {
    --primary: #17a2b8;
    --primary-dark: #0d8698;
    --primary-deep: #086b79;
    --primary-soft: #edf8fa;

    --ink: #11262d;
    --dark: #10272e;
    --dark-deep: #0b1d23;

    --text: #53666c;
    --muted: #7d8e93;

    --line: #d9e3e5;
    --light: #f5f8f8;
    --white: #ffffff;

    --max: 1400px;

    overflow: hidden;
    background: #ffffff;
    color: var(--ink);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        Helvetica,
        sans-serif;

    font-size: 16px;
    line-height: 1.72;
}

.sa-page *,
.sa-page *::before,
.sa-page *::after {
    box-sizing: border-box;
}

.sa-page img {
    display: block;
    max-width: 100%;
}

.sa-page a {
    color: inherit;
    text-decoration: none;
}

.sa-container {
    width: min(calc(100% - 64px), var(--max));
    margin: 0 auto;
}


/* =========================================================
   TYPOGRAPHY
========================================================= */

.sa-page h1,
.sa-page h2,
.sa-page h3,
.sa-page p {
    margin-top: 0;
}

.sa-page h1 {
    max-width: 980px;
    margin-bottom: 22px;

    color: #fff;

    font-size: clamp(44px, 4.6vw, 70px);
    line-height: 1.01;

    font-weight: 720;
    letter-spacing: -.052em;
}

.sa-page h2 {
    max-width: 970px;
    margin-bottom: 25px;

    color: var(--ink);

    font-size: clamp(34px, 3vw, 50px);
    line-height: 1.08;

    font-weight: 700;
    letter-spacing: -.04em;
}

.sa-page h3 {
    margin-bottom: 9px;

    color: var(--ink);

    font-size: 19px;
    line-height: 1.35;

    font-weight: 680;
}

.sa-copy {
    color: var(--text);
}

.sa-copy p {
    margin-bottom: 19px;
}

.sa-copy p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   SHARED
========================================================= */

.sa-section {
    padding: 108px 0;
}

.sa-section-sm {
    padding: 76px 0;
}

.sa-kicker {
    display: flex;
    align-items: center;
    gap: 12px;

    margin: 0 0 18px;

    color: var(--primary-dark);

    font-size: 12px;
    line-height: 1;

    font-weight: 800;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.sa-kicker::before {
    content: "";

    width: 34px;
    height: 2px;

    flex: 0 0 34px;

    background: var(--primary);
}

.sa-section-head {
    display: grid;

    grid-template-columns:
        minmax(0, 1.18fr)
        minmax(300px, .82fr);

    gap: 80px;

    align-items: end;

    margin-bottom: 56px;
}

.sa-section-head h2 {
    margin-bottom: 0;
}

.sa-section-head p {
    max-width: 520px;
    margin: 0;

    color: var(--text);
}


/* =========================================================
   BUTTONS
========================================================= */

.sa-btns {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;
}

.sa-btn {
    min-height: 52px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 13px;

    padding: 0 27px;

    border: 1px solid #fff;

    background: #fff;
    color: var(--primary-dark) !important;

    font-size: 14px;
    line-height: 1;

    font-weight: 750;

    transition:
        transform .2s ease,
        background-color .2s ease,
        border-color .2s ease;
}

.sa-btn:hover {
    transform: translateY(-2px);
    background: #effbfc;
}

.sa-btn-ghost {
    background: transparent;

    border-color: rgba(255,255,255,.64);

    color: #fff !important;
}

.sa-btn-ghost:hover {
    background: rgba(255,255,255,.09);
    border-color: #fff;
}

.sa-btn-primary {
    background: var(--primary);
    border-color: var(--primary);

    color: #fff !important;
}

.sa-btn-primary:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.sa-arrow {
    transition: transform .2s ease;
}

.sa-btn:hover .sa-arrow,
.sa-text-link:hover .sa-arrow {
    transform: translateX(4px);
}


/* =========================================================
   HERO
   NO CIRCLE
   NO GRID
   NO BOXES
   NO INFO BAR
========================================================= */

.sa-hero {
    position: relative;

    min-height: 500px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: var(--primary);
}

.sa-hero::before {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,145,166,.99) 0%,
            rgba(23,162,184,.96) 42%,
            rgba(17,150,170,.80) 64%,
            rgba(7,84,98,.29) 100%
        ),
        url("https://yaksil.com/wp-content/uploads/2026/09/ChatGPT-2026-09-29T102333.175.webp")
        76% center / cover no-repeat;
}

.sa-hero-inner {
    position: relative;
    z-index: 2;

    width: min(calc(100% - 64px), var(--max));

    margin: 0 auto;

    padding: 61px 0 59px;
}

.sa-hero-content {
    max-width: 930px;

    animation: saHeroIn .55s ease-out both;
}

.sa-hero .sa-kicker {
    margin-bottom: 20px;

    color: rgba(255,255,255,.88);
}

.sa-hero .sa-kicker::before {
    background: #fff;
}

.sa-hero-intro {
    max-width: 835px;

    margin: 0;

    color: rgba(255,255,255,.93);

    font-size: 18px;
    line-height: 1.72;
}

.sa-hero-intro strong {
    color: #fff;

    font-weight: 720;
}

.sa-hero-sub {
    margin-top: 18px;

    color: rgba(255,255,255,.76);

    font-size: 13px;
    line-height: 1.6;
}


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

.sa-intro-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.02fr)
        minmax(0, .98fr);

    gap: 105px;

    align-items: center;
}

.sa-intro-image {
    overflow: hidden;

    background: #e7edef;
}

.sa-intro-image img {
    width: 100%;
    height: 590px;

    object-fit: cover;
}

.sa-rule-list {
    margin: 35px 0 0;
    padding: 0;

    list-style: none;

    border-top: 1px solid var(--line);
}

.sa-rule-list li {
    position: relative;

    padding: 15px 0 15px 28px;

    border-bottom: 1px solid var(--line);

    color: var(--text);

    font-size: 15px;
}

.sa-rule-list li::before {
    content: "";

    position: absolute;

    left: 3px;
    top: 25px;

    width: 7px;
    height: 7px;

    background: var(--primary);
}


/* =========================================================
   MATERIAL PLATFORM
========================================================= */

.sa-material {
    background: var(--light);
}

.sa-material-statement {
    max-width: 1080px;

    margin-bottom: 56px;

    color: var(--ink);

    font-size: clamp(25px, 2.1vw, 34px);
    line-height: 1.36;

    font-weight: 560;
    letter-spacing: -.022em;
}

.sa-material-statement strong {
    color: var(--primary-dark);
}

.sa-material-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    border-top: 2px solid var(--ink);
}

.sa-material-item {
    padding: 29px 31px 10px;

    border-right: 1px solid #cdd9db;
}

.sa-material-item:first-child {
    padding-left: 0;
}

.sa-material-item:last-child {
    border-right: 0;
}

.sa-material-item span {
    display: block;

    margin-bottom: 18px;

    color: var(--primary-dark);

    font-size: 11px;

    font-weight: 800;
    letter-spacing: .11em;
}

.sa-material-item h3 {
    margin-bottom: 10px;

    font-size: 20px;
}

.sa-material-item p {
    margin: 0;

    color: var(--text);

    font-size: 14px;
}


/* =========================================================
   WHY SILICONE RUBBER
========================================================= */

.sa-benefit-grid {
    display: grid;

    grid-template-columns: repeat(2, 1fr);

    border-top: 1px solid var(--line);
}

.sa-benefit {
    display: grid;

    grid-template-columns: 62px 1fr;

    gap: 18px;

    min-height: 200px;

    padding: 29px 40px 29px 0;

    border-bottom: 1px solid var(--line);
}

.sa-benefit:nth-child(odd) {
    border-right: 1px solid var(--line);
}

.sa-benefit:nth-child(even) {
    padding-left: 40px;
}

.sa-benefit-index {
    color: var(--primary);

    font-size: 12px;

    font-weight: 800;
    letter-spacing: .11em;
}

.sa-benefit p {
    margin: 0;

    color: var(--text);

    font-size: 14px;
}


/* =========================================================
   COMPOUND ENGINEERING
========================================================= */

.sa-system {
    background: var(--primary-soft);
}

.sa-system-grid {
    display: grid;

    grid-template-columns: .82fr 1.18fr;

    gap: 105px;

    align-items: start;
}

.sa-system-list {
    border-top: 3px solid var(--primary);
}

.sa-system-row {
    display: grid;

    grid-template-columns: 175px 1fr;

    gap: 30px;

    padding: 25px 0;

    border-bottom: 1px solid #bdd8dc;
}

.sa-system-row strong {
    color: var(--primary-dark);

    font-size: 14px;
}

.sa-system-row p {
    margin: 0;

    color: var(--text);

    font-size: 14px;
}


/* =========================================================
   SURGE ARRESTER STRUCTURE
========================================================= */

.sa-structure {
    background: #fff;
}

.sa-structure-grid {
    display: grid;

    grid-template-columns:
        minmax(0, .86fr)
        minmax(0, 1.14fr);

    gap: 100px;

    align-items: center;
}

.sa-structure-copy > p {
    color: var(--text);
}

.sa-structure-points {
    margin-top: 34px;

    border-top: 1px solid var(--line);
}

.sa-structure-point {
    display: grid;

    grid-template-columns: 40px 1fr;

    gap: 16px;

    padding: 18px 0;

    border-bottom: 1px solid var(--line);
}

.sa-structure-point span {
    padding-top: 2px;

    color: var(--primary-dark);

    font-size: 11px;

    font-weight: 800;
}

.sa-structure-point strong {
    display: block;

    margin-bottom: 3px;

    color: var(--ink);

    font-size: 16px;
}

.sa-structure-point p {
    margin: 0;

    color: var(--text);

    font-size: 14px;
}


/* TECHNICAL DIAGRAM */

.sa-tech-visual {
    position: relative;

    min-height: 680px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    padding: 25px 10px;

    background:
        linear-gradient(
            145deg,
            #f8fbfb 0%,
            #edf4f5 100%
        );
}

.sa-tech-visual svg {
    display: block;

    width: 100%;
    max-width: 790px;
    height: auto;
}

.sa-tech-title {
    fill: #11262d;

    font-size: 15px;
    font-weight: 700;
}

.sa-tech-label {
    fill: #71858a;

    font-size: 11px;
}

.sa-tech-line {
    fill: none;

    stroke: #17a2b8;
    stroke-width: 1.35;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.sa-tech-dot {
    fill: #17a2b8;
}


/* =========================================================
   PERFORMANCE
========================================================= */

.sa-performance {
    background: var(--light);
}

.sa-performance-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid #cbd8db;
    border-left: 1px solid #cbd8db;
}

.sa-performance-item {
    min-height: 240px;

    padding: 31px;

    border-right: 1px solid #cbd8db;
    border-bottom: 1px solid #cbd8db;

    transition: background-color .2s ease;
}

.sa-performance-item:hover {
    background: #fff;
}

.sa-performance-index {
    display: block;

    margin-bottom: 25px;

    color: var(--primary);

    font-size: 11px;

    font-weight: 800;
    letter-spacing: .12em;
}

.sa-performance-item p {
    margin: 0;

    color: var(--text);

    font-size: 14px;
}


/* =========================================================
   APPLICATION
========================================================= */

.sa-application {
    min-height: 500px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(7,28,35,.95) 0%,
            rgba(7,38,46,.81) 48%,
            rgba(7,38,46,.13) 100%
        ),
        url("https://yaksil.com/wp-content/uploads/2026/07/20260730032251798044.webp")
        center / cover no-repeat;
}

.sa-application-inner {
    max-width: 730px;

    padding: 76px 0;
}

.sa-application .sa-kicker {
    color: #78d7e2;
}

.sa-application h2 {
    color: #fff;
}

.sa-application p {
    max-width: 670px;

    color: #c5d6da;
}

.sa-conditions {
    display: flex;
    flex-wrap: wrap;

    margin: 28px 0 0;
    padding: 0;

    list-style: none;
}

.sa-conditions li {
    padding: 4px 17px;

    border-left: 1px solid rgba(255,255,255,.27);

    color: #fff;

    font-size: 13px;
}

.sa-conditions li:first-child {
    padding-left: 0;

    border-left: 0;
}


/* =========================================================
   GRADES
========================================================= */

.sa-grade-head {
    display: grid;

    grid-template-columns: .78fr 1.22fr;

    gap: 100px;

    margin-bottom: 58px;
}

.sa-grade-list {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    margin-bottom: 58px;

    border-top: 3px solid var(--ink);
    border-bottom: 1px solid var(--line);
}

.sa-grade {
    min-height: 218px;

    padding: 30px 34px;

    border-right: 1px solid var(--line);
}

.sa-grade:first-child {
    padding-left: 0;
}

.sa-grade:last-child {
    border-right: 0;
}

.sa-grade-code {
    display: block;

    margin-bottom: 19px;

    color: var(--primary-dark);

    font-size: 12px;

    font-weight: 800;
    letter-spacing: .1em;
}

.sa-grade strong {
    display: block;

    max-width: 310px;

    margin-bottom: 9px;

    color: var(--ink);

    font-size: 21px;
    line-height: 1.32;

    font-weight: 680;
}

.sa-grade p {
    max-width: 340px;

    margin: 0;

    color: var(--text);

    font-size: 14px;
}


/* =========================================================
   TABLE
========================================================= */

.sa-table-wrap {
    width: 100%;

    overflow-x: auto;

    border-top: 4px solid var(--primary);

    -webkit-overflow-scrolling: touch;
}

.sa-table {
    width: 100%;
    min-width: 900px;

    border-collapse: collapse;

    background: #fff;

    text-align: left;
}

.sa-table th,
.sa-table td {
    padding: 17px 22px;

    border-bottom: 1px solid var(--line);

    vertical-align: middle;
}

.sa-table thead th {
    background: var(--dark);

    color: #fff;

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;
}

.sa-table tbody th {
    color: var(--ink);

    font-size: 14px;
    font-weight: 650;
}

.sa-table tbody td {
    color: var(--text);

    font-size: 14px;
}

.sa-table tbody tr:hover {
    background: #f6fafb;
}


/* =========================================================
   PROCESSING
========================================================= */

.sa-processing {
    background: var(--dark);

    color: #fff;
}

.sa-processing .sa-kicker {
    color: #74d3df;
}

.sa-processing h2 {
    color: #fff;
}

.sa-process-grid {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    align-items: stretch;
}

.sa-process-image {
    min-height: 690px;
}

.sa-process-image img {
    width: 100%;
    height: 100%;

    object-fit: cover;
}

.sa-process-copy > p {
    max-width: 690px;

    color: #b6c9ce;
}

.sa-process-list {
    margin-top: 36px;

    border-top: 1px solid rgba(255,255,255,.17);
}

.sa-process-item {
    display: grid;

    grid-template-columns: 52px 1fr;

    gap: 17px;

    padding: 21px 0;

    border-bottom: 1px solid rgba(255,255,255,.15);
}

.sa-process-index {
    padding-top: 2px;

    color: #5fcbd8;

    font-size: 11px;

    font-weight: 800;
}

.sa-process-item h3 {
    color: #fff;

    font-size: 18px;
}

.sa-process-item p {
    max-width: 660px;

    margin: 0;

    color: #a8bcc2;

    font-size: 14px;
}


/* =========================================================
   GRADE SELECTION
========================================================= */

.sa-selection-grid {
    display: grid;

    grid-template-columns: .72fr 1.28fr;

    gap: 100px;
}

.sa-selection-list {
    border-top: 3px solid var(--primary);
}

.sa-selection-row {
    display: grid;

    grid-template-columns: 180px 1fr;

    gap: 30px;

    padding: 25px 0;

    border-bottom: 1px solid var(--line);
}

.sa-selection-row strong {
    color: var(--primary-dark);

    font-size: 14px;
}

.sa-selection-row p {
    margin: 0;

    color: var(--text);

    font-size: 14px;
}


/* =========================================================
   STANDARDS
========================================================= */

.sa-standards {
    background: var(--primary-soft);
}

.sa-standard-grid {
    display: grid;

    grid-template-columns: .72fr 1.28fr;

    gap: 100px;
}

.sa-standard-list {
    border-top: 3px solid var(--primary);
}

.sa-standard {
    display: grid;

    grid-template-columns: 160px 1fr;

    gap: 32px;

    padding: 26px 0;

    border-bottom: 1px solid #bdd8dc;
}

.sa-standard strong {
    color: var(--primary-dark);

    font-size: 14px;
}

.sa-standard p {
    max-width: 760px;

    margin: 0;

    color: var(--text);

    font-size: 14px;
}


/* =========================================================
   SUPPLY
========================================================= */

.sa-supply-grid {
    display: grid;

    grid-template-columns: .9fr 1.1fr;

    gap: 100px;

    align-items: center;
}

.sa-supply-image img {
    width: 100%;
    height: 570px;

    object-fit: cover;
}

.sa-workflow {
    margin-top: 33px;

    border-top: 3px solid var(--ink);
}

.sa-workflow-row {
    display: grid;

    grid-template-columns: 82px 1fr;

    gap: 20px;

    padding: 19px 0;

    border-bottom: 1px solid var(--line);
}

.sa-workflow-row small {
    padding-top: 3px;

    color: var(--primary-dark);

    font-size: 10px;

    font-weight: 800;
    letter-spacing: .06em;
}

.sa-workflow-row strong {
    display: block;

    margin-bottom: 3px;

    font-size: 16px;
}

.sa-workflow-row p {
    margin: 0;

    color: var(--text);

    font-size: 14px;
}


/* =========================================================
   RELATED
========================================================= */

.sa-related {
    padding: 49px 0;

    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}

.sa-related-grid {
    display: grid;

    grid-template-columns: 240px 1fr;

    gap: 50px;

    align-items: center;
}

.sa-related-title {
    color: var(--muted);

    font-size: 11px;

    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sa-related-links {
    display: flex;
    flex-wrap: wrap;

    gap: 10px 36px;
}

.sa-text-link {
    display: inline-flex;
    align-items: center;

    gap: 8px;

    padding: 7px 0;

    border-bottom: 1px solid #adbdc1;

    color: var(--ink);

    font-size: 14px;
    font-weight: 650;

    transition:
        color .2s ease,
        border-color .2s ease;
}

.sa-text-link:hover {
    color: var(--primary-dark);

    border-color: var(--primary);
}


/* =========================================================
   FAQ
========================================================= */

.sa-faq-grid {
    display: grid;

    grid-template-columns: .64fr 1.36fr;

    gap: 105px;
}

.sa-faq {
    border-top: 3px solid var(--ink);
}

.sa-faq details {
    border-bottom: 1px solid var(--line);
}

.sa-faq summary {
    position: relative;

    padding: 23px 50px 23px 0;

    cursor: pointer;

    color: var(--ink);

    font-size: 16px;
    line-height: 1.5;

    font-weight: 650;

    list-style: none;
}

.sa-faq summary::-webkit-details-marker {
    display: none;
}

.sa-faq summary::after {
    content: "+";

    position: absolute;

    top: 16px;
    right: 3px;

    color: var(--primary);

    font-size: 27px;

    font-weight: 350;

    transition: transform .2s ease;
}

.sa-faq details[open] summary::after {
    transform: rotate(45deg);
}

.sa-faq-answer {
    max-width: 860px;

    padding: 0 50px 24px 0;

    color: var(--text);

    font-size: 14px;
}


/* =========================================================
   CTA
========================================================= */

.sa-final {
    padding: 86px 0;

    background:
        linear-gradient(
            105deg,
            var(--primary-dark),
            var(--primary)
        );

    color: #fff;
}

.sa-final-grid {
    display: grid;

    grid-template-columns: 1.15fr .85fr;

    gap: 100px;

    align-items: end;
}

.sa-final .sa-kicker {
    color: rgba(255,255,255,.82);
}

.sa-final .sa-kicker::before {
    background: #fff;
}

.sa-final h2 {
    color: #fff;
}

.sa-final p {
    max-width: 760px;

    margin: 0;

    color: rgba(255,255,255,.86);
}

.sa-final-side {
    padding-left: 30px;

    border-left: 1px solid rgba(255,255,255,.42);
}

.sa-final-side small {
    display: block;

    margin-bottom: 8px;

    color: rgba(255,255,255,.71);

    font-size: 10px;

    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.sa-final-side strong {
    display: block;

    margin-bottom: 13px;

    color: #fff;

    font-size: 20px;
    line-height: 1.4;
}


/* =========================================================
   ANIMATION
========================================================= */

@keyframes saHeroIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .sa-container,
    .sa-hero-inner {
        width: min(calc(100% - 46px), var(--max));
    }

    .sa-section {
        padding: 84px 0;
    }

    .sa-section-head,
    .sa-intro-grid,
    .sa-system-grid,
    .sa-structure-grid,
    .sa-grade-head,
    .sa-process-grid,
    .sa-selection-grid,
    .sa-standard-grid,
    .sa-supply-grid,
    .sa-faq-grid,
    .sa-final-grid {
        grid-template-columns: 1fr;

        gap: 54px;
    }

    .sa-material-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sa-material-item:nth-child(2) {
        border-right: 0;
    }

    .sa-material-item:nth-child(3),
    .sa-material-item:nth-child(4) {
        border-top: 1px solid #ccd8db;
    }

    .sa-performance-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sa-grade-list {
        grid-template-columns: 1fr;
    }

    .sa-grade,
    .sa-grade:first-child {
        min-height: 0;

        padding: 26px 0;

        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .sa-tech-visual {
        min-height: 610px;
    }

    .sa-process-image {
        min-height: 500px;
    }

    .sa-supply-image img {
        height: 500px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .sa-container,
    .sa-hero-inner {
        width: calc(100% - 30px);
    }

    .sa-page {
        font-size: 15px;
    }

    .sa-section {
        padding: 64px 0;
    }

    .sa-section-sm {
        padding: 54px 0;
    }

    .sa-page h1 {
        font-size: clamp(39px, 11.8vw, 51px);
        line-height: 1.02;
    }

    .sa-page h2 {
        font-size: 31px;
        line-height: 1.12;
    }

    .sa-section-head {
        margin-bottom: 40px;
    }


    /* HERO */

    .sa-hero {
        min-height: 0;
    }

    .sa-hero::before {
        background:
            linear-gradient(
                rgba(8,144,164,.91),
                rgba(8,144,164,.91)
            ),
            url("https://yaksil.com/wp-content/uploads/2026/07/20260730035623986430.webp")
            center / cover no-repeat;
    }

    .sa-hero-inner {
        padding: 50px 0 48px;
    }

    .sa-hero-intro {
        font-size: 16px;
    }

    .sa-hero-sub {
        font-size: 12px;
    }

    .sa-btns {
        display: block;
    }

    .sa-btn {
        width: 100%;

        margin-bottom: 9px;
    }


    /* CONTENT */

    .sa-intro-image img {
        height: 390px;
    }

    .sa-material-grid {
        grid-template-columns: 1fr;
    }

    .sa-material-item,
    .sa-material-item:first-child,
    .sa-material-item:nth-child(3),
    .sa-material-item:nth-child(4) {
        padding: 23px 0;

        border-right: 0;
        border-top: 1px solid #ccd8db;
    }

    .sa-material-item:first-child {
        border-top: 0;
    }

    .sa-benefit-grid {
        grid-template-columns: 1fr;
    }

    .sa-benefit,
    .sa-benefit:nth-child(even) {
        padding: 25px 0;

        border-right: 0;
    }

    .sa-system-row {
        grid-template-columns: 1fr;

        gap: 5px;
    }

    .sa-tech-visual {
        min-height: 0;

        padding: 4px 0;
    }

    .sa-tech-title {
        font-size: 13px;
    }

    .sa-tech-label {
        font-size: 9px;
    }

    .sa-performance-grid {
        grid-template-columns: 1fr;
    }

    .sa-performance-item {
        min-height: 0;

        padding: 27px 23px;
    }

    .sa-application {
        min-height: 490px;

        background:
            linear-gradient(
                rgba(8,31,38,.87),
                rgba(8,31,38,.87)
            ),
            url("https://yaksil.com/wp-content/uploads/2026/07/20260730032251798044.webp")
            center / cover no-repeat;
    }

    .sa-application-inner {
        padding: 60px 0;
    }

    .sa-conditions {
        display: block;
    }

    .sa-conditions li,
    .sa-conditions li:first-child {
        padding: 7px 0;

        border-left: 0;
        border-bottom: 1px solid rgba(255,255,255,.14);
    }

    .sa-process-image {
        min-height: 410px;
    }

    .sa-selection-row,
    .sa-standard {
        grid-template-columns: 1fr;

        gap: 6px;
    }

    .sa-supply-image img {
        height: 390px;
    }

    .sa-workflow-row {
        grid-template-columns: 60px 1fr;
    }

    .sa-related-grid {
        grid-template-columns: 1fr;

        gap: 14px;
    }

    .sa-related-links {
        display: block;
    }

    .sa-text-link {
        display: flex;
        justify-content: space-between;

        margin-bottom: 7px;
    }

    .sa-faq-answer {
        padding-right: 4px;
    }

    .sa-final {
        padding: 65px 0;
    }

    .sa-final-side {
        padding-left: 20px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .sa-page *,
    .sa-page *::before,
    .sa-page *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}/* End custom CSS */