.tp-tools-section {
width: 100%;
padding: 35px 0 55px;
overflow: hidden;}
.tp-tools-section .container {position: relative;}
.tp-tools-hero {
position: relative;
min-height: 245px;
display: flex;
align-items: center;
padding: 42px 46px;
margin-bottom: 28px;
overflow: hidden;

border:1px solid rgba(20,40,60,.06);
border-radius:14px;
box-shadow:0 6px 18px rgba(0,0,0,.05);
transition:box-shadow .30s ease;
transform:translateZ(0);






background-color: #f8fbfe;
background-image:
url("https://www.artemispool.com/images/teknik/hesaplama_araclari.webp");
background-repeat: no-repeat;
background-position:right center;
background-size:cover;}


.tp-tools-hero::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
linear-gradient(
90deg,
rgba(255,255,255,0.98) 0%,
rgba(255,255,255,0.94) 35%,
rgba(255,255,255,0.50) 58%,
rgba(255,255,255,0.04) 100%
);
}

.tp-tools-hero-content {
position: relative;
z-index: 2;
width: 54%;
max-width: 650px;}

.tp-tools-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 9px 15px; margin-bottom: 13px; border-radius: 30px; background:var(--breadcrumb-5); font-size: 12px; font-weight: 700; letter-spacing: 0.7px; text-transform: uppercase; }
.tp-tools-eyebrow i { font-size: 14px; }
.tp-tools-hero h2 { margin: 0 0 10px; font-size: 36px; line-height: 1.15; font-weight: 750; letter-spacing: -0.7px; }
.tp-tools-hero p {
max-width: 570px;
margin: 0;
font-size: 16px;
line-height: 1.65;}

.tp-tools-features {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 22px;
margin-top: 20px;}

.tp-tools-features span { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; }
.tp-tools-features i { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background:var(--breadcrumb-5); font-size: 13px; }

.tp-tools-hero-controls {
position: absolute;
z-index: 5;
right: 25px;
bottom: 28px;
display: flex;
gap: 10px;}

.tp-tools-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
padding: 0;
border: 1px solid #d8e5ee;
border-radius: 50%;
background: var(--breadcrumb-5);
color: var(--color-1);
font-size: 18px;
cursor: pointer;
transition:
background .25s ease,
color .25s ease,
border-color .25s ease,
transform .25s ease,
box-shadow .25s ease;}

.tp-tools-arrow:hover {
background: var(--color-1);
border-color: var(--color-1);
color: #ffffff;
transform: translateY(-2px);
box-shadow:
0 8px 20px rgba(34, 82, 120, 0.20);}

.tp-tools-arrow:active {transform: translateY(0);}

.tp-tools-slider {position: relative;width: 100%;}
.tp-tools-viewport {width: 100%;overflow: hidden;padding: 0 2px 8px;}
.tp-tools-track {
display: flex;
align-items: stretch;
gap: 16px;
width: max-content;
will-change: transform;
transform: translate3d(0, 0, 0);}

.tp-tool-slide {
flex: 0 0 calc(
(min(100vw - 32px, 1320px) - 64px) / 5
);

min-width: 0;
}

.tp-tool-card {
position: relative;
display: flex;
flex-direction: column;
height: 100%;
min-height: 405px;
overflow: hidden;
background: #ffffff;
border: 1px solid #dce8f0;
border-radius: 15px;
text-decoration: none;
box-shadow:
0 7px 20px rgba(34, 82, 120, 0.07);

transition:
transform .3s ease,
box-shadow .3s ease,
border-color .3s ease;}

.tp-tool-card:hover {
transform: translateY(-5px);
border-color: #c7dce9;
box-shadow:0 15px 32px rgba(34, 82, 120, 0.13);}

.tp-tool-image {
position: relative;
width: 100%;
aspect-ratio: 1.38 / 1;
overflow: hidden;
background: #eaf4fa;}


.tp-tool-image img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition:transform .45s ease;}

.tp-tool-card:hover .tp-tool-image img {transform: scale(1.035);}

.tp-tool-number {
position: absolute;
top: 12px;
right: 12px;
z-index: 4;
display: flex;
align-items: center;
justify-content: center;
width: 43px;
height: 43px;
border-radius: 11px;
background: var(--color-1);
color: #ffffff;
font-size: 15px;
font-weight: 800;
line-height: 1;
box-shadow:
0 6px 14px rgba(34, 82, 120, 0.25);}

.tp-tool-card-content {
display: flex;
flex: 1;
flex-direction: column;
padding: 18px 17px 14px;}
.tp-tool-card h3 { margin: 0 0 8px; color: var(--breadcrumb-2); font-size: 17px; line-height: 1.3; font-weight: 750; letter-spacing: -0.2px; }
.tp-tool-card p {margin: 0;
color: var(--home-1);
font-size: 13px;
line-height: 1.55;}

