/*

TemplateMo 570 Chain App Dev

https://templatemo.com/tm-570-chain-app-dev

*/

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

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, div
pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q,
s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
figure, header, nav, section, article, aside, footer, figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- .grid-item ---- */

.grid-sizer,
.grid-item {
  width: 50%;
}

.grid-item {
  float: left;
}

.grid-item img {
  display: block;
  max-width: 100%;
}

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

.clearfix {
  display: inline-block;
}

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

* html .clearfix {
  height: 1%;
}

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

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

* {
  box-sizing: border-box;
}

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

a {
  text-decoration: none !important;
}

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

ul {
  margin-bottom: 0px;
}

p {
  font-size: 18px;
  line-height: 30px;
  font-weight: 300;
  color: #000000;
}

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


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

::selection {
  background: #4b8ef1;
  color: #fff !important;
}

::-moz-selection {
  background: #4b8ef1;
  color: #fff !important;
}

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

.section-heading {
  position: relative;
  z-index: 2;
}

.section-heading h4 {
  color: #2a2a2a;
  font-size: 30px;
  font-weight: 700;
  text-transform: capitalize;
  margin-bottom: 10px;
}

.section-heading h4 em {
  font-style: normal;
  color: #4b8ef1;
}

.section-heading img {
  width: 45px;
  height: 2px;
}

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

.show-up {
  position: relative;
  z-index: 2;
}

.white-button a {
  display: inline-block !important;
  padding: 10px 20px !important;
  color: #4b8ef1 !important;
  text-transform: capitalize;
  font-size: 15px;
  background-color: #fff;
  border-radius: 23px;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  transition: all .5s;
}

.white-button a i {
  margin-left: 5px;
  font-size: 18px;
}

.white-button a:hover {
  background-color: #4b8ef1;
  color: #fff !important;
}

.text-button a {
  font-size: 15px;
}

.text-button a i {
  margin-left: 5px;
  font-size: 14px;
  transition: all .3s;
}

.text-button a:hover i {
  margin-left: 8px;
}

.gradient-button a {
  display: inline-block !important;
  padding: 10px 20px !important;
  color: #fff !important;
  text-transform: capitalize;
  font-size: 15px;
  background: rgb(19,175,240);
  background: linear-gradient(105deg, rgba(91,104,235,1) 0%, rgba(40,225,253,1) 100%);
  border-radius: 23px;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  transition: all .5s;
}

.gradient-button a:hover {
  color: #fff !important;
  background: rgb(19,175,240);
  background: linear-gradient(105deg, rgba(91,104,235,1) 0%, rgba(40,225,253,1) 100%);
}

.border-button a {
  display: inline-block !important;
  padding: 10px 20px !important;
  color: #4b8ef1 !important;
  border: 1px solid #4b8ef1;
  text-transform: capitalize;
  font-size: 15px;
  display: inline-block;
  background-color: #fff;
  border-radius: 23px;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  transition: all .5s;
}

.border-button a:hover {
  background-color: #4b8ef1;
  color: #fff !important;
}


/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.background-header {
  background-color: #8b8b8b82 !important;
  height: 80px!important;
  border-bottom: none !important;
  position: fixed!important;
  top: 0px;
  left: 0px;
  right: 0px;
  box-shadow: 0px 5px 8px rgba(0,0,0,0.03);
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #fff;
}

.background-header .main-nav .nav li:hover a {
  color: #4b8ef1;
}

.background-header .nav li a.active {
  position: relative;
  color: #fff;
}

.background-header .nav li a.active:after {
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #4b8ef1;
  content: '';
  left: 50%;
  bottom: -20px;
  transform: translateX(-50%);
}

.background-header .nav li:last-child a.active:after {
  background-color: transparent;
}

.header-area {
  background-color: transparent;
  border-bottom: 1px solid rgba(42,42,42,0.2);
  position: absolute;
  left: 0px;
  right: 0px;
  z-index: 100;
  height: 100px;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

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

.header-area .main-nav .logo {
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.header-area .main-nav .logo {
    line-height: 100px;
    float: left;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

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

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

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

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

.header-area .main-nav .nav li:nth-child(7) {
  padding-right: 0px;
  padding-left: 0px;
}

.header-area .main-nav .nav li:last-child a ,
.background-header .main-nav .nav li:last-child a,
.header-area .main-nav .nav li:nth-child(6) a ,
.background-header .main-nav .nav li:nth-child(6) a {
  padding: 0px 0px !important;
}

.header-area .main-nav .nav li:last-child a:hover ,
.background-header .main-nav .nav li:last-child a:hover,
.header-area .main-nav .nav li:nth-child(9) a:hover ,
.background-header .main-nav .nav li:nth-child(9) a:hover {
  color: #fff !important;
}

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

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #4b8ef1!important;
}

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

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #4b8ef1!important;
  opacity: 1;
}

.header-area .main-nav .nav li.submenu {
  position: relative;
  padding-right: 30px;
}

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

.background-header .main-nav .nav li.submenu:after {
  color: #2a2a2a;
}

.header-area .main-nav .nav li.submenu ul {
  position: absolute;
  width: 200px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 50px;
  opacity: 0;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
  transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 992px) {
  .header-area .main-nav .nav li:last-child  ,
  .background-header .main-nav .nav li:last-child {
    color: #069;
  }
  .header-area .main-nav .nav li:nth-child(6),
  .background-header .main-nav .nav li:nth-child(6) {
    padding-right: 0px;
  }
  .background-header .nav li a.active:after {
    display: none;
  }
}

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

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

/* 
---------------------------------------------
preloader
--------------------------------------------- 
*/

.js-preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fff;
    display: -webkit-box;
    display: flex;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    z-index: 9999;
    -webkit-transition: opacity 0.25s ease;
    transition: opacity 0.25s ease;
}

.js-preloader.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

@-webkit-keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@keyframes dot {
    50% {
        -webkit-transform: translateX(96px);
        transform: translateX(96px);
    }
}

@-webkit-keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

@keyframes dots {
    50% {
        -webkit-transform: translateX(-31px);
        transform: translateX(-31px);
    }
}

.preloader-inner {
    position: relative;
    width: 142px;
    height: 40px;
    background: #fff;
}

.preloader-inner .dot {
    position: absolute;
    width: 16px;
    height: 16px;
    top: 12px;
    left: 15px;
    background: #4b8ef1;
    border-radius: 50%;
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-animation: dot 2.8s infinite;
    animation: dot 2.8s infinite;
}

.preloader-inner .dots {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    margin-top: 12px;
    margin-left: 31px;
    -webkit-animation: dots 2.8s infinite;
    animation: dots 2.8s infinite;
}

.preloader-inner .dots span {
    display: block;
    float: left;
    width: 16px;
    height: 16px;
    margin-left: 16px;
    background: #4b8ef1;
    border-radius: 50%;
}



/* 
---------------------------------------------
Banner Style
--------------------------------------------- 
*/

.main-banner {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 250px 120px 150px 120px;
  position: relative;
  overflow: hidden;
}

.main-banner:after {
  content: '';
  background-image: url(../images/slider-left-dec.png);
  background-repeat: no-repeat;
  background-size: contain;
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1;
}

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

.main-banner .left-content h2 {
  z-index: 2;
  position: relative;
  font-weight: 700;
  line-height: 70px;
  font-size: 50px;
  margin-bottom: 20px;
}

.main-banner .left-content p {
  margin-bottom: 45px;
  color: #2a2a2a;
  font-weight: 400;
}

.main-banner .left-content .first-button {
  margin-right: 15px;
}

.main-banner .left-content .white-button {
  display: inline-block;
}

.main-banner .right-image {
  text-align: center;
  position: relative;
  z-index: 20;
}

.main-banner .right-image img {
  max-width: 710px;
}

.main-banner .left-content .white-button a {
  background-color: #4b8ef1;
  color: #fff !important;
}

/* 
---------------------------------------------
Services Style
--------------------------------------------- 
*/

.services {
  padding-top: 130px;
  position: relative;
}

.services  .section-heading p {
  margin-top: 10px;
  margin-left: 18%;
  margin-right: 18%;
}

.services .container-fluid {
  padding-left: 65px;
  padding-right: 65px;
}

.services:after {
  content: '';
  background-image: url(../images/services-left-dec.png);
  background-repeat: no-repeat;
  position: absolute;
  left: 0;
  bottom: -300px;
  width: 261px;
  height: 368px;
  z-index: 0;
}

.services:before {
  content: '';
  background-image: url(../images/services-right-dec.png);
  background-repeat: no-repeat;
  position: absolute;
  right: 0;
  top: 0;
  width: 1136px;
  height: 244px;
  z-index: 0;
}

.services .section-heading {
  text-align: center;
  margin-bottom: 80px;
}

.services .section-heading .line-dec {
  margin: 0 auto;
}

.service-item {
  position: relative;
  z-index: 1;
  padding: 30px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.1);
  background-color: #fff;
  border-radius: 10px;
  border-top-right-radius: 50px;
  transition: all .3s;
}

.service-item .icon {
  margin-left: 0px;
  margin-bottom: 30px;
  background-repeat: no-repeat;
  width: 50px;
  height: 50px;
  transition: all .3s;
}

.service-item h4 {
  transition: all .3s;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
}

.service-item p {
  transition: all .3s;
  font-size: 15px;
  margin-bottom: 20px;
}

.service-item:hover h4,
.service-item:hover p,
.service-item:hover .text-button a {
  color: #fff;
}

.first-service .icon {
  background-image: url(../images/service-icon-01.png);
}

.first-service:hover .icon {
  background-image: url(../images/service-icon-hover-01.png);
}

.second-service .icon {
  background-image: url(../images/service-icon-02.png);
}

.second-service:hover .icon {
  background-image: url(../images/service-icon-hover-02.png);
}


.third-service .icon {
  background-image: url(../images/service-icon-03.png);
}

.third-service:hover .icon {
  background-image: url(../images/service-icon-hover-03.png);
}

.fourth-service .icon {
  background-image: url(../images/service-icon-04.png);
}

.fourth-service:hover .icon {
  background-image: url(../images/service-icon-hover-04.png);
}

.service-item:hover {
  background-image: url(../images/service-bg.jpg);
  background-position: right top;
  background-repeat: no-repeat;
  background-size: cover;
}



/*
---------------------------------------------
About Us
---------------------------------------------
*/

.about-us {
  padding-top: 130px;
  position: relative;
}

.about-us .section-heading {
  margin-bottom: 45px;
}

.about-us .section-heading,
.about-us .box-item,
.about-us p,
.about-us .box-item .gradient-button,
.about-us .box-item span {
  position: relative;
  z-index: 1;
}

.about-us .box-item {
  box-shadow: 0px 0px 15px rgba(0,0,0,0.07);
  padding: 10px 30px;
  background-color: #fff;
  border-radius: 40px;
  margin-bottom: 30px;
}

.about-us .box-item h4 a {
  font-size: 20px;
  font-weight: 700;
  margin-top: 8px;
  color: #2a2a2a;
  transition: all .3s;
}

.about-us .box-item p {
  margin-bottom: 0px;
}

.about-us .box-item:hover h4 a {
  color: #4b8ef1;
}

.about-us .gradient-button {
  margin-top: 30px;
  margin-bottom: 10px;
}

.about-us span {
  font-size: 14px;
  color: #7a7a7a;
}

.about-us .right-image {
  position: relative;
  z-index: 1;
}

.about-us:after {
  background-image: url(../images/about-bg.jpg);
  width: 777px;
  height: 1132px;
  content: '';
  position: absolute;
  background-repeat: no-repeat;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 0;
}



/* 
---------------------------------------------
The Clients
---------------------------------------------
*/

.the-clients {
  margin-top: 130px;
}

.the-clients  .section-heading {
  text-align: center;
  margin-bottom: 80px;
}

.the-clients  .section-heading p {
  margin-top: 10px;
  margin-left: 18%;
  margin-right: 18%;
}

.the-clients .naccs {
  position: relative;
}

.menu .thumb h4 {
  margin-bottom: 0px;
  font-size: 20px;
  color: #2a2a2a;
}

.menu .thumb span.date {
  display: inline-block;
  margin-top: 0px;
  color: #afafaf;
}

.menu .thumb span.category,
.menu .thumb span.rating {
  font-weight: 700;
  color: #afafaf;
}

.menu .thumb i {
  color: #afafaf;
}

