.article {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 15px;
        padding: 30px;
        background: var(--trapez-white);
        box-shadow: var(--trapez-shadow);
        color: var(--trapez-ink);
        z-index: 5;
}

.article-cover {
        position: relative;
        display: block;
        aspect-ratio: 16 / 7;
        overflow: hidden;
        margin-top: -30px;
        margin-left: -30px;
        margin-right: -30px;
        margin-bottom: 15px;
}

.article-cover img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
}

.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
        margin-top:5px;
        position: relative;
}

.article h1 {
        font-size: 30px;
}

.article a {
        color: var(--trapez-blue);
}

.article ul,
.article ol {
        padding-left: 22px;
}

.article ul li,
.article ol li {
        list-style-type: disc;
}

.product {
        position: relative;
        margin-top: 50px;
        margin-bottom: 50px;
}

.product-title {
        position: relative;
        margin-bottom: 30px;
}


.product-layout {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 30px;
        align-items: start;
}

.product-left {

        background: #FFF;
        box-shadow: var(--trapez-shadow);
        border:1px solid var(--trapez-line);
        box-shadow: var(--trapez-shadow);
}

.product-table { table-layout:fixed;border-top:0px; }


.product-table tr:last-child th { border-bottom: 0; }

.product-table tr td { text-align:center; }
.product-table tr td:last-child { text-align:right; }


.product-figure {
        position: relative;
        display: grid;
        place-items: center;
        overflow: hidden;
        border-bottom: 1px solid var(--trapez-line);
        background: linear-gradient(145deg, var(--trapez-white), var(--trapez-blue-soft));
}

.product-figure img {
        display: block;
        width: 100%;
        min-height: 400px;
        max-height: 400px;
        object-fit: contain;
}


.product-figure figcaption {
        position: absolute;
        left: 15px;
        top: 15px;
        padding: 6px 12px;
        overflow: hidden;
        font-weight: bold;
        text-overflow: ellipsis;
        white-space: nowrap;

          display: inline-flex;
        color: var(--trapez-blue);
        background: var(--trapez-blue-soft);
        border-left: 3px solid var(--trapez-blue);
        font-size: 14px;
        font-weight: bold;
}



.product-right {
        position: sticky;
        top: 30px;
        border: 1px solid var(--trapez-line);
        background: #FFF;
}

.product-description {
        padding: 30px;
        border-bottom: 1px solid var(--trapez-line);
}

.product-description ul {
        display: grid;
        gap: 5px;
}

.product-description ul li {
        position: relative;
        padding-left: 30px;
        color: #45525a;
}

.product-description ul li::before {
        position: absolute;
        top: 0.72em;
        left: 0;
        width: 8px;
        height: 8px;
        content: "";
        background: var(--trapez-red);
}


.product-form { padding:30px; }

.product-form-heading { display:none; }




.product-share {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        padding:0 30px 30px 30px;
}

.product-share::before {
        margin-right: 4px;
        color: var(--trapez-muted);
        content: "Paylaş:";
        font-size: 11px;
        font-weight: bold;
}

.product-share a {
        display: grid;
        width: 38px;
        height: 38px;
        padding: 0;
        place-items: center;
        background: var(--trapez-blue-soft);
        color: var(--trapez-blue);
        transition: var(--trapez-transtion);
}

.product-share a:hover {
        background: var(--trapez-blue);
        color: var(--trapez-white);
        transform: translateY(-2px);
}

