/*--------------------------------------------------------------
# Medyol Enerji - marka renkleri / logo uyumlu ust bant
# insur.css'ten SONRA yuklenir. Sablon dosyalari degistirilmez,
# tum ozellestirmeler bu dosyada toplanir.
#
# NOT: Logo (modyolenerjilogo.png) koyu gri yazi + yesil "ENERJI"
# seklinde, yani ACIK zemin icin tasarlanmis. Bu yuzden mavi
# bantlarin uzerinde logoya beyaz bir zemin plakasi veriliyor.
--------------------------------------------------------------*/

:root {
  --medyol-blue-deep: #071e3a;
  --medyol-blue: #0d3b6f;
  --medyol-blue-light: #12508f;
  --medyol-cyan: #0ce0ff;
  --medyol-on-blue: #cfe4f7;
  /* Logodan orneklenen renkler: yazi #282838, "ENERJI" yesili #0a7a2c */
  --medyol-ink: #282838;
  --medyol-green: #0a7a2c;
}

/*------------------------------------------------------------
# Ust bant (logo + iletisim)
------------------------------------------------------------*/
.main-header-two__top-details {
  background-color: var(--medyol-blue);
  background-image: linear-gradient(90deg,
      var(--medyol-blue-deep) 0%,
      var(--medyol-blue) 45%,
      var(--medyol-blue-light) 100%);
}

/* Logo koyu zeminde kaybolmasin: beyaz plaka uzerine otursun */
.main-header-two__logo {
  background-color: #ffffff;
  border-radius: var(--insur-bdr-radius);
  padding: 12px 20px;
  box-shadow: 0px 8px 30px 0px rgba(0, 0, 0, 0.18);
}

.main-header-two__logo a {
  display: block;
  line-height: 0;
}

.main-header-two__logo img {
  max-width: 100%;
  height: auto;
}

/* Mavi zemin uzerindeki iletisim yazilari icin kontrast */
.main-header-two__top-details-list li .text p,
.main-header-two__top-details-list li .text p a {
  color: var(--medyol-on-blue);
}

.main-header-two__top-details-list li .text p a:hover {
  color: var(--medyol-cyan);
}

/*------------------------------------------------------------
# Ust ince serit (calisma saatleri / dil)
------------------------------------------------------------*/
.main-header-two__top-social-box {
  background-color: var(--medyol-blue-deep);
}

.main-header-two__top-social-text,
.main-header-two__top-social-text span,
.main-header-two__top-menu li a,
.main-header-two__top-social a {
  color: var(--medyol-on-blue);
}

.main-header-two__top-social-text i,
.main-header-two__top-menu li a:hover,
.main-header-two__top-social a:hover {
  color: var(--medyol-cyan);
}

/*------------------------------------------------------------
# Menu cubugu : mavi bandin uzerinde otururken alt kenar vurgusu
------------------------------------------------------------*/
.main-menu-two__wrapper-inner {
  border-bottom: 3px solid var(--medyol-blue-light);
}

/*------------------------------------------------------------
# Preloader : logo koyu yazili, zemin acik kalmali
------------------------------------------------------------*/
.preloader {
  background-color: #ffffff;
}

.preloader__image {
  background-size: 170px auto;
}

/*------------------------------------------------------------
# Footer logosu : footer zemini koyu, logoya beyaz plaka
------------------------------------------------------------*/
.footer-widget__logo {
  background-color: #ffffff;
  border-radius: var(--insur-bdr-radius);
  padding: 12px 18px;
  display: inline-block;
}

.footer-widget__logo a {
  display: block;
  line-height: 0;
}

.footer-widget__logo img {
  max-width: 100%;
  height: auto;
}

/*------------------------------------------------------------
# Mobil menu logosu : mobil menu zemini koyu
------------------------------------------------------------*/
.mobile-nav__content .logo-box {
  background-color: #ffffff;
  border-radius: var(--insur-bdr-radius);
  padding: 10px 14px;
  display: inline-block;
}

