/* ==========================================================================
ANA SAYFA (HOMEPAGE) STİLLERİ - ENDÜSTRİYEL OTOMASYON & ELEKTRİK SİSTEMLERİ
FONT: POPPINS
========================================================================== */.h-100 {
height: 100%;
}/* ==========================================================================
01 — HERO SWIPER SLIDER
========================================================================== */
.hero-swiper-sec {
position: relative;
width: 100%;
height: calc(90vh - 80px);
min-height: 560px;
max-height: 840px;
background-color: var(--color-dark);
overflow: hidden;
}.hero-main-swiper {
width: 100%;
height: 100%;
position: relative;
}.hero-slide-item {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}/* Arka Plan Medyası & Ken Burns Zoom Efekti */
.slide-bg-media {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}.slide-bg-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transform: scale(1);
transition: transform 7s cubic-bezier(0.16, 1, 0.3, 1);
display: block;
}.swiper-slide-active .slide-bg-img {
transform: scale(1.08);
}/* Koyu Gradyan Katmanı (Yazıların Okunması İçin) */
.slide-dark-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(90deg,
rgba(18, 17, 16, 0.90) 0%,
rgba(18, 17, 16, 0.60) 45%,
rgba(18, 17, 16, 0.20) 100%);
z-index: 2;
opacity: 60%;
}.slide-grid-pattern {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
background-size: 24px 24px;
opacity: 0.35;
z-index: 3;
pointer-events: none;
}/* İçerik Kutusu - SLOGAN DİKEYDE ORTADA HİZALI */
.slide-caption-wrap {
position: relative;
z-index: 10;
max-width: 780px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
/* Slogan dikeyde tam ortada */
align-items: flex-start;
padding: 60px 0;
color: #ffffff;
}/* Alt Başlık / Rozet */
.slide-subtitle-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 6px 14px;
border-radius: 0;
margin-bottom: 18px;
transform: translateY(20px);
opacity: 0;
transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}.swiper-slide-active .slide-subtitle-badge {
transform: translateY(0);
opacity: 1;
}.badge-pulse-dot {
width: 7px;
height: 7px;
background-color: var(--color-accent);
border-radius: 0;
box-shadow: 0 0 8px var(--color-accent);
display: inline-block;
animation: pulseDot 2s infinite;
}@keyframes pulseDot {
0% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(189, 23, 24, 0.7);
}70% {
transform: scale(1);
box-shadow: 0 0 0 8px rgba(189, 23, 24, 0);
}100% {
transform: scale(0.95);
box-shadow: 0 0 0 0 rgba(189, 23, 24, 0);
}
}.badge-text {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
text-transform: uppercase;
color: #ffffff;
}/* Ana Başlık - Kibar & Modern Tipografi */
.slide-main-heading {
font-size: clamp(26px, 3.2vw, 42px);
font-weight: 500;
line-height: 1.28;
letter-spacing: -0.01em;
color: #ffffff;
margin: 0 0 16px;
max-width: 720px;
transform: translateY(30px);
opacity: 0;
transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;
text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}.slide-main-heading strong,
.slide-main-heading b {
font-weight: 600;
color: #ffffff;
}.slide-main-heading span {
font-weight: 600;
}.swiper-slide-active .slide-main-heading {
transform: translateY(0);
opacity: 1;
}/* Açıklama Metni */
.slide-desc-text {
font-size: clamp(14px, 1.2vw, 16px);
font-weight: 400;
line-height: 1.65;
color: rgba(255, 255, 255, 0.85);
margin: 0 0 28px;
max-width: 580px;
transform: translateY(30px);
opacity: 0;
transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.45s;
}.swiper-slide-active .slide-desc-text {
transform: translateY(0);
opacity: 1;
}/* Buton Grubu */
.slide-btn-group {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
transform: translateY(30px);
opacity: 0;
transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.6s;
}.swiper-slide-active .slide-btn-group {
transform: translateY(0);
opacity: 1;
}/* Birincil Buton */
.slide-primary-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background-color: var(--color-accent);
color: #ffffff;
font-size: 12.5px;
font-weight: 600;
text-transform: uppercase;
padding: 12px 28px;
border-radius: 50px;
text-decoration: none;
border: 1px solid var(--color-accent);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}.slide-primary-btn:hover {
background-color: var(--color-accent-hover);
border-color: var(--color-accent-hover);
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 10px 28px rgba(189, 23, 24, 0.45);
}.slide-primary-btn .btn-arrow-svg {
transition: transform 0.3s ease;
}.slide-primary-btn:hover .btn-arrow-svg {
transform: translateX(4px);
}/* İkincil Buton */
.slide-secondary-btn {
display: inline-flex;
align-items: center;
gap: 8px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #ffffff;
font-size: 12.5px;
font-weight: 600;
letter-spacing: 0.04em;
padding: 13px 26px;
border-radius: 0;
text-decoration: none;
border: 1px solid rgba(255, 255, 255, 0.25);
transition: all 0.3s ease;
}.slide-secondary-btn:hover {
background: #ffffff;
color: #121110;
border-color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}/* Swiper Navigasyon & Pagination Kontrolleri (Sağ Alt Köşe) */
.hero-swiper-controls {
position: absolute;
right: 48px;
bottom: 40px;
z-index: 25;
display: flex;
align-items: center;
gap: 10px;
background: rgba(18, 17, 16, 0.85);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
padding: 8px;
border-radius: 0;
border: 1px solid rgba(255, 255, 255, 0.15);
}.hero-nav-btn {
width: 36px;
height: 36px;
border-radius: 0;
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.25s ease;
outline: none;
border: 1px solid transparent;
}.hero-nav-btn:hover {
background: var(--color-accent);
border-color: var(--color-accent);
color: #ffffff;
transform: none;
}.hero-swiper-pagination {
display: flex;
align-items: center;
gap: 6px;
position: static !important;
width: auto !important;
}.hero-swiper-pagination .swiper-pagination-bullet {
width: 14px;
height: 3px;
background: rgba(255, 255, 255, 0.4);
border-radius: 0;
opacity: 1;
margin: 0 !important;
transition: all 0.3s ease;
cursor: pointer;
}.hero-swiper-pagination .swiper-pagination-bullet-active {
width: 26px;
height: 3px;
border-radius: 0;
background: var(--color-accent);
}/* Mouse Scroll Göstergesi (Gerçek Mouse Formu & Beyaz) */
.hero-scroll-indicator {
position: absolute;
left: 50%;
bottom: 24px;
transform: translateX(-50%);
z-index: 20;
pointer-events: none;
}.mouse-icon {
width: 20px;
height: 32px;
border: 2px solid #ffffff;
border-radius: 12px;
display: flex;
justify-content: center;
padding-top: 6px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
box-sizing: border-box;
transition: border-color 0.4s ease, box-shadow 0.4s ease;
}.mouse-wheel {
width: 3px;
height: 6px;
background-color: #ffffff;
border-radius: 3px;
box-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
animation: mouseScroll 1.8s cubic-bezier(0.65, 0, 0.35, 1) infinite;
transition: background-color 0.4s ease, box-shadow 0.4s ease;
}/* 1. Slayt Beyaz Zemin - Kırmızı Mouse İkonu */
.hero-scroll-indicator.indicator-red .mouse-icon,
.hero-main-swiper:has(.swiper-slide-active[data-swiper-slide-index="0"]) .hero-scroll-indicator .mouse-icon {
border-color: var(--color-accent, #bd1718);
box-shadow: 0 2px 12px rgba(189, 23, 24, 0.4);
}.hero-scroll-indicator.indicator-red .mouse-wheel,
.hero-main-swiper:has(.swiper-slide-active[data-swiper-slide-index="0"]) .hero-scroll-indicator .mouse-wheel {
background-color: var(--color-accent, #bd1718);
box-shadow: 0 0 6px rgba(189, 23, 24, 0.8);
}@keyframes mouseScroll {
0% {
opacity: 1;
transform: translateY(0);
}50% {
opacity: 1;
transform: translateY(6px);
}100% {
opacity: 0;
transform: translateY(11px);
}
}/* ==========================================================================
02 — SLİDER ALTINDA GEÇEN LOGOLAR / ÇÖZÜM ORTAKLARI (MARQUEE TICKER)
========================================================================== */
.brand-marquee-section {
background-color: #ffffff;
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
padding: 30px 0;
position: relative;
overflow: hidden;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.02);
}.brand-marquee-container {
position: relative;
width: 100%;
overflow: hidden;
mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
padding: 6px 0;
}.brand-marquee-track {
display: flex;
width: max-content;
animation: logoMarqueeScroll 55s linear infinite;
will-change: transform;
}.brand-marquee-container:hover .brand-marquee-track {
animation-play-state: paused;
}.brand-marquee-group {
display: flex;
align-items: center;
gap: 28px;
padding: 0 14px;
}.brand-card-item {
flex-shrink: 0;
}.brand-card-link {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
cursor: pointer;
}.brand-img-box {
width: 215px;
height: 105px;
overflow: hidden;
background: #ffffff;
border: 1px solid #ebe8e4;
border-radius: 0;
padding: 14px 22px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.03);
transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}.brand-logo-img {
max-width: 90%;
width: auto;
height: auto;
object-fit: contain;
filter: grayscale(100%) opacity(0.8);
transition: filter 0.3s ease, transform 0.3s ease;
display: block;
}.brand-hover-zoom {
position: absolute;
top: 7px;
right: 7px;
width: 22px;
height: 22px;
border-radius: 0;
background: var(--color-accent);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transform: scale(0.6);
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 2px 6px rgba(189, 23, 24, 0.3);
}.brand-card-link:hover .brand-img-box {
transform: translateY(-4px);
border-color: rgba(189, 23, 24, 0.4);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}.brand-card-link:hover .brand-logo-img {
filter: grayscale(0%) opacity(1);
transform: scale(1.05);
}.brand-card-link:hover .brand-hover-zoom {
opacity: 1;
transform: scale(1);
}.brand-title-caption {
font-size: 12px;
font-weight: 500;
color: #6e6a66;
margin-top: 8px;
transition: color 0.2s ease;
}.brand-card-link:hover .brand-title-caption {
color: var(--color-accent);
}@keyframes logoMarqueeScroll {
0% {
transform: translateX(0);
}100% {
transform: translateX(-50%);
}
}/* ==========================================================================
STANDART BÖLÜM BAŞLIĞI ŞABLONU (ABB STYLE UNIFIED SECTION HEADER)
Sol: Büyük Başlık + Açıklama Metni
Sağ: Kırmızı Oval Buton (Pill Button)
Opsiyonel Sol Alt: Minimalist Oklar (Slider için)
========================================================================== */
.abb-section-header {
margin-bottom: 40px;
}.abb-header-main {
display: flex;
justify-content: space-between;
align-items: center;
gap: 32px;
}/* Fallback if .abb-header-main is not used */
.abb-section-header>.abb-header-left:first-child:not(:only-child),
.abb-section-header.abb-flex-direct {
display: flex;
justify-content: space-between;
align-items: center;
gap: 32px;
}.abb-header-left {
flex: 1 1 auto;
max-width: 820px;
}.abb-section-title {
font-size: clamp(24px, 2.4vw, 32px);
font-weight: 700;
color: #141312;
letter-spacing: -0.01em;
line-height: 1.22;
margin: 0 0 10px;
}.abb-section-title b {
color: #BD1718;
}.abb-section-desc {
font-size: clamp(14px, 1.05vw, 15px);
font-weight: 500;
color: #555;
line-height: 1.5;
margin: 0;
max-width: 760px;
}/* Sol Alt Minimalist Slider Okları (Sektörler vb. için) */
.abb-header-arrows {
display: flex;
align-items: center;
gap: 16px;
margin-top: 20px;
}.abb-arrow-btn {
background: transparent;
border: none;
padding: 4px;
cursor: pointer;
color: #666666;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
outline: none;
line-height: 1;
}.abb-arrow-btn:hover {
color: var(--color-accent, #bd1718);
transform: scale(1.15);
}.abb-arrow-btn.prev:hover {
transform: translateX(-3px) scale(1.1);
}.abb-arrow-btn.next:hover {
transform: translateX(3px) scale(1.1);
}.abb-arrow-btn.swiper-button-disabled {
opacity: 0.25;
cursor: not-allowed;
transform: none !important;
}/* Sağ Kolon & Kırmızı Oval Buton (ABB Red Pill Button) */
.abb-header-right {
flex-shrink: 0;
display: flex;
align-items: center;
}.abb-pill-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background-color: var(--color-accent, #bd1718);
color: #ffffff !important;
font-weight: 500;
font-size: 13px;
padding: 12px 28px;
border-radius: 50px;
text-decoration: none;
white-space: nowrap;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}.abb-pill-btn:hover {
background-color: var(--color-accent-hover, #9e1213);
color: #ffffff !important;
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(189, 23, 24, 0.42);
}.abb-pill-btn svg {
transition: transform 0.25s ease;
}.abb-pill-btn:hover svg {
transform: translateX(4px);
}/* Sektörler Bölümünde Sağ Buton Hizalaması (Bleed Grid için) */
.sectors-container-bleed .abb-section-header {
padding-right: max(24px, calc((100vw - 1240px) / 2 + 15px));
}@media (max-width: 991.98px) {
.abb-header-main {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}.abb-section-header {
margin-bottom: 32px;
}.abb-header-right {
margin-bottom: 0;
}.sectors-container-bleed .abb-section-header {
padding-right: 24px;
}
}@media (max-width: 768px) {
.sectors-container-bleed .abb-section-header {
padding-right: 16px;
}.abb-pill-btn {
padding: 10px 22px;
font-size: 13px;
}
}/* ==========================================================================
03 — ÇÖZÜMLERİMİZ (ABB FEATURED STORY & BENTO STYLE) STİLLERİ
========================================================================== */
.solutions-section {
padding: 85px 0 85px;
background-color: #ffffff;
position: relative;
overflow: hidden;
}.solutions-section .container {
margin: 0 auto;
}/* ==========================================================================
03 — ÇÖZÜMLERİMİZ ARKA PLAN OTOMASYON DEVRE, TELEMETRİ & GRID ANİMASYONLARI
========================================================================== */
.solutions-bg-circuits {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
pointer-events: none;
overflow: hidden;
z-index: 1;
}/* İnce Teknik Noktalı Grid Katmanı (Industrial Blueprint Dot Grid) */
.solutions-grid-overlay {
position: absolute;
inset: 0;
background-image: radial-gradient(rgba(18, 17, 16, 0.055) 1px, transparent 1px);
background-size: 32px 32px;
mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 8%, rgba(0, 0, 0, 0.8) 92%, transparent 100%);
-webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.8) 8%, rgba(0, 0, 0, 0.8) 92%, transparent 100%);
pointer-events: none;
}.solutions-circuit-svg {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 100%;
max-width: 1600px;
height: 100%;
pointer-events: none;
}/* Kayan Sinyal Akımı Animasyonları (Perimeter Rail & Gap Bridge Signal Pulses) */
.sol-pulse-line-top {
animation: solFlowHoriz 12s linear infinite;
}.sol-pulse-line-left {
animation: solFlowVert 16s linear infinite;
}.sol-pulse-line-right {
animation: solFlowVert 15s linear infinite 1.5s;
}.sol-pulse-bridge-1 {
animation: solFlowHoriz 11s linear infinite 0.8s;
}.sol-pulse-bridge-2 {
animation: solFlowHorizRev 13s linear infinite 2s;
}/* Resmin Arkasından Çapraz Geçen Sinyal Akımları */
.sol-pulse-diag-1 {
animation: solFlowDiag 14s linear infinite;
}.sol-pulse-diag-2 {
animation: solFlowDiag 15s linear infinite 1.2s;
}.sol-pulse-diag-3 {
animation: solFlowDiag 14s linear infinite 2.5s;
}@keyframes solFlowDiag {
0% {
stroke-dashoffset: 0;
}100% {
stroke-dashoffset: -340;
}
}@keyframes solFlowHoriz {
0% {
stroke-dashoffset: 0;
}100% {
stroke-dashoffset: -280;
}
}@keyframes solFlowHorizRev {
0% {
stroke-dashoffset: 0;
}100% {
stroke-dashoffset: 280;
}
}@keyframes solFlowVert {
0% {
stroke-dashoffset: 0;
}100% {
stroke-dashoffset: -320;
}
}/* Telemetri Düğümleri Yanıp Sönen Sinyal Işıkları */
.sol-node-pulse-1 {
animation: solNodeGlow 2.5s ease-in-out infinite;
transform-origin: center;
}.sol-node-pulse-2 {
animation: solNodeGlow 3s ease-in-out 0.8s infinite;
transform-origin: center;
}.sol-node-pulse-3 {
animation: solNodeGlow 2.8s ease-in-out 1.6s infinite;
transform-origin: center;
}@keyframes solNodeGlow {0%,
100% {
opacity: 0.45;
transform: scale(0.9);
}50% {
opacity: 1;
transform: scale(1.4);
}
}/* Radar & Sensör Dönen Halka Animasyonları */
.sol-radar-spin {
transform-origin: center;
animation: solRadarRot 16s linear infinite;
}.sol-radar-spin-rev {
transform-origin: center;
animation: solRadarRotRev 13s linear infinite;
}@keyframes solRadarRot {
from {
transform: rotate(0deg);
}to {
transform: rotate(360deg);
}
}@keyframes solRadarRotRev {
from {
transform: rotate(360deg);
}to {
transform: rotate(0deg);
}
}/* Badge Canlı Yanıp Sönen Nokta */
.badge-pulse-dot {
width: 7px;
height: 7px;
background-color: var(--color-accent, #bd1718);
border-radius: 50%;
display: inline-block;
box-shadow: 0 0 0 rgba(189, 23, 24, 0.5);
animation: badgeDotPulse 2s infinite;
flex-shrink: 0;
}@keyframes badgeDotPulse {
0% {
box-shadow: 0 0 0 0 rgba(189, 23, 24, 0.7);
}70% {
box-shadow: 0 0 0 7px rgba(189, 23, 24, 0);
}100% {
box-shadow: 0 0 0 0 rgba(189, 23, 24, 0);
}
}/* Çözüm Görselleri Üzerindeki Teknik Etiket */
.solution-media-tag {
position: absolute;
top: 18px;
right: 18px;
z-index: 5;
display: inline-flex;
align-items: center;
gap: 7px;
background: rgba(18, 17, 16, 0.82);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.18);
padding: 6px 14px;
border-radius: 4px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
color: #ffffff;
pointer-events: none;
}.tag-pulse-dot {
width: 6px;
height: 6px;
background-color: var(--color-accent, #bd1718);
border-radius: 50%;
display: inline-block;
box-shadow: 0 0 0 rgba(189, 23, 24, 0.6);
animation: tagDotPulse 2s infinite;
flex-shrink: 0;
}@keyframes tagDotPulse {
0% {
box-shadow: 0 0 0 0 rgba(189, 23, 24, 0.7);
}70% {
box-shadow: 0 0 0 6px rgba(189, 23, 24, 0);
}100% {
box-shadow: 0 0 0 0 rgba(189, 23, 24, 0);
}
}/* Yazı Altı Teknik Telemetri Çizgisi, Artı ve Noktalar */
.solution-telemetry-decor {
display: flex;
align-items: center;
gap: 12px;
margin-top: 28px;
opacity: 0.7;
pointer-events: none;
}.telemetry-plus {
font-size: 14px;
font-weight: 500;
color: var(--color-accent, #bd1718);
line-height: 1;
font-family: monospace;
}.telemetry-line {
width: 52px;
height: 1.5px;
background: linear-gradient(90deg, var(--color-accent, #bd1718), rgba(189, 23, 24, 0.15));
border-radius: 2px;
}.telemetry-dots {
display: flex;
align-items: center;
gap: 5px;
}.telemetry-dots i {
display: block;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: rgba(18, 17, 16, 0.25);
font-style: normal;
}.telemetry-dots i:first-child {
background-color: var(--color-accent, #bd1718);
box-shadow: 0 0 6px rgba(189, 23, 24, 0.4);
}/* Bölüm Başlık Alanı (Ortalanmış & Şık Kırmızı Çizgili) */
.solutions-centered-header {
text-align: center;
margin: 0 auto 52px;
max-width: 760px;
}.solutions-centered-title {
font-size: clamp(26px, 2.7vw, 34px);
font-weight: 700;
color: #141312;
letter-spacing: -0.015em;
line-height: 1.25;
margin: 0 0 14px;
}.solutions-centered-title b {
color: #bd1718;
font-weight: 700;
}.solutions-title-line {
width: 52px;
height: 3.5px;
background: linear-gradient(90deg, #bd1718, #bd1718);
border-radius: 4px;
margin: 0 auto;
}/* ==========================================================================
03 — ÇÖZÜMLERİMİZ (ZIGZAG ALTERNATING FEATURE ROWS)
1. Sıra: İçerik Sol — Görsel Sağ
2. Sıra: Görsel Sol — İçerik Sağ (Altındaki Tam Tersi)
========================================================================== */
.solutions-zigzag-list {
display: flex;
flex-direction: column;
gap: 80px;
margin-top: 10px;
}.solution-zigzag-item {
display: grid;
grid-template-columns: 1fr 1.15fr;
align-items: center;
gap: 65px;
}/* Altındaki Tam Tersi: Çift Sıralarda Görsel Sol, İçerik Sağ */
.solution-zigzag-item.solution-zigzag-reverse,
.solution-zigzag-item:nth-child(even) {
grid-template-columns: 1.15fr 1fr;
}.solution-zigzag-item.solution-zigzag-reverse .solution-zigzag-content,
.solution-zigzag-item:nth-child(even) .solution-zigzag-content {
order: 2;
}.solution-zigzag-item.solution-zigzag-reverse .solution-zigzag-media,
.solution-zigzag-item:nth-child(even) .solution-zigzag-media {
order: 1;
}/* İçerik Kolonu */
.solution-zigzag-content {
display: flex;
flex-direction: column;
justify-content: center;
}.solution-zigzag-badge {
font-size: 13px;
font-weight: 700;
color: var(--color-accent, #bd1718);
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 16px;
display: inline-flex;
align-items: center;
gap: 8px;
}.solution-zigzag-title {
font-size: clamp(26px, 2.5vw, 26px);
font-weight: 700;
color: #141312;
line-height: 1.25;
letter-spacing: -0.015em;
margin: 0 0 18px;
}.solution-zigzag-desc {
font-size: clamp(14.5px, 1.05vw, 14px);
font-weight: 500;
color: #555555;
line-height: 1.5;
margin: 0 0 28px;
max-width: 520px;
}.solution-zigzag-action {
display: flex;
align-items: center;
}.solution-zigzag-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 700;
color: #141312;
text-decoration: none;
border-bottom: 2px solid #141312;
padding-bottom: 4px;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}.solution-zigzag-link:hover {
color: var(--color-accent, #bd1718);
border-bottom-color: var(--color-accent, #bd1718);
}/* Görsel Kolonu (Yuvarlak Köşeli & Zarif Gölgeli) */
.solution-zigzag-media {
position: relative;
border-radius: 22px;
overflow: hidden;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.03);
background-color: #f6f5f3;
aspect-ratio: 16 / 10;
min-height: 340px;
}.solution-media-link {
display: block;
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}.solution-zigzag-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}.solution-zigzag-item:hover .solution-zigzag-img {
transform: scale(1.035);
}.solution-media-overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.02);
pointer-events: none;
transition: background 0.3s ease;
}.solution-zigzag-item:hover .solution-media-overlay {
background: rgba(0, 0, 0, 0);
}/* Responsive Düzen */
@media (max-width: 991.98px) {
.solutions-circuit-svg {
display: none;
}.solutions-zigzag-list {
gap: 50px;
}.solution-zigzag-item,
.solution-zigzag-item.solution-zigzag-reverse,
.solution-zigzag-item:nth-child(even) {
grid-template-columns: 1fr;
gap: 28px;
}.solution-zigzag-item.solution-zigzag-reverse .solution-zigzag-media,
.solution-zigzag-item:nth-child(even) .solution-zigzag-media,
.solution-zigzag-media {
order: 1 !important;
}.solution-zigzag-item.solution-zigzag-reverse .solution-zigzag-content,
.solution-zigzag-item:nth-child(even) .solution-zigzag-content,
.solution-zigzag-content {
order: 2 !important;
}.solution-zigzag-desc {
max-width: 100%;
margin-bottom: 22px;
}
}/* Alt Aksiyon Butonu (ABB Explore Style) */
.solutions-bottom-action {
margin-top: 10px;
}.solutions-explore-btn {
display: inline-flex;
align-items: center;
gap: 12px;
background-color: var(--color-accent);
color: #ffffff;
font-size: 14.5px;
font-weight: 600;
letter-spacing: 0.02em;
padding: 16px 38px;
border-radius: 50px;
text-decoration: none;
box-shadow: 0 6px 20px rgba(189, 23, 24, 0.3);
transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}.solutions-explore-btn:hover {
background-color: var(--color-accent-hover);
color: #ffffff;
transform: translateY(-3px);
box-shadow: 0 10px 28px rgba(189, 23, 24, 0.45);
}.solutions-explore-btn svg {
transition: transform 0.3s ease;
}.solutions-explore-btn:hover svg {
transform: translateX(5px);
}/* Responsive Düzenlemeler */
@media (max-width: 991.98px) {
.solutions-abb-story-grid {
grid-template-columns: 1fr;
gap: 32px;
}.abb-story-primary .abb-story-media {
height: 320px;
}.abb-story-sub {
grid-template-columns: 220px 1fr;
gap: 18px;
}
}@media (max-width: 640px) {
.solutions-section {
padding: 60px 0 55px;
}.abb-story-primary .abb-story-media {
height: 230px;
}.abb-story-sub {
grid-template-columns: 1fr;
gap: 14px;
}.abb-story-sub .abb-story-media {
width: 100%;
height: 200px;
}
}/* ==========================================================================
04 — SEKTÖRLER (TENARIS STYLE PRODUCT & SERVICE APPLICATIONS)
========================================================================== */
.sectors-section {
padding: 85px 0 95px;
background-color: #ffffff;
position: relative;
overflow: hidden;
border-top: 1px solid #edebe7;
}/* Sol Taraf Site Container Hizası, Sağ Taraf Tam Ekran Açık (Full-Bleed Right) */
.sectors-container-bleed {
width: 100%;
padding-left: max(24px, calc((100vw - 1320px) / 2 + 15px));
padding-right: 0;
margin: 0;
box-sizing: border-box;
}@media (max-width: 1240px) {
.sectors-container-bleed {
padding-left: 24px;
padding-right: 0;
}
}@media (max-width: 768px) {
.sectors-container-bleed {
padding-left: 16px;
padding-right: 0;
}
}/* Bölüm Başlığı (Referans Görsel: Sol Yaslı Başlık + Alt Çizgi) */
.sectors-header-tenaris {
margin-bottom: 44px;
}.sectors-title-tenaris {
font-size: clamp(30px, 3vw, 42px);
font-weight: 700;
color: #1a1a1a;
letter-spacing: -0.015em;
line-height: 1.2;
margin: 0 0 16px;
}.sectors-bar-tenaris {
width: 44px;
height: 3px;
background-color: #1a1a1a;
border-radius: 0;
}/* Swiper Kapsayıcı — Sağa Doğru Tam Taşma (Full-Bleed) */
.sectors-swiper-container {
width: 100%;
overflow: visible;
padding-bottom: 6px;
}.sectors-section .sector-slide-item {
height: auto;
display: flex;
}/* Tenaris Kart Yapısı */
.tenaris-sector-card {
width: 100%;
display: flex;
flex-direction: column;
background: transparent;
text-decoration: none;
}/* Kart Görsel Alanı (16:10 Oran, Keskin Köşeler) */
.tenaris-sector-media {
width: 100%;
aspect-ratio: 16 / 10;
overflow: hidden;
background-color: #f5f4f0;
position: relative;
}.tenaris-sector-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}.tenaris-sector-card:hover .tenaris-sector-img {
transform: scale(1.05);
}/* Kart Metin İçerik Alanı */
.tenaris-sector-content {
display: flex;
flex-direction: column;
flex-grow: 1;
padding-top: 24px;
}.tenaris-sector-name {
font-size: 20px;
font-weight: 700;
color: #1a1a1a;
letter-spacing: -0.01em;
line-height: 1.25;
margin: 0 0 12px;
transition: color 0.25s ease;
}.tenaris-sector-card:hover .tenaris-sector-name {
color: var(--color-accent, #bd1718);
}.tenaris-sector-desc {
font-size: 14px;
font-weight: 400;
color: #555555;
line-height: 1.5;
margin: 0 0 24px;
flex-grow: 1;
min-height: 65px;
}/* Kart Alt Buton / Çizgi Alanı */
.tenaris-sector-action {
border-top: 1px solid #e8e8e8;
padding-top: 18px;
margin-top: auto;
}.tenaris-sector-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #1a1a1a;
text-decoration: none;
transition: color 0.25s ease;
}.tenaris-sector-link svg {
display: block;
transition: transform 0.25s ease;
}.tenaris-sector-card:hover .tenaris-sector-link {
color: var(--color-accent, #bd1718);
}.tenaris-sector-card:hover .tenaris-sector-link svg {
transform: translateX(5px);
}/* Alt Şık Kaydırma Çubuğu (Modern Scrollbar) */
.sectors-scrollbar-container {
width: 100%;
padding-right: max(24px, calc((100vw - 1240px) / 2 + 15px));
margin-top: 54px;
box-sizing: border-box;
}.sectors-swiper-scrollbar {
width: 100%;
height: 4px;
background: #e2dfd9;
position: relative;
border-radius: 0;
cursor: pointer;
touch-action: none;
}.sectors-scrollbar-drag {
height: 100%;
background: var(--color-accent, #bd1718);
border-radius: 0;
cursor: grab;
position: absolute;
top: 0;
left: 0;
transition: transform 0.15s ease-out, background-color 0.2s ease;
will-change: transform;
}.sectors-scrollbar-drag.is-dragging {
cursor: grabbing;
background: #8e1011;
transition: none;
}.sectors-scrollbar-drag:hover {
background: #8e1011;
}@media (max-width: 991px) {
.sectors-section {
padding: 70px 0 75px;
}.sectors-header-tenaris {
margin-bottom: 34px;
}.sectors-scrollbar-container {
margin-top: 38px;
padding-right: 24px;
}
}@media (max-width: 768px) {
.sectors-section {
padding: 55px 0 60px;
}.sectors-header-tenaris {
margin-bottom: 28px;
}.tenaris-sector-content {
padding-top: 16px;
}.tenaris-sector-name {
font-size: 19px;
margin-bottom: 8px;
}.tenaris-sector-desc {
font-size: 13px;
margin-bottom: 18px;
min-height: auto;
}.sectors-scrollbar-container {
margin-top: 30px;
padding-right: 16px;
}
}/* ==========================================================================
05 — ÜRÜNLERİMİZ (ABB STYLE INTERACTIVE VERTICAL TABS & SHOWCASE) STİLLERİ
========================================================================== */
.products-section {
padding: 85px 0 90px;
background-color: #fbfbfa;
position: relative;
overflow: hidden;
border-top: 1px solid #eae7e1;
}.products-section .container {
margin: 0 auto;
}/* 2 Kolonlu Ana Vitrin Kapsayıcı (Grid Layout) */
.products-showcase-wrap {
display: grid;
grid-template-columns: 410px 1fr;
gap: 36px;
align-items: start;
}/* Sol Sütun: Dikey Sekme Listesi (Modern & Şık ABB Stili) */
.products-nav-list {
display: flex;
flex-direction: column;
gap: 10px;
justify-content: flex-start;
}.prod-tab-item {
display: flex;
align-items: center;
gap: 16px;
padding: 15px 18px;
border-radius: 4px;
background: #ffffff;
border: 1px solid #eae6df;
border-left: 4px solid transparent;
cursor: pointer;
text-align: left;
width: 100%;
transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
outline: none;
box-shadow: 0 2px 8px rgba(20, 19, 18, 0.03);
position: relative;
}/* İkon Alanı: Özgün Endüstriyel İkon Kutusu */
.prod-tab-icon-box {
width: 48px;
height: 48px;
min-width: 48px;
border-radius: 6px;
background: #f7f5f2;
border: 1px solid #e5e0d7;
display: flex;
align-items: center;
justify-content: center;
color: #242220;
transition: all 0.25s ease;
flex-shrink: 0;
}.prod-tab-icon-box svg,
.prod-tab-icon-box i {
font-size: 25px;
line-height: 1;
transition: transform 0.25s ease;
}/* Sekme Metin Alanı: Başlık + Alt Özellik */
.prod-tab-text {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 3px;
}.prod-tab-name {
font-size: 15px;
font-weight: 700;
color: #141312;
letter-spacing: -0.01em;
line-height: 1.25;
transition: color 0.25s ease;
}.prod-tab-sub {
font-size: 12.5px;
color: #66625d;
font-weight: 400;
line-height: 1.35;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.25s ease;
}/* Sağ Ok Göstergesi: Şık Yuvarlak İkon Butonu */
.prod-tab-arrow {
width: 32px;
height: 32px;
min-width: 32px;
border-radius: 50%;
background: #f5f3f0;
display: flex;
align-items: center;
justify-content: center;
color: #948e87;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
flex-shrink: 0;
}.prod-tab-arrow svg,
.prod-tab-arrow i {
font-size: 14px;
line-height: 1;
transition: transform 0.25s ease;
}/* Hover Durumu */
.prod-tab-item:hover {
background: #ffffff;
border-color: #dcd7ce;
border-left-color: rgba(189, 23, 24, 0.5);
transform: translateX(4px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}.prod-tab-item:hover .prod-tab-icon-box {
background: #141312;
border-color: #141312;
color: #ffffff;
transform: scale(1.05);
}.prod-tab-item:hover .prod-tab-name {
color: var(--color-accent, #bd1718);
}.prod-tab-item:hover .prod-tab-arrow {
background: rgba(189, 23, 24, 0.1);
color: var(--color-accent, #bd1718);
}.prod-tab-item:hover .prod-tab-arrow svg,
.prod-tab-item:hover .prod-tab-arrow i {
transform: translateX(2px);
}/* Aktif Sekme Durumu (Active State) */
.prod-tab-item.active {
background: #ffffff;
border-color: #d6d0c6;
border-left: 4px solid var(--color-accent, #bd1718);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.07), 0 2px 8px rgba(189, 23, 24, 0.08);
transform: translateX(6px);
}.prod-tab-item.active .prod-tab-icon-box {
background: linear-gradient(135deg, #bd1718 0%, #a31213 100%);
border-color: #bd1718;
color: #ffffff;
box-shadow: 0 4px 14px rgba(189, 23, 24, 0.32);
}.prod-tab-item.active .prod-tab-name {
color: var(--color-accent, #bd1718);
font-weight: 700;
}.prod-tab-item.active .prod-tab-sub {
color: #383431;
font-weight: 500;
}.prod-tab-item.active .prod-tab-arrow {
background: rgba(189, 23, 24, 0.12);
color: var(--color-accent, #bd1718);
opacity: 1;
}.prod-tab-item.active .prod-tab-arrow svg,
.prod-tab-item.active .prod-tab-arrow i {
transform: translateX(2px);
}/* Sağ Sütun: Vitrin Kart Paneli */
.products-display-panel {
position: relative;
height: 437px;
background: #141312;
border-radius: 4px;
overflow: hidden;
border: 1px solid #282624;
box-shadow: 0 16px 44px rgba(0, 0, 0, 0.14);
}.prod-content-card {
position: absolute;
inset: 0;
display: none;
width: 100%;
height: 100%;
}.prod-content-card.active {
display: block;
animation: prodShowcaseIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}@keyframes prodShowcaseIn {
0% {
opacity: 0;
transform: scale(0.99);
}100% {
opacity: 1;
transform: scale(1);
}
}/* Vitrin Görsel Alanı */
.prod-showcase-media {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}.prod-showcase-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}.prod-content-card:hover .prod-showcase-img {
transform: scale(1.04);
}.prod-media-gradient {
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(0, 0, 0, 0.05) 0%,
rgba(14, 13, 12, 0.30) 35%,
rgba(14, 13, 12, 0.85) 70%,
rgba(10, 9, 8, 0.98) 100%);
pointer-events: none;
}.prod-media-tag {
position: absolute;
top: 22px;
right: 22px;
z-index: 6;
display: inline-flex;
align-items: center;
gap: 7px;
background: rgba(14, 13, 12, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.18);
padding: 6px 14px;
border-radius: 0;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
color: #ffffff;
}/* Vitrin Bilgi Alanı (ABB Style Bottom Overlay) */
.prod-overlay-info {
position: absolute;
bottom: 0;
left: 0;
right: 0;
padding: 36px 40px;
z-index: 5;
display: flex;
flex-direction: column;
}.prod-overlay-category {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.12em;
color: #ff5252;
margin-bottom: 6px;
text-transform: uppercase;
}.prod-overlay-title {
font-size: clamp(24px, 2.3vw, 28px);
font-weight: 700;
color: #ffffff;
line-height: 1.25;
margin: 0 0 10px;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}.prod-overlay-desc {
font-size: 14px;
font-weight: 500;
line-height: 1.5;
color: rgba(255, 255, 255, 0.9);
max-width: 680px;
margin: 0 0 22px;
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}.prod-overlay-actions {
display: flex;
align-items: center;
}.prod-btn-explore {
padding: 12px 32px;
font-size: 13px;
font-weight: 500;
box-shadow: 0 6px 20px rgba(189, 23, 24, 0.35);
}/* Responsive Düzenlemeler */
@media (max-width: 991.98px) {
.products-showcase-wrap {
grid-template-columns: 1fr;
gap: 24px;
align-items: stretch;
}.products-nav-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 10px;
}.prod-tab-item {
padding: 12px 16px;
}.prod-tab-item.active {
transform: translateY(-2px);
}.products-display-panel {
min-height: 440px;
height: 440px;
}
}@media (max-width: 640px) {
.products-section {
padding: 60px 0;
}.products-header {
margin-bottom: 32px;
}.products-nav-list {
grid-template-columns: 1fr;
}.products-display-panel {
min-height: 380px;
height: 380px;
}.prod-overlay-info {
padding: 24px 20px 26px;
}.prod-overlay-title {
font-size: 22px;
margin-bottom: 8px;
}.prod-overlay-desc {
font-size: 13px;
line-height: 1.55;
margin-bottom: 16px;
}.prod-btn-explore {
padding: 11px 24px;
font-size: 13px;
}
}/* ==========================================================================
06 — HAKKIMIZDA (3-KART KURUMSAL DEĞERLER & SÜRDÜRÜLEBİLİRLİK) STİLLERİ
========================================================================== */
.about-values-section {
position: relative;
padding: 85px 0 90px;
background-color: #ffffff;
overflow: hidden;
}.about-values-section .container {margin: 0 auto;
}/* Üst Kavisli Endüstriyel Devre & Telemetri Yay Deseni (Animated Industrial Circuit) */
.about-arc-wrapper {
position: absolute;
top: 85px;
left: 50%;
transform: translateX(-50%);
width: 1200px;
max-width: 100%;
height: 480px;
pointer-events: none;
overflow: hidden;
z-index: 1;
}.automation-circuit-canvas {
width: 100%;
height: 100%;
position: relative;
}.circuit-svg {
width: 100%;
height: 100%;
overflow: visible;
}/* Kayan Sinyal Akımı Animasyonu */
.circuit-pulse-line {
animation: circuitFlow 18s linear infinite;
}@keyframes circuitFlow {
0% {
stroke-dashoffset: 0;
}100% {
stroke-dashoffset: -240;
}
}/* Devre Düğümleri Yanıp Sönen Sinyal Işıkları */
.circuit-node {
transform-origin: center;
}.node-pulse-main {
animation: nodeGlow 2.5s ease-in-out infinite;
}.node-sub-1 {
animation: nodeGlow 3s ease-in-out 0.8s infinite;
}.node-sub-2 {
animation: nodeGlow 3s ease-in-out 1.6s infinite;
}@keyframes nodeGlow {0%,
100% {
opacity: 0.5;
transform: scale(0.9);
}50% {
opacity: 1;
transform: scale(1.4);
}
}/* ==========================================================================
Kurumsal Değerlerimiz Ortalanmış Başlık Alanı
========================================================================== */
.about-centered-header {
text-align: center;
max-width: 820px;
margin: 0 auto 52px;
position: relative;
z-index: 5;
}.about-centered-title {
font-size: clamp(26px, 2.7vw, 34px);
font-weight: 700;
color: #141312;
letter-spacing: -0.015em;
line-height: 1.25;
margin: 0 0 14px;
}.about-centered-title b {
color: #bd1718;
font-weight: 700;
}.about-title-line {
width: 52px;
height: 3.5px;
background: linear-gradient(90deg, #bd1718, #bd1718);
border-radius: 4px;
margin: 0 auto 18px;
}.about-centered-desc {
font-size: 14.5px;
font-weight: 400;
color: #555555;
line-height: 1.6;
max-width: 720px;
margin: 0 auto;
text-align: center;
}/* 3'lü Kart Izgarası (1220px Genişlik) */
.about-cards-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 26px;
max-width: 1220px;
margin: 90px auto 50px;
position: relative;
z-index: 5;
}.about-card-item {
border-radius: 5px;
padding: 38px 30px 34px;
display: flex;
flex-direction: column;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
position: relative;
min-height: 220px;
}.about-card-item:hover {
transform: translateY(-7px);
}/* Kurumsal Antrasit Siyah Kartlar (Brand Colors) */
.card-dark-brand {
background: linear-gradient(165deg, #181716 0%, #11100f 100%);
color: #ffffff;
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.05);
border: 1px solid rgba(255, 255, 255, 0.08);
border-top: 3px solid var(--color-accent);
}.card-dark-brand .card-icon-wrap {
color: var(--color-accent);
margin-bottom: 22px;
display: flex;
align-items: center;
}.card-dark-brand .card-title {
font-size: 20px;
font-weight: 600;
color: #ffffff;
margin: 0 0 14px;
line-height: 1.3;
}.card-dark-brand .card-desc {
font-size: 14px;
font-weight: 500;
line-height: 1.5;
color: rgba(255, 255, 255, 0.76);
margin: 0;
}.card-dark-brand:hover {
box-shadow: 0 22px 45px rgba(0, 0, 0, 0.18), 0 0 20px rgba(189, 23, 24, 0.12);
border-color: rgba(189, 23, 24, 0.3);
}/* Beyaz Kart (Yükseltilmiş & Kibar Gölgeli) */
.card-white-elevated {
font-size: 14px;
font-weight: 500;
line-height: 1.5;
background: #ffffff;
color: #121110;
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.03);
border: 1px solid rgba(0, 0, 0, 0.07);
border-top: 3px solid #181716;
}.card-white-elevated .card-icon-wrap {
color: var(--color-accent);
margin-bottom: 22px;
display: flex;
align-items: center;
}.card-white-elevated .card-title {
font-size: 20px;
font-weight: 600;
color: #121110;
margin: 0 0 14px;
line-height: 1.3;
}.card-white-elevated .card-desc {
font-size: 13.5px;
line-height: 1.7;
color: #55514d;
margin: 0;
}.card-white-elevated:hover {
box-shadow: 0 24px 50px rgba(0, 0, 0, 0.09), 0 6px 16px rgba(0, 0, 0, 0.04);
border-top-color: var(--color-accent);
}/* Alt Pill Buton (Kendi Kırmızı Renginde & Merkezi) */
.about-cta-wrap {
position: relative;
z-index: 10;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin: 15px auto 0;
text-align: center;
}.about-pill-btn {
display: inline-flex;
align-items: center;
gap: 9px;
background-color: var(--color-accent);
color: #ffffff;
font-size: 13.5px;
font-weight: 600;
padding: 13px 36px;
border-radius: 0;
text-decoration: none;
box-shadow: 0 8px 24px rgba(189, 23, 24, 0.32);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
border: 1px solid rgba(255, 255, 255, 0.2);
}.about-pill-btn:hover {
background-color: var(--color-accent-hover);
transform: translateY(-2px);
box-shadow: 0 12px 28px rgba(189, 23, 24, 0.42);
color: #ffffff;
}.about-pill-btn .pill-arrow-icon {
transition: transform 0.3s ease;
}.about-pill-btn:hover .pill-arrow-icon {
transform: translateX(4px);
}/* Alt Akıllı Fabrika Otomasyon Manzara Arka Planı */
.about-bottom-landscape {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 310px;
z-index: 1;
pointer-events: none;
overflow: hidden;
}.about-landscape-img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center 65%;
opacity: 0.88;
}.about-landscape-fade {
position: absolute;
inset: 0;
background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.90) 22%, rgba(255, 255, 255, 0.30) 65%, rgba(255, 255, 255, 0) 100%);
}/* ==========================================================================
05 — MOBİL VE TABLET UYUMLULUĞU (RESPONSIVE)
========================================================================== */
@media (max-width: 991px) {
.hero-swiper-sec {
height: 70vh;
min-height: 480px;
}.slide-caption-wrap {
max-width: 90%;
padding-bottom: 60px;
}.hero-swiper-controls {
right: 20px;
bottom: 20px;
}.hero-scroll-indicator {
display: none;
}.brand-marquee-section {
padding: 20px 0;
}.brand-img-box {
width: 140px;
height: 72px;
padding: 10px 14px;
border-radius: 0;
}/* Çözümler Responsive */
.solutions-section {
padding: 60px 0 40px;
}.solutions-list {
gap: 50px;
}.solution-item-row,
.solution-item-row.row-reversed {
flex-direction: column !important;
gap: 28px;
}.solution-media-col,
.solution-content-col {
flex: 0 0 100% !important;
max-width: 100% !important;
width: 100% !important;
}.solution-features-list {
grid-template-columns: 1fr;
gap: 10px;
}.section-header-wrap {
margin-bottom: 40px;
}/* Hakkımızda Responsive */
.about-values-section {
padding: 70px 0 60px;
}.about-cards-grid {
grid-template-columns: 1fr;
max-width: 480px;
gap: 22px;
margin-bottom: 40px;
}.about-card-item {
min-height: auto;
padding: 34px 26px;
border-radius: 0;
}.about-bottom-landscape {
height: 200px;
}
}@media (max-width: 576px) {
.hero-swiper-sec {
height: 65vh;
min-height: 420px;
}.slide-caption-wrap {
max-width: 100%;
padding-bottom: 50px;
}.slide-main-heading {
font-size: 24px;
margin-bottom: 12px;
}.slide-desc-text {
font-size: 13px;
margin-bottom: 18px;
}.slide-primary-btn {
padding: 11px 22px;
font-size: 11.5px;
border-radius: 0;
}.slide-secondary-btn {
padding: 11px 18px;
font-size: 11.5px;
border-radius: 0;
}.solution-float-badge {
bottom: 12px;
left: 12px;
padding: 8px 12px;
border-radius: 0;
}.solution-float-badge .badge-icon-box {
width: 30px;
height: 30px;
border-radius: 0;
}.solution-float-badge .badge-val {
font-size: 13px;
}.solution-title {
font-size: 21px;
}.solution-summary {
font-size: 14px;
}.feature-item {
font-size: 12.5px;
}.about-arc-heading {
font-size: 15px;
}.about-card-item {
padding: 28px 20px;
border-radius: 0;
}.card-dark-blue .card-title,
.card-white-elevated .card-title {
font-size: 19px;
}.about-pill-btn {
padding: 12px 30px;
font-size: 13px;
border-radius: 0;
}
}/* ==========================================================================
MOBİL AÇILIR MENÜ & DRAWER İYİLEŞTİRMELERİ
========================================================================== *//* Mobil Buton Görünürlüğü */
@media (max-width: 1199px) {
.header-mobile-toggle {
display: flex !important;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: 4px;
background-color: #f7f6f4;
border: 1px solid #eae6df;
padding: 0;
cursor: pointer;
transition: all 0.25s ease;
}.header-mobile-toggle:hover {
background-color: #141312;
border-color: #141312;
}.header-mobile-toggle:hover .bar {
background-color: #ffffff;
}.header-mobile-toggle .bar {
width: 22px;
height: 2px;
background-color: #141312;
border-radius: 1px;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
}/* Çekmece (Drawer) Tasarım İyileştirmesi */
.luxury-side-drawer {
width: 380px;
max-width: 86vw;
background-color: #ffffff;
z-index: 2100;
box-shadow: 10px 0 45px rgba(0, 0, 0, 0.22);
}.drawer-header {
padding: 20px 24px;
background: #ffffff;
border-bottom: 1px solid #edebe7;
}.drawer-close-btn {
width: 38px;
height: 38px;
border-radius: 4px;
border: 1px solid #eae6df;
background: #f7f5f2;
color: #141312;
transition: all 0.2s ease;
}.drawer-close-btn:hover {
background: var(--color-accent, #bd1718);
border-color: var(--color-accent, #bd1718);
color: #ffffff;
}.drawer-content {
padding: 20px 24px 30px;
-webkit-overflow-scrolling: touch;
}/* Arama Kutusu */
.drawer-search-box form {
border-radius: 4px;
background-color: #f6f5f2;
border: 1px solid #e7e3dc;
padding: 4px 14px;
}.drawer-search-box input {
font-size: 14px;
font-family: inherit;
}/* Menü Öğeleri ve Akordeon Yapısı */
.drawer-menu-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}.drawer-menu-list > li {
position: relative;
border-bottom: 1px solid #f0ede8;
}.drawer-menu-list > li > a {
font-size: 15px;
font-weight: 600;
color: #1a1816;
text-decoration: none;
padding: 14px 0;
display: flex;
align-items: center;
justify-content: space-between;
transition: color 0.2s ease, transform 0.2s ease;
}.drawer-menu-list > li > a:hover,
.drawer-menu-list > li > a.active {
color: var(--color-accent, #bd1718);
transform: translateX(4px);
}/* Dinamik Akordeon Açma Butonu (Varsa Alt Menüler İçin) */
.drawer-submenu-toggle {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background: transparent;
color: #7a756f;
cursor: pointer;
transition: transform 0.3s ease, color 0.2s ease;
position: absolute;
right: 0;
top: 6px;
z-index: 2;
}.drawer-submenu-toggle::after {
content: "";
width: 8px;
height: 8px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
transition: transform 0.25s ease;
}li.submenu-open > .drawer-submenu-toggle::after {
transform: rotate(-135deg);
}li.submenu-open > .drawer-submenu-toggle {
color: var(--color-accent, #bd1718);
}/* Açılan Alt Menü Listesi */
.drawer-menu-list li ul {
list-style: none;
margin: 0 0 10px 0;
padding: 6px 0 6px 14px;
background: #fbfaf8;
border-left: 2px solid var(--color-accent, #bd1718);
border-radius: 0 4px 4px 0;
display: none;
}li.submenu-open > ul {
display: flex !important;
flex-direction: column;
gap: 4px;
animation: drawerMenuFadeIn 0.25s ease forwards;
}@keyframes drawerMenuFadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}.drawer-menu-list li ul li a {
font-size: 13.5px;
font-weight: 500;
color: #4a4642;
text-decoration: none;
padding: 8px 12px;
display: block;
border-radius: 3px;
transition: all 0.2s ease;
}.drawer-menu-list li ul li a:hover {
color: var(--color-accent, #bd1718);
background: #f0ece5;
}/* Alt WhatsApp Butonu */
.drawer-whatsapp-btn {
border-radius: 4px;
font-weight: 600;
padding: 13px 20px;
box-shadow: 0 4px 14px rgba(37, 211, 102, 0.25);
}/* Arka plan karartması */
.nav-overlay {
z-index: 2050;
}@media(max-width:1024px){
.solution-zigzag-media{
width: 100%;
}
}