/* Add here all your CSS customizations */
.custom-box-shadow-1 {
	box-shadow: 0px 0px 31px -5px rgba(0, 0, 0, 0.14) !important; }

.custom-box-shadow-2 {
	box-shadow: 0px 8px 31px -5px rgba(0, 0, 0, 0.07) !important; }

.custom-container-position-1 {
	position: relative;
	transform: translate3d(-50%, 0, 0);
	left: 50%; }

.custom-container-style-1 {
	min-width: 85vw; }

@media (min-width: 576px) {
	.custom-container-style-1 {
		min-width: 540px; } }

@media (min-width: 768px) {
	.custom-container-style-1 {
		min-width: 720px; } }

@media (min-width: 992px) {
	.custom-container-style-1 {
		min-width: 960px; } }

@media (min-width: 1200px) {
	.custom-container-style-1 {
		min-width: 1140px; } }

@media (min-width: 1440px) {
	.custom-container-style-1 {
		min-width: 1440px; } }

.custom-font-secondary {
	font-family: 'Lora', sans-serif !important; }

.custom-font-size-1 {
	font-size: 112px;
	font-size: 7rem;
	line-height: 0.4; }

.fluid-col-lg-5 .fluid-col {
	left: 50%;
	width: 100vw;
	transform: translate3d(-50%, 0, 0); }

@media (min-width: 992px) {
	.fluid-col-lg-5 {
		min-height: 0; }
		.fluid-col-lg-5 .fluid-col {
			width: calc(44.2vw - 15px);
			left: 15px;
			transform: none; } }

@media (max-width: 991px) {
	.fluid-col-lg-5 {
		min-height: 400px !important; } }

.custom-read-more-link svg {
	transition: ease transform 300ms; }

.custom-read-more-link:hover svg {
	transform: translate3d(7px, 0, 0); }

.custom-shape-1 {
	position: absolute;
	top: 25px;
	left: -30px;
	bottom: 25px;
	right: 30px;
	z-index: 0; }

.custom-stroke-width-1 svg path {
	stroke-width: 1.5 !important; }
	
.img-fluid 	{
max-width: 100%;
height: 100x;
}

.img-fluid-tumbb 	{
max-width: 100%;
height: 100%;
}


/* image frame ribbon */

.box {
  width: 200px; height: 300px;
  position: relative;
  border: 1px solid #BBB;
  background: #EEE;
}
.ribbon {
  position: absolute;
  left: -5px; top: -5px;
  z-index: 1;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  width: 100px;
  display: block;
  background: #79A70A;
  background: linear-gradient(#2989d8 0%, #1e5799 100%);
  box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; left: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #1e5799;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #1e5799;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #1e5799;
}

/* dikey cizgi */
#verticle {
    border-left: 4px solid cornflowerblue;
    height: 200px;
    position: absolute;
    left: 50%;
    margin-left: -2px;
}
/* icon alt yazi  */
#list-iconss li
{
  display:inline-block;
  vertical-align: top;
  width:170px;
  height:150px;
}
.icon {  
  border: 0 solid #aaa;  
  height:30px;
}  
.popup{
  display:none;
  width:100px;
}
/*#list-icons li:hover .popup
{
  display:block;
}*/

.tooltip {
    background: white;
    margin-top: 35px;
}

.tooltip .tooltip-inner {
    
    text-color: #000;
    max-width: 500px;
}

.tooltip .arrow:before {
    border-top-color: red;
}

.tooltip.bs-tooltip-top .arrow:before {
    top: 20px;
}

/*

#gOOGLE DİL SSEÇİMİ 

 */

.goog-logo-link {
    display:none !important;
} 
    
.goog-te-gadget {
    color: transparent !important;
}

.goog-te-banner-frame.skiptranslate {
display: none !important;
} 

/*

#gOOGLE DİL SSEÇİMİ 

 */
 

@media only screen and (max-width: 600px) {
    .nomobile {
        visibility: hidden;
        clear: both;
        float: right;
        margin: 5px auto;
        width: 22%;
        height: auto;
        display: none;
        // Önemli olan nokta burası burayı kaldırırsanız sadece mobile için görüntülenir.
    }
}




