/* ==========================================================================
   YEREL FONTLAR (LOCAL FONTS - WOFF2)
   ========================================================================== */
@font-face {
    font-family: 'Inter';
    src: url('fonts/inter-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap; /* Font yüklenene kadar sistem fontunu gösterir, zıplamayı önler */
}

@font-face {
    font-family: 'Inter';
    src: url('fonts/inter-black.woff2') format('woff2');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

/* ==========================================================================
   CSS DEĞİŞKENLERİ (TEMA VE RENK YÖNETİMİ)
   ========================================================================== */
:root {
    --bg-color: #ffffff;
    --text-color: #000000;
    --text-muted: #999999;
    --grid-line-color: rgba(0, 0, 0, 0.05);
    --border-color: rgba(0, 0, 0, 0.05);
    --overlay-bg: rgba(0, 0, 0, 0.85);
    --hover-bg: rgba(0, 0, 0, 0.02);
    --btn-bg: #ffffff;
    --btn-border: rgba(0, 0, 0, 0.15);
    --cursor-color: rgba(0, 0, 0, 0.3);
}

/* Gece Modu Renkleri */
body.dark-mode {
    --bg-color: #0a0a0a;
    --text-color: #ffffff;
    --text-muted: #aaaaaa;
    --grid-line-color: rgba(255, 255, 255, 0.07);
    --border-color: rgba(255, 255, 255, 0.1);
    --hover-bg: rgba(255, 255, 255, 0.03);
    --btn-bg: #111111;
    --btn-border: rgba(255, 255, 255, 0.2);
    --cursor-color: rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   RESET VE TEMEL AYARLAR
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent; /* Mobil tıklama grisini kaldırır */
    cursor: none !important;
}

body, html {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: 'Inter', sans-serif;
    cursor: none; /* Özel imleç için */
    transition: background-color 0.4s ease, color 0.4s ease;
    touch-action: none; 
    overscroll-behavior: none;
}

#project-detail, #blog-detail, #overlay-menu {
    touch-action: auto;
    overscroll-behavior: contain;
}

/* ORTAK KAPSAYICI AYARLARI */
#about-section, #services-section, #contact-section, #academy-section, #blog-section, #corporate-section, #midoke-ai {
    position: absolute;
    width: 100vw;
    min-height: 100vh;
    padding: 100px 5%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 15vh;
    z-index: 10;
}

/* ==========================================================================
   EVRENSEL SAYFA BAŞLIKLARI
   ========================================================================== */

/* Her bölümün tepesindeki kapsayıcı */
.section-header {
    margin-bottom: 60px !important;
    width: 100%;
}

/* Üstteki küçük teknik etiket (Tag) */
.section-tag {
    font-family: monospace;
    font-size: 11px;
    letter-spacing: 3px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 10px;
    text-transform: uppercase;
}

/* Ana Başlık (Title) */
.section-title {
    font-size: 4vw; /* Hizmetlerimiz ile aynı boyut */
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 1.1;
    text-transform: uppercase;
}

/* ==========================================================================
   HARİTA, VIEWPORT VE ANASAYFA (VİDEO) BÖLÜMÜ
   ========================================================================== */
#viewport {
    width: 100vw;
    height: 100vh;
    position: relative;
    background-color: transparent;
}

#map-canvas {
    width: 8000px;
    height: 8000px;
    position: absolute;
    background-image: 
        linear-gradient(to right, var(--grid-line-color) 1px, transparent 1px),
        linear-gradient(to bottom, var(--grid-line-color) 1px, transparent 1px);
    background-size: 80px 80px;
    transform-origin: 0 0;
    will-change: transform; /* Sürükleme sırasında kasmaları engeller */
}

/* Giriş Logosu ve Hint */
#entry-point {
    position: absolute;
    top: 4000px;
    left: 4000px;
    transform: translate(-50%, -50%);
    text-align: center;
}

/* --- video.mp4 --- */
.entry-video {
    display: block;
    width: 45vw;              /* Mevcut m.svg ile aynı orantıda genişlik */
    max-width: 700px;         /* Büyük ekranlarda taşmaması için limit */
    height: auto;             /* Video oranını korur */
    margin: 0 auto 30px auto; /* Ortalar ve altındaki m.svg ile boşluk bırakır */
    
    /* ÖNEMLİ: Harita sürükleme (drag) işlevinin video üzerinde de 
       kesintisiz çalışabilmesi için mouse tıklamalarını arkaya geçirir */
    pointer-events: none; 
}

.main-logo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-logo img {
    width: 30vw; /* Önceki 12vw metin boyutuna yakın bir büyüklük için */
    max-width: 500px; /* Çok büyük ekranlarda aşırı devasa olmaması için limit */
    height: auto;
    display: block;
    transition: filter 0.4s ease; /* Gece moduna geçerken yumuşak geçiş */
}

/* Gece Modu: Eğer m.svg siyah bir logo ise, gece modunda beyaza dönmesini sağlar */
body.dark-mode .main-logo img {
    filter: invert(1);
}

.scroll-hint {
    font-family: monospace;
    font-size: 10px;
    margin-top: 20px;
    letter-spacing: 4px;
    color: var(--text-muted);
    text-transform: uppercase;
}

/* ==========================================================================
   PROJELER ALANI VE YAN MENÜ
   ========================================================================== */
#projects-zone {
    position: absolute; 
    top: 0px; 
    left: 6000px; 
    width: 100vw; 
    min-height: 100vh;
    display: flex;
    justify-content: center; 
    padding: 100px 5%;
    box-sizing: border-box;
    background-color: transparent; /* var(--bg-color) yerine transparent yapıldı */
}

