/*!
 * © 2026 Post Ajans | www.postajans.com.tr
 * Developer: Berat Celik
*/
@import url('https://fonts.googleapis.com/css2?family=Special+Gothic+Expanded+One&display=swap');
@import url('fonts.css');
:root {
  /* Colors: */
  --color-0069A7: #0069A7;
  --color-4B6272: #4B6272;
  --color-F8F8F8: #F8F8F8;
  --color-2e2e2d: #2e2e2d;
  --color-BEACA7: #BEACA7;
  --color-DAE0E2: #DAE0E2;
  --color-F3F5F6: #F3F5F6;
  --color-E3F1F6: #E3F1F6;
  --color-E3F1F7: #E3F1F7;
  --color-F7F8F8: #F7F8F8;
  --color-F1FAFA: #F1FAFA;
  
  --color-fff: #fff;
 
  /* Font Family */
  --ff-gothic: "Special Gothic Expanded One", sans-serif;
  --ff-nouvel: 'NouvelR', sans-serif;
}

body{ font-family: var(--ff-nouvel) !important;}
a {text-decoration: none !important;}

/*** Properties ***/
.site-container { width: 90%; margin: 0 auto;}
.site-margin{margin-top: 5%; margin-bottom: 5%;}
.site-padding{padding-top: 7%; padding-bottom: 7%;}
/*** Properties End ***/

/* Font-Sizes */
.fs-256 { 
  font-size: clamp(80px, 13vw, 256px); 
  line-height: clamp(80px, 13.5vw, 270px); 
}

.fs-108 { 
  font-size: clamp(56px, 5.5vw, 108px); 
  line-height: clamp(64px, 6vw, 120px); 
}

.fs-72 { 
  font-size: clamp(40px, 3.8vw, 72px); 
  line-height: clamp(48px, 4.5vw, 90px); 
}

.fs-60 { 
  font-size: clamp(34px, 3.2vw, 60px); 
  line-height: clamp(42px, 3.8vw, 72px); 
}

.fs-55 { 
  font-size: clamp(32px, 3vw, 55px); 
  line-height: clamp(40px, 3.6vw, 66px); 
}

.fs-48 { 
  font-size: clamp(28px, 2.5vw, 48px); 
  line-height: clamp(36px, 3vw, 60px); 
}

.fs-42 { 
  font-size: clamp(26px, 2.2vw, 42px); 
  line-height: clamp(34px, 2.8vw, 54px); 
}

.fs-36 { 
  font-size: clamp(22px, 1.9vw, 36px); 
  line-height: clamp(30px, 2.4vw, 48px); 
}

.fs-24 { 
  font-size: clamp(16px, 1.25vw, 24px); 
  line-height: clamp(24px, 1.8vw, 36px); 
}

.fs-20 { 
  font-size: clamp(14px, 1.05vw, 20px); 
  line-height: clamp(20px, 1.5vw, 28px); 
}

.fs-16 { 
  font-size: clamp(13px, 0.9vw, 16px); 
  line-height: clamp(18px, 1.3vw, 24px); 
}

.fs-14 { 
  font-size: clamp(12px, 0.8vw, 14px); 
  line-height: clamp(16px, 1.1vw, 20px); 
}

.fs-12 { 
  font-size: clamp(11px, 0.7vw, 12px); 
  line-height: clamp(14px, 1vw, 18px); 
}

.fw-extra-bold{font-weight: 900 !important;}

.ff-gothic{font-family: var(--ff-gothic) !important;}
.ff-nouvel{font-family: var(--ff-nouvel) !important;}
/* Font Sizes End */ 

/* Colors */
.color-0069A7{ color: var(--color-0069A7)}
.color-4B6272{ color: var(--color-4B6272)}
.color-F8F8F8{ color: var(--color-F8F8F8)}
.color-2e2e2d{ color: var(--color-2e2e2d)}
.color-BEACA7{ color: var(--color-BEACA7)}
.color-DAE0E2{ color: var(--color-DAE0E2)}
.color-F3F5F6{ color: var(--color-F3F5F6)}
.color-E3F1F6{ color: var(--color-E3F1F6)}
.color-E3F1F7{ color: var(--color-E3F1F7)}
.color-F7F8F8{ color: var(--color-F7F8F8)}

