/* GENEL AYARLAR */
body {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.6;
    margin: 0;
    padding-top: 0;
    background-color: #d9d7d2;
}

/*İMAGE*/

.text {
  font-size: 3rem;
  font-weight: bold;
  text-align: center;
}

.caption {
  position: absolute;
  top: 50%;
  left: 5%;
  transform: translate(-50%, -50%); 
  width: 90%;           
  padding: 2rem;
  color: #fff;
  text-align: center;
  box-sizing: border-box;
  font-size: clamp(11.5rem, 1vw, 3rem);
  z-index: 15;
}

.caption h1 {
  margin: 0;
  font-weight: 800;    
  line-height: 1.2;
  font-size: clamp(1.5rem, 4vw, 3rem); 
  color: #fff;
  letter-spacing: 2px;   
  text-shadow: 2px 2px 10px rgba(0,0,0,0.6); 
}

@media (min-width: 768px) {
  .caption h1 {
    font-size: clamp(2.5rem, 5vw, 4rem); 
  }
}

@media (max-width: 768px) {
  .caption h1 {
    font-size: clamp(1.5rem, 5vw, 2.5rem);
  }
}

.slide-fade {
  opacity: 0;
  transform: translateY(-50%) translateX(50%); 
  animation: slideFade 1s forwards;
}