.projects-wrapper {
    width: 100%;
    max-width: 1200px; 
    display: flex;
    flex-direction: column;
    gap: 0;
}

.nav-label {
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 900;
    color: var(--text-muted);
    text-transform: uppercase;
}

#projects-container {
    flex: 1;
    min-width: 0;
}

/* ==========================================================================
   YENİ YATAY KONTROL BARI (Filtre, Görünüm, Sıralama)
   ========================================================================== */
.projects-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    flex-wrap: wrap; /* Dar ekranlarda alt alta kaysın diye */
    gap: 20px;
}

.top-bar-left, .top-bar-right {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
}

.nav-group-horizontal {
    display: flex;
    align-items: center;
    gap: 15px;
}

.nav-group-horizontal .nav-label {
    font-size: 10px;
    letter-spacing: 2px;
    font-weight: 900;
    color: var(--text-muted);
    text-transform: uppercase;
    margin-right: 5px;
}

.nav-group-horizontal button {
    background: none;
    border: none;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-color);
    opacity: 0.3;
    transition: all 0.3s ease;
    padding: 0;
    text-transform: uppercase;
}

/* Sort butonları için monospace tipografiyi koruyoruz */
.sort-buttons button {
    font-family: monospace;
    font-size: 11px;
}

.nav-group-horizontal button:hover, 
.nav-group-horizontal button.active {
    opacity: 1;
    font-weight: 900;
    /* Yatay menü olduğu için translateX animasyonunu sildik, sadece kalınlaşıp netleşecek */
}

/* ==========================================================================
   PROJELER - GRID (MASONRY) GÖRÜNÜMÜ
   ========================================================================== */
.projects-list-container.masonry-grid {
    display: block;
    column-count: 3;
    column-gap: 25px;
}

.masonry-grid .project {
    break-inside: avoid;
    margin-bottom: 25px;
    position: relative;
    overflow: hidden;
    border: none;
}

.masonry-grid .project-content {
    position: relative;
    width: 100%;
}

.masonry-grid .project-content img {
    width: 100%;
    display: block;
    filter: grayscale(20%);
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.masonry-grid .project-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--overlay-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: all 0.4s ease;
}

.masonry-grid .project:hover .project-overlay { opacity: 1; }
.masonry-grid .project:hover img { transform: scale(1.05); }

.masonry-grid .project-title {
    color: #ffffff;
    /* Font ekran boyutuna göre 16px ile 24px arası esner */
    font-size: clamp(1rem, 1.5vw, 1.5rem); 
    font-weight: 900;
    text-align: center;
    padding: 15px; /* Dar alanlarda metne nefes aldırır */
    line-height: 1.2;
    word-break: break-word; /* Çok uzun kelimelerin dışarı taşmasını engeller */
    hyphens: auto; /* Yeni eklenecek: Gerekirse kelimeyi heceden böler (-) */
    -webkit-hyphens: auto;
}

.masonry-grid .project-media { display: none; } /* Grid modunda hover media gizli */
.masonry-grid .project-info {
    color: rgba(255, 255, 255, 0.7);
    font-family: monospace;
    font-size: clamp(9px, 1vw, 11px);
    margin-top: 10px;
    text-align: center; 
}

/* Filtreleme animasyonları sırasında GPU hızlandırmasını açar */
.projects-list-container .project {
    will-change: opacity, transform;
    transform-origin: center center;
}

/* ==========================================================================
   PROJELER - LİSTE GÖRÜNÜMÜ
   ========================================================================== */
.projects-list-container.list-view {
    display: flex;
    flex-direction: column;
}

.list-view .project {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
    transition: all 0.3s ease;
}

.list-view .project:hover {
    background-color: var(--hover-bg);
}

.list-view .project-content { width: 100%; }
.list-view .project-content > img { display: none; }

.list-view .project-overlay {
    display: flex;
    flex-direction: row;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}

.list-view .project-title {
    font-size: 3vw;
    font-weight: 400;
    color: var(--text-color);
    letter-spacing: -0.02em;
    text-transform: uppercase;
    line-height: 1;
    opacity: 0.3;
    white-space: nowrap;
    transition: all 0.4s ease;
    flex-shrink: 0;
}

.list-view .project:hover .project-title {
    opacity: 1;
}

.list-view .project-media {
    width: 0;
    height: 100px; /* Sabit yükseklik */
    opacity: 0;
    overflow: hidden;
    margin-left: 30px;
    transition: width 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s ease;
    display: flex;
    align-items: center;
}

.list-view .project:hover .project-media {
    width: 180px;
    opacity: 1;
}

.list-view .project-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.list-view .project-info {
    margin-left: auto;
    text-align: right;
    font-family: monospace;
    font-size: 11px;
    color: var(--text-muted);
    opacity: 0;
    transform: translateY(10px);
    transition: 0.4s;
    letter-spacing: 1px;
}

