@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
@import url("./css/swiper/swiper-bundle.min.css");
@import url("./dist/css/glightbox.css");
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


a {
  color: inherit;
  text-decoration: none;
}

li {
  list-style: none;
}

.container {
  margin-inline: auto;
}

body {
  background-color: var(--black);
  color: var(--white);
}

@media only screen and (min-width: 767.98px) {
  .d-sm {
    display: none !important;
  }
}
@media only screen and (max-width: 767.98px) {
  .d-md {
    display: none !important;
  }
}
:root {
  --white: #ffffff;
  --black: #222222;
  --dark: #000000;
  --green: #45a735;
  --boldgreen: #145629;
  --lightgreen: #c9f3c2;
  --darkgreen: #000c04;
  --gray: #f6f6f6;
  --gray1: #888888;
  --gray2: #777777;
  --gray3: #f5f5f5;
  --gray4: #555555;
}

:root {
  --05: 0.035vw;
  /* --1: min(0.052vw, 1px); */
  --1: min(0.078vw, 1px);
  ---2: -0.14vw;
  ---1: -0.02vw;
  --2: calc(var(--1) * 2);
  --3: calc(var(--1) * 3);
  --4: calc(var(--1) * 4);
  --5: calc(var(--1) * 5);
  --6: calc(var(--1) * 6);
  --7: calc(var(--1) * 7);
  --8: calc(var(--1) * 8);
  --10: calc(var(--1) * 10);
  --11: calc(var(--1) * 11);
  --12: calc(var(--1) * 12);
  --13: calc(var(--1) * 13);
  --14: calc(var(--1) * 14);
  --15: calc(var(--1) * 15);
  --16: calc(var(--1) * 16);
  --17: calc(var(--1) * 17);
  --18: calc(var(--1) * 18);
  --19: calc(var(--1) * 19);
  --20: calc(var(--1) * 20);
  --21: calc(var(--1) * 21);
  --22: calc(var(--1) * 22);
  --24: calc(var(--1) * 24);
  --25: calc(var(--1) * 25);
  --26: calc(var(--1) * 26);
  --27: calc(var(--1) * 27);
  --28: calc(var(--1) * 28);
  --30: calc(var(--1) * 30);
  --32: calc(var(--1) * 32);
  --34: calc(var(--1) * 34);
  --36: calc(var(--1) * 36);
  --38: calc(var(--1) * 38);
  --40: calc(var(--1) * 40);
  --42: calc(var(--1) * 42);
  --44: calc(var(--1) * 44);
  --46: calc(var(--1) * 46);
  --47: calc(var(--1) * 47);
  --48: calc(var(--1) * 48);
  --50: calc(var(--1) * 50);
  --52: calc(var(--1) * 52);
  --54: calc(var(--1) * 54);
  --56: calc(var(--1) * 56);
  --60: calc(var(--1) * 60);
  --64: calc(var(--1) * 64);
  --66: calc(var(--1) * 66);
  --70: calc(var(--1) * 70);
  --72: calc(var(--1) * 72);
  --73: calc(var(--1) * 73);
  --76: calc(var(--1) * 76);
  --80: calc(var(--1) * 80);
  --84: calc(var(--1) * 84);
  --90: calc(var(--1) * 90);
  --96: calc(var(--1) * 96);
  --98: calc(var(--1) * 98);
  --100: calc(var(--1) * 100);
  --120: calc(var(--1) * 120);
  --122: calc(var(--1) * 122);
  --128: calc(var(--1) * 128);
  --134: calc(var(--1) * 134);
  --138: calc(var(--1) * 138);
  --148: calc(var(--1) * 148);
  --196: calc(var(--1) * 196);
  --198: calc(var(--1) * 198);
  --200: calc(var(--1) * 200);
  --256: calc(var(--1) * 256);
  --dsm-10: 2.41vw;
  --dsm-1: 0.241vw;
}

