/*--------------------------------------------------------------
# General
--------------------------------------------------------------*/
:root {
  scroll-behavior: smooth;
}

body {
  font-family: "Cuprum", sans-serif;
  color: #2b2c30;
  font-size: 17px;
}

/* Tema genişliği panelden seçilir (Ayarlar > Site Genişliği). "Yeni"
   seçiliyken Bootstrap'in .container / .container-xl sınıflarının normalde
   breakpoint'lerde kilitlendiği sabit max-width'i (1140px, 1320px vb.)
   kaldırıp tam genişlik yapıyoruz; "Eski" seçiliyken Bootstrap'in
   varsayılan dar/klasik davranışı aynen kalır. */
body.full-width-yeni .container,
body.full-width-yeni .container-xl {
  max-width: 100%;
}

a {
  color: #002696;
  text-decoration: none;
}

a:hover {
  color: #d90000;
  text-decoration: none;
  font-weight: 500;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Cuprum", sans-serif;
}
.ysol {
  text-align: left !important;
}
/*--------------------------------------------------------------
# Sections
--------------------------------------------------------------*/
section {
  padding: 60px 0;
  overflow: hidden;
}

.sectionipt {
  padding: 0px !important;
}

.section-header {
  text-align: center;
  padding-bottom: 40px;
}

.section-header h2 {
  font-size: 13px;
  letter-spacing: 1px;
  font-weight: 700;
  margin: 0;
  color: #4154f1;
  text-transform: uppercase;
}

.section-header p {
  margin: 10px 0 0 0;
  padding: 0;
  font-size: 38px;
  line-height: 42px;
  font-weight: 700;
  color: #012970;
}

@media (max-width: 768px) {
  .section-header p {
    font-size: 28px;
    line-height: 32px;
  }
}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumbs {
  padding: 15px 0;
  background: #012970;
  min-height: 40px;
  margin-top: 177px;
  color: #fff;
}

@media (max-width: 992px) {
  .breadcrumbs {
    margin-top: 88px;
  }
}

.breadcrumbs h2 {
  font-size: 28px;
  font-weight: 500;
}

.breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0 0 10px 0;
  margin: 0;
  font-size: 14px;
}

.breadcrumbs ol a {
  color: #fff;
  transition: 0.3s;
}

.breadcrumbs ol a:hover {
  text-decoration: underline;
}

.breadcrumbs ol li + li {
  padding-left: 10px;
}

.breadcrumbs ol li + li::before {
  display: inline-block;
  padding-right: 10px;
  color: #8894f6;
  content: "/";
}

/* Bootstrap'in .breadcrumb-item.active kuralı varsayılan gri renk
   veriyor; koyu lacivert şerit üstünde neredeyse görünmez oluyordu. */
.breadcrumbs .breadcrumb-item.active {
  color: rgba(255, 255, 255, 0.85);
}

/*--------------------------------------------------------------
# Back to top button
--------------------------------------------------------------*/
.back-to-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background: #e81932;
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.back-to-top i {
  font-size: 24px;
  color: #fff;
  line-height: 0;
}

.back-to-top:hover {
  background: #6776f4;
  color: #fff;
}

.back-to-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
.header {
  transition: all 0.5s;
  z-index: 997;
  padding: 20px 0;
}

.header.header-scrolled {
  background: #fff;
  padding: 15px 0;
  box-shadow: 0px 2px 20px rgba(1, 41, 112, 0.1);
}

.header .logo {
  line-height: 0;
}

.header .logo img {
  max-height: 40px;
  margin-right: 6px;
}

.header .logo span {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #012970;
  font-family: "Cuprum", sans-serif;
  margin-top: 3px;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/**
* Desktop Navigation 
*/
.navbar {
  padding: 0;
}

.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

.navbar li {
  position: relative;
}

.navbar a,
.navbar a:focus {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 30px;
  font-family: "Cuprum", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #2c2872;
  white-space: nowrap;
  transition: 0.3s;
}

.navbar a i,
.navbar a:focus i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

.navbar a:hover,
.navbar .active,
.navbar .active:focus,
.navbar li:hover > a {
  color: #cb0020;
}

.navbar .getstarted,
.navbar .getstarted:focus {
  background: #4154f1;
  padding: 8px 20px;
  margin-left: 30px;
  border-radius: 4px;
  color: #fff;
}

.navbar .getstarted:hover,
.navbar .getstarted:focus:hover {
  color: #fff;
  background: #5969f3;
}

.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: 14px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  background: #ffffff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
  transition: 0.3s;
  border-radius: 4px;
}

.navbar .dropdown ul li {
  min-width: 200px;
}

.navbar .dropdown ul a {
  padding: 10px 20px;
  font-size: 16px;
  text-transform: none;
  font-weight: 600;
  font-family: "Cuprum", sans-serif;
  line-height: 12px;
}

.navbar .dropdown ul a i {
  font-size: 16px;
}

.navbar .dropdown ul a:hover,
.navbar .dropdown ul .active:hover,
.navbar .dropdown ul li:hover > a {
  color: #cb0020;
}

.navbar .dropdown:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

.navbar .megamenu {
  position: static;
}

.navbar .megamenu ul {
  margin-top: 5px;
  right: 0;
  padding: 10px;
  display: flex;
  width: 1020px;
}

.meganu {
  font-style: none;
  left: 0;
}

/* Tam genişlik temaya geçilince "KATEGORİLER" mega menüsü artık .navbar'ın
   kendi (viewport'un tamamı olmayan) sağ kenarına göre sabit 1020px
   genişlikte açılıyor ve ekranın sağından taşıyordu. Kendi tetikleyicisine
   göre konumlanacak şekilde sıfırlayıp genişliği ekrana göre sınırlıyoruz. */
.navbar .dropdown.megamenu {
  position: relative;
}

.navbar .megamenu > ul.meganu {
  position: absolute;
  top: calc(100% + 20px);
  right: 0;
  left: auto;
  width: max-content;
  max-width: min(640px, calc(100vw - 32px));
  flex-wrap: wrap;
}

.navbar .megamenu ul li {
  flex: 0 1 200px;
  width: auto;
}

.meganu a {
  float: left;
  width: 100%;
  height: 69px;
  display: flex;
  justify-content: left;
  align-items: center;
  background: #f5f5f5;
  border: 1px solid #fff;
  margin: 0;
}

.meganu a:hover {
  background-color: transparent;
  border: 1px solid #ced4da;
}

@media (max-width: 792px) {
  .navbar .megamenu ul {
    margin-top: 5px;
    right: 0;
    padding: 10px;
    display: flex;
    width: 89%;
  }
}

.cm-primary-nav {
  border-top-color: #e81932;
  width: 1428px;
}

.navbar .megamenu ul li {
  flex: 1;
}

.navbar .megamenu ul li a,
.navbar .megamenu ul li:hover > a {
  color: #110000;
}

.navbar .megamenu ul li a:hover,
.navbar .megamenu ul li .active,
.navbar .megamenu ul li .active:hover {
  color: #e81932;
}

.navbar .dropdown .dropdown ul {
  top: 0;
  left: calc(100% - 30px);
  visibility: hidden;
}

.navbar .dropdown .dropdown:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}

@media (max-width: 1366px) {
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }

  .navbar .dropdown .dropdown:hover > ul {
    left: -100%;
  }
}

/**
* Mobile Navigation 
*/
.mobile-nav-toggle {
  color: #2c2872;
  font-size: 28px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

.mobile-nav-toggle.bi-x {
  color: #ffffff;
}

@media (max-width: 1200px) {
  /* .mt-15/.mbe-15 masaüstü menüsünü dikeyde ortalamak için nav'a 15px
     kaydırma uyguluyordu; mobilde bu, hamburger ikonunu arama ikonunun
     hizasından 15px aşağı düşürüyordu. */
  #navbar {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  .mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f4f6fb;
  }

  /* Menü paneli her zaman DOM'da/yerleşimde durur, açık/kapalı durumu
     display değil transform ile yönetilir — böylece kayarak açılır. */
  .navbar > ul {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: 88%;
    max-width: 380px;
    margin: 0;
    padding: 76px 0 24px;
    background: #fff;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -16px 0 40px rgba(1, 20, 58, 0.16);
    z-index: 10000;
  }

  #navbar.navbar-mobile > ul {
    transform: translateX(0);
  }
}

#navbar.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(1, 20, 58, 0.55);
  transition: background 0.35s ease;
  z-index: 9999;
}

.navbar-mobile .mobile-nav-toggle {
  position: fixed;
  top: 18px;
  right: calc(min(88vw, 380px) - 58px);
  z-index: 10001;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}

.navbar-mobile .mobile-nav-toggle:hover {
  background: rgba(255, 255, 255, 0.28);
}

.navbar-mobile a,
.navbar-mobile a:focus {
  padding: 10px 20px;
  font-size: 15px;
  color: #2c2872;
}

.navbar-mobile a:hover,
.navbar-mobile .active,
.navbar-mobile li:hover > a {
  color: #cb0020;
}

.navbar-mobile .getstarted,
.navbar-mobile .getstarted:focus {
  margin: 15px;
}

.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #fff;
  box-shadow: 0px 0px 30px rgba(127, 137, 161, 0.25);
}

.navbar-mobile .dropdown ul li {
  min-width: 200px;
}

.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
}

.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}

/* Mobil menü (3 çizgi) açıldığında panelin en üstünde dil + sosyal
   ikonlar; masaüstünde bu blok görünmez (üst şeritte zaten var). */
.navbar-mobile-extras {
  display: none;
}

.navbar-mobile .navbar-mobile-extras {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 16px;
  margin-bottom: 6px;
  border-bottom: 1px solid #eef1fb;
}

