@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap"); *, *:before, *:after { box-sizing: inherit; } .text-center { text-align: center; } .color-white { color: #fff; } section.items { min-height: 60vh; } .box-container { align-items: center; display: flex; justify-content: space-around; gap: 1rem; padding: 35px 0; width: 100%; flex-wrap: wrap; } @media screen and (min-width: 1110px) { .box-container { flex-wrap: nowrap; flex-direction: row; } } .box-item { position: relative; -webkit-backface-visibility: hidden; width: 415px; margin-bottom: 35px; max-width: 100%; } .flip-box { -ms-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; perspective: 1000px; -webkit-perspective: 1000px; } .flip-box-front, .flip-box-back { background-size: cover; background-position: center; border-radius: 8px; min-height: 475px; -ms-transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1); transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1); -webkit-transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1); -webkit-backface-visibility: hidden; backface-visibility: hidden; } .flip-box-front { -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .flip-box:hover .flip-box-front { -ms-transform: rotateY(-180deg); -webkit-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .flip-box-back { position: absolute; top: 0; left: 0; width: 100%; -ms-transform: rotateY(180deg); -webkit-transform: rotateY(180deg); transform: rotateY(180deg); -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .flip-box:hover .flip-box-back { -ms-transform: rotateY(0deg); -webkit-transform: rotateY(0deg); transform: rotateY(0deg); -webkit-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; } .flip-box .inner { position: absolute; left: 0; width: 100%; padding: 60px; outline: 1px solid transparent; -webkit-perspective: inherit; perspective: inherit; z-index: 2; transform: translateY(-50%) translateZ(60px) scale(0.94); -webkit-transform: translateY(-50%) translateZ(60px) scale(0.94); -ms-transform: translateY(-50%) translateZ(60px) scale(0.94); top: 50%; } .flip-box-header { font-size: 34px; } .flip-box p { font-size: 20px; line-height: 1.5em; } .flip-box-img { margin-top: 25px; } .flip-box-button { background-color: transparent; border: 2px solid #fff; border-radius: 2px; color: #fff; cursor: pointer; font-size: 20px; font-weight: bold; margin-top: 25px; padding: 15px 20px; text-transform: uppercase; } * { margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; border: none; outline: none; scroll-behavior: smooth; font-family: "Poppins", sans-serif; } :root { --bg-color: #081b29; --second-bg-color: #112e42; --text-color: #ededed; --main-color: #00abf0; } html { font-size: 62.5%; overflow-x: hidden; } body { background: var(--bg-color); color: var(--text-color); } .header { position: fixed; top: 0; left: 0; width: 100%; padding: 2rem 9%; background: transparent; display: flex; justify-content: space-between; align-items: center; z-index: 100; transition: 0.3s; } .header.sticky { background: var(--bg-color); } .logo { position: relative; font-size: 2.5rem; color: var(--text-color); font-weight: 600; } .logo img { width: 50px; height: 50px; } .navbar { position: relative; } .navbar a { font-size: 1.7rem; color: var(--text-color); font-weight: 500; margin-left: 3.5rem; transition: 0.3s; } .navbar a:hover, .navbar a.active { color: var(--main-color); } #menu-icon { position: relative; font-size: 3.6rem; color: var(--text-color); cursor: pointer; display: none; } section { min-height: 100vh; padding: 10rem 9% 2rem; } .home { display: flex; align-items: center; padding: 0 9%; background-color: var(--bg-color); } .home-content { max-width: 60rem; z-index: 99; } .home-container { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 4rem; } .home-content h1 { position: relative; display: inline-block; font-size: 5.6rem; font-weight: 700; line-height: 1.3; } .home-content h1 span { color: var(--text-color); } .home-content .text-animate { position: relative; width: fit-content; } .home-content .text-animate h3 { font-size: 3.2rem; font-weight: 700; color: transparent; -webkit-text-stroke: 0.7px var(--main-color); background-image: linear-gradient(var(--main-color), var(--main-color)); background-repeat: no-repeat; -webkit-background-clip: text; background-position: -41rem 0; } .home.show-animate .home-content .text-animate h3 { animation: homeBgText 6s linear infinite; animation-delay: 2s; } .home-content .text-animate h3::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; border-right: 2px solid var(--main-color); z-index: -1; } .home.show-animate .home-content .text-animate h3::before { animation: homeCursorText 6s linear infinite; animation-delay: 2s; } .home-content p { position: relative; font-size: 1.6rem; margin: 2rem 0 4rem; } .btn-box { position: relative; display: flex; gap: 2rem; } .btn-box .btn { position: relative; display: inline-flex; justify-content: center; align-items: center; min-width: 15rem; background: var(--main-color); border: 0.2rem solid var(--main-color); border-radius: 0.8rem; font-size: 1.8rem; font-weight: 600; min-height: 4.5rem; text-align: center; letter-spacing: 0.1rem; color: var(--text-color); z-index: 1; overflow: hidden; transition: 0.5s; } .btn-box .btn:hover { color: var(--main-color); } .btn-box .btn:nth-child(2) { background: transparent; color: var(--main-color); } .btn-box .btn:nth-child(2):hover { color: var(--text-color); } .btn-box .btn:nth-child(2)::before { background: var(--main-color); } .btn-box .btn::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: var(--bg-color); z-index: -1; transition: 0.5s; } .btn-box .btn:hover::before { width: 100%; } .home-sci { position: absolute; bottom: 4rem; width: auto; display: flex; justify-content: space-between; gap: 1rem; } .home-sci a { position: relative; display: inline-flex; justify-content: center; align-items: center; width: 40px; height: 40px; background: transparent; border: 0.2rem solid var(--main-color); border-radius: 50%; font-size: 20px; color: var(--main-color); z-index: 1; overflow: hidden; transition: 0.5s; } .home-sci a:hover { color: var(--bg-color); } .home-sci a::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: var(--main-color); z-index: -1; transition: 0.5s; } .home-sci a:hover::before { width: 100%; } .about { display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 2rem; background: var(--second-bg-color); padding-bottom: 6rem; } .about-content-wrapper { display: flex; gap: 3rem; } .about-content { display: flex; flex-direction: column; justify-content: center; } .heading { position: relative; font-size: 5rem; margin-bottom: 3rem; text-align: center; } span { color: var(--main-color); } .about-img { position: relative; display: flex; justify-content: center; align-items: center; border-radius: 1rem; } .about-img img { width: 100%; border-radius: 1rem; transition: 0.3s all; } .about-img img:hover { transform: scale(1.02); transition: 0.3s all; } .about-content h3 { position: relative; display: inline-block; font-size: 2.6rem; } .about-content ul li { font-size: 1.5rem; margin: 2rem 0; } .about-content .detail { margin-left: 4rem; } .btn-box.btns { display: inline-block; min-width: 15rem; } .btn-box.btns a::before { background: var(--second-bg-color); } .education { display: flex; justify-content: center; align-items: center; flex-direction: column; min-height: auto; padding-bottom: 5rem; } .education .education-row { display: flex; flex-wrap: wrap; gap: 3rem; justify-content: center; } .education-row .education-column { flex: 1 1 45%; min-width: 600px; max-width: 400px; } .education-column .title { position: relative; display: inline-block; font-size: 2.5rem; margin: 0 0 1.5rem 2rem; } .education-column .education-box { position: relative; border-left: 0.2rem solid var(--main-color); } .education-box .education-content { position: relative; padding-left: 2rem; } .education-box .education-content::before { content: ""; position: absolute; top: 0; left: -1.1rem; width: 2rem; height: 2rem; background: var(--main-color); border-radius: 50%; } .education-content .content { position: relative; padding: 1.5rem; border: 0.2rem solid var(--main-color); border-radius: 0.6rem; margin-bottom: 2rem; overflow: hidden; } .education-content .content::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: var(--second-bg-color); z-index: -1; transition: 0.5s; } .education-content .content:hover::before { width: 100%; } .education-content .content .year { font-size: 1.5rem; color: var(--main-color); padding-bottom: 0.5rem; } .education-content .content .year i { padding-right: 0.5rem; } .education-content .content h3 { font-size: 2rem; } .education-content .content p { font-size: 1.6rem; padding-top: 0.5rem; } .skills { min-height: auto; padding-bottom: 7rem; background: var(--second-bg-color); } .skills h2 { display: inline-block; left: 50%; transform: translateX(-50%); } .skills .skills-row { display: flex; flex-wrap: wrap; gap: 5rem; } .skills-row .skills-column { flex: 1 1 40rem; } .skills-column .title { position: relative; display: inline-block; font-size: 2.5rem; margin: 0 0 1.5rem; } .skills-column .skills-box .vision, .skills-column .skills-box .mission { margin-top: 2rem; color: var(--main-color); } .skills-column .vision-detail, .skills-column .mission-detail { font-size: 1.5rem; } .skills-column .skills-box { position: relative; } .skills-box .skills-content { position: relative; border: 0.2rem solid var(--main-color); border-radius: 0.6rem; padding: 0.5rem 1.5rem; z-index: 1; overflow: hidden; } .skills-box .skills-content::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: var(--bg-color); z-index: -1; transition: 0.5s; } .skills-box .skills-content:hover::before { width: 100%; } .skills-content .progress { padding: 1rem 0; } .skills-content .progress h3 { font-size: 1.7rem; display: flex; justify-content: space-between; } .skills-content .progress h3 span { color: var(--text-color); } .skills-content .progress .bar { height: 2.5rem; border-radius: 0.6rem; border: 0.2rem solid var(--main-color); padding: 0.5rem; margin: 1rem 0; } .skills-content .progress .bar span { display: block; height: 100%; border-radius: 0.3rem; background: var(--main-color); } .skills-column:nth-child(1) .skills-content .progress:nth-child(1) .bar span { width: 90%; } .skills-column:nth-child(1) .skills-content .progress:nth-child(2) .bar span { width: 80%; } .skills-column:nth-child(1) .skills-content .progress:nth-child(3) .bar span { width: 65%; } .skills-column:nth-child(1) .skills-content .progress:nth-child(4) .bar span { width: 75%; } .skills-column:nth-child(2) .skills-content .progress:nth-child(1) .bar span { width: 95%; } .skills-column:nth-child(2) .skills-content .progress:nth-child(2) .bar span { width: 67%; } .skills-column:nth-child(2) .skills-content .progress:nth-child(3) .bar span { width: 85%; } .skills-column:nth-child(2) .skills-content .progress:nth-child(4) .bar span { width: 60%; } .contact { min-height: auto; padding-bottom: 7rem; } .contact h2 { display: inline-block; left: 50%; transform: translateX(-50%); } .contact form { max-width: 70rem; margin: 0 auto; text-align: center; } .contact form .input-box { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; } .contact form .input-box .input-field { position: relative; width: 49%; margin: 0.8rem 0; } .contact form .input-box .input-field input, .contact form .textarea-field textarea { width: 100%; height: 100%; padding: 1.5rem; font-size: 1.6rem; color: var(--text-color); background: transparent; border-radius: 0.6rem; border: 0.2rem solid var(--main-color); } .contact form .input-box .input-field input::placeholder, .contact form .textarea-field textarea::placeholder { color: var(--text-color); } .contact form .focus { position: absolute; top: 0; left: 0; width: 0; height: 100%; background: var(--second-bg-color); border-radius: 0.6rem; z-index: -1; transition: 0.5s; } .contact form .input-box .input-field input:focus ~ .focus, .contact form .input-box .input-field input:valid ~ .focus, .contact form .textarea-field textarea:focus ~ .focus, .contact form .textarea-field textarea:valid ~ .focus { width: 100%; } .contact form .textarea-field { position: relative; margin: 0.8rem 0 2.7rem; display: flex; } .contact form .textarea-field textarea { resize: none; } .contact form .btn-box.btns .btn { cursor: pointer; } .footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 2rem 9%; background: var(--second-bg-color); } .footer-text, .footer-iconTop { position: relative; } .footer-text p { font-size: 1.6rem; } .footer-iconTop a { position: relative; display: inline-flex; justify-content: center; align-items: center; padding: 0.8rem; background: var(--main-color); border: 0.2rem solid var(--main-color); border-radius: 0.6rem; z-index: 1; overflow: hidden; } .footer-iconTop a::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background: var(--second-bg-color); z-index: -1; transition: 0.5s; } .footer-iconTop a:hover::before { width: 100%; } .footer-iconTop a i { font-size: 2.4rem; color: var(--bg-color); transition: 0.5s; } .footer-iconTop a:hover i { color: var(--main-color); } .animate { position: absolute; top: 0; right: 0; width: 100%; height: 100%; background: var(--bg-color); z-index: 98; } .animate.home-img { width: 50%; } .logo .animate, .navbar .animate, #menu-icon .animate, .home.show-animate .animate { animation: showRight 1s ease forwards; animation-delay: calc(0.3s * var(--i)); } .animate.scroll { transition: 1s ease; transition-delay: calc(0.3s / var(--i)); animation: none; } section:nth-child(odd) .animate.scroll, .footer .animate.scroll { background: var(--second-bg-color); } .education .education-box .animate.scroll { width: 105%; } .about.show-animate .animate.scroll, .education.show-animate .animate.scroll, .skills.show-animate .animate.scroll, .contact.show-animate .animate.scroll, .footer.show-animate .animate.scroll { transition-delay: calc(0.3s * var(--i)); width: 0; } @media (max-width: 1200px) { html { font-size: 55%; } .home-container { flex-direction: column; align-items: start; gap: 4rem; } .home-video { width: 100%; height: 100%; } .home-video iframe { width: inherit; } } @media (max-width: 991px) { .header { padding: 2rem 4%; } section { padding: 10rem 4% 2rem; } .home { padding: 0 4%; } .footer { padding: 2rem 4%; } } @media (max-width: 850px) { .animate.home-img { width: 55%; } .about-content-wrapper { flex-direction: column; } .about-content-wrapper img { max-width: fit-content; } } @media (max-width: 768px) { .header { background: var(--bg-color); } #menu-icon { display: block; } .navbar { position: absolute; top: 100%; left: -100%; width: 100%; padding: 1rem 4%; background: var(--main-color); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2); z-index: 1; transition: 0.25s ease; transition-delay: 0.25s; } .navbar.active { left: 0; transition-delay: 0s; } .navbar .active-nav { position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--bg-color); border-top: 0.1rem solid rgba(0, 0, 0, 0.2); z-index: -1; transition: 0.25s ease; transition-delay: 0s; } .navbar.active .active-nav { left: 0; transition-delay: 0.25s; } .navbar a { display: block; font-size: 2rem; margin: 3rem 0; transform: translateX(-20rem); transition: 0.25s ease; transition-delay: 0s; } .navbar.active a { transform: translateX(0); transition-delay: 0.25s; } .home-imgHover { pointer-events: none; background: var(--bg-color); opacity: 0.6; } .education .education-row { flex-direction: column; } .education-column { min-width: auto !important; } } @media (max-width: 520px) { html { font-size: 50%; } .home-content h1 { display: flex; flex-direction: column; } .home-sci { position: fixed; right: 1rem; bottom: 2rem; z-index: 999; display: flex; flex-direction: column; } .home-sci .animate { animation: none !important; display: none; } .home-sci a { border: 0.2rem solid var(--bg-color); color: var(--bg-color); background-color: var(--text-color); } .home-sci a { width: 38px; height: 38px; } } @media (max-width: 462px) { .home-content h1 { font-size: 5.2rem; } .education { padding: 10rem 4% 5rem 5%; } .contact form .input-box .input-field { width: 100%; } .footer { flex-direction: column-reverse; } .footer p { margin-top: 2rem; text-align: center; } } @media (max-width: 371px) { .home { justify-content: center; } .home-content { display: flex; align-items: center; flex-direction: column; text-align: center; } .home-content h1 { font-size: 5rem; } } @keyframes homeBgText { 0%, 10%, 100% { background-position: -41rem 0; } 65%, 85% { background-position: 0 0; } } @keyframes homeCursorText { 0%, 10%, 100% { width: 0; } 65%, 78%, 85% { width: 100%; opacity: 1; } 75%, 81% { opacity: 0; } } @keyframes aboutSpinner { 100% { transform: translate(-50%, -50%) rotate(360deg); } } @keyframes showRight { 100% { width: 0; } } .home-sci { display: flex; justify-content: flex-start; gap: 10px; margin-top: 18px; } .social-btn { display: flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 500; padding: 6px 14px; border-radius: 6px; transition: all 0.25s ease; font-size: 13.5px; line-height: 1; } .social-btn i { font-size: 18px; } .social-btn.whatsapp { background-color: #25d366; color: #fff; } .social-btn.whatsapp:hover { background-color: #1ebe5d; } .social-btn.telegram { background-color: #0088cc; color: #fff; } .social-btn.telegram:hover { background-color: #0074aa; } .home-sci { display: flex; justify-content: flex-start; gap: 10px; margin-top: 18px; } .social-btn { display: flex; align-items: center; gap: 6px; text-decoration: none; font-weight: 500; padding: 6px 14px; border-radius: 6px; transition: all 0.25s ease; font-size: 13.5px; line-height: 1; } .social-btn i { font-size: 18px; } .social-btn.whatsapp { background-color: #25d366; color: #fff; } .social-btn.whatsapp:hover { background-color: #1ebe5d; } .social-btn.telegram { background-color: #0088cc; color: #fff; } .social-btn.telegram:hover { background-color: #0074aa; } .home-sci { display: flex; justify-content: center; gap: 20px; /* İki ikon arasındaki mesafeyi ayarlamak için */ } .social-icon { display: flex; justify-content: center; align-items: center; width: 50px; height: 50px; border-radius: 50%; /* Daire şeklini vermek için */ background-color: transparent; /* Arka plan rengini beyaz yapmak yerine şeffaf yapıyoruz */ color: white; /* İkon rengini beyaz yapıyoruz */ font-size: 1.6rem; transition: background-color 0.3s ease; text-decoration: none; border: 2px solid white; /* Beyaz sınır ekliyoruz */ } .social-icon:hover { background-color: rgba(255, 255, 255, 0.2); /* Hover efekti ile biraz şeffaf beyaz ekliyoruz */ } .social-icon.telegram:hover { background-color: rgba(255, 255, 255, 0.2); /* Telegram ikonunun hover efekti */ }
.home-sci {
  display: flex;
  justify-content: center;
  gap: 20px; /* İki ikon arasındaki mesafeyi ayarlamak için */
}

.social-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px; /* İkon boyutunu biraz daha büyük yapıyoruz */
  height: 60px; /* Yüksekliği aynı şekilde artırıyoruz */
  border-radius: 50%; /* Daire şeklini vermek için */
  background-color: transparent; /* Şeffaf arka plan */
  color: white; /* Beyaz ikon */
  font-size: 2rem; /* İkon boyutunu büyütüyoruz */
  transition: background-color 0.3s ease;
  text-decoration: none;
  border: 3px solid white; /* Beyaz sınır ekliyoruz ve biraz kalınlaştırıyoruz */
}

.social-icon:hover {
  background-color: rgba(255, 255, 255, 0.2); /* Hover efekti ile biraz şeffaf beyaz ekliyoruz */
}

.social-icon.telegram:hover {
  background-color: rgba(255, 255, 255, 0.2); /* Telegram hover efekti */
}