.related { background:#FFF;margin-top:30px;     background: linear-gradient(145deg, var(--trapez-white), var(--trapez-blue-soft));box-shadow: var(--trapez-shadow); border:1px solid var(--trapez-line);}

.related-header { 
        display: flex;
        flex-direction: column;;padding:30px;
 }

.related-header span {
        color: #8fc7df;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: bold;
        margin-bottom: 5px;
}

.related-header span::before {
        content: "";
        width: 24px;
        height: 2px;
        background: #8fc7df;
}


.related-header p {
        margin-top:10px;
}


.related .table-responsive { border-left:0px;border-right:0;border-bottom:0px; }

.products { padding-top:100px;
        background: linear-gradient(145deg, var(--trapez-white), var(--trapez-blue-soft)); }


.product-header { 
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        margin-bottom: 50px;
 }

.product-header span {
        color: #8fc7df;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: bold;
        margin-bottom: 5px;
}

.product-header span::before {
        content: "";
        width: 24px;
        height: 2px;
        background: #8fc7df;
}

.product-header h2 {
        font-size: 40px;
        max-width: 580px;
}

.products .container{
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        grid-gap: 15px;
        gap: 15px;
        margin-bottom: 30px;
        align-items: stretch;
}

.single {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        min-width: 0;
        min-height: 100%;
        padding: 0;
        overflow: hidden;
        text-align: left;
        background: var(--trapez-white);
        box-shadow: 0 14px 34px rgba(7, 30, 44, 0.07);
        border:1px solid var(--trapez-line);
        transition: var(--trapez-transition);
}

.single:hover {
        transform: translateY(-3px);
        box-shadow:var(--trapez-shadow);
}

.single-figure {
        aspect-ratio: 1.42;
        overflow: hidden;
        background: linear-gradient(
                180deg,
                #f9fafb 0%,
                var(--trapez-blue-soft) 100%
        );
        display: block;
        width: 100%;
        margin: 0;
        border-bottom: 1px solid var(--trapez-line);
}

.single-figure img {
          width: 100%;
        height: 100%;
        display: block;
        object-position: center;
        mix-blend-mode: multiply;
}

.single-content {
         padding: 15px;
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 10px;
}


.single-title a {
        display: -webkit-box;
        overflow: hidden;
        text-decoration: none;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
}
.single-description {
        display: -webkit-box;
        overflow: hidden;
        color: var(--trapez-muted);
        text-align: left;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        transition: var(--trapez-transition);
}

.single:hover .single-title a {
        color: var(--trapez-blue);
}

.single-meta {
        display: flex;
        gap: 15px;
        color: var(--trapez-muted);
}

.single-meta li { position:relative; }

.single-meta li + li::before {
        content: "";
        position: absolute;
        top: 50%;
        left: -9px;
        width: 4px;
        height: 4px;
        background: var(--trapez-red);
        transform: translateY(-50%);
}




.single::hover h3 a {
        color: var(--trapez-blue);
}


.single-bottom {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 15px;
        border-top: 1px solid var(--trapez-line);
        gap: 15px;
        margin-top: auto;
}

.single-price { display:flex;flex-direction:column; }

.single-price strong {
        font-family:var(--trapez-display);
        font-size: 24px;
        line-height: 1.2;
}

.single-price small {
        color: var(--trapez-muted);
        font-size: 12px;
}

.single-arrow { display:block;background:var(--trapez-red);color:var(--trapez-white);font-size:18px;padding:4px 10px; }

.search-list {
        display: grid;
        gap: 15px;
}

.search-list article {
        display: grid;
        grid-template-columns: 90px minmax(210px, 1fr) minmax(300px, auto) 135px 42px;
        align-items: center;
        gap: 20px;
        padding: 16px;
        border: 1px solid var(--trapez-line);
        background: var(--trapez-white);
        box-shadow: 0 8px 24px rgba(67, 76, 83, .05);
        transition: var(--trapez-transition);
}

.search-list article:hover {
        border-color: var(--trapez-blue);
        box-shadow: var(--trapez-shadow);
        transform: translateY(-2px);
}

.search-list article > a:first-child {
        display: block;
        width: 90px;
        aspect-ratio: 1;
        overflow: hidden;
        border: 1px solid var(--trapez-line);
        background: var(--trapez-blue-soft);
}

.search-list article > a:first-child img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        mix-blend-mode: multiply;
}

.search-list article > div:nth-child(4) strong,
.search-list article > div:nth-child(4) small {
        display: block;
}

.search-list article > div:nth-child(2) a {
        font-family: var(--trapez-display);
        font-weight: bold;
        font-size: 17px;
        line-height: 1.35;
}

.search-list article > div:nth-child(2) span {
        margin-top: 5px;
        color: var(--trapez-muted);
        font-size: 13px;
}

.search-list dl {
        display: grid;
        grid-template-columns: repeat(5, auto);
        gap: 30px;
}

