/* ===========================
   CSS Custom Properties
   =========================== */
:root {
    /* Colors - Dark Theme */
    --bg-primary: #0b0d17;
    --bg-secondary: #111427;
    --bg-tertiary: #161937;
    --bg-card: #131630;

    /* Text Colors */
    --text-primary: #e8eaf0;
    --text-secondary: #a0a4c0;
    --text-tertiary: #6b6f8d;
    --text-light: #4a4e6a;

    /* Accent - Vibrant Cyan to White */
    --accent-primary: #06b6d4;
    --accent-secondary: #e0f2fe;
    --accent-tertiary: #ffffff;
    --accent-gradient: linear-gradient(135deg, #06b6d4 0%, #7dd3fc 50%, #ffffff 100%);
    --accent-gradient-hover: linear-gradient(135deg, #0891b2 0%, #38bdf8 50%, #f8fafc 100%);
    --accent-glow: rgba(6, 182, 212, 0.1);
    --accent-glow-strong: rgba(6, 182, 212, 0.2);

    /* Borders & Shadows */
    --border-color: rgba(255, 255, 255, 0.06);
    --border-color-hover: rgba(255, 255, 255, 0.12);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.15);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.2);
    --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.3), 0 4px 12px rgba(0, 0, 0, 0.2);
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.25);
    --shadow-accent: 0 8px 30px rgba(6, 182, 212, 0.15);

    /* Spacing */
    --section-padding: 120px;
    --container-max: 1200px;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-spring: 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ===========================
   Reset & Base
   =========================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px;
}

#bg-particles {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.7;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

::selection {
    background: var(--accent-primary);
    color: #ffffff;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition-fast);
}

img {
    max-width: 100%;
    display: block;
}

ul {
    list-style: none;
}

.container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
}

/* ===========================
   Navbar
   =========================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 16px 0;
    transition: all var(--transition-base);
    background: transparent;
}

.navbar.scrolled {
    background: rgba(11, 13, 23, 0.8);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 0;
    box-shadow: var(--shadow-sm);
}

.nav-container {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.logo-highlight {
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-menu {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-link {
    padding: 8px 18px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-secondary);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
    position: relative;
}

.nav-link:hover {
    color: var(--accent-primary);
    background: var(--accent-glow);
}

.nav-link.active {
    color: var(--accent-primary);
    background: var(--accent-glow);
}

/* Mobile toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
}

.nav-toggle span {
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    border-radius: 2px;
    transition: all var(--transition-base);
}

.nav-toggle.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.active span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ===========================
   Hero Section
   =========================== */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    padding: 120px 0 80px;
}

.hero-bg-pattern {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(6, 182, 212, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6, 182, 212, 0.05) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 100%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, black 30%, transparent 100%);
}

.hero-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(120px);
    opacity: 0.5;
    pointer-events: none;
}

.hero-glow-1 {
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(6, 182, 212, 0.12) 0%, transparent 70%);
    top: -100px;
    right: -100px;
    animation: float 8s ease-in-out infinite;
}

.hero-glow-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.1) 0%, transparent 70%);
    bottom: -100px;
    left: -100px;
    animation: float 8s ease-in-out infinite 2s;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(30px, -20px) scale(1.05); }
    66% { transform: translate(-20px, 20px) scale(0.95); }
}

.hero-container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 1;
}

.hero-content {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    width: fit-content;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    box-shadow: var(--shadow-sm);
}

.badge-dot {
    width: 8px;
    height: 8px;
    background: #22c55e;
    border-radius: 50%;
    animation: pulse-dot 2s ease-in-out infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
    50% { opacity: 0.8; box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
}

.hero-title {
    font-size: clamp(3rem, 6vw, 4.5rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: -0.03em;
    color: var(--text-primary);
}

.hero-title-highlight {
    display: block;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    position: relative;
}

.hero-subtitle {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-description {
    font-size: 1.05rem;
    color: var(--text-tertiary);
    line-height: 1.8;
    max-width: 500px;
}

.hero-actions {
    display: flex;
    gap: 16px;
    margin-top: 8px;
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 28px;
    border-radius: var(--radius-full);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    border: none;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--accent-gradient);
    color: #ffffff;
    box-shadow: var(--shadow-accent);
}

.btn-primary:hover {
    background: var(--accent-gradient-hover);
    box-shadow: 0 12px 40px rgba(6, 182, 212, 0.25);
    transform: translateY(-2px);
}

.btn-primary:active {
    transform: translateY(0);
}

.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 1.5px solid var(--border-color-hover);
    box-shadow: none;
}

.btn-outline:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: var(--accent-glow);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.btn-full {
    width: 100%;
    justify-content: center;
}

/* Hero Stats */
.hero-stats {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-top: 16px;
    padding-top: 32px;
    border-top: 1px solid var(--border-color);
}

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

.stat-number {
    font-size: 1.75rem;
    font-weight: 800;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-divider {
    width: 1px;
    height: 40px;
    background: var(--border-color);
}

/* Hero Visual - Terminal Card */
.hero-visual {
    display: flex;
    justify-content: center;
}

.hero-card {
    width: 100%;
    max-width: 440px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #0d1024;
    box-shadow: var(--shadow-xl), 0 0 80px rgba(6, 182, 212, 0.05);
    border: 1px solid var(--border-color);
}

.card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border-color);
}

.card-dots {
    display: flex;
    gap: 7px;
}

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.dot-red { background: #ff5f57; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #28c840; }

.card-title {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.3);
    margin-left: auto;
    margin-right: auto;
}

.card-body {
    padding: 20px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.code-line {
    display: flex;
    gap: 10px;
    color: rgba(255, 255, 255, 0.85);
}

.code-prompt {
    color: #22c55e;
    font-weight: 600;
}

.code-command {
    color: #06b6d4;
}

.code-output {
    color: rgba(255, 255, 255, 0.5);
    padding-left: 20px;
}

.code-cursor {
    animation: blink 1s step-end infinite;
    color: #22c55e;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    animation: bounce-scroll 2s ease-in-out infinite;
}

.scroll-mouse {
    width: 24px;
    height: 38px;
    border: 2px solid var(--border-color-hover);
    border-radius: 12px;
    position: relative;
}

.scroll-wheel {
    width: 3px;
    height: 8px;
    background: var(--accent-primary);
    border-radius: 3px;
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    animation: scroll-anim 2s ease-in-out infinite;
}

@keyframes scroll-anim {
    0% { opacity: 1; transform: translateX(-50%) translateY(0); }
    100% { opacity: 0; transform: translateX(-50%) translateY(12px); }
}

@keyframes bounce-scroll {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(8px); }
}

/* ===========================
   Tam Sayfa Konveyör Kaydırma Sistemi
   =========================== */
#fp-container {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.fp-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    align-items: safe center;
    justify-content: center;
    overflow-y: auto;
    box-sizing: border-box;
    opacity: 0;
    pointer-events: none;
    transform: translateY(60px) scale(0.88);
    transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1),
                opacity 0.7s ease;
    z-index: 1;
}

.fp-slide.fp-active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    z-index: 3;
}

.fp-slide.fp-prev {
    opacity: 0;
    transform: translateY(-60px) scale(0.88);
    z-index: 2;
}

.fp-slide.fp-next {
    opacity: 0;
    transform: translateY(60px) scale(0.88);
    z-index: 1;
}

.fp-slide > .container,
.fp-slide.hero {
    width: 100%;
    max-height: 100%;
}

/* Mobil/tablette konveyör kilidi kapalı: normal akan sayfa */
@media (max-width: 900px) {
    #fp-container {
        height: auto;
        overflow: visible;
    }

    .fp-slide {
        position: relative;
        inset: auto;
        height: auto;
        min-height: 100vh;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        transition: none;
    }
}

/* ===========================
   Sections - General
   =========================== */
.section {
    padding: var(--section-padding) 0;
    position: relative;
}

.section-header {
    text-align: center;
    margin-bottom: 64px;
}

.section-tag {
    display: inline-block;
    padding: 6px 16px;
    background: var(--accent-glow);
    color: var(--accent-primary);
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    margin-bottom: 16px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    border: 1px solid rgba(6, 182, 212, 0.15);
}

.section-title {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

/* ===========================
   About Section
   =========================== */
.about {
    background: var(--bg-secondary);
}

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

.about-text p {
    font-size: 1.05rem;
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.8;
}

.about-text strong {
    color: var(--text-primary);
    font-weight: 600;
}

.about-skills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.skill-card {
    padding: 24px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
}

.skill-card:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-md), 0 0 20px rgba(6, 182, 212, 0.08);
    transform: translateY(-4px);
}

.skill-icon {
    font-size: 1.75rem;
    margin-bottom: 12px;
}

.skill-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.skill-card p {
    font-size: 0.85rem;
    color: var(--text-tertiary);
    line-height: 1.6;
}

/* ===========================
   Projects Section - Robot Arm
   =========================== */
.projects-showcase {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* Robot Arm Scene */
.robot-arm-scene {
    position: relative;
    width: 200px;
    height: 300px;
    margin-bottom: -40px;
    z-index: 10;
    pointer-events: none;
}

.robot-arm-svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4));
    transition: filter 0.3s ease;
}

/* Robot Arm Joint Transitions */
.robot-arm-svg .shoulder {
    transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.robot-arm-svg .elbow {
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.05s;
}

.robot-arm-svg .wrist {
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
}

.robot-arm-svg .finger {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Finger open/close states */
.robot-arm-svg .fingers.open .finger-thumb {
    transform: rotate(-35deg);
}
.robot-arm-svg .fingers.open .finger-index {
    transform: rotate(-12deg);
}
.robot-arm-svg .fingers.open .finger-middle {
    transform: rotate(-4deg);
}
.robot-arm-svg .fingers.open .finger-ring {
    transform: rotate(8deg);
}
.robot-arm-svg .fingers.open .finger-pinky {
    transform: rotate(16deg);
}

.robot-arm-svg .fingers.closed .finger-thumb {
    transform: rotate(15deg);
}
.robot-arm-svg .fingers.closed .finger-index {
    transform: rotate(8deg);
}
.robot-arm-svg .fingers.closed .finger-middle {
    transform: rotate(4deg);
}
.robot-arm-svg .fingers.closed .finger-ring {
    transform: rotate(-2deg);
}
.robot-arm-svg .fingers.closed .finger-pinky {
    transform: rotate(-6deg);
}

/* Arm LED */
.robot-arm-svg .arm-led {
    animation: armBlink 1.6s ease-in-out infinite;
}

@keyframes armBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

/* Projects Grid - Horizontal */
.projects-grid {
    display: flex;
    gap: 24px;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    perspective: 1000px;
}

/* Project Cards */
.project-card {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.5s ease,
                box-shadow 0.4s ease,
                border-color 0.4s ease;
    flex: 0 1 340px;
    max-width: 340px;
    opacity: 0;
    transform: translateY(60px) scale(0.9);
    will-change: transform, opacity;
}

/* Project revealed state */
.project-card.revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Active held by robot arm - GLOW effect */
.project-card.arm-held {
    border-color: var(--accent-primary);
    box-shadow:
        0 0 20px rgba(6, 182, 212, 0.2),
        0 0 40px rgba(6, 182, 212, 0.1),
        0 0 80px rgba(6, 182, 212, 0.05),
        var(--shadow-lg);
    transform: translateY(-8px) scale(1.02);
}

.project-card.arm-held::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, rgba(6, 182, 212, 0.3), rgba(125, 211, 252, 0.1), rgba(6, 182, 212, 0.3));
    z-index: -1;
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

/* Card hover (still clickable) */
.project-card:hover {
    box-shadow: var(--shadow-lg), 0 0 40px rgba(6, 182, 212, 0.05);
    transform: translateY(-6px);
    border-color: var(--border-color-hover);
}

.project-card.arm-held:hover {
    box-shadow:
        0 0 25px rgba(6, 182, 212, 0.3),
        0 0 50px rgba(6, 182, 212, 0.15),
        var(--shadow-lg);
    transform: translateY(-10px) scale(1.03);
}

.project-image {
    height: 200px;
    overflow: hidden;
}

.project-placeholder {
    height: 100%;
    background: linear-gradient(135deg, var(--bg-tertiary) 0%, var(--bg-primary) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    transition: all var(--transition-base);
}

.project-card:hover .project-placeholder {
    transform: scale(1.05);
}

.project-content {
    padding: 24px;
}

.project-tags {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.tag {
    padding: 4px 12px;
    background: var(--accent-glow);
    color: var(--accent-primary);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    border: 1px solid rgba(6, 182, 212, 0.12);
}

.project-content h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.project-content p {
    font-size: 0.9rem;
    color: var(--text-tertiary);
    margin-bottom: 16px;
    line-height: 1.6;
}

.project-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--accent-primary);
    transition: all var(--transition-fast);
}

.project-link:hover {
    gap: 10px;
    color: var(--accent-secondary);
}

/* Mobile: hide robot arm, fullpage system disabled separately below */
@media (max-width: 900px) {
    .robot-arm-scene {
        display: none;
    }

    .projects-grid {
        flex-direction: column;
        align-items: center;
    }

    .project-card {
        max-width: 100%;
        flex: 1 1 100%;
        opacity: 1;
        transform: none;
    }

    .project-card.revealed {
        transform: none;
    }
}

/* ===========================
   Experience Section
   =========================== */
.experience {
    background: var(--bg-secondary);
}

.experience-list {
    display: flex;
    flex-direction: column;
    max-width: 900px;
    margin: 0 auto;
}

.experience-divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
}

.experience-row {
    display: flex;
    align-items: center;
    gap: 40px;
    padding: 32px 0;
}

.experience-year {
    font-family: 'JetBrains Mono', monospace;
    color: var(--text-tertiary);
    font-size: 0.95rem;
    min-width: 120px;
}

.experience-card {
    flex: 1;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 32px;
    text-align: center;
    transition: all var(--transition-base);
}

.experience-card:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 0 25px rgba(6, 182, 212, 0.05);
}

.exp-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: 8px;
}

.exp-desc {
    color: var(--text-tertiary);
    font-style: italic;
    font-size: 0.95rem;
}

/* ===========================
   Contact Section
   =========================== */
.contact-grid {
    display: flex;
    justify-content: center;
    width: 100%;
}

.contact-cards-horizontal {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    width: 100%;
    max-width: 1000px;
}

.social-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px 32px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    transition: all var(--transition-base);
    text-decoration: none;
    text-align: left;
    flex: 1 1 250px;
    min-width: 250px;
}

.social-card:hover {
    border-color: var(--accent-primary);
    box-shadow: 0 0 25px rgba(6, 182, 212, 0.1);
    transform: translateY(-4px);
}

.social-icon {
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.social-info h4 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.social-info p {
    font-size: 0.95rem;
    color: var(--text-tertiary);
}

/* Contact Form */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 36px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.form-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.form-group input,
.form-group textarea {
    padding: 12px 16px;
    border: 1.5px solid var(--border-color);
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.95rem;
    color: var(--text-primary);
    background: var(--bg-primary);
    transition: all var(--transition-fast);
    outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-light);
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px var(--accent-glow);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

/* ===========================
   Footer
   =========================== */
.footer {
    padding: 60px 0 30px;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-color);
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-bottom: 30px;
    border-bottom: 1px solid var(--border-color);
}

.footer-logo {
    font-size: 1.3rem;
    font-weight: 700;
}

.footer-text {
    color: var(--text-tertiary);
    font-size: 0.9rem;
}

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

.footer-social {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    color: var(--text-tertiary);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    transition: all var(--transition-fast);
}

.footer-social:hover {
    color: var(--accent-primary);
    border-color: var(--accent-primary);
    background: var(--accent-glow);
    transform: translateY(-2px);
}

.footer-bottom {
    padding-top: 24px;
    text-align: center;
}

.footer-bottom p {
    font-size: 0.8rem;
    color: var(--text-light);
}

/* ===========================
   Animations
   =========================== */
[data-animate] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

[data-animate="fade-left"] {
    transform: translateX(40px);
}

[data-animate="fade-right"] {
    transform: translateX(-40px);
}

[data-animate].visible {
    opacity: 1;
    transform: translate(0, 0);
}

/* ===========================
   Responsive Design
   =========================== */
@media (max-width: 1024px) {
    :root {
        --section-padding: 80px;
    }

    .hero-container {
        grid-template-columns: 1fr;
        gap: 48px;
        text-align: center;
    }

    .hero-content {
        align-items: center;
    }

    .hero-description {
        max-width: 100%;
    }

    .hero-actions {
        justify-content: center;
    }

    .hero-stats {
        justify-content: center;
    }

    .hero-visual {
        order: -1;
    }

    .hero-card {
        max-width: 380px;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .contact-cards-horizontal {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    :root {
        --section-padding: 60px;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background: var(--bg-secondary);
        flex-direction: column;
        padding: 100px 32px 40px;
        gap: 4px;
        transition: right var(--transition-base);
        box-shadow: -10px 0 40px rgba(0, 0, 0, 0.4);
        border-left: 1px solid var(--border-color);
    }

    .nav-menu.open {
        right: 0;
    }

    .nav-link {
        width: 100%;
        padding: 14px 18px;
        font-size: 1rem;
        border-radius: var(--radius-sm);
    }

    .nav-toggle {
        display: flex;
    }

    .hero-title {
        font-size: clamp(2.5rem, 10vw, 3.5rem);
    }

    .projects-grid {
        gap: 20px;
    }

    .hero-stats {
        gap: 24px;
    }

    .about-skills {
        grid-template-columns: 1fr;
    }

    .contact-form {
        padding: 24px;
    }

    .scroll-indicator {
        display: none;
    }
}

@media (max-width: 480px) {
    .hero-actions {
        flex-direction: column;
        width: 100%;
    }

    .btn {
        width: 100%;
        justify-content: center;
    }

    .hero-stats {
        flex-direction: column;
        gap: 16px;
    }

    .stat-divider {
        width: 40px;
        height: 1px;
    }
}

/* ===========================
   Project Modal Styles
   =========================== */
.project-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(11, 13, 23, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 20px;
}

.project-modal.active {
    opacity: 1;
    pointer-events: all;
}

.modal-content {
    background: var(--bg-secondary);
    border: 1px solid var(--border-color-hover);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: var(--shadow-xl), 0 0 50px rgba(6, 182, 212, 0.1);
    transform: scale(0.95) translateY(20px);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.project-modal.active .modal-content {
    transform: scale(1) translateY(0);
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    transition: all var(--transition-fast);
}

.modal-close:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #ffffff;
    transform: rotate(90deg);
}

.modal-grid {
    display: grid;
    grid-template-columns: 1.2fr 1.5fr;
    min-height: 500px;
}

.modal-image-container {
    position: relative;
    background: var(--bg-primary);
    border-right: 1px solid var(--border-color);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.modal-placeholder-container {
    padding: 40px;
}

.modal-info-container {
    padding: 40px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.modal-info-container h2 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    background: var(--accent-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.modal-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.modal-description {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.modal-description h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-primary);
    border-left: 3px solid var(--accent-primary);
    padding-left: 10px;
    margin-bottom: 4px;
}

.modal-description p {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* Modal Responsive */
@media (max-width: 768px) {
    .modal-grid {
        grid-template-columns: 1fr;
    }
    
    .modal-image-container {
        height: 250px;
        border-right: none;
        border-bottom: 1px solid var(--border-color);
    }
    
    .modal-info-container {
        padding: 30px 24px;
    }
    
    .modal-info-container h2 {
        font-size: 1.6rem;
    }
}

/* ==========================================================
   V7 HOTFIX — fullpage görünürlük ve proje sahnesi hizalama
   ========================================================== */
@media (min-width: 901px) {
    html, body {
        height: 100%;
        overflow: hidden;
    }

    #fp-container {
        height: 100dvh;
        min-height: 620px;
        overflow: hidden;
    }

    .fp-slide {
        min-height: 0;
        height: 100dvh;
        padding-top: 72px;
        padding-bottom: 20px;
        overflow: hidden;
        align-items: center;
    }

    .fp-slide > .container {
        width: min(1200px, 100%);
        max-height: none;
    }

    /* Proje bölümü masaüstü ekranına mutlaka sığsın. */
    #projeler.section {
        padding-top: 78px;
        padding-bottom: 18px;
    }

    #projeler .container {
        height: calc(100dvh - 96px);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    #projeler .section-header {
        flex: 0 0 auto;
        margin-bottom: 10px;
    }

    #projeler .section-tag {
        margin-bottom: 5px;
        padding: 4px 13px;
    }

    #projeler .section-title {
        font-size: clamp(1.7rem, 2.5vw, 2.25rem);
    }

    #projeler .projects-showcase {
        min-height: 0;
        justify-content: center;
    }

    #projeler .robot-arm-scene {
        width: 145px;
        height: 205px;
        margin-bottom: -52px;
        flex: 0 0 auto;
    }

    #projeler .projects-grid {
        flex-wrap: nowrap;
        gap: 18px;
        align-items: stretch;
    }

    #projeler .project-card {
        flex: 1 1 0;
        width: 0;
        max-width: 340px;
        min-width: 0;
    }

    #projeler .project-image,
    #projeler .project-image[style] {
        height: clamp(130px, 19vh, 190px) !important;
    }

    #projeler .project-content {
        padding: 16px 18px;
    }

    #projeler .project-content p {
        font-size: 0.82rem;
        line-height: 1.45;
        margin-bottom: 10px;
    }

    /* Fullpage görünürlük sınıfı en yüksek önceliğe sahip olsun. */
    .fp-slide.fp-active {
        visibility: visible;
    }

    .fp-slide:not(.fp-active) {
        visibility: hidden;
    }
}

@media (min-width: 901px) and (max-height: 720px) {
    #projeler .robot-arm-scene {
        width: 110px;
        height: 150px;
        margin-bottom: -45px;
    }

    #projeler .section-header {
        margin-bottom: 2px;
    }

    #projeler .project-image,
    #projeler .project-image[style] {
        height: 115px !important;
    }

    #projeler .project-content p {
        display: none;
    }
}

/* ==========================================================
   V8 KESİN GÖRÜNÜRLÜK DÜZELTMESİ
   Masaüstünde yalnızca aktif bölüm render edilir.
   ========================================================== */
@media (min-width: 901px) {
    #fp-container > .fp-slide {
        display: none !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: none !important;
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100dvh !important;
        z-index: 1 !important;
    }

    #fp-container > .fp-slide.fp-active {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
        pointer-events: auto !important;
        z-index: 10 !important;
    }

    /* data-animate elemanları JS gecikse bile aktif sayfada görünür olsun */
    #fp-container > .fp-slide.fp-active [data-animate] {
        opacity: 1;
        transform: none;
    }
}

/* ==========================================================
   V11 — Dikey konveyör geçişi
   Normal görünümde konveyör yoktur. Geçiş başladığında mevcut
   ekran küçülür ve yukarı taşınır; yeni ekran aşağıdan gelir.
   ========================================================== */