.list-view .project:hover .project-info {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   ARAYÜZ (UI) ELEMANLARI (Menü, İmleç, Kontroller)
   ========================================================================== */

/* Menü Tetikleyici (Hamburger) */
.menu-trigger {
    position: fixed;
    top: 50px;
    right: 50px;
    width: 30px;
    height: 20px;
    z-index: 1100;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.menu-trigger span {
    width: 100%;
    height: 1px;
    background: var(--text-color);
    transition: 0.4s;
    transform-origin: center; /* Dönüşlerin merkezden olmasını garantiler */
}

/* Çarpı (X) Animasyonu Güncellemesi */
.menu-trigger.open span:nth-child(1) { 
    transform: translateY(9.5px) rotate(45deg); /* Üst çizgi aşağı iner ve döner */
}
.menu-trigger.open span:nth-child(2) { 
    opacity: 0; /* Ortadaki çizgi kaybolur */
}
.menu-trigger.open span:nth-child(3) { 
    transform: translateY(-9.5px) rotate(-45deg); /* Alt çizgi yukarı çıkar ve döner */
}

/* Tam Ekran Menü Ana Yapı */
#overlay-menu {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: var(--bg-color);
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center; /* İçeriği ortala */
    transform: translateY(-100%);
    transition: transform 0.7s cubic-bezier(0.8, 0, 0.2, 1);
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

#overlay-menu.active { 
    transform: translateY(0); 
    visibility: visible;
    pointer-events: all; 
}

/* Menü İçerik Düzeni */
.menu-content {
    width: 90%;
    max-width: 1400px;
    display: flex;
    align-items: center;
    justify-content: space-between; /* İki tarafı ayır */
    gap: 100px;
}

/* SOL TARAF: Linkler */
.menu-left {
    flex: 1;
}

.main-nav { list-style: none; padding: 0; margin: 0; }
.main-nav li a {
    font-size: clamp(36px, 5vw, 70px); /* Alt sınırı 36px, üst sınırı ise 70px ile mühürledik */
    font-weight: 900;
    text-decoration: none;
    line-height: 1;
    display: block;
    margin-bottom: 10px;
    transition: 0.4s;
    -webkit-text-stroke: 1px var(--text-color);
    color: transparent;
    text-transform: uppercase;
}

.main-nav li a:hover {
    -webkit-text-stroke: 0px transparent;
    color: var(--text-color);
    padding-left: 20px; /* Hover'da hafif kayma efekti */
}

/* SAĞ TARAF: Zengin İçerik */
.menu-right {
    width: 350px;
    display: flex;
    flex-direction: column;
    gap: 50px;
    border-left: 1px solid var(--border-color);
    padding-left: 60px;
}

.menu-large-logo {
    width: 313px;
    height: auto;
    filter: invert(0);
}

.menu-contact-info {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

body.dark-mode .menu-large-logo {
    filter: invert(1) brightness(10) contrast(100); 
    /* Bu satır, beyaz modda logoya dokunmaz, sadece gece modunda parlatır */
}

.info-item span {
    display: block;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-bottom: 5px;
}

.info-item p {
    font-size: 15px;
    margin: 0;
    font-weight: 400;
}

.menu-social {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.menu-social a {
    font-size: 11px;
    letter-spacing: 1px;
    text-decoration: none;
    color: var(--text-color);
    font-weight: 700;
    transition: opacity 0.3s;
}

.menu-social a:hover {
    opacity: 0.5;
}

/* Teknik İmleçler */
#cursor-h, #cursor-v {
    position: fixed;
    background: var(--cursor-color);
    z-index: 9999;
    pointer-events: none;
}
#cursor-h { height: 1px; width: 100%; left: 0; }
#cursor-v { width: 1px; height: 100%; top: 0; left: 0; }

.coordinates {
    position: fixed;
    bottom: 40px;
    left: 40px;
    font-family: monospace;
    font-size: 10px;
    color: var(--text-muted);
    line-height: 1.6;
    z-index: 1001;
}

/* Zoom ve Tema Kontrolleri */
.zoom-controls {
    position: fixed;
    bottom: 85px;
    left: 40px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 1001;
}

.zoom-controls button {
    width: 32px;
    height: 32px;
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    color: var(--text-color);
    font-size: 18px;
    font-family: monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 2px;
}

.zoom-controls button:hover {
    background: var(--text-color);
    color: var(--bg-color);
    border-color: var(--text-color);
}

/* Masaüstü Yan Menü */
.bottom-desktop-menu {
    position: fixed;
    top: 50%; /* Ekranın dikey ortasına alır */
    right: 40px; /* Sağ kenardan 40px boşluk bırakır */
    transform: translateY(-50%); /* Dikeyde tam merkeze oturtur */
    display: flex; /* Mobilde gizli kalma mantığını bozmamak için aynen kalıyor */
    flex-direction: column; /* Linkleri alt alta dizer */
    align-items: flex-end; /* Butonları kendi içinde sağa yaslar */
    gap: 10px; /* Butonlar arası boşluk */
    z-index: 1001;
}

.bottom-desktop-menu a {
    height: 32px;
    padding: 0 20px;
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    color: var(--text-color);
    text-decoration: none;
    font-family: monospace;
    font-size: 11px;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 2px;
    white-space: nowrap;
}

.bottom-desktop-menu a:hover {
    background: var(--text-color);
    color: var(--bg-color);
    border-color: var(--text-color);
}

/* Sol Üst Köşe Logo */
.top-left-logo {
    position: fixed;
    top: 40px;  /* Üstten boşluk */
    left: 40px; /* Soldan boşluk */
    width: 81px; /* Logonun genişliği */
    z-index: 1001; /* Diğer elementlerin üstünde kalmasını sağlar */
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.top-left-logo:hover {
    opacity: 1;
}

.top-left-logo img, 
.top-left-logo svg {
    width: 100%;
    height: auto;
    display: block;
}

/* Gece Modu için Ekstra Ayar */
body.dark-mode .top-left-logo img {
    filter: invert(1);
}


/* ==========================================================================
   PROJE DETAY PANELİ
   ========================================================================== */
#project-detail {
    position: fixed;
    top: 0; right: 0; width: 100%; height: 100%;
    background: var(--bg-color);
    z-index: 2000;
    display: none;
    overflow-y: auto;
    padding: 100px 8%;
    transform: translateX(100%);
}

.detail-content {
    max-width: 1200px; /* Sitenin diğer container yapılarıyla uyumlu genişlik */
    margin: 0 auto;    /* Kapsayıcıyı ekranın tam ortasına hizalar */
}

.close-detail {
    position: sticky; 
    top: 40px; /* Aşağı kaydırırken ekranın üstünden yapışacağı mesafe */
    margin-top: -60px; /* Kapsayıcının 100px olan üst boşluğunu dengeleyip butonu 40px'e çeker */
    margin-left: calc(40px - 8%); /* Kapsayıcının %8 sol boşluğunu nötrleyip tam 40px'e hizalar */
    margin-bottom: 25px; /* Butonun altındaki projenin orijinal yerinde başlamasını sağlar */
    z-index: 2010; /* İçeriğin her zaman üstünde kalması için */
    display: inline-block;
    background: var(--btn-bg);
    border: 1px solid var(--text-color);
    color: var(--text-color);
    padding: 10px 20px;
    font-family: monospace;
    font-size: 11px;
    transition: 0.3s;
}

.close-detail:hover {
    background: var(--text-color);
    color: var(--bg-color);
}

.detail-content h1 {
    font-size: 6vw;
    margin-bottom: 40px;
}

.meta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
    font-family: monospace;
    font-size: 12px;
}

.meta-grid span { color: var(--text-muted); display: block; margin-bottom: 5px; }

#det-desc {
    font-size: 1.2rem;
    line-height: 1.6;
    max-width: 800px;
    margin-bottom: 60px;
}

