@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600&family=Google+Sans+Flex:wght@400;500;600;700;800&display=swap');

@font-face {
    font-family: 'Mont';
    src: url('../fonts/Mont-SemiBold.woff2') format('woff2'),
         url('../fonts/Mont-SemiBold.woff') format('woff'),
         url('../fonts/Mont-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

:root {
    --primary-color: #006ab3;
    --secondary-color: #0d1b2a;
    --text-color: #1a1a1a;
    --text-light: #777777;
    /* Several pages reference --text-muted (a slightly different name for
       the same "secondary text" role as --text-light) — defining it here
       fixes every one of those usages at once instead of hunting each down. */
    --text-muted: #777777;
    --white: #ffffff;
    --glass-bg: rgba(255, 255, 255, 0.15);
    --glass-border: rgba(255, 255, 255, 0.2);
    --font-heading: 'Outfit', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-pilat: 'Google Sans Flex', sans-serif;
    --transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    color: var(--text-color);
    background-color: var(--white);
    line-height: 1.6;
    overflow-x: hidden;
}

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

ul {
    list-style: none;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.2;
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 5%;
}

/* --- HEADER --- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 30px 0;
    z-index: 1000;
    transition: var(--transition);
}

.header.scrolled {
    padding: 15px 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
}

.header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo img {
    height: 68px;
    object-fit: contain;
}

.nav-menu {
    display: flex;
    gap: 40px;
}

.nav-menu a {
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 15px;
    position: relative;
    transition: var(--transition);
}

.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--white);
    transition: var(--transition);
}

.nav-menu a:hover::after {
    width: 100%;
}

/* Dropdown Menu */
.has-dropdown {
    position: relative;
    padding-bottom: 20px; /* Bridge gap for hover */
    margin-bottom: -20px;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: -20px;
    background-color: #0f1c2a; /* Dark corporate blue from image */
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    border-radius: 4px;
    overflow: hidden;
    padding: 10px 0;
    z-index: 1000;
}

.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    display: block;
}

.dropdown-menu a {
    display: block;
    padding: 12px 25px;
    font-size: 14px;
    font-weight: 400;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: all 0.2s ease;
}

.dropdown-menu li:last-child a {
    border-bottom: none;
}

.dropdown-menu a:hover {
    background-color: rgba(255,255,255,0.05);
    padding-left: 30px;
}

.dropdown-menu a::after {
    display: none; /* Hide underline effect for dropdown items */
}

/* --- PRELOADER --- */
.preloader {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background-color: var(--primary-color);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.8s ease;
}

.preloader.loaded {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.preloader-content {
    text-align: center;
}

.preloader-logo {
    height: 42px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
    margin-bottom: 20px;
}

.preloader-bar {
    width: 200px;
    height: 2px;
    background: rgba(255,255,255,0.1);
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}

.preloader-progress {
    position: absolute;
    top: 0; left: 0; height: 100%;
    background: var(--white);
    width: 0%;
    transition: width 0.3s ease;
}

/* --- HEADER RIGHT & TOGGLE --- */
.header-right {
    display: flex;
    align-items: center;
    gap: 30px;
}

.lang-selector {
    color: var(--white);
    font-family: var(--font-heading);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.2);
    padding: 8px 15px;
    border-radius: 20px;
    backdrop-filter: blur(5px);
    transition: var(--transition);
}
.lang-selector:hover {
    background: rgba(255, 255, 255, 0.3);
}

.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    /* Masaüstünde üst menü (.desktop-nav) zaten görünür durumda —
       hamburger sadece .desktop-nav'ın gizlendiği mobil/tablet
       genişliklerinde (bkz. @media max-width:1024px altındaki
       "display:flex" override'ı) görünmeli. */
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
    z-index: 2000;
}

.menu-line {
    display: block;
    width: 30px;
    height: 2px;
    background-color: var(--white);
    transition: all 0.3s ease;
}

.menu-toggle.active .menu-line:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle.active .menu-line:nth-child(2) {
    transform: translateY(-8px) rotate(-45deg);
}

/* --- OVERLAY MENU ---
   Eskiden tüm ekranı kaplayan dairesel bir açılış efektiyle (clip-path
   circle) geliyordu. Artık ekranın SAĞINDA, tam genişlikte olmayan, kaydırarak
   açılan dar bir panel (drawer) — arkasında da tıklanınca kapatan yarı
   saydam bir karartı katmanı var. */
.overlay-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(3, 10, 20, 0.55);
    z-index: 1490;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease;
}

.overlay-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.overlay-menu {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(440px, 88vw);
    background-color: var(--primary-color);
    z-index: 1500;
    display: flex;
    align-items: center;
    box-shadow: -20px 0 60px rgba(0,0,0,0.25);
    transform: translateX(100%);
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1);
}

.overlay-menu.active {
    transform: translateX(0);
}

.overlay-close {
    position: absolute;
    top: 24px;
    right: 30px;
    background: transparent;
    border: none;
    color: var(--white);
    font-size: 40px;
    font-weight: 300;
    cursor: pointer;
    z-index: 2000;
    transition: transform 0.3s ease;
}

.overlay-close:hover {
    transform: rotate(90deg);
}

.overlay-menu-inner {
    width: 100%;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: center;
    padding: 80px 40px 40px;
    overflow-y: auto;
}

.overlay-nav {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.overlay-link {
    font-family: var(--font-pilat);
    font-size: 26px;
    font-weight: 700;
    color: var(--white);
    display: flex;
    align-items: center;
    gap: 14px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
    text-transform: uppercase;
    padding: 8px 0;
}

.overlay-dropdown {
    display: flex;
    flex-direction: column;
}

.overlay-dropdown .arr {
    font-size: 16px;
    color: var(--white);
    transition: transform 0.3s ease;
}

.overlay-dropdown.active .arr {
    transform: rotate(180deg);
}

.overlay-submenu {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-left: 30px;
    margin-top: 10px;
    margin-bottom: 10px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.4s ease;
}

.overlay-dropdown.active .overlay-submenu {
    max-height: 400px;
    opacity: 1;
}

.overlay-submenu a {
    font-family: 'Mont', sans-serif;
    font-size: 16px;
    color: rgba(255,255,255,0.7);
    transition: color 0.3s ease;
}

.overlay-submenu a:hover {
    color: var(--white);
}

.overlay-menu.active .overlay-link {
    opacity: 1;
    transform: translateY(0);
}

.overlay-menu.active .overlay-link:nth-child(1) { transition-delay: 0.2s; }
.overlay-menu.active .overlay-link:nth-child(2) { transition-delay: 0.3s; }
.overlay-menu.active .overlay-link:nth-child(3) { transition-delay: 0.4s; }
.overlay-menu.active .overlay-link:nth-child(4) { transition-delay: 0.5s; }
.overlay-menu.active .overlay-link:nth-child(5) { transition-delay: 0.6s; }

.overlay-link:hover {
    color: rgba(255,255,255,0.5);
}

.overlay-num {
    font-family: var(--font-body);
    font-size: 16px;
    color: rgba(255,255,255,0.3);
}

.overlay-footer {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: 30px;
    opacity: 0;
    transition: opacity 0.5s ease 0.8s;
}

.overlay-menu.active .overlay-footer {
    opacity: 1;
}

.overlay-contact p {
    color: rgba(255,255,255,0.6);
    margin-bottom: 5px;
}

.overlay-social {
    display: flex;
    gap: 20px;
}
.overlay-social a {
    color: var(--white);
    font-family: var(--font-heading);
}

/* --- HERO SECTION --- */
.hero {
    position: relative;
    height: 100vh;
    min-height: 800px;
    color: var(--white);
    overflow: hidden;
}

.hero::before {
    display: none;
}

.hero-slides {
    position: relative;
    width: 100%;
    height: 100%;
    touch-action: pan-y;
    cursor: grab;
    user-select: none;
}

.hero-slides:active {
    cursor: grabbing;
}

.hero-slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    transform: translateX(100%);
    transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1);
    z-index: 1;
}

.hero-slide.active {
    transform: translateX(0%);
    z-index: 3;
}

.hero-video-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
}

.hero-progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 28px;
    z-index: 6;
    display: flex;
    gap: 10px;
    padding: 0 60px;
}

.hero-progress-bar {
    position: relative;
    flex: 1;
    height: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
}

.hero-progress-track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.35);
}

.hero-progress-fill {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 1px;
    width: 0%;
    background: var(--white);
    transition: width linear, height 0.2s ease;
}

.hero-progress-bar.done .hero-progress-fill,
.hero-progress-bar.active .hero-progress-fill {
    height: 2px;
}

.hero .container {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: flex-start;
    padding-top: 24vh;
}

.hero-content {
    max-width: 60%;
    position: relative;
    z-index: 2;
}

.hero-title {
    font-family: var(--font-pilat);
    font-weight: 700;
    font-size: 65px;
    margin-bottom: 20px;
    letter-spacing: -1px;
    line-height: 1.1;
}

.hero-desc {
    font-size: 18px;
    margin-bottom: 40px;
    font-weight: 300;
    opacity: 0.9;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 25px;
    background-color: rgba(255, 255, 255, 0.85);
    color: #3b5973;
    font-family: var(--font-pilat);
    font-weight: 700;
    border-radius: 6px;
    transition: var(--transition);
    cursor: pointer;
    border: none;
    font-size: 14px;
}

.btn:hover {
    background-color: #eee;
}