@media (min-width: 901px) {
    #fp-container {
        isolation: isolate;
        perspective: 1600px;
        background: var(--bg-primary);
        overflow: hidden;
    }

    /* Dikey bant yalnızca geçiş anında görünür. */
    #fp-container::before,
    #fp-container::after {
        content: '';
        position: absolute;
        pointer-events: none;
        opacity: 0;
        visibility: hidden;
        transition: opacity 180ms ease;
    }

    #fp-container::before {
        inset: 0 10vw;
        z-index: 5;
        border-left: 1px solid rgba(125, 211, 252, 0.22);
        border-right: 1px solid rgba(125, 211, 252, 0.22);
        background:
            repeating-linear-gradient(
                0deg,
                rgba(28, 41, 63, 0.96) 0 46px,
                rgba(12, 21, 37, 0.98) 46px 86px
            );
        box-shadow:
            -24px 0 44px rgba(0, 0, 0, 0.30),
            24px 0 44px rgba(0, 0, 0, 0.30),
            inset 14px 0 20px rgba(255, 255, 255, 0.018),
            inset -14px 0 20px rgba(0, 0, 0, 0.25);
    }

    /* Yan raylar ve merkez ışığı. */
    #fp-container::after {
        inset: 0 9.55vw;
        z-index: 6;
        border-left: 7px solid rgba(57, 74, 101, 0.92);
        border-right: 7px solid rgba(57, 74, 101, 0.92);
        background: linear-gradient(90deg,
            rgba(6, 182, 212, 0.08),
            transparent 12%,
            transparent 88%,
            rgba(6, 182, 212, 0.08));
        box-shadow:
            inset 8px 0 16px rgba(0, 0, 0, 0.32),
            inset -8px 0 16px rgba(0, 0, 0, 0.32);
    }

    #fp-container.conveyor-moving::before,
    #fp-container.conveyor-moving::after {
        opacity: 1;
        visibility: visible;
    }

    #fp-container.conveyor-moving::before {
        animation: conveyorBeltUp 620ms linear infinite;
    }

    #fp-container.conveyor-moving.conveyor-backward::before {
        animation-name: conveyorBeltDown;
    }

    @keyframes conveyorBeltUp {
        from { background-position-y: 0; }
        to { background-position-y: -86px; }
    }

    @keyframes conveyorBeltDown {
        from { background-position-y: 0; }
        to { background-position-y: 86px; }
    }

    #fp-container.conveyor-moving > .fp-slide {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: none !important;
        overflow: hidden !important;
        transform-origin: 50% 50%;
        transition:
            transform 1.08s cubic-bezier(0.65, 0, 0.22, 1),
            opacity 420ms ease,
            filter 520ms ease,
            box-shadow 520ms ease !important;
        will-change: transform, opacity, filter;
        border-radius: 22px;
        background: var(--bg-primary);
        z-index: 12 !important;
    }

    #fp-container.conveyor-moving > .about {
        background: var(--bg-secondary);
    }

    /* Geçişin ilk anında mevcut ekran küçülmüş halde merkezde. */
    #fp-container.conveyor-moving > .fp-slide.belt-center {
        transform: translate3d(0, 0, 0) scale(0.78) !important;
        opacity: 1 !important;
        filter: saturate(0.92) brightness(0.96);
        box-shadow: 0 32px 80px rgba(0, 0, 0, 0.52);
        z-index: 16 !important;
    }

    /* İleri yönde eski ekran yukarı çıkar. */
    #fp-container.conveyor-moving > .fp-slide.belt-out-left {
        transform: translate3d(0, -112vh, -80px) scale(0.72) !important;
        opacity: 0.52 !important;
        filter: saturate(0.65) brightness(0.62);
        box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
        z-index: 13 !important;
    }

    /* Geri yönde eski ekran aşağı çıkar. */
    #fp-container.conveyor-moving > .fp-slide.belt-out-right {
        transform: translate3d(0, 112vh, -80px) scale(0.72) !important;
        opacity: 0.52 !important;
        filter: saturate(0.65) brightness(0.62);
        box-shadow: 0 28px 70px rgba(0, 0, 0, 0.45);
        z-index: 13 !important;
    }

    /* İleri yönde yeni ekran aşağıdan gelir. */
    #fp-container.conveyor-moving > .fp-slide.belt-in-right {
        transform: translate3d(0, 112vh, -80px) scale(0.72) !important;
        opacity: 0.5 !important;
        filter: saturate(0.68) brightness(0.66);
        z-index: 14 !important;
    }

    /* Geri yönde yeni ekran yukarıdan gelir. */
    #fp-container.conveyor-moving > .fp-slide.belt-in-left {
        transform: translate3d(0, -112vh, -80px) scale(0.72) !important;
        opacity: 0.5 !important;
        filter: saturate(0.68) brightness(0.66);
        z-index: 14 !important;
    }

    #fp-container.conveyor-moving > .fp-slide > .container,
    #fp-container.conveyor-moving > .fp-slide.hero {
        max-height: 100%;
        overflow: hidden;
    }

    body.conveyor-transitioning .navbar {
        z-index: 1000;
    }

    #fp-container:not(.conveyor-moving) > .fp-slide.fp-active {
        display: flex !important;
        transform: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        filter: none !important;
    }
}

@media (prefers-reduced-motion: reduce) and (min-width: 901px) {
    #fp-container.conveyor-moving > .fp-slide {
        transition-duration: 260ms !important;
    }
    #fp-container.conveyor-moving::before {
        animation: none !important;
    }
}

/* ==========================================================
   V12 — Kompakt dikey konveyör + PLC sahnesi
   ========================================================== */
@media (min-width: 901px) {
    #fp-container::before,
    #fp-container::after { display: none !important; }

    .conveyor-machine {
        position: absolute;
        inset: 72px 0 18px;
        z-index: 4;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 220ms ease, visibility 220ms ease;
    }

    #fp-container.conveyor-moving .conveyor-machine {
        opacity: 1;
        visibility: visible;
    }

    .conveyor-belt {
        position: absolute;
        width: min(34vw, 470px);
        height: 82%;
        left: 50%;
        top: 9%;
        transform: translateX(-50%);
        overflow: hidden;
        border: 2px solid rgba(95, 116, 151, .8);
        border-radius: 30px;
        background: #0a1220;
        box-shadow: 0 24px 65px rgba(0,0,0,.55), inset 0 0 28px rgba(0,0,0,.75);
    }

    .belt-treads {
        position: absolute;
        inset: -100px 0;
        background:
          linear-gradient(90deg, rgba(255,255,255,.035), transparent 18%, transparent 82%, rgba(255,255,255,.035)),
          repeating-linear-gradient(0deg, #202c40 0 24px, #111a2a 24px 54px);
        animation: compactBeltUp 650ms linear infinite;
    }
    #fp-container.conveyor-backward .belt-treads { animation-name: compactBeltDown; }
    @keyframes compactBeltUp { to { transform: translateY(-54px); } }
    @keyframes compactBeltDown { to { transform: translateY(54px); } }

    .conveyor-rail {
        position: absolute;
        top: 7%;
        height: 86%;
        width: 18px;
        border-radius: 10px;
        background: linear-gradient(90deg, #233047, #63728a 48%, #202b3e);
        box-shadow: 0 0 0 2px #0b101b, 0 18px 45px rgba(0,0,0,.45);
    }
    .conveyor-rail-left { left: calc(50% - min(17vw, 235px) - 25px); }
    .conveyor-rail-right { right: calc(50% - min(17vw, 235px) - 25px); }

    .plc-cabinet {
        position: absolute;
        left: calc(50% + min(22vw, 310px));
        top: 50%;
        width: 150px;
        height: 245px;
        transform: translateY(-50%);
        padding: 15px;
        border: 2px solid #607088;
        border-radius: 12px;
        background: linear-gradient(145deg,#263247,#111927);
        box-shadow: 0 20px 55px rgba(0,0,0,.5), inset 0 0 0 2px rgba(255,255,255,.025);
    }
    .plc-title { font: 800 14px/1 Inter,sans-serif; letter-spacing: .2em; color:#9fb0ca; margin-bottom:13px; }
    .plc-screen { height:55px; border:2px solid #172115; border-radius:6px; background:#88b96b; color:#1b301c; display:flex; align-items:center; justify-content:space-around; font:700 12px monospace; box-shadow: inset 0 0 14px rgba(0,0,0,.35); }
    .plc-screen b { font-size:22px; }
    .plc-leds { display:flex; gap:9px; margin:16px 3px; }
    .plc-leds i { width:11px; height:11px; border-radius:50%; background:#22c55e; box-shadow:0 0 9px rgba(34,197,94,.8); }
    .plc-leds i:nth-child(3), .plc-leds i:nth-child(4){ background:#334155; box-shadow:none; }
    .plc-terminals { height:80px; border-radius:5px; background:repeating-linear-gradient(90deg,#cbd5e1 0 10px,#3e4a5d 10px 13px); opacity:.8; }
    .plc-wire { position:absolute; width:70px; height:50px; right:100%; border-bottom:4px solid; border-left:4px solid; border-radius:0 0 0 24px; }
    .wire-a { bottom:42px; border-color:#06b6d4; }
    .wire-b { bottom:27px; right:96%; border-color:#f59e0b; }
    .drive-motor { position:absolute; right:calc(50% + min(21vw, 285px)); bottom:8%; width:100px; height:74px; border-radius:16px; background:linear-gradient(#506078,#243147); border:2px solid #75839a; box-shadow:0 18px 40px rgba(0,0,0,.45); }
    .drive-motor::before { content:''; position:absolute; inset:10px 17px; border-radius:50%; background:repeating-radial-gradient(circle,#1b2535 0 5px,#3c4b62 6px 9px); }
    .drive-motor span { position:absolute; left:100%; top:31px; width:35px; height:12px; background:#7d8ba0; }

    #fp-container.conveyor-moving > .fp-slide {
        width: min(31vw, 430px) !important;
        height: min(58vh, 540px) !important;
        min-height: 0 !important;
        left: 50% !important;
        top: 50% !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 1px solid rgba(125,211,252,.20);
        border-radius: 18px !important;
        transition: transform 1.28s cubic-bezier(.68,0,.22,1), opacity .55s ease, filter .55s ease, box-shadow .55s ease !important;
        transform-origin: center;
    }

    #fp-container.conveyor-moving > .fp-slide.belt-center {
        transform: translate(-50%, -50%) scale(.56) !important;
        box-shadow: 0 24px 70px rgba(0,0,0,.62) !important;
    }
    #fp-container.conveyor-moving > .fp-slide.belt-out-left {
        transform: translate(-50%, -178%) scale(.48) !important;
        opacity:.46 !important;
    }
    #fp-container.conveyor-moving > .fp-slide.belt-out-right {
        transform: translate(-50%, 78%) scale(.48) !important;
        opacity:.46 !important;
    }
    #fp-container.conveyor-moving > .fp-slide.belt-in-right {
        transform: translate(-50%, 78%) scale(.48) !important;
        opacity:.52 !important;
    }
    #fp-container.conveyor-moving > .fp-slide.belt-in-left {
        transform: translate(-50%, -178%) scale(.48) !important;
        opacity:.52 !important;
    }

    /* Küçük panel içinde içeriğin oranı korunsun. */
    #fp-container.conveyor-moving > .fp-slide > .container,
    #fp-container.conveyor-moving > .fp-slide.hero {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ==========================================================
   V13 — Daha temiz iki-panel geçişi
   ========================================================== */
@media (min-width: 901px) {
    /* Konveyör sahnesinde yalnızca JS'in seçtiği iki panel görünür. */
    #fp-container.conveyor-moving > .fp-slide:not(.belt-center):not(.belt-out-left):not(.belt-out-right):not(.belt-in-right):not(.belt-in-left) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* Paneli daha da küçült: PLC ve makine detayları nefes alsın. */
    #fp-container.conveyor-moving > .fp-slide {
        width: min(27vw, 370px) !important;
        height: min(49vh, 455px) !important;
    }
    #fp-container.conveyor-moving > .fp-slide.belt-center {
        transform: translate(-50%, -50%) scale(.48) !important;
    }
    #fp-container.conveyor-moving > .fp-slide.belt-out-left {
        transform: translate(-50%, -188%) scale(.40) !important;
    }
    #fp-container.conveyor-moving > .fp-slide.belt-out-right {
        transform: translate(-50%, 88%) scale(.40) !important;
    }
    #fp-container.conveyor-moving > .fp-slide.belt-in-right {
        transform: translate(-50%, 88%) scale(.40) !important;
    }
    #fp-container.conveyor-moving > .fp-slide.belt-in-left {
        transform: translate(-50%, -188%) scale(.40) !important;
    }

    .conveyor-belt {
        width: min(29vw, 400px);
    }
    .conveyor-rail-left { left: calc(50% - min(14.5vw, 200px) - 25px); }
    .conveyor-rail-right { right: calc(50% - min(14.5vw, 200px) - 25px); }
}

/* ==========================================================
   V14 — Tek tip taşıma paleti + ray üzerinde uzun çift-panel geçişi
   ========================================================== */
@media (min-width: 901px) {
    /* Makine görünürken bant panellerin tam arkasında kalır. */
    .conveyor-machine {
        inset: 72px 0 0;
    }

    .conveyor-belt {
        width: min(36vw, 520px);
        height: 88%;
        top: 6%;
        border-radius: 24px;
    }

    .conveyor-rail {
        top: 4%;
        height: 92%;
    }
    .conveyor-rail-left { left: calc(50% - min(18vw, 260px) - 25px); }
    .conveyor-rail-right { right: calc(50% - min(18vw, 260px) - 25px); }

    /* Her bölüm küçüldüğünde aynı fiziksel palet ölçüsüne sahip olur.
       Width/height değiştirmek yerine tam ekranı ölçeklediğimiz için
       Hero, Hakkımda, Projeler, Deneyim ve İletişim aynı boy görünür. */
    #fp-container.conveyor-moving > .fp-slide {
        width: 100vw !important;
        height: calc(100vh - 72px) !important;
        min-height: 0 !important;
        left: 50% !important;
        top: calc(50% + 36px) !important;
        right: auto !important;
        bottom: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 3px solid rgba(125,211,252,.34) !important;
        border-radius: 42px !important;
        background-clip: padding-box;
        transform-origin: center center !important;
        transition:
            transform 1.85s cubic-bezier(.62,.02,.18,1),
            opacity .75s ease,
            filter .75s ease,
            box-shadow .75s ease !important;
        box-shadow:
            0 28px 85px rgba(0,0,0,.68),
            0 0 0 10px rgba(15,23,42,.78) !important;
    }

    /* Küçük panelin tek tip ölçüsü yaklaşık ekranın %30'u. */
    #fp-container.conveyor-moving > .fp-slide.belt-center {
        transform: translate(-50%, -50%) translateY(0) scale(.29) !important;
        opacity: 1 !important;
        filter: saturate(.9) brightness(.92) !important;
    }

    /* Mesafe kısa tutuldu: eski ve yeni panel geçişin daha uzun bölümünde
       aynı anda kadrajda kalır ve gerçekten bant üzerinde peş peşe görünür. */
    #fp-container.conveyor-moving > .fp-slide.belt-out-left {
        transform: translate(-50%, -50%) translateY(-52vh) scale(.29) !important;
        opacity: .66 !important;
        filter: saturate(.66) brightness(.62) !important;
    }
    #fp-container.conveyor-moving > .fp-slide.belt-out-right {
        transform: translate(-50%, -50%) translateY(52vh) scale(.29) !important;
        opacity: .66 !important;
        filter: saturate(.66) brightness(.62) !important;
    }
    #fp-container.conveyor-moving > .fp-slide.belt-in-right {
        transform: translate(-50%, -50%) translateY(52vh) scale(.29) !important;
        opacity: .72 !important;
        filter: saturate(.7) brightness(.66) !important;
    }
    #fp-container.conveyor-moving > .fp-slide.belt-in-left {
        transform: translate(-50%, -50%) translateY(-52vh) scale(.29) !important;
        opacity: .72 !important;
        filter: saturate(.7) brightness(.66) !important;
    }

    /* Paletin banttan çıkıyormuş gibi görünmesi için merkez çizgisi ve tutucu. */
    .conveyor-belt::before,
    .conveyor-belt::after {
        content: '';
        position: absolute;
        left: 7%;
        right: 7%;
        height: 8px;
        z-index: 3;
        border-radius: 8px;
        background: linear-gradient(90deg, transparent, rgba(125,211,252,.38), transparent);
        box-shadow: 0 0 22px rgba(6,182,212,.2);
        pointer-events: none;
    }
    .conveyor-belt::before { top: 24%; }
    .conveyor-belt::after { bottom: 24%; }

    .plc-cabinet {
        left: calc(50% + min(24vw, 350px));
    }
    .drive-motor {
        right: calc(50% + min(23vw, 325px));
    }
}

/* V15 — Son büyüme hissini yumuşatır; panel banttan kopup ışınlanmış gibi görünmez. */
@media (min-width: 901px) {
    #fp-container:not(.conveyor-moving) > .fp-slide.fp-active {
        animation: v15SettleIn 360ms cubic-bezier(.2,.8,.2,1) both;
        transform-origin: center center;
    }
    @keyframes v15SettleIn {
        from { opacity: .96; transform: scale(.985); filter: brightness(.94); }
        to   { opacity: 1; transform: scale(1); filter: brightness(1); }
    }
}


/* ===========================
   V16 — Park edilmiş proje kartları ve sağlam modal/footer
   =========================== */
@media (min-width: 901px) {
    #projeler { overflow: hidden !important; }
    #projeler .projects-showcase,
    #projeler .projects-grid { overflow: visible; }

    #projeler .project-card {
        opacity: 1 !important;
        transition: transform 1120ms cubic-bezier(.16,.72,.18,1),
                    box-shadow 320ms ease,
                    border-color 320ms ease !important;
    }

    #projeler .project-card.project-parked {
        opacity: 1 !important;
        filter: none !important;
        pointer-events: none !important;
    }

    #projeler .project-card.just-placed {
        border-color: var(--accent-primary);
        animation: projectPlacedGlow 700ms ease-out both;
    }

    @keyframes projectPlacedGlow {
        0% { box-shadow: 0 0 0 rgba(6,182,212,0); }
        45% { box-shadow: 0 0 28px rgba(6,182,212,.38), 0 0 70px rgba(6,182,212,.16); }
        100% { box-shadow: var(--shadow-lg); }
    }
}

.project-modal {
    z-index: 2147483000 !important;
    isolation: isolate;
}
body.modal-open #fp-container,
body.modal-open .navbar,
body.modal-open .footer {
    pointer-events: none;
}
body.modal-open .project-modal,
body.modal-open .project-modal * {
    pointer-events: auto;
}

.footer {
    padding: 34px 0 28px;
    background: var(--bg-primary);
    border-top: 1px solid var(--border-color);
}
.footer-signature {
    max-width: 720px;
    margin: 0 auto;
    padding-top: 22px;
    text-align: center;
    border-top: 1px solid rgba(148,163,184,.16);
    opacity: .62;
    transition: opacity 220ms ease;
}
.footer-signature:hover { opacity: 1; }
.footer-copy {
    margin: 0;
    color: var(--text-primary);
    font-size: .88rem;
    font-weight: 650;
}
.footer-fields {
    margin: 8px 0 0;
    color: var(--text-tertiary);
    font-size: .78rem;
    letter-spacing: .04em;
}
.footer-fields span { color: var(--accent-primary); padding: 0 6px; }
.footer-rights {
    margin: 6px 0 0;
    color: var(--text-light);
    font-size: .72rem;
}

/* ===========================
   V17 — İletişim içi footer + daha aşağı park edilmiş kartlar
   =========================== */
@media (min-width: 901px) {
    #iletisim {
        position: relative;
        padding-bottom: 118px !important;
    }

    #iletisim > .footer {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        padding: 18px 0 16px;
        background: linear-gradient(180deg, rgba(8,11,22,0), var(--bg-primary) 34%);
        border-top: 0;
        z-index: 4;
    }

    #iletisim > .footer .footer-signature {
        padding-top: 14px;
    }

    #projeler .project-card.project-parked {
        opacity: 1 !important;
        filter: none !important;
        visibility: visible !important;
    }
}

/* ==========================================================
   V18 — Profesyonel PLC panosu + tutarlı park/kaldırma
   ========================================================== */
