:root {
	--bgrenk: #F9F9F9;
	--metinrenk : #444444;
	--renkbir: #3757F7;
	--renkbira: #3757F7d9;
	--renkiki: #5BC286;
	--renkikia: #5BC286d9;
	--renkuc: #242F48;
	--renkuca: #242F48d9;
	--sitefont: 'Montserrat', sans-serif;
}
* {margin:0px; padding:0px; box-sizing:border-box;outline:none}
html,body{width:100%;min-height:100%;}
body{overflow-x:hidden;background-color:var(--bgrenk);font-family: 'Montserrat', sans-serif; font-size:1em;color:var(--metinrenk)}
/* font-size-adjust: 0.5; */
::selection {color: var(--bgrenk);background: var(--metinrenk)}
::placeholder {color: var(--metinrenk);opacity: 1}
img {border:none;max-width:100%;height:auto;vertical-align:middle}
a {text-decoration:none;color:var(--renkbir)}
p {padding-bottom:7px;line-height:150%}

.gizli {display:none !important}
.sr-only {position: absolute !important;width: 1px !important;height: 1px !important;padding: 0 !important;margin: -1px !important;overflow: hidden !important;  clip: rect(0, 0, 0, 0) !important;white-space: nowrap !important;border: 0 !important}

.renkbir{color:var(--renkbir) !important}
	.renkbirbg {background-color:var(--renkbir) !important}
.renkiki{color:var(--renkiki) !important}
	.renkikibg {background-color:var(--renkiki) !important}
.renkuc{color:var(--renkuc) !important}
	.renkucbg {background-color:var(--renkuc) !important}

.ufak{font-size:calc(1em - 0.2vw)}
.kucuk{font-size:calc(1em - 0.1vw)}
.buyuk{font-size:calc(1.1em + 0.3vw)}
.cokbuyuk{font-size:calc(1.1em + 0.7vw)}