.navbar-mobile-extras .util-lang {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.navbar-mobile-extras .util-lang a {
  color: #2c2872;
  font-weight: 600;
}

/* .util-lang a.is-active kuralı (üst şeritteki koyu zemin için beyaz
   renk verir) burada aynı özgüllükte olduğu için kazanıyordu; aktif dil
   (TR) beyaz zemin üstünde görünmez oluyordu. */
.navbar-mobile-extras .util-lang a.is-active {
  color: #fff;
  background: #2c2872;
}

.navbar-mobile-extras .util-social {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.navbar-mobile-extras .util-social a {
  color: #2c2872;
  margin-left: 0;
  font-size: 18px;
}

/* Arama kutusu mobil drawer içinde tekrar görünmesin; kompakt arama
   kutusu zaten header'da her zaman açık duruyor. */
@media (max-width: 1200px) {
  .exen-search-wrap {
    display: none !important;
  }
}

/* Mobil arama: sade büyüteç ikonu, tıklanınca header altında tam
   genişlikte açılan bir kutuya dönüşür. */
.header-mobile-search {
  display: none;
}

@media (max-width: 1200px) {
  .header-mobile-search {
    display: block;
    position: relative;
    margin-left: auto;
  }

  .header-mobile-search-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 0;
    background: #f4f6fb;
    color: #012970;
    font-size: 16px;
  }

  .header-mobile-search[data-open="true"] .header-mobile-search-toggle {
    background: #012970;
    color: #fff;
  }

  .header-mobile-search-form {
    position: fixed;
    left: 0;
    right: 0;
    top: 80px;
    z-index: 9998;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(1, 20, 58, 0.12);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }

  .header-mobile-search[data-open="true"] .header-mobile-search-form {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .header-mobile-search-form input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid #dde3f2;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 16px;
  }

  .header-mobile-search-form button {
    flex-shrink: 0;
    border: 0;
    background: #012970;
    color: #fff;
    border-radius: 6px;
    width: 42px;
    height: 42px;
  }
}

/* iOS Safari, font-size 16px'den küçük bir input'a odaklanınca sayfayı
   otomatik yakınlaştırır — bu da odaklanma anında rahatsız edici bir
   "kayma" hissi yaratır (Chrome'da bu davranış yok, o yüzden masaüstü
   testinde fark edilmiyordu). Mobildeki tüm form alanlarını 16px'e
   sabitleyip bu zoom'u tamamen engelliyoruz.
   Flex genişlik hesaplamalarında Safari'nin varsayılan intrinsic input
   genişliğini dikkate almaması (min-width:0 olmadan taşma/satır kırılması
   yapması) için input/button'lara da min-width/flex-shrink ekliyoruz. */
@media (max-width: 767px) {
  .header-mobile-search-form input,
  .contact .php-email-form input,
  .contact .php-email-form textarea,
  .blog .blog-comments .reply-form input,
  .header .search-form input,
  .exen-search-panel input,
  .newsletter-input {
    font-size: 16px;
  }
}

.navbar-mobile .dropdown ul a:hover,
.navbar-mobile .dropdown ul .active:hover,
.navbar-mobile .dropdown ul li:hover > a {
  color: #e81932;
}

.navbar-mobile .dropdown > .dropdown-active {
  display: block;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  width: 100%;
  height: 100vh;
  background: url(../img/hero-bg.png) top center no-repeat;
  background-size: cover;
}

.hero h1 {
  margin: 0;
  font-size: 48px;
  font-weight: 700;
  color: #012970;
}

.hero h2 {
  color: #444444;
  margin: 15px 0 0 0;
  font-size: 26px;
}

.hero .btn-get-started {
  margin-top: 30px;
  line-height: 0;
  padding: 15px 40px;
  border-radius: 4px;
  transition: 0.5s;
  color: #fff;
  background: #4154f1;
  box-shadow: 0px 5px 30px rgba(65, 84, 241, 0.4);
}

.hero .btn-get-started span {
  font-family: "Cuprum", sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1px;
}

.hero .btn-get-started i {
  margin-left: 5px;
  font-size: 18px;
  transition: 0.3s;
}

.hero .btn-get-started:hover i {
  transform: translateX(5px);
}

.hero .hero-img {
  text-align: right;
}

@media (min-width: 1024px) {
  .hero {
    background-attachment: fixed;
  }
}

@media (max-width: 991px) {
  .hero {
    height: auto;
    padding: 165px 0 60px 0;
  }

  .hero .hero-img {
    text-align: center;
    margin-top: 80px;
  }

  .hero .hero-img img {
    width: 80%;
  }
}

@media (max-width: 768px) {
  .hero {
    text-align: center;
  }

  .hero h1 {
    font-size: 32px;
  }

  .hero h2 {
    font-size: 24px;
  }

  .hero .hero-img img {
    width: 100%;
  }
}

/*--------------------------------------------------------------
# Index Page
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# About
--------------------------------------------------------------*/
.about .content {
  background-color: #fff;
  padding: 25px 20px 0 5px;
}

.kayrenk {
  background-color: #f2f5fc;
}

.about h3 {
  font-size: 14px;
  font-weight: 700;
  color: #4154f1;
  text-transform: uppercase;
}

.about h2 {
  font-size: 24px;
  font-weight: 700;
  color: #012970;
}

.about p {
  margin: 15px 0 30px 0;
  line-height: 24px;
}

.about .btn-read-more {
  line-height: 0;
  padding: 15px 40px;
  border-radius: 4px;
  transition: 0.5s;
  color: #fff;
  background: #4154f1;
  box-shadow: 0px 5px 25px rgba(65, 84, 241, 0.3);
}

.about .btn-read-more span {
  font-family: "Cuprum", sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 1px;
}

.about .btn-read-more i {
  margin-left: 5px;
  font-size: 18px;
  transition: 0.3s;
}

.about .btn-read-more:hover i {
  transform: translateX(5px);
}

/*--------------------------------------------------------------
# Values
--------------------------------------------------------------*/
.values .box {
  padding: 30px;
  box-shadow: 0px 0 5px rgba(1, 41, 112, 0.08);
  text-align: center;
  transition: 0.3s;
  height: 100%;
}

.values .box img {
  padding: 30px 50px;
  transition: 0.5s;
  transform: scale(1.1);
}

.values .box h3 {
  font-size: 24px;
  color: #012970;
  font-weight: 700;
  margin-bottom: 10px;
  margin-top: 10px;
}

.values .box:hover {
  box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
}

.values .box:hover img {
  transform: scale(1);
}

/*--------------------------------------------------------------
# Counts
--------------------------------------------------------------*/
.counts {
  padding: 20px 0 10px;
}

.counts .count-box {
  display: flex;
  align-items: center;
  padding: 20px;
  width: 100%;
  background: #fff;
  box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
}

.counts .count-box i {
  font-size: 42px;
  line-height: 0;
  margin-right: 20px;
  color: #4154f1;
}

.counts .count-box span {
  font-size: 36px;
  display: block;
  font-weight: 600;
  color: #0b198f;
}

.counts .count-box p {
  padding: 0;
  margin: 0;
  font-family: "Cuprum", sans-serif;
  font-size: 14px;
}

/*--------------------------------------------------------------
# Features
--------------------------------------------------------------*/
.features .feature-box {
  padding: 24px 20px;
  box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
  transition: 0.3s;
  height: 100%;
}

.features .feature-box h3 {
  font-size: 18px;
  color: #012970;
  font-weight: 700;
  margin: 0;
}

.features .feature-box i {
  line-height: 0;
  background: #ecf3ff;
  padding: 4px;
  margin-right: 10px;
  font-size: 24px;
  border-radius: 3px;
  transition: 0.3s;
}

.features .feature-box:hover i {
  background: #4154f1;
  color: #fff;
}

.features .feture-tabs {
  margin-top: 120px;
}

/* "box" görünümlü özellik blokları (panelden eklenen, ör. "Profesyonellere
   Özel Olarak Geliştirildi") .content-block.team sınıfını kullanıyor;
   .features .feature-box kuralı bu sınıfı kapsamadığı için ikon hiç
   boşluksuz kalıp yazının üstüne biniyordu. */
.content-block.team .feature-box i {
  flex-shrink: 0;
  line-height: 1;
  margin-right: 16px;
}

.content-block.team .feature-box h3 {
  font-size: 18px;
  color: #012970;
  font-weight: 700;
  margin: 0 0 6px;
}

.features .feture-tabs h3 {
  color: #012970;
  font-weight: 700;
  font-size: 32px;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .features .feture-tabs h3 {
    font-size: 28px;
  }
}

.features .feture-tabs .nav-pills {
  border-bottom: 1px solid #eee;
}

.features .feture-tabs .nav-link {
  background: none;
  text-transform: uppercase;
  font-size: 15px;
  font-weight: 600;
  color: #012970;
  padding: 12px 0;
  margin-right: 25px;
  margin-bottom: -2px;
  border-radius: 0;
}

.features .feture-tabs .nav-link.active {
  color: #4154f1;
  border-bottom: 3px solid #4154f1;
}

.features .feture-tabs .tab-content h4 {
  font-size: 18px;
  margin: 0;
  font-weight: 700;
  color: #012970;
}

.features .feture-tabs .tab-content i {
  font-size: 24px;
  line-height: 0;
  margin-right: 8px;
  color: #4154f1;
}

.features .feature-icons {
  margin-top: 120px;
}

.features .feature-icons h3 {
  color: #012970;
  font-weight: 700;
  font-size: 32px;
  margin-bottom: 20px;
  text-align: center;
}

@media (max-width: 768px) {
  .features .feature-icons h3 {
    font-size: 28px;
  }
}

.features .feature-icons .content .icon-box {
  display: flex;
}

.features .feature-icons .content .icon-box h4 {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 10px 0;
  color: #012970;
}

.features .feature-icons .content .icon-box i {
  font-size: 44px;
  line-height: 44px;
  color: #0245bc;
  margin-right: 15px;
}

.features .feature-icons .content .icon-box p {
  font-size: 15px;
  color: #848484;
}

/*--------------------------------------------------------------
# Services
--------------------------------------------------------------*/
.services .service-box {
  box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
  height: 100%;
  padding: 60px 30px;
  text-align: center;
  transition: 0.3s;
  border-radius: 5px;
}

.services .service-box .icon {
  font-size: 36px;
  padding: 40px 20px;
  border-radius: 4px;
  position: relative;
  margin-bottom: 25px;
  display: inline-block;
  line-height: 0;
  transition: 0.3s;
}

.services .service-box h3 {
  color: #444444;
  font-weight: 700;
}

.services .service-box .read-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 16px;
  padding: 8px 20px;
}

.services .service-box .read-more i {
  line-height: 0;
  margin-left: 5px;
  font-size: 18px;
}

.services .service-box.blue {
  border-bottom: 3px solid #2db6fa;
}

.services .service-box.blue .icon {
  color: #2db6fa;
  background: #dbf3fe;
}

.services .service-box.blue .read-more {
  color: #2db6fa;
}

.services .service-box.blue:hover {
  background: #2db6fa;
}

.services .service-box.orange {
  border-bottom: 3px solid #f68c09;
}

.services .service-box.orange .icon {
  color: #f68c09;
  background: #fde3c4;
}

.services .service-box.orange .read-more {
  color: #f68c09;
}

.services .service-box.orange:hover {
  background: #f68c09;
}

.services .service-box.green {
  border-bottom: 3px solid #08da4e;
}

.services .service-box.green .icon {
  color: #08da4e;
  background: #cffddf;
}

.services .service-box.green .read-more {
  color: #08da4e;
}

.services .service-box.green:hover {
  background: #08da4e;
}

.services .service-box.red {
  border-bottom: 3px solid #e9222c;
}

.services .service-box.red .icon {
  color: #e9222c;
  background: #fef7f8;
}

.services .service-box.red .read-more {
  color: #e9222c;
}

.services .service-box.red:hover {
  background: #e9222c;
}

.services .service-box.purple {
  border-bottom: 3px solid #b50edf;
}

.services .service-box.purple .icon {
  color: #b50edf;
  background: #f8e4fd;
}

.services .service-box.purple .read-more {
  color: #b50edf;
}

.services .service-box.purple:hover {
  background: #b50edf;
}

.services .service-box.pink {
  border-bottom: 3px solid #f51f9c;
}

.services .service-box.pink .icon {
  color: #f51f9c;
  background: #feecf7;
}

.services .service-box.pink .read-more {
  color: #f51f9c;
}

.services .service-box.pink:hover {
  background: #f51f9c;
}

.services .service-box:hover h3,
.services .service-box:hover p,
.services .service-box:hover .read-more {
  color: #fff;
}

.services .service-box:hover .icon {
  background: #fff;
}

/*--------------------------------------------------------------
# Pricing
--------------------------------------------------------------*/
.pricing .box {
  padding: 0px 0px;
  background: #fff;
  text-align: center;
  box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
  transition: 0.3s;
}
.pricing .box2 {
  text-align: left !important;
}
.pricing .box:hover {
  transform: scale(1.1);
  box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
}

/* Asıl "üzerine gelince büyüme" şikayetinin gerçek sebebi buradaymış:
   ürün galerisinin sarmalayıcısı da .pricing .box kullanıyor, bu genel
   fiyat-kartı hover'ını miras alıyordu. Galeriyi bundan muaf tutuyoruz. */
.pricing .product-gallery-box:hover {
  transform: none;
  box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
}
.pricing .post-box {
  box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
  transition: 0.3s;
  background: #fff;
  height: 100%;
  overflow: hidden;
  padding: 30px;
  border-radius: 8px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.pricing h3 {
  font-weight: 700;
  font-size: 18px;
  margin-bottom: 15px;
}

.pricing .price {
  font-size: 36px;
  color: #444444;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
}

.pricing .price sup {
  font-size: 20px;
  top: -15px;
  left: -3px;
}

.pricing .price span {
  color: #bababa;
  font-size: 16px;
  font-weight: 300;
}

.pricing img {
  padding: 5px 5px 15px 5px;
}

.padsif {
  padding: 0px !important;
}

.pricingyaziu {
  font-size: 20px;
  color: #2c2872;
  font-weight: 500;
  font-family: "cuprum", sans-serif;
}

.pricingyazia {
  font-size: 20px;
  color: #adb5bd;
  font-weight: 400;
  font-family: "cuprum", sans-serif;
}

.pricingyazikir {
  font-size: 16px;
  color: #012970;
  font-weight: 500;
  font-family: "cuprum", sans-serif;
}

.pricing ul {
  padding: 0;
  list-style: none;
  color: #444444;
  text-align: center;
  line-height: 26px;
  font-size: 16px;
  margin-bottom: 25px;
}

.pricing ul li {
  padding-bottom: 2px;
}

.pricing ul .na {
  color: #ccc;
  text-decoration: line-through;
}

.pricing .btn-buy {
  display: inline-block;
  padding: 8px 40px 10px 40px;
  border-radius: 50px;
  color: #4154f1;
  transition: none;
  font-size: 16px;
  font-weight: 400;
  font-family: "Cuprum", sans-serif;
  font-weight: 600;
  transition: 0.3s;
  border: 1px solid #4154f1;
}

.pricing .btn-buy:hover {
  background: #4154f1;
  color: #fff;
}

.pricing .featured {
  width: 200px;
  position: absolute;
  top: 18px;
  right: -68px;
  transform: rotate(45deg);
  z-index: 1;
  font-size: 14px;
  padding: 1px 0 3px 0;
  background: #4154f1;
  color: #fff;
}
.nana {
  list-style: none;
}
.nana a {
  color: #cb0020;
  text-decoration: none;
}
.nana a:hover {
  color: #2c2872;
  text-decoration: none;
  font-weight: 700;
}
/*--------------------------------------------------------------
# F.A.Q
--------------------------------------------------------------*/
.faq .accordion-collapse {
  border: 0;
}

.faq .accordion-button {
  padding: 15px 15px 20px 0;
  font-weight: 600;
  border: 0;
  font-size: 18px;
  color: #444444;
  text-align: left;
}

.faq .accordion-button:focus {
  box-shadow: none;
}

.faq .accordion-button:not(.collapsed) {
  background: none;
  color: #4154f1;
  border-bottom: 0;
}

.faq .accordion-body {
  padding: 0 0 25px 0;
  border: 0;
}

/*--------------------------------------------------------------
# Portfolio
--------------------------------------------------------------*/
.portfolio #portfolio-flters {
  padding: 0;
  margin: 0 auto 25px auto;
  list-style: none;
  text-align: center;
  background: white;
  border-radius: 50px;
  padding: 2px 15px;
}

.portfolio #portfolio-flters li {
  cursor: pointer;
  display: inline-block;
  padding: 8px 20px 10px 20px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  color: #444444;
  margin: 0 4px 8px 4px;
  transition: 0.3s;
  border-radius: 50px;
  border: 1px solid #fff;
}

