@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(../fonts/opensans.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
    scroll-behavior: smooth;
    line-height: 1.8;
}

#WhoAreWe, #WhatIsOurAttitude, #WhatDoWeTranslate, #WhoAreOurTranslators, #WhichSubjectMatters, #HowDoWeWork, #WhatKindOfSoftware, #WhatIsOurPerspective, #WhatAdvantages, #OurDrawbacks {
    scroll-margin-top: 18vh;
}

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

*,
*::before,
*::after {
    box-sizing: border-box;
}

:root {
    --color-bg: #fffffe;
    --color-fg: #262626;
    --color-accent: #b30000;
    --color-surface: #f2f2f2;
    --color-surface-2: #f0f0f0;
    --color-border-soft: rgba(165, 165, 165, 0.4);

    --loader-bg: rgba(255, 255, 254, 0.80);
    --red-yellow: var(--color-accent);
    --shadow-unified: 0 10px 26px rgba(0, 0, 0, 0.24);
    --foreground: var(--color-fg);
    --background: var(--color-bg);
    --background-light: var(--color-surface);
    --menu-items: var(--color-surface-2);
    --column-border: var(--color-border-soft);
    --border: 1px dotted var(--column-border);
    --menu-subitem-bg: var(--menu-items);
    --lang-switch-bg: var(--color-surface);
    --lang-switch-hover: var(--menu-items);
     --cookie-bg: rgba(242, 242, 242, 0.5);

    --font-size-h1: clamp(1.3rem, 2.5vw, 1.7rem);
    --font-size-h2: clamp(1.1rem, 2vw, 1.4rem);
    --font-size-lang-btn: 0.75rem;
    --font-size-p: 0.9375rem;
}

.darkmode {
    --color-bg: #262626;
    --color-fg: #fffffe;
    --color-accent: #ffcc00;
    --color-surface: #333333;
    --color-surface-2: #303030;
    --color-border-soft: rgba(217, 217, 217, 0.1);

    --loader-bg: rgba(38, 38, 38, 0.80);
    --red-yellow: var(--color-accent);
    --shadow-unified: 0 10px 26px rgba(0, 0, 0, 0.42);
    --foreground: var(--color-fg);
    --background: var(--color-bg);
    --background-light: var(--color-surface);
    --menu-items: var(--color-surface-2);
    --lang-switch-bg: var(--color-surface);
    --lang-switch-hover: var(--menu-items);
    --cookie-bg: rgba(51, 51, 51, 0.5);
}

body {
    overflow-y: scroll;
    background: var(--background);
    color: var(--foreground);
    hyphens: auto;
    -ms-overflow-style: none;
    scrollbar-width: none;
}


body::-webkit-scrollbar {
    display: none;
}
.theme-text-fg {
    color: var(--foreground) !important;
}

.theme-text-accent {
    color: var(--red-yellow) !important;
}

.theme-text-muted {
    color: color-mix(in srgb, var(--foreground) 45%, var(--background)) !important;
}

.theme-link-reset {
    text-decoration: none;
    color: inherit;
}

.no-scroll {
    overflow: hidden !important;
}


body, #header, #footer, #leftColumn, #rightColumn, #content, #menuContainer, #menuCover, #tocBox, #tocCover {
    transition:
        background-color 1s ease,
        color 1s ease,
        border-color 1s ease,
        box-shadow 1s ease;
}

p {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
    font-size: var(--font-size-p);
}

h1, h2, h3, h4, h5, h6 {
    all: unset;
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}


h1 {
    font-size: var(--font-size-h1);
    text-align: center;
    color: var(--red-yellow);
}

h2 {
    font-size: var(--font-size-h2);
    text-align: center;
    padding-top: 1em;
    color: var(--red-yellow);
}

h3, h4, h5, h6 {
    font-size: var(--font-size-p);
    font-weight: 400;
}