/* Pins and Tooltips */
.pin-anchor {
    position: absolute;
    z-index: 10;
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.pin-anchor.fade-out {
    opacity: 0;
    transform: translateY(-20px);
    pointer-events: none;
}

@keyframes pulse-dot {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6); }
    10% { transform: scale(1.4); box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2); }
    22% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
    32% { transform: scale(1.4); box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2); }
    44%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}

.pin-dot {
    width: 8px;
    height: 8px;
    background-color: var(--white);
    border-radius: 50%;
    position: absolute;
    top: -4px;
    left: -4px;
    animation: pulse-dot 2.4s ease-in-out infinite;
}

/* Elbow leader line: short diagonal near the dot, then a straight run into the box (no gap) */
.pin-line-diag {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.85);
    height: 1px;
    width: 57px;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    transform: rotate(45deg);
}

.pin-line-h {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.85);
    height: 1px;
    width: 90px;
    top: 40px;
    left: 40px;
}

.pin-info {
    position: absolute;
    top: 40px;
    left: 130px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 6px 12px;
    color: var(--white);
    width: max-content;
    max-width: 260px;
}

.pin-info h4 {
    font-family: var(--font-pilat);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
    color: var(--white);
}

.pin-info p {
    font-family: var(--font-body);
    font-size: 12.5px;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
    margin: 0;
}

/* Pin Direction Variants (default = br: down-right, styled above) */
.pin-anchor.pin-dir-bl .pin-line-diag { transform: rotate(135deg); }
.pin-anchor.pin-dir-bl .pin-line-h { left: auto; right: 40px; }
.pin-anchor.pin-dir-bl .pin-info { left: auto; right: 130px; text-align: right; }

.pin-anchor.pin-dir-tr .pin-line-diag { transform: rotate(-45deg); }
.pin-anchor.pin-dir-tr .pin-line-h { top: auto; bottom: 40px; }
.pin-anchor.pin-dir-tr .pin-info { top: auto; bottom: 40px; }

.pin-anchor.pin-dir-tl .pin-line-diag { transform: rotate(-135deg); }
.pin-anchor.pin-dir-tl .pin-line-h { top: auto; bottom: 40px; left: auto; right: 40px; }
.pin-anchor.pin-dir-tl .pin-info { top: auto; bottom: 40px; left: auto; right: 130px; text-align: right; }

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}

/* --- ABOUT SECTION --- */
.about {
    padding: 120px 0;
}

.about .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.about-visual {
    max-width: 500px;
    margin-left: auto;
}

.about-content .blue-logo {
    height: 160px;
    margin-bottom: 30px;
}

.about-content .heading-rule {
    width: 70px;
    height: 3px;
    background-color: var(--primary-color);
    border: none;
    margin: 24px 0;
}
.about-content .small-title {
    font-size: 14px;
    color: var(--text-light);
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.about-content h2 {
    font-family: 'Mont', sans-serif;
    font-size: 44px;
    color: var(--secondary-color);
    margin-bottom: 30px;
    font-weight: 600; /* Semibold */
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.about-content p {
    font-size: 16px;
    color: var(--text-light);
}

.about-image-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.about-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.7s ease, opacity 0.3s ease;
}

.about-image-wrapper:hover img {
    transform: scale(1.05);
}

.about-tabs {
    display: flex;
    justify-content: space-between;
    margin-top: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    position: relative;
}

#about-tabs-line {
    position: absolute;
    bottom: -1px;
    left: 0;
    height: 2px;
    background-color: var(--primary-color);
    transition: all 0.3s ease;
    width: 0; /* JS will set the initial width */
}

.about-tabs span {
    font-size: 13px;
    font-family: var(--font-heading);
    color: var(--text-light);
    cursor: pointer;
    position: relative;
    transition: var(--transition);
}

.about-tabs span.active {
    color: var(--primary-color);
    font-weight: 600;
}
.about-tabs span.active::after {
    content: '';
    position: absolute;
    bottom: -11px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color);
}

/* --- PARTNERS MARQUEE --- */
.partners {
    padding: 40px 0;
    background: #f9f9f9;
    overflow: hidden;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.marquee {
    display: flex;
    white-space: nowrap;
    overflow: hidden;
    width: 100%;
}

.marquee:hover .marquee-content {
    animation-play-state: paused;
}

.marquee-content {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    animation: marquee-scroll 22s linear infinite;
    will-change: transform;
}

@keyframes marquee-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}

.marquee-content img.partner-logo,
.marquee-content h3 {
    height: 44px;
    display: flex;
    align-items: center;
    margin: 0 40px;
}

.marquee-content img.partner-logo {
    width: auto;
    max-width: 170px;
    object-fit: contain;
}

.partner-logo-blue {
    filter: invert(30%) sepia(91%) saturate(1510%) hue-rotate(185deg) brightness(85%) contrast(100%);
}

.marquee-content h3 {
    font-family: var(--font-pilat);
    font-size: 26px;
    font-weight: 500;
    color: transparent;
    -webkit-text-stroke: 0.6px rgba(0,0,0,0.35);
    line-height: 44px;
    text-transform: uppercase;
    white-space: nowrap;
    transition: color 0.3s ease, -webkit-text-stroke 0.3s ease;
}

.marquee-content h3:hover {
    color: var(--primary-color);
    -webkit-text-stroke: 0.6px var(--primary-color);
}

/* --- SERVICES INTERACTIVE --- */
.services {
    padding: 120px 0;
    background-color: var(--white);
}

.services-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: flex-start;
}

.services-sticky-image {
    position: sticky;
    top: max(150px, calc(12.5vh + 50px));
    height: 75vh;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.1);
}

.services-sticky-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.05);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.services-sticky-image img.active {
    opacity: 1;
    transform: scale(1);
}

.services-list {
    padding-bottom: 50px;
}

.service-category {
    margin-bottom: 60px;
}

.service-category-title {
    font-family: var(--font-pilat);
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.service-category-title::before {
    content: '';
    display: block;
    width: 30px;
    height: 2px;
    background-color: var(--primary-color);
}

.service-item {
    font-family: var(--font-heading);
    font-size: 42px;
    font-weight: 700;
    color: #e0e0e0;
    padding: 25px 0;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.service-item::after {
    content: '→';
    font-size: 35px;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.4s ease;
}

.service-item:hover, .service-item.active {
    color: var(--primary-color);
    padding-left: 20px;
    border-bottom-color: var(--primary-color);
}

.service-item:hover::after, .service-item.active::after {
    opacity: 1;
    transform: translateX(0);
}

/* --- GLOBAL IMPACT --- */
.global-impact {
    background-color: var(--primary-color);
    padding: 100px 0;
    color: var(--white);
    position: relative;
    overflow: hidden;
}

.impact-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    text-align: center;
}

.impact-item {
    position: relative;
    z-index: 2;
}

.impact-number {
    font-family: var(--font-pilat);
    font-size: 72px;
    font-weight: 700;
    display: inline-block;
    color: var(--white);
    line-height: 1;
}

.impact-plus {
    font-family: var(--font-heading);
    font-size: 50px;
    font-weight: 700;
    color: var(--white);
    vertical-align: top;
}

.impact-label {
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-top: 15px;
    opacity: 0.8;
}

/* --- GLOBAL PRESENCE MAP --- */
.global-map-section {
    padding: 100px 0 50px;
    background-color: #fff;
}

/* jsvectormap'in kendi stil sayfası bu bloktan SONRA (footer'da) yüklendiği
   için, aynı özellik üzerinde eşit özgüllükte bir kural varsa kaynak sırası
   gereği kütüphaneninki kazanıp haritayı ezip küçültüyordu (~165px). Burada
   hem özgüllüğü artırıp hem !important ekleyerek bunu kalıcı olarak önlüyoruz. */
.global-map-section .world-map {
    width: 100% !important;
    height: 340px !important;
    max-width: 680px;
    margin: 0 auto;
}

.world-map .jvm-tooltip {
    background-color: var(--primary-color);
    font-family: var(--font-body);
    font-size: 13px;
    padding: 8px 14px;
    border-radius: 6px;
}

@media (max-width: 768px) {
    /* Dar ekranda harita genişliğe göre otomatik ölçekleniyor (yaklaşık 2:1
       en-boy oranı) — kutuyu masaüstündeki gibi yüksek tutmak haritayı
       büyütmez, sadece üstte/altta boşluk bırakır. Konteyneri haritanın asıl
       oranına yakın tutmak, aynı genişlikte olabilecek en büyük görünümü verir. */
    .global-map-section .world-map { height: 46vw !important; min-height: 160px; max-width: 92%; }
}

/* --- FEATURED PROJECTS (Row List Style) --- */
.featured-projects {
    padding: 60px 0 80px;
    background-color: #fff;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 0;
    padding-bottom: 40px;
    border-bottom: 1px solid #e0e0e0;
}

.section-header h2 {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0;
    color: #999;
}

.view-all {
    font-family: var(--font-heading);
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
}

.view-all::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0%;
    height: 1px;
    background: var(--primary-color);
    transition: width 0.3s ease;
}

.view-all:hover::after { width: 100%; }

/* Featured Projects — modern bento image grid */
.featured-grid {
    position: relative;
    max-width: 1400px;
    margin: 50px auto 0;
    padding: 0 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 260px;
    gap: 22px;
}

.feat-card {
    position: relative;
    display: block;
    grid-column: span 1;
    grid-row: span 1;
    border-radius: 14px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background-color: var(--primary-color);
    box-shadow: 0 10px 30px rgba(13, 24, 35, 0.08);
}

