/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans:100,200,300,400,500,600,700,800,900");
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul, li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header, nav, section, article, aside, footer, hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html, body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0px;
  margin-bottom: 0px;
  color: #1D3557;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 26px;
  color: #1D3557;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #ff511a;
  color: #fff;
}

::-moz-selection {
  background: #ff511a;
  color: #fff;
}

@media (max-width: 991px) {
  html, body {
    overflow-x: hidden;
  }
  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }
  .mobile-bottom-fix {
    margin-bottom: 30px;
  }
  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.green-button a {
  font-size: 14px;
  color: #fff;
  background-color: #030303;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 5px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all .3s;
}

.green-button a:hover {
  opacity: 0.9;
}

/* ====================================================================================================================
 * iletişim butonu rengi
 * ====================================================================================================================*/

.orange-button a {
  font-size: 14px;
  color: #fff;
  background-color: #e91313;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 5px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all .3s;
}

.orange-button a:hover {
  opacity: 0.9;
}

section {
  margin-top: 120px;
}

.section-heading {
  position: relative;
  z-index: 2;
  margin-top: 0px;
  text-align: center;
  margin-bottom: 70px;
}

.section-heading h6 {
  font-size: 16px;
  text-transform: uppercase;
  color: #e91313;
  font-weight: 700;
}

.section-heading h4 {
  margin-top: 10px;
  line-height: 40px;
  font-size: 36px;
  font-weight: 700;
  text-transform: capitalize;
  color: #1D3557;
}

.section-heading p {
  margin-top: 30px;
}


/* 
---------------------------------------------
header
--------------------------------------------- 
*/
.background-header {
  background-color: #212741;
  height: 80px!important;
  position: fixed!important;
  top: 0!important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0,0,0,0.15)!important;
}

.header-area {
  background-image: url(../images/header-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  height: 110px;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 130px;
  width: 175px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  overflow: hidden; /* Taşmayı önler */
}

.background-header .main-nav .logo {
  line-height: 80px;
  width: 160px;
}

.background-header .nav {
  margin-top: 18px !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 40px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 25px;
  padding-right: 25px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 300;
  font-size: 14px;
  text-transform: capitalize;
  color: #fff;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li:last-child a {
  font-size: 14px;
  color: #fff;
  background-color: #e91313;
  padding: 10px 20px !important;
  display: inline-block;
  border-radius: 5px;
  font-weight: 500;
  text-transform: capitalize;
  height: auto;
  line-height: 25px;
  letter-spacing: 0.5px;
  transition: all .3s;
}

.header-area .main-nav .nav li:last-child a:hover {
  color: #fff;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li:last-child a,
.background-header .main-nav .nav li.has-sub ul.sub-menu li:last-child a {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
  border-radius: 0px;
  padding-top: 0px !important;
  height: 40px;
}


.header-area .main-nav .nav li.has-sub ul.sub-menu li:last-child a:hover,
.background-header .main-nav .nav li.has-sub ul.sub-menu li:last-child a:hover {
  padding-left: 25px !important;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #e91313;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #e91313;
  opacity: 1;
}

.header-area .main-nav .nav li.has-sub {
  position: relative;
  padding-right: 15px;
}

.header-area .main-nav .nav li.has-sub:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #fff;
  position: absolute;
  right: 2px;
  top: 12px;
}

/* Burası yukarıdan acılan menü icin */             
.header-area .main-nav .nav li.has-sub ul.sub-menu {
  position: absolute;
  width: 200px;
  background-color: #fff;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 40px;
  border-radius: 5px;
  opacity: 0;
  transition: all .3s;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a!important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 12px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.has-sub ul li a:hover {
  background: #fff;
  color: #e91313!important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.has-sub ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.has-sub:hover ul.sub-menu {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #fff;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #e91313;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 10px;
    padding-right: 10px;
  }
  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }
  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #e91313!important;
    opacity: 1;
  }
  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }
  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }
  .header-area .container {
    padding: 0px;
  }
  .header-area .logo {
    margin-left: 0px;
    line-height: 80px;
  }
  .header-area .menu-trigger {
    display: block !important;
  }
  .header-area .main-nav {
    overflow: hidden;
  }
  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }
  .header-area.header-sticky .nav {
    margin-top: 100px !important;
  }
  .background-header.header-sticky .nav {
    margin-top: 80px !important;
  }
  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }
  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #e91313!important;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
    transition: all 0s;
  }
  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }
  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    height: auto;
  }
  .header-area .main-nav .nav li.has-sub:after {
    color: #3B566E;
    right: 30px;
    font-size: 14px;
    top: 15px;
  }
  .header-area .main-nav .nav li.submenu:hover ul, .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}


/* 
---------------------------------------------
banner
--------------------------------------------- 
*/

.swiper-container {
  height: calc(100vh - 0px);
  margin: 0px;
  background-color: #212741;
}

.swiper-slide {
  overflow: hidden;
}

.slide-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-size: cover;
  background-position: center;
}

.swiper-slide-active h2 {
  animation: fadeInLeft .8s;
  -webkit-animation-delay: 1s;
  animation-delay: .3s;
  opacity: 1;
}

.swiper-slide-active p {
  animation: fadeInRight .8s;
  -webkit-animation-delay: 1s;
  animation-delay: .3s;
  opacity: 1;
}

.swiper-slide-active .div-dec {
  animation: fadeIn .8s;
  -webkit-animation-delay: 1s;
  animation-delay: .3s;
  opacity: 1;
}

.swiper-slide-active .buttons .green-button,
.swiper-slide-active .buttons .orange-button {
  animation: fadeInUp .8s;
  -webkit-animation-delay: 1s;
  animation-delay: .3s;
  opacity: 1;
}

.slide-inner .header-text {
  position: absolute;
  width: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.slide-inner .header-text h2 {
  position: relative;
  z-index: 2;
  font-size: 56px;
  color: #fff;
  font-weight: 700;
  opacity: 1;
  visibility: visible;
  line-height: 70px;
  margin-bottom: 40px;
}

.slide-inner .header-text .div-dec {
  width: 80px;
  height: 6px;
  border-radius: 3px;
  background-color: #fff;
  margin-bottom: 40px;
  opacity: 1;
  visibility: visible;
}

.slide-inner .header-text p {
  color: #fff;
  margin-right: 60px;
  margin-bottom: 50px;
  opacity: 1;
  visibility: visible;
}

.slide-inner .header-text h2 em {
  font-style: normal;
  color: #e91313;
}

.slide-inner .header-text .buttons {
  display: inline;
  opacity: 1;
  visibility: visible;
}

.slide-inner .header-text .buttons .green-button {
  display: inline;
  float: left;
  margin-right: 20px;
}

.swiper-button-next, .swiper-button-prev {
  color: #fff !important;
}

/*
---------------------------------------------
services
---------------------------------------------
*/ 

section.services {
  margin-top: 90px;
}

.services .service-item {
  border-radius: 5px;
  padding: 40px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  margin-top: 30px;
}

.services .service-item:hover i {
  margin-top: 15px;
}

.services .service-item h4 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 20px;
}

.services .service-item i {
  transition: all .5s;
  float: left;
  font-size: 64px;
  color: #e91313;
  margin-bottom: 30px;
  margin-right: 30px;
}




/* ==================================================
   ÜRÜNLER BÖLÜMÜ (FINAL V2 - Dönen İkon & Şeffaf Kart)
   ================================================== */