@media (min-width: 901px) {
    /* İlk kart dahil bütün kartların başlangıç konumunu yalnızca JS belirler. */
    #projeler.fp-active .project-card.project-parked,
    #projeler.fp-active .project-card:first-child.project-parked {
        opacity: 1 !important;
        pointer-events: none !important;
    }

    .plc-cabinet {
        width: 238px !important;
        height: 360px !important;
        padding: 13px !important;
        border-radius: 8px !important;
        border: 2px solid #6d7d92 !important;
        background: linear-gradient(145deg,#2b3544 0%,#151d29 55%,#0d131d 100%) !important;
        box-shadow: 0 25px 70px rgba(0,0,0,.62), inset 0 0 0 2px rgba(255,255,255,.025) !important;
    }

    .plc-panel-head {
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 8px;
        border: 1px solid #536177;
        border-radius: 4px;
        background: #111925;
        color: #d6deea;
        font: 700 9px/1 "JetBrains Mono", monospace;
        letter-spacing: .08em;
    }
    .plc-voltage { color: #f6c453; }

    .plc-din-rail {
        display: grid;
        grid-template-columns: 1.5fr .78fr .78fr;
        gap: 5px;
        margin-top: 12px;
        padding: 10px 6px;
        border-top: 5px solid #77869b;
        border-bottom: 5px solid #445064;
        background: #111824;
    }

    .plc-module {
        min-width: 0;
        height: 126px;
        padding: 7px 6px;
        border: 1px solid #66768b;
        border-radius: 3px;
        background: linear-gradient(90deg,#303b4d,#1e2837);
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 4px 10px rgba(0,0,0,.28);
    }
    .module-name {
        overflow: hidden;
        white-space: nowrap;
        color: #d8e1ed;
        font: 700 7px/1.2 "JetBrains Mono", monospace;
        margin-bottom: 7px;
    }
    .plc-screen {
        height: 38px !important;
        border-radius: 3px !important;
        font-size: 8px !important;
    }
    .plc-screen b { font-size: 15px !important; }
    .plc-leds { gap: 5px !important; margin: 8px 1px 4px !important; }
    .plc-leds i { width: 7px !important; height: 7px !important; }
    .module-labels {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 3px;
        color: #8390a4;
        font: 500 5px/1 "JetBrains Mono",monospace;
    }
    .io-grid {
        display: grid;
        grid-template-columns: repeat(2,1fr);
        gap: 7px 5px;
        margin-top: 13px;
    }
    .io-grid i {
        width: 7px;
        height: 7px;
        margin: auto;
        border-radius: 50%;
        background: #273244;
        box-shadow: inset 0 0 0 1px #607089;
    }
    .io-grid i.on {
        background: #36d66b;
        box-shadow: 0 0 7px rgba(54,214,107,.9), inset 0 0 0 1px #b7f7c7;
    }

    .plc-power-row {
        display: grid;
        grid-template-columns: .8fr 1.25fr .9fr;
        gap: 8px;
        margin-top: 12px;
        padding: 9px;
        border-top: 5px solid #64748b;
        background: #121a26;
    }
    .mini-breaker,.mini-contactor,.mini-relay {
        height: 57px;
        position: relative;
        border: 1px solid #78879a;
        border-radius: 3px;
        background: linear-gradient(#e4e8ed,#aeb7c2);
        color: #202733;
        font: 800 7px/1 "JetBrains Mono",monospace;
        text-align: center;
        padding-top: 7px;
    }
    .mini-breaker span {
        display:block;
        width: 17px;
        margin: 7px auto 5px;
        padding: 3px 0;
        background:#1f2937;
        color:#fff;
        border-radius:2px;
    }
    .mini-contactor i {
        display:inline-block;
        width:8px;height:8px;
        margin:20px 2px 0;
        border-radius:50%;
        background:#252d38;
    }
    .mini-relay i {
        display:block;
        width:19px;height:19px;
        margin:14px auto;
        border:3px solid #334155;
        border-radius:50%;
    }
    .plc-terminal-row {
        height: 30px;
        margin-top: 11px;
        border-top: 4px solid #58677b;
        border-bottom: 4px solid #3a4657;
        background: repeating-linear-gradient(90deg,#d3a92e 0 10px,#374151 10px 13px,#64b5d4 13px 23px,#374151 23px 26px);
        opacity: .9;
    }
    .wire-c { bottom: 86px; border-color:#f0c44c !important; height:34px !important; width:58px !important; }
}


/* ==========================================================
   V19 — Prototip kol kartın üstüne gider, kavrar ve kaldırır
   ========================================================== */
@media (min-width: 901px) {
    #projeler .robot-arm-scene {
        transform: translate3d(0,0,0) scale(1);
        transform-origin: 50% 100%;
        will-change: transform;
        transition: transform 680ms cubic-bezier(.22,.75,.18,1),
                    filter 260ms ease;
    }

    #projeler .robot-arm-scene.seeking {
        filter: drop-shadow(0 14px 24px rgba(0,0,0,.5));
    }

    #projeler .robot-arm-scene.grabbing {
        filter: drop-shadow(0 0 16px rgba(6,182,212,.18));
    }

    #projeler .robot-arm-scene.lifting {
        transition-duration: 560ms;
        filter: drop-shadow(0 18px 30px rgba(0,0,0,.56));
    }

    #projeler .robot-arm-scene.releasing {
        filter: drop-shadow(0 0 22px rgba(6,182,212,.24));
    }

    #projeler .project-card.arm-held {
        transition: transform 570ms cubic-bezier(.18,.78,.18,1),
                    box-shadow 320ms ease, border-color 320ms ease !important;
    }
}

/* ==========================================================
   V20 — Endüstriyel konveyör + bölüm bazlı hareketli atmosfer
   ========================================================== */