.mobile-nav__content .logo-box a {
  display: block;
  line-height: 0;
}

.mobile-nav__content .logo-box img {
  max-width: 100%;
  height: auto;
}

/*------------------------------------------------------------
# ANA SLIDER : mavi kaplama kaldirildi, sinematik gorunum
# Sablondaki .image-layer-two:before mavi-siyah bir poligon
# cizerek gorseli kapatiyordu; :after ise egik mavi seridi.
# Ikisi de iptal edilip yerine notr (mavi olmayan) bir
# sinema perdesi + vinyet gecirildi.
------------------------------------------------------------*/
.main-slider-two {
  overflow: hidden;
}

.main-slider-two .swiper-slide {
  overflow: hidden;
}

/* Mavi poligon -> notr yatay perde + ust/alt vinyet */
.image-layer-two:before {
  max-width: none;
  width: 100%;
  right: 0;
  clip-path: none;
  -webkit-clip-path: none;
  background-color: transparent;
  background-image:
    linear-gradient(180deg,
      rgba(4, 6, 9, 0.50) 0%,
      rgba(4, 6, 9, 0.00) 26%,
      rgba(4, 6, 9, 0.00) 58%,
      rgba(4, 6, 9, 0.58) 100%),
    linear-gradient(90deg,
      rgba(4, 6, 9, 0.82) 0%,
      rgba(4, 6, 9, 0.68) 32%,
      rgba(4, 6, 9, 0.34) 58%,
      rgba(4, 6, 9, 0.08) 82%,
      rgba(4, 6, 9, 0.00) 100%);
}

/* Egik mavi serit tamamen kaldirildi */
.image-layer-two:after {
  display: none;
  content: none;
}

/* Ken Burns zoom'u yumusatildi : kenarlarda kayma hissi azalir */
.main-slider-two .swiper-slide-active .image-layer-two {
  -webkit-transform: scale(1.08);
  transform: scale(1.08);
}

/*------------------------------------------------------------
# Slaytlar arasi yukseklik oynamasini (kayma) engelle
# Fade efektinde slaytlarin icerik yuksekligi farkli olunca
# konteyner her gecipte ziplayordu.
------------------------------------------------------------*/
.main-slider-two__inner {
  min-height: 372px;
}

/* Metinler gorsel uzerinde her kosulda okunsun */
.main-slider-two__title {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.45);
}

.main-slider-two .swiper-slide-active .main-slider-two__text {
  opacity: 0.92;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

@media only screen and (max-width: 1199px) {
  .main-slider-two__inner {
    min-height: 330px;
  }
}

@media only screen and (max-width: 767px) {
  .main-slider-two__inner {
    min-height: 300px;
  }

  /* Mobilde perde dikey olsun, yazi altta kalmasin */
  .image-layer-two:before {
    background-image:
      linear-gradient(180deg,
        rgba(4, 6, 9, 0.72) 0%,
        rgba(4, 6, 9, 0.58) 45%,
        rgba(4, 6, 9, 0.70) 100%);
  }
}

/*------------------------------------------------------------
# Katalog sayfasi
------------------------------------------------------------*/
.medyol-katalog {
  padding: 100px 0 110px;
}

.medyol-katalog__intro {
  font-size: 17px;
  line-height: 32px;
  color: var(--insur-text);
  max-width: 860px;
  margin-bottom: 32px;
}

.medyol-katalog__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 40px;
}

.medyol-katalog__btn i {
  margin-right: 8px;
}

.medyol-katalog__btn--ghost {
  background-color: transparent;
  color: var(--medyol-blue);
  box-shadow: inset 0 0 0 2px var(--medyol-blue);
}

.medyol-katalog__btn--ghost:hover {
  color: #ffffff;
}