.search-list dt {
        color: var(--trapez-muted);
        font-size: 11px;
        font-weight: bold;
        letter-spacing: .5px;
        text-transform: uppercase;
}

.search-list dd {
        color: var(--trapez-ink);
        font-weight: bold;
}

.search-list article > div:nth-child(4) {
        text-align: right;
}

.search-list article > div:nth-child(4) strong {
        font-family: var(--trapez-display);
        font-size: 21px;
        line-height: 1.2;
}

.search-list article > div:nth-child(4) small {
        margin-top: 3px;
        color: var(--trapez-muted);
}

.search-list article > a:last-child {
        display: grid;
        width: 42px;
        height: 42px;
        place-items: center;
        color: var(--trapez-white);
        background: var(--trapez-red);
        font-size: 17px;
        transition: var(--trapez-transition);
}

.search-list article > a:last-child:hover {
        background: var(--trapez-blue);
}


@media (max-width: 800px) {
      
}



.empty {
        position: relative;
        padding: 70px 24px;
        text-align: center;
        border: 1px solid var(--trapez-line);
        background: var(--trapez-white);
        box-shadow: var(--trapez-shadow);
        z-index: 1;
}

.empty .fal {
        display: block;
        margin-bottom: 16px;
        color: var(--trapez-blue);
        font-size: 42px;
}

.empty p {
        margin-bottom: 18px;
}

.empty .btn-primary {
        display: inline-flex;
        width: auto;
        margin: 0 auto;
}



.checkout {

        display: grid;
        grid-template-columns: minmax(0, 1fr) 330px;
        gap: 24px;
        align-items: start;

}



.checkout .btn-offer::after {
        content: "\2192";
        font-size: 21px;
        line-height: 1;
        transition: transform 0.2s ease;
}

.checkout .btn-offer:hover::after,
.checkout .btn-offer:focus-visible::after {
        transform: translateX(4px);
}

.summary {
        display: block;
        overflow: hidden;
        position: sticky;
        top: 24px;
        border: 1px solid var(--trapez-line);
        border-top: 4px solid var(--trapez-red);
        background: linear-gradient(145deg, var(--trapez-white) 0%, #f5f9fc 100%);
        box-shadow: 0 20px 50px rgba(9, 44, 71, 0.1);
}

.summary::before {
        content: "Teklif Özeti";
        display: block;
        padding:15px;
        color: var(--trapez-heading);
        border-bottom: 1px solid var(--trapez-line);
        font-family: var(--trapez-display);
        font-size: 25px;
        font-weight: 700;
        line-height: 1.2;
}

.summary .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 15px;
        padding: 15px;
}

.summary .item + .item { border-top:1px solid var(--trapez-line); }

.summary .item .left,
.summary .item .right {
        flex: 0 1 auto;
}

.summary .left {
        color: var(--trapez-muted);
        font-weight: bold;
}

.summary .right {
        text-align: right;
}

.summary .right strong {
        display: block;
        color: var(--trapez-heading);
        font-family: var(--trapez-display);
        font-size: 20px;
        line-height: 1.2;
        white-space: nowrap;
}

.summary .item:nth-child(3) {
        background: var(--trapez-blue-soft);
        border-top: 1px solid #c8dceb;
        border-bottom: 1px solid #c8dceb;
}

.summary .item:nth-child(3) .left {
        color: var(--trapez-heading);
        font-size: 15px;
        font-weight: 800;
}

.summary .item:nth-child(3) .right strong {
        color: var(--trapez-blue);
        font-size: 27px;
}

.summary .item:nth-child(4) {
        border-top: 0;
}


.baskets h2 {
        font-size: 18px;
        margin-bottom: 5px;
}

.baskets ul li {
        position: relative;
        padding-left: 15px;
        font-size:14px;
}

.baskets ul li::before {
        content: "";
        position: absolute;
        left: 2px;
        top: 0.62em;
        width: 5px;
        height: 5px;
        background: var(--trapez-red);
}


.baskets .form-group { 
        margin-bottom:0px; 
}


.baskets .form-control { 
        height:40px; 
}

.baskets .item {
        position: relative;
        display: grid;
        grid-template-columns: minmax(180px, 1fr) 220px minmax(120px, auto);
        align-items: center;
        background: var(--trapez-white);
        padding: 20px;
        gap: 15px;
        border: 1px solid var(--trapez-line);
}