/* Proje detay galerisindeki resimler */
.project-gallery-img {
    width: 100%;
    display: block;
    margin-bottom: 30px;
    object-fit: cover;
}

/* ==========================================================================
   HAKKIMIZDA SAYFASI (ABOUT SECTION)
   ========================================================================== */
#about-section {
    top: 0;
    left: 0; /* Anasayfanın hemen sağında */
}

/* İçeriğin çok yayılmaması için merkezi bir konteyner */
.about-container {
    width: 100%;
    max-width: 1200px; /* Diğer sayfalarla tutarlı içerik genişliği */
    display: flex;
    flex-direction: column;
    gap: 0;
}

.about-content {
    display: flex;
    gap: 60px;
    align-items: flex-start;
}

.about-text {
    flex: 2;
    font-size: 1.2rem;
    line-height: 1.8;
    color: var(--text-color);
}

.about-text p {
    margin-bottom: 25px;
}

.about-stats {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 40px;
    /* Çizgiyi soldan sağa aldık */
    border-right: 1px solid var(--border-color); 
    border-left: none; 
    padding-right: 40px; /* Boşluğu sağa verdik */
    padding-left: 0;
    /* İçerikleri sağa yasladık */
    align-items: flex-end; 
    text-align: right;
}

.stat-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end; /* Sayıları ve açıklamaları sağa hizalar */
}

.stat-num {
    font-size: 4rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 5px;
}

.stat-desc {
    font-family: monospace;
    font-size: 11px;
    letter-spacing: 1px;
    color: var(--text-muted);
}

.about-team {
    margin-top: 40px;
}

.team-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.team-header span {
    font-family: monospace;
    font-size: 12px;
    letter-spacing: 3px;
    color: var(--text-muted);
}

.team-header .line {
    flex: 1;
    height: 1px;
    background-color: var(--border-color);
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 40px;
}

.team-member h4 {
    font-size: 1.2rem;
    font-weight: 900;
    margin-bottom: 8px;
}

.team-member p {
    font-family: monospace;
    font-size: 11px;
    color: var(--text-muted);
    letter-spacing: 1px;
}

/* --- Hakkımızda Sayfası Alt Görsel --- */
.about-hero-image {
    width: 100%;
    margin-top: 60px;
    overflow: hidden;
    border: 1px solid var(--border-color);
    background: var(--bg-color);
}

.about-hero-image img {
    width: 100%;
    height: auto; /* Fotoğrafı kırpmaz, orijinal oranını korur */
    display: block; /* Alt kısımdaki boşluğu siler */
    filter: grayscale(100%);
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), filter 0.6s ease;
}

/* Mouse ile üzerine gelindiğinde efektler */
.about-hero-image:hover img {
    filter: grayscale(0%);
    transform: scale(1.03);
}

/* ==========================================================================
   HİZMETLERİMİZ SAYFASI
   ========================================================================== */
#services-section {
    top: 0;
    left: 2000px;
}

.services-container {
    width: 100%;
    max-width: 1200px; /* İçerik genişliği Hakkımızda ile aynı */
}

.services-header {
    margin-bottom: 60px;
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 sütunlu yapı */
    gap: 40px;
}

.service-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: transform 0.4s ease;
}

.service-media {
    width: 100%;
    aspect-ratio: 16 / 10;
    background: var(--hover-bg);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.service-media img, 
.service-media video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.service-card:hover .service-media img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

.service-info {
    position: relative;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}

.service-num {
    font-family: monospace;
    font-size: 10px;
    color: var(--text-muted);
    position: absolute;
    top: -12px;
    left: 0;
    background: var(--bg-color);
    padding-right: 10px;
}

.service-info h3 {
    font-size: 1.1rem;
    font-weight: 900;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.service-info p {
    font-size: 13px;
    line-height: 1.6;
    color: var(--text-muted);
    font-weight: 400;
}

/* ==========================================================================
   İLETİŞİM SAYFASI
   ========================================================================== */
#contact-section {
    top: 7000px; 
    left: 0; 
}

.contact-container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.contact-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 80px;
    border-top: 1px solid var(--border-color);
    padding-top: 40px;
}