.the-clients .naccs .menu div {
  color: #fff;
  font-size: 15px;
  margin-bottom: 15px;
  margin-top: 15px;
  text-align: left;
  padding: 0px 15px;
  cursor: pointer;
  position: relative;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.the-clients .naccs .menu div.active h4,
.the-clients .naccs .menu div.active i,
.the-clients .naccs .menu div.active span.rating,
.the-clients .naccs .menu div.active .thumb {
  color: #4b8ef1;
}

.the-clients ul.nacc {
  position: relative;
  min-height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: 0.5s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

.the-clients ul.nacc li {
  opacity: 0;
  transform: translateX(-50px);
  position: absolute;
  list-style: none;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

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

.the-clients ul.nacc li {
  width: 100%;
}

.the-clients .nacc .thumb .client-content img {
  width: 76px;
  height: 62px;
}

.the-clients .nacc .thumb .client-content {
  padding: 60px 30px;
  background-image: url(../images/client-bg.png);
  background-size: cover;
  border-radius: 50px;
  width: 100%;
  height: auto;
  background-repeat: no-repeat;
}

.the-clients .nacc .thumb .client-content p {
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  font-style: italic;
  margin-top: 30px;
}

.the-clients .nacc .thumb .down-content {
  margin-top: 30px;
}

.the-clients .nacc .thumb .down-content img {
  width: 170px;
  height: 170px;
  border-radius: 50%;
  display: inline;
}

.the-clients .nacc .thumb .down-content .right-content {
  display: inline-block;
  margin-left: 20px;
}

.the-clients .nacc .thumb .down-content .right-content h4 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 15px;
}

.the-clients .nacc .thumb .down-content .right-content span {
  color: #2a2a2a;
}


/* 
---------------------------------------------
The Clients
---------------------------------------------
*/

.pricing-tables {
  padding-top: 130px;
}

.pricing-tables  .section-heading {
  text-align: center;
  margin-bottom: 80px;
}

.pricing-tables  .section-heading p {
  margin-top: 10px;
  margin-left: 18%;
  margin-right: 18%;
}

.pricing-item-regular {
  margin-top: 30px;
  box-shadow: 0px 0px 15px rgba(0,0,0,0.07);
  border-radius: 50px;
  padding: 90px 30px;
  text-align: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.pricing-item-regular:before {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../images/regular-table-top.png);
  z-index: 0;
  content: '';
  width: 274px;
  height: 221px;
}

.pricing-item-regular:after {
  position: absolute;
  bottom: 0;
  right: 0;
  background-image: url(../images/regular-table-bottom.png);
  z-index: 0;
  content: '';
  width: 370px;
  height: 171px;
}

.pricing-item-regular span.price {
  font-size: 40px;
  color: #fff;
  position: absolute;
  font-weight: 700;
  z-index: 1;
  left: 30px;
  top: 30px;
}

.pricing-item-regular h4 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 30px;
}

.pricing-item-regular .icon img {
  width: 120px;
  height: 106px;
  margin-bottom: 30px;
}

.pricing-item-regular ul li {
  color: #4b8ef1;
  font-size: 15px;
  margin-bottom: 15px;
}

.pricing-item-regular ul li:last-child {
  margin-bottom: 0px;
}

.pricing-item-regular ul li.non-function {
  color: #afafaf;
  text-decoration: line-through;
}

.pricing-item-regular .border-button {
  position: relative;
  z-index: 1;
  margin-top: 40px;
}

.pricing-item-pro {
  box-shadow: 0px 0px 15px rgba(0,0,0,0.07);
  border-radius: 50px;
  padding: 120px 30px;
  text-align: center;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.pricing-item-pro:before {
  position: absolute;
  top: 0;
  left: 0;
  background-image: url(../images/pro-table-top.png);
  z-index: 0;
  content: '';
  width: 281px;
  height: 251px;
}

.pricing-item-pro:after {
  position: absolute;
  bottom: 0;
  right: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-image: url(../images/pro-table-bottom.png);
  z-index: 0;
  content: '';
  width: 100%;
  height: 201px;
}

.pricing-item-pro span.price {
  font-size: 40px;
  color: #fff;
  position: absolute;
  font-weight: 700;
  z-index: 1;
  left: 30px;
  top: 30px;
}

.pricing-item-pro h4 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 30px;
}

.pricing-item-pro .icon img {
  width: 120px;
  height: 106px;
  margin-bottom: 30px;
}

.pricing-item-pro ul li {
  color: #4b8ef1;
  font-size: 15px;
  margin-bottom: 15px;
}

.pricing-item-pro ul li:last-child {
  margin-bottom: 0px;
}

.pricing-item-pro ul li.non-function {
  color: #afafaf;
  text-decoration: line-through;
}

.pricing-item-pro .border-button {
  position: relative;
  z-index: 1;
  margin-top: 40px;
}




/* 
---------------------------------------------
Free Quote
--------------------------------------------- 
*/

.free-quote {
  background-image: url(../images/quote-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  padding: 120px 0px;
  text-align: center;
  position: relative;
  z-index: 2;
  margin-top: 130px;
}

.free-quote .section-heading {
  margin-bottom: 60px;
}

.free-quote .section-heading h6,
.free-quote .section-heading h4 {
  color: #fff;
}

.free-quote .section-heading .line-dec {
  margin: 0 auto;
  background-color: #fff;
}

.free-quote form {
  background-color: #fff;
  display: inline-block;
  width: 100%;
  min-height: 80px;
  border-radius: 40px;
  position: relative;
  z-index: 1;
}

.free-quote form input {
  width: 100%;
  margin-top: 20px;
  margin-left: 30px;
  color: #afafaf;
  font-weight: 400;
  font-size: 15px;
  height: 40px;
  background-color: transparent;
  border-bottom: 1px solid #eee;
  border-top: none;
  border-left: none;
  border-right: none;
  position: relative;
  z-index: 2;
  outline: none;
}

.free-quote form button {
  width: 100%;
  height: 80px;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 40px;
  outline: none;
  border: none;
  margin-left: 30px;
  background-color: #726ae3;
  font-size: 15px;
  color: #fff;
}


/* 
---------------------------------------------
Footer Style
--------------------------------------------- 
*/

footer {
  background-image: url(../images/footer-bg.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  margin-top: 130px;
  padding-top: 300px;
  padding-bottom: 60px;
}

footer .section-heading {
  margin-bottom: 45px;
}

footer .section-heading h4 {
  line-height: 45px;
  color: #ffffff;
  margin-left: 13%;
  margin-right: 13%;
  text-align: center;
}

footer #search {
  margin-bottom: 80px;
}

footer #search input::placeholder {
  color: #fff;
}

footer #search input {
  font-size: 15px;
  color: #fff;
  outline: none;
  height: 46px;
  border: none;
  background-color: transparent;
  border-bottom: 1px solid #fff;
  width: 100%;
}

footer #search button {
  height: 46px;
  border-radius: 23px;
  border: 1px solid #fff;
  background-color: transparent;
  color: #fff;
  width: 100%;
  transition: all .5s;
}

footer #search button:hover {
  background-color: #fff;
  color: #4b8ef1;
}

.footer-widget .logo img {
  max-width: 96px;
  margin-bottom: 30px;
}

.footer-widget h4 {
  font-size: 27px;
  color: #000000;
  font-weight: 700;
  margin-bottom: 30px;
}

.footer-widget p {
  margin-bottom: 15px;
}

.footer-widget p,
.footer-widget p a {
  color: #fff;
}

.footer-widget ul {
  display: inline;
  max-width: 40%;
  float: left;
  margin-right: 10%;
}

.footer-widget ul li {
  margin-bottom: 10px;
}

.footer-widget ul li:last-child {
  margin-bottom: 0px;
}

.footer-widget ul li a {
  font-size: 15px;
  color: #fff;
  transition: all .3s;;
}

.footer-widget a:hover {
  opacity: 0.75;
}

footer .copyright-text p {
  text-align: center;
  margin-top: 50px;
  margin-bottom: 0px;
  color: #fff;
}

footer p a {
  color: #fff;
  transition: all .5s;
}

footer p a:hover {
  opacity: 0.75;
  color: #fff;
}


/*
---------------------------------------------
PopUp
---------------------------------------------
*/

#lean_overlay {
  position: fixed;
  z-index: 100;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: #000;
  display: none;
}

.popupContainer {
  position: absolute;
  width: 330px;
  height: auto;
  left: 45%;
  top: 60px;
  background: #FFF;
}

.btn {
  padding: 10px 20px;
  background: #00000094;
  color: #fff;
  transition: all .3s;
}

.btn_red {
  background: #4b8ef1;
  color: #FFF;
}

.btn:hover {
  background: #E4E4E2;
}

.btn_red:hover {
  color: #2a2a2a;
  background: #E4E4E2;
}

a.btn {
  color: #fff;
  text-align: center;
  text-decoration: none;
}

a.btn_red {
  color: #FFF;
}

.one_half {
  width: 50%;
  display: block;
  float: left;
}

.one_half.last {
  width: 45%;
  margin-left: 5%;
}
/* Popup Styles*/

.popupHeader {
  font-size: 16px;
  text-transform: uppercase;
}

.popupHeader {
  background: #F4F4F2;
  position: relative;
  padding: 10px 20px;
  border-bottom: 1px solid #DDD;
  font-weight: bold;
}

.popupHeader .modal_close {
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px 15px;
  background: #4b8ef1;
  cursor: pointer;
  color: #fff;
  font-size: 16px;
}

.popupBody {
  padding: 20px;
}

.social_login .social_box {
  display: block;
  clear: both;
  padding: 10px;
  margin-bottom: 10px;
  background: #F4F4F2;
  overflow: hidden;
}

.social_login .icon {
  display: inline-block;
  
  padding: 5px 10px;
  margin-right: 10px;
  float: left;
  color: #FFF;
  font-size: 16px;
  text-align: center;
}

.social_login .fb .icon {
  background: #3B5998;
}

.social_login .google .icon {
  background: #DD4B39;
}

.social_login .icon_title {
  display: block;
  padding: 5px 0;
  float: left;
  font-weight: bold;
  font-size: 16px;
  color: #777;
}

.social_login .social_box:hover {
  background: #E4E4E2;
}

.centeredText {
  color: #afafaf;
  text-align: center;
  margin: 20px 0;
  clear: both;
  overflow: hidden;
  text-transform: capitalize;
}

.user_login label {
  color: #afafaf;
}

.action_btns {
  clear: both;
  overflow: hidden;
}

.action_btns a {
  display: block;
}
/* User Login Form */

.user_login {
  display: none;
}

.user_login label {
  display: block;
  margin-bottom: 5px;
}

.user_login input[type="text"],
.user_login input[type="email"],
.user_login input[type="password"] {
  display: block;
  width: 90%;
  padding: 10px;
  border: 1px solid #DDD;
  color: #666;
}

.user_login input[type="checkbox"] {
  float: left;
  margin-right: 10px;
  width: 22px;
  height: 22px;
}

.user_login input[type="checkbox"]+label {
  float: left;
}

.user_login .checkbox {
  margin-bottom: 10px;
  clear: both;
  overflow: hidden;
}

.forgot_password {
  display: block;
  margin: 20px 0 10px;
  clear: both;
  overflow: hidden;
  text-decoration: none;
  color: #4b8ef1;
  transition: all .3s;
}
/* User Register Form */

.user_register {
  display: none;
}

.user_register label {
  color: #afafaf;
  display: block;
  margin-bottom: 5px;
}

.user_register input[type="text"],
.user_register input[type="email"],
.user_register input[type="password"] {
  display: block;
  width: 100%;
  padding: 10px;
  border: 1px solid #DDD;
  color: #666;
}

.user_register input[type="checkbox"] {
  width: 22px;
  height: 22px;
  float: left;
  margin-right: 8px;
}

.user_register input[type="checkbox"]+label {
  float: left;
  color: #afafaf;
}

.user_register .checkbox {
  margin-bottom: 10px;
  clear: both;
  overflow: hidden;
}



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



@media (max-width: 1200px) {
  .header-area .main-nav .logo h4 {
    font-size: 24px;
  }
  .header-area .main-nav .logo h4 img {
    max-width: 25px;
    margin-left: 0px;
  }
  .header-area .main-nav .nav li:last-child {
    padding-left: 20px;
  }
  
  .main-banner .left-content h2 {
    z-index: 2;
    position: relative;
    font-weight: 700;
    line-height: 70px;
    font-size: 50px;
    margin-bottom: 20px;
  }

  .main-banner .left-content p {
    margin-bottom: 45px;
  }
}

@media (max-width: 992px) {
  .header-area {
    background-color: #fff;
  }
  .main-banner:after {
    display: none;
  } 
  .main-banner .left-content h2 {
    color: #2a2a2a;
    margin-right: 0;
  }
  .main-banner .left-content p {
    color: #afafaf;
    margin-right: 0;
  }
  .main-banner .left-content .white-button a {
    background-color: #4b8ef1;
    color: #fff !important;
  }
  form#contact {
    overflow: hidden;
  }
  .header-area .main-nav .logo h4 {
    font-size: 20px;
  }
  .main-banner .left-content {
    margin-right: 0px;
  }
  .main-banner {
    text-align: center;
    padding: 226px 0px 30px 0px;
  }
  .main-banner:before {
    display: none;
  }
  .main-banner .right-image {
    margin: 30px auto 0px auto;
    text-align: center;
  }
  .features-item {
    margin-bottom: 45px;
  }
  .last-features-item,
  .last-skill-item {
    margin-bottom: 0px !important;
  }
  .skill-item {
    margin-bottom: 30px;
  }
  .about-left-image img {
    margin-right: 0px;
    margin-bottom: 45px;;
  }
  .services .naccs .menu div {
    font-size: 15px;
    font-weight: 500;
  }
  .service-item {
    text-align: center;
    margin-bottom: 30px;
  }
  .about-us .box-item {
    text-align: center;
  }
  .about-us:after {
    display: none;
  }
  .about-us .gradient-button,
  .about-us span {
    text-align: center;
    display: block;
  }
  .about-us .right-image {
    margin-top: 30px;
  }
  .service-item .icon {
    margin: 0 auto 30px auto;
  }
  .about-us .section-heading {
    text-align: center;
  }
  .about-us .left-image {
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 45px;
  }
  .blog-posts {
    margin-left: 0px;
    margin-top: 30px;
  }
  .post-item {
    margin-bottom: 70px;
  }
  .pricing-item-regular {
    margin-bottom: 30px;
  }
  .our-portfolio .owl-nav {
    display: none !important;
  }
  .contact-info {
    margin-top: 60px;
  }
  form#contact {
    padding: 45px;
  }
}

