.birrenk {
  color: #087589 !important;
}

.birrenk-acik {
  color: #63a0ab !important;
}

.goen-renk {
  color: #004e6d !important;
}
.goen-renk-acik {
  color: #28626d !important;
}

.bg-img-contain {
  background-size: contain;
}
.cursor-default {
  cursor: default;
}

.u-header__section--light .navbar-nav:not([class*="u-main-nav-v"]) .nav-link,
.u-header__section--light .navbar-nav:not([class*="u-main-nav-v"]) .nav-link:focus,
.u-header__section--light .navbar-nav:not([class*="u-main-nav-v"]) .nav-link:active {
  color: #fff;
}

 .tp-bannertimer {
  display: none !important;
}


.blurslider-gradient {
  background: -webkit-linear-gradient(left, #034855 0%, #2989d8 50%, #05b4c7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.blurslider-line {
  background: -webkit-linear-gradient(left, #9357cc 0%, #2989d8 50%, #05b4c7 100%) !important;
}

#rev_slider_28_1_wrapper .tp-loader.spinner3 div {
  background-color: #333 !important;
}

#rev_slider_28_1 .uranus.tparrows {
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0)
}

#rev_slider_28_1 .uranus.tparrows:before {
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 40px;
  transition: all 0.3s;
  -webkit-transition: all 0.3s
}

#rev_slider_28_1 .uranus.tparrows:hover:before {
  opacity: .75
}

.hermes .tp-bullet {
  overflow: hidden;
  border-radius: 50%;
  width: 16px;
  height: 16px;
  background-color: rgba(0, 0, 0, 0);
  box-shadow: inset 0 0 0 2px rgb(255, 255, 255);
  -webkit-transition: background 0.3s ease;
  transition: background 0.3s ease;
  position: absolute
}

.hermes .tp-bullet:hover {
  background-color: rgba(0, 0, 0, .21)
}

.hermes .tp-bullet:after {
  content: ' ';
  position: absolute;
  bottom: 0;
  height: 0;
  left: 0;
  width: 100%;
  background-color: rgb(255, 255, 255);
  box-shadow: 0 0 1px rgb(255, 255, 255);
  -webkit-transition: height 0.3s ease;
  transition: height 0.3s ease
}

.hermes .tp-bullet.selected:after {
  height: 100%
}