.products-section {
    background-color: #1D3557; 
    /* Arka plan resmi */
    background-image: linear-gradient(rgba(21, 30, 50, 0.75), rgba(21, 30, 50, 0.85)), url('../images/Ana-slider/sunucu-slider.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; 
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

/* Arka plan deseni */
.products-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: linear-gradient(#303855 1px, transparent 1px), linear-gradient(90deg, #303855 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.07;
    pointer-events: none;
}

/* --- Başlık Alanı --- */
.products-header {
    max-width: 700px;
    margin: 0 auto 60px auto;
    text-align: center;
    position: relative;
    z-index: 2;
}

.products-kicker {
    display: inline-block;
    font-size: 13px;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-weight: 700;
    color: #e91313;
    margin-bottom: 15px;
    background: rgba(233, 19, 19, 0.1);
    padding: 6px 16px;
    border-radius: 20px;
}

.products-header h2 {
    font-size: 38px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
}

.products-header p {
    font-size: 16px;
    line-height: 1.8;
    color: #b8bccc;
}

/* --- Grid Yapısı --- */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
    position: relative;
    z-index: 2;
    align-items: stretch; 
}

/* --- KART TASARIMI --- */
.product-card {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 40px 30px;
    height: 100%;
    
    /* --- BURADAN SAYDAMLIĞI AYARLAYABİLİRSİN --- */
    /* Sondaki 0.03 değerini düşürürsen şeffaflaşır, artırırsan beyazlaşır */
    background: rgba(255, 255, 255, 0.03); 
    
    /* Arkadaki görseli netleştirmek için blur değerini 4px'e indirdim */
    backdrop-filter: blur(4px); 
    -webkit-backdrop-filter: blur(4px);
    
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* Kart Hover (Üzerine Gelince) */
.product-card:hover {
    transform: translateY(-10px);
    background: #e91313 !important; /* Kırmızıya dönüş */
    border-color: #e91313 !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
}

/* --- İkon Kutusu --- */
.product-icon {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    
    /* Dönme efektinin yumuşak olması için transition süresi */
    transition: all 0.5s ease; 
}

.product-icon i {
    font-size: 26px;
    color: #e91313;
    transition: all 0.5s ease;
}

/* --- HOVER EFEKTİ: İKON DÖNDÜRME --- */
.product-card:hover .product-icon {
    /* 180 Derece Döndürme (Flip Efekti) */
    transform: rotateY(180deg); 
    background: #ffffff; /* İstersen burayı şeffaf da yapabilirsin */
}

/* Kart hover olunca ikon rengi aynı kalsın veya değişsin */
.product-card:hover .product-icon i {
    color: #e91313; /* Kırmızı kalmasını sağlıyoruz */
}


/* --- Başlık ve Yazılar --- */
.product-card h3 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #ffffff;
}

.product-card p {
    font-size: 15px;
    line-height: 1.7;
    color: #cfd4da;
    margin-bottom: 25px;
    flex-grow: 1; 
}

/* Hoverda yazı renkleri beyaz kalsın */
.product-card:hover h3, 
.product-card:hover p {
    color: #ffffff !important;
}

/* Link (Tüm Ürünleri Gör) */
.product-link {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    display: inline-flex;
    align-items: center;
    border-bottom: 2px solid #e91313;
    padding-bottom: 4px;
    width: fit-content;
    transition: all 0.3s ease;
}

.product-card:hover .product-link {
    border-bottom-color: #ffffff;
}

/* --- MOBİL UYUMLULUK --- */
@media (max-width: 991px) {
    .products-section {
        padding: 70px 0;
        background-attachment: scroll; 
    }
    .products-header h2 {
        font-size: 30px;
    }
}

@media (max-width: 767px) {
    .products-section {
        padding: 60px 0;
    }
    .products-header h2 {
        font-size: 26px;
    }
    .product-card {
        padding: 30px 20px;
    }
}



/* --------------------------------------------------
   Info Section – Full Width Dark Strip (Şerit Tasarım)
-------------------------------------------------- */

#info-section {
    width: 100%; /* Ekranı tamamen kapla */
    background-color: #212741; /* Kurumsal Lacivert Arka Plan */
    padding: 50px 0; /* Üstten alttan boşluk */
    margin: 0; /* Dış boşlukları sıfırla */
    border-top: 1px solid rgba(255,255,255,0.05); /* Üst kısma çok hafif bir çizgi */
}

/* İçerik Kutusu (Artık kutu görünümü yok, sadece hizalama için) */
.info-container {
    background-color: transparent !important; /* Arka planı şeffaf yap */
    box-shadow: none !important; /* Gölgeyi kaldır */
    border-radius: 0 !important; /* Köşeleri dik yap */
    border: none !important; /* Kenarlığı kaldır */
    padding: 0 !important; /* İç boşluğu sıfırla */
    max-width: 100%; /* Genişlik kısıtlamasını kaldır */
    text-align: center;
}

/* İkon Kutusu (Koyu zemine uygun hale getirdik) */
.info-icon {
    width: 70px;
    height: 70px;
    background: rgba(255, 255, 255, 0.1); /* Yarı saydam beyaz */
    color: #fff;
    font-size: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px auto;
}

/* Başlıklar (Beyaz) */
.info-container h2 {
    font-size: 32px;
    color: #ffffff; 
    margin-bottom: 20px;
    font-weight: 700;
}

.info-container h2 strong {
    color: #e91313; /* "Anadolu'nun" kısmı kırmızı */
}

/* Paragraf (Açık Gri - Okunabilir) */
.info-container p {
    font-size: 18px;
    color: #cfd2da; 
    margin-bottom: 35px;
    line-height: 1.6;
    max-width: 800px; /* Yazı çok yayılmasın diye sınır */
    margin-left: auto;
    margin-right: auto;
}