.feat-card.large {
    grid-column: span 2;
    grid-row: span 2;
}

.feat-card-img {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 0.7s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.feat-card:hover .feat-card-img {
    transform: scale(1.08);
}

.feat-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(13,24,35,0) 35%, rgba(13,24,35,0.9) 100%);
    z-index: 1;
}

.feat-card-tag {
    position: absolute;
    top: 18px;
    left: 18px;
    z-index: 2;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(6px);
    padding: 6px 12px;
    border-radius: 20px;
}

.feat-card-info {
    position: absolute;
    left: 22px;
    right: 22px;
    bottom: 20px;
    z-index: 2;
}

.feat-card-title {
    font-family: var(--font-pilat);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 4px;
    font-size: 19px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.feat-card.large .feat-card-title { font-size: 30px; }

.feat-card-loc {
    font-size: 13px;
    opacity: 0.85;
    font-weight: 300;
}

.feat-card-arrow {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.35s ease, background 0.35s ease;
}

.feat-card:hover .feat-card-arrow {
    background: var(--primary-color);
    transform: rotate(-45deg);
}

/* --- ENGINEERING (Dark Editorial Panel) --- */
.engineering {
    background-color: var(--primary-color);
    color: var(--white);
    overflow: hidden;
}

.eng-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 80vh;
}

.eng-text-side {
    padding: 100px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.eng-eyebrow {
    font-family: var(--font-heading);
    font-size: 12px;
    letter-spacing: 4px;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
    margin-bottom: 40px;
}

.eng-title {
    font-family: var(--font-pilat);
    font-size: 48px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--white);
    margin-bottom: 40px;
    letter-spacing: -0.01em;
}

.eng-desc {
    font-size: 16px;
    line-height: 1.8;
    color: rgba(255,255,255,0.6);
    margin-bottom: 60px;
    max-width: 420px;
}

.eng-features {
    list-style: none;
    padding: 0;
    border-top: 1px solid rgba(255,255,255,0.1);
}

.eng-features li {
    display: flex;
    align-items: baseline;
    gap: 20px;
    padding: 22px 0;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    font-size: 15px;
    color: rgba(255,255,255,0.8);
    font-family: var(--font-heading);
    transition: color 0.3s ease;
}

.eng-features li:hover { color: var(--white); }

.eng-feat-num {
    font-size: 11px;
    color: rgba(255,255,255,0.85);
    letter-spacing: 1px;
    flex-shrink: 0;
    width: 25px;
}

.eng-image-side {
    position: relative;
    overflow: hidden;
}

.eng-image-side img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(0.7) saturate(0.7);
    transition: transform 0.8s ease;
}

.engineering:hover .eng-image-side img {
    transform: scale(1.03);
}

/* --- JOURNAL / NEWS --- */
.journal {
    padding: 120px 0;
    background-color: var(--white);
}

.journal-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 60px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.journal-title {
    font-family: var(--font-pilat);
    font-size: 32px;
    font-weight: 700;
    color: var(--secondary-color);
}

.journal-link-all {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.3s ease;
}
.journal-link-all:hover {
    transform: translateX(5px);
}

.journal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.journal-card {
    display: block;
    color: var(--secondary-color);
    text-decoration: none;
    group: hover;
}

.journal-img-wrapper {
    width: 100%;
    height: 250px;
    overflow: hidden;
    margin-bottom: 20px;
}

.journal-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
}

.journal-card:hover .journal-img-wrapper img {
    transform: scale(1.05);
}

.journal-date {
    display: block;
    font-size: 11px;
    color: #888;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.journal-heading {
    font-family: var(--font-pilat);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.journal-card:hover .journal-heading {
    color: var(--primary-color);
}

/* --- FOOTER (Premium Editorial) --- */
.footer {
    background-color: var(--primary-color);
    color: var(--white);
}

/* CTA Strip */
.footer-cta {
    border-bottom: 1px solid rgba(255,255,255,0.08);
    padding: 90px 0;
}

.footer-cta-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
}

.footer-cta-title {
    font-family: var(--font-pilat);
    font-size: 52px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--white);
    margin-bottom: 16px;
}

.footer-cta-title em {
    font-style: normal;
    color: var(--white);
    text-decoration: underline;
    text-decoration-color: rgba(255,255,255,0.4);
    text-underline-offset: 6px;
}

.footer-cta-sub {
    font-size: 16px;
    color: rgba(255,255,255,0.5);
    max-width: 380px;
}

.footer-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 22px 48px;
    border: 1.5px solid rgba(255,255,255,0.25);
    border-radius: 60px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 1px;
    color: var(--white);
    text-transform: uppercase;
    white-space: nowrap;
    transition: all 0.4s ease;
    flex-shrink: 0;
}

.footer-cta-btn span {
    transition: transform 0.3s ease;
}

.footer-cta-btn:hover {
    background: var(--white);
    border-color: var(--white);
    color: var(--primary-color);
}

.footer-cta-btn:hover span {
    transform: translateX(6px);
}

/* Main Grid */
.footer-main {
    padding: 80px 0 60px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.4fr;
    gap: 60px;
}

/* Brand Column */
.footer-brand img {
    display: block;
    height: 42px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    filter: brightness(0) invert(1);
    margin-bottom: 22px;
}

.footer-brand p {
    font-size: 14px;
    color: rgba(255,255,255,0.45);
    line-height: 1.8;
    max-width: 270px;
    margin-bottom: 30px;
}

.footer-social {
    display: flex;
    gap: 12px;
}

.social-link {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.5);
    transition: all 0.3s ease;
}

.social-link:hover {
    border-color: var(--white);
    color: var(--white);
    background: rgba(255,255,255,0.12);
}

/* Nav Columns */
.footer-col-title {
    font-family: var(--font-heading);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-bottom: 28px;
}

.footer-nav {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.footer-nav a {
    font-size: 14px;
    color: rgba(255,255,255,0.65);
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    transition: color 0.25s ease, padding-left 0.25s ease;
    position: relative;
}

.footer-nav a:last-child {
    border-bottom: none;
}

.footer-nav a:hover {
    color: var(--white);
    padding-left: 8px;
}

/* Contact column */
.footer-contact-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-contact-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.footer-contact-label {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.3);
}

.footer-contact-val {
    font-size: 14px;
    color: rgba(255,255,255,0.75);
}

/* İletişim sayfası bu footer sınıfını beyaz olmayan (açık) bir bölümde
   tekrar kullanıyor — beyaz metin beyaz zeminde görünmez oluyordu. */
.hr-info .footer-contact-val {
    color: var(--text-color);
    font-weight: 500;
}

/* Bottom Bar */
.footer-bottom {
    padding: 22px 0;
}

.footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-copy {
    font-size: 12px;
    color: rgba(255,255,255,0.25);
    letter-spacing: 0.5px;
}

.footer-bottom-links {
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 12px;
    color: rgba(255,255,255,0.25);
}

.footer-bottom-links a {
    color: rgba(255,255,255,0.35);
    transition: color 0.2s ease;
}

.footer-bottom-links a:hover {
    color: var(--white);
}

/* Credits Strip (footer'in altinda, ajans imzasi) */
.credits-strip {
    background-color: #081019;
    border-top: 1px solid rgba(255,255,255,0.06);
    padding: 14px 0;
}

.credits-strip-inner {
    display: flex;
    justify-content: center;
}

.credits-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: rgba(255,255,255,0.3);
    font-size: 12px;
    letter-spacing: 0.3px;
    transition: color 0.2s ease, opacity 0.2s ease;
    opacity: 0.7;
}

.credits-link:hover {
    color: rgba(255,255,255,0.6);
    opacity: 1;
}

.credits-logo {
    height: 14px;
    width: auto;
    object-fit: contain;
}

/* ====================================================
   SUBPAGES: COMPACT HEADER (HERO + MANIFESTO)
   ==================================================== */

.compact-header {
    position: relative;
    background-color: var(--primary-color);
    /* Subtle Engineering Grid Texture */
    background-image: 
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    color: var(--white);
    padding: 180px 0 80px 0; /* Top padding offsets the fixed header */
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.compact-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
}

.ch-left {
    flex: 0 0 35%;
}

.ch-title {
    font-family: var(--font-pilat);
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 15px;
    line-height: 1.1;
}

.breadcrumbs {
    font-size: 12px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.5);
}
.breadcrumbs a { color: var(--white); text-decoration: none; }
.breadcrumbs a:hover { color: rgba(255,255,255,0.7); }
.breadcrumbs .sep { margin: 0 10px; color: rgba(255,255,255,0.3); }

.ch-right {
    flex: 0 0 60%;
    padding-left: 40px;
    border-left: 1px solid rgba(255,255,255,0.15);
}

.manifesto-eyebrow {
    font-size: 11px;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.85);
    text-transform: uppercase;
    margin-bottom: 15px;
}

.manifesto-text {
    font-family: 'Mont', sans-serif;
    font-weight: 600;
    font-size: 22px;
    line-height: 1.6;
    color: rgba(255,255,255,0.9);
    margin: 0;
}

.compact-header-container.solo .ch-left {
    flex: 0 0 100%;
}

/* ====================================================
   SUBPAGE: ABOUT US (HAKKIMIZDA)
   ==================================================== */

.about-split-section {
    padding: 120px 0;
    background-color: var(--white);
}

.about-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.about-heading {
    font-family: var(--font-pilat);
    font-size: 36px;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 30px;
    line-height: 1.2;
}