@media only screen and (min-width: 600px) {
    .onlymobile {
        visibility: hidden;
        clear: both;
        float: right;
        margin: 5px auto;
        width: 22%;
        height: auto;
        display:none;
        // Önemli olan nokta burası burayı kaldırırsanız sadece mobile için görüntülenir.
    }
}



.faq-header{
  font-size: 42px;
  border-bottom: 1px dotted #ccc;
  padding: 24px;
}

.faq-content {
  margin: 0 auto;
}

.faq-question {
  padding: 20px 0;
  border-bottom: 1px dotted #ccc;
}

.panel-title {
  font-size: 24px;
  width: 100%;
  position: relative;
  margin: 0;
  padding: 10px 10px 0 48px;
  display: block;
  cursor: pointer;
}

.panel-content {
  font-size: 20px;
  padding: 0px 14px;
  margin: 0 40px;
  height: 0;
  overflow: hidden;
  z-index: -1;
  position: relative;
  opacity: 0;
  -webkit-transition: .4s ease;
  -moz-transition: .4s ease;
  -o-transition: .4s ease;
  transition: .4s ease;
}

.panel:checked ~ .panel-content{
  height: auto;
  opacity: 1;
  padding: 14px;
}

.plus {
  position: absolute;
  margin-left: 20px;
  margin-top: 4px;
  z-index: 5;
  font-size: 42px;
  line-height: 100%;
  -webkit-user-select: none;    
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
  -webkit-transition: .2s ease;
  -moz-transition: .2s ease;
  -o-transition: .2s ease;
  transition: .2s ease;
}

