@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.3.7/dist/css/bootstrap.min.css");
@import url("https://fonts.googleapis.com/css2?family=Titillium+Web:ital,wght@0,400;0,600;0,700;0,900;1,400;1,600;1,700&display=swap");
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css");

.titillium-web-regular {font-family: "Titillium Web", sans-serif;font-weight: 400;font-style: normal}
.titillium-web-semibold {font-family: "Titillium Web", sans-serif;font-weight: 600;font-style: normal}
.titillium-web-bold {font-family: "Titillium Web", sans-serif;font-weight: 700;font-style: normal}
.titillium-web-black {font-family: "Titillium Web", sans-serif;font-weight: 900;font-style: normal}
.titillium-web-regular-italic {font-family: "Titillium Web", sans-serif;font-weight: 400;font-style: italic}
.titillium-web-semibold-italic {font-family: "Titillium Web", sans-serif;font-weight: 600;font-style: italic}
.titillium-web-bold-italic {font-family: "Titillium Web", sans-serif;font-weight: 700;font-style: italic}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;	border: 0;font-size: 100%;font: inherit;vertical-align: baseline}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block}
body {line-height: 1;background:#eee; padding:0; margin:0; color:#333;font-family: "Titillium Web", sans-serif;overflow-x:hidden;font-size:16px;font-weight: 400;font-style: normal}
ol, ul {list-style: none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none}
table {border-collapse: collapse;border-spacing: 0}
a, a:hover{text-decoration:none}


.topheader {background:#2298ed; color:#fff; padding:8px; text-align:right}
.topheader .langclear {display:none}
.topheader a {display:inline-block; padding:5px; color:#fff; margin:0 10px}
.topheader a.lang {display:inline-block; background:#000; color:#fff; padding:5px 8px; color:#fff; margin:1px}

@media (max-width:767px) {
	.topheader {text-align:center}
	.topheader .langclear {display:block; clear:both}
}

.HataText,.hata{text-align:left;padding:10px;font-size:14px}
.silici{clear:both;height:0}
.fleft{float:left}
.fright{float:right}
.golge{-webkit-box-shadow:0 0 5px 3px rgba(193,193,193,.8);-moz-box-shadow:0 0 5px 3px rgba(193,193,193,.8);box-shadow:0 0 5px 3px rgba(193,193,193,.8)}
.golge2{box-shadow:0 5px 15px 0 rgba(0,0,0,.1)}
.icgolge{-moz-box-shadow:inset 0 0 20px #c1c1c1;-webkit-box-shadow:inset 0 0 20px #c1c1c1;box-shadow:inset 0 0 20px #c1c1c1}
#govde{width:100%;background:#fff;padding:0;margin:30px 0;border-radius:14px;-moz-border-radius:14px;-webkit-border-radius:14px;-webkit-box-shadow:0 4px 4px 0 rgba(49,49,49,.7);-moz-box-shadow:0 4px 4px 0 rgba(49,49,49,.7);box-shadow:0 4px 4px 0 rgba(49,49,49,.7)}
.ovalkose{border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px}
.HataText,.cerceve,.hata{border:1px solid #ff4301}
.HataText,.hata{background:#f9f0f0;width:98%;margin:10px auto;border-left:5px solid #dca7b0}
.icerik {min-height:400px; padding:100px 0; text-align:justify; line-height:150%;font-family: "Titillium Web", sans-serif;font-weight: 400;font-style: normal}
.icerik iframe {border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px;border:solid 1px #1b9cf4;border-bottom:solid 3px #1b9cf4} 
.icerik strong {font-weight:700;font-style: normal}

.konum {text-align:center;position:fixed; display:block; bottom:80px;right:20px;z-index:10000000;}
.whatsapp {text-align:center;position:fixed; display:block; bottom:120px;right:20px;z-index:10000000;}
.biziara {text-align:center;position:fixed; display:block; bottom:160px;right:20px;z-index:10000000;}
.insta {text-align:center;position:fixed; display:block; bottom:200px;right:20px;z-index:10000000;}
.face {text-align:center;position:fixed; display:block; bottom:240px;right:20px;z-index:10000000;}
.youtube {text-align:center;position:fixed; display:block; bottom:280px;right:20px;z-index:10000000;}

a.biziara,a.whatsapp,a.konum,a.insta,a.youtube,a.face {color:#fff;background:#242264;width: 40px;height: 40px;font-size:12px; padding-top:6px;border-radius: 100%; text-align:center; border:solid 2px #b4202b;}
a.biziara:hover, a.whatsapp:hover, a.konum:hover, a.insta:hover,a.youtube:hover,a.face:hover {background:#fff; color:#333; border:solid 2px #333;}

a.whatsapp {color:#fff;background:#25D366; border:solid 2px #fff}
a.whatsapp:hover {background:#fff; color:#25d366; border:solid 2px #25d366;}
a.whatsapp:hover i {color:#25d366;}

a.youtube {color:#fff;background:#c4302b; border:solid 2px #fff}
a.youtube:hover {background:#fff; color:#c4302b; border:solid 2px #c4302b;}
a.youtube:hover i {color:#c4302b;}

a.telegram {color:#fff;background:#0088cc; border:solid 2px #fff}
a.telegram:hover {background:#fff; color:#0088cc; border:solid 2px #0088cc;}
a.telegram:hover i {color:#0088cc;}

a.insta {color:#fff;background:#dd2a7b; border:solid 2px #fff}
a.insta:hover {background:#fff; color:#dd2a7b; border:solid 2px #dd2a7b;}
a.insta:hover i {color:#dd2a7b;}

a.face {color:#fff;background:#3b5998; border:solid 2px #fff}
a.face:hover {background:#fff; color:#3b5998; border:solid 2px #3b5998;}
a.face:hover i {color:#3b5998;}

a.biziara {color:#fff;background:#009cff; border:solid 2px #fff}
a.biziara:hover {background:#fff; color:#009cff; border:solid 2px #009cff;}
a.biziara:hover i {color:#009cff;}

a.konum {color:#fff;background:#ff7200; border:solid 2px #fff}
a.konum:hover {background:#fff; color:#ff7200; border:solid 2px #ff7200;}
a.konum:hover i {color:#ff7200;} 

.ghost {height:5px; clear:both;}
.fixedikonlar {padding:10px;background:#333;color:#fff;bottom:0px;width:100%;text-align:center;z-index:10000000;cursor:pointer;position:fixed;border-top:solid 5px #fff}
.fixedikonlar a {display:inline-block; margin:5px;color:#fff;width: 40px;height: 40px;font-size:12px; padding-top:6px;border-radius: 100%; text-align:center;border:solid 2px #fff; background:#008aff}

@media (min-width:476px) {.fixedikonlar {display:none;}}
@media (max-width:767px) {a.whatsapp, a.biziara, a.konum, a.insta,.face,a.youtube,a.telegram {display:none;}.ghost {height:70px;}}

header {background:#fff; padding:10px 0}
.navbar-brand {margin-right:100px}
.navbar-nav {gap:0 25px;}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 180px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  background-color: #1b9af3;
  -webkit-background-clip: padding-box;
          background-clip: padding-box;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, .15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
          box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
 .dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #fff;
  white-space: nowrap;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  color: #fff;
  text-decoration: none;
  background-color: #337ab7;
  outline: 0;
}
.navbar-nav .nav-link a.nav-link {display:inline-block;padding:0 15px}
@media (max-width:767px) {
	.navbar-brand {margin-right:0}
	/* Hover ile dropdown açılması */
  	.navbar .dropdown:hover .dropdown-menu {display: block; margin-top: 0}
  	.navbar .dropdown-toggle::after {display: none}
}


#main,#hizmetler, #neleryapariz, #sayac, #biziara, #oncesonra, #haberler, #videolar, footer {padding:100px 0}
#main h4, #hizmetler h4, #neleryapariz h4, #sayac h4, #oncesonra h4, #haberler h4, #videolar h4 {display:block; text-align:center; padding:10px 0; font-size:24px; color:#C1C1C1}
#main h2, #hizmetler h2, #neleryapariz h2, #sayac h2, #oncesonra h2, #haberler h2, #videolar h2 {display:block;margin-bottom:50px; text-align:center; padding:10px 0; font-size:48px; color:#1b9cf4}
#main span.text {line-height:150%; font-size:18px; text-align:justify; display:block;}
#main a.btn {margin-top:50px}

/*#hizmetler .card {border:solid 1px #1b9cf4; background:#f9f9f9;border-bottom:solid 3px #1b9cf4}
#hizmetler .card-title {padding:10px; text-align:center; font-weight:bold}
#hizmetler .card-text {padding:10px;text-align:center;}
*/

#hizmetler .overlay-container {position: relative;display: inline-block;border:solid 1px #216898;border-bottom:solid 3px #216898;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px;width: 100%;height:200px;}
#hizmetler .overlay-container:hover .overlay-layer {background: rgba(20, 131, 207, 0.8)}
#hizmetler .overlay-container img {display: block;width: 100%;height:200px;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px}
#hizmetler .overlay-layer {position: absolute;top: 0;left: 0;width: 100%;height:200px;background: rgba(27, 156, 244, 0.4); /* yarı saydam siyah */z-index: 1;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px}
#hizmetler .overlay-text {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 2;text-align: center}	
#hizmetler .overlay-text a {font-weight:bold;color:#fff;font-size: 20px;}
#hizmetler .overlay-text a:hover {color:#333}
@media (max-width:767px) {
	#hizmetler .overlay-container {margin-bottom:30px}
}



#neleryapariz h2, #neleryapariz h4 {text-align:left}
#neleryapariz .nelerbox {color:#fff;text-align:center; font-size:18px; font-weight:bold;
height: 150px;width: 150px;border-radius: 50%; margin:auto; padding-top:65px; border:solid 1px #1b9cf4;border-bottom:solid 3px #1b9cf4; background-position:center; background-repeat:no-repeat; background-size:cover}
#neleryapariz .nelerbox.top {margin-top:-50px}
#neleryapariz .nelerbox.bottom {margin-top:50px}
@media (max-width:767px) {
	#neleryapariz h2, #neleryapariz h4 {text-align:center}
	#neleryapariz .nelerbox.top {margin-top:auto}
	#neleryapariz .nelerbox.bottom {margin-top:auto}
}

#sayac .counter-container {/*display: flex;*/justify-content: center;flex-wrap: wrap;gap: 0;margin: 0;text-align: center}
#sayac .counter-box {padding: 30px 20px;border-radius: 12px;box-shadow: 0 4px 10px rgba(0,0,0,0.3);width: 100%}
#sayac .counter-icon {font-size: 40px;color: #1b9cf4;margin-bottom: 10px}
#sayac .counter {font-size: 36px;font-weight: bold;color: #1b9cf4;margin: 5px 0}
#sayac .counter-box p {margin-top: 0;font-size: 16px;color: #333}
@media (max-width:767px) {
	#sayac .counter-box {margin-bottom:30px; background:#f9f9f9}
}

#biziara {background:#1d2f41; color:#fff; font-size:32px; line-height:150%}
@media (max-width:767px) {
 	#biziara {text-align:center}
}

@media (max-width:767px) {
 	#oncesonra {display:none}
}


#haberler .btn-primary {background:#008aff;margin:2px; display:block; width:110px; border:0; padding:3px; font-size:12px} 
#haberler .btn-primary:hover {background:#000}
#haberler figure {border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px}
#haberler figure img {border:solid 1px #1b9cf4;border-bottom:solid 3px #1b9cf4;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px}
#haberler .haberbox {margin-bottom:30px}
#haberler p.tarih {display:block; font-size:13px; color:#727272; padding-top:5px}
#haberler p.baslik {display:block; font-size:20px; color:#000; padding:5px; min-height:40px;font-weight:bold}
#haberler p.aciklama {display:block; font-size:16px; color:#727272}


#videolar p.baslik {display:block; font-size:20px; text-align:center; color:#333; padding:5px; min-height:40px;font-weight:bold}
#videolar .overlay-container {position: relative;display: inline-block;border:solid 1px #216898;border-bottom:solid 3px #216898;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px}
#videolar .overlay-container:hover .overlay-layer {background: rgba(20, 131, 207, 0.8)}
#videolar .overlay-container img {display: block;width: 100%;height: auto;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px}
#videolar .overlay-layer {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(27, 156, 244, 0.6); /* yarı saydam siyah */z-index: 1;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px}
#videolar .overlay-text {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 2;text-align: center}	
#videolar .overlay-text a {font-weight:bold;color:#fff;font-size:30px;}
#videolar .overlay-text a:hover {color:#333}



footer {background:#008aff; color:#eee; line-height:120%}
footer img.footerlogo {display:block; height:80px; margin:0 0 30px 0}
footer a {color:#fff;}
footer a:hover {color:#000;}
footer p {display:block; text-align:left; padding:5px 0}
footer h3 {display:block;margin-bottom:20px; text-align:center; padding:10px 0; font-size:22px; color:#fff; font-weight:bold}
footer ul>li {list-style:none; display:block; text-align:center; padding:5px; margin-bottom:5px}
footer .box a {display:block; background:#fff; color:#000; font-size:20px; padding:30px 0; margin:5px 0; text-align:center;border-radius:7px;-moz-border-radius:7px;-webkit-border-radius:7px}
footer .box a:hover {background:#000; color:#fff;}
@media (max-width:767px) {
	footer img.footerlogo {margin:0 auto 30px auto}
	footer p {text-align:center}
}




#parallax {background:#1586d4;text-align:center;position:relative;}
#parallax .btn-primary {background:#ff9900;margin:10px auto; display:block; width:120px; border:0} 
#parallax .btn-primary:hover {background:#000}
.parallax {opacity: 0.5;text-align:center; background-attachment: fixed;background-position: center;background-repeat: no-repeat;background-size: cover}

#parallax h1 {font-family: "Titillium Web", sans-serif;z-index:2;font-weight: 900;font-style: normal; font-size:50px; color:#fff; 
width: 600px;height:140px;padding: 20px;position: absolute;top: 50%;left: 50%;margin-left: -300px;margin-top: -70px}
@media (max-width:767px) {
	#parallax h1 {display:none}
}






.afterbefore {position: relative;width:900px;height: 600px; margin:auto;border: 2px solid white}
.afterbefore .img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-size: 900px 100%}
.afterbefore .background-img {background-image:url('../images/once.jpg')}
.afterbefore .foreground-img {background-image:url('../images/sonra.jpg');width: 50%}
.afterbefore .ABslider {
  position: absolute;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 100%;
  background: rgba(242, 242, 242, 0.3);
  outline: none;
  margin: 0;
  transition: all 0.2s;
  display: flex;
  justify-content: center;
  align-items: center;
}
.afterbefore .ABslider:hover {
  background: rgba(242, 242, 242, 0.1);
}
.afterbefore .ABslider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 6px;
  height: 600px;
  background: white;
  cursor: pointer;
}
.afterbefore .ABslider::-moz-range-thumb {
  width: 6px;
  height: 600px;
  background: white;
  cursor: pointer;
}
.afterbefore .ABslider-button {
  pointer-events: none;
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: white;
  left: calc(50% - 18px);
  top: calc(50% - 18px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.afterbefore .ABslider-button:after {
  content: "";
  padding: 3px;
  display: inline-block;
  border: solid #5D5D5D;
  border-width: 0 2px 2px 0;
  transform: rotate(-45deg);
}
.afterbefore .ABslider-button:before {
  content: "";
  padding: 3px;
  display: inline-block;
  border: solid #5D5D5D;
  border-width: 0 2px 2px 0;
  transform: rotate(135deg);
}



.holographic-container {display: flex;justify-content: center;align-items: center;/*background: #000*/}
.holographic-card {width: 100%;/*background: #111;*/display: flex;justify-content: center;align-items: center;position: relative;overflow: hidden;transition: all 0.5s ease}
.holographic-card::before {content: '';position: absolute;top: -50%;left: -50%;width: 200%;height: 200%;background: linear-gradient(0deg, transparent, transparent 30%, rgba(27,156,244,0.6));transform: rotate(-45deg);transition: all 0.5s ease;opacity: 0}
.holographic-card:hover {transform: scale(1.05);/*box-shadow: 0 0 20px rgba(27,156,244,0.5)*/}
.holographic-card:hover::before {opacity: 1;transform: rotate(-45deg) translateY(100%)}