/* On-Scroll Animation Initial State */
.os-animation {
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.os-animation.animated {
  opacity: 1;
}

/* Custom Refined Premium Animations */
@keyframes fadeInUpShort {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeInUpShort {
  animation-name: fadeInUpShort;
  animation-duration: 2s; /* Yavaşlatıldı */
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-fill-mode: both;
}

@keyframes fadeInLeftShort {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.fadeInLeftShort {
  animation-name: fadeInLeftShort;
  animation-duration: 2s; /* Yavaşlatıldı */
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
  animation-fill-mode: both;
}

@keyframes fadeInPremium {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fadeUpElit {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fadeUpElit {
  animation-name: fadeUpElit;
  animation-duration: 1.5s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-fill-mode: both;
}

.fadeInPremium {
  animation-name: fadeInPremium;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: both;
}

/* ============================================================
   KAYDIRMA ANIMASYONLARINDA TEK DAVRANIS

   Sitede iki ayri kaynak vardi:

   1) YUKARIDAKILER — GOEN'e ozel, elde ayarlanmis.
      30px mesafe, 1.5-2s sure, secilmis yumusama egrileri.
      BUNLARA DOKUNULMADI.

   2) Sablonun animate.css'inden gelenler: fadeInUp / fadeInLeft /
      fadeInRight. Bunlarin mesafesi ogenin KENDI BOYUTUNUN %100'u
      (translate3d(0,100%,0)) ve suresi 1s idi. Uzun bir bolumde bu
      yuzlerce piksellik bir sicrayis demek - "cok uzaktan, cok hizli"
      goruntusunun kaynagi buydu. 70 kullanim / 6 sayfa:
      ar-ge, hakkimizda, kariyer, medyada-goen, neden-*.

   3) fadeInElit / fadeRightElit / fadeLeftElit HTML'de kullaniliyordu
      ama HICBIR YERDE TANIMLI DEGILDI (28 oge). Animasyon oynamiyor,
      ogeler .os-animation'in 0.5s opaklik gecisiyle duz beliriyordu.

   Asagisi hepsini ayni ev kuralina baglar:
       mesafe 30px · sure 1.5s · cubic-bezier(0.22, 0.61, 0.36, 1)
   Bu deger fadeUpElit'ten alindi: sitede en cok kullanilan (180 kullanim,
   9 sayfa) ve zaten onaylanmis olan davranis.

   animate.css bu dosyadan ONCE yuklendigi icin keyframe'leri burada
   yeniden tanimlamak sablondakini gecersiz kilar. HTML'e dokunulmaz.
   ============================================================ */

@-webkit-keyframes fadeInUp {
  from { opacity: 0; -webkit-transform: translateY(30px); transform: translateY(30px); }
  to   { opacity: 1; -webkit-transform: translateY(0);    transform: translateY(0); }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

@-webkit-keyframes fadeInLeft {
  from { opacity: 0; -webkit-transform: translateX(-30px); transform: translateX(-30px); }
  to   { opacity: 1; -webkit-transform: translateX(0);     transform: translateX(0); }
}
@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

@-webkit-keyframes fadeInRight {
  from { opacity: 0; -webkit-transform: translateX(30px); transform: translateX(30px); }
  to   { opacity: 1; -webkit-transform: translateX(0);    transform: translateX(0); }
}
@keyframes fadeInRight {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* HTML'de kullanilan ama tanimsiz kalan uc varyant */
@keyframes fadeInElit {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeRightElit {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeLeftElit {
  from { opacity: 0; transform: translateX(-30px); }
  to   { opacity: 1; transform: translateX(0); }
}

.fadeInElit    { animation-name: fadeInElit; }
.fadeRightElit { animation-name: fadeRightElit; }
.fadeLeftElit  { animation-name: fadeLeftElit; }

/* Sure ve egri: sablonun .animated 1s varsayilanini ezer.
   fadeIn mesafesizdir, yalnizca zamanlamasi hizalanir. */
.fadeInUp,
.fadeInLeft,
.fadeInRight,
.fadeIn,
.fadeInElit,
.fadeRightElit,
.fadeLeftElit {
  -webkit-animation-duration: 1.5s;
  animation-duration: 1.5s;
  -webkit-animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

/* Custom CSS Classes Extracted from Inline Styles */
.g-bg-bess-container { background-image: url(../img/goen-bess-konteyner-1.webp); }
/* Sablonun yolu (../img/secondary.png) yanlisti, dosya ../img/bg/ altinda.
   Icerigi 10x10 DUZ renk karosu: RGB(238,241,248). Desen olmadigi icin
   gorsel yerine dogrudan renk veriliyor: ayni gorunum, istek yok. */
.g-bg-secondary-pattern { background-color: #eef1f8; }
.g-bg-goiris-device { background-image: url(../img/nav/goiris_cihaz.png); }
.g-bg-gosarj-device { background-image: url(../img/gosarj-cihaz-2.webp); }
.g-bg-map-pattern { background-image: url(../img/map.webp); background-size: contain; }
.g-bg-project-cover { height: 140%; background-image: url(../img/GOEN-BESS_solar_field1.webp); }
.g-bg-map-2 { background-image: url(../img/maps/map2.webp); }

.g-bg-dark-custom-1 { background-color: #13181d !important; }
.g-bg-dark-custom-2 { background-color: #0e151b !important; }

.g-logo-carousel-img {
  height: 70px;
  object-fit: contain;
}

/* Custom border utility */
.g-brd-15 {
  border-width: 15px !important;
}

.g-brd-20 {
  border-width: 20px !important;
}

/* Button Hover Overrides */
.u-btn-primary:hover, .u-btn-primary:focus, .u-btn-primary.active {
  background-color: #049db0 !important;
  border-color: transparent !important;
}

/* Slider Text Spacer Override */
.g-slider-text-go-offset {
  padding-right: 18px !important;
}

/* Scroll Expansion Hero */
.scroll-hero-container {
  height: 220vh; 
  position: relative;
}

.scroll-hero-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.scroll-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: 1;
}

.scroll-hero-media-wrapper {
  position: absolute;
  z-index: 3;
  width: 320px;
  height: 420px;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 35px 100px rgba(0,0,0,0.4);
  transform-origin: center;
}

.scroll-hero-media-wrapper video,
.scroll-hero-media-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.scroll-hero-title {
  position: absolute;
  z-index: 4;
  font-size: 6rem;
  font-weight: 800;
  color: white;
  display: flex;
  gap: 30px;
  width: 100%;
  justify-content: center;
  text-align: center;
  pointer-events: none;
}

#page-content {
  transition: opacity 0.5s ease;
}

@media (max-width: 767px) {
  .scroll-hero-title {
    font-size: 3rem;
    flex-direction: column;
    gap: 10px;
  }
}

/* Foolproof Fixed Header */
.fixed-header-always {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 10000 !important;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}





.js-go-to {
  position: fixed !important;
}

/* ==========================================================================
   Bulunulan sayfanin header'daki ust menu basligini isaretler.
   .is-current-section sinifi assets/js/custom.js tarafindan eklenir.
   Yazi rengine dokunulmaz; sayfaya ozel renk override'lariyla catismaz.
   ========================================================================== */
.u-header .navbar-nav > li > a.nav-link.is-current-section {
  position: relative;
}

.u-header .navbar-nav > li > a.nav-link.is-current-section::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  height: 2px;
  background-color: #05b4c7;
  border-radius: 2px;
}

/* Mobilde menu dikey acildigi icin cizgiyi yaziya yaklastir */
@media (max-width: 991px) {
  .u-header .navbar-nav > li > a.nav-link.is-current-section::after {
    bottom: 0;
    right: auto;
    width: 46px;
  }
}

/* ============================================================
   GORSEL ORAN KORUMASI  (Faz 1 / M-01)

   Tum <img> etiketlerine gercek width/height oznitelikleri
   eklendi. Amac: tarayici gorseli indirmeden once orani bilsin,
   yeri bastan ayirsin, sayfa yuklenirken icerik zıplamasin (CLS).

   Bu sitenin CSS i oznitelik beklemiyordu; oznitelikler tek
   basina birakilirsa gorunumu bozar. Asagidaki iki kural
   bunu engeller.

   NOT: Bu blok bilerek style.css icinde - 29 sayfanin
   TAMAMI bu dosyayi yukluyor. custom.css i projeler.html
   yuklemiyor, oraya konsaydi o sayfada calismazdi.
   ============================================================ */

/* Genislik kapsayiciyi asamaz, yukseklik oranla hesaplanir.
   Secici bilerek CIPLAK img - ozgullugun en dusugu (0,0,1) -
   boylece sinif veya satir-ici her kural bunu gecer. */
img {
  max-width: 100%;
  height: auto;
}

/* Yukseklik CSS ile sabitlenmisse genislik otomatik olsun.
   Ornek: kare bayrak (48x48) height:20px ile cizilirken
   width ozniteligi 48 kalirsa 48x20 olur (ezik) -> 20x20. */
img[style*="height"],
img[class*="g-height-"] {
  width: auto;
}

/* ============================================================
   DOKUNMA HEDEFI BOYUTU  (Faz 1 / M-02)

   Apple 44x44, Google 48x48 asgari dokunma alani onerir.
   Denetimde 165 tiklanabilir oge bu sinirin altindaydi;
   en kotusu 9x40 piksellik bir sosyal medya ikonuydu.

   Bu kurallar GORUNUMU DEGISTIRMEZ - yazi ve ikon ayni
   kalir, yalnizca etrafindaki tiklanabilir alan buyur.
   Yalnizca 991px altinda (dokunmatik cihazlar) uygulanir.
   ============================================================ */
@media (max-width: 991px) {

  /* Metin baglantilari ve butonlar: asgari 44px yukseklik.
     inline-flex + align-items:center yaziyi dikey ortalar,
     boylece satir yuksekligi buyurken yazi kaymaz. */
  a:not(.u-block-hover):not([class*="u-icon"]),
  button,
  .nav-link,
  [role="button"] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Ikon baglantilari kare olsun (9x40 -> 44x44) */
  [class*="u-icon"],
  .list-inline-item > a,
  .social-icons a {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Form ogeleri: iOS 16px altinda otomatik yakinlastirma yapar */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    min-height: 44px;
    font-size: 16px;
  }

  /* Blok baglantilari (kart, gorsel sarmalayici) zaten buyuk -
     bunlara inline-flex UYGULANMAZ, aksi halde duzen bozulur. */
  a.u-block-hover,
  a.d-block,
  a.btn-block {
    display: block;
  }

  /* Yalnizca ikon iceren ikon-only baglantilar (metin yok, dolayisiyla
     genislik ikonun kendisi kadar kaliyordu: 9x44).
     justify-content:center ikonu buyuyen alanda ortalar,
     boylece gorsel konum degismez. */
  .goen-product-arrow > a,
  .u-go-to-v1,
  .js-go-to {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
}

/* ============================================================
   DOKUNMATIKTE HOVER ICERIGI  (Faz 2 / M-03)

   Sitede hover ile ACILAN gercek icerik var. Dokunmatik
   cihazlarda hover olmadigi icin bu icerige HIC ULASILAMIYORDU.

   En kritigi BESS sayfasindaki 6 deger karti: on yuzde rakam
   (1C GUC, %99,9, 11.000...), arka yuzde bunlarin aciklamasi.
   Mobil ziyaretci aciklamalari goremiyordu.

   Cozum: dokunmatikte arka yuz akisa girer, kart buyur,
   iki icerik de ayni anda gorunur. Tiklama/ogrenme gerekmez.
   @media (hover: none) yalnizca gercek dokunmatik cihazlarda
   uygulanir; fareli cihazlarda hover davranisi aynen kalir.
   ============================================================ */
@media (hover: none) {

  /* --- BESS deger kartlari --- */
  .val-card {
    min-height: 0 !important;
    height: auto !important;
    padding: 20px 16px !important;
  }

  /* On ve arka yuz ust uste degil, alt alta */
  .val-card .val-front,
  .val-card .val-back {
    position: static !important;
    inset: auto;
  }

  .val-card .val-back {
    opacity: 1 !important;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
  }

  /* Arka yuz metni beyaz zemin icin griydi; koyu kartta okunmuyor */
  .val-card .val-back p {
    color: rgba(255, 255, 255, 0.78) !important;
  }

  /* Ikon akisa girsin (hover tasarimda sol uste sabitti) */
  .val-card .val-front svg {
    position: static !important;
    margin: 0 auto 10px !important;
  }

  /* Arka baslik on baslikla ayni yeri paylasiyordu - gizle */
  .val-card .title-container .title-back {
    display: none !important;
  }

  /* --- Harezmi karti: overlay icerigi gorunur olsun --- */
  .bess-harezmi-card .bess-harezmi-overlay {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .bess-harezmi-card .bess-harezmi-overlay .harezmi-content {
    opacity: 1 !important;
  }
}

/* ============================================================
   ASGARI OKUNABILIR YAZI BOYUTU  (Faz 2 / M-07)

   Sitede 8px, 10px ve 11px yazi kullanan Unify yardimci
   siniflari var (tarih, kategori, etiket metinleri).
   Mobilde bu boyutlar okunmuyor - ozellikle 8px.

   Olculen kullanim (375px):
     search.html : 21 oge 11px
     blog.html   : 12 oge 11px
     BESS        :  6 oge 11px + 3 oge 8px

   Yalnizca 991px altinda uygulanir; masaustu tasarim degismez.
   ============================================================ */
@media (max-width: 991px) {

  .g-font-size-8,
  .g-font-size-9,
  .g-font-size-10 {
    font-size: 12px !important;
  }

  .g-font-size-11 {
    font-size: 12.5px !important;
  }

  /* Bu siniflar cogunlukla BUYUK HARF + harf araligi ile
     kullaniliyor; boyut artinca satir tasmasin diye
     harf araligi bir miktar azaltilir. */
  .g-font-size-8.text-uppercase,
  .g-font-size-10.text-uppercase,
  .g-font-size-11.text-uppercase {
    letter-spacing: 0.5px !important;
  }
}

/* ============================================================
   YATAY TASMA KORUMASI  (Faz 3 / P-02)

   Sitede 34 oge yatay giris animasyonu kullaniyor
   (fadeInRight / fadeInLeft / fadeRightElit ...). Bu animasyonlar
   ogeyi once ekran disina (ornek: +570px saga) tasiyip yerine
   kaydiriyor. Sayfada overflow-x korumasi OLMADIGI icin animasyon
   suresince yatay kaydirma cubugu olusuyor; mobilde kullanici
   sayfayi yana kaydirabiliyor.

   overflow-x: clip tercih edildi cunku "hidden" in aksine yeni bir
   kaydirma baglami OLUSTURMAZ - position: sticky calismaya devam eder.
   Eski tarayicilar icin hidden yedegi birakildi.
   ============================================================ */
html,
body {
  overflow-x: hidden;
}

@supports (overflow-x: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

/* ============================================================
   SAYFA ICI KUCUK YAZILAR  (Faz 4 / M-07 artigi)

   M-07 de Unify nin g-font-size-* siniflarini duzeltmistik.
   Ancak bazi sayfalar kendi <style> blogunda 9-11px tanimliyor;
   o kurallar yakalanmamisti:
     .bess-tab-subtitle  11px   (BESS sayfasi)
     .goiris-badge        9px   (GOiris sayfasi)
     .goiris-tab-number  11px   (GOiris sayfasi)

   Sayfa ici <style> bloklari style.css ten SONRA geldigi icin
   !important gerekli.
   ============================================================ */
@media (max-width: 991px) {

  .bess-tab-subtitle,
  .goiris-tab-number {
    font-size: 12px !important;
  }

  .goiris-badge {
    font-size: 11px !important;
    padding: 4px 9px !important;
  }
}