.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
  color: #4154f1;
  border-color: #4154f1;
}

.portfolio #portfolio-flters li:last-child {
  margin-right: 0;
}

.portfolio .portfolio-wrap {
  transition: 0.3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  background: rgba(255, 255, 255, 0.75);
}

.portfolio .portfolio-wrap::before {
  content: "";
  background: rgba(255, 255, 255, 0.75);
  position: absolute;
  left: 30px;
  right: 30px;
  top: 30px;
  bottom: 30px;
  transition: all ease-in-out 0.3s;
  z-index: 2;
  opacity: 0;
}

.portfolio .portfolio-wrap img {
  transition: 1s;
}

.portfolio .portfolio-wrap .portfolio-info {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  z-index: 3;
  transition: all ease-in-out 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.portfolio .portfolio-wrap .portfolio-info::before {
  display: block;
  content: "";
  width: 48px;
  height: 48px;
  position: absolute;
  top: 35px;
  left: 35px;
  border-top: 3px solid rgba(1, 41, 112, 0.2);
  border-left: 3px solid rgba(1, 41, 112, 0.2);
  transition: all 0.5s ease 0s;
  z-index: 9994;
}

.portfolio .portfolio-wrap .portfolio-info::after {
  display: block;
  content: "";
  width: 48px;
  height: 48px;
  position: absolute;
  bottom: 35px;
  right: 35px;
  border-bottom: 3px solid rgba(1, 41, 112, 0.2);
  border-right: 3px solid rgba(1, 41, 112, 0.2);
  transition: all 0.5s ease 0s;
  z-index: 9994;
}

.portfolio .portfolio-wrap .portfolio-info h4 {
  font-size: 20px;
  color: #012970;
  font-weight: 700;
}

.portfolio .portfolio-wrap .portfolio-info p {
  color: #012970;
  font-weight: 600;
  font-size: 14px;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
}

.portfolio .portfolio-wrap .portfolio-links {
  text-align: center;
  z-index: 4;
}

.portfolio .portfolio-wrap .portfolio-links a {
  color: #fff;
  background: #4154f1;
  margin: 10px 2px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: 0.3s;
}

.portfolio .portfolio-wrap .portfolio-links a i {
  font-size: 24px;
  line-height: 0;
}

.portfolio .portfolio-wrap .portfolio-links a:hover {
  background: #5969f3;
}

.portfolio .portfolio-wrap:hover img {
  transform: scale(1.1);
}

.portfolio .portfolio-wrap:hover::before {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 1;
}

.portfolio .portfolio-wrap:hover .portfolio-info {
  opacity: 1;
}

.portfolio .portfolio-wrap:hover .portfolio-info::before {
  top: 15px;
  left: 15px;
}

.portfolio .portfolio-wrap:hover .portfolio-info::after {
  bottom: 15px;
  right: 15px;
}

/*--------------------------------------------------------------
# Portfolio Details
--------------------------------------------------------------*/
.portfolio-details {
  padding-top: 40px;
}

.portfolio-details .portfolio-details-slider img {
  width: 100%;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #4154f1;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #4154f1;
}

.portfolio-details .portfolio-info {
  padding: 30px;
  box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.portfolio-details .portfolio-info ul {
  list-style: none;
  padding: 0;
  font-size: 15px;
}

.portfolio-details .portfolio-info ul li + li {
  margin-top: 10px;
}

.portfolio-details .portfolio-description {
  padding-top: 30px;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
}

/*--------------------------------------------------------------
# Testimonials
--------------------------------------------------------------*/
.testimonials .testimonial-item {
  box-sizing: content-box;
  padding: 30px;
  margin: 40px 30px;
  box-shadow: 0px 0 20px rgba(1, 41, 112, 0.1);
  background: #fff;
  min-height: 320px;
  display: flex;
  flex-direction: column;
  text-align: center;
  transition: 0.3s;
}

.testimonials .testimonial-item .stars {
  margin-bottom: 15px;
}

.testimonials .testimonial-item .stars i {
  color: #ffc107;
  margin: 0 1px;
}

.testimonials .testimonial-item .testimonial-img {
  width: 90px;
  border-radius: 50%;
  border: 4px solid #fff;
  margin: 0 auto;
}

.testimonials .testimonial-item h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 10px 0 5px 0;
  color: #111;
}

.testimonials .testimonial-item h4 {
  font-size: 14px;
  color: #999;
  margin: 0;
}

.testimonials .testimonial-item p {
  font-style: italic;
  margin: 0 auto 15px auto;
}

.testimonials .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.testimonials .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #4154f1;
}

.testimonials .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #4154f1;
}

.testimonials .swiper-slide {
  opacity: 1;
}

@media (max-width: 1199px) {
  .testimonials .swiper-slide-active {
    opacity: 1;
  }

  .testimonials .swiper-pagination {
    margin-top: 0;
  }
}

@media (min-width: 1200px) {
  .testimonials .swiper-slide-next {
    opacity: 1;
    transform: scale(1.12);
  }
}

/*--------------------------------------------------------------
# Team
--------------------------------------------------------------*/
.team {
  background: #fff;
  padding: 60px 0;
}

.team .member {
  overflow: hidden;
  text-align: center;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
  transition: 0.3s;
}

.team .member .member-img {
  position: relative;
  overflow: hidden;
}

.team .member .member-img:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  background: url(../img/team-shape.svg) no-repeat center bottom;
  background-size: contain;
  z-index: 1;
}

.team .member .social {
  position: absolute;
  right: -100%;
  top: 30px;
  opacity: 0;
  border-radius: 4px;
  transition: 0.5s;
  background: rgba(255, 255, 255, 0.3);
  z-index: 2;
}

.team .member .social a {
  transition: color 0.3s;
  color: rgba(1, 41, 112, 0.5);
  margin: 15px 12px;
  display: block;
  line-height: 0;
  text-align: center;
}

.team .member .social a:hover {
  color: rgba(1, 41, 112, 0.8);
}

.team .member .social i {
  font-size: 18px;
}

.team .member .member-info {
  padding: 10px 15px 20px 15px;
}

.team .member .member-info h4 {
  font-weight: 700;
  margin-bottom: 5px;
  font-size: 20px;
  color: #012970;
}

.team .member .member-info span {
  display: block;
  font-size: 14px;
  font-weight: 400;
  color: #aaaaaa;
}

.team .member .member-info p {
  font-style: italic;
  font-size: 14px;
  padding-top: 15px;
  line-height: 26px;
  color: #5e5e5e;
}

.team .member:hover {
  transform: scale(1.08);
  box-shadow: 0px 0 30px rgba(1, 41, 112, 0.1);
}

.team .member:hover .social {
  right: 8px;
  opacity: 1;
}

/*--------------------------------------------------------------
# Clients
--------------------------------------------------------------*/
.clients .clients-slider .swiper-slide img {
  opacity: 1;
  transition: 0.3s;
}

.clients .clients-slider .swiper-slide img:hover {
  opacity: 1;
}

.clients .clients-slider .swiper-pagination {
  margin-top: 20px;
  position: relative;
}

.clients .clients-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: #fff;
  opacity: 1;
  border: 1px solid #4154f1;
}

.clients .clients-slider .swiper-pagination .swiper-pagination-bullet-active {
  background-color: #4154f1;
}