/* Buton Grubu */
.button-group {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

/* Butonlar */
.btn-modern {
    padding: 14px 35px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
}

/* Kırmızı Buton */
.btn-red {
    background-color: #e91313;
    color: #fff !important;
    border: 2px solid #e91313;
}

.btn-red:hover {
    background-color: transparent;
    color: #e91313 !important;
}

/* İkinci Buton (Lacivert zeminde görünecek şekilde Beyaz Çerçeve) */
.btn-navy {
    background-color: transparent;
    color: #ffffff !important;
    border: 2px solid #ffffff;
}

.btn-navy:hover {
    background-color: #ffffff;
    color: #212741 !important;
}





/* --- Modern Partners Section Styles --- */
.modern-partners {
    margin-top: 60px !important; 
    padding-top: 40px !important; 
    padding-bottom: 80px !important;
    background-color: #f9f9f9; /* Hafif gri arka plan */
    position: relative;
}

.modern-partners .section-heading {
    margin-bottom: 50px;
}

.partner-card {
    background: #fff;
    border-radius: 15px;
    padding: 25px;
    height: 120px; /* Tüm kutular eşit yükseklikte */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    border: 1px solid transparent;
    transition: all 0.4s ease;
    margin: 15px 5px; /* Carousel içinde boşluk */
}

.partner-card img {
    max-width: 100%;
    max-height: 70px; /* Logoların taşmasını engeller */
    width: auto !important; /* Owl Carousel'in width %100 zorlamasını ezer */
    filter: grayscale(100%); /* Siyah beyaz yapar */
    opacity: 0.7;
    transition: all 0.4s ease;
}

/* Hover Efektleri */
.partner-card:hover {
    transform: translateY(-10px); /* Yukarı kalkma efekti */
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: #e91313; /* Sitenin kırmızısı ile ince çerçeve */
}

.partner-card:hover img {
    filter: grayscale(0%); /* Rengi geri getirir */
    opacity: 1;
    transform: scale(1.05);
}




/* ==================================================
   EXPERIENCE (TECRÜBE) BÖLÜMÜ - Modern Light Tasarım
   ================================================== */

.experience-section {
    padding-top: 50px !important; /* Üst boşluk kalsın (Ürünlerden ayrılması için) */
    padding-bottom: 0px !important; /* Alt boşluğu tamamen sıfırlıyoruz */
    background-color: #f9f9f9 !important; 
    background-image: none !important; /* Eski koyu harita görselini kaldırıyoruz */
    position: relative;
}

/* --- Sol Taraf: Yazılar --- */
.exp-content .sub-title {
    color: #e91313; /* Kırmızı vurgu */
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 13px;
    display: block;
    margin-bottom: 15px;
    background: rgba(233, 19, 19, 0.1); /* Hafif kırmızı zemin */
    padding: 5px 15px;
    border-radius: 20px;
    width: fit-content;
}

.exp-content h2 {
    font-size: 42px;
    font-weight: 800; /* Daha kalın font */
    line-height: 1.3;
    margin-bottom: 25px;
    color: #212741; /* Koyu Lacivert Başlık */
}

.exp-content h2 strong {
    color: #e91313;
}

.exp-content p {
    color: #555; /* Okunabilir koyu gri */
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 40px;
    border-left: 4px solid #e91313; /* Sol çizgi biraz daha kalın */
    padding-left: 25px;
}

/* --- Sol Taraf: Referans Logoları --- */
.client-preview h6 {
    font-size: 14px;
    color: #212741;
    font-weight: 700;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.mini-logos {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}

.mini-logos img {
    height: 60px; /* Biraz daha kibar boyut */
    width: auto;
    min-width: 100px;
    /* Logoları beyaz kutucuk içine alıyoruz */
    background: #ffffff; 
    border: 1px solid #eaeaea;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    padding: 10px 15px;
    border-radius: 10px;
    object-fit: contain;
    transition: all 0.3s ease;
}

.mini-logos img:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    border-color: #e91313;
}

/* --- Sağ Taraf: İstatistik Kutuları (Stat Box) --- */
.stat-box {
    /* Kutu arkaplanı BEYAZ yapıyoruz ki gri zeminde parlasın */
    background: #ffffff !important; 
    padding: 35px 25px;
    border-radius: 15px;
    text-align: center;
    /* İnce bir çerçeve ve yumuşak gölge */
    border: 1px solid #f0f0f0;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* Hover Efekti: Kutu yukarı kalkar */
.stat-box:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-color: transparent;
}

/* Hoverda alttan çıkan kırmızı çizgi efekti */
.stat-box::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 4px;
    background: #e91313;
    transition: all 0.4s ease;
}

.stat-box:hover::after {
    width: 100%;
}

.stat-box .icon {
    font-size: 36px;
    color: #e91313;
    margin-bottom: 20px;
    /* İkonun arkasına hafif bir daire ekleyelim */
    background: rgba(233, 19, 19, 0.05);
    width: 70px;
    height: 70px;
    line-height: 70px;
    border-radius: 50%;
    margin-left: auto;
    margin-right: auto;
}

.stat-box h3 {
    font-size: 42px;
    font-weight: 800;
    color: #212741; /* Sayılar koyu renk */
    margin-bottom: 5px;
}

.stat-box h3::after {
    content: "+";
    font-size: 24px;
    color: #e91313;
    vertical-align: top;
    margin-left: 5px;
}

.stat-box p {
    color: #888; /* Alt metin orta gri */
    font-size: 14px;
    margin: 0;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: none !important; /* Üstteki p stilinden gelen çizgiyi kaldır */
    padding: 0 !important;
}



/* ==================================================
   MODERN FOOTER TASARIMI (Dark & Clean)
   ================================================== */

.site-footer {
    background-color: #212741; /* Header ile aynı Kurumsal Lacivert */
    color: #b8bccc; /* Göz yormayan açık gri yazı rengi */
    padding-top: 80px;
    position: relative;
    font-size: 14px;
    border-top: 4px solid #e91313; /* Üst kısma Vektör Kırmızısı çizgi */
}

/* Başlıklar */
.footer-widget h4 {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

/* Başlıkların altına küçük kırmızı çizgi */
.footer-widget h4::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 40px;
    background-color: #e91313;
}

/* Paragraflar */
.footer-widget p {
    color: #b8bccc;
    line-height: 1.8;
    margin-bottom: 20px;
}

/* --- Linkler (Hızlı Erişim) --- */
.links-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.links-widget ul li {
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.links-widget ul li a {
    color: #b8bccc;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: all 0.3s ease;
}

/* Linklerin başına ok işareti koyalım */
.links-widget ul li a::before {
    content: "\f105"; /* FontAwesome Ok */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
    color: #e91313;
    font-size: 12px;
}

.links-widget ul li a:hover {
    color: #ffffff;
    padding-left: 5px; /* Sağa kayma efekti */
}

/* --- İletişim Listesi --- */
.info-list {
    list-style: none;
    padding: 0;
}

.info-list li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    color: #b8bccc;
}

.info-list li i {
    color: #e91313; /* İkonlar Kırmızı */
    font-size: 16px;
    margin-right: 15px;
    margin-top: 4px; /* İkonu metinle hizala */
    min-width: 20px;
}

.info-list li a {
    color: #b8bccc;
    transition: color 0.3s;
}

.info-list li a:hover {
    color: #ffffff;
}

/* Çalışma Saatleri Ayrımı */
.working-hours {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 15px;
    margin-top: 10px;
}

/* --- Sosyal Medya İkonları --- */
.social-links {
    display: flex;
    gap: 10px;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    border-radius: 50%; /* Yuvarlak ikon */
    transition: all 0.3s ease;
    border: 1px solid rgba(255,255,255,0.1);
}

.social-links a:hover {
    background-color: #e91313;
    color: #fff;
    transform: translateY(-3px);
}

