/* Visual refresh. The captured content and original interaction hooks stay intact. */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{--ink:#142522;--muted:#62716d;--paper:#fafbf8;--line:#dce4df;--aqua:#bceee9;--accent:#087b84;--accent-hover:#08636b;--logo-surface:#397f83;--font:'Manrope',Arial,sans-serif}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--font);line-height:1.7}
*,*::before,*::after{box-sizing:border-box}
a{color:inherit}
button,input,textarea{font-family:var(--font)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #10aab9;outline-offset:5px}
.container{width:calc(100% - 96px);max-width:1328px;padding:0}
.title,h1,h2,h3{font-family:var(--font);color:var(--ink);font-weight:600;letter-spacing:-.055em;line-height:1.08}
.title{font-size:clamp(40px,5.5vw,76px)}
.title::after{display:none!important}

/* A quiet masthead gives the work room to speak. */
#header,#header.headerAbsolute,#header.headerMobil{position:relative;inset:auto;float:none;width:100%;padding:0;z-index:2000;background:var(--paper)}
#header .container{height:104px;max-width:1408px;width:calc(100% - 80px);justify-content:space-between}
#header .container>.logo{width:146px;min-width:146px;height:auto;display:block;position:relative;z-index:12}
#header .container>.logo img{width:100%;height:auto;display:block;content:url('/assets/images/logo.svg')}
#header .container .headerRight{height:auto;flex:initial}
#header .container .headerRight #nav{display:flex;gap:34px;align-items:center}
#header .container .headerRight #nav a{font-family:var(--font);font-size:11px;font-weight:700;letter-spacing:.08em;margin:0;color:var(--ink)}
#header .container .headerRight #nav a::after{height:2px;bottom:-9px;background:var(--accent)}
#header .container .headerRight #nav a.active,#header .container .headerRight #nav a:hover{color:var(--accent)}
#header .container .headerRight #nav a.logo,#header .container .headerRight #nav a.offerButtonNav{display:none}
#header .container .headerRight .getOffer{height:auto;margin-left:28px}
#header .container .headerRight .getOffer:has(.getOfferButton){width:120px;min-width:120px}
#header .container .headerRight .getOffer .getOfferButton{height:44px;width:120px;border-radius:0;background:var(--accent);font-family:var(--font);font-size:11px}
#header .container .headerRight .getOffer .getOfferButton .getOfferBg{display:none}
#header .container .headerRight .getOffer .getOfferForm{background:var(--paper);position:fixed;inset:104px 0 0 auto;width:min(480px,100%);height:calc(100dvh - 104px);padding:32px;overflow:auto;overscroll-behavior:contain;border-left:1px solid var(--line);box-shadow:-20px 0 60px -36px #14252266;z-index:110;justify-content:flex-start;transform:translateX(110%);opacity:0;visibility:hidden;transition:transform .35s,opacity .35s}
#header .container .headerRight .getOffer.active .getOfferForm{transform:translateX(0);opacity:1;visibility:visible}
#header .container .headerRight .getOffer .getOfferForm .getOfferFormTitle{align-self:flex-start;font:600 32px/1.2 var(--font);color:var(--ink);margin:0 0 24px;letter-spacing:-.04em}
#header .container .menuIcon{width:40px;height:40px}
#header .container .menuIcon a span{height:2px;margin-bottom:6px;background:var(--ink);width:28px!important}
#header .container .menuIcon .menuBg{display:none}
#header .container .menuIcon.menuIconWhite a span{background:var(--ink)}
#header .container .menuIcon.active a span{background:var(--ink)}
#header.headerMobil .container .headerRight .getOffer .getOfferButton{pointer-events:auto;background:var(--accent)}
#header .container .headerRight .getOffer .getOfferButton:hover,#header.headerMobil .container .headerRight .getOffer .getOfferButton:hover{background:var(--accent-hover)}
#header.headerMobil .container .headerRight .getOffer .getOfferButton span{opacity:1}
#header .container .headerRight .getOffer.active .getOfferButton{position:fixed;top:28px;right:40px;z-index:120}

/* Existing project imagery becomes a spacious two-column portfolio. */
.homeProjectsCategories,.productCategories{float:none;padding:104px 0 96px;margin:0}
.homeProjectsCategories>.container{display:grid;grid-template-columns:1fr 1.45fr;gap:40px 80px;align-items:start}
.homeProjectsCategories .container .title{margin:0;position:relative;padding-top:24px}
.homeProjectsCategories .container .title::before{content:'';position:absolute;top:0;left:0;width:44px;height:3px;background:var(--accent)}
.homeProjectsCategories .container .productCategoriesContent{font:400 14px/1.85 var(--font);color:var(--muted);text-align:left;width:100%;max-width:none;margin:0}
.projectCategoryLists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px;margin:16px 0 0;width:100%;grid-column:1/-1}
.projectCategoryLists .projectCategoryList{width:100%;max-width:none;flex:initial;padding:0;margin:0;float:none}
.projectCategoryLists .projectCategoryList a{position:relative}
.projectCategoryLists .projectCategoryList a figure{aspect-ratio:1.5;background:#e9efec;margin:0 0 20px;overflow:hidden;border-radius:2px}
.projectCategoryLists .projectCategoryList a figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.projectCategoryLists .projectCategoryList a:hover figure{box-shadow:none}
.projectCategoryLists .projectCategoryList a:hover figure img{transform:scale(1.035)}
.projectCategoryLists .projectCategoryList a article{padding:0 40px 0 0}
.projectCategoryLists .projectCategoryList a article::after{content:'↗';position:absolute;right:0;bottom:26px;font:28px/1 var(--font);color:var(--accent)}
.projectCategoryLists .projectCategoryList a article strong{font:600 clamp(20px,2vw,28px)/1.35 var(--font);letter-spacing:-.035em;color:var(--ink);margin-bottom:6px}
.projectCategoryLists .projectCategoryList a article span{font:400 11px/1.6 var(--font);letter-spacing:0;color:var(--muted)}
.homeProjectsCategories .container .allProjects{grid-column:1/-1;justify-self:center;width:auto;height:54px;padding:0 30px;margin:20px 0 0;background:var(--accent);color:#fff;font:600 11px var(--font);letter-spacing:.08em}
.homeProjectsCategories .container .allProjects:hover{background:var(--accent-hover);opacity:1}
.productCategories .container>.title{align-self:flex-start;margin-bottom:28px}
.productCategories .pageNav{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 40px;justify-content:flex-start;width:100%;height:auto;overflow:visible}
.productCategories .pageNav::before,.productCategories .pageNav::after{display:none}
.productCategories .pageNav a{font:500 12px/1.4 var(--font);padding:11px 18px;border:1px solid var(--line);border-radius:30px;margin:0;background:transparent;color:var(--ink)}
.productCategories .pageNav a.active,.productCategories .pageNav a:hover{color:white;background:var(--accent);border-color:var(--accent)}
.productCategories .pageNav a:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.productCategories .pageNav a::after{display:none}
.productCategories .projectCategoryLists{display:grid}
.oldProjectCategoryLists{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:0;background:var(--line);border:1px solid var(--line);width:100%}
.oldProjectCategoryLists .oldProjectCategoryList{width:100%;max-width:none;padding:24px;float:none;margin:0;background:white}
.oldProjectCategoryLists .oldProjectCategoryList .oldProjectCategoryListContent{border:0;min-height:140px;height:100%;display:flex;align-items:center;justify-content:center}
.oldProjectCategoryLists .oldProjectCategoryList img{max-width:100%;height:auto;max-height:140px;object-fit:contain}
.oldProjectCategoryLists .oldProjectCategoryList .oldProjectCategoryListContent img{opacity:1}

/* Service sections retain every paragraph and illustration. */
.homeOurServices{max-width:none;width:100%;padding:96px 0;margin:0;background:#edf2ec;gap:0;counter-reset:service}
.homeOurServices .homeOurServicesTop{display:grid;grid-template-columns:1fr 1.45fr;gap:80px;width:calc(100% - 96px);max-width:1328px;margin:0 auto 64px}
.homeOurServices .homeOurServicesTop h2.title{text-align:left;margin:0}
.homeOurServices .homeOurServicesTop .homeOurServicesContent{font:400 14px/1.85 var(--font);color:var(--muted);text-align:left;margin:0;max-width:none}
.homeOurServices .homeOurService{width:calc(100% - 96px);max-width:1328px;padding:0;margin:0 auto;border-top:1px solid #ced9d1;counter-increment:service}
.homeOurServices .homeOurService a{display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:400px;height:auto;padding:40px 0;background:none;filter:none;gap:60px;overflow:visible}
.homeOurServices .homeOurService a article{position:relative;width:auto;height:auto;display:block;order:0;padding:0 0 0 58px!important;left:auto;top:auto}
.homeOurServices .homeOurService a article::before{content:'0' counter(service);position:absolute;left:0;top:8px;font:500 12px var(--font);color:var(--accent)}
.homeOurServices .homeOurService a article .title{font:500 clamp(30px,3.1vw,46px)/1.12 var(--font);letter-spacing:-.055em;margin:0 0 24px;color:var(--ink)}
.homeOurServices .homeOurService a article p{font:400 13px/1.8 var(--font);color:var(--muted);max-width:520px;margin:0 0 12px}
.homeOurServices .homeOurService a figure{position:relative!important;inset:auto!important;transform:none!important;width:100%!important;height:300px!important;order:1;display:flex;align-items:center;justify-content:center;margin:0}
.homeOurServices .homeOurService a figure img{width:auto!important;height:auto!important;max-height:100%;max-width:100%;object-fit:contain}
.otherServices{padding:100px 0;margin:0;float:none}
.otherServices .container{gap:80px;align-items:start}
.otherServices .container .otherServicesContent{max-width:38%;padding:0;justify-content:start}
.otherServices .container .otherServicesContent .title{font-size:clamp(36px,4.5vw,60px);margin-bottom:30px}
.otherServices .container .otherServicesContent p{font:400 14px/1.85 var(--font);color:var(--muted)}
.otherServicesLists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin:0}
.otherServicesLists .otherServicesList{max-width:none;width:100%;margin:0;padding:0;border-bottom:1px solid var(--line)}
.otherServicesLists .otherServicesList a{height:76px;border:0;border-radius:0;font:600 10px/1.5 var(--font);letter-spacing:.02em;color:var(--ink);padding:0;justify-content:space-between;gap:10px}
.otherServicesLists .otherServicesList a i{font-size:24px;color:var(--accent)}
.otherServicesLists .otherServicesList a:hover{background:none;color:var(--accent)}
.otherServicesLists .otherServicesList .otherServicesListContent span{font-family:var(--font)}
div#about{padding:80px 0 100px;margin:0;float:none}
div#about .container{background:none;filter:none}
div#about .container .row{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin:0;align-items:start}
div#about .container .row article,div#about .container .row figure{width:100%;max-width:none;padding:0;float:none}
div#about .container .row article .title{margin:0 0 40px}
div#about .container .row article p{font:400 15px/1.9 var(--font);color:var(--muted);margin-bottom:20px}
div#about .container .row figure img{width:100%;height:auto}
.services{width:100%;max-width:none;padding:30px 0 80px;margin:0}
.servicesLists .servicesList{padding:64px 0;margin:0;gap:70px;border-bottom:1px solid var(--line);background:none}
.servicesLists .servicesList article{width:55%;padding:0}
.servicesLists .servicesList article .title{font:500 clamp(34px,4.5vw,60px)/1.12 var(--font);letter-spacing:-.05em;margin:0 0 26px;color:var(--ink)}
.servicesLists .servicesList article p{font:400 14px/1.9 var(--font);color:var(--muted);margin-bottom:18px}
.servicesLists .servicesList article p a{color:var(--accent);text-decoration:underline}
.servicesLists .servicesList figure{width:40%;padding:0}
.servicesLists .servicesList figure img{max-width:100%;height:auto}
.servicesCategories{flex-wrap:wrap;gap:20px;margin-top:30px}
.servicesCategories .servicesCategory{width:auto;flex:1;min-width:80px;margin:0}
.servicesCategories .servicesCategory a{font-family:var(--font);color:var(--muted)}
.servicesCategories .servicesCategory a i{font-size:30px;color:var(--accent)}
.servicesCategories .servicesCategory a span{font:500 10px/1.5 var(--font)}

/* Forms use persistent labels and the unchanged Cloudflare submission path. */
form .input-div,form .input-div.active{display:flex;flex-direction:column;padding:0;gap:8px;background:none;margin-bottom:24px}
form .input-div .label,form .input-div.active .label{position:static;transform:none;font:500 12px/1.6 var(--font);color:var(--muted);opacity:1}
form .input-div .input{height:54px;border:1px solid #ced9d1;border-radius:0;padding:14px 16px;background:#fff;color:var(--ink);font:400 15px/1.6 var(--font)}
form .input-div .textarea{height:150px;resize:vertical}
form .button{background:var(--accent);height:54px;border-radius:0;font-family:var(--font);font-size:11px;color:#fff}
form .button .buttonText{font:600 11px var(--font);letter-spacing:.08em}
/* The shared offer panel resets the legacy floating-label and hover geometry. */
#header .container .headerRight .getOffer .getOfferForm form{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;width:100%;min-width:0;margin:0}
#header .container .headerRight .getOffer .getOfferForm form .input-div{margin:0;padding:0;gap:7px}
#header .container .headerRight .getOffer .getOfferForm form .input-div::before,#header .container .headerRight .getOffer .getOfferForm form .input-div::after{display:none}
#header .container .headerRight .getOffer .getOfferForm form .input-div .label{position:static;transform:none;font:600 12px/1.5 var(--font);color:#425750}
#header .container .headerRight .getOffer .getOfferForm form .input-div .input{width:100%;min-width:0;height:46px;padding:11px 13px;border:1px solid #d4dfd9;border-radius:8px;background:#fff;font:400 14px/1.6 var(--font);color:var(--ink)}
#header .container .headerRight .getOffer .getOfferForm form .input-div .input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px #087b841a}
#header .container .headerRight .getOffer .getOfferForm form .button{display:inline-flex;align-items:center;justify-content:center;justify-self:center;gap:12px;width:160px;min-height:48px;height:48px;padding:0 22px;margin:4px 0 0;border:0;border-radius:8px;background:var(--accent);color:white;transition:background .2s}
#header .container .headerRight .getOffer .getOfferForm form .button:hover{background:var(--accent-hover)}
#header .container .headerRight .getOffer .getOfferForm form .button .buttonText,#header .container .headerRight .getOffer .getOfferForm form .button:hover .buttonText{margin:0;font:700 13px/1 var(--font);letter-spacing:.06em;white-space:nowrap;color:#fff;transition:none}
#header .container .headerRight .getOffer .getOfferForm form .button .buttonIcon{display:none}
#header .container .headerRight .getOffer .getOfferForm form .button::after{content:'→';font:500 20px/1 var(--font);color:#fff}
#header .container .headerRight .getOffer .getOfferForm form .button input[type=submit]{inset:0;width:100%;height:100%;padding:0;margin:0;border:0;opacity:0;cursor:pointer}
#header .container .headerRight .getOffer .getOfferForm form .button:focus-within{outline:3px solid #10aab9;outline-offset:4px}
#header .container .headerRight .getOffer .getOfferForm form .button:has(input:disabled){opacity:.65}
#header .container .headerRight .getOffer .getOfferForm form .button input:disabled{cursor:wait}
#header .container .headerRight .getOffer .getOfferForm form>[data-vda-turnstile]{display:flex;justify-content:center;min-width:0;margin:0}
#header .container .headerRight .getOffer .getOfferForm form>[data-form-status]{text-align:center}
#header .container .headerRight .getOffer .getOfferForm form>[data-form-status]:empty{display:none}
.contact{padding:40px 0 32px;margin:0;background:var(--paper)}
.contact::before,.contact::after{display:none}
.contact .contactForm{max-width:840px;padding:0;margin:0 auto;min-height:0;background:none;display:flex;flex-direction:column;align-items:center}
.contact .contactForm .title{width:100%;margin:0 0 24px;font:600 clamp(32px,4vw,46px)/1.15 var(--font);letter-spacing:-.045em;text-align:center}
.contact .contactForm form{width:100%;margin:0;padding:28px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 16px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 16px 48px -32px #14252240}
.contact .contactForm form>.col-md-4,.contact .contactForm form>.col-md-12{padding:0;margin:0;width:100%;max-width:none}
.contact .contactForm form>.col-md-12,.contact .contactForm form>[data-vda-turnstile],.contact .contactForm form>[data-form-status]{grid-column:1/-1}
.contact .contactForm form>.jcfe{justify-content:center}
.contact .contactForm form>[data-vda-turnstile]{display:flex;justify-content:center;min-width:0}
.contact .contactForm form>[data-form-status]{text-align:center;color:var(--muted)}
.contact .contactForm form>[data-form-status]:empty{display:none}
.contact .contactForm form .input-div{margin:0;gap:7px}
.contact .contactForm form .input-div::before,.contact .contactForm form .input-div::after{display:none}
.contact .contactForm form .input-div .label{font:600 12px/1.5 var(--font);color:#425750}
.contact .contactForm form .input-div .input{height:46px;padding:11px 13px;border:1px solid #d4dfd9;border-radius:8px;background:#fbfcfa;font:400 14px/1.6 var(--font);color:var(--ink)}
.contact .contactForm form .input-div .textarea{height:112px;min-height:112px}
.contact .contactForm form .input-div .input:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 3px #087b841a;background:#fff}
.contact .contactForm form .button{display:inline-flex;align-items:center;justify-content:center;gap:12px;width:auto;min-width:160px;height:48px;padding:0 22px;border:0;border-radius:8px;background:var(--accent);color:white;flex-shrink:0;transition:background .2s}
.contact .contactForm form .button:hover{background:var(--accent-hover)}
.contact .contactForm form .button .buttonText,.contact .contactForm form .button:hover .buttonText{margin:0;font:700 13px/1 var(--font);letter-spacing:.06em;white-space:nowrap;color:#fff;transition:none}
.contact .contactForm form .button .buttonIcon{display:none}
.contact .contactForm form .button::after{content:'→';font:500 20px/1 var(--font);color:#fff}
.contact .contactForm form .button input[type=submit]{inset:0;width:100%;height:100%;padding:0;margin:0;border:0;opacity:0;cursor:pointer}
.contact .contactForm form .button:focus-within{outline:3px solid #10aab9;outline-offset:4px}
.contact .contactForm form .button:has(input:disabled){opacity:.65}
.contact .contactForm form .button input:disabled{cursor:wait}
.contact .contactForm .contactSocial{position:static;width:100%;height:auto;display:flex;gap:14px;justify-content:center;padding:0;margin:20px 0 0}
.contact .contactForm .contactSocial a{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin:0;border:1px solid var(--line);border-radius:50%;background:#fff;color:var(--accent);font-size:18px}
.contact .contactForm .contactSocial a:hover{background:var(--aqua);border-color:var(--aqua)}
.contact .contactForm .contactContents{width:100%;display:grid;grid-template-columns:1.5fr 1fr;gap:24px;position:static;margin-top:24px;padding-top:24px;border-top:1px solid var(--line);text-align:center}
.contact .contactForm .contactContents .contactContent{margin:0;width:auto}
.contact .contactForm .contactContents .contactContent span{font:600 10px/1.7 var(--font);letter-spacing:.1em;color:var(--muted)}
.contact .contactForm .contactContents .contactContent p,.contact .contactForm .contactContents .contactContent p a{font:500 15px/1.65 var(--font);color:var(--ink);margin:6px 0 0}
#map{width:calc(100% - 96px);max-width:840px;height:300px;margin:0 auto 40px;border-radius:16px;overflow:hidden;filter:grayscale(.5)}
#map iframe{width:100%;height:100%}

/* Project preview geometry remains controlled by the existing device frames. */
.projeDetil{background:#edf3ef;padding:40px 0 0;margin:0;min-height:calc(100vh - 104px)}
.projeDetil .container{display:block;padding-top:0;padding-bottom:60px}
.projeDetil .project-detail-content{width:100%;max-width:100%;flex-wrap:nowrap;gap:32px}
.projeDetil .container .projeContent{flex:1 1 0;min-width:0}
.projeDetil .container .projeContent .projeLogo{display:flex;align-items:center;justify-content:center;width:250px;max-width:100%;min-height:112px;padding:20px;margin-bottom:28px;border:1px solid var(--line);border-radius:12px;background:var(--logo-surface)}
.projeDetil .container .projeContent .projeLogo img{display:block;max-width:100%;max-height:100px;object-fit:contain}
.fyi .projeDetil .container .projeContent .projeLogo img{filter:brightness(1.8)}
.ipragaz-elektrik .projeDetil .container .projeContent .projeLogo,.teksu .projeDetil .container .projeContent .projeLogo{background:#fff}
.projeDetil .container .projeRight{flex:0 0 auto;margin-top:0}
.projeDetil .container .projeRight:not(:has(.projeWebContainer img,.projeMobileContainer img)){display:none}
.projeDetil .project-detail-content:not(:has(.projeWebContainer img,.projeMobileContainer img)) .projeContent{flex:none;max-width:640px;align-items:center;text-align:center}
.projeDetil .container .projeRight .projeTab .projeTabContents{margin-inline:auto}
.projeDetil .container .projeRight .projeTab .projeTabContents .projeTabContent .webProje,.projeDetil .container .projeRight .projeTab .projeTabContents .projeTabContent .mobileProje{margin-inline:auto}
.projeDetil .container .projeContent article div span{font:600 10px/1.7 var(--font);letter-spacing:.08em;color:var(--muted);opacity:1}
.projeDetil .container .projeContent article div p,.projeDetil .container .projeContent article div p a{font:400 14px/1.8 var(--font);letter-spacing:0;color:var(--ink)}
.projeDetil .container .projeRight .projeTab .projeTitle{gap:8px;margin-bottom:16px;border:0}
.projeDetil .container .projeRight .projeTab .projeTitle a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-width:104px;height:44px;padding:0 14px;margin:0;border:1px solid #cbd8d0;border-radius:8px;background:transparent;color:var(--ink);opacity:1;font:700 11px/1 var(--font);letter-spacing:.04em;transition:background .2s,border-color .2s}
.projeDetil .container .projeRight .projeTab .projeTitle a::after{content:attr(title)}
.projeDetil .container .projeRight .projeTab .projeTitle a img{display:block;width:24px;height:18px;object-fit:contain;filter:brightness(0)}
.projeDetil .container .projeRight .projeTab .projeTitle a.active{background:var(--accent);border-color:var(--accent);color:#fff}
.projeDetil .container .projeRight .projeTab .projeTitle a.active:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.projeDetil .container .projeRight .projeTab .projeTitle a.active img{filter:none}
.projeDetil .container .projeRight .projeTab .projeTitle a:not(.active):hover{background:#dae6df}
.projeDetil .container .projeRight .projeTab .projePageTitle{justify-content:center;flex-wrap:wrap;gap:8px;margin:0 0 20px;overflow:visible}
.projeDetil .container .projeRight .projeTab .projePageTitle a{margin:0;padding:8px 12px;border-radius:6px;font:500 12px/1.6 var(--font);letter-spacing:0;color:var(--muted)}
.projeDetil .container .projeRight .projeTab .projePageTitle a.active{background:#fff;color:var(--accent);box-shadow:0 1px 4px #1425220d}
.projeDetil .container .projeRight .projeTab .projePageTitle a:hover{color:var(--accent)}
.projeDetil .proje-hover{display:none}
.projeDetil .projeTab::after{content:'Ekran görüntüsünün üzerinde kaydırarak devamını inceleyebilirsiniz.';display:block;margin-top:12px;font:400 11px/1.7 var(--font);text-align:center;color:var(--muted)}
.tab-title{font-family:var(--font)!important;color:var(--ink)!important;letter-spacing:.08em;font-size:10px!important}
.projeDetil .container .projeNav{position:static;inset:auto;transform:none;z-index:auto;display:flex;gap:16px;width:100%;margin-top:32px;padding-top:24px;border-top:1px solid #cedbd2}
.projeDetil .container .projeNav a{position:static;inset:auto;transform:none;display:flex;flex:0 1 calc(50% - 8px);align-items:center;justify-content:space-between;gap:16px;min-width:0;height:auto;min-height:76px;padding:16px 20px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--ink);transition:border-color .2s,background .2s}
.projeDetil .container .projeNav a.projeNext{margin-left:auto;justify-content:flex-end}
.projeDetil .container .projeNav a:hover{background:#f7fbf8;border-color:#a8c5b7;border-radius:10px}
.projeDetil .container .projeNav a .proje-nav-hover{position:static;display:flex;opacity:1;pointer-events:auto;width:auto;min-width:0;height:auto;padding:0;margin:0;text-align:left}
.projeDetil .container .projeNav a.projeNext .proje-nav-hover{text-align:right}
.projeDetil .container .projeNav a span{font:700 10px/1.5 var(--font);letter-spacing:.07em;color:var(--muted)}
.projeDetil .container .projeNav a p{margin:4px 0 0;font:600 14px/1.5 var(--font);letter-spacing:0;overflow-wrap:anywhere;color:var(--ink)}
.projeDetil .container .projeNav a i{display:flex;align-items:center;justify-content:center;flex:0 0 24px;width:24px;height:24px;padding:0}
.projeDetil .container .projeNav a.projePrev i{order:-1}
.projeDetil .container .projeNav a i .icon{width:18px;height:18px;font-size:18px;color:var(--accent)}
.page-top{background:#edf3ef;margin:0;padding:24px 0;text-align:center}
.page-top a{display:inline-flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;margin:0;padding:10px 16px;border:1px solid #cbd8d0;border-radius:8px;font:700 10px/1.5 var(--font);letter-spacing:.06em;color:var(--ink)}
.page-top a img{width:14px;height:14px;margin:0;filter:brightness(0)}

#footer{float:none;padding:64px 0 30px;background:var(--ink);color:#e5ede7}
#footer .container{height:auto;min-height:260px;gap:60px;align-items:start;justify-content:space-between}
#footer .footerLeft,#footer .footerRight{justify-content:flex-start;align-items:flex-start;flex:1}
#footer .footerLogo{width:146px;margin-bottom:30px}
#footer .footerLogo img{width:100%;height:auto}
#footer .footerContacts{display:grid;grid-template-columns:1fr 1fr;gap:40px}
#footer .footerContacts .footerContact{margin:0;max-width:300px}
#footer .footerContacts .footerContact span{font:500 9px/1.7 var(--font);letter-spacing:.13em;color:#91aaa0;margin-bottom:10px}
#footer .footerContacts .footerContact p,#footer .footerContacts .footerContact p a{font:400 12px/1.8 var(--font);color:#d8e2db}
#footer .footerRight{align-items:flex-end}
#footer .container .footerRight .footerNav{flex-direction:row;flex-wrap:wrap;gap:24px;margin:0 0 30px;justify-content:flex-end}
#footer .container .footerRight .footerNav a{font:600 10px/1.7 var(--font);letter-spacing:.08em;color:#d8e2db;margin:0}
#footer .container .footerRight .footerSocial{width:auto;gap:24px;margin:0 0 36px;justify-content:flex-end}
#footer .container .footerRight .footerSocial a{margin:0;color:var(--aqua)}
#footer .footerCopy{font:400 10px/1.8 var(--font);color:#91aaa0;text-align:right}

@media(min-width:1600px){.projectCategoryLists{gap:50px 32px}}
@media(min-width:1024px){
  #header.headerMobil .container .menuIcon{display:none}
  #header.headerMobil .container .headerRight{position:static;opacity:1;pointer-events:auto;height:auto;display:flex}
  #header.headerMobil .container .headerRight #nav{position:static;inset:auto;transform:none;flex-direction:row;height:auto;width:auto;margin:0;gap:34px}
  #header.headerMobil .container .headerRight #nav a{font:700 11px/1.7 var(--font);letter-spacing:.08em;margin:0;color:var(--ink)}
  #header.headerMobil .container .headerRight #nav a.logo,#header.headerMobil .container .headerRight #nav a.offerButtonNav{display:none}
}
@media(max-width:1100px){
  #header .container .headerRight #nav{gap:22px}
  .homeProjectsCategories>.container,.homeOurServices .homeOurServicesTop{gap:40px}
  .servicesLists .servicesList{gap:40px}
}
@media(max-width:1023px){
  .container{width:calc(100% - 48px)}
  #header .container{height:84px;width:calc(100% - 48px)}
  #header .container>.logo{width:125px;min-width:125px}
  #header .container .menuIcon{display:flex;position:relative;z-index:120}
  #header .container .headerRight{display:none}
  #header.headerMobil .container .headerRight{position:fixed;inset:84px 0 auto;width:100%;height:auto;max-height:calc(100dvh - 84px);overflow:auto;background:var(--ink);padding:24px;display:none;opacity:1;visibility:visible;transform:none;z-index:110}
  #header.headerMobil .container .headerRight.active{display:flex;flex-direction:column;align-items:stretch}
  #header.headerMobil .container .headerRight #nav{display:flex;position:static;inset:auto;transform:none;height:auto;margin:0;flex-direction:column;align-items:flex-start;gap:0;width:100%;padding:0}
  #header.headerMobil .container .headerRight #nav a{font:500 28px/1.4 var(--font);letter-spacing:-.03em;color:white;margin:0;padding:14px 0;width:100%}
  #header.headerMobil .container .headerRight #nav a.logo,#header.headerMobil .container .headerRight #nav a.offerButtonNav{display:none}
  #header.headerMobil .container .headerRight #nav a::after{display:none}
  #header.headerMobil .container .headerRight .getOffer{margin:20px 0 0}
  #header .container .headerRight .getOffer .getOfferForm{top:84px;height:calc(100dvh - 84px)}
  #header .container .headerRight .getOffer.active .getOfferButton{top:20px;right:24px;width:104px;height:44px}
  #header .container:has(.getOffer.active) .menuIcon{visibility:hidden}
  .homeOurServices .homeOurServicesTop,.homeOurServices .homeOurService{width:calc(100% - 48px)}
  .homeOurServices .homeOurService a{gap:30px;min-height:360px}
  .homeOurServices .homeOurService a article{padding-left:40px!important}
  .otherServices .container{gap:40px}
  div#about .container .row{gap:40px}
  .projeDetil{min-height:calc(100vh - 84px)}
  .projeDetil .project-detail-content{flex-direction:column}
  .projeDetil .container .projeContent{flex:none}
  .projeDetil .container .projeRight{flex:0 1 auto}
  #map{width:calc(100% - 48px)}
}
@media(max-width:767px){
  .services .servicesLists .servicesList article{padding-left:0}
  .services .servicesLists .servicesList article .servicesCategories{margin-left:0}
  .contact .contactForm form{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:700px){
  .container{width:calc(100% - 40px)}
  .title{font-size:45px}
  #header .container{height:78px;width:calc(100% - 40px)}
  #header.headerMobil .container .headerRight{top:78px}
  #header .container .headerRight .getOffer .getOfferForm{top:78px;height:calc(100dvh - 78px);padding:24px 20px;border-left:0}
  #header .container .headerRight .getOffer.active .getOfferButton{top:17px;right:20px}
  #header .container .headerRight .getOffer .getOfferForm form .input-div .input{font-size:16px}
  .homeProjectsCategories,.productCategories{padding:64px 0}
  .homeProjectsCategories>.container{grid-template-columns:1fr;gap:28px}
  .homeProjectsCategories .container .productCategoriesContent{font-size:13px}
  .projectCategoryLists{grid-template-columns:1fr;gap:32px}
  .projectCategoryLists .projectCategoryList a figure{margin-bottom:16px}
  .projectCategoryLists .projectCategoryList a article strong{font-size:24px}
  .projectCategoryLists .projectCategoryList a article span{font-size:10px}
  .productCategories .pageNav{gap:8px;margin-bottom:20px}
  .productCategories .pageNav a{padding:9px 12px;font-size:10px}
  .oldProjectCategoryLists{grid-template-columns:repeat(2,minmax(0,1fr))}
  .oldProjectCategoryLists .oldProjectCategoryList{padding:16px}
  .oldProjectCategoryLists .oldProjectCategoryList .oldProjectCategoryListContent{min-height:100px}
  .homeOurServices{padding:60px 0}
  .homeOurServices .homeOurServicesTop{grid-template-columns:1fr;gap:26px;width:calc(100% - 40px);margin-bottom:40px}
  .homeOurServices .homeOurService{width:calc(100% - 40px)}
  .homeOurServices .homeOurService a{grid-template-columns:1fr;gap:20px;padding:32px 0;min-height:0}
  .homeOurServices .homeOurService a article .title{font-size:34px;margin-bottom:20px}
  .homeOurServices .homeOurService a article{padding-left:32px!important}
  .homeOurServices .homeOurService a figure{height:230px!important}
  .homeOurServices .homeOurService a article p{font-size:13px}
  .otherServices{padding:60px 0}
  .otherServices .container{display:block}
  .otherServices .container .otherServicesContent{max-width:none;margin-bottom:35px}
  .otherServicesLists{gap:0 16px}
  .otherServicesLists .otherServicesList a{font-size:9px;height:74px}
  .otherServicesLists .otherServicesList a i{font-size:22px}
  div#about{padding:50px 0 60px}
  div#about .container .row{grid-template-columns:1fr;gap:30px}
  div#about .container .row article p{font-size:14px}
  .servicesLists .servicesList{display:flex;flex-direction:column;gap:25px;padding:40px 0}
  .servicesLists .servicesList article,.servicesLists .servicesList figure{width:100%}
  .servicesLists .servicesList article .title{font-size:36px}
  .servicesLists .servicesList figure img{max-height:300px;object-fit:contain}
  .contact{padding:28px 0}
  .contact .contactForm .title{font-size:32px;margin-bottom:24px}
  .contact .contactForm form{width:100%;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
  .contact .contactForm form .input-div .input{font-size:16px}
  .contact .contactForm form>div{padding:0;width:100%}
  .contact .contactForm .contactSocial{margin-top:20px}
  .contact .contactForm .contactContents{grid-template-columns:1fr;gap:18px;margin-top:20px;padding-top:20px}
  .contact .contactForm .contactContents .contactContent p,.contact .contactForm .contactContents .contactContent p a{font-size:14px}
  #map{width:calc(100% - 40px);height:240px;margin-bottom:28px;border-radius:12px}
  .projeDetil .container .projeNav{gap:10px;margin-top:24px;padding-top:20px}
  .projeDetil .container .projeNav a{flex-basis:calc(50% - 5px);padding:12px;gap:8px}
  .projeDetil .container .projeNav a span{font-size:8px}
  .projeDetil .container .projeNav a p{font-size:12px}
  #footer{padding:48px 0 30px}
  #footer .container{flex-direction:column;gap:40px}
  #footer .footerContacts{grid-template-columns:1fr;gap:24px}
  #footer .footerRight{align-items:flex-start}
  #footer .container .footerRight .footerNav{gap:18px;justify-content:flex-start}
  #footer .container .footerRight .footerSocial{justify-content:flex-start}
  #footer .footerCopy{text-align:left}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}