@media only screen and (min-width: 768px) {
  header {
    width: 100%;
    height: calc(var(--1) * 80);
    background-color: var(--white);
  }
  header nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 95%;
    margin-inline: auto;
    height: 100%;
  }
  header nav .navbar-brand img {
    height: calc(var(--1) * 50);
    width: auto;
  }
  header nav .nav-list {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: calc(var(--1) * 15);
    list-style-type: none;
    color: var(--black) !important;
    position: relative;
  }
  header nav .nav-list .nav-item {
    cursor: pointer;
    height: 100%;
    padding: 0 10px;
    transition: 0.4s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block: calc(var(--1) * 7);
  }
  header nav .nav-list .nav-item .nav-link {
    transition: all 0.2s ease-in;
  }
  header nav .nav-list .nav-item .nav-link:hover {
    color: var(--green);
  }
  header nav .nav-list .category .dropdown,
  header nav .nav-list .products .dropdown {
    display: none;
    flex-direction: column;
    position: absolute;
    background-color: #f9f9f9;
    min-width: calc(var(--1) * 160);
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 5;
    top: 100%;
    padding-top: calc(var(--1) * 5);
  }
  header nav .nav-list .category .dropdown li,
  header nav .nav-list .products .dropdown li {
    padding: calc(var(--1) * 10);
    transition: all 0.2s ease-in;
  }
  header nav .nav-list .category .dropdown li:hover,
  header nav .nav-list .products .dropdown li:hover {
    color: var(--green);
  }
  header nav .nav-list .category:hover > .dropdown,
  header nav .nav-list .products:hover > .dropdown {
    display: flex;
  }
  header nav .nav-list .category a,
  header nav .nav-list .products a {
    display: flex;
    gap: calc(var(--1) * 5);
  }
  header nav .nav-list .category a img,
  header nav .nav-list .products a img {
    width: calc(var(--1) * 8);
  }
  header nav .nav-list .user a {
    display: flex;
    gap: 10px;
  }
  header nav .nav-list .user a img {
    width: 13px;
  }
  header nav .nav-list .button {
    border: 1px solid var(--green);
    padding: calc(var(--1) * 10) calc(var(--1) * 25);
    color: var(--green);
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    z-index: 2;
    transition: color 0.5s;
  }
  header nav .nav-list .button:hover {
    color: var(--white);
    background: var(--green);
  }
  header nav .navbar-toggler {
    display: none;
    height: -moz-min-content;
    height: min-content;
    margin: 18px -10px 0 0;
    cursor: pointer;
  }
  header nav .navbar-toggler .bar {
    width: 40px;
    height: 5px;
    margin-bottom: 10px;
    background: #ffffff;
    border-radius: 10%;
    transition: 0.4s;
  }
  header .mobileHeader {
    display: none;
  }
  header .popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--1) * 1200);
    min-height: calc(var(--1) * 500);
    background-color: white;
    border: 1px solid #ccc;
    z-index: 9999;
    padding: calc(var(--1) * 75);
    overflow: auto;
  }
  header .popup .title {
    margin-bottom: calc(var(--1) * 50);
    position: relative;
  }
  header .popup .title h5 {
    font-size: calc(var(--1) * 14);
    line-height: calc(var(--1) * 17);
    color: var(--gray1);
    font-weight: 400;
    letter-spacing: 5px;
  }
  header .popup .title h1 {
    font-size: calc(var(--1) * 38);
    color: var(--black);
    line-height: calc(var(--1) * 48);
  }
  header .popup .title h1 span {
    color: var(--green);
  }
  header .popup .title .closeIcon {
    width: calc(var(--1) * 20);
    height: calc(var(--1) * 20);
    position: absolute;
    cursor: pointer;
    top: 0;
    right: 0;
  }
  header .popup .title .closeIcon img {
    width: 100%;
  }
  header .popup .title .closeIcon:hover {
    transform: scale(1.1);
  }
  header .popup .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--1) * 20);
    margin-bottom: calc(var(--1) * 20);
  }
  header .popup .row input {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
    display: block !important;
  }
  header .popup .row-1 {
    width: 100%;
  }
  header .popup .row-1 textarea {
    width: 100%;
    height: calc(var(--1) * 150);
    padding: calc(var(--1) * 16);
    overflow: auto;
    border: none;
    outline: none;
    background-color: var(--gray);
    resize: none;
  }
  header .popup .button {
    width: 100%;
    margin-inline: auto;
    display: flex;
    justify-content: center;
  }
  header .popup .button .teklif {
    margin-top: calc(var(--1) * 20);
    margin-inline: auto;
    text-align: center;
    padding-block: calc(var(--1) * 20);
    padding-inline: calc(var(--1) * 60);
    width: -moz-max-content;
    width: max-content;
    color: var(--white);
    background-color: var(--black);
    outline: none;
    border: none;
    cursor: pointer;
  }
  header .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: none;
  }
}
@media only screen and (max-width: 767.98px) {
  header {
    width: 100%;
    background-color: var(--white);
  }
  header nav {
    display: none;
    justify-content: space-between;
    align-items: center;
    max-width: 95%;
    margin-inline: auto;
    height: 100%;
  }
  header nav .navbar-brand img {
    height: calc(var(--dsm-1) * 40);
    width: auto;
  }
  header nav .nav-list {
    display: grid;
    position: absolute;
    background: #404040;
    width: 100%;
    height: 100%;
    top: calc(var(--dsm-1) * 80);
    left: 0;
    transform: translateY(-100%);
    z-index: -1;
    transition: 0.6s;
  }
  header nav .nav-list .nav-item {
    padding-left: calc(var(--dsm-1) * 10);
  }
  header nav .nav-list .category .dropdown,
  header nav .nav-list .products .dropdown {
    display: none;
    position: relative;
    background-color: #f9f9f9;
    min-width: calc(var(--dsm-1) * 160);
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
  }
  header nav .nav-list .category:hover > .dropdown,
  header nav .nav-list .products:hover > .dropdown {
    display: block;
    top: 100%;
  }
  header nav .nav-list .category a,
  header nav .nav-list .products a {
    display: flex;
    gap: calc(var(--dsm-1) * 5);
  }
  header nav .nav-list .category a img,
  header nav .nav-list .products a img {
    width: calc(var(--dsm-1) * 8);
  }
  header nav .nav-list .user a {
    display: flex;
    gap: 10px;
  }
  header nav .nav-list .user a img {
    width: 13px;
  }
  header nav .nav-list .button a {
    border: 1px solid var(--green);
    padding: calc(var(--dsm-1) * 10) calc(var(--dsm-1) * 25);
    color: var(--green);
    font-size: calc(var(--dsm-1) * 13);
    font-weight: bold;
  }
  header nav .navbar-toggler {
    display: grid !important;
    height: -moz-min-content;
    height: min-content;
    cursor: pointer;
  }
  header nav .navbar-toggler .bar {
    width: calc(var(--dsm-1) * 40);
    height: calc(var(--dsm-1) * 5);
    margin-bottom: calc(var(--dsm-1) * 8);
    border-radius: 10%;
    transition: 0.4s;
    background-color: var(--black);
  }
  header .mobileHeader {
    max-width: 95%;
    margin-inline: auto;
    height: 100%;
    padding-block: calc(var(--dsm-1) * 20);
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 20);
  }
  header .mobileHeader .topbar {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  header .mobileHeader .topbar .navbar-brand img {
    height: calc(var(--dsm-1) * 40);
    width: auto;
  }
  header .mobileHeader .topbar .userLink a {
    display: flex;
    gap: calc(var(--dsm-1) * 10);
    font-size: calc(var(--dsm-1) * 18);
    font-weight: bold;
  }
  header .mobileHeader .topbar .userLink a img {
    width: calc(var(--dsm-1) * 20);
  }
  header .mobileHeader .topbar .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 35px;
    height: 30px;
    cursor: pointer;
  }
  header .mobileHeader .topbar .hamburger span {
    background-color: var(--gray2);
    width: 100%;
    height: 6px;
    display: flex;
    margin-left: auto;
    transition: all 500ms ease;
  }
  header .mobileHeader .topbar .hamburger.active span:nth-child(1) {
    transform: translateY(13px) rotate(45deg);
  }
  header .mobileHeader .topbar .hamburger.active span:nth-child(2) {
    opacity: 0;
  }
  header .mobileHeader .topbar .hamburger.active span:nth-child(3) {
    transform: translateY(-13px) rotate(-45deg);
  }
  header .mobileHeader .bottombar {
    border: 1px solid var(--green);
    padding: calc(var(--dsm-1) * 10) calc(var(--dsm-1) * 25);
    font-size: calc(var(--dsm-1) * 18);
    text-align: center;
    color: var(--green);
    font-weight: bold;
    transition: all 0.2s ease-in-out;
  }
  header .mobileHeader .bottombar:hover {
    background-color: var(--green);
    color: var(--black);
    border: 1px solid var(--black);
  }
  header .mobileHeader .mobile-nav {
    display: none;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  header .mobileHeader .mobile-nav ul {
    list-style: none;
    padding: 0;
  }
  header .mobileHeader .mobile-nav li {
    align-items: center;
    position: relative;
    padding: 10px;
    cursor: pointer;
  }
  header .mobileHeader .mobile-nav li.has-dropdown .dropdown-icon {
    margin-left: 5px;
    border: solid black;
    border-width: 0 2px 2px 0;
    display: inline-block;
    padding: 3px;
    transform: rotate(45deg);
    transition: transform 0.3s ease;
  }
  header .mobileHeader .mobile-nav li.has-dropdown .dropdown {
    display: none;
    position: relative;
    background-color: #fff;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  header .mobileHeader .mobile-nav li.has-dropdown.active .dropdown {
    display: block;
  }
  header .popup {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    background-color: white;
    border: 1px solid #ccc;
    z-index: 9999;
    padding: calc(var(--dsm-1) * 20);
    overflow: auto;
  }
  header .popup .title {
    margin-bottom: calc(var(--dsm-1) * 20);
  }
  header .popup .title h5 {
    font-size: calc(var(--dsm-1) * 14);
    line-height: calc(var(--dsm-1) * 17);
    color: var(--gray1);
    font-weight: 400;
    letter-spacing: 5px;
  }
  header .popup .title h1 {
    font-size: calc(var(--dsm-1) * 25);
    color: var(--black);
    line-height: calc(var(--dsm-1) * 35);
  }
  header .popup .title h1 span {
    color: var(--green);
  }
  header .popup .title .closeIcon {
    width: calc(var(--dsm-1) * 20);
    height: calc(var(--dsm-1) * 20);
    position: absolute;
    cursor: pointer;
    top: calc(var(--dsm-1) * 20);
    right: calc(var(--dsm-1) * 20);
  }
  header .popup .title .closeIcon img {
    width: 100%;
  }
  header .popup .title .closeIcon:hover {
    transform: scale(1.1);
  }
  header .popup .row {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--dsm-1) * 20);
    margin-bottom: calc(var(--dsm-1) * 20);
  }
  header .popup .row input {
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
    display: block !important;
  }
  header .popup .row-1 {
    width: 100%;
  }
  header .popup .row-1 textarea {
    width: 100%;
    height: calc(var(--dsm-1) * 150);
    padding: calc(var(--dsm-1) * 16);
    overflow: auto;
    border: none;
    outline: none;
    background-color: var(--gray);
    resize: none;
  }
  header .popup .button {
    width: 100%;
    margin-inline: auto;
    display: flex;
    justify-content: center;
  }
  header .popup .button .teklif {
    margin-top: calc(var(--dsm-1) * 20);
    margin-inline: auto;
    text-align: center;
    padding-block: calc(var(--dsm-1) * 20);
    padding-inline: calc(var(--dsm-1) * 60);
    width: -moz-max-content;
    width: max-content;
    color: var(--white);
    background-color: var(--black);
    outline: none;
    border: none;
    cursor: pointer;
  }
  header .overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: none;
  }
}
@media only screen and (min-width: 768px) {
  footer {
    width: 100%;
    background-image: url("../assets/gorsel/footerbg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--white);
    height: calc(var(--1) * 322);
    font-size: calc(var(--1) * 13);
  }
  footer .footer1 {
    width: 100%;
    height: 100%;
    background-image: url("../assets/gorsel/footerPerde.png");
    display: flex;
    align-items: center;
  }
  footer .footer1 .content {
    width: 95%;
    margin-inline: auto;
    align-items: center;
  }
  footer .footer1 .content .container {
    width: 83%;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }
  footer .footer1 .content .container h2,
  footer .footer1 .content .container img {
    font-size: calc(var(--1) * 18);
    margin-bottom: calc(var(--1) * 20);
  }
  footer .footer1 .content .container li {
    margin-bottom: calc(var(--1) * 8);
    padding: calc(var(--dsm-1) * 1);
  }
  footer .footer1 .content .container li:hover a {
    text-decoration: underline;
  }
}
@media only screen and (max-width: 767.98px) {
  footer {
    width: 100%;
    background-image: url("../assets/gorsel/footerbg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--white);
    height: auto;
    font-size: calc(var(--dsm-1) * 10);
  }
  footer .footer1 {
    width: 100%;
    height: 100%;
    background-image: url("../assets/gorsel/footerPerde.png");
    display: flex;
    align-items: center;
  }
  footer .footer1 .content {
    width: 95%;
    padding-block: calc(var(--dsm-1) * 50);
    margin-inline: auto;
    align-items: center;
  }
  footer .footer1 .content .container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 40);
    justify-content: center;
  }
  footer .footer1 .content .container h2,
  footer .footer1 .content .container img {
    font-size: calc(var(--dsm-1) * 20);
    margin-bottom: calc(var(--dsm-1) * 20);
  }
  footer .footer1 .content .container li {
    margin-bottom: calc(var(--dsm-1) * 18);
  }
}
@media only screen and (min-width: 768px) {
  .error {
    width: 95%;
    margin-inline: auto;
  }
  .error .container {
    width: 83%;
    height: calc(100vh - var(--1) * 100);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--1) * 50);
    padding-block: calc(var(--1) * 90);
  }
  .error .container h2 {
    font-size: calc(var(--1) * 60);
    color: var(--darkgreen);
  }
  .error .container h2 span {
    color: var(--green);
  }
  .error .container .button {
    border: 1px solid var(--green);
    padding: calc(var(--1) * 10) calc(var(--1) * 25);
    color: var(--green);
    font-size: calc(var(--1) * 14);
    font-weight: bold;
    outline: none;
    background: none;
  }
}
@media only screen and (max-width: 767.98px) {
  .error {
    width: 95%;
    margin-inline: auto;
  }
  .error .container {
    width: 83%;
    height: calc(100vh - var(--dsm-1) * 100);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--dsm-1) * 50);
    padding-block: calc(var(--dsm-1) * 90);
  }
  .error .container h2 {
    font-size: calc(var(--dsm-1) * 60);
    color: var(--darkgreen);
  }
  .error .container h2 span {
    color: var(--green);
  }
  .error .container .button {
    border: 1px solid var(--green);
    padding: calc(var(--dsm-1) * 10) calc(var(--dsm-1) * 25);
    color: var(--green);
    font-size: calc(var(--dsm-1) * 14);
    font-weight: bold;
    outline: none;
    background: none;
  }
}
@media only screen and (min-width: 768px) {
  main {
    width: 100%;
    height: 100%;
    background-color: var(--gray);
  }
  main .register {
    height: 100%;
    padding-block: calc(var(--1) * 80);
  }
  main .register form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 15);
    max-width: calc(var(--1) * 656);
    margin-inline: auto;
    padding: calc(var(--1) * 80);
    background-color: var(--white);
    border: 1px solid #707070;
  }
  main .register form h2 {
    font-size: calc(var(--1) * 26);
  }
  main .register form input {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  main .register form input ::-moz-placeholder {
    color: var(--gray1);
  }
  main .register form input ::placeholder {
    color: var(--gray1);
  }
  main .register form .sigUpButton {
    width: 50%;
    padding: calc(var(--1) * 16);
    margin-inline: auto;
    background-color: var(--black);
    color: var(--white);
    outline: none;
    border: none;
    cursor: pointer;
    margin-top: calc(var(--1) * 10);
    transition: all 0.3s ease;
  }
  main .register form .sigUpButton:hover {
    background: #666;
  }
  main .register form p {
    display: flex;
    justify-content: center;
    gap: calc(var(--1) * 15);
    font-size: calc(var(--1) * 14);
    color: var(--gray1);
  }
  main .register form p a {
    color: var(--green);
  }
  main .register form .quicly {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--1) * 40);
  }
  main .register form .quicly .facebookButton {
    border: 1px solid #1967d2;
    padding: calc(var(--1) * 15) calc(var(--1) * 35);
    background: none;
    border-radius: calc(var(--1) * 10);
    cursor: pointer;
  }
  main .register form .quicly .googleButton {
    border: 1px solid #d93f21;
    padding: calc(var(--1) * 15) calc(var(--1) * 35);
    background: none;
    border-radius: calc(var(--1) * 10);
    cursor: pointer;
  }
}
@media only screen and (max-width: 767.98px) {
  main {
    width: 100%;
    height: 100%;
    background-color: var(--gray);
  }
  main .register {
    height: 100%;
    padding-block: calc(var(--dsm-1) * 40);
  }
  main .register form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 15);
    max-width: calc(var(--dsm-1) * 656);
    margin-inline: auto;
    padding: calc(var(--dsm-1) * 40);
    background-color: var(--white);
    border: 1px solid #707070;
  }
  main .register form h2 {
    font-size: calc(var(--dsm-1) * 26);
  }
  main .register form input {
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  main .register form input ::-moz-placeholder {
    color: var(--gray1);
  }
  main .register form input ::placeholder {
    color: var(--gray1);
  }
  main .register form .sigUpButton {
    width: 50%;
    padding: calc(var(--dsm-1) * 16);
    margin-inline: auto;
    background-color: var(--black);
    color: var(--white);
    outline: none;
    border: none;
    cursor: pointer;
    margin-top: calc(var(--dsm-1) * 10);
  }
  main .register form p {
    display: flex;
    justify-content: center;
    gap: calc(var(--dsm-1) * 15);
    font-size: calc(var(--dsm-1) * 14);
    color: var(--gray1);
  }
  main .register form p a {
    color: var(--green);
  }
  main .register form .quicly {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--dsm-1) * 40);
  }
  main .register form .quicly .facebookButton {
    border: 1px solid #1967d2;
    padding: calc(var(--dsm-1) * 15) calc(var(--dsm-1) * 35);
    background: none;
    border-radius: calc(var(--dsm-1) * 10);
    cursor: pointer;
  }
  main .register form .quicly .googleButton {
    border: 1px solid #d93f21;
    padding: calc(var(--dsm-1) * 15) calc(var(--dsm-1) * 35);
    background: none;
    border-radius: calc(var(--dsm-1) * 10);
    cursor: pointer;
  }
}
@media only screen and (min-width: 768px) {
  main {
    width: 100%;
    height: 100%;
    background-color: var(--gray);
  }
  main .logIn {
    height: 100%;
    padding-block: calc(var(--1) * 80);
  }
  main .logIn form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 15);
    max-width: calc(var(--1) * 656);
    margin-inline: auto;
    padding: calc(var(--1) * 80);
    background-color: var(--white);
    border: 1px solid #707070;
  }
  main .logIn form h2 {
    font-size: calc(var(--1) * 26);
  }
  main .logIn form input {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  main .logIn form input ::-moz-placeholder {
    color: var(--gray1);
  }
  main .logIn form input ::placeholder {
    color: var(--gray1);
  }
  main .logIn form .logInButton {
    width: 50%;
    padding: calc(var(--1) * 16);
    margin-inline: auto;
    background-color: var(--black);
    color: var(--white);
    outline: none;
    border: none;
    cursor: pointer;
    margin-top: calc(var(--1) * 10);
    transition: all 0.3s ease;
  }
  main .logIn form .logInButton:hover {
    background: #666;
  }
  main .logIn form p {
    display: flex;
    justify-content: center;
    gap: calc(var(--1) * 15);
    font-size: calc(var(--1) * 14);
    color: var(--gray1);
  }
  main .logIn form p a {
    color: var(--green);
  }
  main .logIn form .quicly {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--1) * 40);
  }
  main .logIn form .quicly .facebookButton {
    border: 1px solid #1967d2;
    padding: calc(var(--1) * 15) calc(var(--1) * 35);
    background: none;
    border-radius: calc(var(--1) * 10);
    cursor: pointer;
  }
  main .logIn form .quicly .googleButton {
    border: 1px solid #d93f21;
    padding: calc(var(--1) * 15) calc(var(--1) * 35);
    background: none;
    border-radius: calc(var(--1) * 10);
    cursor: pointer;
  }
}
@media only screen and (max-width: 767.98px) {
  main {
    width: 100%;
    height: 100%;
    background-color: var(--gray);
  }
  main .logIn {
    height: 100%;
    padding-block: calc(var(--dsm-1) * 40);
  }
  main .logIn form {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 15);
    max-width: calc(var(--dsm-1) * 656);
    margin-inline: auto;
    padding: calc(var(--dsm-1) * 40);
    background-color: var(--white);
    border: 1px solid #707070;
  }
  main .logIn form h2 {
    font-size: calc(var(--dsm-1) * 26);
  }
  main .logIn form input {
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  main .logIn form input ::-moz-placeholder {
    color: var(--gray1);
  }
  main .logIn form input ::placeholder {
    color: var(--gray1);
  }
  main .logIn form .logInButton {
    width: 50%;
    padding: calc(var(--dsm-1) * 16);
    margin-inline: auto;
    background-color: var(--black);
    color: var(--white);
    outline: none;
    border: none;
    cursor: pointer;
    margin-top: calc(var(--dsm-1) * 10);
  }
  main .logIn form p {
    display: flex;
    justify-content: center;
    gap: calc(var(--dsm-1) * 15);
    font-size: calc(var(--dsm-1) * 14);
    color: var(--gray1);
  }
  main .logIn form p a {
    color: var(--green);
  }
  main .logIn form .quicly {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(var(--dsm-1) * 40);
  }
  main .logIn form .quicly .facebookButton {
    border: 1px solid #1967d2;
    padding: calc(var(--dsm-1) * 15) calc(var(--dsm-1) * 35);
    background: none;
    border-radius: calc(var(--dsm-1) * 10);
    cursor: pointer;
  }
  main .logIn form .quicly .googleButton {
    border: 1px solid #d93f21;
    padding: calc(var(--dsm-1) * 15) calc(var(--dsm-1) * 35);
    background: none;
    border-radius: calc(var(--dsm-1) * 10);
    cursor: pointer;
  }
}
@media only screen and (min-width: 768px) {
  main {
    width: 100%;
    background-color: var(--white);
  }
  main .contact {
    width: 95%;
    margin-inline: auto;
  }
  main .contact .container {
    width: 83%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--1) * 50);
    padding-block: calc(var(--1) * 50);
  }
  main .contact .container .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: calc(var(--1) * 50);
  }
  main .contact .container .row .map {
    width: 100%;
    border: 2px solid #e7e7e7;
  }
  main .contact .container .row .map .row {
    color: var(--gray2);
    font-size: calc(var(--1) * 14);
    margin-bottom: calc(var(--1) * 15);
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 15);
    text-align: left;
  }
  main .contact .container .row .map .row h2 {
    text-align: center;
    padding: calc(var(--1) * 16);
  }
  main .contact .container .row .map .row .subject {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 5);
    padding-inline: calc(var(--1) * 16);
  }
  main .contact .container .row .map .row .subject input {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  main .contact .container .row .map .row .mail {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 5);
    padding-inline: calc(var(--1) * 16);
  }
  main .contact .container .row .map .row .mail input {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  main .contact .container .row .map .row .message {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 5);
    padding-inline: calc(var(--1) * 16);
  }
  main .contact .container .row .map .row .message textarea {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    width: 100%;
    background-color: var(--gray);
    resize: vertical;
  }
  main .contact .container .row .map .row .aydinlatma {
    display: flex;
    gap: calc(var(--1) * 5);
    padding-inline: calc(var(--1) * 16);
  }
  main .contact .container .row .map .row .aydinlatma label a {
    text-decoration: underline;
    color: var(--dark);
  }
  main .contact .container .row .map .row .sendButton {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  main .contact .container .row .map .row .sendButton .send {
    margin: calc(var(--1) * 0);
    padding-block: calc(var(--1) * 20);
    padding-inline: calc(var(--1) * 60);
    width: -moz-max-content;
    width: max-content;
    color: var(--white);
    background-color: var(--black);
    outline: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  main .contact .container .row .map .row .sendButton .send:hover {
    background: #666;
  }
  main .contact .container .row .content {
    display: flex;
    flex-direction: column;
    text-align: left;
    gap: calc(var(--1) * 20);
  }
  main .contact .container .row .content .adress,
  main .contact .container .row .content .telefon,
  main .contact .container .row .content .ePosta {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 1);
  }
}
@media only screen and (max-width: 767.98px) {
  main {
    width: 100%;
    background-color: var(--white);
  }
  main .contact {
    width: 95%;
    margin-inline: auto;
  }
  main .contact .container {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--dsm-1) * 50);
    padding-block: calc(var(--dsm-1) * 30);
  }
  main .contact .container .row {
    display: grid;
    grid-template-columns: 1fr;
    margin-bottom: calc(var(--dsm-1) * 20);
    gap: calc(var(--dsm-1) * 50);
  }
  main .contact .container .row .map {
    width: 100%;
    border: 2px solid #e7e7e7;
  }
  main .contact .container .row .map .row {
    color: var(--gray2);
    font-size: calc(var(--dsm-1) * 14);
    margin-bottom: calc(var(--dsm-1) * 15);
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 15);
    text-align: left;
  }
  main .contact .container .row .map .row h2 {
    text-align: center;
    padding: calc(var(--dsm-1) * 16);
  }
  main .contact .container .row .map .row .subject {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 5);
    padding-inline: calc(var(--dsm-1) * 16);
  }
  main .contact .container .row .map .row .subject input {
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  main .contact .container .row .map .row .mail {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 5);
    padding-inline: calc(var(--dsm-1) * 16);
  }
  main .contact .container .row .map .row .mail input {
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  main .contact .container .row .map .row .message {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 5);
    padding-inline: calc(var(--dsm-1) * 16);
  }
  main .contact .container .row .map .row .message textarea {
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    width: 100%;
    background-color: var(--gray);
    resize: vertical;
  }
  main .contact .container .row .map .row .aydinlatma {
    display: flex;
    gap: calc(var(--dsm-1) * 10);
    padding-inline: calc(var(--dsm-1) * 16);
    align-items: center;
  }
  main .contact .container .row .map .row .aydinlatma input {
    width: 25px;
    height: 25px;
  }
  main .contact .container .row .map .row .aydinlatma label a {
    text-decoration: underline;
    color: var(--dark);
  }
  main .contact .container .row .map .row .sendButton {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  main .contact .container .row .map .row .sendButton .send {
    margin: calc(var(--dsm-1) * 0);
    padding-block: calc(var(--dsm-1) * 20);
    padding-inline: calc(var(--dsm-1) * 60);
    width: -moz-max-content;
    width: max-content;
    color: var(--white);
    background-color: var(--black);
    outline: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  main .contact .container .row .map .row .sendButton .send:hover {
    background: #666;
  }
  main .contact .container .row .content {
    display: flex;
    flex-direction: column;
    text-align: left;
    justify-content: space-between;
    gap: calc(var(--dsm-1) * 30);
  }
  main .contact .container .row .content .adress,
  main .contact .container .row .content .telefon,
  main .contact .container .row .content .ePosta {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 1);
  }
  main .contact .container .row .content .adress p,
  main .contact .container .row .content .telefon p,
  main .contact .container .row .content .ePosta p {
    font-size: calc(var(--dsm-1) * 18);
  }
}
@media only screen and (min-width: 768px) {
  .about-content {
    width: 95%;
    margin-inline: auto;
    font-size: calc(var(--1) * 18);
  }
  .about-content .title {
    width: 83%;
    margin-inline: auto;
    padding-block: calc(var(--1) * 70);
  }
  .about-content .title h5 {
    font-size: calc(var(--1) * 14);
    line-height: calc(var(--1) * 17);
    color: var(--gray1);
    font-weight: 400;
    letter-spacing: 5px;
  }
  .about-content .title h1 {
    font-size: calc(var(--1) * 48);
    color: var(--black);
    line-height: calc(var(--1) * 58);
  }
  .about-content .title h1 span {
    color: var(--green);
  }
  .about-content .banner {
    width: 100%;
    margin-inline: auto;
  }
  .about-content .banner img {
    width: 100%;
  }
  .about-content .statistics {
    width: 83%;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-block: calc(var(--1) * 80);
  }
  .about-content .statistics .left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--1) * 60);
  }
  .about-content .statistics .left span {
    width: calc(var(--1) * 110);
    height: calc(var(--1) * 110);
    background-color: var(--lightgreen);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding-left: calc(var(--1) * 30);
  }
  .about-content .statistics .left span h3 {
    font-size: calc(var(--1) * 30);
    color: var(--black);
  }
  .about-content .statistics .left span h3::after {
    content: "+";
  }
  .about-content .statistics .left span h6 {
    min-width: -moz-max-content;
    min-width: max-content;
    letter-spacing: calc(var(--1) * 2);
    color: var(--gray4);
  }
  .about-content .statistics .right {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 60);
  }
  .about-content .ourStory {
    width: 83%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 40);
  }
  .about-content .ourStory .title {
    width: 100%;
    padding: 0;
  }
  .about-content .ourStory .title h5 {
    font-size: calc(var(--1) * 14);
    line-height: calc(var(--1) * 17);
    color: var(--gray1);
    font-weight: 400;
    letter-spacing: 5px;
  }
  .about-content .ourStory .title h2 {
    font-size: calc(var(--1) * 38);
    color: var(--black);
    line-height: calc(var(--1) * 58);
  }
  .about-content .ourStory .title h2 span {
    color: var(--green);
  }
  .about-content .powerBehind {
    width: 83%;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 2fr 3fr;
    padding-block: calc(var(--1) * 60);
    gap:calc(var(--1) * 20);
  }
  .about-content .powerBehind .powerImg img {
    height: calc(var(--1) * 470);
  }
  .about-content .powerBehind .powerContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(var(--1) * 30);
    text-align: right;
  }
  .about-content .powerBehind .powerContent .title {
    width: 100%;
    padding: 0;
  }
  .about-content .powerBehind .powerContent .title h5 {
    font-size: calc(var(--1) * 14);
    line-height: calc(var(--1) * 17);
    color: var(--gray1);
    font-weight: 400;
    letter-spacing: 5px;
  }
  .about-content .powerBehind .powerContent .title h2 {
    font-size: calc(var(--1) * 38);
    color: var(--black);
    line-height: calc(var(--1) * 58);
  }
  .about-content .powerBehind .powerContent .title h2 span {
    color: var(--green);
  }
  .about-content .contentContinued {
    width: 83%;
    margin-inline: auto;
  }
  .about-content .reference {
    width: 83%;
    margin-inline: auto;
    display: flex;
    justify-items: center;
    padding-block: calc(var(--1) * 120);
  }
  .about-content .reference img {
    display: flex;
    align-items: center;
  }
}
@media only screen and (max-width: 767.98px) {
  .about-content {
    width: 95%;
    margin-inline: auto;
    font-size: calc(var(--dsm-1) * 14);
  }
  .about-content .title {
    width: 100%;
    margin-inline: auto;
    padding-block: calc(var(--dsm-1) * 30);
  }
  .about-content .title h5 {
    font-size: calc(var(--dsm-1) * 14);
    line-height: calc(var(--dsm-1) * 10);
    color: var(--gray1);
    font-weight: 400;
    letter-spacing: calc(var(--dsm-1) * 2);
  }
  .about-content .title h1 {
    font-size: calc(var(--dsm-1) / 2 * 48);
    color: var(--black);
    line-height: calc(var(--dsm-1) * 38);
  }
  .about-content .title h1 span {
    color: var(--green);
  }
  .about-content .banner {
    width: 100%;
    margin-inline: auto;
  }
  .about-content .banner img {
    width: 100%;
  }
  .about-content .statistics {
    width: 100%;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--dsm-1) * 30);
    padding-block: calc(var(--dsm-1) * 30);
  }
  .about-content .statistics .left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--dsm-1) * 30);
  }
  .about-content .statistics .left span {
    width: calc(var(--dsm-1) * 110);
    height: calc(var(--dsm-1) * 110);
    background-color: var(--lightgreen);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding-left: calc(var(--dsm-1) * 30);
  }
  .about-content .statistics .left span h3 {
    font-size: calc(var(--dsm-1) * 30);
    color: var(--black);
  }
  .about-content .statistics .left span h6 {
    min-width: -moz-max-content;
    min-width: max-content;
    letter-spacing: calc(var(--dsm-1) * 2);
    color: var(--gray4);
  }
  .about-content .statistics .right {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 20);
  }
  .about-content .ourStory {
    width: 100%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 20);
  }
  .about-content .ourStory .title {
    width: 100%;
    padding: 0;
  }
  .about-content .ourStory .title h5 {
    font-size: calc(var(--dsm-1) * 14);
    line-height: calc(var(--dsm-1) * 10);
    color: var(--gray1);
    font-weight: 400;
    letter-spacing: calc(var(--dsm-1) * 2);
  }
  .about-content .ourStory .title h2 {
    font-size: calc(var(--dsm-1) / 2 * 38);
    color: var(--black);
    line-height: calc(var(--dsm-1) * 38);
  }
  .about-content .ourStory .title h2 span {
    color: var(--green);
  }
  .about-content .powerBehind {
    width: 100%;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    padding-top: calc(var(--dsm-1) * 30);
  }
  .about-content .powerBehind .powerImg img {
    width: 100%;
    height: calc(var(--dsm-1) * 2 / 3 * 470);
    display: flex;
    justify-content: center;
  }
  .about-content .powerBehind .powerContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(var(--dsm-1) * 30);
    text-align: left;
    padding-top: calc(var(--dsm-1) * 30);
    padding-bottom: calc(var(--dsm-1) * 20);
  }
  .about-content .powerBehind .powerContent .title {
    width: 100%;
    padding: 0;
  }
  .about-content .powerBehind .powerContent .title h5 {
    font-size: calc(var(--dsm-1) * 14);
    line-height: calc(var(--dsm-1) * 10);
    color: var(--gray1);
    font-weight: 400;
    letter-spacing: calc(var(--dsm-1) * 2);
  }
  .about-content .powerBehind .powerContent .title h2 {
    font-size: calc(var(--dsm-1) / 2 * 38);
    color: var(--black);
    line-height: calc(var(--dsm-1) * 38);
  }
  .about-content .powerBehind .powerContent .title h2 span {
    color: var(--green);
  }
  .about-content .contentContinued {
    width: 100%;
    margin-inline: auto;
    padding-bottom: calc(var(--dsm-1) * 30);
  }
  .about-content .reference {
    width: 95%;
    margin-inline: auto;
    display: flex;
    justify-items: center;
    padding-block: calc(var(--dsm-1) * 120);
  }
  .about-content .reference img {
    display: flex;
    align-items: center;
    width: 100%;
  }
}
@media only screen and (min-width: 768px) {
  .hesabım {
    width: 95%;
    margin-inline: auto;
  }
  .hesabım .activeSidebar {
    color: var(--black);
    font-weight: bold;
  }
  .hesabım .hesabimcontent {
    width: 83%;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-self: stretch;
    padding-block: calc(var(--1) * 120);
  }
  .hesabım .hesabimcontent .sidebar {
    border: 2px solid #e7e7e7;
    padding: calc(var(--1) * 60);
  }
  .hesabım .hesabimcontent .sidebar ul .sidebarTitle {
    font-weight: bold;
    font-size: calc(var(--1) * 18);
    cursor: auto;
  }
  .hesabım .hesabimcontent .sidebar ul li {
    padding-bottom: calc(var(--1) * 20);
    margin-bottom: calc(var(--1) * 20);
    border-bottom: 1px solid #e7e7e7;
    font-size: calc(var(--1) * 14);
    cursor: pointer;
    transition: 0.2s;
  }
  .hesabım .hesabimcontent .sidebar ul li:last-child {
    border: none;
    color: red;
    font-weight: bold;
  }
  .hesabım .hesabimcontent .sidebar ul li:not(:last-child):hover {
    color: var(--black);
    font-weight: bold;
  }
  .hesabım .hesabimcontent .personalContent {
    padding-inline: calc(var(--1) * 30);
  }
  .hesabım .hesabimcontent .personalContent h2 {
    font-size: calc(var(--1) * 22);
    color: var(--black);
    margin-bottom: calc(var(--1) * 25);
  }
  .hesabım .hesabimcontent .personalContent h2 span {
    color: var(--green);
  }
  .hesabım .hesabimcontent .personalContent .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--1) * 20);
    color: var(--gray2);
    font-size: calc(var(--1) * 14);
    margin-bottom: calc(var(--1) * 15);
  }
  .hesabım .hesabimcontent .personalContent .row .name {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 5);
  }
  .hesabım .hesabimcontent .personalContent .row .name input {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  .hesabım .hesabimcontent .personalContent .row .surname {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 5);
  }
  .hesabım .hesabimcontent .personalContent .row .surname input {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  .hesabım .hesabimcontent .personalContent .row .mail {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 5);
  }
  .hesabım .hesabimcontent .personalContent .row .mail input {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  .hesabım .hesabimcontent .personalContent .row .phone {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 5);
  }
  .hesabım .hesabimcontent .personalContent .row .phone input {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  .hesabım .hesabimcontent .personalContent .row .date {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 5);
  }
  .hesabım .hesabimcontent .personalContent .row .date input {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  .hesabım .hesabimcontent .personalContent .row .gender {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 5);
  }
  .hesabım .hesabimcontent .personalContent .row .gender select {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  .hesabım .hesabimcontent .personalContent .addres {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 5);
    width: 100%;
  }
  .hesabım .hesabimcontent .personalContent .addres input {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  .hesabım .hesabimcontent .personalContent .changepass {
    margin-top: calc(var(--1) * 40);
    border: 2px solid #e7e7e7;
    padding: calc(var(--1) * 20);
  }
  .hesabım .hesabimcontent .personalContent .changepass h2 {
    font-size: calc(var(--1) * 16);
    color: var(--black);
    margin-bottom: calc(var(--1) * 20);
  }
  .hesabım .hesabimcontent .personalContent .changepass h2 span {
    color: var(--green);
  }
  .hesabım .hesabimcontent .personalContent .changepass .row-1 {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 15);
    color: var(--gray2);
    font-size: calc(var(--1) * 14);
  }
  .hesabım .hesabimcontent .personalContent .changepass .row-1 .oldPass {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 5);
  }
  .hesabım .hesabimcontent .personalContent .changepass .row-1 .oldPass input {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  .hesabım .hesabimcontent .personalContent .changepass .row-1 .newPass {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 5);
  }
  .hesabım .hesabimcontent .personalContent .changepass .row-1 .newPass input {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  .hesabım .hesabimcontent .personalContent .changepass .row-1 .againPass {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 5);
  }
  .hesabım .hesabimcontent .personalContent .changepass .row-1 .againPass input {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  .hesabım .hesabimcontent .send {
    margin: calc(var(--1) * 30);
    padding-block: calc(var(--1) * 20);
    padding-inline: calc(var(--1) * 60);
    width: -moz-max-content;
    width: max-content;
    color: var(--white);
    background-color: var(--black);
    outline: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  .hesabım .hesabimcontent .send:hover {
    background: #666;
  }
  .hesabım .hesabimcontent .sellerContent {
    padding-inline: calc(var(--1) * 30);
  }
  .hesabım .hesabimcontent .sellerContent h2 {
    font-size: calc(var(--1) * 22);
    color: var(--black);
    margin-bottom: calc(var(--1) * 25);
  }
  .hesabım .hesabimcontent .sellerContent h2 span {
    color: var(--green);
  }
  .hesabım .hesabimcontent .sellerContent .row {
    color: var(--gray2);
    font-size: calc(var(--1) * 14);
    margin-bottom: calc(var(--1) * 15);
    border: 1px solid #e7e7e7;
  }
  .hesabım .hesabimcontent .sellerContent .row h3 {
    width: 100%;
    background-color: var(--gray3);
    color: var(--black);
    padding: calc(var(--1) * 11) calc(var(--1) * 15);
  }
  .hesabım .hesabimcontent .sellerContent .row .information {
    display: flex;
    flex-direction: column;
    padding: calc(var(--1) * 15);
    gap: calc(var(--1) * 15);
    color: var(--black);
  }
  .hesabım .hesabimcontent .supportContent {
    padding-inline: calc(var(--1) * 30);
  }
  .hesabım .hesabimcontent .supportContent h2 {
    font-size: calc(var(--1) * 22);
    color: var(--black);
    margin-bottom: calc(var(--1) * 25);
  }
  .hesabım .hesabimcontent .supportContent h2 span {
    color: var(--green);
  }
  .hesabım .hesabimcontent .supportContent .row {
    color: var(--gray2);
    font-size: calc(var(--1) * 14);
    margin-bottom: calc(var(--1) * 15);
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 15);
  }
  .hesabım .hesabimcontent .supportContent .row .subject {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 5);
  }
  .hesabım .hesabimcontent .supportContent .row .subject input {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  .hesabım .hesabimcontent .supportContent .row .fileadd {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 5);
  }
  .hesabım .hesabimcontent .supportContent .row .fileadd input {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  .hesabım .hesabimcontent .supportContent .row .message {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 5);
  }
  .hesabım .hesabimcontent .supportContent .row .message textarea {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    width: 100%;
    background-color: var(--gray);
    resize: vertical;
  }
  .hesabım .hesabimcontent .supportContent .row .send {
    margin: calc(var(--1) * 0);
    padding-block: calc(var(--1) * 20);
    padding-inline: calc(var(--1) * 60);
    width: -moz-max-content;
    width: max-content;
    color: var(--white);
    background-color: var(--black);
    outline: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  .hesabım .hesabimcontent .supportContent .row .send:hover {
    background: #666;
  }
  .hesabım .hesabimcontent .myFavoritesContent {
    padding-inline: calc(var(--1) * 30);
  }
  .hesabım .hesabimcontent .myFavoritesContent h2 {
    font-size: calc(var(--1) * 22);
    color: var(--black);
    margin-bottom: calc(var(--1) * 25);
  }
  .hesabım .hesabimcontent .myFavoritesContent h2 span {
    color: var(--green);
  }
  .hesabım .hesabimcontent .myFavoritesContent .favoriteTitle {
    display: flex;
    justify-content: space-between;
    font-size: calc(var(--1) * 14);
    font-weight: bold;
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: calc(var(--1) * 12);
  }
  .hesabım .hesabimcontent .myFavoritesContent .favoriteTitle span {
    padding-right: calc(var(--1) * 10);
  }
  .hesabım .hesabimcontent .myFavoritesContent .favoriteCard {
    padding-block: calc(var(--1) * 21);
    position: relative;
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    gap: calc(var(--1) * 30);
    justify-self: space-between;
    align-items: center;
    border-bottom: 1px solid #e7e7e7;
  }
  .hesabım .hesabimcontent .myFavoritesContent .favoriteCard:last-of-type {
    border-bottom: none;
  }
  .hesabım .hesabimcontent .myFavoritesContent .favoriteCard .image {
    display: flex;
    gap: calc(var(--1) * 10);
  }
  .hesabım .hesabimcontent .myFavoritesContent .favoriteCard .image img {
    width: calc(var(--1) * 120);
    height: calc(var(--1) * 80);
  }
  .hesabım .hesabimcontent .myFavoritesContent .favoriteCard .image .close {
    width: calc(var(--1) * 20);
    height: calc(var(--1) * 20);
    border-radius: 50%;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .hesabım .hesabimcontent .myFavoritesContent .favoriteCard .image .close:hover {
    scale: 1.1;
    box-shadow: 0 0 10px 0 rgba(227, 9, 9, 0.5);
  }
  .hesabım .hesabimcontent .myFavoritesContent .favoriteCard .image .close img {
    width: calc(var(--1) * 7);
    height: calc(var(--1) * 7);
  }
  .hesabım .hesabimcontent .myFavoritesContent .favoriteCard .favoriteName {
    font-size: calc(var(--1) * 14);
  }
  .hesabım .hesabimcontent .myFavoritesContent .favoriteCard .favoriteGozAt {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: flex-end;
    width: calc(var(--1) * 65);
    height: calc(var(--1) * 42);
    background-color: var(--gray3);
    cursor: pointer;
    transition: 0.3s;
  }
  .hesabım .hesabimcontent .myFavoritesContent .favoriteCard .favoriteGozAt:hover {
    background-color: var(--gray4);
  }
  .hesabım .hesabimcontent .myFavoritesContent .favoriteCard .favoriteGozAt img {
    width: calc(var(--1) * 18);
    height: calc(var(--1) * 10);
  }
  .hesabım .hesabimcontent .myDemands {
    padding-inline: calc(var(--1) * 30);
  }
  .hesabım .hesabimcontent .myDemands h2 {
    font-size: calc(var(--1) * 22);
    color: var(--black);
    margin-bottom: calc(var(--1) * 25);
  }
  .hesabım .hesabimcontent .myDemands h2 span {
    color: var(--green);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsTitle {
    display: flex;
    justify-content: space-between;
    font-size: calc(var(--1) * 14);
    font-weight: bold;
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: calc(var(--1) * 12);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsTitle span {
    padding-right: calc(var(--1) * 10);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsCard {
    padding-block: calc(var(--1) * 21);
    position: relative;
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    gap: calc(var(--1) * 30);
    justify-self: space-between;
    align-items: center;
    border-bottom: 1px solid #e7e7e7;
  }
  .hesabım .hesabimcontent .myDemands .myDemandsCard:last-of-type {
    border-bottom: none;
  }
  .hesabım .hesabimcontent .myDemands .myDemandsCard .image {
    display: flex;
    gap: calc(var(--1) * 10);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsCard .image .project {
    width: calc(var(--1) * 120);
    height: calc(var(--1) * 80);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hesabım .hesabimcontent .myDemands .myDemandsCard .image .close {
    width: calc(var(--1) * 20);
    height: calc(var(--1) * 20);
    border-radius: 50%;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .hesabım .hesabimcontent .myDemands .myDemandsCard .image .close:hover {
    scale: 1.1;
    box-shadow: 0 0 10px 0 rgba(227, 9, 9, 0.5);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsCard .image .close img {
    width: calc(var(--1) * 7);
    height: calc(var(--1) * 7);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsCard .myDemandsName {
    font-size: calc(var(--1) * 14);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsCard .myDemandsGozAt {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: flex-end;
    width: calc(var(--1) * 65);
    height: calc(var(--1) * 42);
    background-color: var(--gray3);
    outline: none;
    border: none;
    cursor: pointer;
    transition: 0.3s;
  }
  .hesabım .hesabimcontent .myDemands .myDemandsCard .myDemandsGozAt:hover {
    background-color: var(--gray4);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsCard .myDemandsGozAt img {
    width: calc(var(--1) * 18);
    height: calc(var(--1) * 10);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsPopUp {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--1) * 1200);
    min-height: calc(var(--1) * 500);
    background-color: white;
    border: 1px solid #ccc;
    z-index: 9999;
    padding: calc(var(--1) * 75);
    overflow: auto;
  }
  .hesabım .hesabimcontent .myDemands .myDemandsPopUp .title {
    margin-bottom: calc(var(--1) * 50);
    position: relative;
  }
  .hesabım .hesabimcontent .myDemands .myDemandsPopUp .title h5 {
    font-size: calc(var(--1) * 14);
    line-height: calc(var(--1) * 17);
    color: var(--gray1);
    font-weight: 400;
    letter-spacing: 5px;
  }
  .hesabım .hesabimcontent .myDemands .myDemandsPopUp .title h1 {
    font-size: calc(var(--1) * 38);
    color: var(--black);
    line-height: calc(var(--1) * 48);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsPopUp .title h1 span {
    color: var(--green);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsPopUp .title .closeIcon1 {
    width: calc(var(--1) * 20);
    height: calc(var(--1) * 20);
    position: absolute;
    cursor: pointer;
    top: 0;
    right: 0;
  }
  .hesabım .hesabimcontent .myDemands .myDemandsPopUp .title .closeIcon1 img {
    width: 100%;
  }
  .hesabım .hesabimcontent .myDemands .myDemandsPopUp .title .closeIcon1:hover {
    transform: scale(1.1);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsPopUp .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--1) * 20);
    margin-bottom: calc(var(--1) * 20);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsPopUp .row .info {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
    display: block !important;
    font-size: calc(var(--1) * 13);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsPopUp .rowNot {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--1) * 20);
    margin-bottom: calc(var(--1) * 20);
    height: auto;
  }
  .hesabım .hesabimcontent .myDemands .myDemandsPopUp .rowNot .info {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
    display: block !important;
    font-size: calc(var(--1) * 13);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: none;
  }
  .hesabım .hesabimcontent .myDemands .talepOluştur {
    width: -moz-max-content;
    width: max-content;
    margin-bottom: calc(var(--1) * 12);
    border: 1px solid var(--green);
    background: none;
    padding: calc(var(--1) * 15) calc(var(--1) * 45);
    color: var(--green);
    font-size: calc(var(--1) * 14);
    font-weight: bold;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
    z-index: 3;
  }
  .hesabım .hesabimcontent .myDemands .talepOluştur:hover {
    color: var(--white);
    background: var(--green);
  }
  .hesabım .hesabimcontent .productRequests {
    padding-inline: calc(var(--1) * 30);
  }
  .hesabım .hesabimcontent .productRequests h2 {
    font-size: calc(var(--1) * 22);
    color: var(--black);
    margin-bottom: calc(var(--1) * 25);
  }
  .hesabım .hesabimcontent .productRequests h2 span {
    color: var(--green);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsTitle {
    display: flex;
    justify-content: space-between;
    font-size: calc(var(--1) * 14);
    font-weight: bold;
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: calc(var(--1) * 12);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsTitle span {
    padding-right: calc(var(--1) * 10);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsCard {
    padding-block: calc(var(--1) * 21);
    position: relative;
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    gap: calc(var(--1) * 30);
    justify-self: space-between;
    align-items: center;
    border-bottom: 1px solid #e7e7e7;
  }
  .hesabım .hesabimcontent .productRequests .productRequestsCard:last-of-type {
    border-bottom: none;
  }
  .hesabım .hesabimcontent .productRequests .productRequestsCard .image {
    display: flex;
    gap: calc(var(--1) * 10);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsCard .image .project {
    width: calc(var(--1) * 120);
    height: calc(var(--1) * 80);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hesabım .hesabimcontent .productRequests .productRequestsCard .image .close {
    width: calc(var(--1) * 20);
    height: calc(var(--1) * 20);
    border-radius: 50%;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .hesabım .hesabimcontent .productRequests .productRequestsCard .image .close:hover {
    scale: 1.1;
    box-shadow: 0 0 10px 0 rgba(227, 9, 9, 0.5);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsCard .image .close img {
    width: calc(var(--1) * 7);
    height: calc(var(--1) * 7);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsCard .productRequestsName {
    font-size: calc(var(--1) * 14);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsCard .productRequestsGozAt {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: flex-end;
    width: calc(var(--1) * 65);
    height: calc(var(--1) * 42);
    background-color: var(--gray3);
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
  }
  .hesabım .hesabimcontent .productRequests .productRequestsCard .productRequestsGozAt:hover {
    background-color: var(--gray4);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsCard .productRequestsGozAt img {
    width: calc(var(--1) * 18);
    height: calc(var(--1) * 10);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsPopUp {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--1) * 1200);
    min-height: calc(var(--1) * 500);
    background-color: white;
    border: 1px solid #ccc;
    z-index: 9999;
    padding: calc(var(--1) * 75);
    overflow: auto;
  }
  .hesabım .hesabimcontent .productRequests .productRequestsPopUp .title {
    margin-bottom: calc(var(--1) * 50);
    position: relative;
  }
  .hesabım .hesabimcontent .productRequests .productRequestsPopUp .title h5 {
    font-size: calc(var(--1) * 14);
    line-height: calc(var(--1) * 17);
    color: var(--gray1);
    font-weight: 400;
    letter-spacing: 5px;
  }
  .hesabım .hesabimcontent .productRequests .productRequestsPopUp .title h1 {
    font-size: calc(var(--1) * 38);
    color: var(--black);
    line-height: calc(var(--1) * 48);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsPopUp .title h1 span {
    color: var(--green);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsPopUp .title .closeIcon1 {
    width: calc(var(--1) * 20);
    height: calc(var(--1) * 20);
    position: absolute;
    cursor: pointer;
    top: 0;
    right: 0;
  }
  .hesabım .hesabimcontent .productRequests .productRequestsPopUp .title .closeIcon1 img {
    width: 100%;
  }
  .hesabım .hesabimcontent .productRequests .productRequestsPopUp .title .closeIcon1:hover {
    transform: scale(1.1);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsPopUp .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--1) * 20);
    margin-bottom: calc(var(--1) * 20);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsPopUp .row .info {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
    display: block !important;
    font-size: calc(var(--1) * 13);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: none;
  }
}
@media only screen and (max-width: 767.98px) {
  .hesabım {
    width: 95%;
    margin-inline: auto;
  }
  .hesabım .activeSidebar {
    color: var(--black);
    font-weight: bold;
  }
  .hesabım .hesabimcontent {
    width: 100%;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    align-self: stretch;
    padding-block: calc(var(--dsm-1) * 10);
  }
  .hesabım .hesabimcontent .sidebar {
    border: 2px solid #e7e7e7;
    padding: calc(var(--dsm-1) * 15);
  }
  .hesabım .hesabimcontent .sidebar ul .sidebarTitle {
    font-weight: bold;
    font-size: calc(var(--dsm-1) * 16);
    cursor: auto;
  }
  .hesabım .hesabimcontent .sidebar ul li {
    padding-bottom: calc(var(--dsm-1) * 15);
    margin-bottom: calc(var(--dsm-1) * 15);
    border-bottom: 1px solid #e7e7e7;
    font-size: calc(var(--dsm-1) * 12);
    cursor: pointer;
    transition: 0.2s;
  }
  .hesabım .hesabimcontent .sidebar ul li:last-child {
    border: none;
    color: red;
    font-weight: bold;
  }
  .hesabım .hesabimcontent .sidebar ul li:not(:last-child):hover {
    color: var(--black);
    font-weight: bold;
  }
  .hesabım .hesabimcontent .personalContent {
    margin-top: calc(var(--dsm-1) * 20);
    padding-inline: calc(var(--dsm-1) * 15);
  }
  .hesabım .hesabimcontent .personalContent h2 {
    font-size: calc(var(--dsm-1) * 18);
    color: var(--black);
    margin-bottom: calc(var(--dsm-1) * 20);
  }
  .hesabım .hesabimcontent .personalContent h2 span {
    color: var(--green);
  }
  .hesabım .hesabimcontent .personalContent .row {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--dsm-1) * 15);
    color: var(--gray2);
    font-size: calc(var(--dsm-1) * 14);
    margin-bottom: calc(var(--dsm-1) * 15);
  }
  .hesabım .hesabimcontent .personalContent .row .name {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 5);
  }
  .hesabım .hesabimcontent .personalContent .row .name input {
    font-size: calc(var(--dsm-1) * 12);
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  .hesabım .hesabimcontent .personalContent .row .surname {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 5);
  }
  .hesabım .hesabimcontent .personalContent .row .surname input {
    padding: calc(var(--dsm-1) * 16);
    font-size: calc(var(--dsm-1) * 12);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  .hesabım .hesabimcontent .personalContent .row .mail {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 5);
  }
  .hesabım .hesabimcontent .personalContent .row .mail input {
    padding: calc(var(--dsm-1) * 16);
    font-size: calc(var(--dsm-1) * 12);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  .hesabım .hesabimcontent .personalContent .row .firma {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 5);
  }
  .hesabım .hesabimcontent .personalContent .row .firma input {
    padding: calc(var(--dsm-1) * 16);
    font-size: calc(var(--dsm-1) * 12);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  .hesabım .hesabimcontent .personalContent .row .phone {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 5);
  }
  .hesabım .hesabimcontent .personalContent .row .phone input {
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
    font-size: calc(var(--dsm-1) * 12);
  }
  .hesabım .hesabimcontent .personalContent .row .date {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 5);
  }
  .hesabım .hesabimcontent .personalContent .row .date input {
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
    font-size: calc(var(--dsm-1) * 12);
  }
  .hesabım .hesabimcontent .personalContent .row .gender {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 5);
  }
  .hesabım .hesabimcontent .personalContent .row .gender select {
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
    font-size: calc(var(--dsm-1) * 12);
  }
  .hesabım .hesabimcontent .personalContent .addres {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 5);
    width: 100%;
  }
  .hesabım .hesabimcontent .personalContent .addres input {
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  .hesabım .hesabimcontent .personalContent .changepass {
    margin-top: calc(var(--dsm-1) * 20);
    border: 2px solid #e7e7e7;
    padding: calc(var(--dsm-1) * 10);
  }
  .hesabım .hesabimcontent .personalContent .changepass h2 {
    font-size: calc(var(--dsm-1) * 16);
    color: var(--black);
    margin-bottom: calc(var(--dsm-1) * 20);
  }
  .hesabım .hesabimcontent .personalContent .changepass h2 span {
    color: var(--green);
  }
  .hesabım .hesabimcontent .personalContent .changepass .row-1 {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 10);
    color: var(--gray2);
    font-size: calc(var(--dsm-1) * 14);
  }
  .hesabım .hesabimcontent .personalContent .changepass .row-1 .oldPass {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 5);
  }
  .hesabım .hesabimcontent .personalContent .changepass .row-1 .oldPass input {
    padding: calc(var(--dsm-1) * 16);
    font-size: calc(var(--dsm-1) * 12);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  .hesabım .hesabimcontent .personalContent .changepass .row-1 .newPass {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 5);
  }
  .hesabım .hesabimcontent .personalContent .changepass .row-1 .newPass input {
    padding: calc(var(--dsm-1) * 16);
    font-size: calc(var(--dsm-1) * 12);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  .hesabım .hesabimcontent .personalContent .changepass .row-1 .againPass {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 5);
  }
  .hesabım .hesabimcontent .personalContent .changepass .row-1 .againPass input {
    padding: calc(var(--dsm-1) * 16);
    font-size: calc(var(--dsm-1) * 12);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  .hesabım .hesabimcontent .send {
    margin: calc(var(--dsm-1) * 15);
    padding-block: calc(var(--dsm-1) * 20);
    padding-inline: calc(var(--dsm-1) * 60);
    font-size: calc(var(--dsm-1) * 12);
    width: -moz-max-content;
    width: max-content;
    color: var(--white);
    background-color: var(--black);
    outline: none;
    border: none;
    cursor: pointer;
  }
  .hesabım .hesabimcontent .sellerContent {
    width: 95%;
    margin-inline: auto;
    padding-inline: calc(var(--dsm-1) * 0);
    margin-top: calc(var(--dsm-1) * 15);
  }
  .hesabım .hesabimcontent .sellerContent h2 {
    font-size: calc(var(--dsm-1) * 22);
    color: var(--black);
    margin-bottom: calc(var(--dsm-1) * 15);
  }
  .hesabım .hesabimcontent .sellerContent h2 span {
    color: var(--green);
  }
  .hesabım .hesabimcontent .sellerContent .row {
    color: var(--gray2);
    font-size: calc(var(--dsm-1) * 14);
    margin-bottom: calc(var(--dsm-1) * 15);
    border: 1px solid #e7e7e7;
  }
  .hesabım .hesabimcontent .sellerContent .row h3 {
    width: 100%;
    background-color: var(--gray3);
    color: var(--black);
    padding: calc(var(--dsm-1) * 11) calc(var(--dsm-1) * 15);
  }
  .hesabım .hesabimcontent .sellerContent .row .information {
    display: flex;
    flex-direction: column;
    padding: calc(var(--dsm-1) * 15);
    gap: calc(var(--dsm-1) * 15);
    color: var(--black);
  }
  .hesabım .hesabimcontent .supportContent {
    width: 95%;
    margin-inline: auto;
    padding-inline: calc(var(--dsm-1) * 0);
    margin-top: calc(var(--dsm-1) * 20);
  }
  .hesabım .hesabimcontent .supportContent h2 {
    font-size: calc(var(--dsm-1) * 22);
    color: var(--black);
    margin-bottom: calc(var(--dsm-1) * 20);
  }
  .hesabım .hesabimcontent .supportContent h2 span {
    color: var(--green);
  }
  .hesabım .hesabimcontent .supportContent .row {
    color: var(--gray2);
    font-size: calc(var(--dsm-1) * 14);
    margin-bottom: calc(var(--dsm-1) * 15);
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 15);
  }
  .hesabım .hesabimcontent .supportContent .row .subject {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 5);
  }
  .hesabım .hesabimcontent .supportContent .row .subject input {
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  .hesabım .hesabimcontent .supportContent .row .fileadd {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 5);
  }
  .hesabım .hesabimcontent .supportContent .row .fileadd input {
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  .hesabım .hesabimcontent .supportContent .row .message {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 5);
  }
  .hesabım .hesabimcontent .supportContent .row .message textarea {
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    width: 100%;
    background-color: var(--gray);
    resize: vertical;
  }
  .hesabım .hesabimcontent .supportContent .row .send {
    margin: calc(var(--dsm-1) * 0);
    padding-block: calc(var(--dsm-1) * 20);
    padding-inline: calc(var(--dsm-1) * 60);
    width: -moz-max-content;
    width: max-content;
    color: var(--white);
    background-color: var(--black);
    outline: none;
    border: none;
    cursor: pointer;
  }
  .hesabım .hesabimcontent .myFavoritesContent {
    width: 95%;
    margin-inline: auto;
    padding-inline: calc(var(--dsm-1) * 0);
    margin-top: calc(var(--dsm-1) * 1 / 2 * 30);
  }
  .hesabım .hesabimcontent .myFavoritesContent h2 {
    font-size: calc(var(--dsm-1) * 22);
    color: var(--black);
    margin-bottom: calc(var(--dsm-1) * 25);
  }
  .hesabım .hesabimcontent .myFavoritesContent h2 span {
    color: var(--green);
  }
  .hesabım .hesabimcontent .myFavoritesContent .favoriteTitle {
    display: flex;
    justify-content: space-between;
    font-size: calc(var(--dsm-1) * 14);
    font-weight: bold;
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: calc(var(--dsm-1) * 12);
  }
  .hesabım .hesabimcontent .myFavoritesContent .favoriteTitle span {
    padding-right: calc(var(--dsm-1) * 10);
  }
  .hesabım .hesabimcontent .myFavoritesContent .favoriteCard {
    margin-top: calc(var(--dsm-1) * 21);
    position: relative;
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    gap: calc(var(--dsm-1) * 30);
    justify-self: space-between;
    align-items: center;
    border-bottom: 1px solid #e7e7e7;
  }
  .hesabım .hesabimcontent .myFavoritesContent .favoriteCard:last-of-type {
    border-bottom: none;
  }
  .hesabım .hesabimcontent .myFavoritesContent .favoriteCard .image {
    display: flex;
    gap: calc(var(--dsm-1) * 10);
  }
  .hesabım .hesabimcontent .myFavoritesContent .favoriteCard .image img {
    width: calc(var(--dsm-1) * 2 / 3 * 120);
    height: calc(var(--dsm-1) * 2 / 3 * 80);
  }
  .hesabım .hesabimcontent .myFavoritesContent .favoriteCard .image .close {
    width: calc(var(--dsm-1) * 20);
    height: calc(var(--dsm-1) * 20);
    border-radius: 50%;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .hesabım .hesabimcontent .myFavoritesContent .favoriteCard .image .close:hover {
    scale: 1.1;
    box-shadow: 0 0 10px 0 rgba(227, 9, 9, 0.5);
  }
  .hesabım .hesabimcontent .myFavoritesContent .favoriteCard .image .close img {
    width: calc(var(--dsm-1) * 7);
    height: calc(var(--dsm-1) * 7);
  }
  .hesabım .hesabimcontent .myFavoritesContent .favoriteCard .favoriteName {
    font-size: calc(var(--dsm-1) * 14);
  }
  .hesabım .hesabimcontent .myFavoritesContent .favoriteCard .favoriteGozAt {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: flex-end;
    width: calc(var(--dsm-1) * 65);
    height: calc(var(--dsm-1) * 42);
    background-color: var(--gray3);
    cursor: pointer;
    transition: 0.3s;
  }
  .hesabım .hesabimcontent .myFavoritesContent .favoriteCard .favoriteGozAt:hover {
    background-color: var(--gray4);
  }
  .hesabım .hesabimcontent .myFavoritesContent .favoriteCard .favoriteGozAt img {
    width: calc(var(--dsm-1) * 18);
    height: calc(var(--dsm-1) * 10);
  }
  .hesabım .hesabimcontent .myDemands {
    width: 95%;
    margin-inline: auto;
    padding-inline: calc(var(--dsm-1) * 0);
    margin-top: calc(var(--dsm-1) * 1 / 2 * 30);
    margin-bottom: calc(var(--dsm-1) * 1 / 2 * 30);
  }
  .hesabım .hesabimcontent .myDemands h2 {
    font-size: calc(var(--dsm-1) * 22);
    color: var(--black);
    margin-bottom: calc(var(--dsm-1) * 25);
  }
  .hesabım .hesabimcontent .myDemands h2 span {
    color: var(--green);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsTitle {
    display: flex;
    justify-content: space-between;
    font-size: calc(var(--dsm-1) * 14);
    font-weight: bold;
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: calc(var(--dsm-1) * 12);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsTitle span {
    padding-right: calc(var(--dsm-1) * 10);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsCard {
    padding-block: calc(var(--dsm-1) * 21);
    position: relative;
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    gap: calc(var(--dsm-1) * 30);
    justify-self: space-between;
    align-items: center;
    border-bottom: 1px solid #e7e7e7;
  }
  .hesabım .hesabimcontent .myDemands .myDemandsCard:last-of-type {
    border-bottom: none;
  }
  .hesabım .hesabimcontent .myDemands .myDemandsCard .image {
    display: flex;
    gap: calc(var(--dsm-1) * 10);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsCard .image .project {
    width: calc(var(--dsm-1) * 2 / 3 * 120);
    height: calc(var(--dsm-1) * 2 / 3 * 80);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hesabım .hesabimcontent .myDemands .myDemandsCard .image .close {
    width: calc(var(--dsm-1) * 20);
    height: calc(var(--dsm-1) * 20);
    border-radius: 50%;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .hesabım .hesabimcontent .myDemands .myDemandsCard .image .close:hover {
    scale: 1.1;
    box-shadow: 0 0 10px 0 rgba(227, 9, 9, 0.5);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsCard .image .close img {
    width: calc(var(--dsm-1) * 7);
    height: calc(var(--dsm-1) * 7);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsCard .myDemandsName {
    font-size: calc(var(--dsm-1) * 14);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsCard .myDemandsGozAt {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: flex-end;
    width: calc(var(--dsm-1) * 65);
    height: calc(var(--dsm-1) * 42);
    background-color: var(--gray3);
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
  }
  .hesabım .hesabimcontent .myDemands .myDemandsCard .myDemandsGozAt:hover {
    background-color: var(--gray4);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsCard .myDemandsGozAt img {
    width: calc(var(--dsm-1) * 18);
    height: calc(var(--dsm-1) * 10);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsPopUp {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    background-color: white;
    border: 1px solid #ccc;
    z-index: 9999;
    padding: calc(var(--dsm-1) * 20);
    overflow: auto;
  }
  .hesabım .hesabimcontent .myDemands .myDemandsPopUp .title {
    margin-bottom: calc(var(--dsm-1) * 10);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsPopUp .title h5 {
    font-size: calc(var(--dsm-1) * 14);
    line-height: calc(var(--dsm-1) * 17);
    color: var(--gray1);
    font-weight: 400;
    letter-spacing: 5px;
  }
  .hesabım .hesabimcontent .myDemands .myDemandsPopUp .title h1 {
    font-size: calc(var(--dsm-1) * 25);
    color: var(--black);
    line-height: calc(var(--dsm-1) * 35);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsPopUp .title h1 span {
    color: var(--green);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsPopUp .title .closeIcon1 {
    width: calc(var(--dsm-1) * 20);
    height: calc(var(--dsm-1) * 20);
    position: absolute;
    cursor: pointer;
    top: calc(var(--dsm-1) * 20);
    right: calc(var(--dsm-1) * 20);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsPopUp .title .closeIcon1 img {
    width: 100%;
  }
  .hesabım .hesabimcontent .myDemands .myDemandsPopUp .title .closeIcon1:hover {
    transform: scale(1.1);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsPopUp .row {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--dsm-1) * 10);
    margin-bottom: calc(var(--dsm-1) * 10);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsPopUp .row .info {
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
    display: block !important;
    font-size: calc(var(--dsm-1) * 13);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsPopUp .rowNot {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--dsm-1) * 10);
    margin-bottom: calc(var(--dsm-1) * 10);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsPopUp .rowNot .info {
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
    display: block !important;
    font-size: calc(var(--dsm-1) * 13);
  }
  .hesabım .hesabimcontent .myDemands .myDemandsOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: none;
  }
  .hesabım .hesabimcontent .productRequests {
    width: 95%;
    margin-inline: auto;
    padding-inline: calc(var(--dsm-1) * 0);
    margin-top: calc(var(--dsm-1) * 1 / 2 * 30);
    margin-bottom: calc(var(--dsm-1) * 1 / 2 * 30);
  }
  .hesabım .hesabimcontent .productRequests h2 {
    font-size: calc(var(--dsm-1) * 22);
    color: var(--black);
    margin-bottom: calc(var(--dsm-1) * 25);
  }
  .hesabım .hesabimcontent .productRequests h2 span {
    color: var(--green);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsTitle {
    display: flex;
    justify-content: space-between;
    font-size: calc(var(--dsm-1) * 14);
    font-weight: bold;
    border-bottom: 1px solid #e7e7e7;
    padding-bottom: calc(var(--dsm-1) * 12);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsTitle span {
    padding-right: calc(var(--dsm-1) * 10);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsCard {
    padding-block: calc(var(--dsm-1) * 21);
    position: relative;
    display: grid;
    grid-template-columns: 1fr 5fr 1fr;
    gap: calc(var(--dsm-1) * 30);
    justify-self: space-between;
    align-items: center;
    border-bottom: 1px solid #e7e7e7;
  }
  .hesabım .hesabimcontent .productRequests .productRequestsCard:last-of-type {
    border-bottom: none;
  }
  .hesabım .hesabimcontent .productRequests .productRequestsCard .image {
    display: flex;
    gap: calc(var(--dsm-1) * 10);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsCard .image .project {
    width: calc(var(--dsm-1) * 2 / 3 * 120);
    height: calc(var(--dsm-1) * 2 / 3 * 80);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hesabım .hesabimcontent .productRequests .productRequestsCard .image .close {
    width: calc(var(--dsm-1) * 20);
    height: calc(var(--dsm-1) * 20);
    border-radius: 50%;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
  }
  .hesabım .hesabimcontent .productRequests .productRequestsCard .image .close:hover {
    scale: 1.1;
    box-shadow: 0 0 10px 0 rgba(227, 9, 9, 0.5);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsCard .image .close img {
    width: calc(var(--dsm-1) * 7);
    height: calc(var(--dsm-1) * 7);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsCard .productRequestsName {
    font-size: calc(var(--dsm-1) * 14);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsCard .productRequestsGozAt {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: flex-end;
    width: calc(var(--dsm-1) * 65);
    height: calc(var(--dsm-1) * 42);
    background-color: var(--gray3);
    outline: none;
    border: none;
    cursor: pointer;
    transition: 0.3s;
  }
  .hesabım .hesabimcontent .productRequests .productRequestsCard .productRequestsGozAt:hover {
    background-color: var(--gray4);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsCard .productRequestsGozAt img {
    width: calc(var(--dsm-1) * 18);
    height: calc(var(--dsm-1) * 10);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsPopUp {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    background-color: white;
    border: 1px solid #ccc;
    z-index: 9999;
    padding: calc(var(--dsm-1) * 20);
    overflow: auto;
  }
  .hesabım .hesabimcontent .productRequests .productRequestsPopUp .title {
    margin-bottom: calc(var(--dsm-1) * 10);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsPopUp .title h5 {
    font-size: calc(var(--dsm-1) * 14);
    line-height: calc(var(--dsm-1) * 17);
    color: var(--gray1);
    font-weight: 400;
    letter-spacing: 5px;
  }
  .hesabım .hesabimcontent .productRequests .productRequestsPopUp .title h1 {
    font-size: calc(var(--dsm-1) * 25);
    color: var(--black);
    line-height: calc(var(--dsm-1) * 35);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsPopUp .title h1 span {
    color: var(--green);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsPopUp .title .closeIcon1 {
    width: calc(var(--dsm-1) * 20);
    height: calc(var(--dsm-1) * 20);
    position: absolute;
    cursor: pointer;
    top: calc(var(--dsm-1) * 20);
    right: calc(var(--dsm-1) * 20);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsPopUp .title .closeIcon1 img {
    width: 100%;
  }
  .hesabım .hesabimcontent .productRequests .productRequestsPopUp .title .closeIcon1:hover {
    transform: scale(1.1);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsPopUp .row {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--dsm-1) * 10);
    margin-bottom: calc(var(--dsm-1) * 10);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsPopUp .row .info {
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
    display: block !important;
    font-size: calc(var(--dsm-1) * 13);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsPopUp .rowNot {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--dsm-1) * 10);
    margin-bottom: calc(var(--dsm-1) * 10);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsPopUp .rowNot .info {
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
    display: block !important;
    font-size: calc(var(--dsm-1) * 13);
  }
  .hesabım .hesabimcontent .productRequests .productRequestsOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: none;
  }
}
@media only screen and (min-width: 768px) {
  .kategori-nav {
    width: 95%;
    margin-inline: auto;
  }
  .kategori-nav .kategori-nav-list {
    display: flex;
    gap: calc(var(--1) * 30);
    margin-block: calc(var(--1) * 30);
    font-size: calc(var(--1) * 16);
  }
  .kategori-nav .kategori-nav-list .active {
    color: var(--green);
  }
  .kategori-nav .kategori-nav-list .kategori-nav-item {
    cursor: pointer;
    transition: 0.3s;
  }
  .kategori-nav .kategori-nav-list .kategori-nav-item:hover {
    color: var(--green);
  }
  .product {
    width: 95%;
    margin-inline: auto;
    display: flex;
    gap: calc(var(--1) * 60);
    margin-bottom: calc(var(--1) * 50);
  }
  .product .product-img {
    max-width: calc(var(--1) * 650);
    overflow: hidden;
  }
  .product .product-img img {
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 1s;
  }
  .product .product-img:hover img {
    transform: scale(1.1);
  }
  .product .product-detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(var(--1) * 10);
    max-width: calc(var(--1) * 640);
  }
  .product .product-detail h4 {
    color: var(--gray1);
    font-size: calc(var(--1) * 14);
    letter-spacing: calc(var(--1) * 2);
  }
  .product .product-detail h2 {
    color: var(--black);
    font-size: calc(var(--1) * 40);
    line-height: calc(var(--1) * 50);
    font-weight: bold;
    position: relative;
  }
  .product .product-detail h2::after {
    content: "";
    width: calc(var(--1) * 120);
    height: calc(var(--1) * 2);
    position: absolute;
    left: calc(var(--1) * -130);
    top: calc(var(--1) * 25);
    border-top: 1px solid var(--black);
  }
  .product .product-detail h2::before {
    content: "";
    width: calc(var(--1) * 10);
    height: calc(var(--1) * 10);
    border-radius: 50%;
    position: absolute;
    left: calc(var(--1) * -140);
    top: calc(var(--1) * 21);
    border: 1px solid var(--black);
  }
  .product .product-detail h2 span {
    color: var(--green);
  }
  .product .product-detail h2 p {
    font-size: calc(var(--1) * 18);
    line-height: calc(var(--1) * 30);
    letter-spacing: calc(var(--1) * 10);
  }
  .product .product-detail .product-button {
    width: -moz-max-content;
    width: max-content;
    outline: none;
    background: none;
    border: 1px solid var(--gray1);
    padding: calc(var(--1) * 13) calc(var(--1) * 15);
    display: flex;
    align-items: center;
    gap: calc(var(--1) * 15);
    color: var(--gray4);
    font-size: calc(var(--1) * 14);
    margin-top: calc(var(--1) * 20);
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 2;
  }
  .product .product-detail .product-button:hover {
    color: #fff;
    background: #222;
    border-color: transparent;
  }
  .product-2 {
    width: 95%;
    margin-inline: auto;
    display: flex;
    justify-content: end;
    gap: calc(var(--1) * 60);
    margin-bottom: calc(var(--1) * 50);
  }
  .product-2 .product-img {
    max-width: calc(var(--1) * 650);
    overflow: hidden;
  }
  .product-2 .product-img img {
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    transition: transform 1s;
  }
  .product-2 .product-img:hover img {
    transform: scale(1.1);
  }
  .product-2 .product-detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end;
    text-align: right;
    gap: calc(var(--1) * 10);
    max-width: calc(var(--1) * 640);
  }
  .product-2 .product-detail h4 {
    color: var(--gray1);
    font-size: calc(var(--1) * 14);
    letter-spacing: calc(var(--1) * 2);
  }
  .product-2 .product-detail h2 {
    color: var(--black);
    font-size: calc(var(--1) * 40);
    line-height: calc(var(--1) * 50);
    font-weight: bold;
    position: relative;
  }
  .product-2 .product-detail h2::after {
    content: "";
    width: calc(var(--1) * 120);
    height: calc(var(--1) * 2);
    position: absolute;
    right: calc(var(--1) * -130);
    top: calc(var(--1) * 25);
    border-top: 1px solid var(--black);
  }
  .product-2 .product-detail h2::before {
    content: "";
    width: calc(var(--1) * 10);
    height: calc(var(--1) * 10);
    border-radius: 50%;
    position: absolute;
    right: calc(var(--1) * -140);
    top: calc(var(--1) * 21);
    border: 1px solid var(--black);
  }
  .product-2 .product-detail h2 span {
    color: var(--green);
  }
  .product-2 .product-detail h2 p {
    font-size: calc(var(--1) * 18);
    line-height: calc(var(--1) * 30);
    letter-spacing: calc(var(--1) * 10);
  }
  .product-2 .product-detail .product-button {
    outline: none;
    background: none;
    border: 1px solid var(--gray1);
    padding: calc(var(--1) * 13) calc(var(--1) * 15);
    align-items: center;
    gap: calc(var(--1) * 15);
    color: var(--gray4);
    font-size: calc(var(--1) * 14);
    margin-top: calc(var(--1) * 20);
    position: relative;
    transition: color 0.5s;
    cursor: pointer;
    z-index: 2;
    transition: all 0.3s ease;
    z-index: 2;
  }
  .product-2 .product-detail .product-button:hover {
    color: #fff;
    background: #222;
    border-color: transparent;
    gap: calc(var(--1) * 25);
  }
}
@media only screen and (max-width: 767.98px) {
  .kategori-nav {
    width: 95%;
    margin-inline: auto;
  }
  .kategori-nav .kategori-nav-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 30);
    margin-block: calc(var(--dsm-1) * 70);
    font-size: calc(var(--dsm-1) * 16);
  }
  .kategori-nav .kategori-nav-list .active {
    color: var(--green);
  }
  .kategori-nav .kategori-nav-list .kategori-nav-item {
    cursor: pointer;
    transition: 0.3s;
  }
  .kategori-nav .kategori-nav-list .kategori-nav-item:hover {
    color: var(--green);
  }
  .product {
    width: 95%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) / 2 * 60);
    margin-bottom: calc(var(--dsm-1) * 50);
  }
  .product .product-img img {
    width: 100%;
  }
  .product .product-detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(var(--dsm-1) * 10);
    width: 100%;
  }
  .product .product-detail h4 {
    color: var(--gray1);
    font-size: calc(var(--dsm-1) * 14);
    letter-spacing: calc(var(--dsm-1) * 2);
  }
  .product .product-detail h2 {
    color: var(--black);
    font-size: calc(var(--dsm-1) * 40);
    line-height: calc(var(--dsm-1) * 50);
    font-weight: bold;
    position: relative;
  }
  .product .product-detail h2::after {
    content: "";
    width: calc(var(--dsm-1) * 120);
    height: calc(var(--dsm-1) * 2);
    position: absolute;
    left: calc(var(--dsm-1) * -10);
    top: calc(var(--dsm-1) * -87);
    border-top: 1px solid var(--black);
    transform: rotate(90deg);
  }
  .product .product-detail h2::before {
    content: "";
    width: calc(var(--dsm-1) * 10);
    height: calc(var(--dsm-1) * 10);
    border-radius: 50%;
    position: absolute;
    left: calc(var(--dsm-1) * 45);
    top: calc(var(--dsm-1) * -27);
    border: 1px solid var(--black);
  }
  .product .product-detail h2 span {
    color: var(--green);
  }
  .product .product-detail p {
    font-size: calc(var(--dsm-1) * 14);
    line-height: calc(var(--dsm-1) * 25);
    letter-spacing: calc(var(--dsm-1) * 2);
  }
  .product .product-detail .product-button {
    width: -moz-max-content;
    width: max-content;
    outline: none;
    background: none;
    border: 1px solid var(--gray1);
    padding: calc(var(--dsm-1) * 15);
    display: flex;
    align-items: center;
    gap: calc(var(--dsm-1) * 15);
    color: var(--gray4);
    font-size: calc(var(--dsm-1) * 14);
    margin-top: calc(var(--dsm-1) * 20);
  }
  .product-2 {
    width: 95%;
    margin-inline: auto;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: calc(var(--dsm-1) / 2 * 60);
    margin-bottom: calc(var(--dsm-1) * 50);
  }
  .product-2 .product-img img {
    width: 100%;
  }
  .product-2 .product-detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    gap: calc(var(--dsm-1) * 10);
    text-align: end;
    width: 100%;
  }
  .product-2 .product-detail h4 {
    color: var(--gray1);
    font-size: calc(var(--dsm-1) * 14);
    letter-spacing: calc(var(--dsm-1) * 2);
  }
  .product-2 .product-detail h2 {
    color: var(--black);
    font-size: calc(var(--dsm-1) * 40);
    line-height: calc(var(--dsm-1) * 50);
    font-weight: bold;
    position: relative;
  }
  .product-2 .product-detail h2::after {
    content: "";
    width: calc(var(--dsm-1) * 120);
    height: calc(var(--dsm-1) * 2);
    position: absolute;
    right: calc(var(--dsm-1) * -9);
    top: calc(var(--dsm-1) * -87);
    border-top: 1px solid var(--black);
    transform: rotate(90deg);
  }
  .product-2 .product-detail h2::before {
    content: "";
    width: calc(var(--dsm-1) * 10);
    height: calc(var(--dsm-1) * 10);
    border-radius: 50%;
    position: absolute;
    right: calc(var(--dsm-1) * 45);
    top: calc(var(--dsm-1) * -27);
    border: 1px solid var(--black);
  }
  .product-2 .product-detail h2 span {
    color: var(--green);
  }
  .product-2 .product-detail p {
    font-size: calc(var(--dsm-1) * 14);
    line-height: calc(var(--dsm-1) * 25);
    letter-spacing: calc(var(--dsm-1) * 2);
  }
  .product-2 .product-detail .product-button {
    width: -moz-max-content;
    width: max-content;
    outline: none;
    background: none;
    border: 1px solid var(--gray1);
    padding: calc(var(--dsm-1) * 15);
    display: flex;
    align-items: center;
    gap: calc(var(--dsm-1) * 15);
    color: var(--gray4);
    font-size: calc(var(--dsm-1) * 14);
    margin-top: calc(var(--dsm-1) * 20);
  }
}
@media only screen and (min-width: 768px) {
  .ürün-detay-slider {
    width: 95%;
    margin-inline: auto;
    margin-block: calc(var(--1) * 50);
    height: calc(var(--1) * 600);
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: calc(var(--1) * 20);
  }
  .ürün-detay-slider .swiper {
    width: 100%;
    height: 100%;
    border: 1px solid #707070;
    overflow: hidden;
    position: relative;
  }
  .ürün-detay-slider .swiper .swiper-button-next {
    color: #fff !important;
  }
  .ürün-detay-slider .swiper .swiper-button-next::after {
    font-size: calc(var(--1) * 22) !important;
  }
  .ürün-detay-slider .swiper .swiper-button-prev {
    color: #fff !important;
  }
  .ürün-detay-slider .swiper .swiper-button-prev::after {
    font-size: calc(var(--1) * 22) !important;
  }
  .ürün-detay-slider .swiper .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .ürün-detay-slider .swiper .swiper-slide a {
    width: 100%;
    height: 100%;
  }
  .ürün-detay-slider .swiper .swiper-slide a img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .ürün-detay-slider .slider-detail {
    border: 1px solid #c2c2c2;
    padding: calc(var(--1) * 30) calc(var(--1) * 60);
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 20);
  }
  .ürün-detay-slider .slider-detail h2 {
    font-size: calc(var(--1) * 35);
    color: var(--black);
    line-height: calc(var(--1) * 45);
    font-weight: bold;
  }
  .ürün-detay-slider .slider-detail h2 span {
    color: var(--green);
  }
  .ürün-detay-slider .slider-detail p {
    font-size: calc(var(--1) * 18);
    line-height: calc(var(--1) * 25);
    color: var(--gray4);
  }
  .ürün-detay-slider .slider-detail .detail-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 20);
    margin-top: calc(var(--1) * 20);
  }
  .ürün-detay-slider .slider-detail .detail-list li {
    font-size: calc(var(--1) * 18);
    color: var(--boldgreen);
    font-weight: bold;
  }
  .ürün-detay-slider .slider-detail .detail-list li span {
    font-weight: normal;
    color: var(--gray4);
    margin-left: calc(var(--1) * 5);
  }
  .ürün-detay-slider .slider-detail .buttons {
    display: flex;
    gap: calc(var(--1) * 20);
  }
  .ürün-detay-slider .slider-detail .buttons .teklif {
    width: -moz-max-content;
    width: max-content;
    border: 1px solid var(--green);
    background: none;
    padding: calc(var(--1) * 15) calc(var(--1) * 45);
    color: var(--green);
    font-size: calc(var(--1) * 14);
    font-weight: bold;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
    z-index: 3;
  }
  .ürün-detay-slider .slider-detail .buttons .teklif:hover {
    color: var(--white);
    background: var(--green);
  }
  .ürün-detay-slider .slider-detail .buttons .addFavori {
    width: -moz-max-content;
    width: max-content;
    border: 1px solid var(--green);
    background: none;
    padding: calc(var(--1) * 15) calc(var(--1) * 45);
    color: var(--green);
    font-size: calc(var(--1) * 14);
    font-weight: bold;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
    z-index: 3;
  }
  .ürün-detay-slider .slider-detail .buttons .addFavori:hover {
    color: var(--white);
    background: var(--green);
  }
  .ürün-detay-slider .popup1 {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--1) * 1200);
    min-height: calc(var(--1) * 500);
    background-color: white;
    border: 1px solid #ccc;
    z-index: 9999;
    padding: calc(var(--1) * 75);
    overflow: auto;
  }
  .ürün-detay-slider .popup1 .title {
    margin-bottom: calc(var(--1) * 50);
    position: relative;
  }
  .ürün-detay-slider .popup1 .title h5 {
    font-size: calc(var(--1) * 14);
    line-height: calc(var(--1) * 17);
    color: var(--gray1);
    font-weight: 400;
    letter-spacing: 5px;
  }
  .ürün-detay-slider .popup1 .title h1 {
    font-size: calc(var(--1) * 38);
    color: var(--black);
    line-height: calc(var(--1) * 48);
  }
  .ürün-detay-slider .popup1 .title h1 span {
    color: var(--green);
  }
  .ürün-detay-slider .popup1 .title .closeIcon1 {
    width: calc(var(--1) * 20);
    height: calc(var(--1) * 20);
    position: absolute;
    cursor: pointer;
    top: 0;
    right: 0;
  }
  .ürün-detay-slider .popup1 .title .closeIcon1 img {
    width: 100%;
  }
  .ürün-detay-slider .popup1 .title .closeIcon1:hover {
    transform: scale(1.1);
  }
  .ürün-detay-slider .popup1 .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--1) * 20);
    margin-bottom: calc(var(--1) * 20);
  }
  .ürün-detay-slider .popup1 .row input {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
    display: block !important;
  }
  .ürün-detay-slider .popup1 .rowdosya {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--1) * 20);
    margin-bottom: calc(var(--1) * 20);
  }
  .ürün-detay-slider .popup1 .rowdosya input {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
    display: block !important;
  }
  .ürün-detay-slider .popup1 .button1 {
    width: 100%;
    margin-inline: auto;
    display: flex;
    justify-content: center;
  }
  .ürün-detay-slider .popup1 .button1 .teklif1 {
    margin-top: calc(var(--1) * 20);
    margin-inline: auto;
    text-align: center;
    padding-block: calc(var(--1) * 20);
    padding-inline: calc(var(--1) * 60);
    width: -moz-max-content;
    width: max-content;
    color: var(--white);
    background-color: var(--black);
    outline: none;
    border: none;
    cursor: pointer;
  }
  .ürün-detay-slider .overlay1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: none;
  }
  .ürün-detay-detail {
    width: 95%;
    margin-inline: auto;
    border: 1px solid #c2c2c2;
  }
  .ürün-detay-detail .detail-baslık {
    display: flex;
  }
  .ürün-detay-detail .detail-baslık .active-link {
    color: var(--black) !important;
    background-color: var(--white) !important;
  }
  .ürün-detay-detail .detail-baslık li {
    padding: calc(var(--1) * 10) calc(var(--1) * 50);
    border: 1px solid #c2c2c2;
    color: var(--white);
    background-color: var(--darkgreen);
    cursor: pointer;
  }
  .ürün-detay-detail .detail-baslık li:hover {
    color: var(--black);
    background-color: var(--white);
  }
  .ürün-detay-detail .detail-aciklama {
    padding: calc(var(--1) * 50);
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 25);
  }
  .ürün-detay-detail .detail-aciklama h2 {
    font-size: calc(var(--1) * 38);
    color: var(--black);
    line-height: calc(var(--1) * 45);
    font-weight: bold;
  }
  .ürün-detay-detail .detail-aciklama h2 span {
    color: var(--green);
  }
  .ürün-detay-detail .detail-aciklama p {
    font-size: calc(var(--1) * 18);
  }
  .ürün-detay-detail .detail-üretim {
    padding: calc(var(--1) * 50);
    display: none;
    flex-direction: column;
    gap: calc(var(--1) * 25);
  }
  .ürün-detay-detail .detail-üretim .pdfContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--1) * 20);
  }
  .ürün-detay-detail .detail-üretim .pdfContainer .pdfBox {
    width: 100%;
    border: 2px solid #e7e7e7;
    padding: calc(var(--1) * 25);
    display: flex;
    align-items: center;
    gap: calc(var(--1) * 5);
    border-radius: calc(var(--1) * 10);
  }
  .ürün-detay-detail .detail-üretim .pdfContainer .pdfBox img {
    width: calc(var(--1) * 30);
    display: block;
  }
  .ürün-detay-detail .detail-üretim .pdfContainer .pdfBox img:nth-child(2) {
    display: none;
  }
  .ürün-detay-detail .detail-üretim .pdfContainer .pdfBox:hover {
    color: red;
  }
  .ürün-detay-detail .detail-üretim .pdfContainer .pdfBox:hover img:nth-child(1) {
    display: none;
  }
  .ürün-detay-detail .detail-üretim .pdfContainer .pdfBox:hover img:nth-child(2) {
    display: block;
  }
  .ürün-detay-detail .detail-sözleşme {
    padding: calc(var(--1) * 50);
    display: none;
    flex-direction: column;
    gap: calc(var(--1) * 25);
  }
  .ürün-detay-detail .detail-sözleşme h2 {
    font-size: calc(var(--1) * 38);
    color: var(--black);
    line-height: calc(var(--1) * 45);
    font-weight: bold;
  }
  .ürün-detay-detail .detail-sözleşme h2 span {
    color: var(--green);
  }
  .ürün-detay-detail .detail-sözleşme p {
    font-size: calc(var(--1) * 18);
  }
  .ürün-detay-detail .detail-özellik {
    padding: calc(var(--1) * 50);
    display: none;
    flex-direction: column;
    gap: calc(var(--1) * 25);
  }
  .ürün-detay-detail .detail-özellik .content {
    display: grid;
    grid-template-columns: 1fr 10fr;
    align-items: center;
    font-size: calc(var(--1) * 18);
  }
  .ürün-detay-detail .detail-özellik .content span {
    width: calc(var(--1) * 50);
    height: calc(var(--1) * 50);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gray);
  }
  .ürün-detay-detail .detail-özellik .content span img {
    width: calc(var(--1) * 30);
    height: calc(var(--1) * 30);
  }
  .ürün-detay-detail .detail-özellik .content p {
    padding: calc(var(--1) * 5) calc(var(--1) * 10);
    border-bottom: 3px solid var(--gray);
  }
  .gözat {
    width: 95%;
    margin-inline: auto;
    margin-bottom: calc(var(--1) * 50);
  }
  .gözat .title {
    padding-block: calc(var(--1) * 50);
  }
  .gözat .title h5 {
    font-size: calc(var(--1) * 14);
    line-height: calc(var(--1) * 17);
    color: var(--gray1);
    font-weight: 400;
    letter-spacing: 5px;
    margin-bottom: calc(var(--1) * 10);
  }
  .gözat .title h1 {
    font-size: calc(var(--1) * 38);
    color: var(--black);
    line-height: calc(var(--1) * 45);
  }
  .gözat .title h1 span {
    color: var(--green);
  }
  .gözat .ilgili {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: calc(var(--1) * 30);
  }
  .gözat .ilgili .image {
    position: relative;
    cursor: pointer;
  }
  .gözat .ilgili .image .hoverEffect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../assets/gorsel/SiyahPerde.png");
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .gözat .ilgili .image .hoverEffect p {
    font-weight: bold;
    color: var(--white);
    font-size: calc(var(--1) * 19);
    letter-spacing: calc(var(--1) * 5);
    z-index: 55;
    animation: moveUp 0.5s ease-in-out alternate;
  }
  @keyframes moveUp {
    0% {
      transform: translateY(20px);
    }
    100% {
      transform: translateY(0px);
    }
  }
  .gözat .ilgili .image img {
    width: 100%;
  }
  .gözat .ilgili .image::after {
    content: " ";
    width: calc(var(--1) * 0);
    height: calc(var(--1) * 0);
    position: absolute;
    border-top: 1px solid var(--white);
    border-right: 1px solid var(--white);
    z-index: 999;
    top: calc(var(--1) * 10);
    right: calc(var(--1) * 10);
    transition: all 0.5s;
    opacity: 0;
  }
  .gözat .ilgili .image::before {
    content: " ";
    width: calc(var(--1) * 0);
    height: calc(var(--1) * 0);
    position: absolute;
    border-bottom: 1px solid var(--white);
    border-left: 1px solid var(--white);
    z-index: 999;
    bottom: calc(var(--1) * 15);
    left: calc(var(--1) * 10);
    opacity: 0;
    transition: all 0.5s;
  }
  .gözat .ilgili .image:hover::after, .gözat .ilgili .image:hover::before {
    opacity: 1;
    width: calc(var(--1) * 115);
    height: calc(var(--1) * 145);
  }
  .gözat .ilgili .image:hover .hoverEffect {
    display: flex;
  }
  .gözat .mobile-slider-urun-detay {
    display: none;
  }
}
@media only screen and (max-width: 767.98px) {
  .ürün-detay-slider {
    width: 95%;
    margin-inline: auto;
    margin-block: calc(var(--dsm-1) * 50);
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--dsm-1) * 20);
  }
  .ürün-detay-slider .swiper {
    width: 100%;
    height: 100%;
    border: 1px solid #707070;
  }
  .ürün-detay-slider .swiper .swiper-button-next {
    color: #fff !important;
  }
  .ürün-detay-slider .swiper .swiper-button-prev {
    color: #fff !important;
  }
  .ürün-detay-slider .swiper .swiper-slide {
    text-align: center;
    font-size: calc(var(--1) * 18);
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .ürün-detay-slider .swiper .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
  .ürün-detay-slider .slider-detail {
    border: 1px solid #c2c2c2;
    padding: calc(var(--dsm-1) / 2 * 30) calc(var(--dsm-1) / 2 * 60);
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 20);
  }
  .ürün-detay-slider .slider-detail h2 {
    font-size: calc(var(--dsm-1) * 35);
    color: var(--black);
    line-height: calc(var(--dsm-1) * 45);
    font-weight: bold;
  }
  .ürün-detay-slider .slider-detail h2 span {
    color: var(--green);
  }
  .ürün-detay-slider .slider-detail p {
    font-size: calc(var(--dsm-1) * 16);
    line-height: calc(var(--dsm-1) * 25);
    color: var(--gray4);
  }
  .ürün-detay-slider .slider-detail .detail-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 20);
    margin-top: calc(var(--dsm-1) * 20);
  }
  .ürün-detay-slider .slider-detail .detail-list li {
    font-size: calc(var(--dsm-1) * 16);
    color: var(--boldgreen);
    font-weight: bold;
  }
  .ürün-detay-slider .slider-detail .detail-list li span {
    font-weight: normal;
    color: var(--gray4);
    margin-left: calc(var(--dsm-1) * 5);
  }
  .ürün-detay-slider .slider-detail .buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--dsm-1) * 20);
  }
  .ürün-detay-slider .slider-detail .buttons .teklif {
    width: -moz-max-content;
    width: max-content;
    border: 1px solid var(--green);
    background: none;
    padding: calc(var(--dsm-1) * 20) calc(var(--dsm-1) * 55);
    color: var(--green);
    font-size: calc(var(--dsm-1) * 14);
    font-weight: bold;
    cursor: pointer;
  }
  .ürün-detay-slider .slider-detail .buttons .addFavori {
    width: -moz-max-content;
    width: max-content;
    border: 1px solid var(--green);
    background: none;
    padding: calc(var(--dsm-1) * 20) calc(var(--dsm-1) * 45);
    color: var(--green);
    font-size: calc(var(--dsm-1) * 14);
    font-weight: bold;
    cursor: pointer;
  }
  .ürün-detay-slider .popup1 {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
    background-color: white;
    border: 1px solid #ccc;
    z-index: 9999;
    padding: calc(var(--dsm-1) * 20);
    overflow: auto;
  }
  .ürün-detay-slider .popup1 .title {
    margin-bottom: calc(var(--dsm-1) * 10);
  }
  .ürün-detay-slider .popup1 .title h5 {
    font-size: calc(var(--dsm-1) * 14);
    line-height: calc(var(--dsm-1) * 17);
    color: var(--gray1);
    font-weight: 400;
    letter-spacing: 5px;
  }
  .ürün-detay-slider .popup1 .title h1 {
    font-size: calc(var(--dsm-1) * 25);
    color: var(--black);
    line-height: calc(var(--dsm-1) * 35);
  }
  .ürün-detay-slider .popup1 .title h1 span {
    color: var(--green);
  }
  .ürün-detay-slider .popup1 .title .closeIcon1 {
    width: calc(var(--dsm-1) * 20);
    height: calc(var(--dsm-1) * 20);
    position: absolute;
    cursor: pointer;
    top: calc(var(--dsm-1) * 20);
    right: calc(var(--dsm-1) * 20);
  }
  .ürün-detay-slider .popup1 .title .closeIcon1 img {
    width: 100%;
  }
  .ürün-detay-slider .popup1 .title .closeIcon1:hover {
    transform: scale(1.1);
  }
  .ürün-detay-slider .popup1 .row {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--dsm-1) * 10);
    margin-bottom: calc(var(--dsm-1) * 10);
  }
  .ürün-detay-slider .popup1 .row input {
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
    display: block !important;
  }
  .ürün-detay-slider .popup1 .rowdosya {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--dsm-1) * 10);
    margin-bottom: calc(var(--dsm-1) * 10);
  }
  .ürün-detay-slider .popup1 .rowdosya input {
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
    display: block !important;
  }
  .ürün-detay-slider .popup1 .button1 {
    width: 100%;
    margin-inline: auto;
    display: flex;
    justify-content: center;
  }
  .ürün-detay-slider .popup1 .button1 .teklif1 {
    margin-top: calc(var(--dsm-1) * 10);
    margin-inline: auto;
    text-align: center;
    padding-block: calc(var(--dsm-1) * 10);
    padding-inline: calc(var(--dsm-1) * 60);
    width: -moz-max-content;
    width: max-content;
    color: var(--white);
    background-color: var(--black);
    outline: none;
    border: none;
    cursor: pointer;
  }
  .ürün-detay-slider .overlay1 {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    display: none;
  }
  .ürün-detay-detail {
    width: 95%;
    margin-inline: auto;
    border: 1px solid #c2c2c2;
    overflow-x: scroll;
  }
  .ürün-detay-detail .detail-baslık {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    overflow-x: scroll;
    scrollbar-width: none; /* Firefox için gizleme */
    -ms-overflow-style: none; /* IE/Edge için gizleme */
  }
  .ürün-detay-detail .detail-baslık::-webkit-scrollbar {
    display: none; /* Chrome, Safari için scroll çubuğunu gizle */
  }
  .ürün-detay-detail .detail-baslık .active-link {
    color: var(--black) !important;
    background-color: var(--white) !important;
  }
  .ürün-detay-detail .detail-baslık li {
    display: inline-block;
    text-align: center;
    padding: calc(var(--dsm-1) * 10) calc(var(--dsm-1) / 2 * 50);
    border: 1px solid #c2c2c2;
    color: var(--white);
    background-color: var(--darkgreen);
    cursor: pointer;
  }
  .ürün-detay-detail .detail-baslık li:hover {
    color: var(--black);
    background-color: var(--white);
  }
  .ürün-detay-detail .detail-aciklama {
    padding: calc(var(--dsm-1) / 2 * 50);
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 25);
  }
  .ürün-detay-detail .detail-aciklama h2 {
    font-size: calc(var(--dsm-1) * 38);
    color: var(--black);
    line-height: calc(var(--dsm-1) * 45);
    font-weight: bold;
  }
  .ürün-detay-detail .detail-aciklama h2 span {
    color: var(--green);
  }
  .ürün-detay-detail .detail-aciklama p {
    font-size: calc(var(--dsm-1) * 16);
  }
  .ürün-detay-detail .detail-üretim {
    padding: calc(var(--dsm-1) / 2 * 50);
    display: none;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 25);
  }
  .ürün-detay-detail .detail-üretim .pdfContainer {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--1) * 30);
  }
  .ürün-detay-detail .detail-üretim .pdfContainer .pdfBox {
    width: 100%;
    border: 2px solid #e7e7e7;
    padding: calc(var(--dsm-1) / 2 * 25);
    display: flex;
    align-items: center;
    gap: calc(var(--dsm-1) * 5);
    border-radius: calc(var(--dsm-1) * 10);
  }
  .ürün-detay-detail .detail-üretim .pdfContainer .pdfBox img {
    width: calc(var(--dsm-1) * 30);
    display: block;
  }
  .ürün-detay-detail .detail-üretim .pdfContainer .pdfBox img:nth-child(2) {
    display: none;
  }
  .ürün-detay-detail .detail-üretim .pdfContainer .pdfBox:hover {
    color: red;
  }
  .ürün-detay-detail .detail-üretim .pdfContainer .pdfBox:hover img:nth-child(1) {
    display: none;
  }
  .ürün-detay-detail .detail-üretim .pdfContainer .pdfBox:hover img:nth-child(2) {
    display: block;
  }
  .ürün-detay-detail .detail-sözleşme {
    padding: calc(var(--dsm-1) / 2 * 50);
    display: none;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 25);
  }
  .ürün-detay-detail .detail-sözleşme h2 {
    font-size: calc(var(--dsm-1) * 38);
    color: var(--black);
    line-height: calc(var(--dsm-1) * 45);
    font-weight: bold;
  }
  .ürün-detay-detail .detail-sözleşme h2 span {
    color: var(--green);
  }
  .ürün-detay-detail .detail-sözleşme p {
    font-size: calc(var(--dsm-1) * 16);
  }
  .ürün-detay-detail .detail-özellik {
    padding: calc(var(--dsm-1) / 2 * 50);
    display: none;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 25);
  }
  .ürün-detay-detail .detail-özellik .content {
    display: grid;
    grid-template-columns: 1fr 10fr;
    align-items: center;
    font-size: calc(var(--dsm-1) * 18);
    gap: calc(var(--dsm-1) * 20);
  }
  .ürün-detay-detail .detail-özellik .content span {
    width: calc(var(--dsm-1) * 50);
    height: calc(var(--dsm-1) * 50);
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--gray);
  }
  .ürün-detay-detail .detail-özellik .content span img {
    width: calc(var(--dsm-1) * 30);
    height: calc(var(--dsm-1) * 30);
  }
  .ürün-detay-detail .detail-özellik .content p {
    padding: calc(var(--dsm-1) * 5) calc(var(--dsm-1) * 10);
    border-bottom: 3px solid var(--gray);
  }
  .gözat {
    width: 95%;
    margin-inline: auto;
    margin-bottom: calc(var(--dsm-1) * 50);
  }
  .gözat .title {
    padding-block: calc(var(--dsm-1) * 50);
  }
  .gözat .title h5 {
    font-size: calc(var(--dsm-1) * 14);
    line-height: calc(var(--dsm-1) * 17);
    color: var(--gray1);
    font-weight: 400;
    letter-spacing: 5px;
    margin-bottom: calc(var(--dsm-1) * 10);
  }
  .gözat .title h1 {
    font-size: calc(var(--dsm-1) * 38);
    color: var(--black);
    line-height: calc(var(--dsm-1) * 45);
  }
  .gözat .title h1 span {
    color: var(--green);
  }
  .gözat .ilgili {
    width: 100%;
    display: none;
    grid-template-columns: 1fr 1fr 1fr;
    gap: calc(var(--dsm-1) * 30);
  }
  .gözat .ilgili .image {
    position: relative;
    cursor: pointer;
  }
  .gözat .ilgili .image .hoverEffect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../assets/gorsel/SiyahPerde.png");
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .gözat .ilgili .image .hoverEffect p {
    font-weight: bold;
    color: var(--white);
    font-size: calc(var(--dsm-1) * 19);
    letter-spacing: calc(var(--dsm-1) * 5);
    z-index: 55;
  }
  .gözat .ilgili .image img {
    width: 100%;
  }
  .gözat .ilgili .image::after {
    content: " ";
    width: calc(var(--dsm-1) * 0);
    height: calc(var(--dsm-1) * 0);
    position: absolute;
    border-top: 1px solid var(--white);
    border-right: 1px solid var(--white);
    z-index: 999;
    top: calc(var(--dsm-1) * 10);
    right: calc(var(--dsm-1) * 10);
    transition: all 0.5s;
    opacity: 0;
  }
  .gözat .ilgili .image::before {
    content: " ";
    width: calc(var(--dsm-1) * 0);
    height: calc(var(--dsm-1) * 0);
    position: absolute;
    border-bottom: 1px solid var(--white);
    border-left: 1px solid var(--white);
    z-index: 999;
    bottom: calc(var(--dsm-1) * 15);
    left: calc(var(--dsm-1) * 10);
    transition: all 0.5s;
    opacity: 0;
  }
  .gözat .ilgili .image:hover::after, .gözat .ilgili .image:hover::before {
    opacity: 1;
    width: calc(var(--dsm-1) * 115);
    height: calc(var(--dsm-1) * 145);
  }
  .gözat .ilgili .image:hover .hoverEffect {
    display: flex;
  }
  .gözat .mobile-slider-urun-detay .mySwiperMobileUrunDetay .swiper-button-next,
  .gözat .mobile-slider-urun-detay .mySwiperMobileUrunDetay .swiper-button-prev {
    color: var(--white) !important;
  }
  .gözat .mobile-slider-urun-detay .mySwiperMobileUrunDetay .swiper-wrapper .swiper-slide .image {
    position: relative;
    cursor: pointer;
  }
  .gözat .mobile-slider-urun-detay .mySwiperMobileUrunDetay .swiper-wrapper .swiper-slide .image .hoverEffect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../assets/gorsel/SiyahPerde.png");
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .gözat .mobile-slider-urun-detay .mySwiperMobileUrunDetay .swiper-wrapper .swiper-slide .image .hoverEffect p {
    font-weight: bold;
    color: var(--white);
    font-size: calc(var(--dsm-1) * 19);
    letter-spacing: calc(var(--dsm-1) * 5);
    z-index: 55;
  }
  .gözat .mobile-slider-urun-detay .mySwiperMobileUrunDetay .swiper-wrapper .swiper-slide .image img {
    width: 100%;
  }
  .gözat .mobile-slider-urun-detay .mySwiperMobileUrunDetay .swiper-wrapper .swiper-slide .image::after {
    content: " ";
    width: calc(var(--dsm-1) * 115);
    height: calc(var(--dsm-1) * 145);
    position: absolute;
    border-top: 1px solid var(--white);
    border-right: 1px solid var(--white);
    z-index: 999;
    top: calc(var(--dsm-1) * 10);
    right: calc(var(--dsm-1) * 10);
    display: none;
  }
  .gözat .mobile-slider-urun-detay .mySwiperMobileUrunDetay .swiper-wrapper .swiper-slide .image::before {
    content: " ";
    width: calc(var(--dsm-1) * 115);
    height: calc(var(--dsm-1) * 145);
    position: absolute;
    border-bottom: 1px solid var(--white);
    border-left: 1px solid var(--white);
    z-index: 999;
    bottom: calc(var(--dsm-1) * 15);
    left: calc(var(--dsm-1) * 10);
    display: none;
  }
  .gözat .mobile-slider-urun-detay .mySwiperMobileUrunDetay .swiper-wrapper .swiper-slide .image:hover::after, .gözat .mobile-slider-urun-detay .mySwiperMobileUrunDetay .swiper-wrapper .swiper-slide .image:hover::before {
    display: block;
  }
  .gözat .mobile-slider-urun-detay .mySwiperMobileUrunDetay .swiper-wrapper .swiper-slide .image:hover .hoverEffect {
    display: flex;
  }
}
@media only screen and (min-width: 768px) {
  .ürün-nav {
    width: 95%;
    margin-inline: auto;
  }
  .ürün-nav .ürün-nav-list {
    display: flex;
    gap: calc(var(--1) * 30);
    margin-block: calc(var(--1) * 30);
    font-size: calc(var(--1) * 16);
  }
  .ürün-nav .ürün-nav-list .active-ürün {
    color: var(--green);
  }
  .ürün-nav .ürün-nav-list .ürün-nav-item {
    cursor: pointer;
    transition: 0.3s;
  }
  .ürün-nav .ürün-nav-list .ürün-nav-item:hover {
    color: var(--green);
  }
  .ürün-filter {
    width: 100%;
    margin-block: calc(var(--1) * 30);
  }
  .ürün-filter .filter-container {
    width: -moz-max-content;
    width: max-content;
    padding-left: 2%;
    background-color: var(--darkgreen);
  }
  .ürün-filter .ürün-filter-list {
    display: flex;
    color: var(--white);
  }
  .ürün-filter .ürün-filter-list .active-filter {
    background-color: var(--green);
  }
  .ürün-filter .ürün-filter-list .ürün-filter-item {
    padding: calc(var(--1) * 15);
    font-weight: bold;
    font-size: calc(var(--1) * 14);
    cursor: pointer;
  }
  .ürün-filter .ürün-filter-list .ürün-filter-item:hover {
    background-color: var(--green);
  }
  .ürünler {
    width: 95%;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: calc(var(--1) * 30);
    margin-block: calc(var(--1) * 30);
  }
  .ürünler .image {
    position: relative;
    cursor: pointer;
  }
  .ürünler .image .hoverEffect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../assets/gorsel/SiyahPerde.png");
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .ürünler .image .hoverEffect p {
    font-weight: bold;
    color: var(--white);
    font-size: calc(var(--1) * 19);
    letter-spacing: calc(var(--1) * 5);
    z-index: 55;
    animation: moveUp 0.5s ease-in-out alternate;
  }
  @keyframes moveUp {
    0% {
      transform: translateY(20px);
    }
    100% {
      transform: translateY(0px);
    }
  }
  .ürünler .image img {
    width: 100%;
  }
  .ürünler .image::after {
    content: " ";
    width: calc(var(--1) * 0);
    height: calc(var(--1) * 0);
    position: absolute;
    border-top: 1px solid var(--white);
    border-right: 1px solid var(--white);
    z-index: 999;
    top: calc(var(--1) * 10);
    right: calc(var(--1) * 10);
    transition: all 0.5s;
    opacity: 0;
  }
  .ürünler .image::before {
    content: " ";
    width: calc(var(--1) * 0);
    height: calc(var(--1) * 0);
    position: absolute;
    border-bottom: 1px solid var(--white);
    border-left: 1px solid var(--white);
    z-index: 999;
    bottom: calc(var(--1) * 15);
    left: calc(var(--1) * 10);
    opacity: 0;
    transition: all 0.5s;
  }
  .ürünler .image:hover::after, .ürünler .image:hover::before {
    opacity: 1;
    width: calc(var(--1) * 115);
    height: calc(var(--1) * 145);
  }
  .ürünler .image:hover .hoverEffect {
    display: flex;
  }
  .mobile-ürünler {
    display: none;
  }
}
@media only screen and (max-width: 767.98px) {
  main {
    overflow: hidden;
  }
  main .ürün-nav {
    width: 95%;
    margin-inline: auto;
  }
  main .ürün-nav .ürün-nav-list {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 30);
    margin-block: calc(var(--dsm-1) * 30);
    font-size: calc(var(--dsm-1) * 16);
  }
  main .ürün-nav .ürün-nav-list .active-ürün {
    color: var(--green);
  }
  main .ürün-nav .ürün-nav-list .ürün-nav-item {
    cursor: pointer;
    transition: 0.3s;
  }
  main .ürün-nav .ürün-nav-list .ürün-nav-item:hover {
    color: var(--green);
  }
  main .ürün-filter {
    width: 100%;
    margin-block: calc(var(--dsm-1) * 30);
    overflow: auto;
  }
  main .ürün-filter::-webkit-scrollbar {
    width: 0; /* Chrome, Safari için gizleme */
  }
  main .ürün-filter .filter-container {
    width: -moz-max-content;
    width: max-content;
    padding-left: 2%;
    background-color: var(--darkgreen);
    overflow-x: scroll;
  }
  main .ürün-filter .ürün-filter-list {
    display: flex;
    color: var(--white);
    overflow-x: scroll;
    scrollbar-width: none; /* Firefox için gizleme */
    -ms-overflow-style: none; /* IE/Edge için gizleme */
  }
  main .ürün-filter .ürün-filter-list .active-filter {
    background-color: var(--green);
  }
  main .ürün-filter .ürün-filter-list .ürün-filter-item {
    padding: calc(var(--dsm-1) * 15);
    font-weight: bold;
    font-size: calc(var(--dsm-1) * 14);
    cursor: pointer;
  }
  main .ürün-filter .ürün-filter-list .ürün-filter-item:hover {
    background-color: var(--green);
  }
  main .ürünler {
    width: 95%;
    margin-inline: auto;
    display: none;
    grid-template-columns: 1fr;
    gap: calc(var(--dsm-1) * 30);
    margin-block: calc(var(--dsm-1) * 30);
  }
  main .ürünler .image {
    position: relative;
    cursor: pointer;
  }
  main .ürünler .image .hoverEffect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../assets/gorsel/SiyahPerde.png");
    display: none;
    align-items: center;
    justify-content: center;
  }
  main .ürünler .image .hoverEffect p {
    font-weight: bold;
    color: var(--white);
    font-size: calc(var(--dsm-1) * 19);
    letter-spacing: calc(var(--dsm-1) * 5);
    z-index: 55;
  }
  main .ürünler .image img {
    width: 100%;
  }
  main .ürünler .image::after {
    content: " ";
    width: calc(var(--dsm-1) * 0);
    height: calc(var(--dsm-1) * 0);
    position: absolute;
    border-top: 1px solid var(--white);
    border-right: 1px solid var(--white);
    z-index: 999;
    top: calc(var(--dsm-1) * 10);
    right: calc(var(--dsm-1) * 10);
    transition: all 0.5s;
    opacity: 0;
  }
  main .ürünler .image::before {
    content: " ";
    width: calc(var(--dsm-1) * 0);
    height: calc(var(--dsm-1) * 0);
    position: absolute;
    border-bottom: 1px solid var(--white);
    border-left: 1px solid var(--white);
    z-index: 999;
    bottom: calc(var(--dsm-1) * 15);
    left: calc(var(--dsm-1) * 10);
    transition: all 0.5s;
    opacity: 0;
  }
  main .ürünler .image:hover::after, main .ürünler .image:hover::before {
    opacity: 1;
    width: calc(var(--dsm-1) * 115);
    height: calc(var(--dsm-1) * 145);
  }
  main .ürünler .image:hover .hoverEffect {
    display: flex;
  }
  main .mobile-ürünler .mySwiperÜrün {
    overflow: hidden;
    position: relative;
  }
  main .mobile-ürünler .mySwiperÜrün .swiper-pagination {
    top: 0 !important;
    text-align: right;
    margin-right: 100px;
    bottom: none !important;
    width: 90% !important;
    position: relative;
  }
  main .mobile-ürünler .mySwiperÜrün .swiper-button-next {
    top: 14px !important;
    font-size: none !important;
    background-image: url("../assets/icon/arrow-right.svg");
    background-repeat: no-repeat;
    background-position: center;
  }
  main .mobile-ürünler .mySwiperÜrün .swiper-button-next:after {
    content: "";
  }
  main .mobile-ürünler .mySwiperÜrün .swiper-wrapper .swiper-slide .ürünn {
    width: 95%;
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(var(--dsm-1) * 30);
    margin-block: calc(var(--dsm-1) * 30);
  }
  main .mobile-ürünler .mySwiperÜrün .swiper-wrapper .swiper-slide .ürünn .image {
    position: relative;
    cursor: pointer;
  }
  main .mobile-ürünler .mySwiperÜrün .swiper-wrapper .swiper-slide .ürünn .image .hoverEffect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../assets/gorsel/SiyahPerde.png");
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  main .mobile-ürünler .mySwiperÜrün .swiper-wrapper .swiper-slide .ürünn .image .hoverEffect p {
    font-weight: bold;
    color: var(--white);
    font-size: calc(var(--dsm-1) * 19);
    letter-spacing: calc(var(--dsm-1) * 5);
    z-index: 55;
  }
  main .mobile-ürünler .mySwiperÜrün .swiper-wrapper .swiper-slide .ürünn .image img {
    width: 100%;
  }
  main .mobile-ürünler .mySwiperÜrün .swiper-wrapper .swiper-slide .ürünn .image::after {
    content: " ";
    width: calc(var(--dsm-1) * 0);
    height: calc(var(--dsm-1) * 0);
    position: absolute;
    border-top: 1px solid var(--white);
    border-right: 1px solid var(--white);
    z-index: 999;
    top: calc(var(--dsm-1) * 10);
    right: calc(var(--dsm-1) * 10);
    transition: all 0.5s;
    opacity: 0;
  }
  main .mobile-ürünler .mySwiperÜrün .swiper-wrapper .swiper-slide .ürünn .image::before {
    content: " ";
    width: calc(var(--dsm-1) * 0);
    height: calc(var(--dsm-1) * 0);
    position: absolute;
    border-bottom: 1px solid var(--white);
    border-left: 1px solid var(--white);
    z-index: 999;
    bottom: calc(var(--dsm-1) * 15);
    left: calc(var(--dsm-1) * 10);
    transition: all 0.5s;
    opacity: 0;
  }
  main .mobile-ürünler .mySwiperÜrün .swiper-wrapper .swiper-slide .ürünn .image:hover::after, main .mobile-ürünler .mySwiperÜrün .swiper-wrapper .swiper-slide .ürünn .image:hover::before {
    opacity: 1;
    width: calc(var(--dsm-1) * 115);
    height: calc(var(--dsm-1) * 145);
  }
  main .mobile-ürünler .mySwiperÜrün .swiper-wrapper .swiper-slide .ürünn .image:hover .hoverEffect {
    display: flex;
  }
}
@media only screen and (min-width: 768px) {
  .homepage-slider {
    width: 100%;
    height: calc(var(--1) * 700);
    position: relative;
  }
  .homepage-slider .mySwiperHome {
    width: 95%;
    margin-inline: auto;
    height: 100%;
    border: 1px solid #707070;
    overflow: hidden;
  }
  .homepage-slider .mySwiperHome .swiper-button-next {
    color: #707070 !important;
  }
  .homepage-slider .mySwiperHome .swiper-button-next::after {
    font-size: calc(var(--1) * 22) !important;
    right: 0;
  }
  .homepage-slider .mySwiperHome .swiper-button-prev {
    color: #707070 !important;
  }
  .homepage-slider .mySwiperHome .swiper-button-prev::after {
    font-size: calc(var(--1) * 22) !important;
    left: 0;
  }
  .homepage-slider .mySwiperHome .swiper-pagination {
    position: absolute;
    bottom: 0;
  }
  .homepage-slider .mySwiperHome .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .homepage-slider .mySwiperHome .swiper-slide .container {
    width: 83%;
    z-index: 9999;
  }
  .homepage-slider .mySwiperHome .swiper-slide .container .slider-detail {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 10);
    max-width: calc(var(--1) * 640);
    text-align: left;
  }
  .homepage-slider .mySwiperHome .swiper-slide .container .slider-detail h4 {
    color: var(--white);
    font-size: calc(var(--1) * 14);
    letter-spacing: calc(var(--1) * 5);
    font-weight: normal;
  }
  .homepage-slider .mySwiperHome .swiper-slide .container .slider-detail .desktopBaslık {
    color: var(--white);
    font-size: calc(var(--1) * 40);
    line-height: calc(var(--1) * 50);
    font-weight: bold;
    position: relative;
  }
  .homepage-slider .mySwiperHome .swiper-slide .container .slider-detail .desktopBaslık span {
    color: var(--green);
  }
  .homepage-slider .mySwiperHome .swiper-slide .container .slider-detail .mobileBaslık {
    display: none;
  }
  .homepage-slider .mySwiperHome .swiper-slide .container .slider-detail .product-button {
    width: -moz-max-content;
    width: max-content;
    outline: none;
    background: none;
    border: 1px solid var(--white);
    padding: calc(var(--1) * 13) calc(var(--1) * 15);
    display: flex;
    align-items: center;
    gap: calc(var(--1) * 15);
    color: var(--white);
    font-size: calc(var(--1) * 14);
    margin-top: calc(var(--1) * 38);
    position: relative;
    cursor: pointer;
  }
  .homepage-slider .mySwiperHome .swiper-slide .container .slider-detail .product-button:hover {
    background: #ececec;
    color: #222;
  }
  .homepage-slider .mySwiperHome .swiper-slide .sliderBg img {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -o-object-fit: fill;
       object-fit: fill;
  }
  .homepage-slider .mySwiperHome .swiper-slide .sliderBg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../assets/gorsel/SiyahPerde.png");
    z-index: 9;
  }
  .homepage-about {
    width: 83%;
    margin-inline: auto;
    margin-block: calc(var(--1) * 70);
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: calc(var(--1) * 50);
  }
  .homepage-about .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(var(--1) * 10);
    max-height: calc(var(--1) * 470);
    z-index: 999;
  }
  .homepage-about .content h4 {
    color: var(--gray1);
    font-size: calc(var(--1) * 14);
    letter-spacing: calc(var(--1) * 5);
    font-weight: normal;
  }
  .homepage-about .content h2 {
    color: var(--black);
    font-size: calc(var(--1) * 40);
    line-height: calc(var(--1) * 50);
    font-weight: bold;
    position: relative;
  }
  .homepage-about .content h2 span {
    color: var(--green);
  }
  .homepage-about .content p {
    font-size: calc(var(--1) * 18);
    line-height: calc(var(--1) * 30);
  }
  .homepage-about .content .home-about-button {
    width: -moz-max-content;
    width: max-content;
    outline: none;
    background: none;
    border: 1px solid var(--gray1);
    padding: calc(var(--1) * 13) calc(var(--1) * 15);
    display: flex;
    align-items: center;
    gap: calc(var(--1) * 15);
    color: var(--gray4);
    font-size: calc(var(--1) * 14);
    margin-top: calc(var(--1) * 20);
    position: relative;
    transition: all 0.3s ease;
    cursor: pointer;
  }
  .homepage-about .content .home-about-button:hover {
    color: #fff;
    background: #222;
    border-color: transparent;
  }
  .homepage-about .image {
    width: calc(var(--1) * 470);
    height: calc(var(--1) * 470);
    position: relative;
  }
  .homepage-about .image img {
    width: 100%;
  }
  .homepage-about .image::after {
    content: " ";
    width: calc(var(--1) * 115);
    height: calc(var(--1) * 145);
    position: absolute;
    border-top: 1px solid var(--white);
    border-left: 1px solid var(--white);
    z-index: 999;
    top: calc(var(--1) * 10);
    left: calc(var(--1) * 10);
    animation: fadeup 1s ease;
  }
  .homepage-about .image::before {
    content: " ";
    width: calc(var(--1) * 115);
    height: calc(var(--1) * 145);
    position: absolute;
    border-bottom: 1px solid var(--white);
    border-right: 1px solid var(--white);
    z-index: 999;
    bottom: calc(var(--1) * 15);
    right: calc(var(--1) * 10);
    animation: fadedown 1s ease;
  }
  .homepage-about .image .effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../assets/gorsel/SiyahPerde.png");
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .homepage-about .image .effect h2 {
    font-size: calc(var(--1) * 150);
    color: var(--white);
  }
  .homepage-about .image .effect p {
    font-weight: normal;
    color: var(--white);
    font-size: calc(var(--1) * 13);
    letter-spacing: calc(var(--1) * 8);
    z-index: 55;
  }
  @keyframes fadeup {
    0% {
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    100% {
      top: calc(var(--1) * 10);
      left: calc(var(--1) * 10);
      transform: translate(0%, 0%);
    }
  }
  @keyframes fadedown {
    0% {
      bottom: 40%;
      right: 40%;
      transform: translate(-40%, -40%);
    }
    100% {
      bottom: calc(var(--1) * 15);
      right: calc(var(--1) * 10);
      transform: translate(0%, 0%);
    }
  }
  .homepage-period {
    width: 83%;
    margin-inline: auto;
    margin-block: calc(var(--1) * 70);
  }
  .homepage-period .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    max-height: calc(var(--1) * 470);
  }
  .homepage-period .title h4 {
    color: var(--gray1);
    font-size: calc(var(--1) * 14);
    letter-spacing: calc(var(--1) * 5);
    font-weight: normal;
    text-transform: uppercase;
  }
  .homepage-period .title h2 {
    color: var(--black);
    font-size: calc(var(--1) * 40);
    line-height: calc(var(--1) * 50);
    font-weight: bold;
    position: relative;
  }
  .homepage-period .title h2 span {
    color: var(--green);
  }
  .homepage-period .mySwiperPriod {
    margin-block: calc(var(--1) * 50);
  }
  .homepage-period .mySwiperPriod .swiper-button-next,
  .homepage-period .mySwiperPriod .swiper-button-prev {
    color: #707070 !important;
  }
  .homepage-period .mySwiperPriod .swiper-button-next::after,
  .homepage-period .mySwiperPriod .swiper-button-prev::after {
    font-size: calc(var(--1) * 22) !important;
  }
  .homepage-period .mySwiperPriod .swiper-wrapper .swiper-slide .contentSlider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding-block: calc(var(--1) * 20);
  }
  .homepage-period .mySwiperPriod .swiper-wrapper .swiper-slide .contentSlider img {
    transition: all 0.3s ease;
  }
  .homepage-period .mySwiperPriod .swiper-wrapper .swiper-slide .contentSlider .slidertitle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: calc(var(--1) * 18);
    font-weight: bold;
    padding-block: calc(var(--1) * 30);
    position: relative;
  }
  .homepage-period .mySwiperPriod .swiper-wrapper .swiper-slide .contentSlider .slidertitle span {
    position: absolute;
    top: 0;
    font-size: calc(var(--1) * 60);
    color: #ebebeb;
    z-index: -1;
    font-weight: normal;
  }
  .homepage-period .mySwiperPriod .swiper-wrapper .swiper-slide .contentSlider .desc {
    text-align: center;
    font-size: calc(var(--1) * 13);
  }
  .homepage-period .mySwiperPriod .swiper-wrapper .swiper-slide .contentSlider:hover img {
    transform: translateY(-10%);
  }
  .homepage-kategorilerimiz {
    width: 100%;
    margin-block: calc(var(--1) * 70);
    position: relative;
  }
  .homepage-kategorilerimiz .title {
    width: 95%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    max-height: calc(var(--1) * 470);
    position: relative;
  }
  .homepage-kategorilerimiz .title h4 {
    color: var(--gray1);
    font-size: calc(var(--1) * 14);
    letter-spacing: calc(var(--1) * 5);
    font-weight: normal;
    text-transform: uppercase;
  }
  .homepage-kategorilerimiz .title h2 {
    color: var(--black);
    font-size: calc(var(--1) * 40);
    line-height: calc(var(--1) * 50);
    font-weight: bold;
    position: relative;
  }
  .homepage-kategorilerimiz .title h2 span {
    color: var(--green);
  }
  .homepage-kategorilerimiz .title .allProduct {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    gap: calc(var(--1) * 10);
    color: var(--gray4);
  }
  .homepage-kategorilerimiz .title .allProduct a {
    font-size: calc(var(--1) * 15);
  }
  .homepage-kategorilerimiz .ürünler {
    width: 100%;
    display: none;
    grid-template-columns: 1fr 1fr 1fr;
    gap: calc(var(--1) * 30);
  }
  .homepage-kategorilerimiz .ürünler .image {
    position: relative;
    cursor: pointer;
  }
  .homepage-kategorilerimiz .ürünler .image .hoverEffect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../assets/gorsel/SiyahPerde.png");
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .homepage-kategorilerimiz .ürünler .image .hoverEffect p {
    font-weight: bold;
    color: var(--white);
    font-size: calc(var(--1) * 19);
    letter-spacing: calc(var(--1) * 5);
    z-index: 55;
    animation: moveUp 0.5s ease-in-out alternate;
  }
  @keyframes moveUp {
    0% {
      transform: translateY(20px);
    }
    100% {
      transform: translateY(0px);
    }
  }
  .homepage-kategorilerimiz .ürünler .image img {
    width: 100%;
  }
  .homepage-kategorilerimiz .ürünler .image::after {
    content: " ";
    width: calc(var(--1) * 0);
    height: calc(var(--1) * 0);
    position: absolute;
    border-top: 1px solid var(--white);
    border-right: 1px solid var(--white);
    z-index: 999;
    top: calc(var(--1) * 10);
    right: calc(var(--1) * 10);
    transition: all 0.5s;
    opacity: 0;
  }
  .homepage-kategorilerimiz .ürünler .image::before {
    content: " ";
    width: calc(var(--1) * 0);
    height: calc(var(--1) * 0);
    position: absolute;
    border-bottom: 1px solid var(--white);
    border-left: 1px solid var(--white);
    z-index: 999;
    bottom: calc(var(--1) * 15);
    left: calc(var(--1) * 10);
    opacity: 0;
    transition: all 0.5s;
  }
  .homepage-kategorilerimiz .ürünler .image:hover::after, .homepage-kategorilerimiz .ürünler .image:hover::before {
    opacity: 1;
    width: calc(var(--1) * 115);
    height: calc(var(--1) * 145);
  }
  .homepage-kategorilerimiz .ürünler .image:hover .hoverEffect {
    display: flex;
  }
  .homepage-kategorilerimiz .mobile-slider-urunler {
    margin-top: calc(var(--1) * 50);
    position: relative;
    width: 100%;
  }
  .homepage-kategorilerimiz .mobile-slider-urunler .mySwiperMobileUrun {
    width: 95%;
    margin-inline: auto;
    overflow: hidden;
  }
  .homepage-kategorilerimiz .mobile-slider-urunler .mySwiperMobileUrun .swiper-button-next {
    color: #707070 !important;
    right: 0 !important;
  }
  .homepage-kategorilerimiz .mobile-slider-urunler .mySwiperMobileUrun .swiper-button-next::after {
    font-size: calc(var(--1) * 22) !important;
  }
  .homepage-kategorilerimiz .mobile-slider-urunler .mySwiperMobileUrun .swiper-button-prev {
    color: #707070 !important;
    left: 0 !important;
  }
  .homepage-kategorilerimiz .mobile-slider-urunler .mySwiperMobileUrun .swiper-button-prev::after {
    font-size: calc(var(--1) * 22) !important;
  }
  .homepage-kategorilerimiz .mobile-slider-urunler .mySwiperMobileUrun .swiper-wrapper .swiper-slide .image {
    position: relative;
    cursor: pointer;
  }
  .homepage-kategorilerimiz .mobile-slider-urunler .mySwiperMobileUrun .swiper-wrapper .swiper-slide .image .hoverEffect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../assets/gorsel/SiyahPerde.png");
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .homepage-kategorilerimiz .mobile-slider-urunler .mySwiperMobileUrun .swiper-wrapper .swiper-slide .image .hoverEffect p {
    font-weight: bold;
    color: var(--white);
    font-size: calc(var(--1) * 19);
    letter-spacing: calc(var(--1) * 5);
    z-index: 55;
    animation: moveUp 0.5s ease-in-out alternate;
  }
  @keyframes moveUp {
    0% {
      transform: translateY(20px);
    }
    100% {
      transform: translateY(0px);
    }
  }
  .homepage-kategorilerimiz .mobile-slider-urunler .mySwiperMobileUrun .swiper-wrapper .swiper-slide .image img {
    width: 100%;
  }
  .homepage-kategorilerimiz .mobile-slider-urunler .mySwiperMobileUrun .swiper-wrapper .swiper-slide .image::after {
    content: " ";
    width: calc(var(--1) * 0);
    height: calc(var(--1) * 0);
    position: absolute;
    border-top: 1px solid var(--white);
    border-right: 1px solid var(--white);
    z-index: 999;
    top: calc(var(--1) * 10);
    right: calc(var(--1) * 10);
    transition: all 0.5s;
    opacity: 0;
  }
  .homepage-kategorilerimiz .mobile-slider-urunler .mySwiperMobileUrun .swiper-wrapper .swiper-slide .image::before {
    content: " ";
    width: calc(var(--1) * 0);
    height: calc(var(--1) * 0);
    position: absolute;
    border-bottom: 1px solid var(--white);
    border-left: 1px solid var(--white);
    z-index: 999;
    bottom: calc(var(--1) * 15);
    left: calc(var(--1) * 10);
    opacity: 0;
    transition: all 0.5s;
  }
  .homepage-kategorilerimiz .mobile-slider-urunler .mySwiperMobileUrun .swiper-wrapper .swiper-slide .image:hover::after, .homepage-kategorilerimiz .mobile-slider-urunler .mySwiperMobileUrun .swiper-wrapper .swiper-slide .image:hover::before {
    opacity: 1;
    width: calc(var(--1) * 115);
    height: calc(var(--1) * 145);
  }
  .homepage-kategorilerimiz .mobile-slider-urunler .mySwiperMobileUrun .swiper-wrapper .swiper-slide .image:hover .hoverEffect {
    display: flex;
  }
  .homepage-referans {
    width: 83%;
    margin-inline: auto;
    margin-block: calc(var(--1) * 70);
  }
  .homepage-referans .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    max-height: calc(var(--1) * 470);
  }
  .homepage-referans .title h4 {
    color: var(--gray1);
    font-size: calc(var(--1) * 14);
    letter-spacing: calc(var(--1) * 5);
    font-weight: normal;
    text-transform: uppercase;
  }
  .homepage-referans .title h2 {
    color: var(--black);
    font-size: calc(var(--1) * 40);
    line-height: calc(var(--1) * 50);
    font-weight: bold;
    position: relative;
  }
  .homepage-referans .title h2 span {
    color: var(--green);
  }
  .homepage-referans .refaranslar {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: calc(var(--1) * 50);
    margin-block: calc(var(--1) * 70);
  }
  .homepage-referans .refaranslar img {
    transition: all 0.3s ease-in-out;
    justify-self: center;
    width: calc(var(--1) * 174);
    filter: grayscale(100%) !important;
  }
  .homepage-referans .refaranslar img:hover {
    transform: scale(1.1);
    filter: grayscale(0%) !important;
  }
  .homepage-referans .mobile-slider-referanslar {
    display: none;
  }
}
@media only screen and (max-width: 767.98px) {
  .homepage-slider {
    width: 100%;
    height: calc(var(--dsm-1) / 2 * 700);
    position: relative;
  }
  .homepage-slider .mySwiperHome {
    width: 95%;
    margin-inline: auto;
    height: 100%;
    border: 1px solid #707070;
    overflow: hidden;
  }
  .homepage-slider .mySwiperHome .swiper-button-next,
  .homepage-slider .mySwiperHome .swiper-button-prev {
    color: #fff !important;
  }
  .homepage-slider .mySwiperHome .swiper-pagination {
    position: absolute;
    bottom: 0;
  }
  .homepage-slider .mySwiperHome .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
  }
  .homepage-slider .mySwiperHome .swiper-slide .container {
    width: 100%;
    z-index: 9999;
  }
  .homepage-slider .mySwiperHome .swiper-slide .container .slider-detail {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(var(--dsm-1) * 10);
    max-width: calc(var(--dsm-1) * 640);
  }
  .homepage-slider .mySwiperHome .swiper-slide .container .slider-detail h4 {
    color: var(--white);
    font-size: calc(var(--dsm-1) * 14);
    letter-spacing: calc(var(--dsm-1) * 5);
    font-weight: normal;
  }
  .homepage-slider .mySwiperHome .swiper-slide .container .slider-detail .desktopBaslık {
    display: none;
    color: var(--white);
    font-size: calc(var(--dsm-1) * 40);
    line-height: calc(var(--dsm-1) * 50);
    font-weight: bold;
    position: relative;
  }
  .homepage-slider .mySwiperHome .swiper-slide .container .slider-detail .desktopBaslık span {
    color: var(--green);
  }
  .homepage-slider .mySwiperHome .swiper-slide .container .slider-detail .mobileBaslık {
    color: var(--white);
    font-size: calc(var(--dsm-1) * 40);
    line-height: calc(var(--dsm-1) * 50);
    font-weight: bold;
    position: relative;
  }
  .homepage-slider .mySwiperHome .swiper-slide .container .slider-detail .mobileBaslık span {
    color: var(--green);
  }
  .homepage-slider .mySwiperHome .swiper-slide .container .slider-detail .product-button {
    width: -moz-max-content;
    width: max-content;
    outline: none;
    background: none;
    border: 1px solid var(--white);
    padding: calc(var(--dsm-1) * 13) calc(var(--dsm-1) * 15);
    display: flex;
    align-items: center;
    gap: calc(var(--dsm-1) * 15);
    color: var(--white);
    font-size: calc(var(--dsm-1) * 14);
    margin-top: calc(var(--dsm-1) / 2 * 38);
    cursor: pointer;
  }
  .homepage-slider .mySwiperHome .swiper-slide .container .slider-detail .product-button:hover {
    background: #ececec;
    color: #222;
  }
  .homepage-slider .mySwiperHome .swiper-slide .sliderBg img {
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -o-object-fit: fill;
       object-fit: fill;
  }
  .homepage-slider .mySwiperHome .swiper-slide .sliderBg::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../assets/gorsel/SiyahPerde.png");
    z-index: 9;
  }
  .homepage-about {
    width: 95%;
    margin-inline: auto;
    margin-block: calc(var(--dsm-1) / 2 * 70);
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 50);
  }
  .homepage-about .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: calc(var(--dsm-1) * 10);
  }
  .homepage-about .content h4 {
    color: var(--gray1);
    font-size: calc(var(--dsm-1) * 14);
    letter-spacing: calc(var(--dsm-1) * 5);
    font-weight: normal;
  }
  .homepage-about .content h2 {
    color: var(--black);
    font-size: calc(var(--dsm-1) * 38);
    line-height: calc(var(--dsm-1) * 50);
    font-weight: bold;
    position: relative;
  }
  .homepage-about .content h2 span {
    color: var(--green);
  }
  .homepage-about .content p {
    font-size: calc(var(--dsm-1) * 18);
    line-height: calc(var(--dsm-1) * 40);
  }
  .homepage-about .content .home-about-button {
    width: -moz-max-content;
    width: max-content;
    outline: none;
    background: none;
    border: 1px solid var(--gray1);
    padding: calc(var(--dsm-1) * 13) calc(var(--dsm-1) * 15);
    display: flex;
    align-items: center;
    gap: calc(var(--dsm-1) * 15);
    color: var(--gray4);
    font-size: calc(var(--dsm-1) * 14);
    margin-top: calc(var(--dsm-1) * 20);
    transition: all 0.3s ease;
    cursor: pointer;
  }
  .homepage-about .content .home-about-button:hover {
    color: #fff;
    background: #222;
    border-color: transparent;
  }
  .homepage-about .image {
    width: 100%;
    position: relative;
  }
  .homepage-about .image img {
    width: 100%;
  }
  .homepage-about .image::after {
    content: " ";
    width: calc(var(--dsm-1) * 115);
    height: calc(var(--dsm-1) * 145);
    position: absolute;
    border-top: 1px solid var(--white);
    border-left: 1px solid var(--white);
    z-index: 999;
    top: calc(var(--dsm-1) * 10);
    left: calc(var(--dsm-1) * 10);
  }
  .homepage-about .image::before {
    content: " ";
    width: calc(var(--dsm-1) * 115);
    height: calc(var(--dsm-1) * 145);
    position: absolute;
    border-bottom: 1px solid var(--white);
    border-right: 1px solid var(--white);
    z-index: 999;
    bottom: calc(var(--dsm-1) * 15);
    right: calc(var(--dsm-1) * 10);
  }
  .homepage-about .image .effect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../assets/gorsel/SiyahPerde.png");
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .homepage-about .image .effect h2 {
    font-size: calc(var(--dsm-1) * 150);
    color: var(--white);
  }
  .homepage-about .image .effect p {
    font-weight: normal;
    color: var(--white);
    font-size: calc(var(--dsm-1) * 13);
    letter-spacing: calc(var(--dsm-1) * 8);
    z-index: 55;
  }
  .homepage-period {
    width: 95%;
    margin-inline: auto;
    margin-block: calc(var(--dsm-1) * 70);
  }
  .homepage-period .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }
  .homepage-period .title h4 {
    color: var(--gray1);
    font-size: calc(var(--dsm-1) * 14);
    letter-spacing: calc(var(--dsm-1) * 5);
    font-weight: normal;
    text-transform: uppercase;
  }
  .homepage-period .title h2 {
    color: var(--black);
    font-size: calc(var(--dsm-1) * 40);
    line-height: calc(var(--dsm-1) * 50);
    font-weight: bold;
    position: relative;
  }
  .homepage-period .title h2 span {
    color: var(--green);
  }
  .homepage-period .mySwiperPriod {
    margin-block: calc(var(--dsm-1) * 50);
  }
  .homepage-period .mySwiperPriod .swiper-button-next,
  .homepage-period .mySwiperPriod .swiper-button-prev {
    color: #ebebeb !important;
    top: var(--swiper-navigation-top-offset, 43%) !important;
  }
  .homepage-period .mySwiperPriod .swiper-button-next::after,
  .homepage-period .mySwiperPriod .swiper-button-prev::after {
    font-size: calc(var(--dsm-1) * 30) !important;
  }
  .homepage-period .mySwiperPriod .swiper-wrapper .swiper-slide .contentSlider {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .homepage-period .mySwiperPriod .swiper-wrapper .swiper-slide .contentSlider .slidertitle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    font-size: calc(var(--dsm-1) * 18);
    font-weight: bold;
    padding-block: calc(var(--dsm-1) * 30);
    position: relative;
  }
  .homepage-period .mySwiperPriod .swiper-wrapper .swiper-slide .contentSlider .slidertitle span {
    position: absolute;
    top: 0;
    font-size: calc(var(--dsm-1) * 60);
    color: #ebebeb;
    z-index: -1;
    font-weight: normal;
  }
  .homepage-period .mySwiperPriod .swiper-wrapper .swiper-slide .contentSlider .desc {
    text-align: center;
    font-size: calc(var(--dsm-1) * 18);
    line-height: calc(var(--dsm-1) * 40);
  }
  .homepage-kategorilerimiz {
    width: 95%;
    margin-inline: auto;
    margin-block: calc(var(--dsm-1) * 70);
  }
  .homepage-kategorilerimiz .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    max-height: calc(var(--dsm-1) * 470);
  }
  .homepage-kategorilerimiz .title h4 {
    color: var(--gray1);
    font-size: calc(var(--dsm-1) * 14);
    letter-spacing: calc(var(--dsm-1) * 5);
    font-weight: normal;
    text-transform: uppercase;
  }
  .homepage-kategorilerimiz .title h2 {
    color: var(--black);
    font-size: calc(var(--dsm-1) * 40);
    line-height: calc(var(--dsm-1) * 50);
    font-weight: bold;
    position: relative;
  }
  .homepage-kategorilerimiz .title h2 span {
    color: var(--green);
  }
  .homepage-kategorilerimiz .title .allProduct {
    display: none;
  }
  .homepage-kategorilerimiz .ürünler {
    width: 100%;
    display: none;
    grid-template-columns: 1fr;
    gap: calc(var(--dsm-1) * 30);
  }
  .homepage-kategorilerimiz .ürünler .image {
    position: relative;
    cursor: pointer;
  }
  .homepage-kategorilerimiz .ürünler .image .hoverEffect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../assets/gorsel/SiyahPerde.png");
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .homepage-kategorilerimiz .ürünler .image .hoverEffect p {
    font-weight: bold;
    color: var(--white);
    font-size: calc(var(--dsm-1) * 19);
    letter-spacing: calc(var(--dsm-1) * 5);
    z-index: 55;
  }
  .homepage-kategorilerimiz .ürünler .image img {
    width: 100%;
  }
  .homepage-kategorilerimiz .ürünler .image::after {
    content: " ";
    width: calc(var(--dsm-1) * 0);
    height: calc(var(--dsm-1) * 0);
    position: absolute;
    border-top: 1px solid var(--white);
    border-right: 1px solid var(--white);
    z-index: 999;
    top: calc(var(--dsm-1) * 10);
    right: calc(var(--dsm-1) * 10);
    transition: all 0.5s;
    opacity: 0;
  }
  .homepage-kategorilerimiz .ürünler .image::before {
    content: " ";
    width: calc(var(--dsm-1) * 0);
    height: calc(var(--dsm-1) * 0);
    position: absolute;
    border-bottom: 1px solid var(--white);
    border-left: 1px solid var(--white);
    z-index: 999;
    bottom: calc(var(--dsm-1) * 15);
    left: calc(var(--dsm-1) * 10);
    transition: all 0.5s;
    opacity: 0;
  }
  .homepage-kategorilerimiz .ürünler .image:hover::after, .homepage-kategorilerimiz .ürünler .image:hover::before {
    opacity: 1;
    width: calc(var(--dsm-1) * 115);
    height: calc(var(--dsm-1) * 145);
  }
  .homepage-kategorilerimiz .ürünler .image:hover .hoverEffect {
    display: flex;
  }
  .homepage-kategorilerimiz .mobile-slider-urunler {
    margin-top: calc(var(--dsm-1) * 50);
    position: relative;
  }
  .homepage-kategorilerimiz .mobile-slider-urunler .mySwiperMobileUrun .swiper-button-next,
  .homepage-kategorilerimiz .mobile-slider-urunler .mySwiperMobileUrun .swiper-button-prev {
    color: var(--white) !important;
  }
  .homepage-kategorilerimiz .mobile-slider-urunler .mySwiperMobileUrun .swiper-wrapper .swiper-slide .image {
    position: relative;
    cursor: pointer;
  }
  .homepage-kategorilerimiz .mobile-slider-urunler .mySwiperMobileUrun .swiper-wrapper .swiper-slide .image .hoverEffect {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("../assets/gorsel/SiyahPerde.png");
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
  }
  .homepage-kategorilerimiz .mobile-slider-urunler .mySwiperMobileUrun .swiper-wrapper .swiper-slide .image .hoverEffect p {
    font-weight: bold;
    color: var(--white);
    font-size: calc(var(--dsm-1) * 19);
    letter-spacing: calc(var(--dsm-1) * 5);
    z-index: 55;
  }
  .homepage-kategorilerimiz .mobile-slider-urunler .mySwiperMobileUrun .swiper-wrapper .swiper-slide .image img {
    width: 100%;
  }
  .homepage-kategorilerimiz .mobile-slider-urunler .mySwiperMobileUrun .swiper-wrapper .swiper-slide .image::after {
    content: " ";
    width: calc(var(--dsm-1) * 115);
    height: calc(var(--dsm-1) * 145);
    position: absolute;
    border-top: 1px solid var(--white);
    border-right: 1px solid var(--white);
    z-index: 999;
    top: calc(var(--dsm-1) * 10);
    right: calc(var(--dsm-1) * 10);
    display: none;
  }
  .homepage-kategorilerimiz .mobile-slider-urunler .mySwiperMobileUrun .swiper-wrapper .swiper-slide .image::before {
    content: " ";
    width: calc(var(--dsm-1) * 115);
    height: calc(var(--dsm-1) * 145);
    position: absolute;
    border-bottom: 1px solid var(--white);
    border-left: 1px solid var(--white);
    z-index: 999;
    bottom: calc(var(--dsm-1) * 15);
    left: calc(var(--dsm-1) * 10);
    display: none;
  }
  .homepage-kategorilerimiz .mobile-slider-urunler .mySwiperMobileUrun .swiper-wrapper .swiper-slide .image:hover::after, .homepage-kategorilerimiz .mobile-slider-urunler .mySwiperMobileUrun .swiper-wrapper .swiper-slide .image:hover::before {
    display: block;
  }
  .homepage-kategorilerimiz .mobile-slider-urunler .mySwiperMobileUrun .swiper-wrapper .swiper-slide .image:hover .hoverEffect {
    display: flex;
  }
  .homepage-referans {
    width: 95%;
    margin-inline: auto;
    margin-block: calc(var(--dsm-1) * 70);
  }
  .homepage-referans .title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    max-height: calc(var(--dsm-1) * 470);
  }
  .homepage-referans .title h4 {
    color: var(--gray1);
    font-size: calc(var(--dsm-1) * 14);
    letter-spacing: calc(var(--dsm-1) * 5);
    font-weight: normal;
    text-transform: uppercase;
  }
  .homepage-referans .title h2 {
    color: var(--black);
    font-size: calc(var(--dsm-1) * 35);
    line-height: calc(var(--dsm-1) * 50);
    font-weight: bold;
    position: relative;
  }
  .homepage-referans .title h2 span {
    color: var(--green);
  }
  .homepage-referans .refaranslar {
    display: none;
    grid-template-columns: 1fr 1fr;
    gap: calc(var(--dsm-1) * 50);
    margin-block: calc(var(--dsm-1) * 70);
  }
  .homepage-referans .refaranslar img {
    transition: all 0.3s ease-in-out;
    justify-self: center;
    width: 95%;
  }
  .homepage-referans .refaranslar img:hover {
    transform: scale(1.1);
  }
  .homepage-referans .mobile-slider-referanslar {
    display: block;
    margin-block: calc(var(--dsm-1) * 70);
  }
  .homepage-referans .mobile-slider-referanslar .mySwiperMobileReferans {
    display: flex;
  }
  .homepage-referans .mobile-slider-referanslar .mySwiperMobileReferans .swiper-wrapper {
    align-items: center;
  }
  .homepage-referans .mobile-slider-referanslar .mySwiperMobileReferans .swiper-wrapper .swiper-slide img {
    width: 100%;
  }
}
@media only screen and (min-width: 768px) {
  main {
    width: 100%;
    background-color: var(--white);
  }
  main .basvuruBox {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(var(--1) * 50);
    padding-block: calc(var(--1) * 50);
  }
  main .basvuruBox .container {
    width: 80%;
    border: 2px solid #e7e7e7;
  }
  main .basvuruBox .container h2 {
    text-align: center;
    padding: calc(var(--1) * 16);
    margin-bottom: calc(var(--1) * 20);
  }
  main .basvuruBox .container .row {
    color: var(--gray2);
    font-size: calc(var(--1) * 14);
    margin-bottom: calc(var(--1) * 15);
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 15);
    text-align: left;
  }
  main .basvuruBox .container .row .companyName {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 5);
    padding-inline: calc(var(--1) * 16);
  }
  main .basvuruBox .container .row .companyName input {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  main .basvuruBox .container .row .companyOfficial {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 5);
    padding-inline: calc(var(--1) * 16);
  }
  main .basvuruBox .container .row .companyOfficial input {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  main .basvuruBox .container .row .companyOfficialMail {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 5);
    padding-inline: calc(var(--1) * 16);
  }
  main .basvuruBox .container .row .companyOfficialMail input {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  main .basvuruBox .container .row .companyOfficialPhone {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 5);
    padding-inline: calc(var(--1) * 16);
  }
  main .basvuruBox .container .row .companyOfficialPhone input {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
    font-size: calc(var(--1) * 12);
  }
  main .basvuruBox .container .row .address {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 5);
    padding-inline: calc(var(--1) * 16);
  }
  main .basvuruBox .container .row .address input {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  main .basvuruBox .container .row .mail {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 5);
    padding-inline: calc(var(--1) * 16);
  }
  main .basvuruBox .container .row .mail input {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  main .basvuruBox .container .row .phone {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 5);
    padding-inline: calc(var(--1) * 16);
  }
  main .basvuruBox .container .row .phone input {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
    font-size: calc(var(--1) * 12);
  }
  main .basvuruBox .container .row .taxAdministration {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 5);
    padding-inline: calc(var(--1) * 16);
  }
  main .basvuruBox .container .row .taxAdministration input {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  main .basvuruBox .container .row .taxNumber {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 5);
    padding-inline: calc(var(--1) * 16);
  }
  main .basvuruBox .container .row .taxNumber input {
    padding: calc(var(--1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  main .basvuruBox .container .row .pass {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 5);
    padding-inline: calc(var(--1) * 16);
  }
  main .basvuruBox .container .row .pass input {
    padding: calc(var(--1) * 16);
    font-size: calc(var(--1) * 12);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  main .basvuruBox .container .row .againPass {
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 5);
    padding-inline: calc(var(--1) * 16);
  }
  main .basvuruBox .container .row .againPass input {
    padding: calc(var(--1) * 16);
    font-size: calc(var(--1) * 12);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  main .basvuruBox .container .row .aydinlatma {
    display: flex;
    gap: calc(var(--1) * 10);
    padding-inline: calc(var(--1) * 16);
    align-items: center;
  }
  main .basvuruBox .container .row .aydinlatma input {
    width: 25px;
    height: 25px;
  }
  main .basvuruBox .container .row .aydinlatma label a {
    text-decoration: underline;
    color: var(--dark);
  }
  main .basvuruBox .container .row .sendButton {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  main .basvuruBox .container .row .sendButton .send {
    margin: calc(var(--1) * 0);
    padding-block: calc(var(--1) * 20);
    padding-inline: calc(var(--1) * 60);
    width: -moz-max-content;
    width: max-content;
    color: var(--white);
    background-color: var(--black);
    outline: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  main .basvuruBox .container .row .sendButton .send:hover {
    background: #666;
  }
}
@media only screen and (max-width: 767.98px) {
  main {
    width: 100%;
    background-color: var(--white);
  }
  main .basvuruBox {
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  main .basvuruBox .container {
    width: 95%;
    border: 2px solid #e7e7e7;
  }
  main .basvuruBox .container h2 {
    text-align: center;
    padding: calc(var(--dsm-1) * 16);
    margin-bottom: calc(var(--dsm-1) * 20);
  }
  main .basvuruBox .container .row {
    color: var(--gray2);
    font-size: calc(var(--dsm-1) * 14);
    margin-bottom: calc(var(--dsm-1) * 15);
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 15);
    text-align: left;
  }
  main .basvuruBox .container .row .companyName {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 5);
    padding-inline: calc(var(--dsm-1) * 16);
  }
  main .basvuruBox .container .row .companyName input {
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  main .basvuruBox .container .row .companyOfficial {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 5);
    padding-inline: calc(var(--dsm-1) * 16);
  }
  main .basvuruBox .container .row .companyOfficial input {
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  main .basvuruBox .container .row .companyOfficialMail {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 5);
    padding-inline: calc(var(--dsm-1) * 16);
  }
  main .basvuruBox .container .row .companyOfficialMail input {
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  main .basvuruBox .container .row .companyOfficialPhone {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 5);
    padding-inline: calc(var(--dsm-1) * 16);
  }
  main .basvuruBox .container .row .companyOfficialPhone input {
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
    font-size: calc(var(--dsm-1) * 12);
  }
  main .basvuruBox .container .row .address {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 5);
    padding-inline: calc(var(--dsm-1) * 16);
  }
  main .basvuruBox .container .row .address input {
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  main .basvuruBox .container .row .mail {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 5);
    padding-inline: calc(var(--dsm-1) * 16);
  }
  main .basvuruBox .container .row .mail input {
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  main .basvuruBox .container .row .phone {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 5);
    padding-inline: calc(var(--dsm-1) * 16);
  }
  main .basvuruBox .container .row .phone input {
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
    font-size: calc(var(--dsm-1) * 12);
  }
  main .basvuruBox .container .row .taxAdministration {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 5);
    padding-inline: calc(var(--dsm-1) * 16);
  }
  main .basvuruBox .container .row .taxAdministration input {
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  main .basvuruBox .container .row .taxNumber {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 5);
    padding-inline: calc(var(--dsm-1) * 16);
  }
  main .basvuruBox .container .row .taxNumber input {
    padding: calc(var(--dsm-1) * 16);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  main .basvuruBox .container .row .pass {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 5);
    padding-inline: calc(var(--dsm-1) * 16);
  }
  main .basvuruBox .container .row .pass input {
    padding: calc(var(--dsm-1) * 16);
    font-size: calc(var(--dsm-1) * 12);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  main .basvuruBox .container .row .againPass {
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 5);
    padding-inline: calc(var(--dsm-1) * 16);
  }
  main .basvuruBox .container .row .againPass input {
    padding: calc(var(--dsm-1) * 16);
    font-size: calc(var(--dsm-1) * 12);
    border: none;
    outline: none;
    background-color: var(--gray);
  }
  main .basvuruBox .container .row .aydinlatma {
    display: flex;
    gap: calc(var(--dsm-1) * 10);
    padding-inline: calc(var(--dsm-1) * 16);
    align-items: center;
  }
  main .basvuruBox .container .row .aydinlatma input {
    width: 25px;
    height: 25px;
  }
  main .basvuruBox .container .row .aydinlatma label a {
    text-decoration: underline;
    color: var(--dark);
  }
  main .basvuruBox .container .row .sendButton {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  main .basvuruBox .container .row .sendButton .send {
    margin: calc(var(--dsm-1) * 0);
    padding-block: calc(var(--dsm-1) * 20);
    padding-inline: calc(var(--dsm-1) * 60);
    width: -moz-max-content;
    width: max-content;
    color: var(--white);
    background-color: var(--black);
    outline: none;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  main .basvuruBox .container .row .sendButton .send:hover {
    background: #666;
  }
}
@media only screen and (min-width: 768px) {
  .giris {
    width: 100vw;
    height: 100vh;
    background-image: url();
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .giris .girisBox {
    width: calc(var(--1) * 250);
    height: calc(var(--1) * 300);
    border-radius: calc(var(--1) * 20);
    position: relative;
    background: rgba(255, 255, 255, 0.9);
    padding-inline: calc(var(--1) * 16);
    padding-block: calc(var(--1) * 16);
  }
  .giris .girisBox .lang {
    margin-bottom: calc(var(--1) * 30);
    margin-top: calc(var(--1) * 12);
    display: flex;
    align-items: end;
    justify-content: flex-end;
  }
  .giris .girisBox .lang select {
    background-color: #145629;
    color: #fff;
    padding-inline: calc(var(--1) * 9);
    padding-block: calc(var(--1) * 3);
    border-radius: calc(var(--1) * 5);
    outline: none;
    border: none;
  }
  .giris .girisBox .logo {
    width: 100%;
    z-index: 2;
    margin-bottom: calc(var(--1) * 17);
  }
  .giris .girisBox .logo img {
    width: 100%;
  }
  .giris .girisBox input {
    width: 100%;
    padding-block: calc(var(--1) * 10);
    padding-inline: calc(var(--1) * 5);
    margin-bottom: calc(var(--1) * 10);
    outline: none;
    border: none;
    background-color: #45a735;
    color: #fff;
    font-size: calc(var(--1) * 11);
    border-radius: calc(var(--1) * 3);
  }
  .giris .girisBox input::-moz-placeholder {
    color: #fff;
    text-align: center;
  }
  .giris .girisBox input::placeholder {
    color: #fff;
    text-align: center;
  }
  .giris .girisBox button {
    width: 100%;
    outline: none;
    border: none;
    background-color: #145629;
    color: #fff;
    padding-block: calc(var(--1) * 10);
    padding-inline: calc(var(--1) * 65);
    font-size: calc(var(--1) * 9);
    line-height: 1.2;
    border-radius: calc(var(--1) * 3);
    cursor: pointer;
  }
}
@media only screen and (max-width: 767.98px) {
  .giris {
    width: 100vw;
    height: 100vh;
    background-image: url("../../../assets/image/girisBg.jpg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .giris .girisBox {
    width: calc(var(--dsm-1) * 300);
    height: calc(var(--dsm-1) * 350);
    border-radius: calc(var(--dsm-1) * 20);
    position: relative;
    background: rgba(255, 255, 255, 0.9);
    padding-inline: calc(var(--dsm-1) * 16);
  }
  .giris .girisBox .lang {
    margin-bottom: calc(var(--dsm-1) * 30);
    margin-top: calc(var(--dsm-1) * 12);
    display: flex;
    align-items: end;
    justify-content: flex-end;
  }
  .giris .girisBox .lang select {
    background-color: #145629;
    color: #fff;
    padding-inline: calc(var(--dsm-1) * 9);
    padding-block: calc(var(--dsm-1) * 3);
    border-radius: calc(var(--dsm-1) * 5);
    outline: none;
    border: none;
  }
  .giris .girisBox .logo {
    width: 100%;
    z-index: 2;
    margin-bottom: calc(var(--dsm-1) * 17);
  }
  .giris .girisBox .logo img {
    width: 100%;
  }
  .giris .girisBox input {
    width: 100%;
    padding-block: calc(var(--dsm-1) * 10);
    padding-inline: calc(var(--dsm-1) * 5);
    margin-bottom: calc(var(--dsm-1) * 10);
    outline: none;
    border: none;
    background-color: #45a735;
    color: #fff;
    font-size: calc(var(--dsm-1) * 11);
    border-radius: calc(var(--dsm-1) * 3);
  }
  .giris .girisBox input::-moz-placeholder {
    color: #fff;
    text-align: center;
  }
  .giris .girisBox input::placeholder {
    color: #fff;
    text-align: center;
  }
  .giris .girisBox button {
    width: 100%;
    outline: none;
    border: none;
    background-color: #145629;
    color: #fff;
    padding-block: calc(var(--dsm-1) * 10);
    padding-inline: calc(var(--dsm-1) * 90);
    font-size: calc(var(--dsm-1) * 9);
    line-height: 1.2;
    border-radius: calc(var(--dsm-1) * 3);
    cursor: pointer;
  }
}
body {
  background-color: var(--white);
  color: var(--black);
  font-family: "Poppins", sans-serif;
}

header,
footer,
main {
  max-width: 1920px;
  margin-inline: auto;
}

@media only screen and (min-width: 768px) {
  .section-box1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: calc(var(--1) * 14);
  }
  .section-box1 .breadcrumbs-div1 {
    padding: calc(var(--1) * 16) 0px;
    background-color: var(--gray);
    display: flex;
    justify-content: flex-end;
  }
  .section-box1 .breadcrumbs-div1 .container1 {
    display: flex;
    width: 95%;
    justify-content: left;
    align-items: center;
  }
  .section-box1 .breadcrumbs-div1 .container1 h2 {
    font-size: calc(var(--1) * 30);
    color: var(--darkgreen);
  }
  .section-box1 .breadcrumbs-div1 .container1 h2 span {
    color: var(--green);
  }
  .section-box1 .breadcrumbs-div2 {
    padding: calc(var(--1) * 16) 0px;
    background-color: var(--gray);
    display: flex;
    justify-content: flex-start;
  }
  .section-box1 .breadcrumbs-div2 .container2 {
    display: flex;
    width: 95%;
    justify-content: right;
    align-items: center;
  }
  .section-box1 .breadcrumbs-div2 .container2 .breadcrumb {
    margin: 0px;
    justify-content: end;
    display: flex;
    gap: 10px;
    color: #aaaaaa;
  }
  .section-box1 .breadcrumbs-div2 .container2 .breadcrumb .activeColor {
    color: var(--black);
    font-weight: bold;
  }
  .section-box1 .breadcrumbs-div2 .container2 .breadcrumb .breadcrumb li a {
    display: inline-block;
    padding: 0px calc(var(--1) * 30) 0px 0px;
  }
  .section-box1 .breadcrumbs-div2 .container2 .breadcrumb .breadcrumb li a .breadcrumb li:last-child a {
    background-image: none;
  }
  .section-aydinlik {
    width: 95%;
    margin: 0 auto;
  }
  .section-aydinlik .content {
    width: 83%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: calc(var(--1) * 20);
    padding-block: calc(var(--1) * 50);
    font-size: calc(var(--1) * 14);
  }
  .section-aydinlik .content img {
    width: 100%;
    height: calc(var(--1) * 300);
    -o-object-fit: cover;
       object-fit: cover;
  }
}
@media only screen and (max-width: 767.98px) {
  .section-box1 {
    display: grid;
    grid-template-columns: 1fr;
    font-size: calc(var(--dsm-1) * 14);
  }
  .section-box1 .breadcrumbs-div1 {
    padding: calc(var(--dsm-1) * 16) 0px;
    background-color: var(--gray);
    display: flex;
    justify-content: center;
  }
  .section-box1 .breadcrumbs-div1 .container1 {
    display: flex;
    width: 95%;
    justify-content: center;
    align-items: center;
  }
  .section-box1 .breadcrumbs-div1 .container1 h2 {
    font-size: calc(var(--dsm-1) * 30);
    color: var(--darkgreen);
  }
  .section-box1 .breadcrumbs-div1 .container1 h2 span {
    color: var(--green);
  }
  .section-box1 .breadcrumbs-div2 {
    padding: calc(var(--dsm-1) * 16) 0px;
    background-color: var(--white);
    display: flex;
    justify-content: center;
    margin-block: calc(var(--dsm-1) * 30);
  }
  .section-box1 .breadcrumbs-div2 .container2 {
    display: flex;
    width: 95%;
    justify-content: center;
    align-items: center;
  }
  .section-box1 .breadcrumbs-div2 .container2 .breadcrumb {
    margin: 0px;
    justify-content: end;
    display: flex;
    gap: 10px;
    color: #aaaaaa;
  }
  .section-box1 .breadcrumbs-div2 .container2 .breadcrumb .activeColor {
    color: var(--black);
    font-weight: bold;
  }
  .section-box1 .breadcrumbs-div2 .container2 .breadcrumb .breadcrumb li a {
    display: inline-block;
    padding: 0px calc(var(--dsm-1) * 30) 0px 0px;
  }
  .section-box1 .breadcrumbs-div2 .container2 .breadcrumb .breadcrumb li a .breadcrumb li:last-child a {
    background-image: none;
  }
  .section-aydinlik {
    width: 95%;
    margin: 0 auto;
  }
  .section-aydinlik .content {
    width: 100%;
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    gap: calc(var(--dsm-1) * 20);
    padding-block: calc(var(--dsm-1) * 20);
    font-size: calc(var(--dsm-1) * 18);
  }
  .section-aydinlik .content img {
    width: 100%;
    height: calc(var(--dsm-1) * 1 / 2 * 300);
    -o-object-fit: cover;
       object-fit: cover;
  }
}/*# sourceMappingURL=style.css.map */