h3 {
    text-align: left;
    padding: 5px 18px;
    margin: 0;
    cursor: pointer;
    border: var(--border);
    color: var(--red-yellow);
}
h3:hover {
    background-color: var(--menu-items);
    font-weight: bold;
}
h3:active {
    transform: translate(1px,1px);
    filter: blur(2px)
}

h4 {
    text-align: left;
    padding: 3px 10px 3px 20px;
    margin: 0;
    border: var(--border);
    color: var(--red-yellow);
}

#loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: block;
    background-color: var(--loader-bg);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

#header {
    position: fixed;
    top: 0;
    left: 0;
    height: 15%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    background-color: var(--background);
}

.images-LM {
    display: block;
}

.images-DM {
    display: none;
}

html.darkmode .images-LM {
    display: none;
}

html.darkmode .images-DM {
    display: block;
}

.headerImage {
    position: absolute;
    max-height: 80%;
    max-width: 80%;
}

.progressContainer {
    position: absolute;
    left: 17%;
    width: 66%;
    bottom: 0;
    height: 2px;
    background: var(--column-border);
}

.progressBar {
    height: 2px;
    background: var(--red-yellow);
    width: 0%;
}


#logoContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 17%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo {
    max-height: 40%;
    max-width: 40%;
    transform: translateX(0.2em);
}

#yearContainer {
    position: absolute;
    top: 0;
    right: 0;
    width: 17%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#yearContainer p {
    margin: 0;
}

#leftColumn {
    position: fixed;
    top: 15%;
    bottom: 5%;
    left: 0;
    width: 17%;
    border-right: var(--border);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 8;
}

.verticalColumnImage {
    position: absolute;
    top: 50%;
    left: 45%;
    transform: translate(-50%, -50%) rotate(270deg);
    max-height: 15%;
    max-width: 450%;
}


#rightColumn {
    position: fixed;
    top: 15%;
    bottom: 5%;
    right: 0;
    width: 17%;
    border-left: var(--border);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 50;
}

.lang-switch-vertical {
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    z-index: 55;
}

.lang-switch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    padding: 2px 6px;
    border: none;
    border-radius: 999px;
    background: var(--lang-switch-bg);
    color: var(--foreground);
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    font-size: var(--font-size-lang-btn);
    font-weight: 600;
    cursor: pointer;
    opacity: 0.96;
    transition: opacity 0.2s ease, transform 0.2s ease, background-color 0.2s ease;
}

.lang-switch-btn:hover {
    opacity: 1;
    transform: translateY(-1px);
    background: var(--lang-switch-hover);
}

.lang-switch-btn:active {
    transform: translateY(1px);
}



.menuIconContainer {
    display: inline-block;
    cursor: pointer;
    opacity: 0.8;
    transform: translateY(-1px);
    filter: drop-shadow(var(--shadow-unified));
    transition: opacity 0.2s ease, filter 0.2s ease, transform 0.2s ease;
}

.menuIconContainer:hover {
    opacity: 1;
    transform: translateY(-2px);
    filter: drop-shadow(var(--shadow-unified));
}

.bar1, .bar2, .bar3 {
    width: 30px;
    height: 2px;
    background-color: var(--foreground);
    margin: 5px 0;
    transition: 1s;
}

/* X animasyonu */
.menuIconContainer.move .bar1 {
    -webkit-transform: rotate(-45deg) translate(-5px, 5px);
    transform: rotate(-45deg) translate(-5px, 5px);
}

.menuIconContainer.move .bar2 {
    opacity: 0;
}

.menuIconContainer.move .bar3 {
    -webkit-transform: rotate(45deg) translate(-5px, -5px);
    transform: rotate(45deg) translate(-5px, -5px);
}

#menuContainer {
    position: absolute;
    top: 50%;
    right: 60%;
    margin-right: 8px;
    transform: translateY(-50%);

    display: none;             /* Evet, kesinlikle bu olacak */
    width: auto;
    height: auto;
    white-space: nowrap;
    padding: 0.4em 0.2em;

    background-color: var(--background);
    box-shadow: var(--shadow-unified);
    border-radius: 5px;
    z-index: 30;
}