.medyol-katalog__viewer {
  position: relative;
  width: 100%;
  height: 82vh;
  min-height: 560px;
  border-radius: var(--insur-bdr-radius);
  overflow: hidden;
  background-color: #f1f4f8;
  box-shadow: 0px 10px 60px 0px rgba(7, 30, 58, 0.12);
}

.medyol-katalog__viewer object {
  display: block;
  border: 0;
}

.medyol-katalog__fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  height: 100%;
  padding: 40px 24px;
  text-align: center;
}

@media only screen and (max-width: 767px) {
  .medyol-katalog {
    padding: 70px 0 80px;
  }

  /* Mobil tarayicilarin cogu PDF'i gomulu gostermez : gorunturu kucult */
  .medyol-katalog__viewer {
    height: 60vh;
    min-height: 380px;
  }
}

/*------------------------------------------------------------
# KURUMSAL KATALOG PALETI  (2026-08)
# Kaynak: Medyol-Enerji-Katalog.pdf
#   koyu antrasit-lacivert yuzeyler + zumrut yesili vurgu
#
# Sablonun tum renkleri :root degiskenlerinden besleniyor,
# bu yuzden tek blok yeterli. Eski gorunume donmek icin
# bu blogu silmek yeterlidir.
------------------------------------------------------------*/
:root {
  /* Aksiyon rengi : butonlar, linkler, ikonlar (eski #015fc9 mavi) */
  --insur-base: #2fae5f;
  --insur-base-rgb: 47, 174, 95;

  /* Koyu yuzey + basliklar (eski #16243d) */
  --insur-black: #1f2a35;
  --insur-black-rgb: 31, 42, 53;

  /* Ikincil vurgu (eski camgobegi #0ce0ff) */
  --insur-primary: #4ed684;
  --insur-primary-rgb: 78, 214, 132;

  /* Medyol markasi : katalogla ayni tonlar */
  --medyol-blue-deep: #16202a;
  --medyol-blue: #1f2a35;
  --medyol-blue-light: #2b3a48;
  --medyol-cyan: #4ed684;
  --medyol-on-blue: #c9d4de;
  --medyol-green: #2fae5f;
  --medyol-green-bright: #4ed684;
}

/* Menu cubugunun alt cizgisi yesil vurgu olsun */
.main-menu-two__wrapper-inner {
  border-bottom: 3px solid var(--medyol-green);
}

/* Bolum ustundeki kucuk etiket (katalogdaki yesil eyebrow) */
.section-sub-title {
  color: var(--medyol-green);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* Sayac rakamlari ve yanindaki + / MW / % isareti */
.about-two__counter-percent,
.counter-one__plus {
  color: var(--medyol-green);
}

/* "368" gibi rakamin yanindaki birim, rozet icinde kucuk dursun */
.about-two__awards-unit {
  font-size: 0.45em;
  font-weight: 700;
  margin-left: 4px;
  letter-spacing: 0.04em;
}

/*------------------------------------------------------------
# Sayac bandi (hakkimizda) : katalogdaki koyu sayfa gorunumu
# Sablonda zemin var(--insur-base) idi; artik base yesil oldugu
# icin tum bant parlak yesile donuyordu. Koyu antrasit + yesil
# rakam kombinasyonu katalogla birebir ortusuyor.
------------------------------------------------------------*/
.counter-one {
  background-color: var(--medyol-blue);
}

.counter-one__count-box-inner h3 {
  color: var(--medyol-green-bright);
}

.counter-one__plus {
  color: var(--medyol-green-bright);
}

.counter-one__text {
  color: var(--medyol-on-blue);
}

/* "MW" gibi harfli birim, rakamin yaninda kucuk dursun */
.counter-one__plus--unit {
  font-size: 20px;
  line-height: 36px !important;
  margin-left: 6px;
  letter-spacing: 0.04em;
}

/*------------------------------------------------------------
# Sayac bandi 5'li duzen
# Banda "Gorev alinan proje" karti eklendi; tek satirda 5 kart
# var. Sablonun 60px ikonu ve 24px basligi bu genislikte tasiyor,
# xl kirilimda olculeri bir tik kuculterek satiri koruyoruz.
------------------------------------------------------------*/
@media (min-width: 1200px) {
  .counter-one__icon span {
    font-size: 48px;
  }

  .counter-one__count-box {
    margin-left: 12px;
  }

  .counter-one__count-box-inner h3,
  .counter-one__plus {
    font-size: 30px;
    line-height: 30px !important;
  }

  .counter-one__plus--unit {
    font-size: 17px;
    line-height: 30px !important;
  }

  .counter-one__text {
    font-size: 19px;
    line-height: 28px;
  }
}

/*------------------------------------------------------------
# Anasayfa sag kolon sayaclari : 4 kalem
# Listeye "Gorev Alinan Proje" eklendi; kolonun gorsel ve metin
# kolonlariyla ayni yukseklikte kalmasi icin kalemler arasindaki
# bosluk daraltildi.
------------------------------------------------------------*/
@media (min-width: 1200px) {
  .about-two__counter-list li {
    padding-bottom: 22px;
    margin-bottom: 22px;
  }
}

/*------------------------------------------------------------
# Sayfa gecisi : donen ruzgar turbini
# Sablonun preloader'i sadece ilk aciliste calisiyordu ve
# logoyu flipInY ile cevirioyordu. Artik hem ilk aciliste hem
# de her sayfa gecisinde donen bir turbin gosteriliyor.
# Tetikleme : /assets/js/medyol-sayfa-gecisi.js
------------------------------------------------------------*/
.preloader__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
}