/*--------------------------------------------------------------
# Recent Blog Posts
--------------------------------------------------------------*/
.recent-blog-posts .post-box {
  box-shadow: 0px 0 30px rgba(1, 41, 112, 0.08);
  transition: 0.3s;
  height: 100%;
  overflow: hidden;
  padding: 30px;
  border-radius: 8px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.post-box2 {
  padding: 15px !important;
}

.post-box3 {
  padding: 0px 30px 30px 30px !important;
}

.post-box4 {
  padding: 50px !important;
}

.recent-blog-posts .post-box .post-img {
  overflow: hidden;
  margin: -30px -30px 15px -30px;
  position: relative;
}

.recent-blog-posts .post-box .post-img img {
  transition: 0.5s;
}

.recent-blog-posts .post-box .post-date {
  font-size: 16px;
  font-weight: 600;
  color: rgba(1, 41, 112, 0.6);
  display: block;
  margin-bottom: 10px;
}

.recent-blog-posts .post-box .post-title {
  font-size: 24px;
  color: #012970;
  font-weight: 700;
  margin-bottom: 18px;
  position: relative;
  transition: 0.3s;
}

.recent-blog-posts .post-box .readmore {
  display: flex;
  align-items: center;
  font-weight: 600;
  line-height: 1;
  transition: 0.3s;
}

.recent-blog-posts .post-box .readmore i {
  line-height: 0;
  margin-left: 4px;
  font-size: 18px;
}

.recent-blog-posts .post-box:hover .post-title {
  color: #4154f1;
}

.recent-blog-posts .post-box:hover .post-img img {
  transform: rotate(6deg) scale(1.2);
}

/*--------------------------------------------------------------
# Contact
--------------------------------------------------------------*/
.contact .info-box {
  color: #444444;
  background: #fafbff;
  padding: 30px;
}

.contact .info-box i {
  font-size: 38px;
  line-height: 0;
  color: #4154f1;
}

.contact .info-box h3 {
  font-size: 30px;
  color: #012970;
  font-weight: 700;
  margin: 20px 0 10px 0;
}

.contact .info-box p {
  padding: 0;
  line-height: 24px;
  font-size: 17px;
  margin-bottom: 0;
}

.contact .php-email-form {
  background: #fafbff;
  padding: 30px;
  height: 100%;
}

.contact .php-email-form .error-message {
  display: none;
  color: #fff;
  background: #ed3c0d;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .sent-message {
  display: none;
  color: #fff;
  background: #18d26e;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.contact .php-email-form .loading {
  display: none;
  background: #fff;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.contact .php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid #18d26e;
  border-top-color: #eee;
  animation: animate-loading 1s linear infinite;
}

.contact .php-email-form input,
.contact .php-email-form textarea {
  border-radius: 0;
  box-shadow: none;
  font-size: 14px;
  border-radius: 0;
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus {
  border-color: #4154f1;
}

.contact .php-email-form input[type="text"],
.contact .php-email-form input[type="email"] {
  padding: 10px 15px;
}

.contact .php-email-form textarea {
  padding: 12px 15px;
}

.contact .php-email-form button[type="submit"] {
  background: #4154f1;
  border: 0;
  padding: 10px 30px;
  color: #fff;
  transition: 0.4s;
  border-radius: 4px;
}

.contact .php-email-form button[type="submit"]:hover {
  background: #5969f3;
}

@keyframes animate-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Blog
--------------------------------------------------------------*/
.blog {
  padding: 40px 0 20px 0;
}

.blog .entry {
  padding: 30px;
  margin-bottom: 60px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog .entry .entry-img {
  max-height: 440px;
  margin: -30px -30px 20px -30px;
  overflow: hidden;
}

.blog .entry .entry-title {
  font-size: 28px;
  font-weight: bold;
  padding: 0;
  margin: 0 0 20px 0;
}

.blog .entry .entry-title a {
  color: #012970;
  transition: 0.3s;
}

.blog .entry .entry-title a:hover {
  color: #4154f1;
}

.blog .entry .entry-meta {
  margin-bottom: 15px;
  color: #4084fd;
}

.blog .entry .entry-meta ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog .entry .entry-meta ul li + li {
  padding-left: 20px;
}

.blog .entry .entry-meta i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
}

.blog .entry .entry-meta a {
  color: #777777;
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog .entry .entry-content p {
  line-height: 24px;
}

.blog .entry .entry-content .read-more {
  -moz-text-align-last: right;
  text-align-last: right;
}

.blog .entry .entry-content .read-more a {
  display: inline-block;
  background: #4154f1;
  color: #fff;
  padding: 6px 20px;
  transition: 0.3s;
  font-size: 14px;
  border-radius: 4px;
}

.blog .entry .entry-content .read-more a:hover {
  background: #5969f3;
}

.blog .entry .entry-content h3 {
  font-size: 22px;
  margin-top: 30px;
  font-weight: bold;
}

.blog .entry .entry-content blockquote {
  overflow: hidden;
  background-color: #fafafa;
  padding: 60px;
  position: relative;
  text-align: center;
  margin: 20px 0;
}

.blog .entry .entry-content blockquote p {
  color: #444444;
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}

.blog .entry .entry-content blockquote::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: #012970;
  margin-top: 20px;
  margin-bottom: 20px;
}

.blog .entry .entry-footer {
  padding-top: 10px;
  border-top: 1px solid #e6e6e6;
}

.blog .entry .entry-footer i {
  color: #0d64fd;
  display: inline;
}

.blog .entry .entry-footer a {
  color: #013289;
  transition: 0.3s;
}

.blog .entry .entry-footer a:hover {
  color: #4154f1;
}

.blog .entry .entry-footer .cats {
  list-style: none;
  display: inline;
  padding: 0 20px 0 0;
  font-size: 14px;
}

.blog .entry .entry-footer .cats li {
  display: inline-block;
}

.blog .entry .entry-footer .tags {
  list-style: none;
  display: inline;
  padding: 0;
  font-size: 14px;
}

.blog .entry .entry-footer .tags li {
  display: inline-block;
}

.blog .entry .entry-footer .tags li + li::before {
  padding-right: 6px;
  color: #6c757d;
  content: ",";
}

.blog .entry .entry-footer .share {
  font-size: 16px;
}

.blog .entry .entry-footer .share i {
  padding-left: 5px;
}

.blog .entry-single {
  margin-bottom: 30px;
}

.blog .blog-author {
  padding: 20px;
  margin-bottom: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog .blog-author img {
  width: 120px;
  margin-right: 20px;
}

.blog .blog-author h4 {
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 0px;
  padding: 0;
  color: #012970;
}

.blog .blog-author .social-links {
  margin: 0 10px 10px 0;
}

.blog .blog-author .social-links a {
  color: rgba(1, 41, 112, 0.5);
  margin-right: 5px;
}

.blog .blog-author p {
  font-style: italic;
  color: #b7b7b7;
}

.blog .blog-comments {
  margin-bottom: 30px;
}

.blog .blog-comments .comments-count {
  font-weight: bold;
}

.blog .blog-comments .comment {
  margin-top: 30px;
  position: relative;
}

.blog .blog-comments .comment .comment-img {
  margin-right: 14px;
}

.blog .blog-comments .comment .comment-img img {
  width: 60px;
}

.blog .blog-comments .comment h5 {
  font-size: 16px;
  margin-bottom: 2px;
}

.blog .blog-comments .comment h5 a {
  font-weight: bold;
  color: #444444;
  transition: 0.3s;
}

.blog .blog-comments .comment h5 a:hover {
  color: #4154f1;
}

.blog .blog-comments .comment h5 .reply {
  padding-left: 10px;
  color: #012970;
}

.blog .blog-comments .comment h5 .reply i {
  font-size: 20px;
}

.blog .blog-comments .comment time {
  display: block;
  font-size: 14px;
  color: #013ca3;
  margin-bottom: 5px;
}

.blog .blog-comments .comment.comment-reply {
  padding-left: 40px;
}

.blog .blog-comments .reply-form {
  margin-top: 30px;
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog .blog-comments .reply-form h4 {
  font-weight: bold;
  font-size: 22px;
}

.blog .blog-comments .reply-form p {
  font-size: 14px;
}

.blog .blog-comments .reply-form input {
  border-radius: 4px;
  padding: 10px 10px;
  font-size: 14px;
}

.blog .blog-comments .reply-form input:focus {
  box-shadow: none;
  border-color: #a0aaf8;
}

.blog .blog-comments .reply-form textarea {
  border-radius: 4px;
  padding: 10px 10px;
  font-size: 14px;
}

.blog .blog-comments .reply-form textarea:focus {
  box-shadow: none;
  border-color: #a0aaf8;
}

.blog .blog-comments .reply-form .form-group {
  margin-bottom: 25px;
}

.blog .blog-comments .reply-form .btn-primary {
  border-radius: 4px;
  padding: 10px 20px;
  border: 0;
  background-color: #012970;
}

.blog .blog-comments .reply-form .btn-primary:hover {
  background-color: #013289;
}

.blog .blog-pagination {
  color: #024ed5;
}

.blog .blog-pagination ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.blog .blog-pagination li {
  margin: 0 5px;
  transition: 0.3s;
}

.blog .blog-pagination li a {
  color: #012970;
  padding: 7px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blog .blog-pagination li.active,
.blog .blog-pagination li:hover {
  background: #4154f1;
}

.blog .blog-pagination li.active a,
.blog .blog-pagination li:hover a {
  color: #fff;
}

.blog .sidebar {
  padding: 30px;
  margin: 0 0 60px 20px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.blog .sidebar .sidebar-title {
  font-size: 20px;
  font-weight: 700;
  padding: 0 0 0 0;
  margin: 0 0 15px 0;
  color: #012970;
  position: relative;
}

.blog .sidebar .sidebar-item {
  margin-bottom: 30px;
}

.blog .sidebar .search-form form {
  background: #fff;
  border: 1px solid #ddd;
  padding: 3px 10px;
  position: relative;
}

.blog .sidebar .search-form form input[type="text"] {
  border: 0;
  padding: 4px;
  border-radius: 4px;
  width: calc(100% - 40px);
}

.blog .sidebar .search-form form button {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  background: none;
  font-size: 16px;
  padding: 0 15px;
  margin: -1px;
  background: #4154f1;
  color: #fff;
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
  line-height: 0;
}

.blog .sidebar .search-form form button i {
  line-height: 0;
}

.blog .sidebar .search-form form button:hover {
  background: #5465f2;
}

.blog .sidebar .categories ul {
  list-style: none;
  padding: 0;
}

.blog .sidebar .categories ul li + li {
  padding-top: 10px;
}

.blog .sidebar .categories ul a {
  color: #012970;
  transition: 0.3s;
}

.blog .sidebar .categories ul a:hover {
  color: #4154f1;
}

.blog .sidebar .categories ul a span {
  padding-left: 5px;
  color: #aaaaaa;
  font-size: 14px;
}

.blog .sidebar .recent-posts .post-item + .post-item {
  margin-top: 15px;
}

.blog .sidebar .recent-posts img {
  width: 80px;
  float: left;
}

.blog .sidebar .recent-posts h4 {
  font-size: 15px;
  margin-left: 95px;
  font-weight: bold;
}

.blog .sidebar .recent-posts h4 a {
  color: #012970;
  transition: 0.3s;
}

.blog .sidebar .recent-posts h4 a:hover {
  color: #4154f1;
}

.blog .sidebar .recent-posts time {
  display: block;
  margin-left: 95px;
  font-style: italic;
  font-size: 14px;
  color: #aaaaaa;
}

.blog .sidebar .tags {
  margin-bottom: -10px;
}

.blog .sidebar .tags ul {
  list-style: none;
  padding: 0;
}

.blog .sidebar .tags ul li {
  display: inline-block;
}

.blog .sidebar .tags ul a {
  color: #0257ee;
  font-size: 14px;
  padding: 6px 14px;
  margin: 0 6px 8px 0;
  border: 1px solid #d7e6ff;
  display: inline-block;
  transition: 0.3s;
}

.blog .sidebar .tags ul a:hover {
  color: #fff;
  border: 1px solid #4154f1;
  background: #4154f1;
}

.blog .sidebar .tags ul a span {
  padding-left: 5px;
  color: #a5c5fe;
  font-size: 14px;
}

/*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/
.footer {
  background: #f6f9ff;
  font-size: 16px;
}

.footer .footer-newsletter {
  padding: 50px 0;
  background: #f6f9ff;
  border-top: 1px solid #e1ecff;
}

.footer .footer-newsletter h4 {
  font-size: 24px;
  margin: 0 0 10px 0;
  padding: 0;
  line-height: 1;
  font-weight: 700;
  color: #012970;
}

.footer .footer-newsletter form {
  margin-top: 20px;
  background: #fff;
  padding: 6px 10px;
  position: relative;
  border-radius: 4px;
  border: 1px solid #e1ecff;
}

.footer .footer-newsletter form input[type="email"] {
  border: 0;
  padding: 8px;
  width: calc(100% - 140px);
}

.footer .footer-newsletter form input[type="submit"] {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  background: none;
  font-size: 16px;
  padding: 0 30px;
  margin: 3px;
  background: #4154f1;
  color: #fff;
  transition: 0.3s;
  border-radius: 4px;
}

.footer .footer-newsletter form input[type="submit"]:hover {
  background: #5969f3;
}

.footer .footer-top {
  background: white url(../img/footer-bg.png) no-repeat right top;
  background-size: contain;
  border-top: 1px solid #e1ecff;
  border-bottom: 1px solid #e1ecff;
}

@media (max-width: 992px) {
  .footer .footer-top {
    background-position: center bottom;
  }
}

.footer .footer-top .footer-info {
  margin-bottom: 30px;
}

.footer .footer-top .footer-info .logo {
  line-height: 0;
  margin-bottom: 15px;
}

.footer .footer-top .footer-info .logo img {
  max-height: 55px;
  margin-right: 6px;
}

.footer .footer-top .footer-info .logo span {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #012970;
  font-family: "Cuprum", sans-serif;
  margin-top: 3px;
}

.footer .footer-top .footer-info p {
  font-size: 16px;
  line-height: 24px;
  margin-bottom: 0;
  font-family: "Cuprum", sans-serif;
}

.footer .footer-top .social-links a {
  font-size: 20px;
  display: inline-block;
  color: rgba(1, 41, 112, 0.5);
  line-height: 0;
  margin-right: 10px;
  transition: 0.3s;
}

.footer .footer-top .social-links a:hover {
  color: #0dcaf0;
}

.pricing .social-links a {
  font-size: 20px;
  display: inline-block;
  color: rgba(1, 41, 112, 0.5);
  line-height: 0;
  margin-right: 10px;
  transition: 0.3s;
}

.pricing .social-links a:hover {
  color: #0dcaf0;
}

.footer .footer-top h4 {
  font-size: 16px;
  font-weight: bold;
  color: #012970;
  text-transform: uppercase;
  position: relative;
  padding-bottom: 12px;
}

.footer .footer-top .footer-links {
  margin-bottom: 30px;
  font-size: 16px;
}

.footer .footer-top .footer-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-top .footer-links ul i {
  padding-right: 2px;
  color: #d0d4fc;
  font-size: 12px;
  line-height: 0;
}

.footer .footer-top .footer-links ul li {
  padding: 10px 0;
  display: flex;
  align-items: center;
}

.footer .footer-top .footer-links ul li:first-child {
  padding-top: 0;
}

.footer .footer-top .footer-links ul a {
  color: #013289;
  transition: 0.3s;
  display: inline-block;
  line-height: 17px;
}

.footer .footer-top .footer-links ul a:hover {
  color: #0dcaf0;
}

.footer .footer-top .footer-contact p {
  line-height: 26px;
  color: #013289;
  font-size: 16px;
}

.footer .copyright {
  text-align: center;
  padding-top: 30px;
  color: #012970;
}

.footer .credits {
  padding-top: 10px;
  text-align: center;
  font-size: 13px;
  color: #012970;
}

.kbeyyaznicbg {
  background-color: #181c23;
}

.kbeyyazndisbg {
  background-color: #232b38;
}

.kbeyyazn15 {
  font-family: "Cuprum", sans-serif;
  color: #e4e4e7;
  font-size: 15px;
  line-height: 1.7;
}

.kbeyyazn {
  font-family: "Cuprum", sans-serif;
  color: #e4e4e7;
  font-size: 17px;
  line-height: 1.7;
}

.pad10 {
  padding: 10px;
}

.padal50 {
  padding: 50px;
}

.padale50 {
  padding: 10px 20px 20px 20px;
}

.pad20 {
  padding: 10px 20px 20px 20px;
}

.pad50 {
  padding: 10px 50px 50px 50px;
}

.pad60 {
  padding: 10px 60px 60px 60px;
}

.pade20 {
  margin: 0 -10px 0 -10px;
}

.margie20 {
  margin: 0 20px 0 10px;
}

.margi10 {
  margin: 0 20px 10px 20px;
}

.margi20 {
  margin: 5px 20px 5px 10px;
}

.margi510105 {
  margin: 5px 10px 5px 5px;
}

@media screen and (max-width: 600px) {
  .nomobile {
    visibility: hidden !important;
    clear: both;
    float: right;
    margin: 5px auto;
    width: 22%;
    height: auto;
    display: none;
  }

  /* Header logosu: .nomobile mobilde tamamen gizliyordu, bu da
     header'da marka görünürlüğünü kaybettiriyordu. Logoyu küçültülmüş
     halde geri getir. */
  #header .nomobile {
    visibility: visible !important;
    display: block !important;
    float: none;
    width: auto;
    margin: 0;
  }

  #header .nomobile .logosol {
    width: 130px;
    margin-top: 0 !important;
  }
}

@media screen and (min-width: 992px) {
  .nobilg {
    display: none !important;
    visibility: hidden !important;
  }
}

.widt {
  width: 293px !important;
  height: 90px !important;
}

.widt1 {
  width: 20% !important;
}

.widt2 {
  width: 80% !important;
}

.bgc232b38 {
  background-color: #232b38 !important;
}

.bgc3d5975 {
  background-color: #ffffff !important;
}

.bg-zemin {
  background-color: #232b38 !important;
}

.bg-alt-bar {
  background-color: #252730 !important;
}

.bg-ic {
  background-color: #181c23 !important;
}

.bg-cool-kirmizi {
  background-color: #e81932 !important;
}

.mt-5 {
  margin-top: 5px !important;
}

.mt-10 {
  margin-top: 10px !important;
}

.mt-15 {
  margin-top: 15px !important;
}

.mt-20 {
  margin-top: 20px !important;
}

.mt-25 {
  margin-top: 25px !important;
}

.mt-30 {
  margin-top: 30px !important;
}
.mt-40 {
  margin-top: 40px !important;
}
.mt-75 {
  margin-top: 75px !important;
}
.mt-100 {
  margin-top: 100px !important;
}
.mt-145 {
  margin-top: 145px !important;
}

.mt-header-offset {
  margin-top: 177px !important;
}

@media (max-width: 992px) {
  .mt-header-offset {
    margin-top: 88px !important;
  }
}

.mt-157 {
  margin-top: 157px !important;
}

.mt-170 {
  margin-top: 170px !important;
}

.mt-185 {
  margin-top: 185px !important;
}

@media (max-width: 792px) {
  .mt-185 {
    margin-top: 50px !important;
  }
}

.mt-200 {
  margin-top: 200px !important;
}

@media (max-width: 792px) {
  .mt-200 {
    margin-top: 100px !important;
  }
}

.mt-205 {
  margin-top: 205px !important;
}

.mte-1 {
  margin-top: -1px !important;
}

.mte-5 {
  margin-top: -5px !important;
}

.mte-7 {
  margin-top: -7px !important;
}

.mte-10 {
  margin-top: -10px !important;
}

.mte-11 {
  margin-top: -11px !important;
}

.mte-12 {
  margin-top: -12px !important;
}

.mte-15 {
  margin-top: -15px !important;
}

.mte-16 {
  margin-top: -16px !important;
}

.mte-18 {
  margin-top: -18px !important;
}

.mte-20 {
  margin-top: -20px !important;
}

.mte-30 {
  margin-top: -30px !important;
}

.mte-32 {
  margin-top: -32px !important;
}

.mte-40 {
  margin-top: -40px !important;
}

.mte-45 {
  margin-top: -45px !important;
}

.mte-50 {
  margin-top: -50px !important;
}

.mte-70 {
  margin-top: -70px !important;
}

.mte-80 {
  margin-top: -80px !important;
}

.mb-10 {
  margin-bottom: 10px !important;
}

.mb-5 {
  margin-bottom: 5px !important;
}

.mb-15 {
  margin-bottom: 15px !important;
}

.mb-20 {
  margin-bottom: 20px !important;
}

.mbe-1 {
  margin-bottom: -1px !important;
}

.mbe-5 {
  margin-bottom: -5px !important;
}

.mbe-10 {
  margin-bottom: -10px !important;
}

.mbe-15 {
  margin-bottom: -15px !important;
}

.mbe-20 {
  margin-bottom: -20px !important;
}

.mbe-25 {
  margin-bottom: -25px !important;
}

.mbe-30 {
  margin-bottom: -30px !important;
}

.mbe-55 {
  margin-bottom: -55px !important;
}

.mbe-45 {
  margin-bottom: -45px !important;
}

.mbe-67 {
  margin-bottom: -67px !important;
}

.mbe-97 {
  margin-bottom: -97px !important;
}

.mbe-113 {
  margin-bottom: -113px !important;
}

.mbe-320 {
  margin-bottom: -320px !important;
}

.ml-10 {
  margin-left: 15px !important;
}

.ml-12 {
  margin-left: 12px !important;
}

.ml-25 {
  margin-left: 25px !important;
}

.ml-30 {
  margin-left: 30px !important;
}

.mle-3 {
  margin-left: -3px !important;
}

.mle-4 {
  margin-left: -4px !important;
}

.mle-5 {
  margin-left: -5px !important;
}

.mle-8 {
  margin-left: -8px !important;
}

.mle-10 {
  margin-left: -10px !important;
}

.ml-12 {
  margin-left: 12px !important;
}

.ml-13 {
  margin-left: 13px !important;
}

.mle-12 {
  margin-left: -12px !important;
}
.mle-27 {
  margin-left: -27px !important;
}
.mle-37 {
  margin-left: -37px !important;
}
.ml-15 {
  margin-left: 15px !important;
}

.ml-20 {
  margin-left: 20px !important;
}

.mr-5 {
  margin-right: 5px !important;
}

.mr-10 {
  margin-right: 10px !important;
}

.mr-12 {
  margin-right: 12px !important;
}

.mr-15 {
  margin-right: 15px !important;
}

.mr-20 {
  margin-right: 20px !important;
}

.mr-30 {
  margin-right: 30px !important;
}

.mre-10 {
  margin-right: -10px !important;
}

.mre-20 {
  margin-right: -20px !important;
}

.mre-30 {
  margin-right: -30px !important;
}

.width-5 {
  width: 5px !important;
}

.width-55 {
  width: 55px !important;
}

.padt10 {
  vertical-align: bottom;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: auto;
  margin-top: 5px !important;
}

.beyazbaslik {
  font-family: "Cuprum", sans-serif;
  color: #ffffff;
  font-size: 22px;
  font-weight: 500;
  background-color: #e81932;
  display: inline-block;
  width: auto;
  margin-bottom: -8px;
  padding: 6px 12px 3px 12px;
}

.turbaslik {
  font-family: "Cuprum", sans-serif;
  color: #ffffff;
  font-size: 22px;
  font-weight: 500;
  background-color: #fd7e14;
  display: inline-block;
  width: auto;
  margin-bottom: -8px;
  padding: 6px 12px 3px 12px;
}

.lacibaslik {
  font-family: "Cuprum", sans-serif;
  color: #ffffff;
  font-size: 22px;
  font-weight: 500;
  background-color: #cb0020;
  display: inline-block;
  width: auto;
  margin-bottom: -8px;
  padding: 6px 12px 3px 12px;
}

.siybas20 {
  font-family: "Cuprum", sans-serif;
  color: #212529;
  font-size: 20px;
  font-weight: 700;
}

.siybas20-500 {
  font-family: "Cuprum", sans-serif;
  color: #495057;
  font-size: 20px;
  font-weight: 500;
}

.siybas20-400 {
  font-family: "Cuprum", sans-serif;
  color: #495057;
  font-size: 17px;
  font-weight: 400;
}

.turbas20-500 {
  font-family: "Cuprum", sans-serif;
  color: #fd7e14;
  font-size: 20px;
  font-weight: 500;
}

.exkirbas20-500 {
  font-family: "Cuprum", sans-serif;
  color: #cb0020;
  font-size: 20px;
  font-weight: 500;
}

.exkirbas16-500 {
  font-family: "Cuprum", sans-serif;
  color: #cb0020;
  font-size: 16px;
  font-weight: 500;
}

.exkirbas17-500 {
  font-family: "Cuprum", sans-serif;
  color: #cb0020;
  font-size: 17px;
  font-weight: 500;
}

.ex012970bas16-500 {
  font-family: "Cuprum", sans-serif;
  color: #012970;
  font-size: 16px;
  font-weight: 500;
}

.ex012970bas18-500 {
  font-family: "Cuprum", sans-serif;
  color: #012970;
  font-size: 18px;
  font-weight: 500;
}

.exgraybas17-500 {
  font-family: "Cuprum", sans-serif;
  color: #adb5bd;
  font-size: 17px;
  font-weight: 500;
}

.exlacibas17-400 {
  font-family: "Cuprum", sans-serif;
  color: #2c2872;
  font-size: 20px;
  font-weight: 400;
}

.turbas-mmenu {
  font-family: "Cuprum", sans-serif;
  color: #fd7e14;
  font-size: 17px;
  font-weight: 500;
  text-align: center;
}

.siybas-mmenu {
  font-family: "Cuprum", sans-serif;
  color: #212121;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
}

.siybas-mmenu:hover {
  font-family: "Cuprum", sans-serif;
  color: #c00;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
}
.siybasn {
  font-family: "Cuprum", sans-serif;
  color: #2b2c30;
  font-size: 17px;
}

.siybasexi {
  font-family: "Cuprum", sans-serif;
  color: #212529;
  font-size: 24px;
  font-weight: 700;
  max-width: 99%;
}

.siybasnexi {
  font-family: "Cuprum", sans-serif;
  color: #212529;
  font-size: 17px;
  margin-left: 12px !important;
  max-width: 99%;
}

.siybas {
  font-family: "Cuprum", sans-serif;
  color: #212529;
  font-size: 18px;
  font-weight: 700;
}
.siybassoft {
  font-family: "Cuprum", sans-serif;
  color: #504f4f;
  font-size: 18px;
  font-weight: 700;
}
.kahbas20 {
  font-family: "Cuprum", sans-serif;
  color: #664d03;
  font-size: 20px;
  font-weight: 700;
}
.kirabas {
  font-family: "Cuprum", sans-serif;
  color: #e81932;
  font-size: 18px;
  font-weight: 700;
}
.mavibas {
  font-family: "Cuprum", sans-serif;
  color: #0060ad;
  font-size: 18px;
  font-weight: 700;
}
.mavibas24 {
  font-family: "Cuprum", sans-serif;
  color: #0060ad;
  font-size: 24px;
  font-weight: 700;
}
.kahbas20u {
  font-family: "Cuprum", sans-serif;
  color: #664d03;
  font-size: 20px;
  font-weight: 700;
  text-decoration: underline;
}

.kahbas {
  font-family: "Cuprum", sans-serif;
  color: #664d03;
  font-size: 18px;
  font-weight: 700;
}

.boxsi {
  border: 1px solid #e9ecef;
  box-shadow: 0 5px 5px -5px #ced4da;
  padding: 6px 12px 3px 12px;
  margin: 60px 12px 63px 12px;
}

.boxsiua1 {
  margin: 0px 0px -70px 0px;
}

.boxsiua2 {
  margin: 10px 0px 0px 0px;
}

.boxse {
  width: 1200px;
  height: auto;
  margin-left: 13px !important;
}

.ins {
  background-color: #f2f5fc;
}

.cciv {
  background-color: #ffffff;
}

.widhe {
  width: auto;
  height: 12px;
}

.widre {
  width: 500px;
  height: auto;
}

.widauto {
  width: 1300px;
  height: auto;
}

.satbir {
  background-color: #f8f9fa;
}

.fc0060ad {
  font-family: "Cuprum", sans-serif;
  text-align: center;
  margin: 5px 0 0 0;
  color: #0060ad !important;
}

.fc02 {
  font-size: 20px;
  font-weight: 500;
}

.fc002 {
  margin: 5px 0 0 0;
  padding: 5px;
}

.mavibaslik {
  font-family: "Cuprum", sans-serif;
  color: #00aff0;
  font-size: 22px;
  font-weight: bold;
}

.mavibaslik20 {
  font-family: "Cuprum", sans-serif;
  color: #00aff0;
  font-size: 20px;
  font-weight: 600;
}

.mavibasliks {
  font-family: "Cuprum", sans-serif;
  color: #00aff0;
  font-size: 18px;
  font-weight: 700;
}

.kaahvekbaslik {
  font-family: "Cuprum", sans-serif;
  color: #583c06;
  font-size: 20px;
  font-weight: 500;
}

.yesilbaslik {
  font-family: "Cuprum", sans-serif;
  color: #008000;
  font-size: 20px;
  font-weight: 600;
}

.ctext16 {
  font-family: "Cuprum", sans-serif;
  font-size: 16px;
}

.ctext18a {
  font-family: "Cuprum", sans-serif;
  font-size: 16px;
}

.ctext18 {
  font-family: "Cuprum", sans-serif;
  font-size: 18px;
  margin-right: 250px;
}

.ctext18600 {
  font-family: "Cuprum", sans-serif;
  font-size: 18px;
  font-weight: 600;
}

.klaaci {
  color: #0a095f;
}

.softci {
  color: #bdbdc7;
}

.kirbassli {
  color: #9b2822;
  font-weight: 700;
}

.klaacib {
  color: #0a095f;
  font-weight: 700;
}
.klaacibkk {
  font-family: "Cuprum", sans-serif;
  font-size: 14px;
  color: #0a095f;
  font-weight: 500;
}
.klaacibb {
  font-family: "Cuprum", sans-serif;
  font-size: 17px;
  color: #0a095f;
  font-weight: 700;
}

.kirmmizi {
  color: #e81932;
  font-weight: 700;
}

.kirmmizisize {
  color: #e81932;
  font-weight: 500;
  width: 12px;
  height: 12px;
}

.yessil {
  color: #0d9308;
  font-weight: 400;
}

.kaahve {
  color: #583c06;
}

.kaahve-20-500 {
  color: #583c06;
  font-size: 20px;
  font-weight: 500;
}

.kaahveb-500 {
  color: #583c06;
  font-weight: 500;
}

.kaahveb {
  color: #583c06;
  font-weight: 700;
}

.kaahvek {
  color: #adb5bd;
  font-weight: 300;
}

.kaahvebb {
  color: #a52a2a;
  font-weight: 700;
}

.laaci {
  color: #140e68;
}

.laacib {
  color: #140e68;
  font-weight: 700;
}

@media (min-width: 992px) {
  .postsi {
    overflow: hidden;
    -webkit-box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.24);
    box-shadow: 0px 0px 2px 0px rgba(0, 0, 0, 0.24);
    border-radius: 4px;
  }
}

@media (min-width: 992px) {
  .postsip {
    margin-left: auto;
    margin-right: auto;
    padding-top: 10px;
    padding-left: 20px;
    padding-right: 20px;
    box-sizing: content-box;
  }
}

.yohaki {
  font-family: "Oswald", sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  color: #bdb76b;
  font-weight: 500;
  margin-bottom: 5px;
}

.yohakin {
  font-family: "Oswald", sans-serif;
  font-size: 16px;
  color: #bdb76b;
  font-weight: 500;
  margin-bottom: 5px;
}

.yohakinmavi {
  font-family: "Oswald", sans-serif;
  font-size: 16px;
  color: #00aff0;
  font-weight: 500;
  margin-bottom: 5px;
}

.yohakik {
  font-family: "Oswald", sans-serif;
  font-size: 14px;
  color: #bdb76b;
  font-weight: 500;
}

.Amiri2a {
  font-family: "Oswald", sans-serif;
  color: chocolate;
  font-size: 24px;
  line-height: 8px;
  font-weight: 700;
}

.portakal {
  color: #f1c40f;
}

.bgcl001 {
  border-color: #f5f5f5 !important;
}

.bocl001 {
  border-color: #f5f5f5 !important;
  border-bottom: 1px solid #eee;
  border-radius: 4px;
}

.bgcl002 {
  border-color: #f5eeee !important;
}

.borl {
  border: none !important;
}
.padgenislik {
  padding-left: 10px !important;
  padding-right: 30px !important;
}
.padsamenu {
  padding: 10px !important;
  background-color: #fffffa;
}
@media (max-width: 792px) {
  .padgenislik {
    padding-left: 15px !important;
    padding-right: 12px !important;
  }
}
@media (max-width: 792px) {
  .padsolsa {
    padding-left: 15px !important;
    padding-right: 12px !important;
  }
}
.big {
  font-size: 60px;
}

.tbbgrenk1 {
  background-color: #4472c4;
}

.tbbgrenk2 {
  background-color: #d9e1f2;
}

.bu33 {
  width: 40%;
}

.bu3-1 {
  width: 34%;
}

.bu3-2 {
  width: 33%;
}

.bu3-3 {
  width: 33%;
}

.bu67 {
  width: 60%;
}
.Xtable {
  border-collapse: collapse;
  width: 100%;
}

.Xtable th,
.Xtable td {
  text-align: left;
  padding: 1px 1px 1px 5px;
}

.Xtable tr:nth-child(even) {
  background-color: #d9e1f2;
}

@media (max-width: 792px) {
  .krub {
    padding-left: 100px !important;
  }
}

.y232b38 {
  font-family: "Cuprum", sans-serif;
  color: #232b38;
  font-size: 72px;
  font-weight: 500;
}

.y232b38b {
  font-family: "Cuprum", sans-serif;
  color: #232b38;
  font-size: 72px;
  font-weight: 700;
}
.boy14 {
  width: 10px;
  height: auto;
}

.yukss {
  font-family: "Cuprum", sans-serif;
  color: #ffffff;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  width: auto;
  height: 50px;
  background-color: #d90000;
}

.yukss18 {
  font-family: "Cuprum", sans-serif;
  color: #ffffff;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  width: auto;
  height: 50px;
  background-color: #d90000;
}

.yukss2 {
  font-family: "Cuprum", sans-serif;
  color: #ffffff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  width: auto;
  height: 35px;
  background-color: #002696;
}

.yaziort {
  text-align: center;
}
.header .search-bar {
  min-width: 360px;
  padding: 0 20px;
}

@media (max-width: 1199px) {
  .header .search-bar {
    position: fixed;
    top: 50px;
    left: 0;
    right: 0;
    padding: 20px;
    box-shadow: 0px 0px 15px 0px rgba(1, 41, 112, 0.1);
    background: white;
    z-index: 9999;
    transition: 0.3s;
    visibility: hidden;
    opacity: 0;
  }

  .header .search-bar-show {
    top: 60px;
    visibility: visible;
    opacity: 1;
  }
}

.header .search-form {
  width: 70%;
}

.header .search-form input {
  border: 0;
  font-size: 14px;
  color: #012970;
  border: 1px solid rgba(1, 41, 112, 0.2);
  padding: 7px 38px 7px 8px;
  border-radius: 3px;
  transition: 0.3s;
  width: 100%;
}

.header .search-form input:focus,
.header .search-form input:hover {
  outline: none;
  box-shadow: 0 0 10px 0 rgba(1, 41, 112, 0.15);
  border: 1px solid rgba(1, 41, 112, 0.3);
}

.header .search-form button {
  border: 0;
  padding: 0;
  margin-left: -30px;
  background: none;
}

.header .search-form button i {
  color: #012970;
}

.ex-select {
  border: 1px solid #dee2e6;
  font-family: "Cuprum", sans-serif;
  font-size: 15px;
  font-weight: 500;
  height: 35px;
  width: 200px;
  color: #212121;
  line-height: 30px;
  padding: 0 10px;
  margin-bottom: 3px;
  background-color: #ffffff;
  cursor: pointer;
}

.card {
  --bs-card-border-color: #eeecec !important;
}

.sole25 {
  font-style: normal;
}

@media (max-width: 792px) {
  .sole25 {
    padding-left: 35px !important;
  }
}

.altgolge {
  width: 1140px;
  padding: 0;
  text-align: center;
  background: white;
  -webkit-box-shadow:
    0 0 0 4px white,
    0 6px 4px black;
  -moz-box-shadow:
    0 0 0 4px white,
    0 6px 4px black;
  box-shadow:
    0 0 0 4px white,
    0 1px 1px black;
}

.logosol {
  width: 265px;
  height: auto;
  margin-top: 15px !important;
}

#header .nomobile {
  width: auto;
  flex: 0 0 auto;
}

.imgtepede {
  vertical-align: text-top;
}

.ikonik {
  width: 60px;
  height: auto;
}

.ikonikyazi {
  color: #232b38;
  font-size: 16px !important;
  font-weight: 500;
}

/*--------------------------------------------------------------
# Utility Bar (top contact strip)
--------------------------------------------------------------*/
.util-bar {
  background: #012970;
  color: #eef1fb;
  font-size: 13px;
  font-family: "Cuprum", sans-serif;
}

.util-bar .container-fluid {
  min-height: 34px;
  padding-top: 6px;
  padding-bottom: 6px;
}

@media (max-width: 991px) {
  .util-bar {
    display: none;
  }
}

.util-bar a {
  color: #eef1fb;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.util-bar a:hover {
  color: #ffffff;
  font-weight: 400;
  text-decoration: underline;
}

.util-bar i {
  font-size: 14px;
}

.util-bar .util-soon {
  color: rgba(238, 241, 251, 0.55);
  pointer-events: none;
  cursor: default;
  position: relative;
}

.util-bar .util-soon:hover {
  color: rgba(238, 241, 251, 0.55);
  text-decoration: none;
}

.util-bar .util-soon-tag {
  font-size: 10px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  background: rgba(238, 241, 251, 0.18);
  border-radius: 3px;
  padding: 1px 5px;
  margin-left: 2px;
}

.util-bar .util-social a {
  display: inline-flex;
  margin-left: 12px;
}

@media (max-width: 991px) {
  .util-bar .util-hide-mobile {
    display: none !important;
  }
}

/*--------------------------------------------------------------
# CTA button
--------------------------------------------------------------*/
.btn-exen {
  padding: 12px 28px;
  border-radius: 4px;
  background: #012970;
  color: #fff;
  font-family: "Cuprum", sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.5px;
  transition: 0.3s;
}

.btn-exen:hover {
  background: #d90000;
  color: #fff;
}

.btn-exen i {
  transition: 0.3s;
}

.btn-exen:hover i {
  transform: translateX(4px);
}

/*--------------------------------------------------------------
# Product Badges & Spec Chips
--------------------------------------------------------------*/
.badge-new {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  background: #d90000;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 10px;
  border-radius: 3px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(217, 0, 0, 0.35);
}

.spec-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  padding: 0 12px 16px;
  margin: 0;
  list-style: none;
}