.about-text {
    font-size: 16px;
    color: rgba(13,24,35,0.7);
    line-height: 1.8;
    margin-bottom: 25px;
}

.about-stats {
    display: flex;
    gap: 40px;
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid rgba(13,24,35,0.1);
}

.about-content {
    /* Grid items default to min-width:auto — without this, the no-wrap
       .about-stats row below forces this whole column (and its heading)
       wider than the grid track, overflowing the viewport on mobile. */
    min-width: 0;
}

.stat-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.stat-number {
    font-family: var(--font-pilat);
    font-size: 42px;
    font-weight: 700;
    color: var(--primary-color);
}

.stat-label {
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--secondary-color);
    font-weight: 500;
}

.hk-about-image-wrapper {
    position: relative;
    height: 600px;
    border-radius: 4px;
    overflow: hidden;
}

.hk-about-image {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
}

.about-image-badge {
    position: absolute;
    bottom: -20px;
    left: -20px;
    background-color: var(--primary-color);
    width: 150px;
    height: 150px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-family: var(--font-pilat);
    font-size: 16px;
    font-weight: 700;
    transform: rotate(-15deg);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

/* ====================================================
   SUBPAGE: HISTORY (TARİHÇE)
   ==================================================== */

.timeline-section {
    padding: 120px 0;
    background-color: var(--white);
    position: relative;
}

.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

/* The vertical line */
.timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px;
    width: 2px;
    background-color: rgba(13,24,35,0.1);
}

.timeline-item {
    position: relative;
    padding-left: 80px;
    margin-bottom: 60px;
    opacity: 0;
    transform: translateY(30px);
    animation: fadeUpTimeline 0.8s ease forwards;
}

.timeline-item:last-child {
    margin-bottom: 0;
}

@keyframes fadeUpTimeline {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.timeline-item:nth-child(1) { animation-delay: 0.1s; }
.timeline-item:nth-child(2) { animation-delay: 0.2s; }
.timeline-item:nth-child(3) { animation-delay: 0.3s; }
.timeline-item:nth-child(4) { animation-delay: 0.4s; }
.timeline-item:nth-child(5) { animation-delay: 0.5s; }

.timeline-dot {
    position: absolute;
    left: 11px;
    top: 5px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--primary-color);
    border: 4px solid var(--white);
    box-shadow: 0 0 0 2px rgba(13,24,35,0.1);
}

.timeline-content {
    background: #f9f9f9;
    padding: 30px;
    border-radius: 4px;
    border-left: 3px solid var(--primary-color);
}

.timeline-year {
    font-family: var(--font-pilat);
    font-size: 32px;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.timeline-title {
    font-family: 'Mont', sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.timeline-text {
    font-size: 15px;
    color: rgba(13,24,35,0.7);
    line-height: 1.6;
}

/* ====================================================
   SUBPAGE: NEWS (BİZDEN HABERLER)
   ==================================================== */

.news-section {
    padding: 120px 0;
    background-color: #f9f9f9;
}

.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.news-card {
    background: var(--white);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.news-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.news-card.featured {
    grid-column: 1 / -1;
    flex-direction: row;
    min-height: 400px;
}

.news-img {
    height: 300px;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s ease;
}

.news-card.featured .news-img {
    flex: 0 0 60%;
    height: auto;
}

.news-card:hover .news-img {
    transform: scale(1.05);
}

.news-content {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--white);
    position: relative;
    z-index: 2;
}

.news-card.featured .news-content {
    flex: 1;
}

.news-date {
    font-size: 13px;
    color: var(--primary-color);
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-bottom: 15px;
    font-weight: 500;
}

.news-title {
    font-family: var(--font-pilat);
    font-size: 24px;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 20px;
    line-height: 1.3;
}

.news-card.featured .news-title {
    font-size: 32px;
}

.news-excerpt {
    font-size: 15px;
    color: rgba(13,24,35,0.7);
    line-height: 1.6;
    margin-bottom: 30px;
}

.news-readmore {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    color: var(--secondary-color);
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.news-card:hover .news-readmore {
    color: var(--primary-color);
}

/* ====================================================
   SUBPAGE: CERTIFICATES (SERTİFİKALAR)
   ==================================================== */

.certs-section {
    padding: 120px 0;
    background-color: var(--white);
}

.certs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
}

.cert-card {
    background: #f9f9f9;
    border: 1px solid rgba(13,24,35,0.05);
    border-radius: 4px;
    padding: 30px;
    text-align: center;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
}

.cert-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    background: var(--white);
}

.cert-img-wrapper {
    height: 250px;
    margin-bottom: 25px;
    background: var(--white);
    border: 1px dashed rgba(13,24,35,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: border-color 0.3s ease;
}

.cert-card:hover .cert-img-wrapper {
    border-color: var(--primary-color);
}

.cert-placeholder {
    font-family: var(--font-pilat);
    font-size: 24px;
    color: rgba(13,24,35,0.2);
    font-weight: 700;
}

.cert-title {
    font-family: 'Mont', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.cert-desc {
    font-size: 14px;
    color: rgba(13,24,35,0.6);
    line-height: 1.5;
}

/* ====================================================
   SUBPAGE: REFERENCES (REFERANSLARIMIZ)
   ==================================================== */

/* Projelerimiz: Büyük Animasyonlu Proje Hero'su (anasayfa hero'suyla aynı slider motoru) */
/* Every hero slide needs a scrim behind its text, not just the projects
   hero — the homepage slider had none, so white text sat directly on
   whatever part of the photo happened to be there (signage, bright sky),
   making it unreadable whenever the image wasn't dark under the text. */
.hero-slide::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Dark region reaches a bit further right than the classic hero-content
       box's 60% width, so a title stretching to the full box width stays
       readable instead of running off the end of the scrim. */
    background: linear-gradient(90deg, rgba(13,24,35,0.85) 0%, rgba(13,24,35,0.5) 64%, rgba(13,24,35,0.15) 100%);
    opacity: var(--overlay-strength, 0.7);
    z-index: 1;
}

/* Sararti (sarı ton) katmanı — karartıdan bağımsız, panelden ayrıca
   ayarlanabilen isteğe bağlı bir renk filtresi. Yönsüz/düz uygulanır
   (metin okunabilirliği için değil, genel görsel ton için). */
.hero-slide::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 183, 0, 1);
    opacity: var(--tint-strength, 0);
    z-index: 1;
}

/* Home hero — 3 selectable title/description layouts (Panel > Hero/Slider > Metin Tasarımı).
   Each layout also gets its own scrim direction — a left-to-right darkening
   only makes sense for left-anchored text; centered/bottom-anchored text
   needs the dark area to actually sit where that text sits. */
.hero-slide.style-center .container {
    align-items: center;
    justify-content: center;
    padding-top: 0;
    text-align: center;
}

.hero-slide.style-center .hero-content {
    max-width: 720px;
    margin: 0 auto;
}

.hero-slide.style-center .hero-desc {
    margin-left: auto;
    margin-right: auto;
}

.hero-slide.style-center::before {
    background: radial-gradient(ellipse at center, rgba(13,24,35,0.95) 0%, rgba(13,24,35,0.8) 35%, rgba(13,24,35,0.55) 65%, rgba(13,24,35,0.35) 100%);
}

.hero-slide.style-minimal .container {
    align-items: flex-end;
    padding-top: 0;
    padding-bottom: 70px;
}

.hero-slide.style-minimal .hero-title {
    font-size: 40px;
    margin-bottom: 10px;
}

.hero-slide.style-minimal .hero-desc {
    -webkit-line-clamp: 2;
    margin-bottom: 20px;
}

.hero-slide.style-minimal::before {
    background: linear-gradient(180deg, rgba(13,24,35,0) 35%, rgba(13,24,35,0.92) 100%);
}

/* Sağ üst / alt orta / sağ alt — sol taraftaki desenlerin ayna simetriği */
.hero-slide.style-topright .container {
    align-items: flex-start;
    justify-content: flex-end;
    text-align: right;
}

.hero-slide.style-topright .hero-content {
    margin-left: auto;
}

.hero-slide.style-topright .hero-desc {
    margin-left: auto;
    margin-right: 0;
}

.hero-slide.style-topright::before {
    background: linear-gradient(270deg, rgba(13,24,35,0.85) 0%, rgba(13,24,35,0.5) 64%, rgba(13,24,35,0.15) 100%);
}

.hero-slide.style-bottomcenter .container {
    align-items: flex-end;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 70px;
    text-align: center;
}

.hero-slide.style-bottomcenter .hero-content {
    max-width: 720px;
    margin: 0 auto;
}

.hero-slide.style-bottomcenter .hero-title {
    font-size: 40px;
    margin-bottom: 10px;
}

.hero-slide.style-bottomcenter .hero-desc {
    margin-left: auto;
    margin-right: auto;
    -webkit-line-clamp: 2;
    margin-bottom: 20px;
}

.hero-slide.style-bottomcenter::before {
    background: linear-gradient(180deg, rgba(13,24,35,0) 35%, rgba(13,24,35,0.92) 100%);
}

.hero-slide.style-bottomright .container {
    align-items: flex-end;
    justify-content: flex-end;
    padding-top: 0;
    padding-bottom: 70px;
    text-align: right;
}

.hero-slide.style-bottomright .hero-content {
    margin-left: auto;
}

.hero-slide.style-bottomright .hero-title {
    font-size: 40px;
    margin-bottom: 10px;
}

.hero-slide.style-bottomright .hero-desc {
    margin-left: auto;
    margin-right: 0;
    -webkit-line-clamp: 2;
    margin-bottom: 20px;
}