.baskets .item + .item { margin-top:15px; }

.baskets .item .btn-out-of-cart {position: absolute;top:0;left:auto;right:0;}


.baskets .item .child {
        min-width: 0;
        display: grid;
        align-items: self-end;
        gap: 15px;
}

.baskets .item .child:nth-child(1) {
        align-items: center;
       grid-template-columns: 82px minmax(180px, 1fr);
}

.baskets .item .child:nth-child(1) img {
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: contain;
        border: 1px solid var(--trapez-line);
        background: var(--trapez-blue-soft);
}

.baskets .item .child:nth-child(2) {

        grid-template-columns:repeat(2,minmax(0, 1fr));
        text-align: center;
}

.baskets .item .child:nth-child(3) {
        text-align: center;
        gap:0px;
}

.baskets .item .price { display: block; font-family:var(--trapez-display);color:var(--trapez-heading);height:40px;line-height: 40px; font-size:20px;font-weight:bold; }



.modal.offer {
        position: fixed;
        inset: 0;
        z-index: 999999;
        display: none;
        place-items: center;
        padding: 20px;
        overflow-y: auto;
        background: var(--trapez-overlay-backdrop);
}

.modal.offer.active {
        display: grid;
}

.modal.offer .panel-default {
        width: min(100%, 520px);
        max-height: calc(100vh - 40px);
        overflow-y: auto;
        border: 1px solid var(--trapez-line);
        background: var(--trapez-white);
        box-shadow: var(--trapez-shadow);
}

.modal.offer .panel-heading {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 18px 22px;
        border-bottom: 1px solid var(--trapez-line);
}

.modal.offer .panel-title {
        color: var(--trapez-heading);
        font-family: var(--trapez-display);
        font-size: 24px;
}

.modal.offer .panel-actions a {
        display: grid;
        width: 38px;
        height: 38px;
        place-items: center;
        border: 1px solid rgba(255, 255, 255, 0.24);
        color: var(--trapez-muted);
}

.modal.offer .panel-body {
        padding: 22px;
}



.main {
        position: relative;
        height: 600px;
        background-image: url(/uploads/main.webp);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        padding: 0 30px;
        isolation: isolate;
        overflow: hidden;
        color: var(--trapez-white);
        text-align: center;
}



 .main:before {
        content: "";  
        position: absolute;
        inset: auto 0 0;
        background:   linear-gradient(118deg, #071d31 0%, #103c64 58%, #0d548b 100%);
        height: 100%;
        opacity: .85;
        z-index: 1;
}



.main h1 {
        max-width: 650px;
        color: var(--trapez-white);
        font-family: var(--trapez-display);
        font-size: 45px;
        margin-bottom: 15px;
        z-index: 2;
}

.main p {
        max-width: 650px;
        color: var(--trapez-white-alpha);
         margin-bottom: 15px;
         z-index: 2;
}

.main span {
        margin-bottom:10px;
        color: #8fc7df;
        display: flex;
        align-items: center;
        gap: 9px;
        font-weight: bold;
        z-index: 2;
}

.main span::before {
        content: "";
        width: 24px;
        height: 2px;
        background: currentColor;
}

.main .btn-danger {
        z-index: 2;
}


.features {
        background: var(--trapez-white);
        border-bottom: 1px solid var(--trapez-line);
}

.features .container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
}

.feature-item {
        display: flex;
        align-items: center;
        gap: 15px;
        padding: 20px;
        border-right: 1px solid var(--trapez-line);
}

.feature-item:first-child {
        border-left: 1px solid var(--trapez-line);
}

.feature-item > span {
        color: var(--trapez-blue);
        font-size:45px;
        line-height: 1;
        font-weight: bold;
        letter-spacing: -1px;
}

.feature-item strong {
        display: block;
        font-weight: bold;
        line-height: 1.2;
}

.feature-item small {
        display: block;
        color: var(--trapez-muted);
        font-size: 100%;
        line-height: 1.2;
}


.knowledges {

        background: linear-gradient(145deg, var(--trapez-white), var(--trapez-blue-soft));
        padding: 50px 0px;
}