@media (max-width: 767px) {
  .the-clients .naccs .menu div {
    text-align: center;
  }
  footer .section-heading h4 {
    color: #2a2a2a;
  }
  footer #search {
    margin-bottom: 45px;
  }
  footer {
    padding-top: 0px;
    text-align: center;
  }
  .footer-widget ul {
    display: block;
    width: 100%;
    float: none;
    text-align: center;
    margin: 0 auto;
  }
  .footer-widget h4 {
    margin-top: 45px;
    margin-bottom: 20px;
  }
  footer #search input {
    border: 1px solid #eee;
    color: #afafaf;
    background-color: #fff;
    border-radius: 23px;
    margin-bottom: 15px;
    padding: 0px 30px;
  }
  footer #search button {
    background-color: #fff;
    color: #4b8ef1;
  }
  footer #search input::placeholder { 
    color: #2a2a2a;
  }
  .header-area .main-nav .logo h4 {
    font-size: 30px;
  }
  .header-area .main-nav .logo h4 img {
    max-width: 30px;
    margin-left: 5px;
  }
  .main-banner .info-stat {
    margin-bottom: 15px;
  }
  .menu .thumb span.date {
    margin-bottom: -20px;
    display: block;
  }
  .service-item {
    text-align: center;
    padding: 30px;
  }
  .menu .thumb span.category {
    display: none;
  }
  .about-us .right-image {
    margin-top: 30px;
  }
  .service-item .icon {
    float: none;
    margin-right: 0px;
    margin-bottom: 15px;
  }
  .service-item .right-content {
    display: inline-block;
  }
  .services .naccs .menu div .thumb {
    padding: 5px;
  }
  .services .icon img {
    margin: 0px;
  }
  .the-clients .nacc .thumb .down-content .right-content {
    margin-left: 0px;
    margin-top: 15px;
  }
  .services ul.nacc li.active {
    padding: 45px;
  }
  .services .naccs .menu div  {
    font-size: 0px;
  }
  .the-clients .nacc .thumb .down-content {
    text-align: center;
  }
  .services ul.nacc li .right-image img {
    float: none;
  }
  .our-portfolio .section-heading,
  .about-us .section-heading,
  .about-us .about-item,
  .about-us p,
  .about-us .main-green-button {
    text-align: center;
  }
  .our-portfolio .section-heading .line-dec {
    margin: 0 auto;
  }
  .our-services .section-heading {
    margin-left: 15px;
    margin-right: 15px;
  }
  .free-quote form input {
    margin-left: 0px;
    padding: 0px 30px;
  }
  .free-quote form button {
    margin-left: 0px;
    border-bottom-left-radius: 40px;
    border-top-right-radius: 0px;
  }
  .blog-posts {
    margin-left: 0px;
    margin-top: 30px;
  }
  .post-item {
    margin-bottom: 30px;
  }
  .post-item .thumb img {
    max-width: 140px;
  }
  .post-item .right-content p {
    display: none;
  }
  .about-us .about-item {
    margin-top: 15px;
  }
  form#contact {
    padding: 30px;
  }
}


/* Genel Bölüm Stili */
.faq-section {
    padding: 80px 0; /* Üstten ve alttan boşluk */
    background-color: #ffffff;
}

/* Başlık Stili */
.faq-section .section-title {
    font-size: 32px;
    font-weight: 700;
    color: #333;
    margin-bottom: 50px;
    position: relative;
    display: inline-block; /* Çizgilerin başlığın boyutuna göre olmasını sağlar */
}

/* Başlık Altındaki İnce Mavi Çizgi */
.faq-section .section-title::before {
    content: '';
    display: block;
    width: 60px; /* Çizgi genişliği */
    height: 2px;
    background-color: #3f87f5; /* Mavi renk */
    margin: 0 auto 10px; /* Merkezi ortala ve başlık ile boşluk bırak */
}

/* Accordion (Soru-Cevap Kutusu) Stili */
.accordion-item {
  padding: 20px!important; /* Üstten ve alttan boşluk */
    border: none; /* Varsayılan Bootstrap kenarlığını kaldır */
    border-bottom: 1px solid #eeeeee; /* Her elemanın altına ince gri çizgi */
    margin-bottom: 0;
}

/* Soru Başlığı (Button) Stili */
.accordion-button {
    background-color: #ffffff;
    color: #333;
    font-size: 16px;
    font-weight: 500;
    padding: 20px 0; /* Dikeyde boşluk artır */
    text-align: left;
    box-shadow: none; /* Varsayılan gölgeleri kaldır */
    border-radius: 0;
}

/* Soru Başlığının Hover ve Açık Halindeki Stili */
.accordion-button:not(.collapsed) {
    color: #333; /* Açıkken rengi değişmesin */
    background-color: #ffffff;
    box-shadow: none;
}

/* Soru İşareti İkonu (Görseldeki Mavi Soru İşareti) */
.accordion-button .question-icon {
    font-weight: bold;
    color: #3f87f5; /* Mavi Renk */
    font-size: 18px;
    margin-right: 15px;
    /* İkonun etrafındaki daireyi yapmak istersen: */
    /* border: 1px solid #3f87f5;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    line-height: 25px;
    text-align: center; */
}

/* Cevap Metni Stili */
.accordion-body {
    padding: 0 0 20px 40px; /* Soldan boşluk bırak ki metin ikonun hizasına gelsin */
    color: #666;
    font-size: 15px;
    line-height: 1.6;
}

/* Referanslar Bölümünü Ortala */
#clients .section-heading h4 {
    text-align: center;
}

/* Kaydırıcıyı Saran Mavi Alan */
#clients .owl-carousel {
    background-color: #88c8f5; /* Açık Mavi Ton */
    padding: 30px 20px;
    border-radius: 10px; /* Hafif yuvarlak köşeler */
}

/* Her Bir Logo Öğesi */
#clients .item {
    padding: 10px; /* Logolar arasında boşluk bırak */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Logoların Boyut Ayarı */
#clients .item img {
    max-width: 120px; /* Maksimum genişlik */
    height: auto;
    filter: grayscale(100%) brightness(0%); /* Logoları siyah-beyaz yapar */
    opacity: 0.7; /* Hafif şeffaflık */
    transition: all 0.3s;
}

#clients .item img:hover {
    filter: none; /* Mouse üzerine gelince orijinal renklerine döner */
    opacity: 1;
}

/* İkinci Sıra İçin Üst Boşluk (Opsiyonel) */
.mt-4 {
    margin-top: 30px; 
}