.bg-0069A7{ background-color: var(--color-0069A7)}
.bg-4B6272{ background-color: var(--color-4B6272)}
.bg-F8F8F8{ background-color: var(--color-F8F8F8)}
.bg-2e2e2d{ background-color: var(--color-2e2e2d)}
.bg-BEACA7{ background-color: var(--color-BEACA7)}
.bg-DAE0E2{ background-color: var(--color-DAE0E2)}
.bg-F3F5F6{ background-color: var(--color-F3F5F6)}
.bg-E3F1F6{ background-color: var(--color-E3F1F6)}
.bg-E3F1F7{ background-color: var(--color-E3F1F7)}
.bg-F7F8F8{ background-color: var(--color-F7F8F8)}
.bg-F1FAFA{ background-color: var(--color-F1FAFA)}
/* Colors End */

/** Buttons **/
/* .button-one{
  position: relative; display: flex; align-items: center;
  padding: 12px 20px;
  min-width: 190px;
  max-width: 210px;
  height: 48px;
  border-radius: 30px;
  overflow: hidden;
  transition: all .4s;
  z-index: 1;
}
.btn-text{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: all .4s;
  white-space: nowrap;
}
.icon-circle{
  margin-left: auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateX(-10px);
  transition: all .4s;
} */
 .button-one{
  position: relative;
  display: flex;
  align-items: center;

  padding: clamp(10px, 0.7vw, 14px) clamp(16px, 1.1vw, 24px);

  min-width: clamp(160px, 10vw, 190px);
  max-width: clamp(180px, 11vw, 210px);
  height: clamp(42px, 2.5vw, 48px);

  border-radius: clamp(24px, 1.6vw, 30px);

  overflow: hidden;
  transition: all .4s;
  z-index: 1;
}

.btn-text{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  transition: all .4s;
  white-space: nowrap;
}

.icon-circle{
  margin-left: auto;

  width: clamp(24px, 1.6vw, 30px);
  height: clamp(24px, 1.6vw, 30px);

  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transform: translateX(clamp(-8px, -0.5vw, -10px));
  transition: all .4s;
}
.button-one:hover .btn-text{transform: translateX(-90%);}
.button-one:hover .icon-circle{opacity: 1; transform: translateX(0);}

.border-white{ background-color: transparent; border: 1px solid var(--color-fff); color: var(--color-fff);}
.border-white:hover{ background-color: var(--color-2e2e2d); border: 1px solid var(--color-2e2e2d) !important; color: var(--color-fff);}

.border-DAE0E2{ background-color: transparent; border: 1px solid var(--color-DAE0E2); color: var(--color-DAE0E2);}
.border-DAE0E2:hover{ background-color: var(--color-2e2e2d); border: 1px solid var(--color-2e2e2d); color: var(--color-fff);}

.fill-0069A7{background-color: var(--color-0069A7); color: var(--color-fff); border: 1px solid var(--color-0069A7);}
/* .fill-0069A7:hover{background-color: var(--color-fff); color: var(--color-0069A7);} */

.fill-0069A7 .icon-circle{background-color: var(--color-2e2e2d);}

.button-two{
  padding: 12px 30px;
  border-radius: 30px;
  transition: all .4s;
}

.circle{
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center;
  justify-content: center;
}
/** Buttons End **/

/* Menu */
.navbar {
  background-color: transparent!important;
  height: 130px;
  position: absolute !important;
}
.logo {width: 200px;}
.navbar .nav-item {padding: 0 35px; font-size: 14px;}
.navbar .nav-link {color: var(--color-F8F8F8); transition: all .4s !important;}
.navbar .nav-link:hover {color: var(--color-0069A7) !important;}
.navbar .nav-link:focus {color: var(--color-0069A7) !important;}