/* --- Harita Çerçevesi --- */
.map-frame {
    border-radius: 10px;
    overflow: hidden;
    border: 4px solid rgba(255,255,255,0.1); /* Harita etrafına şık çerçeve */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* --- Harita Düzeltmesi (Alt Boşluğu Kaldırma) --- */
.map-frame iframe {
    display: block; /* İşte o boşluğu yok eden sihirli kod */
    width: 100%;
    border: none;
}

/* --- Copyright Alanı --- */
.footer-bottom {
    background-color: #1a1f33; /* Footer'dan bir ton daha koyu */
    padding: 25px 0;
    margin-top: 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer-bottom p {
    margin: 0;
    font-size: 13px;
    color: #7a82a0;
}





/* 
---------------------------------------------
page heading
--------------------------------------------- 
*/

.page-heading {
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 215px 0px 120px 0px;
  text-align: center;
}

.page-heading h2 {
  font-size: 56px;
  color: #fff;
  font-weight: 700;
}

.page-heading .div-dec {
  width: 80px;
  height: 6px;
  border-radius: 3px;
  background-color: #fff;
  margin: 20px auto 0 auto;
}

.page-heading.hirsiz-alarm {
  background-image: url('../images/Sayfa-başları/alarm-sistemleri.jpg');
}

.page-heading.yangin-alarm {
  background-image: url('../images/Sayfa-başları/Yangın-alarm.jpg');
}

.page-heading.CCTV-IP-kamera {
  background-image: url('../images/Sayfa-başları/CCTV-sistemleri.jpg');
}

.page-heading.network-kurulum {
  background-image: url('../images/Sayfa-başları/Network-sistemleri.png');
}

.page-heading.siber-guvenlik {
  background-image: url('../images/Sayfa-başları/Siber-güvenlik.jpg');
}

.page-heading.server {
  background-image: url('../images/Sayfa-başları/Server-sistemleri.jpg');
}

.page-heading.yazılım {
  background-image: url('../images/Sayfa-başları/yazılım-slider.jpg');
}

.page-heading.contact-us {
  background-image: url('../images/Sayfa-başları/kayseri-meydan.jpg');
}

.page-heading.hakkımızda {
  background-image: url('../images/Sayfa-başları/Erciyes-sayfa-bası.jpg');
}

.page-heading.ekibimiz {
  background-image: url('../images/Sayfa-başları/kayseri-meydan.jpg');
}

.page-heading.referanslarımız {
  background-image: url('../images/Sayfa-başları/kayseri-meydan.jpg');
}

.page-heading.banka {
  background-image: url('../images/Sayfa-başları/kayseri-meydan.jpg');
}

.page-heading.teklif {
  background-image: url('../images/Sayfa-başları/Erciyes-sayfa-bası.jpg');
}

.page-heading.product {
  background-image: url('../images/Sayfa-başları/Erciyes-sayfa-bası.jpg');
}

.page-heading.Yapay-Zeka {
  background-image: url('../images/Sayfa-başları/Yapay-Zeka.jpg');
}



/* 
---------------------------------------------
about us page
--------------------------------------------- 
*/

section.top-section .left-image img {
  border-radius: 10px;
}

section.top-section .accordions {
  border-radius: 5px;
  padding: 50px 40px;
  background-color: #fff;
  margin-left: 30px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}
.accordions .accordion {
  border-bottom: 1px solid #eee;
}
.accordions .last-accordion {
  border-bottom: none;
}
.accordion-head {
  padding: 35px 0px !important;  
  font-size: 22px;
  font-weight: 600;
  color: #212741;
  cursor: pointer;
  transition: color 200ms ease-in-out;
  
}
@media screen and (min-width: 768px) {
  .accordion-head {
    padding: 1rem;
    font-size: 1.2rem;
  }
}
.accordion-head .icon {
  float: right;
  transition: transform 200ms ease-in-out;
}
.accordion-head.is-open {
  color: #43ba7f;
  border-bottom: none;
}
.accordion-head.is-open .icon {
  transform: rotate(45deg);
}
.accordion-body {
  padding: 0px;
  overflow: hidden;
  height: 0;
  transition: height 300ms ease-in-out;
  border-bottom: 1px solid #fff;
}
.accordion-body > .content p {
  padding: 0px 0px 30px 0px;
  padding-top: 0;
}

section.what-we-do {
  margin-bottom: -30px;
}

.what-we-do .left-content {
  margin-right: 60px;
}

.what-we-do .left-content h4 {
  font-size: 22px;
  font-weight: 700;
  line-height: 40px;
  margin-bottom: 40px;
}

.what-we-do .left-content p {
  margin-bottom: 40px;
}

.what-we-do .right-items .item {
  border-radius: 5px;
  padding: 40px 30px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  position: relative;
}

.what-we-do .right-items .item em {
  position: absolute;
  font-style: normal;
  font-size: 44px;
  color: #43ba7f;
  font-weight: 600;
  right: 15px;
  top: 5px;
  transition: all .3s;
}

.what-we-do .right-items .item h4 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 22px;
}

.what-we-do .right-items .item:hover em {
  top: 10px;
}



/* 
---------------------------------------------
services page
--------------------------------------------- 
*/

.main-services .service-item {
  margin-bottom: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid #ecf8f2;
}

.main-services .last-service {
  border-bottom: none;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.main-services  .left-image {
  margin-right: 15px;
}

.main-services  .left-image img {
  border-radius: 5px;
}

.main-services  .right-image {
  margin-left: 15px;
}

.main-services  .right-image img {
  border-radius: 5px;
}

.main-services .right-text-content {
  margin-left: 15px;
}

.main-services .left-text-content {
  margin-right: 15px;
}

.left-text-content ul {
  list-style-type: disc; /* Disc, Circle, Square, None vb. olabilir */
  margin-left: 20px;
  padding-left: 0;
}

.left-text-content ul li {
  margin-bottom: 5px;
}


.main-services .right-text-content i,
.main-services .left-text-content i {
  font-size: 64px;
  color: #43ba7f;
  background-color: #ecf8f2;
  width: 120px;
  height: 120px;
  text-align: center;
  display: inline-block;
  line-height: 120px;
  border-radius: 5px;
}

.main-services .right-text-content h4,
.main-services .left-text-content h4 {
  font-size: 36px;
  font-weight: 700;
  color: #212741;
  margin-top: 40px;
  margin-bottom: 30px;
}

section.service-details .naccs {
  position: relative;
}

section.service-details .naccs .menu {
  text-align: center;
}

section.service-details .naccs .menu div {
  padding: 15px 30px;
  display: inline-block;
  text-align: center;
  border-radius: 5px !important;
  margin-right: 30px;
  font-size: 18px;
  color: #212741;
  background-color: #fff;
  cursor: pointer;
  vertical-align: middle;
  font-weight: 600;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

section.service-details .naccs .menu div.active {
  color: #ff511a;
}

section.service-details ul.nacc {
  margin-top: 50px !important;
  position: relative;
  min-height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

section.service-details ul.nacc li {
  background-color: #fff;
  overflow: hidden;
  opacity: 0;
  transform: translateX(50px);
  position: absolute;
  list-style: none;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

section.service-details ul.nacc li .left-image {
  position: absolute;
  margin-right: 50px;
  top: 50%;
  transform: translateY(-50%);
}

section.service-details ul.nacc li .left-image img {
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

section.service-details ul.nacc li .right-content {
  padding: 50px 50px 50px 0px;
  margin-left: 470px;
}

section.service-details ul.nacc li .right-content h4 {
  font-size: 24px;
  color: #212741;
  margin-bottom: 25px;
  font-weight: 700;
  line-height: 40px;
  margin-right: 120px;
}

section.service-details ul.nacc li .right-content ul {
  margin-top: 20px;
  margin-bottom: 20px;
}

section.service-details ul.nacc li .right-content span {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: #212741;
  font-style: italic;
  margin-bottom: 12px;
}

section.service-details ul.nacc li .right-content .last-span {
  margin-bottom: 0px;
}

section.service-details ul.nacc li .right-content p {
  margin-bottom: 30px;
}

section.service-details ul.nacc li.active {
  position: relative;
  transition-delay: 0.3s;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
}

/* yeni servis bölümü */

body {
  font-family: 'Poppins', sans-serif;
  font-size: 16px;
  color: #333;
  margin: 0;
  padding: 0;
  background-color: #f9f9f9;
}

.cctv-service {
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}

.cctv-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
}

.cctv-image {
  width: 500px;
  height: 300px;
  border-radius: 10px;
  margin-right: 20px;
}

.cctv-header-text {
  max-width: 70%;
}

.cctv-header-text h2 {
  font-size: 28px;
  color: #212741;
  margin-bottom: 15px;
}

.cctv-header-text p {
  font-size: 18px;
  line-height: 1.6;
}

.cctv-content {
  margin-top: 20px;
}

.cctv-content h3 {
  font-size: 25px;
  color: #212741;
  margin-bottom: 15px;
}

.cctv-content p,
.cctv-content ul {
  font-size: 18px;
  line-height: 1.8;
  margin-bottom: 20px;
}

.cctv-content ul {
  padding-left: 20px;
}

.cctv-content ul li {
  margin-bottom: 10px;
}

.cctv-content ul li::before {
  content: "•";
  color: #212741;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}



/* Yeni servis bölümü için */
.ai-service {
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  margin-top: 40px; /* Üst kısımdan ayırmak için boşluk */
}

.ai-header {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Resmi sağa almak için */
  margin-bottom: 30px;
}

.ai-image {
  width: 500px;
  height: 300px;
  border-radius: 10px;
  margin-left: 20px; /* Resmin solda olduğu durumla uyumlu */
}

.ai-header-text {
  max-width: 70%;
  text-align: left;
}

.ai-header-text h2 {
  font-size: 28px;
  color: #212741;
  margin-bottom: 15px;
}

.ai-header-text p {
  font-size: 18px;
  line-height: 1.6;
}




/* ==================================================
   MODERN ÜRÜN KATALOĞU TASARIMI
   ================================================== */

.modern-products-section {
    padding: 80px 0;
    background-color: #f9f9f9; /* Sitenin geneliyle uyumlu açık gri */
}

/* Başlık Alanı */
.section-subtitle {
    color: #e91313;
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 13px;
    margin-bottom: 5px;
}

.section-title {
    color: #212741;
    font-weight: 800;
    margin-bottom: 15px;
}

.title-line {
    width: 60px;
    height: 3px;
    background-color: #e91313;
    margin: 0 auto;
    border-radius: 2px;
}

/* Ürün Kartı */
.modern-product-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    border: 1px solid #eaeaea;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
    height: 100%; /* Kartları eşit boya getirir */
    display: flex;
    flex-direction: column;
    position: relative;
}

.modern-product-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-color: #e91313;
}

/* Kart Rozeti (Sağ Üst) */
.card-badge {
    position: absolute;
    top: 15px;
    right: 15px;
    background: #212741;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 4px;
    z-index: 2;
}

.card-badge.premium { background: #e91313; }
.card-badge.local { background: #43ba7f; }

/* Resim Alanı */
.product-img-wrap {
    padding: 30px;
    background: #fff;
    text-align: center;
    border-bottom: 1px solid #f5f5f5;
    height: 250px; /* Resim alanı sabit yükseklik */
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-img-wrap img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain; /* Resmi kutuya sığdır, kesme */
    transition: transform 0.5s ease;
}

.modern-product-card:hover .product-img-wrap img {
    transform: scale(1.08);
}

/* İçerik Alanı */
.product-content {
    padding: 25px;
    flex-grow: 1; /* İçeriği alta kadar yay */
    display: flex;
    flex-direction: column;
}

.product-title {
    font-size: 18px;
    font-weight: 700;
    color: #212741;
    margin-bottom: 5px;
}

.product-model {
    display: block;
    font-size: 13px;
    color: #888;
    margin-bottom: 20px;
    font-family: monospace; /* Model numarası teknik dursun */
}

/* Özellik Listesi (Tablo yerine) */
.product-specs {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    flex-grow: 1; /* Butonu en alta itmek için */
}

.product-specs li {
    font-size: 14px;
    color: #555;
    margin-bottom: 10px;
    display: flex;
    align-items: flex-start;
}

.product-specs li i {
    color: #e91313; /* Tik işareti kırmızı */
    margin-right: 10px;
    margin-top: 4px;
    font-size: 12px;
    min-width: 15px;
}

/* Buton */
.btn-get-quote {
    display: block;
    width: 100%;
    text-align: center;
    background-color: #212741;
    color: #fff;
    padding: 12px;
    border-radius: 8px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 13px;
    letter-spacing: 1px;
    transition: all 0.3s ease;
}

.btn-get-quote:hover {
    background-color: #e91313;
    color: #fff;
}

/* Alt Banner Alanı */
.catalog-footer-banner {
    background: linear-gradient(45deg, #1D3557, #2a3d66);
    padding: 40px;
    border-radius: 10px;
    text-align: center;
    color: #fff;
}

.catalog-footer-banner h4 {
    color: #fff;
    font-weight: 700;
}

.catalog-footer-banner p {
    color: #cfd4da;
}

.btn-contact-outline {
    display: inline-block;
    margin-top: 15px;
    border: 2px solid #fff;
    color: #fff;
    padding: 10px 30px;
    border-radius: 50px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-contact-outline:hover {
    background: #fff;
    color: #212741;
}



/* ==================================================
   BANKA HESAPLARI SAYFASI TASARIMI
   ================================================== */

.modern-bank-section {
    padding: 80px 0;
    background-color: #f9f9f9;
}

/* Hesap Sahibi Bilgi Kartı */
.account-owner-card {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    border: 1px solid #eaeaea;
    margin-bottom: 30px;
}

.account-owner-card i {
    font-size: 40px;
    color: #e91313;
}

.account-owner-card h4 {
    font-size: 16px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
}

.account-owner-card h3 {
    font-size: 24px;
    font-weight: 700;
    color: #212741;
    margin-bottom: 10px;
}

.account-owner-card p {
    color: #555;
    font-size: 14px;
}

/* Banka Kartı */
.bank-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
    height: 100%;
}

.bank-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.1);
}

/* Kart Başlığı (Banka Rengi) */
.bank-header {
    padding: 20px;
    background: #f4f4f4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eaeaea;
}

/* Banka Logo Alanı */
.bank-logo-area {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bank-logo-area i {
    font-size: 24px;
    color: #212741;
}

.bank-logo-area span {
    font-weight: 700;
    color: #212741;
    font-size: 15px;
}

/* Para Birimi Rozeti */
.currency-badge {
    font-size: 12px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 5px;
    color: #fff;
}

.currency-badge.tl { background-color: #0099cc; } /* TL Mavisi */
.currency-badge.usd { background-color: #28a745; } /* Dolar Yeşili */
.currency-badge.eur { background-color: #ffc107; color: #212741; } /* Euro Sarısı */

/* Kart Gövdesi */
.bank-body {
    padding: 25px 20px;
    text-align: center;
}

.iban-label {
    font-size: 12px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
    display: block;
}

.iban-box {
    font-family: 'Courier New', Courier, monospace; /* Monospace font IBAN için iyidir */
    font-size: 16px;
    font-weight: 700;
    color: #212741;
    background: #f9f9f9;
    padding: 10px;
    border-radius: 5px;
    border: 1px dashed #ccc;
    word-break: break-all; /* Mobilde taşmayı önler */
}



.contact-section {
  text-align: center;
  padding: 20px;
  background-color: #f9f9f9;
  border-top: 1px solid #ddd;
  margin-top: 20px;
}

.contact-section p {
  font-size: 18px;
  margin-bottom: 10px;
}

.contact-button {
  display: inline-block;
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #e91313;
  text-decoration: none;
  border-radius: 5px;
}

.contact-button:hover {
  background-color: #e91313;
}


/* Hakkımızda bölüm stili */
.hakkimizda-section {
  background-color: #fff;
  padding: 50px 0;
}

.hakkimizda-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.about-content, .mission, .vision, .values {
  margin-bottom: 40px;
  width: 100%;
  text-align: center;
}

.about-content h1, .mission h2, .vision h2, .values h2 {
  font-size: 36px;
  color: #333;
  margin-bottom: 20px;
  position: relative;
}

.about-content h1::after, .mission h2::after, .vision h2::after, .values h2::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 5px;
  background-color: #e91313;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
}

.about-content p, .mission p, .vision p, .values p, .values ul {
  font-size: 18px;
  line-height: 1.6;
  color: #666;
  margin-bottom: 20px;
  text-align: justify;
}

.values ul {
  list-style-type: none;
  padding: 0;
}

.values li {
  margin-bottom: 20px;
}

.values li strong {
  color: #e91313;
}

.about-image {
  margin-bottom: 40px;
}

.about-image img {
  max-width: 100%;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

.about-image img:hover {
  transform: scale(1.05);
}


/* ==================================================
   REFERANSLAR SAYFASI TASARIMI
   ================================================== */

.modern-references-section {
    padding: 80px 0;
    background-color: #f9f9f9; /* Göz yormayan gri zemin */
}

/* Referans Kartı (Logo Kutusu) */
.ref-card {
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px; /* Tüm kutular eşit yükseklikte */
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

/* Hover Efekti */
.ref-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    border-color: #e91313; /* Kırmızı çerçeve */
}

/* Logo Resmi */
.ref-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Logo kutuya sığsın, taşmasın */
    
    /* Siyah Beyaz Efekt */
    filter: grayscale(100%); 
    opacity: 0.7; 
    transition: all 0.4s ease;
}

/* Hover Durumunda Logo */
.ref-card:hover img {
    filter: grayscale(0%); /* Rengi geri getir */
    opacity: 1; /* Tam görünürlük */
    transform: scale(1.05); /* Hafif büyüme */
}



/* Ekibimiz Bölümü */
.team-section {
  background-color: #f9f9f9;
  padding: 50px 0;
  text-align: center;
}

.team-section .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.team-section h2 {
  font-size: 36px;
  color: #333;
  margin-bottom: 40px;
}

.team-category {
  margin-bottom: 40px;
}

.team-category h3 {
  font-size: 28px;
  color: #e91313;
  margin-bottom: 20px;
}

.team-member {
  margin-bottom: 20px;
  text-align: center;
}

.team-member img {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  margin-bottom: 10px;
}

.team-member h4 {
  font-size: 20px;
  margin: 10px 0 5px;
}

.team-member p {
  font-size: 16px;
  color: #666;
}


/* styles.css */
.custom-section {
  text-align: center;
  margin: 50px 0; /* İsteğinize göre bu değeri ayarlayabilirsiniz */
}

.text-above-line {
  font-size: 24px;
  font-weight: bold;
  margin: 20px 0;
  color: #e91313; /* Üst yazının rengi (örnek: kırmızı) */
}

.text-below-line {
  font-size: 24px;
  font-weight: bold;
  margin: 20px 0;
  color: #e91313; /* Alt yazının rengi (örnek: mavi) */
}

.custom-line {
  width: 80%; /* Çizginin genişliği, isteğinize göre ayarlayabilirsiniz */
  margin: 0 auto; /* Ortalanması için */
  border-top: 2px solid #000000; 
}




/* 
---------------------------------------------
contact us page
--------------------------------------------- 
*/

section.map .info-item {
  text-align: center;
  padding: 40px 30px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  margin-top: -60px;
  margin-left: 15px;
  margin-right: 15px;
  position: relative;
  z-index: 2;
  transition: all .5s;
}

section.map .info-item:hover {
  margin-top: -70px;
}

section.map .info-item i {
  font-size: 36px;
  color: #e91313;
  margin-bottom: 25px;
}

section.map .info-item h4 {
  font-size: 18px;
  color: #212741;
  font-weight: 600;
  margin-bottom: 12px;
}

section.map .info-item a {
  font-size: 15px;
  font-weight: 600;
  color: #e91313;
  transition: all 0.3s;
}

section.map .info-item a:hover {
  color: #e91313;
}

#contact input {
  width: 100%;
  height: 50px;
  background-color: #f7f7f7;
  color: #212741;
  border-radius: 5px;
  border: none;
  padding: 0px 15px;
  font-size: 14px;
  outline: none;
  margin-bottom: 30px;
}

#contact textarea {
  width: 100%;
  height: 180px;
  max-height: 24px;
  min-height: 150px;
  background-color: #f7f7f7;
  color: #212741;
  border-radius: 5px;
  border: none;
  padding: 15px 15px;
  font-size: 14px;
  outline: none;
  margin-bottom: 30px;
}

#contact input::placeholder, 
#contact textarea::placeholder {
  color: #212741;
}
#contact button.orange-button {
  font-size: 14px;
  color: #fff;
  background-color: #e91313;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 5px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  border: none;
  transition: all .3s;
}

#contact button.orange-button:hover {
  background-color: #e91313;
}





/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/


body {
  overflow-x: hidden;
}

@media (max-width: 992px) {
  .header-area .main-nav .nav li:last-child {
    display: none;
  }
  .header-area .main-nav .nav li ul li:last-child {
    display: inline-block;
  }
  .header-area {
    background-color: #212741;
  }
  .slide-inner .header-text {
    width: 80%;
  }
  .simple-cta {
    text-align: center;
  }
  section.simple-cta .buttons {
    justify-content: center;
  }
  section.about-us .naccs .menu div,
  section.service-details .naccs .menu div {
    margin-right: 15px;
    font-size: 15px;
    padding: 15px 20px;
  }
  section.about-us .right-content {
    margin-left: 0px;
    margin-top: 60px;
  }
  section.calculator .left-image {
    display: none;
  }
  .testimonials .item img {
    max-width: 200px;
    right: 50px;
  }
  section.partners .item {
    margin:15px; 
  }
  section.top-section .accordions {
    margin-left: 0px;
    margin-top: 45px;
  }
  .what-we-do .left-content {
    margin-right: 0px;
    margin-bottom: 45px;
  }
  .main-services .left-image {
    margin-right: 0px;
    margin-bottom: 30px;
  }
  .main-services .right-text-content {
    margin-left: 0px;
  }
  .main-services .right-image {
    margin-left: 0px;
    margin-top: 30px;
  }
  section.service-details ul.nacc li .left-image {
    position: relative;
    margin-right: 0px;
    transform: translateY(0px);
  }
  section.service-details ul.nacc li .left-image img {
    border-radius: 15px;
  }
  section.service-details ul.nacc li .right-content {
    padding: 50px;
    margin-left: 0px;
  }
  section.service-details ul.nacc li .right-content h4 {
    margin-right: 0px;
  }
  section.service-details ul.nacc li.active {
    display: inline-block;
  }
  section.service-details ul.nacc li {
    display: none;
  }
  section.map .info-item {
    margin-top: 30px;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo {
    line-height: 100px;
  }
  .background-header .main-nav .logo {
    line-height: 80px;
  }
  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    display: none;
  }
  .slide-inner .header-text p {
    display: none;
  }
  .slide-inner .header-text {
    text-align: center;
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
  }
  .slide-inner .header-text .div-dec {
    margin-left: auto;
    margin-right: auto;
  }
  .slide-inner .header-text .buttons {
    display: inline-flex;
  }
  .slide-inner .header-text .buttons .green-button {
    float: none;
  }
  .services .service-item i {
    margin-bottom: 35px;
  }
  section.about-us ul.nacc li span.item-title {
    font-size: 14px !important;
  }
  section.about-us ul.nacc li span.item {
    font-size: 13px;
  }
  .testimonials .item i {
    margin-bottom: 60px;
  }
  .testimonials .item img {
    max-width: 100px;
    right: 50px;
    top: 35px;
    transform: translateY(0);
  }
  .testimonials .item {
    padding: 50px;
  }
}

/* Responsive Tasarım */
@media (max-width: 768px) {
  .references-section .logos,
  .team-section .team-category {
      flex-direction: column;
      align-items: center;
  }

  .references-section .logo,
  .team-member {
      width: 100%;
      max-width: 300px;
  }

  .team-member img {
      width: 100px;
      height: 100px;
  }
}

/* teklif form css */

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  font-family: 'Nunito', sans-serif;
  color: #384047;
}

form {
  max-width: 300px;
  margin: 10px auto;
  padding: 10px 20px;
  background: #f4f7f8;
  border-radius: 8px;
}

h1 {
  margin: 0 0 30px 0;
  text-align: center;
}

input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
textarea,
select {
  background: rgba(255,255,255,0.1);
  border: none;
  font-size: 16px;
  height: auto;
  margin: 0;
  outline: 0;
  padding: 15px;
  width: 100%;
  background-color: #e8eeef;
  color: #8a97a0;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03) inset;
  margin-bottom: 30px;
}

input[type="radio"],
input[type="checkbox"] {
  margin: 0 4px 8px 0;
}

select {
  padding: 6px;
  height: 32px;
  border-radius: 2px;
}

button {
  padding: 19px 39px 18px 39px;
  color: #FFF;
  background-color: #e91313;
  font-size: 18px;
  text-align: center;
  font-style: normal;
  border-radius: 5px;
  width: 100%;
  border: 1px solid #e91313;
  border-width: 1px 1px 3px;
  box-shadow: 0 -1px 0 rgba(255,255,255,0.1) inset;
  margin-bottom: 10px;
}

fieldset {
  margin-bottom: 30px;
  border: none;
}

legend {
  font-size: 1.4em;
  margin-bottom: 10px;
}

label {
  display: block;
  margin-bottom: 8px;
}

label.light {
  font-weight: 300;
  display: inline;
}

.number {
  background-color: #e91313;
  color: #fff;
  height: 30px;
  width: 30px;
  display: inline-block;
  font-size: 0.8em;
  margin-right: 4px;
  line-height: 30px;
  text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,0.2);
  border-radius: 100%;
}

@media screen and (min-width: 480px) {

  form {
    max-width: 480px;
  }

}

body {
    /* #f9f9f9 kodu, tam beyaz değil, göz yormayan çok açık bir gridir */
    background-color: #f9f9f9 !important; 
    color: #333; /* Genel yazı rengi */
}



/* ==================================================
   MODERN HİZMET SAYFALARI (Genel Tasarım)
   ================================================== */

.modern-service-page {
    padding-bottom: 50px;
    background-color: #f9f9f9; /* Sayfa genel zemin */
}

/* ==================================================
   HİZMET SAYFASI GİRİŞ BÖLÜMÜ (TAMİR EDİLMİŞ FINAL)
   ================================================== */

.modern-intro {
    background-color: #f9f9f9 !important; 
    padding-top: 40px !important; 
    padding-bottom: 50px !important;
}

/* --- Sol Taraf: Görsel Alanı --- */
.intro-image-group {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    /* Resmin etrafına gölge vererek öne çıkaralım */
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.intro-image-group .main-img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

.intro-image-group:hover .main-img {
    transform: scale(1.03);
}

/* --- Yüzen Etiket (Floating Badge) --- */
.floating-badge {
    position: absolute;
    bottom: 30px;
    left: 30px;
    /* Gri zemin üzerinde net durması için BEYAZ kutu */
    background: #ffffff; 
    padding: 15px 25px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    border-left: 4px solid #e91313;
}

.floating-badge i {
    font-size: 32px;
    color: #e91313;
}

.floating-badge span {
    font-weight: 700;
    color: #212741;
    line-height: 1.2;
    font-size: 14px;
}

/* --- Sağ Taraf: İçerik ve Liste Tasarımı --- */
.intro-text-content {
    padding-left: 30px;
}

/* Üst Başlık (AKILLI GÜVENLİK...) */
.sub-heading {
    color: #e91313;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: block;
    margin-bottom: 15px;
}

/* Ana Başlık (Evinizin ve İşyerinizin...) */
.intro-text-content h2 {
    font-size: 36px;
    font-weight: 800;
    color: #212741;
    margin-bottom: 20px;
    line-height: 1.3;
}

/* Açıklama Yazısı */
.intro-text-content p.lead-text {
    font-size: 16px;
    color: #555;
    margin-bottom: 40px;
    line-height: 1.7;
}

/* --- Özellik Listesi (Burası Eksikti) --- */
.feature-list-grid {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Maddeler arası boşluk */
}

.feature-item {
    display: flex;
    align-items: flex-start; /* İkon ve yazıyı üstten hizala */
    gap: 20px;
}

/* İkon Kutusu Tasarımı */
.feature-item .f-icon {
    width: 60px;
    height: 60px;
    /* Gri zeminde patlaması için ikon kutusunu BEYAZ yapıyoruz */
    background-color: #ffffff; 
    color: #212741;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px; /* İkon boyutu */
    flex-shrink: 0; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* Hafif gölge */
    transition: all 0.3s ease;
}

/* Hover Efekti */
.feature-item:hover .f-icon {
    background-color: #e91313;
    color: #fff;
    transform: rotateY(180deg);
}

/* Liste Metinleri */
.feature-item .f-text h5 {
    font-size: 18px;
    font-weight: 700;
    color: #212741;
    margin-bottom: 8px;
}

.feature-item .f-text p {
    font-size: 14px;
    color: #666;
    margin: 0;
    line-height: 1.5;
}

/* Mobil Uyumluluk */
@media (max-width: 991px) {
    .intro-text-content {
        padding-left: 0;
        margin-top: 40px;
    }
    .floating-badge {
        bottom: 20px;
        left: 20px;
        padding: 10px 20px;
    }
}

/* --- 2. Bölüm: Özellikler (Features Grid) --- */
.service-features {
    padding: 40px 0;
}

.service-features h3 {
    font-size: 32px;
    font-weight: 700;
    color: #212741;
    margin-bottom: 10px;
}

.section-desc {
    color: #777;
    font-size: 18px;
    max-width: 600px;
    margin: 0 auto;
}

/* Özellik Kartı Tasarımı */
.feature-card {
    background: #ffffff;
    padding: 35px 25px;
    border-radius: 12px;
    border: 1px solid #eaeaea;
    text-align: left;
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
    top: 0;
}

.feature-card:hover {
    top: -10px; /* Yukarı kalkma efekti */
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border-color: #e91313;
}

.feature-card .icon-box {
    width: 60px;
    height: 60px;
    background: #f4f7f6;
    color: #212741;
    font-size: 24px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.feature-card:hover .icon-box {
    background: #e91313;
    color: #fff;
}

.feature-card h4 {
    font-size: 20px;
    font-weight: 700;
    color: #212741;
    margin-bottom: 15px;
}

.feature-card p {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

/* Öne Çıkan Kart (Ücretsiz Keşif) */
.feature-card.highlight-card {
    background: #212741;
    border-color: #212741;
}

.feature-card.highlight-card h4,
.feature-card.highlight-card p {
    color: #fff;
}

.feature-card.highlight-card .icon-box {
    background: rgba(255,255,255,0.1);
    color: #e91313;
}

/* --- 3. Bölüm: Markalar ve CTA --- */
.service-partners-cta .inner-box {
    background: linear-gradient(45deg, #1D3557, #2a3d66);
    padding: 40px 50px;
    border-radius: 15px;
    color: #fff;
    box-shadow: 0 10px 30px rgba(29, 53, 87, 0.2);
}

.service-partners-cta h4 {
    color: #fff;
    font-size: 24px;
    margin-bottom: 10px;
}

.service-partners-cta p {
    color: #dbe1e6;
    margin: 0;
    font-size: 16px;
}

.btn-quote {
    display: inline-block;
    background: #e91313;
    color: #fff !important;
    padding: 15px 35px;
    border-radius: 50px;
    font-weight: 700;
    text-transform: uppercase;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(233, 19, 19, 0.3);
}

.btn-quote:hover {
    background: #fff;
    color: #e91313 !important;
    transform: translateY(-3px);
}

/* Mobil Uyumluluk */
@media (max-width: 767px) {
    .intro-content {
        padding-left: 0;
        margin-top: 30px;
    }
    .service-partners-cta .text-right {
        text-align: left !important;
        margin-top: 20px;
    }
    .service-partners-cta .inner-box {
        padding: 30px;
    }
}



/* ==================================================
   MODERN HEADER DROPDOWN (TAMİR EDİLMİŞ FİNAL VERSİYON)
   ================================================== */

/* 1. Açılır Menü Kutusu (Dış Çerçeve) */
.header-area .main-nav .nav li.has-sub ul.sub-menu {
    width: 280px !important; 
    background-color: #ffffff !important; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.15) !important; 
    border-radius: 0 0 8px 8px !important; /* Alt köşeler yuvarlak */
    border-top: 4px solid #e91313 !important; /* Üst kırmızı çizgi */
    padding: 0 !important; 
    margin-top: 15px !important; 
}

/* 2. Menü Öğeleri (Satırlar) */
.header-area .main-nav .nav li.has-sub ul.sub-menu li {
    border-bottom: 1px solid #f5f5f5 !important; 
    margin: 0 !important; 
}

/* Son satırın altındaki çizgiyi kaldır */
.header-area .main-nav .nav li.has-sub ul.sub-menu li:last-child {
    border-bottom: none !important; 
}

/* 3. Linkler (Genel Ayarlar) */
.header-area .main-nav .nav li.has-sub ul.sub-menu li a {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #212741 !important; 
    padding: 14px 25px !important; 
    height: auto !important;
    line-height: 1.5 !important;
    background: transparent !important;
    transition: all 0.3s ease !important;
    display: block !important; 
    width: 100% !important; 
}

/* 4. Hover Efekti (Genel) */
.header-area .main-nav .nav li.has-sub ul.sub-menu li a:hover {
    color: #e91313 !important; 
    padding-left: 35px !important; 
    background-color: #f9f9f9 !important; 
}

/* -------------------------------------------------------
   HATA DÜZELTİCİ: SON SATIR İÇİN ZORUNLU AYARLAR
   (Dosyadaki eski 'last-child' kodlarını ezer)
------------------------------------------------------- */

.header-area .main-nav .nav li.has-sub ul.sub-menu li:last-child a,
.background-header .main-nav .nav li.has-sub ul.sub-menu li:last-child a {
    margin: 0 !important;
    padding: 14px 25px !important; /* Boşluğu geri yükle */
    padding-top: 14px !important; /* Eski koddaki 0px'i ez */
    height: auto !important; /* Yüksekliği serbest bırak */
    line-height: 1.5 !important;
    border-radius: 0 0 8px 8px !important; /* Köşeleri yuvarlat */
    background: transparent !important;
    color: #212741 !important;
    border: none !important;
}

/* Son satır için Hover'ı da ayrıca tamir ediyoruz */
.header-area .main-nav .nav li.has-sub ul.sub-menu li:last-child a:hover,
.background-header .main-nav .nav li.has-sub ul.sub-menu li:last-child a:hover {
    padding-left: 35px !important; /* Kayma efekti */
    background-color: #f9f9f9 !important;
    color: #e91313 !important;
}


/* ==================================================
   ÜRÜN DETAY SAYFASI TASARIMI
   ================================================== */

/* Header Background (Detay sayfası için özel başlık) */
.product-detail-header {
    background-image: url('../images/Sayfa-başları/Erciyes-sayfa-bası.jpg'); /* Mevcut bir resim kullan */
    padding: 180px 0 80px 0;
}

.breadcrumb-nav {
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin-top: 15px;
}

.breadcrumb-nav li {
    color: #fff;
    font-size: 14px;
}

.breadcrumb-nav li::after {
    content: "/";
    margin: 0 10px;
    color: #e91313;
}

.breadcrumb-nav li:last-child::after {
    content: "";
}

.breadcrumb-nav li a {
    color: #ccc;
    transition: 0.3s;
}

.breadcrumb-nav li a:hover {
    color: #fff;
}

/* Ana İçerik Alanı */
.product-detail-area {
    padding: 80px 0;
    background-color: #f9f9f9;
}

/* Sol Taraf: Görsel Kartı */
.product-gallery-card {
    background: #fff;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border: 1px solid #eaeaea;
    position: relative;
    text-align: center;
}

.badge-overlay {
    position: absolute;
    top: 20px;
    left: 20px;
    background: #e91313;
    color: #fff;
    padding: 5px 15px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 20px;
    z-index: 2;
}

/* Sağ Taraf: Bilgiler */
.product-info-content {
    padding-left: 20px;
}

.brand-tag {
    color: #e91313;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 10px;
    display: block;
}

.p-title {
    font-size: 32px;
    font-weight: 800;
    color: #212741;
    margin-bottom: 5px;
}

.p-model {
    color: #888;
    font-family: monospace;
    font-size: 16px;
    margin-bottom: 25px;
}

.p-description p {
    color: #555;
    line-height: 1.8;
    font-size: 16px;
}

.p-features-list {
    margin: 30px 0;
    padding: 0;
    list-style: none;
}

.p-features-list li {
    margin-bottom: 12px;
    font-size: 15px;
    color: #212741;
}

.p-features-list li i {
    color: #43ba7f; /* Yeşil tik */
    margin-right: 10px;
}

/* Butonlar */
.p-actions {
    display: flex;
    gap: 15px;
    margin-top: 30px;
    flex-wrap: wrap;
}

.btn-product-quote {
    background-color: #212741;
    color: #fff !important;
    padding: 15px 30px;
    border-radius: 8px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-product-quote:hover {
    background-color: #e91313;
    transform: translateY(-3px);
}

.btn-product-whatsapp {
    background-color: #25D366; /* WhatsApp Yeşili */
    color: #fff !important;
    padding: 15px 30px;
    border-radius: 8px;
    font-weight: 600;
    text-transform: uppercase;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.btn-product-whatsapp:hover {
    background-color: #128C7E;
    transform: translateY(-3px);
}

/* Teknik Tablo */
.tech-specs-container {
    background: #fff;
    padding: 40px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
}

.specs-title {
    font-size: 24px;
    color: #212741;
    font-weight: 700;
    margin-bottom: 30px;
    border-left: 4px solid #e91313;
    padding-left: 15px;
}

.custom-table th {
    background-color: #f9f9f9;
    color: #212741;
    font-weight: 600;
    width: 30%;
}

.custom-table td {
    color: #555;
}

/* Mobil Uyum */
@media (max-width: 991px) {
    .product-info-content {
        padding-left: 0;
        margin-top: 30px;
    }
}