/* E-Bülten / Yayınlar - Kart düzeni */
.publications { padding: 48px 0; background: #f9fafb; }
.section-heading h4 { font-size: 32px; margin-bottom: 6px; }
.section-heading p { color: #ffffff; margin-bottom: 24px; }

/* grid */
.pub-grid {
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}

/* kart */
.pub-card {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(2,6,23,0.06);
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.pub-card:hover { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(2,6,23,0.08); }

.pub-card .thumb {
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #efefef;
}
.pub-card .thumb img { width:100%; height:100%; object-fit:cover; display:block; }

.card-body { padding: 16px 18px; display:flex; flex-direction:column; gap:10px; flex:1; }
.title { font-size: 16px; margin:0; color:#0f1724; font-weight:600; }
.meta { font-size: 14px; color:#6b7280; margin:0 0 8px 0; flex:1; }

/* butonlar */
.card-actions { display:flex; gap:10px; align-items:center; }
.btn { cursor:pointer; border:0; padding:8px 12px; border-radius:8px; font-weight:700; text-decoration:none; font-size:14px; }
.btn-primary { background:#2563eb; color:#fff; }
.btn-primary:hover { background:#1e4fc3; }
.btn-outline { background:transparent; color:#2563eb; border:1px solid rgba(37,99,235,0.18); }
.btn-outline:hover { background:rgba(37,99,235,0.06); }

/* responsive */
@media (max-width: 992px) {
  .pub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .pub-grid { grid-template-columns: 1fr; padding: 0 12px; gap:16px; }
}

/* modal (full screen) */
.pdf-modal { position: fixed; inset: 0; display:none; align-items:center; justify-content:center; background: rgba(2,6,23,0.6); z-index: 3000; }
.pdf-modal[aria-hidden="false"] { display:flex; }
.pdf-modal-inner { width: min(1100px, 96%); height: min(720px, 92%); background:#fff; border-radius:10px; overflow:hidden; position:relative; display:flex; flex-direction:column; }
.modal-close { position:absolute; right:10px; top:8px; background:transparent; border:0; font-size:28px; cursor:pointer; z-index:20; }
.pdf-modal iframe { width:100%; height:100%; border:0; }

/* küçük ekranlarda modal tam ekran yapmak istersen */
@media (max-width:640px) {
  .pdf-modal-inner { width:100%; height:100%; border-radius:0; }
  .modal-close { right:12px; top:12px; color:#111; }
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;    /* iki kutuyu da eşit boyda yapar */
    gap: 40px;
}

.contact-wrapper > div {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(2,6,23,0.06);
    padding: 20px;
}





/* flatpages--------------------------------------------- */



.flatpage-content-wrapper p {
    /* Paragraflar arasında biraz daha fazla boşluk */
    margin-bottom: 1.5rem; 
    /* Satır yüksekliğini artırarak metni rahatlatır */
    line-height: 1.8; 
    /* Metin rengini biraz koyu gri yaparak kontrastı artırır */
    color: #ffffff; 
}

.flatpage-content-wrapper ul,
.flatpage-content-wrapper ol {
    /* Liste öğeleri arasında boşluk */
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}


#flati {
  margin-top: 65px;
}
/* Başlık */
.cronoc-cert-title {
    font-size: 30px;
    color: #2c5cff;
    font-weight: 700;
}

/* Filtre menüsü */
.cert-filter {
    margin-bottom: 30px;
}

.filter-btn {
    border: none;
    background: none;
    padding: 8px 18px;
    font-size: 15px;
    color: #325dff;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s;
}

.filter-btn.active,
.filter-btn:hover {
    color: #fff;
    background: #2c5cff;
    border-radius: 20px;
}

/* Sertifika kutusu */
.cert-box {
    background: #fff;
    padding: 15px;
    border-radius: 14px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
    transition: 0.3s;
}

.cert-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
}

/* Sertifika görseli küçültülmüş */
.cert-box-img {
    width: 100%;
    height: 420px;
    object-fit: contain;
    border-radius: 10px;
}

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.7s ease;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.delay-1 { transition-delay: .15s; }
.delay-2 { transition-delay: .3s; }
/* Floating icons container */
.floating-icons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

/* Icons */
.f-icon {
  position: absolute;
  width: 60px;
  opacity: 0;
  animation: floatDown 6s ease-in-out infinite;
  opacity: 0.12;
}

/* ANİMASYON – yukarıdan aşağı iniş */
@keyframes floatDown {
  0% {
    transform: translateY(-80px);
    opacity: 0;
  }
  40% {
    opacity: 0.4;
  }
  70% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(80px);
    opacity: 0;
  }
}

/* ICON POSITIONS */
.icon1 { top: 5%; left: 15%; animation-delay: 0s; }
.icon2 { top: 10%; right: 10%; animation-delay: 1.2s; }
.icon3 { top: 30%; left: 40%; animation-delay: 2.1s; }
.icon4 { top: 50%; right: 25%; animation-delay: 3.3s; }

.floating-icons {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}

.f-icon {
  position: absolute;
  width: 55px;
  animation: floatUp 10s ease-in-out infinite;
  filter: drop-shadow(0px 0px 4px rgba(0, 153, 255, 0.3));
}

@keyframes floatUp {
  0% {
    transform: translateY(80px) translateX(0px) rotate(0deg);
    opacity: 0;
  }
  25% {
    opacity: 0.20;
  }
  50% {
    transform: translateY(-40px) translateX(12px) rotate(3deg);
    opacity: 0.15;
  }
  75% {
    transform: translateY(-80px) translateX(-10px) rotate(-3deg);
    opacity: 0.1;
  }
  100% {
    transform: translateY(-120px) translateX(5px) rotate(0deg);
    opacity: 0;
  }
}

.icon1 { bottom: 10%; left: 18%; animation-delay: 0s; }
.icon2 { bottom: 20%; right: 15%; animation-delay: 1.7s; }
.icon3 { bottom: 25%; left: 45%; animation-delay: 3.4s; }
.icon4 { bottom: 15%; right: 30%; animation-delay: 5.1s; }

/* İLETİŞİME GEÇİN – ORTA HİZALI PREMIUM BÖLÜM */
.contact-cta-section {
    width: 100%;
    padding: 120px 0 100px;
    text-align: center;
    background: #ffffff;
    position: relative;
}

.contact-cta-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.contact-cta-section h2 {
    font-size: 48px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 25px;
}

.contact-cta-section p {
    font-size: 20px;
    color: #475569;
    line-height: 1.7;
    margin-bottom: 35px;
}

.contact-cta-btn {
    display: inline-block;
    padding: 14px 38px;
    font-size: 20px;
    background: #2563eb;
    color: white;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.25s ease-in-out;
}

.contact-cta-btn:hover {
    background: #1d4ed8;
    transform: translateY(-3px);
}

/* Reveal animasyonu */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: 0.8s ease-out;
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}
/* Sertifika Modal */
.cert-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    padding-top: 70px;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    overflow: auto;
    background: rgba(0,0,0,0.85);
}

.cert-modal-content {
    margin: auto;
    display: block;
    max-width: 40%;
    border-radius: 10px;
    box-shadow: 0 0 25px rgba(255,255,255,0.2);
}

.close-modal {
    position: absolute;
    top: 25px;
    right: 35px;
    color: #fff;
    font-size: 45px;
    font-weight: bold;
    cursor: pointer;
}

.close-modal:hover {
    color: #ddd;
}
/* Accordion Animasyon ve Renk Efekti */
.accordion-item {
    border-radius: 12px;
    margin-bottom: 18px;
    overflow: hidden;
    transition: all 0.3s ease;
    border: none;
}

/* Başlık Butonu */
.accordion-button {
    font-size: 18px;
    font-weight: 600;
    padding: 18px 22px;
    background: #ffffff;
    transition: all .35s ease;
    border: none;
    box-shadow: none;
}

/* Soru İşareti */
.question-icon {
    width: 34px;
    height: 34px;
    background: rgb(255, 255, 255);
    color: #fff;
    font-weight: bold;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    transition: .35s;
}

/* Açılınca RENK animasyonu */
.accordion-button:not(.collapsed) {
    background: linear-gradient(to right, #2563eb, #ffffff);
    color: rgb(0, 0, 0);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.accordion-button:not(.collapsed) .question-icon {
    background: #fff;
    color: #000000;
}

/* İçerik Alanı */
.accordion-body {
    background: #f9fbff;
    padding: 20px 25px;
    font-size: 16px;
    line-height: 1.6;
    animation: fadeIn 0.35s ease;
}

/* Yavaş Fade Animasyonu */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
/* Anasayfa Referans Bölümü */
.ref-section {
    text-align: center;
}

.ref-section .section-title {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 50px;
    color: #2563eb;
}

.client-item img {
    max-height: 90px;
    width: auto;
    margin: 0 auto;
    filter: grayscale(100%);
    opacity: .7;
    transition: .3s ease;
}

.client-item img:hover {
    filter: grayscale(0%);
    opacity: 1;
}
/* Ana Bölüm Stilleri */
#urunlerimiz {
    padding: 60px 20px;
    text-align: center;
    background-color: #f8f8f8; /* Hafif arka plan */
}

#urunlerimiz h2 {
    font-size: 2.5em;
    margin-bottom: 40px;
}

/* 4 Kutucuklu Konteyner Stili */
.cards-container {
    display: flex;
    justify-content: center;
    gap: 30px; /* Kutucuklar arası boşluk */
    margin-bottom: 30px; /* Alt kutucukla aradaki boşluk */
    flex-wrap: wrap; /* Küçük ekranlarda alt alta geçiş için */
}

/* 5. Kutucuk Konteyneri Stili */
.bottom-card-container {
    display: flex;
    justify-content: center; /* Ortalamak için */
}

/* Genel Kutucuk Stili */
.card {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    width: 280px; /* Dört kutucuk için ideal genişlik */
    height: 300px; /* Sabit bir yükseklik veriyoruz */
    padding: 20px;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden; /* Gizlenen içeriği saklamak için anahtar */
    cursor: pointer;
    position: relative;
}

.wide-card {
    width: 600px; /* 5. kutucuk için daha geniş yapı */
    max-width: 90%; /* Responsiveness */
}

.card:hover {
    transform: translateY(-5px); /* Hafif yukarı kalkma efekti */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.card h3 {
    font-size: 1.4em;
    margin-top: 0;
    color: #333;
}

/* İçerik Yönetimi */
.card-content {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 20px;
    transition: transform 0.3s ease;
}

/* Özet (Başlangıçta Görünür) */
.summary {
    font-size: 1.1em;
    color: #555;
    margin-bottom: 15px;
    min-height: 50px; /* Özetin yüksekliğini sabitlemek için */
}

/* Açıklama (Hover'da Görünür) */
.description {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 20px;
    background-color: white; /* Arka plan rengini koru */
    height: 100%;
    transform: translateY(100%); /* Başlangıçta alt tarafa kaydır */
    transition: transform 0.4s ease-out;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    opacity: 0; /* Başlangıçta gizle */
}

/* Hover Efekti */
.card:hover .description {
    transform: translateY(0); /* Üstüne gelince yukarı kaydır */
    opacity: 1; /* Görünür yap */
}

/* Buton Stili (Videodaki gibi) */
.btn {
    display: inline-block;
    color: #ffffff; /* Örnek Mor Renk */
    font-weight: bold;
    text-decoration: none;
    margin-top: 0px;
    font-size: 0.95em;
}

.btn:hover {
    text-decoration: underline;
}

/* İsteğe Bağlı: Mobil Uyumluluk */
@media (max-width: 1200px) {
    .cards-container {
        justify-content: space-around;
    }
}

@media (max-width: 768px) {
    .cards-container {
        flex-direction: column;
        align-items: center;
    }
    .card {
        width: 90%;
        margin-bottom: 20px;
    }
    .wide-card {
        width: 90%;
    }
}
/* === MODERN ÜRÜNLER BÖLÜMÜ === */

#modern-products {
    padding: 100px 0;
    background-color: #f9fbff; /* Çok açık mavi/beyaz tonu */
    position: relative;
}

#modern-products .section-heading {
    margin-bottom: 60px;
}

/* Grid Yapısı: Kutuları otomatik hizalar */
.product-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px; /* Kartlar arası boşluk */
}

/* KART TASARIMI */
.pro-card {
    background: rgba(255, 255, 255, 0.15);
    width: 350px; /* Kart genişliği */
    padding: 40px 30px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* Hafif gölge */
    text-align: left;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Hover Efekti: Kart yukarı kalkar ve kenarlığı mavi olur */
.pro-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(75, 142, 241, 0.15);
    border-color: #4b8ef1;
}

/* Kartın üstündeki ince mavi çizgi (Süsleme) */
.pro-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: #4b8ef1;
    transform: scaleX(0); /* Başlangıçta gizli */
    transform-origin: left;
    transition: transform 0.4s ease;
}

.pro-card:hover::before {
    transform: scaleX(1); /* Hover olunca çizgi gelir */
}

/* İkon Kutusu */
.pro-icon {
    width: 70px;
    height: 70px;
    background: #eef5ff; /* Açık mavi zemin */
    color: #4b8ef1;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}

.pro-card:hover .pro-icon {
    background: #4b8ef1;
    color: #ffffff;
    box-shadow: 0 5px 15px rgba(75, 142, 241, 0.4);
}

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

.pro-card p {
    font-size: 15px;
    color: #ffffff;
    line-height: 1.6;
    margin-bottom: 25px;
    flex-grow: 1; /* Butonu en alta itmek için */
}

/* Link / Buton */
.pro-link {
    font-size: 15px;
    font-weight: 600;
    color: #000000;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.pro-link i {
    transition: transform 0.3s ease;
}

.pro-card:hover .pro-link {
    color: #2a5298;
}

.pro-card:hover .pro-link i {
    transform: translateX(5px); /* Ok işareti sağa kayar */
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .pro-card {
        width: 100%;
        max-width: 400px;
    }
}
.card-icon {
    font-size: 3em; /* İkon boyutu */
    color: #4b8ef1; /* Mavi renk */
    margin-bottom: 20px;
    display: block; 
    text-align: center;
    width: 100%; 
    transition: color 0.3s; /* Renk geçişi yumuşak olsun */
}

/* İsteğe bağlı: Hover anında ikon rengini koyulaştırma */
.card:hover .card-icon {
    color: #2c63ae; /* Daha koyu mavi */
}

/* YENİ ÖZELLİKLER CAROUSEL STİLLERİ */

.feature-card {
    background-color: #f7f9fc; /* Hafif arka plan */
    border-radius: 12px;
    padding: 40px 25px;
    text-align: center;
    min-height: 320px; /* Sabit yükseklik */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    border: 1px solid transparent;
}

.feature-card:hover {
    transform: translateY(-8px); /* Hafif kalkış */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    border-color: #4b8ef1; /* Mavi çerçeve */
}

.feature-icon {
    margin-bottom: 25px;
}

.feature-card h3 {
    font-size: 1.3em;
    color: #333;
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

.feature-card:hover h3 {
    color: #4b8ef1; /* Hover'da başlık rengini mavi yap */
}

.feature-card p {
    color: #666;
    line-height: 1.6;
}

/* CAROUSEL NAVİGASYON OKLARI STİLİ */
.features-slider .owl-nav {
    display: block !important; /* Okları göstermek için */
    text-align: center;
    margin-top: 30px;
}

.features-slider .owl-nav button {
    background: #e9ecef !important;
    color: #4b8ef1 !important;
    font-size: 24px;
    width: 45px;
    height: 45px;
    line-height: 40px;
    border-radius: 50% !important;
    margin: 0 5px;
    transition: all 0.3s ease;
    border: 1px solid #4b8ef1 !important;
}

.features-slider .owl-nav button:hover {
    background: #4b8ef1 !important;
    color: white !important;
}
/* VİDEODAKİ GİBİ SADE CAROUSEL KART STİLLERİ */

/* Kartların Temizlenmesi */
.feature-card {
    background-color: white !important;
    border-radius: 10px !important;
    padding: 30px 20px !important;
    text-align: center !important;
    min-height: 280px !important; 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important; /* Hafif gölge */
    transition: all 0.3s ease !important;
    border: 1px solid #eee !important; /* Çok hafif bir kenarlık */
}

.feature-card:hover {
    transform: translateY(-5px) !important; /* Daha yumuşak kalkış */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
    border-color: #4b8ef1 !important; /* Mavi çerçeve */
}

/* İkon ve Metin Stilleri */
.feature-icon {
    margin-bottom: 20px !important;
    color: #4b8ef1 !important; /* Mavi ikonlar */
}

.feature-card h3 {
    font-size: 1.3em !important;
    color: #333 !important;
}

/* CAROUSEL OKLARININ TEMİZ VE YEREL STİLİ */

.features-slider .owl-nav {
    display: none; /* JS ile taşındığı için varsayılanı gizle */
}

#features-slider-nav {
    display: block;
    text-align: center;
    margin-top: 30px;
}

#features-slider-nav button {
    background: transparent !important; /* Şeffaf arka plan */
    color: #4b8ef1 !important; /* Mavi ok rengi */
    font-size: 28px !important; /* Daha büyük ok boyutu */
    width: 50px !important;
    height: 50px !important;
    line-height: 48px !important;
    border-radius: 50% !important;
    margin: 0 5px !important;
    border: 1px solid #ddd !important; /* Hafif gri daire çerçeve */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

#features-slider-nav button:hover {
    background: #4b8ef1 !important; /* Hover'da mavi dolgu */
    color: white !important;
    border-color: #4b8ef1 !important;
}
.three-card-slider {
    width: 100%;
    padding: 80px 0;
    text-align: center;
    position: relative;
}

.slider-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
}

.slider-container .card {
    width: 320px;
    height: 460px;
    padding: 30px;
    background: rgba(255,255,255,0.03);
    border-radius: 25px;
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(8px);
    transition: all 0.5s ease;
    opacity: 0.25;
    transform: scale(0.85);
}

.slider-container .card.active {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 0 30px rgba(0,123,255,0.2);
}

.card h3 {
    color: rgb(0, 0, 0);
    margin: 20px 0 15px;
    font-size: 26px;
}

.card p {
    color: #333333;
    line-height: 1.6;
    font-size: 16px;
}

.card-icon {
    width: 70px;
    opacity: 0.9;
}

.slider-buttons {
    margin-top: 30px;
}

.slider-buttons button {
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: white;
    margin: 0 10px;
    cursor: pointer;
    transition: 0.3s;
    font-size: 18px;
}

.slider-buttons button:hover {
    background: rgba(255,255,255,0.1);
}
/* === MODERN GLASSMORPHISM KART TASARIMI (YENİ) === */

.modern-features-section {
    padding: 100px 0;
    /* Senin mavine uygun modern bir gradient arka plan */
    background: linear-gradient(135deg, #4b8ef1 0%, #2a5298 100%);
    position: relative;
    overflow: hidden;
}

/* Arka plana hareketli süslemeler ekleyelim (Opsiyonel ama şık durur) */
.modern-features-section::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    filter: blur(80px);
}

.modern-features-section .section-heading h4 {
    color: #fff !important; /* Başlık beyaz olsun */
}

.modern-features-section .section-heading h4 em {
    color: #ffd700 !important; /* "Biz" kelimesi altın sarısı/parlak olsun */
}

.cards-wrapper {
    display: flex;
    justify-content: center;
    align-items: stretch; /* Kart boylarını eşitlemek için */
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 50px;
}

/* KART TASARIMI */
.glass-card {
    background: rgba(255, 255, 255, 0.1); /* Yarı saydam */
    backdrop-filter: blur(16px); /* Buzlu cam efekti */
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 20px;
    padding: 40px 30px;
    width: 350px; /* Genişlik */
    text-align: center;
    color: white;
    transition: all 0.4s ease;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.15);
    position: relative;
    top: 0;
}

/* Orta Kartı Biraz Daha Büyük Yapalım */
.glass-card.highlight {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.5);
    transform: scale(1.05);
}

/* HOVER (Üzerine Gelince) Efektleri */
.glass-card:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-15px); /* Yukarı kalkma */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
    border-color: #fff;
}

.glass-card.highlight:hover {
    transform: scale(1.05) translateY(-15px);
}

/* İkon Kutusu */
.card-icon-box {
    font-size: 45px;
    margin-bottom: 25px;
    display: inline-block;
    width: 90px;
    height: 90px;
    line-height: 90px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    transition: all 0.5s ease;
}

/* Hover'da İkon Efekti */
.glass-card:hover .card-icon-box {
    background: #fff;
    color: #4b8ef1; /* İkon rengi maviye dönsün */
    transform: rotateY(360deg); /* Kendi etrafında dönsün */
}

/* Metin Stilleri */
.glass-card h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    color: #84b5ff;
}

.glass-card p {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
}

/* Mobil Uyumluluk */
@media (max-width: 992px) {
    .cards-wrapper {
        flex-direction: column;
        align-items: center;
    }
    
    .glass-card {
        width: 100%;
        max-width: 400px;
    }
    
    .glass-card.highlight {
        transform: scale(1); /* Mobilde büyütmeyi iptal et */
    }
}
/* --- İLETİŞİM SAYFASI ÖZEL STİLLERİ --- */

/* Hero Alanı */
.contact-hero {
    background: url('../images/services-right-dec.png') right top no-repeat, linear-gradient(135deg, #f9fbff 0%, #ffffff 100%);
    padding: 160px 0 60px 0;
    text-align: center;
    position: relative;
}

.contact-hero h1 {
    font-size: 42px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 15px;
}

.contact-hero p {
    font-size: 18px;
    color: #000000;
    max-width: 700px;
    margin: 0 auto;
}

.contact-section {
    padding: 60px 0 100px 0;
    background-color: #fff;
}

/* Sol Taraf: İletişim Bilgileri */
.contact-info-wrapper {
    background: #ffffff00;
    padding: 10px;
}

.info-card {
    display: flex;
    align-items: center;
    background: #ffffffe8;
    padding: 25px;
    margin-bottom: 20px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.03);
    border: 1px solid #f1f1f1;
    transition: all 0.3s ease;
}

.info-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(75, 142, 241, 0.15);
    border-color: #4b8ef1;
}

.info-card .icon-box {
    width: 55px;
    height: 55px;
    background: #eef5ff;
    color: #4b8ef1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-right: 20px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.info-card:hover .icon-box {
    background: #4b8ef1;
    color: #fff;
}

.info-card h5 {
    font-size: 18px;
    font-weight: 700;
    color: #2a2a2a;
    margin-bottom: 5px;
}

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

.working-hours {
    background: #f9fbff;
    padding: 20px;
    border-radius: 12px;
    border-left: 4px solid #4b8ef1;
}

.working-hours h6 {
    color: #2a2a2a;
    font-weight: 700;
    margin-bottom: 5px;
}

/* Sağ Taraf: İletişim Formu */
.contact-form-wrapper {
    background: #ffffffe8;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
}

.form-header h3 {
    font-size: 28px;
    font-weight: 700;
    color: #2a2a2a;
    margin-bottom: 10px;
}

.form-header p {
    color: #7a7a7a;
    margin-bottom: 30px;
}

/* Modern Input Stili (Google Material Tarzı) */
.modern-form .input-group {
    position: relative;
    width: 100%;
}

.modern-form input, 
.modern-form textarea {
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    outline: none;
    background: transparent;
    transition: 0.3s;
    font-size: 15px;
    color: #333;
}

