@charset "utf-8";
/* ==========================================================================
   ASKON MAKINE — CMS/tasarim ozellestirmeleri
   Tema dosyalarina (header.css, global.css, petasoft/icerik_css/*) DOKUNULMAZ;
   tum farklar burada toplanir. Tema guncellenirse bu dosya ayakta kalir.
   head'de tema CSS'lerinden SONRA yuklenir.
   ========================================================================== */


/* ==========================================================================
   1. HEADER — duz hali sticky ile ayni + beyaz/turuncu takasi
   --------------------------------------------------------------------------
   ONCE: turuncu bar; logo turuncu kutu icinde yukari tasmis (margin-top:-88px),
         kose yuvarlamali "yuzen" kutu, ust serit logo icin 300px bosluk birakiyor.
   SONRA: kenardan kenara BEYAZ bar, logo satir ici — yani sticky'nin gorunumu.
   ========================================================================== */

/* Yuzen konum kalksin, ust serit sayfanin en ustune otursun */
.main-header.header-style-three{
	top: 0;
}

/* Ust serit (mail/telefon/sosyal) KALIYOR.
   Tema onu container icinde yuvarlak koseli "yuzen kutu" olarak ciziyordu
   (x=75..1365) — kenarlarda beyaz bosluk kaliyordu. Koyu zemini serigin
   KENDISINE tasidik: bar kenardan kenara, icerik container hizasinda. */
.header-style-three .header-top{
	background-color: var(--color-two);
}
.header-style-three .header-top .inner-container{
	padding-left: 0;
	border-radius: 0;
	background-color: transparent;
}

/* Logo: turuncu kutudan cikti, yukari tasmasi bitti (sticky'deki ile ayni) */
.header-style-three .header-lower .logo-box .logo{
	margin-top: 0;
	padding: 14px 0;
	border-radius: 0;
	background-color: transparent;
}

/* Alt bar: tam genislik beyaz zemin.
   :before, turuncu barin sol 210px'ten baslamasini sagliyordu — artik gereksiz. */
