/*===== General Styles =====*/
.theme--dark {
    --color-primary: rgb(8, 33, 43);
    --color-primary-dark: hsla(197, 69%, 6%, 1);
    --color-secondary: rgb(245, 245, 245);
    --color-secondary-dark: hsla(0, 0%, 88%, 1);
    --color-accent: rgb(34, 135, 104);
    --color-accent-dark: hsla(162, 60%, 24%, 1);
    --color-nav: rgba(8, 33, 43, 0.8);
    --color-shadow: rgba(5, 20, 25, 0.5);
    --font-family: "Quicksand", sans-serif;
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-bold: 700;
}

.theme--light {
    --color-secondary: rgb(8, 33, 43);
    --color-secondary-dark: hsla(197, 69%, 6%, 1);
    --color-primary: rgb(245, 245, 245);
    --color-primary-dark: hsla(0, 0%, 88%, 1);
    --color-accent: rgb(34, 135, 104);
    --color-accent-dark: hsla(162, 60%, 24%, 1);
    --color-nav: rgba(245, 245, 245, 0.8);
    --color-shadow: rgba(5, 20, 25, 0.5);
    --font-family: "Quicksand", sans-serif;
    --weight-light: 300;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-bold: 700;
}

* , *::before, *::after { box-sizing: inherit; -webkit-box-sizing: inherit; }

*::selection { background-color: var(--color-accent-dark); }

::-webkit-scrollbar { width: 1.6rem; height: 1.6rem; }
::-webkit-scrollbar-track { background: var(--color-primary-dark); }
::-webkit-scrollbar-thumb { background: var(--color-accent); border: 4px solid var(--color-primary-dark); border-radius: 50px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-accent-dark); }

html, body { height: 100%; width: 100%; }
html { box-sizing: border-box; -webkit-box-sizing: border-box; font-size: 62.5%; scroll-behavior: smooth; }

body { margin: 0; font-family: var(--font-family); font-size: 1.5rem; color: var(--color-secondary); background-color: var(--color-primary); overflow-x: hidden; position: relative; }

.cursor-trail {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 50;
    opacity: 0;
}

.cursor-trail.is-visible {
    opacity: 1;
}

.cursor-trail__dot {
    position: absolute;
    top: 0;
    left: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transform: translate3d(-50%, -50%, 0);
    background: rgba(34, 135, 104, 0.14);
    border: 1px solid rgba(34, 135, 104, 0.6);
    box-shadow: 0 0 0 6px rgba(34, 135, 104, 0.06);
    backdrop-filter: blur(2px);
    will-change: transform, opacity, width, height;
    transition: width 180ms ease, height 180ms ease, background-color 180ms ease, border-color 180ms ease, opacity 180ms ease;
}

.theme--light .cursor-trail__dot {
    background: rgba(34, 135, 104, 0.12);
    border-color: rgba(34, 135, 104, 0.52);
    box-shadow: 0 0 0 7px rgba(34, 135, 104, 0.05);
}

.cursor-trail__dot.is-head {
    width: 10px;
    height: 10px;
    background: rgba(34, 135, 104, 0.95);
    border-color: rgba(34, 135, 104, 0.95);
    box-shadow: 0 0 0 8px rgba(34, 135, 104, 0.08);
}

.cursor-trail__dot.is-hovering {
    width: 24px;
    height: 24px;
    background: rgba(34, 135, 104, 0.1);
}