.modern-form input:focus, 
.modern-form textarea:focus {
    border-color: #4b8ef1;
}

/* Floating Label Efekti */
.modern-form label {
    position: absolute;
    left: 15px;
    top: 15px;
    color: #aaa;
    pointer-events: none;
    transition: 0.3s;
    background: #fff;
    padding: 0 5px;
}

/* Input doluysa veya odaklanıldıysa label yukarı kayar */
.modern-form input:focus ~ label,
.modern-form input:not(:placeholder-shown) ~ label,
.modern-form textarea:focus ~ label,
.modern-form textarea:not(:placeholder-shown) ~ label {
    top: -10px;
    font-size: 12px;
    color: #4b8ef1;
    font-weight: 600;
}

.submit-btn {
    display: inline-block;
    background: linear-gradient(135deg, #002863 0%, #000000 100%);
    color: #fff;
    padding: 12px 35px;
    border-radius: 30px;
    border: none;
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 8px 15px rgba(75, 142, 241, 0.3);
}

.submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 20px rgba(75, 142, 241, 0.4);
}

.submit-btn i {
    margin-left: 8px;
}

/* Harita */
.map-container {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border: 5px solid #fff;
}

.map-container iframe {
    width: 100%;
    height: 400px;
    border: none;
    display: block;
}

/* Mobil Düzenlemeler */
@media (max-width: 991px) {
    .contact-hero {
        padding-top: 120px;
    }
    .contact-info-wrapper {
        margin-bottom: 50px;
    }
    .contact-form-wrapper {
        padding: 30px 20px;
    }
}
/* =========================================
   SSS (FAQ) SAYFASI ÖZEL STİLLERİ - BAŞLANGIÇ
   ========================================= */

/* Hero Alanı */
.faq-hero {
    background: url('../images/services-left-dec.png') left bottom no-repeat, linear-gradient(135deg, #ffffff 0%, #f0f6ff 100%);
    padding: 160px 0 80px 0;
    text-align: center;
    position: relative;
    margin-bottom: 0;
}

.faq-hero h1 {
    font-size: 42px;
    font-weight: 800;
    color: #2a2a2a;
    margin-bottom: 15px;
}

.faq-hero p {
    font-size: 18px;
    color: #7a7a7a;
    max-width: 700px;
    margin: 0 auto;
    line-height: 1.6;
}

/* SSS Bölümü Arka Planı */
.faq-section-modern {
    padding: 60px 0 120px 0;
    background-color: #f9fbff;
}

/* --- Modern Accordion Tasarımı --- */

/* Kart Yapısı */
.modern-accordion .accordion-item {
    background: #ffffff;
    border: 1px solid #eef2f7 !important;
    border-radius: 16px !important;
    margin-bottom: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    overflow: hidden;
    transition: all 0.3s ease;
    padding: 0 !important; /* Eski CSS'teki padding'i sıfırlıyoruz */
}

/* Kart Hover Efekti */
.modern-accordion .accordion-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(75, 142, 241, 0.1);
    border-color: #dbeafe !important;
}

/* Başlık Butonu */
.modern-accordion .accordion-button {
    background-color: #fff;
    color: #333;
    font-size: 17px;
    font-weight: 600;
    padding: 20px 25px !important;
    box-shadow: none !important;
    border: none;
    border-radius: 0 !important;
    display: flex;
    align-items: center;
}

/* Buton Odaklanma (Mavi çizgiyi kaldır) */
.modern-accordion .accordion-button:focus {
    box-shadow: none !important;
    border-color: transparent;
}

/* Açık Durumdaki Buton */
.modern-accordion .accordion-button:not(.collapsed) {
    background-color: #f4f9ff !important; /* Açık mavi */
    color: #4b8ef1 !important;
    box-shadow: none !important;
}

/* Soru İkonu Kutusu */
.modern-accordion .faq-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #edf2f7;
    color: #7a7a7a;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 16px;
    transition: all 0.4s ease;
    flex-shrink: 0;
}

/* Açık Durumda İkon */
.modern-accordion .accordion-button:not(.collapsed) .faq-icon {
    background: #4b8ef1;
    color: #fff;
    transform: rotate(360deg);
}

/* Bootstrap'in varsayılan ok işaretini kaldırıyoruz (Kendi ikonumuzu kullandık) */
.modern-accordion .accordion-button::after {
    background-image: none !important;
    width: auto; 
    content: "\f107"; /* FontAwesome aşağı ok */
    font-family: 'FontAwesome';
    transform: none;
    margin-left: auto;
    color: #ccc;
    transition: transform 0.3s ease;
}

.modern-accordion .accordion-button:not(.collapsed)::after {
    transform: rotate(180deg);
    color: #4b8ef1;
}

/* Cevap Alanı */
.modern-accordion .accordion-body {
    padding: 0 !important;
    background: #fff;
}

.modern-accordion .answer-content {
    padding: 10px 30px 30px 76px; /* İkon hizasından başlat */
    color: #666;
    line-height: 1.7;
    font-size: 15px;
    border-top: 1px solid #f0f0f0;
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .faq-hero {
        padding-top: 130px;
    }
    .faq-hero h1 {
        font-size: 30px;
    }
    .modern-accordion .answer-content {
        padding: 20px; /* Mobilde girintiyi azalt */
    }
}
/* =========================================
   SSS (FAQ) BOXED STYLE - YENİ TASARIM
   ========================================= */

/* Kartın Kendisi */
.faq-card {
    background: #ffffff !important; /* Arka plan kesinlikle beyaz */
    border-radius: 12px;
    margin-bottom: 20px; /* Kartlar arası boşluk */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* Hafif gölge */
    border: 1px solid #e1e5eb; /* İnce gri çerçeve */
    overflow: hidden;
}

/* Butonun Kendisi (Soru Kısmı) */
.faq-btn {
    width: 100%;
    text-align: left;
    background: #fff !important;
    border: none;
    padding: 20px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Butona Tıklanınca veya Hover Olunca */
.faq-btn:hover {
    background-color: #f8fbff !important; /* Çok açık mavi */
}

.faq-btn:not(.collapsed) {
    background-color: #f0f6ff !important; /* Açılınca arka plan değişsin */
    border-bottom: 1px solid #e1e5eb;
}

/* Soru Metni */
.faq-title {
    font-size: 18px;
    font-weight: 700;
    color: #333 !important; /* Yazı kesinlikle koyu gri */
    margin: 0;
}

/* Aktif olduğunda soru rengi mavi olsun */
.faq-btn:not(.collapsed) .faq-title {
    color: #4b8ef1 !important;
}

/* Sağdaki + / - İkonu */
.faq-toggle-icon {
    width: 30px;
    height: 30px;
    background: #eff2f7;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #4b8ef1;
    transition: 0.3s;
    font-size: 14px;
}

/* Açılınca İkon Dönüşsün */
.faq-btn:not(.collapsed) .faq-toggle-icon {
    background: #4b8ef1;
    color: #fff;
    transform: rotate(45deg); /* Artı işaretini çarpı yapar */
}

.faq-btn:not(.collapsed) .faq-toggle-icon i::before {
    content: "\f00d"; /* FontAwesome 'X' ikonu opsiyonel, döndürmek yeterli */
}

/* Cevap Kısmı */
.faq-body {
    background-color: #fff !important;
    color: #666 !important; /* Cevap yazısı gri */
    padding: 25px;
    font-size: 16px;
    line-height: 1.7;
}

/* Mobil Uyum */
@media (max-width: 768px) {
    .faq-title {
        font-size: 16px;
    }
    .faq-btn {
        padding: 15px;
    }
}
/* =========================================
   REFERANS SAYFASI - GÜNCELLENMİŞ MARQUEE
   ========================================= */

/* Hero Alanı */
.ref-hero {
    background: url('../images/services-left-dec.png') left bottom no-repeat, linear-gradient(135deg, #ffffff 0%, #f0f6ff 100%);
    padding: 160px 0 80px 0;
    text-align: center;
    position: relative;
}

.ref-hero h1 {
    font-size: 42px;
    font-weight: 800;
    color: #2a2a2a;
    margin-bottom: 15px;
}

.ref-hero p {
    font-size: 18px;
    color: #7a7a7a;
    max-width: 700px;
    margin: 0 auto;
}

/* MARQUEE ALANI */
.marquee-section {
    padding: 50px 0 100px;
    background: #fff;
    overflow: hidden; 
    width: 100%;
}

.marquee-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Kenarlarda yumuşak geçiş efekti */
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    margin-bottom: 25px;
}

.marquee-track {
    display: inline-flex; /* Yan yana diz */
    gap: 30px; 
    padding: 10px 0;
    width: max-content; /* İÇERİK KADAR GENİŞ OLSUN (ÖNEMLİ!) */
    will-change: transform; /* Performans artırır */
}

/* LOGO KARTLARI */
.logo-card {
    width: 160px; 
    height: 90px;
    background: #ffffff;
    border: 1px solid #f0f0f0;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
    flex-shrink: 0; 
}

.logo-card img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: grayscale(100%) opacity(0.6);
    transition: all 0.4s ease;
    pointer-events: none; 
    user-select: none;
}

.logo-card:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    border-color: #4b8ef1;
    z-index: 10;
}

.logo-card:hover img {
    filter: grayscale(0%) opacity(1);
}

/* ANİMASYONLAR */

/* Sola Kayan */
.scroll-left {
    animation: scrollLeft 80s linear infinite; /* Hızı buradan ayarlayabilirsin */
}

/* Sağa Kayan */
.scroll-right {
    animation: scrollRight 80s linear infinite;
}

/* Sola Kayan (Yavaş) */
.scroll-left-slow {
    animation: scrollLeft 90s linear infinite;
}

/* SOLA KAYMA MANTIĞI */
@keyframes scrollLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } 
}

/* SAĞA KAYMA MANTIĞI */
@keyframes scrollRight {
    0% { transform: translateX(-50%); } /* Başlangıçta şeridin yarısı solda gizli */
    100% { transform: translateX(0); } /* Sona gelince başa dön */
}

/* İSTATİSTİK ALANI */
.stats-section {
    padding: 60px 0;
    background: #f9fbff;
    margin-top: 30px;
    border-top: 1px solid #eee;
}

.stat-item h3 {
    font-size: 48px;
    font-weight: 800;
    color: #4b8ef1;
    margin-bottom: 10px;
}

.stat-item p {
    font-size: 18px;
    color: #555;
    font-weight: 500;
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
    .logo-card {
        width: 120px;
        height: 70px;
        padding: 10px;
    }
    .ref-hero h1 {
        font-size: 32px;
    }
    .scroll-left, .scroll-right, .scroll-left-slow {
        animation-duration: 40s; /* Mobilde daha hızlı hissedilmesi için */
    }
}
/* =========================================
   ÇALIŞMA SÜRECİ (PROCESS) STİLLERİ
   ========================================= */
.process-section {
    padding: 100px 0;
    background-color: #ffffff;
    position: relative;
}

.process-item {
    text-align: center;
    padding: 30px 20px;
    position: relative;
    transition: all 0.3s ease;
    border-radius: 20px;
    background: #a1a1a170;
    margin-top: 30px;
}

.process-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.step-number {
    font-size: 60px;
    font-weight: 900;
    color: #ffffff00; /* Çok silik numara arka planda */
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
    line-height: 1;
}

.icon-bg {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #4b8ef1 0%, #2a5298 100%);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    color: #fff;
    font-size: 30px;
    position: relative;
    z-index: 2;
    box-shadow: 0 8px 20px rgba(75, 142, 241, 0.3);
    transition: all 0.4s ease;
}

.process-item:hover .icon-bg {
    transform: rotateY(360deg);
}

.process-item h5 {
    font-size: 20px;
    font-weight: 700;
    color: #2a2a2a;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
}

.process-item p {
    font-size: 15px;
    color: #ffffff;
    line-height: 1.6;
    position: relative;
    z-index: 2;
}

/* Ok işareti veya bağlantı çizgisi (Opsiyonel - Büyük ekranlarda) */
@media (min-width: 992px) {
    .process-item::after {
        content: '';
        position: absolute;
        top: 70px; /* İkon hizası */
        right: -50%;
        width: 100%;
        height: 2px;
        background: url('../images/line-dec.png') repeat-x; /* Veya dashed border */
        border-top: 2px dashed #e0e6ed;
        z-index: 0;
        opacity: 0.5;
    }
    
    /* Son elemandan çizgiyi kaldır */
    .col-lg-3:last-child .process-item::after {
        display: none;
    }
}

/* =========================================
   CTA (HAREKETE GEÇ) BÖLÜMÜ
   ========================================= */
.cta-section {
    padding: 80px 0;
    background-color: #f9fbff;
}