.header-style-three .header-lower{
	background-color: var(--white-color);
	box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.header-style-three .header-lower .inner-container{
	padding-right: 0;
}
.header-style-three .header-lower .inner-container:before{
	display: none;
}

/* Sticky hali de ayni beyaz olsun (tema burada turuncuya zorluyordu) */
.header-style-three.fixed-header .header-lower{
	background-color: var(--white-color);
}
.header-style-three.fixed-header .header-lower .logo-box .logo{
	background-color: transparent;
	padding: 14px 0;
}

/* Menu yazilari: beyaz zeminde okunmasi icin koyu, hover/aktifte turuncu */
.header-style-three .header-lower .main-menu .navigation > li > a{
	color: var(--color-two);
}
.header-style-three .header-lower .main-menu .navigation > li:hover > a,
.header-style-three .header-lower .main-menu .navigation > li.current > a{
	color: var(--main-color);
}

/* WhatsApp butonu: beyaz pill -> turuncu pill (takasin kendisi) */
.header-style-three .main-header_button .btn-style-three{
	background-color: var(--main-color);
}
.header-style-three .main-header_button .btn-style-three .btn-wrap .text-one,
.header-style-three .main-header_button .btn-style-three .btn-wrap .text-two{
	color: var(--white-color);
}

/* Hamburger dairesi: koyu -> turuncu */
.header-style-three .header-lower .inner-container .hamburger{
	background-color: var(--main-color);
}

/* Mobil menu tetikleyicisi beyaz zeminde kaybolmasin */
.header-style-three .header-lower .mobile-nav-toggler{
	color: var(--color-two);
}

/* --------------------------------------------------------------------------
   1a-2. UC SEVIYELI MENU (alt menunun alt menusu)
   config_site.php -> loop_array() artik istedigi kadar derine iniyor; alt
   menusu olan her <li> "dropdown" sinifini aliyor. Temanin header.css'i
   3. seviyeyi zaten stillendiriyor (`> li > ul > li > ul`, left:100%),
   burada sadece EKSIK kalan davranislari tamamliyoruz.
   -------------------------------------------------------------------------- */

/* Ekranin sagina tasan 3. seviye SOLA acilir.
   Sinifi antebim_custom.js olcup ekliyor (temada .from-right kurali var ama
   kimse eklemiyordu — Urunlerimiz gibi sag taraftaki menulerde ucuncu
   seviye ekran disinda kaliyordu). */
.main-header .main-menu .navigation > li > ul > li > ul.from-right{
	left: auto;
	right: 100%;
}

/* 3. seviyede de acilir menu oku gorunsun (tema sadece 2. seviyeye koymus) */
.main-header .main-menu .navigation > li > ul > li > ul > li.dropdown > a:after{
	position: absolute;
	content: "\f105";
	right: 15px;
	top: 12px;
	z-index: 5;
	width: 10px;
	height: 20px;
	display: block;
	line-height: 20px;
	text-align: center;
	font-weight: 800;
	font-size: 14px;
	color: var(--black-color);
	font-family: 'Font Awesome 6 Free';
}

/* GUVENLIK AGI: 4. seviye ve otesi. Tema o kadar derine kural yazmamis;
   kural olmayinca <ul> akista kalir ve menuyu asagi dogru sisirir.
   Panelde biri o kadar derin bir menu kurarsa yine yandan acilsin. */
.main-header .main-menu .navigation ul ul ul.deep-sub{
	position: absolute;
	left: 100%;
	top: 0;
	width: 16rem;
	padding: 15px;
	opacity: 0;
	visibility: hidden;
	transition: all 300ms ease;
	background-color: var(--white-color);
	box-shadow: 0 0 10px rgba(0,0,0,0.10);
}
.main-header .main-menu .navigation ul ul li.dropdown:hover > ul.deep-sub{
	opacity: 1;
	visibility: visible;
}

/* MOBIL — tema 2. seviyeyi 30px, 3. seviyeyi 40px icerden basliyor ama
   4.+ seviye icin ne girinti ne de "kapali basla" kurali var. */
.main-header .mobile-menu .navigation li > ul > li > ul > li > a{
	padding-left: 44px;
}
.main-header .mobile-menu .navigation li > ul > li > ul > li > ul{
	display: none;
}
.main-header .mobile-menu .navigation li > ul > li > ul > li > ul > li > a{
	padding-left: 60px;
}
/* Mobilde acilir menuler mutlak konumlanmasin (yukaridaki guvenlik agi
   masaustu icindir) — akista, ac/kapa ile calissin. */
@media only screen and (max-width: 991px){
	.main-header .main-menu .navigation ul ul ul.deep-sub{
		position: static;
		width: auto;
		padding: 0;
		opacity: 1;
		visibility: visible;
		box-shadow: none;
	}
}


/* NOT: .page-title'in ust bosluguna DOKUNULMAZ.
   Once buraya "padding-top:60px" yazilmisti; tema 320px (mobilde 200px)
   veriyor ve header artik top:0'da opak durdugu icin 60px basligi headerin
   ARKASINDA birakti (canlida goruldu). Tema degeri zaten yeterli. */


/* --------------------------------------------------------------------------
   1b. SAYFA BASLIGI H2 -> H1 (SEO: her sayfada tek H1 olmali)
   icerik.php'de <h2> idi, <h1> yapildi. Tema h1'i 96px/100px, h2'yi 60px/70px
   tanimliyor — donusum gorunumu bozmasin diye eski h2 olculeri birebir verildi.
   -------------------------------------------------------------------------- */
.page-title h1{
	font-size: 60px;
	line-height: 70px;
	text-transform: uppercase;
	color: var(--white-color);
	font-family: "Alexandria", sans-serif;
}


/* --------------------------------------------------------------------------
   1c. KAYAN SERIT (marketing-two) — <h1> yerine <span>
   Tema seritteki her kelimeyi <h1> yapiyordu → ana sayfada 15 H1. index.php'de
   <span>'e cevrildi; tema kurali .animation_mode h1'e bagli oldugu icin ayni
   gorunum burada span'e verildi.
   -------------------------------------------------------------------------- */
/* Slider: SADECE ilk slayt H1, sonrakiler h2 (sayfada tek H1 olmali).
   .slider-three_heading font-size TANIMLAMIYOR — etiketten miras aliyor
   (h1=96px, h2=60px) → 2. slayt kucuk cikardi. Temanin h1 kirilimlari
   (global.css + responsive.css 990/767/479) burada sinifa baglandi ki
   h1 ve h2 her ekranda AYNI gorunsun. */
.slider-three_heading{
	font-size: 96px;
	line-height: 100px;
}
@media only screen and (max-width: 990px){
	.slider-three_heading{ font-size: 60px; line-height: 76px; }
}
@media only screen and (max-width: 767px){
	.slider-three_heading{ font-size: 40px; line-height: 56px; }
}
@media only screen and (max-width: 479px){
	.slider-three_heading{ font-size: 26px; line-height: 38px; }
}

.marketing-two .animation_mode span{
	margin: 0 15px;
	font-size: 32px;
	line-height: 1em;
	font-weight: 500;
	padding: 0 0 10px;
	display: inline-block;
	text-transform: uppercase;
	color: var(--white-color);
}


/* --------------------------------------------------------------------------
   1d. ANA SAYFA URUN KARUSELI — gorsel kutusu SABIT
   Slaytlar artik panelden gelen urun fotolarini kullaniyor ve bunlarin orani
   birbirini tutmuyor (olculdu: 613x146, 613x460, 613x817, 613x1124).
   Tema goersele yukseklik vermedigi icin karusel EN UZUN slayta gore
   yukseliyordu → kisa slayt gorunurken ALTTA buyuk bir bosluk kaliyordu.
   Kutu sabitlendi; `contain` ile fotografin TAMAMI gorunur, kirpilmaz.
   Temanin mask-image'i (service-9-1.png) img kutusuna uygulandigi icin
   bos kalan kenarlar seffaf kalir, cirkin bant olusmaz.
   -------------------------------------------------------------------------- */
.service-block_three-image{
	height: 460px;              /* 613x460 ≈ 4:3 — sag kolondaki metin yuksekligiyle uyumlu */
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}
.service-block_three-image img{
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

@media only screen and (max-width: 991px){
	.service-block_three-image{ height: 380px; }
}
@media only screen and (max-width: 599px){
	.service-block_three-image{ height: 280px; }
}


/* ==========================================================================
   2. HAMBURGER POPUP (about-sidebar) — iletisim bilgileri blogu
   ========================================================================== */

.about-sidebar_contact{
	margin-top: 30px;
	padding-top: 25px;
	border-top: 1px solid rgba(0,0,0,0.08);
}
.about-sidebar_contact h4{
	font-size: 18px;
	font-weight: 700;
	margin-bottom: 18px;
	color: var(--color-two);
}
.about-sidebar_contact ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
.about-sidebar_contact li{
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 14px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-three);
}
.about-sidebar_contact li .icon{
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	line-height: 34px;
	text-align: center;
	border-radius: 50%;
	font-size: 14px;
	color: var(--white-color);
	background-color: var(--main-color);
}
.about-sidebar_contact li a{
	color: var(--color-three);
	transition: color .3s ease;
}
.about-sidebar_contact li a:hover{
	color: var(--main-color);
}


/* ==========================================================================
   3. IC SAYFA FOTO GRIDI — hepsi ayni boyut
   --------------------------------------------------------------------------
   petasoft/icerik_css/resim4.css'te `height:auto; object-fit:contain` var →
   her foto kendi oranini koruyor, kartlar farkli yukseklikte cikiyordu.
   resim4.css govdede (head'den SONRA) yuklendigi icin burada daha yuksek
   ozgulluk (.about-one one eki) kullanildi — yoksa tema kurali kazanirdi.
   ========================================================================== */

.about-one .galleryk-item img{
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;      /* TUM kartlar ayni olcu (olculdu: onceden 484px ve 272px karisikti) */
	object-fit: contain;      /* cover DEGIL: galeride dikey afisler de var
	                             (ACCESS PRIME/NOVA teknik gorselleri) — cover
	                             onlarin altini kesiyordu, bilgi kayboluyordu.
	                             contain ile kutu sabit, gorselin tamami gorunur. */
	object-position: center;
	border-radius: 10px;
	background-color: #f7f7f7;   /* dikey gorsellerin yanindaki bosluk notr dursun */
}

/* Kartlar da esit yukseklikte dursun */
.about-one .galleryk{
	display: flex;
}
.about-one .galleryk-item{
	display: flex;
	flex-direction: column;
	width: 100%;
	box-shadow: 0 4px 14px rgba(0,0,0,0.10);   /* tema 0.5 opaklik = cok sert */
}
.about-one .galleryk-item p{
	margin-top: auto;
	padding-top: 12px;
}


/* ==========================================================================
   3a. IC SAYFA METNI — panelden gelen <ul>/<h2> icin okunabilir aralik
   Tema icerik alanindaki listelere stil vermiyor; madde isareti yok ve
   satirlar birbirine yapisik cikiyordu (Referanslarimiz sayfasinda goruldu).
   ========================================================================== */

.about-one_content-column ul{
	margin: 0 0 22px;
	padding-left: 20px;
	list-style: disc;
}
.about-one_content-column ul li{
	margin-bottom: 8px;
	line-height: 1.7;
}
.about-one_content-column h2,
.about-one_content-column h3{
	margin-top: 34px;
	margin-bottom: 16px;
}
.about-one_content-column p{
	margin-bottom: 16px;
}


/* ==========================================================================
   3b. 404 — SAYFA BULUNAMADI blogu (icerik.php)
   ========================================================================== */

.cms-404{
	padding: 20px 0 40px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--color-three);
}
.cms-404 ul{
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.cms-404 ul a{
	display: inline-block;
	padding: 10px 22px;
	border-radius: 50px;
	font-weight: 500;
	color: var(--white-color);
	background-color: var(--main-color);
	transition: background-color .3s ease;
}
.cms-404 ul a:hover{
	background-color: var(--color-two);
}


/* ==========================================================================
   3c. SIK SORULAN SORULAR (icerik/sss.php)
   Temanin accordion-box yapisi kullanildi (JS zaten assets/js/script.js'te);
   burada sadece bolum bosluklari ve zemin var.
   ========================================================================== */

.cms-sss{
	position: relative;
	padding: 70px 0 90px;
	background-color: #fafafa;
}
.cms-sss .sec-title{
	margin-bottom: 40px;
}
.cms-sss .accordion-box{
	max-width: 900px;
	margin: 0 auto;
}

@media only screen and (max-width: 767px){
	.cms-sss{ padding: 45px 0 55px; }
}


/* ==========================================================================
   4. VIDEO GALERI (icerik/video1.php)
   ========================================================================== */

.video-galeri{
	margin-top: 10px;
}
.video-galeri .col-lg-4,
.video-galeri .col-md-6{
	margin-bottom: 30px;
}
.video-galeri_item{
	height: 100%;
	background: #fff;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 4px 14px rgba(0,0,0,0.10);
}
/* 16:9 oran — iframe'e sabit height vermek mobilde bozuyordu */
.video-galeri_frame{
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
}
.video-galeri_frame iframe{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}
.video-galeri_title{
	font-size: 17px;
	line-height: 1.4;
	font-weight: 600;
	margin: 16px 18px 6px;
	color: var(--color-two);
}
.video-galeri_desc,
.video-galeri_date{
	font-size: 14px;
	margin: 0 18px 16px;
	color: var(--color-three);
}


/* ==========================================================================
   6. HARITA (include/harita.php) + ozel imlec
   footer.php'deki satir ici <style> blogu buraya tasindi.
   ========================================================================== */

/* --- Ozel imlec (footer.php'deki JS ile calisir) --- */
.cursor{
	position: fixed; top: 0; left: 0; width: 8px; height: 8px;
	margin: -4px 0 0 -4px; border-radius: 50%;
	background: var(--main-color);
	pointer-events: none; z-index: 99999; opacity: 0;
}
.cursor-follower{
	position: fixed; top: 0; left: 0; width: 38px; height: 38px;
	margin: -19px 0 0 -19px; border-radius: 50%;
	border: 1px solid rgba(var(--main-color-rgb), .55);
	pointer-events: none; z-index: 99998; opacity: 0;
	transition: width .2s, height .2s, margin .2s, background-color .2s;
}
.cursor-follower.cursor-hover{
	width: 56px; height: 56px; margin: -28px 0 0 -28px;
	background: rgba(var(--main-color-rgb), .08);
}
@media (pointer: coarse){
	.cursor, .cursor-follower{ display: none !important; }
}

/* --- Harita --- */
.harita{
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.12);
	box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.harita iframe{
	display: block;
	width: 100%;
	height: 300px;
	border: 0;
}
.harita__yol{
	display: block;
	width: 100%;
	padding: .7em 1.2em;
	border: 0;
	text-align: center;
	font-weight: 500;
	color: var(--white-color);
	background: var(--main-color);
	transition: background-color .3s ease, color .3s ease;
}
.harita__yol:hover{
	color: var(--color-two);
	background: var(--white-color);
}

/* Iletisim sayfasi: acik zeminde durdugu icin golge/kenarlik yumusak,
   harita da daha uzun */
.harita--uzun{
	margin-top: 25px;
}
.harita--uzun .harita{
	border-color: rgba(0,0,0,.08);
	box-shadow: 0 6px 20px rgba(0,0,0,.10);
}
.harita--uzun .harita iframe{
	height: 380px;
}

@media only screen and (max-width: 767px){
	.harita iframe{ height: 240px; }
	.harita--uzun .harita iframe{ height: 280px; }
}


/* ==========================================================================
   5. RESPONSIVE — header duzeltmeleri kucuk ekranda
   ========================================================================== */

/* Mobil (<=990px): responsive.css turuncu zemini .inner-container'in KENDISINE
   veriyor (masaustundeki :before degil) — beyaz takasi burada ayrica yapilmali,
   yoksa mobilde header turuncu kalir. */
@media only screen and (max-width: 990px){
	.main-header.header-style-three{
		top: 0;
	}
	.header-style-three .header-lower .inner-container{
		border-radius: 0;
		background-color: transparent;
	}
	.header-style-three .header-lower .logo-box .logo{
		padding: 10px 0;
		max-width: 200px;
	}
	.page-title h1{
		font-size: 40px;
		line-height: 50px;
	}
}

@media only screen and (max-width: 599px){
	.page-title h1{
		font-size: 30px;
		line-height: 38px;
	}
}


/* --------------------------------------------------------------------------
   7. ALT SAYFA KARTLARI (icerik.php)
   Cocugu olan her sayfanin altina otomatik cikar (Urunlerimiz -> 9 urun,
   Galeri -> 2, ve menu 3 seviyeye cikinca ara seviyeler icin de).
   Amac SEO: o sayfalara daha once SADECE header menusunden link vardi.
   Tema hazir bir kart bileseni sunmadigi icin sade bir izgara yazildi;
   renkler temanin kendi degiskenlerinden gelir (tema rengi degisirse bunlar da doner).
   -------------------------------------------------------------------------- */
.alt-sayfalar{
	padding: 0 0 90px;
}
.alt-sayfalar_baslik{
	margin-bottom: 30px;
	font-size: 32px;
	line-height: 42px;
	color: var(--color-two);
}
.alt-sayfa_kart{
	display: block;
	height: calc(100% - 30px);
	margin-bottom: 30px;
	overflow: hidden;
	border-radius: 10px;
	background-color: var(--white-color);
	border: 1px solid rgba(0,0,0,.08);
	box-shadow: 0 6px 18px rgba(0,0,0,.06);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.alt-sayfa_kart:hover{
	transform: translateY(-6px);
	border-color: rgba(var(--main-color-rgb), .45);
	box-shadow: 0 14px 30px rgba(0,0,0,.12);
}
.alt-sayfa_kart-gorsel{
	display: block;
	height: 220px;
	overflow: hidden;
	background-color: rgba(0,0,0,.04);
}
.alt-sayfa_kart-gorsel img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.alt-sayfa_kart:hover .alt-sayfa_kart-gorsel img{
	transform: scale(1.06);
}
.alt-sayfa_kart-govde{
	display: block;
	padding: 20px 22px 24px;
}
.alt-sayfa_kart-ad{
	display: block;
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 28px;
	font-weight: 700;
	color: var(--color-two);
	transition: color .3s ease;
}
.alt-sayfa_kart:hover .alt-sayfa_kart-ad{
	color: var(--main-color);
}
.alt-sayfa_kart-ozet{
	display: block;
	font-size: 15px;
	line-height: 24px;
	color: rgba(0,0,0,.62);
}
@media only screen and (max-width: 767px){
	.alt-sayfalar{ padding-bottom: 60px; }
	.alt-sayfalar_baslik{ font-size: 26px; line-height: 34px; }
	.alt-sayfa_kart-gorsel{ height: 190px; }
}


/* --------------------------------------------------------------------------
   8. IC SAYFA METNI — baslik olculeri
   Yeni urun sayfalari panelden gercek <h2>/<h3> ile yaziliyor (eski icerikler
   <p><strong> kullaniyordu, bu yuzden sorun gorunmuyordu). Tema h2'yi BOLUM
   basligi sayip 60px veriyor -> govde icinde sayfa basligi kadar buyuk cikiyor
   (olculdu: .about-one h2 = 60px, h3 = 30px, p = 16px, li = 14px).
   Burada SADECE icerik alanindaki basliklar kucultuluyor; bolum basliklari
   (.alt-sayfalar_baslik, .sec-title vb.) .about-one disinda oldugu icin etkilenmez.
   -------------------------------------------------------------------------- */
.about-one .blogCard__content h2,
.about-one .blogCard__text h2{
	margin: 34px 0 14px;
	font-size: 28px;
	line-height: 38px;
	color: var(--color-two);
}
.about-one .blogCard__content h3,
.about-one .blogCard__text h3{
	margin: 26px 0 12px;
	font-size: 21px;
	line-height: 30px;
	color: var(--color-two);
}
/* Ilk baslik icerigin en ustunde — ustunde fazladan bosluk olmasin */
.about-one .blogCard__content h2:first-child,
.about-one .blogCard__text h2:first-child{
	margin-top: 0;
}
/* Liste maddeleri paragrafla ayni okunabilirlikte olsun (14px -> 16px) */
.about-one .blogCard__content li,
.about-one .blogCard__text li{
	font-size: 16px;
	line-height: 28px;
}

@media only screen and (max-width: 767px){
	.about-one .blogCard__content h2,
	.about-one .blogCard__text h2{ font-size: 24px; line-height: 32px; }
	.about-one .blogCard__content h3,
	.about-one .blogCard__text h3{ font-size: 19px; line-height: 27px; }
}


/* --------------------------------------------------------------------------
   9. DIL SECICI — bayrakli (TR / EN / AR)
   Google'in kendi kutusu ("Dili Secin") GIZLI; gorunen sey bu 3 bayrak.
   Sebep: SIMPLE duzende Turkceye GERI DONUS secenegi Google'in ust seridinde
   duruyor, o serit de sabit header'i asagi ittigi icin gizlenmisti — yani
   ceviriden geri donulemiyordu. Kendi butonlarimiz orijinali de veriyor.
   Bayraklar satir ici SVG (ek dosya/istek yok):
     TR = ay-yildiz  ·  EN = Union Jack  ·  AR = Birlesik Arap Emirlikleri
   Mantik: include/antebim_custom.js -> googtrans cerezi + sayfa yenileme.
   -------------------------------------------------------------------------- */

/* Google'in kendi kutusu gorunmesin ama DOM'da kalsin (ceviriyi o yapiyor) */
.dil-widget-gizli{
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.dil-secici{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-right: 20px;
}
.dil-bayrak{
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 9px 3px 5px;
	border: 1px solid rgba(255,255,255,.22);
	border-radius: 20px;
	background-color: rgba(255,255,255,.06);
	text-decoration: none !important;
	transition: background-color .25s ease, border-color .25s ease, opacity .25s ease;
	opacity: .72;
}
.dil-bayrak:before{
	content: "";
	flex: 0 0 18px;
	width: 18px; height: 12px;
	border-radius: 2px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	box-shadow: 0 0 0 1px rgba(255,255,255,.25);
}
.dil-bayrak span{
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .4px;
	line-height: 14px;
	color: #fff;
}
.dil-bayrak:hover{
	opacity: 1;
	border-color: rgba(255,255,255,.5);
	background-color: rgba(255,255,255,.14);
}
.dil-bayrak.aktif{
	opacity: 1;
	border-color: var(--main-color);
	background-color: var(--main-color);
}

.dil-tr:before{ background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%23E30A17'/%3E%3Ccircle cx='11.5' cy='10' r='5' fill='%23fff'/%3E%3Ccircle cx='13.2' cy='10' r='4' fill='%23E30A17'/%3E%3Cpolygon fill='%23fff' points='19.6,7.6 20.19,9.19 21.88,9.26 20.55,10.31 21.01,11.94 19.6,11 18.19,11.94 18.65,10.31 17.32,9.26 19.01,9.19'/%3E%3C/svg%3E"); }
.dil-en:before{ background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect width='60' height='40' fill='%23012169'/%3E%3Cpath d='M0,0 60,40 M60,0 0,40' stroke='%23fff' stroke-width='9'/%3E%3Cpath d='M0,0 60,40 M60,0 0,40' stroke='%23C8102E' stroke-width='5'/%3E%3Cpath d='M30,0 30,40 M0,20 60,20' stroke='%23fff' stroke-width='14'/%3E%3Cpath d='M30,0 30,40 M0,20 60,20' stroke='%23C8102E' stroke-width='8'/%3E%3C/svg%3E"); }
.dil-ar:before{ background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 20'%3E%3Crect width='30' height='20' fill='%2300732F'/%3E%3Crect y='6.67' width='30' height='6.66' fill='%23fff'/%3E%3Crect y='13.33' width='30' height='6.67'/%3E%3Crect width='7.5' height='20' fill='%23FF0000'/%3E%3C/svg%3E"); }

/* MOBIL: responsive.css 990px altinda .header-top'u komple gizliyor ->
   dil secici erisilemez oluyordu. Serit geri acilir, sadece secici gorunur. */
@media only screen and (max-width: 990px){
	.header-style-three .header-top{
		display: block !important;
		padding: 5px 0;
	}
	.header-style-three .header-top .header-info_list,
	.header-style-three .header-top .social-box{
		display: none !important;
	}
	.header-style-three .header-top .inner-container > .d-flex{
		justify-content: center !important;
	}
	.dil-secici{ margin-right: 0; }
}

/* Ceviri uygulanirken kisa gorsel geri bildirim (JS 2.2 sn sonra kaldirir) */
.dil-secici.calisiyor{
	opacity: .55;
	pointer-events: none;
}
.dil-secici.calisiyor .dil-bayrak.aktif{
	animation: dilYanip 1s ease-in-out infinite;
}
@keyframes dilYanip{
	0%, 100% { opacity: 1; }
	50%      { opacity: .45; }
}

/* Google, ceviri acikken sayfanin en ustune kendi seridini ekleyip body'ye
   top:40px veriyor -> sabit header kayiyor. Serit gizlenir. */
.goog-te-banner-frame,
.skiptranslate iframe{
	display: none !important;
}
body{
	top: 0 !important;
}
/* Ceviri sonrasi metinlere eklenen sari vurguyu kaldir */
.goog-text-highlight{
	background: none !important;
	box-shadow: none !important;
}


/* --------------------------------------------------------------------------
   10. SITE ICI ARAMA (search.php)
   web.config "^search$" adresini search.php'ye yonlendiriyordu ama dosya YOKTU
   -> /search 404 veriyordu. Altyapi (search fulltext tablosu) ve sonuc sablonu
   (icerik/search.php) hazirdi, sadece sayfa ve header'daki dugme eksikti.
   Sonuc kartlarinin kendi CSS'i petasoft/icerik_css/search.css'ten geliyor;
   burada sayfa ici arama kutusu ve kucuk duzeltmeler var.
   -------------------------------------------------------------------------- */
.arama-kutusu{
	display: flex;
	gap: 10px;
	max-width: 620px;
	margin: 0 0 26px;
}
.arama-kutusu input[type="search"]{
	flex: 1 1 auto;
	min-width: 0;
	height: 52px;
	padding: 0 18px;
	font-size: 16px;
	color: var(--color-two);
	border: 1px solid rgba(0,0,0,.14);
	border-radius: 6px;
	background: #fff;
	transition: border-color .25s ease;
}
.arama-kutusu input[type="search"]:focus{
	outline: none;
	border-color: var(--main-color);
}
.arama-kutusu button{
	flex: 0 0 auto;
	height: 52px;
	padding: 0 26px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	border: 0;
	border-radius: 6px;
	background: var(--main-color);
	cursor: pointer;
	transition: background-color .25s ease;
}
.arama-kutusu button:hover{
	background: var(--color-two);
}
.arama-ozet{
	margin: 0 0 22px;
	font-size: 16px;
	color: rgba(0,0,0,.62);
}

/* Header'daki arama dugmesi.
   ⚠ ILK SURUMDE HATA VARDI: buraya color/background/width yazilmisti ama
   temanin kendi kurali DAHA OZGUL:
     .header-style-three .header-lower .inner-container .search-box-btn  (0,4,0)
        -> background-color: var(--color-two)   [KOYU]
   Benimki (0,3,0) zemine yetisemiyor ama ikon rengini (color) koyuya
   ceviriyordu -> KOYU ZEMIN + KOYU IKON = siyah daire; ikon ancak hover'da
   gorunuyordu.
   Cozum: temanin renk tasarimina (koyu daire + BEYAZ ikon) DOKUNMA. Ayni
   ozgullukte yazip yalnizca ortalamayi flex'e al ve hover geri bildirimi ekle.
   Olcuye de dokunulmuyor: tema 48x48 + line-height:48px ile ortaliyor,
   olcuyu degistirmek ikonu kaydiriyordu. */
.header-style-three .header-lower .inner-container .search-box-btn{
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 0;
	color: var(--white-color);
	transition: background-color .25s ease;
}
.header-style-three .header-lower .inner-container .search-box-btn:hover{
	background-color: var(--main-color);
}

@media only screen and (max-width: 767px){
	.arama-kutusu{ flex-wrap: wrap; }
	.arama-kutusu input[type="search"]{ flex: 1 1 100%; }
	.arama-kutusu button{ width: 100%; }
}