.preloader__turbine {
  display: block;
  width: 104px;
  height: 104px;
  overflow: visible;
}

.preloader__rotor {
  transform-box: view-box;
  transform-origin: 60px 44px;
  -webkit-animation: medyol-rotor 2.6s linear infinite;
  animation: medyol-rotor 2.6s linear infinite;
}

@-webkit-keyframes medyol-rotor {
  from { -webkit-transform: rotate(0deg); }
  to   { -webkit-transform: rotate(360deg); }
}

@keyframes medyol-rotor {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.preloader__logo img {
  display: block;
  width: 150px;
  height: auto;
  opacity: 0.85;
}

/* Hareket azaltma acikken pervane donmesin */
@media (prefers-reduced-motion: reduce) {
  .preloader__rotor {
    -webkit-animation: none;
    animation: none;
  }
}

@media only screen and (max-width: 767px) {
  .preloader__turbine {
    width: 84px;
    height: 84px;
  }

  .preloader__logo img {
    width: 124px;
  }
}

/*------------------------------------------------------------
# Hizmet / proje detay metni
# Icerik veritabanindan HTML olarak geliyor (h2 + giris + h3'lu
# alt basliklar). Sablonda bu etiketler icin tipografi yoktu.
------------------------------------------------------------*/
.news-details__content h2 {
  font-size: 34px;
  line-height: 44px;
  font-weight: 700;
  color: var(--insur-black);
  letter-spacing: -0.03em;
  margin-bottom: 18px;
}

.news-details__content h3 {
  font-size: 21px;
  line-height: 30px;
  font-weight: 700;
  color: var(--insur-black);
  letter-spacing: -0.02em;
  margin-top: 34px;
  margin-bottom: 10px;
  padding-left: 16px;
  border-left: 3px solid var(--medyol-green);
}

.news-details__content p {
  font-size: 16px;
  line-height: 30px;
  color: var(--insur-gray);
  margin-bottom: 16px;
}

.news-details__content ul {
  margin: 0 0 20px;
  padding-left: 20px;
}

.news-details__content ul li {
  font-size: 16px;
  line-height: 30px;
  color: var(--insur-gray);
  margin-bottom: 6px;
}

.news-details__content strong {
  color: var(--insur-black);
  font-weight: 700;
}

@media only screen and (max-width: 767px) {
  .news-details__content h2 {
    font-size: 27px;
    line-height: 36px;
  }

  .news-details__content h3 {
    font-size: 19px;
    line-height: 28px;
    margin-top: 28px;
  }
}

/*------------------------------------------------------------
# Hizmet kartlari : 5 hizmet 3'lu izgaraya yerlesiyor,
# baslik uzunluklari farkli oldugu icin kartlar esitlenir.
------------------------------------------------------------*/
.news-two .news-two__single {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.news-two .news-two__content {
  flex: 1 1 auto;
}

.news-two .row {
  align-items: stretch;
}

/*------------------------------------------------------------
# Ic sayfa basligi : koyu gorsel uzerinde yazi okunmuyordu
# Sablonda perde sadece 250px genisligindeydi; uzun basliklar
# (ornegin "Muhendislik ve Teknik Ofis Cozumleri") perdeyi asip
# koyu gorselin uzerine tasiyordu.
#   1) Perde panelin tamamina yayildi, sagda yumusak biter.
#   2) Baslik bloguna genislik siniri konuldu; uzun basliklar
#      koyu bolgeye uzanmak yerine alt satira gecer.
------------------------------------------------------------*/
.page-header-bg:before {
  width: 100%;
  right: 0;
  background-image: linear-gradient(90deg,
      rgb(243, 246, 248) 0%,
      rgba(243, 246, 248, 0.98) 32%,
      rgba(243, 246, 248, 0.90) 48%,
      rgba(243, 246, 248, 0.62) 64%,
      rgba(243, 246, 248, 0.22) 80%,
      rgba(243, 246, 248, 0) 92%);
}

.page-header__inner {
  max-width: 640px;
}

@media only screen and (max-width: 991px) {
  /* Panel tum ekrani kapladigi icin perde biraz daha guclu olmali */
  .page-header-bg:before {
    background-image: linear-gradient(90deg,
        rgb(243, 246, 248) 0%,
        rgba(243, 246, 248, 0.96) 46%,
        rgba(243, 246, 248, 0.80) 70%,
        rgba(243, 246, 248, 0.45) 88%,
        rgba(243, 246, 248, 0.25) 100%);
  }

  .page-header__inner {
    max-width: none;
  }
}

/*------------------------------------------------------------
# Ust menu acilir kutusu (Hizmetler)
# Hizmet adlari uzun oldugu icin 250px'te 3 satira kiriliyordu.
# Genislik artirildi (en fazla 2 satir) ve maddeler arasina
# ice cekilmis ayirici cizgi konuldu.
------------------------------------------------------------*/
.main-menu .main-menu__list > li > ul,
.stricky-header .main-menu__list > li > ul {
  min-width: 340px;
  padding: 14px 14px;
}

.main-menu .main-menu__list > li > ul > li + li,
.stricky-header .main-menu__list > li > ul > li + li {
  margin-top: 0;
}

.main-menu .main-menu__list > li > ul > li + li::before,
.stricky-header .main-menu__list > li > ul > li + li::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background-color: rgba(var(--insur-black-rgb), 0.10);
}

.main-menu .main-menu__list > li > ul > li > a,
.stricky-header .main-menu__list > li > ul > li > a {
  padding: 11px 16px;
  line-height: 24px;
}

/*------------------------------------------------------------
# Proje kart gorselleri - sabit en/boy orani
# Proje gorselleri farkli oranlarda olabiliyor (850x700 stok
# gorseller ile 16:9 saha fotograflari birlikte kullaniliyor).
# Kart yuksekliklerinin kaymamasi icin kart gorselleri site
# standardi olan 850/700 oraninda kirpilarak gosteriliyor.
# Detay sayfasindaki carousel'e dokunulmuyor; orada fotograf
# tam haliyle goruntuleniyor.
------------------------------------------------------------*/
.news-two__img img,
.portfolio__img img {
  aspect-ratio: 850 / 700;
  object-fit: cover;
  object-position: center;
  display: block;
}