.spec-chips li {
  background: #f4f6fb;
  color: #012970;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 20px;
  border: 1px solid rgba(1, 41, 112, 0.12);
}

/*--------------------------------------------------------------
# Solutions (trade) tiles
--------------------------------------------------------------*/
.solutions .tile {
  display: block;
  position: relative;
  height: 100%;
  padding: 28px 20px;
  text-align: center;
  background: #012970;
  border-radius: 6px;
  color: #fff;
  overflow: hidden;
  transition: 0.3s;
}

.solutions .tile i {
  font-size: 34px;
  color: #fff;
  display: block;
  margin-bottom: 12px;
}

.solutions .tile h4 {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  margin: 0 0 4px;
}

.solutions .tile span {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
}

.solutions .tile:hover {
  background: #d90000;
  transform: translateY(-4px);
  box-shadow: 0 10px 25px rgba(217, 0, 0, 0.25);
}

.solutions .tile:hover span {
  color: rgba(255, 255, 255, 0.9);
}

/*--------------------------------------------------------------
# İletişim sayfası (bilgi paneli + form)
--------------------------------------------------------------*/
.contact-panel-box {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(1, 41, 112, 0.1);
}

.contact-panel-info {
  background: #012970;
  color: #fff;
  padding: 40px;
}

.contact-panel-info h3 {
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 20px 0 6px;
}