.contact-info-block {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.info-group h4 {
    font-family: monospace;
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-bottom: 15px;
}

.info-group p, 
.info-group .hover-link {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-color);
    text-decoration: none;
    display: block;
    margin-bottom: 5px;
}

.hover-link {
    transition: opacity 0.3s ease;
}

.hover-link:hover {
    opacity: 0.5;
}

.social-links {
    display: flex;
    gap: 15px;
}

.social-links a {
    font-family: monospace;
    font-size: 12px;
    color: var(--text-color);
    text-decoration: none;
    border: 1px solid var(--border-color);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.social-links a:hover {
    background: var(--text-color);
    color: var(--bg-color);
    transform: translateY(-5px);
}

/* --- Yüzen Etiketli Form (Floating Label Form) --- */
.architect-form {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.form-group {
    position: relative;
}

.form-group input, 
.form-group textarea {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 2px solid var(--border-color);
    padding: 10px 0;
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    color: var(--text-color);
    outline: none;
    transition: border-color 0.3s;
    resize: none;
}

.form-group label {
    position: absolute;
    top: 10px;
    left: 0;
    font-family: monospace;
    font-size: 12px;
    letter-spacing: 2px;
    color: var(--text-muted);
    pointer-events: none;
    transition: 0.3s ease all;
}

/* Focus veya metin varken çizgiyi ve etiketi canlandır */
.form-group input:focus, 
.form-group textarea:focus {
    border-bottom-color: var(--text-color);
}

.form-group input:focus ~ label,
.form-group input:not(:placeholder-shown) ~ label,
.form-group textarea:focus ~ label,
.form-group textarea:not(:placeholder-shown) ~ label {
    top: -20px;
    font-size: 10px;
    color: var(--text-color);
}

/* --- Brutalist Buton --- */
.brutalist-btn {
    align-self: flex-start;
    background: transparent;
    color: var(--text-color);
    border: 1px solid var(--text-color);
    padding: 20px 40px;
    font-family: monospace;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 2px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.brutalist-btn:hover {
    background: var(--text-color);
    color: var(--bg-color);
    padding-right: 30px;
    padding-left: 50px;
}

/* ==========================================================================
   AKADEMİ BÖLÜMÜ
   ========================================================================== */
#academy-section {
    top: 0; 
    left: 4000px; 
}

.academy-container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.academy-header {
    display: block; /* Standart akışa geri döndürür */
}

/* Videonun 16:9 formatını her ekranda korumasını sağlayan yapı */
.academy-video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    background-color: #000;
    border: 1px solid var(--border-color);
    overflow: hidden;
}

.academy-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: grayscale(20%); /* Mimari konsepte uyması için hafif bir desatürasyon (isteğe bağlı) */
    transition: filter 0.4s ease;
}

.academy-video-wrapper:hover iframe {
    filter: grayscale(0%);
}

.academy-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-color);
    padding-top: 30px;
    flex-wrap: wrap;
    gap: 20px;
}

.video-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.video-badge {
    font-family: monospace;
    font-size: 10px;
    font-weight: 900;
    background-color: var(--text-color);
    color: var(--bg-color);
    padding: 4px 8px;
    width: fit-content;
}

.video-info h3 {
    font-size: 20px;
    font-weight: 900;
}

/* Genel brutalist buton tarzı */
.brutalist-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: transparent;
    color: var(--text-color);
    border: 1px solid var(--border-color);
    padding: 15px 30px;
    font-family: monospace;
    font-size: 12px;
    font-weight: 900;
    cursor: none; /* Özel cursor sistemi olduğu için none yaptım */
    text-decoration: none;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.brutalist-btn:hover {
    background: var(--text-color);
    color: var(--bg-color);
    border-color: var(--text-color);
}


/* ==========================================================================
   BLOG BÖLÜMÜ (KANVAS ÜZERİ)
   ========================================================================== */
#blog-section {
    top: 7000px; 
    left: 2000px; 
}

.blog-container {
    width: 100%;
    max-width: 1200px;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Sadece 3 sütun */
    gap: 40px;
}

.blog-card {
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

.blog-card-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--hover-bg);
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
}

.blog-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%);
    transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1), filter 0.6s ease;
}

.blog-card:hover .blog-card-img img {
    filter: grayscale(0%);
    transform: scale(1.05);
}

.blog-time {
    font-family: monospace;
    font-size: 11px;
    color: var(--text-muted);
    display: block;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.blog-card-info h3 {
    font-size: 1.1rem;
    font-weight: 900;
    margin-bottom: 20px;
    line-height: 1.4;
    transition: opacity 0.3s ease;
}

.read-more {
    font-family: monospace;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
    color: var(--text-color);
    border-bottom: 1px solid var(--text-color);
    padding-bottom: 3px;
    display: inline-block;
}

.blog-card:hover h3 { opacity: 0.6; }

/* ==========================================================================
   BLOG DETAY VE ARŞİV PANELİ
   ========================================================================== */
#blog-detail {
    position: fixed;
    top: 0; right: 0; width: 100%; height: 100%;
    background: var(--bg-color);
    z-index: 2000;
    display: none;
    overflow-y: auto;
    padding: 100px 8%;
    transform: translateX(100%);
}

.blog-detail-wrapper {
    display: flex;
    gap: 80px;
    max-width: 1200px;
    margin: 0 auto;
}