@media (min-width: 901px) {
    /* İçerik, bölüm atmosferinin üstünde kalır. */
    .fp-slide { isolation: isolate; }
    .fp-slide > .container,
    .fp-slide > .hero-container,
    .fp-slide > .scroll-indicator,
    .fp-slide > .footer { position: relative; z-index: 3; }

    .fp-slide::before,
    .fp-slide::after {
        content: '';
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 1;
        opacity: .46;
    }

    /* Hero: taranan teknik grid + düşük yoğunluklu enerji çizgisi. */
    #hero::before {
        background:
            linear-gradient(rgba(56,189,248,.055) 1px, transparent 1px),
            linear-gradient(90deg, rgba(56,189,248,.055) 1px, transparent 1px);
        background-size: 54px 54px;
        mask-image: radial-gradient(circle at 50% 45%, #000 0 42%, transparent 82%);
        animation: v20GridDrift 18s linear infinite;
    }
    #hero::after {
        inset: -20% -10%;
        background: linear-gradient(110deg, transparent 42%, rgba(6,182,212,.10) 49%, transparent 56%);
        animation: v20Scanner 9s ease-in-out infinite;
    }

    /* Hakkımda: CAD/teknik çizim hissi. */
    #hakkimda::before {
        opacity: .30;
        background:
            repeating-linear-gradient(0deg, transparent 0 79px, rgba(148,163,184,.07) 80px),
            repeating-linear-gradient(90deg, transparent 0 79px, rgba(148,163,184,.07) 80px),
            radial-gradient(circle at 16% 26%, transparent 0 76px, rgba(6,182,212,.12) 77px 79px, transparent 80px),
            radial-gradient(circle at 84% 70%, transparent 0 118px, rgba(125,211,252,.09) 119px 121px, transparent 122px);
        animation: v20Blueprint 22s linear infinite;
    }
    #hakkimda::after {
        inset: 11% 8%;
        border: 1px solid rgba(125,211,252,.08);
        background:
            linear-gradient(90deg, rgba(125,211,252,.15), rgba(125,211,252,.15)) 10% 12%/14% 1px no-repeat,
            linear-gradient(rgba(125,211,252,.15), rgba(125,211,252,.15)) 10% 12%/1px 12% no-repeat,
            linear-gradient(90deg, rgba(125,211,252,.12), rgba(125,211,252,.12)) 78% 74%/12% 1px no-repeat,
            linear-gradient(rgba(125,211,252,.12), rgba(125,211,252,.12)) 90% 63%/1px 11% no-repeat;
        opacity: .45;
        animation: v20CadPulse 5s ease-in-out infinite;
    }

    /* Projeler: robot hücresi, zemin şeritleri ve hareketli ışık. */
    #projeler::before {
        opacity: .38;
        background:
            linear-gradient(115deg, transparent 0 46%, rgba(6,182,212,.11) 50%, transparent 54%) -35vw 0/70vw 100% no-repeat,
            repeating-linear-gradient(90deg, rgba(250,204,21,.10) 0 20px, transparent 20px 40px) 0 96%/100% 10px no-repeat,
            linear-gradient(180deg, transparent 72%, rgba(2,6,23,.48));
        animation: v20WorkshopSweep 7s ease-in-out infinite;
    }
    #projeler::after {
        inset: auto 5% 5% 5%;
        height: 24%;
        opacity: .26;
        transform: perspective(500px) rotateX(62deg);
        transform-origin: bottom;
        background:
            linear-gradient(rgba(56,189,248,.11) 1px, transparent 1px),
            linear-gradient(90deg, rgba(56,189,248,.11) 1px, transparent 1px);
        background-size: 54px 34px;
        animation: v20FloorGrid 4s linear infinite;
    }

    /* Deneyim: enerji/sinyal hattı. */
    #deneyim::before {
        opacity: .32;
        background:
            linear-gradient(90deg, transparent 8%, rgba(6,182,212,.16) 8% 8.15%, transparent 8.15% 92%, rgba(6,182,212,.12) 92% 92.15%, transparent 92%),
            radial-gradient(circle, rgba(56,189,248,.8) 0 2px, transparent 3px) 8% 0/1px 110px repeat-y,
            radial-gradient(circle, rgba(34,197,94,.7) 0 2px, transparent 3px) 92% 30px/1px 130px repeat-y;
        animation: v20SignalFlow 6s linear infinite;
    }
    #deneyim::after {
        inset: 18% 10%;
        background: linear-gradient(90deg, transparent, rgba(6,182,212,.08), transparent);
        filter: blur(18px);
        animation: v20Breath 5.5s ease-in-out infinite;
    }

    /* İletişim: sakin node ağı. */
    #iletisim::before {
        opacity: .34;
        background:
            radial-gradient(circle at 13% 24%, rgba(56,189,248,.42) 0 2px, transparent 3px),
            radial-gradient(circle at 28% 74%, rgba(6,182,212,.35) 0 2px, transparent 3px),
            radial-gradient(circle at 74% 22%, rgba(34,197,94,.30) 0 2px, transparent 3px),
            radial-gradient(circle at 88% 66%, rgba(125,211,252,.35) 0 2px, transparent 3px),
            linear-gradient(27deg, transparent 0 22%, rgba(56,189,248,.08) 22.1% 22.25%, transparent 22.35%),
            linear-gradient(-31deg, transparent 0 66%, rgba(56,189,248,.07) 66.1% 66.25%, transparent 66.35%);
        animation: v20NodesFloat 12s ease-in-out infinite alternate;
    }
    #iletisim::after {
        inset: -30%;
        background: radial-gradient(circle at 50% 50%, rgba(6,182,212,.08), transparent 48%);
        animation: v20Orbit 18s linear infinite;
    }

    /* Konveyör sahnesi: çelik şase, gerçekçi bant, rulolar ve güvenlik elemanları. */
    .conveyor-machine {
        background:
            radial-gradient(ellipse at 50% 88%, rgba(0,0,0,.64), transparent 43%),
            linear-gradient(90deg, rgba(7,11,20,.95), rgba(15,23,42,.58) 25%, rgba(15,23,42,.58) 75%, rgba(7,11,20,.95));
        perspective: 1100px;
    }

    .conveyor-belt {
        overflow: hidden;
        border: 4px solid #69778b !important;
        background:
            linear-gradient(90deg, rgba(255,255,255,.035), transparent 12% 88%, rgba(255,255,255,.035)),
            repeating-linear-gradient(0deg, #111827 0 28px, #182233 28px 31px, #0b1220 31px 59px) !important;
        box-shadow:
            inset 0 0 0 5px #222d3d,
            inset 0 0 35px rgba(0,0,0,.9),
            0 28px 70px rgba(0,0,0,.62),
            0 0 38px rgba(6,182,212,.07) !important;
    }
    .conveyor-belt::before,
    .conveyor-belt::after {
        left: 3% !important;
        right: 3% !important;
        height: 18px !important;
        border: 3px solid #7c899a;
        background: repeating-linear-gradient(90deg,#263244 0 14px,#111827 14px 24px) !important;
        box-shadow: inset 0 0 8px #000, 0 4px 12px rgba(0,0,0,.5) !important;
    }
    .belt-treads {
        opacity: .78;
        background:
            repeating-linear-gradient(0deg, transparent 0 24px, rgba(148,163,184,.13) 24px 27px),
            linear-gradient(90deg, transparent, rgba(125,211,252,.07), transparent);
        animation-duration: 1.15s !important;
    }
    .conveyor-rail {
        width: 21px !important;
        border: 2px solid #7b8798;
        border-radius: 7px;
        background:
            repeating-linear-gradient(0deg,#536176 0 36px,#273244 36px 43px) !important;
        box-shadow: inset 0 0 0 3px #202b3a, 0 10px 28px rgba(0,0,0,.48) !important;
    }
    .conveyor-rail::after {
        content:'';
        position:absolute;
        inset:8px 4px;
        border-radius:4px;
        background: repeating-linear-gradient(0deg, transparent 0 47px, rgba(6,182,212,.55) 48px 50px);
        animation: v20RailMarkers 1.15s linear infinite;
    }

    .drive-motor {
        width: 124px !important;
        height: 88px !important;
        border-radius: 12px !important;
        border: 2px solid #8491a4 !important;
        background: linear-gradient(180deg,#596a82,#303d52 55%,#1d2736) !important;
        box-shadow: 0 20px 45px rgba(0,0,0,.55), inset 0 0 0 4px rgba(255,255,255,.035) !important;
    }
    .drive-motor::before {
        animation: v20MotorSpin .95s linear infinite;
    }
    .drive-motor em,
    .drive-motor b {
        position:absolute;
        z-index:3;
        font:800 8px/1 "JetBrains Mono",monospace;
        color:#e2e8f0;
        font-style:normal;
    }
    .drive-motor em { left:9px; top:8px; color:#f97316; }
    .drive-motor b { right:8px; bottom:7px; }

    .conveyor-sensor {
        position:absolute;
        left:calc(50% + min(18vw,260px) + 42px);
        width:72px;
        height:30px;
        z-index:8;
        border:2px solid #607089;
        border-radius:5px;
        background:linear-gradient(#202b3b,#111827);
        box-shadow:0 10px 25px rgba(0,0,0,.45);
        color:#a7b4c6;
        font:700 7px/1 "JetBrains Mono",monospace;
    }
    .conveyor-sensor::before {
        content:'';
        position:absolute;
        right:100%; top:11px;
        width:44px; height:3px;
        background:linear-gradient(90deg,transparent,rgba(239,68,68,.85));
        box-shadow:0 0 8px rgba(239,68,68,.65);
    }
    .conveyor-sensor span {
        position:absolute;left:8px;top:8px;width:10px;height:10px;border-radius:50%;
        background:#ef4444;box-shadow:0 0 9px rgba(239,68,68,.9);
        animation:v20SensorBlink 1.7s steps(1) infinite;
    }
    .conveyor-sensor b { position:absolute;right:8px;top:10px; }
    .sensor-entry { top:27%; }
    .sensor-exit { bottom:27%; }

    .safety-station {
        position:absolute;
        left:calc(50% - min(25vw,365px));
        top:16%;
        width:108px;
        padding:10px 8px 8px;
        z-index:8;
        border:2px solid #8a7428;
        border-radius:7px;
        background:linear-gradient(#f4cf45,#bc8e16);
        box-shadow:0 16px 34px rgba(0,0,0,.48);
        text-align:center;
    }
    .safety-station button {
        width:38px;height:38px;border:6px solid #e8d251;border-radius:50%;
        background:radial-gradient(circle at 38% 32%,#ff6b6b,#b91c1c 66%);
        box-shadow:0 0 0 3px #111827,0 7px 10px rgba(0,0,0,.35);
    }
    .safety-station span { display:block;margin-top:7px;color:#151515;font:900 6px/1 "JetBrains Mono",monospace; }

    .machine-status {
        position:absolute;
        right:calc(50% + min(24vw,350px));
        top:33%;
        width:94px;
        padding:9px 8px;
        z-index:8;
        border:1px solid #536176;
        border-radius:6px;
        background:#101827;
        box-shadow:0 14px 30px rgba(0,0,0,.48);
        color:#dbe7f5;
        font:700 7px/1.2 "JetBrains Mono",monospace;
    }
    .machine-status i { display:inline-block;width:9px;height:9px;margin-right:6px;border-radius:50%;background:#22c55e;box-shadow:0 0 9px #22c55e;animation:v20Status 1.6s ease-in-out infinite; }
    .machine-status b { display:block;margin-top:6px;color:#64748b;font-size:6px; }

    /* PLC'ye canlılık: RUN ve I/O LED'leri gerçek kontrol döngüsü gibi yanıp söner. */
    .plc-leds i:nth-child(1) { animation:v20PlcRun 1.2s steps(1) infinite; }
    .plc-leds i:nth-child(2) { animation:v20PlcError 5.8s steps(1) infinite; }
    .io-grid i.on:nth-child(odd) { animation:v20IoA 1.8s steps(1) infinite; }
    .io-grid i.on:nth-child(even) { animation:v20IoB 2.3s steps(1) infinite; }

    @keyframes v20GridDrift { to { background-position:54px 54px,54px 54px; } }
    @keyframes v20Scanner { 0%,18%{transform:translateX(-55%);opacity:0} 42%,58%{opacity:.6} 82%,100%{transform:translateX(55%);opacity:0} }
    @keyframes v20Blueprint { to { background-position:80px 80px,80px 80px,40px 0,-50px 30px; } }
    @keyframes v20CadPulse { 50%{opacity:.72;filter:drop-shadow(0 0 10px rgba(6,182,212,.12))} }
    @keyframes v20WorkshopSweep { 0%,15%{background-position:-48vw 0,0 96%,0 0} 70%,100%{background-position:115vw 0,0 96%,0 0} }
    @keyframes v20FloorGrid { to { background-position:0 34px,54px 0; } }
    @keyframes v20SignalFlow { to { background-position:0 0,8% 110px,92% 160px; } }
    @keyframes v20Breath { 50%{opacity:.65;transform:scale(1.08)} }
    @keyframes v20NodesFloat { to { transform:translate3d(14px,-12px,0) scale(1.015); } }
    @keyframes v20Orbit { to { transform:rotate(360deg); } }
    @keyframes v20RailMarkers { to { background-position:0 50px; } }
    @keyframes v20MotorSpin { to { transform:rotate(360deg); } }
    @keyframes v20SensorBlink { 0%,55%{background:#ef4444;box-shadow:0 0 9px #ef4444} 56%,100%{background:#22c55e;box-shadow:0 0 9px #22c55e} }
    @keyframes v20Status { 50%{opacity:.45} }
    @keyframes v20PlcRun { 0%,70%{background:#22c55e;box-shadow:0 0 8px #22c55e} 71%,100%{background:#1f2937;box-shadow:none} }
    @keyframes v20PlcError { 0%,94%{background:#1f2937;box-shadow:none} 95%,100%{background:#ef4444;box-shadow:0 0 8px #ef4444} }
    @keyframes v20IoA { 0%,48%{opacity:1} 49%,100%{opacity:.22} }
    @keyframes v20IoB { 0%,30%{opacity:.28} 31%,100%{opacity:1} }
}

@media (prefers-reduced-motion: reduce) {
    .fp-slide::before,.fp-slide::after,
    .conveyor-rail::after,.drive-motor::before,
    .conveyor-sensor span,.machine-status i,
    .plc-leds i,.io-grid i { animation:none !important; }
}

/* ===========================
   V21 — Dynamic engineering visual system
   =========================== */
:root { --mx:50vw; --my:50vh; }
#bg-particles { display:none !important; }
.fp-slide {
    isolation:isolate;
    background-color:#090c16;
}
.fp-slide::before,.fp-slide::after { z-index:0 !important; pointer-events:none; }
.fp-slide > * { position:relative; z-index:2; }

/* Mouse-reactive light field — no screen tilt, just a subtle interactive spotlight. */
body::before {
    content:''; position:fixed; inset:0; z-index:9998; pointer-events:none;
    background:radial-gradient(380px circle at var(--mx) var(--my),rgba(34,211,238,.055),transparent 68%);
    mix-blend-mode:screen;
}

/* HERO: control room, circuit lattice and scanning energy */
#hero::before {
    opacity:.82;
    background:
      linear-gradient(rgba(6,182,212,.055) 1px,transparent 1px),
      linear-gradient(90deg,rgba(6,182,212,.055) 1px,transparent 1px),
      radial-gradient(circle at 76% 45%,rgba(14,165,233,.17),transparent 28%),
      radial-gradient(circle at 13% 18%,rgba(34,211,238,.08),transparent 24%);
    background-size:52px 52px,52px 52px,100% 100%,100% 100%;
    animation:v21HeroGrid 10s linear infinite;
}
#hero::after {
    inset:-30%; opacity:.68;
    background:
      conic-gradient(from 0deg at 72% 47%,transparent 0 34%,rgba(34,211,238,.09) 35%,transparent 38% 100%),
      radial-gradient(circle at 72% 47%,transparent 0 19%,rgba(125,211,252,.11) 19.2% 19.7%,transparent 20% 27%,rgba(6,182,212,.08) 27.2% 27.6%,transparent 28%);
    animation:v21Radar 18s linear infinite;
}
.hero-bg-pattern { opacity:.2; background-image:linear-gradient(115deg,transparent 47%,rgba(255,255,255,.025) 48%,transparent 49%); background-size:80px 80px; }
.hero-glow { filter:blur(90px); opacity:.22; }
.hero-title { text-shadow:0 0 42px rgba(56,189,248,.12); }
.hero-title-highlight { filter:drop-shadow(0 0 18px rgba(34,211,238,.22)); }

.command-deck {
    width:min(620px,46vw); min-height:430px; position:relative; overflow:hidden;
    border:1px solid rgba(56,189,248,.24); border-radius:18px;
    background:linear-gradient(160deg,rgba(13,20,35,.96),rgba(5,9,18,.92));
    box-shadow:0 35px 100px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.025),0 0 70px rgba(6,182,212,.08);
}
.command-deck::before { content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(56,189,248,.055),transparent);transform:translateX(-110%);animation:v21DeckSweep 5.2s ease-in-out infinite; }
.command-deck::after { content:'';position:absolute;inset:0;background:linear-gradient(rgba(255,255,255,.016) 50%,transparent 50%);background-size:100% 4px;opacity:.35;pointer-events:none; }
.deck-scanline {position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,#22d3ee,transparent);box-shadow:0 0 18px #22d3ee;animation:v21ScanLine 4.5s linear infinite;opacity:.45;}
.deck-topbar,.deck-footer {display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid rgba(148,163,184,.13);font:700 10px/1 "JetBrains Mono",monospace;color:#7dd3fc;letter-spacing:.11em;}
.deck-topbar .card-dots{display:flex;gap:6px}.deck-clock{color:#94a3b8;font-weight:600}.deck-footer{border:0;border-top:1px solid rgba(148,163,184,.13);color:#64748b}.deck-pulse{color:#22c55e;animation:v21Pulse 1.5s steps(1) infinite}
.deck-grid {display:grid;grid-template-columns:1.08fr .92fr;grid-template-rows:1fr auto;gap:12px;padding:14px;min-height:355px;}
.deck-terminal,.deck-telemetry {border:1px solid rgba(148,163,184,.13);border-radius:11px;background:rgba(3,7,14,.72);box-shadow:inset 0 0 24px rgba(0,0,0,.35);}
.deck-terminal {grid-row:1/3;padding:14px;}.terminal-label,.telemetry-head{font:800 9px/1 "JetBrains Mono",monospace;color:#38bdf8;letter-spacing:.14em;margin-bottom:15px}.terminal-stream{font:600 11px/1.9 "JetBrains Mono",monospace;color:#cbd5e1}.terminal-stream .ok{color:#22c55e}.terminal-stream .cyan{color:#22d3ee}.terminal-stream .muted{color:#64748b}.typing-line i{display:inline-block;width:7px;height:13px;background:#7dd3fc;vertical-align:-2px;animation:v21Cursor .8s steps(1) infinite}
.automation-core{position:relative;min-height:180px;display:grid;place-items:center;border:1px solid rgba(56,189,248,.13);border-radius:11px;background:radial-gradient(circle,rgba(14,165,233,.1),transparent 65%);overflow:hidden}.core-center{position:relative;z-index:3;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 34% 28%,#e0f2fe,#0891b2 34%,#082f49 70%);box-shadow:0 0 34px rgba(34,211,238,.48),inset 0 0 18px rgba(255,255,255,.25);color:#020617;font:900 24px/1 Inter}.core-center small{position:absolute;bottom:-19px;color:#22c55e;font:800 7px/1 "JetBrains Mono"}.core-orbit{position:absolute;border:1px solid rgba(125,211,252,.32);border-radius:50%;transform-style:preserve-3d}.core-orbit i{position:absolute;width:7px;height:7px;border-radius:50%;background:#67e8f9;box-shadow:0 0 12px #22d3ee;top:50%;left:-4px}.orbit-a{width:145px;height:76px;animation:v21OrbitA 5s linear infinite}.orbit-b{width:130px;height:130px;transform:rotateX(65deg);animation:v21OrbitB 7s linear infinite}.orbit-c{width:92px;height:162px;transform:rotate(64deg);animation:v21OrbitC 6s linear infinite}.core-axis{position:absolute;background:linear-gradient(90deg,transparent,rgba(34,211,238,.23),transparent)}.axis-x{width:100%;height:1px}.axis-y{height:100%;width:1px;background:linear-gradient(transparent,rgba(34,211,238,.23),transparent)}
.deck-telemetry{padding:13px}.telemetry-row{display:grid;grid-template-columns:1fr auto;gap:4px;margin:9px 0;color:#94a3b8;font:700 8px/1 "JetBrains Mono"}.telemetry-row b{color:#e2e8f0}.telemetry-row i{grid-column:1/3;height:3px;border-radius:99px;background:linear-gradient(90deg,#06b6d4 var(--v),rgba(51,65,85,.7) var(--v));box-shadow:0 0 8px rgba(6,182,212,.22)}.telemetry-status{margin-top:12px;color:#86efac;font:700 7px/1 "JetBrains Mono"}.telemetry-status em{display:inline-block;width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 9px #22c55e;margin-right:6px;animation:v21Pulse 1.2s ease-in-out infinite}

/* ABOUT: blueprint workshop wall, floating labels and illuminated cards */
#hakkimda::before {opacity:.78;background:linear-gradient(rgba(56,189,248,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.055) 1px,transparent 1px),repeating-radial-gradient(circle at 78% 54%,transparent 0 58px,rgba(6,182,212,.055) 59px 60px);background-size:38px 38px,38px 38px,100% 100%;animation:v21Blueprint 14s linear infinite}
#hakkimda::after {inset:10% 5%;opacity:.65;background:linear-gradient(110deg,transparent 0 38%,rgba(34,211,238,.07) 39%,transparent 40%),radial-gradient(circle at 84% 20%,rgba(34,211,238,.15),transparent 20%);animation:v21LightSweep 7s ease-in-out infinite}
.about-text,.skill-card {backdrop-filter:blur(10px);background:linear-gradient(145deg,rgba(19,22,48,.88),rgba(9,13,25,.72));border:1px solid rgba(125,211,252,.12);box-shadow:0 18px 45px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.018)}
.skill-card{position:relative;overflow:hidden}.skill-card::after{content:'';position:absolute;inset:auto -20% -70% -20%;height:90%;background:radial-gradient(circle,rgba(6,182,212,.18),transparent 65%);transition:.4s}.skill-card:hover::after{transform:translateY(-25%)}

/* PROJECTS: active robot-cell atmosphere */
#projeler::before {opacity:.8;background:linear-gradient(90deg,transparent,rgba(34,211,238,.1),transparent) -50vw 0/42vw 100% no-repeat,repeating-linear-gradient(90deg,transparent 0 89px,rgba(148,163,184,.035) 90px),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px);background-size:42vw 100%,90px 100%,100% 46px;animation:v21CellSweep 8s ease-in-out infinite}
#projeler::after{inset:auto 0 0;height:34%;background:linear-gradient(rgba(6,182,212,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(6,182,212,.08) 1px,transparent 1px);background-size:46px 28px;transform:perspective(650px) rotateX(64deg);transform-origin:bottom;opacity:.28;animation:v21Floor 3s linear infinite}
.project-card{box-shadow:0 22px 65px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.025)}
.project-card.is-revealed{animation:v21ProjectGlow 1.1s ease both}

/* EXPERIENCE: signal corridor with animated timeline */
#deneyim::before{opacity:.8;background:linear-gradient(90deg,transparent 7%,rgba(34,211,238,.12) 7.1% 7.25%,transparent 7.35% 92%,rgba(34,211,238,.09) 92.1% 92.25%,transparent 92.35%),repeating-linear-gradient(0deg,transparent 0 79px,rgba(148,163,184,.035) 80px);animation:v21SignalLane 5s linear infinite}
#deneyim::after{inset:15% 8%;background:radial-gradient(circle at 20% 30%,rgba(34,211,238,.13),transparent 25%),radial-gradient(circle at 83% 70%,rgba(59,130,246,.11),transparent 25%);animation:v21Ambient 7s ease-in-out infinite alternate}
.experience-card{background:linear-gradient(135deg,rgba(19,22,48,.92),rgba(8,12,24,.78));border:1px solid rgba(125,211,252,.11);backdrop-filter:blur(10px)}
.experience-divider{background:linear-gradient(90deg,transparent,rgba(34,211,238,.45),transparent)!important;background-size:200% 100%!important;animation:v21Divider 3s linear infinite}

@keyframes v21HeroGrid{to{background-position:52px 52px,52px 52px,0 0,0 0}}
@keyframes v21Radar{to{transform:rotate(360deg)}}
@keyframes v21DeckSweep{0%,15%{transform:translateX(-110%)}70%,100%{transform:translateX(110%)}}
@keyframes v21ScanLine{from{top:8%}to{top:92%}}
@keyframes v21Pulse{50%{opacity:.35}}
@keyframes v21Cursor{50%{opacity:0}}
@keyframes v21OrbitA{to{transform:rotate(360deg)}}
@keyframes v21OrbitB{to{transform:rotateX(65deg) rotate(360deg)}}
@keyframes v21OrbitC{to{transform:rotate(424deg)}}
@keyframes v21Blueprint{to{background-position:38px 38px,38px 38px,0 0}}
@keyframes v21LightSweep{0%,20%{transform:translateX(-8%);opacity:.25}55%{opacity:.75}100%{transform:translateX(8%);opacity:.25}}
@keyframes v21CellSweep{0%,15%{background-position:-50vw 0,0 0,0 0}75%,100%{background-position:110vw 0,0 0,0 0}}
@keyframes v21Floor{to{background-position:0 28px,46px 0}}
@keyframes v21ProjectGlow{0%{filter:brightness(.75)}45%{filter:brightness(1.25);box-shadow:0 0 45px rgba(34,211,238,.28)}100%{filter:none}}
@keyframes v21SignalLane{to{background-position:0 0,0 80px}}
@keyframes v21Ambient{to{transform:scale(1.05) translateY(-8px)}}
@keyframes v21Divider{to{background-position:200% 0}}

@media(max-width:900px){.command-deck{width:min(92vw,620px);min-height:390px}.deck-grid{grid-template-columns:1fr}.deck-terminal{grid-row:auto}.automation-core{display:none}.deck-telemetry{display:none}}
@media(prefers-reduced-motion:reduce){body::before,.command-deck::before,.deck-scanline,.core-orbit,.typing-line i,.deck-pulse,.telemetry-status em{animation:none!important}}

/* ===========================
   V22 — balanced layout and robot-cell visuals
   =========================== */
:root { --mx:50vw; --my:50vh; }

/* Mouse-follow spotlight removed. */
body::before { display:none !important; content:none !important; }

/* HERO — wider, balanced and less right-heavy */
#hero .hero-container {
    max-width: 1460px;
    grid-template-columns: minmax(420px,.92fr) minmax(560px,1.08fr);
    gap: 42px;
    padding-inline: 54px;
    transform: translateX(-2.2vw);
}
#hero .hero-content { max-width:540px; }
#hero .hero-visual { justify-content:flex-start; }
.command-deck { width:min(610px,43vw); }
#hero::after { opacity:.42; }

/* Fixed PLC code view */
.terminal-stream { line-height:1.65; font-size:10.5px; }
.terminal-stream .code-line {
    padding-left:10px;
    color:#cbd5e1;
    white-space:nowrap;
    letter-spacing:-.025em;
}
.terminal-stream .addr { color:#fbbf24; }
.terminal-stream b { color:#c084fc; font-weight:700; }
.terminal-status-line {
    margin-top:10px;
    padding:8px 9px;
    border:1px solid rgba(34,197,94,.2);
    border-radius:7px;
    background:rgba(34,197,94,.055);
    color:#86efac;
}
.typing-line { display:none !important; }

/* ABOUT — intentional panel geometry, equal skill cards */
#hakkimda .container { max-width:1320px; }
#hakkimda .about-grid {
    grid-template-columns:minmax(420px,1fr) minmax(600px,1.3fr);
    gap:34px;
    align-items:stretch;
}
#hakkimda .about-text {
    padding:30px 32px;
    border-radius:22px;
    min-height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:linear-gradient(145deg,rgba(15,23,42,.9),rgba(8,14,28,.78));
    border:1px solid rgba(56,189,248,.18);
    box-shadow:0 22px 65px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.025);
}
#hakkimda .about-skills {
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    align-items:stretch;
}
#hakkimda .skill-card {
    min-height:100%;
    padding:27px 22px;
    border-radius:22px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    background:linear-gradient(155deg,rgba(18,25,46,.94),rgba(7,15,28,.84));
    border:1px solid rgba(56,189,248,.16);
}
#hakkimda .skill-card:nth-child(1){box-shadow:inset 0 3px 0 rgba(34,211,238,.38),0 20px 45px rgba(0,0,0,.24)}
#hakkimda .skill-card:nth-child(2){box-shadow:inset 0 3px 0 rgba(139,92,246,.38),0 20px 45px rgba(0,0,0,.24)}
#hakkimda .skill-card:nth-child(3){box-shadow:inset 0 3px 0 rgba(59,130,246,.38),0 20px 45px rgba(0,0,0,.24)}
#hakkimda .skill-icon { font-size:2rem; margin-bottom:18px; }
#hakkimda .skill-card h3 { font-size:1.02rem; }

/* PROJECTS — a complete industrial robot cell instead of a plain grid */
#projeler {
    background:
      linear-gradient(180deg,rgba(5,9,18,.35),rgba(5,9,18,.88)),
      radial-gradient(circle at 50% 34%,rgba(14,165,233,.14),transparent 34%),
      #070a12 !important;
}
#projeler::before {
    inset:0 !important;
    opacity:.95 !important;
    background:
      linear-gradient(90deg,rgba(8,15,28,.98) 0 6%,transparent 6% 94%,rgba(8,15,28,.98) 94% 100%),
      linear-gradient(90deg,transparent 0 9%,rgba(56,189,248,.11) 9.1% 9.25%,transparent 9.35% 90.65%,rgba(56,189,248,.11) 90.75% 90.9%,transparent 91%),
      repeating-linear-gradient(135deg,rgba(245,158,11,.13) 0 12px,rgba(15,23,42,.02) 12px 24px) center 92%/100% 18px no-repeat,
      linear-gradient(rgba(56,189,248,.045) 1px,transparent 1px),
      linear-gradient(90deg,rgba(56,189,248,.045) 1px,transparent 1px);
    background-size:100% 100%,100% 100%,100% 18px,54px 54px,54px 54px;
    animation:v22CellGrid 14s linear infinite !important;
}
#projeler::after {
    inset:0 !important;
    height:auto !important;
    opacity:.7 !important;
    transform:none !important;
    background:
      radial-gradient(ellipse at 50% 100%,rgba(34,211,238,.13),transparent 45%),
      linear-gradient(105deg,transparent 0 42%,rgba(125,211,252,.055) 43%,transparent 44% 100%),
      linear-gradient(75deg,transparent 0 56%,rgba(125,211,252,.045) 57%,transparent 58% 100%);
    animation:v22WorkLight 7s ease-in-out infinite alternate !important;
}
#projeler .section-header::before,
#projeler .section-header::after {
    content:'';
    position:absolute;
    top:50%;
    width:145px;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(34,211,238,.45));
}
#projeler .section-header { position:relative; }
#projeler .section-header::before { right:calc(100% + 26px); }
#projeler .section-header::after { left:calc(100% + 26px); transform:scaleX(-1); }
#projeler .project-card {
    border:1px solid rgba(56,189,248,.16);
    background:linear-gradient(155deg,rgba(16,23,42,.96),rgba(7,12,24,.94));
    box-shadow:0 24px 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.035);
}
#projeler .project-card::before {
    content:'';
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:linear-gradient(115deg,transparent 0 45%,rgba(56,189,248,.045) 50%,transparent 55%);
    background-size:240% 100%;
    animation:v22CardScan 6s ease-in-out infinite;
}

@keyframes v22CellGrid { to { background-position:0 0,0 0,center 92%,54px 54px,54px 54px; } }
@keyframes v22WorkLight { from { filter:brightness(.72); transform:translateX(-3%); } to { filter:brightness(1.1); transform:translateX(3%); } }
@keyframes v22CardScan { 0%,25%{background-position:180% 0}70%,100%{background-position:-80% 0} }

@media(max-width:1100px){
  #hero .hero-container{transform:none;grid-template-columns:1fr;max-width:900px;padding-inline:32px}
  #hero .hero-content{max-width:680px}
  #hero .hero-visual{justify-content:center}
  .command-deck{width:min(92vw,680px)}
  #hakkimda .about-grid{grid-template-columns:1fr}
  #hakkimda .about-skills{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:760px){
  #hakkimda .about-skills{grid-template-columns:1fr}
  #hakkimda .about-text{padding:22px}
}

/* ===========================
   V23 — technical cursor + line follower journey
   =========================== */

/* Teknik imleç: ışık ve tilt yok; sadece koordinat retikülü ve tıklama darbesi. */
@media (pointer:fine) {
    html.has-tech-cursor, html.has-tech-cursor * { cursor:none !important; }
    .tech-cursor {
        position:fixed;
        left:0; top:0;
        width:34px; height:34px;
        z-index:100000;
        pointer-events:none;
        transform:translate3d(-80px,-80px,0);
        will-change:transform;
        mix-blend-mode:normal;
    }
    .tech-cursor::before,
    .tech-cursor::after {
        content:'';
        position:absolute;
        background:rgba(125,211,252,.82);
        box-shadow:0 0 7px rgba(34,211,238,.22);
        transition:transform .18s ease,opacity .18s ease;
    }
    .tech-cursor::before { width:34px;height:1px;left:0;top:16px; }
    .tech-cursor::after { width:1px;height:34px;left:16px;top:0; }
    .tech-cursor-ring {
        position:absolute;
        inset:6px;
        border:1px solid rgba(125,211,252,.72);
        border-radius:50%;
        transition:transform .18s ease,border-radius .18s ease,border-color .18s ease;
    }
    .tech-cursor-dot {
        position:absolute;
        width:4px;height:4px;
        left:15px;top:15px;
        border-radius:50%;
        background:#e0f2fe;
    }
    .tech-cursor-readout {
        position:absolute;
        left:27px;top:25px;
        min-width:76px;
        color:#7dd3fc;
        font:700 7px/1.2 "JetBrains Mono",monospace;
        letter-spacing:.07em;
        white-space:nowrap;
        opacity:.62;
    }
    .tech-cursor.is-interactive .tech-cursor-ring {
        transform:scale(1.45) rotate(45deg);
        border-radius:4px;
        border-color:#22d3ee;
    }
    .tech-cursor.is-interactive::before { transform:scaleX(.62); }
    .tech-cursor.is-interactive::after { transform:scaleY(.62); }
    .tech-click-pulse {
        position:fixed;
        width:22px;height:22px;
        margin:-11px 0 0 -11px;
        border:1px solid rgba(125,211,252,.9);
        border-radius:50%;
        z-index:99999;
        pointer-events:none;
        animation:techPulse .52s ease-out forwards;
    }
}
@keyframes techPulse { to { transform:scale(3.1); opacity:0; } }

/* Yolculuğum — çizgi izleyen robot parkuru */
#deneyim { overflow:hidden; background:#070b15; }
#deneyim::before,
#deneyim::after { display:none !important; }
#deneyim > .container { position:relative; z-index:4; }
.linebot-highway {
    position:absolute;
    inset:0;
    z-index:1;
    overflow:hidden;
    pointer-events:none;
    background:
        linear-gradient(rgba(56,189,248,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(56,189,248,.035) 1px,transparent 1px),
        radial-gradient(circle at 68% 38%,rgba(14,165,233,.12),transparent 30%),
        radial-gradient(circle at 20% 76%,rgba(34,197,94,.07),transparent 25%);
    background-size:54px 54px,54px 54px,100% 100%,100% 100%;
}
.linebot-highway::before {
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,#070b15 0%,transparent 17%,transparent 83%,#070b15 100%),linear-gradient(180deg,#070b15 0%,transparent 18%,transparent 83%,#070b15 100%);
    z-index:2;
}
.linebot-map { position:absolute;inset:0;width:100%;height:100%; }
.linebot-map path { fill:none; vector-effect:non-scaling-stroke; }
.track-shadow,.track-two-shadow { stroke:rgba(0,0,0,.85);stroke-width:38; }
.track-main { stroke:rgba(15,23,42,.96);stroke-width:28; }
.track-main + .track-dash { stroke:#22d3ee;stroke-width:2;stroke-dasharray:12 18;filter:drop-shadow(0 0 5px rgba(34,211,238,.52));animation:lineDash 1.8s linear infinite; }
.track-two { stroke:rgba(30,41,59,.72);stroke-width:18; }
.track-markers circle { fill:#22d3ee;filter:drop-shadow(0 0 8px #22d3ee);animation:markerBeat 1.8s ease-in-out infinite; }
.linebot {
    --path:path("M-120 650 C220 410 410 760 720 510 S1180 230 1730 420");
    position:absolute;
    width:58px;height:42px;
    offset-path:var(--path);
    offset-rotate:auto;
    z-index:3;
    animation:linebotDrive 13s linear infinite;
    filter:drop-shadow(0 12px 9px rgba(0,0,0,.45));
}
.linebot::before {
    content:'';
    position:absolute;
    inset:5px 6px 9px;
    border:1px solid rgba(125,211,252,.48);
    border-radius:12px 12px 9px 9px;
    background:linear-gradient(145deg,#1e293b,#07111f 68%);
    box-shadow:inset 0 0 0 2px rgba(255,255,255,.025);
}
.linebot::after {
    content:'';
    position:absolute;
    left:13px;right:13px;bottom:2px;height:9px;
    border-radius:7px;
    background:repeating-linear-gradient(90deg,#334155 0 5px,#0f172a 5px 9px);
    border:1px solid #475569;
}
.linebot .bot-eye {
    position:absolute;
    left:50%;top:9px;
    width:11px;height:5px;
    transform:translateX(-50%);
    border-radius:5px;
    background:#22d3ee;
    box-shadow:0 0 10px #22d3ee;
    z-index:2;
}
.linebot i,.linebot b { position:absolute;bottom:3px;width:11px;height:11px;border-radius:50%;background:#020617;border:2px solid #64748b;z-index:4; }
.linebot i { left:8px; }.linebot b { right:8px; }
.bot-b { animation-delay:-4.3s;transform:scale(.82);opacity:.72; }
.bot-c { animation-delay:-8.6s;transform:scale(.66);opacity:.5; }
.linebot-station {
    position:absolute;
    z-index:3;
    width:94px;height:48px;
    border:1px solid rgba(125,211,252,.22);
    border-radius:9px;
    background:rgba(8,15,28,.88);
    display:flex;align-items:center;gap:9px;
    padding:8px 10px;
    box-shadow:0 14px 35px rgba(0,0,0,.38);
    color:#e2e8f0;
    font:800 13px/1 "JetBrains Mono",monospace;
}
.linebot-station::after { content:'';position:absolute;left:12px;right:12px;bottom:-8px;height:8px;background:repeating-linear-gradient(135deg,#eab308 0 7px,#111827 7px 14px); }
.linebot-station small { color:#7dd3fc;font-size:7px;letter-spacing:.13em; }
.station-a { left:10%;bottom:21%; }
.station-b { right:10%;top:18%; }
#deneyim .section-header { margin-bottom:34px; }
#deneyim .experience-list {
    max-width:980px;
    padding:18px 28px;
    border:1px solid rgba(125,211,252,.12);
    border-radius:20px;
    background:rgba(5,10,20,.73);
    backdrop-filter:blur(10px);
    box-shadow:0 26px 70px rgba(0,0,0,.35);
}
#deneyim .experience-card {
    background:linear-gradient(135deg,rgba(20,28,50,.96),rgba(6,13,25,.91));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.02),0 14px 35px rgba(0,0,0,.22);
}
#deneyim .experience-divider { animation:none !important;background:linear-gradient(90deg,transparent,rgba(34,211,238,.36),transparent)!important; }
@keyframes linebotDrive { from { offset-distance:0%; } to { offset-distance:100%; } }
@keyframes lineDash { to { stroke-dashoffset:-30; } }
@keyframes markerBeat { 50% { opacity:.3; } }

@media (max-width:900px), (pointer:coarse) {
    .tech-cursor,.tech-click-pulse { display:none !important; }
    html.has-tech-cursor,html.has-tech-cursor * { cursor:auto !important; }
    .linebot-highway { opacity:.54; }
    .linebot-station { display:none; }
}
@media (prefers-reduced-motion:reduce) {
    .linebot,.track-dash,.track-markers circle,.tech-click-pulse { animation:none!important; }
}

/* ==========================================================
   V24 — Atölye sahnesi, gerçekçi trackbot, fabrika geçişi
   ========================================================== */

/* HERO: tüm kompozisyonu hafif sola al, paneli daha dengeli hizala */
@media (min-width: 1100px) {
  #hero .hero-container {
    width:min(94vw,1460px);
    max-width:none;
    grid-template-columns:minmax(410px,.82fr) minmax(560px,1.18fr);
    gap:54px;
    transform:translateX(-72px);
  }
  #hero .hero-content { justify-self:end; width:min(100%,500px); }
  #hero .hero-visual { justify-content:flex-start; }
  #hero .command-deck { width:min(620px,42vw); }
}
@media (min-width: 1450px) {
  #hero .hero-container { transform:translateX(-96px); }
}

/* Fare koordinat göstergesi: yüzde + encoder değeri, her kare canlı */
.tech-cursor-readout {
  min-width:148px!important;
  font-size:7.5px!important;
  letter-spacing:.045em!important;
  color:#8be5ff!important;
  text-shadow:0 0 7px rgba(34,211,238,.28);
}

/* PROJELER: genişleyebilir atölye/robot hücresi */
#projeler { background:#050a12!important; isolation:isolate; }
#projeler .container { position:relative; z-index:5; width:min(92vw,1380px); }
.project-workshop { position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.project-workshop::before {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(rgba(56,189,248,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(56,189,248,.035) 1px,transparent 1px),
    radial-gradient(circle at 50% 8%,rgba(14,165,233,.13),transparent 28%),
    linear-gradient(180deg,#08111e 0%,#050a12 68%,#03060b 100%);
  background-size:58px 58px,58px 58px,100% 100%,100% 100%;
}
.project-workshop::after {
  content:''; position:absolute; left:0; right:0; top:94px; height:4px;
  background:linear-gradient(90deg,transparent 3%,#23334b 3% 97%,transparent 97%);
  box-shadow:0 34px 0 rgba(35,51,75,.55),0 68px 0 rgba(35,51,75,.25);
}
.workshop-beam { position:absolute; top:0; bottom:0; width:24px; background:linear-gradient(90deg,#101827,#4d6079 48%,#111827); box-shadow:0 0 0 2px #05080d,0 0 34px rgba(0,0,0,.7); }
.beam-left{left:3.5%}.beam-right{right:3.5%}
.workshop-lamp { position:absolute; top:78px; width:190px; height:14px; border-radius:3px; background:#dff7ff; box-shadow:0 0 10px #dff7ff,0 26px 70px rgba(56,189,248,.22); opacity:.85; }
.workshop-lamp::after { content:'';position:absolute;left:50%;top:14px;width:280px;height:430px;transform:translateX(-50%);background:linear-gradient(180deg,rgba(56,189,248,.08),transparent 70%);clip-path:polygon(30% 0,70% 0,100% 100%,0 100%); }
.lamp-a{left:16%}.lamp-b{left:calc(50% - 95px)}.lamp-c{right:16%}
.workshop-pegboard { position:absolute; left:5.7%; top:185px; width:128px; height:265px; border:1px solid #29384f; border-radius:10px; background:radial-gradient(circle,#29384f 1.6px,transparent 1.8px) 0 0/14px 14px,rgba(8,14,25,.86); box-shadow:0 18px 44px rgba(0,0,0,.45); }
.workshop-pegboard i { position:absolute; width:44px;height:6px;border-radius:4px;background:#475569;left:42px; }
.workshop-pegboard i:nth-child(1){top:42px}.workshop-pegboard i:nth-child(2){top:82px;width:28px}.workshop-pegboard i:nth-child(3){top:126px;width:56px;left:34px}.workshop-pegboard i:nth-child(4){top:174px}.workshop-pegboard i:nth-child(5){top:218px;width:30px}
.workshop-rack { position:absolute; right:5.3%; top:176px; width:154px; height:298px; border:2px solid #314056; border-radius:8px; background:repeating-linear-gradient(180deg,rgba(24,34,51,.96) 0 54px,#4b5d73 54px 58px); box-shadow:0 20px 50px rgba(0,0,0,.5); }
.workshop-rack span,.workshop-rack b { position:absolute; left:12px; right:12px; padding:7px 8px; border:1px solid rgba(125,211,252,.18); background:#08111e; color:#7dd3fc; font:700 8px/1.2 'JetBrains Mono',monospace; letter-spacing:.08em; }
.workshop-rack span{top:14px}.workshop-rack b{bottom:14px;color:#86efac}
.workshop-floor { position:absolute; left:0;right:0;bottom:0;height:23%; background:linear-gradient(180deg,transparent,#05080d 18%),repeating-linear-gradient(90deg,transparent 0 78px,rgba(56,189,248,.06) 79px 80px),repeating-linear-gradient(0deg,transparent 0 44px,rgba(56,189,248,.05) 45px 46px); transform:perspective(450px) rotateX(56deg); transform-origin:bottom; }
#projeler .section-header::after { content:'ROBOT CELL 01  •  PROJECT BAY  •  CAPACITY: EXPANDABLE'; display:block; margin-top:10px; color:#56708d; font:700 8px/1 'JetBrains Mono',monospace; letter-spacing:.18em; }
#projeler .projects-showcase { width:100%; max-width:1180px; margin-inline:auto; }
#projeler .projects-grid {
  display:grid!important;
  grid-template-columns:repeat(3,minmax(270px,1fr))!important;
  gap:18px!important;
  max-height:520px;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:12px 10px 22px!important;
  scrollbar-width:thin;
  scrollbar-color:#1e90b6 #08111e;
  scroll-snap-type:y proximity;
}
#projeler .projects-grid::-webkit-scrollbar{width:8px}
#projeler .projects-grid::-webkit-scrollbar-track{background:#08111e;border-radius:8px}
#projeler .projects-grid::-webkit-scrollbar-thumb{background:linear-gradient(#164e63,#22d3ee);border-radius:8px}
#projeler .project-card { scroll-snap-align:start; box-shadow:0 18px 42px rgba(0,0,0,.44),inset 0 0 0 1px rgba(125,211,252,.04); }
#projeler .project-card:hover { transform:translateY(-5px); border-color:rgba(34,211,238,.44); }
@media(max-width:1100px){#projeler .projects-grid{grid-template-columns:repeat(2,minmax(260px,1fr))!important}.workshop-pegboard,.workshop-rack{opacity:.35}}
@media(max-width:760px){#projeler .projects-grid{grid-template-columns:1fr!important;max-height:none;overflow:visible!important}.project-workshop{opacity:.45}}

/* DENEYİM: eski çizgi-izleyen sahnesini daha temiz laboratuvar test hücresine dönüştür */
.linebot-highway{display:none!important}
#deneyim { background:#060b14!important; overflow:hidden; }
.journey-lab { position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.journey-lab::before { content:'';position:absolute;inset:0;background:linear-gradient(rgba(56,189,248,.028) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.028) 1px,transparent 1px),radial-gradient(circle at 72% 26%,rgba(14,165,233,.10),transparent 28%);background-size:56px 56px,56px 56px,100% 100%; }
.journey-lab::after { content:'';position:absolute;inset:0;background:linear-gradient(90deg,#060b14 0%,transparent 14%,transparent 86%,#060b14 100%),linear-gradient(180deg,#060b14 0%,transparent 16%,transparent 84%,#060b14 100%);z-index:5; }
.lab-table { position:absolute; left:5%;right:5%;top:12%;bottom:10%; border:2px solid #26364d; border-radius:28px; background:linear-gradient(145deg,rgba(12,21,35,.96),rgba(4,9,17,.94)); box-shadow:0 40px 90px rgba(0,0,0,.45),inset 0 0 0 8px rgba(255,255,255,.012); }
.lab-table::before { content:'';position:absolute;inset:28px;border:1px dashed rgba(125,211,252,.08);border-radius:18px; }
.lab-track { position:absolute; inset:0; width:100%;height:100%; z-index:2; }
.lab-track path { fill:none;vector-effect:non-scaling-stroke; }
.lab-track-border{stroke:#1f2937;stroke-width:34;filter:drop-shadow(0 10px 12px rgba(0,0,0,.5))}
.lab-track-line{stroke:#f8fafc;stroke-width:17}
.lab-track-sensor{stroke:#0f172a;stroke-width:7;stroke-dasharray:5 19;animation:labSensorFlow 1.2s linear infinite}
.trackbot { --route:path("M80 660 H390 Q470 660 470 580 V355 Q470 275 555 275 H1020 Q1110 275 1110 360 V530 Q1110 615 1200 615 H1530"); position:absolute; width:78px;height:54px; offset-path:var(--route);offset-rotate:auto;z-index:3;animation:trackbotRun 14s linear infinite;filter:drop-shadow(0 12px 12px rgba(0,0,0,.55)); }
.trackbot::before { content:'';position:absolute;left:10px;right:10px;top:7px;bottom:10px;border-radius:9px;background:linear-gradient(145deg,#16324a,#06101d);border:1px solid #56c8e8;box-shadow:inset 0 0 0 2px rgba(255,255,255,.025); }
.trackbot .pcb { position:absolute;left:23px;top:13px;width:32px;height:22px;border-radius:4px;background:linear-gradient(135deg,#0f766e,#064e3b);border:1px solid #34d399;z-index:2; }
.trackbot .pcb::before { content:'';position:absolute;inset:4px;background:repeating-linear-gradient(90deg,transparent 0 5px,rgba(167,243,208,.55) 5px 6px),repeating-linear-gradient(0deg,transparent 0 5px,rgba(167,243,208,.35) 5px 6px); }
.trackbot i,.trackbot b { position:absolute;bottom:2px;width:16px;height:16px;border-radius:50%;background:#020617;border:3px solid #64748b;z-index:4;box-shadow:inset 0 0 0 2px #111827; }
.trackbot i{left:7px}.trackbot b{right:7px}
.trackbot em { position:absolute;left:50%;bottom:3px;width:22px;height:5px;transform:translateX(-50%);border-radius:5px;background:#22d3ee;box-shadow:0 0 10px #22d3ee;z-index:5; }
.trackbot-b { animation-delay:-7s; transform:scale(.86); opacity:.76; }
.lab-checkpoint { position:absolute;z-index:4;width:126px;padding:10px 12px;border:1px solid rgba(125,211,252,.26);border-radius:9px;background:rgba(7,15,27,.92);box-shadow:0 16px 38px rgba(0,0,0,.42);font-family:'JetBrains Mono',monospace; }
.lab-checkpoint::before { content:'';position:absolute;left:12px;top:-18px;width:2px;height:18px;background:#38bdf8; }
.lab-checkpoint strong { display:block;color:#7dd3fc;font-size:10px;letter-spacing:.12em; }
.lab-checkpoint small { color:#dbeafe;font-size:8px;letter-spacing:.08em; }
.checkpoint-school{left:25%;bottom:19%}.checkpoint-intern{right:20%;top:22%}
.lab-console { position:absolute;right:6.5%;bottom:8%;z-index:4;width:210px;padding:12px 14px;border:1px solid #334155;border-radius:10px;background:#07101d;color:#7dd3fc;font:700 9px/1.5 'JetBrains Mono',monospace;box-shadow:0 18px 44px rgba(0,0,0,.45); }
.lab-console b{display:block;color:#86efac}.lab-console i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 8px #22c55e;margin:7px 7px 0 0;animation:consoleLed 1.5s ease-in-out infinite}.lab-console i:nth-of-type(2){animation-delay:.35s}.lab-console i:nth-of-type(3){animation-delay:.7s}
#deneyim > .container { position:relative;z-index:7; }
#deneyim .experience-list { background:rgba(5,10,20,.82)!important;backdrop-filter:blur(14px); }
@keyframes trackbotRun{from{offset-distance:0%}to{offset-distance:100%}}
@keyframes labSensorFlow{to{stroke-dashoffset:-24}}
@keyframes consoleLed{50%{opacity:.25}}

/* KONVEYÖR GEÇİŞİ: fabrika mekânı + küçük panelden tam ekrana görünür büyüme */
@media(min-width:901px){
  .factory-transition-bg { position:absolute;inset:72px 0 0;z-index:2;opacity:0;visibility:hidden;transition:opacity .35s ease,visibility .35s ease;overflow:hidden;pointer-events:none;background:linear-gradient(180deg,#0a101a 0%,#090e17 57%,#05080d 100%); }
  #fp-container.conveyor-moving .factory-transition-bg { opacity:1;visibility:visible; }
  .factory-transition-bg::before { content:'';position:absolute;inset:0;background:linear-gradient(rgba(125,211,252,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(125,211,252,.035) 1px,transparent 1px),radial-gradient(circle at 50% 36%,rgba(14,165,233,.10),transparent 31%);background-size:72px 72px,72px 72px,100% 100%; }
  .factory-ceiling { position:absolute;left:0;right:0;top:0;height:94px;border-bottom:5px solid #334155;background:repeating-linear-gradient(90deg,#101827 0 120px,#1f2a3a 120px 128px);box-shadow:0 16px 28px rgba(0,0,0,.42); }
  .factory-ceiling i { position:absolute;top:67px;width:210px;height:10px;border-radius:3px;background:#e0f7ff;box-shadow:0 0 14px #e0f7ff,0 32px 75px rgba(56,189,248,.18); }
  .factory-ceiling i:nth-child(1){left:12%}.factory-ceiling i:nth-child(2){left:calc(50% - 105px)}.factory-ceiling i:nth-child(3){right:12%}
  .factory-pipe { position:absolute;top:118px;height:24px;border:4px solid #475569;border-radius:14px;background:linear-gradient(#263348,#111827);box-shadow:0 8px 18px rgba(0,0,0,.35); }
  .pipe-a{left:-20px;width:28%}.pipe-b{right:-20px;width:25%;top:157px}
  .factory-wall-panel { position:absolute;width:156px;height:78px;padding:13px 15px;border:1px solid #3d4d65;border-radius:8px;background:rgba(8,14,24,.9);box-shadow:0 16px 40px rgba(0,0,0,.38);font:700 9px/1.5 'JetBrains Mono',monospace;color:#94a3b8; }
  .factory-wall-panel span{display:block}.factory-wall-panel b{color:#86efac;letter-spacing:.14em}.panel-a{left:4.5%;top:31%}.panel-b{right:4.5%;top:20%}
  .factory-floor-grid { position:absolute;left:-10%;right:-10%;bottom:-12%;height:45%;background:repeating-linear-gradient(90deg,transparent 0 89px,rgba(56,189,248,.09) 90px 91px),repeating-linear-gradient(0deg,transparent 0 52px,rgba(56,189,248,.08) 53px 54px);transform:perspective(500px) rotateX(61deg);transform-origin:bottom; }
  #fp-container.conveyor-moving > .fp-slide { transition:transform 1.85s cubic-bezier(.55,.02,.17,1),opacity .72s ease,filter .72s ease,box-shadow .72s ease,border-radius .72s ease!important; }
  #fp-container.conveyor-moving > .fp-slide.belt-expand { transform:translate(-50%,-50%) translateY(0) scale(1)!important;opacity:1!important;filter:none!important;border-radius:0!important;box-shadow:none!important;z-index:20!important; }
  #fp-container.conveyor-settling .conveyor-machine,#fp-container.conveyor-settling .factory-transition-bg { opacity:0!important;transition:opacity .7s ease!important; }
}

@media(prefers-reduced-motion:reduce){.trackbot,.lab-track-sensor,.lab-console i{animation:none!important}}


/* ==========================================================
   V25 — V24 düzeltmeleri: görünür projeler, eski Yolculuğum haritası,
   kısa ve yumuşak istasyon büyümesi
   ========================================================== */

/* V24'te scroll kutusu, aşağı park edilmiş kartları kırpıyordu. */
@media (min-width: 901px) {
  #projeler .projects-showcase,
  #projeler .projects-grid {
    overflow: visible !important;
  }
  #projeler .projects-grid {
    max-height: none !important;
    padding-bottom: 22px !important;
  }

  /* Hedef panel merkezdeyken 420 ms boyunca küçük paletten tam ekrana büyür. */
  #fp-container.conveyor-moving > .fp-slide.belt-expand {
    transform: translate(-50%, -50%) translateY(0) scale(1) !important;
    opacity: 1 !important;
    filter: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    z-index: 20 !important;
    transition:
      transform 420ms cubic-bezier(.2,.82,.2,1),
      opacity 300ms ease,
      filter 300ms ease,
      border-radius 420ms ease,
      box-shadow 420ms ease !important;
  }
  #fp-container.conveyor-settling .conveyor-machine,
  #fp-container.conveyor-settling .factory-transition-bg {
    opacity: 0 !important;
    transition: opacity 360ms ease !important;
  }
}

/* Eski kıvrımlı Yolculuğum haritası geri geldi. */
.linebot-highway { display: block !important; }
.journey-lab { display: none !important; }


/* ==========================================================
   V26 — Proje kartı görünürlüğü + atölye başlık düzeltmeleri
   ========================================================== */
@media (min-width: 901px) {
  /* Başlığı tavan lambasından ayır. */
  #projeler .section-header {
    transform: translateY(34px);
    z-index: 12;
  }

  /* V22'den kalan scaleX(-1), açıklama yazısını ters çeviriyordu. */
  #projeler .section-header::after {
    transform: none !important;
  }

  /* Kartların üst şeritleri atölye zemininin üstünde kesin görünür. */
  #projeler .projects-showcase,
  #projeler .projects-grid {
    position: relative;
    z-index: 11;
    overflow: visible !important;
  }
  #projeler .project-card.project-parked {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 13 !important;
  }
  #projeler .project-card.project-parked .project-image {
    visibility: visible !important;
    opacity: 1 !important;
  }
  .workshop-floor { z-index: 1 !important; }
  .project-workshop { z-index: 0 !important; }
}

/* ==========================================================
   V27 — Proje kartlarını doğal ölçüsüne döndür + başlık boşluğu
   ========================================================== */
@media (min-width: 901px) {
  #projeler .container {
    padding-top: 92px !important;
  }

  #projeler .section-header {
    transform: none !important;
    margin-top: 0 !important;
    margin-bottom: 18px !important;
    position: relative;
    z-index: 20 !important;
  }

  #projeler .projects-showcase {
    width: 100% !important;
    max-width: 1120px !important;
    margin: 0 auto !important;
  }

  #projeler .projects-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 340px)) !important;
    grid-auto-rows: max-content !important;
    align-items: start !important;
    align-content: start !important;
    justify-content: center !important;
    gap: 18px !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 8px 0 20px !important;
    overflow: visible !important;
  }

  #projeler .project-card,
  #projeler .project-card.project-parked,
  #projeler .project-card.revealed {
    width: 100% !important;
    max-width: 340px !important;
    height: auto !important;
    min-height: 0 !important;
    align-self: start !important;
    justify-self: stretch !important;
  }

  /* Kart aşağıdayken yalnızca fotoğrafın üst bandı görünsün. */
  #projeler .project-card.project-parked {
    overflow: hidden !important;
  }
}

/* ==========================================================
   V28 — sol hizalı Hero, temiz proje istasyonu, STL linebot
   ========================================================== */
@media (min-width: 901px) {
  /* V3 hissi: içerik ekranın merkezine yığılmasın, belirgin biçimde sola otursun. */
  #hero .hero-container {
    width: min(1460px, 96vw) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding-left: clamp(36px, 5vw, 92px) !important;
    padding-right: clamp(28px, 4vw, 72px) !important;
    grid-template-columns: minmax(420px, 540px) minmax(520px, 620px) !important;
    justify-content: start !important;
    gap: clamp(52px, 6vw, 104px) !important;
    transform: translateX(-7vw) !important;
  }
  #hero .hero-content {
    justify-self: start !important;
    width: 100% !important;
    max-width: 540px !important;
  }
  #hero .hero-visual {
    justify-content: flex-start !important;
    justify-self: start !important;
  }
  #hero .command-deck { width: min(620px, 41vw) !important; }

  /* Atölye başlığındaki dekoratif teknik cümle kaldırıldı. */
  #projeler .section-header::after { content: none !important; display: none !important; }

  /* Kartlar proje paneli daha konveyördeyken bile aşağıda park edilmiş görünür. */
  body.conveyor-transitioning #projeler .project-card:not(.revealed),
  #projeler:not(.fp-active) .project-card:not(.revealed) {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
  }
}

/* STL sahnesi eski haritanın üstünde çalışır; CSS oyuncak robotlar yalnızca STL yüklenirse gizlenir. */
.line-follower-3d {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
}
.line-follower-3d canvas { width:100% !important; height:100% !important; display:block; }
.linebot-highway.stl-ready .line-follower-3d { opacity: .82; }
.linebot-highway.stl-ready > .linebot { display:none !important; }

/* ==========================================================
   V29 — gerçek sol Hero + proje geçiş gizleme + teknik etiket
   ========================================================== */
@media (min-width: 901px) {
  /* Hero metin bloğunu gerçekten ekranın soluna taşı. */
  #hero .hero-container {
    width: min(1500px, 96vw) !important;
    max-width: none !important;
    margin-left: clamp(34px, 4.5vw, 84px) !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: clamp(24px, 3vw, 56px) !important;
    grid-template-columns: minmax(430px, 520px) minmax(560px, 620px) !important;
    justify-content: start !important;
    column-gap: clamp(52px, 5vw, 92px) !important;
    transform: none !important;
  }
  #hero .hero-content {
    justify-self: start !important;
    align-self: center !important;
    width: 100% !important;
    max-width: 520px !important;
    margin: 0 !important;
  }
  #hero .hero-visual {
    justify-self: start !important;
    justify-content: flex-start !important;
    margin: 0 !important;
  }
  #hero .command-deck { width: 600px !important; max-width: 42vw !important; }

  /* Beğenilen teknik istasyon yazısı geri geldi; başlığın altında düzgün durur. */
  #projeler .section-header::after {
    content: 'ROBOT CELL 01  •  PROJECT BAY  •  CAPACITY: 03' !important;
    display: block !important;
    margin-top: 12px !important;
    color: #6f89a6 !important;
    font: 700 8px/1 'JetBrains Mono', monospace !important;
    letter-spacing: .18em !important;
    transform: none !important;
    white-space: nowrap;
  }

  /* Projeler paneli konveyörde taşınırken kartlar hiç görünmez. */
  body.conveyor-transitioning #projeler .projects-grid,
  #projeler:not(.fp-active):not(.belt-expand) .projects-grid {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Bölüm merkeze oturunca kartlar aşağıda park edilmiş halde görünür. */
  #projeler.fp-active .projects-grid,
  #projeler.belt-expand .projects-grid {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity .18s ease .08s !important;
  }
}

/* ==========================================================
   V30 — gerçek sol Hero + güvenli proje gelişi + ayrı hücre etiketi
   ========================================================== */
@media (min-width: 1200px) {
  /* Önceki kuralların tamamını ez: bütün Hero kompozisyonu belirgin biçimde sola. */
  #hero .hero-container {
    position: relative !important;
    left: -300px !important;
    transform: none !important;
    width: 1500px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-template-columns: 520px 600px !important;
    column-gap: 72px !important;
    justify-content: start !important;
  }
  #hero .hero-content {
    justify-self: start !important;
    margin: 0 !important;
    transform: none !important;
  }
  #hero .hero-visual {
    justify-self: start !important;
    margin: 0 !important;
    transform: none !important;
  }
  #hero .command-deck { width: 600px !important; max-width: none !important; }
}
@media (min-width: 901px) and (max-width: 1199px) {
  #hero .hero-container { left: -120px !important; transform:none !important; }
}

/* Teknik yazı başlıktan ve raftan bağımsız bir metal plaka. */
#projeler .section-header::after { content:none !important; display:none !important; }
.project-cell-label {
  position:absolute;
  left:74px;
  bottom:58px;
  z-index:3;
  display:flex;
  align-items:center;
  gap:14px;
  padding:8px 13px;
  border:1px solid rgba(93,126,158,.52);
  border-left:3px solid #22d3ee;
  border-radius:4px;
  background:linear-gradient(180deg,rgba(17,31,49,.92),rgba(7,16,28,.94));
  box-shadow:0 10px 28px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.035);
  color:#79a6c9;
  font:700 8px/1 'JetBrains Mono',monospace;
  letter-spacing:.16em;
  white-space:nowrap;
}
.project-cell-label span { color:#67e8f9; }
.project-cell-label b { color:#7890aa; font-weight:700; }

/* Hedef proje paneli taşınırken içerik sıfırıncı kareden itibaren kapalı. */
@media (min-width:901px) {
  #projeler:not(.projects-ready) .projects-grid {
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:none !important;
  }
  #projeler.fp-active.projects-ready .projects-grid {
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transition:opacity .22s ease !important;
  }
}

/* V32 — Gantry frontend polish */
#projeler .projects-showcase{position:relative;max-width:1180px;margin:0 auto;padding-top:112px}
.gantry-scene{position:absolute;left:50%;top:8px;width:min(1080px,92vw);height:170px;transform:translateX(-50%);z-index:8;pointer-events:none;filter:drop-shadow(0 18px 28px rgba(0,0,0,.42))}
.gantry-rail{position:absolute;left:0;right:0;top:28px;height:34px;border:1px solid #40546a;border-radius:7px;background:linear-gradient(180deg,#4e6275 0,#263746 47%,#17232f 52%,#314657 100%);box-shadow:inset 0 2px rgba(255,255,255,.12),0 0 0 5px rgba(10,18,25,.72)}
.gantry-rail:before{content:"";position:absolute;left:12px;right:12px;top:10px;height:5px;border-radius:4px;background:repeating-linear-gradient(90deg,#0b1118 0 24px,#587086 24px 27px)}
.rail-bolt{position:absolute;top:11px;width:10px;height:10px;border-radius:50%;background:#0a1118;box-shadow:inset 0 0 0 2px #71859a}.b1{left:3%}.b2{left:34%}.b3{right:34%}.b4{right:3%}
.gantry-carriage{--gx:0px;--gz:0px;position:absolute;left:50%;top:-12px;width:128px;height:82px;transform:translateX(calc(-50% + var(--gx)));transition:transform .62s cubic-bezier(.22,.75,.2,1);border:1px solid #556f82;border-radius:9px;background:linear-gradient(145deg,#263b4b,#14232e);box-shadow:0 8px 16px rgba(0,0,0,.45),inset 0 1px rgba(255,255,255,.08)}
.gantry-status{position:absolute;left:12px;right:12px;top:10px;height:30px;display:grid;grid-template-columns:10px 1fr auto;gap:7px;align-items:center;padding:0 9px;border-radius:5px;background:#08131b;border:1px solid #2f4d5f;font-family:monospace;font-size:9px;color:#7dd3fc}.gantry-status small{color:#94a3b8}.status-led,.vacuum-led{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 10px #22c55e}
.gantry-z-axis{position:absolute;left:50%;top:56px;width:38px;height:116px;transform:translateX(-50%) translateY(var(--gz));transition:transform .54s cubic-bezier(.3,.7,.2,1)}
.gantry-column{position:absolute;left:12px;top:0;width:14px;height:82px;border-radius:3px;background:linear-gradient(90deg,#182632,#667d8e,#1b2b37);border:1px solid #50687a}
.vacuum-head{position:absolute;left:-10px;top:72px;width:58px;height:30px;border-radius:5px;background:linear-gradient(#334b5c,#162733);border:1px solid #587286}.vacuum-led{position:absolute;right:6px;top:6px;background:#64748b;box-shadow:none}.vacuum-cup{position:absolute;left:16px;top:25px;width:26px;height:18px;border:3px solid #8fa8b9;border-top-width:5px;border-radius:4px 4px 13px 13px;background:rgba(125,211,252,.12)}
.gantry-scene.is-vacuum .vacuum-led{background:#38bdf8;box-shadow:0 0 12px #38bdf8}.gantry-scene.is-vacuum .vacuum-cup{transform:scaleY(.82);background:rgba(56,189,248,.28)}
.gantry-label{position:absolute;right:8px;top:77px;display:flex;gap:9px;font:700 9px/1 monospace;letter-spacing:.12em;color:#52697a}.gantry-label span{color:#67e8f9}
#projeler .projects-grid{position:relative;z-index:5;gap:24px}
#projeler .project-card{border:1px solid rgba(125,211,252,.15);background:linear-gradient(165deg,rgba(18,31,42,.96),rgba(9,17,25,.98));box-shadow:0 24px 60px rgba(0,0,0,.46),inset 0 1px rgba(255,255,255,.035);border-radius:15px;overflow:hidden;transition:transform .62s cubic-bezier(.22,.75,.2,1),box-shadow .35s,border-color .35s}
#projeler .project-card.revealed:hover{transform:translateY(-7px);border-color:rgba(34,211,238,.52);box-shadow:0 30px 72px rgba(0,0,0,.58),0 0 28px rgba(34,211,238,.08)}
#projeler .project-card.gantry-held{z-index:12;transition:transform .62s cubic-bezier(.22,.75,.2,1),filter .25s}
@media(max-width:900px){.gantry-scene{display:none}#projeler .projects-showcase{padding-top:0}}

/* V33 — refined compact gantry */
.gantry-scene{
  top:-34px;
  height:190px;
  width:min(1100px,92vw);
  filter:drop-shadow(0 20px 32px rgba(0,0,0,.48));
}
.gantry-frame-post{position:absolute;top:28px;width:32px;height:138px;border:1px solid #344b5c;background:linear-gradient(90deg,#14212b,#41586a 48%,#172630);box-shadow:inset 0 0 0 4px #0b141b,0 10px 18px rgba(0,0,0,.38);z-index:-1}
.gantry-frame-post:before,.gantry-frame-post:after{content:"";position:absolute;left:-9px;width:50px;height:9px;border:1px solid #40586b;background:linear-gradient(#51697a,#223340)}
.gantry-frame-post:before{top:-6px}.gantry-frame-post:after{bottom:-6px}
.gantry-frame-post span{position:absolute;left:7px;right:7px;top:13px;bottom:13px;background:repeating-linear-gradient(135deg,transparent 0 13px,rgba(125,211,252,.08) 13px 16px)}
.post-left{left:7px}.post-right{right:7px}
.gantry-rail{left:24px;right:24px;top:18px;height:42px;border-color:#526b7e;border-radius:5px;background:linear-gradient(180deg,#60788b 0,#314858 18%,#172733 53%,#263d4c 70%,#101d26 100%);box-shadow:inset 0 2px rgba(255,255,255,.16),inset 0 -5px rgba(0,0,0,.32),0 0 0 5px rgba(7,15,21,.8),0 10px 22px rgba(0,0,0,.28)}
.gantry-rail:before{left:76px;right:20px;top:15px;height:8px;background:repeating-linear-gradient(90deg,#091119 0 20px,#7290a5 20px 23px,#162633 23px 31px)}
.gantry-rail:after{content:"";position:absolute;left:72px;right:16px;bottom:5px;height:3px;background:linear-gradient(90deg,#38bdf8,transparent 18%,transparent 82%,#38bdf8);opacity:.45}
.gantry-servo{position:absolute;left:-18px;top:-15px;width:78px;height:70px;border:1px solid #536d80;border-radius:7px;background:linear-gradient(145deg,#263b49,#0e1b24 70%);box-shadow:inset 0 1px rgba(255,255,255,.1),5px 9px 18px rgba(0,0,0,.36);font:700 9px/1 monospace;color:#8fa8ba;text-align:center;padding-top:43px}
.gantry-servo b{position:absolute;left:11px;top:9px;width:31px;height:31px;border:5px solid #111d25;border-radius:50%;display:grid;place-items:center;color:#67e8f9;background:radial-gradient(circle,#304b5c 0 38%,#172630 40% 100%)}
.gantry-servo small{font-size:7px;letter-spacing:.12em}.servo-cap{position:absolute;right:7px;top:12px;width:12px;height:33px;border-radius:3px;background:repeating-linear-gradient(0deg,#506879 0 3px,#17242e 3px 6px)}
.gantry-cable-chain{position:absolute;left:72px;top:-16px;width:46%;height:16px;border-radius:9px;background:repeating-linear-gradient(90deg,#0a1218 0 8px,#496273 8px 11px,#101b23 11px 17px);box-shadow:inset 0 0 0 2px #111f29;transform-origin:left center;transition:width .62s cubic-bezier(.22,.75,.2,1)}
.gantry-carriage{top:-20px;width:150px;height:102px;border-radius:7px;border-color:#617b8d;background:linear-gradient(155deg,#314b5d 0,#182a36 48%,#0d1921 100%);box-shadow:0 12px 22px rgba(0,0,0,.48),inset 0 1px rgba(255,255,255,.13),inset 0 -5px rgba(0,0,0,.2)}
.carriage-topbar{position:absolute;left:8px;right:8px;top:7px;height:19px;border-bottom:1px solid #3c5668;font:700 8px/19px monospace;letter-spacing:.14em;color:#9ab2c2}.carriage-topbar i{position:absolute;right:2px;top:5px;width:28px;height:7px;background:repeating-linear-gradient(90deg,#718a9c 0 3px,transparent 3px 6px)}
.gantry-status{left:10px;right:10px;top:31px;height:31px;grid-template-columns:10px 1fr auto;background:#071219;border-color:#38576a;color:#8fdff6}
.status-led,.vacuum-led{background:#33414b;box-shadow:inset 0 0 0 1px #62727e;transition:background .18s,box-shadow .18s}
.gantry-scene.is-moving .status-led,.gantry-scene.is-vacuum .status-led{background:#22c55e;box-shadow:0 0 5px #22c55e,0 0 14px rgba(34,197,94,.8)}
.carriage-warning{position:absolute;left:10px;right:10px;bottom:9px;height:11px;border-radius:2px;background:repeating-linear-gradient(135deg,#eab308 0 8px,#111827 8px 16px);opacity:.8}
.gantry-z-axis{top:76px;width:54px;height:128px}
.z-servo{position:absolute;left:-12px;top:-8px;width:78px;height:31px;border:1px solid #536d80;border-radius:5px;background:linear-gradient(#2f4858,#14242f);font:700 8px/1 monospace;color:#9db5c5;display:flex;align-items:center;justify-content:center;gap:6px;z-index:2}.z-servo b{color:#67e8f9;font-size:12px}.z-servo small{font-size:7px;letter-spacing:.12em}
.gantry-column{left:18px;top:20px;width:18px;height:72px;border-color:#627b8c;background:linear-gradient(90deg,#162630,#718999 42%,#263c49 68%,#0e1b23);box-shadow:inset 0 0 0 3px rgba(7,16,22,.32)}
.gantry-column span{position:absolute;left:6px;top:5px;bottom:5px;width:4px;background:repeating-linear-gradient(0deg,#0a151c 0 5px,#7b96a8 5px 8px)}
.vacuum-head{left:-6px;top:83px;width:66px;height:39px;border-radius:5px;background:linear-gradient(#385466,#172a36);border-color:#688193;box-shadow:0 7px 12px rgba(0,0,0,.35)}
.vacuum-manifold{position:absolute;left:6px;right:6px;top:5px;height:19px;border-radius:3px;background:#07141b;border:1px solid #345267;font:700 7px/19px monospace;color:#7dd3fc;padding-left:7px}.vacuum-manifold .vacuum-led{right:5px;top:5px;position:absolute;width:7px;height:7px;border-radius:50%}
.gantry-scene.is-vacuum .vacuum-led{background:#22c55e;box-shadow:0 0 5px #22c55e,0 0 13px rgba(34,197,94,.85)}
.vacuum-stem{position:absolute;left:30px;top:26px;width:6px;height:16px;border-radius:2px;background:linear-gradient(90deg,#243945,#9ab0bd,#263d49)}
.vacuum-cup{left:18px;top:37px;width:30px;height:16px;border-color:#8ca4b4;background:rgba(125,211,252,.08)}
.gantry-scene.is-vacuum .vacuum-cup{background:rgba(34,197,94,.18);border-color:#86efac}
.gantry-label{right:28px;top:72px;padding:6px 9px;border:1px solid rgba(86,112,130,.32);border-radius:4px;background:rgba(5,13,18,.58);color:#607788}.gantry-label span{color:#7dd3fc}
#projeler .projects-showcase{padding-top:112px}
@media(max-height:760px) and (min-width:901px){.gantry-scene{top:-48px;transform:translateX(-50%) scale(.88);transform-origin:top center}#projeler .projects-showcase{padding-top:88px}}

/* ===========================
   V34 — distinct rooms + ceiling gantry + weighted pickup
   =========================== */

/* ABOUT: electronics test laboratory */
#hakkimda{
  background:
    radial-gradient(circle at 18% 25%,rgba(34,211,238,.12),transparent 30%),
    linear-gradient(180deg,rgba(4,10,18,.88),rgba(5,12,22,.98)),
    #050b13 !important;
  overflow:hidden;
}
#hakkimda::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.82;
  background:
    linear-gradient(90deg,transparent 0 8%,rgba(56,189,248,.08) 8.1% 8.25%,transparent 8.35% 91.65%,rgba(56,189,248,.08) 91.75% 91.9%,transparent 92%),
    repeating-linear-gradient(90deg,transparent 0 86px,rgba(56,189,248,.035) 87px 88px),
    repeating-linear-gradient(0deg,transparent 0 86px,rgba(56,189,248,.035) 87px 88px);
}
#hakkimda::after{
  content:"TEST LAB  /  SENSOR BENCH  /  24 VDC";position:absolute;left:5.5vw;bottom:34px;
  font:700 10px/1 monospace;letter-spacing:.22em;color:rgba(125,211,252,.42);
  padding:10px 14px;border:1px solid rgba(56,189,248,.18);border-radius:4px;background:rgba(5,13,20,.7);
  box-shadow:0 0 35px rgba(14,165,233,.05);
}
#hakkimda .container{position:relative;z-index:2}
#hakkimda .about-grid{position:relative;padding:26px;border:1px solid rgba(125,211,252,.12);border-radius:26px;background:linear-gradient(145deg,rgba(8,18,30,.76),rgba(4,10,18,.48));box-shadow:0 32px 90px rgba(0,0,0,.38)}
#hakkimda .about-grid::before{content:"";position:absolute;left:22px;right:22px;top:-16px;height:10px;border-radius:6px;background:linear-gradient(90deg,#193244,#4c6f82,#193244);box-shadow:0 0 24px rgba(125,211,252,.14)}
#hakkimda .about-grid::after{content:"LAB NODE 02";position:absolute;right:24px;top:-34px;font:700 9px monospace;letter-spacing:.18em;color:#7dd3fc}
#hakkimda .about-text{background:linear-gradient(160deg,rgba(11,25,38,.96),rgba(6,13,24,.9));border-color:rgba(103,232,249,.2)}
#hakkimda .skill-card{position:relative;overflow:hidden}
#hakkimda .skill-card::after{content:"";position:absolute;left:18px;right:18px;bottom:12px;height:3px;border-radius:3px;background:linear-gradient(90deg,#22d3ee,transparent);opacity:.5}

/* PROJECTS: ceiling-mounted cell; title no longer collides with rail */
#projeler .section-header{transform:translateY(48px);z-index:12}
#projeler .projects-showcase{padding-top:154px}
.gantry-scene{top:-92px;height:210px;width:min(1160px,94vw)}
.gantry-frame-post{top:8px;height:112px;opacity:.82}
.gantry-rail{top:6px}
.gantry-servo{top:-10px}
.gantry-carriage{top:-15px}
.gantry-label{top:63px}
#projeler .project-card.gantry-held{will-change:transform;transform-origin:center top}

/* EXPERIENCE: maintenance corridor / signal route */
#deneyim{
  background:
    radial-gradient(circle at 70% 30%,rgba(14,165,233,.11),transparent 28%),
    linear-gradient(180deg,#07101b,#050a12 72%,#03070d) !important;
  overflow:hidden;
}
#deneyim::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(6,12,22,.96) 0 5%,transparent 5% 95%,rgba(6,12,22,.96) 95%),
  repeating-linear-gradient(90deg,transparent 0 120px,rgba(56,189,248,.035) 121px 122px),
  linear-gradient(180deg,transparent 0 80%,rgba(56,189,248,.05) 80% 81%,transparent 81%);
}
#deneyim::after{content:"MAINTENANCE CORRIDOR  ·  SIGNAL ROUTE";position:absolute;right:5vw;top:100px;font:700 9px monospace;letter-spacing:.2em;color:rgba(125,211,252,.34)}
#deneyim .container{position:relative;z-index:2}

/* CONTACT: calm control center */
#iletisim{
  background:
    radial-gradient(circle at 50% 42%,rgba(14,165,233,.10),transparent 30%),
    linear-gradient(180deg,#07101a,#050a12) !important;
}
#iletisim::before{content:"";position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(rgba(56,189,248,.035) 1px,transparent 1px),
  linear-gradient(90deg,rgba(56,189,248,.035) 1px,transparent 1px),
  radial-gradient(circle at 15% 35%,rgba(34,211,238,.08),transparent 18%),
  radial-gradient(circle at 86% 65%,rgba(59,130,246,.08),transparent 18%);background-size:64px 64px,64px 64px,100% 100%,100% 100%}
#iletisim .container{position:relative;z-index:2}

@media(max-height:760px) and (min-width:901px){
  #projeler .section-header{transform:translateY(36px)}
  .gantry-scene{top:-105px;transform:translateX(-50%) scale(.86)}
  #projeler .projects-showcase{padding-top:124px}
}

/* =========================================================
   V35 — Video polish: senkron gantry, dengeli alanlar, ayrı mekânlar
   ========================================================= */
@media (min-width: 901px) {
  /* Gantry tavana daha iyi gömülür, başlıkla nefes alanı oluşur. */
  #projeler .gantry-scene {
    top: 92px !important;
    height: 238px !important;
    z-index: 4 !important;
  }
  #projeler .section-header {
    transform: translateY(64px) !important;
    margin-bottom: 88px !important;
    z-index: 8 !important;
  }
  #projeler .projects-showcase {
    padding-top: 78px !important;
  }
  #projeler .projects-grid {
    align-items: stretch !important;
    gap: 22px !important;
  }
  #projeler .project-card {
    height: 390px !important;
    min-height: 390px !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #projeler .project-image,
  #projeler .project-image[style] {
    height: 188px !important;
    min-height: 188px !important;
    background: linear-gradient(145deg,#0c1423,#111b2d) !important;
  }
  #projeler .project-card:nth-child(2) .project-image {
    background: #edf2f7 !important;
  }
  #projeler .project-content {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  #projeler .project-link { margin-top: auto !important; }

  /* Kart, vakum kafasıyla taşınırken tek gövde gibi davranır. */
  #projeler .project-card.gantry-held {
    will-change: transform;
    z-index: 12 !important;
    box-shadow: 0 28px 70px rgba(0,0,0,.5),0 0 0 1px rgba(34,211,238,.16) !important;
  }
  #projeler .gantry-z-axis,
  #projeler .gantry-carriage {
    transition-timing-function: cubic-bezier(.16,.78,.18,1) !important;
  }
  #projeler .gantry-column { width: 12px !important; }
  #projeler .vacuum-cup {
    width: 46px !important;
    height: 15px !important;
    border-radius: 50% 50% 45% 45% !important;
    background: linear-gradient(180deg,#637084,#252d39) !important;
    box-shadow: inset 0 -4px 6px rgba(0,0,0,.55) !important;
  }
  #projeler .is-vacuum .vacuum-cup {
    box-shadow: inset 0 -4px 6px rgba(0,0,0,.55),0 0 12px rgba(34,197,94,.28) !important;
  }

  /* Son büyümenin son %10'u da yumuşak kalsın. */
  #fp-container.conveyor-moving > .fp-slide.belt-expand {
    transition: transform 540ms cubic-bezier(.18,.78,.18,1),
                opacity 420ms ease,
                filter 420ms ease,
                border-radius 420ms ease,
                box-shadow 420ms ease !important;
  }
  #fp-container.conveyor-settling .factory-transition-bg,
  #fp-container.conveyor-settling .conveyor-machine {
    transition: opacity 620ms ease 110ms !important;
  }

  /* HAKKIMDA — elektronik test laboratuvarı, içerik daha güçlü. */
  #hakkimda {
    background:
      radial-gradient(circle at 18% 24%,rgba(34,211,238,.10),transparent 30%),
      linear-gradient(180deg,#07101b 0%,#060b14 58%,#04070d 100%) !important;
  }
  #hakkimda::before {
    content:'TEST LAB 02   •   BENCH POWER: 24VDC   •   ESD SAFE';
    position:absolute;left:5.5%;bottom:5.5%;z-index:1;
    color:rgba(125,211,252,.36);font:700 9px/1 'JetBrains Mono',monospace;
    letter-spacing:.2em;
  }
  #hakkimda::after {
    content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
    background:
      linear-gradient(90deg,transparent 0 8%,rgba(56,189,248,.07) 8.1% 8.2%,transparent 8.3% 91%,rgba(56,189,248,.07) 91.1% 91.2%,transparent 91.3%),
      repeating-linear-gradient(0deg,transparent 0 48px,rgba(56,189,248,.025) 49px 50px),
      repeating-linear-gradient(90deg,transparent 0 48px,rgba(56,189,248,.025) 49px 50px);
  }
  #hakkimda .container { position:relative;z-index:2; }
  #hakkimda .about-grid {
    max-width:1180px !important;
    grid-template-columns:1.08fr 1fr !important;
    gap:34px !important;
  }
  #hakkimda .about-text {
    min-height:310px;
    padding:34px 36px !important;
    border-radius:18px !important;
    border:1px solid rgba(125,211,252,.16) !important;
    background:linear-gradient(145deg,rgba(14,23,39,.92),rgba(5,10,20,.82)) !important;
    box-shadow:0 30px 80px rgba(0,0,0,.35),inset 0 1px rgba(255,255,255,.025) !important;
  }
  #hakkimda .about-skills {
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:14px !important;
  }
  #hakkimda .skill-card {
    min-height:310px !important;
    padding:28px 20px !important;
    display:flex;flex-direction:column;justify-content:center;
    border-radius:18px !important;
  }

  /* DENEYİM — bakım koridoru / sinyal istasyonları. */
  #deneyim {
    background:
      radial-gradient(circle at 74% 18%,rgba(14,165,233,.09),transparent 26%),
      linear-gradient(180deg,#07101a,#050912 72%,#03060b) !important;
  }
  #deneyim::before {
    content:'MAINTENANCE CORRIDOR  •  SIGNAL ROUTE 04';
    position:absolute;right:5%;top:12%;z-index:2;
    font:700 9px/1 'JetBrains Mono',monospace;letter-spacing:.18em;color:rgba(125,211,252,.32);
  }
  #deneyim .experience-list {
    max-width:1050px !important;
    padding:24px 30px !important;
    border:1px solid rgba(125,211,252,.14) !important;
    border-radius:20px !important;
    box-shadow:0 30px 90px rgba(0,0,0,.35) !important;
  }
  #deneyim .experience-card { min-height:120px; }

  /* İLETİŞİM — sistem çevrimiçi kimliği, boş alanı dengeler. */
  #iletisim::before {
    content:'SYSTEM ONLINE\AAVAILABLE FOR COLLABORATION';
    white-space:pre;
    position:absolute;right:5.5%;bottom:7.5%;z-index:2;
    padding:14px 18px 14px 38px;
    border:1px solid rgba(34,197,94,.22);border-radius:10px;
    background:rgba(4,12,15,.72);
    color:#86efac;font:700 9px/1.7 'JetBrains Mono',monospace;letter-spacing:.13em;
    box-shadow:0 18px 50px rgba(0,0,0,.28);
  }
  #iletisim::after {
    content:'';position:absolute;right:calc(5.5% + 142px);bottom:calc(7.5% + 42px);
    width:8px;height:8px;border-radius:50%;background:#22c55e;z-index:3;
    box-shadow:0 0 14px rgba(34,197,94,.8);
  }
  #iletisim .contact-cards-horizontal { gap:20px !important; }
  #iletisim .contact-card { min-height:122px !important; }
}

/* =========================================================
   V36 — modal cursor visibility + perfectly uniform projects
   ========================================================= */

/* Teknik imleç modalın arkasında kalmasın. */
@media (pointer:fine) {
  .tech-cursor {
    z-index: 2147483647 !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  .tech-click-pulse {
    z-index: 2147483646 !important;
  }
  body.modal-open .tech-cursor,
  body.modal-open .tech-cursor * {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
  }
  body.modal-open,
  body.modal-open .project-modal,
  body.modal-open .project-modal * {
    cursor: none !important;
  }
}

/* Üç proje kartını ölçü ve içerik dağılımı olarak tamamen eşitle. */
@media (min-width: 901px) {
  #projeler .projects-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 340px)) !important;
    justify-content: center !important;
    align-items: stretch !important;
    gap: 24px !important;
    width: 100% !important;
  }

  #projeler .project-card,
  #projeler .project-card.project-parked,
  #projeler .project-card.revealed {
    width: 340px !important;
    max-width: 340px !important;
    min-width: 340px !important;
    height: 420px !important;
    min-height: 420px !important;
    max-height: 420px !important;
    flex: none !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  #projeler .project-image,
  #projeler .project-image[style] {
    width: 100% !important;
    height: 190px !important;
    min-height: 190px !important;
    max-height: 190px !important;
    flex: 0 0 190px !important;
    box-sizing: border-box !important;
  }

  #projeler .project-image img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  #projeler .project-card:nth-child(1) .project-image img {
    object-fit: cover !important;
    padding: 0 !important;
  }

  #projeler .project-card:nth-child(2) .project-image img {
    object-fit: contain !important;
    padding: 14px !important;
  }

  #projeler .project-placeholder {
    width: 100% !important;
    height: 100% !important;
  }

  #projeler .project-content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    box-sizing: border-box !important;
  }

  #projeler .project-tags {
    min-height: 30px !important;
    flex: 0 0 30px !important;
  }

  #projeler .project-content h3 {
    min-height: 32px !important;
    margin: 8px 0 8px !important;
  }

  #projeler .project-content p {
    height: 66px !important;
    min-height: 66px !important;
    max-height: 66px !important;
    overflow: hidden !important;
    margin: 0 !important;
  }

  #projeler .project-link {
    margin-top: auto !important;
    min-height: 24px !important;
  }
}

/* =========================================================
   V37 — Gantry physical alignment fix
   Kartlar rayın üstüne bırakılmaz; Z ekseni görsel olarak kopmaz.
   ========================================================= */
@media (min-width: 901px) {
  /* Gantry tavanda kalır, proje kartlarının çalışma düzlemi raydan ayrılır. */
  #projeler .gantry-scene {
    top: 42px !important;
    height: 250px !important;
  }

  #projeler .projects-showcase {
    padding-top: 132px !important;
  }

  #projeler .projects-grid {
    transform: translateY(58px) !important;
  }

  /* Z ekseni aşağı inerken üst gövdeyle arasındaki boşluğu kapatan
     teleskopik kılıf. --gz arttıkça uzar, üst ucu taşıyıcıda kalır. */
  #projeler .gantry-z-axis::before {
    content: "";
    position: absolute;
    left: 50%;
    top: calc(-1 * var(--gz) - 10px);
    width: 24px;
    height: calc(var(--gz) + 34px);
    transform: translateX(-50%);
    border: 1px solid rgba(108, 137, 156, .72);
    border-radius: 4px;
    background:
      repeating-linear-gradient(
        0deg,
        #101c24 0 7px,
        #536b7b 7px 10px,
        #1a2a35 10px 17px
      );
    box-shadow:
      inset 0 0 0 3px rgba(5, 12, 17, .45),
      0 4px 10px rgba(0, 0, 0, .35);
    z-index: -1;
    pointer-events: none;
  }

  /* Alt kol ve vakum kafası bağlantısını daha dolu göster. */
  #projeler .gantry-column {
    top: 10px !important;
    height: 86px !important;
  }

  #projeler .vacuum-head {
    top: 94px !important;
  }

  #projeler .vacuum-stem {
    top: 27px !important;
    height: 19px !important;
  }

  #projeler .vacuum-cup {
    top: 42px !important;
  }

  /* Ray ile kartlar arasında okunabilir bir güvenlik boşluğu. */
  #projeler .project-card.revealed,
  #projeler .project-card.gantry-held {
    transform-origin: center top !important;
  }
}

@media (max-height: 820px) and (min-width: 901px) {
  #projeler .gantry-scene { top: 26px !important; transform: translateX(-50%) scale(.91) !important; }
  #projeler .projects-showcase { padding-top: 112px !important; }
  #projeler .projects-grid { transform: translateY(38px) !important; }
}

/* =========================================================
   V38 — Ceiling gantry + smooth telescopic Z motion
   ========================================================= */
@property --gz {
  syntax: '<length>';
  inherits: false;
  initial-value: 0px;
}

@media (min-width: 901px) {
  /* Rayı tavan lambalarının hemen altına taşı. */
  #projeler .gantry-scene {
    top: -26px !important;
    height: 228px !important;
    transform: translateX(-50%) scale(.95) !important;
    transform-origin: top center !important;
  }

  #projeler .gantry-rail {
    top: 12px !important;
  }

  #projeler .gantry-frame-post {
    top: 12px !important;
    height: 126px !important;
  }

  #projeler .gantry-carriage {
    top: -12px !important;
    transition:
      transform .72s cubic-bezier(.22,.76,.2,1),
      --gz .64s cubic-bezier(.22,.74,.2,1) !important;
  }

  /* Başlık ile makine arasında temiz boşluk bırak. */
  #projeler .section-header {
    padding-top: 72px !important;
  }

  #projeler .projects-showcase {
    padding-top: 126px !important;
  }

  #projeler .projects-grid {
    transform: translateY(54px) !important;
  }

  /* Körük ilk karede pat diye çıkmasın; gerçek teleskop gibi uzasın. */
  #projeler .gantry-z-axis {
    transition: transform .64s cubic-bezier(.22,.74,.2,1) !important;
  }

  #projeler .gantry-z-axis::before {
    top: calc(-1 * var(--gz) - 5px) !important;
    height: calc(var(--gz) + 27px) !important;
    min-height: 27px;
    opacity: .9;
    transition:
      top .64s cubic-bezier(.22,.74,.2,1),
      height .64s cubic-bezier(.22,.74,.2,1),
      opacity .22s ease !important;
    background:
      repeating-linear-gradient(
        0deg,
        #0c171f 0 6px,
        #465d6c 6px 9px,
        #172731 9px 15px
      ) !important;
  }

  /* Z kolonu ve vakum kafası tek mekanizma gibi görünür. */
  #projeler .gantry-column {
    top: 8px !important;
    height: 82px !important;
    transition: height .38s cubic-bezier(.22,.75,.2,1) !important;
  }

  #projeler .vacuum-head {
    top: 90px !important;
    transition:
      top .38s cubic-bezier(.22,.75,.2,1),
      transform .28s cubic-bezier(.22,.75,.2,1) !important;
  }

  /* Metal piston aşağı inerken bir miktar daha uzar. */
  #projeler .vacuum-stem {
    top: 25px !important;
    height: 18px !important;
    transform-origin: top center;
    transition:
      height .38s cubic-bezier(.22,.75,.2,1),
      transform .28s cubic-bezier(.22,.75,.2,1) !important;
  }

  #projeler .gantry-scene.is-down .vacuum-stem,
  #projeler .gantry-scene.is-vacuum .vacuum-stem {
    height: 30px !important;
    transform: translateY(1px);
  }

  #projeler .gantry-scene.is-down .vacuum-cup,
  #projeler .gantry-scene.is-vacuum .vacuum-cup {
    transform: translateY(11px) scaleY(.94);
    transition: transform .38s cubic-bezier(.22,.75,.2,1), background .2s ease, border-color .2s ease !important;
  }

  #projeler .gantry-scene.is-lifting .vacuum-stem,
  #projeler .gantry-scene.is-release .vacuum-stem {
    height: 21px !important;
  }
}

@media (max-height: 820px) and (min-width: 901px) {
  #projeler .gantry-scene {
    top: -38px !important;
    transform: translateX(-50%) scale(.88) !important;
  }
  #projeler .section-header { padding-top: 58px !important; }
  #projeler .projects-showcase { padding-top: 106px !important; }
  #projeler .projects-grid { transform: translateY(40px) !important; }
}

/* =========================================================
   V39 — Gantry gerçekten tavanda + bağlı/smooth vakum mekanizması
   ========================================================= */
@property --gz {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

@media (min-width: 901px) {
  /* Showcase içinden gerçekten tavana taşı: ray ışıkların hemen altında. */
  #projeler .gantry-scene {
    top: -138px !important;
    height: 232px !important;
    transform: translateX(-50%) scale(.92) !important;
    transform-origin: top center !important;
  }

  #projeler .gantry-rail { top: 10px !important; }
  #projeler .gantry-frame-post { top: 10px !important; height: 118px !important; }
  #projeler .gantry-carriage { top: -14px !important; }
  #projeler .gantry-label { top: 70px !important; }

  /* Başlığı raydan ayır ama gereksiz aşağı itme. */
  #projeler .section-header { padding-top: 84px !important; }
  #projeler .projects-showcase { padding-top: 146px !important; }
  #projeler .projects-grid { transform: translateY(34px) !important; }

  /* Z ekseni tek parça iner; çocuk elemanlar artık kopmaz. */
  #projeler .gantry-z-axis {
    transform: translateX(-50%) translateY(var(--gz)) !important;
    transition: transform .68s cubic-bezier(.22,.74,.2,1) !important;
  }

  /* Körük taşıyıcı ile Z ekseni arasını her karede doldurur. */
  #projeler .gantry-z-axis::before {
    top: calc(-1 * var(--gz) - 2px) !important;
    height: calc(var(--gz) + 24px) !important;
    min-height: 24px !important;
    opacity: .88 !important;
    transition:
      top .68s cubic-bezier(.22,.74,.2,1),
      height .68s cubic-bezier(.22,.74,.2,1) !important;
  }

  /* Vakum kafası Z eksenine sabit: kendi başına ışınlanmaz. */
  #projeler .vacuum-head {
    top: 90px !important;
    transform: none !important;
    transition: none !important;
  }

  /* Metal piston hafif uzar; kap da pistonun ucunda kalır. */
  #projeler .vacuum-stem {
    top: 25px !important;
    height: 18px !important;
    transform: none !important;
    transition: height .34s cubic-bezier(.22,.75,.2,1) !important;
  }

  #projeler .vacuum-cup {
    top: 41px !important;
    transform: none !important;
    transition:
      top .34s cubic-bezier(.22,.75,.2,1),
      background .2s ease,
      border-color .2s ease,
      scale .18s ease !important;
  }

  #projeler .gantry-scene.is-down .vacuum-stem,
  #projeler .gantry-scene.is-vacuum .vacuum-stem {
    height: 24px !important;
    transform: none !important;
  }

  #projeler .gantry-scene.is-down .vacuum-cup,
  #projeler .gantry-scene.is-vacuum .vacuum-cup {
    top: 47px !important;
    transform: none !important;
  }

  #projeler .gantry-scene.is-vacuum .vacuum-cup {
    scale: 1 .9;
  }

  #projeler .gantry-scene.is-lifting .vacuum-stem,
  #projeler .gantry-scene.is-release .vacuum-stem {
    height: 20px !important;
  }

  #projeler .gantry-scene.is-lifting .vacuum-cup,
  #projeler .gantry-scene.is-release .vacuum-cup {
    top: 43px !important;
  }
}