.hero-slide.style-bottomright::before {
    background: linear-gradient(180deg, rgba(13,24,35,0) 35%, rgba(13,24,35,0.92) 100%);
}

.proj-hero .breadcrumbs {
    margin-bottom: 22px;
}

/* Vertical dot navigator for the projects-page featured hero, aligned with
   the breadcrumb's left edge (same inset as .container, including its
   max-width-1440px centering) instead of hugging the raw viewport edge.
   Each dot carries its own project's name/location, revealed only next to
   the currently active dot (no JS changes needed — it just follows the
   existing .active class that the slider already toggles per dot). */
.proj-hero .hero-progress {
    left: max(5vw, calc((100vw - 1440px) / 2 + 5vw));
    right: auto;
    bottom: auto;
    top: 66%;
    transform: translateY(-50%);
    flex-direction: column;
    align-items: center;
    gap: 30px;
    padding: 0;
}

.proj-hero .hero-progress-bar {
    flex: 0 0 auto;
    width: 1.5px;
    height: 1.5px;
    border-radius: 50%;
    border: 0.75px solid rgba(255, 255, 255, 0.5);
    background: transparent;
    background-clip: content-box;
    /* Extra invisible padding enlarges the click target well beyond the
       visible dot, without changing how big the dot looks. */
    padding: 9px;
    box-sizing: content-box;
    margin: -9px;
    transition: border-color 0.25s ease, background-color 0.25s ease;
}

.proj-hero .hero-progress-track,
.proj-hero .hero-progress-fill {
    display: none;
}

.proj-hero .hero-progress-bar.active {
    width: 2px;
    height: 2px;
    background: var(--white);
    border-color: var(--white);
}

.proj-hero .hero-progress-bar.done {
    background: rgba(255, 255, 255, 0.55);
    border-color: rgba(255, 255, 255, 0.55);
}

.proj-hero .hero-title {
    font-size: 48px;
}

.proj-hero-mobile-caption {
    display: none;
}

.proj-hero-navtext {
    position: absolute;
    left: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.proj-hero .hero-progress-bar.active .proj-hero-navtext {
    opacity: 1;
    pointer-events: auto;
}

.proj-hero-navtext-name {
    font-family: var(--font-pilat);
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--white);
}

.proj-hero-navtext-sep {
    color: rgba(255, 255, 255, 0.4);
    font-size: 15px;
}

.proj-hero-navtext-loc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Scroll-reveal utility */
.reveal-up {
    opacity: 0;
    transform: translateY(34px);
    transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal-up.in-view {
    opacity: 1;
    transform: translateY(0);
}

.refs-search-wrap {
    position: relative;
    max-width: 340px;
    margin: 0 auto 32px;
}

.refs-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    pointer-events: none;
}

.refs-search-input {
    width: 100%;
    padding: 11px 14px 11px 40px;
    font-size: 14px;
    font-family: inherit;
    color: var(--text-color);
    background-color: #f9f9f9;
    border: 1px solid rgba(13,24,35,0.1);
    border-radius: 30px;
    outline: none;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.refs-search-input:focus {
    border-color: var(--primary-color);
    background-color: var(--white);
}

.refs-search-input::placeholder {
    color: var(--text-light);
}

.refs-filter-group {
    margin-bottom: 26px;
}

.refs-filter-label {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.refs-section {
    padding: 120px 0;
    background-color: var(--white);
}

.refs-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 60px;
}

.filter-btn {
    background: transparent;
    border: 1px solid rgba(13,24,35,0.2);
    padding: 10px 25px;
    border-radius: 30px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 14px;
    color: var(--secondary-color);
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-btn:hover,
.filter-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

.refs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.ref-card {
    position: relative;
    height: 350px;
    overflow: hidden;
    border-radius: 4px;
    text-decoration: none;
    display: block;
}

.ref-img {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.ref-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(13,24,35,0.95) 0%, rgba(13,24,35,0.2) 60%, transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 30px;
    opacity: 1; /* Always show gradient for legibility */
    transition: background 0.4s ease;
}

.ref-category {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 10px;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.4s ease;
}

.ref-title {
    font-family: var(--font-pilat);
    font-size: 22px;
    font-weight: 700;
    color: var(--white);
    margin-bottom: 0;
    transition: transform 0.4s ease;
}

.ref-view {
    font-size: 14px;
    color: var(--white);
    margin-top: 15px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s ease;
    transition-delay: 0.1s;
}

.ref-card:hover .ref-img {
    transform: scale(1.1);
}

.ref-card:hover .ref-overlay {
    background: rgba(13,24,35,0.7);
}

.ref-card:hover .ref-category,
.ref-card:hover .ref-view {
    opacity: 1;
    transform: translateY(0);
}

.ref-card:hover .ref-title {
    transform: translateY(-5px);
}

.ref-badge {
    position: absolute;
    top: 30px;
    left: 22px;
    z-index: 2;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--white);
    background: var(--primary-color);
    padding: 5px 12px;
    border-radius: 30px;
}

.refs-grid.cols-4 {
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: 230px;
    gap: 18px;
}

.refs-grid.cols-4 .ref-card {
    height: 100%;
}

.refs-grid.cols-4 .ref-overlay {
    padding: 16px;
}

.refs-grid.cols-4 .ref-badge {
    top: 14px;
    left: 14px;
}

.refs-grid.cols-4 .ref-title {
    font-size: 16px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.refs-grid.cols-4 .ref-card.ref-big {
    grid-column: span 2;
    grid-row: span 2;
}

.refs-grid.cols-4 .ref-card.ref-big .ref-overlay {
    padding: 30px;
}

.refs-grid.cols-4 .ref-card.ref-big .ref-badge {
    top: 30px;
    left: 22px;
}

.refs-grid.cols-4 .ref-card.ref-big .ref-title {
    font-size: 28px;
    -webkit-line-clamp: 3;
}

/* Yukarı Çık Butonu (Buzlu Cam) */
.scroll-top-btn {
    position: fixed;
    right: 30px;
    bottom: 30px;
    width: 52px;
    height: 52px;
    border-radius: 18px;
    background: rgba(13, 24, 35, 0.35);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--white);
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px);
    transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease;
    z-index: 500;
}

.scroll-top-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-top-btn:hover {
    background: rgba(13, 24, 35, 0.55);
    border-color: rgba(255, 255, 255, 0.4);
}

.scroll-top-btn svg {
    width: 22px;
    height: 22px;
}

@media (max-width: 640px) {
    .scroll-top-btn {
        right: 16px;
        bottom: 16px;
        width: 44px;
        height: 44px;
        border-radius: 14px;
    }
    .scroll-top-btn svg {
        width: 18px;
        height: 18px;
    }
}

/* Proje Fotoğraf Galerisi (Lightbox) */
.proj-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(13, 24, 35, 0.94);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
}

.proj-lightbox.open {
    opacity: 1;
    visibility: visible;
}

.lightbox-stage {
    position: relative;
    max-width: 86vw;
    max-height: 86vh;
    text-align: center;
}

.lightbox-stage img {
    max-width: 86vw;
    max-height: 74vh;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}

.lightbox-caption {
    color: var(--white);
    margin: 18px 0 4px;
    font-family: var(--font-pilat);
    font-size: 18px;
}

.lightbox-counter {
    display: block;
    color: rgba(255, 255, 255, 0.55);
    font-size: 13px;
    letter-spacing: 1px;
}

.lightbox-close {
    position: absolute;
    top: 24px;
    right: 30px;
    background: none;
    border: none;
    color: var(--white);
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 2;
}

.lightbox-nav:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.lightbox-nav.prev { left: 30px; }
.lightbox-nav.next { right: 30px; }

.proj-lightbox.single-image .lightbox-nav {
    display: none;
}

@media (max-width: 640px) {
    .lightbox-nav { width: 42px; height: 42px; font-size: 16px; }
    .lightbox-nav.prev { left: 10px; }
    .lightbox-nav.next { right: 10px; }
    .lightbox-close { top: 14px; right: 16px; font-size: 28px; }
    .lightbox-caption { font-size: 15px; }
}

/* ====================================================
   SUBPAGE: HR (İNSAN KAYNAKLARI)
   ==================================================== */

.hr-section {
    padding: 120px 0;
    background-color: #f9f9f9;
}

.hr-split-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: flex-start;
}

.hr-heading {
    font-family: var(--font-pilat);
    font-size: 32px;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 25px;
    line-height: 1.3;
}

.hr-text {
    font-size: 16px;
    color: rgba(13,24,35,0.7);
    line-height: 1.8;
    margin-bottom: 20px;
}

.hr-features {
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.hr-feature {
    display: flex;
    align-items: center;
    gap: 15px;
}

.hr-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background-color: var(--primary-color);
    color: var(--white);
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
}

.hr-feature-text {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 16px;
    color: var(--secondary-color);
}

.hr-form-wrapper {
    background: var(--white);
    padding: 50px;
    border-radius: 4px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.05);
}

.form-title {
    font-family: var(--font-pilat);
    font-size: 24px;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 30px;
}

.form-group {
    margin-bottom: 20px;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.form-control {
    width: 100%;
    padding: 15px 20px;
    background: #f5f7fa;
    border: 1px solid transparent;
    border-radius: 4px;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    color: var(--secondary-color);
    transition: all 0.3s ease;
}

.form-control:focus {
    outline: none;
    background: var(--white);
    border-color: var(--primary-color);
}

.file-upload-group {
    position: relative;
}

.file-upload-input {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0;
    cursor: pointer;
}

.file-upload-label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background: #f5f7fa;
    border: 1px dashed rgba(13,24,35,0.2);
    border-radius: 4px;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    color: rgba(13,24,35,0.6);
}