@keyframes slideFade {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(50%);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

/*kariyer içerik sol*/

.kariyer_icerik {
    padding: 25px 15px;
    padding-top: 70px;
    padding-bottom: 70px;
    position: relative;
}
 /*slider*/

 :root{
    --dot-size: 10px;
    --dot-gap: 10px;
    --arrow-size: 36px;
    --arrow-bg: rgba(0,0,0,0.35);
    --arrow-color: #fff;
  }

  /* tam ekran */
  html,body{
    height:100%;
    margin:0;
  }

  .slider {
    position:relative;
    height:120vh;            /* tam ekran yüksekliği */
    width:100%;
    overflow:hidden;
    background:#919191;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  }

  .slides {
    height:100%;
    width:100%;
    position:relative;
    align-items: center;
  }

  .slide {
    position:absolute;
    inset:9vw;                 /* top/right/bottom/left:0 */
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
    opacity:0;
    transform: scale(1.02);  /* hafif zoom ile geçiş daha hoş */
    transition: opacity .6s ease, transform .6s ease;
    will-change: opacity, transform;
  }

  .slide.is-active {
    opacity:1;
    transform: scale(1);
    z-index:2;
  }

  /* kenar okları (küçük) */
  .arrow {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:var(--arrow-size);
    height:var(--arrow-size);
    border-radius:50%;
    display:grid;
    place-items:center;
    background:var(--arrow-bg);
    color:var(--arrow-color);
    border:0;
    cursor:pointer;
    outline:none;
    z-index:5;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
    transition: transform .15s ease, background .15s ease;
  }
  .arrow:hover { transform: translateY(-50%) scale(1.05); background: rgba(0,0,0,0.5); }
  .arrow:active { transform: translateY(-50%) scale(0.98); }

  .arrow--prev { left: 12px; }
  .arrow--next { right: 12px; }

  /* ok ikonları (css) */
  .arrow svg { width:20px; height:20px; display:block; }

  /* dot göstergeler - ortada alt kısım */
  .dots {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:100px;
    display:flex;
    gap:var(--dot-gap);
    z-index:6;
    align-items:center;
    justify-content:center;
  }

  .dot {
    width:var(--dot-size);
    height:var(--dot-size);
    border-radius:50%;
    background: rgba(255,255,255,0.45);
    cursor:pointer;
    border:0;
    padding:0;
    transition: transform .18s ease, background .18s ease;
  }
  .dot:hover { transform:scale(1.15); background: rgba(255,255,255,0.7); }
  .dot.is-active { background: #fff; transform:scale(1.25); }

  /* mobil için dot'ları biraz daha büyüt */
  @media (max-width:420px){
    :root { --dot-size:12px; --arrow-size:40px; }
  }

  /* opsiyonel: klavye/odak için görünürlik */
  .arrow:focus, .dot:focus { box-shadow:0 0 0 3px rgba(173,125,82,0.25); }

  /* (isteğe bağlı) ekran okuyucu gizli metin */
  .sr-only { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }


  .counters {
  margin-top: 65px;
  display: flex;
  align-items: center;
  justify-content: center;   /* istersen 'flex-start' yap */
  gap: 50px;
  flex-wrap: wrap;           /* mobilde alta geçsin */
}
.counter {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 120px;          /* birbirini ezmesin */
}
.number {
  font-weight: 700;
  font-size: 28px;
  letter-spacing: 0.02em;
  color: #919191;
  line-height: 1.1;
}
.counter b {
  font-weight: 600;
  font-size: 16px;
  line-height: 28px;
  color: #2E3092;
  display: block;
}

/* küçük ekran ince ayarı */
@media (max-width: 576px) {
  .counters { gap: 20px; }
  .number { font-size: 24px; }
}


/* ====== MOBİL GÖRÜNÜRLÜK PATCH ====== */

/* 1) Navbar içindeki DIŞ sarmalayıcıya yanlışlıkla verilen .mobile-menu stilini nötrle */
@media (max-width: 991.98px) {
  .navbar .container.mobile-menu {
    background: transparent !important;
    padding: 0 !important;
  }
}

/* 2) Sadece içteki collapse menüye arka plan uygula */
@media (max-width: 991.98px) {
  .navbar .mobile-menu.collapse {
    background-color: #cfccc6 !important;
  }
}

/* 3) 100% yükseklik kilidini mobilde gevşet (scroll davranışını düzeltir) */
@media (max-width: 991.98px) {
  html, body { height: auto !important; }
}

/* 4) Hero ve Slider'ı mobilde kısalt; içerik görülsün */
@media (max-width: 768px) {
  .img-wrap {
    height: 70dvh !important;   /* 100vh yerine daha kısa */
    z-index: 1;
  }
  .caption {
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 92% !important;
    padding: 1rem !important;
    font-size: 1rem !important;
    z-index: 5;
  }
  .slider {
    height: 70dvh !important;   /* 120vh → 70dvh */
    z-index: 1;
  }
}

/* 5) İçeriği slider üstünde tut (kesişme olmasın) */
.kariyer_icerik { position: relative; z-index: 2; }

/* 6) Dots konumunu mobilde biraz aşağı kaydır (opsiyonel görünürlük) */
@media (max-width: 768px) {
  .dots { bottom: 60px !important; }
}

/* --- Slider Tabs --- */
.slider-tabs{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;               /* buton arası boşluk küçük */
  padding-top:20px;
  flex-wrap:nowrap;      /* her zaman yan yana */
}

.tab{
  border:0;
  padding:.4rem .8rem;   /* küçük iç boşluk */
  border-radius:999px;
  cursor:pointer;
  background:#eee;
  color:#333;
  font-weight:600;
  font-size:.85rem;      /* küçük yazı */
  line-height:1;
  white-space:nowrap;    /* taşarsa bile alt satıra geçmesin */
}

.tab.is-active{
  background:#2E3092;
  color:#fff;
}

/* Mobilde de aynı küçük boyutta kalsın */
@media (max-width:768px){
  .tab{
    font-size:.8rem;
    padding:.35rem .7rem;
  }
}

@media (min-width:768.98px){
  .tab{
    font-size:1.2rem;
    padding:.9rem .9rem;
  }
}

@media (max-width:563px) {
  .slider-tabs {
    padding-top: 10px;
    margin-bottom: 5px;
  }
}

@media (max-width: 375.98px) {
  .slider-tabs {
    padding-top: 5px;
  }
}

@media (max-width: 320.98px) {
  .slider-tabs {
    padding-top: 2px;
  }
  .tab {
    padding: .2rem .4rem;
    font-size: .8rem;
  }
}