@media (max-height: 820px) and (min-width: 901px) {
  #projeler .gantry-scene {
    top: -126px !important;
    transform: translateX(-50%) scale(.84) !important;
  }
  #projeler .section-header { padding-top: 72px !important; }
  #projeler .projects-showcase { padding-top: 126px !important; }
  #projeler .projects-grid { transform: translateY(24px) !important; }
}

/* =========================================================
   V40 — Gantry layout reset + responsive/mobile synchronization
   ========================================================= */

/* Desktop: tek, temiz dikey hiyerarşi. */
@media (min-width: 901px) {
  #projeler { position: relative; overflow: hidden; }
  #projeler > .container { position: relative; height: 100%; }

  /* Makine tavana yakın; başlık ve kartlarla çakışmaz. */
  #projeler .gantry-scene {
    position: absolute !important;
    left: 50% !important;
    top: 70px !important;
    width: min(1180px, 92vw) !important;
    height: 230px !important;
    transform: translateX(-50%) scale(.9) !important;
    transform-origin: top center !important;
    z-index: 3 !important;
    pointer-events: none;
  }
  #projeler .gantry-rail { top: 0 !important; }
  #projeler .gantry-frame-post { top: 0 !important; height: 118px !important; }
  #projeler .gantry-carriage { top: -16px !important; }
  #projeler .gantry-label { top: 61px !important; right: 28px !important; }

  /* Başlık makinenin altındaki kendi bandında. */
  #projeler .section-header {
    position: relative !important;
    z-index: 5 !important;
    padding-top: 238px !important;
    margin-bottom: 18px !important;
  }
  #projeler .projects-showcase {
    position: relative !important;
    padding-top: 0 !important;
  }
  #projeler .projects-grid {
    transform: none !important;
    margin-top: 0 !important;
    align-items: stretch !important;
  }

  /* Z mekanizması tek parça ve kesintisiz. */
  #projeler .gantry-z-axis {
    top: 76px !important;
    transform: translateX(-50%) translateY(var(--gz)) !important;
    transition: transform .72s cubic-bezier(.22,.72,.18,1) !important;
  }
  #projeler .gantry-z-axis::before {
    top: calc(-1 * var(--gz) - 1px) !important;
    height: calc(var(--gz) + 26px) !important;
    min-height: 26px !important;
    transition: top .72s cubic-bezier(.22,.72,.18,1), height .72s cubic-bezier(.22,.72,.18,1) !important;
  }
  #projeler .gantry-column {
    top: 8px !important;
    height: 78px !important;
  }
  #projeler .vacuum-head {
    top: 86px !important;
    transform: none !important;
  }
  #projeler .vacuum-stem {
    top: 24px !important;
    height: 20px !important;
  }
  #projeler .vacuum-cup {
    top: 42px !important;
    transform: none !important;
  }
  #projeler .gantry-scene.is-down .vacuum-stem,
  #projeler .gantry-scene.is-vacuum .vacuum-stem { height: 27px !important; }
  #projeler .gantry-scene.is-down .vacuum-cup,
  #projeler .gantry-scene.is-vacuum .vacuum-cup { top: 49px !important; }

  /* Kısa masaüstü ekranlarda kompakt ama çakışmasız. */
  @media (max-height: 820px) {
    #projeler .gantry-scene {
      top: 58px !important;
      transform: translateX(-50%) scale(.78) !important;
    }
    #projeler .section-header { padding-top: 194px !important; margin-bottom: 8px !important; }
    #projeler .projects-grid { transform: scale(.9) !important; transform-origin: top center !important; }
  }
}

