#footer { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.5; background-color: #111827; color: #e5e7eb; width: 100%; } #footer * { box-sizing: border-box; } #footer .footer-main-container { padding: 80px 20px 40px; max-width: 1200px; margin: 0 auto; } #footer .footer-grid { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-start; } #footer .footer-col-section { flex: 1; min-width: 250px; } #footer .footer-logo-link { display: block; margin-bottom: 20px; } #footer .footer-logo-link img { max-height: 50px; width: auto; display: block; filter: brightness(100) } #footer .footer-description { color: #9ca3af; font-size: 0.95rem; margin-bottom: 25px; max-width: 320px; } #footer .footer-social-box { display: flex; gap: 12px; margin-top: 25px; } #footer .social-link { width: 42px; height: 42px; background-color: #1f2937; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #ffffff; text-decoration: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } #footer .social-link:hover { background-color: #3b82f6; transform: translateY(-5px); box-shadow: 0 10px 15px -3px rgba(59, 130, 246, 0.3); } /* Dinamik Tablo (ayar.Footer) Düzenlemeleri */ #footer .footer-grid table { border-collapse: collapse; width: auto; flex: 2; min-width: 300px; border: 0; } #footer .footer-grid table td { vertical-align: top; padding: 0 20px; border: 0; } #footer .footer-grid table p { margin: 0 0 12px 0; padding: 0; } #footer .footer-grid table a { color: #9ca3af; text-decoration: none; font-size: 0.95rem; transition: color 0.3s ease, transform 0.3s ease; display: inline-block; } #footer .footer-grid table a:hover { color: #3b82f6; transform: translateX(5px); } /* İletişim Bölümü (Tablonun Sağı) */ #footer .footer-contact-section { flex: 1; min-width: 250px; } #footer .footer-heading { color: #ffffff; font-size: 1.15rem; font-weight: 600; margin-bottom: 20px; position: relative; padding-bottom: 8px; } #footer .footer-heading::after { content: ''; position: absolute; left: 0; bottom: 0; width: 30px; height: 2px; background-color: #3b82f6; } #footer .footer-contact-block, #footer .footer-contact-block a { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 15px; color: #9ca3af; font-size: 0.95rem; } #footer .footer-contact-block a span { color: #e6e6e6; } #footer .footer-icon-blue { color: #ffffff; flex-shrink: 0; margin-top: 3px; margin-right: 5px; } #footer .footer-bottom-bar { border-top: 1px solid #1f2937; padding-top: 30px; margin-top: 60px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; color: #6b7280; font-size: 0.85rem; } #footer .footer-legal-links a { color: #6b7280; text-decoration: none; margin-left: 20px; transition: color 0.2s ease; } #footer .footer-legal-links a:hover { color: #ffffff; } @media (max-width: 1024px) { #footer .footer-grid table { flex: 1 1 100%; order: 2; } #footer .footer-contact-section { order: 3; } } #footer .footer-bottom-container { padding: 10px 0; display: flex; justify-content: space-between; } #footer .footer-bottom-links { display: flex; column-gap: 25px } #footer .footer-bottom-links a { color: #ddd; } @media (max-width: 768px) { #footer .footer-grid { flex-direction: column; } #footer .footer-grid table { width: 100%; } #footer .footer-grid table td { display: block; padding: 0 0 30px 0; } #footer .footer-bottom-bar { flex-direction: column; text-align: center; } #footer .footer-legal-links a { margin: 0 10px; } } /********/ .kayanYazi { overflow: hidden; background: #f2f2f2; } .kayanYazi .swiper-slide { width: auto !important } .kayanYazi .swiper-slide .title { position: relative; padding: 20px 160px 20px 0; font-size: 40px; font-weight: 600; color: #00262a; } .kayanYazi .swiper-slide .title::after { content: ""; background: url(/d/r/asteriks.png) no-repeat; position: absolute; top: 50%; right: 60px; width: 32px; height: 32px; transform: translateY(-50%); background-size: cover } /********/ .patlayanHv { position: relative; z-index: 1; overflow: hidden; } .patlayanHv:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--tema-renk1); transform: scale(0); transition: 0.3s; border-radius: 5px; z-index: -1; } .patlayanHv:hover:before { transform: scale(1.1); } .patlayanHv:hover { color: #fff !important; border-color: var(--tema-renk1) !important; } /*********/ .popup99, .popup99 a.git99 { width: 100%; height: 100% } .popup99 { padding: 50px 10px; position: fixed; left: 50%; z-index: 1000000; background: rgba(0,0,0,.6) } .popup99 { text-align: center } .popup99 a.git99 img { max-width: 100%; max-height: 100% } .popup99 a.git99:hover { opacity: 1 } .popup99 a.kapat99 { color: #fff; font-size: 35px; position: absolute; left: 50%; top: 10px } .popup99 img { max-height: 100% } .popup99 a.git99, .popup99 img { display: inline-block } .popup99 { top: 50%; transform: translate(-50%,-50%) } .popup99 a.git99 { position: relative } /********/ .contact-area { background-color: #121212; position: relative; z-index: 1; overflow: hidden; } .contact-area .shape-1 { position: absolute; inset-inline-end: -6%; top: -45%; z-index: -1; width: 440px; } .contact-area .shape-1 img { max-width: 100%; } .contact-area-inner { display: grid; gap: 30px 60px; grid-template-columns: auto auto; align-items: center; justify-content: space-between; padding-top: 100px; padding-bottom: 100px; } .section-title { font-size: 46px; margin-top: -13px; font-family: var(--font_beatricetrial); font-weight: 500; line-height: 1.08; color: #ffffff; max-width: 630px; } .contact-area .section-content .text-wrapper { margin-top: 27px; } .contact-area .section-content .text { line-height: 1.41; font-weight: 400; font-size: 18px; max-width: 600px; color: #999999; } .wc-btn-group { display: flex; width: fit-content; } .contact-area .moreContact { font: 500 16px var(--icerik-fontu); background: #fff; color: var(--tema-renk1); display: inline-block; padding: 15px 30px 15px 45px; border: 0; text-transform: capitalize; z-index: 1; position: relative; border-radius: 40px; transition: all 0.3s ease-in-out; display: flex; align-items: center; justify-content: space-between; gap: 14px; } .contact-area .moreContact i { display: flex; align-items: center; justify-content: center; } .contact-area .moreContact i svg { width: 22px; height: auto; transform: rotate(230deg); } .contact-area .moreContact i svg path { stroke: currentColor; } /**************/ .deveTab a.aktif { color: #c81518 } .tabcontent { display: none; padding: 6px 12px; border: 1px solid #ccc; border-top: none } .aktifTab { display: block } .urunTab { margin: 30px 0px; } .urunTab .bilgi { line-height: 30px; font-size: 15px; color: #111; padding: 30px 15px; background: transparent; border: none; } .urunTab .bilgi h2 { margin: 0 0 15px 0; font-size: 18px; font-weight: 600 } .urunTab .deveTab { border-bottom: 1px solid #f2f2f2; position: relative; } .urunTab .deveTab a { border-radius: 0; font-size: 14px; padding: 10px 15px; background: transparent; display: inline-block; margin-right: 0; letter-spacing: .5px; font-weight: 600; } .urunTab .deveTab a.aktif { color: var(--tema-renk1); background: transparent; border-bottom: 2px solid var(--tema-renk1); } /****/ iframe { max-width: 100% } /****/ .fotorama { max-width: 800px; margin: 0 auto } /*****************/ .katicerik { margin: 50px 0; line-height: 25px; font-size: 15px; color: #58585a } /*****/ #faqTop { padding: 70px 0; display: block; } #faqTop .faqForm { } #faqTop .faqForm .formtitle { font-weight: 700; text-transform: uppercase; font-size: 25px; line-height: 1.2em; word-wrap: break-word; color: #222; margin: 0 0 15px; } #faqTop .faqForm .satir { margin-bottom: 15px; } #faqTop .faqForm .satir textarea, #faqTop .faqForm .satir input { position: relative; display: inline-block; width: 100%; vertical-align: top; cursor: pointer; outline: 0; padding: 0; transition: color .2s ease-out,background-color .2s ease-out,border-color .2s ease-out; background-color: transparent; color: #222; border-color: #222; margin: 0 !important; font: 400 15px var(--icerik-fontu); line-height: 36px; border: none; border-bottom: 1px solid #222; } #faqTop .faqForm .satir textarea::placeholder, #faqTop .faqForm .satir input::placeholder { color: #222; font: 400 15px var(--icerik-fontu); } #faqTop .faqForm .satir.guvenlik { display: flex; align-items: center; justify-content: space-between; margin: 15px 0; } #faqTop .faqForm .satir.guvenlik label { width: 28% !important; position: relative !important; transform: none !important; opacity: 1 !important; padding: 0 !important; margin: 0 10px 0 0 !important; } #faqTop .faqForm .satir.guvenlik label img { width: 100%; } #faqTop .faqForm .satir.guvenlik input { width: 70% !important; margin: 0; } #faqTop .faqForm .satir button { font: 700 15px var(--baslik-fontu); line-height: 20px; position: relative; display: inline-flex; vertical-align: middle; width: auto; margin: 0; text-decoration: none; border-radius: 0; outline: 0; padding: 11px 36px; cursor: pointer; background-color: transparent; border: 1px solid #222; background-image: linear-gradient(0deg,rgb(255 255 255) 0,rgb(255 255 255) 100%),linear-gradient(0deg,rgb(0 0 0 / 0%) 0,rgb(0 0 0 / 0%) 100%); transition: background-size .58s cubic-bezier(.45,.8,.02,.91),color .2s ease-out,border-color .2s ease-out; background-position: 100% calc(100% + 2px),center; background-size: 100% 0,100% 100%; background-repeat: no-repeat; color: #222; border-color: #222; margin-top: 25px !important; } #faqTop .faqForm .satir button:hover { background-position: 100% 0,center; background-size: 100% 100%,100% 100%; color: #121212; } #faqTop .faqContact { margin: 45px 0; } #faqTop .faqContact .kap0 { margin: 15px 0; } #faqTop .faqContact .kap0:before { content: "\26AC" } #faqTop .faqContact .kap0 span { margin-bottom: 15px; font: 500 16px var(--icerik-fontu); color: #222; background-image: linear-gradient(#222, #222), linear-gradient(#222, #222); display: inline; background-size: 0% 1px, 0 1px; background-position: 100% 100%, 0 82%; background-repeat: no-repeat; transition: background-size 0.4s linear; margin-left: 10px; } #faqTop .faqContact .kap0 a { } #faqTop .faqContact .kap0 span:hover { background-size: 0% 1px, 100% 1px; } #faqTop .kapsul { } #faqTop .kapsul a.link .item:before { display: none; } #faqTop .kapsul .item { padding: 0; border: none; } #faqTop .kapsul .item h3 { margin: 0 } #faqTop .kapsul .item a { color: #222; padding: 28px 34px 30px 0; position: relative; color: #222; margin: 0; transition: padding .2s ease-out; cursor: pointer; border-top: 1px solid #222; font: 400 18px var(--baslik-fontu); text-transform: uppercase; line-height: 30px; width: 100%; display: block } #faqTop .kapsul .item h3 a:before { content: "+"; position: absolute; right: 0; font-size: 43px; font-weight: 400; top: 50%; transform: translateY(-50%); } #faqTop .kapsul .item h3 a.active:before { content: "-"; top: 36%; } #faqTop .kapsul .item .cevap { color: #222; padding: 9px 8% 20px 0; margin: 0; position: relative; display: inline-block; width: 100%; vertical-align: top; font: 400 16px var(--icerik-fontu); line-height: 25px; } /**********/ .tabloyama { overflow-x: auto; margin-right: -20px; padding-bottom: 20px; margin: 25px 0; } /**************/ .yildizOn { /* margin: 0 auto; */ background: url(/d/r/yildiz-pasif.png); position: relative; width: 100px; height: 16px; display: block; } .yildizOn span { position: absolute; left: 0; top: 0; width: 100px; height: 17px; background: url(/d/r/yildiz.png); } /*******/ .icerikDet { padding: 50px 0 75px; } .icerikDet .kisaOzet { font-size: 18px; font-style: italic; font-weight: 500; line-height: 30px; letter-spacing: 1px; } .icerikDet .icerik { font-size: 16px; line-height: 27px; letter-spacing: 1px; color: #333 } .icerikDet .icerik p { margin: 10px 0; } .icerikDet .icerik ul { list-style: circle; margin-left: 25px; line-height: 35px; } .icerikDet .icerik ul li { } .icerikDet .icerik ul li::marker { color: var(--tema-renk1) } .icerikDet .icerik a { } .icerikDet .icerik span { } /*******/ .icerikSag { padding-left: 25px !important; } .icerikSag .icerikDetsag { padding: 32px 32px 32px 32px; background: #023e302b; margin-bottom: 40px; } .icerikSag .icerikDetsag .title { color: #333; margin: 0 0 20px; font: 700 24px var(--baslik-fontu); line-height: 36px; text-transform: uppercase; } #icerikDetCat { } #icerikDetCat ul { } #icerikDetCat ul li { list-style: none; position: relative; padding-left: 16px; font-size: 18px; line-height: 1.5; margin-bottom: 16px; padding-bottom: 16px; } #icerikDetCat ul li:before { position: absolute; content: ""; left: 0; top: 12px; height: 6px; width: 6px; background-color: var(--tema-renk1); } #icerikDetCat ul li:after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background-color: rgba(72, 30, 11, 0.07); } #icerikDetCat ul li a { display: flex; justify-content: space-between; align-items: center; } #icerikDetCat ul li span { } #icerikDetCat ul li:last-child { margin-bottom: 0; padding-bottom: 0; } #icerikDetCat ul li:last-child::after { display: none } #icerikDetson { } #icerikDetson { } #icerikDetson ul { } #icerikDetson ul li { display: flex; align-items: center; margin-bottom: 20px; } #icerikDetson ul li .resim { flex: 0 0 auto; margin-right: 20px; width: 100px; height: 100px; } #icerikDetson ul li .resim img { width: 100%; height: 100%; object-fit: cover; } #icerikDetson ul li .kap { } #icerikDetson ul li .kap .baslik { } #icerikDetson ul li .kap .baslik a { margin-bottom: 13px; color: #333; font: 600 16px var(--baslik-fontu); line-height: 24px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; } #icerikDetson ul li .kap time { font: 400 14px var(--icerik-fontu); line-height: 25px; display: flex; align-items: center; color: #333; } #icerikDetson ul li .kap time i { margin-right: 5px; display: flex; align-items: center; justify-content: center; } #icerikDetson ul li .kap time i svg { fill: var(--tema-renk2); margin-top: -2px; } #icerikDetson ul li:last-child { margin-bottom: 0 } #icerikfollow { } #icerikfollow .social { display: flex; align-items: center; } #icerikfollow .social a { color: #020e27; padding: 10px; display: flex; align-items: center; justify-content: center; margin-right: 10px; background: #bfaaa3; } #icerikfollow .social a:hover { opacity: 1; background: #fbfbfb; box-shadow: 0 0 2px 2px #0000000f; } #icerikfollow .social a svg { display: block; fill: #fff; width: 20px; height: 20px; } #icerikfollow .social a:hover svg { fill: var(--tema-renk1); } #icerikfollow .social a.yout:hover svg path { fill: var(--tema-renk1); } #icerikfollow .social a.inst svg .st0 { stroke: #fff; } #icerikfollow .social a.inst:hover svg .st0 { stroke: var(--tema-renk1); } /***********/ .swiper-pagination { position: relative; bottom: initial; left: initial; margin: 15px 0 0; bottom: 0 } .swiper-pagination-bullet { width: 17px; border-radius: 2px; height: 4px } .swiper-pagination-bullet-active { width: 39px } /***********/ #kurumsalGaleri { height: 75vh; } #kurumsalGaleri .kurumsalGaleriSwiper { height: 75vh; } #kurumsalGaleri figure { width: 100%; height: 100%; overflow: hidden } #kurumsalGaleri figure img { width: 100%; height: 100%; object-fit: cover; object-position: center } /**************/ nav.icMenu { padding: 15px; background: transparent; margin-right: 30px; border: 1px solid var(--tema-renk1); } nav.icMenu a { position: relative; display: block; text-decoration: none; margin-bottom: 3px; font-size: 18px; padding: 10px 10px 10px 0; font-weight: 400; padding-left: 14px; letter-spacing: -.5px; } nav.icMenu a:hover { color: var(--tema-renk1); background: #e5e5e5; } nav.icMenu a.active { color: #fff; background: var(--tema-renk1); } nav.icMenu a.active:after { position: absolute; top: 15px; right: 15px; width: 8px; height: 8px; content: ''; margin-left: -5px; border-right: 2px solid #ffffff; border-bottom: 2px solid #ffffff; transform: rotate( -45deg); box-sizing: border-box; } /****/ .efektekle { position: relative; overflow: hidden; } .efektekle:after { content: ''; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; transition: .2s; border: 2px solid rgb(0 0 0 / 58%); clip-path: polygon(0 calc(100% - 1rem), 0 100%, 1rem 100%, 1rem 0, 0 0, 0 1rem, 100% 1rem, 100% 0, calc(100% - 1rem) 0, calc(100% - 1rem) 100%, 100% 100%, 100% calc(100% - 1rem)); box-shadow: 1px 1px #fff; z-index: 5; } .efektekle:hover:after { border-color: var(--tema-renk1); -webkit-transform: scale(.9); transform: scale(.9); } .efektekle img { transition: transform .2s,filter .4s; } .efektekle:hover img { transform: scale(1.1); } /***********/ .solHover { position: relative; z-index: 50; overflow: hidden; transition: all 750ms ease; } .solHover:before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; z-index: -1; transition: all 750ms ease; background: #272b2b; } .solHover:hover:before { width: 100% } .solHover:hover { color: #fff !important; } /**********/ .sallaHover { position: relative; overflow: hidden; padding: 10px 15px; display: inline-block; border: 1px solid currentColor; margin-top: 15px; } .sallaHover span { position: relative; color: inherit; z-index: 2; } .sallaHover:before { content: ""; position: absolute; top: -50%; left: 50%; transform: translateX(-50%); width: 150%; height: 150%; border-top-left-radius: 50%; border-top-right-radius: 50%; transition: 700ms cubic-bezier(0.52, 1.64, 0.37, 0.66); background-color: inherit; } .sallaHover::after { content: ""; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); width: 150%; height: 150%; border-bottom-left-radius: 50%; border-bottom-right-radius: 50%; background-color: #fff; transition-duration: 700ms; transition-timing-function: cubic-bezier(0.52, 1.64, 0.37, 0.66); } .sallaHover:hover { color: #1c1a1d !important; } .sallaHover:hover:before { top: 100%; } .sallaHover:hover:after { bottom: -50%; } /********/ .resimZoomla { overflow: hidden; } .resimZoomla figure { overflow: hidden } .resimZoomla img { transform: scale(1); transition: all 750ms ease; } .resimZoomla:hover img { transform: scale(1.2); } /**********/ .sagcontainer { padding-left: 2%; } /**********/ .addDecor { position: relative; padding-bottom: 50px; } .addDecor:after { content: ""; position: absolute; background: url(/d/r/decor.png); width: 101px; height: 29px; bottom: 0; left: 50%; transform: translateX(-50%); } /**********/ .akGel.aos-animate:before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; right: 0; z-index: 15; background: repeating-linear-gradient(#868686, #fff 6.25%), linear-gradient(#000 33.3%, grey 0, #fff 66.7%) 0/100% 305%; background-blend-mode: multiply; background-position: 0 0; filter: contrast(999); mix-blend-mode: screen; animation: pxl_blinds_staggered 1.5s linear alternate; } @keyframes pxl_blinds_staggered { 0%, 25% { background-position: 0 100%; } 75%, 100% { background-position: 0 0; } } /**********/ #oncekiSonraki { padding: 75px 0px 75px 0px; border-top: 1px solid #cbcbcb; } #oncekiSonraki .row { } #oncekiSonraki a { width: fit-content; display: block; } #oncekiSonraki .cl4:last-child a { margin: 0 0 0 auto; } #oncekiSonraki .item { display: flex; align-items: center; gap: 25px; transition: .4s ease; } #oncekiSonraki .item .icon { width: 75px; height: 75px; display: flex; align-items: center; justify-content: center;; transition: .4s ease; border: 1px solid #e9e9e9; flex-shrink: 0; } #oncekiSonraki .item .icon svg { fill: #b3b3b3;; transition: .4s ease; } #oncekiSonraki .item.prev .icon svg { transform: rotate(-180deg); } #oncekiSonraki .item.next { justify-content: flex-end; } #oncekiSonraki .item .text { } #oncekiSonraki .item .text .tit { font: 400 15px var(--baslik-fontu); margin: 0 0 10px; } #oncekiSonraki .item .text .cont { font: 500 16px var(--baslik-fontu); line-height: 25px;; transition: .4s ease; } #oncekiSonraki .item:hover .text .cont { color: var(--tema-renk1) } #oncekiSonraki .item:hover .icon { border-color: #272727; } #oncekiSonraki .item:hover .icon svg { fill: #272727; } /***************/ #blog .swiper-button-next, #blog .swiper-button-prev { width: 40px; height: 40px; right: 0; background: #e1e1e1; left: initial; top: 50%; transition: all 750ms ease; } #blog .swiper-button-next { } #blog .swiper-button-prev { right: 50px; } #blog .swiper-button-prev:after { content: '\276E'; font-size: 22px; color: var(--tema-renk1); } #blog .swiper-button-next:after { content: '\276F'; font-size: 22px; color: var(--tema-renk1); } #blog .swiper-button-next:hover, #blog .swiper-button-prev:hover { border-radius: 50px; background: var(--tema-renk2); color: #fff; } #blog .swiper-button-prev:hover:after, #blog .swiper-button-next:hover:after { color: #fff; } /*******/ #contUs { } #contUs figure { height: 100%; width: 100%; } #contUs figure img { height: 100%; width: 100%; object-fit: cover; } #contUs .item { padding: 75px 100px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; height: 100%; background: #f0f6f7; } #contUs .item .kapsul { margin: 0 0 30px; } #contUs .item .kapsul .title { font: 400 19px var(--baslik-fontu); line-height: 21px; color: var(--tema-renk1); margin: 0 0 20px; } #contUs .item .kapsul .subtitle { font: 400 58px var(--baslik-fontu); line-height: 58px; color: var(--tema-renk1); } #contUs .item form { width: 100%; } #contUs .item form .adKap { } #contUs .item form .satir { display: inline-block; vertical-align: top; position: relative; z-index: 20; min-height: 1px; padding-left: 0; padding-right: 30px; padding-bottom: 21px; width: 100%; } #contUs .item form input, #contUs .item form textarea { width: 100%; background: none; border: none; border-bottom: 1px solid #8c9198; padding: 10px 0; font: 400 14px var(--icerik-fontu); color: #8c9198; } #contUs .item form input::placeholder, #contUs .item form textarea::placeholder { font: 400 14px var(--icerik-fontu); color: #8c9198; } #contUs .item form button { cursor: pointer; border-radius: 0; white-space: nowrap; height: auto; max-width: 100%; border-color: var(--tema-renk1); background: var(--tema-renk1); border-width: 0 !important; font: 400 18px var(--baslik-fontu); color: #fff; line-height: 22px; padding: 18px 35px; } #contUs .item .satir.guvenlik { display: flex; align-items: center; justify-content: space-between; } #contUs .item .satir.guvenlik label { padding-left: 0 !important; height: 100%; width: 20%; } #contUs .item .satir.guvenlik label img { } #contUs .item .satir.guvenlik input { margin: 0 0 0 10px; width: 80%; } /*******/ .sagSolOk { transition: transform .6s 125ms cubic-bezier(.1,.75,.25,1); position: relative; margin-left: -23px !important; display: inline-flex !important; align-items: center; gap: 10px; } .sagSolOk .btn-icon { margin-left: 6px; position: relative; transition: opacity .4s .25s, transform .6s .25s; transition-timing-function: cubic-bezier(.1,.75,.25,1); line-height: 0; z-index: 3; } .sagSolOk .btn-icon + .btn-icon { order: -2; opacity: 0; transition-delay: 0s; margin-left: 0; -webkit-transform: translateX(-10px); transform: translateX(-10px); } .sagSolOk:hover .btn-icon { transition-delay: 0s; transform: translateX(10px); opacity: 0; } .sagSolOk:hover .btn-icon + .btn-icon { opacity: 1; transform: translateX(0); transition-delay: 225ms; } .sagSolOk:hover { transition-delay: .1s; transform: translateX(23px); } /******/ .circ_bg { margin-top: 32px; flex-direction: column; justify-content: flex-start; align-items: flex-start; background-color: transparent; border: 1px solid #000000; border-radius: 30px; position: relative; display: inline-flex; vertical-align: middle; width: auto; text-decoration: none; outline: 0; height: 32px; line-height: 30px; overflow: hidden; font-weight: 500; color: #000000; } .circ_bg .circles { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; position: absolute; right: -1px; top: -1px; border: 1px solid currentColor; border-radius: 50%; color: #000000; transition: all 0.4s ease-in-out; } .circ_bg .circles:before { content: ''; position: absolute; width: 6px; height: 6px; border-radius: 50%; background: currentColor; top: calc(50% - 3px); left: calc(50% - 3px); } .circ_bg .circle_f { right: auto; left: -100%; } .circ_bg .circle_f:before { } .circ_bg .circle_n { } .circ_bg .circle_n:before { } .circ_bg .text { margin: 0 45px 0 20px; color: #000000; transition: all 0.4s ease-in-out; } .circ_bg:hover { color: #000000; } .circ_bg:hover .circle_f { left: -1px; } .circ_bg:hover .text { margin: 0 20px 0 45px; } .circ_bg:hover .circle_n { right: -100%; } /*******/ .rolling-text { display: inline-block; overflow: hidden; line-height: 28px; height: 28px; } .rolling-text:hover .letter, .rolling-text.play .letter { -webkit-transform: translateY(-100%); -ms-transform: translateY(-100%); transform: translateY(-100%); } .rolling-text .letter { display: inline-block; -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.76, 0, 0.24, 1); transition: -webkit-transform 0.5s cubic-bezier(0.76, 0, 0.24, 1); -o-transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1); transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1); transition: transform 0.5s cubic-bezier(0.76, 0, 0.24, 1), -webkit-transform 0.5s cubic-bezier(0.76, 0, 0.24, 1); } .letter:nth-child(1) { -webkit-transition-delay: 0s; -o-transition-delay: 0s; transition-delay: 0s; } .letter:nth-child(2) { -webkit-transition-delay: 0.015s; -o-transition-delay: 0.015s; transition-delay: 0.015s; } .letter:nth-child(3) { -webkit-transition-delay: 0.03s; -o-transition-delay: 0.03s; transition-delay: 0.03s; } .letter:nth-child(4) { -webkit-transition-delay: 0.045s; -o-transition-delay: 0.045s; transition-delay: 0.045s; } .letter:nth-child(5) { -webkit-transition-delay: 0.06s; -o-transition-delay: 0.06s; transition-delay: 0.06s; } .letter:nth-child(6) { -webkit-transition-delay: 0.075s; -o-transition-delay: 0.075s; transition-delay: 0.075s; } .letter:nth-child(7) { -webkit-transition-delay: 0.09s; -o-transition-delay: 0.09s; transition-delay: 0.09s; } .letter:nth-child(8) { -webkit-transition-delay: 0.105s; -o-transition-delay: 0.105s; transition-delay: 0.105s; } .letter:nth-child(9) { -webkit-transition-delay: 0.12s; -o-transition-delay: 0.12s; transition-delay: 0.12s; } .letter:nth-child(10) { -webkit-transition-delay: 0.135s; -o-transition-delay: 0.135s; transition-delay: 0.135s; } .letter:nth-child(11) { -webkit-transition-delay: 0.15s; -o-transition-delay: 0.15s; transition-delay: 0.15s; } .letter:nth-child(12) { -webkit-transition-delay: 0.165s; -o-transition-delay: 0.165s; transition-delay: 0.165s; } .letter:nth-child(13) { -webkit-transition-delay: 0.18s; -o-transition-delay: 0.18s; transition-delay: 0.18s; } .letter:nth-child(14) { -webkit-transition-delay: 0.195s; -o-transition-delay: 0.195s; transition-delay: 0.195s; } .letter:nth-child(15) { -webkit-transition-delay: 0.21s; -o-transition-delay: 0.21s; transition-delay: 0.21s; } .letter:nth-child(16) { -webkit-transition-delay: 0.225s; -o-transition-delay: 0.225s; transition-delay: 0.225s; } .letter:nth-child(17) { -webkit-transition-delay: 0.24s; -o-transition-delay: 0.24s; transition-delay: 0.24s; } .letter:nth-child(18) { -webkit-transition-delay: 0.255s; -o-transition-delay: 0.255s; transition-delay: 0.255s; } .letter:nth-child(19) { -webkit-transition-delay: 0.27s; -o-transition-delay: 0.27s; transition-delay: 0.27s; } .letter:nth-child(20) { -webkit-transition-delay: 0.285s; -o-transition-delay: 0.285s; transition-delay: 0.285s; } .letter:nth-child(21) { -webkit-transition-delay: 0.3s; -o-transition-delay: 0.3s; transition-delay: 0.3s; } @keyframes roted { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /*******/ #kurumsal { padding: 165px 0 65px; } #kurumsal .item { justify-content: space-between; display: flex; gap: 20px 40px; margin: 35px 0; } #kurumsal .item .baslik { position: relative; margin-top: 4px; font-size: 16px; line-height: 1; display: inline-block; text-transform: uppercase; color: #121212; height: fit-content; padding-left: 106px; } #kurumsal .item .baslik:after { position: absolute; content: ""; width: 80px; height: 1px; background-color: currentColor; top: 50%; transform: translateY(-50%); left: 0; } #kurumsal .item .metin { } #kurumsal .item .metin .kisaOzet { padding: 0; margin: 0; line-height: 1.41; font-weight: 400; font-size: 18px; color: #555555; width: 850px; max-width: 100%; } #kurumsal .item .metin .icerik { padding: 0; margin: 0; line-height: 1.41; font-weight: 400; font-size: 18px; color: #555555; width: 850px; max-width: 100%; } #kurumsal .item .metin .icerik p { margin: 0 0 15px; } /*******/ #rakamlars { } #rakamlars .row { gap: 10px; } #rakamlars figure { width: 100%; height: 100%; } #rakamlars figure img { width: 100%; height: 100%; object-fit: cover; } #rakamlars .item { display: flex; gap: 10px; margin: 0 0 10px; } #rakamlars .item:last-child { margin: 0; flex-direction: row-reverse; } #rakamlars .item figure { overflow: hidden !important; height: 330px; flex: 1 1 auto; width: 50%; } #rakamlars .item figure img { width: 100%; height: 100%; object-fit: cover; } #rakamlars .item .metin { display: flex; gap: 10px; flex-direction: column; justify-content: space-between; background-color: #fbf9f9; position: relative; z-index: 1; padding: 36px 40px 22px; flex: 1 1 auto; width: 50%; } #rakamlars .item .metin:before { content: url(/d/r/img-s-46.png); position: absolute; top: 0; inset-inline-start: 0; z-index: -1; } #rakamlars .item .metin .baslik { color: #121212; font: 500 20px var(--baslik-fontu); line-height: 1.26; } #rakamlars .item .metin .numbers { color: #121212; font: 400 70px var(--icerik-fontu); line-height: 1; margin-top: 60px; } #rakamlars .item:last-child .metin { background-color: #121212; } #rakamlars .item:last-child .metin:before { content: url(/d/r/img-s-46-light.png); } #rakamlars .item:last-child .metin .baslik { color: #ffffff; } #rakamlars .item:last-child .metin .numbers { color: #ffffff; } /*******/ #nelerYapiyoz { position: relative; z-index: 1; padding-top: 100px; padding-bottom: 100px; } #nelerYapiyoz .row { gap: 50px; align-items: center; } #nelerYapiyoz .kapsul { } #nelerYapiyoz .kapsul .baslik { position: relative; font-size: 16px; line-height: 1; display: inline-block; text-transform: uppercase; color: #121212; padding-inline-start: 140px; } #nelerYapiyoz .kapsul .baslik:before { position: absolute; content: ""; width: 80px; height: 1px; background-color: currentColor; inset-inline-start: 0; top: 50%; transform: translateY(-50%); } #nelerYapiyoz .kapsul .baslik:after { position: absolute; content: ""; width: 1px; height: 75px; background-color: currentColor; inset-inline-start: 57px; bottom: -15px; } #nelerYapiyoz .metin { } #nelerYapiyoz .metin .kisaOzet { font: 600 55px var(--baslik-fontu); color: #121212; margin-top: -15px; line-height: 1.08; } #nelerYapiyoz .metin .icerik { margin-top: 52px; padding: 0; line-height: 1.41; font-weight: 400; font-size: 18px; color: #555555; max-width: 630px; } #nelerYapiyoz .kap { margin-top: 43px; display: flex; gap: 20px 40px; max-width: 460px; justify-content: space-between; } #nelerYapiyoz .kap .item { display: grid; gap: 18px; grid-template-columns: 30px auto; } #nelerYapiyoz .kap .item figure { } #nelerYapiyoz .kap .item figure img { display: inline-block; width: 30px; height: 30px; object-fit: contain; } #nelerYapiyoz .kap .item .k0 { } #nelerYapiyoz .kap .item .k0 .numbers { font: 400 36px var(--baslik-fontu); line-height: .85; color: #121212; } #nelerYapiyoz .kap .item .k0 .baslik { padding: 0; margin: 0; line-height: 1.41; font-weight: 400; font-size: 18px; color: #555555; max-width: 630px; margin-top: 11px; } #nelerYapiyoz .nelerGaleri { display: flex; gap: 20px 50px; justify-content: center; margin-top: 43px; } #nelerYapiyoz .nelerGaleri figure { } #nelerYapiyoz .nelerGaleri figure img { } /*******/ #basitPro { } #basitPro figure { height: 100%; width: 100%; overflow: hidden; } #basitPro figure img { width: 100%; height: 100%; object-fit: cover; } #basitPro .item { padding: 100px 80px; position: relative; z-index: 1; height: 100%; } #basitPro .item .bg { position: absolute; width: 100%; height: 100%; top: 0; inset-inline-start: 0; z-index: -1; } #basitPro .item .bg:after { position: absolute; content: ""; width: 100%; height: 100%; background-color: rgba(18, 18, 18, .85); top: 0; inset-inline-start: 0; } #basitPro .item .bg img { width: 100%; height: 100%; object-fit: cover; } #basitPro .item .metin { } #basitPro .item .metin .baslik { max-width: 440px; color: #ffffff; margin-top: -15px; font: 500 32px var(--baslik-fontu); line-height: 1.4; } #basitPro .item .metin .kisaOzet { margin-top: 123px; width: 440px; color: #999999; font: 400 20px var(--icerik-fontu); line-height: 1.35; max-width: 100%; } #basitPro .item .metin .more { margin-top: 42px; text-transform: uppercase; border-radius: 0 30px 0 30px; padding: 22px 38px; transition: all .3s; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; gap: 30px; white-space: nowrap; border: 1px solid #fff; background-color: #ffffff; color: #121212; font: 600 14px var(--icerik-fontu); } #basitPro .item .metin .more svg { transform: rotate(-135deg); } /*******/ #kurumsalYorums { padding-top: 100px; padding-bottom: 100px; } #kurumsalYorums .item { margin: 0 auto; padding: 0 80px; text-align: center; } #kurumsalYorums .item .quote { } #kurumsalYorums .item .quote svg { width: 66px; height: auto; } #kurumsalYorums .item .icerik { margin-top: 53px; font-size: 30px; line-height: 1.38; font-weight: 300; color: #121212; } #kurumsalYorums .item .metin { margin-top: 44px; } #kurumsalYorums .item .metin .baslik { font-size: 18px; line-height: 1; display: inline-block; color: #121212; } #kurumsalYorums .item .metin .kisaOzet { font-size: 18px; display: inline-flex; color: #555555; position: relative; gap: 5px; } #kurumsalYorums .item .metin .kisaOzet:before { content: "-"; } #kurumsalYorums .swiper-button-next, #kurumsalYorums .swiper-button-prev { color: #555555; } /*******/ #kurumsalMerak { padding-bottom: 100px; } #kurumsalMerak figure { position: relative; width: 100%; height: 100%; } #kurumsalMerak figure img { width: 100%; height: 100%; object-fit: cover; } #kurumsalMerak .kap { padding: 73px 60px 80px; background-color: #121212; } #kurumsalMerak .kap .title { color: #ffffff; margin-top: -15px; font: 500 30px var(--baslik-fontu); line-height: 1.08; } #kurumsalMerak .kap .faqKapp { margin-top: 47px; } #kurumsalMerak .kap .item { border-bottom: 1px solid rgba(255, 255, 255, .08); background-color: rgba(0, 0, 0, 0); border-radius: 0px; border-top: 1px solid rgba(255, 255, 255, .08); } #kurumsalMerak .kap .item h3 { font: 400 36px var(--baslik-fontu); line-height: 1.08; margin: 0; } #kurumsalMerak .kap .item h3 a { color: #ffffff; background-color: rgba(0, 0, 0, 0); cursor: pointer; position: relative; display: flex; align-items: baseline; width: 100%; font: 400 19px var(--baslik-fontu); line-height: 29px; padding: 18px 0; gap: 15px; } #kurumsalMerak .kap .item h3 a:after { content: "+"; color: #ffffff; background-image: none; line-height: 1; width: auto; height: auto; font-size: 25px; } #kurumsalMerak .kap .item h3 a.active:after { content: "-"; } #kurumsalMerak .kap .item .cevap { display: none; color: #999999; font: 400 18px var(--icerik-fontu); line-height: 1.44; padding: 0 0 24px; } #kurumsalMerak .kap .item .cevap strong { color: #fff; letter-spacing: .5px; } /*******/ #nedenBiz { position: relative; overflow: hidden; padding: 75px 0; } #nedenBiz .kapsul { display: flex; align-items: center; justify-content: space-between; margin-bottom: 60px; } #nedenBiz .kapsul .title { color: #000; width: 620px; max-width: 100%; font: 700 60px var(--baslik-fontu); } #nedenBiz .kapsul .title em { font-weight: 400; line-height: 100%; font-style: normal; } #nedenBiz .kapsul .seeAll { font: 500 16px var(--icerik-fontu); background: var(--tema-renk1); color: #fff; display: inline-block; padding: 15px 30px 15px 45px; border: 0; text-transform: capitalize; z-index: 1; position: relative; border-radius: 40px; transition: all 0.3s ease-in-out; display: flex; align-items: center; justify-content: space-between; gap: 14px; } #nedenBiz .kapsul .seeAll i { display: flex; align-items: center; justify-content: center; } #nedenBiz .kapsul .seeAll i svg { width: 22px; height: auto; transform: rotate(230deg); } #nedenBiz .kapsul .seeAll i svg path { stroke: currentColor; } #nedenBiz .cl4 { padding: 0 15px; } #nedenBiz .item { background: #181818; margin-bottom: 30px; padding: 30px 30px 40px; } #nedenBiz .item .sira { color: #fff; font-family: "Plus Jakarta Sans", sans-serif; font-size: 24px; font-weight: 600; line-height: 72px; text-transform: capitalize; } #nedenBiz .item figure { width: 63px; height: 63px; margin: 28px 0; } #nedenBiz .item figure img { max-width: 100%; } #nedenBiz .item .baslik { color: #121725; font-family: "Plus Jakarta Sans", sans-serif; font-weight: 600; font-size: 2rem; margin-bottom: 0; line-height: 1.2; color: #fff; font-family: "Plus Jakarta Sans", sans-serif; font-size: 26px; font-weight: 700; line-height: 72px; text-transform: capitalize; transition: all 0.3s ease-in-out; } #nedenBiz .item .icerik { color: #DDD; font-size: 17px; font-weight: 500; line-height: 28.8px; margin-bottom: 0; } /*******/ #merakEdilenler { position: relative; overflow: hidden; padding: 120px 0; } #merakEdilenler .kapsul { margin: 0 0 65px; display: flex; flex-direction: column; width: 100%; align-items: flex-start; justify-content: flex-start; vertical-align: baseline; position: relative; gap: 30px; } #merakEdilenler .kapsul .title { color: #000; font: 700 60px var(--baslik-fontu); } #merakEdilenler .kapsul .subtitle { font: 500 16px var(--icerik-fontu); color: #727272; } #merakEdilenler .kapsul .seeAll { font: 500 16px var(--icerik-fontu); background: var(--tema-renk1); color: #fff; display: inline-block; padding: 15px 30px 15px 45px; border: 0; text-transform: capitalize; z-index: 1; position: relative; border-radius: 40px; transition: all 0.3s ease-in-out; display: flex; align-items: center; justify-content: space-between; gap: 14px; } #merakEdilenler .kapsul .seeAll i { display: flex; align-items: center; justify-content: center; } #merakEdilenler .kapsul .seeAll i svg { width: 22px; height: auto; transform: rotate(230deg); } #merakEdilenler .kapsul .seeAll i svg path { stroke: currentColor; } #merakEdilenler .item { border-bottom: 1px solid #ececec; background-color: rgba(0, 0, 0, 0); border-radius: 0px; border-top: 1px solid #ececec; } #merakEdilenler .item .baslik { font: 500 18px var(--baslik-fontu); line-height: 1; color: var(--tema-renk1); text-transform: uppercase; cursor: pointer; margin: 0; } #merakEdilenler .item .baslik a { font: 500 18px var(--baslik-fontu); line-height: 1; color: var(--tema-renk1); padding: 24px 0 18px; text-transform: uppercase; display: flex; justify-content: space-between; gap: 20px; align-items: baseline; cursor: pointer; margin: 0; } #merakEdilenler .item .baslik a:after { content: "+"; color: var(--tema-renk1); background-image: none; width: auto; height: auto; font-size: 25px; } #merakEdilenler .item .baslik a.active:after { content: "-"; } #merakEdilenler .item .cevap { font: 400 16px var(--baslik-fontu); line-height: 30px; padding-bottom: 24px; color: #727272; display: none; } /*******/ #customerReview { position: relative; overflow: hidden; padding: 120px 0; } #customerReview .kapsul { margin: 0 0 65px; display: flex; flex-direction: column; width: 100%; align-items: flex-start; justify-content: flex-start; vertical-align: baseline; position: relative; gap: 30px; } #customerReview .kapsul .title { color: #000; font: 500 18px var(--baslik-fontu); display: flex; align-items: center; justify-content: flex-start; gap: 15px; } #customerReview .kapsul .title:before { content: ""; background: url(/d/r/img-s-2.png) no-repeat; background-size: contain; width: 81px; height: 36px; display: block; } #customerReview .kapsul .subtitle { color: #000; font: 700 46px var(--baslik-fontu); } #customerReview .kapsul .content { font: 500 16px var(--icerik-fontu); color: #727272; } #customerReview .kapsul .seeAll { font: 500 16px var(--icerik-fontu); background: var(--tema-renk1); color: #fff; display: inline-block; padding: 15px 30px 15px 45px; border: 0; text-transform: capitalize; z-index: 1; position: relative; border-radius: 40px; transition: all 0.3s ease-in-out; display: flex; align-items: center; justify-content: space-between; gap: 14px; } #customerReview .kapsul .seeAll i { display: flex; align-items: center; justify-content: center; } #customerReview .kapsul .seeAll i svg { width: 22px; height: auto; transform: rotate(230deg); } #customerReview .kapsul .seeAll i svg path { stroke: currentColor; } #customerReview .customerReviewSwiper { } #customerReview .k0 { background-color: #F2F2F2; padding: 0 20px; } #customerReview .item { position: relative; padding: 60px 70px; background-color: #ffffff; box-shadow: 0px 30px 200px rgba(16, 25, 56, .08); border-radius: 5px; margin: 0 50px; } #customerReview .item .quote { } #customerReview .item .quote svg { width: 55px; height: auto; position: relative; transition: all 0.3s ease-in-out; } #customerReview .item .kap0 { text-align: center; } #customerReview .item .metin { margin-top: 55px; } #customerReview .item .metin .baslik { font: 500 24px var(--icerik-fontu); line-height: 1; display: block; color: #121212; } #customerReview .item .metin .kisaOzet { display: block; color: #555555; font: 400 16px var(--icerik-fontu); } #customerReview .item .kap0 .icerik { margin-top: 38px; color: #121212; font: 400 18px var(--icerik-fontu); line-height: 1.33; } /*******/ #customerReview .oklar { display: flex; justify-content: space-between; position: absolute; top: 50%; transform: translateY(-50%); width: calc(100% + 70px); margin-inline-start: -35px; left: 0; } #customerReview .swiper-button-next, #customerReview .swiper-button-prev { cursor: pointer; width: 70px; height: 70px; border: 1px solid rgba(18, 18, 18, .15); border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 20px; color: #121212; transition: all .5s; right: 0; } #customerReview .swiper-button-next:hover, #customerReview .swiper-button-prev:hover { background: var(--tema-renk1); color: #fff; } #customerReview .swiper-button-prev { transform: rotate(180deg); left: 0; } #customerReview .swiper-button-next:after, #customerReview .swiper-button-prev:after { display: none; } #customerReview .swiper-button-next svg, #customerReview .swiper-button-prev svg { width: 24px; height: auto; position: relative; overflow: hidden; } #customerReview .swiper-button-next svg path, #customerReview .swiper-button-prev svg path { stroke: currentColor; } /*******/ #modulesCat { position: relative; overflow: hidden; margin: 50px 0; } #modulesCat .cl4 { padding: 0 15px; } #modulesCat .item { display: inline-block; position: relative; width: 100%; margin: 0 0 30px; } #modulesCat .item figure { position: relative; border-radius: 5px; overflow: hidden; transition: all .5s; height: 423px; } #modulesCat .item figure:after { position: absolute; content: ""; width: 100%; height: 100%; background-image: linear-gradient(180deg, rgba(18, 18, 18, 0) 38.85%, #121212 100%); top: 0; inset-inline-start: 0; } #modulesCat .item figure img { width: 100%; height: 100%; object-fit: cover; } #modulesCat .item figure img:first-child { position: absolute; left: 0; top: 0; right: 0; bottom: 0; transform: translateX(50%) scaleX(2); opacity: 0; filter: blur(10px); transition: all 0.4s ease-in-out; } #modulesCat .item .baslik { position: absolute; top: 0px; inset-inline-start: 0px; margin: 30px; font-size: 14px; text-transform: uppercase; line-height: 1; display: inline-block; padding: 10px 15px; border-radius: 5px; background-color: rgba(255, 255, 255, .35); color: #121212; } #modulesCat .item .metin { position: absolute; bottom: 0; overflow: hidden; padding: 30px; width: 100%; } #modulesCat .item .metin .kisaOzet { font: 600 22px var(--baslik-fontu); line-height: 1.25; color: #ffffff; transition: all .3s; width: 250px; max-width: 100%; letter-spacing: 1px; } #modulesCat .item .metin .more { text-align: center; line-height: 1.5; border-radius: 100%; display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 28px; width: 60px; height: 60px; background-color: var(--tema-renk1); color: #fff; margin-bottom: -88px; opacity: 0; transition: all .5s; } #modulesCat .item .metin .more svg { transform: rotate(-135deg); width: 24px; height: auto; } #modulesCat .item .metin .more svg path { stroke: currentColor; } #modulesCat .item:hover { } #modulesCat .item:hover figure img { } #modulesCat .item:hover figure img:first-child { transform: translateX(0) scaleX(1); opacity: 1; filter: blur(0); } #modulesCat .item:hover figure img:nth-child(2) { transform: translateX(-50%) scaleX(2); opacity: 0; filter: blur(10px); } #modulesCat .item:hover .more { margin-bottom: 0; opacity: 1; } /*******/ #katIcerik { margin: 30px 0; position: relative; overflow: hidden; } #katIcerik .icerik { font: 400 16px var(--icerik-fontu); color: #555555; } #katIcerik .icerik p:not(:first-child) { margin: 15px 0 0; } /*******/ .resimSolla figure { max-width: 100%; overflow: hidden; position: relative; height: auto; } .resimSolla figure img { border-radius: 0; width: 100%; height: 100%; position: relative; display: block; object-fit: cover; transition: all 500ms ease; } .resimSolla figure img:first-child { position: absolute; left: 0; top: 0; right: 0; bottom: 0; transform: translateX(50%) scaleX(2); opacity: 0; filter: blur(10px); transition: all 0.4s ease-in-out; } .resimSolla:hover figure img:first-child { transform: translateX(0) scaleX(1); opacity: 1; filter: blur(0); } .resimSolla:hover figure img:nth-child(2) { transform: translateX(-50%) scaleX(2); opacity: 0; filter: blur(10px); } /******/ .servicesGaleri .swiper-button-next, .servicesGaleri .swiper-button-prev { width: 42px; height: 42px; display: flex; justify-content: center; align-items: center; border-radius: 100%; font-size: 25px; z-index: 1; margin: 0 40px; cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); border: 1px solid #fff; fill: #fff; } .servicesGaleri .swiper-button-prev { transform: rotate(180deg); top: calc(50% - 21px); } .servicesGaleri .swiper-button-next:after, .servicesGaleri .swiper-button-prev:after { display: none; } .servicesGaleri .swiper-button-next svg, .servicesGaleri .swiper-button-prev svg { width: 1em; height: 1em; position: relative; overflow: hidden; transition: all 0.3s ease-in-out; } /*******/ #projectCat { position: relative; overflow: hidden; margin: 35px 0; } #projectCat .cl3:nth-child(2n) { margin: 30px 0 0; } #projectCat a { margin: 10px 10px 30px; display: block; } #projectCat .item { width: 100%; height: auto; display: flex; flex-direction: column; } #projectCat .item figure { position: relative; display: block; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center center; background-size: cover; margin: 0; overflow: hidden; } #projectCat .item figure img { width: 100%; height: 100%; position: relative; display: block; object-position: center; object-fit: cover; transform: scale(1.0); transition: all .5s cubic-bezier(.785, .135, .15, .860) 0ms; } #projectCat .item .metin { padding-top: 36px; transition: all .4s ease-in-out; } #projectCat .item .metin .baslik { font-size: 32px; display: inline-block; position: relative; color: #000000; transition: .4s clip-path cubic-bezier(.32,.55,.58,.76) 0s, .4s -webkit-clip-path cubic-bezier(.32,.55,.58,.76) 0s; cursor: pointer; font-weight: 600; text-transform: lowercase; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; } #projectCat .item .metin .kisaOzet { font-size: 15px; color: #000000; padding: 0; margin: 6px 0 0 0; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; } #projectCat .item .metin .kisaOzet ul { font-size: 15px; color: #000000; padding: 0; margin: 6px 0 0 0; list-style: disc outside none; } #projectCat .item .metin .kisaOzet ul li { list-style: none; margin: 0; padding: 0; display: flex; justify-content: flex-start; align-items: center; text-transform: lowercase; } #projectCat .item .metin .kisaOzet ul li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; display: inline-flex; background: currentColor; margin-right: 10px; } /*******/ #projeDet { position: relative; overflow: hidden; margin: 35px 0; } #projeDet .metin { } #projeDet .metin .kisaOzet { color: #000000; font: 500 28px var(--icerik-fontu); line-height: 42px; margin: 0 0 25px; text-transform: lowercase; } #projeDet .metin .kisaOzet ul { display: flex; justify-content: space-between; align-items: flex-start; gap: 50px; } #projeDet .metin .kisaOzet ul li { position: relative; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; text-transform: lowercase; font-size: 60px; line-height: 65px; } #projeDet .metin .kisaOzet ul li::before { content: ''; width: 12px; height: 12px; border-radius: 50%; display: inline-flex; background: currentColor; margin-right: 10px; } #projeDet .metin .icerik { font: 500 15px var(--icerik-fontu); color: #000000; line-height: 27.75px; } #projeDet .metin .icerik h2 { font: 600 20px var(--icerik-fontu); color: #000000; } #projeDet .metin .icerik p { margin: 0 0 10px; } #projeDet .metin .icerik ul { font-size: 15px; color: #000000; padding: 0; margin: 6px 0 0 0; list-style: disc outside none; } #projeDet .metin .icerik ul li { list-style: none; margin: 0 0 10px; padding: 0; display: flex; justify-content: flex-start; align-items: center; } #projeDet .metin .icerik ul li::before { content: ''; width: 7px; height: 7px; border-radius: 50%; display: inline-flex; background: currentColor; margin-right: 10px; } /*******/ #subeCat { margin: 35px 0px; position: relative; overflow: hidden; } #subeCat .cl4 { padding: 0 15px; margin: 0 0 30px; } #subeCat .item { padding: 30px 25px; border: 1px solid #dedede; height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 25px; } #subeCat .item .konum { width: fit-content; background: #f7f7f7; padding: 10px 15px; font: 500 16px var(--icerik-fontu); letter-spacing: 1px; color: var(--tema-renk1); } #subeCat .item .baslik { font: 600 29px var(--baslik-fontu); color: var(--tema-renk1); } #subeCat .item .kap { display: flex; flex-direction: column; gap: 12px; } #subeCat .item .kap .blg { font: 500 18px var(--icerik-fontu); line-height: 26px; } #subeCat .item:hover { background: var(--tema-renk1); border-color: var(--tema-renk1); } #subeCat .item:hover .baslik { color: #f1f1f1; } #subeCat .item:hover .kap .blg { color: #f1f1f1; } /*******/ #products { position: relative; padding: 110px 0; overflow: hidden; } #products .kapsul { display: flex; padding-bottom: 80px; justify-content: space-between; align-items: flex-start; } #products .kapsul .title { color: #121212; font: 600 60px var(--icerik-fontu); line-height: 1.05; } #products .kapsul .kap { width: 650px; max-width: 100%; } #products .kapsul .subtitle { padding: 0; margin: 0 0 15px; line-height: 1.41; font-weight: 400; font-size: 18px; color: #555555; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; } #products .kapsul .more { color: #121212; text-transform: capitalize; position: relative; display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; white-space: nowrap; font: 600 14px var(--icerik-fontu); text-decoration: 2px solid #121212; } #products .item { } #products .item figure { overflow: hidden !important; } #products .item figure img { width: 100%; } #products .item .metin { padding-top: 25px; padding-bottom: 23px; border-bottom: 1px solid #121212; display: grid; gap: 10px; grid-template-columns: 55px 1fr auto; } #products .item .metin .sira { font-size: 18px; line-height: 1; } #products .item .metin .baslik { font-family: var(--font_beatricetrial); font-weight: 400; font-size: 24px; line-height: 1.25; margin: 0; color: #121212; } #products .item .metin .icon { transform: translate(-10px, 10px); opacity: 0; transition: all .5s; color: #121212; } #products .item:hover .metin .icon { transform: none; opacity: 1; } #products .item .metin .icon i { font-size: 20px; color: #121212; } #products .item .metin .icon i svg { width: 26px; height: auto; transform: rotate(226deg); } #products .item .metin .icon i svg path { stroke: currentColor; } /**************/ #branch { position: relative; padding: 110px 0; overflow: hidden; } #branch .kapsul { display: flex; padding-bottom: 80px; justify-content: space-between; align-items: flex-start; } #branch .kapsul .title { color: #121212; font: 600 60px var(--icerik-fontu); line-height: 1.05; } #branch .kapsul .kap { width: 650px; max-width: 100%; } #branch .kapsul .subtitle { padding: 0; margin: 0 0 15px; line-height: 1.41; font-weight: 400; font-size: 18px; color: #555555; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; } #branch .kapsul .more { color: #121212; text-transform: capitalize; position: relative; display: inline-flex; align-items: center; gap: 10px; padding-bottom: 4px; white-space: nowrap; font: 600 14px var(--icerik-fontu); text-decoration: 2px solid #121212; } #branch .item { padding: 30px 25px; border: 1px solid #dedede; height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 25px; } #branch .item .konum { width: fit-content; background: #f7f7f7; padding: 10px 15px; font: 500 16px var(--icerik-fontu); letter-spacing: 1px; color: var(--tema-renk1); } #branch .item .baslik { font: 600 29px var(--baslik-fontu); color: var(--tema-renk1); } #branch .item .kap { display: flex; flex-direction: column; gap: 12px; } #branch .item .kap .blg { font: 500 18px var(--icerik-fontu); line-height: 26px; } #branch .item:hover { background: var(--tema-renk1); border-color: var(--tema-renk1); } #branch .item:hover .baslik { color: #f1f1f1; } #branch .item:hover .kap .blg { color: #f1f1f1; } /**************/ #aboutUs { position: relative; background-color: #f1f1f1; overflow: hidden; padding-top: 100px; padding-bottom: 113px; } #aboutUs .item { } #aboutUs .item .metin { gap: 20px 60px; padding-bottom: 61px; display: flex; justify-content: space-between; align-items: flex-start; } #aboutUs .item .metin .title { text-transform: uppercase; color: var(--tema-renk1); font: 500 25px var(--icerik-fontu); } #aboutUs .item .metin .content { color: var(--tema-renk1); width: 890px; max-width: 100%; font: 400 55px var(--icerik-fontu); line-height: 67px; } #aboutUs .item .metin .content strong { font-weight: 700; } #aboutUs .item figure { } #aboutUs .item figure img { } #aboutUs .item .icerik { margin-top: 59px; max-width: 330px; margin-inline-start: 62%; color: #999999; line-height: 1.41; font-weight: 400; font-size: 18px; } /**************/ #blog { position: relative; overflow: hidden; padding: 120px 0; } #blog .kap { position: relative; margin-bottom: 30px } #blog .kap .title { font-size: 34px; font-weight: 600; color: #0a1a2f; margin: 0; text-align: center; } #blog .kap .cizgi { height: 3px; width: 80px; background-color: #0a1a2f; margin: 6px auto 0; border-radius: 2px; } #blog .kap .subtitle { width: 600px; max-width: 100%; margin: 16px auto 32px auto; text-align: center; line-height: 24px; } #blog .kap .seeMore { width: fit-content; margin: 15px auto 0; display: block; border: 1px solid var(--tema-renk2); padding: 10px 25px; border-radius: 5px; font: 500 18px var(--icerik-fontu); color: var(--tema-renk2) } #blog .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-column-gap: 30px; } #blog .item { position: relative; } #blog .item .kap { display: flex; /* flex-direction: column; */ padding-right: 50px; align-items: flex-start; gap: 6px; } #blog .item .kap .ay { font: 400 18px var(--baslik-fontu); position: relative; color: var(--tema-renk1); } #blog .item .kap .ay:after { content: ""; width: 25px; display: block; height: 2px; background: var(--tema-renk2); margin-top: 4px; } #blog .item .kap .gun { font: 400 45px var(--baslik-fontu); margin-top: -9px; color: var(--tema-renk2); } #blog .item figure { width: 100%; aspect-ratio: 7 / 5; background-color: #f0f0f0; border-radius: 30px; overflow: hidden; margin-bottom: 30px; } #blog .item figure img { width: 100%; height: 100%; object-fit: cover; transition: all 0.6s ease !important; } #blog .item .metin { padding: 0 0 0 10px; } #blog .item .metin .baslik { font: 400 22px var(--baslik-fontu); color: #000; line-height: 29px; margin: 0; transition: .4s ease; width: 300px; padding-bottom: 10px; max-width: 100%; } #blog .item .baslik span { background-repeat: no-repeat; background-image: linear-gradient(transparent calc(100% - 2px),var(--tema-renk1) 2px); transition: .6s cubic-bezier(.215,.61,.355,1); background-size: 0 96%; } #blog .item:hover .baslik span { background-size: 100% 96%; } #blog .item .metin .kisaOzet { position: relative; font: 400 16px var(--icerik-fontu); color: #454545; line-height: 30px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; } #blog .item .metin .more { position: relative; font: 400 18px var(--icerik-fontu); color: #464646; line-height: 30px; padding-top: 30px; display: flex; align-items: center; gap: 10px; transition: .4s ease; width: fit-content; } #blog .item .metin .more i { display: flex; align-items: center; justify-content: center; } #blog .item .metin .more i svg { transition: .4s ease; transform: translateX(0); } #blog .item .metin .more i svg path { fill: #464646; } #blog .item .metin .more:hover i svg { transform: translateX(5px); } #blog .item .metin .baslik:hover { color: var(--tema-renk1) } #blog .item figure:hover img { transform: scale(2); } /*******/ #katalog { background: #eee; margin: 60px var(--sagsolbosluk) 0 var(--sagsolbosluk); padding: 120px 40px 120px 40px; border-radius: 8px; } #katalog .row { align-items: center; } #katalog .item { padding: 0 15px; flex: 0 0 50%; } #katalog figure { padding: 0 10px; } #katalog figure img { } #katalog .metin { } #katalog .metin .baslik { color: var(--tema-renk1); margin: 0; margin-bottom: 20px; font: 600 36px var(--baslik-fontu); } #katalog .metin .icerik { color: #252525; margin-bottom: 20px; font: 400 16px var(--icerik-fontu); line-height: 30px; } #katalog .metin a.devamiGor { color: var(--tema-renk1); padding: 14px 0; display: flex; align-items: center; gap: 0 10px; width: fit-content; font: 500 16px var(--baslik-fontu); } #katalog .metin a.devamiGor svg { } #katalog .metin a.devamiGor svg path { fill: currentColor } /**************/ .isik { position: relative } .isik:before { background: radial-gradient( 60vh circle at calc((var(--x) + .5) * 100%) calc((var(--y) + .5) * 100%), hsla(0, 0%, 100%, .25), transparent 25% ); border-radius: inherit; content: ""; height: 100%; left: 0; opacity: 0; position: absolute; top: 0; transition: opacity .5s cubic-bezier(.104,.204,.492,1) 0s; width: 100%; z-index: 1; } /******************************/ .ai-era-app { --bg-color: #F7F7F2; --text-color: #0D231F; --secondary-text: #4b5563; color: var(--text-color); margin: 0; padding: 80px 0; box-sizing: border-box; overflow-x: hidden; -webkit-font-smoothing: antialiased; background: #fff; } .ai-era-app * { box-sizing: border-box; margin: 0; padding: 0; } .ai-era-app #row2 p { display: inline-block } .ai-era-app .page-wrapper { height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: sticky; top: 0; } .ai-era-app .content-main { max-width: 80rem; width: 100%; text-align: center; position: relative; z-index: 10; } .ai-era-app .hero-text { line-height: 1.1; letter-spacing: -0.02em; white-space: nowrap; font-weight: 300; margin-bottom: 3rem; font-size: 3rem; opacity: 0; transform: translateY(30px); animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; } @keyframes fadeInUp { to { opacity: 1; transform: translateY(0); } } @media (min-width: 768px) { .ai-era-app .hero-text { font-size: 4.5rem; } } @media (min-width: 1024px) { .ai-era-app .hero-text { font-size: 90px; } } .ai-era-app .inline-image { display: inline-block; vertical-align: middle; border-radius: 12px; object-fit: cover; margin: 0 0.5rem; } .ai-era-app .img-portrait { width: 4rem; height: 5rem; box-shadow: 0 1px 2px rgba(0,0,0,0.1); } .ai-era-app .img-product { width: 6rem; height: 4rem; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); transform: rotate(-3deg); } @media (min-width: 768px) { .ai-era-app .img-portrait { width: 6rem; height: 8rem; } .ai-era-app .img-product { width: 10rem; height: 7rem; } } .ai-era-app .scroll-row { display: block; transition: transform 0.15s ease-out; will-change: transform; } .ai-era-app .description-box { width: min(705px, 100%); margin: 2rem auto 0; opacity: 0; transform: translateY(20px); animation: fadeInUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s forwards; transition: opacity 0.3s ease-out; } .ai-era-app .description-text { font-size: 1.125rem; color: var(--tema-renk1); font-weight: 400; line-height: 1.625; } @media (min-width: 768px) { .ai-era-app .description-text { font-size: 22px; } } /******************************/ .hare-scope * { margin: 0; padding: 0; box-sizing: border-box; } .hare-scope { font-family: 'Inter', -apple-system, sans-serif; background-color: #ffffff; color: #1a1a1a; line-height: 1.6; padding: 80px 40px; } .hare-container { max-width: 1200px; margin: 0 auto; } .hare-hero { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px; gap: 60px; } .hare-hero-title { flex: 1.2; } .hare-hero-title h2 { font-size: 34px; font-weight: 600; color: #0a1a2f; margin: 0; text-align: center; } .hare-card h2 span { background-repeat: no-repeat; background-image: linear-gradient(transparent calc(100% - 2px),var(--tema-renk1) 2px); transition: .6s cubic-bezier(.215,.61,.355,1); background-size: 0 96%; } .hare-card:hover h2 span { background-size: 100% 96%; } .hare-hero-title .cizgi { height: 3px; width: 80px; background-color: #0a1a2f; margin: 3px auto 0; border-radius: 2px; } .hare-hero-desc { flex: 0.8; max-width: 420px; padding-top: 15px; } .hare-hero-desc p { font-size: 1.05rem; color: #666; margin-bottom: 30px; } .hare-btn { background-color: #000; color: #fff !important; border: none; padding: 16px 45px; border-radius: 50px; font-size: 0.95rem; font-weight: 500; cursor: pointer; transition: all 0.3s ease; } .hare-btn:hover { background-color: #333; transform: translateY(-2px); } .hare-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; } .hare-card { display: flex; flex-direction: column; } .hare-card-img { width: 100%; aspect-ratio: 5 / 5; background-color: #f0f0f0; border-radius: 30px; overflow: hidden; margin-bottom: 30px; } .hare-card-img img { width: 100%; height: 100%; object-fit: cover; transition: all 0.6s ease !important; } .hare-card:hover .hare-card-img img { transform: scale(1.08); } .hare-card-content { display: flex; align-items: flex-start; gap: 20px; } .hare-card-num { font-size: 1.8rem; font-weight: 400; color: #000; line-height: 1; } .hare-card-text { flex: 1; } .hare-card-text h2 { font-size: 1.8rem; font-weight: 400; margin-bottom: 12px; line-height: 1; } .hare-card-text div { font-size: 17px; color: #585858; line-height: 1.5; } .hare-card:hover h2 { color: #5a5a5a } @media (max-width: 1024px) { .hare-hero { flex-direction: column; margin-bottom: 60px; } .hare-hero-desc { max-width: 100%; } .hare-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .hare-scope { padding: 40px 20px; } .hare-grid { grid-template-columns: 1fr; } .hare-card-img { aspect-ratio: 16 / 9; } } /*************/ .references-section { overflow: hidden; padding: 60px 0; background: #f0f5ff; } .mySwiperReferans .swiper-wrapper { transition-timing-function: linear !important; } .mySwiperReferans .swiper-slide { display: flex; align-items: center; justify-content: center; width: auto; /* Logoların kendi genişliğine göre dizilmesi için */ } .mySwiperReferans .swiper-wrapper { transition-timing-function: linear !important; } .mySwiperReferans .swiper-slide { display: flex; justify-content: center; align-items: center; } .mySwiperReferans .logo-item { max-height: 85px; max-width: 160px; width: auto; filter: grayscale(0); opacity: 1; transition: all 0.4s ease; object-fit: contain; cursor: pointer; } .mySwiperReferans .swiper-slide:hover .logo-item { filter: grayscale(1); opacity: 0.8; transform: scale(1.1); } .mySwiperReferans .swiper-slide figure { padding: 20px 0; display: flex; align-items: center; height: 85px; } /*************/ .faaliyet { padding: 100px 20px; margin: 0 auto; background: #fff; transition: all ease 1.5s } .faaliyet.active { background: var(--tema-renk1) } .faaliyet .ust-baslik-alani { margin-bottom: 30px; } .faaliyet .ust-baslik-alani h2 { font-size: 34px; font-weight: 600; color: #0a1a2f; margin: 0; text-align: center; transition: all ease 3s; } .faaliyet.active .ust-baslik-alani h2 { color: #fff; } .faaliyet .ust-baslik-alani .cizgi { transition: all ease 3s; height: 3px; width: 80px; background-color: #0a1a2f; margin: 10px auto 0; border-radius: 2px; } .faaliyet.active .ust-baslik-alani .cizgi { background-color: #fff; } .faaliyet .liste-izgarasi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 35px; } .faaliyet .kart { text-decoration: none; position: relative; border-radius: 4px; overflow: hidden; display: block; aspect-ratio: 16 / 12; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); background-color: #f8fafc; } .faaliyet figure { position: absolute; inset: 0; margin: 0; z-index: 1; overflow: hidden; } .faaliyet figure img { width: 100%; height: 100%; transition: all 0.7s ease; opacity: 1; } .faaliyet .lacivert-golge { position: absolute; inset: 0; background: linear-gradient(to top right, rgba(10, 26, 47, 0.8) 0%, rgb(10 26 47 / 53%) 50%, transparent 100%); z-index: 2; transition: opacity 0.4s ease; opacity: 0 } .faaliyet .kart:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(10, 26, 47, 0.15); } .faaliyet .kart:hover .lacivert-golge { opacity: 0.9; } .faaliyet .kart:hover figure img { transform: scale(1.08); } .faaliyet .icerik-alani { position: absolute; bottom: 0; left: 0; width: 100%; padding: 20px; z-index: 3; box-sizing: border-box; } .faaliyet .baslik { color: #ffffff; margin: 0; letter-spacing: 0.5px; text-shadow: 1px 1px 8px rgba(0, 0, 0, 0.6); transition: transform 0.4s ease; font: 600 20px var(--icerik-fontu); } h3.baslik { } .faaliyet .kart:hover .baslik { transform: translateY(-5px); } .faaliyet .alt-cizgi { width: 40px; height: 3px; background: #ffffff; margin-top: 8px; transition: all 0.4s ease; box-shadow: 0 0 10px rgba(0,0,0,0.2); } .faaliyet .kart:hover .alt-cizgi { width: 100%; } @media (max-width: 1024px) { .faaliyet .liste-izgarasi { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .faaliyet .liste-izgarasi { grid-template-columns: 1fr; } } /*************/ .outerkapsul { padding: 60px 0; /* background: radial-gradient(circle at top left, rgba(39, 194, 255, .12), transparent 28%), linear-gradient(135deg, #041325 0%, #08213d 45%, #0a2948 100%); */ } .stats-section { width: min(1280px, calc(100% - 32px)); margin: 40px auto; padding: 42px; border: 1px solid rgba(255,255,255,.08); border-radius: 28px; background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); box-shadow: 0 24px 80px rgba(0,0,0,.28); backdrop-filter: blur(8px); position: relative; background: radial-gradient(circle at top left, rgba(39, 194, 255, .12), transparent 28%), linear-gradient(135deg, #041325 0%, #08213d 45%, #0a2948 100%); } .stats-section::before, .stats-section::after { content: ""; position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(39,194,255,.18), transparent 65%); pointer-events: none; } .stats-section::before { width: 340px; height: 340px; left: -120px; top: -120px; } .stats-section::after { width: 320px; height: 320px; right: 0; bottom: -140px; } .stats-grid { display: grid; grid-template-columns: 340px 1fr; gap: 36px; align-items: start; position: relative; z-index: 1; } .stats-title { position: sticky; top: 32px; padding: 10px 18px 10px 0; } .stats-kicker { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: .24em; text-transform: uppercase; color: #27c2ff; font-weight: 700; margin-bottom: 20px; } .stats-kicker::before { content: ""; width: 46px; height: 1px; background: linear-gradient(90deg, transparent, #27c2ff); } .stats-title h2 { margin: 0; line-height: 1; font-size: clamp(44px, 3vw, 98px); font-weight: 700; letter-spacing: -.04em; text-transform: uppercase; color: #fff; } .stats-title h2 em { display: block; color: rgba(255,255,255,.9); font-style: normal } .stats-title p { margin: 22px 0 0; max-width: 260px; font-size: 15px; line-height: 1.7; color: rgba(244,247,251,.72); } .stats-list { display: grid; gap: 14px; } .stat-card { display: grid; grid-template-columns: 82px minmax(210px, 320px) 1fr; gap: 22px; align-items: center; min-height: 104px; padding: 20px 24px; border: 1px solid rgba(255,255,255,.14); border-radius: 22px; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.025)); transition: transform .25s ease, border-color .25s ease, background .25s ease; } .stat-card:hover { transform: translateY(-3px); border-color: rgba(39,194,255,.34); background: linear-gradient(180deg, rgba(39,194,255,.10), rgba(255,255,255,.03)); } .stat-icon { width: 82px; height: 82px; border-radius: 22px; display: grid; place-items: center; background: linear-gradient(180deg, rgba(39,194,255,.18), rgba(255,255,255,.04)); border: 1px solid rgba(39,194,255,.22); color: #27c2ff; box-shadow: inset 0 1px 0 rgba(255,255,255,.08); } .stat-icon svg { width: 38px; height: 38px; stroke: currentColor; } .stat-value { font-size: clamp(26px, 2vw, 44px); font-weight: 500; letter-spacing: -.04em; line-height: 1; margin-bottom: 8px; color: #fff } .stat-label { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.62); } .stat-content h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.35; font-weight: 700; color: #fff; } .stat-content p { margin: 0; color: rgba(244,247,251,.72); font-size: 14px; line-height: 1.7; max-width: 520px; } @media (max-width: 1100px) { .stats-grid { grid-template-columns: 1fr; } .stats-title { position: static; padding-right: 0; } .stats-title p { max-width: 720px; } } @media (max-width: 768px) { .stats-section { width: min(100% - 20px,100%); margin: 16px auto; padding: 24px 16px; border-radius: 22px; } .stat-card { grid-template-columns: 1fr; gap: 16px; padding: 18px; display: flex; flex-wrap: wrap; } .stat-icon { width: 64px; height: 64px; border-radius: 18px; } .stat-icon svg { width: 30px; height: 30px; } } /*************/ @media(max-width: 767px) { nav.icMenu { margin: 0 0 30px 0; } /******/ .nedirIcerik img { height: auto } .nedirIcerik h1 { font-size: 17px } .nedirIcerik ul li { padding-left: 0 } /*******/ .urunTab .etezgahTab a { padding: 10px 25px } .urunTab .bilgi { padding: 45px 15px } .urunTab { margin: 60px 0 0 } /********/ .sabit { padding: 0 10px } /****/ #formDet .kapsul .formdetay .row .satir { width: 100%; margin: 0 0 20px; } /****/ #merakEdilenler figure { margin: 0 0 30px } /****/ .sagcontainer { padding: 0 10px; } /****/ #contUs .item { padding: 75px 25px; } #contUs .item form .satir { padding: 0 0 30px; } /****/ #projects .kapsul { flex-direction: column; gap: 11px; } #projects .projeKap .kap2 .wrap { margin: 0 } /****/ #iletFormBil .adKap .cl6:first-child .satir { padding-right: 0; } #iletFormBil .adKap .cl6:last-child .satir { padding-left: 0; } /****/ #oncekiSonraki .row { display: flex; gap: 35px; flex-direction: column; } #oncekiSonraki .item .icon { width: 50px; height: 50px; } #oncekiSonraki .item.prev .icon svg { } /****/ #contUs .item .kapsul .subtitle { font-size: 44px } #customerReview figure { padding-right: 0 } /**********/ #productDet .urunBilgileri { padding: 35px 10px; } /*****/ #products .kapsul { flex-direction: column; } #products .kapsul .subtitle { font-size: 36px; padding: 25px 0; line-height: 48px; } #products .item .metin { padding: 30px; } #products .item .metin .baslik { font-size: 20px; } /****/ #merakEdilenler .item a.link h3 { font-size: 20px; padding: 0 18px 0 0; line-height: 26px; } #merakEdilenler .item a.link:before { right: 0; top: 6px; } /****/ #nedenBiz .item { width: 100%; flex-direction: column; gap: 19px; } #nedenBiz .item:nth-child(2) { margin-left: 0; } #nedenBiz .item:nth-child(3) { margin-left: 0; } /****/ #recentWorks { padding: 50px 0; } #recentWorks .kapsul { /* flex-direction: column; */ /* align-items: flex-start; */ justify-content: space-between; gap: 21px; margin: 0 0 30px; } #recentWorks .kapsul .title { font-size: 42px; } #recentWorks .kapsul .seeAll { display: none; } #recentWorks .item figure { max-height: 250px; } /****/ #services { padding: 50px 0; } #services .kapsul { justify-content: space-between; gap: 21px; margin: 0 0 30px; } #services .kapsul .title { font-size: 42px; } #services .kapsul .seeAll { display: none; } #services .wrap { padding: 0 10px } #services .item { flex-direction: column; align-items: flex-start; gap: 25px; margin: 0 0 33px; padding: 0 0 24px; } #services .kap:nth-last-child(2)::after { display: block; } /****/ #merakEdilenler { padding: 50px 0; } #merakEdilenler .kapsul { justify-content: space-between; gap: 21px; margin: 0 0 30px; } #merakEdilenler .kapsul .title { font-size: 42px; } #merakEdilenler .kapsul .seeAll { display: none; } #merakEdilenler .item { } #merakEdilenler .item .sira { margin: 0px 0px 5px 0px; } #merakEdilenler .item .baslik { font-size: 27px; line-height: 35px; } #merakEdilenler .item .baslik a { line-height: 26px; } /****/ #blog { padding: 50px 0 } #blog .kapsul { justify-content: space-between; gap: 21px; margin: 0 0 30px; } #blog .kapsul .title { font-size: 42px; } #blog .kapsul .seeAll { display: none; } /****/ #kurumsalGaleri { height: 45vh; } #kurumsalGaleri .kurumsalGaleriSwiper { height: 45vh; } /****/ #kurumsal .kurumsal_kap.hakki .item .metin .icerik { font-size: 27px; line-height: 32px; } #kurumsal .kurumsal_kap.misyoVizyo { margin: 0; padding: 0; } #kurumsal .kurumsal_kap.misyoVizyo .icerik ul { flex-direction: column; } #kurumsal .kurumsal_kap.misyoVizyo .icerik ul li { margin: 0; padding: 25px 0 40px; } #kurumsal .kurumsal_kap.temelDeger .item { flex-direction: column; } #kurumsal .kurumsal_kap.temelDeger .item figure { width: 100%; margin: 0 0 30px; } #kurumsal .kurumsal_kap.temelDeger .metin { margin: 0; } #kurumsal .kurumsal_kap.temelDeger .icerik ul li strong { font-size: 22px; } #kurumsal .kurumsal_kap.misyoVizyo .icerik ul li strong { font-size: 25px; } /****/ #servicesCat .wrap { padding: 0; } #servicesCat .item { flex-direction: column; align-items: flex-start; gap: 25px; margin: 0 0 33px; padding: 0 0 24px; } #servicesCat .kap:nth-last-child(2)::after { display: block; } /****/ #servicesDet .metin .kisaOzet { font-size: 22px; } #servicesDet .servicesGaleri { height: 45vh; } .servicesGaleri .swiper-button-next, .servicesGaleri .swiper-button-prev { margin: 0 10px; } /****/ #projectCat a { margin: 0 0 35px; } #projectCat .item figure { max-height: 250px; } /****/ #projeDet .metin .kisaOzet ul { flex-direction: column; gap: 17px; } #projeDet .metin .kisaOzet ul li { font-size: 32px; line-height: 35px; } #projeDet .metin .icerik ul li { align-items: baseline; } #projeDet .metin .icerik ul li::before { flex-shrink: 0; } /****/ #blogDet .metin .kisaOzet { font-size: 18px; line-height: 30px; } #blogDet .metin .icerik ul li { display: block; } /****/ #modules { padding: 75px 0; } #modules .kapsul { flex-direction: column; align-items: flex-start; gap: 23px; } /****/ #nedenBiz .kapsul { flex-direction: column; align-items: flex-start; gap: 23px; } #nedenBiz .kapsul .title { font-size: 38px; } /****/ #paketler .kapsul { flex-direction: column; align-items: flex-start; gap: 23px; } #paketler .kapsul .seeAll { display: none } /****/ #customerReview .item { margin: 0; padding: 30px 15px; } #customerReview .oklar { width: 91%; margin: 0 0 0 18px; top: 87%; z-index: 50; } #customerReview .swiper-button-next, #customerReview .swiper-button-prev { width: 45px; height: 45px; } #customerReview .swiper-button-next svg, #customerReview .swiper-button-prev svg { width: 16px; } /****/ .contact-area-inner { display: flex; flex-direction: column; align-items: flex-start; } /****/ #kurumsal .item .kisaOzet { font-size: 27px; line-height: 36px; text-align: left; } #kurumsal .item .metin { display: block; } #kurumsal .item .metin .baslik { font-size: 18px; margin: 0 0 26px; } /****/ #rakamlars .item, #rakamlars .item:last-child { flex-direction: column-reverse; } #rakamlars .item figure { width: 100%; } #rakamlars .item .metin { width: 100%; } /****/ #nelerYapiyoz { padding: 60px 0; } #nelerYapiyoz .kapsul { margin-bottom: 10px; } #nelerYapiyoz .kapsul .baslik:after { display: none; } #nelerYapiyoz .metin .kisaOzet { font-size: 30px; margin: 0; line-height: 37px; } #nelerYapiyoz .metin .icerik { margin-top: 30px; } /****/ #basitPro .item { padding: 60px 30px; } #basitPro .item .metin .baslik { font-size: 26px; } #basitPro .item .metin .kisaOzet { margin-top: 35px; } /****/ #kurumsalYorums { padding: 60px 0; } #kurumsalYorums .item { padding: 0; } #kurumsalYorums .item .icerik { font-size: 20px; margin-top: 31px; } #kurumsalYorums .swiper-button-next, #kurumsalYorums .swiper-button-prev { top: 95%; } #kurumsalYorums .swiper-button-next:after, #kurumsalYorums .swiper-button-prev:after { font-size: 18px; } /****/ #kurumsalMerak .kap { padding: 60px 30px; } #kurumsalMerak .kap .title { font-size: 28px; line-height: 37px; } /****/ #servicesDetOzellik .item { display: block; } #servicesDetOzellik .item .metin { display: block; margin: 0 0 32px; } #servicesDetOzellik .item .baslik { font-size: 26px; line-height: 35px; margin: 15px 0; } /****/ #servicesDetAvantaj .item { flex-direction: column; } #servicesDetAvantaj .item:nth-child(odd) { flex-direction: column; } #servicesDetAvantaj .item figure { width: 100%; } #servicesDetAvantaj .item .metin { width: 100%; } /****/ #servicesDetFaq figure { height: 45vh; } #servicesDetFaq .kap { padding: 60px 30px; } #servicesDetFaq .kap .title { font-size: 28px; line-height: 37px; } /****/ #servicesYorums .item { padding: 0; } #servicesYorums .swiper-button-next, #servicesYorums .swiper-button-prev { top: 95%; } #servicesYorums .swiper-button-next:after, #servicesYorums .swiper-button-prev:after { font-size: 18px; } /****/ #packetsDet .sag_kap { margin: 30px 0 0; } /****/ #iletTepe .metin .baslik { } #iletTepe .item { display: none; } #iletForm .kap0 { flex-direction: column; } #iletForm .iletForm { margin: 30px 0 0; } #iletForm .iletForm .kaps { display: block; } #iletForm .iletForm .satir { margin: 0 0 15px; } /****/ #katalog { padding: 60px 25px 60px 25px; } #katalog .item { padding: 15px 0; flex: 0 0 100%; } /******/ #blog .grid { grid-template-columns: repeat(1, minmax(0, 1fr)); } #blog .item .metin { padding: 30px 0; } /******/ #katalog .metin .baslik { line-height: 42px; } /************/ #oneCikanlar .item figure { width: 100%; } /************/ .ai-era-app .page-wrapper { height: 40vh; } .ai-era-app .img-product { width: 5rem; height: 3rem; } .ai-era-app .hero-text { font-size: 2rem; } .ai-era-app .description-text { font-size: 1rem; } #footer .footer-bottom-container { display: block; } #footer .footer-bottom-links { margin: 10px 0; } }