/* =========================================================
   gorsel_oran.css  -  Ada Ozgur Insaat
   ---------------------------------------------------------
   Panelden eklenen gorseller dikey (portre) ya da yatay
   (manzara) olabiliyor. Bu dosya, liste/grid alanlarindaki
   tum gorselleri ayni orana sabitleyip kirparak (object-fit:
   cover) satirlarin birbirinden kopuk ve orantisiz
   gorunmesini engeller.

   Kullanim:
     <div class="gorsel_cerceve oran_4_3">
         <img src="..." alt="..." />
     </div>

   Oran siniflari: oran_1_1, oran_4_3, oran_3_2, oran_16_9,
                   oran_21_9, oran_5_2 (mansetler icin)
   ========================================================= */

.gorsel_cerceve {
	position: relative;
	display: block;
	width: 100%;
	overflow: hidden;
	background: #f1f1f1;
	line-height: 0;
}

/* padding-hilesi: aspect-ratio desteklemeyen eski tarayicilar icin */
.gorsel_cerceve:before {
	content: "";
	display: block;
	width: 100%;
	padding-top: 75%; /* varsayilan 4:3 */
}

.gorsel_cerceve > img,
.gorsel_cerceve > a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.gorsel_cerceve img {
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	object-fit: cover !important;
	object-position: center center !important;
	display: block;
	padding: 0 !important;
	transition: transform 0.45s ease;
}

/* fareyle uzerine gelince hafif yakinlasma */
.gorsel_cerceve.gorsel_zoom:hover img { transform: scale(1.06); }

/* --- Oranlar --- */
.oran_1_1:before   { padding-top: 100%;    }
.oran_4_3:before   { padding-top: 75%;     }
.oran_3_2:before   { padding-top: 66.666%; }
.oran_16_9:before  { padding-top: 56.25%;  }
.oran_21_9:before  { padding-top: 42.857%; }
.oran_5_2:before   { padding-top: 40%;     }
.oran_3_4:before   { padding-top: 133.33%; }

/* cerceveli kart gorunumu */
.gorsel_cerceve.cerceveli { border: 1px solid #e0e0e0; border-radius: 2px; }

/* =========================================================
   Header - yeni kurumsal kimlige uyarlama
   Eski logo mor zemin icin tasarlanmisti; yeni logo lacivert
   + yesil oldugundan header beyaz zemine alindi ve menu
   yazilari kurumsal lacivert yapildi.
   ========================================================= */
#header {
	background: #ffffff !important;
	border-bottom: 1px solid #e6e6e6;
}

/* --- Ust menu --- */
#header .topnav a,
#header .dropdown .dropbtn {
	color: #16308a;
}
#header .topnav a:hover,
#header .dropdown:hover .dropbtn {
	background-color: #eef2fb;
	color: #16308a;
}
#header .topnav a.icon,
#header .topnav a.icon:hover {
	color: #16308a;
	background: none;
}

/* --- Acilir menu (dropdown) --- */
#header .dropdown-content {
	background-color: #ffffff;
	border: 1px solid #e3e7f0;
	border-top: 3px solid #16a34a;
	box-shadow: 0 14px 34px rgba(22, 48, 138, 0.16);
	border-radius: 0 4px 4px 4px;
	overflow: hidden;
	padding: 4px 0;
}
#header .dropdown-content a {
	color: #16308a;
	background: none;
	border-bottom: 1px solid #f1f3f8;
	font-weight: 400;
}
#header .dropdown-content a:last-child {
	border-bottom: 0;
	color: #16a34a;
	font-weight: 600;
}
#header .dropdown-content a:hover {
	background-color: #16a34a;
	color: #ffffff;
}
#header .dropdown-content a:last-child:hover {
	background-color: #16a34a;
	color: #ffffff;
}