/* Mobil: masaüstünü ezip küçültmek yerine kompakt aynı sistem. */
@media (max-width: 900px) {
  #projeler { overflow: clip; }
  #projeler .section-header { padding-top: 18px !important; margin-bottom: 14px !important; }
  #projeler .projects-showcase { padding-top: 0 !important; }

  #projeler .gantry-scene {
    display: block !important;
    position: relative !important;
    left: auto !important;
    top: auto !important;
    width: calc(100% - 20px) !important;
    height: 132px !important;
    margin: 0 auto 18px !important;
    transform: none !important;
    z-index: 4 !important;
    pointer-events: none;
  }
  #projeler .gantry-frame-post { display: none !important; }
  #projeler .gantry-label { display: none !important; }
  #projeler .gantry-servo {
    left: -2px !important;
    top: -8px !important;
    width: 52px !important;
    height: 49px !important;
    padding-top: 31px !important;
    font-size: 6px !important;
  }
  #projeler .gantry-servo b {
    width: 22px !important;
    height: 22px !important;
    left: 7px !important;
    top: 5px !important;
    border-width: 3px !important;
  }
  #projeler .servo-cap { display:none !important; }
  #projeler .gantry-rail {
    left: 10px !important;
    right: 10px !important;
    top: 8px !important;
    height: 31px !important;
  }
  #projeler .gantry-rail:before { left: 48px !important; top: 11px !important; height: 6px !important; }
  #projeler .gantry-cable-chain { display:none !important; }
  #projeler .rail-bolt { display:none !important; }
  #projeler .gantry-carriage {
    top: -10px !important;
    width: 92px !important;
    height: 64px !important;
    transform: translateX(calc(-50% + var(--gx))) translateY(var(--gz)) !important;
    transition: transform .66s cubic-bezier(.22,.72,.18,1) !important;
  }
  #projeler .carriage-topbar { height: 19px !important; font-size: 6px !important; }
  #projeler .gantry-status {
    left: 7px !important; right: 7px !important; top: 22px !important;
    height: 22px !important; font-size: 6px !important;
  }
  #projeler .carriage-warning { height: 7px !important; bottom: 5px !important; }
  #projeler .gantry-z-axis {
    top: 48px !important;
    width: 36px !important;
    height: 78px !important;
    transform: translateX(-50%) translateY(var(--gz)) !important;
    transition: transform .66s cubic-bezier(.22,.72,.18,1) !important;
  }
  #projeler .gantry-z-axis::before {
    top: calc(-1 * var(--gz)) !important;
    height: calc(var(--gz) + 18px) !important;
    min-height: 18px !important;
    transition: top .66s cubic-bezier(.22,.72,.18,1), height .66s cubic-bezier(.22,.72,.18,1) !important;
  }
  #projeler .z-servo { width: 48px !important; height: 24px !important; left: 50% !important; transform: translateX(-50%) !important; font-size: 7px !important; }
  #projeler .gantry-column { left: 13px !important; top: 20px !important; width: 10px !important; height: 40px !important; }
  #projeler .vacuum-head { top: 58px !important; transform: scale(.72) !important; transform-origin: top center !important; }

  #projeler .projects-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    width: min(100%, 430px) !important;
    margin: 0 auto !important;
    transform: none !important;
  }
  #projeler .project-card {
    min-height: 0 !important;
    height: auto !important;
  }
  #projeler .project-image { height: 190px !important; }

  /* Mobilde hover yerine dokunma odaklı sade durum. */
  #projeler .project-card.revealed:hover { transform:none !important; }
}