.olumlusonuc, .hatalisonuc {padding:15px;line-height:1.4;font-size:1em;border-radius:12px;border:1px solid #d0d5dd;box-shadow:0 1px 2px rgba(16, 24, 40, 0.05), 0 1px 1px rgba(16, 24, 40, 0.03);margin:10px 0}
.olumlusonuc {background:#e4f8eb;border-color:#a0e6ba;color:#166534}
.olumlusonuc a{color:#166534;text-decoration:underline;font-weight:600}
.hatalisonuc {background:#fde8e8 !important;border-color:#f8afaf;color:#991b1b}
.hatalisonuc a{color:#991b1b;text-decoration:underline;font-weight:600}

/* tbl2flx modernize stilleri */
.flex-table{display:flex;flex-direction:column;width:100%;box-sizing:border-box}
.flex-row{display:flex;flex-wrap:wrap;align-items:stretch}
.flex-cell{flex:var(--tbl2flex-flex,1 1 0);max-width:var(--tbl2flex-max,none);box-sizing:border-box;min-width:0}
.flex-cell.header{font-weight:600}
@media (max-width:820px){.flex-cell{flex:1 1 50%;max-width:50%}}
@media (max-width:640px){.flex-cell{flex:1 1 100%;max-width:100%}}


#imgbekletme{display:none}
body.bekletme{pointer-events:none}
body.bekletme #anacerceve{opacity:0.7}
body.bekletme #imgbekletme{display: block;position: fixed;z-index: 1000;top: 50%;left: 50%;z-index:10000}

ul.none, ol.none{margin:0px;padding:0px;list-style-type:none}
ul,ol{margin-left:25px;padding-left: 25px}
.temizle {clear:both;}

@media only screen and (min-width: 640px) {.dskyok {display:none}}
@media only screen and (max-width: 640px) {.mblyok {display:none}}

.hizala{margin-left:auto;margin-right:auto}
.ortala{text-align:center}
.soladayali{text-align:left !important}
.sagadayali{text-align:right !important}
.pad{padding:10px}
.nopad{padding:0px}
.mar{margin:10px}
.nomar{margin:0px}
button:disabled, input:disabled, textarea:disabled {opacity: 0.5;filter: grayscale(1);cursor: not-allowed}

#scrollToTopBtn {display: flex;opacity:0;position: fixed;z-index:99999999;bottom: 20px;right: 20px;width: 50px;height: 50px;background-color: var(--renkiki);color: white;border: none;border-radius: 50%;align-items: center;justify-content: center;cursor: pointer;transition: all 0.5s ease}
#scrollToTopBtn:hover {background-color: var(--renkbir)}
#scrollToTopBtn.show {opacity: 1}
#scrollToTopBtn span {transform: rotate(-90deg);font-size: 45px;position: relative;left: -3px}

.maxgenislik{width:100%;}
.tamgenislik{width:100%;max-width:1400px;margin:0 auto}
	@media only screen and (max-width: 1400px) {.tamgenislik {padding-left:2.5% !important;padding-right:2.5% !important}}

#mobilyanlogoalan{display:none;width:100%;text-align:center;margin:7px 0px;}
#logo a img{max-width:300px;height:auto}
#t_mobillogoalan{text-align:center}
#t_logoalan a{display:table;width:100%;}
.txtlogo {font-size: calc(1em + 0.5vw);display: flex;flex-direction: column;justify-content: center}
.txtlogo div:nth-child(1) {font-weight: bold;font-size: 1.5em}

#t_mobillogoalan .txtlogo, #mobilyanlogoalan .txtlogo{font-size:30px;font-size:calc(1em + 1vw)}

#t_footer {}
#cpyr,#yapimcibilgisi{text-align:left;color:var(--renkbir)}
#cpyr{font-family:verdana;font-size:14px}
#yapimcibilgisi{text-align:right;}
#yapimcibilgisi a{color:var(--renkbir)}

#anatasiyici figure {position:relative}
#anatasiyici figure figcaption {position: absolute;bottom: 0.2vw;left: 0.2vw;background-color: #fff;padding: 1%;opacity: 0.5;font-size: 0.8em}

#aramaformu {display: inline-block;float: right;margin-top: 15px;position: relative}
#aramaformu input {border: #ccc 1px solid;padding: 5px;height:48px}
#aramaformu button {border: #ccc 1px solid;border-left: none;background: #f2f2f2;cursor: pointer;vertical-align: top;width: 48px;height: 48px;position: relative;left: -5px}
#aramaformu button span {font-family: monospace;font-size: 35px;line-height: 20px;transform: rotate(110deg);display: inline-block}

.saklimetin:not(.gosteriliyor) span:after {content: attr(data-before) attr(data-baglam) attr(data-after);display: none}
.saklimetin:hover span:nth-child(1) {display:none}
.saklimetin:not(.gosteriliyor):hover span:after {display: inline-block}

blockquote {position: relative;z-index: 1;margin-bottom: 30px;margin-top: 30px;background-color: #f8f8f8;padding: 30px 30px 35px}
blockquote::before {content: "";position: absolute;top: 0;left: 0;width: 3px;height: 100%;background-color: var(--renkbir)}
blockquote::after {content: "”";color: var(--renkbir);font-size: 100px;line-height: 1px;display: block;position:absolute;bottom:-10px;right:10px}

dl#qa dt {display: flex;justify-content: space-between;font-weight: bold;line-height: 1.5em;padding: 7px;border: #ccc 1px solid;border-bottom: none;background-color: #f9fafa;cursor: pointer}
dl#qa dt:after {transition:0.5s;content: "\002B";font-size: 1.5em;color: #626262;font-weight: normal;border: #e5e5e5 1px solid;border-radius: 100%;width: 25px;height: 25px;line-height: 25px;display: inline-block;text-align: center}
dl#qa dt:hover:after{transform: rotate(45deg)}
dl#qa dd {transition: all 0.5s ease-in-out;font-size:0.9em;margin-bottom: 25px;border: #ccc 1px solid;border-top: none;max-height:1px;overflow: hidden}
dl#qa dt:hover + dd, #icerik .ualan dd:hover {max-height:100px;padding: 7px}



#t_mm #menu-toggle{display:none}
#t_mm .menu-icon{display:none;flex-direction:column;justify-content:space-around;width:30px;height:24px;cursor:pointer;z-index:999999}
#t_mm .menu-icon span{display:block;height:3px;border-radius:2px;background:#333;transition:transform .3s ease,opacity .5s ease}
/*#t_mm:before {display: block;content: "";position: fixed;z-index:99;top:-100vh;background-color: rgba(0, 0, 0, 0.8);opacity:0;backdrop-filter: blur(4px);transition:opacity .3s ease}*/
#t_mm .menu-overlay{display: block;content: "";position: fixed;z-index:99;top:-100vh;background-color: rgba(0, 0, 0, 0.8);opacity:0;backdrop-filter: blur(4px);transition:opacity .3s ease}
html:has(#t_mm #menu-toggle:checked), body:has(#t_mm #menu-toggle:checked){overflow:hidden}
@media (max-width: 720px) {
	/*#t_mm:has(#menu-toggle:checked)::before{opacity:1;pointer-events:auto;top: 0;left: 0;right: 0;bottom: 0}*/
		#t_mm:has(#menu-toggle:checked) .menu-overlay{
opacity:1;pointer-events:auto;top: 0;left: 0;right: 0;bottom: 0
	}
	#t_mm .menu-icon {display: flex;position: relative;z-index: 999999}
	#t_mm #menu-toggle:checked + .menu-icon span:nth-child(2) {transform: rotate(45deg) translate(5px, 5px)}
	#t_mm #menu-toggle:checked + .menu-icon span:nth-child(3) {opacity: 0}
	#t_mm #menu-toggle:checked + .menu-icon span:nth-child(4) {transform: rotate(-45deg) translate(6px, -6px)}
	#t_mm nav.t_menu{position:fixed;transition:transform .5s ease;z-index:999998;display:block;overflow-y:auto;overscroll-behavior:contain;background:#fff;box-shadow:0 0 20px rgba(0,0,0,.18);padding:16px 12px}
	#t_mm #menu-toggle:checked ~ nav.t_menu{transform:translate(0,0) scale(1)}
	#t_mm[data-menu="left"] nav.t_menu{top:0;left:0;width: 85%;max-width:320px;height:100vh;transform:translateX(-105%)}
		#t_mm[data-menu="left"] #menu-toggle:checked + .menu-icon {position: fixed;top: 10px;left:280px}
	#t_mm[data-menu="top"] nav.t_menu{top:0;left:0;right:0;width:100vw;transform:translateY(-105%)}
		#t_mm[data-menu="top"] #menu-toggle:checked + .menu-icon {position: fixed;top: 10px;right: 10px}
	#t_mm[data-menu="overlay"] nav.t_menu{top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;transform:scale(0);padding:24px 16px;box-shadow:none}
		#t_mm[data-menu="overlay"] #menu-toggle:checked + .menu-icon {position: fixed;top: 10px;right: 10px}
}

#pgloader{position:fixed;inset:0;background:#fff;display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .2s ease}
#pgloader.loaded{opacity:0;pointer-events:none}


.plt{width:100px;height:100px;border-radius:50%;border:3px solid rgba(0,0,0,.10);border-top-color:var(--renkbir);border-right-color:var(--renkuc);border-bottom-color:var(--renkiki);animation:spin .75s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

#pgloader:before {content: "";background-image: url('/altsite/site_dosyalar/logo/favicon.webp');width: 55px;height: 55px;background-size: contain;position: absolute;opacity: 0.6}
::selection {color: var(--renkuc);background: var(--renkiki);}
a {transition:0.5s}
h1, h2, h3, h4, h5, h6, .baslik {font-weight:normal}
h1 {font-size: calc(1.3em + 1.3vw)} /* calc(1.8em + 0.8vw); */
h2 {font-size: calc(1.1em + 0.9vw);} /* calc(1.5em + 0.8vw); */
h3, h4, h5, h6, .baslik {font-size: calc(1.1em + 0.3vw);}

a.ctabutton {display: inline-flex;align-items: center;justify-content: center;padding: 5px 10px;background: var(--renkbir);color: var(--bgrenk);font-size: 1em;border-radius: 5px;overflow: hidden;position: relative;transition: 0.35s}
a.ctabutton::after {content: '';position: absolute;top: 0;left: -100%;width: 60%;height: 100%;background: linear-gradient(120deg, transparent, rgba(255,255,255,0.25), transparent);animation: cta-shimmer 2.8s ease-in-out infinite}
a.ctabutton:hover {background: var(--renkuc);transform: translateY(-2px)}
	@keyframes cta-shimmer {0% {left: -100%} 55% {left: 140%} 100% {left: 140%}}

.butonlastir {position: relative;display: inline-block;background: var(--renkbir);border-radius: 5px;overflow: hidden;transition: all 0.5s ease-in-out;z-index: 1;color: #fff;padding: 10px 25px 10px 25px}
.butonlastir:after, .butonlastir:before {content: '';display: block;position: absolute;top: 0;bottom: 0;width: 0;height: 100%;background: var(--renkiki);transform: skew(15deg);transition: all 0.4s ease-in-out;z-index: -1}
.butonlastir:before {left: -10px}
.butonlastir:after {right: -10px}
.butonlastir:hover {background-color: transparent;}
.butonlastir:hover:before, .butonlastir:hover:after {width: 60%}

.imganim {position:relative;overflow:hidden;display: inline-block}
.imganim:after {content: "";position: absolute;width: 200%;height: 0%;left: 50%;top: 50%;background-color: rgba(255, 255, 255, .3);transform: translate(-50%, -50%) rotate(-45deg);z-index: 0}
.imganim:hover:after {height: 250%;transition: all 600ms linear !important;background-color: transparent}
.kaydir {display: inline-block;animation: kaymaanim 8s infinite}
	@keyframes titremeanim {0% { transform: translateX(0)} 2% { transform: translateX(-2px)} 4% { transform: translateX(2px)} 6% { transform: translateX(-2px)} 8% { transform: translateX(2px)} 10% { transform: translateX(0)} 100% { transform: translateX(0)}}
.titret {display: inline-block;animation: titremeanim 5s infinite}
	@keyframes kaymaanim {0% { transform: translateX(0)} 10%  { transform: translateX(15px)} 20% { transform: translateX(0)} 100% { transform: translateX(0)}}

.inlineanim {position: relative;background-color: #fff;padding: 15px;border-radius: 5px;overflow: hidden;border-left: var(--renkbir) 5px solid;transition: 0.5s}
.inlineanim:hover {color: #fff;background-color: transparent}
.inlineanim:before {content: "";background-color: var(--renkbir);position: absolute;z-index: -1;top: 0;bottom: 0;left: 0;width: 0px;transition: 0.5s}
.inlineanim:hover:before {width: 100%}

.ufakbaslik {position: relative;display: inline-block;font-weight:normal;color:var(--renkbir)}
.ufakbaslik:before {background-color: var(--renkbir);content: "";display: inline-block;width: 13px;height: 13px;border-radius: 3px;vertical-align: middle;margin-right: 5px;transform: rotate(45deg)}
.ufakbaslik:after {content: "";background-color: var(--renkbir);display: inline-block;width: 50%;height: 1px;position: absolute;left: 15px;top: 70%}

.ufakbaslik2 {position: relative;display: inline-block;font-weight:normal;color:var(--renkiki)}
.ufakbaslik2:before {background-color: var(--renkiki);content: "";display: inline-block;width: 13px;height: 13px;border-radius: 3px;vertical-align: middle;margin-right: 5px;transform: rotate(45deg)}
.ufakbaslik2:after {content: "";background-color: var(--renkiki);display: inline-block;width: 50%;height: 1px;position: absolute;left: 15px;top: 70%}

header#headertop {background-color: #fff}
header#headertop p {padding:0}
header#headertop #ustbar {background-color: var(--renkbir);color: var(--bgrenk);padding: 7px 0}
header#headertop #ustbar a {color:var(--bgrenk)}
#ustbar .material-icons-outlined {font-size: 1.5em}
header#headertop #ustbar .tamgenislik {display: flex;flex-direction: row;flex-wrap: wrap;align-items: center;justify-content: space-between}
header#headertop #ustbar .tamgenislik > div:nth-child(1) {display: flex;gap: 20px;flex-direction: row;flex-wrap: wrap;align-items: center}
header#headertop #ustbar .t_sosyalaglar {display: flex;gap: 5px}
header#headertop #ustbar .t_sosyalaglar a {display: inline-block;width: 25px;height: 25px;transition: 0.5s}
header#headertop #ustbar .t_sosyalaglar a:hover {color:var(--renkuc)}

header#headertop #ustalan {padding: 25px 0;display: flex;flex-direction: row;flex-wrap: wrap;align-items: center;justify-content: space-between}
header#headertop #ustalan .ustnav {flex-basis: calc(100% - 300px);display: flex;gap: 2vw;flex-direction: row;flex-wrap: wrap;justify-content: flex-end;align-items: center}
header#headertop #ustalan .t_logoalan {transition: 0.5s}
header#headertop #ustalan .t_logoalan:hover {transform: scale(.85) rotate(-3deg)}
header#headertop #ustalan .t_menubir ul {display: flex;gap: max(1vw, 10px);flex-direction: row;flex-wrap: wrap}
header#headertop #ustalan .t_menubir ul li {}
header#headertop #ustalan .t_menubir ul li .material-icons-outlined {font-size:1.2em}
header#headertop #ustalan .t_menubir ul li a {color: var(--renkuc);}
header#headertop #ustalan .t_menubir ul li a:hover {color:var(--renkbir)}

nav.t_dilsecimi {}
nav.t_dilsecimi ul {display: flex;gap: 5px;font-size: 0.75em}
nav.t_dilsecimi ul:before {content: "\e894";font-family: 'Material Icons Outlined';font-size: 2em}
nav.t_dilsecimi ul li a {color:#fff;display:block;background-color: var(--renkuc);padding: 5px;border-radius: 5px}
nav.t_dilsecimi ul li:has(.secilidil) a {font-weight:bold;background-color:var(--renkiki)}

#ustcta {display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center;gap: 10px}
.srcbtn {display: inline-flex;width: 40px;height: 40px;aspect-ratio: 1;font-size: 2em;border: var(--renkbir) 1px solid;background-color:var(--bgrenk);align-items: center;justify-content: center;border-radius: 5px}
#srcbtn {cursor: pointer}
#srcbtn:before {content: "\e8b6";font-family: 'Material Icons Outlined';vertical-align: middle}

#arama {display: none}
#arama:target {display: flex;align-items: center;justify-content: center;position: fixed;inset: 0;background: rgba(36, 47, 72, 0.85);backdrop-filter: blur(4px);z-index: 9999}
.arama-bg-kapat {display: none}
#arama:target .arama-bg-kapat {display: block;position: fixed;inset: 0;z-index: 0;cursor: pointer}
#arama .t_aramaformu {position: relative;z-index: 2;background: var(--bgrenk);padding: 2.5rem 2rem;border-radius: 16px;min-width: 340px;max-width: 520px;width: 90vw;box-shadow: 0 24px 60px rgba(36, 47, 72, 0.3)}
.arama-kapat {display: none}
#arama:target .arama-kapat {display: flex;align-items: center;justify-content: center;position: fixed;top: 1rem;right: 1.5rem;width: 2.2rem;height: 2.2rem;font-size: 1.2rem;color: #fff;text-decoration: none;z-index: 2;border: 2px solid rgba(255,255,255,0.4);border-radius: 50%;transition: background 0.2s}
#arama:target .arama-kapat:hover {background: rgba(255,255,255,0.15)}
.aramaform {display: flex;align-items: center;gap: 0;border: 2px solid var(--renkbir);border-radius: 8px;overflow: hidden;background: #fff;transition: box-shadow 0.2s}
.aramaform:focus-within {box-shadow: 0 0 0 4px var(--renkbira)}
.aramaform .aranacak {flex: 1;border: none;outline: none;padding: 0.85rem 1rem;font-size: 0.95rem;color: var(--metinrenk);background: transparent}
.aramaform .aranacak::placeholder {color: #aaa}
.aramaform .btn {border: none;background: var(--renkbir);color: #fff;padding: 0.85rem 1.2rem;font-size: 1.1rem;cursor: pointer;transition: background 0.2s;line-height: 1}
.aramaform .btn:hover {background: var(--renkuc)}
.aramaform .btn span {display: inline-block;transform: rotate(190deg) scale(3);line-height: 2em;margin-top: -6px}

footer {margin-top:55px;padding:55px 0;background-color:var(--renkuc)}
footer, footer a {color:#fff}
footer .alan {display: flex;flex-direction: row;flex-wrap: wrap;align-items: flex-start;justify-content: space-between}
footer nav.t_menuuc li {margin: 9px 0;font-size: 0.85em}
footer .ctas ul {background-color: #fff;padding: 15px 25px;border-radius: 15px;text-align: center}
footer .ctas .butonlastir {width:100%;margin:5px 0;padding-left: 55px}
footer .ctas .butonlastir .material-icons-outlined {position: absolute;top: 5px;left: 10px;font-size: 30px}
footer .logoalt {margin-top:15px;font-size:0.9em}
footer .t_mobillogoalan img {filter: brightness(0) invert(1)}
footer .kylogo img {width:150px;height:auto}
#yapimcibar {color: #fff;font-size: 0.85em;background-color:#182030;padding: 10px 0}
#yapimcibar p {padding:0}
#yapimcibar a {color:#fff}

body {padding-bottom: 70px}
#gykkcmp-root[data-decided="true"] {left: -100px !important;transition: 0.5s}
#gykkcmp-root[data-decided="true"]:hover {left: 0 !important}
#gykkcmp-manage {width: 120px !important;border-radius: 10px !important;padding: 5px !important;padding-right: 70px !important;box-shadow: #888 1px 1px 15px 0px}
#gykkcmp-manage:after {content: "\eaac";font-family: 'Material Icons Outlined';font-size: 36px}
#scrollToTopBtn {bottom:15px;right:15px}

@media (max-width: 1200px) {
	header#headertop #ustcta {zoom:0.75}
}

@media (max-width: 960px) {
	header#headertop #ustalan, header#headertop #ustalan .ustnav {flex-direction: column}
}

@media (max-width: 820px) {
	footer {padding-bottom:20px}
	footer .alan  {justify-content: space-around}
	footer .alan > div {margin-bottom: 20px}
}
@media (max-width: 720px) {
	header#headertop #ustalan, header#headertop #ustalan .ustnav {flex-direction: row}
	#t_mm #menu-toggle:checked + .menu-icon span {background: #fff}
	#t_mm #menu-toggle:checked ~ nav.t_menubir {padding: 0}
	#t_mm[data-menu="left"] nav.t_menubir {background: linear-gradient(170deg, var(--renkuc) 0%, #151d2e 100%);box-shadow: 6px 0 40px rgba(0,0,0,.45)}
	#t_mm[data-menu="left"] nav.t_menubir::before {background: url(/altsite/site_dosyalar/logo/favicon.webp) center no-repeat;background-size: contain;content: "";color: #fff;font-style: italic;text-align: center;display: block;opacity: 0.55;padding: 35px 0;border-bottom: 1px solid rgba(255, 255, 255, 0.07);margin-bottom: 10px}
	#t_mm #menu-toggle:checked ~ nav.t_menubir > ul {flex-direction: column;gap: 0}
	#t_mm nav.t_menubir ul li.ustmenuli {margin: 2px 14px;border-radius: 10px;overflow: hidden}
	#t_mm nav.t_menubir ul li.ustmenuli + li.ustmenuli::before {content: "";display: block;height: 1px;background: rgba(255,255,255,0.06);margin: 0 10px 2px}
	#t_mm nav.t_menubir ul li.ustmenuli a {display: block;padding: 10px 20px;color: var(--bgrenk) !important;font-size: 1.1em;letter-spacing: 0.2px;border-left: 3px solid transparent;border-radius: 10px;transition: 0.2s ease}
	#t_mm nav.t_menubir ul li.ustmenuli a:hover {background: rgba(255,255,255,0.08);border-left-color: var(--renkbir);padding-left: 24px}
		#t_mm nav.t_menubir::-webkit-scrollbar { width: 3px }
		#t_mm nav.t_menubir::-webkit-scrollbar-track { background: transparent }
		#t_mm nav.t_menubir::-webkit-scrollbar-thumb {background: rgba(255,255,255,0.12);border-radius: 4px}
}
@media (max-width: 640px) {
	#gykkcmp-root {}
	#gykkcmp-manage {}
	#ustbar {height: 5px;overflow:hidden}
	#ustbar * {display:none}
	#ustbar .t_sosyalaglar {display:none}
    header#headertop #ustcta {position: absolute;top: 0;right: 10px}
}
@media (max-width: 400px) {
	footer .alan > div {flex-basis: 100%;text-align: center}
}
/* MODULER */
section#hero {position:relative;aspect-ratio: 16 / 7;background-color:var(--renkuc); color:#fff}
section#hero .tamgenislik {display: flex;gap: 5vw;flex-direction: row;align-items: center;justify-content: space-evenly;width: 100%;height: 100%;overflow:hidden}
section#hero #particles-js {position: absolute;/*top: 0;left: 0;right: 0;bottom: 0*/width: 100%;height: 100%;z-index: 0}
section#hero .heroimg {flex-basis: 50%}
section#hero hgroup, section#hero hgroup h1 {margin-bottom: 20px}
section#hero hgroup h1 strong {display: block;color:var(--renkbir);font-weight:600}
section#hero hgroup p {}
section#hero .heroimg {aspect-ratio: 1;align-content: center}
section#hero hgroup h1 {position: relative}
section#hero hgroup h1::before {content: attr(data-text);position: absolute;inset: 0;font-size: inherit;color: inherit;pointer-events: none;animation: heroBlurZoom 1s ease-out 7.5s 1 both}
section#hero #gosterge {display:inline-block;position:relative;width:100%;height:50%;overflow:hidden;isolation:isolate}
section#hero #gosterge .speedometer, #gosterge .needle {position:absolute;inset:0}
section#hero #gosterge .speedometer::before, #gosterge .speedometer::after, #gosterge .needle::before, #gosterge .needle::after {content:"";position:absolute}
section#hero #gosterge .speedometer::before {top:0;left:0;width:100%;height:200%;border-radius:50%;background:conic-gradient(from 270deg, #d8e4d7 0deg 27deg, transparent 27deg 28.2deg, #cfe4ce 28.2deg 55deg, transparent 55deg 56.2deg, #c0e2be 56.2deg 83deg, transparent 83deg 84.2deg, #a6de9e 84.2deg 111deg, transparent 111deg 112.2deg, #8cda82 112.2deg 139deg, transparent 139deg 140.2deg, #54b822 140.2deg 167deg, transparent 167deg 168.2deg, #54e50b 168.2deg 265deg, transparent 180deg 360deg);-webkit-mask: radial-gradient(circle, transparent 0 58%, #000 58% 89%, transparent 89%);mask: radial-gradient(circle, transparent 0 58%, #000 58% 89%, transparent 89%)}
section#hero #gosterge .speedometer::after {top:0;left:0;width:100%;height:200%;border-radius:50%;background:conic-gradient(from 270deg,rgba(214,234,210,.60) 0deg,rgba(162,220,193,.55) 60deg,rgba(114,195,218,.50) 120deg,rgba(77,157,245,.48) 180deg,transparent 180deg 360deg);-webkit-mask: radial-gradient(circle, transparent 0 44%, #000 45% 72%, transparent 72%);mask: radial-gradient(circle, transparent 0 44%, #000 45% 72%, transparent 72%)}
section#hero #gosterge .needle::before {left: 48.5%;bottom: -80%;z-index: 3;width: 3%;height: 150%;background: var(--renkbir);border-bottom-left-radius: 5px;border-bottom-right-radius: 5px;border-top-left-radius: 100%;border-top-right-radius: 100%;display: inline-block;animation: needleMove 15s 1 forwards, needleWiggle 1s ease-in-out 14s infinite}
section#hero #gosterge .needle::after {left: 50%;bottom: -15%;width: 15%;aspect-ratio: 1 / 1;border-radius: 50%;transform: translate(-50%, 0);background: var(--renkbir);}
section#hero #gosterge .roket {position: absolute;top: 55%;left: 0;right: 0;text-align: center;font-size: calc(1em + 3vw); animation: burstForward 1s ease-out 7.5s 1 both}
	@keyframes needleMove {0% { transform: rotate(-90deg);} 50% { transform: rotate(45deg);} 100% { transform: rotate(80deg);}}
	@keyframes needleWiggle {0% { transform: rotate(78deg);} 50% { transform: rotate(82deg);} 100% { transform: rotate(79deg);}}
	@keyframes burstForward {0% { transform: scale(1); opacity: 0; filter: blur(0);} 15% { transform: scale(1); opacity: 0.6; filter: blur(0);} 100% { transform: scale(1.6); opacity: 0; filter: blur(8px);}}
	@keyframes heroBlurZoom {0% {opacity: 0;filter: blur(18px);transform: scale(1.12);} 20% {opacity: .9;} 100% {opacity: 0;filter: blur(0);transform: scale(1)}}

section#hizmetler {position: relative;top:max(-10vw, -90px);display: flex;gap: 5vw;flex-direction: row;flex-wrap: wrap;align-items: stretch;justify-content: center}
section#hizmetler > div {background-color: #fff;flex-basis: calc(33.33% - 5vw);flex-grow:1;text-align: center;padding: min(5%, 35px);border-radius: 10px;box-shadow: #888 0px 4px 15px -10px}
section#hizmetler .baslik {display:block;color:var(--renkuc);cursor: default;margin:10px 0 20px 0;transition:0.5s}
section#hizmetler > div:hover .baslik {transform: scale(1.05);color:var(--renkbir)}
section#hizmetler p {font-size:0.95em;opacity:0.95}
section#hizmetler .icon {font-size: 48px;line-height: 48px;color: var(--renkbir);transition:0.5s}
section#hizmetler > div:hover .icon {transform: translateY(-10px);color:var(--renkuc)}

main#nedenbiz {}
main#nedenbiz hgroup {text-align:center;font-size: 1.2em;margin-bottom:60px}
main#nedenbiz hgroup h2 {color:var(--renkbir)}
main#nedenbiz hgroup p {color:var(--renkuc);font-size:0.85em}
main#nedenbiz #nedenlist {display: flex;flex-direction: row;flex-wrap: wrap;align-items: center;justify-content: space-between}
main#nedenbiz #nedenlist > div {min-width: 300px;flex-grow: 1}
main#nedenbiz #nedenlist div.sol {text-align:right}
main#nedenbiz #nedenlist div.orta {text-align:center;padding:3vw}
main#nedenbiz #nedenlist div.orta img {width: 365px;height: auto}
main#nedenbiz #nedenlist div.sag {text-align:left}
main#nedenbiz #nedenlist div.nedenler {flex-basis: 33.33%}
main#nedenbiz #nedenlist div.nedenler div {margin-bottom: 40px;position:relative}
main#nedenbiz #nedenlist div.nedenler p {margin-top: 10px}
main#nedenbiz #nedenlist div.nedenler span {transition: 0.5s;position: absolute;top: calc(50% - 23px);font-size: 36px;border-radius: 50%;border: var(--renkuc) 2px dashed;background-color: var(--bgrenk);padding: 5px;opacity: 0;transform: scale(0)}
main#nedenbiz #nedenlist div.nedenler div:hover span {opacity:1;transform: scale(1)}
main#nedenbiz #nedenlist div.nedenler.sol span {right: -56px}
main#nedenbiz #nedenlist div.nedenler.sag span {left: -56px}

section#yorumlar {margin-top: 55px;padding: 90px 2.5vw;background-image: url(/altsite/tasarim/img/yorum_bg2.webp);background-repeat: no-repeat;background-size: contain;background-color: var(--renkuc);text-align: center;display: flex;flex-direction: column}
section#yorumlar hgroup, section#yorumlar hgroup h2 {color:#fff;margin-bottom: 20px}
section#yorumlar hgroup h2 strong {color:var(--renkiki);font-weight:600}
section#yorumlar > div {flex-basis: max(calc(50% - 2.5vw), 320px);flex-grow: 1}
section#yorumlar .yorumtasiyici {padding: clamp(60px, calc(323px - 36vw), 155px) 0}
#rotate-words {position: relative;color: #fff;display: flex;flex-direction: row;flex-wrap: wrap;align-items: center;justify-content: center;margin: 0 auto;width: 70%;height: 50px;font-size:1.2em}
#rotate-words blockquote {all: revert;opacity: 0;animation: rotate-word 64s linear infinite 0s;position: absolute}
#rotate-words blockquote::before, #rotate-words blockquote::after {content:none;display:none}
#rotate-words span {opacity: 0.6;color: var(--renkiki);display: block;margin-top: 20px;font-size: 0.8em;text-align: right}
	@keyframes rotate-word {0% { opacity: 0;  transform: translateX(0);filter:blur(10px);transform:scale(1.2)}3% { opacity: 1;  transform: translateX(0);filter:blur(0px);transform:scale(.9)}12% { opacity: 1; transform: translateX(0);filter:blur(0px);transform:scale(1)}16% { opacity: 0; transform: translateX(0);filter:blur(10px);transform:scale(1.2)}80% { opacity: 0}100% { opacity: 0}}
	#rotate-words blockquote:nth-child(2) { animation-delay: 8s}
	#rotate-words blockquote:nth-child(3) { animation-delay: 16s}
	#rotate-words blockquote:nth-child(4) { animation-delay: 24s}
	#rotate-words blockquote:nth-child(5) { animation-delay: 32s}
	#rotate-words blockquote:nth-child(6) { animation-delay: 40s}
	#rotate-words blockquote:nth-child(7) { animation-delay: 48s}
	#rotate-words blockquote:nth-child(8) { animation-delay: 56s}

section#hizmetlerimiz {margin-top:55px;padding:55px 0;}
section#hizmetlerimiz .ufakbaslik {font-size:1.1em}
section#hizmetlerimiz hgroup, section#hizmetlerimiz hgroup h2 {margin-bottom: 20px}
section#hizmetlerimiz hgroup h2 strong {color:var(--renkbir)}
section#hizmetlerimiz hgroup p {}
section#hizmetlerimiz .tamgenislik {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;align-items: center}
section#hizmetlerimiz .tamgenislik div {flex-basis: 50%;flex-grow: 1}
section#hizmetlerimiz .tamgenislik div.sol {padding:0 5%}
section#hizmetlerimiz .tamgenislik ul {display: flex;flex-direction: row;flex-wrap: wrap;justify-content: flex-start}
section#hizmetlerimiz .tamgenislik ul li {position:relative;width: max(calc(50% - 2vw), 240px);flex-grow: 1;background-color: #fff;margin: 1vw;padding: 15px;border-radius: 5px;overflow:hidden;border-left: var(--renkbir) 5px solid;transition: 0.5s}
section#hizmetlerimiz .tamgenislik ul li:before {content: "";background-color: var(--renkbir);position: absolute;z-index:-1;top: 0;bottom: 0;left: 0;width: 0px;transition: 0.5s}
section#hizmetlerimiz .tamgenislik ul li:hover {color:#fff;background-color:transparent}
section#hizmetlerimiz .tamgenislik ul li:hover:before {width:100%}
section#hizmetlerimiz .cta {padding:1vw}
section#hizmetlerimiz .butonlastir {width: max(50%, 310px)}

section#blog {padding-bottom:55px}
section#blog hgroup {font-size: 1.2em;margin-bottom:40px}
section#blog hgroup h3 strong {color:var(--renkbir)}
section#blog hgroup p {color:var(--renkuc);font-size:0.85em}
section#blog ul {display: flex;gap:1%;flex-direction: row;flex-wrap: wrap;align-items: stretch;justify-content: center}
section#blog ul li {background-color: #fff;position: relative;z-index: 0;flex-basis: max(32%, 320px);flex-grow: 1;max-width: 455px;overflow:hidden}
section#blog ul li[data-grup]::before {content: attr(data-grup);position: absolute;top: 10px;left: 10px;background-color:var(--renkuca);color: #fff;padding: 4px 8px;font-size: 12px;border-radius: 5px}
section#blog ul li .gorsel {position: relative;z-index: -1;aspect-ratio: 16 / 9;overflow: hidden}
section#blog ul li .gorsel:before {content: "";display: block;background-color: #000;position: absolute;z-index: 1;top: 0;right: 0;bottom: 0;left: 0;border-radius:20px;opacity: 0.5;transform: scale(.01);transition:0.3s}
section#blog ul li:hover .gorsel:before {transform:scale(1.2)}
section#blog ul li .gorsel a {}
section#blog ul li .gorsel img {transition:0.5s}
section#blog ul li:hover .gorsel img {transform:scale(1.1)}
section#blog ul li .etiketler {position: absolute;z-index:2;bottom: 0;right: 10px;text-transform: uppercase;font-size: 0.8em}
section#blog ul li .etiketler span {background-color: var(--bgrenk);border-radius: 5px;padding: 4px 7px;color: var(--renkbir);font-size: min(calc(0.85em + 0.5vw), 11px)}
section#blog ul li .etiketler span:nth-child(n+4) {display: none}
section#blog ul li .baslik {padding: 10px 25px;font-size: calc(1.2em + 0.2vw)}
section#blog ul li .baslik a {transition:0.5s}
section#blog ul li:hover .baslik a {color:var(--renkiki)}
section#blog ul li .aciklama {padding:0 25px 25px 25px}
section#blog ul li .link {text-indent: 110vw;position: absolute;width: 100%;height: 100%;top: 0}

section#istatistik {background: var(--renkbir);margin-top: 55px;padding: 55px 0;color: #fff}
section#istatistik .tamgenislik {display:flex;flex-wrap:wrap;gap:15px;align-items:stretch;justify-content:center}
section#istatistik .tamgenislik > div {flex:1 1 210px;min-width:210px;text-align:center;animation:statCardFloat 5.5s ease-in-out infinite}
section#istatistik .tamgenislik > div:nth-child(2) {animation-delay:0.8s}
section#istatistik .tamgenislik > div:nth-child(3) {animation-delay:1.6s}
section#istatistik .tamgenislik > div:nth-child(4) {animation-delay:2.4s}
section#istatistik p {margin:0;padding:0}
section#istatistik .icon {margin-bottom:12px;line-height:1}
section#istatistik .material-icons-outlined {font-size:36px;line-height:36px;display:inline-block}
section#istatistik .number {display:block;font-size:2.5em;line-height:1;font-weight:bold;margin-bottom:10px}
section#istatistik strong {display:block;font-weight:normal;font-size:1.1em;line-height:1.5em}
@keyframes statCardFloat {0% {transform:translateY(0)} 50% {transform:translateY(-20px)} 100% {transform:translateY(0)}}
	@media (max-width: 720px) {section#istatistik .tamgenislik > div {animation:none}}

section#faq {margin-top:55px;padding:55px 0}
section#faq .tamgenislik {max-width:820px}
section#faq hgroup {text-align:center;font-size: 1.2em;margin-bottom:40px}
section#faq hgroup h3 strong {color:var(--renkbir)}
section#faq hgroup p:not(.ufakbaslik) {color:var(--renkuc);font-size:0.85em}
section#faq .faq-list {display:flex;flex-direction:column;gap:12px}
section#faq details {background:#fff;border:1px solid #e7e7e7;border-radius:14px;overflow:hidden;transition:border-color .5s ease, box-shadow .5s ease}
section#faq details[open] {border-color:var(--renkbir);box-shadow:0 10px 30px rgba(0,0,0,.06)}
section#faq summary {list-style:none;cursor:pointer;position:relative;padding:20px 60px 20px 20px;font-size:1.05em;font-weight:600;line-height:1.5em}
section#faq summary::-webkit-details-marker {display:none}
section#faq summary:after {content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);width:28px;height:28px;line-height:28px;text-align:center;border-radius:50%;background:#f3f3f3;color:#000;font-size:1.2em;font-weight:400;transition:transform .5s ease, background-color .5s ease, color .5s ease}
section#faq details[open] summary:after {content:"−";background:var(--renkbir);color:#fff}
section#faq .cevap {display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s ease}
section#faq details[open] .cevap {grid-template-rows:1fr}
section#faq .cevap > div {overflow:hidden}
section#faq .cevap p {margin:0;padding:0 20px 20px 20px;line-height:1.7em;color:#555;border-top:1px solid #f1f1f1;padding-top:16px}
section#faq .butonlastir {width: 100%;text-align: center}


@media (max-width: 960px) {
	main#nedenbiz #nedenlist div.nedenler span {opacity: 0;transform: scale(1);opacity: 1;position: unset;font-size: 20px}
    main#nedenbiz #nedenlist div.nedenler strong {vertical-align: middle;background-color: var(--renkuca);color: var(--bgrenk);padding: 5px 30px;display: inline-block;width: calc(100% - 40px);border-radius: 20px;position: relative;z-index: -1}
	main#nedenbiz #nedenlist div.nedenler.sol strong {left: 25px;}
	main#nedenbiz #nedenlist div.nedenler.sag strong {left: -25px;}
}

@media (max-width: 820px) {
	section#hizmetler {position: unset;top:0;margin: 40px 0;gap:2vw;justify-content: space-around}
	section#hizmetler > div {flex-basis:230px}
	section#hizmetlerimiz .tamgenislik {flex-direction: column-reverse}
	section#hizmetlerimiz .tamgenislik .sag {margin-bottom: 25px}
}

@media (max-width: 640px) {
	section#hero {aspect-ratio:unset;text-align:center}
	section#hero .tamgenislik {flex-direction: column;gap:0}
	section#hero .heroimg {width: min(50%, 240px)}
	section#hero hgroup, section#hero hgroup h1 {margin-top:20px}
}

@media (max-width: 480px) {
	section#hero .tamgenislik {flex-direction: column-reverse;gap:0}
}