.file-upload-btn {
    background: var(--primary-color);
    color: var(--white);
    padding: 5px 15px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 500;
}

.hr-submit-btn {
    width: 100%;
    padding: 18px;
    background: var(--primary-color);
    color: var(--white);
    border: none;
    border-radius: 4px;
    font-family: var(--font-heading);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hr-submit-btn:hover {
    background: #004d80;
}

.form-note {
    font-size: 12px;
    color: rgba(13,24,35,0.5);
    text-align: center;
    margin-top: 15px;
}

/* ====================================================
   SUBPAGE: KVKK (KİŞİSEL VERİLERİN KORUNMASI)
   ==================================================== */

.kvkk-section {
    padding: 120px 0;
    background-color: var(--white);
}

.kvkk-list {
    max-width: 900px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.kvkk-doc-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 30px;
    background: #f9f9f9;
    border: 1px solid rgba(13,24,35,0.05);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.kvkk-doc-item:hover {
    transform: translateY(-6px);
    background: var(--white);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    border-color: rgba(13,24,35,0.1);
}

.doc-icon {
    width: 60px;
    height: 60px;
    background: var(--primary-color);
    color: var(--white);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    flex-shrink: 0;
}

.doc-info {
    margin-bottom: 22px;
}

.doc-title {
    font-family: 'Mont', sans-serif;
    font-size: 18px;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 8px;
}

.doc-meta {
    font-size: 13px;
    color: rgba(13,24,35,0.5);
}

.doc-download-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 25px;
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 14px;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* --- Language Dropdown --- */
.lang-dropdown-wrapper {
    position: relative;
    display: inline-block;
}

.lang-switch {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--white);
    padding: 8px 15px;
    border-radius: 4px;
    font-family: var(--font-heading);
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}

.lang-switch:hover,
.lang-dropdown-wrapper:hover .lang-switch {
    border-color: var(--white);
    background: rgba(255, 255, 255, 0.1);
}

.lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--white);
    min-width: 100px;
    border-radius: 4px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    list-style: none;
    padding: 10px 0;
    margin: 10px 0 0 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 100;
}

.lang-dropdown-wrapper:hover .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.lang-dropdown li a {
    display: block;
    padding: 8px 20px;
    color: var(--secondary-color);
    text-decoration: none;
    font-family: var(--font-heading);
    font-size: 13px;
    font-weight: 500;
    transition: background 0.2s ease, color 0.2s ease;
}

.lang-dropdown li a:hover,
.lang-dropdown li a.active {
    background: rgba(0, 87, 184, 0.05);
    color: var(--primary-color);
}
/* --- End Language Dropdown --- */

.doc-download-btn:hover {
    background: var(--primary-color);
    color: var(--white);
}

.doc-actions {
    display: flex;
    gap: 10px;
}

.doc-download-btn.icon-only {
    padding: 12px;
}

/* Terms & Conditions (KVKK page) */
.terms-section {
    padding: 60px 0 100px;
    background-color: var(--white);
}

.terms-heading {
    margin-bottom: 30px;
}

.terms-eyebrow {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.terms-heading h2 {
    font-family: 'Mont', sans-serif;
    font-size: 32px;
    font-weight: 600;
    color: var(--secondary-color);
    margin: 0;
}

.terms-heading-rule {
    width: 60px;
    height: 3px;
    background-color: var(--primary-color);
    border: none;
    margin: 20px 0 0;
}

.terms-content h3 {
    font-family: 'Mont', sans-serif;
    font-size: 19px;
    font-weight: 700;
    color: var(--secondary-color);
    margin: 36px 0 12px;
    padding-left: 16px;
    position: relative;
}

.terms-content h3:first-child {
    margin-top: 0;
}

.terms-content h3::before {
    content: '';
    position: absolute;
    left: 0;
    top: 3px;
    bottom: 3px;
    width: 3px;
    background-color: var(--primary-color);
    border-radius: 2px;
}

.terms-content p {
    color: var(--text-light);
    font-size: 15px;
    line-height: 1.85;
    margin-bottom: 16px;
}

.terms-content strong {
    color: var(--secondary-color);
}

.terms-content ul, .terms-content ol {
    color: var(--text-light);
    font-size: 15px;
    line-height: 1.85;
    padding-left: 20px;
    margin-bottom: 16px;
}

/* Pillar Cards Layout */
.pillar-section {
    background-color: var(--white);
    padding: 0;
    height: 700px;
}

.pillar-container {
    display: flex;
    width: 100%;
    height: 100%;
}

.pillar-card {
    flex: 1;
    position: relative;
    height: 100%;
    overflow: hidden;
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    cursor: pointer;
    border-right: 1px solid rgba(255,255,255,0.1);
}

.pillar-card:last-child {
    border-right: none;
}

/* Background Image */
.pillar-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.8s ease;
    z-index: 1;
}

/* Dark Overlay */
.pillar-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0.1) 100%);
    transition: background 0.6s ease;
    z-index: 2;
}

/* Content Area */
.pillar-content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 32px 24px;
    z-index: 3;
    color: var(--white);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}

.pillar-header {
    transition: transform 0.6s ease;
}

.pillar-num {
    font-family: var(--font-heading);
    font-size: 14px;
    color: var(--primary-color);
    letter-spacing: 2px;
    margin-bottom: 10px;
    display: block;
}

.pillar-title {
    font-family: var(--font-pilat);
    font-size: clamp(16px, 1.4vw, 25px);
    line-height: 1.2;
    margin: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

/* Hidden Details */
.pillar-details {
    height: 0;
    opacity: 0;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    margin-top: 0;
}

.pillar-list {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    font-size: 15px;
    line-height: 2.2;
    color: rgba(255,255,255,0.8);
}

.pillar-list.double-col {
    column-count: 2;
    column-gap: 20px;
}

.pillar-link {
    display: inline-flex;
    align-items: center;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--primary-color);
    text-decoration: none;
}
.pillar-link .arrow {
    margin-left: 10px;
    transition: transform 0.3s ease;
}
.pillar-link:hover .arrow {
    transform: translateX(5px);
}

/* Hover States */
.pillar-card:hover {
    flex: 1; /* Genişlik sabit kalır — başlık her koşulda aynı satırlara sarılır, "garip" reflow olmaz */
}

.pillar-card:hover .pillar-bg {
    transform: scale(1.1); /* Zoom image */
}

.pillar-card:hover .pillar-overlay {
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.6) 60%, rgba(0,0,0,0.3) 100%);
}

.pillar-card:hover .pillar-header {
    transform: translateY(-20px);
}

.pillar-card:hover .pillar-details {
    height: auto;
    opacity: 1;
    margin-top: 20px;
}

/* --- FAALİYET KATEGORİ SAYFASI (tek sayfa, akıcı akış) --- */
.category-intro {
    padding: 70px 0 50px;
    background: var(--white);
}

.category-intro .container {
    max-width: 880px;
}

.category-intro p {
    font-size: 18px;
    line-height: 1.8;
    color: var(--text-light);
}

.category-body-grid {
    display: grid;
    grid-template-columns: 230px 1fr;
    gap: 70px;
    align-items: start;
    padding-top: 60px;
}

.category-body-grid.no-nav {
    grid-template-columns: 1fr;
}

.category-sidenav {
    position: sticky;
    top: 110px;
}

.category-sidenav-label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #b0b6bd;
    margin-bottom: 18px;
}

.category-sidenav nav {
    display: flex;
    flex-direction: column;
}

.category-sidenav nav a {
    padding: 13px 0 13px 18px;
    color: var(--text-light);
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    border-left: 2px solid #e7e9ec;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.category-sidenav nav a:hover {
    color: var(--secondary-color);
    border-left-color: #b0b6bd;
}

.category-sidenav nav a.active {
    color: var(--primary-color);
    font-weight: 700;
    border-left-color: var(--primary-color);
    background: linear-gradient(to right, rgba(0,106,179,0.06), transparent 85%);
}

.category-rows {
    min-width: 0;
}

.svc-row {
    display: flex;
    align-items: center;
    gap: 70px;
    padding: 90px 0;
    scroll-margin-top: 90px;
}

.svc-row:not(:last-child) {
    border-bottom: 1px solid #f0f0f0;
}

.svc-row.reverse {
    flex-direction: row-reverse;
}

.svc-row-media-wrap {
    flex: 0 0 45%;
    min-width: 0;
}

.svc-row-media {
    height: 440px;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 30px 60px rgba(0,0,0,0.12);
}

.svc-row-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.35s ease;
}

.svc-row-thumbs {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.svc-thumb {
    flex: 1;
    max-width: 90px;
    height: 64px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    cursor: pointer;
    opacity: 0.55;
    border: 2px solid transparent;
    transition: opacity 0.2s ease, border-color 0.2s ease;
}

.svc-thumb:hover {
    opacity: 0.85;
}

.svc-thumb.active {
    opacity: 1;
    border-color: var(--primary-color);
}

.svc-row-content {
    flex: 1;
    min-width: 0;
}

.svc-row-eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--primary-color);
    margin-bottom: 14px;
}

.svc-row-title {
    font-family: var(--font-pilat);
    font-size: 34px;
    color: var(--secondary-color);
    margin-bottom: 20px;
    line-height: 1.15;
}

