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

html {
  font-display: swap;
  
}

 

input,
textarea,
select,
button {
  margin: 0;                  
  padding: 10px;                 
  border: 0;                  
  background: none;           
  color: inherit;             
  font: inherit;              
  line-height: inherit;
  outline: none;              
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

 
button {
  cursor: pointer;
  background: none;
  border: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

 
input,
textarea,
select {
  display: inline-block;
  vertical-align: middle;
}

 
textarea {
  resize: vertical;  
}

 
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

 
input[type="number"] {
  -moz-appearance: textfield;
}

 
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

 
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  display: none;
  -webkit-appearance: none;
}

 
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: none;  
}

 
:focus-visible {
  outline: 3px solid Highlight;  
  outline-offset: 2px;
}

 
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: inherit;
  -webkit-box-shadow: 0 0 0px 1000px transparent inset;
  box-shadow: 0 0 0px 1000px transparent inset;
  transition: background-color 5000s ease-in-out 0s;  
}
a{
  text-decoration: none;
}

:root {
   

   
  --primary-blue-100: #EAF8FF;  
  --primary-blue-300: #DCF6FF;  
  --primary-blue-400: #C6ECFF;
  --primary-blue-500: #00AEEE; 
  --primary-blue-600: #0978AB;
  --primary-blue-700: #005AAB;
  --primary-blue-800: #00688E;
  --primary-blue-900: #0D3355;  
  
   
  --accent-orange-400: #EF973F;
  --accent-orange-600: #D56B00;
  --accent-orange-100: #FFEFE0;  

   
  --neutral-gray-50: #CDDFE5; 
  --neutral-gray-100: #E9F4F8;  
  --neutral-gray-400: #9BB3BA;
  --neutral-gray-600: #687A81;
  --neutral-gray-700: #5A657C;
  --neutral-gray-800: #3C3C3B;
  --neutral-gray-900: #31393D;  
  --neutral-gray-950:#2C2C2C;



 
  
  --background-color: #F8F9FA;  
  --white: #ffffff;
  --black:#000000;
   
  --text-color: var(--neutral-gray-900);

  --font-family-main: 'IBM Plex Sans JP', sans-serif;


  --spacing-md: 16px;
  --spacing-lg: 24px;

  --border-radius: 8px;

  

  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --grid-columns: 12;
  --gutter: 16px;  
  --container-max-width: 1435px;
  --container-padding: 16px;


  --danger-color: #D32F2F;  
  --danger-color-light: #FFEBEE;  


  --icon-size-standart:28px;
}