.contact-panel-info h3:first-child {
  margin-top: 0;
}

.contact-panel-info p,
.contact-panel-info a {
  color: rgba(255, 255, 255, 0.9);
}

.contact-panel-info a:hover {
  color: #fff;
  text-decoration: underline;
}

.contact-panel-form {
  background: #fff;
  padding: 40px;
}

.spec-table tr:nth-child(odd) td {
  background: #f5f7fb;
}

.spec-table tr:nth-child(even) td {
  background: #fff;
}

.spec-table td {
  padding: 10px 14px;
}

.contact-panel-protan-logo {
  max-width: 130px;
  margin-top: 24px;
  padding: 10px 14px;
  background: #fff;
  border-radius: 6px;
}

.contact-panel-form h3 {
  color: #012970;
  font-weight: 700;
  margin-bottom: 20px;
}

@media (max-width: 767px) {
  .contact-panel-box {
    grid-template-columns: 1fr;
  }

  .contact-panel-info,
  .contact-panel-form {
    padding: 28px 20px;
  }
}

/*--------------------------------------------------------------
# Site Search overlay
--------------------------------------------------------------*/
.exen-search-wrap {
  position: relative;
}

/* Tam genişlik temada logo ile menü arasında çok büyük bir boşluk,
   menüyle arama kutusu arasında ise hiç boşluk kalmıyordu (ikisi de
   aynı satırda "justify-content: space-between" ile sağa yaslanan tek
   bir blok halindeydi). Menüyü logoya yaklaştırıp arama kutusunu kendi
   içinde sağa itiyoruz; ikisi arasında doğal bir boşluk oluşuyor. */
#header .container-fluid.container-xl.d-flex.justify-content-between:has(.navbar) {
  justify-content: flex-start !important;
  gap: 40px;
}

@media (min-width: 1201px) {
  #header .navbar {
    flex: 1;
  }

  /* navbar iki çocuğa (ul + gizli mobil hamburger ikonu) "space-between"
     ile ayrılıyor; ul kendi içeriği kadar dar kalınca aradaki boşluk
     navbar'ın en sağına değil, ul'nin bitişine (İletişim'in hemen
     yanına) gidiyordu. ul'yi navbar'ın tam genişliğine yayarak arama
     kutusundaki margin-left:auto'nun gerçekten en sağa itmesini sağlıyoruz. */
  #header .navbar > ul {
    flex: 1;
  }
}

@media (max-width: 1200px) {
  /* Mobilde nav artık yalnızca hamburger ikonunu taşıyor (menü ayrı bir
     panel); flex:1 ile büyümesin, arama kutusunun hemen yanında, en
     sağda, aralarında boşluk olmadan otursun. */
  #header .navbar {
    flex: 0 0 auto;
    margin-left: 0 !important;
  }

  #header .container-fluid.container-xl.d-flex.justify-content-between:has(.navbar) {
    gap: 8px;
  }
}

#header .exen-search-wrap {
  margin-left: auto;
}

/* İletişim (veya menüdeki son öğe her ne ise) ile arama kutusu arasında
   en az birkaç piksel boşluk kalsın — .exen-search-wrap'ın kendi
   padding'i, margin-left:auto tarafından tamamen yutulduğu için önceki
   öğeye sabit bir margin-right veriyoruz. */
#header .navbar > ul > li:has(+ .exen-search-wrap) {
  margin-right: 4px;
}

.exen-search-panel {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 14px;
  min-width: 320px;
  padding: 12px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(1, 41, 112, 0.18);
  display: none;
  z-index: 9999;
}

.exen-search-panel.show {
  display: block;
}

.exen-search-panel input {
  width: 100%;
  border: 1px solid rgba(1, 41, 112, 0.2);
  border-radius: 4px;
  padding: 8px 10px;
  font-size: 14px;
  color: #012970;
}

.exen-search-panel input:focus {
  outline: none;
  border-color: #012970;
}

@media (max-width: 576px) {
  .exen-search-panel {
    position: fixed;
    top: 60px;
    left: 12px;
    right: 12px;
    margin-top: 0;
  }
}

.search-results {
  margin-top: 8px;
  max-height: 300px;
  overflow-y: auto;
  text-align: left;
  display: none;
  border-top: 1px solid #f0f1f5;
}

.search-results.show {
  display: block;
}

.search-results a {
  display: flex;
  flex-direction: column;
  padding: 10px 14px;
  border-bottom: 1px solid #f0f1f5;
  color: #012970;
}

.search-results a:last-child {
  border-bottom: none;
}

.search-results a:hover {
  background: #f4f6fb;
  font-weight: 500;
}

