:root { --darkgrey: #666; --acikgri: #f6f6f6; --logoRed: #ee2839; --bookRed: #FB7657; } .mobileOnly{display:block;} .mobileOnlyInline {display:inline;} .upTablet, .upTabletInline, .upTabletGrid {display:none!important;} a{color:var(--darkgrey) ;} .redBtn { background: var(--logoRed); color:#fff; border-radius: .3rem;} .redBtn:hover {opacity:.8 ;} button.redBtn {padding: .5rem 1rem; border: none; font-size: 1rem; box-shadow: 1px 1px 1px rgba(200, 200, 200, 0.5);} button.redBtn:active {box-shadow: 0px 0px 0px rgba(200, 200, 200, 0.5);} /* Reset */ * { margin:0; padding:0; box-sizing:border-box; font-family: "Barlow Condensed", sans-serif; font-optical-sizing: auto; font-weight:400; font-style:normal; text-decoration:none; transition:all .5s; box-sizing:border-box;} li {} .bold {font-weight:bold;} .italic {font-style: italic;} .emp{font-style: italic; color: var(--logoRed); font-size: calc(1em + 1px);} p {text-align:left; line-height:1.7em; text-align:justify; text-justify:inter-word; margin-bottom: .5rem;} html, body { width:100vw; max-width:100vw; overflow-x:hidden; scroll-behavior:smooth; margin: 0; font-size:16px;} body {padding: 3rem 0 0 0; width: 100dvw; overflow-x: hidden;} .thin {font-weight: 300;} h2.title { font-weight: 300; font-size: 2.3rem; } h3.title { font-weight: 300; font-size: 2rem; text-align: center; margin: 2rem; display: block;} h4 { font-weight: 500; color: var(--logoRed); margin-top: 2rem; grid-column: 1 / -1; padding-bottom: .5rem; font-size: 1.2rem;} .gridWholeSpan {grid-column: 1 / -1;} #header { display: flex; justify-content: space-between; align-items: center; background: var(--acikgri); z-index: 1000; box-shadow: 0px 1px 2px 1px rgba(0, 0, 0, .2); margin-bottom: 2px; position: fixed; width: 100dvw; top: 0; overflow: hidden;} #logo, #logo>h1 {display: inline-flex; height: 3rem; width: 16rem; align-items: center; } #logo {margin-left: .5rem; z-index: 1100;} .scrolled #logo, .scrolled #logo>h1 { height: 2.5rem; width: 14rem; transition: .3s height smooth; } #logo>h1 {text-indent: -1000px; background-image: url("../files/darelogo.svg"); background-size: contain; background-position: center left; background-repeat: no-repeat;} .lang-en #logo>h1 { background-image: url("../files/dare-logo-en.png"); } .lang-es #logo>h1 { background-image: url("../files/dare-logo-es.png"); } .lang-de #logo>h1 { background-image: url("../files/dare-logo-de.png"); } .lang-tr #logo>h1 { background-image: url("../files/dare-logo-tr.png"); } #languageButton { width: 3rem; height: 3rem; position: fixed; top: 0; right: 3rem; display: block; border: 0; cursor: pointer; background-image: url(/files/icon-lang.svg); background-size:100% 100%; -o-background-size: 100% 100%; -webkit-background-size: 100% 100%; background-size:cover; } #languageButton:hover { background-color: rgb(222,222,222);} .scrolled #languageButton {height: 2.5rem; width: 2.5rem; right: 2.5rem;} #mainMenuButton { width: 3rem; height: 3rem; position: fixed; top: 0; right: 0; background: var(--logoRed); display: flex; align-items:center; justify-content: center; color: #fff; border: 0; font-size: 1.5rem;} #mainMenuButton #menuPlus {transform: rotate(0deg) ; } #mainMenuButton.active #menuPlus {transform: rotate(45deg);} .scrolled #mainMenuButton {height: 2.5rem; width: 2.5rem;} #mainMenuBox, #languageMenuBox { position: fixed; top: 3rem; right:-11rem; z-index: 89; width:0; height:14rem; } #mainMenuBox.active, #languageMenuBox.active { right: 0rem; width:10rem;} ul.menu { top: 0; right: 0rem; z-index: 90!important; display: grid; position: relative; grid-template-columns: auto; list-style: none;} .scrolled ul.menu { top: -1rem; } ul.menu a {display: inline-flex; height: 3rem; align-items: center; padding-right: 1rem; padding-left: 1rem; display: flex; width: 10rem; background: var(--logoRed); align-items: center; color: #fff; transition: .3s height smooth;} ul.menu a:hover, ul.menu a.activeLang, ul.menu a.activeLink { background: #ff4a5b; } ul.menu a.activeLang:after, ul.menu a.activeLink:after {content: "›"; margin-left: .3rem;} .gridBox { width: 100%; display: grid; grid-template-columns: 1fr; } .gridBox .gridPhoto { background-size: cover; min-height: 70vw; background-position: center;} .gridBox .gridText { background: #fff; display: flex; flex-direction: column; padding: 2rem; min-height: 50vw;} .bottomAligned { justify-content: flex-end; } .lang-en #body1foto { background-image: url("../files/img-home-about-500-en.webp"); } .lang-es #body1foto { background-image: url("../files/img-home-about-500-es.webp"); } .lang-de #body1foto { background-image: url("../files/img-home-about-500-de.webp"); } .lang-tr #body1foto { background-image: url("../files/img-home-about-500-tr.webp"); } .lang-en #body2foto { background-image: url("../files/img-home-offer-500-en.webp"); } .lang-es #body2foto { background-image: url("../files/img-home-offer-500-es.webp"); } .lang-de #body2foto { background-image: url("../files/img-home-offer-500-de.webp"); } .lang-tr #body2foto { background-image: url("../files/img-home-offer-500-tr.webp"); } #about2text { display:grid; grid-template-columns:4rem auto; align-items: center;} #about2text img {width: 3rem; height: auto;} #about1foto { background-image: url("../files/img-about-us-500.webp"); } #about2foto { background-image: url("../files/img-about-philosophy-500.webp"); } #whatweoffer1foto { background-image: url("../files/img-services-digital-strategy-500.webp"); } #whatweoffer2foto { background-image: url("../files/img-services-tailored-app-500.webp"); } #whatweoffer3foto { background-image: url("../files/img-services-seo-500.webp"); } #whatweoffer4foto { background-image: url("../files/img-services-hosting-500.webp"); } #whatweoffer {font-size: 2.3em; } #offerBox {display: grid; grid-template-columns: 4rem auto; gap: 0 1rem ;} .offericon {display: flex; justify-content: flex-start; align-items: flex-start;} .offericon img {width: 4rem; } .offertext { letter-spacing: 1px; } .offerslogan, .offerslogan * {font-style: italic; color: #777; font-weight: 300;} .kirmizi {background: var(--logoRed); color: #fff;} section#references { background: #e0e0e0; padding: 1rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap;} .refLogo {background-size: contain; background-repeat: no-repeat; background-position: center; width: 5rem; height: 2.5rem; margin: 1rem auto;} .refCountry { display:flex; height:2rem; align-items: center; justify-content:center; background: #f9f9f9; font-style: italic; padding: .3rem; margin: .5rem 0 0 0; width: 100%; color: #999;} .prevnext {border: none; background: none; font-size: 1.3em;} .prevnext:hover { color:var(--bookRed); } .prevnext:active { transform: translateX(4px);} .prevnext.prev:active { transform: translateX(-4px);} section.contact { width: 100dvw; background: var(--acikgri);} section.contact #contactBox {width: 100dvw; max-width: 1000px; margin: auto; padding:1rem; display:grid; grid-template-columns:auto; gap: 1rem;} #contactBox > div { padding: 1rem 1rem; background: #fff; border-radius: 1rem; box-shadow: 1px 1px 1px rgba(200, 200, 200, 0.5); height: 100%;} section.contentSection {margin: auto ; width: 1000px; max-width: 90vw; padding: 4rem 0 6rem;} #referencesSect { list-style: none; padding: 0 1rem; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); margin-bottom: 2rem;} #referencesSect li { display: none; /* Başlangıçta görünmez */ opacity: 0; transition: opacity 0.5s ease; width: 7rem; text-align: center; background: #fff; padding: .3rem; box-shadow: 1px 1px 2px rgba(0,0,0,.2);} #referencesSect li.showing {display: inline-flex; flex-direction: column; align-items: center; justify-content: center;} #referencesSect li.visible {opacity: 1;} .iconBox {background-size: contain; background-repeat: no-repeat; background-position: center center; width: 1.5rem; min-height: 1.5rem;} /* FORM */ #contactForm {display: block; width: 100%; } .aestheticForm { position: relative; transition: all 0.4s ease; min-height: 100px; padding-top: 0.5rem; } .aestheticForm * { transition: all 0.4s ease;} .aestheticForm > div {position: relative; margin-bottom: .5rem; min-height: 3rem; width: 100%; margin-top: 2.5rem;} .aestheticForm input, .aestheticForm textarea {position: absolute; top 0; left: 0; z-index: 10; font-size: 1rem; height: 3rem; padding: 1rem; width: 100%; border: #ccc 1px solid;} .aestheticForm textarea {min-height: 7rem;} .aestheticForm label {position: absolute; top: 1rem; left: 1rem; z-index: 15; min-width: 10rem; color:#999; font-style: italic;} .aestheticForm input:focus ~label, .aestheticForm input:not(:placeholder-shown) ~label , .aestheticForm textarea:focus ~label, .aestheticForm textarea:not(:placeholder-shown) ~label {top: -1.5rem;} .aestheticForm .submitBtn { background: #f00; color:#fff; border-radius: .3rem; padding: .5rem 1rem; border: none; font-size: 1rem; box-shadow: 1px 1px 1px rgba(200, 200, 200, 0.5);} .aestheticForm .submitBtn:hover {opacity:.8 ;} .aestheticForm .submitBtn:active {box-shadow: 0px 0px 0px rgba(200, 200, 200, 0.5);} /* Formun üzerine binecek overlay (katman) */ .form-overlay { position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; display: flex; backdrop-filter: blur(8px); flex-direction: column; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all 0.4s ease; z-index: 30; border-radius: 8px; margin-top: 0 !important; background: rgba(255, 255, 255, 0.05); /* Arka plana göre ayarlayın */ } /* Başarı veya Yükleme durumunda overlay'i göster */ .form-overlay.active { opacity: 1; visibility: visible; } /* Başarı-hata mesajı içeriği */ .success-content { text-align: center; transform: translateY(20px); transition: all 0.5s ease 0.2s; display: grid; grid-template-columns: auto auto; gap: 1rem; align-items: center; background: #4CAF50; padding: 1rem; border-radius: 1rem; color: #ffffff;} .error .success-content {background: #ee283b!important; } .form-overlay.active .success-content { transform: translateY(0); } .success-content h3 { display: flex; align-items: center; justify-content: center;} /* Zarif bir checkmark (onay) ikonu stili */ #checkmark-circle { width: 60px; height: 60px; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 30px; } /* x FORM */ #footer { background: #105156; padding:1rem; } #footerBox { display:grid; text-align:left; color: #b8bdc0; grid-template-columns: auto; width: calc(1000px - 2rem); margin: auto; max-width: calc(100vw - 2rem);} #footerBox #footerLogo { display:flex; align-items:center; justify-content: center; margin-bottom: 2rem;} #footerBox #footerLinks { display:flex; justify-content: center; } #footerBox #footerLinks h4 {color: #fff; margin-bottom: .5rem; margin-top: 0.5rem;} #footerBox #footerLinks li { list-style: none; } #footerBox #footerLinks a, #footerBox #footerLinks button { display:block; color:#b8bdc0; background: none; border: none; font-size: 1rem; white-space: nowrap;} #footerBox #footerLinks a:hover, #footerBox #footerLinks button:hover { color:#fff; } #footerBox #footerLinks a::before, #footerBox #footerLinks button::before{content: "|"; color: #559884; margin-right:.5rem; } .footerLinksList {display: inline-grid; grid-template-columns: auto auto 65px; gap: 0.5rem 1.5rem;} .footerLinksList li { align-content:center; } /* references */ .referenceSection { display: grid; grid-template-columns:1fr; width: 1000px; max-width: 90vw; margin:0 auto 3rem; box-shadow: 1px 1px 2px rgba(0, 0, 0, .2); scroll-margin-top: 100px; transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); opacity: 0.5; transform: scale(0.97);} .referenceSection > div {overflow: hidden;} .referenceSection:hover { box-shadow: 1px 1px 3px rgba(0, 0, 0, .4); } .referenceSection.active { opacity: 1; transform: scale(1); border: 1px solid var(--logoRed); box-shadow: 0 3px 6px rgba(0,0,0,0.3); z-index: 2; } .refImgBox {background-size: cover; background-repeat: no-repeat; background-position: top center; min-height: 200px; } .referenceTitle {margin-top: .5rem!important;} .referenceServices {display: grid; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; justify-content: start;} .serviceIconBox {text-align: center;} .serviceIcon {height: 2rem; } /* x references */ @media (max-width:768px) { #whatweoffer { grid-column: 1 / -1; text-align: center; order:0;} .gridPhoto { order: 1;} .gridText { order: 2;} .offercontent { grid-column: 1 / -1; } #strategyIcon { order: 6;} #strategyTitle { order: 5;} #strategySlogan { order: 7;} #strategyContent { order: 8; } #designIcon { order: 12;} #designTitle { order: 11;} #designSlogan { order: 13;} #designContent { order: 14; } #seoIcon { order: 22;} #seoTitle { order: 21;} #seoSlogan { order: 23;} #seoContent { order: 24; } #hostingIcon { order: 32;} #hostingTitle { order: 31;} #hostingSlogan { order: 33;} #hostingContent { order: 34; } } @media (min-width:768px) { .mobileOnly, .mobileOnlyInline {display:none!important;} .upTablet {display:block!important;} .upTabletInline {display:inline!important;} .upTabletGrid {display:grid!important;} #mainMenuButton {display: none!important;} #languageButton { right: 0rem; } .scrolled #languageButton {height: 2.5rem; width: 2.5rem; right: 0;} ul#mainMenu {top:0; right: 0; z-index: 1000; grid-template-columns: auto auto auto auto; justify-content: end;} .scrolled ul#mainMenu { top: 0rem; } ul#mainMenu a {width: auto; padding-right: 1.5rem; padding-left: 1.5rem; background: none; color: var(--darkgrey); white-space: pre;} ul#mainMenu a:hover, ul#mainMenu a.activeLink {background-color: var(--logoRed); color: #fff;} .scrolled ul#mainMenu a { height: 2.5rem; } #body1foto { background-image: url("../files/img-home-about-992.webp"); } .lang-en #body1foto { background-image: url("../files/img-home-about-992-en.webp"); } .lang-es #body1foto { background-image: url("../files/img-home-about-992-es.webp"); } .lang-de #body1foto { background-image: url("../files/img-home-about-992-de.webp"); } .lang-tr #body1foto { background-image: url("../files/img-home-about-992-tr.webp"); } .lang-en #body2foto { background-image: url("../files/img-home-offer-1024-en.webp"); } .lang-es #body2foto { background-image: url("../files/img-home-offer-1024-es.webp"); } .lang-de #body2foto { background-image: url("../files/img-home-offer-1024-de.webp"); } .lang-tr #body2foto { background-image: url("../files/img-home-offer-1024-tr.webp"); } .gridBox { grid-template-columns: 1fr 1fr; } .gridBox .gridPhoto {min-height: 50vw;} #referencesSect { grid-template-columns: repeat(4, 1fr);} #offerBox { gap: 0 0 ;} .offericon { grid-row: span 2; } #strategyUptablet { order: 4;} #designUptablet { order: 10;} #seoUptablet { order: 20;} #hostingUptablet { order: 30;} #strategyIcon { order: 6;} #strategyTitle { order: 5;} #strategySlogan { order: 8;} #strategyContent { order: 7; } #designIcon { order: 12;} #designTitle { order: 11;} #designSlogan { order: 14;} #designContent { order: 13; } #seoIcon { order: 22;} #seoTitle { order: 21;} #seoSlogan { order: 24;} #seoContent { order: 23; } #hostingIcon { order: 32;} #hostingTitle { order: 31;} #hostingSlogan { order: 34;} #hostingContent { order: 33; } section.contentSection {padding: 6rem 0 10rem;} section.contact #contactBox { grid-template-columns:1fr 1fr; gap:0 2rem; align-items: start; padding: 2rem;} #mainMenuBox, #mainMenuBox.active{top: 0; z-index: 1001; width: 50vw; right: 3.5rem; height: 3.5rem;} .scrolled #mainMenuBox {right: 2.5rem!important;} #footerBox { grid-template-columns: 1fr 1fr; max-width: calc(90vw - 2rem); } #footerBox #footerLogo { justify-content: flex-start; margin-bottom: 0;} #footerBox #footerLinks { justify-content: flex-end; } #about1foto { background-image: url("../files/img-about-us-896.webp"); } #about2foto { background-image: url("../files/img-about-philosophy-896.webp"); background-position:center right; } .referenceSection { grid-template-columns:1fr 1fr; } .referenceSection:nth-child(odd) .refContent {order:2;} .referenceSection:nth-child(odd) .refImgBox {order:1; border-right: 1px #eee solid; border-left: 0 #eee solid;} #whatweoffer1foto { background-image: url("../files/img-services-digital-strategy-896.webp"); } #whatweoffer2foto { background-image: url("../files/img-services-tailored-app-1024.webp"); } #whatweoffer3foto { background-image: url("../files/img-services-seo-1024.webp"); } #whatweoffer4foto { background-image: url("../files/img-services-hosting-1200.webp"); } } @media (min-width:1000px) { ul.menu a {width: auto; padding-right: 2rem; padding-left: 2rem;} ul.menu a.activeLang:after {content: none; margin-left: 0rem;} } @media (min-width:1400px) { html, body { font-size:17px;} #offerBox {gap: 0 1rem ;} #referencesSect { grid-template-columns: repeat(6, 1fr);} section.contact { padding:2rem; width:1200px;} #footerBox { width: calc(1200px - 4rem); } } @media (min-width:1800px) { html, body { font-size:19px;} section.contact { width:1400px;} #footerBox { width: calc(1400px - 4rem); } } /* cookie */ :root { --cookie-first: #f33; /* kırmızı */ --cookie-second: #0b0; /* koyu yeşil */ } #cookie-banner { position: fixed; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.85); width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 10000; opacity: 0; visibility: hidden; transition: opacity 0.4s ease; font-size: 16px;} #cookie-banner.active { opacity: 1; visibility: visible; } .cookie-content { background: #fff; padding: 2.5rem; border-radius: 0.5rem; max-width: 500px; width: 90%; box-shadow: 0 15px 40px rgba(0,0,0,0.4); /* Animasyon başlangıcı: 20px aşağıda ve şeffaf */ transform: translateY(20px); opacity: 0; transition: transform 0.5s ease-out, opacity 0.5s ease-out; } #cookie-banner h2 {font-size: 24px; letter-spacing: .5px;} #cookie-banner.active .cookie-content:not(.hidden) { transform: translateY(0); opacity: 1; } .hidden { display: none !important; } #cookie-banner .cookie-btns { display: grid; grid-template-columns: auto auto auto; gap:.5rem; } #cookie-banner .cookie-btn {color: #fff; border-radius: .3rem; padding: .5rem 1rem; cursor: pointer; border: none; font-size: 1rem; box-shadow: 1px 1px 1px rgba(200, 200, 200, 0.5);} #cookie-banner .cookie-btn.primory {background: var(--cookie-first); padding: .5rem 1.5rem; } #cookie-banner .cookie-btn.secondary {background: none; border: solid 1px var(--cookie-first); color: var(--cookie-first);} .switch-wrapper .switch-checkbox { appearance: none; background-color: var(--cookie-first); border-radius: 72px; border-style: none; flex-shrink: 0; height: 20px; margin: 0; position: relative; width: 30px; cursor: pointer;} .switch-wrapper .switch-checkbox::before { bottom: -6px; content: ""; left: -6px; position: absolute; right: -6px; top: -6px; cursor: pointer;} .switch-wrapper .switch-checkbox, .switch-wrapper .switch-checkbox::after { transition: all 100ms ease-out; } .switch-wrapper .switch-checkbox::after { background-color: #fff; border-radius: 50%; content: ""; height: 14px; left: 3px; position: absolute; top: 3px; width: 14px; cursor: pointer;} .switch-wrapper input[type=checkbox] { cursor: default; } .switch-wrapper .switch-checkbox:checked { background-color: var(--cookie-second); } .switch-wrapper .switch-checkbox:checked::after { background-color: #fff; left: 13px; } .switch-wrapper :focus:not(.focus-visible) { outline: 0; } .switch-wrapper .switch-checkbox:disabled { background-color: lightgray !important; cursor: not-allowed !important;} .switch-wrapper .switch-checkbox:disabled *, .switch-wrapper .switch-checkbox:disabled:before, .switch-wrapper .switch-checkbox:disabled:after {cursor: not-allowed !important;} @media (max-width:600px) { #cookie-banner .cookie-redBtns { grid-template-columns: auto; } .cookie-content {padding: 1.5rem 1.5rem 2rem;} } /* x cookie */