.navbar.colored{position: relative !important;}
.navbar.colored .nav-link {color: var(--color-0069A7); transition: all .4s !important;}
.navbar.colored .flag-border{background-color: #DDDDDD}
.dropdown-menu {
  position: absolute;
  z-index: -1;
  top: 100%;
  left: 0;
  border-radius: 20px !important;
  background-color: rgba(255,255,255,.3) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid var(--color-4b9ea6) !important;
  transition: all .4s !important;
}
.dropdown-item:focus,.dropdown-item:hover {
  transition: all .4s !important;
  color: var(--color-0069A7) !important;
  background-color: transparent !important
}
.nav-item.dropdown:hover .dropdown-menu {
  display: block !important;
  position: absolute;
  z-index: 10;
  min-width: 210px;
}
.navbar-toggler {
  padding: 0;
  line-height: 0;
  border: none !important;
  background-color: var(--color-0069A7) !important;
  color: var(--color-fff) !important;
  border-radius: 50px !important;
  width: 48px !important;
  height: 48px !important;
}
.navbar-toggler:focus {box-shadow: none !important;}
/* .search-btn{
  width: 30px; height: 30px;
  border-radius: 50%;
  color: var(--color-4b9ea6) !important;
  border: 1px solid var(--color-4b9ea6) !important;
  margin-right: -25px;
} */
.flag-wrap{
  width: 48px;
  height: 48px;
  z-index: 10;
  transition: all .4s;
}
.flag-border{
  background-color: transparent;
  /* border: 1px solid var(--color-4b9ea6); */
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  transition: all 1s;

  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  text-align: center;
}
.flag-border:hover{background-color: var(--color-ffffff);}
.flag-border > a{
  width: 48px;
  height: 48px;
  padding: 10px;
  display: block;
  color: var(--color-fff) !important;
}
.langs{
  display: flex;
  flex-direction: column;
  max-height: 0;
  overflow: hidden;
  transition: all .4s
}

.flag-border:hover .langs{
  max-height: 300px;
  transition: all 1s;
}
.langs a{
  width: 48px;
  height: 48px;
  padding: 10px;
  color: var(--color-fff) !important;
}
/* Menu End */

/* Slider */
.main-slider, .slider-item, .slider-item img, .slider-item video{ height: 100vh; overflow: hidden;}
.slider-overlay{
  z-index: 1;
  position: absolute;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  opacity: .43;
  background-color: #6E6E6E;
  mix-blend-mode: multiply;
}
.slider-img{ object-fit: cover; }
.slider-item video{ object-fit: cover; object-position: center center; width: 100vw}

.slider-text-box{
  color: var(--color-F8F8F8);
  position: absolute;
  left: 15%;
  top: 50%;
  transform: translateY(-50%);
  width: 40%;
  z-index: 2;
}
.slider-btn{
  width: clamp(36px, 2.5vw, 48px);
  height: clamp(36px, 2.5vw, 48px);
  border: 1px solid var(--color-fff);
  color: rgba(255,255,255,.6);
  background-color: transparent;
  border-radius: 50%;
  transition: all .4s;
}
.slider-btn:hover{background-color: var(--color-fff); color: var(--color-2e2e2d);}

.slider-bottom{
  position: absolute;
  bottom: 15%;
  left: 15%;
  right: 15%;
}
.slider-social-media{
  color: var(--color-ffffff);
  position: absolute;
  left: 0;
  z-index: 2;
  font-size: 20px;
}
.slider-social-media a{
  color: var(--color-fff);
  margin: 0 20px 0 0;
  transition: all .4s;
}
.slider-social-media a:hover{
  color: var(--color-0069A7);
}
.slider-blur{
  height: 200px;
  position: absolute; 
  z-index: 1; 
  width: 90%;
  left: 50%;
  transform: translateX(-50%);
  bottom: 50px;

  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);

  -webkit-mask-image: url('/assets/images/slider/HPSYSTEMS.svg');
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;

  mask-image: url('/assets/images/slider/HPSYSTEMS.svg');
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
/* Slider End */
.pages-link{
  background-color: transparent;
  padding: 30px 30px 30px 0px;
  display: block;
  border-radius: 16px;
  transition: all .4s;
  color: var(--color-4B6272);
}
.pages-link:hover{
  background-color: var(--color-E3F1F6);
  padding: 30px 30px 30px 50px;
  display: block;
  border-radius: 16px;
  transition: all .4s;
}

.category-card{
  width: 100%;
  height: auto !important;
  border-radius: 24px;
  aspect-ratio: 16/19;
}
.category-card img{
  width: 100%;
  height: auto !important;
  border-radius: 24px;
  aspect-ratio: 16/19;
  object-fit: cover;
}

.category-overlay{
  width: 100%;
  height: auto !important;
  border-radius: 24px;
  aspect-ratio: 16/19;
  position: absolute;
  z-index: 2;
  background: linear-gradient(193deg, #0069A700 50%, #0069A7 100%);
  transition: all .4s;
}
.category-card:hover .category-overlay{
  background: linear-gradient(193deg, #0069A700 0%, #0069A7 100%);
}

.parallax{
  width: 100%;
  height: 750px;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
}

.parallax-content{
  position: absolute;
  z-index: 1;
  left: 5%;
  width: 40%;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 40px 50px;
  border-radius: 24px;
  bottom: 50px;
}

/* Media Card */
.media-card {
  height: 285px;
  border-radius: 16px;
  position: relative;
}

.media-card img {
  width: 100%;
  object-fit: cover;
  height: 285px;
  border-radius: 16px;
}

.media-overlay {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: #535353;
  opacity: .8;
  mix-blend-mode: multiply;
  border-radius: 16px;
}
/* Media Card End */

footer a {
  color: var(--color-0069A7);
  transition: all .4s;
}
footer ul>li>.fs-12 {color: var(--color-0069A7);}
.footer-social-media a {
  margin: 0 10px;
  font-size: 20px;
}

footer input, .search-form input {
  background-color: #D1ECFF;
  border-radius: 15px;
  padding: 15px 25px;
  width: 100%;
  border: none;
  margin: 10px 0;
}
footer input:focus {outline: 1px solid var(--color-0069A7);}
footer input::placeholder {color: var(--color-0069A7);}


.page-nav{
  background-color: var(--color-F7F8F8);
  border-radius: 24px;
  padding: 15px 25px;
}
.page-nav a, .page-nav span {color: #B9B9B9; transition: all .4s;}
.page-nav a:hover{color: var(--color-0069A7);}


.counter-card{
  background-color: var(--color-E3F1F6);
  color: var(--color-0069A7);
  border-radius: 24px;
  padding: 20px 30px;
  height: 200px;
}

.counter-icon-circle{
  width: clamp(36px, 2.5vw, 48px);
  height: clamp(36px, 2.5vw, 48px);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-0069A7);
  border-radius: 50%;
}
.counter-icon-circle img{
  width: clamp(16px, 1.25vw, 24px);
  height: clamp(16px, 1.25vw, 24px);
  object-fit: contain;
}

/* Scrolling Text */
.scroll-wrapper {
  width: 100vw;
  overflow: hidden;
}

.scrolling-text {
  display: inline-flex;
  white-space: nowrap;
  animation: marquee 10s linear infinite;
  will-change: transform;
}

@keyframes marquee {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}
/* Scrolling Text End */

/* Documents */
.documents-area{
  background-color: var(--color-0069A7);
  padding: 80px 0;
}
.documents {
  height: 510px;
  background-color: var(--color-E3F1F6);
  width: 50%;
  position: absolute;
  right: 0;
  border-radius: 10px 0 0 10px;
}
.document-height {min-height: 510px;}
.files img {
  height: 350px;
  object-fit: contain;
}
.documents-area button{
  width: clamp(36px, 2.5vw, 48px);
  height: clamp(36px, 2.5vw, 48px);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-0069A7); 
  background-color: transparent;
  transition: all .4s;
  color: var(--color-0069A7);
}
.files-next:hover {
  background-color: var(--color-354248);
  color: var(--color-ffffff);
}
.docs-logo-icon{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
/* Documents End */

/** Products Page **/
.category-list {
  position: relative;
  background-color: var(--color-0069A7);
  padding: 35px 0;
  border-radius: 24px;
  position: sticky;
  top: 30px;
}
.category-list li a{
  padding: 20px 35px;
  position: relative;
  color: var(--color-fff) !important;
}
.has-sub {
  position: relative;
}
.sub-category {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background-color: var(--color-E3F1F7);
  color: var(--color-0069A7);
  padding: 20px 0;
  border-radius: 10px;
  list-style: none;
  min-width: 300px;
  z-index: 999;
}

.has-sub:hover > .sub-category {
  display: block;
}

.has-sub::after {
  content: "";
  position: absolute;
  top: 0;
  left: 100%;
  width: 15px;
  height: 100%;
}
.sub-category li a{
  padding: 10px 35px;
  position: relative;
  color: var(--color-00295d) !important;
}
.sub-category li i{opacity: 0; transition: .3s;}
.sub-category li a:hover i{opacity: 1;}
.has-sub:hover > .sub-category {display: block;}

.product-card{height: 450px; border-radius: 24px; position: relative; z-index: 0; background-color: var(--color-F1FAFA);}
.product-img{
  width: 290px !important;
  aspect-ratio: 1;
  object-fit: contain;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  mix-blend-mode: multiply;
}
.product-name{
  position: absolute;
  left: 50%;
  bottom: 30px;
  width: 90%;
  transform: translateX(-50%);
  color: var(--color-0069A7);
  text-align: center;
}
.go-btn{
  width: 47px; height: 47px;
  border-radius: 50%;
  border: 1px solid var(--color-0069A7);
  color: var(--color-0069A7);
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
}
#listView .product-card{
  padding: 20px 25px;
  transition: all .4s;
  height: 200px;
}
#listView .product-card img{
  height: 150px;
  mix-blend-mode: multiply;
  object-fit: contain;
}
/** Products Page End **/

/* Product Detail */
.p-detail-card{
  background-color: var(--color-F1FAFA);
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 24px;
  padding: 20px;
  display: flex; align-items: center; justify-content: center;
}
.p-detail-card img{
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.table-striped>tbody>tr:nth-of-type(odd)>* {--bs-table-bg-type: #0069A726 !important;}
.table tr:first-child td:first-child {border-top-left-radius: 24px;}
.table tr:first-child td:last-child {border-top-right-radius: 24px;}
.table tr:last-child td:first-child {border-bottom-left-radius: 24px;}
.table tr:last-child td:last-child {border-bottom-right-radius: 24px;}
td {color: var(--color-0069A7) !important; font-weight: bold; padding: 12px 20px !important;}
table {--bs-table-border-color: transparent !important}
/* Product Detail End */

/* Media Page */
.media-film-banner{
  height: 350px;
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.media-film-banner img{
  height: 350px;
  object-fit: cover;
}

.media-overlay {
  background: rgba(75, 158, 166, .6) 0% 0% no-repeat padding-box;
  mix-blend-mode: multiply;
  position: absolute;
  z-index: 0;
  top: 0;
  text-align: center;
  width: 100%;
  height: 100%;
  transition: all .4s;
}

/* News */
.news-card img{
  height: 320px;
  object-fit: cover;
  width: 100%;
}

.video-overlay{
  height: 320px;
  object-fit: cover;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background-color: rgba(0,0,0,.5);
}
/* News End */
/* Media Page End */

/** Contact Page **/
.contact-info i{
  color: var(--color-0069A7) !important;
}
.contact-form input, .contact-form textarea{
  width: 100%;
  border: 1px solid var(--color-0069A7);
  padding: 15px 25px;
  border-radius: 10px;
}
.contact-form input:focus, .contact-form textarea:focus{
  border: 1px solid var(--color-0069A7);
  outline: none;
}
.contact-info a{transition: all .4s; color: var(--color-2e2e2d);}
.contact-info a:hover{color: var(--color-0069A7);}
/** Contact Page End **/