.search-results a small {
  color: #adb5bd;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.search-results .search-empty {
  padding: 14px;
  color: #adb5bd;
  font-size: 13px;
  text-align: center;
}

/*--------------------------------------------------------------
# Homepage video hero
--------------------------------------------------------------*/
.hero-video {
  position: relative;
  height: 70vh;
  min-height: 420px;
  max-height: 720px;
  overflow: hidden;
}

.hero-video-el {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: 1;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(1, 41, 112, 0.82) 0%, rgba(1, 41, 112, 0.45) 55%, rgba(1, 41, 112, 0.15) 100%);
  z-index: 2;
}

.hero-video-content {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  align-items: center;
}

.hero-video-content h1 {
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 14px;
}

.hero-video-content p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 18px;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
  .hero-video {
    height: 55vh;
    min-height: 340px;
  }

  .hero-video-content h1 {
    font-size: 28px;
  }
}

/*--------------------------------------------------------------
# Category cover banner
--------------------------------------------------------------*/
.category-banner {
  position: relative;
  height: 260px;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}

.category-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(1, 41, 112, 0.85) 0%, rgba(1, 41, 112, 0.35) 70%);
}

.category-banner .container {
  position: relative;
  z-index: 2;
}

.category-banner h1 {
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  margin: 0;
}

@media (max-width: 992px) {
  .category-banner {
    height: 180px;
  }

  .category-banner h1 {
    font-size: 24px;
  }
}

/*--------------------------------------------------------------
# Homepage solution tile with photo
--------------------------------------------------------------*/
.solutions .tile.tile-photo {
  padding: 0;
  overflow: hidden;
  position: relative;
  min-height: 180px;
  background-size: cover;
  background-position: center;
}

.solutions .tile.tile-photo .tile-photo-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1, 41, 112, 0.25) 0%, rgba(1, 41, 112, 0.85) 100%);
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.solutions .tile.tile-photo h4,
.solutions .tile.tile-photo span {
  position: relative;
}

/*--------------------------------------------------------------
# Ürün karşılaştırma
--------------------------------------------------------------*/
.compare-checkbox {
  display: flex;
  align-items: center;
  gap: 6px;
  justify-content: center;
  padding: 10px 0 16px;
  font-size: 13px;
  color: #555;
  cursor: pointer;
  user-select: none;
}

.compare-checkbox input {
  cursor: pointer;
}

.compare-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: -100px;
  background: #012970;
  color: #fff;
  padding: 12px 0;
  z-index: 1000;
  transition: bottom 0.3s ease;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
}

.compare-bar.show {
  bottom: 0;
}

.compare-bar-items {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.compare-bar-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 4px 12px 4px 4px;
  font-size: 13px;
}

.compare-bar-item img {
  width: 24px;
  height: 24px;
  object-fit: cover;
  border-radius: 50%;
  background: #fff;
}

.compare-bar #compareGoBtn.disabled {
  opacity: 0.5;
  pointer-events: none;
}

/*--------------------------------------------------------------
# Karşılaştırma tablosu sayfası
--------------------------------------------------------------*/
.compare-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.compare-table th,
.compare-table td {
  border: 1px solid #eef1fb;
  padding: 12px 14px;
  text-align: left;
  font-size: 14px;
  vertical-align: top;
}

.compare-table thead th {
  background: #012970;
  color: #fff;
  text-align: center;
}

.compare-table .compare-product-col img {
  max-width: 120px;
  display: block;
  margin: 0 auto 10px;
}

.compare-table .compare-spec-label {
  font-weight: 600;
  color: #012970;
  background: #f4f6fb;
  white-space: nowrap;
}

.compare-table td.text-center {
  text-align: center;
}

/* Sütunlar dar ekranda serbestçe küçülüp "İncele" butonunu iki satıra
   bölmesin diye taban genişlik veriyoruz; tablo bunun yerine yatay
   kaydırılıyor (üstteki overflow-x:auto sarmalayıcı sayesinde). */
.compare-table .compare-spec-label {
  min-width: 140px;
}

.compare-table .compare-product-col,
.compare-table td:not(.compare-spec-label) {
  min-width: 170px;
}

.compare-table td .btn-exen {
  display: inline-block;
  white-space: nowrap;
}

@media (max-width: 767px) {
  .compare-table th,
  .compare-table td {
    padding: 10px;
    font-size: 13px;
  }

  .compare-table td .btn-exen {
    padding: 8px 16px;
    font-size: 13px;
  }
}

/*--------------------------------------------------------------
# Görselli kategori mega menüsü (KATEGORİLER)
# Kategorilerin panelden yüklenen kapak görselini kullanır; eski
# temanın 50x50 sabit ikon kutucuklarının dinamik karşılığıdır.
--------------------------------------------------------------*/
.meganu li a {
  gap: 12px;
  padding: 8px 12px;
  overflow: hidden;
}

.meganu li a img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 4px;
  flex: 0 0 auto;
}

.meganu li a span {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: #012970;
}

.meganu li a:hover span {
  color: #d90000;
}

@media (max-width: 1200px) {
  /* Mobil menüde mega menü tek sütuna iner (navbar-mobile içinde). */
  .navbar-mobile .megamenu ul {
    display: block;
    width: auto;
  }

  .navbar-mobile .meganu li a {
    height: auto;
    background: transparent;
    border: 0;
  }

  .navbar-mobile .meganu li a img {
    width: 36px;
    height: 36px;
  }
}


/*--------------------------------------------------------------
# Kategori sayfası filtre paneli (sol sütun)
# Filtre grupları ürünlerin teknik özelliklerinden otomatik üretilir.
--------------------------------------------------------------*/
.filter-panel {
  font-size: 14px;
}

.filter-panel-head {
  margin-bottom: 16px;
}

.filter-count-badge {
  background: #d90000;
  color: #fff;
  border-radius: 10px;
  padding: 0 7px;
  font-size: 12px;
  margin-left: 6px;
}

.filter-group {
  background: #fff;
  border: 1px solid #eef1f7;
  border-radius: 6px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.filter-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: #012970;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f3f8;
}

.filter-clear {
  font-size: 12px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: #d90000;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: #eef2fb;
  border-radius: 14px;
  padding: 4px 10px;
  font-size: 12.5px;
  color: #012970;
}

.filter-chip:hover {
  background: #d90000;
  color: #fff;
}

.filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.filter-list-sub {
  margin: 4px 0 6px 12px;
  padding-left: 10px;
  border-left: 2px solid #eef1f7;
}

.filter-cat {
  display: block;
  padding: 5px 0;
  color: #4a5568;
}

.filter-cat:hover {
  color: #d90000;
}

.filter-cat.is-active {
  color: #012970;
  font-weight: 700;
}

.filter-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  color: #4a5568;
}

.filter-option:hover {
  color: #d90000;
}

.filter-option i {
  font-size: 14px;
  color: #b7c0d1;
  flex: 0 0 auto;
}

.filter-option.is-on {
  color: #012970;
  font-weight: 600;
}

.filter-option.is-on i {
  color: #d90000;
}

.filter-option-label {
  flex: 1 1 auto;
}

.filter-option-count {
  flex: 0 0 auto;
  font-size: 12px;
  color: #9aa5b8;
}

/* Ürün listesi üstündeki adet + sıralama çubuğu */
.product-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid #eef1f7;
}

.product-toolbar-count {
  font-size: 14px;
  color: #4a5568;
}

.product-toolbar-sort {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.product-toolbar-sort .form-select {
  width: auto;
  min-width: 150px;
}

.empty-result {
  text-align: center;
  padding: 40px 20px;
  color: #6b7280;
}

.empty-result p {
  margin-bottom: 16px;
}

@media (max-width: 991px) {
  /* Filtreler mobilde açılır panel olarak durur. */
  .filter-panel {
    margin-bottom: 8px;
  }
}

/*--------------------------------------------------------------
# İçerik blokları (banner / vitrin / serbest içerik)
# Konum ve kolon sayısı panelden yönetilir.
--------------------------------------------------------------*/
/* Genel amaçlı bloklar. Ana sayfanın tanıtım bölümleri (team / features /
   faq / portfolio / values / counts / clients) kendi bölüm boşluklarını
   kullandığı için bu kurallar yalnızca genel bloklara uygulanır. */
.block-banner,
.block-showcase,
.block-html {
  padding: 40px 0;
}

.block-banner .section-header,
.block-showcase .section-header,
.block-html .section-header {
  margin-bottom: 26px;
}

.banner-card {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  height: 100%;
  background: #fff;
  box-shadow: 0 0 30px rgba(1, 41, 112, 0.08);
  transition: 0.3s;
  color: inherit;
}

a.banner-card:hover {
  box-shadow: 0 6px 34px rgba(1, 41, 112, 0.16);
  transform: translateY(-3px);
}

.banner-card img {
  display: block;
  width: 100%;
  height: auto;
}

.banner-card-body {
  padding: 18px 20px;
}

.banner-card-body h3 {
  font-size: 20px;
  font-weight: 700;
  color: #012970;
  margin-bottom: 6px;
}

.banner-card-body p {
  font-size: 15px;
  color: #5b6579;
  margin-bottom: 12px;
}

.banner-card-body .banner-card-caption {
  font-size: 14px;
  line-height: 1.6;
}

/* Yazı alanı boşsa hiç yer kaplamasın; son öğenin alt boşluğu da kalksın. */
.banner-card-body:empty {
  display: none;
}

/* Yazısı olmayan kart, yanındaki yazılı karta uyup uzamasın:
   görselin altında boş beyaz alan kalmaz. */
.banner-card-plain {
  height: auto;
}

.banner-card-body > *:last-child {
  margin-bottom: 0;
}

.showcase-more {
  font-size: 14px;
  font-weight: 600;
  color: #d90000;
  white-space: nowrap;
}

.showcase-more:hover {
  color: #012970;
}

.block-html-body {
  color: #4a5568;
  line-height: 1.7;
}

@media (max-width: 767px) {
  /* Kolon sayısı ne olursa olsun mobilde kartlar alt alta iner. */
  .content-block {
    padding: 28px 0;
  }
}

/*--------------------------------------------------------------
# Sayfa kapak görseli (panelden sayfa bazında yüklenir)
--------------------------------------------------------------*/
.page-cover {
  position: relative;
  min-height: 240px;
  display: flex;
  align-items: center;
  background-size: cover;
  background-position: center;
}

.page-cover-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(1, 41, 112, 0.8) 0%, rgba(1, 41, 112, 0.35) 100%);
}

.page-cover .container {
  position: relative;
  z-index: 2;
}

.page-cover h1 {
  color: #fff;
  font-size: 38px;
  font-weight: 700;
  margin: 0;
}

@media (max-width: 767px) {
  .page-cover {
    min-height: 160px;
  }

  .page-cover h1 {
    font-size: 26px;
  }
}

/*--------------------------------------------------------------
# Servis merkezi kartları
--------------------------------------------------------------*/
.service-card {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 0 30px rgba(1, 41, 112, 0.08);
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: 0.3s;
}

.service-card:hover {
  box-shadow: 0 6px 34px rgba(1, 41, 112, 0.16);
}

.service-card-image {
  height: 170px;
  overflow: hidden;
  background: #f4f6fb;
}

.service-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-card-body {
  padding: 22px 24px;
  flex: 1 1 auto;
}

.service-card-body h5 {
  color: #012970;
  font-weight: 700;
  margin-bottom: 10px;
}

.service-card-body p {
  font-size: 14px;
}

.service-card-map {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #d90000;
}

.service-card-map:hover {
  color: #012970;
}

/*--------------------------------------------------------------
# Ürün kodu rozeti (ürün detay sayfası)
--------------------------------------------------------------*/
.product-code {
  display: inline-block;
  background: #eef2fb;
  border: 1px solid #dde4f4;
  border-radius: 5px;
  padding: 8px 16px;
  margin-bottom: 14px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: #012970;
}

/*--------------------------------------------------------------
# Ürün detay: video, avantajlar bölümü, benzer ürünler ızgarası
--------------------------------------------------------------*/
.product-video-trigger {
  position: relative;
  display: block;
  max-width: 320px;
  margin-top: 20px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(1, 41, 112, 0.1);
}

.product-video-trigger img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.3s;
}

.product-video-trigger:hover img {
  transform: scale(1.05);
}

.product-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: rgba(217, 0, 0, 0.92);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
}

.product-video-label {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 8px 12px;
  background: linear-gradient(0deg, rgba(1, 20, 58, 0.85), transparent);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

/* Ürün açıklaması: panelden girilen HTML/CSS aynen basılır. Site burada
   renk, yazı tipi ya da düzen zorlamaz — yalnızca üstteki bölümden boşluk
   bırakır; tasarımın tamamı panelde yazılan <style> tarafından belirlenir. */
.product-advantages {
  margin-top: 40px;
}

.grid-columns-toggle {
  display: inline-flex;
  border: 1px solid #dde4f4;
  border-radius: 6px;
  overflow: hidden;
}

.grid-columns-toggle button {
  border: none;
  background: #fff;
  color: #012970;
  font-size: 15px;
  padding: 7px 11px;
  line-height: 1;
  cursor: pointer;
  transition: 0.2s;
}

.grid-columns-toggle button + button {
  border-left: 1px solid #dde4f4;
}

.grid-columns-toggle button.is-active,
.grid-columns-toggle button:hover {
  background: #012970;
  color: #fff;
}

/* Benzer ürünler: mobilde 2, masaüstünde seçilen sütun sayısı kadar sığar. */
.related-products.row-cols-2 > * {
  padding-left: 8px;
  padding-right: 8px;
}

.card-hb-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0 15px 12px;
  padding: 8px 10px;
  border-radius: 4px;
  background: #ff6000;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.card-hb-btn:hover {
  background: #d90000;
  color: #fff;
}