.knowledge-header {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 50px;
        text-align: center;
}

.knowledge-header span {
        color: #8fc7df;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: bold;
        margin-bottom: 5px;
}

.knowledge-header span::before {
        content: "";
        width: 24px;
        height: 2px;
        background: #8fc7df;
}

.knowledge-header h2 {
        font-size: 40px;
        max-width: 580px;
}

.knowledges .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
}

.knowledge-left,
.knowledge-right {
        padding: 30px;
        background: var(--trapez-white);
        border: 1px solid var(--trapez-line);
        box-shadow: 0 12px 34px rgba(7, 30, 44, 0.05);
}

.knowledge-left h3,
.knowledge-right h3 {
        font-size: 22px;
        margin-bottom: 30px;
}

.knowledge-left dl div {
        display: grid;
        grid-template-columns: 150px 1fr;
        gap: 15px;
}

.knowledge-left dl div + div {
        margin-top: 15px;
        padding-top: 15px;
        border-top: 1px solid var(--trapez-line);
}

.knowledge-left dt {
        color: var(--trapez-blue);
        font-weight: bold;
}
.knowledge-right p {
        margin-bottom: 30px;
}
.knowledge-right ul {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 12px;
}

.knowledge-right ul li {
        display: grid;
        gap: 7px;
        padding: 18px;
        background: var(--trapez-blue-soft);
        border: 1px solid var(--trapez-line);
}

.knowledge-right ul li strong {
        color: var(--trapez-blue);
}

.knowledge-right ul li small {
        color: var(--trapez-muted);
        font-size: 12px;
}

.knowledge-right ul li b {
        color: var(--trapez-red);
        font-size: 22px;
}

.calculator {
        position: relative;
        padding:50px 0px;
        color: var(--trapez-white);
        background-image:url(/uploads/trapez-sac-fiyat-hesaplama.webp);
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        overflow: hidden;
}

 .calculator:before {
        content: "";  
        position: absolute;
        inset: auto 0 0;
        background:   linear-gradient(118deg, #071d31 0%, #103c64 58%, #0d548b 100%);
        height: 100%;
        opacity: .95;
}




.calculator .container {
        position: relative;
        display: grid;
        grid-template-columns: 1fr 1fr;
        align-items: center;
        gap: 80px;
}

.calculator-left p {
        margin-top: 15px;
        color: var(--trapez-white-alpha);
}

.calculator-left span {
        color: #8fc7df;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: bold;
        margin-bottom: 15px;
}

.calculator-left span::before {
        content: "";
        width: 24px;
        height: 2px;
        background: #8fc7df;
}

.calculator-left h2 {
        font-size: 50px;
        color: #fff;
}

.calculator-left ul {
        display: grid;
        align-items: flex-start;
        gap: 5px;
        margin-top: 15px;
        text-align: left;
}

.calculator-left ul li {
        display: flex;
        align-items: center;
        gap: 10px;
        color: var(--trapez-white-alpha);
}

.calculator-left ul li i {
        font-size: 8px;
        color: #8fc7df;
}

.calculator-right {
        background: var(--trapez-white);
        color: var(--trapez-ink);
        padding: 30px;
        box-shadow: 0 28px 70px rgba(0, 0, 0, 0.22);
        text-align: left;
}

.calculator-right .btn-danger { 
        margin-top:20px;
}



.form-row {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        flex-wrap: wrap;
        gap: 15px;
}

.form-row > .form-group {
        margin-bottom:0; 
}

.contact {
        position: relative;
        display: grid;
        grid-template-columns: 0.8fr 1.2fr;
        align-items: start;
        gap: 30px;
        z-index: 5;
}
.contact h2 {
        margin: 5px 0 20px;
}



.contact span {
        display: block;
        color: var(--trapez-blue);
        font-weight: bold;
}


.contact-left {
        padding:30px;
        border: 1px solid var(--trapez-line);
        border-top: 4px solid var(--trapez-blue);
        background: var(--trapez-white);
        color: var(--trapez-ink);
        box-shadow: var(--trapez-shadow);
}
.contact-left iframe {
        width: 100%;
        border: 0;
        margin: 0;
        vertical-align: middle;
        height: 180px;
        margin-top: 10px;
}

.contact-left ul li{
        display: grid;
        grid-template-columns: 100px minmax(0, 1fr);
        gap: 15px;
        align-items: center;
        padding: 15px 0;
        border-top: 1px solid var(--trapez-line);
}

.contact-left ul li strong {
        color: var(--trapez-blue);
}

.contact-left ul li address,
.contact-left ul li a {
        font-weight: bold;
        font-style: normal;
}

.contact-left ul li address:hover,
.contact-left ul li a:hover {
        color: var(--trapez-blue);
}

.contact-right {
        padding:30px;
        border: 1px solid var(--trapez-line);
        border-top: 4px solid var(--trapez-red);
        background: var(--trapez-white);
        color: var(--trapez-ink);
        box-shadow: var(--trapez-shadow);
}




.guides {

        background: linear-gradient(145deg, var(--trapez-white), var(--trapez-blue-soft));
        padding:75px 0px;
}
.guides .container {
        display: grid;
        grid-template-columns: 1fr 0.76fr;
        align-items: center;
        gap: 50px;
}

.guides span {
        color: #8fc7df;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: bold;
        margin-bottom: 5px;
}

.guides span::before {
        content: "";
        width: 24px;
        height: 2px;
        background: #8fc7df;
}

.guides h2 {
        font-size: 40px;
        margin-bottom: 15px;
}

.guides p + p {
        margin-top: 5px;
}

.guide-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 15px;
        margin-top: 20px;
}