.svc-row-desc {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-light);
    margin-bottom: 20px;
}

.svc-row-body {
    font-size: 15px;
    line-height: 1.9;
    color: var(--text-color);
}

.svc-row-projects {
    margin-top: 30px;
    padding-top: 26px;
    border-top: 1px solid rgba(13,24,35,0.08);
}

.svc-row-projects-title {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 14px;
}

.svc-row-thumbs-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.svc-proj-thumb {
    width: 86px;
    height: 68px;
    border-radius: 6px;
    background-size: cover;
    background-position: center;
    display: block;
    flex: 0 0 auto;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.svc-proj-thumb:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(13,24,35,0.18);
}

/* Responsive */
@media (max-width: 1024px) {
    /* Base Responsive Restorations */
    .container { width: 90%; }
    .hero-title { font-size: 64px; }
    .desktop-nav { display: none; }
    .menu-toggle { display: flex; }
    .header-right { gap: 15px; }
    
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .eng-inner { grid-template-columns: 1fr; }
    .eng-text-side { padding: 60px 30px; }
    .eng-image-side { height: 400px; }
    .journal-grid { grid-template-columns: repeat(2, 1fr); }
    .marquee-content h3 { font-size: 22px; margin: 0 25px; }

    /* Services Page Responsive */
    .compact-header { padding: 140px 0 60px 0; }
    .compact-header-container { flex-direction: column; align-items: flex-start; gap: 30px; }
    .ch-left, .ch-right { flex: 0 0 100%; }
    .ch-right { padding-left: 0; border-left: none; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.15); }
    .ch-title { font-size: 36px; }
    .manifesto-text { font-size: 18px; }
    
    .about-split-grid { grid-template-columns: 1fr; gap: 50px; }
    .hk-about-image-wrapper { height: 400px; }
    
    .news-card.featured { flex-direction: column; }
    .news-card.featured .news-img { height: 300px; flex: auto; }
    .news-grid { grid-template-columns: 1fr; }
    
    .certs-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
    
    .refs-grid { grid-template-columns: repeat(2, 1fr); }
    .refs-grid.cols-4 { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 240px; }
    .refs-grid.cols-4 .ref-card.ref-big .ref-title { font-size: 24px; }

    .hr-split-grid { grid-template-columns: 1fr; gap: 50px; }
    
    .pillar-section { height: auto; }
    .pillar-container { flex-direction: column; }
    .pillar-card { height: 400px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }

    .svc-row, .svc-row.reverse { flex-direction: column; gap: 30px; padding: 50px 0; }
    .svc-row-media-wrap { width: 100%; flex: 0 0 auto; }
    .svc-row-media { height: 280px; }
    .svc-row-title { font-size: 26px; }

    .category-body-grid { grid-template-columns: 1fr; gap: 20px; padding-top: 30px; }
    /* This is an intentionally horizontally-scrollable tab strip (nowrap +
       overflow-x:auto below), but as a grid item its default min-width:auto
       let that unwrapped content's full width leak out and blow up the
       whole grid track — the entire page rendered as wide as all the tabs
       laid end-to-end (over 1200px) instead of the tabs scrolling within
       a normal-width page. min-width:0 is the standard grid/flex fix. */
    .category-sidenav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,0.95); backdrop-filter: blur(8px); padding: 14px 0; margin: 0 -20px; min-width: 0; }
    .category-sidenav-label { display: none; }
    .category-sidenav nav { flex-direction: row; gap: 22px; overflow-x: auto; padding: 0 20px; }
    .category-sidenav nav a { padding: 8px 0; border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; flex: 0 0 auto; }
    .category-sidenav nav a.active { background: none; border-bottom-color: var(--primary-color); }
    .pillar-card:hover { flex: 1; } /* Disable flex grow on mobile */
    .pillar-card:hover .pillar-header { transform: none; }
    .pillar-details { display: none; /* Hide hover details on tablet/mobile for simplicity, or handle via JS */ }
    /* Alternative for mobile: always show details */
    .pillar-card { height: auto; padding-top: 150px; }
    .pillar-details { height: auto; opacity: 1; margin-top: 20px; display: block; }
    .pillar-list.double-col { column-count: 1; }
    .pillar-content { position: relative; padding: 40px 20px; }
    /* .pillar-overlay's gradient was tuned for the short desktop card where
       text only sits in the bottom sliver. On mobile the card grows tall
       (title + full list always shown) so the text spans up into the much
       lighter part of that gradient, letting busy photo detail (signage,
       bright sky) show through behind the upper list items. Darken evenly. */
    .pillar-overlay { background: linear-gradient(to bottom, rgba(13,24,35,0.55) 0%, rgba(13,24,35,0.8) 40%, rgba(13,24,35,0.92) 100%) !important; }
    
    /* Header & Nav */
    .nav-menu { gap: 20px; }
    .nav-menu a { font-size: 13px; }
    
    /* Hero — height must stay a definite value (not auto): .hero-slide is
       position:absolute + inset:0 and needs a real height from its ancestor
       chain (.hero -> .hero-slides) to render at all. height:auto here
       collapsed the slider to ~0px, hiding the bg image entirely and making
       the white header/logo/title invisible against the blank page. */
    .hero { height: 100vh; min-height: 560px; padding-bottom: 50px; }
    .hero .container { flex-direction: column; justify-content: center; padding-top: 140px; }
    .hero-content { max-width: 100%; margin-bottom: 40px; }
    /* On mobile the text stack spans the full image width/height (not just
       the left half like desktop), so the left-heavy gradient above leaves
       the lower-right mostly undarkened, right where the text/button sit.
       Use a fuller top-to-bottom scrim instead so text stays legible no
       matter which part of the photo is behind it. */
    .hero-slide::before {
        background: linear-gradient(180deg, rgba(13,24,35,0.35) 0%, rgba(13,24,35,0.55) 45%, rgba(13,24,35,0.88) 100%);
    }
    .hero-title { font-size: 48px; white-space: normal; line-height: 1.2; }
    .hero-desc br { display: none; } /* Prevent awkward breaks */

    /* Hero Pins Mobile Redesign */
    .pin-anchor {
        position: relative;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        top: auto !important;
        width: 100%;
        margin-bottom: 15px;
        transform: none !important; /* Disable fade-out movement */
        opacity: 1 !important;
    }
    .pin-line-diag, .pin-line-h, .pin-dot { display: none; }
    .pin-info {
        position: relative;
        left: auto !important;
        top: auto !important;
        bottom: auto !important;
        right: auto !important;
        width: 100%;
        max-width: 100%;
    }

    .about .container, .services-wrapper { grid-template-columns: 1fr; gap: 40px; }
    .about-visual { max-width: 100%; margin-left: 0; }
    .services-sticky-image { position: relative; top: 0; height: 400px; margin-bottom: 40px; }
    .impact-grid { grid-template-columns: repeat(2, 1fr); }
    .featured-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 230px; padding: 0 20px; }
    .feat-card.large { grid-column: span 2; grid-row: span 1; }
    .feat-card.large .feat-card-title { font-size: 22px; }
    .eng-inner { grid-template-columns: 1fr; }
    .eng-text-side { padding: 60px 30px; }
    .eng-image-side { height: 400px; }
    .journal-grid { grid-template-columns: repeat(2, 1fr); }
    .marquee-content h3 { font-size: 22px; margin: 0 25px; }
    
    /* Services Page Responsive */
    .page-hero { min-height: 300px; }
    .page-title { font-size: 48px; }
    .manifesto-text { font-size: 28px; }
    
    .editorial-row, .editorial-row.reverse { flex-direction: column; margin-bottom: 80px; }
    .proj-feat-head { flex-direction: column; align-items: flex-start; gap: 20px; }
    .proj-feat-heading { font-size: 26px; }
    .proj-feat-card { flex: 0 0 300px; height: 400px; }
    .ed-image-wrap, .editorial-row.reverse .ed-image-wrap.portrait, .editorial-row.reverse.panorama .ed-image-wrap { flex: 0 0 auto; width: 100%; height: 500px; margin-right: 0; }
    .ed-text-wrap, .editorial-row.reverse .ed-text-wrap { flex: 0 0 auto; width: 100%; padding: 40px 30px; }
    .ed-title { font-size: 42px; }
    
    /* Footer responsive */
    .footer-cta-inner { flex-direction: column; align-items: flex-start; gap: 40px; }
    .footer-cta-title { font-size: 40px; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    .footer-brand { grid-column: span 2; }
    .footer-bottom-inner { flex-direction: column; gap: 16px; text-align: center; }
}

@media (max-width: 800px) {
    .desktop-nav { display: none; } /* Hide menu on smaller tablets/mobile for now */
    .pin-anchor { display: none !important; } /* Hide extra text pins completely to let image breathe */
}