/* =========================================================
   Manset (WOW Slider) gorselleri
   Slider 1920x768 (5:2) olarak tasarlandi. Farkli oranda bir
   gorsel yuklenirse tasmasin / bozulmasin diye kirpiliyor.
   ========================================================= */
#wowslider-container1 .ws_images ul li {
	position: relative;
}
#wowslider-container1 .ws_images ul li > img,
#wowslider-container1 .ws_images ul li > a > img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	object-position: center center;
}

/* =========================================================
   Genel guvenlik: icerik (CKEditor) icinden gelen gorseller
   sayfa genisligini asmasin
   ========================================================= */
.icerik_alani img,
.hizmet_icerik img,
.haber_icerik img {
	max-width: 100%;
	height: auto;
}

/* =========================================================
   Muteahhitlik projeleri blogu (ana sayfa + galeri)
   ========================================================= */
.proje_blok_baslik {
	color: #252525;
	font-weight: 400;
	font-size: 35px;
	letter-spacing: 3px;
	text-align: center;
}
.proje_kart {
	position: relative;
	display: block;
	width: 100%;
	background: #ffffff;
	border: 1px solid #e0e0e0;
	overflow: hidden;
	text-decoration: none;
	transition: box-shadow 0.35s ease, transform 0.35s ease;
}
.proje_kart:hover {
	box-shadow: 0 14px 40px -14px rgba(0, 0, 0, 0.55);
	transform: translateY(-3px);
}
.proje_kart_govde { padding: 16px 18px 20px 18px; }
.proje_kart_baslik {
	font-family: "Poppins", sans-serif;
	font-size: 20px;
	font-weight: 500;
	color: #1b3fa0;
	margin: 0 0 6px 0;
	line-height: 1.3;
}
.proje_kart_metin {
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	color: #444444;
	line-height: 1.6;
	margin: 0;
}
.proje_rozet {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 5;
	display: inline-block;
	padding: 6px 12px;
	border-radius: 20px;
	font-family: "Poppins", sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.5px;
	color: #ffffff;
	text-transform: uppercase;
}
.proje_rozet_devam      { background: #16a34a; }
.proje_rozet_tamamlanan { background: #1b3fa0; }

.proje_sayac {
	font-family: "Poppins", sans-serif;
	font-size: 13px;
	color: #777777;
	margin-top: 4px;
	display: block;
}

.proje_buton {
	display: inline-block;
	margin-top: 14px;
	padding: 10px 26px;
	background: #1b3fa0;
	color: #ffffff !important;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	letter-spacing: 1px;
	text-decoration: none;
	border-radius: 2px;
	transition: background 0.3s ease;
}
.proje_buton:hover { background: #16a34a; }

/* kucuk ekranlar */
@media screen and (max-width: 768px) {
	.proje_blok_baslik { font-size: 26px; letter-spacing: 2px; }
	.proje_kart_baslik { font-size: 18px; }
}

/* =========================================================
   TİPOGRAFİ ÖLÇEĞİ
   ---------------------------------------------------------
   Sitede yazı boyutları 12px ile 35px arasında dağınıktı
   (gövde metni yer yer 13px'e kadar düşüyor, başlıklar ise
   35px'te kalıyordu). Aşağıdaki ölçek tutarlı bir hiyerarşi
   kurar ve mobilde okunabilirlik alt sınırını korur.

     Bölüm başlığı .... 34px  (mobil 24px)
     Kart başlığı ..... 20px  (mobil 18px)
     Giriş paragrafı .. 19px  (mobil 16px)
     Gövde metni ...... 16px  (mobil 15px)
     Küçük / meta ..... 13px  (mobil 13px)
   ========================================================= */

/* --- Bölüm başlıkları --- */
.bolum_basligi {
	font-family: "Poppins", sans-serif;
	font-size: 34px !important;
	font-weight: 400 !important;
	line-height: 1.25;
	letter-spacing: 3px;
	color: #252525;
	margin: 0;
}
.bolum_basligi_hero {
	font-weight: 300 !important;
	letter-spacing: 1px;
	line-height: 1.3;
}
.proje_blok_baslik { font-size: 34px; line-height: 1.25; }

/* --- Kart başlıkları --- */
.kart_basligi {
	font-family: "Poppins", sans-serif;
	font-size: 20px !important;
	font-weight: 500 !important;
	line-height: 1.35;
	color: #252525;
	margin: 0 0 6px 0;
}

/* --- Giriş paragrafı --- */
.index_hakkimizda_div_2_yazi_2 {
	font-size: 19px !important;
	font-weight: 300 !important;
	line-height: 1.7;
}

/* --- Gövde metinleri (çok küçük kalanlar büyütüldü) --- */
.index_p_yazi_muli { font-size: 15px !important; line-height: 1.65; }
.index_baslik_5    { font-size: 18px !important; font-weight: 600 !important; line-height: 1.35; }
.index_galeri_h3   { font-size: 17px !important; font-weight: 400 !important; }
.inc_banner_yazi_2 { font-size: 14px; }
.proje_kart_metin  { font-size: 15px; line-height: 1.65; }
.proje_kart_baslik { font-size: 20px; }
.index_siparis_div_yazi { font-size: 22px !important; line-height: 1.5; }

/* --- Hizmet kartı gövdesi --- */
.inc_hzmt_box_border p { font-size: 15px; line-height: 1.65; margin: 0; }

/* --- Butonlar --- */
.index_hakkimizda_div_buton { font-size: 14px !important; letter-spacing: 3px !important; }
.index_siparis_div_buton    { font-size: 14px !important; letter-spacing: 1px; }
.proje_buton                { font-size: 14px; }

/* =========================================================
   TABLET (<= 992px)
   ========================================================= */
@media screen and (max-width: 992px) {
	.bolum_basligi          { font-size: 28px !important; letter-spacing: 2px; }
	.proje_blok_baslik      { font-size: 28px; }
	.kart_basligi           { font-size: 19px !important; }
	.index_hakkimizda_div_2_yazi_2 { font-size: 17px !important; }
}

/* =========================================================
   MOBİL (<= 768px)  -  gövde metni 15px'in altına inmez
   ========================================================= */
@media screen and (max-width: 768px) {
	.bolum_basligi          { font-size: 24px !important; letter-spacing: 1px; }
	.proje_blok_baslik      { font-size: 24px; letter-spacing: 1px; }
	.kart_basligi           { font-size: 18px !important; }
	.index_hakkimizda_div_2_yazi_2 { font-size: 16px !important; line-height: 1.65; }

	.index_p_yazi_muli      { font-size: 15px !important; }
	.index_baslik_5         { font-size: 17px !important; }
	.index_galeri_h3        { font-size: 16px !important; }
	.proje_kart_metin       { font-size: 15px; }
	.proje_kart_baslik      { font-size: 18px; }
	.inc_hzmt_box_border p  { font-size: 15px; }
	.index_siparis_div_yazi { font-size: 19px !important; padding: 14px !important; }
	.inc_banner_yazi_2      { font-size: 14px; line-height: 22px; }

	/* footer ve genel küçük yazılar */
	.index_footer_link,
	.footer_yazi_1          { font-size: 15px !important; }

	/* butonlar parmakla basılabilir kalsın */
	.index_hakkimizda_div_buton { font-size: 14px !important; letter-spacing: 2px !important; }
	.proje_buton                { font-size: 15px; padding: 12px 26px; }

	/* mobilde hizmet kartlarının sabit yüksekliği boşluk yaratıyordu */
	.inc_hzmt_box_border    { min-height: 0 !important; }
}

/* =========================================================
   KÜÇÜK MOBİL (<= 480px)
   ========================================================= */
@media screen and (max-width: 480px) {
	.bolum_basligi     { font-size: 21px !important; }
	.proje_blok_baslik { font-size: 21px; }
	.kart_basligi      { font-size: 17px !important; }
}

/* =========================================================
   DETAY SAYFALARI - görsel ile metin arası boşluk
   ---------------------------------------------------------
   Blog ve hizmet detayında sol sütundaki görsel ile sağdaki
   metin bitişik duruyordu. Araya nefes payı konuluyor.
   ========================================================= */
.cols_available_wrap > .cols_available {
	padding-left: 36px;
	box-sizing: border-box;
}
.cols_available_wrap > .equal_colsx2 {
	box-sizing: border-box;
}
/* metin bloğu içindeki satır aralıkları */
.cols_available_wrap > .cols_available h2 {
	margin: 0 0 14px 0;
	line-height: 1.35;
}
.cols_available_wrap > .cols_available p {
	line-height: 1.75;
}

/* Dar ekranda sütunlar alt alta düşer; yan boşluk kalkar,
   görselin altına dikey boşluk gelir. */
@media screen and (max-width: 992px) {
	.cols_available_wrap > .cols_available {
		padding-left: 0;
		padding-top: 24px;
	}
}

/* =========================================================
   MANŞET - mobil düzenlemeleri
   ---------------------------------------------------------
   Manşette çok sayıda slayt olduğu için, WOW Slider'ın nokta
   (bullet) göstergeleri dar ekranda birkaç satıra sarıyor ve
   görselin ortasına biniyordu. Mobilde gizleniyor; kaydırma
   okları yerinde kalıyor.
   ========================================================= */
@media screen and (max-width: 768px) {
	#wowslider-container1 .ws_bullets,
	#wowslider-container1 .ws_bullets div {
		display: none !important;
	}
	/* rozet ve sayaç gibi küçük etiketler mobilde bir tık büyüsün */
	.proje_rozet { font-size: 13px; padding: 5px 11px; }
	.proje_sayac { font-size: 14px; }
}

/* =========================================================
   KART YÜKSEKLİKLERİ - ölü boşlukların kaldırılması
   ---------------------------------------------------------
   Hizmet ve SEO kartlarında yükseklik "min-height" ile sabitleniyordu.
   Metni kısa olan kartlarda bu, metin ile buton arasında büyük bir
   boşluk bırakıyordu. Artık kartlar esnek kutu (flex) ile çalışıyor:
   satırdaki kartlar yine eşit yükseklikte ve butonlar aynı hizada
   kalıyor, ama arada ölü boşluk oluşmuyor.
   ========================================================= */

/* --- Hizmet kartları --- */
.hizmet_kolon { display: flex; }
.hizmet_kolon .inc_hzmt_box_border {
	display: flex;
	flex-direction: column;
	width: 100%;
	min-height: 0;
}
.hizmet_kart_baslik { margin-top: 16px; }
.hizmet_kart_metin  { flex: 1 1 auto; margin-bottom: 18px; }
.hizmet_kolon .index_hakkimizda_div_buton { margin-top: auto; }

/* --- SEO (etiket) kartları --- */
.etiket_kolon { display: flex; margin-bottom: 22px; }
.etiket_kart {
	display: flex;
	flex-direction: column;
	width: 100%;
	border: 1px solid #d8dbe4;
	border-radius: 3px;
	padding: 20px;
	background: rgba(255, 255, 255, 0.86);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.etiket_kart:hover {
	box-shadow: 0 12px 30px -12px rgba(0, 0, 0, 0.45);
	transform: translateY(-2px);
}
.etiket_kart_metin { flex: 1 1 auto; margin: 10px 0 16px 0; }
.etiket_devami {
	display: block;
	margin-top: auto;
	font-family: "Poppins", sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 1px;
	color: #16308a;
}
.etiket_kart:hover .etiket_devami { color: #16a34a; }

@media screen and (max-width: 768px) {
	.etiket_kart { padding: 16px; }
	.hizmet_kart_metin { margin-bottom: 14px; }
}