/* Sol Okuma Alanı */
.blog-read-area {
    flex: 1;
}

.blog-detail-meta {
    display: flex;
    gap: 30px;
    font-family: monospace;
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 25px;
    letter-spacing: 1px;
}

#blog-det-title {
    font-size: 3.5vw;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 40px;
    text-transform: uppercase;
}

.blog-det-image {
    width: 100%;
    height: 40vh;
    overflow: hidden;
    margin-bottom: 50px;
    border: 1px solid var(--border-color);
}

.blog-det-image img { width: 100%; height: 100%; object-fit: cover; }

.blog-reading-layout {
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-color);
}

/* Sağ Arşiv Alanı */
.blog-archive-sidebar {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: 10px;
    height: fit-content;
}

.archive-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 15px;
}

.archive-label {
    font-family: monospace;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--text-muted);
}

.archive-sort { display: flex; gap: 15px; }

.archive-sort button {
    background: none;
    border: none;
    font-family: monospace;
    font-size: 11px;
    color: var(--text-color);
    opacity: 0.4;
    transition: 0.3s;
}

.archive-sort button.active, .archive-sort button:hover {
    opacity: 1;
    text-decoration: underline;
}

.archive-list {
    display: flex;
    flex-direction: column;
}

.archive-item {
    display: flex;
    flex-direction: column;
    padding: 15px 0;
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    transition: all 0.3s ease;
}

.archive-item:hover {
    background-color: var(--hover-bg);
    padding-left: 10px;
}

.arc-title {
    font-size: 14px;
    font-weight: 900;
    color: var(--text-color);
    margin-bottom: 5px;
    line-height: 1.4;
}

.arc-date {
    font-family: monospace;
    font-size: 10px;
    color: var(--text-muted);
}

/* ==========================================================================
   KURUMSAL & KARİYER BÖLÜMÜ (CORPORATE)
   ========================================================================== */
#corporate-section {
    top: 7000px; 
    left: 6000px; 
}

.corporate-container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.corporate-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
    border-top: 1px solid var(--border-color);
    padding-top: 40px;
}

.corp-block {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.corp-block h3 {
    font-family: monospace;
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.corp-block p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--text-color);
}

.corp-block strong {
    font-weight: 900;
}

.corp-link {
    font-size: 1.1rem;
    font-weight: 900;
    font-family: monospace;
    text-decoration: none;
    color: var(--text-color);
    margin-top: 10px;
    display: inline-block;
    border-bottom: 2px solid var(--text-color);
    width: fit-content;
    padding-bottom: 2px;
    transition: opacity 0.3s ease;
}

.corp-link:hover {
    opacity: 0.5;
}

/* ==========================================================================
   MIDOKE AI BÖLÜMÜ (TERMINAL ARAYÜZÜ)
   ========================================================================== */
    #midoke-ai {
        top: 7000px;
        left: 4000px;
    }

    .ai-container {
        width: 100%;
        max-width: 1200px;
        display: flex;
        flex-direction: column;
    }

    .ai-terminal {
        border: 1px solid var(--border-color);
        background: var(--bg-color);
        display: flex;
        flex-direction: column;
        height: 50vh;
        min-height: 400px;
    }

    .ai-chat-window {
        flex: 1;
        padding: 30px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 20px;
        border-bottom: 1px solid var(--border-color);
        scroll-behavior: smooth;
    }

    /* Scrollbar şekillendirme (Terminal stili) */
    .ai-chat-window::-webkit-scrollbar { width: 5px; }
    .ai-chat-window::-webkit-scrollbar-track { background: var(--hover-bg); }
    .ai-chat-window::-webkit-scrollbar-thumb { background: var(--text-muted); }

    .ai-message {
        font-size: 1.1rem;
        line-height: 1.6;
        display: flex;
        flex-direction: column;
        gap: 5px;
    }

    .ai-message.system p {
        font-family: monospace;
        font-size: 11px;
        color: var(--text-muted);
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    .ai-timestamp {
        font-family: monospace;
        font-size: 10px;
        color: var(--text-muted);
    }

    .ai-message.user {
        align-items: flex-end;
        text-align: right;
    }

    .ai-message.user p {
        color: var(--text-color);
        font-weight: 900;
    }

    .ai-message.ai {
        align-items: flex-start;
    }

    .ai-message.ai p {
        color: var(--text-color);
    }

    /* Input Alanı */
    .ai-input-area {
        display: flex;
        align-items: center;
        padding: 20px;
        background: var(--hover-bg);
    }

    .ai-input-wrapper {
        flex: 1;
        display: flex;
        align-items: center;
        gap: 15px;
    }

    .ai-prompt-symbol {
        font-family: monospace;
        font-size: 1.2rem;
        color: var(--text-muted);
        font-weight: 900;
    }

    #ai-input {
        width: 100%;
        background: transparent;
        border: none;
        font-family: monospace; /* Terminal hissiyatı için */
        font-size: 13px;
        color: var(--text-color);
        outline: none;
        letter-spacing: 1px;
        text-transform: uppercase;
    }

    #ai-input::placeholder {
        color: var(--text-muted);
    }

    .ai-btn {
        padding: 15px 30px;
        margin-left: 20px;
    }





/* ==========================================================================
   COPYRIGHT & FOOTER BİLGİSİ
   ========================================================================== */