.gi-2 {
    display: none; 
    padding-left: 1.5em;
    height: 100%;
}

.menu-subitem {
    background-color: var(--menu-subitem-bg);
}

.accent-text,
.red {
    color: var(--red-yellow);
}

#menuCover {
    display: none;
    position: fixed;
    top: 16%;
    width: 66%;
    left: 17%;
    height: 79%;
    background-color: var(--background);
    opacity: 89%;
    z-index: 20;
}

#tocCover {
    display: none;
    position: fixed;
    top: 16%;
    width: 66%;
    left: 17%;
    height: 79%;
    background-color: var(--background);
    opacity: 69%;
    z-index: 40;
}

/* ===============================
   TOC BOX — all responsive rules  
   =============================== */


   
#tocBox {
    position: fixed;
    top: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 70%;                /* Mobile first */
    height: 75%;
    background: var(--background);
    display: flex;
    justify-content: center;
    box-shadow: var(--shadow-unified);
    border-radius: 5px;
    z-index: 51;
}

/* Tablet */
@media screen and (min-width: 768px) {
    #tocBox {
        width: 70%;
    }
}

/* Desktop */
@media screen and (min-width: 1024px) {
    :root {
        --font-size-p: clamp(0.9375rem, calc(0.875rem + 0.078125vw), 0.96875rem);
    }

    #tocBox {
        width: 40%;
    }
}

/* Large desktop */
@media screen and (min-width: 1400px) {
    #tocBox {
        width: 30%;
    }
}

.closeTocBoxWrapper {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);

    width: 44px;              /* bigger hit area */
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    opacity: 0.8;
    transition: 0.3s ease;
    z-index: 60;              /* make sure it's above #tocText if needed */
}


/* Hover efekti */
.closeTocBoxWrapper:hover {
    opacity: 1;
    filter: drop-shadow(var(--shadow-unified));
}

/* Çizgiler – hamburger menüsündeki ile birebir aynı */
.closeBar {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 2px;
    background-color: var(--foreground);
    transition: 1s;
    box-shadow: var(--shadow-unified);
    transform-origin: center;
    margin: 0;
}

/* X şekli – şimdi tam simetrik */
.closeTocBoxWrapper .bar1 {
    transform: translate(-50%, -50%) rotate(45deg);
}

.closeTocBoxWrapper .bar2 {
    transform: translate(-50%, -50%) rotate(-45deg);
}


#tocText {
    position: absolute;
    top: 10%;
    left: 5%;
    width: 90%;
    height: 80%;
    overflow-y: auto;
    padding: 0.4em 0.2em;
    border: var(--border);
    border-radius: 5px;
        box-shadow: var(--shadow-unified);
}
   

/* Reset new TOC list structure */
#tocText ul.toc-section {
    margin: 0;
    padding: 0;
    list-style: none;
}

#tocText ul.toc-section li {
    margin: 0;
    padding: 0;
}

/* Apply old h5 styles DIRECTLY to the links */
#tocText ul.toc-section li a {
    display: block;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    text-align: left;
    padding: 3px 10px 3px 40px;
    margin: 0;
    cursor: pointer;
    border-bottom: var(--border);
    border-left: var(--border);
    border-top: var(--border);
    text-decoration: none;          /* remove underline */
    color: inherit;                 /* inherit your menu text color */
}

#tocText ul.toc-section li a:hover {
    background-color: var(--menu-items);
    font-weight: bold;
}

#tocText ul.toc-section li a:active {
    transform: translate(1px, 1px);
    filter: blur(2px);
}

#footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5%;
    z-index: 10;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background-light);
    border-top: var(--border);
}