@media (max-width: 640px) {
    .header { padding: 15px 0; }
    /* Logo + language switch + hamburger were overflowing past the right
       edge on real phone widths (~360-414px) and getting silently clipped
       by body's overflow-x:hidden — the hamburger was invisible, so the
       menu could not be opened at all. Shrink everything to fit. */
    .logo img { height: 50px; }
    .header-right { gap: 10px; }
    .lang-switch { padding: 6px 10px; gap: 4px; font-size: 12px; }
    .menu-toggle { padding: 8px 6px; gap: 5px; }
    .menu-line { width: 24px; }
    .hero-content { max-width: 100%; }
    .hero-title { font-size: 32px; white-space: normal; }
    .hero-desc { font-size: 14px; margin-bottom: 25px; }
    .hero-progress { padding: 0 20px; bottom: 20px; gap: 6px; }
    .proj-hero .hero-title { font-size: 32px; }
    .proj-hero .hero-progress {
        left: 0; right: 0; top: auto; bottom: 24px; transform: none;
        flex-direction: row; justify-content: center;
    }
    /* The per-dot caption (desktop) is centered on its own narrow dot, which
       overflows/clips on phone-width screens with long project names — so on
       mobile it's hidden in favor of a single full-width caption per slide
       (below), shown only for the active slide via the normal slide clipping. */
    .proj-hero .hero-progress-bar .proj-hero-navtext {
        display: none;
    }
    .proj-hero-mobile-caption {
        display: flex;
        position: absolute;
        left: 20px;
        right: 20px;
        bottom: 58px;
        z-index: 4;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
        text-align: center;
    }
    .proj-hero-navtext-name { font-size: 13px; }
    .proj-hero-navtext-loc { font-size: 12px; }

    /* Mobile text position is chosen per-slide in the admin (default "top"):
       text sits near the top, in the usually-quieter upper part of the
       photo, right below the header, with a scrim that darkens the top and
       fades out fast so the rest of the photo stays visible. Slides can opt
       back into the old centered layout (e.g. videos, where the busy area
       tends to sit lower and centering reads better) via "mobile-pos-center".
       Phone-only: tablets keep the desktop-style layout above. */
    .hero-slide.mobile-pos-top .container {
        justify-content: flex-start;
        padding-top: 100px;
    }
    .hero-slide.mobile-pos-top::before {
        background: linear-gradient(180deg, rgba(13,24,35,0.65) 0%, rgba(13,24,35,0.4) 32%, rgba(13,24,35,0.1) 55%, rgba(13,24,35,0.1) 100%);
    }
    .hero-slide.mobile-pos-center .container {
        justify-content: center;
        padding-top: 140px;
    }
    .hero-slide.mobile-pos-center::before {
        background: linear-gradient(180deg, rgba(13,24,35,0.35) 0%, rgba(13,24,35,0.55) 45%, rgba(13,24,35,0.88) 100%);
    }
    
    .impact-grid { grid-template-columns: 1fr; gap: 30px; margin-bottom: 20px; }
    .impact-number { font-size: 48px; }
    .impact-plus { font-size: 32px; vertical-align: top; }
    .impact-label { font-size: 13px; margin-top: 5px; }
    .eng-title { font-size: 28px; line-height: 1.2; }
    .featured-grid { grid-template-columns: 1fr; grid-auto-rows: 220px; gap: 16px; }
    .feat-card.large { grid-column: span 1; grid-row: span 1; }
    .feat-card.large .feat-card-title { font-size: 19px; }
    .journal-grid { grid-template-columns: 1fr; }
    .marquee-content h3 { font-size: 18px; margin: 0 15px; -webkit-text-stroke: 0.5px rgba(0,0,0,0.35); }
    .marquee-content img.partner-logo, .marquee-content h3 { height: 32px; line-height: 32px; margin: 0 15px; }
    
    /* Services Page Mobile */
    .ch-title { font-size: 32px; }
    .manifesto-text { font-size: 16px; }
    
    .pillar-title { font-size: 26px; }
    .pillar-list { font-size: 14px; }
    
    .certs-grid { grid-template-columns: 1fr; }
    
    .refs-grid { grid-template-columns: 1fr; }
    .refs-grid.cols-4 { grid-template-columns: 1fr; grid-auto-rows: 220px; }
    .refs-grid.cols-4 .ref-card.ref-big { grid-column: span 1; grid-row: span 1; }

    .hr-form-wrapper { padding: 30px 20px; }

    .kvkk-list { grid-template-columns: 1fr; }
    .doc-actions { margin-top: 4px; width: 100%; }
    .doc-download-btn { flex: 1; justify-content: center; }

    .footer-cta-title { font-size: 30px; }
    .footer-cta-btn { width: 100%; justify-content: center; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-brand { grid-column: span 1; }
}


/* COMPACT MODERN REFERENCE LIST */
.ref-list-section { padding: 40px 0; background-color: #f9fbfd; }
.ref-list-container { max-width: 1200px; margin: 0 auto; background: #ffffff; border-radius: 8px; box-shadow: 0 4px 20px rgba(0,0,0,0.03); overflow: hidden; border: 1px solid #eef2f6; }
.ref-list-header { display: grid; grid-template-columns: 2fr 1fr 1.5fr; padding: 12px 20px; background-color: #f1f5f9; color: var(--secondary-color); font-family: var(--font-heading); font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; font-size: 11px; border-bottom: 2px solid #e2e8f0; }
.ref-list-row { display: grid; grid-template-columns: 2fr 1fr 1.5fr; padding: 8px 20px; border-bottom: 1px solid #f1f5f9; transition: var(--transition); align-items: center; }
.ref-list-row:nth-child(even) { background-color: #fafbfc; }
.ref-list-row:last-child { border-bottom: none; }
.ref-list-row:hover { background-color: #f0f7fc; }
.ref-col-project { font-weight: 600; color: var(--secondary-color); font-size: 12px; }
.ref-col-location { color: var(--text-light); font-size: 11px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.ref-col-employer { color: var(--text-color); font-size: 11px; font-weight: 500; }

.section-title-lg {
    font-family: var(--font-pilat);
    color: var(--secondary-color);
    font-size: 32px;
    overflow-wrap: break-word;
}

/* ====================================================
   MOBILE RESPONSIVE — SITE-WIDE PASS (2026-08-28)
   ==================================================== */

/* Single long uppercase words (e.g. "PROJELERİMİZ") in these headings were
   wider than a phone viewport and had no way to wrap, so they got silently
   clipped at the screen edge by body's overflow-x:hidden. */
@media (max-width: 480px) {
    .section-title-lg { font-size: 24px; }
}

/* Same grid/flex-blowout family of bug as .about-content above: a no-wrap
   flex row of stat boxes was forcing its column wider than the viewport. */
@media (max-width: 640px) {
    .about-stats { flex-wrap: wrap; row-gap: 24px; column-gap: 30px; }
}

/* Logo marquee: the animation moves a fixed px/sec regardless of viewport.
   On a narrow phone screen that same speed means far more logos flash
   through the small visible window every second than on desktop, so it
   reads as "too fast to see" even though the physical speed is identical.
   Slow the cycle down so a comfortable number of logos pass per second. */
@media (max-width: 768px) {
    .marquee-content { animation-duration: 48s; }
}
@media (max-width: 480px) {
    .marquee-content { animation-duration: 60s; }
}

/* Blanket safety net: headings should never force horizontal overflow,
   even ones we haven't specifically audited. Lets a too-long word break
   instead of silently overflowing past the (clipped) viewport edge. */
h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* Homepage "Services Interactive Scroll": items rely on :hover (mouseenter
   in JS) to switch from light-gray #e0e0e0 to readable blue. Touch devices
   have no hover, so every item except the first stayed near-invisible
   light-gray-on-white forever — most of this section was unreadable on
   mobile. Make everything readable regardless of active/hover state. */
@media (max-width: 1024px) {
    .service-item {
        color: var(--secondary-color);
        font-size: 22px;
        padding: 16px 0;
    }
    .service-item.active, .service-item:hover {
        color: var(--primary-color);
        padding-left: 12px;
    }
    .service-item::after { display: none; }
}

/* Reduce oversized section padding on tablet/mobile so content
   doesn't feel like it's mostly empty space on a small screen */
@media (max-width: 768px) {
    .about, .services, .featured-projects, .journal, .about-split-section,
    .timeline-section, .news-section, .certs-section, .refs-section,
    .hr-section, .kvkk-section {
        padding-top: 70px;
        padding-bottom: 70px;
    }
    .global-impact { padding-top: 60px; padding-bottom: 60px; }
}

/* Fullscreen overlay nav menu: on short phone screens the 7 links + 2
   dropdowns + footer badly overflow the viewport with no way to scroll
   to the lower items (İletişim, KVKK). Make it compact + scrollable. */
@media (max-width: 768px) {
    .overlay-menu-inner {
        justify-content: flex-start;
        height: 100%;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding-top: 100px;
        padding-bottom: 40px;
    }
    .overlay-nav { gap: 6px; }
    .overlay-link { font-size: 26px; gap: 14px; }
    .overlay-num { font-size: 11px; }
    .overlay-dropdown .arr { font-size: 18px; }
    .overlay-submenu { padding-left: 28px; gap: 10px; margin-top: 8px; margin-bottom: 8px; }
    .overlay-submenu a { font-size: 16px; }
    .overlay-close { top: 18px; right: 20px; font-size: 34px; }
    .overlay-footer { margin-top: 24px; padding-top: 20px; flex-direction: column; gap: 16px; align-items: flex-start; }
}

/* Referanslarımız — "Referanslar Listesi" tablosu: 3 sabit kolon dar
   ekranda birbirine giriyordu. Küçük ekranda alt alta kart haline getir. */
@media (max-width: 700px) {
    .ref-list-header { display: none; }
    .ref-list-row {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 14px 16px;
    }
    .ref-col-project { font-size: 14px; }
    .ref-col-location, .ref-col-employer { font-size: 12px; }
}

/* Small phone polish */
@media (max-width: 480px) {
    .filter-btn { padding: 8px 18px; font-size: 13px; }
    .ref-title { font-size: 18px; }
    .footer-cta-title { font-size: 26px; }
}