/* Custom styles for Pay theme - Add custom modifications here */

/* Slick Slider Core CSS */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: '';
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

/* Slick Dots */
.slick-dots {
  position: relative;
  display: block !important;
  width: 100%;
  padding: 0;
  margin: 20px auto 0;
  list-style: none;
  text-align: center;
}

.slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer;
}

.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent;
}

.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
  opacity: 1;
}

.slick-dots li button:before {
  font-size: 12px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: '•';
  text-align: center;
  opacity: 0.25;
  color: #67ffd1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before {
  opacity: 0.75;
  color: #67ffd1;
}

/* Testimonials Specific */
.testimonials_slider_ul {
  display: block !important;
  list-style: none;
  margin: 0;
  padding: 0;
}

.testimonials_slider_ul li {
  display: block;
  margin: 0;
  padding: 0;
}

.testimonials_slider_ul .slick-slide {
  text-align: center;
  opacity: 1;
}

.testimonials_slider .hr_dots {
  margin: 20px 0;
}

.testimonials_slider .hr_dots span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #67ffd1;
  margin: 0 5px;
  opacity: 0.6;
}

/* Custom pagination for testimonials */
.testimonials_slider .slider_pagination {
  text-align: center;
  margin-top: 30px;
}

.testimonials_slider .slider_pagination .slick-dots {
  margin: 0;
}

.testimonials_slider .slider_pagination .slick-dots li button:before {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.3);
}

.testimonials_slider .slider_pagination .slick-dots li.slick-active button:before {
  color: #67ffd1;
}

/* Side Slide Menu Animation */
#Side_slide {
  transition: right 0.3s ease-out;
  -webkit-transition: right 0.3s ease-out;
  -moz-transition: right 0.3s ease-out;
  -o-transition: right 0.3s ease-out;
  background: rgba(0, 0, 0, 0.3) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

body.side-slide-opened #Side_slide.open {
  right: 0px !important;
}

#body_overlay {
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-out;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  background: rgba(0, 0, 0, 0.3) !important;
}

#body_overlay.open {
  opacity: 1;
  visibility: visible;
  display: block !important;
}

/* Prevent body scrolling when side slide is open */
body.side-slide-opened {
  overflow: hidden;
}


/* ===== HYDRATION & IMAGE LOADING FIXES ===== */


/* Force correct layout for services page features */
.page-services .column.mcb-column.one-third .column_attr[style*="background-image"],
body.page-services .column.mcb-column.one-third .column_attr[style*="background-image"] {
  padding: 5px 0 0 60px !important;
}

/* Fix equal height sections on services */
.page-services .section.mcb-section.equal-height-wrap .wrap,
body.page-services .section.mcb-section.equal-height-wrap .wrap {
  display: flex;
  align-items: center;
}

.page-services .section.mcb-section.equal-height-wrap .wrap.one-second,
body.page-services .section.mcb-section.equal-height-wrap .wrap.one-second {
  width: 50%;
  padding: 0 2%;
}


/* ===== SERVICES PAGE LAYOUT FIX ===== */

/* Disable jQuery equal height for specific sections */
.equal-height-disable.equal-height-wrap .wrap {
  height: auto !important;
  min-height: 0 !important;
}

/* Fix spacing between title and content sections */
.page-services .section.mcb-section + .section.mcb-section.equal-height-wrap,
body.page-services .section.mcb-section + .section.mcb-section.equal-height-wrap {
  margin-top: 0 !important;
}

/* Ensure consistent spacing regardless of JS timing */
.page-services .section.mcb-section.equal-height-wrap[style*="padding-top"],
body.page-services .section.mcb-section.equal-height-wrap[style*="padding-top"] {
  padding-top: 40px !important;
}

/* Override jQuery height calculations on services page */
.page-services .section.equal-height-wrap .section_wrapper > .wrap,
body.page-services .section.equal-height-wrap .section_wrapper > .wrap {
  height: auto !important;
  min-height: 0 !important;
}

/* Force specific spacing for 360 Panel Özellikleri section */
.page-services .section.mcb-section + .section.equal-height-wrap.equal-height-disable,
body.page-services .section.mcb-section + .section.equal-height-wrap.equal-height-disable {
  margin-top: 60px !important;
  padding-top: 60px !important;
}

/* Prevent accounting.png overlap */
.page-services .section.equal-height-wrap.equal-height-disable:first-of-type,
body.page-services .section.equal-height-wrap.equal-height-disable:first-of-type {
  margin-top: 0 !important;
  padding-top: 60px !important;
}

/* Force jQuery mfn_equalH_wrap to ignore these sections */
.equal-height-disable .wrap:before,
.equal-height-disable .wrap:after {
  content: '' !important;
  display: table !important;
  clear: both !important;
}

.equal-height-disable .wrap {
  display: block !important;
  overflow: visible !important;
}

/* ===== RESPONSIVE DESIGN - CLEAN VERSION ===== */


