:root {
        --ink: #0b0e10;
        --muted: #5e666d;
        --line: #e2e8f0;
        --paper: #f8fafc;
        --white: #ffffff;
        --blue: #0c76a8;
        --leaf: #74a944;
        --carbon: #05080b;
        --shadow-sm: 0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.05);
        --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.05);
        --shadow-lg: 0 20px 25px -5px rgba(0,0,0,0.05), 0 10px 10px -5px rgba(0,0,0,0.04);
        --shadow-xl: 0 25px 50px -12px rgba(0,0,0,0.08);
      }

      * {
        box-sizing: border-box;
      }

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

      body {
        margin: 0;
        color: var(--ink);
        background: var(--white);
        font-family: 'Outfit', sans-serif;
        line-height: 1.5;
        overflow-x: hidden;
      }

      img,
      svg {
        display: block;
      }

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

      button,
      a.button {
        font: inherit;
      }

      /* Scroll Reveal Efektleri (Yönlü Animasyonlar) */
      .reveal {
        opacity: 0;
        transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
        will-change: transform, opacity;
      }

      /* Varsayılan aşağıdan yukarı süzülme */
      .reveal.from-up {
        transform: translateY(40px);
      }

      /* Soldan sağa süzülme */
      .reveal.from-left {
        transform: translateX(-50px);
      }

      /* Sağdan sola süzülme */
      .reveal.from-right {
        transform: translateX(50px);
      }

      /* Aktifleştiğinde sıfırlanma */
      .reveal.active {
        opacity: 1;
        transform: translate(0, 0) !important;
      }

      .shell {
        width: 100%;
        max-width: 1360px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 80px;
        padding-right: 80px;
        box-sizing: border-box;
      }

      /* ----------------------------------------------------
         1. ENTRY GATE SCREEN (GİRİŞ KAPISI)
      ---------------------------------------------------- */
      #gate-screen {
        position: fixed;
        inset: 0;
        z-index: 10000;
        background: radial-gradient(circle at center, #ffffff 0%, #f1f5f9 100%);
        color: var(--ink);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        overflow-y: auto;
        padding: 40px 20px;
        transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.6s;
      }

      #gate-screen.hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }

      .gate-container {
        max-width: 1100px;
        width: 100%;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 50px;
      }

      .gate-logo {
        display: flex;
        flex-direction: column;
        align-items: center;
      }

      .gate-logo h1 {
        font-family: 'Oswald', sans-serif;
        font-size: 64px;
        font-weight: 700;
        letter-spacing: 6px;
        margin: 0;
        color: var(--ink);
        text-shadow: 0 4px 20px rgba(15, 23, 42, 0.05);
      }

      .gate-logo .divider {
        width: 120px;
        height: 2px;
        background: linear-gradient(90deg, transparent, #ff0000, transparent);
        margin: 18px 0;
      }

      .gate-logo p {
        font-size: 13px;
        letter-spacing: 5px;
        color: #5e666d;
        text-transform: uppercase;
        margin: 0;
        font-weight: 600;
      }

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

      .gate-card {
        background: rgba(255, 255, 255, 0.7);
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-radius: 16px;
        padding: 45px 30px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        min-height: 400px;
        transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
        position: relative;
        overflow: hidden;
        backdrop-filter: blur(12px);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px -1px rgba(0, 0, 0, 0.02);
      }

      .gate-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, rgba(255, 0, 0, 0.06) 0%, transparent 100%);
        opacity: 0;
        transition: opacity 0.4s ease;
      }

      .gate-card:hover {
        transform: translateY(-10px);
        border-color: rgba(255, 0, 0, 0.25);
        box-shadow: 0 20px 40px rgba(15, 23, 42, 0.06), 0 0 25px rgba(255, 0, 0, 0.08);
        background: rgba(255, 255, 255, 0.95);
      }

      .gate-card:hover::before {
        opacity: 1;
      }

      .gate-card-icon {
        width: 76px;
        height: 76px;
        border-radius: 50%;
        background: rgba(15, 23, 42, 0.03);
        display: grid;
        place-items: center;
        margin-bottom: 25px;
        transition: all 0.4s ease;
        border: 1px solid rgba(15, 23, 42, 0.06);
        color: var(--muted);
      }

      .gate-card:hover .gate-card-icon {
        background: #ff0000;
        color: #fff;
        border-color: #ff0000;
        transform: scale(1.08);
        box-shadow: 0 0 25px rgba(255, 0, 0, 0.35);
      }

      .gate-card h2 {
        font-family: 'Oswald', sans-serif;
        font-size: 22px;
        font-weight: 600;
        letter-spacing: 1.5px;
        margin: 0 0 15px 0;
        text-transform: uppercase;
        color: var(--ink);
      }

      .gate-card p {
        font-size: 14px;
        line-height: 1.6;
        color: #475569;
        margin: 0 0 30px 0;
        flex-grow: 1;
      }

      .gate-btn {
        background: transparent;
        color: var(--ink);
        border: 1px solid rgba(15, 23, 42, 0.15);
        padding: 12px 30px;
        border-radius: 30px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        transition: all 0.3s ease;
        position: relative;
        z-index: 2;
        cursor: pointer;
      }

      .gate-card:hover .gate-btn {
        background: var(--ink);
        color: #fff;
        border-color: var(--ink);
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
      }

      /* ----------------------------------------------------
         2. FLOATING PRESENTATION BAR (SUNUM PANELI)
      ---------------------------------------------------- */
      #presentation-bar {
        position: fixed;
        bottom: 25px;
        left: 50%;
        transform: translateX(-50%);
        z-index: 9999;
        background: rgba(11, 14, 16, 0.88);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 50px;
        padding: 8px 16px;
        display: flex;
        align-items: center;
        gap: 8px;
        backdrop-filter: blur(20px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.35);
        transition: all 0.3s ease;
      }

      #presentation-bar.hidden {
        opacity: 0;
        visibility: hidden;
        transform: translate(-50%, 50px);
      }

      .p-bar-btn {
        background: transparent;
        border: none;
        color: #aeb8bf;
        padding: 8px 16px;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        border-radius: 30px;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        gap: 6px;
      }

      .p-bar-btn:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.05);
      }

      .p-bar-btn.active {
        color: #fff;
        background: #0c76a8;
        box-shadow: 0 4px 10px rgba(12, 118, 168, 0.25);
      }

      .p-bar-btn.back {
        border-right: 1px solid rgba(255, 255, 255, 0.15);
        border-radius: 0;
        padding-right: 18px;
        margin-right: 6px;
      }

      .p-bar-btn.back:hover {
        background: transparent;
        color: #fff;
      }

      /* ----------------------------------------------------
         3. VIEW SECTIONS WRAPPER
      ---------------------------------------------------- */
      .view-content {
        transition: opacity 0.4s ease;
      }

      .view-content.hidden {
        display: none !important;
      }

      /* ----------------------------------------------------
         4. SITE PREVIEW (WEB SİTESİ)
      ---------------------------------------------------- */
      .site-header {
        position: fixed;
        z-index: 30;
        inset: 0 0 auto;
        height: 80px;
        background: rgba(255, 255, 255, 0.82);
        border-bottom: 1px solid rgba(185, 194, 201, 0.25);
        backdrop-filter: blur(20px);
      }

      .header-inner {
        height: 100%;
        display: grid;
        grid-template-columns: 180px 1fr 140px;
        align-items: center;
        gap: 24px;
      }

      .brand {
        line-height: 1;
        display: inline-grid;
        justify-items: start;
      }

      .brand-logo {
        width: 150px;
        height: auto;
      }

      .brand-since {
        margin-top: -3px;
        margin-left: 48px;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: 3px;
        color: #4c545a;
      }

      .nav {
        display: flex;
        justify-content: center;
        gap: 48px;
        font-size: 13px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1.5px;
      }

      .nav a {
        position: relative;
        padding: 8px 0;
        transition: color 0.3s ease;
      }

      .nav a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 2px;
        width: 100%;
        height: 2px;
        background: var(--blue);
        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
      }

      .nav a:hover {
        color: var(--blue);
      }

      .nav a:hover::after {
        transform: scaleX(1);
        transform-origin: left;
      }

      .header-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 18px;
      }

      .language {
        border: 0;
        background: transparent;
        color: var(--ink);
        font-size: 11px;
        font-weight: 800;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 4px;
        letter-spacing: 1px;
      }

      .language::after {
        content: "▾";
        font-size: 9px;
        margin-top: -1px;
      }

      .icon-button {
        width: 44px;
        height: 44px;
        display: grid;
        place-items: center;
        border: 0;
        border-radius: 50%;
        color: var(--white);
        background: var(--ink);
        cursor: pointer;
        transition: transform 0.2s ease, background-color 0.2s ease;
      }

      .icon-button:hover {
        transform: scale(1.05);
        background: #1e293b;
      }

      .hamburger {
        width: 16px;
        display: grid;
        gap: 4px;
      }

      .hamburger span {
        height: 2px;
        background: currentColor;
      }

      .mobile-panel {
        position: fixed;
        z-index: 25;
        inset: 80px 0 auto;
        display: none;
        background: rgba(255, 255, 255, 0.98);
        border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-lg);
        backdrop-filter: blur(20px);
      }

      .mobile-panel.is-open {
        display: block;
      }

      .mobile-panel .shell {
        display: grid;
        gap: 4px;
        padding-top: 18px;
        padding-bottom: 22px;
      }

      .mobile-panel a {
        padding: 13px 0;
        font-size: 13px;
        font-weight: 800;
        text-transform: uppercase;
        border-bottom: 1px solid rgba(216, 221, 225, 0.7);
        letter-spacing: 1px;
      }

      /* ----------------------------------------------------
         HERO SECTION
      ---------------------------------------------------- */
      .hero {
        position: relative;
        min-height: 740px;
        padding: 160px 0 80px;
        background:
          linear-gradient(90deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 255, 255, 0.88) 45%, rgba(255, 255, 255, 0.25) 100%),
          linear-gradient(180deg, #f8fafb 0%, #fff 100%);
        display: flex;
        align-items: center;
      }

      .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(230, 235, 238, 0.25));
        opacity: 0.55;
        pointer-events: none;
      }

      .hero-grid-lines {
        position: absolute;
        inset: 0;
        margin-left: auto;
        margin-right: auto;
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        pointer-events: none;
        z-index: 1;
        opacity: 0.4;
      }

      .hero-grid-lines span {
        border-right: 1px solid rgba(210, 218, 224, 0.55);
        height: 100%;
      }

      .hero-grid-lines span:first-child {
        border-left: 1px solid rgba(210, 218, 224, 0.55);
      }

      .hero-grid {
        position: relative;
        display: grid;
        grid-template-columns: 46% 54%;
        align-items: center;
        width: 100%;
        z-index: 3;
      }

      .hero-grid .reveal.from-left {
        grid-column: 1;
      }

      .scroll-cue {
        position: absolute;
        left: -32px;
        top: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
        font-size: 9px;
        font-weight: 900;
        letter-spacing: 2px;
        writing-mode: vertical-rl;
        transform: translateY(-50%) rotate(180deg);
        color: var(--ink);
      }

      .scroll-cue::after {
        content: "";
        width: 1px;
        height: 60px;
        background: var(--ink);
      }

      .eyebrow {
        margin: 0 0 18px;
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--muted);
      }

      h1 {
        margin-top: 0;
        margin-bottom: 24px;
        font-family: 'Oswald', sans-serif;
        font-size: 92px;
        line-height: 0.9;
        letter-spacing: -1.5px;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--ink);
      }

      .hero-kicker {
        margin-bottom: 32px;
        font-size: 16px;
        line-height: 1.5;
        font-weight: 800;
        text-transform: uppercase;
        color: var(--ink);
        letter-spacing: 0.5px;
      }

      .link-underline {
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        color: var(--ink);
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding-bottom: 6px;
        border-bottom: 2px solid var(--ink);
        transition: border-color 0.3s, transform 0.3s;
      }

      .link-underline:hover {
        border-color: var(--blue);
        transform: translateX(4px);
      }

      .hero-visual {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 50%;
        z-index: 2;
        mask-image: linear-gradient(to right, transparent 0%, black 20%);
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%);
        overflow: hidden;
      }

      .hero-machine {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: right center;
      }

      /* ----------------------------------------------------
         OUR TECHNOLOGIES
      ---------------------------------------------------- */
      .section {
        padding: 90px 0;
      }

      .section-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: 32px;
        margin-bottom: 45px;
      }

      h2 {
        margin: 0;
        font-family: 'Oswald', sans-serif;
        font-size: 42px;
        line-height: 1.1;
        text-transform: uppercase;
        font-weight: 700;
        color: var(--ink);
        letter-spacing: 0.5px;
      }

      .section-head h2 {
        font-size: 44px;
      }

      .tech-grid {
        display: grid;
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 22px;
      }

      .tech-card {
        background: #f7f8f8;
        border: 1px solid #e1e6e9;
        display: flex;
        flex-direction: column;
        transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.3s, box-shadow 0.3s;
        border-radius: 0;
        overflow: hidden;
      }

      .tech-card:hover {
        transform: translateY(-6px);
        border-color: rgba(12, 118, 168, 0.25);
        box-shadow: var(--shadow-lg);
      }

      .tech-card-img-wrapper {
        width: 100%;
        height: 180px;
        overflow: hidden;
        background: #eaeff1;
      }

      .tech-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.5s ease;
      }

      .tech-card:hover img {
        transform: scale(1.04);
      }

      .tech-card figcaption {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 20px 18px;
        font-size: 11px;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: var(--ink);
        background: #fff;
        border-top: 1px solid #e1e6e9;
      }

      /* ----------------------------------------------------
         SUSTAINABILITY (PLANET)
      ---------------------------------------------------- */
      .planet {
        position: relative;
        min-height: 480px;
        display: flex;
        align-items: center;
        background: #eef4f6;
        padding: 80px 0;
      }

      .planet::after {
        content: "";
        position: absolute;
        inset: 0 0 0 35%;
        background:
          linear-gradient(90deg, #eef4f6 10%, rgba(238, 244, 246, 0.8) 35%, rgba(238, 244, 246, 0.05)),
          url("assets/planet-denim.jpg") center / cover no-repeat;
        pointer-events: none;
      }

      .planet-content {
        position: relative;
        z-index: 2;
        max-width: 440px;
      }

      .planet-content h2 {
        margin-bottom: 20px;
      }

      .rule {
        width: 44px;
        height: 2px;
        margin: -8px 0 20px;
        background: var(--ink);
      }

      .planet p {
        color: #2b3945;
        font-size: 15px;
        line-height: 1.6;
        margin-bottom: 30px;
      }

      /* ----------------------------------------------------
         METRICS
      ---------------------------------------------------- */
      .metrics {
        border-bottom: 1px solid var(--line);
        background: #fff;
      }

      .metrics-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 0;
      }

      .metric {
        display: grid;
        grid-template-columns: 46px 1fr;
        gap: 20px;
        align-items: center;
        min-height: 130px;
        padding: 24px 30px;
        border-left: 1px solid var(--line);
      }

      .metric:first-child {
        border-left: 0;
      }

      .metric svg {
        width: 38px;
        height: 38px;
        stroke: var(--ink);
        stroke-width: 1.5;
        fill: none;
      }

      .metric strong {
        display: block;
        margin-bottom: 6px;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-weight: 800;
      }

      .metric span {
        display: block;
        color: var(--muted);
        font-size: 12px;
        line-height: 1.4;
      }

      /* ----------------------------------------------------
         TRUSTED BY (GLOBAL LEADERS)
      ---------------------------------------------------- */
      .leaders {
        padding: 60px 0 70px;
        background: #fff;
        text-align: center;
      }

      .leaders h2 {
        font-size: 32px;
        margin-bottom: 35px;
      }

      .logo-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        gap: 30px;
        max-width: 1100px;
        margin: 0 auto;
      }

      .logo {
        color: #101417;
        font-size: 22px;
        font-weight: 900;
        letter-spacing: -0.5px;
        opacity: 0.85;
        transition: opacity 0.3s, transform 0.3s;
      }

      .logo:hover {
        opacity: 1;
        transform: scale(1.05);
      }

      .logo.serif {
        font-family: 'Playfair Display', Georgia, "Times New Roman", serif;
        font-weight: 600;
        font-style: italic;
      }

      .logo.small {
        font-size: 18px;
        letter-spacing: 1.5px;
      }

      .dots {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-top: 35px;
      }

      .dot {
        width: 8px;
        height: 8px;
        border: 1.5px solid #8b949b;
        border-radius: 50%;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .dot.is-active {
        border-color: var(--ink);
        background: var(--ink);
      }

      /* ----------------------------------------------------
         GLOBAL PRESENCE
      ---------------------------------------------------- */
      .presence {
        position: relative;
        color: #fff;
        background-color: var(--carbon);
        padding: 90px 0;
        overflow: hidden;
      }

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

      .map-container {
        position: relative;
        width: 100%;
        max-width: 740px;
        justify-self: end;
      }

      .map-image {
        width: 100%;
        height: auto;
        display: block;
        opacity: 0.85;
      }

      /* Pulse Noktaları */
      .map-hotspots {
        position: absolute;
        inset: 0;
        pointer-events: none;
      }

      .map-dot {
        position: absolute;
        width: 8px;
        height: 8px;
        background-color: #fff;
        border-radius: 50%;
        box-shadow: 0 0 10px #fff;
      }

      .map-dot::after {
        content: '';
        position: absolute;
        inset: -6px;
        border: 1px solid rgba(255,255,255,0.6);
        border-radius: 50%;
        animation: pulse 1.8s infinite;
      }

      /* Temsili koordinatlar */
      .dot-eu { top: 38%; left: 54%; }
      .dot-tr { top: 41%; left: 58%; }
      .dot-us1 { top: 39%; left: 24%; }
      .dot-us2 { top: 48%; left: 28%; }
      .dot-sa { top: 68%; left: 36%; }
      .dot-as { top: 46%; left: 74%; }
      .dot-af { top: 62%; left: 56%; }

      @keyframes pulse {
        0% { transform: scale(0.8); opacity: 1; }
        100% { transform: scale(2.8); opacity: 0; }
      }

      .presence-content {
        max-width: 360px;
        position: relative;
        z-index: 2;
      }

      .presence h2 {
        font-size: 32px;
        color: #fff;
      }

      .presence p {
        color: #c5cdd3;
        font-size: 14px;
        line-height: 1.6;
        margin-bottom: 30px;
      }

      .presence .rule {
        background: #fff;
      }

      .presence .button {
        color: #fff;
        border: 1.5px solid rgba(255, 255, 255, 0.5);
        padding: 12px 28px;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1px;
        transition: all 0.3s ease;
      }

      .presence .button:hover {
        color: var(--ink);
        background: #fff;
        border-color: #fff;
      }

      /* ----------------------------------------------------
         CTA SECTION
      ---------------------------------------------------- */
      .cta {
        position: relative;
        overflow: hidden;
        padding: 70px 0;
        background:
          linear-gradient(90deg, rgba(255, 255, 255, 0.99), rgba(255, 255, 255, 0.92) 65%, rgba(255, 255, 255, 0.4)),
          url("assets/cta-leaves.jpg") right center / auto 100% no-repeat,
          #f6f4ef;
      }

      .cta .shell {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 36px;
        align-items: center;
      }

      .cta h2 {
        font-size: 40px;
        margin-bottom: 10px;
      }

      .cta p {
        margin-bottom: 0;
        color: #2e3940;
        font-size: 15px;
      }

      .btn-dark {
        background: var(--ink);
        color: #fff;
        padding: 15px 32px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1.5px;
        text-transform: uppercase;
        transition: all 0.3s ease;
        border: 1px solid var(--ink);
        display: inline-flex;
        align-items: center;
        gap: 10px;
      }

      .btn-dark:hover {
        background: transparent;
        color: var(--ink);
        box-shadow: var(--shadow-md);
      }

      /* ----------------------------------------------------
         FOOTER
      ---------------------------------------------------- */
      .footer {
        padding: 45px 0 110px 0;
        color: #dce4e9;
        background: #060a0d;
        font-family: 'Outfit', sans-serif;
      }

      .footer-grid {
        display: grid;
        grid-template-columns: 180px 1fr auto;
        gap: 36px;
        align-items: center;
      }

      .footer .brand-since {
        color: #aeb8bf;
      }

      .footer-links {
        display: flex;
        flex-wrap: wrap;
        gap: 28px;
        font-size: 11px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 1.5px;
      }

      .footer-links a {
        transition: color 0.2s;
      }

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

      .footer-meta {
        margin-top: 18px;
        display: flex;
        gap: 28px;
        color: #7f8a91;
        font-size: 12px;
      }

      .socials {
        display: flex;
        gap: 20px;
      }

      .social-icon {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: rgba(255,255,255,0.05);
        display: grid;
        place-items: center;
        font-size: 13px;
        font-weight: 800;
        transition: all 0.3s;
        border: 1px solid rgba(255,255,255,0.08);
      }

      .social-icon:hover {
        background: #0c76a8;
        color: #fff;
        border-color: #0c76a8;
        transform: translateY(-2px);
      }

      /* ----------------------------------------------------
         5. SOCIAL MEDIA SHOWCASE VIEW (SOSYAL MEDYA)
      ---------------------------------------------------- */
      #social-media-view {
        background: #f8fafc;
        min-height: 100vh;
        padding-bottom: 120px;
      }

      .showcase-header {
        background: #fff;
        border-bottom: 1px solid #e2e8f0;
        padding: 30px 0 20px;
        position: sticky;
        top: 0;
        z-index: 100;
        box-shadow: 0 4px 10px rgba(0,0,0,0.02);
      }

      .showcase-header-inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 20px;
      }

      .showcase-title-area h2 {
        font-size: 24px;
        letter-spacing: 1.5px;
        margin: 5px 0 0 0;
        color: var(--ink);
      }

      .showcase-tabs {
        display: flex;
        gap: 8px;
      }

      .tab-btn {
        background: #f1f5f9;
        border: 1px solid #e2e8f0;
        color: #64748b;
        padding: 9px 18px;
        border-radius: 6px;
        font-weight: 700;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        cursor: pointer;
        transition: all 0.3s ease;
      }

      .tab-btn:hover {
        background: #e2e8f0;
        color: var(--ink);
      }

      .tab-btn.active {
        background: #0c76a8;
        border-color: #0c76a8;
        color: #fff;
        box-shadow: 0 4px 12px rgba(12, 118, 168, 0.2);
      }

      .instagram-feed-header {
        display: flex;
        align-items: center;
        gap: 30px;
        max-width: 935px;
        margin: 35px auto;
        padding: 0 20px 30px 20px;
        border-bottom: 1px solid #e2e8f0;
      }

      .insta-avatar {
        width: 86px;
        height: 86px;
        border-radius: 50%;
        border: 3px solid #fff;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        object-fit: cover;
      }

      .insta-info h3 {
        font-size: 20px;
        font-weight: 500;
        margin: 0 0 8px 0;
        color: var(--ink);
      }

      .insta-info p {
        font-size: 14px;
        color: #64748b;
        margin: 0 0 12px 0;
      }

      .insta-bio {
        font-size: 14px;
        line-height: 1.5;
        color: var(--ink);
      }

      .insta-link {
        color: #0c76a8;
        font-weight: 700;
      }

      .instagram-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 28px;
        max-width: 935px;
        margin: 0 auto;
        padding: 0 20px;
      }

      .insta-grid-item {
        position: relative;
        aspect-ratio: 4 / 5;
        overflow: hidden;
        border-radius: 8px;
        cursor: pointer;
        box-shadow: var(--shadow-sm);
        background: #f1f5f9;
        border: 1px solid #e2e8f0;
      }

      .insta-grid-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
      }

      .insta-grid-item:hover img {
        transform: scale(1.04);
      }

      .insta-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.4);
        display: grid;
        place-items: center;
        color: #fff;
        font-weight: 700;
        font-size: 15px;
        opacity: 0;
        transition: opacity 0.3s ease;
        backdrop-filter: blur(3px);
      }

      .insta-grid-item:hover .insta-overlay {
        opacity: 1;
      }

      .flow-layout-container {
        max-width: 1100px;
        margin: 35px auto 0;
        padding: 0 20px;
      }

      .flow-desc {
        font-size: 15px;
        color: #64748b;
        margin-bottom: 20px;
        background: #fff;
        padding: 15px 20px;
        border-radius: 8px;
        border-left: 4px solid #0c76a8;
        box-shadow: var(--shadow-sm);
      }

      .flow-img-wrapper {
        width: 100%;
        background: #fff;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
        padding: 20px;
        box-shadow: var(--shadow-md);
        overflow-x: auto;
      }

      .flow-img {
        width: 100%;
        min-width: 800px;
        height: auto;
        display: block;
        border-radius: 6px;
      }

      /* Lightbox */
      #lightbox {
        position: fixed;
        inset: 0;
        z-index: 11000;
        background: rgba(5, 8, 11, 0.96);
        display: flex;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(12px);
        transition: opacity 0.3s ease;
      }

      .lightbox-close {
        position: absolute;
        top: 25px;
        right: 25px;
        background: transparent;
        border: none;
        color: #fff;
        font-size: 42px;
        cursor: pointer;
        line-height: 1;
        opacity: 0.6;
        transition: opacity 0.2s;
      }

      .lightbox-close:hover {
        opacity: 1;
      }

      .lightbox-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255,255,255,0.06);
        border: 1px solid rgba(255,255,255,0.12);
        color: #fff;
        font-size: 20px;
        width: 54px;
        height: 54px;
        border-radius: 50%;
        cursor: pointer;
        display: grid;
        place-items: center;
        transition: all 0.3s;
      }

      .lightbox-nav:hover {
        background: #fff;
        color: #000;
      }

      .lightbox-nav.prev {
        left: 25px;
      }

      .lightbox-nav.next {
        right: 25px;
      }

      .lightbox-content {
        max-width: 80%;
        max-height: 75vh;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow: 0 25px 60px rgba(0,0,0,0.5);
        border-radius: 12px;
        overflow: hidden;
        border: 1px solid rgba(255,255,255,0.1);
      }

      .lightbox-content img {
        max-width: 100%;
        max-height: 75vh;
        object-fit: contain;
        display: block;
      }

      /* ----------------------------------------------------
         6. PROMO VIDEO PLAYER VIEW (VİDEO) & FALLBACK
      ---------------------------------------------------- */
      #video-view {
        background: radial-gradient(circle at center, #111823 0%, #05080b 100%);
        min-height: 100vh;
        padding: 80px 20px 120px 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fff;
      }

      .video-container-shell {
        max-width: 960px;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 35px;
      }

      .video-info-overlay {
        text-align: center;
        max-width: 680px;
        margin: 0 auto;
      }

      .video-info-overlay h2 {
        font-family: 'Oswald', sans-serif;
        font-size: 38px;
        letter-spacing: 2px;
        margin: 10px 0 15px 0;
        text-transform: uppercase;
        color: #fff;
      }

      .video-info-overlay .video-desc {
        font-size: 14px;
        color: #aeb8bf;
        line-height: 1.6;
      }

      .video-player-wrapper {
        position: relative;
        width: 100%;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 30px 60px rgba(0,0,0,0.7), 0 0 40px rgba(12, 118, 168, 0.15);
        border: 1px solid rgba(255,255,255,0.08);
        aspect-ratio: 16/9;
        background: #000;
      }

      .custom-video-player {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block;
      }

      .video-error-overlay {
        position: absolute;
        inset: 0;
        background: rgba(11, 14, 16, 0.96);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px;
        text-align: center;
        z-index: 5;
        font-family: 'Outfit', sans-serif;
        color: #fff;
        border-radius: 16px;
        backdrop-filter: blur(8px);
      }

      .video-error-overlay h3 {
        font-family: 'Oswald', sans-serif;
        font-size: 24px;
        margin: 0 0 12px 0;
        text-transform: uppercase;
        color: #ff4a4a;
        letter-spacing: 1px;
      }

      .video-error-overlay p {
        font-size: 14px;
        max-width: 580px;
        color: #aeb8bf;
        line-height: 1.6;
        margin: 0 0 24px 0;
      }

      .video-error-actions {
        display: flex;
        gap: 15px;
      }

      .video-error-btn {
        background: #0c76a8;
        color: #fff;
        border: none;
        padding: 12px 24px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        cursor: pointer;
        transition: background 0.3s;
        box-shadow: 0 4px 10px rgba(12, 118, 168, 0.25);
      }

      .video-error-btn:hover {
        background: #095980;
      }

      .video-error-btn.secondary {
        background: transparent;
        border: 1px solid rgba(255,255,255,0.2);
        box-shadow: none;
      }

      .video-error-btn.secondary:hover {
        background: rgba(255,255,255,0.05);
        border-color: #fff;
      }

      /* ----------------------------------------------------
         RESPONSIVE MEDIA QUERIES
      ---------------------------------------------------- */
      @media (max-width: 1050px) {
        .shell {
          max-width: 920px;
          padding-left: 48px;
          padding-right: 48px;
        }

        .header-inner {
          grid-template-columns: 162px 1fr 112px;
        }

        .nav {
          gap: 20px;
        }

        h1 {
          font-size: 58px;
        }

        .hero-machine {
          width: 110%;
        }

        .tech-grid {
          grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .metrics-grid {
          grid-template-columns: repeat(2, 1fr);
        }

        .metric:nth-child(2n+1) {
          border-left: 0;
        }

        .metric:nth-child(n+3) {
          border-top: 1px solid var(--line);
        }

        .logo-row {
          justify-content: center;
        }

        .gate-grid {
          grid-template-columns: 1fr;
          max-width: 460px;
        }
        
        .gate-card {
          min-height: 350px;
        }
      }

      @media (max-width: 760px) {
        .site-header {
          height: 72px;
        }

        .shell {
          max-width: 560px;
          padding-left: 28px;
          padding-right: 28px;
        }

        .header-inner {
          grid-template-columns: 1fr auto;
        }

        .nav,
        .language {
          display: none;
        }

        .brand-logo {
          width: 120px;
        }

        .brand-since {
          margin-left: 38px;
          font-size: 8px;
        }

        .mobile-panel {
          top: 72px;
        }

        .hero {
          min-height: auto;
          padding: 120px 0 60px;
        }

        .hero-grid {
          grid-template-columns: 1fr;
          gap: 30px;
        }

        .scroll-cue,
        .hero-grid-lines {
          display: none;
        }

        h1 {
          font-size: 46px;
        }

        .hero-kicker {
          font-size: 14px;
        }

        .hero-visual {
          position: relative;
          width: 100%;
          height: auto;
          margin-top: 30px;
          padding: 0 28px;
          mask-image: none;
          -webkit-mask-image: none;
          display: flex;
          justify-content: center;
        }

        .hero-machine {
          width: 100%;
          max-width: 440px;
          height: auto;
          object-fit: contain;
          margin: 0 auto;
        }

        .section {
          padding: 60px 0;
        }

        .section-head {
          flex-direction: column;
          align-items: flex-start;
          gap: 15px;
          margin-bottom: 30px;
        }

        h2 {
          font-size: 32px;
        }

        .section-head h2 {
          font-size: 32px;
        }

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

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

        .metric {
          border-left: 0;
          border-top: 1px solid var(--line);
          padding: 20px 0;
        }

        .metric:first-child {
          border-top: 0;
        }

        .planet {
          min-height: auto;
          padding: 60px 0;
        }

        .planet::after {
          display: none;
        }

        .planet-content {
          max-width: 100%;
        }

        .presence {
          padding: 60px 0;
        }

        .presence-grid {
          grid-template-columns: 1fr;
          gap: 35px;
        }

        .cta .shell {
          grid-template-columns: 1fr;
          gap: 24px;
          text-align: center;
        }

        .cta h2 {
          font-size: 30px;
        }

        .footer-grid {
          grid-template-columns: 1fr;
          text-align: center;
          gap: 30px;
        }

        .footer-links {
          justify-content: center;
        }

        .footer-meta {
          flex-direction: column;
          gap: 10px;
          align-items: center;
        }

        .socials {
          justify-content: center;
        }

        .instagram-grid {
          grid-template-columns: repeat(3, 1fr);
          gap: 8px;
          padding: 0 16px;
        }

        .instagram-feed-header {
          flex-direction: column;
          text-align: center;
          gap: 15px;
          margin: 20px auto;
        }

        .lightbox-nav {
          width: 44px;
          height: 44px;
          font-size: 16px;
        }

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

        .showcase-header-inner {
          flex-direction: column;
          align-items: center;
          text-align: center;
        }

        .showcase-tabs {
          width: 100%;
          overflow-x: auto;
          padding-bottom: 5px;
          justify-content: center;
        }

        .tab-btn {
          white-space: nowrap;
          padding: 8px 14px;
          font-size: 11px;
        }
      }

      /* Entrance Gate Screen Redesign Brands */
      .gate-brand-wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 30px;
        flex-wrap: nowrap;
      }

      .gate-brand-redmono {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 900;
        font-size: 36px;
        letter-spacing: -1.5px;
        color: var(--ink);
        text-transform: lowercase;
      }

      .redmono-mark {
        width: 32px;
        height: 32px;
        background: #ff0000;
        display: block;
        box-shadow: 0 0 15px rgba(255, 0, 0, 0.4);
      }

      .gate-brand-x {
        font-family: 'Outfit', sans-serif;
        font-size: 28px;
        font-weight: 300;
        color: rgba(11, 14, 16, 0.4);
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
      }

      .gate-brand-yilmak {
        display: inline-flex;
        align-items: center;
      }

      .gate-brand-yilmak .yilmak-logo-img {
        height: 48px;
        width: auto;
        object-fit: contain;
        filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.2));
      }

      /* Responsive adjustments for gate logo */
      @media (max-width: 768px) {
        .gate-brand-wrapper {
          gap: 12px;
        }
        .gate-brand-redmono {
          font-size: 24px;
          gap: 8px;
        }
        .redmono-mark {
          width: 20px;
          height: 20px;
        }
        .gate-brand-x {
          font-size: 18px;
        }
        .gate-brand-yilmak .yilmak-logo-img {
          height: 32px;
        }
        .gate-info-footer {
          flex-direction: column;
          gap: 8px;
          border-radius: 16px;
          padding: 15px;
          margin-top: 10px;
        }
        .gate-info-divider {
          display: none;
        }
        .gate-info-text {
          text-align: center;
        }
      }

      /* Entry gate info footer styling */
      .gate-info-footer {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 15px;
        margin-top: 15px;
        padding: 12px 24px;
        background: rgba(15, 23, 42, 0.03);
        border: 1px solid rgba(15, 23, 42, 0.06);
        border-radius: 30px;
        max-width: 720px;
        width: 100%;
        box-sizing: border-box;
      }

      .gate-info-redmono-logo {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-family: 'Space Grotesk', sans-serif;
        font-weight: 900;
        font-size: 14px;
        color: var(--ink);
        text-transform: lowercase;
      }

      .redmono-mark-mini {
        width: 10px;
        height: 10px;
        background: #ff0000;
        display: block;
        box-shadow: 0 0 5px rgba(255, 0, 0, 0.4);
      }

      .redmono-text-mini {
        letter-spacing: -0.5px;
      }

      .gate-info-divider {
        color: rgba(15, 23, 42, 0.15);
        font-size: 14px;
      }

      .gate-info-text {
        margin: 0;
        font-size: 12px;
        color: #5e666d;
        font-weight: 500;
        line-height: 1.4;
        text-align: left;
      }

      /* Global dismissible toast message styling */
      .toast {
        position: fixed;
        z-index: 999999;
        left: 50%;
        bottom: 100px;
        width: min(460px, calc(100% - 36px));
        padding: 16px 24px;
        color: #ffffff;
        background: rgba(11, 14, 16, 0.96);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
        transform: translate(-50%, 20px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
        font-size: 13px;
        font-weight: 500;
        line-height: 1.5;
        text-align: center;
        cursor: pointer;
        backdrop-filter: blur(10px);
      }

      .toast.is-visible {
        opacity: 1;
        transform: translate(-50%, 0);
        pointer-events: auto;
      }

      .toast:hover {
        border-color: rgba(255, 0, 0, 0.35);
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35), 0 0 15px rgba(255, 0, 0, 0.15);
      }

      /* Global Hidden Utility */
      .hidden {
        display: none !important;
      }