.tp-tool-card-bottom {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-top: auto;
padding-top: 14px;
border-top: 1px solid #e6eef4;}

.tp-tool-card-bottom > span:first-child {color: var(--breadcrumb-2);
font-size: 12px;font-weight: 700;}

.tp-tool-card-arrow {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
width: 34px;
height: 34px;
border: 1px solid var(--breadcrumb-5);
border-radius: 50%;
color: var(--color-1);
font-size: 14px;
transition:
background .25s ease,
color .25s ease,
transform .25s ease;}

.tp-tool-card:hover .tp-tool-card-arrow {
background: var(--color-1);
border-color: var(--color-1);
color: #ffffff;
transform: translateX(3px);}

.tp-tools-slider-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin-top: 14px;
min-height: 30px;}

.tp-tools-progress {
display: flex;
align-items: center;
gap: 5px;}
.tp-tools-progress-active { display: block; width: 34px; height: 4px; border-radius: 10px; background: var(--home-1); }
.tp-tools-swipe {display: inline-flex;
align-items: center;
gap: 8px;
color: #8297a9;
font-size: 12px;}

.tp-tools-swipe i:first-child {color: var(--color-1);font-size: 15px;}
.tp-tools-swipe i:last-child {color: var(--color-1);font-size: 12px;}

.tp-tools-benefits {
display: grid;
grid-template-columns: repeat(4, 1fr);
margin-top: 28px;
padding: 18px 20px;
background: #ffffff;
border: 1px solid #dce8f0;
border-radius: 17px;
box-shadow:
0 8px 25px rgba(34, 82, 120, 0.06);}

.tp-benefit {
display: flex;
align-items: center;
gap: 13px;
min-width: 0;
padding: 0 22px;
border-right: 1px solid #e2ebf1;}

.tp-benefit:first-child {padding-left: 10px;}
.tp-benefit:last-child {border-right: 0;padding-right: 10px;}
.tp-benefit-icon { display: flex; align-items: center; justify-content: center; flex: 0 0 45px; width: 45px; height: 45px; border-radius: 50%; background: var(--breadcrumb-5); color: var(--home-1); font-size: 18px;}
.tp-benefit strong { display: block; margin-bottom: 3px; color: var(--home-1); font-size: 13px; font-weight: 750; }
.tp-benefit span { display: block; color: var(--home-1); font-size: 11px; line-height: 1.4; }

@media (max-width: 1199px) {
.tp-tool-slide {
flex-basis: calc(
(min(100vw - 32px, 960px) - 32px) / 3
);

}

.tp-tools-hero-content {width: 62%;}
.tp-tools-hero h2 {font-size: 32px;}
.tp-tools-benefits {grid-template-columns: repeat(2, 1fr);row-gap: 20px;}
.tp-benefit:nth-child(2) {border-right: 0;}
.tp-benefit:nth-child(3) {padding-left: 10px;}
}

@media (max-width: 991px) {
.tp-tools-section {padding-top: 25px;}
.tp-tools-hero {min-height: 300px;padding: 35px 30px;
background-position: center right;}
.tp-tools-hero::before {
background:
linear-gradient(
90deg,
rgba(255,255,255,0.98) 0%,
rgba(255,255,255,0.90) 50%,
rgba(255,255,255,0.25) 100%
);

}
.tp-tools-hero-content {width: 68%;}
}

@media (max-width: 767px) {
.tp-tools-section {padding: 20px 0 35px;}
.tp-tools-hero {
min-height: 360px;
margin-bottom: 18px;
padding: 28px 22px;
align-items: flex-start;
background-position:center bottom;
background-size:auto 58%;}

.tp-tools-hero::before {

background:
linear-gradient(
180deg,
rgba(255,255,255,0.98) 0%,
rgba(255,255,255,0.90) 52%,
rgba(255,255,255,0.20) 100%
);

}
.tp-tools-hero-content {width: 100%;}
.tp-tools-hero h2 {font-size: 27px;
}


.tp-tools-hero p {

font-size: 14px;

}


.tp-tools-features {

gap: 10px;

margin-top: 14px;

}


.tp-tools-features span {

font-size: 11px;

}


.tp-tools-features i {

width: 27px;

height: 27px;

}


.tp-tools-hero-controls {

right: 18px;

bottom: 17px;

}


.tp-tools-arrow {

width: 40px;

height: 40px;

font-size: 15px;

}


.tp-tool-slide {

flex-basis: calc(
100vw - 55px
);

}


.tp-tool-card {

min-height: 395px;

}


.tp-tools-benefits {

grid-template-columns: 1fr;

padding: 12px 16px;

}


.tp-benefit,
.tp-benefit:first-child,
.tp-benefit:last-child {

padding: 12px 0;

border-right: 0;

border-bottom: 1px solid #e2ebf1;

}


.tp-benefit:last-child {

border-bottom: 0;

}


.tp-tools-slider-footer {

align-items: flex-start;

flex-direction: column;

}


.tp-tools-swipe {

font-size: 11px;

}

}


/* =========================================================
VERY SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

.tp-tools-hero h2 {

font-size: 24px;

}


.tp-tools-hero {

min-height: 350px;

}


.tp-tool-slide {

flex-basis: calc(
100vw - 45px
);

}

}