/* Portrait Mode - Hero section boşluk düzeltmesi */
@media only screen and (max-width: 767px) and (orientation: portrait) {
  /* Hero section padding'ini azalt - basit selector */
  .section.mcb-section:first-child {
    padding-top: 10px !important; /* 160px → 60px */
    padding-bottom: 160px !important; /* 160px → 60px */
  }
  
  /* Clients section mobile - Container width fix */
  .section.mcb-section .section_wrapper {
    width: 100% !important;
    padding: 0 5px !important;
  }
  
  /* Clients section mobile - FORCE HORIZONTAL */
  .section.mcb-section ul.clients {
    display: flex !important;
    gap: 2px !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    justify-content: flex-start !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  .section.mcb-section ul.clients::-webkit-scrollbar {
    display: none;
  }
  
  .section.mcb-section ul.clients li {
    width: auto !important;
    flex: 0 0 auto !important;
    flex-shrink: 0 !important;
    float: none !important;
    margin: 0 !important;
  }
  
  .section.mcb-section ul.clients .client_wrapper {
    min-height: 40px !important;
    padding: 5px 8px !important;
    margin: 0 !important;
    background: transparent !important;
  }
  
  .section.mcb-section ul.clients .client_wrapper img {
    max-height: 32px !important;
    min-height: 24px !important;
    height: 32px !important;
    width: auto !important;
  }
  
  /* SSL badge mobile - daha küçük */
  .section.mcb-section ul.clients .client_wrapper i.icon-lock {
    font-size: 20px !important;
  }
  
  .section.mcb-section ul.clients .client_wrapper span {
    font-size: 11px !important;
  }
}

/* Landscape Mode - clearfix-new adjustment */
@media only screen and (max-width: 767px) and (orientation: landscape) {
  .clearfix-new {
    margin-top: -120px !important; /* Landscape'de daha fazla kompansasyon */
  }
}


/* Mobile Design (max-width: 1239px) */
@media only screen and (max-width: 1239px) {
  /* Header spacing cleanup */
  .header_placeholder {
    height: 0 !important;
    min-height: 0 !important;
    display: none;
  }
  
  #Header_wrapper {
    margin-bottom: 0px !important;
  }
  
  /* Clearfix-new div için spacing ayarları */
  .clearfix-new {
    margin-top: 50px !important; /* Hero section'ın üst padding'ini kompanse et */
    margin-bottom: 5px;
    height: 0;
  }
}

/* ===== PACKAGES PAGE RESPONSIVE FIX ===== */
/* 768px - 1024px arası: Pricing cards için sıkışma önleme */
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  /* Packages page pricing cards padding azalt */
  body.page-packages .column_attr[style*="padding"] {
    padding: 30px 25px 25px !important; /* 50px 50px 35px → 30px 25px 25px */
  }
  
  /* Professional plan (ortadaki büyük card) özel ayar */
  body.page-packages .column_attr[style*="marginTop"] {
    padding: 35px 25px 25px !important; /* Professional için biraz daha fazla */
    margin-top: 15px !important; /* 30px → 15px */
  }
  
  /* Pricing text boyutlarını azalt */
  body.page-packages .google_font[style*="fontSize"] {
    font-size: 40px !important; /* 48px → 40px */
    line-height: 40px !important; /* 48px → 40px */
  }
  
  /* Button'ları daha kompakt yap */
  body.page-packages .button.button_size_2 {
    padding: 1px 2px !important; /* Default'tan daha küçük */
    font-size: 13px !important;
  }
  
  /* Feature list text'i biraz küçült */
  body.page-packages .column_attr p {
    font-size: 14px !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
  }
  
  /* Clients section tablet */
  ul.clients .client_wrapper {
    min-height: 65px !important;
    padding: 15px 20px !important;
  }
  
  ul.clients .client_wrapper img {
    max-height: 50px !important;
    min-height: 30px !important;
  }
}


/* ===== COOKIE BANNER STYLES (from root.tsx) ===== */

/* Cookie banner slide-up animation */
.animate-slide-up {
  animation: slideUp 1.4s ease-out;
  z-index: 999999 !important;
  position: fixed !important;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Force cookie banner above everything */
.cookie-banner-container {
  z-index: 999999 !important;
  position: fixed !important;
  pointer-events: auto !important;
}

/* Responsive cookie banner */
@media (max-width: 640px) {
  .cookie-banner-container {
    left: 16px !important;
    right: 16px !important;
    bottom: 32px !important;
    margin-left: 0 !important;
    width: auto !important;
    max-width: none !important;
  }
}

/* Extra margin for very small screens (iPhone SE, etc.) */
@media (max-width: 375px) {
  .cookie-banner-container {
    bottom: 40px !important;
  }
}

@media (min-width: 641px) and (max-width: 768px) {
  .cookie-banner-container {
    margin-left: -200px !important;
    width: 400px !important;
  }
}

/* Home Page - homefix1 alignment (Desktop only) */
@media only screen and (min-width: 768px) {
  .homefix1 {
    margin-top: -100px !important;
  }
}

/* Clients Section - Custom Override for Footer */
ul.clients {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 20px !important;
}

ul.clients li {
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
}

ul.clients .client_wrapper {
  height: auto !important;
  min-height: 80px !important;
  padding: 20px 30px !important;
  line-height: normal !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

ul.clients .client_wrapper img {
  max-height: 60px !important;
  min-height: 40px !important;
  width: auto !important;
  position: static !important;
  transform: none !important;
}