/* Ürün kartları farklı en-boy oranlı görsellerle geliyor (poster/afiş
   tarzı ürün görselleri ile kullanım fotoğrafları bir arada); sabit
   yükseklik olmayınca kartlar birbirinden büyük/küçük görünüyordu. */
.compare-card img.card-img-top {
  aspect-ratio: 1 / 1;
  object-fit: contain;
  width: 100%;
  background: #fff;
}

/* Masaüstü/tablette daha geniş alan var; görseli kare kutuya sıkıştırıp
   etrafında boşluk bırakmak yerine kartın tam genişliğinde, kendi
   oranıyla (kırpılmadan) gösteriyoruz. Mobilde kart genişliği dar
   olduğu için (2'li ızgara) sabit kare + contain daha düzenli duruyor. */
@media (min-width: 768px) {
  .compare-card img.card-img-top {
    aspect-ratio: auto;
    height: auto;
  }
}

.related-products .compare-card-compact img.card-img-top {
  aspect-ratio: 1 / 1;
  object-fit: contain;
}

/* Kartlar aynı satırda eşit yükseklikte olsun; başlık/açıklama metni
   ne kadar uzun olursa olsun "Hepsiburada'da Satın Al" butonu ve
   karşılaştır kutusu tüm kartlarda aynı hizada kalsın. */
.compare-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.compare-card ul {
  flex: 1 0 auto;
}

.related-products .compare-card-compact ul {
  padding: 10px 8px 4px;
}

/* Benzer ürünler kartlarındaki kod/isim yazı boyutu kategori ve arama
   listelemesindeki kartlarla aynı olsun diye küçültme kaldırıldı. */

.related-products .compare-card-compact .card-hb-btn {
  margin: 0 8px 8px;
  padding: 6px 8px;
  font-size: 11px;
}

.related-products .compare-card-compact .compare-checkbox {
  font-size: 11px;
  padding: 6px 0 10px;
}

@media (max-width: 767px) {
  .grid-columns-toggle {
    display: none;
  }
}

/*--------------------------------------------------------------
# Dil değiştirici (üst şerit)
--------------------------------------------------------------*/
.util-lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-right: 14px;
}

.util-lang a {
  color: rgba(238, 241, 251, 0.65);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  padding: 2px 6px;
  border-radius: 3px;
}

.util-lang a:hover {
  color: #fff;
  text-decoration: none;
}

.util-lang a.is-active {
  color: #fff;
  background: rgba(255, 255, 255, 0.18);
}

/* Işık kutusunun koyu arka planı, saydam PNG ürün görsellerinin
   arkasından siyah olarak görünmesine sebep oluyordu; beyaza çeviriyoruz
   (GLightbox yalnızca ürün galerisinde kullanılıyor). */
.goverlay {
  background: #fff !important;
}

/*--------------------------------------------------------------
# Ürün galerisi (ürün detay)
# Ana görsel + küçük görsel şeridi; masaüstünde büyüteç,
# tıklayınca tam ekran ışık kutusu.
--------------------------------------------------------------*/
.product-gallery-stage {
  position: relative;
}

/* Ürün detayında ana görsel çok büyük geliyordu; kutuyu %25 küçültüp
   ortalıyoruz (küçük görsel şeridi tam genişlikte kalmaya devam eder). */
.product-gallery-stage,
.product-gallery-thumbs-row {
  max-width: 75%;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 991px) {
  .product-gallery-stage,
  .product-gallery-thumbs-row {
    max-width: 100%;
  }
}

.product-gallery-main {
  border-radius: 6px;
  overflow: hidden;
}

.product-gallery-frame {
  display: block;
  overflow: hidden;
  border-radius: 6px;
  cursor: zoom-in;
  background: #fff;
}

.product-gallery-frame img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.25s ease;
  will-change: transform;
}

/* Oklar ve sayaç yalnızca birden fazla görsel varken basılır. */
.product-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #012970;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 2px 12px rgba(1, 41, 112, 0.18);
  opacity: 0;
  transition: opacity 0.2s, background 0.2s;
}

.product-gallery-stage:hover .product-gallery-nav,
.product-gallery-nav:focus-visible {
  opacity: 1;
}

.product-gallery-nav:hover {
  background: #fff;
  color: #d90000;
}

.product-gallery-nav.swiper-button-disabled {
  opacity: 0;
  pointer-events: none;
}

.product-gallery-prev {
  left: 10px;
}

.product-gallery-next {
  right: 10px;
}

.product-gallery-counter {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(1, 20, 58, 0.66);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.product-gallery-expand {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #012970;
  font-size: 14px;
  line-height: 1;
  box-shadow: 0 2px 12px rgba(1, 41, 112, 0.18);
}

.product-gallery-expand:hover {
  background: #fff;
  color: #d90000;
}

.product-gallery-thumbs-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
}

.product-gallery-thumbs {
  flex: 1 1 auto;
  min-width: 0;
}

.product-gallery-thumbs-nav {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border: 1px solid #dde4f4;
  border-radius: 50%;
  background: #fff;
  color: #012970;
  font-size: 14px;
  line-height: 1;
  transition: 0.2s;
}

.product-gallery-thumbs-nav:hover {
  background: #012970;
  color: #fff;
}

.product-gallery-thumbs-nav.swiper-button-disabled {
  opacity: 0.3;
  pointer-events: none;
}

.product-gallery-thumbs .swiper-slide {
  border: 1px solid #e6e9f2;
  border-radius: 5px;
  overflow: hidden;
  cursor: pointer;
  opacity: 0.62;
  transition: opacity 0.2s, border-color 0.2s;
}

.product-gallery-thumbs .swiper-slide img {
  display: block;
  width: 100%;
  height: auto;
}

.product-gallery-thumbs .swiper-slide:hover {
  opacity: 1;
}

.product-gallery-thumbs .swiper-slide-thumb-active {
  opacity: 1;
  border-color: #d90000;
}

.product-gallery-hint {
  margin: 10px 0 0;
  font-size: 12px;
  color: #97a0b3;
}

/* Dokunmatik cihazda büyüteç yok; ipucu ve oklar da yer kaplamasın. */
@media (hover: none) {
  .product-gallery-frame {
    cursor: pointer;
  }

  .product-gallery-nav {
    display: none;
  }

  .product-gallery-hint {
    display: none;
  }
}

/* Tek görselli üründe ışık kutusunun ok düğmeleri görünmesin. */
.glightbox-container.is-single .gnext,
.glightbox-container.is-single .gprev {
  display: none;
}

/*--------------------------------------------------------------
# Ana sayfa bölümleri blok olarak basıldığında
# Daha önce tek bir bölümün içinde alt alta duran satırlar artık
# ayrı bloklar; kendi bölüm boşlukları olduğu için iç boşluklar sıfırlanır.
--------------------------------------------------------------*/
.content-block .feture-tabs,
.content-block .feature-icons {
  margin-top: 0;
}

/*--------------------------------------------------------------
# Bülten (yeniliklerden haberdar ol)
# Not: temada kullanılmayan bir ".footer .footer-newsletter" kalıbı
# zaten vardı (üstte, ~2360. satır) — açık zeminli o tasarımla
# çakışmasın diye buradaki kurallar onu tamamlıyor, geçersiz kılmıyor.
--------------------------------------------------------------*/
.footer .footer-newsletter p {
  color: #5b6579;
  font-size: 14px;
  margin-bottom: 0;
}

.newsletter-form-row {
  display: flex;
  gap: 10px;
}

.newsletter-input {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border-radius: 5px;
  border: 1px solid #dde4f4;
  background: #fff;
  color: #012970;
  font-size: 14px;
}

.newsletter-input::placeholder {
  color: #97a0b3;
}

.newsletter-input:focus {
  outline: none;
  border-color: #d90000;
}

.newsletter-form-row .btn-exen {
  white-space: nowrap;
}

.newsletter-consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  color: #5b6579;
  cursor: pointer;
}

.newsletter-consent input {
  margin-top: 3px;
  flex-shrink: 0;
}

.newsletter-kvkk-link {
  background: none;
  border: none;
  padding: 0;
  color: #012970;
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
}

.newsletter-alert {
  padding: 8px 14px;
  border-radius: 5px;
  font-size: 13px;
  margin-bottom: 10px;
}

.newsletter-alert-success {
  background: rgba(25, 135, 84, 0.12);
  color: #198754;
  border: 1px solid rgba(25, 135, 84, 0.3);
}

.newsletter-alert-error {
  background: rgba(217, 0, 0, 0.1);
  color: #d90000;
  border: 1px solid rgba(217, 0, 0, 0.25);
}

@media (max-width: 767px) {
  .newsletter-form-row {
    flex-direction: column;
  }
}

/*--------------------------------------------------------------
# Header tasarım seçenekleri (panelden seçilir)
# Hepsi, .breadcrumbs / .mt-header-offset'in beklediği sabit
# yükseklikle (masaüstü ~177px, mobil ~88px) uyumlu kalacak
# şekilde ayarlanmıştır.
--------------------------------------------------------------*/

/* Sade: iletişim şeridi yok, tek satır — kaybolan yükseklik dikey
   boşlukla telafi edilir. ":first-of-type" iç içe geçen .nomobile
   div'ini de eşleştirmesin diye doğrudan çocuk seçici kullanılıyor. */
.header-minimal > .container-fluid.container-xl {
  flex-wrap: nowrap;
  padding: 21px 0;
}

.header-minimal .nomobile {
  flex-shrink: 0;
}

.header-minimal-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-minimal-phone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  color: #012970;
  white-space: nowrap;
}

.header-minimal-phone i {
  color: #d90000;
}

@media (max-width: 992px) {
  .header-minimal > .container-fluid.container-xl {
    padding: 10px 0;
  }

  .header-minimal-actions {
    display: none !important;
  }
}

/* Ortalanmış logo: üç satırı sabit bütçeye sığdırmak için sıkılaştırılmış
   aralıklar. */
.header-centered {
  padding: 8px 0 6px;
}

.header-centered-logo-row {
  padding: 4px 0;
}

.header-centered-logo-row img.logosol {
  max-height: 46px;
}

.header-centered #navbar {
  margin-top: 4px !important;
  margin-bottom: 4px !important;
}

@media (max-width: 992px) {
  .header-centered-logo-row {
    display: none;
  }

  .header-centered {
    padding: 26px 0;
  }
}

/* Koyu şerit: util-bar yok, tüm bilgiler tek koyu satırda. */
.header-dark-bar {
  background: #012970;
  padding: 41px 0;
}

.header-dark-bar #navbar ul li a {
  color: rgba(255, 255, 255, 0.85);
}

.header-dark-bar #navbar ul li a:hover,
.header-dark-bar #navbar ul li.active > a {
  color: #fff;
}

.header-dark-bar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  color: rgba(255, 255, 255, 0.85);
}

.header-dark-bar-actions > a:first-child {
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}

.header-dark-bar-actions .util-social a {
  color: rgba(255, 255, 255, 0.7);
}

.header-dark-bar .mobile-nav-toggle {
  color: #fff;
}

@media (max-width: 992px) {
  .header-dark-bar {
    padding: 8px 0;
  }

  .header-dark-bar-actions {
    display: none !important;
  }
}

/* Vurgulu CTA: klasik yapı + sağda belirgin arama düğmesi. */
.header-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #d90000;
  color: #fff;
  padding: 10px 20px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  transition: 0.2s;
}

.header-cta-button i {
  font-size: 20px;
}

.header-cta-button small {
  display: block;
  font-size: 11px;
  font-weight: 500;
  opacity: 0.85;
}

.header-cta-button:hover {
  background: #012970;
  color: #fff;
}

/*--------------------------------------------------------------
# Servis: şehir listesi
--------------------------------------------------------------*/
.service-city-link {
  display: block;
  text-align: center;
  padding: 10px;
  background: #f4f6fb;
  border-radius: 4px;
  color: #012970;
  font-weight: 600;
  transition: 0.2s;
}

.service-city-link:hover {
  background: #012970;
  color: #fff;
}

/*--------------------------------------------------------------
# Teknoloji logoları: sürekli kayan (marquee) mod
--------------------------------------------------------------*/
.tech-marquee-viewport {
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent);
}

.tech-marquee-track {
  display: flex;
  width: max-content;
  animation: tech-marquee-scroll var(--tech-marquee-duration, 30s) linear infinite;
}

.tech-marquee-viewport:hover .tech-marquee-track {
  animation-play-state: paused;
}

.tech-marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.tech-marquee-item {
  flex-shrink: 0;
  padding: 0 40px;
  display: flex;
  align-items: center;
}

.tech-marquee-item img {
  max-height: 50px;
  width: auto;
}

@keyframes tech-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}