.footerText {
    margin: 0;
    text-align: center;
    width: 66%;
    font-size: clamp(0.58rem, 1.6vw, 0.78rem);
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.translation-flow-box {
    border: 1px dotted gray;
    text-align: center;
    padding-left: 1em;
    padding-right: 1em;
    box-shadow: var(--shadow-unified);
}

.blog-sticky-note {
    background: var(--background);
    border: 1px dotted gray;
    position: sticky;
    top: 15.3%;
    box-shadow: var(--shadow-unified);
    z-index: 4;
}

.translation-flow-box p {
    font-size: clamp(0.85rem, 1.5vw, 0.9rem);
}

#footerLeft {
    position: absolute;
    left: 0;
    top: 0;
    width: 17%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
}

#footerRight {
    position: absolute;
    right: 0;
    top: 0;
    width: 17%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

body.contact-page .grecaptcha-badge {
    bottom: 5% !important;
    z-index: 10000 !important;
}

#gridSwitch {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.switch {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 17px;
}

.switch input { 
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--red-yellow);
    -webkit-transition: 1s;
    transition: 1s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 13px;
    width: 13px;
    left: 2px;
    bottom: 2px;
    background-color: var(--background);
    -webkit-transition: 1s;
    transition: 1s;
}

input:checked + .slider {
    background-color: var(--red-yellow);
}

input:focus + .slider {
    box-shadow: var(--shadow-unified);
}

input:checked + .slider:before {
    -webkit-transform: translateX(13px);
    -ms-transform: translateX(13px);
    transform: translateX(13px);
}

.slider.round {
    border-radius: 17px;
}

.slider.round:before {
    border-radius: 50%;
}

body.glossary-page #bodyText {
    position: absolute;
    top: 15%;
    bottom: 5%;
    left: 22%;
    width: 56%;

    display: flex;
    align-items: center;
    justify-content: center;

    padding-bottom: 0;
}

body.tr-maintenance-page #bodyText {
    flex-direction: column;
    gap: 8px;
}

body.tr-maintenance-page #bodyText h1 {
    margin: 0;
}

#bodyText {
    position: absolute;
    top: 50%;
    left: 22%;
    width: 56%;
    height: auto;
    padding-bottom: 30vh;
}

.back-link-row {
    margin-top: 12px;
    text-align: center;
    font-family: 'Open Sans', sans-serif;
    display: block;
}

.back-link-row a {
    opacity: 0.85;
    transition: opacity 0.2s ease;
    display: inline-block;
}

.back-link-row a:hover {
    opacity: 1;
}

.back-arrow-link {
    line-height: 1;
}

.indentation p {
   text-indent: -0.7em;
   padding-left: 1.4em;
   margin: 0;
}

#arrow {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2rem;
    cursor: pointer;
    opacity: 0.75;
    display: none;
    z-index: 60;
    padding: 4px 8px;
    text-align: center;
}

#arrow:hover {
    opacity: 1;
    transform: translateX(-50%) translateY(-2px);
}

#SS {
    position: absolute;
    top: 20%;
    width: 60%;
    left: 20%;
    height: 27%;
    display: flex;
    justify-content: center;
    border-radius: 5px;
    box-shadow: var(--shadow-unified);
    }

.slideCover {
    position: absolute;
    inset: 0;
    border-radius: 5px;
    background-color: var(--background);
    animation: slide-opacity 5s infinite;
    z-index: 1;
}

@keyframes slide-opacity {
    0% {opacity: 0.50;}
    100% {opacity: 0;}
}

.slide {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 5px;
    
    background-size: cover;
    background-repeat: no-repeat;
    background-position: bottom;
}

.slideHeader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    height: 75%;
    width: auto;
    box-shadow: var(--shadow-unified);
    padding: 1em;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--loader-bg);
    z-index: 2;
}

.slidePictureText {
    font-weight: 400;
    text-align: center;
    margin: 0;
    padding: 0.5em 0;
    line-height: 1.5;
    hyphens: none;
}

.lindual-title-main {
    font-family: Syncopate;
    letter-spacing: 0.05em;
    font-weight: 200;
}

.lindual-title-sub {
    font-family: Syncopate;
    letter-spacing: 0.08em;
    font-weight: 200;
}