.copyright-footer {
    position: fixed;
    bottom: 40px; /* Sol alt köşedeki .coordinates class'ı ile aynı hizada tutar */
    right: 40px;  /* Sağ kenardan zarif bir boşluk */
    font-family: monospace;
    font-size: 10px;
    color: var(--text-muted);
    text-align: right;
    z-index: 1001; /* Zoom butonları ve koordinatlarla aynı katmanda */
    letter-spacing: 1px;
    line-height: 1.6;
    text-transform: uppercase;
}

.copyright-footer p {
    margin: 0;
}

/* Useyma Link Tasarımı */
.copyright-footer a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 900;
    cursor: none; /* Sitedeki özel imleç yapısını bozmaması için */
    transition: opacity 0.3s ease;
}

.copyright-footer a:hover {
    opacity: 0.5;
}


/* ==========================================================================
   INTRO (YÜKLEME) EKRANI
   ========================================================================== */
#intro-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--bg-color); /* Tema rengine saygı duyar */
    z-index: 99999; /* Her şeyin üstünde */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 1.2s cubic-bezier(0.19, 1, 0.22, 1), opacity 1.2s ease;
    cursor: wait;
}

.intro-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    color: var(--text-color);
    text-align: center;
}

.intro-logo {
    font-size: 5vw;
    font-weight: 900;
    letter-spacing: -2px;
    opacity: 0;
    transform: translateY(20px);
    animation: introFadeUp 0.8s ease forwards 0.2s;
}

.intro-loader {
    font-family: monospace;
    font-size: 3vw;
    font-weight: 400;
    opacity: 0;
    animation: introFadeUp 0.8s ease forwards 0.4s;
}

.intro-text {
    display: flex;
    flex-direction: column;
    gap: 5px;
    font-family: monospace;
    font-size: 10px;
    color: var(--text-muted);
    letter-spacing: 2px;
    opacity: 0;
    animation: introFadeUp 0.8s ease forwards 0.6s;
}

/* Intro logomuzun varsayılan (masaüstü) boyutu */
.intro-logo img {
    width: 15vw; /* Ekran genişliğine göre dinamik büyür/küçülür */
    max-width: 250px; /* Çok büyük ekranlarda devasa olmasını engeller */
    min-width: 150px; /* Çok küçülmesini engeller */
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Koyu tema (Dark Mode) için logo rengini tersine çevirme */
body.dark-mode .intro-logo img {
    filter: invert(1); 
}

/* Animasyon Tanımı */
@keyframes introFadeUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* --- MOBİL VE TABLET DÜZENLEMELERİ (1024px ve altı) --- */
@media (max-width: 1024px) {
    .intro-logo img { 
        width: 35vw; 
    }
    .intro-logo { 
        font-size: 10vw; 
    }
    .intro-loader { 
        font-size: 8vw; 
    }
}


/* ==========================================================================
   MOBİL VE TABLET UYUMLULUK (TÜM SİTE)
   ========================================================================== */

/* --- KÜÇÜK MASAÜSTÜ / LAPTOP EKRANLARI (1200px ve altı) --- */
@media (max-width: 1200px) {
    .projects-list-container.masonry-grid {
        column-count: 2; /* Kutuların fazla küçülmesini engeller */
    }
}

/* --- TABLET VE KÜÇÜK EKRANLAR (1024px ve altı) --- */
@media (max-width: 1024px) {
    /* Genel ve Tipografi */
    .section-title { font-size: 6vw; }
    .main-logo img { width: 40vw; }
    
    /* Menü */
    .menu-content { flex-direction: column; align-items: flex-start; gap: 40px; padding: 80px 20px; overflow-y: auto; height: 100%; }
    .menu-right { width: 100%; border-left: none; padding-left: 0; padding-top: 40px; border-top: 1px solid var(--border-color); }
    .main-nav li a { font-size: 8vw; }
    
    /* Projeler Bölümü */
    .projects-list-container.masonry-grid { column-count: 2; }
    #projects-zone { padding: 60px 20px; }
    .projects-top-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
    .top-bar-left, .top-bar-right {
        gap: 15px;
        flex-direction: column;
        align-items: flex-start;
    }
    .nav-group-horizontal {
        flex-wrap: wrap;
        gap: 10px;
    }

    /* Detay Panelleri (Proje & Blog) */
    #project-detail, #blog-detail { padding: 80px 20px; }
    .close-detail { position: fixed; top: 20px; right: 20px; margin: 0; z-index: 2020; background: var(--bg-color); }
    .menu-trigger { z-index: 1090; }

    .project-gallery-img {
        margin-bottom: 20px;
    }
    
    /* Hakkımızda */
    .about-content { flex-direction: column; }
    .about-stats { border-right: none; border-top: 1px solid var(--border-color); padding-right: 0; padding-top: 40px; flex-direction: row; justify-content: space-between; align-items: flex-start; text-align: left; }
    .stat-box { align-items: flex-start; }
    .stat-num { font-size: 2.5rem; }
    .about-hero-image { margin-top: 40px; }
    
    /* Hizmetler, İletişim ve Blog Grid */
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .contact-content { grid-template-columns: 1fr; gap: 60px; }
    .blog-grid { grid-template-columns: repeat(2, 1fr); }
    .blog-detail-wrapper { flex-direction: column; }
    .blog-archive-sidebar { width: 100%; position: relative; margin-top: 40px; }
    #blog-det-title { font-size: 6vw; }

    /* Kurumsal Kariyer */
    .corporate-content {
        grid-template-columns: 1fr; /* Mobilde alt alta dizer */
        gap: 50px;
    }

    /* Diğer tüm bölümlerin devasa masaüstü boşluklarını mobilde sıfırlıyoruz */
    #about-section, 
    #services-section, 
    #contact-section, 
    #academy-section, 
    #blog-section,
    #corporate-section,
    #midoke-ai {
    padding: 60px 20px;
    padding-top: 80px; /* 15vh değerini ezip içeriği yukarı çekiyoruz */
    align-items: flex-start;
    }

    /* Zoom butonlarını mobilde sağ alta, copyright metninin üstüne al */
    .zoom-controls {
        left: auto;      /* Soldaki sabitliği kaldırır */
        right: 40px;     /* Sağ kenara, copyright ile aynı hizaya yaslar */
        bottom: 80px;    /* Telif hakkı metninin üstünde durması için yükseklik */
        flex-direction: row; /* Butonları yan yana (yatay) dizmeyi sağlar */
    }

    /* Mobilde özel fare imlecini ve koordinat panelini gizle */
    #cursor-h, 
    #cursor-v, 
    .coordinates {
        display: none !important;
    }

    .bottom-desktop-menu {
        display: none !important;
    }

    /* Mobilde overlay'i resmin üzerine değil altına alıyoruz */
    .masonry-grid .project-overlay {
        opacity: 1;
        position: relative; /* Resmin altına düşmesini sağlar */
        background: transparent; /* Siyah arka planı kaldırır */
        padding: 15px 0 0 0;
    }
    
    /* Yazı renklerini temanın genel metin rengine eşitliyoruz */
    .masonry-grid .project-title {
        color: var(--text-color);
        font-size: 5vw;
        padding: 0;
        margin-bottom: 5px;
    }
    
    .masonry-grid .project-info {
        color: var(--text-muted);
    }
    
    /* Mobilde hover olmadığı için resimlerin gri filtresini baştan kaldırıyoruz */
    .masonry-grid .project-content img {
        filter: grayscale(0%);
    }

    /* Logo sol alt köşede */
    .top-left-logo {
        top: auto !important;
        bottom: 80px !important;    /* Sağ alttaki butonların tablet hizası */
        left: 40px !important;      /* Sol taraftaki simetrik boşluk */
        height: 32px !important;    /* Butonların 32px'lik yüksekliği ile eşitler */
        width: auto !important;
        z-index: 9999 !important;
    }
    
    .top-left-logo img, 
    .top-left-logo svg {
        height: 100% !important;    /* Logonun yüksekliğini konteynere (32px) sabitler */
        width: auto !important;     /* En-boy oranının bozulmasını önler */
    }

    /* Hamburger Menü Açıkken Sol Alttaki Logonun Gizlenmesi */
    #overlay-menu.active ~ .top-left-logo,
    body:has(#overlay-menu.active) .top-left-logo {
        opacity: 0 !important;
        pointer-events: none !important;
        visibility: hidden !important;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    /* Mobil Uyum */

    #midoke-ai {
        padding: 60px 20px;
        padding-top: 80px;
    }
    .ai-terminal {
        height: 50vh;
    }
    .ai-input-area {
        flex-direction: column;
        gap: 20px;
        align-items: stretch;
    }
    .ai-btn {
        margin-left: 0;
        justify-content: center;
    
    }
}