@media (pointer: coarse) {
    .cursor-trail {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cursor-trail {
        display: none;
    }
}
img { max-width: 100%; max-height: 100%; display: block; object-fit: cover; }
ul { list-style-type: none; padding: 0; margin: 0; }
h1, h2, h3, h4, p { margin: 0; }
a { color: var(--color-secondary); text-decoration: none; }

.t-h1 { font-weight: var(--weight-light); line-height: 1.25; font-size: min(max(6.4rem), 8.8vw); letter-spacing: -1.5px; color: var(--color-secondary); position: relative; margin-inline: auto; width: fit-content; max-width: 100%; text-align: center; }
.t-h1::before { content: "Merhaba!"; font-family: "Rock Salt", cursive; color: var(--color-accent); font-size: min(max(2.8rem), 4.2vw); position: absolute; top: -1.8em; left: -2em; letter-spacing: 0.16rem; transform: rotate(-6deg); z-index: -1; }
.t-h2 { font-weight: var(--weight-bold); line-height: 1.25; font-size: min(max(5.6rem), 5vw); letter-spacing: -1.5px; color: var(--color-secondary); }
.t-h3 { position: relative; width: max-content; font-weight: var(--weight-regular); line-height: 1; font-size: min(max(4.2rem), 6.4vw); letter-spacing: -1.43px; color: var(--color-secondary); margin-bottom: 4rem; }
.t-h3::before { content: ""; width: 40%; min-width: 50px; position: absolute; bottom: -0.8rem; left: 0rem; padding-bottom: 1rem; border-bottom: 2px solid var(--color-accent); }
.t-h4 { font-weight: var(--weight-bold); line-height: 1.25; font-size: 2.2rem; letter-spacing: -0.75px; color: var(--color-secondary); margin-bottom: 1rem; }
.t-p { color: var(--color-secondary); font-size: 1.6rem; font-weight: var(--weight-light); line-height: 2.8rem; margin-bottom: 1.5em; }
.t-p strong { color: var(--color-accent); font-weight: var(--weight-bold); }

.theme__toggle { width: 4rem; height: 4rem; display: flex; align-items: center; justify-content: center; background-color: transparent; padding: 0.8rem; margin-left: 1.6rem; border-radius: 40px 40px 40px 16px; transition: background-color 300ms ease-in-out; position: relative; }
#theme_toggle__btn { display: block; width: 4rem; height: 4rem; position: absolute; top: -2px; left: -4px; cursor: pointer; opacity: 0; z-index: 2; }
.theme__toggle:hover, .theme__toggle:active { background-color: var(--color-primary-dark); }
.theme__toggle .svg__sun__rays, .theme__toggle .svg__moon, .theme__toggle .svg__sun { transition: fill 350ms ease-in-out, transform 350ms ease-in-out; }
.svg__sun__rays { fill: #F5F5F5; transform-origin: center; }
.theme--light .svg__sun__rays { fill: #E0E0E0; transform: scale(0.8) rotate(-72deg); }
.svg__moon { fill: #08212B; transform-origin: center; }
.theme--light .svg__moon { fill: #051419; transform: scale(1.25); }
.svg__sun { fill: #F5F5F5; transform-origin: center; }
.theme--light .svg__sun { fill: #F5F5F5; transform: scale(1.667) translate(-3px, -2px); }
.theme--dark .theme__toggle:hover .svg__sun, .theme--dark .theme__toggle:hover .svg__sun__rays { fill: #E0E0E0; }
.theme--light .theme__toggle:hover .svg__sun { fill: #E0E0E0; }

.sidebar { width: 68px; height: 100vh; position: fixed; top: 0; left: 0; z-index: 5; }
.sidebar__menu { height: max-content; position: relative; top: calc(100vh - 300px); }
.sidebar__menu::before, .sidebar__menu::after { content: ""; background-color: var(--color-accent); width: 2px; height: 100vh; position: absolute; bottom: 100%; left: 0; right: 0; margin: 16px auto; }
.sidebar__menu::after { bottom: 0; top: 100%; }
.sidebar__menu-item { width: max-content; height: 36px; display: flex; align-items: center; padding: 8px; background-color: var(--color-secondary); border-radius: 40px 40px 40px 16px; color: var(--color-primary); font-weight: var(--weight-bold); margin: 16px; font-size: 0; transition: font-size 250ms ease-in-out; }
.sidebar__menu-item:hover { cursor: pointer; font-size: 13px; }
.sidebar__menu-item i { width: 20px; font-size: 20px; line-height: 106.61%; text-align: center; }
@media screen and (max-width: 540px) { .sidebar { display: none; } }

.nav { position: absolute; top: 0; display: block; width: 100%; height: 7.2rem; background-color: var(--color-nav); backdrop-filter: blur(1.6rem); position: fixed; z-index: 4; }
nav a { color: var(--color-secondary); font-weight: var(--weight-regular); font-size: 1.6rem; text-decoration: none; }
.navcontainer { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; max-width: 1200px; margin: 0 auto; height: 7.2rem; }
@media screen and (max-width: 1350px) { .navcontainer { width: 80%; } }
@media screen and (max-width: 720px) { .navcontainer { width: 100%; padding-left: 7.2rem; padding-right: 2.4rem; } }
@media screen and (max-width: 540px) { .navcontainer { padding-left: 2.4rem; } }
.logocontainer { height: 5.6rem; width: 32%; float: left; white-space: nowrap; }
@media screen and (max-width: 720px) { .logocontainer { width: 80%; } }
.logo__img { height: 4.2rem; vertical-align: middle; text-align: center; display: inline-block; }
.logo__img svg { height: 4.2rem; fill: var(--color-accent); }
.logo__text { line-height: 5.6rem; vertical-align: middle; text-align: center; display: inline-block; margin: 0 0.8rem; }
.navigation { width: 70%; }
.navlist { list-style-type: none; display: flex; flex-flow: row nowrap; align-items: center; justify-content: space-between; width: 100%; }
.navlist__item { display: inline-block; position: relative; width: max-content; }
.navlist__item::before, .navlist__item::after { content: ""; height: 20%; width: 90%; position: absolute; top: 35%; left: 0.4rem; background-color: var(--color-accent); border-radius: 0.08rem; z-index: -1; transform-origin: bottom left; transform: scaleX(0); transition: transform 300ms ease-out; }
.navlist__item::after { top: 50%; left: 0.2rem; }
.navlist__item:hover { cursor: pointer; }
.navlist__item:hover::before, .navlist__item:hover::after { transform: scaleX(1) rotate(-1.5deg); transition: transform 180ms ease; }
li a { display: block; padding: 0.4rem 0.8rem; text-decoration: none; }
.mobile { display: none; }
@media only screen and (max-width: 720px) { .navigation { display: none; } .mobile { position: relative; display: flex; justify-content: space-between; align-items: center; float: right; } }

#mobile_menuToggle { display: block; width: 100%; position: relative; z-index: 1; user-select: none; margin-left: 1.6rem; }
#mobile_menuToggle a { text-decoration: none; color: var(--color-secondary); transition: color 300ms ease; }
#mobile_menuToggle a:active { color: var(--color-accent); }
#mobile_menuToggle input { display: block; width: 3.2rem; height: 3.2rem; position: absolute; top: -8px; left: -4px; cursor: pointer; opacity: 0; z-index: 2; }
#mobile_menuToggle span { display: block; width: 3.2rem; height: 0.4rem; margin-bottom: 0.5rem; position: relative; border-radius: 0.2rem; background-color: var(--color-secondary); z-index: 1; transform-origin: 4px 0px; transition: transform 300ms ease-in-out, opacity 400ms ease; }
#mobile_menuToggle span:first-child { transform-origin: 0% 0%; }
#mobile_menuToggle span:nth-last-child(2) { transform-origin: 0% 100%; }
#mobile_menuToggle input:checked ~ span { opacity: 1; transform: rotate(45deg); }
#mobile_menuToggle input:checked ~ span:nth-last-child(3) { opacity: 0; transform: rotate(0deg) scale(0.2, 0.2); }
#mobile_menuToggle input:checked ~ span:nth-last-child(2) { transform: rotate(-45deg) translate(0px, 1px); }
.mobile__menu { position: absolute; left: calc(-100vw + 55px); width: 102vw; height: 100vh; margin-top: 2.2rem; background-color: var(--color-primary-dark); border-top: 2px solid var(--color-accent); transform-origin: 0% 0%; transform: translate(110vw, 0%); transition: transform 300ms ease-in-out; overflow: hidden; z-index: 9; }
.mobile__menu ul { text-align: center; }
.mobile__menu__title { margin: 0 auto; background-color: var(--color-primary-dark); font-size: 4rem; font-weight: var(--weight-medium); }
.mobile__menu li { display: block; margin: 4rem 0; }
.mobile__menu a { text-decoration: none; font-size: 2.4rem; }
#mobile_menuToggle input:checked ~ .mobile__menu { transform: translate(0, 0%); z-index: 9; }

.hero { width: 100%; height: 96vh; display: flex; justify-content: center; margin: 0 auto; position: relative; }
.hero::after { content: ""; position: absolute; bottom: -8rem; right: 0; z-index: 0; width: 34rem; height: 34rem; background: radial-gradient(circle at 35% 35%, rgba(34,135,104,0.24), transparent 48%), linear-gradient(135deg, rgba(34,135,104,0.12), rgba(34,135,104,0.02)); filter: opacity(0.22); transform: rotate(-8deg); clip-path: polygon(20% 0%, 100% 0%, 100% 75%, 62% 100%, 0% 78%, 0% 18%); }
.hero__container { width: 100%; max-width: 1000px; margin: 0 auto; padding-left: 8rem; display: flex; flex-direction: column; text-align: left; justify-content: center; align-items: center; z-index: 1; }
@media screen and (max-width: 540px) { .hero__container { padding: 0 2.4rem; } }
.animated__text__block { display: inline-block; width: 14ch; min-width: 14ch; max-width: 14ch; text-align: center; white-space: nowrap; overflow: hidden; }
.text__animated { animation: text-rotate 2s ease-in-out infinite; position: relative; display: block; width: 100%; white-space: nowrap; }
.text__animated::before, .text__animated::after { content: ""; height: 25%; width: calc(100% + 1.25vw); position: absolute; top: 35%; left: -0.5vw; background-color: var(--color-accent); border-radius: 0.06em; transform: rotate(-1.5deg); z-index: -1; }
.text__animated::after { top: 55%; left: -0.75vw; }
@keyframes text-rotate { 0% { opacity: 0; transform: translateY(4rem); } 15% { opacity: 0; transform: translateY(4rem); } 35% { opacity: 1; transform: translateY(0); } 75% { opacity: 1; transform: translateY(0); } 90% { opacity: 1; transform: translateX(-0.5rem); } 100% { opacity: 0; transform: translateX(4em); } }

.section { width: 100%; max-width: 1160px; margin: 9.6rem auto; padding: 0 8rem; padding-bottom: 7.2rem; }
@media screen and (max-width: 540px) { .section { padding: 0 2.4rem; } }
.about__container { width: 100%; margin: 0 auto; display: flex; flex-direction: row; align-items: center; justify-content: space-between; gap: 5.6rem; }
.about__portrait { width: 26rem; min-width: 26rem; height: 34rem; position: relative; border-radius: 24px; overflow: hidden; flex-shrink: 0; border: 2px solid var(--color-accent); box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5), 0 0 25px rgba(34, 135, 104, 0.25); background: var(--color-primary-dark); transition: transform 300ms ease, box-shadow 300ms ease; }
.about__portrait:hover { transform: translateY(-6px); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 32px rgba(34, 135, 104, 0.4); }
.about__portrait-img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; display: block; border-radius: inherit; }
.skills__container { width: 100%; margin: 0 auto; display: flex; flex-direction: row; flex-wrap: wrap; gap: 3.2rem; justify-content: space-between; }
.skills__card { margin-top: 5.6rem; width: 25%; min-width: 21.2rem; margin: 4.8rem auto; border-radius: 40px 40px 40px 16px; background-color: var(--color-primary-dark); box-shadow: 0px 4px 32px 4px var(--color-primary-dark); z-index: 0; transform: scale(1); transition: transform 500ms ease-in-out; }
.skills__card:hover { transform: scale(1.04); }
.skills__card__icon { width: 65%; padding: 1.8rem; font-size: 6rem; display: flex; justify-content: center; position: relative; margin: 0 auto; margin-top: -6.4rem; z-index: 1; }
.skills__card__icon svg { stroke: var(--color-secondary); }
.skills__card__title { font-size: 1.8rem; font-weight: var(--weight-bold); display: flex; justify-content: center; position: relative; }
.skills__card__title::before { content: ''; width: 32%; height: 2px; background-color: var(--color-accent); position: absolute; bottom: -1rem; }
.skills__card__list { padding: 2.4rem 4rem; line-height: 1.6; }

.work__item { display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(1, 1fr); width: 100%; margin: 4.8rem auto; padding-bottom: 7.2rem; }
.work__item__detail { grid-column: 1 / 9; grid-row: 1 / 2; min-height: 40rem; padding: 4.8rem; padding-right: 4.8rem; border-radius: 40px 40px 40px 16px; background-color: var(--color-primary-dark); box-shadow: 0px 4px 32px 4px var(--color-primary-dark); position: relative; z-index: 0; }
.work__item__title { font-size: min(max(4rem), 7.2vw); font-weight: var(--weight-regular); margin-top: -2.4rem; }
.work__item__subtitle { font-size: min(max(1.6rem), 4vw); padding-top: 0.8rem; }
.work__item__description { margin-top: 1rem; padding-bottom: 5.6rem; }
.work__item__links { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1.6rem; padding: 1.6rem 0; }
.work__item__btn { width: max-content; height: 36px; padding: 8px; background-color: transparent; color: var(--color-secondary); padding: 0.6rem 1.2rem; font-size: 1.6rem; font-weight: var(--weight-bold); border: 2px solid var(--color-accent); border-radius: 40px 40px 40px 16px; transition: background-color 300ms ease-in-out; }
.work__item__btn:hover { background-color: var(--color-accent); }
.work__item__btn i { transform: scale(1.28); }
.work__item__tech { position: absolute; bottom: 1.6rem; font-size: 1.4rem; line-height: 1.5; font-weight: 700; }
.work__item__tech--icon { width: max-content; max-width: 100%; padding: 0.8rem; display: flex; gap: 2.4rem; font-size: 2.4rem; font-weight: light; flex-wrap: wrap; }
.work__item__tech--icon a { color: var(--color-secondary); }
.work__item__image { display: none; }
.work__item__image img { object-fit: cover; }
@media screen and (max-width: 980px) { .work__item { grid-template-columns: repeat(16, 1fr); } .work__item__detail { grid-column: 1 / 17; grid-row: 2 / 2; padding-top: 8.8rem; padding-right: 4.8rem; } .work__item__image { grid-column: 2 / -2; grid-row: 1 / 2; margin-bottom: -3.2rem; } }
@media screen and (max-width: 480px) { .work__item__detail { padding-left: 2rem; padding-right: 2rem; } }

@media screen and (max-width: 720px) {
    .nav {
        height: 6.4rem;
        backdrop-filter: blur(1rem);
    }

    .navcontainer {
        height: 6.4rem;
        padding-left: 1.8rem;
        padding-right: 1.8rem;
    }

    .logocontainer {
        width: auto;
        height: auto;
    }

    .logo__text {
        line-height: 1;
        font-size: 1.5rem;
        margin: 0;
    }

    .theme__toggle {
        display: none;
    }

    .navcontainer {
        justify-content: center;
        position: relative;
        padding-left: 0;
        padding-right: 0;
    }

    .logocontainer {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        margin: 0;
    }

    .mobile {
        display: none;
    }

    .hero {
        height: auto;
        min-height: calc(100svh - 6.4rem);
        padding-top: 6.4rem;
    }

    .hero::after {
        width: 18rem;
        height: 18rem;
        bottom: -4rem;
        right: -2rem;
        opacity: 0.14;
    }

    .hero__container {
        padding-left: 0;
        align-items: center;
        text-align: center;
        padding-inline: 1.6rem;
    }

    .t-h1 {
        font-size: clamp(4rem, 12vw, 5.4rem);
        line-height: 1.08;
        max-width: 100%;
        width: 100%;
    }

    .t-h1::before {
        top: -1.35em;
        left: 50%;
        transform: translateX(-50%) rotate(-6deg);
        font-size: min(max(2rem), 7.2vw);
    }

    .section {
        margin: 6rem auto;
        padding-bottom: 4rem;
    }

    .t-h3 {
        margin-bottom: 2.4rem;
        font-size: clamp(2.8rem, 8vw, 3.6rem);
    }

    .about__container {
        flex-direction: column;
        align-items: center;
        gap: 3.2rem;
    }

    .about__portrait {
        width: 22rem;
        min-width: auto;
        height: 28rem;
        max-width: 100%;
        margin: 0 auto;
        border-radius: 20px;
    }

    .skills__container {
        gap: 2rem;
    }

    .skills__card {
        width: 100%;
        min-width: 0;
        margin: 0;
        padding-top: 0.8rem;
    }

    .skills__card__icon {
        width: 50%;
        margin-top: -3.6rem;
        font-size: 4.8rem;
    }

    .skills__card__list {
        padding: 2rem 2.2rem 2.4rem;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.8rem 1rem;
    }

    .skills__card__list .skill {
        background: rgba(255, 255, 255, 0.02);
        border: 1px solid rgba(34, 135, 104, 0.16);
        padding: 0.8rem 1rem;
        border-radius: 16px;
    }

    .work__item {
        display: block;
        padding-bottom: 4rem;
        margin: 3.2rem auto;
    }

    .work__item__detail {
        min-height: 0;
        padding: 2.2rem;
        border-radius: 28px;
    }

    .work__item__title {
        margin-top: 0;
        font-size: clamp(2.8rem, 10vw, 4rem);
    }

    .work__item__subtitle {
        font-size: 1.6rem;
        padding-top: 0.4rem;
    }

    .work__item__description {
        padding-bottom: 4rem;
    }

    .work__item__links {
        gap: 1rem;
    }

    .work__item__btn {
        width: 100%;
        justify-content: center;
        height: auto;
        padding: 1rem 1.2rem;
    }

    .work__item__tech {
        position: static;
        margin-top: 1.6rem;
    }

    .work__item__tech--icon {
        gap: 1.2rem;
        font-size: 2rem;
    }

    .project-art {
        min-height: 12rem;
        border-radius: 24px;
    }

    .project-art span {
        font-size: 2.4rem;
    }

    .footer__container {
        padding: 2rem 0 1rem;
    }

    .footer__content {
        width: 100%;
        justify-content: flex-start;
        gap: 1rem;
        padding-right: 0;
        margin: 0.4rem 0 0;
    }

    .footer__menu {
        width: 100%;
        justify-content: flex-start;
        gap: 1rem;
        margin-top: 1rem;
    }

    .footer__menu-item {
        flex: 1 1 0;
        justify-content: center;
    }
}

@media screen and (max-width: 540px) {
    .navcontainer {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }

    .navlist__item,
    #mobile_menuToggle a {
        font-size: 2rem;
    }

    .mobile__menu {
        left: 0;
        width: 100vw;
        margin-top: 1.6rem;
        border-radius: 0 0 24px 24px;
        background: rgba(8, 33, 43, 0.96);
    }

    .mobile__menu li {
        margin: 3rem 0;
    }

    .hero__container {
        min-height: calc(100svh - 6.4rem);
        justify-content: center;
    }

    .t-h1 {
        font-size: clamp(3.4rem, 12vw, 4.8rem);
    }

    .section {
        margin: 4.8rem auto;
        padding: 0 1.2rem 3rem;
    }

    .about__copy .t-p,
    .t-p {
        font-size: 1.5rem;
        line-height: 2.5rem;
    }

    .about__portrait {
        width: 19rem;
        height: 24rem;
        border-radius: 28px 28px 28px 12px;
    }

    .skills__card__list {
        grid-template-columns: 1fr;
    }

    .work__item__detail {
        padding: 1.8rem;
    }

    .work__item__btn {
        font-size: 1.5rem;
    }

    .site-footer,
    .footer__content {
        flex-direction: column;
        align-items: flex-start;
    }

    .footer__menu {
        flex-wrap: wrap;
    }
}

.marker { position: relative; width: max-content; max-width: 100%; z-index: 1; }
.marker::before, .marker::after { content: ""; height: 25%; width: calc(100% + 1.2rem); position: absolute; top: 30%; left: -0.4rem; background-color: var(--color-accent); border-radius: 0.08em; transform: rotate(-1.25deg); z-index: -1; }
.marker::after { top: 50%; left: -0.8rem; }

.section__footer { width: 100%; background-color: var(--color-primary-dark); position: relative; }
.section__footer::before { content: "Ziyaret için teşekkürler!"; font-family: "Rock Salt", cursive; color: var(--color-accent); font-size: min(max(2.4rem), 4vw); width: max-content; position: absolute; top: -8rem; left: 8rem; letter-spacing: 0.16rem; transform: rotate(-1.25deg); }
.section__footer::after { content: ''; width: 101%; height: 6rem; background-color: var(--color-primary-dark); transform: rotate(-1.25deg); position: absolute; top: -2.4rem; left: 0; z-index: -1; }
.footer__container { width: 100%; max-width: 1000px; padding: 0.8rem 8rem; margin: 0 auto; background-color: var(--color-primary-dark); display: flex; flex-direction: row; flex-wrap: wrap-reverse; align-items: center; justify-content: space-between; }
.footer__container svg { width: 2.4rem; height: 2.4rem; }
.footer__container .logo__img { height: 2.4rem; }
.footer__content { display: flex; align-items: center; justify-content: center; gap: 1.6rem; padding-right: 1.6rem; margin: 1.6rem 0; }
.footer__menu { display: flex; flex-direction: row; gap: 1.6rem; }
.footer__menu-item { width: max-content; height: 38px; display: flex; align-items: center; padding: 8px; border: 2px solid var(--color-accent); background-color: transparent; border-radius: 40px 40px 40px 16px; transition: background-color 300ms ease-in-out; color: var(--color-secondary); font-weight: var(--weight-bold); }
.footer__menu-item:hover { background-color: var(--color-accent); }
.footer__menu-item i { width: 2rem; font-size: 2rem; line-height: 106.61%; text-align: center; }
@media screen and (max-width: 540px) { .footer__container { padding: 0.8rem 2.4rem; justify-content: center; gap: 2.4rem; } .footer__menu { width: 80%; max-width: 32rem; gap: auto; justify-content: space-between; } }