.usages {
        padding:50px 0px;

        background: linear-gradient(118deg, #071d31 0%, #103c64 58%, #0d548b 100%);
        border-top: 1px solid var(--trapez-line);
}

.usage-header {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        margin-bottom: 50px;
        text-align: center;
}
.usage-header span {
        color: #8fc7df;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: bold;
        margin-bottom: 5px;
}

.usage-header span::before {
        content: "";
        width: 24px;
        height: 2px;
        background: #8fc7df;
}

.usage-header h2 {
        font-size: 40px;
        max-width: 580px;
        color: var(--trapez-white);
}

.usages .container {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap:30px;
}

.usages ul li {
        display: flex;
        align-items: center;
        flex-direction: column;
        transition: var(--trapez-transition);
        color: var(--trapez-white-alpha);
        text-align: center;
}

.usages ul li i {
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,.1);
        color: #8fc7df;
        font-size: 45px;
        margin-bottom: 30px;
        width:45px;
        height:45px;
        text-align: center;
        border-radius: 100%;
}

.usages ul li strong {
        display: block;
        font-family: var(--trapez-display);
        font-size: 20px;
        margin-bottom: 10px;
}

.cta {
        padding-block: 76px;
        color: var(--trapez-white);
        background:  linear-gradient(118deg, #071d31 0%, #103c64 58%, #0d548b 100%);
}

.cta span {
        color: #8fc7df;
        display: flex;
        align-items: center;
        gap: 10px;
        font-weight: bold;
        margin-bottom: 15px;
}

.cta span::before {
        content: "";
        width: 24px;
        height: 2px;
        background: #8fc7df;
}

.cta .container {
        display: grid;
        grid-template-columns: 0.86fr 1fr;
        align-items: center;
        gap: 54px;
}
.cta h2 {
        color: var(--trapez-white);
        font-size: 45px;
}

.cta p {
        color: var(--trapez-white-alpha);
}

.blog {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 30px;
        align-items: stretch;
}

.blog-layout {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 340px;
        gap: 50px;
        align-items: start;
}

.blog-aside {
        position: sticky;
        top: 30px;
        display: grid;
        gap: 15px;
}

.blog-widget {
        display: flex;

        background: var(--trapez-white);
        box-shadow: var(--trapez-shadow);
        padding: 30px;
        flex-direction: column;
        gap: 10px;
}

.blog-widget span {
        color: var(--trapez-blue);
        font-size: 12px;
        font-weight: 900;
}

.blog-aside .btn-danger {
        display: inline-flex;
        justify-content: space-between;
}

.blog-related-list {
        display: grid;
        gap: 12px;
}

.blog-related-list a {
        display: grid;
        grid-template-columns: 72px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
        text-decoration: none;
}

.blog-related-list a:hover strong {
        color: var(--trapez-blue);
}

.blog-related-list img {
        width: 72px;
        height: 58px;
        object-fit: cover;
        border: 1px solid var(--trapez-line);
        background: var(--trapez-blue-soft);
}

.blog-related-list strong {
        display: -webkit-box;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-height: 1.4;
}

.content {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 15px;
        margin-bottom: 30px;
        padding: 30px;
        border: 1px solid var(--trapez-line);
        background: var(--trapez-white);
        box-shadow: var(--trapez-shadow);
        z-index: 1;
}

.content + .content {
        margin-top: 0;
}

.content-header {
        display: grid;
        grid-template-columns: 45px minmax(0, 1fr);
        gap: 20px;
        align-items: center;
}

.content-header > span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 45px;
        height: 45px;
        background: var(--trapez-blue);
        color: var(--trapez-white);
        font-size: 20px;
        font-weight: 900;
        box-shadow: 0 12px 26px rgba(20, 81, 151, 0.18);
}