.panel:checked ~ .plus {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.panel {
  display: none;
}

.tree {
  --spacing: 1.5rem;
  --radius: 10px;
}

.tree li {
  display: block;
  position: relative;
  padding-left: calc(2 * var(--spacing) - var(--radius) - 2px);
}

.tree ul {
  margin-left: calc(var(--radius) - var(--spacing));
  padding-left: 0;
}

.tree ul li {
  border-left: 2px solid #ddd;
}

.tree ul li:last-child {
  border-color: transparent;
}

.tree ul li::before {
  content: '';
  display: block;
  position: absolute;
  top: calc(var(--spacing) / -2);
  left: -2px;
  width: calc(var(--spacing) + 2px);
  height: calc(var(--spacing) + 1px);
  border: solid #ddd;
  border-width: 0 0 2px 2px;
}

.tree summary {
  display: block;
  cursor: pointer;
}

.tree summary::marker,
.tree summary::-webkit-details-marker {
  display: none;
}

.tree summary:focus {
  outline: none;
}

.tree summary:focus-visible {
  outline: 1px dotted #000;
}

.tree li::after,
.tree summary::before {
  content: '';
  display: block;
  position: absolute;
  top: calc(var(--spacing) / 2 - var(--radius));
  left: calc(var(--spacing) - var(--radius) - 1px);
  width: calc(2 * var(--radius));
  height: calc(2 * var(--radius));
  border-radius: 50%;
  background: #ddd;
}

.tree summary::before {
  z-index: 1;
  background: #696 url('images/expand-collapse.svg') 0 0;
}

.tree details[open] > summary::before {
  background-position: calc(-2 * var(--radius)) 0;
}


/* Dropdown Menü Stil Ayarları     - ---------------------------------------------------------------------------*/
.nav-link.dropdown-toggle {
    color: #333;
    text-decoration: none;
    padding: 15px;
}

.dropdown-menu {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    border: 1px solid #ccc;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    width: 100%;
    left: 0;
    top: 100%;
    padding: 20px;
    box-sizing: border-box;
    list-style: none;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

/* 3 Sütunlu Mega Menü, Yan Yana Yerleştirilmiş */
.mega-menu {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.mega-menu-columns {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin: 0;
}

.menu-column {
    width: 30%; /* 3 sütun için her birinin genişliği */
    padding: 10px;
    box-sizing: border-box;
}

.menu-column h3 {
    font-size: 18px;
    margin-bottom: 10px;
    color: #000;
}

.menu-column ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.menu-column ul li {
    margin-bottom: 8px;
}

.menu-column ul li a {
    color: #333;
    text-decoration: none;
}

.menu-column ul li a:hover {
    text-decoration: underline;
}


/* egitim detay */
 .discount-group {
            background-color: #f8f9fa;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        .course-details {
            background-color: #e9ecef;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
        }
        .btn-primary {
            background-color: #007bff;
            border-color: #007bff;
        }
        .btn-primary:hover {
            background-color: #0056b3;
            border-color: #0056b3;
        }
/* egitim detay son */


/*Hower efektli ana sayfa son 20 gorsel son */
        .main-card {
            background: white;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        .card-custom {
            transition: all 0.3s ease-in-out;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
        }
        .card-custom:hover {
            transform: translateY(-5px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2);
        }
        .card-title {
            font-size: 1rem;
            font-weight: bold;
        }
        .btn-custom {
            font-size: 0.9rem;
            border-radius: 8px;
        }
        .category-card {
            background: linear-gradient(135deg, #ff7e5f, #feb47b);
            color: white;
        }
        .category-card .btn-light {
            color: #ff7e5f;
            background-color: white;
        }
   
   
  /* Slider görseli optimize */
.slider-img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1; /* 600x600 */
    display: block;
}
   
  /* FULL PAGE İMAGE görseli optimize */

    .full-height-section {
        min-height: 100vh;
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    @media (max-width: 768px) {
        .full-height-section {
            background-position: top center;
            min-height: 60vh; /* Mobilde daha az yükseklik daha iyi durabilir */
        }

        .page-header h1 {
            font-size: 2rem;
        }

        .page-header .sub-title {
            font-size: 1rem;
        }
    }
    

#mainSlider, .carousel-item {
  height: 80vh;
  max-height: 600px;
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-item video {
  max-height: 100%;
  width: auto;
  margin: 0 auto;
  display: block;
  object-fit: contain;
}
/* Mobil için */
@media (max-width: 768px) {
  #mainSlider,
  .carousel-item {
    height: 30vh; /* Mobilde yüksekliği %60 viewport yap */
  }
  /* İstersen video veya başka elemanların boyutlarını da küçültebilirsin */
}

/* === OVERRIDES (eklenenler) === */

/* 1) Üstteki sticky header boşluğunu sıfırla */
html.sticky-header-enabled .header + .main,
.header-body + .main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 2) Üst banner (#carouselExample) gerçekten responsive olsun ve global .carousel-item kurallarını ezsin */
#carouselExample .carousel-item {
  height: clamp(200px, 28vw, 460px) !important; /* mobil → masaüstü arası */
  max-height: none !important;
  background-color: transparent !important;
  display: block !important; /* flex yerine blok, içteki img rahat davransın */
}
#carouselExample .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* letterbox yok */
  object-position: center;
  display: block;
}
@media (max-width: 768px) {
  #carouselExample .carousel-item {
    height: 36vh !important;
  }
}

/* 3) .img-fluid’ı güvenli hale getir (eski kuralı silmiyoruz, bunu en alta ekleyip override ediyoruz) */
.img-fluid {
  max-width: 100%;
  height: auto !important;  /* 100x tipografik hatayı bastır */
  display: block;
}

/* 4) İsteğe bağlı: banner sonrası boşluk olmasın */
#carouselExample { 
  margin-bottom: 0 !important; 
}

/* === HERO/BANNER: #carouselExample — tam genişlik, eşit kırpma, siyah boşluk yok === */
#carouselExample { 
  /* tek yerden kontrol için değişken: istediğin yüksekliği buradan ayarla */
  --hero-h: clamp(220px, 28vw, 460px);
  margin-bottom: 0 !important;
}

/* Global .carousel-item kurallarını sadece bu hero için geçersiz kıl */
#carouselExample .carousel-item {
  height: var(--hero-h) !important;   /* sabit, responsif bir yükseklik */
  max-height: none !important;
  background: transparent !important; /* siyah zemin kalksın */
  display: block !important;
}