/* =========================================================
   V41 — Desktop-first gantry placement reset
   Mobil bu turda bilerek değiştirilmedi.
   ========================================================= */
@media (min-width: 901px) {
  /* Gantry artık projects-showcase'in aşağıdaki koordinat sistemine değil,
     doğrudan bölüm konteynerine göre konumlanır. */
  #projeler > .container {
    position: relative !important;
    height: 100% !important;
  }
  #projeler .projects-showcase {
    position: static !important;
    padding-top: 0 !important;
  }

  /* Rayı gerçek anlamda tavana, ışıkların hemen altına taşı. */
  #projeler .gantry-scene {
    position: absolute !important;
    left: 50% !important;
    top: 68px !important;
    width: min(1240px, 94vw) !important;
    height: 210px !important;
    transform: translateX(-50%) scale(.79) !important;
    transform-origin: top center !important;
    z-index: 7 !important;
  }

  /* Başlık rayın altında kendi temiz alanında. */
  #projeler .section-header {
    padding-top: 168px !important;
    margin-bottom: 24px !important;
    transform: none !important;
    z-index: 9 !important;
  }

  /* Kartlar makinenin altında, tek hizalı çalışma düzleminde. */
  #projeler .projects-grid {
    position: relative !important;
    z-index: 5 !important;
    transform: none !important;
    margin-top: 0 !important;
    align-items: stretch !important;
  }

  /* Kafa biraz daha kompakt ve raydan kopmadan görünür. */
  #projeler .gantry-carriage {
    top: -14px !important;
  }
  #projeler .gantry-z-axis {
    top: 72px !important;
  }
  #projeler .gantry-label {
    top: 66px !important;
  }
}

@media (min-width: 901px) and (max-height: 820px) {
  #projeler .gantry-scene {
    top: 54px !important;
    transform: translateX(-50%) scale(.69) !important;
  }
  #projeler .section-header {
    padding-top: 140px !important;
    margin-bottom: 12px !important;
  }
  #projeler .projects-grid {
    transform: scale(.88) !important;
    transform-origin: top center !important;
  }
}

/* =========================================================
   V42 — Fiziksel vakum teması
   Ped karta değmeden kart hareket etmez; temas, ezilme ve bırakma görünür.
   ========================================================= */
@media (min-width: 901px) {
  #projeler .gantry-carriage,
  #projeler .gantry-z-axis {
    transition: transform .78s cubic-bezier(.22,.72,.18,1), --gz .78s cubic-bezier(.22,.72,.18,1) !important;
  }

  #projeler .vacuum-cup {
    transform-origin: 50% 0 !important;
    transition: transform .17s ease-out, background .18s ease, border-color .18s ease, box-shadow .18s ease !important;
  }

  /* Yalnızca gerçek temas anında silikon ped sıkışır. */
  #projeler .gantry-scene.is-contact .vacuum-cup,
  #projeler .gantry-scene.is-vacuum .vacuum-cup {
    transform: scaleY(.76) !important;
    background: rgba(34,197,94,.16) !important;
    border-color: rgba(134,239,172,.9) !important;
    box-shadow: 0 3px 9px rgba(34,197,94,.22), inset 0 -2px 4px rgba(0,0,0,.35) !important;
  }

  /* İniş sırasında ışık yanmaz; sadece fiziksel temas/vakum sonrası yanar. */
  #projeler .gantry-scene.is-down:not(.is-vacuum) .vacuum-led {
    background:#33414b !important;
    box-shadow:inset 0 0 0 1px #62727e !important;
  }

  #projeler .project-card.gantry-held {
    will-change: transform;
    transform-origin: center top !important;
  }
}

/* =========================================================
   V43 — CONTACT CONTROL ROOM + SIMPLE MOBILE EXPERIENCE
   ========================================================= */