/* --- TELEFON VE DAR EKRANLAR (600px ve altı) --- */
@media (max-width: 600px) {
    /* Genel ve Tipografi */
    .section-title { font-size: 10vw; }
    .main-logo img { width: 60vw; }
    
    /* Projeler Bölümü */
    .projects-list-container.masonry-grid { column-count: 1; }
    .meta-grid { grid-template-columns: 1fr; }
    .list-view .project-title { font-size: 5vw; white-space: normal; word-break: break-word; }
    .list-view .project-media { display: none !important; }
    
    /* Hakkımızda */
    .about-stats { flex-direction: column; gap: 30px; }
    
    /* Hizmetler, Blog ve Footer */
    .services-grid { grid-template-columns: 1fr; }
    .blog-grid { grid-template-columns: 1fr; }
    #blog-det-title { font-size: 8vw; }
    .copyright-footer { bottom: 20px; right: 20px; font-size: 9px; }

    /* Telefondaki daralan ekran için sağ boşluğu ve yüksekliği ayarla */
    .zoom-controls {
        right: 20px;     /* 600px altındaki copyright sağ boşluğu ile eşitler */
        bottom: 60px;    /* Telefondaki dar alana uygun yükseklik */
    }

    /* Logo sol alt köşede - Mobilde tamamen gizlendi */
    .top-left-logo {
        display: none !important;
    }

     /* Video.mp4 - Mobilde tamamen kaldırıldı */
     .entry-video {
        display: none !important;
    }

    /* Scroll Hint Mobil Düzeltmesi */
    .scroll-hint {
        letter-spacing: 1px; /* Harf arasını daraltarak yerden tasarruf sağladık */
        width: 80vw; /* Ekran genişliğinin %80'ini aşmasını engelledik */
        margin-left: auto;
        margin-right: auto;
        white-space: normal; /* Gerekirse alt satıra geçmesine izin verdik */
        line-height: 1.5; /* Alt satıra geçerse satırlar birbirine yapışmasın */
    }
}

/* ==========================================================================
   DİL SEÇİCİ (LANGUAGE TOGGLE)
   ========================================================================== */
.lang-toggle {
    width: 32px;
    height: 32px;
    background: var(--btn-bg);
    border: 1px solid var(--btn-border);
    color: var(--text-color);
    font-size: 11px;
    font-weight: 900;
    font-family: monospace;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    border-radius: 2px;
    text-decoration: none;
}

.lang-toggle:hover {
    background: var(--text-color);
    color: var(--bg-color);
    border-color: var(--text-color);
}