.cta-content {
    background: url('../images/pro-table-bottom.png') right center no-repeat, linear-gradient(135deg, #4b8ef1 0%, #2563eb 100%);
    background-size: contain, cover;
    padding: 60px;
    border-radius: 30px;
    box-shadow: 0 15px 40px rgba(37, 99, 235, 0.2);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.cta-content h2 {
    font-size: 36px;
    font-weight: 800;
    margin-bottom: 15px;
    color: #fff;
}

.cta-content h2 em {
    font-style: normal;
    color: #ffd700; /* Altın sarısı vurgu */
}

.cta-content p {
    font-size: 18px;
    color: rgba(255,255,255,0.9);
    margin-bottom: 0;
    max-width: 90%;
}

.cta-btn {
    display: inline-block;
    background: #fff;
    color: #2563eb;
    font-size: 18px;
    font-weight: 700;
    padding: 18px 40px;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.cta-btn:hover {
    background: #0f1724;
    color: #fff;
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.cta-btn i {
    margin-left: 10px;
}

/* Mobil Uyum */
@media (max-width: 991px) {
    .cta-content {
        padding: 40px 30px;
        text-align: center;
    }
    .cta-content p {
        margin: 0 auto 30px auto;
    }
    .cta-btn-container {
        margin-top: 20px;
    }
    .process-item::after {
        display: none; /* Mobilde çizgileri gizle */
    }
}
/* =========================================
   WEB PROJELERİ SAYFASI ÖZEL STİLLERİ
   ========================================= */

/* --- HERO ALANI --- */
.web-hero {
    padding: 180px 0 100px 0;
    /* Hafif teknolojik grid arka planı */
    background-color: #ffffff;
    background-image: radial-gradient(#4b8ef1 0.5px, transparent 0.5px), radial-gradient(#4b8ef1 0.5px, #ffffff 0.5px);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    background-attachment: fixed; /* Parallax hissi */
    position: relative;
    overflow: hidden;
}

/* Arka planı yumuşatmak için overlay */
.web-hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;   
}

.web-hero .container { position: relative; z-index: 2; }

.badge-tech {
    background: rgb(255 255 255 / 63%);
    color: #000000;
    padding: 8px 16px;
    border-radius: 30px;
    font-weight: 700;
    font-size: 13px;
    display: inline-block;
    margin-bottom: 20px;
    border: 1px solid rgba(75, 142, 241, 0.2);
}

.web-hero h1 {
    font-size: 50px;
    font-weight: 900;
    color: #0f1724;
    line-height: 1.2;
    margin-bottom: 20px;
}

.web-hero h1 em {
    font-style: normal;
    color: #ffffff;
    position: relative;
}

/* Altı çizili efekt */
.web-hero h1 em::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 0;
    width: 100%;
    height: 10px;
    background: rgba(75, 142, 241, 0.2);
    z-index: -1;
}

.web-hero p {
    font-size: 18px;
    color: #ffffff;
    max-width: 500px;
    margin-bottom: 35px;
}

.btn-primary-glow {
    background: #000000;
    color: rgb(255, 255, 255);
    padding: 15px 35px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0px 0px 40px rgb(0 255 227);
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-primary-glow:hover {
    background: #2a5298;
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(75, 142, 241, 0.6);
    color: #fff;
}

/* Sağdaki Görsel Alanı */
.hero-image-wrapper {
    position: relative;
    text-align: center;
}

.main-screen img {
    max-width: 100%;
    animation: floatImage 6s ease-in-out infinite;
}

/* Yüzen Küçük Kartlar */
.floating-code-card {
    position: absolute;
    background: white;
    padding: 15px 25px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 14px;
    color: #333;
    z-index: 3;
    animation: floatCard 5s ease-in-out infinite;
}

.floating-code-card i { font-size: 20px; color: #4b8ef1; }

.card-1 { top: 10%; left: 0; animation-delay: 0s; }
.card-2 { bottom: 15%; right: 0; animation-delay: 2.5s; }

@keyframes floatImage {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

@keyframes floatCard {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(15px); }
}

/* --- ÇÖZÜMLER (KARTLAR) --- */
.web-solutions-section {
    padding: 80px 0;
    background: #f9fbff;
}

.solution-card {
    padding: 40px 30px;
    border-radius: 20px;
    border: 1px solid #edf2f7;
    transition: all 0.4s ease;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-color: #4b8ef1;
    background: linear-gradient(181deg, #7391ff 0%, #000000 100%);
    box-shadow: 0 10px 30px rgba(75, 142, 241, 0.1);
}

/* Hover Efekti */
.solution-card:hover {
    transform: translateY(-10px);
    border-color: #4b8ef1;
    box-shadow: 0 20px 40px rgba(75, 142, 241, 0.15);
}

.card-icon-layer {
    width: 70px;
    height: 70px;
    background: #f0f6ff;
    color: #4b8ef1;
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin-bottom: 25px;
    transition: all 0.3s ease;
}

.solution-card:hover .card-icon-layer {
    background: #4b8ef1;
    color: #fff;
    transform: rotateY(360deg);
}

.solution-card h3 {
    font-size: 22px;
    font-weight: 800;
    color: #2a2a2a;
    margin-bottom: 15px;
}

.solution-card p {
    color: #ffffff;
    margin-bottom: 25px;
    line-height: 1.6;
}

.feature-list li {
    font-size: 14px;
    color: #ffffff;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.feature-list li i {
    color: #4b8ef1;
    font-size: 12px;
}

/* Vurgulu Kart (Orta) */
.highlight-card {
    border-color: #4b8ef1;
    background: linear-gradient(181deg, #7391ff 0%, #000000 100%);
    box-shadow: 0 10px 30px rgba(75, 142, 241, 0.1);
}

/* --- TEKNİK ÖZELLİKLER (YATAY) --- */
.tech-specs-section {
    padding: 100px 0;
    background: #fff;
}

.tech-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-top: 30px;
}

.tech-item {
    background: #f9fbff;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: 600;
    color: #333;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #eee;
    transition: 0.3s;
}

.tech-item:hover {
    background: #4b8ef1;
    color: #fff;
    border-color: #4b8ef1;
}

.specs-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.spec-box {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    background: rgba(255, 255, 255, 0.42);
    padding: 20px;
    border-radius: 15px;
    box-shadow: inset 0px 0px 20px 10px rgb(121 199 255);
    border: 1px solid #f9f9f9;
    transition: 0.3s;
}

.spec-box:hover {
    transform: translateX(10px);
    border-left: 4px solid #4b8ef1;
}

.spec-box .icon {
    width: 50px;
    height: 50px;
    background: #eef5ff;
    color: #4b8ef1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.spec-box h5 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 5px;
}

.spec-box p {
    font-size: 14px;
    margin: 0;
}

/* --- CTA (ALT) --- */
.web-cta {
    padding: 60px 0;
    background: #fff;
}

.web-cta .cta-inner {
    background: linear-gradient(135deg, #2a2a2a 0%, #000000 100%);
    border-radius: 30px;
    padding: 60px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* Süsleme Çizgileri */
.web-cta .cta-inner::before {
    content: '';
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: repeating-linear-gradient(
        45deg,
        transparent,
        transparent 10px,
        rgba(255,255,255,0.03) 10px,
        rgba(255,255,255,0.03) 20px
    );
    z-index: 0;
}

.web-cta h2, .web-cta p, .web-cta a {
    position: relative;
    z-index: 2;
}

.web-cta h2 { font-size: 36px; font-weight: 800; margin-bottom: 15px; }
.web-cta p { font-size: 18px; color: #aaa; margin-bottom: 30px; }

.btn-white-pulse {
    background: #fff;
    color: #000;
    padding: 15px 40px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    display: inline-block;
    animation: pulseBtn 2s infinite;
}

@keyframes pulseBtn {
    0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
/* =========================================
   MOBİL UYGULAMA SAYFASI ÖZEL STİLLERİ
   ========================================= */

/* --- HERO ALANI --- */
.mobile-hero {
    padding: 160px 0 100px 0;
    background: linear-gradient(135deg, #f0f4f8 0%, #ffffff 100%);
    position: relative;
    overflow: hidden;
}

.badge-mobile {
    background: #eef2ff;
    color: #4b8ef1;
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 14px;
    display: inline-block;
    margin-bottom: 20px;
    border: 1px solid #dbeafe;
}

.mobile-hero h1 {
    font-size: 48px;
    font-weight: 900;
    color: #0f1724;
    line-height: 1.2;
    margin-bottom: 20px;
}

.mobile-hero h1 em {
    font-style: normal;
    background: -webkit-linear-gradient(99deg, #0067ff, #ffffff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.mobile-hero p {
    font-size: 18px;
    color: #ffffff;
    margin-bottom: 35px;
    max-width: 500px;
}

.btn-gradient-mobile {
    background: linear-gradient(90deg, #4b8ef1 0%, #3b82f6 100%);
    color: #fff;
    padding: 14px 30px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(59, 130, 246, 0.3);
    transition: all 0.3s ease;
    display: inline-block;
}

.btn-gradient-mobile:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(59, 130, 246, 0.4);
    color: #fff;
}

/* --- CSS TELEFON MOCKUP --- */
.phone-mockup-wrapper {
    position: relative;
    height: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.phone-frame {
    width: 260px;
    height: 520px;
    border: 12px solid #1e293b;
    border-radius: 35px;
    background: #fff;
    position: absolute;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    z-index: 2;
}

.notch {
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 25px;
    background: #1e293b;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    z-index: 3;
}

.screen-content {
    background: #f1f5f9;
    width: 100%; height: 100%;
    padding-top: 40px;
    padding-left: 15px; padding-right: 15px;
}

/* İskelet (Skeleton) UI Tasarımı */
.app-header {
    width: 100%; height: 60px;
    background: #e2e8f0;
    border-radius: 10px;
    margin-bottom: 15px;
}

.skeleton-block {
    width: 100%; height: 120px;
    background: #cbd5e1;
    border-radius: 10px;
    margin-bottom: 15px;
}

.skeleton-line {
    width: 100%; height: 15px;
    background: #e2e8f0;
    border-radius: 4px;
    margin-bottom: 8px;
}

.skeleton-line.short { width: 60%; }

.skeleton-circle {
    width: 50px; height: 50px;
    background: #4b8ef1;
    border-radius: 50%;
    position: absolute;
    bottom: 20px; right: 20px;
}

/* Yüzen Telefon Animasyonları */
.floating-phone-1 {
    right: 20%;
    animation: floatPhone 6s ease-in-out infinite;
}

.floating-phone-2 {
    right: 5%;
    top: 10%;
    width: 240px; height: 480px;
    border-color: #334155;
    opacity: 0.5;
    z-index: 1;
    animation: floatPhone 6s ease-in-out infinite reverse; /* Ters yönde hareket */
}

@keyframes floatPhone {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* --- HİZMET KARTLARI --- */
.mobile-services-section {
    padding: 80px 0;
    background: #fff;
}

.app-card {
    padding: 35px;
    border-radius: 20px;
    background: #8f8f8f3d;
    border: 1px solid #f1f5f9;
    text-align: center;
    transition: all 0.3s ease;
}

.app-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.ios-card:hover { border-bottom: 4px solid #000; }
.android-card:hover { border-bottom: 4px solid #3ddc84; }
.cross-card:hover { border-bottom: 4px solid #4b8ef1; }

.app-icon {
    font-size: 45px;
    margin-bottom: 20px;
}
.ios-card .app-icon { color: #000; }
.android-card .app-icon { color: #3ddc84; }
.cross-card .app-icon { color: #4b8ef1; }

.app-card h3 {
    font-size: 20px; font-weight: 700; margin-bottom: 15px;
}

.app-features {
    text-align: left;
    margin-top: 20px;
    color: #000000;
    font-size: 14px;
}

.app-features li { margin-bottom: 8px; }
.app-features i { color: #4b8ef1; margin-right: 8px; }


/* --- TEKNOLOJİ YIĞINI (DARK) --- */
.mobile-tech-stack {
    padding: 80px 0;
    background: #0f1724; /* Koyu Lacivert */
    color: #fff;
}

.mobile-tech-stack h2 { color: #000000; font-weight: 700; margin-bottom: 15px; }
.mobile-tech-stack p { color: #ffffff; margin-bottom: 30px; }

.t-badge {
    display: inline-block;
    background: rgba(255,255,255,0.1);
    padding: 8px 16px;
    border-radius: 8px;
    margin-right: 10px; margin-bottom: 10px;
    font-size: 14px;
    border: 1px solid rgba(255,255,255,0.2);
}

.tech-icons-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.tech-box {
    background: rgba(255,255,255,0.05);
    padding: 20px;
    border-radius: 15px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    transition: 0.3s;
}

.tech-box i {
    font-size: 30px; margin-bottom: 10px; color: #4b8ef1;
}

.tech-box:hover {
    background: #4b8ef1;
    transform: translateY(-5px);
}
.tech-box:hover i { color: #fff; }

/* --- SÜREÇ (ADIMLAR) --- */
.app-process {
    padding: 80px 0;
    background: #fff;
}

.process-steps {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 40px;
    flex-wrap: wrap;
}

.step {
    text-align: center;
    position: relative;
    width: 120px;
}

.step-num {
    width: 50px; height: 50px;
    background: #4b8ef1;
    color: #fff;
    font-weight: 700;
    border-radius: 50%;
    line-height: 50px;
    margin: 0 auto 15px;
    box-shadow: 0 0 0 5px #e0f2fe;
}

.step h5 { font-size: 16px; font-weight: 700; color: #ffffff; }

.step-line {
    flex-grow: 1;
    height: 2px;
    background: #e2e8f0;
    max-width: 100px;
    margin-bottom: 30px;
}

/* Mobil CTA */
.mobile-cta { padding: 60px 0; }
.m-cta-inner {
    background: linear-gradient(135deg, #1e293b 0%, #0f1724 100%);
    padding: 50px;
    border-radius: 25px;
    color: #fff;
}
.m-cta-inner h2 { color: #fff; font-weight: 800; }
.m-cta-inner p { color: #94a3b8; }

.btn-app-store-style {
    display: inline-block;
    background: #4b8ef1;
    color: #fff;
    padding: 15px 35px;
    border-radius: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
}
.btn-app-store-style:hover {
    background: #fff;
    color: #4b8ef1;
}

/* Mobil Uyum */
@media (max-width: 991px) {
    .phone-mockup-wrapper { height: 350px; margin-top: 50px; }
    .phone-frame { width: 200px; height: 400px; }
    .floating-phone-2 { display: none; } /* Mobilde arkadakini gizle */
    .step-line { display: none; }
    .process-steps { gap: 20px; }
}
/* =========================================
   MODERN HERO ALANI STİLLERİ
   ========================================= */

.main-banner {
    position: relative;
    padding: 180px 0 120px 0;
    overflow: hidden;
    background: linear-gradient(135deg, #ffffff 0%, #f0f6ff 100%); /* Hafif tech mavisi */
    z-index: 1;
}

/* Canvas (Parçacık Efekti) */
#hero-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1; /* En arkada dursun */
    opacity: 0.6; /* Çok baskın olmasın */
}

/* Badge (Etiket) */
.hero-badge {
    display: inline-block;
    background: rgba(75, 142, 241, 0.1);
    color: #4b8ef1;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 20px;
    border: 1px solid rgba(75, 142, 241, 0.2);
}

/* Başlık */
.hero-title {
    font-size: 52px;
    font-weight: 900;
    color: #000000;;
    line-height: 1.2;
    margin-bottom: 20px;
}

/* Daktilo Efekti Yazısı */
.typewriter-text {
    color: #000000;
    position: relative;
}

.typewriter-text::after {
    content: '|';
    position: absolute;
    right: -10px;
    color: #4b8ef1;
    animation: blinkCursor 0.8s infinite;
}

@keyframes blinkCursor {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Açıklama Yazısı */
.hero-desc {
    font-size: 18px;
    color: #64748b;
    margin-bottom: 40px;
    max-width: 550px;
    line-height: 1.7;
}

/* Butonlar */
.hero-buttons {
    display: flex;
    gap: 15px;
}

.btn-hero-primary {
    background: linear-gradient(90deg, #000000 0%, #719eff 100%);
    color: #fff !important;
    padding: 16px 36px;
    border-radius: 50px;
    font-weight: 700;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
    transition: all 0.3s ease;
}

.btn-hero-primary:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(37, 99, 235, 0.4);
}

.btn-hero-outline {
    background: transparent;
    color: #ffffff !important;
    padding: 16px 36px;
    border-radius: 50px;
    font-weight: 700;
    border: 2px solid #e2e8f0;
    transition: all 0.3s ease;
}

.btn-hero-outline:hover {
    border-color: #4b8ef1;
    background: rgba(75, 142, 241, 0.05);
}

/* Sağdaki Görsel Alanı */
.hero-image-wrapper {
    position: relative;
    z-index: 2;
    animation: floatHero 6s ease-in-out infinite;
}

.hero-image-wrapper img {
    width: 100%;
    max-width: none !important; /* Sınırı kaldırıyoruz */
    z-index: 2;
    position: relative;
    transform: scale(1.3); /* Görseli %30 büyütür (Sihirli kod bu) */
}

/* Mobilde çok taşmaması için küçük ekran ayarı */
@media (max-width: 991px) {
    .hero-image-wrapper img {
        transform: scale(1.1); /* Mobilde sadece %10 büyüsün */
    }
}

/* Arkadaki Parlayan Daire */
.glow-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(75,142,241,0.2) 0%, rgba(255,255,255,0) 70%);
    z-index: 1;
    border-radius: 50%;
}

@keyframes floatHero {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}

/* Mobil Uyum */
@media (max-width: 991px) {
    .main-banner { padding-top: 140px; text-align: center; }
    .hero-title { font-size: 36px; }
    .hero-desc { margin: 0 auto 30px auto; }
    .hero-buttons { justify-content: center; margin-bottom: 50px; }
    .hero-image-wrapper { max-width: 80%; margin: 0 auto; }
}

/* =========================================
   İYS SAYFASI ÖZEL STİLLERİ (MAVİ KONSEPT)
   ========================================= */

/* --- HERO --- */
.iys-hero {
    padding: 180px 0 100px 0;
    background: #f8fbff;
    position: relative;
    overflow: hidden;
}

/* Arka Plan Ağı */
.network-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: 
        linear-gradient(rgba(75, 142, 241, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(75, 142, 241, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    z-index: 0;
}

.badge-legal {
    background: #eef5ff; /* Açık Mavi */
    color: #4b8ef1;      /* Cronoc Mavisi */
    padding: 8px 16px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 13px;
    display: inline-block;
    margin-bottom: 20px;
    border-left: 4px solid #4b8ef1;
}

.iys-hero h1 {
    font-size: 46px;
    font-weight: 900;
    color: #0f1724;
    line-height: 1.2;
    margin-bottom: 20px;
}

.iys-hero h1 em {
    font-style: normal;
    color: #0046ad; /* Mavi vurgu */
}

.iys-hero p {
    font-size: 18px;
    color: #ffffff;
    max-width: 550px;
    margin-bottom: 35px;
}

.btn-iys-primary {
    background: linear-gradient(135deg, #4b8ef1 0%, #2563eb 100%); /* Site geneliyle uyumlu gradient */
    color: #fff;
    padding: 15px 35px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
    box-shadow: 0px 0px 15px 0px rgb(0 0 0);
}

.btn-iys-primary:hover {
    background: #1d4ed8;
    color: #fff;
    transform: translateY(-3px);
}

/* --- İYS GÖRSEL ANİMASYONU --- */
.iys-visual {
    position: relative;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.central-hub {
    width: 100px; height: 100px;
    background: #4b8ef1; /* Merkez Mavi */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #ffffff;
    position: relative;
    z-index: 2;
    box-shadow: 0 0 30px rgba(75, 142, 241, 0.4);
}

.pulse-ring {
    position: absolute;
    width: 100%; height: 100%;
    border-radius: 50%;
    border: 2px solid #4b8ef1;
    animation: pulseRing 2s infinite;
}

@keyframes pulseRing {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(2); opacity: 0; }
}

.orbit-item {
    position: absolute;
    background: #fff;
    padding: 10px 20px;
    border-radius: 20px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    font-weight: 700;
    color: #455a64;
    display: flex;
    align-items: center;
    gap: 8px;
    animation: orbitFloat 4s ease-in-out infinite;
}

.orbit-item i { color: #4b8ef1; } /* İkonlar Mavi */

.item-1 { top: 20%; left: 10%; animation-delay: 0s; }
.item-2 { top: 10%; right: 10%; animation-delay: 1s; }
.item-3 { bottom: 20%; left: 30%; animation-delay: 2s; }

@keyframes orbitFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* --- ÖZELLİK KARTLARI --- */
.iys-features-section {
    padding: 80px 0;
    background: #fff;
}

.iys-card {
    background: #fff;
    padding: 35px 25px;
    border: 1px solid #eceff1;
    border-radius: 10px;
    text-align: center;
    transition: all 0.3s ease;
}

.iys-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(75, 142, 241, 0.15); /* Mavi gölge */
    border-color: #4b8ef1;
}

.iys-card.highlight {
    background: #f0f6ff; /* Çok açık mavi zemin */
    border-color: #dbeafe;
}

.iys-card .icon-box {
    width: 60px; height: 60px;
    background: #eef5ff; /* Açık mavi kutu */
    color: #4b8ef1; /* Mavi ikon */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 20px;
}

.iys-card h3 {
    font-size: 20px;
    font-weight: 700;
    color: #37474f;
    margin-bottom: 15px;
}

.iys-card p { font-size: 15px; color: #78909c; }

/* --- ENTEGRASYON AKIŞI --- */
.integration-flow {
    padding: 80px 0;
    background: #f8fbff;
}

.flow-list li {
    margin-bottom: 15px;
    font-size: 16px;
    color: #000000;
    display: flex;
    align-items: center;
    gap: 10px;
}

.flow-list li i { color: #000000; font-size: 20px; }

.flow-diagram {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ababab1a;
    padding: 40px 20px;
    border-radius: 15px;
    box-shadow: -1px -1px 40px 11px #4b8ef1;
}

.flow-box {
    background: #eceff1;
    padding: 15px;
    border-radius: 8px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    color: #000000;
    width: 30%;
    border: 2px solid transparent;
}

.flow-box.cronoc {
    background: #4b8ef1; /* Cronoc kutusu mavi */
    color: #fff;
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(75, 142, 241, 0.3);
}

.flow-arrow {
    color: #b0bec5;
    font-size: 20px;
    animation: flowPulse 2s infinite;
}

@keyframes flowPulse {
    0%, 100% { opacity: 0.5; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(5px); }
}

/* --- CTA (YAPTIRIM UYARISI - KOYU LACİVERT/TECHNOLOGY) --- */
/* Eskiden kırmızıydı, şimdi sitenin koyu temasına uyumlu yapıldı */
.iys-cta { padding: 60px 0; }
.iys-cta-inner {
    background: linear-gradient(135deg, #0f1724 0%, #1e293b 100%); /* Dark Navy */
    padding: 50px;
    border-radius: 15px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

.iys-cta-inner h2 { color: #fff; font-weight: 800; font-size: 32px; margin-bottom: 15px; }
.iys-cta-inner p { color: #94a3b8; margin-bottom: 30px; font-size: 18px; }

.icon-big {
    font-size: 100px;
    color: rgba(255,255,255,0.05);
    position: absolute;
    top: -20px; left: -20px;
    transform: rotate(-20deg);
}

.btn-white-solid {
    background: #fff;
    color: #0f1724;
    padding: 14px 40px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.3s;
}

.btn-white-solid:hover {
    background: #4b8ef1;
    color: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}

/* Mobil Uyum */
@media (max-width: 991px) {
    .iys-hero { text-align: center; padding-top: 140px; }
    .iys-visual { height: 300px; margin-top: 50px; }
    .flow-diagram { flex-direction: column; gap: 20px; }
    .flow-arrow { transform: rotate(90deg); margin: 10px 0; }
    .flow-box { width: 80%; }
}
/* =========================================
   İYS BİLGİ GRID ALANI (YENİ)
   ========================================= */

.iys-info-grid-section {
    padding: 100px 0;
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
}

/* --- SOL TARAF (KARTLAR) --- */
.info-cards-wrapper {
    position: relative;
    padding: 20px;
}

/* Arkadaki Süsleme (Blob) */
.blob-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(75,142,241,0.15) 0%, rgba(255,255,255,0) 70%);
    z-index: 0;
    border-radius: 50%;
    animation: pulseBlob 4s infinite alternate;
}

@keyframes pulseBlob {
    0% { transform: translate(-50%, -50%) scale(1); }
    100% { transform: translate(-50%, -50%) scale(1.2); }
}

/* Kart Tasarımı */
.info-grid-card {
    background: #fff;
    padding: 30px 20px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    border: 1px solid #f0f6ff;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    height: 100%;
    text-align: center; /* Ortala */
}

/* Hover Efekti */
.info-grid-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(75, 142, 241, 0.15);
    border-color: #4b8ef1;
}

/* İkon Tasarımı */
.info-grid-card .grid-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #eef5ff 0%, #ffffff 100%);
    border: 1px solid #dbeafe;
    color: #4b8ef1;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto 20px auto;
    transition: 0.3s;
}

.info-grid-card:hover .grid-icon {
    background: #4b8ef1;
    color: #fff;
    transform: rotateY(180deg); /* Dönme efekti */
}

.info-grid-card h5 {
    font-size: 17px;
    font-weight: 700;
    color: #2a2a2a;
    margin-bottom: 10px;
}

.info-grid-card p {
    font-size: 13px;
    color: #6c757d;
    line-height: 1.5;
    margin: 0;
}

/* Asimetrik Yerleşim İçin (Masonry Hissi) */
.mt-n4 {
    margin-top: -1.5rem !important; /* Kartı yukarı çeker */
}

/* --- SAĞ TARAF (METİNLER) --- */
.info-text-content {
    position: relative;
}

.info-block {
    margin-bottom: 40px;
    padding-left: 25px;
    border-left: 3px solid #eef2f6; /* Sol Çizgi */
    transition: 0.3s;
}

.info-block:hover {
    border-left-color: #4b8ef1; /* Hover'da çizgi mavi olur */
}

.info-block h3 {
    font-size: 22px;
    font-weight: 800;
    color: #0f1724;
    margin-bottom: 15px;
}

.info-block .blue-text {
    color: #4b8ef1;
}

.info-block p {
    font-size: 16px;
    color: #555;
    line-height: 1.7;
}

.text-link {
    color: #4b8ef1;
    font-weight: 700;
    text-decoration: none;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    transition: 0.2s;
}

.text-link:hover {
    color: #2a5298;
    gap: 12px; /* Ok sağa kayar */
}

/* Mobil Uyum */
@media (max-width: 991px) {
    .iys-info-grid-section {
        padding: 60px 0;
    }
    
    .info-cards-wrapper .col-6 {
        width: 100%; /* Mobilde kartlar alt alta olsun */
        margin-top: 20px !important;
    }
    
    .info-block {
        padding-left: 0;
        border-left: none;
        border-top: 3px solid #eef2f6;
        padding-top: 20px;
    }
    
    .info-block:hover {
        border-top-color: #4b8ef1;
    }
}
/* =========================================
   İYS BİLGİ GRID ALANI (GÜNCELLENMİŞ BOYUTLAR)
   ========================================= */

.iys-info-grid-section {
    padding: 120px 0; /* Üst-alt boşluğu artırdık */
    background-color: #ffffff;
    position: relative;
    overflow: hidden;
}

/* --- SOL TARAF (KARTLAR) --- */
.info-cards-wrapper {
    position: relative;
    padding: 10px;
}

/* Arkadaki Süsleme (Blob) */
.blob-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px; /* Büyüttük */
    height: 400px;
    background: radial-gradient(circle, rgba(75,142,241,0.12) 0%, rgba(255,255,255,0) 70%);
    z-index: 0;
    border-radius: 50%;
    animation: pulseBlob 5s infinite alternate;
}

@keyframes pulseBlob {
    0% { transform: translate(-50%, -50%) scale(1); }
    100% { transform: translate(-50%, -50%) scale(1.1); }
}

/* Kart Tasarımı */
.info-grid-card {
    background: #cccccc5c;
    padding: 40px 30px; /* İç boşluğu artırdık */
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.08); /* Gölgeyi belirginleştirdik */
    border: 1px solid #f0f6ff;
    position: relative;
    z-index: 1;
    transition: all 0.3s ease;
    height: 100%;
    min-height: 280px; /* Kart boyunu sabitledik */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Hover Efekti */
.info-grid-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 50px rgba(75, 142, 241, 0.15);
    border-color: #4b8ef1;
}

/* İkon Tasarımı */
.info-grid-card .grid-icon {
    width: 80px; /* İkonu büyüttük */
    height: 80px;
    background: linear-gradient(135deg, #f0f8ff 0%, #ffffff 100%);
    border: 1px solid #dbeafe;
    color: #4b8ef1;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px; /* İkon boyutu */
    margin-bottom: 25px;
    transition: 0.3s;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.info-grid-card:hover .grid-icon {
    background: #4b8ef1;
    color: #fff;
    transform: rotateY(180deg);
}

.info-grid-card h5 {
    font-size: 20px; /* Başlığı büyüttük */
    font-weight: 700;
    color: #2a2a2a;
    margin-bottom: 15px;
}

.info-grid-card p {
    font-size: 15px;
    color: #ffffff;
    line-height: 1.6;
    margin: 0;
}

/* Asimetrik Yerleşim (Masaüstü İçin) */
@media (min-width: 768px) {
    .mt-md-5 { margin-top: 3rem !important; } /* 2. kart aşağı */
    .mt-md-n4 { margin-top: -1.5rem !important; } /* 3. kart yukarı */
}

/* --- SAĞ TARAF (METİNLER) --- */
.info-text-content {
    position: relative;
    padding-left: 20px;
}

.info-block {
    margin-bottom: 50px;
    padding-left: 30px;
    border-left: 4px solid #eef2f6;
    transition: 0.3s;
}

.info-block:hover {
    border-left-color: #4b8ef1;
}

.info-block h3 {
    font-size: 26px; /* Başlığı büyüttük */
    font-weight: 800;
    color: #0f1724;
    margin-bottom: 15px;
}

.info-block .blue-text {
    color: #4b8ef1;
}

.info-block p {
    font-size: 16px;
    color: #ffffff;
    line-height: 1.8;
}

.text-link {
    color: #4b8ef1;
    font-weight: 700;
    text-decoration: none;
    font-size: 16px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 15px;
    transition: 0.2s;
}

.text-link:hover {
    color: #2a5298;
    gap: 12px;
}

/* Mobil Uyum */
@media (max-width: 991px) {
    .iys-info-grid-section { padding: 60px 0; }
    
    .info-grid-card { min-height: auto; padding: 30px; margin-bottom: 20px; }
    
    .mt-md-5, .mt-md-n4 { margin-top: 0 !important; } /* Mobilde hizalamayı sıfırla */
    
    .info-block {
        padding-left: 20px;
        border-left: 3px solid #eef2f6;
        margin-bottom: 30px;
    }
}
/* =========================================
   İYS VIA BÖLÜMÜ (YENİ EKLENEN)
   ========================================= */

.iys-via-section {
    padding: 100px 0;
    background-color: #ffffff; /* Beyaz zemin */
    position: relative;
    overflow: hidden;
}

/* --- SOL TARAF (İÇERİK) --- */
.via-content {
    position: relative;
    z-index: 2;
}

.via-badge {
    background: rgb(0 0 0 / 34%);
    color: #ffffff;
    font-weight: 700;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 20px;
    display: inline-block;
    margin-bottom: 15px;
    border: 1px solid rgba(75, 142, 241, 0.2);
}

.via-content h2 {
    font-size: 32px;
    font-weight: 800;
    color: #0f1724;
    margin-bottom: 15px;
    line-height: 1.3;
}

.via-content .blue-text {
    color: #4b8ef1;
}

.via-content .subtitle {
    font-size: 16px;
    color: #ffffff;
    margin-bottom: 30px;
}

/* Bilgi Kutusu (İYS VIA Nedir?) */
.via-info-box {
    background: rgba(255, 255, 255, 0.85);
    border-left: 4px solid #000000;
    padding: 20px;
    border-radius: 8px;
}

.via-info-box h5 {
    font-size: 18px;
    font-weight: 700;
    color: #2b7bff;
    margin-bottom: 10px;
}

.via-info-box p {
    font-size: 15px;
    color: #000000;
    margin: 0;
    line-height: 1.6;
}

/* Liste (Neler Yapabilirsiniz?) */
.via-capabilities h5 {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 20px;
}

.via-list {
    list-style: none;
    padding: 0;
}

.via-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 12px;
    font-size: 15px;
    color: #000000;
    line-height: 1.5;
}

.via-list li i {
    position: absolute;
    left: 0;
    top: 4px;
    color: #04ffd3; /* Onay Yeşili */
    font-size: 16px;
}

.via-list li strong {
    color: #ffffff;
}

/* --- SAĞ TARAF (GÖRSEL) --- */
.via-visual-card {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 450px;
}

/* Arka Plan Dairesi */
.visual-bg-circle {
    position: absolute;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(75,142,241,0.1) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    z-index: 0;
    animation: pulseVia 6s infinite alternate;
}

@keyframes pulseVia {
    0% { transform: scale(1); }
    100% { transform: scale(1.1); }
}

/* Cihaz Görünümü (Mockup) */
.device-mockup {
    width: 320px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    border: 1px solid #e2e8f0;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

.screen-header {
    background: #f1f5f9;
    padding: 12px 15px;
    display: flex;
    gap: 6px;
    border-bottom: 1px solid #e2e8f0;
}

.dot { width: 10px; height: 10px; border-radius: 50%; }
.red { background: #ef4444; }
.yellow { background: #f59e0b; }
.green { background: #10b981; }

.screen-body {
    padding: 30px;
    background: #f8fafc;
    height: 350px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* İzin Diyaloğu (İçerik) */
.permission-dialog {
    background: #fff;
    padding: 25px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    width: 100%;
}

.dialog-icon {
    width: 50px; height: 50px;
    background: #eef5ff;
    color: #4b8ef1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin: 0 auto 15px;
}

.permission-dialog h6 { font-size: 16px; font-weight: 700; margin-bottom: 10px; color: #1e293b; }
.permission-dialog p { font-size: 13px; color: #64748b; margin-bottom: 20px; }

.dialog-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.btn-mockup {
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.btn-mockup.decline { background: #f1f5f9; color: #64748b; }
.btn-mockup.accept { background: #4b8ef1; color: #fff; }

/* Yüzen Kartlar */
.stat-card {
    position: absolute;
    background: #fff;
    padding: 12px 20px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 10px;
    animation: floatStat 4s ease-in-out infinite;
}

.stat-card i { font-size: 20px; }
.stat-card strong { font-size: 16px; color: #1e293b; display: block; line-height: 1; }
.stat-card small { font-size: 11px; color: #64748b; }

.float-1 {
    top: 40px; right: -20px;
    border-left: 4px solid #10b981;
}
.float-1 i { color: #10b981; }

.float-2 {
    bottom: 40px; left: -20px;
    border-left: 4px solid #4b8ef1;
    animation-delay: 2s;
}
.float-2 i { color: #4b8ef1; }

@keyframes floatStat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* Mobil Uyum */
@media (max-width: 991px) {
    .via-visual-card { height: 400px; margin-top: 40px; }
    .stat-card { right: 0; left: auto; } /* Mobilde taşmasın */
    .float-2 { left: 0; right: auto; }
}

/* =========================================
   KOLAY İZİN TOPLAMA BÖLÜMÜ (YENİ)
   ========================================= */

.easy-permission-section {
    padding: 100px 0;
    background-color: #f8fbff; /* Hafif mavi arka plan */
    position: relative;
    overflow: hidden;
}

/* --- SOL TARAF (DASHBOARD GÖRSELİ) --- */
.permission-dashboard-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400px;
}

/* Arka Plan Şekli */
.dashboard-bg-shape {
    position: absolute;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(75,142,241,0.15) 0%, rgba(255,255,255,0) 70%);
    border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    z-index: 0;
    animation: morphShape 8s infinite alternate ease-in-out;
}

@keyframes morphShape {
    0% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: rotate(0deg); }
    100% { border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; transform: rotate(10deg); }
}

/* Dashboard Kartı */
.dashboard-card {
    width: 320px;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.1);
    border: 1px solid #eef2f6;
    z-index: 2;
    position: relative;
    overflow: hidden;
}

.dash-header {
    background: #f1f5f9;
    padding: 15px;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e2e8f0;
}

.dash-dot { width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; }
.dash-title { margin-left: auto; font-size: 12px; font-weight: 600; color: #64748b; }

.dash-body {
    padding: 25px;
}

/* İstatistik Kutuları */
.stat-row {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.stat-box {
    flex: 1;
    background: #f8fafc;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.stat-box small { font-size: 11px; color: #64748b; display: block; margin-bottom: 5px; }
.stat-box strong { font-size: 18px; color: #0f1724; display: block; margin-bottom: 8px; }

.progress-bar {
    height: 4px;
    background: #e2e8f0;
    border-radius: 2px;
    overflow: hidden;
}

.progress-bar .fill { height: 100%; background: #4b8ef1; border-radius: 2px; }
.progress-bar .fill.red { background: #ef4444; }

/* Grafik Alanı */
.chart-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 100px;
    padding-top: 20px;
    border-bottom: 1px solid #e2e8f0;
}

.chart-bar {
    width: 15%;
    background: #e2e8f0;
    border-radius: 4px 4px 0 0;
    position: relative;
    transition: 0.3s;
}

.chart-bar.active { background: #4b8ef1; }

.chart-bar span {
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: #64748b;
}

/* Yüzen Rozet */
.floating-badge {
    position: absolute;
    bottom: 20px;
    right: -20px;
    background: #fff;
    padding: 10px 20px;
    border-radius: 30px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #10b981;
    border: 1px solid #e2e8f0;
    animation: floatBadge 3s ease-in-out infinite;
}

@keyframes floatBadge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* --- SAĞ TARAF (METİNLER) --- */
.permission-text-content h2 {
    font-size: 28px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 30px;
    line-height: 1.4;
}

.permission-text-content .blue-text { color: #4b8ef1; }

.permission-feature-list {
    list-style: none;
    padding: 0;
}

.permission-feature-list li {
    position: relative;
    padding-left: 35px;
    margin-bottom: 15px;
    font-size: 15px;
    color: #ffffff;
    line-height: 1.6;
}

.permission-feature-list li i {
    position: absolute;
    left: 0;
    top: 5px;
    font-size: 18px;
    color: #4b8ef1; /* Mavi İkonlar */
    background: #eef5ff;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.permission-feature-list li strong {
    color: #438aff;
    font-weight: 700;
}

/* Mobil Uyum */
@media (max-width: 991px) {
    .permission-dashboard-wrapper { margin-bottom: 40px; }
    .permission-text-content h2 { font-size: 24px; }
}

/* =========================================
   MEVZUAT BÖLÜMÜ STİLLERİ
   ========================================= */

.legislation-grid-section {
    padding: 80px 0 100px;
    background-color: #ffffff;
}

.legis-card {
    background: #fff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 30px 20px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    transition: all 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}

/* Hover Efekti */
.legis-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 40px rgba(75, 142, 241, 0.12);
    border-color: #dbeafe;
}

/* Üst Çizgi Süslemesi */
.legis-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; width: 100%; height: 4px;
    background: linear-gradient(90deg, #4b8ef1, #2563eb);
    opacity: 0;
    transition: 0.3s;
}

.legis-card:hover::before {
    opacity: 1;
}

/* İkon Alanı */
.legis-icon {
    width: 60px;
    height: 60px;
    background: #f8fbff;
    color: #4b8ef1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin: 0 auto 20px;
    transition: 0.3s;
}

.legis-card:hover .legis-icon {
    background: #4b8ef1;
    color: #fff;
    transform: rotateY(360deg);
}

/* Başlık ve Metin */
.legis-card h5 {
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 12px;
    line-height: 1.4;
}

.legis-card p {
    font-size: 14px;
    color: #64748b;
    margin-bottom: 25px;
    flex-grow: 1;
}

/* Buton */
.legis-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px;
    background: #4b8ef1; /* Cronoc Mavisi */
    color: #fff !important;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: 0.3s;
    box-shadow: 0 4px 10px rgba(75, 142, 241, 0.2);
}

.legis-btn:hover {
    background: #2a5298;
    box-shadow: 0 6px 15px rgba(75, 142, 241, 0.3);
}

.legis-btn i {
    font-size: 12px;
    transition: transform 0.2s;
}

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

/* =========================================
   İYS "SİZE ULAŞALIM" KARTI (YENİ)
   ========================================= */

.iys-contact-section {
    padding: 80px 0 120px;
    background-color: #f8fbff;
}

.contact-card-wrapper {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.08); /* Derin gölge */
    border: 1px solid #f0f0f0;
}

/* --- SOL TARAF (BİLGİLER) --- */
.contact-info-side {
    background: linear-gradient(135deg, #0f1724 0%, #1e293b 100%); /* Koyu Lacivert */
    color: #fff;
    padding: 50px 40px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.content-box {
    position: relative;
    z-index: 2;
}

.contact-info-side h3 {
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.3;
}

.contact-info-side p {
    color: #cbd5e1;
    font-size: 16px;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* Özellik Listesi */
.support-features .feature {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    font-weight: 600;
    color: #fff;
}

.support-features .feature i {
    color: #4b8ef1;
    font-size: 18px;
    background: rgba(255,255,255,0.1);
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
}

.contact-details p {
    margin-bottom: 10px;
    font-size: 15px;
    display: flex; align-items: center; gap: 10px;
}
.contact-details i { color: #4b8ef1; }

/* Arka Plan Deseni */
.bg-pattern {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-image: radial-gradient(rgba(255,255,255,0.1) 1px, transparent 1px);
    background-size: 20px 20px;
    opacity: 0.3;
    z-index: 1;
}

/* --- SAĞ TARAF (FORM) --- */
.contact-form-side {
    padding: 50px 40px;
    background: #fff;
}

.form-header h4 {
    font-size: 24px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 10px;
}

.form-header p {
    color: #64748b;
    font-size: 15px;
    margin-bottom: 30px;
}

/* Form Elemanları */
.cronoc-form .input-group {
    position: relative;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    background: #f8fafc;
    transition: 0.3s;
}

.cronoc-form .input-group:focus-within {
    border-color: #4b8ef1;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(75, 142, 241, 0.1);
}

.input-icon {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    z-index: 2;
}

.textarea-group .input-icon { top: 20px; }

.cronoc-form .form-control {
    border: none;
    background: transparent;
    padding: 12px 15px 12px 45px; /* İkon boşluğu */
    color: #334155;
    font-size: 15px;
    height: 50px;
}

.cronoc-form textarea.form-control {
    height: auto;
}

.cronoc-form .form-control:focus {
    box-shadow: none;
}

/* Buton */
.btn-submit-block {
    width: 100%;
    background: linear-gradient(90deg, #4b8ef1 0%, #2563eb 100%);
    color: #fff;
    border: none;
    padding: 15px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
    display: flex; align-items: center; justify-content: center; gap: 10px;
}

.btn-submit-block:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.3);
}

.form-note {
    font-size: 12px;
    color: #94a3b8;
    text-align: center;
}

/* Mobil Uyum */
@media (max-width: 991px) {
    .contact-info-side { padding: 40px 30px; text-align: center; }
    .support-features .feature { justify-content: center; }
    .contact-details { justify-content: center; }
    .contact-form-side { padding: 40px 20px; }
}