#iletisim.contact{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 28%,rgba(34,211,238,.09),transparent 28%),
    linear-gradient(135deg,#04080d 0%,#07121a 48%,#03070b 100%);
}
#iletisim .contact-room-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
#iletisim .control-window{position:absolute;inset:9% 4% 20%;border:1px solid rgba(110,180,210,.12);background:linear-gradient(180deg,rgba(11,30,43,.3),rgba(2,8,13,.7));box-shadow:inset 0 0 70px rgba(0,0,0,.7)}
#iletisim .control-window:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 23%,rgba(125,211,252,.08) 23% 23.2%,transparent 23.2% 49%,rgba(125,211,252,.08) 49% 49.2%,transparent 49.2% 76%,rgba(125,211,252,.08) 76% 76.2%,transparent 76.2%),linear-gradient(180deg,rgba(255,255,255,.025),transparent 40%)}
#iletisim .control-window span{position:absolute;bottom:12%;width:24%;height:23%;border:1px solid rgba(61,93,108,.4);background:linear-gradient(180deg,rgba(16,35,46,.58),rgba(5,12,17,.85));box-shadow:0 20px 50px rgba(0,0,0,.55)}
#iletisim .control-window span:nth-child(1){left:8%}#iletisim .control-window span:nth-child(2){left:38%;height:31%}#iletisim .control-window span:nth-child(3){right:8%;height:27%}
#iletisim .control-window span:before{content:"";position:absolute;left:12%;right:12%;top:16%;height:30%;background:repeating-linear-gradient(90deg,rgba(34,211,238,.17) 0 2px,transparent 2px 13px),linear-gradient(180deg,rgba(34,211,238,.08),transparent);border:1px solid rgba(34,211,238,.12)}
#iletisim .control-cable{position:absolute;top:-8%;width:3px;height:46%;background:linear-gradient(#263a48,#071016);box-shadow:18px 0 #111f29,36px 0 #263a48}
#iletisim .cable-1{left:12%;transform:rotate(11deg)}#iletisim .cable-2{right:11%;transform:rotate(-12deg)}
#iletisim .control-floor{position:absolute;left:-10%;right:-10%;bottom:-18%;height:47%;transform:perspective(620px) rotateX(61deg);transform-origin:bottom;background:repeating-linear-gradient(90deg,rgba(65,92,108,.12) 0 1px,transparent 1px 80px),repeating-linear-gradient(0deg,rgba(65,92,108,.12) 0 1px,transparent 1px 58px);mask-image:linear-gradient(to top,#000,transparent 88%)}
#iletisim .contact-control-room{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,.9fr) minmax(520px,1.1fr);gap:clamp(46px,6vw,110px);align-items:center;width:min(1380px,92vw);padding-top:88px;padding-bottom:122px}
#iletisim .contact-hero{align-self:center}
#iletisim .contact-hero h2{margin:17px 0 20px;font-size:clamp(38px,4.35vw,72px);line-height:.96;letter-spacing:-.05em;color:#f5fbff;text-transform:uppercase;max-width:590px}
#iletisim .contact-hero h2 em{font-style:normal;color:#70d6f4;text-shadow:0 0 26px rgba(56,189,248,.18)}
#iletisim .contact-hero p{max-width:620px;color:#9aabb6;font-size:clamp(16px,1.2vw,20px);line-height:1.75}
#iletisim .availability-strip{display:inline-flex;align-items:center;gap:12px;margin-top:28px;padding:11px 15px;border:1px solid rgba(34,197,94,.24);background:rgba(3,20,13,.58);border-radius:7px;font:600 11px/1 'JetBrains Mono',monospace;letter-spacing:.12em;color:#9ee8b4}
#iletisim .availability-strip i{width:8px;height:8px;border-radius:50%;background:#22c55e;box-shadow:0 0 12px rgba(34,197,94,.9);animation:contactPulse 1.7s ease-in-out infinite}
@keyframes contactPulse{50%{opacity:.42;box-shadow:0 0 3px rgba(34,197,94,.4)}}
#iletisim .contact-terminal{border:1px solid rgba(91,143,168,.26);border-radius:14px;background:linear-gradient(145deg,rgba(8,20,29,.94),rgba(3,9,14,.96));box-shadow:0 28px 90px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.035);overflow:hidden}
#iletisim .terminal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid rgba(85,132,153,.22);background:linear-gradient(180deg,rgba(21,45,58,.67),rgba(8,19,27,.68));font-family:'JetBrains Mono',monospace}
#iletisim .terminal-head div{display:flex;gap:13px;align-items:center}#iletisim .terminal-head span{font-size:10px;color:#698494;letter-spacing:.1em}#iletisim .terminal-head b{font-size:12px;color:#cbefff;letter-spacing:.08em}#iletisim .terminal-head small{font-size:11px;color:#5fbcd5}
#iletisim .system-status-panel{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(84,125,143,.16);border-bottom:1px solid rgba(85,132,153,.18)}
#iletisim .system-status-panel div{display:flex;justify-content:space-between;align-items:center;padding:12px 14px;background:#08131b;font:600 9px/1 'JetBrains Mono',monospace;letter-spacing:.08em;color:#627b89}
#iletisim .system-status-panel b{color:#86dca1;font-size:9px}#iletisim .system-status-panel i{display:inline-block;width:5px;height:5px;border-radius:50%;background:#22c55e;box-shadow:0 0 7px rgba(34,197,94,.8);margin-right:5px}
#iletisim .contact-lines{padding:12px}
#iletisim .contact-line{position:relative;display:grid;grid-template-columns:38px 1fr auto;align-items:center;gap:14px;min-height:78px;padding:10px 15px;color:inherit;text-decoration:none;border:1px solid transparent;border-bottom-color:rgba(91,135,153,.12);transition:background .22s ease,border-color .22s ease,transform .22s ease}
#iletisim .contact-line:last-child{border-bottom-color:transparent}
#iletisim a.contact-line:hover{transform:translateX(5px);background:linear-gradient(90deg,rgba(16,64,81,.38),rgba(4,17,24,.3));border-color:rgba(80,190,220,.28)}
#iletisim .line-index{display:grid;place-items:center;width:31px;height:31px;border:1px solid rgba(104,158,181,.25);border-radius:5px;color:#4f9db6;font:600 10px 'JetBrains Mono',monospace}
#iletisim .contact-line small{display:block;margin-bottom:6px;font:600 9px 'JetBrains Mono',monospace;letter-spacing:.16em;color:#5f7887}
#iletisim .contact-line strong{font-size:15px;color:#dcecf3;font-weight:600}
#iletisim .contact-line em{font:600 9px 'JetBrains Mono',monospace;letter-spacing:.09em;font-style:normal;color:#72d494;border:1px solid rgba(34,197,94,.18);padding:6px 8px;border-radius:4px;background:rgba(34,197,94,.04)}
#iletisim a.contact-line:hover em{color:#9eeec0;border-color:rgba(34,197,94,.4);box-shadow:0 0 14px rgba(34,197,94,.08)}
#iletisim .contact-location{opacity:.83}
#iletisim .event-log{margin:0 12px 12px;border:1px solid rgba(84,127,145,.18);background:rgba(1,7,11,.78);font-family:'JetBrains Mono',monospace}
#iletisim .event-log-title{display:flex;justify-content:space-between;padding:9px 11px;border-bottom:1px solid rgba(84,127,145,.15);font-size:8px;letter-spacing:.11em;color:#526a78}#iletisim .event-log-title b{color:#5cb9d4}
#iletisim .event-log ul{list-style:none;margin:0;padding:8px 11px 10px}#iletisim .event-log li{display:grid;grid-template-columns:42px 1fr;gap:8px;padding:4px 0;font-size:9px;color:#66808f}#iletisim .event-log time{color:#3fa2bf}#iletisim .event-log li:first-child span{color:#94b9c8}
#iletisim .contact-footer{position:absolute;left:0;right:0;bottom:0;z-index:3;background:linear-gradient(180deg,transparent,rgba(2,7,10,.92));padding:19px 0 17px}

/* Mobile: no conveyor, gantry, PLC scene or desktop-only cursor. Normal flow remains animated. */
@media (max-width:900px){
  html{scroll-behavior:smooth;overflow-y:auto!important}
  body{overflow:auto!important;cursor:auto!important;background:#05090d}
  html.has-tech-cursor,html.has-tech-cursor *{cursor:auto!important}
  .tech-cursor,.tech-click-pulse,.factory-transition-bg,.conveyor-machine,#projeler .gantry-scene{display:none!important}
  #fp-container{display:block!important;position:relative!important;height:auto!important;transform:none!important;overflow:visible!important}
  #fp-container>.fp-slide,.fp-slide{position:relative!important;inset:auto!important;display:flex!important;visibility:visible!important;opacity:1!important;transform:none!important;width:100%!important;height:auto!important;min-height:100svh!important;overflow:hidden!important;pointer-events:auto!important}
  #fp-container>.fp-slide>*{opacity:1}
  .navbar{position:fixed!important}
  .section,.hero{padding-top:92px!important;padding-bottom:74px!important}
  .hero-container{min-height:auto!important;display:block!important;padding:36px 22px 72px!important}
  .hero-content{width:100%!important;max-width:100%!important;transform:none!important;margin:0!important;padding:0!important}
  .hero-visual{margin-top:34px!important;transform:none!important;width:100%!important}
  #projeler{min-height:auto!important}
  #projeler .projects-showcase{padding-top:15px!important;overflow:visible!important}
  #projeler .projects-grid{display:grid!important;grid-template-columns:1fr!important;gap:18px!important;opacity:1!important;visibility:visible!important;overflow:visible!important}
  #projeler .project-card,#projeler .project-card.project-parked,#projeler .project-card.gantry-held{transform:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;position:relative!important;width:100%!important;height:auto!important;min-height:420px!important;filter:none!important}
  #projeler .workshop-tech-plate{display:none!important}
  .linebot-highway{opacity:.52!important;transform:none!important}
  .experience-list{width:100%!important}
  #iletisim.contact{min-height:auto!important;padding-bottom:0!important}
  #iletisim .contact-control-room{display:block!important;width:100%!important;padding:34px 20px 145px!important}
  #iletisim .contact-hero{margin-bottom:30px}
  #iletisim .contact-hero h2{font-size:clamp(36px,10vw,56px)!important;line-height:1!important;max-width:100%!important}
  #iletisim .contact-terminal{border-radius:11px}
  #iletisim .system-status-panel{grid-template-columns:1fr!important}
  #iletisim .contact-line{grid-template-columns:34px minmax(0,1fr)!important;min-height:75px!important}
  #iletisim .contact-line em{grid-column:2;justify-self:start;margin-top:-3px}
  #iletisim .contact-line strong{display:block;overflow-wrap:anywhere;font-size:13px}
  #iletisim .control-window{inset:4% -15% 10%;opacity:.62}
  #iletisim .contact-footer{position:absolute!important}
  [data-animate]{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease}
  [data-animate].visible{opacity:1;transform:none}
  .mobile-desktop-hint{position:fixed;left:50%;bottom:18px;z-index:9999;transform:translate(-50%,18px);width:max-content;max-width:88vw;padding:10px 13px;border:1px solid rgba(94,184,215,.22);border-radius:8px;background:rgba(4,13,19,.92);color:#a9c5d1;font:500 10px 'JetBrains Mono',monospace;letter-spacing:.04em;opacity:0;pointer-events:none;animation:mobileHint 3.6s ease forwards}
  @keyframes mobileHint{10%,72%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,12px)}}
}

/* =========================================================
   V45 — Responsive desktop scene + connected gantry bellows
   Görsel tasarım korunur; sabit piksel taşmaları temizlenir.
   ========================================================= */
html, body { max-width: 100%; overflow-x: clip; }

@media (min-width: 901px) {
  :root { --responsive-gutter: clamp(22px, 3vw, 54px); }

  /* Bütün ana içerikler ekran genişliğine göre ortalanır. */
  .container,
  .nav-container {
    width: min(100% - (var(--responsive-gutter) * 2), var(--container-max)) !important;
    max-width: var(--container-max) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
  }

  /* Hero'nun görünüşü korunur fakat -300px gibi sabit konumlar kaldırılır. */
  #hero .hero-container {
    position: relative !important;
    left: auto !important;
    width: min(92vw, 1440px) !important;
    max-width: 1440px !important;
    margin-inline: auto !important;
    padding-inline: clamp(18px, 2.4vw, 42px) !important;
    display: grid !important;
    grid-template-columns: minmax(390px, .92fr) minmax(470px, 1.08fr) !important;
    column-gap: clamp(34px, 4.2vw, 76px) !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateX(clamp(-72px, -3.8vw, -30px)) !important;
    box-sizing: border-box !important;
  }
  #hero .hero-content {
    width: 100% !important;
    max-width: 560px !important;
    justify-self: start !important;
    min-width: 0 !important;
  }
  #hero .hero-visual {
    width: 100% !important;
    min-width: 0 !important;
    justify-self: stretch !important;
    justify-content: flex-start !important;
  }
  #hero .command-deck {
    width: min(100%, 610px) !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Bölüm içerikleri küçük laptop ve farklı ölçeklendirmelerde taşmaz. */
  #hakkimda .container,
  #projeler .container,
  #deneyim .container {
    width: min(92vw, 1240px) !important;
  }
  #iletisim .contact-control-room {
    width: min(92vw, 1380px) !important;
    grid-template-columns: minmax(340px, .9fr) minmax(440px, 1.1fr) !important;
    gap: clamp(34px, 5vw, 88px) !important;
  }

  /* Proje ve gantry sahnesi daima aynı merkez eksenini kullanır. */
  #projeler .gantry-scene,
  #projeler .projects-grid,
  #projeler .section-header {
    left: auto;
    right: auto;
    margin-inline: auto !important;
  }
  #projeler .gantry-scene {
    width: min(90vw, 1180px) !important;
  }
  #projeler .projects-grid {
    width: min(90vw, 1120px) !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  /* Körük üst taşıyıcıya sabit kalır; sadece alt ucu yumuşakça uzar. */
  #projeler .gantry-z-axis {
    --gz: 0px;
    isolation: isolate;
  }
  #projeler .gantry-z-axis::before {
    top: calc(-1 * var(--gz) - 1px) !important;
    height: calc(26px + var(--gz)) !important;
    transform: translateX(-50%) !important;
    transform-origin: 50% 0 !important;
    will-change: height, top !important;
    transition:
      height .78s cubic-bezier(.22,.72,.18,1),
      top .78s cubic-bezier(.22,.72,.18,1),
      opacity .18s ease !important;
  }
}

/* 1366x768, 1440x900 ve %125 ölçeklendirme gibi yaygın masaüstleri. */
@media (min-width: 901px) and (max-width: 1280px) {
  #hero .hero-container {
    width: 95vw !important;
    grid-template-columns: minmax(350px, .9fr) minmax(420px, 1.1fr) !important;
    column-gap: clamp(24px, 3vw, 44px) !important;
    transform: translateX(-18px) scale(.94) !important;
    transform-origin: center center !important;
  }
  #hero .hero-title { font-size: clamp(48px, 5.8vw, 72px) !important; }
  #hero .command-deck { width: 100% !important; }
  #iletisim .contact-control-room {
    grid-template-columns: minmax(300px, .85fr) minmax(410px, 1.15fr) !important;
  }
}

@media (min-width: 901px) and (max-height: 780px) {
  #hero .hero-container { transform: translateX(-18px) scale(.88) !important; }
  #hakkimda .container,
  #deneyim .container,
  #iletisim .contact-control-room { transform: scale(.92); transform-origin: center center; }
}

/* ==========================================================
   V46 — viewport-safe hero + physically connected Z axis
   Tasarım korunur; yalnızca yerleşim ve gantry kinematiği düzeltilir.
   ========================================================== */
@media (min-width: 901px) {
  /* Hero artık sabit/negatif piksel konumuna bağlı değildir. */
  #hero .hero-container {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    width: min(1400px, calc(100vw - clamp(56px, 7vw, 128px))) !important;
    max-width: 1400px !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    grid-template-columns: minmax(390px, 520px) minmax(500px, 620px) !important;
    column-gap: clamp(44px, 6vw, 104px) !important;
    justify-content: start !important;
    align-items: center !important;
  }

  #hero .hero-content {
    width: 100% !important;
    max-width: 520px !important;
    justify-self: start !important;
    margin: 0 !important;
    transform: none !important;
  }

  #hero .hero-visual {
    width: 100% !important;
    min-width: 0 !important;
    justify-self: start !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    transform: none !important;
  }

  #hero .command-deck {
    width: min(100%, 600px) !important;
    max-width: 600px !important;
  }

  /* Kısa ekranlarda Hero'nun alt öğeleri viewport dışına taşmasın. */
  @media (max-height: 820px) {
    #hero .hero-container { transform: scale(.9) !important; transform-origin: center center !important; }
  }

  /* Z servo ve üst bağlantı carriage'a sabit kalır. */
  #projeler .gantry-z-axis {
    --gz: 0px;
    transform: translateX(-50%) !important;
    transition: none !important;
    overflow: visible !important;
  }

  /* Yalnızca teleskopik kolon uzar. */
  #projeler .gantry-column {
    height: calc(72px + var(--gz)) !important;
    transition: height .54s cubic-bezier(.16,.78,.18,1) !important;
    transform: none !important;
    transform-origin: top center !important;
  }

  /* Vakum kafası kolonun ucuyla birlikte hareket eder. */
  #projeler .vacuum-head {
    top: calc(83px + var(--gz)) !important;
    transition: top .54s cubic-bezier(.16,.78,.18,1) !important;
    transform: none !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  #hero .hero-container {
    width: calc(100vw - 56px) !important;
    grid-template-columns: minmax(350px, .9fr) minmax(430px, 1.1fr) !important;
    column-gap: 36px !important;
  }
  #hero .command-deck { width: 100% !important; }
}

/* ==========================================================
   V47 — true viewport responsive desktop layout
   Sabit masaüstü koordinatları yerine gerçek viewport ölçüleri.
   ========================================================== */
@media (min-width: 901px) {
  :root {
    --page-gutter: clamp(24px, 4vw, 72px);
    --page-max: 1440px;
    --viewport-fit: 1;
  }

  html, body, #fp-container, .fp-slide {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .fp-slide {
    padding-inline: 0 !important;
    overflow: hidden !important;
  }

  /* Bütün bölüm omurgaları aynı ekran merkezini kullanır. */
  .container,
  .nav-container,
  #hero .hero-container,
  #iletisim .contact-control-room {
    width: min(calc(100vw - (var(--page-gutter) * 2)), var(--page-max)) !important;
    max-width: var(--page-max) !important;
    margin-inline: auto !important;
    left: auto !important;
    right: auto !important;
    box-sizing: border-box !important;
  }

  .container,
  .nav-container {
    padding-inline: 0 !important;
  }

  /* HERO: iki kolon ekranın mevcut alanını paylaşır, dışarı taşmaz. */
  #hero {
    padding: clamp(86px, 11vh, 120px) 0 clamp(42px, 7vh, 80px) !important;
  }

  #hero .hero-container {
    min-height: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr) !important;
    gap: clamp(28px, 5vw, 88px) !important;
    align-items: center !important;
    justify-content: stretch !important;
    transform: none !important;
  }

  #hero .hero-content,
  #hero .hero-visual {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;
  }

  #hero .hero-content {
    justify-self: stretch !important;
    gap: clamp(14px, 2.2vh, 24px) !important;
  }

  #hero .hero-title {
    font-size: clamp(3rem, 5.25vmin, 4.5rem) !important;
    line-height: 1.02 !important;
  }

  #hero .hero-description {
    max-width: min(100%, 500px) !important;
    font-size: clamp(.92rem, 1.15vw, 1.05rem) !important;
  }

  #hero .hero-actions,
  #hero .hero-stats {
    max-width: 100% !important;
  }

  #hero .command-deck {
    width: 100% !important;
    max-width: 620px !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  /* Diğer bölümlerde de içerik viewport dışına kaçamaz. */
  #hakkimda .container,
  #projeler .container,
  #deneyim .container {
    width: min(calc(100vw - (var(--page-gutter) * 2)), 1240px) !important;
    max-width: 1240px !important;
    transform: none !important;
  }

  #projeler .projects-showcase {
    width: 100% !important;
    min-width: 0 !important;
  }

  #projeler .gantry-scene {
    width: min(100%, 1180px) !important;
    max-width: 1180px !important;
    margin-inline: auto !important;
    left: auto !important;
    right: auto !important;
  }

  #projeler .projects-grid {
    width: min(100%, 1120px) !important;
    max-width: 1120px !important;
    margin-inline: auto !important;
    left: auto !important;
    right: auto !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(14px, 2vw, 28px) !important;
  }

  #projeler .project-card {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* İletişim bölümü de iki kolonunu mevcut genişliğe göre hesaplar. */
  #iletisim .contact-control-room {
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr) !important;
    gap: clamp(30px, 5vw, 82px) !important;
    transform: none !important;
  }

  #iletisim .contact-hero,
  #iletisim .contact-terminal {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* 1366px ve benzeri ekranlarda tasarım aynı kalır, yalnızca yoğunluk azalır. */
  @media (max-width: 1366px) {
    :root { --page-gutter: clamp(22px, 3vw, 42px); }

    #hero .hero-container {
      grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important;
      gap: clamp(24px, 3.5vw, 48px) !important;
    }

    #hero .hero-title {
      font-size: clamp(2.8rem, 5.1vmin, 4rem) !important;
    }

    #iletisim .contact-control-room {
      grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr) !important;
    }
  }

  /* Dikey alan azsa tüm sahneyi taşımak yerine iç boşluklar ve yazılar küçülür. */
  @media (max-height: 820px) {
    #hero {
      padding-top: clamp(72px, 9vh, 90px) !important;
      padding-bottom: clamp(24px, 4vh, 42px) !important;
    }

    #hero .hero-container {
      gap: clamp(22px, 4vw, 56px) !important;
      transform: none !important;
    }

    #hero .hero-content {
      gap: clamp(10px, 1.55vh, 17px) !important;
    }

    #hero .hero-title {
      font-size: clamp(2.65rem, 5.8vh, 3.8rem) !important;
    }

    #hero .hero-stats {
      margin-top: 7px !important;
      padding-top: 18px !important;
    }

    #hero .command-deck {
      max-height: min(68vh, 590px) !important;
      overflow: hidden !important;
    }
  }
}

/* ==========================================================
   V49 — gantry viewport centering hotfix
   Absolute gantry scene must be centered with left:50%; margin:auto
   does not center absolutely positioned elements.
   ========================================================== */
@media (min-width: 901px) {
  #projeler .gantry-scene {
    left: 50% !important;
    right: auto !important;
    margin: 0 !important;
    width: min(calc(100vw - (var(--page-gutter) * 2)), 1180px) !important;
    max-width: 1180px !important;
    transform: translateX(-50%) !important;
    transform-origin: top center !important;
  }

  /* Ray and carriage remain inside the centered machine coordinate system. */
  #projeler .gantry-rail {
    left: 24px !important;
    right: 24px !important;
    width: auto !important;
  }

  #projeler .gantry-carriage {
    left: 50% !important;
  }
}

@media (min-width: 901px) and (max-height: 760px) {
  #projeler .gantry-scene {
    transform: translateX(-50%) scale(.88) !important;
  }
}