/* Görsel tüm alanı eşit kırparak doldursun */
#carouselExample .carousel-item > img {
  width: 100%;
  height: 100%;
  object-fit: cover;        /* top-bottom equal crop */
  object-position: center;  /* merkezden kırp */
  display: block;
}

/* Sticky header’ın .main’e bastığı boşluğu sıfırla (güvenli) */
html.sticky-header-enabled .header + .main,
.header-body + .main {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Güvenlik: .img-fluid’deki typo’yu bastır (yükseklik auto olsun) */
.img-fluid { height: auto !important; }

/* === ECO ICON STRIP: desktop grid + mobile slider with arrows (no HTML change) === */
.eco-icons{
  --brand:#26a65b;
  --size:140px;                 /* masaüstü ikon çapı */
  --gap:clamp(10px,2vw,22px);
  position:relative;            /* okları konumlamak için */
}
.eco-icons__list{
  list-style:none;
  margin:1.25rem 0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(6, 1fr);  /* desktop: 6 ikon tek satır */
  gap:var(--gap);
  align-items:center;
  justify-items:center;
}

.eco-icon{
  text-decoration:none;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
  color:#1f2937;
}
.eco-icon__label{
  font-size:clamp(11px,1.6vw,13px);
  font-weight:700;
  letter-spacing:.06em;
}
.eco-icon__ring{
  width:var(--size); height:var(--size); aspect-ratio:1/1;
  border-radius:50%;
  display:grid; place-items:center;
  background:#fff;
  border:2px solid #e8ece9;
  box-shadow: inset 0 2px 10px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.08);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.eco-icon__ring img{ width:60%; height:60%; object-fit:contain; border-radius:50%; display:block; }
.eco-icon:hover .eco-icon__ring,
.eco-icon:focus-visible .eco-icon__ring{
  border-color:var(--brand);
  box-shadow:0 0 0 6px rgba(38,166,91,.14), inset 0 0 0 9999px rgba(38,166,91,.06);
  transform:translateY(-2px);
}
.eco-icon:hover .eco-icon__label,
.eco-icon:focus-visible .eco-icon__label{ color:var(--brand); }

/* Tablet küçültme */
@media (min-width: 577px) and (max-width: 992px){
  .eco-icons{ --size:120px; }
}

/* === MOBİL: tek satır slider + oklar === */
@media (max-width: 576px){
  .eco-icons{ --size:110px; }

  .eco-icons__list{
    display:flex;
    flex-wrap:nowrap;           /* alta kayma YOK */
    overflow:hidden;            /* scroll bar gizli */
    gap:14px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
  }
  .eco-icons__list > li{ flex:0 0 100%; }   /* tekli slider görünümü */
  .eco-icon{ scroll-snap-align:center; }

  /* Dinamik eklenecek ok butonları */
  .eco-icons__btn{
    position:absolute;
    top:50%; transform:translateY(-50%);
    width:36px; height:36px; border:0; border-radius:50%;
    background:#fff;
    box-shadow:0 2px 8px rgba(0,0,0,.15);
    cursor:pointer; display:grid; place-items:center;
  }
  .eco-icons__btn[disabled]{ opacity:.4; cursor:default; }
  .eco-icons__btn--prev{ left:6px; }
  .eco-icons__btn--next{ right:6px; }
  .eco-icons__btn--prev::before,
  .eco-icons__btn--next::before{
    content:"";
    width:10px; height:10px; display:block;
    border:solid #333; border-width:0 2px 2px 0;
    transform:rotate(135deg);
  }
  .eco-icons__btn--next::before{ transform:rotate(-45deg); }
}

/* reduce motion */
@media (prefers-reduced-motion: reduce){
  .eco-icon__ring, .eco-icon__label{ transition:none; }
}

/* LANGUAGE DIL */
.lang-text {
  font-weight: 500;
  color: #888;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s ease;
}

.lang-text:hover {
  color: #26a65b; /* yeşil tonunuz varsa */
}

.lang-text.active, .lang-text.active:hover {
  color: #26a65b;
  font-weight: bold;
}