.content-header h2 {
        font-size: 30px;
}

.content-header p {
        max-width: 780px;
}



.content ul {
        display: grid;
        gap: 10px;
        list-style: none;
}

.content ul li {
        position: relative;
        padding-left: 28px;
}

.content ul li::before {
        content: "";
        position: absolute;
        left: 2px;
        top: 0.62em;
        width: 9px;
        height: 9px;
        background: var(--trapez-red);
}

.calculator-result {
        display: grid;
        grid-template-columns: repeat(3, auto);
        margin-bottom: 20px;
        gap:15px;
        margin-top:20px;
}

.calculator-item {  background: var(--trapez-blue-soft);
        border: 1px solid var(--trapez-line);  padding:15px;
        text-align: center;
        }


.calculator-item span {
        display: block;
        color: var(--trapez-muted);
        font-size: 85%;
        font-weight: bold;
}

.calculator-item strong {
        display: block;
        color: var(--trapez-heading);
        font-size: 22px;
        line-height: 1.2;
}



@media (min-width: 1000px) {


.related table tr th:first-child, .related table tr td:first-child { padding-left:30px; }
.related table tr th:last-child, .related table tr td:last-child { padding-right:30px; }
}
@media (max-width: 1000px) {

        .features .container,
        .products .container,
        .usages .container{
                grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .blog,
        .guides .container,
        .calculator .container,
        .knowledges .container,
        .cta .container,
        .product-layout,
        .contact,
        .contact-method {
                grid-template-columns: 1fr;
        }
        .guides .container,
        .calculator .container,
        .knowledges .container {
                gap: 30px;
        }

          .usage-header h2,
        .knowledge-header h2,
        .product-header h2,
        .guides h2,
        .cta h2,
        .calculator-left h2 {
                font-size: 30px;
        }


        .usage-header,
        .knowledge-header,
        .product-header {
                margin-bottom: 30px;
        }

        .calculator-right,
        .knowledge-left,
        .knowledge-right {
                min-width: 0;
                padding: 15px;
        }

        .guides { background: linear-gradient(145deg, var(--trapez-white), var(--trapez-blue-soft));text-align:center;padding:50px 0px; }
        .guides span { justify-content:center; }
        .guide-actions { justify-content:center; }
        .guide-right { display: none; }

          .search-list article {
                grid-template-columns: 72px minmax(0, 1fr);
                grid-template-areas:
                        "photo info action"
                        "details details details"
                        "price price price";
                gap: 15px;
        }

        .search-list article > a:first-child {
                grid-area: photo;
                width: 72px;
        }
        .search-list article > dl >:nth-child(1) {
                display: none;
        }
        .search-list article > div:nth-child(2) {
                grid-area: info;
        }

        .search-list article > dl {
                grid-area: details;
                padding-top: 14px;
                border-top: 1px solid var(--trapez-line);

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

        }

        .search-list article > div:nth-child(4) {
                grid-area: price;
                display: flex;
                align-items: center;
                justify-content: space-between;
                padding-top: 14px;
                border-top: 1px solid var(--trapez-line);
                text-align: left;
        }

        .search-list article > a:last-child {
                grid-area: action;
        }

        .usages ul li i { font-size:40px;height:40px;width:40px; }
        .usages ul li strong { font-size:18px; }


        .product-layout {gap:0px}

        .product-right {
                position:static;
                display:flex;
                flex-direction:column;
                border-top:0px;
        }



        .product { margin-top:30px;margin-bottom:0px; }
    
        .product h1 { font-size:25px; margin-bottom: 30px; }


        .product-figure { border-bottom:0px; }
        .product-figure img { min-height: 250px; max-height: 250px;}
        .product-figure figcaption {font-size:13px;}

        .product-description{ order:2;padding:15px; }
        .product-description ul li {  padding-left: 15px;  }   


        .product-form {
                order:1;
                padding:15px;
                border-bottom:1px solid var(--trapez-line);
        }

        .product-form-heading {
                display:grid;
                gap:3px;
                margin-bottom:15px;
        }

        .product-form-heading strong {
                color:var(--trapez-heading);
                font-family:var(--trapez-display);
                font-size:20px;
                line-height:1.2;
        }

        .product-form-heading span {
                color:var(--trapez-muted);
                font-size:14px;
                line-height:1.4;
        }

        .product-share { order:3;padding:0 15px 15px 15px;  }

        .product-table { display:none; }

        .product-form .form-row { display:flex;align-items:center;justify-content:center; }
        .product-form .form-row .form-group { flex:1;flex-grow:1; }

        .related-header { padding:15px; }
       
        .main h1 {  font-size:35px; }

        .features { padding:30px 0px; }

        .features .container { gap:15px; }

        .feature-item {
                align-items: flex-start;
                flex-direction: column;
               background:var(--trapez-blue-soft);
                padding: 15px;
                border:1px solid var(--trapez-line);
                gap:10px;
        }

        .feature-item > span { display: none; font-size: 30px; }

        .feature-item strong { color:var(--trapez-blue); }

      


        .knowledges { 
                background: linear-gradient(145deg, var(--trapez-white), var(--trapez-blue-soft));
         }
        .knowledge-left h3,
        .knowledge-right h3 {
                margin-bottom: 10px;
        }

        .knowledge-left dl div {
                grid-template-columns: 1fr;
                gap: 4px;
        }      
        .knowledge-right p{
                margin-bottom: 15px;
        }

        .table-responsive {
                width: 100%;
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
        }

        .knowledge-right table {
                min-width: 560px;
        }

        .cta {
                padding-block: 48px;
        }

        .calculator {text-align: center;}
        .calculator-left span { justify-content:center; }

        .checkout {
                grid-template-columns: 1fr;
                gap: 18px;
        }

        .summary {
                position: static;
        }

        .summary::before {
                font-size: 23px;
        }
      
        .baskets .item {
               grid-template-columns: 1fr;
        }

     
        .baskets .item .child:nth-child(3) {
               border-top:1px solid var(--trapez-line);
               padding-top:15px;
        }


        .baskets .item .price {
               height:auto;
               line-height: 1;
        }

        .products {
                padding-top: 50px;
        }


        .single-meta {

                font-size:12px;
                gap: 15x;
        }
        .single-content{
                padding:15px;
                gap:10px;
        }
     
        .single-price strong {
                font-size: 16px;
        }

        .single-arrow {padding:4px 10px;  font-size:16px;}


        .cta .container { gap:15px; }

        .contact-left, .contact-right{ padding:15px; }

        .content {
                padding: 15px;
        }
       
        .content-header h2 {
                font-size: 20px;
        }

        .content ul {
                gap: 5px;
        }
        .content ul li {
                padding-left: 20px;
        }
        .content ul li::before {
                left: 0px;
        }

        .calculator-item {
                padding: 10px;
        }
      

        .calculator-item strong {
                font-size:18px;
        }
    
        .blog-layout {
                display: block;
        }

        .blog-aside {
                margin-top: 15px;
                gap: 15px;
        }

        .blog-widget {
                padding: 15px;
        }

        .blog-aside .btn-danger {
                padding: 10px 15px;
        }

        .article {
                padding: 15px;
        }
        .article-cover {
                margin-left: -15px;
                margin-right: -15px;
                margin-top: -15px;
                margin-bottom: 0px;
                aspect-ratio: 16/9;
        }
}