.slideshowNav {
    position: absolute;
    padding: 0;
    bottom: -2%;
    opacity: 60%;
}

.dot {
    height: 13px;
    width: 13px;
    margin: 0 2px;
    background-color: black;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
    cursor: pointer;
}

.active, .dot:hover {
    background-color: var(--red-yellow);
}

::-webkit-scrollbar {
    width: 0.5vw;
}

::-webkit-scrollbar-track {
    box-shadow: var(--shadow-unified); 
    border-radius: 0vw;
}

::-webkit-scrollbar-thumb {
    background: var(--background-light);
    border-radius: 0vw;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--foreground);
}



.textImage {
    display: block;
    margin-left: auto;
    margin-right: auto;
    opacity: 100%;
    width: 80%;
    max-width: 410px;
    margin-top: 3em;
    margin-bottom: 3em;
    box-shadow: var(--shadow-unified);
    border-radius: 5px;
}

#cookieBar {
    position: fixed;
    bottom: 5%;
    left: 17%;
    width: 66%;

    background: var(--cookie-bg);
    border-top: var(--border);

    padding: 10px 0;
    text-align: center;

    font-family: 'Open Sans', sans-serif;
    color: var(--red-yellow);
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: 0.02em;

    z-index: 100;

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);

    letter-spacing: 0.1em;
}

#cookieBar button {
    margin-left: 12px;
    padding: 2px 16px;

    font-family: 'Open Sans', sans-serif;
    color: var(--red-yellow);
    font-weight: 800;

    background: transparent;
    border: var(--border);
    
    cursor: pointer;

    box-shadow: var(--shadow-unified);
}

#cookieBar button:hover {
    background-color: var(--menu-items);
}

#cookieBar button:active {
    transform: translate(1px, 1px);
}

/* Contact page */
#statusMessage {
    text-align: center;
    margin-bottom: 1.5em;
    cursor: pointer;
}
.successMessage, .errorMessage {
    display: inline-block;
    padding: 0.6em 1em;
    border: var(--border);
    background: var(--background-light);
}
.form-container {
    margin: 0 auto 2em;
    width: min(100%, 720px);
    font-family: 'Open Sans', sans-serif;
}
.attachment-form-container {
    border: var(--border);
    background: var(--background-light);
    padding: 1.2em;
    box-shadow: var(--shadow-unified);
}
.form-container label,
.form-container .btn-submit,
.form-container .info,
.successMessage,
.errorMessage {
    font-family: 'Open Sans', sans-serif;
}
.input-row, .attachment-row {
    margin-bottom: 1em;
}
.input-field {
    width: 100%;
    padding: 0.6em;
    border: var(--border);
    background: var(--background);
    color: var(--foreground);
    font-family: 'Open Sans', sans-serif;
    font-size: var(--font-size-p);
}

body.contact-page .input-field,
body.contact-page .btn-submit,
body.contact-page .form-container label {
    font-size: var(--font-size-p);
}

textarea.input-field {
    resize: vertical;
}
.btn-submit {
    padding: 0.4em 1.2em;
    border: var(--border);
    background: transparent;
    color: var(--foreground);
    cursor: pointer;
    box-shadow: var(--shadow-unified);
}
.btn-submit:active {
    transform: translate(2px, 2px);
    box-shadow: var(--shadow-unified);
}
.center-recaptcha {
    text-align: center;
    margin-top: 1em;
}

.recaptcha-note {
    text-align: center;
    line-height: 1;
    transform: scale(0.7);
}

.contact-info-wrap {
    z-index: 0;
}

.contact-info-title {
    margin-top: 2em;
}

p.contact-company {
    font-size: calc(1em + 0.5vmin);
    line-height: 1.2;
    margin-bottom: -0.5em;
    text-align: center;
}

p.contact-person-block {
    font-size: calc(0.8em + 0.5vmin);
    line-height: 1.2;
    text-align: center;
}