@font-face {
  font-family: 'IBM Plex Sans JP';
  src: url('../assets/fonts/IBMPlexSansJP-ExtraLight.woff2') format('woff2');
  font-weight: 200;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'IBM Plex Sans JP';
  src: url('../assets/fonts/IBMPlexSansJP-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'IBM Plex Sans JP';
  src: url('../assets/fonts/IBMPlexSansJP-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'IBM Plex Sans JP';
  src: url('../assets/fonts/IBMPlexSansJP-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'IBM Plex Sans JP';
  src: url('../assets/fonts/IBMPlexSansJP-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: 'IBM Plex Sans JP';
  src: url('../assets/fonts/IBMPlexSansJP-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: block;
}


body {
  font-family: var(--font-family-main);
  color: var(--text-color);
  background-color: var(--background-color);
  margin: 0px;
}

main{
  padding-bottom:100px;
}

.container {
  width: 100%;
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
  box-sizing: border-box;
}

/* 1024px ve üzeri */
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}

/* 1280px ve üzeri */
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}

/* 1366px ve üzeri */
@media (min-width: 1366px) {
  .container {
    max-width: 1366px;
  }
}

/* 1440px ve üzeri */
@media (min-width: 1440px) {
  .container {
    max-width: 1366px; /* Talebine göre tekrar 1366 olarak sabit */
  }
}



.container-fluid{ padding-left: var(--container-padding); padding-right: var(--container-padding); max-width:100%; }


.primary-blue-500-50 { background-color: rgba(0, 174, 238, 0.5)!important; }
.primary-blue-500-35 { background-color: rgba(0, 174, 238, 0.35)!important; }
.primary-blue-500-20 { background-color: rgba(0, 174, 238, 0.2)!important; }
.primary-blue-500-10 { background-color: rgba(0, 174, 238, 0.1)!important; }
.primary-blue-400-35 { background-color: rgba(198, 236, 255, 0.35)!important; }
.primary-blue-400-20 { background-color: rgba(198, 236, 255, 0.2)!important; }
.primary-blue-700-90 { background-color: rgba(0, 90, 171, 0.90)!important; }

.primary-blue-900-5 { background-color: rgba(13, 51, 85, 0.05)!important; }

.black-55 { background-color: rgba(0, 0, 0, 0.55)!important; }

.shadow-light {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}


h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-family-main);
  font-weight: 700;  
}

h1 {
  font-size: 32px;
  line-height: 48px;
}

h2 {
  font-size: 28px;
  line-height: 42px;
  color: var(--primary-blue-500);  
  font-weight: var(--font-weight-semibold);
}

h3 {
  font-size: 26px;
  line-height: 38px;
}

h4 {
  font-size: 24px;
  line-height: 36px;
}

h5 {
  font-size: 22px;
  line-height: 30px;
}

h6 {
  font-size: 20px;
  line-height: 28px;
}

 
p {
  color: #000000;
  font-size: 18px;
  line-height: 1.6;  
  text-align: justify;
}




/* -------------------------
Row: CSS Grid kullanılarak 12 sütunlu temel yapı
------------------------- */
.row{
display: grid;
grid-template-columns: repeat(var(--grid-columns), 1fr);
gap: var(--gutter);
align-items: start;  
}
.row-5{
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: var(--gutter);
align-items: start;
}



 
.row.no-gutter{ gap: 0; }


/* -------------------------
Kolonlar - temel: .col ve .col-{n}
grid-column: span X ile çalışır
------------------------- */
.col{ min-width: 0;   }


 
.col-auto{ grid-column: auto; }


 



 
.offset-0{ grid-column-start: auto; }
.offset-1{ grid-column-start: 2; }
.offset-2{ grid-column-start: 3; }
.offset-3{ grid-column-start: 4; }
.offset-4{ grid-column-start: 5; }
.offset-5{ grid-column-start: 6; }
.offset-6{ grid-column-start: 7; }
.offset-7{ grid-column-start: 8; }
.offset-8{ grid-column-start: 9; }
.offset-9{ grid-column-start: 10; }
.offset-10{ grid-column-start: 11; }
.offset-11{ grid-column-start: 12; }


 
.order-1{ order: 1; }
.order-2{ order: 2; }
.order-3{ order: 3; }
 


 
.align-center{ align-self: center; }
.align-start{ align-self: start; }
.align-end{ align-self: end; }


 
.justify-center{ justify-items: center; }
.justify-start{ justify-items: start; }
.justify-end{ justify-items: end; }
.justify-flex-end{ justify-content: flex-end; }
.justify-flex-start{ justify-content: flex-start; }
.justify-self-center{ justify-self: center; }

/* -------------------------
Responsive: breakpoints
.col-sm-*, .col-md-*, .col-lg-*, .col-xl-*
------------------------- */
/* Mobil: default zaten yukarıdaki .col-* davranışı kullanır
Daha büyük ekranlarda farklı span isterseniz aşağıya ekleyin. */

/* ---- XS: <576px ---- */
.col-1   { grid-column: span 1; }
.col-2   { grid-column: span 2; }
.col-3   { grid-column: span 3; }
.col-4   { grid-column: span 4; }
.col-5   { grid-column: span 5; }
.col-6   { grid-column: span 6; }
.col-7   { grid-column: span 7; }
.col-8   { grid-column: span 8; }
.col-9   { grid-column: span 9; }
.col-10  { grid-column: span 10; }
.col-11  { grid-column: span 11; }
.col-12  { grid-column: span 12; }

/* ---- SM: ≥576px ---- */
@media (min-width: 576px){
  .col-sm-1   { grid-column: span 1; }
  .col-sm-2   { grid-column: span 2; }
  .col-sm-3   { grid-column: span 3; }
  .col-sm-4   { grid-column: span 4; }
  .col-sm-5   { grid-column: span 5; }
  .col-sm-6   { grid-column: span 6; }
  .col-sm-7   { grid-column: span 7; }
  .col-sm-8   { grid-column: span 8; }
  .col-sm-9   { grid-column: span 9; }
  .col-sm-10  { grid-column: span 10; }
  .col-sm-11  { grid-column: span 11; }
  .col-sm-12  { grid-column: span 12; }
}

/* ---- MD: ≥768px ---- */
@media (min-width: 768px){
  .col-md-1   { grid-column: span 1; }
  .col-md-2   { grid-column: span 2; }
  .col-md-3   { grid-column: span 3; }
  .col-md-4   { grid-column: span 4; }
  .col-md-5   { grid-column: span 5; }
  .col-md-6   { grid-column: span 6; }
  .col-md-7   { grid-column: span 7; }
  .col-md-8   { grid-column: span 8; }
  .col-md-9   { grid-column: span 9; }
  .col-md-10  { grid-column: span 10; }
  .col-md-11  { grid-column: span 11; }
  .col-md-12  { grid-column: span 12; }
}

/* ---- LG: ≥992px ---- */
@media (min-width: 992px){
  .col-lg-1   { grid-column: span 1; }
  .col-lg-2   { grid-column: span 2; }
  .col-lg-3   { grid-column: span 3; }
  .col-lg-4   { grid-column: span 4; }
  .col-lg-5   { grid-column: span 5; }
  .col-lg-6   { grid-column: span 6; }
  .col-lg-7   { grid-column: span 7; }
  .col-lg-8   { grid-column: span 8; }
  .col-lg-9   { grid-column: span 9; }
  .col-lg-10  { grid-column: span 10; }
  .col-lg-11  { grid-column: span 11; }
  .col-lg-12  { grid-column: span 12; }
}

/* ---- XL: ≥1200px ---- */
@media (min-width: 1200px){
  .col-xl-1   { grid-column: span 1; }
  .col-xl-2   { grid-column: span 2; }
  .col-xl-3   { grid-column: span 3; }
  .col-xl-4   { grid-column: span 4; }
  .col-xl-5   { grid-column: span 5; }
  .col-xl-6   { grid-column: span 6; }
  .col-xl-7   { grid-column: span 7; }
  .col-xl-8   { grid-column: span 8; }
  .col-xl-9   { grid-column: span 9; }
  .col-xl-10  { grid-column: span 10; }
  .col-xl-11  { grid-column: span 11; }
  .col-xl-12  { grid-column: span 12; }
}


 
@media (max-width: 575px){
.row-5{ grid-template-columns: repeat(1, 1fr); }
}
@media (min-width: 576px) and (max-width: 767px){
.row-5{ grid-template-columns: repeat(1, 1fr); }
}
@media (min-width: 768px) and (max-width: 991px){
.row-5{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px){
.row-5{ grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px){
  .row-5{ grid-template-columns: repeat(5, 1fr); }
  }
  

 
.m-0{ margin:0; }
.m-1{ margin:4px; }
.m-2{ margin:8px; }
.m-3{ margin:12px; }
.m-4{ margin:16px; }
.m-5{ margin:20px; }
.m-6{ margin:24px; }
.m-8{ margin:32px; }
.m-10{ margin:40px; }


 
.mx-0{ margin-left:0;margin-right:0; }
.mx-1{ margin-left:4px;margin-right:4px; }
.mx-2{ margin-left:8px;margin-right:8px; }
.mx-3{ margin-left:12px;margin-right:12px; }
.mx-4{ margin-left:16px;margin-right:16px; }
.mx-5{ margin-left:20px;margin-right:20px; }
.mx-6{ margin-left:24px;margin-right:24px; }
.mx-8{ margin-left:32px;margin-right:32px; }
.mx-10{ margin-left:40px;margin-right:40px; }


 
.my-0{ margin-top:0;margin-bottom:0; }
.my-1{ margin-top:4px;margin-bottom:4px; }
.my-2{ margin-top:8px;margin-bottom:8px; }
.my-3{ margin-top:12px;margin-bottom:12px; }
.my-4{ margin-top:16px;margin-bottom:16px; }
.my-5{ margin-top:20px;margin-bottom:20px; }
.my-6{ margin-top:24px;margin-bottom:24px; }
.my-8{ margin-top:32px;margin-bottom:32px; }
.my-10{ margin-top:40px;margin-bottom:40px; }


 
.mt-1{ margin-top:4px; } .mt-2{ margin-top:8px; } .mt-3{ margin-top:12px; } .mt-4{ margin-top:16px; } .mt-5{ margin-top:20px; } .mt-6{ margin-top:30px; } .mt-8{ margin-top:40px; } .mt-9{ margin-top:60px; } .mt-10{ margin-top:80px; }  .mt-12{margin-top: 120px;}
.mr-1{ margin-right:4px; } .mr-2{ margin-right:8px; } .mr-3{ margin-right:12px; } .mr-4{ margin-right:16px; } .mr-5{ margin-right:20px; }
.mb-1{ margin-bottom:4px; } .mb-2{ margin-bottom:8px; } .mb-3{ margin-bottom:12px; } .mb-4{ margin-bottom:16px; } .mb-5{ margin-bottom:20px; } .mb-6{ margin-bottom:30px; } .mb-8{ margin-bottom:40px; } .mb-9{ margin-bottom:40px; } .mb-10{ margin-bottom:80px; } .mb-12{margin-bottom: 120px;}
.ml-1{ margin-left:4px; } .ml-2{ margin-left:8px; } .ml-3{ margin-left:12px; } .ml-4{ margin-left:16px; } .ml-5{ margin-left:20px; }




 
.p-0{ padding:0; }
.p-1{ padding:4px; }
.p-2{ padding:8px; }
.p-3{ padding:12px; }
.p-4{ padding:16px; }
.p-5{ padding:20px; }
.p-6{ padding:24px; }
.p-8{ padding:32px; }
.p-10{ padding:40px; }


 
.px-0{ padding-left:0;padding-right:0; }
.px-1{ padding-left:4px;padding-right:4px; }
.px-2{ padding-left:8px;padding-right:8px; }
.px-3{ padding-left:12px;padding-right:12px; }
.px-4{ padding-left:16px;padding-right:16px; }
.px-5{ padding-left:20px;padding-right:20px; }
.px-6{ padding-left:24px;padding-right:24px; }
.px-8{ padding-left:32px;padding-right:32px; }
.px-10{ padding-left:40px;padding-right:40px; }


 
.py-0{ padding-top:0;padding-bottom:0; }
.py-1{ padding-top:4px;padding-bottom:4px; }
.py-2{ padding-top:8px;padding-bottom:8px; }
.py-3{ padding-top:12px;padding-bottom:12px; }
.py-4{ padding-top:16px;padding-bottom:16px; }
.py-5{ padding-top:20px;padding-bottom:20px; }
.py-6{ padding-top:24px;padding-bottom:24px; }
.py-8{ padding-top:32px;padding-bottom:32px; }
.py-10{ padding-top:40px;padding-bottom:40px; }


 
.pt-1{ padding-top:4px; } .pt-2{ padding-top:8px; } .pt-3{ padding-top:12px; } .pt-4{ padding-top:16px; } .pt-5{ padding-top:20px; }
.pr-1{ padding-right:4px; } .pr-2{ padding-right:8px; } .pr-3{ padding-right:12px; } .pr-4{ padding-right:16px; } .pr-5{ padding-right:20px; }
.pb-1{ padding-bottom:4px; } .pb-2{ padding-bottom:8px; } .pb-3{ padding-bottom:12px; } .pb-4{ padding-bottom:16px; } .pb-5{ padding-bottom:20px; }
.pl-1{ padding-left:4px; } .pl-2{ padding-left:8px; } .pl-3{ padding-left:12px; } .pl-4{ padding-left:16px; } .pl-5{ padding-left:20px; }

.page-header-wrapper{
  display: flex; 
  justify-content: space-between; 
  flex-direction: column-reverse;
}

@media (min-width: 576px){
  .page-header-wrapper{
    flex-direction: row;
  }
}


.page-title {
    display: inline-block;
    padding-left: 12px;
    position: relative;
}

.page-title::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 4px;
    width: 4px;
    height: 32px;
    border-radius: 2px;
    
    background-color: var(--primary-blue-500);
}


.page-title.orange-color::before {
  background-color: var(--accent-orange-400);
}


.page-title-sub {
    display: block;
    font-size: 22px;
     font-weight: var(--font-weight-regular);
    color: var(--neutral-gray-900);
    margin-bottom: 4px;
}

.page-title-main {
    font-size: 30px;
    font-weight: var(--font-weight-bold);
    color: var(--primary-blue-900);
    margin: 0;
    line-height: 1.2;
    padding-top: 2px;
}


.page-title-main::before {
  content: "";
  display: block;
  width: 100%;
  max-width: 205px;    
  height: 0.5px;       
  background: #C3C3C3;
  margin: 0 auto 10px;  
  position: absolute;
  left: 10px;
  top:30px
}

.page-header__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Videonun oranını bozmadan alanı doldurur */
  z-index: 0; /* Overlay'in (z-index: 1) arkasında kalmasını sağlar */
}

/* main{
  margin-bottom:100px;
}
 */




/* -------------------------------------------------------------------------- */
/*                            VIDEO MODAL (LIGHTBOX)                          */
/* -------------------------------------------------------------------------- */
.video-modal {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9); /* Video için daha koyu arka plan */
  backdrop-filter: blur(5px);
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.video-modal.is-open {
  display: flex;
  opacity: 1;
}

.video-modal-content {
  position: relative;
  width: 90%;
  max-width: 900px; /* Video için ideal genişlik */
  background-color: #000;
  box-shadow: 0 20px 50px rgba(0,0,0,0.7);
  border-radius: 8px;
}

/* Video Kapatma Butonu */
.video-modal-close {
  position: absolute;
  top: -40px; /* Kutunun dışında, üstte */
  right: 0;
  color: var(--white);
  font-size: 40px;
  line-height: 1;
  cursor: pointer;
  background: none;
  border: none;
  transition: color 0.2s;
}
.video-modal-close:hover {
  color: var(--accent-orange-400);
}

/* 16:9 Aspect Ratio Hack (Responsive Video) */
.video-wrapper {
  position: relative;
  padding-bottom: 56.25%; /* 16:9 oranı (9 / 16 = 0.5625) */
  height: 0;
  overflow: hidden;
  border-radius: 8px;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}



.search-menu-wrapper{
  background-color:rgba(13, 51, 85, 0.05);
  border-radius: 10px;
  z-index: 100;
  padding: 35px 18px;
}

.search-menu-wrapper .filter-search{
  width: 100%;
}
.search-menu-wrapper .filter-search button{
  width: 100%;
}

.search-wrapper {
display: flex;
align-items: center;
width: 100%;
max-width: 900px;
background: #ffffff;
border-radius: 10px;
padding: 3px;
}

.search-input {
flex: 1;
border: none;
outline: none;
font-size: 16px;
padding: 10px 14px;

}

.search-button {
background: #fff;
border: none;
cursor: pointer;
padding: 8px 12px;
border-left: 1px solid #eee;
display: flex;
align-items: center;
justify-content: center;
}

.search-button img {
width: 20px;
height: 20px;
}



/* Varsayılan breakpoint: 768px (tablet ve üstü = desktop) */
/* Hidden by default, görünürlük --show değişkeni ile kontrol edilir */
.only-mobile,
.only-desktop {
  display: none !important;
}

/* Mobil: ekran genişliği 767.98px veya daha küçük */
@media (max-width: 767.98px) {
  .only-mobile {
    display: var(--show, block) !important; /* default block */
  }
}

/* Desktop: ekran genişliği 768px veya daha büyük */
@media (min-width: 1025px) {
  .only-desktop {
    display: var(--show, block) !important;
  }
}

/* Hazır alternatifler (kısa kullanım) */
.only-mobile-inline  { display: none !important; }
.only-mobile-inline  { }
@media (max-width: 767.98px) { .only-mobile-inline { display: inline !important; } }

.only-mobile-inline-block { display: none !important; }
@media (max-width: 767.98px) { .only-mobile-inline-block { display: inline-block !important; } }

.only-desktop-inline { display: none !important; }
@media (min-width: 768px) { .only-desktop-inline { display: inline !important; } }

.only-desktop-inline-block { display: none !important; }
@media (min-width: 768px) { .only-desktop-inline-block { display: inline-block !important; } }

.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.3)!important; /* Arka plan rengi */
  z-index: 9999; /* Her şeyin (Header ve Modalların bile) üzerinde */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Kaybolma Efekti */
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

/* JS ile eklenecek sınıf: Yüklendiğinde gizle */
.preloader.is-loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Spinner Animasyonu */
.spinner {
  width: 50px;
  height: 50px;
  border: 4px solid var(--neutral-gray-100); /* Pasif renk */
  border-radius: 50%;
  
  /* Marka Renkleri ile Dönme Efekti */
  border-top-color: var(--primary-blue-500);
  border-left-color: var(--primary-blue-500);
  border-right-color: var(--accent-orange-400);
  
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

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