@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Playfair+Display:ital,wght@0,700;1,400&display=swap');

:root {
    /* Genel Arkaplan */
    --sayfa-bg: #f8f9fa;

    /* Metin Renkleri */
    --ana-metin: #0f172a;
    --yardimci-metin: #64748b;
    --kart-metin: #0f172a;
    --baslik-metin: #0f172a;

    /* Cam Efekti (Glassmorphism) */
    --cam-bg: rgba(255, 255, 255, 0.85);
    --cam-border: rgba(0, 0, 0, 0.08);
    --cam-golge: rgba(0, 0, 0, 0.05);
    --ikon-bg: rgba(0, 0, 0, 0.04);

    /* ── İMZA VURGU SİSTEMİ ──
       Sitenin tüm vurgu rengi bu 4 değişkenden yönetilir. Varsayılan kimlik:
       turkuaz-petrol → gece indigosu gradyanı ("İmza"). Renk butonu (palet),
       script.js'teki gradyanTemalar listesiyle bu değişkenleri değiştirir. */
    --vurgu-1: #ef4444;
    --vurgu-2: #b91c1c;
    --vurgu-1-koyu: #dc2626;
    --vurgu-rgb: 239, 68, 68;

    /* Eski isimler: tüm stiller bu takma adlar üzerinden vurguya bağlı */
    --ai-kirmizi: var(--vurgu-1);
    --ai-kirmizi-koyu: var(--vurgu-1-koyu);
    --ai-kirmizi-glow: rgba(var(--vurgu-rgb), 0.3);
    --ai-gradient: linear-gradient(135deg, var(--vurgu-1), var(--vurgu-2));

    --radius-degeri: 16px;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    /* iOS Safari: sayfa esnetilince (rubber-band) ve durum çubuğu arkasında
       beyaz görünmesin diye html'e de arka plan veriliyor. */
    background-color: #f8f9fa;
}

html.karanlik-mod {
    background-color: #09090b;
}

body {
    margin: 0;
    /* Arka plan rengi bilerek html'e bırakıldı (html = --sayfa-bg ile aynı: aydınlık
       #f8f9fa / karanlık #09090b). body şeffaf olunca z-index:-1 parçacık kanvası
       opak body arkasında kaybolmaz → arka plan parçacıkları yeniden görünür.
       Renk html'den geldiği için görsel olarak hiçbir fark olmaz. */
    background-color: transparent;
    /* Font modernleştirildi */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    width: 100%;
    position: relative;
}

.ana-ust-bilgi {
    width: 100%;
    display: flex;
    justify-content: center;
    padding-top: 10px;
    /* Üste iyice yaklaştırıldı */
}

.navigasyon-ana-govde {
    width: 1200px;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    box-sizing: border-box;
}

/* Kapsül (Pill) Ayarları (Premium Glassmorphism) */
.kapsul {
    background: var(--cam-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--cam-border);
    border-radius: var(--radius-degeri);
    display: flex;
    align-items: center;
    padding: 6px 15px;
    /* İç boşluklar dengelendi */
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.kapsul:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
    border-color: rgba(var(--vurgu-rgb), 0.4);
}

/* Sol Profil Hizalama Çözümü */
.profil-alani {
    gap: 12px;
    padding: 6px 14px;
    /* Dış kapsayıcıya tam ortalı durması için dengelendi */
}

.profil-gorsel-cerceve {
    display: flex;
    align-items: center;
    justify-content: center;
}

.profil-gorsel-cerceve img {
    width: 44px;
    /* Ayar butonlarıyla (44px) aynı boy — header'da denge */
    height: 44px;
    border-radius: 10px;
    /* Karemsi modern radius */
    object-fit: cover;
}

.kullanici-bilgi {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* Dikeyde tam orta */
}

.isim {
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--cam-metin);
    line-height: 1.2;
}

.unvan {
    font-size: 0.85rem;
    color: var(--cam-yardimci-metin);
}

/* Orta Menü ve Seçim Alanı */
.menu-alani {
    padding: 5px;
    /* Dış çerçeveye yakınlık için padding azaltıldı */
    gap: 2px;
}

.menu-baglanti {
    text-decoration: none;
    color: var(--cam-metin);
    padding: 12px 26px;
    /* Menü yazıları büyütüldü ve genişletildi */
    font-size: 1.1rem;
    font-weight: 600;
    border-radius: calc(var(--radius-degeri) - 4px);
    /* İç radius dışa uyumlu */
    /* Sadece zemin yumuşak geçsin; renk anında değişsin ki geçişte siyah flaş olmasın */
    transition: background-color 0.2s;
}

.menu-baglanti.secili {
    background-color: var(--cam-ikon-arka);
    color: #ffffff;
}

.menu-baglanti:hover:not(.secili) {
    background-color: var(--cam-ikon-arka);
}

/* Sağ Ayarlar Bölümü (eski CV kutusunun yerine) */
.ayar-alani {
    position: relative;
    padding: 8px 12px;
    /* Mobilde açılan panel hero'daki .gorsel-alani'nin altında kalıp
       tıklama alamıyordu; kapsülü sayfa içeriğinin üstüne kaldırır.
       Lightbox/toast (10000) ve modallerin (99999) altında kalır. */
    z-index: 100;
}

.ayar-acici {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--cam-ikon-arka);
    color: var(--cam-metin);
    border: 1px solid var(--cam-border);
    border-radius: 12px;
    width: 52px;
    height: 52px;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.ayar-acici i {
    font-size: 1.25rem;
    transition: transform 0.4s ease;
}

/* Sadece gerçek fare imleci olan cihazlarda — dokunmatikte hover
   yapışıp butonu gri bırakıyordu */
@media (hover: hover) {
    .ayar-acici:hover {
        background: #4b5563 !important;
        border-color: #4b5563;
        color: var(--cam-metin);
    }
}

/* Menü açıkken dişli hafifçe döner */
.ayar-acici.aktif i {
    transform: rotate(90deg);
}

/* Resim Büyütme (Lightbox) Alanı */
.resim-odak-katmani {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    /* Arka planı karart */
    display: none;
    /* Başlangıçta gizli */
    justify-content: center;
    align-items: center;
    z-index: 10000;
    /* En üstte durması için */
    cursor: zoom-out;
    backdrop-filter: blur(8px);
    /* Arkayı bulanıklaştırır, çok şık durur */
    animation: acilisEfekti 0.3s ease;
}

.resim-odak-katmani img {
    max-width: 90%;
    max-height: 80%;
    border-radius: 20px;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}

/* Açılış animasyonu */
@keyframes acilisEfekti {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Profil resmine tıklanabilir olduğunu belli eden kursör */
.profil-gorsel-cerceve img {
    /* Büyütme (lightbox) kaldırıldığı için tıklanabilir imleç de kaldırıldı. */
    cursor: default;
}

.modal-arkaplan {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--cam-arkaplan);
    backdrop-filter: blur(12px);
    justify-content: center;
    align-items: center;
    z-index: 99999;
}

.modal-icerik {
    background: #ffffff;
    width: 550px;
    border-radius: 28px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    font-family: 'Inter', sans-serif;
    box-sizing: border-box;
    animation: modalPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes modalPop {
    from {
        opacity: 0;
        transform: scale(0.85) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.modal-ust-bilgi {
    padding: 35px 20px 10px;
    text-align: center;
}

.modal-baslik {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: #111827;
}

.modal-govde {
    padding: 30px;
}

.bolum-etiket {
    font-size: 0.8rem;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.ozel-dropdown select {
    width: 100%;
    padding: 14px;
    border: 2px solid #f3f4f6;
    border-radius: 14px;
    font-size: 1rem;
    color: #111827;
    outline: none;
    transition: 0.3s ease;
    box-sizing: border-box;
    cursor: pointer;
}

.ozel-dropdown select:focus,
.ozel-dropdown select:hover {
    border-color: var(--vurgu-1-koyu);
    box-shadow: 0 0 0 4px rgba(var(--vurgu-rgb), 0.1);
    transform: translateY(-2px);
}

.yasal-uyari-kutusu {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    padding: 18px;
    font-size: 0.82rem;
    line-height: 1.6;
    color: #475569;
    margin: 25px 0;
    border-radius: 12px;
    box-sizing: border-box;
    transition: 0.3s ease;
}

.yasal-uyari-kutusu:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.onay-etiketi {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 0.9rem;
    cursor: pointer;
}

/* Teşekkür Ekranı */
.tesekkur-icerik {
    padding: 80px 40px;
    text-align: center;
    animation: yavascaBelir 0.6s ease-out;
}

.ana-tesekkur-metni {
    font-family: 'Playfair Display', serif;
    font-size: 1.8rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.alt-tesekkur-metni {
    color: #64748b;
    margin-bottom: 40px;
}

.ayrac {
    width: 50px;
    height: 3px;
    background: #1e293b;
    margin: 25px auto;
    border-radius: 10px;
}

/* Butonlar */
.modal-alt-bilgi {
    padding: 0 40px 40px;
    text-align: center;
}

#ana-indir-butonu {
    width: 100%;
    padding: 16px;
    border-radius: 16px;
    border: none;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}

#ana-indir-butonu.aktif {
    background: #111827;
    color: white;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

#ana-indir-butonu.aktif:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

#ana-indir-butonu.pasif {
    background: #f3f4f6;
    color: #9ca3af;
    cursor: not-allowed;
}

#modal-iptal-butonu,
#final-kapat-butonu {
    margin-top: 15px;
    background: transparent;
    border: none;
    color: #6b7280;
    text-decoration: underline;
    cursor: pointer;
    transition: 0.2s;
}

#final-kapat-butonu {
    background: #111827;
    color: white !important;
    text-decoration: none;
    padding: 12px 40px;
    border-radius: 50px;
    transition: 0.3s;
    display: inline-block;
}

#final-kapat-butonu:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

#modal-iptal-butonu:hover {
    color: #111827;
}

@keyframes yavascaBelir {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

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


/* Hakkımda Bölümü CSS */
.icerik-alani {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 20px;
}

.hakkimda-konteyner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
}

.metin-icerik {
    flex: 1;
}

.merhaba-etiketi {
    background: var(--secili-gri);
    color: var(--ana-metin);
    padding: 8px 16px;
    border-radius: 50px;
    font-size: 0.9rem;
    font-weight: 600;
}

.ana-slogan {
    font-family: 'Playfair Display', serif;
    font-size: 3.2rem;
    line-height: 1.15;
    margin: 25px 0;
    color: var(--ana-metin);
}

.ana-slogan span {
    color: var(--yardimci-metin);
    font-style: italic;
    font-weight: 400;
}

.kisa-ozet {
    font-size: 1.15rem;
    color: var(--yardimci-metin);
    line-height: 1.6;
    max-width: 500px;
    margin-bottom: 40px;
}

/* Buton Tasarımları */
.hakkimda-butonlar {
    display: flex;
    gap: 20px;
}

.oncelikli-buton {
    background: var(--ana-metin);
    color: white;
    padding: 15px 30px;
    border-radius: 12px;
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.ikincil-buton {
    background: transparent;
    color: var(--ana-metin);
    padding: 15px 30px;
    border-radius: 12px;
    border: 1.5px solid rgba(var(--vurgu-rgb), 0.5);
    font-weight: 600;
    cursor: pointer;
    transition: 0.3s;
}

.oncelikli-buton:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.ikincil-buton:hover {
    background: rgba(var(--vurgu-rgb), 0.08);
    border-color: var(--vurgu-1);
}

/* --- YENİ PREMIUM GÖRSEL ALANI --- */
.gorsel-alani {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 500px;
}

.premium-gorsel-konteyner {
    position: relative;
    width: 380px;
    height: 380px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Yörünge Çizgileri */
.yorunge-cizgisi {
    position: absolute;
    border-radius: 50%;
    border: 1px dashed rgba(var(--vurgu-rgb), 0.3);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

.yorunge-1 {
    width: 340px;
    height: 340px;
    animation: yorungeDonus 20s linear infinite;
}

.yorunge-2 {
    width: 440px;
    height: 440px;
    border: 1px dashed rgba(var(--vurgu-rgb), 0.2);
    animation: yorungeDonusTers 30s linear infinite;
}

/* Merkez Görsel */
.merkez-gorsel-cerceve {
    position: relative;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    padding: 8px;
    background: linear-gradient(135deg, var(--vurgu-1-koyu), var(--vurgu-1-koyu));
    box-shadow: 0 0 40px rgba(var(--vurgu-rgb), 0.4), inset 0 0 20px rgba(255, 255, 255, 0.5);
    z-index: 10;
}

.merkez-gorsel-cerceve img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 4px solid #ffffff;
    box-sizing: border-box;
}

.gorsel-parlama-efekti {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0%, transparent 60%);
    animation: nefesAlma 4s ease-in-out infinite;
    pointer-events: none;
    border-radius: 50%;
}

@keyframes nefesAlma {

    0%,
    100% {
        transform: scale(0.9);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

@keyframes yorungeDonus {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

@keyframes yorungeDonusTers {
    0% {
        transform: translate(-50%, -50%) rotate(360deg);
    }

    100% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
}

/* Premium Deneyim Kartı */
.premium-deneyim-kartı {
    position: absolute;
    bottom: -10px;
    right: -40px;
    background: var(--cam-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--cam-border);
    border-top: 1px solid var(--cam-border);
    border-left: 1px solid var(--cam-border);
    border-radius: 20px;
    padding: 16px 22px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 15px;
    z-index: 30;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.premium-deneyim-kartı::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transform: skewX(-20deg);
    animation: kartParlama 3s infinite;
}

@keyframes kartParlama {
    0% {
        left: -100%;
    }

    50%,
    100% {
        left: 200%;
    }
}

.premium-deneyim-kartı:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.4);
    border-color: rgba(var(--vurgu-rgb), 0.5);
}

.sayi-alani {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sayi-alani .sayi {
    font-size: 2.8rem;
    font-weight: 800;
    font-family: 'Orbitron', sans-serif;
    background: linear-gradient(135deg, #ffffff, #94a3b8);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
}

.sayi-alani .sayi::after {
    content: '_';
    animation: terminalKursor 1s step-end infinite;
    color: var(--vurgu-1-koyu);
    -webkit-text-fill-color: var(--vurgu-1-koyu);
}

@keyframes terminalKursor {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

.metin-alani {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.metin-alani .yazi {
    font-size: 0.95rem;
    color: var(--cam-metin);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.metin-alani .alt-yazi {
    font-size: 0.75rem;
    color: var(--cam-yardimci-metin);
    font-weight: 500;
    margin-top: 2px;
}

/* İkon Grubu Düzeni */
.uzmanlik-ikonlari {
    display: flex;
    gap: 12px;
    margin: 25px 0;
    /* Paragraf ve butonlar arasındaki boşluk */
}

/* Her Bir İkon Kutusu */
.ikon-kapsul {
    position: relative;
    width: 45px;
    height: 45px;
    background: var(--cam-bg);
    /* Glassmorphism background */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--cam-border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--vurgu-1);
    font-size: 1.1rem;
    cursor: help;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.ikon-kapsul:hover {
    background: rgba(var(--vurgu-rgb), 0.2);
    color: #ffffff;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(var(--vurgu-rgb), 0.2);
    border-color: rgba(var(--vurgu-rgb), 0.4);
}

/* Üzerine gelince çıkan yazı (Tooltip) */
.ikon-kapsul::after {
    content: attr(data-bilgi);
    position: absolute;
    bottom: 120%;
    left: 50%;
    transform: translateX(-50%);
    background: #111827;
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.7rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: 0.3s;
    pointer-events: none;
}

.ikon-kapsul:hover::after {
    opacity: 1;
    visibility: visible;
}

/* --- PROJELER BÖLÜMÜ - BENTO GRID YAPISI (GÜNCEL TAM HALİ) --- */
.projeler-section {
    padding: 100px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.bolum-baslik-alani-bento {
    text-align: left;
    margin-bottom: 50px;
}

.ust-etiket-bento {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--yardimci-metin);
}

.bolum-ana-baslik-bento {
    font-family: 'Playfair Display', serif;
    font-size: 3rem;
    color: var(--ana-metin);
    margin-top: 10px;
}

/* "Projeler" yazısı gri ve italik */
.bolum-ana-baslik-bento span {
    color: var(--yardimci-metin);
    font-style: italic;
    font-weight: 400;
}

.projeler-bento-kapsayici {
    display: flex;
    gap: 20px;
    width: 100%;
}

/* SOL: BÜYÜK SLAYT PANELİ */
.proje-slayt-paneli {
    flex: 2.2;
    position: relative;
    border: 1px solid var(--cerceve-rengi);
    border-radius: var(--radius-degeri);
    overflow: hidden;
    height: 550px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
}

.proje-slayt-icerik {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.proje-slayt-icerik.activ {
    display: flex;
    opacity: 1;
    animation: bentoFadeIn 0.5s ease;
}

.slayt-arka-plan-gorsel-bento {
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: transform 0.5s ease, filter 0.5s ease;
}

.proje-slayt-icerik .slayt-arka-plan-gorsel-bento {
    filter: brightness(0.7) blur(2px);
}

.slayt-bilgi-katmani-bento {
    position: absolute;
    inset: 0;
    padding: 60px;
    background: linear-gradient(180deg, rgba(17, 24, 39, 0.7) 0%, rgba(17, 24, 39, 0.2) 50%, rgba(17, 24, 39, 0.8) 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    z-index: 5;
}

/* YENİ: Geçici Bakım/Alarm Katmanı */
.proje-bakim-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    z-index: 6; /* slayt-bilgi-katmani'nin üstünde olması için */
    padding: 20px;
}

.bakim-alarm-ikonu {
    font-size: 3.5rem;
    color: var(--vurgu-1);
    margin-bottom: 20px;
    animation: alarmPulse 1.5s infinite;
    text-shadow: 0 0 25px rgba(var(--vurgu-rgb), 0.8);
}

.bakim-metni {
    font-size: 1.2rem;
    font-weight: 700;
    color: #ffffff;
    max-width: 80%;
    line-height: 1.5;
    background: rgba(var(--vurgu-rgb), 0.15);
    padding: 12px 24px;
    border-radius: 12px;
    border: 1px solid rgba(var(--vurgu-rgb), 0.4);
    box-shadow: 0 0 15px rgba(var(--vurgu-rgb), 0.2);
}

/* Küçük Kartlar İçin Ölçeklendirme */
.overlay-kucuk {
    padding: 10px;
}
.overlay-kucuk .bakim-alarm-ikonu {
    font-size: 2rem;
    margin-bottom: 10px;
}
.overlay-kucuk .bakim-metni {
    font-size: 0.85rem;
    padding: 8px 12px;
    max-width: 95%;
}

@keyframes alarmPulse {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.1); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}

.proje-baslik-bento {
    font-family: 'Playfair Display', serif;
    font-size: 3.5rem;
    margin-bottom: 15px;
    color: white;
    margin-top: 0;
}

.proje-ozet-bento {
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 600px;
    margin-bottom: 30px;
    color: #e5e7eb;
}

.proje-linkler-bento {
    margin-top: auto;
    display: flex;
    gap: 15px;
    align-items: center;
}

.proje-tag-bento {
    position: absolute;
    bottom: 60px;
    right: 60px;
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cam-ikon-arka);
    padding: 6px 14px;
    border-radius: 50px;
    font-size: 0.8rem;
    font-weight: 600;
    backdrop-filter: blur(5px);
}

.slayt-ok-bento {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: var(--cam-arkaplan);
    color: white;
    border: none;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
    z-index: 10;
}

.slayt-ok-bento:hover {
    background: rgba(17, 24, 39, 0.9);
}

.slayt-ok-bento.sol {
    left: 20px;
}

.slayt-ok-bento.sag {
    right: 20px;
}

.slayt-noktalar-bento {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.nokta {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: 0.3s;
}

.nokta.activ {
    background: white;
    transform: scale(1.2);
}

/* SAĞ: DİKEY SLAYT PANELİ (Tablet/Mobil) */
.proje-slayt-paneli-dikey {
    flex: 1;
    position: relative;
    border: 1px solid var(--cam-border);
    border-radius: var(--radius-degeri);
    overflow: hidden;
    height: 550px;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
    background: var(--cam-bg);
}

.proje-slayt-icerik-dikey {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}

.proje-slayt-icerik-dikey.activ {
    display: flex;
    opacity: 1;
    animation: bentoFadeIn 0.5s ease;
}

.proje-slayt-icerik-dikey .slayt-arka-plan-gorsel-bento {
    filter: brightness(0.7) blur(2px);
}

.proje-baslik-bento.dikey-baslik {
    font-size: 2rem;
    line-height: 1.2;
}

.proje-slayt-icerik-dikey .proje-tag-bento {
    bottom: auto;
    right: auto;
    position: relative;
    margin-bottom: 15px;
    font-size: 0.75rem;
    padding: 6px 12px;
}

.proje-slayt-icerik-dikey .slayt-bilgi-katmani-bento {
    padding: 40px 30px;
}

.slayt-noktalar-bento-dikey {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 10;
}

.nokta-dikey {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: 0.3s;
}

.nokta-dikey.activ {
    background: white;
    transform: scale(1.2);
}

.slayt-ok-bento.dikey-sol {
    left: 10px;
}

.slayt-ok-bento.dikey-sag {
    right: 10px;
}

.bento-kart {
    flex: 1;
    position: relative;
    background: var(--cam-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--cam-border);
    border-radius: var(--radius-degeri);
    overflow: hidden;
    display: block;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.bento-kart:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

/* Buton Düzenlemeleri */
.oncelikli-bento {
    background: white;
    color: var(--ana-metin);
    padding: 12px 24px;
    border-radius: 10px;
    border: none;
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    transition: 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.oncelikli-bento:hover {
    background: #f3f4f6;
}

.oncelikli-bento i {
    margin-right: 8px;
    font-size: 1.1rem;
}

.bento-buton-ikon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background: var(--cam-ikon-arka);
    color: white;
    border-radius: 10px;
    font-size: 1.2rem;
    text-decoration: none;
    transition: 0.3s;
}

.bento-buton-ikon:hover {
    background: rgba(255, 255, 255, 0.2);
}

@keyframes bentoFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* ==========================================================================
   TEKNOLOJİ KOZMOSUM (DENEYİMLER / YETENEKLER) BÖLÜMÜ
   ========================================================================== */

.yetenekler-havuz-section {
    padding: 100px 20px;
    max-width: 1250px;
    /* 3 havuz yan yana rahatça sığsın diye geniş */
    margin: 0 auto;
}

/* --- Başlık Alanı (Merkeze Hizalı) --- */
.bolum-baslik-alani-merkez {
    text-align: center;
    margin-bottom: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.deneyim-alt-yazi-merkez {
    font-size: 1.1rem;
    color: var(--yardimci-metin);
    max-width: 700px;
    margin-top: 15px;
    line-height: 1.6;
}

/* --- 3'lü Havuz Grid Sistemi --- */
.uc-havuz-kapsayici {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3 Eşit Sütun */
    gap: 30px;
    margin-top: 50px;
}

/* --- Her Bir Havuz (Sütun) Tasarımı (Premium Glassmorphism) --- */
.havuz-sutun {
    background: var(--cam-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--cam-border);
    border-radius: 32px;
    padding: 35px 25px;
    display: flex;
    flex-direction: column;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
}

.havuz-sutun:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

/* --- Havuz Üst Bilgi (İkon ve Başlık) --- */
.havuz-ust-bilgi {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.havuz-ikon {
    width: 55px;
    height: 55px;
    background: var(--cam-ikon-arka);
    border: 1px solid var(--cam-border);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: #ffffff;
    margin-bottom: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.havuz-baslik {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--cam-metin);
    margin: 0;
}

/* --- Havuz İçi (Kapsüllerin Dizilimi) --- */
.havuz-icerik {
    display: flex;
    flex-wrap: wrap;
    /* Sığmayan kapsüller alta geçer */
    justify-content: center;
    gap: 10px;
}

/* --- Mini Kapsül Tasarımı (Premium Dark) --- */
.yetenek-kapsul-mini {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--cam-ikon-arka);
    border: 1px solid var(--cam-border);
    border-radius: 50px;
    /* Hap görünümü */
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--cam-metin);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    cursor: default;
    transition: all 0.3s ease;
}

/* --- İKON RENKLERİ: Koyu/Canlı Mavi --- */
.yetenek-kapsul-mini i,
.yetenek-kapsul-mini svg {
    font-size: 1.15rem;
    color: var(--vurgu-1);
    /* Modern neon mavi */
    fill: var(--vurgu-1);
    transition: color 0.3s ease, fill 0.3s ease;
}

/* Hover efekti - kapsül parlaması */
.yetenek-kapsul-mini:hover {
    background: rgba(var(--vurgu-rgb), 0.15);
    border-color: rgba(var(--vurgu-rgb), 0.4);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(var(--vurgu-rgb), 0.2);
}

.yetenek-kapsul-mini:hover i,
.yetenek-kapsul-mini:hover svg {
    color: #ffffff;
    fill: #ffffff;
}


/* ==========================================================================
   MOBİL VE TABLET UYARLAMALARI (RESPONSIVE)
   ========================================================================== */

/* Tabletler (Ekrana 3 tane sığmazsa) */
@media (max-width: 1024px) {
    .uc-havuz-kapsayici {
        grid-template-columns: repeat(2, 1fr);
        /* 2 Sütun yap */
    }

    /* 3. Havuzu alt satırın tam ortasına al */
    .havuz-sutun:nth-child(3) {
        grid-column: span 2;
        max-width: 50%;
        margin: 0 auto;
    }
}

/* Telefonlar (Mecburen alt alta akmalı) */
@media (max-width: 1024px) {
    .yetenekler-havuz-section {
        padding: 80px 15px;
    }

    .uc-havuz-kapsayici {
        grid-template-columns: 1fr;
        /* Mobilde tek sütun alt alta */
        gap: 20px;
    }

    /* Mobilde 3. havuzun genişliğini sıfırla */
    .havuz-sutun:nth-child(3) {
        grid-column: span 1;
        max-width: 100%;
    }
}


/* ==========================================================================
   BÜTÜNLEŞİK İLETİŞİM VE FOOTER BÖLÜMÜ
   ========================================================================== */

.premium-iletisim-section {
    padding: 80px 20px 60px 20px;
    /* Alt boşluğu biraz kıstık ki footer sırıtsın */
    max-width: 1000px;
    margin: 0 auto;
}

/* --- Asimetrik Grid Sistemi --- */
.bento-iletisim-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    gap: 20px;
    margin-top: 40px;
}

/* Genel Bento Kart Stili (Contact Section) */
/* Already defined main .bento-kart glassmorphism higher up, just overriding specific padding here */
.bento-iletisim-grid .bento-kart {
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* --- Dev Email Kartı --- */
.bento-email-karti {
    grid-column: span 2;
    grid-row: span 2;
    background: linear-gradient(135deg, rgba(var(--vurgu-rgb), 0.05), rgba(var(--vurgu-rgb), 0.02));
    border-color: rgba(var(--vurgu-rgb), 0.2);
}

.bento-email-karti:hover {
    box-shadow: 0 10px 30px rgba(var(--vurgu-rgb), 0.1);
    border-color: rgba(var(--vurgu-rgb), 0.4);
}

.kart-ust-bilgi {
    font-size: 0.9rem;
    color: var(--yardimci-metin);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
}

/* --- İLETİŞİM FORMU — WhatsApp tarzı sohbet görünümü (bkz. iletisim-formu.js) --- */
.bento-iletisim-grid .bento-email-karti {
    justify-content: flex-start;
}

.hizli-iletisim-formu {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

/* Honeypot alanı: bot tuzağı, gerçek ziyaretçi asla görmez */
.gizli-alan {
    display: none !important;
}

/* Gönderim sürerken buton kilitli görünsün */
.form-gonder-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

/* ── Sohbet başlığı (avatar + isim + çevrimiçi durumu) ── */
.sohbet-baslik {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--cam-border);
}

.sohbet-avatar {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(var(--vurgu-rgb), 0.35);
}

.sohbet-baslik-bilgi {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.sohbet-isim {
    font-weight: 700;
    font-size: 0.98rem;
    color: var(--ana-metin);
}

.sohbet-durum {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--yardimci-metin);
}

.cevrimici-nokta {
    width: 8px;
    height: 8px;
    background-color: #22c55e;
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
}

.cevrimici-nokta::after {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #22c55e;
    border-radius: 50%;
    animation: nabiz 2s infinite;
}

/* ── Form alanları (ad + e-posta yan yana, mesaj altta) ── */
.sohbet-kimlik {
    display: flex;
    gap: 8px;
}

.sohbet-kimlik input,
.hizli-iletisim-formu textarea {
    background: var(--ikon-bg);
    border: 1px solid var(--cam-border);
    border-radius: 12px;
    color: var(--ana-metin);
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.sohbet-kimlik input {
    flex: 1;
    min-width: 0;
    padding: 10px 14px;
}

.hizli-iletisim-formu textarea {
    width: 100%;
    padding: 12px 14px;
    resize: none;
    min-height: 96px;
}

.sohbet-kimlik input::placeholder,
.hizli-iletisim-formu textarea::placeholder {
    color: var(--yardimci-metin);
}

.sohbet-kimlik input:focus,
.hizli-iletisim-formu textarea:focus {
    outline: none;
    border-color: var(--ai-kirmizi);
    box-shadow: 0 0 10px var(--ai-kirmizi-glow);
}

/* ── Gönder butonu ── */
.form-gonder-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 2px;
}

/* --- Konum ve Durum Kartı --- */
.bento-durum-karti {
    grid-column: span 2;
    justify-content: space-between;
}

.durum-ust {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 30px;
}

.nabiz-noktasi {
    width: 12px;
    height: 12px;
    background-color: var(--vurgu-1);
    border-radius: 50%;
    position: relative;
}

.nabiz-noktasi::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--vurgu-1);
    border-radius: 50%;
    top: 0;
    left: 0;
    animation: nabiz 2s infinite;
}

@keyframes nabiz {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }

    100% {
        transform: scale(3);
        opacity: 0;
    }
}

.durum-metni {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--vurgu-1);
}

.konum-bilgisi i {
    font-size: 1.5rem;
    color: var(--ai-kirmizi);
    margin-bottom: 10px;
}

.konum-bilgisi h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ana-metin);
    margin: 0 0 5px 0;
}

.konum-bilgisi p {
    font-size: 1rem;
    color: #cbd5e1;
    margin: 0;
}

/* --- Kare Sosyal Medya Kartları --- */
.bento-sosyal-karti {
    grid-column: span 1;
    align-items: center;
    text-align: center;
    padding: 30px 20px;
    text-decoration: none;
    color: var(--ana-metin);
}

.bento-sosyal-karti i:not(.capraz-ok) {
    font-size: 2.5rem;
    color: var(--ana-metin);
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

.bento-sosyal-karti span {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ana-metin);
}

.capraz-ok {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 1rem;
    color: #a1a1aa;
    opacity: 0;
    transform: translate(-10px, 10px);
    transition: all 0.3s ease;
}

.bento-sosyal-karti:hover i:not(.capraz-ok) {
    transform: scale(1.1);
}

.bento-sosyal-karti:hover .capraz-ok {
    opacity: 1;
    transform: translate(0, 0);
    color: var(--ana-metin);
}

/* ==========================================================================
   ENTEGRE FOOTER ALANI (İletişim gridinin hemen altı)
   ========================================================================== */
.iletisim-footer-alani {
    margin-top: 60px;
    /* Bento grid ile arasındaki boşluk */
    padding-top: 30px;
    border-top: 1px solid var(--cerceve-rengi);
    /* Çok asil, ince bir ayırıcı çizgi */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.footer-sol p {
    margin: 0;
    font-size: 0.90rem;
    color: var(--yardimci-metin);
    font-weight: 500;
}

.footer-sag .yukari-don {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--ana-metin);
    font-size: 0.95rem;
    font-weight: 600;
    transition: color 0.3s ease;
}

.footer-sag .yukari-don i {
    background: #f8fafc;
    /* Kutu renkleriyle uyumlu */
    border: 1px solid var(--cerceve-rengi);
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 0.85rem;
    color: var(--ana-metin);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.footer-sag .yukari-don:hover {
    color: #71717a;
}

.footer-sag .yukari-don:hover i {
    background: var(--ana-metin);
    color: #ffffff;
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

/* --- MOBİL UYUM --- */
@media (max-width: 1024px) {
    .bento-iletisim-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .bento-email-karti {
        grid-column: span 2;
    }
}

@media (max-width: 600px) {
    .bento-iletisim-grid {
        grid-template-columns: 1fr;
    }

    .bento-email-karti,
    .bento-durum-karti,
    .bento-sosyal-karti {
        grid-column: span 1;
    }

    .iletisim-footer-alani {
        flex-direction: column-reverse;
        justify-content: center;
        text-align: center;
        gap: 25px;
    }
}

.klon-sabit-menu {
    position: fixed;
    /* Menü en tepedeyken orijinal menüyle aynı hizada (veya üstünde) başlasın */
    top: 0px;
    left: 50%;
    /* Başlangıçta hem ortada hem de biraz daha yukarıda (Y: -100%) saklı */
    transform: translateX(-50%) translateY(0%);
    background: var(--cam-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--cam-border);
    border-radius: var(--radius-degeri);
    padding: 6px 10px;
    display: flex;
    gap: 2px;
    z-index: 99999;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
    opacity: 0;
    pointer-events: none;
    /* Transition süresini ve ivmesini senkronize ettik */
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1),
        opacity 0.4s ease,
        top 0.5s ease;
}

/* Scroll yapılınca devreye giren sınıf */
.klon-sabit-menu.aktif {
    top: 10px;
    /* İstediğin o 20px'lik şık boşluk */
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    /* Yerine yumuşakça oturur */
    pointer-events: auto;
}

/* =========================================
   ASİSTAN VE KONTROL MERKEZİ STİLLERİ
   ========================================= */

/* Ana Konteynır */
.asistan-konteynir.sag-taraf {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    z-index: 9999999 !important;
}

/* Yatay Dizilim — Masaüstünde avatar SAĞDA */
.asistan-yatay-hiza {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    gap: 15px;
}

/* Konuşma Balonu — sabit boyut: daktilo efektinde reflow olmaz */
.konusma-balonu {
    background: #ffffff;
    padding: 12px 18px;
    border-radius: 18px 18px 4px 18px;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    font-size: 0.85rem;
    color: #374151;
    width: 230px;          /* sabit genişlik — kasma yok */
    min-height: 64px;      /* sabit yükseklik — satır atlamalarında oynamaz */
    box-sizing: border-box;
    border: 1px solid #e5e7eb;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    font-weight: 500;
    line-height: 1.4;
    opacity: 1;
    position: relative;
    display: grid;
    align-items: center;
    white-space: pre-wrap;
    word-break: break-word;
    contain: layout style;  /* daktilo yazımında çevreyi etkilemesin */
}

/* Hayalet katman: mesajın tamamı görünmez yazılır, balon nihai boyutunu
   baştan alır; daktilo görünür katmana yazar → yükseklik hiç oynamaz */
.konusma-balonu .balon-ghost,
.konusma-balonu .balon-yazi {
    grid-area: 1 / 1;
}

.konusma-balonu .balon-ghost {
    visibility: hidden;
}

/* ── AÇILIŞ FLAŞ'I + KUTU ZIPLAMASI ÖNLEME ──
   Gizlemeyi BEYAZ/CAM KAPSÜLÜN KENDİSİNE (#asistan-katmani) uyguluyoruz; içteki
   satıra değil. Aksi halde kapsül görünür kalıp, içerik (maskot + balon) otururken
   yüksekliğine göre büyüyüp-küçülüyordu. Kapsül komple gizliyken içerik son boyutuna
   oturur, gif yüklenip JS .maskot-hazir ekleyince kapsül tek seferde fade-in olur →
   ne gri emoji/statik metin flaş'ı, ne de beyaz kutu zıplaması.
   opacity:0 yer korur (layout shift yok). CSS render-blocking → ilk boyamadan önce uygulanır. */
#asistan-katmani { transition: opacity 0.45s ease; }
#asistan-katmani:not(.maskot-hazir) { opacity: 0; }

/* Siyah Yuvarlak Maskot */
.asistan-avatar-siyah {
    width: 60px;
    height: 60px;
    background: radial-gradient(circle at 30% 30%, #2a2a2a 0%, #0a0a0a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 8px 24px rgba(0, 0, 0, 0.35),
        0 0 0 1px rgba(255, 255, 255, 0.06) inset,
        0 0 18px var(--ai-kirmizi-glow, rgba(var(--vurgu-rgb), 0.25));
    border: 1px solid #333;
    flex-shrink: 0;
    cursor: default;
    position: relative;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
    animation: asistan-nabiz 2.6s ease-in-out infinite;
}

.asistan-avatar-siyah::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent, var(--ai-kirmizi, var(--vurgu-1)), transparent 60%);
    opacity: 0;
    z-index: -1;
    transition: opacity 0.3s ease;
    filter: blur(6px);
}

/* Maskot hover/dokunma efekti kaldırıldı (büyüme + dönme + parıltı halkası).
   Üstüne gelince/dokununca artık hareket etmiyor — yalnız nabız animasyonu kalır. */

@keyframes asistan-nabiz {
    0%, 100% { box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06) inset, 0 0 18px var(--ai-kirmizi-glow, rgba(var(--vurgu-rgb),0.25)); }
    50%      { box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06) inset, 0 0 28px var(--ai-kirmizi-glow, rgba(var(--vurgu-rgb),0.55)); }
}

#maskot-surat {
    font-size: 2rem;
    filter: grayscale(100%) brightness(1.1);
    user-select: none;
}

/* Maskot GIF — masaüstünde GİZLİ; yalnız mobilde (.gif-aktif) gösterilir */
#maskot-gif {
    display: none;
    width: 46px;
    height: 46px;
    object-fit: contain;
}

/* Mobil Uyumluluk */
@media (max-width: 1024px) {
    .asistan-yatay-hiza {
        transform: scale(0.85);
        transform-origin: bottom right;
        gap: 10px;
    }

    .konusma-balonu {
        max-width: 160px;
        font-size: 0.75rem;
    }
}

/* ==========================================================================
   MASAÜSTÜ — MASKOT ARTIK MOBİLDEKİ GİBİ (şeffaf günlük WebP + düz mesaj)
   Tek fark KONUM: sağ alt köşede sabit; Arapça'da (dir=rtl) sol alt köşe.
   Mobil (≤1024px) kuralları AYNEN korunur; bu blok yalnız ≥1025px'i etkiler.
   ========================================================================== */
@media (min-width: 1025px) {
    /* Konteynırı cam kapsüle çevir (mobildeki gibi); konum sağ-alt sabit kalır
       (position/bottom/right base kuralından geliyor, dokunmuyoruz). */
    .asistan-konteynir.sag-taraf {
        background: var(--cam-bg);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        border: 1px solid var(--cam-border);
        border-radius: var(--radius-degeri);
        padding: 8px 14px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
        display: flex;
        align-items: center;
    }
    body.karanlik-mod .asistan-konteynir.sag-taraf {
        background: rgba(24, 24, 27, 0.75);
        border-color: rgba(255, 255, 255, 0.08);
    }

    /* ARAPÇA: sağ-alt yerine SOL-ALT köşeye geç (LTR'de sağ-alt base'den gelir).
       KRİTİK: base'de right:30px !important var → left ile birlikte !important
       OLMAZSA right+left aynı anda set olur ve kapsül tüm genişliğe UZAR. */
    body[dir="rtl"] .asistan-konteynir.sag-taraf {
        left: 30px !important;
        right: auto !important;
    }
    /* Ekseni deterministik yap (dir=rtl'in row-reverse'i ters çevirmesine GÜVENME):
       hiza'yı LTR+row → maskot SOLDA, yazı SAĞDA; metni balonda rtl'e geri al. */
    body[dir="rtl"] .asistan-yatay-hiza {
        direction: ltr;
        flex-direction: row;
    }
    body[dir="rtl"] .konusma-balonu {
        direction: rtl;
        text-align: right;
    }

    .asistan-yatay-hiza {
        gap: 12px;
    }

    /* WebP yüklenince JS ".gif-aktif" ekler → siyah daire kalkar, şeffaf maskot kalır */
    .asistan-avatar-siyah.gif-aktif {
        background: transparent;
        border: none;
        box-shadow: none;
        animation: none;
        width: auto;
        height: auto;
        overflow: visible;
    }
    .asistan-avatar-siyah.gif-aktif::after { display: none; }
    .asistan-avatar-siyah.gif-aktif #maskot-surat { display: none; }
    .asistan-avatar-siyah.gif-aktif #maskot-gif {
        display: block;
        width: 46px;
        height: 46px;
        object-fit: contain;
    }

    /* WebP yoksa görünecek emoji+kutu fallback'i — mobildeki düz görünüme yaklaştır */
    .asistan-avatar-siyah {
        width: 46px;
        height: 46px;
        border-radius: 12px;
        border: none;
        box-shadow: none;
        animation: none;
    }
    #maskot-surat { font-size: 1.4rem; }

    /* Konuşma balonu: beyaz kutu değil, mobildeki gibi düz metin */
    .konusma-balonu {
        background: transparent;
        box-shadow: none;
        border: none;
        padding: 0;
        width: 160px;
        font-weight: 700;
        font-size: 0.82rem;
        color: var(--ana-metin);
        line-height: 1.3;
        min-height: 38px;
    }
    body.karanlik-mod .konusma-balonu {
        background: transparent;
        color: #f8fafc;
        border: none;
    }
}

/* =========================================
   HIZLI AYARLAR MENÜSÜ (Minimalist Hap Tasarım)
   Header'daki dişli (ayar) butonuna tıklanınca
   butonun ALTINA açılır. (Dil · Tema · Renk)
   ========================================= */
.hizli-ayarlar {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    left: auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(255,255,255,0.92), rgba(255,255,255,0.78));
    backdrop-filter: blur(18px) saturate(180%);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    padding: 8px 12px;
    border-radius: 999px;
    box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.18),
        0 0 0 1px rgba(255, 255, 255, 0.6) inset;
    border: 1px solid rgba(255, 255, 255, 0.5);
    z-index: 100000;

    /* Animasyon başlangıç durumu — yukarıdan (dişliden) doğar */
    transform: translateY(-10px) scale(0.6);
    transform-origin: top right;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hizli-ayarlar.acik {
    transform: translateY(0) scale(1);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* =========================================
   MASAÜSTÜ: açılır menü yok — dişli gizlenir,
   3 buton (dil · tema · renk) kapsülde sabit durur
   ========================================= */
@media (min-width: 1025px) {
    .ayar-acici {
        display: none;
    }

    .hizli-ayarlar {
        position: static;
        background: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        transform: none;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .hizli-ayarlar .ayar-ikonu {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    /* Yukarıdaki override hover/active animasyonlarını ezmesin */
    .hizli-ayarlar .ayar-ikonu:hover {
        transform: translateY(-2px) scale(1.12);
    }

    .hizli-ayarlar .ayar-ikonu:active {
        transform: scale(0.95);
    }
}

/* İkon Butonları Ana Yapısı */
.ayar-ikonu {
    background: #ffffff;
    border: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1),
                background 0.2s ease,
                box-shadow 0.25s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
    position: relative;
    opacity: 0;
    transform: translateY(6px) scale(0.7);
    -webkit-tap-highlight-color: transparent;
}

.hizli-ayarlar.acik .ayar-ikonu {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.hizli-ayarlar.acik .ayar-ikonu:nth-child(1) { transition-delay: 0.08s; }
.hizli-ayarlar.acik .ayar-ikonu:nth-child(2) { transition-delay: 0.14s; }
.hizli-ayarlar.acik .ayar-ikonu:nth-child(3) { transition-delay: 0.20s; }

@media (hover: hover) {
    .ayar-ikonu:hover {
        background: #f3f4f6;
        transform: translateY(-2px) scale(1.12);
        box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15),
                    0 0 0 2px var(--ai-kirmizi, var(--vurgu-1)) inset;
    }
}

.ayar-ikonu:active {
    transform: scale(0.95);
    transition-duration: 0.1s;
}

/* YENİ: Dışarıdan Çekilen Görsellerin (PNG/SVG) Ayarları */
.ayar-ikonu img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    user-select: none;
    pointer-events: none;
    transition: all 0.2s ease;
}

/* Bayrak görselini tam yuvarlak (daire) yap */
#btn-dil img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}


/* =========================================
   KARANLIK MOD (DARK MODE) YÖNETİMİ
   ========================================= */
body.karanlik-mod {
    /* Genel Arkaplan */
    --sayfa-bg: #09090b;

    /* Metin Renkleri */
    --ana-metin: #f8fafc;
    --yardimci-metin: #a1a1aa;
    --kart-metin: #f8fafc;
    --baslik-metin: #ffffff;

    /* Cam Efekti (Glassmorphism) */
    --cam-bg: rgba(24, 24, 27, 0.75);
    --cam-border: rgba(255, 255, 255, 0.08);
    --cam-golge: rgba(0, 0, 0, 0.5);
    --ikon-bg: rgba(255, 255, 255, 0.05);

    /* Vurgu, karanlık modda hafif daha belirgin parlasın (renkler :root'tan gelir) */
    --ai-kirmizi-glow: rgba(var(--vurgu-rgb), 0.4);
}

body.karanlik-mod .modal-icerik,
body.karanlik-mod .konusma-balonu {
    background: #1f2937;
    border-color: #374151;
    color: #f9fafb;
}



.ana-ust-bilgi.ust-bilgi-blur {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
}

body.karanlik-mod .ana-ust-bilgi.ust-bilgi-blur {
    background: rgba(17, 24, 39, 0.8);
}


@media (hover: hover) {
    body.karanlik-mod .ayar-acici:hover {
        background: #e5e7eb !important;
        border-color: #e5e7eb;
        color: #111827;
    }
}

body.karanlik-mod .menu-baglanti.secili {
    background: linear-gradient(135deg, var(--vurgu-1-koyu), var(--vurgu-1), var(--vurgu-2), var(--vurgu-1-koyu));
    background-size: 300% 300%;
    color: #ffffff !important;
    animation: yapayZekaGradient 8s ease infinite;
}

body.karanlik-mod .menu-baglanti:hover:not(.secili) {
    background-color: #4b5563;
    color: #f9fafb;
}

body.karanlik-mod .modal-baslik,
body.karanlik-mod .ana-tesekkur-metni {
    color: #f9fafb;
}

body.karanlik-mod .ayrac {
    background: #4b5563;
}

/* AI Gradient Butonlar (Karanlık Mod) */
body.karanlik-mod .oncelikli-buton,
body.karanlik-mod .oncelikli-bento,
body.karanlik-mod #ana-indir-butonu.aktif {
    background: linear-gradient(135deg, var(--vurgu-1-koyu), var(--vurgu-1), var(--vurgu-2), var(--vurgu-1-koyu));
    background-size: 300% 300%;
    color: #ffffff !important;
    border: none;
    animation: yapayZekaGradient 8s ease infinite;
    box-shadow: 0 4px 15px rgba(var(--vurgu-rgb), 0.3);
}

@keyframes yapayZekaGradient {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

body.karanlik-mod .ikincil-buton {
    color: #f9fafb;
}

body.karanlik-mod .ikincil-buton:hover {
    background: #374151;
}


body.karanlik-mod .ikon-kapsul:hover {
    background: #f9fafb;
    color: #111827;
}

body.karanlik-mod .gorsel-cerceve-modern img {
    box-shadow: 0 0 30px rgba(var(--vurgu-rgb), 0.15), 0 0 60px rgba(var(--vurgu-rgb), 0.1);
}

body.karanlik-mod .bento-kart:hover {
    border-color: #4b5563;
}


/* Removed forced dark text overrides to allow theme variables to function */



body.karanlik-mod .hizli-ayarlar {
    background: rgba(31, 41, 55, 0.75);
    border-color: rgba(255, 255, 255, 0.1);
}

/* Masaüstünde panelin arka planı olmaz (butonlar serbest durur). Karanlık modda
   yukarıdaki kural daha özgül olduğu için masaüstüne sızıp gri katman yapıyordu;
   masaüstü + karanlıkta paneli yeniden şeffaflaştır. Mobil açılır panel etkilenmez. */
@media (min-width: 1025px) {
    body.karanlik-mod .hizli-ayarlar {
        background: none;
        border: none;
        box-shadow: none;
    }
}

body.karanlik-mod .ayar-ikonu {
    background: #1f2937;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

@media (hover: hover) {
    body.karanlik-mod .ayar-ikonu:hover {
        background: #374151;
    }
}

body.karanlik-mod .footer-sag .yukari-don i {
    background: #1f2937;
    color: #f9fafb;
}

body.karanlik-mod .footer-sag .yukari-don:hover i {
    background: #f9fafb;
    color: #111827;
}

body.karanlik-mod .yasal-uyari-kutusu {
    background: #374151;
    border-color: #4b5563;
    color: #d1d5db;
}

body.karanlik-mod .ozel-dropdown select {
    background: #374151;
    border-color: #4b5563;
    color: #f9fafb;
}

body.karanlik-mod .merhaba-etiketi {
    background: #1f2937;
    color: #f9fafb;
}

body.karanlik-mod .asistan-avatar-siyah {
    background: #f9fafb;
    border-color: #e5e7eb;
}

/* --- YÜZEN ORTA MENÜ (Klon Menü Geri Getirildi) --- */
.klon-sabit-menu {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-40px) scale(0.9);
    background: var(--cam-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--cam-border);
    border-radius: var(--radius-degeri);
    padding: 6px 10px;
    display: flex;
    gap: 2px;
    z-index: 99999;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06);
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.klon-sabit-menu.aktif {
    transform: translateX(-50%) translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}



/* --- KARANLIK MOD: Aktif Menü Butonu AI Gradient --- */
body.karanlik-mod .menu-baglanti.secili {
    background: linear-gradient(135deg, var(--vurgu-1-koyu), var(--vurgu-1), var(--vurgu-2), var(--vurgu-1-koyu)) !important;
    background-size: 300% 300% !important;
    color: #ffffff !important;
    animation: yapayZekaGradient 8s ease infinite !important;
    box-shadow: 0 4px 15px rgba(var(--vurgu-rgb), 0.3);
    border-color: transparent;
}

/* --- YÜZEN MENÜ HİZALAMA DÜZELTMELERİ --- */
.navigasyon-ana-govde {
    position: relative;
}

/* Orijinal menüyü tam ortaya sabitler, böylece klon ile 1:1 eşleşir ve kayma hissi yaratmaz */
header .menu-alani {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

/* Mobilde hizalamanın bozulmaması için geri alıyoruz */
@media (max-width: 1024px) {
    header .menu-alani {
        position: relative;
        left: auto;
        transform: none;
    }
}

/* Parçacık Kanvası */
#parcacik-kanvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

/* ── İNDİRME LIMIT UYARI KUTUSU ── */
.limit-uyari-kutusu {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(var(--vurgu-rgb), 0.08);
    border: 1px solid rgba(var(--vurgu-rgb), 0.3);
    border-radius: 10px;
    padding: 12px 16px;
    margin-top: 12px;
    color: var(--vurgu-1-koyu);
    font-size: 0.85rem;
    line-height: 1.5;
    animation: titreSol 0.3s ease;
}

.limit-uyari-kutusu i {
    flex-shrink: 0;
    margin-top: 2px;
    font-size: 0.95rem;
}

@keyframes titreSol {
    0% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-6px);
    }

    50% {
        transform: translateX(6px);
    }

    75% {
        transform: translateX(-4px);
    }

    100% {
        transform: translateX(0);
    }
}

/* --- AI CORE TEXT VISIBILITY ENFORCEMENT --- */
.isim,
.unvan,
.menu-baglanti,
.bento-kart-baslik,
.havuz-baslik,
.yazi,
.alt-yazi,
.bento-tag,
.yetenek-kapsul-mini,
.kart-ust-bilgi,
.durum-metni,
.konum-bilgisi h3,
.konum-bilgisi p,
.bento-sosyal-karti span,
.sayi-alani .sayi,
.bolum-ana-baslik-bento,
.proje-baslik-bento,
.proje-ozet-bento,
.ana-slogan,
.kisa-ozet,
.merhaba-etiketi {
    color: var(--ana-metin) !important;
}

.unvan,
.alt-yazi,
.konum-bilgisi p,
.kisa-ozet,
.yardimci-metin {
    color: var(--yardimci-metin) !important;
}

/* Icons */
.havuz-ikon,
.ikon-kapsul,
.yetenek-kapsul-mini i,
.ayar-acici i {
    color: var(--ai-kirmizi) !important;
}

/* Backgrounds for tags/icons */
.havuz-ikon,
.yetenek-kapsul-mini,
.bento-tag,
.ayar-acici {
    background: var(--ikon-bg) !important;
    border: 1px solid var(--cam-border) !important;
}

/* Gradients and AI Theme Highlights */
.menu-baglanti.secili,
.oncelikli-buton,
.oncelikli-bento,
#ana-indir-butonu.aktif {
    background: var(--ai-gradient) !important;
    background-size: 300% 300% !important;
    color: #ffffff !important;
    border: none !important;
    box-shadow: 0 4px 15px var(--ai-kirmizi-glow) !important;
    animation: yapayZekaGradient 8s ease infinite !important;
}

/* Red hover effects removed from here */

/* Orbit Lines to Red */
.yorunge-cizgisi {
    border-color: var(--ai-kirmizi-glow) !important;
}

.merkez-gorsel-cerceve {
    background: var(--ai-gradient) !important;
    box-shadow: 0 0 40px var(--ai-kirmizi-glow) !important;
}

/* Removing any solid dark background overrides in karanlik-mod */
body.karanlik-mod .kapsul,
body.karanlik-mod .bento-kart,
body.karanlik-mod .havuz-sutun,
body.karanlik-mod .klon-sabit-menu,
body.karanlik-mod .premium-deneyim-kartı,
body.karanlik-mod .ikon-kapsul {
    background: var(--cam-bg) !important;
    border-color: var(--cam-border) !important;
}


/* ==========================================================================
   APP-LIKE MOBILE EXPERIENCE (Inspired by Social Media)
   ========================================================================== */
@media (max-width: 1024px) {

    section {
        scroll-margin-top: 70px !important;
    }

    /* 1. BOTTOM NAVIGATION BAR (Instagram/TikTok style) */
    .klon-sabit-menu {
        position: fixed !important;
        top: 20px !important;
        bottom: auto !important;
        left: 50% !important;
        width: 95% !important;
        max-width: 400px !important;
        display: flex !important;
        justify-content: space-between !important;
        gap: 5px !important;
        padding: 10px !important;
        border-radius: 50px !important;
        z-index: 99999 !important;
        box-shadow: 0 -5px 30px rgba(0, 0, 0, 0.15), 0 10px 20px var(--ai-kirmizi-glow) !important;
        background: var(--cam-bg) !important;
        backdrop-filter: blur(25px) saturate(200%) !important;
        -webkit-backdrop-filter: blur(25px) saturate(200%) !important;
        box-sizing: border-box !important;
    }

    /* Make menu items look like app icons */
    .menu-baglanti {
        font-size: 0.8rem !important;
        padding: 8px 0 !important;
        border-radius: 25px !important;
        text-align: center !important;
        flex: 1 1 0 !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        font-weight: 700 !important;
        white-space: nowrap !important;
        box-sizing: border-box !important;
    }

    /* Hide the original header components that are redundant on mobile */
    .ana-ust-bilgi {
        padding-top: 10px !important;
    }

    .ayar-alani {
        padding: 5px !important;
    }

    /* Profil alanını gizle, yerine asistan gelecek */
    .profil-alani {
        display: none !important;
    }

    /* Asistanı profil görünümüne sok */
    .asistan-konteynir.sag-taraf {
        position: relative !important; /* Eskisi gibi ekrana yapışık değil, normal akışta */
        bottom: auto !important;
        right: auto !important;
        z-index: 999 !important;
        
        background: var(--cam-bg) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        border: 1px solid var(--cam-border) !important;
        border-radius: var(--radius-degeri) !important;
        padding: 8px 18px !important;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
        
        display: flex !important;
        align-items: center !important;
    }

    body.karanlik-mod .asistan-konteynir.sag-taraf {
        background: rgba(24, 24, 27, 0.75) !important;
        border-color: rgba(255, 255, 255, 0.08) !important;
    }

    .asistan-yatay-hiza {
        transform: scale(1) !important;
        gap: 14px !important;
    }

    .asistan-avatar-siyah {
        width: 50px !important;
        height: 50px !important;
        border-radius: 12px !important;
        border: none !important;
        box-shadow: none !important;
        flex-shrink: 0 !important;
    }

    #maskot-surat {
        font-size: 1.8rem !important;
    }

    /* Konuşma balonunu profil metni gibi yap ve sabit genişlik ver */
    .konusma-balonu {
        background: transparent !important;
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 150px !important; /* Daktilo efekti sırasında arka planın daralıp genişlemesini engeller */
        font-weight: 700 !important;
        font-size: 0.82rem !important; /* Yazı biraz küçültüldü */
        color: var(--ana-metin) !important;
        line-height: 1.3 !important;
        white-space: pre-wrap !important;
        display: grid !important;
        align-items: center !important;
        min-height: 38px !important; /* Satır atlamalarında yükseklik oynamasını engeller */
        transition: opacity 0.2s ease, visibility 0.2s ease !important;
    }

    body.karanlik-mod .konusma-balonu {
        background: transparent !important;
        color: #f8fafc !important;
        border: none !important;
    }

    p[data-dil="skills_desc"] {
        display: none !important;
    }

    .navigasyon-ana-govde {
        flex-wrap: wrap !important;
        row-gap: 15px !important;
    }

    header .menu-alani {
        display: flex !important;
        width: 100% !important;
        justify-content: space-between !important;
        gap: 5px !important;
        padding: 10px !important;
        border-radius: 50px !important;
        order: -1 !important;
    }

    /* Hide the top one completely to avoid duplication */

    /* 2. ABOUT ME - INSTAGRAM PROFILE STYLE */
    .hakkimda-konteyner {
        flex-direction: column !important;
        text-align: center !important;
        margin-top: 0px !important;
        gap: 15px !important;
    }

    .icerik-alani {
        padding: 30px 15px !important;
    }

    .gorsel-alani {
        order: -1 !important;
        /* Move image to top */
        min-height: auto !important;
        margin-bottom: 20px !important;
    }

    .premium-gorsel-konteyner {
        width: 380px !important;
        height: 380px !important;
        margin: -45px auto !important;
        transform: scale(0.62) !important;
    }

    .premium-deneyim-kartı {
        bottom: -15px !important;
        right: 50% !important;
        transform: translateX(50%) !important;
        padding: 5px 15px !important;
        border-radius: 50px !important;
        width: max-content !important;
        box-shadow: 0 10px 25px var(--ai-kirmizi-glow) !important;
    }

    .premium-deneyim-kartı:hover {
        transform: translateX(50%) scale(1.05) !important;
    }

    .sayi-alani .sayi {
        font-size: 1.2rem !important;
    }

    .metin-alani .yazi {
        font-size: 0.65rem !important;
    }

    .metin-alani .alt-yazi {
        display: none !important;
    }

    .merhaba-etiketi {
        display: none !important;
    }

    .ana-slogan {
        display: none !important;
    }

    .kisa-ozet {
        display: none !important;
    }

    .uzmanlik-ikonlari {
        justify-content: center !important;
        margin-bottom: 25px !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
    }

    .ikon-kapsul {
        width: 50px !important;
        height: 50px !important;
        font-size: 1.3rem !important;
        border-radius: 15px !important;
    }

    /* Full width buttons like Instagram "Edit Profile" / "Share Profile" */
    .hakkimda-butonlar {
        flex-direction: row !important;
        width: 100% !important;
        gap: 10px !important;
        justify-content: space-between !important;
    }

    .oncelikli-buton,
    .ikincil-buton {
        flex: 1 !important;
        padding: 14px 5px !important;
        font-size: 0.85rem !important;
        border-radius: 12px !important;
        text-align: center !important;
    }

    /* 3. PROJECTS - TIKTOK/IG REELS EDGE-TO-EDGE FEED STYLE */
    .projeler-section {
        padding: 30px 0 !important;
        /* Edge to edge removal of side padding */
    }

    .bolum-baslik-alani-bento {
        padding: 0 20px !important;
        margin-bottom: 15px !important;
        text-align: center !important;
    }

    .bolum-ana-baslik-bento {
        font-size: 1.8rem !important;
    }

    .projeler-bento-kapsayici {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .proje-slayt-paneli {
        border-radius: 0 !important;
        /* Edge to edge */
        border-left: none !important;
        border-right: none !important;
        height: 500px !important;
    }

    .slayt-bilgi-katmani-bento {
        padding: 30px 15px !important;
        justify-content: flex-end !important;
        /* Move text to bottom like reels */
        background: linear-gradient(0deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 40%, transparent 100%) !important;
    }

    .proje-baslik-bento {
        font-size: 1.6rem !important;
        margin-bottom: 8px !important;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
        color: white !important;
    }

    .proje-ozet-bento {
        font-size: 0.9rem !important;
        margin-bottom: 15px !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        color: #e2e8f0 !important;
    }

    .proje-tag-bento {
        top: 20px !important;
        left: 15px !important;
        bottom: auto !important;
        right: auto !important;
        background: rgba(0, 0, 0, 0.5) !important;
        color: white !important;
    }

    .proje-kartlar-panosu-bento {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        padding: 10px 7.5vw 10px 7.5vw !important;
        gap: 15px !important;
        scrollbar-width: none !important;
        -ms-overflow-style: none !important;
    }

    .proje-kartlar-panosu-bento::-webkit-scrollbar {
        display: none !important;
    }

    .panosu-noktalar {
        position: static !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 5px !important;
        margin-bottom: 20px !important;
        transform: none !important;
    }

    .proje-kartlar-panosu-bento .bento-kart {
        min-width: 85% !important;
        scroll-snap-align: center !important;
        padding: 25px 20px !important;
        min-height: 180px !important;
    }

    /* 4. EXPERIENCE/SKILLS - HORIZONTAL SWIPEABLE STORIES STYLE */
    .yetenekler-havuz-section {
        padding: 30px 0 !important;
    }

    .bolum-baslik-alani-merkez {
        padding: 0 20px !important;
        margin-bottom: 20px !important; /* Kartları başlığa yaklaştır */
    }

    .deneyim-alt-yazi-merkez {
        font-size: 0.95rem !important;
    }

    .uc-havuz-kapsayici {
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        padding: 10px 20px 30px 20px !important;
        gap: 15px !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Hide scrollbar for a clean app feel */
    .uc-havuz-kapsayici::-webkit-scrollbar {
        display: none !important;
    }

    .uc-havuz-kapsayici {
        -ms-overflow-style: none !important;
        scrollbar-width: none !important;
    }

    .havuz-sutun {
        min-width: 76vw !important; /* Sağdaki kartın belirgin şekilde görünmesini sağlar */
        scroll-snap-align: center !important;
        padding: 15px 15px !important; /* Yükseklik kısaltıldı */
        margin: 0 !important;
    }

    .havuz-baslik {
        font-size: 1.15rem !important; /* Başlık biraz küçültüldü */
        margin-bottom: 10px !important;
    }

    .yetenek-kapsul-mini {
        font-size: 0.8rem !important; /* Yazılar biraz küçültüldü */
        padding: 6px 10px !important;
    }

    /* 5. CONTACT & FOOTER */
    .premium-iletisim-section {
        padding: 40px 0 60px 0 !important;
    }

    /* Extra padding bottom for fixed nav */

    .bento-iletisim-grid {
        padding: 0 15px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    .dev-mail-linki {
        font-size: 1.3rem !important;
    }

    .iletisim-footer-alani {
        padding: 20px 15px !important;
        flex-direction: column !important;
        gap: 20px !important;
    }

    .slayt-ok-bento {
        width: 40px !important;
        height: 40px !important;
        font-size: 1rem !important;
    }

    /* 6. MODAL RESPONSIVE FIXES */
    .modal-icerik {
        width: 90% !important;
        max-width: 400px !important;
    }
    .tesekkur-icerik {
        padding: 40px 20px !important;
    }
    .modal-govde {
        padding: 20px !important;
    }
    .modal-baslik {
        font-size: 1.5rem !important;
    }
    .ana-tesekkur-metni {
        font-size: 1.4rem !important;
    }
    .modal-alt-bilgi {
        padding: 0 20px 20px !important;
    }

    /* 7. Mobilde Başa Dön Butonunu Gizle */
    .yukari-don {
        display: none !important;
    }
}

/*morph css kısmı */
.morph-sahne {
    position: relative;
    width: 100%;
    height: 660px;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ──── Arka plan efektleri ──── */
.morph-bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(var(--vurgu-rgb), 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(var(--vurgu-rgb), 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    pointer-events: none;
    z-index: 0;
}

.morph-bg-aura {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--ai-kirmizi-glow) 0%, transparent 60%);
    filter: blur(60px);
    opacity: 0.4;
    pointer-events: none;
    animation: morph-aura-nabiz 5s ease-in-out infinite;
    z-index: 0;
}

@keyframes morph-aura-nabiz {
    0%, 100% { opacity: 0.3; transform: translate(-50%, -50%) scale(1); }
    50% { opacity: 0.55; transform: translate(-50%, -50%) scale(1.1); }
}

.morph-bg-yorunge {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 540px;
    height: 540px;
    border: 1.5px dashed rgba(var(--vurgu-rgb), 0.18);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: morph-yorunge-don 32s linear infinite;
    pointer-events: none;
    z-index: 0;
}

.morph-bg-yorunge::before,
.morph-bg-yorunge::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--ai-kirmizi);
    box-shadow: 0 0 14px var(--ai-kirmizi-glow);
}

.morph-bg-yorunge::before { top: -5px; left: 50%; transform: translateX(-50%); }
.morph-bg-yorunge::after { bottom: -5px; left: 50%; transform: translateX(-50%); background: #fff; box-shadow: 0 0 14px rgba(255, 255, 255, 0.6); }

@keyframes morph-yorunge-don {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to { transform: translate(-50%, -50%) rotate(360deg); }
}

/* ──── Üstte yüzen bilgi rozeti ──── */
.morph-bilgi-rozet {
    position: absolute;
    top: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 22px 10px 14px;
    background: var(--cam-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--cam-border);
    border-radius: 100px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 6;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.morph-bilgi-rozet > i {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--ai-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    box-shadow: 0 6px 16px var(--ai-kirmizi-glow);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.morph-rozet-metin {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.morph-rozet-baslik {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--ana-metin);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.morph-rozet-alt {
    font-size: 0.72rem;
    color: var(--yardimci-metin);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

.morph-rozet-baslik.degisiyor,
.morph-rozet-alt.degisiyor {
    opacity: 0;
    transform: translateY(-4px);
}

/* ──── Platform (altta yansıma gölgesi) ──── */
.morph-platform {
    position: absolute;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 22px;
    background: radial-gradient(ellipse, rgba(0, 0, 0, 0.25) 0%, transparent 70%);
    filter: blur(10px);
    pointer-events: none;
    z-index: 1;
    transition: width 0.85s cubic-bezier(0.7, 0, 0.2, 1);
}

.morph-sahne[data-aktif="web"] .morph-platform { width: 540px; }
.morph-sahne[data-aktif="desktop"] .morph-platform { width: 520px; }
.morph-sahne[data-aktif="mobile"] .morph-platform { width: 280px; }
.morph-sahne[data-aktif="watch"] .morph-platform { width: 200px; }

/* ════════════════════════════════════════
   TEK MERKEZ MORPH CİHAZ — Ana boyut/şekil
   ════════════════════════════════════════ */
.morph-cihaz {
    position: relative;
    z-index: 3;
    background: transparent;
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.3),
        0 12px 24px rgba(0, 0, 0, 0.18);
    overflow: visible;
    margin-top: -111px;
    transition:
        width 0.85s cubic-bezier(0.7, 0, 0.2, 1),
        height 0.85s cubic-bezier(0.7, 0, 0.2, 1),
        border-radius 0.85s cubic-bezier(0.7, 0, 0.2, 1),
        box-shadow 0.6s ease;
}

/* ── Cihaz boyutları her mod için ── */
.morph-sahne[data-aktif="web"] .morph-cihaz {
    width: 780px;
    height: 490px;
    border-radius: 14px 14px 10px 10px;
}

.morph-sahne[data-aktif="desktop"] .morph-cihaz {
    width: 760px;
    height: 510px;
    border-radius: 10px;
}

.morph-sahne[data-aktif="mobile"] .morph-cihaz {
    width: 295px;
    height: 600px;
    border-radius: 50px;
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.4),
        0 12px 24px rgba(0, 0, 0, 0.25);
}

.morph-sahne[data-aktif="watch"] .morph-cihaz {
    width: 220px;
    height: 260px;
    border-radius: 54px;
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.35),
        0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Cihaz hafif yüzme animasyonu */
@keyframes morph-cihaz-yuz {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.morph-cihaz {
    animation: morph-cihaz-yuz 5s ease-in-out infinite;
}

/* ════════════════════════════════════════
   SKIN'LER — Cihaz kabuğu (titlebar, vs.)
   ════════════════════════════════════════ */
.morph-skin {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.45s ease;
    overflow: hidden;
}

.morph-skin.aktif {
    opacity: 1;
    pointer-events: auto;
}

/* ──── SKIN 1: WEB TARAYICI (Chrome benzeri) ──── */
.morph-skin-web {
    background: linear-gradient(to bottom, #eef0f3, #f6f7f9);
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.m-browser-titlebar {
    height: 38px;
    background: linear-gradient(to bottom, #e9ecf0, #d8dbe1);
    display: flex;
    align-items: center;
    padding: 0 12px;
    gap: 14px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.m-traffic {
    display: flex;
    gap: 7px;
}

.m-light {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    box-shadow:
        inset 0 0 0 0.5px rgba(0, 0, 0, 0.12),
        inset 0 -1px 1px rgba(0, 0, 0, 0.1);
}

/* Cam parlaması — üç ışıkta da küçük beyaz yansıma */
.m-light::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 3px;
    width: 5px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
}

.m-light-red { background: radial-gradient(circle at 35% 30%, #ff8a80, #ff5f57 60%); }
.m-light-yellow { background: radial-gradient(circle at 35% 30%, #ffd76e, #febc2e 60%); }
.m-light-green { background: radial-gradient(circle at 35% 30%, #6ee787, #28c840 60%); }

.m-browser-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(to bottom, #ffffff, #fbfbfd);
    padding: 7px 14px;
    border-radius: 10px 10px 0 0;
    font-size: 0.78rem;
    font-weight: 500;
    color: #3c4043;
    max-width: 240px;
    position: relative;
    top: 6px;
    box-shadow:
        0 -2px 8px rgba(0, 0, 0, 0.05),
        0 0 0 1px rgba(0, 0, 0, 0.04);
}

.m-browser-tab > i.fa-globe { color: var(--ai-kirmizi); font-size: 0.78rem; }
.m-tab-x { font-size: 0.7rem; color: #80868b; margin-left: 4px; }

.m-browser-yeni-tab {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #5f6368;
    font-size: 0.75rem;
    border-radius: 50%;
}

.m-browser-toolbar {
    height: 44px;
    background: linear-gradient(to bottom, #ffffff, #fbfbfc);
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 12px;
    border-bottom: 1px solid #ebebeb;
}

.m-browser-nav {
    display: flex;
    gap: 10px;
    color: #5f6368;
    font-size: 0.85rem;
}

.m-browser-url {
    flex: 1;
    background: #eef0f4;
    height: 30px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 10px;
    font-size: 0.78rem;
    color: #3c4043;
    box-shadow:
        inset 0 1px 3px rgba(0, 0, 0, 0.06),
        inset 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.m-browser-url > i.fa-lock { color: #1e8e3e; font-size: 0.72rem; }

.m-browser-actions {
    display: flex;
    gap: 12px;
    color: #5f6368;
    font-size: 0.85rem;
}

/* ──── SKIN 2: MASAÜSTÜ (Monitör görünümü) ──── */
.morph-skin-desktop {
    background: linear-gradient(to bottom, #f6f6f8, #eef0f2);
    border: 1px solid rgba(0, 0, 0, 0.09);
    display: flex;
    flex-direction: column;
    overflow: visible; /* monitör ayağı gövde dışına taşar */
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.m-desktop-titlebar {
    height: 34px;
    background: linear-gradient(to bottom, #fcfcfd, #eff0f2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-left: 14px;
    border-bottom: 1px solid #e3e3e3;
    flex-shrink: 0;
    border-radius: 9px 9px 0 0; /* overflow visible olduğu için köşeler kendisi yuvarlanır */
}

.m-desktop-baslik {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.78rem;
    color: #1f1f1f;
    font-weight: 500;
}

/* Uygulama ikonu — marka kırmızısı gradient çip */
.m-desktop-baslik > i {
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: var(--ai-gradient);
    color: #fff;
    font-size: 0.62rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 8px var(--ai-kirmizi-glow);
}

.m-desktop-kontrol {
    display: flex;
    height: 100%;
}

.m-dt-btn {
    width: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: #1f1f1f;
    cursor: pointer;
    transition: background 0.15s ease;
}

.m-dt-btn:hover { background: rgba(0, 0, 0, 0.06); }
.m-dt-close { border-radius: 0 9px 0 0; }
.m-dt-close:hover { background: #e81123; color: #fff; }

/* Monitör ayağı — boyun + taban (alüminyum) */
.m-desktop-stand {
    position: absolute;
    top: calc(100% - 1px);
    left: 50%;
    transform: translateX(-50%);
    width: 88px;
    height: 46px;
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.08), rgba(255, 255, 255, 0.3) 50%, rgba(0, 0, 0, 0.1)),
        linear-gradient(to bottom, #d9d9de, #c2c2c8);
    clip-path: polygon(16% 0, 84% 0, 100% 100%, 0 100%);
    opacity: 0;
    transition: opacity 0.4s ease 0.15s;
}

.m-desktop-taban {
    position: absolute;
    top: calc(100% + 43px);
    left: 50%;
    transform: translateX(-50%);
    width: 230px;
    height: 14px;
    border-radius: 100px;
    background: linear-gradient(to bottom, #e6e6ea, #bfbfc6);
    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    opacity: 0;
    transition: opacity 0.4s ease 0.15s;
}

.morph-skin-desktop.aktif .m-desktop-stand,
.morph-skin-desktop.aktif .m-desktop-taban { opacity: 1; }

.m-desktop-menubar {
    height: 28px;
    background: #fafafa;
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 18px;
    font-size: 0.78rem;
    color: #424242;
    border-bottom: 1px solid #ebebeb;
    flex-shrink: 0;
}

.m-desktop-statusbar {
    height: 24px;
    background: linear-gradient(to bottom, #fafafa, #efefef);
    display: flex;
    align-items: center;
    padding: 0 14px;
    gap: 18px;
    font-size: 0.7rem;
    color: #5f6368;
    border-top: 1px solid #ebebeb;
    flex-shrink: 0;
    margin-top: auto;
    border-radius: 0 0 9px 9px;
}

.m-ds-durum { display: flex; align-items: center; gap: 6px; }

.m-ds-nabiz {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 6px rgba(22, 163, 74, 0.5);
    animation: m-ds-nabiz-anim 1.8s ease-in-out infinite;
}

@keyframes m-ds-nabiz-anim {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ──── SKIN 3: MOBİL TELEFON (Beyaz titanyum) ──── */
.morph-skin-mobile {
    background: linear-gradient(120deg, #f4f4f6 0%, #d8d8dd 35%, #c4c4ca 50%, #e6e6ea 70%, #f7f7f9 100%);
    overflow: visible; /* yan tuşlar gövde dışına taşar */
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.95),
        inset 0 0 0 2.5px rgba(0, 0, 0, 0.1),
        inset 0 2px 6px rgba(255, 255, 255, 0.7),
        inset 0 -2px 8px rgba(0, 0, 0, 0.08);
}

/* Bezel — metal çerçeve ile ekran arasındaki ince çerçeve.
   Aydınlık temada beyaz, karanlık temada siyah (aşağıdaki override). */
.morph-skin-mobile::before {
    content: "";
    position: absolute;
    inset: 6px;
    background: linear-gradient(135deg, #ffffff 0%, #f2f2f5 50%, #fafafa 100%);
    border-radius: 44px;
    z-index: 0;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.06),
        inset 0 1px 2px rgba(255, 255, 255, 0.9);
}

/* Yan tuşlar — sol: sessiz + ses; sağ: güç */
.m-phone-yan-btn {
    position: absolute;
    width: 4px;
    border-radius: 4px;
    background: linear-gradient(to right, #b9b9bf, #dcdce0 50%, #a9a9af);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.7),
        0 1px 2px rgba(0, 0, 0, 0.2);
    z-index: 0;
}

.m-phone-btn-sessiz { left: -3.5px; top: 105px; height: 24px; }
.m-phone-btn-ses-ust { left: -3.5px; top: 145px; height: 42px; }
.m-phone-btn-ses-alt { left: -3.5px; top: 196px; height: 42px; }
.m-phone-btn-guc { right: -3.5px; top: 165px; height: 62px; }

/* Ekran üstü katmanı — ada, durum çubuğu ve ana çubuğu ekranın
   üzerinde tutar; sadece mobil modda görünür (skin fade'inden bağımsız) */
.m-phone-ustkatman {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.45s ease;
}

.morph-sahne[data-aktif="mobile"] .m-phone-ustkatman {
    opacity: 1;
}

/* Dynamic Island — orantılı, ince */
.m-phone-island {
    position: absolute;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    width: 78px;
    height: 22px;
    background: #0a0a0c;
    border-radius: 100px;
    z-index: 4;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.6),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.04);
}

.m-phone-island::before {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #1a1a1c;
    box-shadow: inset 0 0 0 0.5px rgba(80, 100, 180, 0.35);
}

.m-phone-island::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #2a2a3a 0%, #0a0a0c 60%);
    box-shadow:
        inset 0 0 0 0.5px rgba(100, 120, 200, 0.4),
        inset 0 0 3px rgba(80, 100, 200, 0.3);
}

/* Status bar — kenardan kenara ekranın üstüne biner, bu yüzden açık renk */
.m-phone-statusbar {
    position: absolute;
    top: 22px;
    left: 26px;
    right: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #f5f5f7;
    font-size: 0.82rem;
    font-weight: 600;
    z-index: 3;
    pointer-events: none;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

.m-phone-saat {
    letter-spacing: 0.2px;
    min-width: 50px;
    text-align: center;
    padding-left: 4px;
}

.m-phone-ikon {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.78rem;
}

.m-phone-ikon i { color: rgba(245, 245, 247, 0.85); }
.m-phone-ikon i.fa-battery-three-quarters {
    color: #f5f5f7;
    font-size: 0.92rem;
}
.m-phone-ikon i.fa-signal {
    font-size: 0.74rem;
}

.m-phone-home-bar {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: 110px;
    height: 5px;
    background: #f5f5f7;
    border-radius: 100px;
    opacity: 0.85;
    z-index: 4;
}

/* ──── SKIN 4: AKILLI SAAT (Beyaz titanyum) ──── */
.morph-skin-watch {
    background: linear-gradient(120deg, #f4f4f6 0%, #d8d8dd 35%, #c4c4ca 50%, #e6e6ea 70%, #f7f7f9 100%);
    padding: 10px;
    overflow: visible;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.95),
        inset 0 0 0 2.5px rgba(0, 0, 0, 0.08),
        inset 0 2px 6px rgba(255, 255, 255, 0.7),
        inset 0 -2px 6px rgba(0, 0, 0, 0.05);
}

/* Bezel — telefondakiyle aynı dil: metal gövde ile ekran arası çerçeve.
   Aydınlık temada beyaz, karanlık temada siyah (aşağıdaki override). */
.morph-skin-watch::before {
    content: "";
    position: absolute;
    inset: 6px;
    background: linear-gradient(135deg, #ffffff 0%, #f2f2f5 50%, #fafafa 100%);
    border-radius: 48px;
    z-index: 0;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.06),
        inset 0 1px 2px rgba(255, 255, 255, 0.9);
}

/* Saat kayışları — beyaz silikon (sport band) */
.m-watch-strap {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 115px;
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f2 50%, #fafafa 100%);
    opacity: 0;
    transition: opacity 0.4s ease 0.15s;
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.08),
        inset 0 1px 2px rgba(255, 255, 255, 0.9);
}

.morph-skin-watch.aktif .m-watch-strap { opacity: 1; }

.m-watch-strap-ust {
    bottom: 100%;
    height: 110px;
    border-radius: 20px 20px 4px 4px;
    margin-bottom: -10px;
    background:
        radial-gradient(ellipse at center 35%, rgba(0, 0, 0, 0.06) 0 4px, transparent 5px),
        radial-gradient(ellipse at center 65%, rgba(0, 0, 0, 0.06) 0 4px, transparent 5px),
        linear-gradient(135deg, #ffffff 0%, #f0f0f2 50%, #fafafa 100%);
    background-size: 100% 33%, 100% 33%, 100% 100%;
    background-position: center top, center bottom, center;
    background-repeat: no-repeat;
}

.m-watch-strap-alt {
    top: 100%;
    height: 110px;
    border-radius: 4px 4px 20px 20px;
    margin-top: -10px;
    background:
        radial-gradient(ellipse at center 35%, rgba(0, 0, 0, 0.06) 0 4px, transparent 5px),
        radial-gradient(ellipse at center 65%, rgba(0, 0, 0, 0.06) 0 4px, transparent 5px),
        linear-gradient(135deg, #ffffff 0%, #f0f0f2 50%, #fafafa 100%);
    background-size: 100% 33%, 100% 33%, 100% 100%;
    background-position: center top, center bottom, center;
    background-repeat: no-repeat;
}

.m-watch-crown {
    position: absolute;
    right: -7px;
    top: 38%;
    width: 11px;
    height: 32px;
    background: linear-gradient(to right, #fafafa, #d8d8db);
    border-radius: 2px 4px 4px 2px;
    box-shadow:
        2px 0 6px rgba(0, 0, 0, 0.2),
        inset 0 0 0 0.5px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity 0.4s ease 0.15s;
}

/* Taçtaki kırmızı halka — site temasıyla uyumlu vurgu */
.m-watch-crown::before {
    content: "";
    position: absolute;
    left: 1px;
    right: 1px;
    top: 50%;
    height: 3px;
    transform: translateY(-50%);
    background: var(--ai-kirmizi);
    border-radius: 2px;
    opacity: 0.85;
    z-index: 1;
}

.morph-skin-watch.aktif .m-watch-crown { opacity: 1; }

.m-watch-crown::after {
    content: "";
    position: absolute;
    inset: 4px 1px;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.15) 0,
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 3px
    );
}

.m-watch-yan-btn {
    position: absolute;
    right: -5px;
    top: 58%;
    width: 8px;
    height: 24px;
    background: linear-gradient(to right, #fafafa, #d8d8db);
    border-radius: 2px 3px 3px 2px;
    box-shadow:
        1px 0 4px rgba(0, 0, 0, 0.2),
        inset 0 0 0 0.5px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity 0.4s ease 0.15s;
}

.morph-skin-watch.aktif .m-watch-yan-btn { opacity: 1; }

/* ════════════════════════════════════════
   EKRAN — Mod'a göre konum + medya crossfade
   ════════════════════════════════════════ */
.morph-ekran {
    position: absolute;
    background: linear-gradient(135deg, #0f172a, #1e293b);
    overflow: hidden;
    z-index: 2;
    transition:
        top 0.85s cubic-bezier(0.7, 0, 0.2, 1),
        right 0.85s cubic-bezier(0.7, 0, 0.2, 1),
        bottom 0.85s cubic-bezier(0.7, 0, 0.2, 1),
        left 0.85s cubic-bezier(0.7, 0, 0.2, 1),
        border-radius 0.85s cubic-bezier(0.7, 0, 0.2, 1);
}

.morph-ekran::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 30%, rgba(var(--vurgu-rgb), 0.15), transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(99, 102, 241, 0.15), transparent 50%);
    pointer-events: none;
    z-index: 1;
}

/* Cam yansıması — medyanın üzerinde köşegen ince parlama */
.morph-ekran::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.03) 28%, transparent 46%);
    pointer-events: none;
    z-index: 3;
}

.morph-sahne[data-aktif="web"] .morph-ekran {
    top: 82px;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: 0 0 10px 10px;
}

.morph-sahne[data-aktif="desktop"] .morph-ekran {
    top: 62px;
    right: 0;
    bottom: 24px;
    left: 0;
    border-radius: 0;
}

.morph-sahne[data-aktif="mobile"] .morph-ekran {
    top: 12px;
    right: 12px;
    bottom: 12px;
    left: 12px;
    border-radius: 38px;
}

.morph-sahne[data-aktif="watch"] .morph-ekran {
    top: 14px;
    right: 14px;
    bottom: 14px;
    left: 14px;
    border-radius: 42px;
}

/* Medya katmanı — crossfade */
.morph-medya {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.08);
    transition: opacity 0.6s ease, transform 0.9s cubic-bezier(0.34, 1.2, 0.5, 1);
    z-index: 2;
    /* Görünmez (pasif) ekranlar tıklamayı emmesin; yalnız aktif ekran tıklanabilir.
       Aksi halde en üstteki görünmez katman, alttaki linke tıklamayı engelliyordu. */
    pointer-events: none;
}

.morph-medya.aktif {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.morph-medya img,
.morph-medya video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.morph-medya-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
    padding: 20px;
}

.morph-medya-placeholder > i {
    font-size: 2.4rem;
    opacity: 0.6;
}

.morph-medya-placeholder > span {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.4px;
}

.morph-medya-placeholder > small {
    font-size: 0.72rem;
    opacity: 0.6;
    font-style: italic;
}

.morph-sahne[data-aktif="watch"] .morph-medya-placeholder > i { font-size: 1.5rem; }
.morph-sahne[data-aktif="watch"] .morph-medya-placeholder > span { font-size: 0.7rem; }

/* ──── Geçiş enerji parıltısı ──── */
.morph-parilti {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--vurgu-rgb), 0.55) 0%, rgba(var(--vurgu-rgb), 0.12) 40%, transparent 70%);
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    pointer-events: none;
    filter: blur(6px);
    z-index: 5;
}

.morph-cihaz.morphing .morph-parilti {
    animation: morph-parilti-patlat 0.85s cubic-bezier(0.7, 0, 0.2, 1);
}

@keyframes morph-parilti-patlat {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
    35% { transform: translate(-50%, -50%) scale(3.5); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(5.5); opacity: 0; }
}

/* ════════════════════════════════════════
   ALT KONTROL — Cihaz seçici (timeline)
   ════════════════════════════════════════ */
.morph-kontrol {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px;
    background: var(--cam-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--cam-border);
    border-radius: 100px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 6;
}

.morph-tab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: transparent;
    border: none;
    color: var(--yardimci-metin);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 100px;
    transition: color 0.3s ease;
    z-index: 1;
}

.morph-tab > i { font-size: 0.95rem; }

.morph-tab:hover:not(.aktif) {
    color: var(--ai-kirmizi);
}

.morph-tab.aktif {
    color: #fff;
}

.morph-tab-indikator {
    position: absolute;
    top: 6px;
    bottom: 6px;
    border-radius: 100px;
    background: var(--ai-gradient);
    box-shadow: 0 4px 14px var(--ai-kirmizi-glow);
    transition:
        left 0.5s cubic-bezier(0.34, 1.4, 0.5, 1),
        width 0.5s cubic-bezier(0.34, 1.4, 0.5, 1);
    z-index: 0;
}

/* ──── Sol/sağ ok kontrolleri ──── */
.morph-ok {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--cam-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--cam-border);
    color: var(--ana-metin);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    z-index: 6;
    transition: all 0.3s ease;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.morph-ok:hover {
    background: var(--ai-kirmizi);
    color: #fff;
    border-color: var(--ai-kirmizi);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 12px 28px var(--ai-kirmizi-glow);
}

.morph-ok-sol { left: 24px; }
.morph-ok-sag { right: 24px; }

/* ════════════════════════════════════════
   PLATFORM LİNK BUTONLARI — mağaza rozetleri
   ════════════════════════════════════════ */
.morph-linkler {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    width: max-content;
    max-width: 96vw;
    z-index: 6;
    transition: bottom 0.85s cubic-bezier(0.7, 0, 0.2, 1); /* cihaz morfuyla senkron */
}

/* Rozetler aktif cihazın hemen altına oturur */
.morph-sahne[data-aktif="web"] .morph-linkler { bottom: 72px; }
.morph-sahne[data-aktif="desktop"] .morph-linkler { bottom: 10px; } /* monitör tabanının altı */
.morph-sahne[data-aktif="mobile"] .morph-linkler { bottom: 16px; }
.morph-sahne[data-aktif="watch"] .morph-linkler { bottom: 88px; } /* kayışın altı */

/* Gruplar üst üste biner, aktif olan görünür (crossfade) */
.morph-link-grup {
    grid-area: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px;
    opacity: 0;
    transform: translateY(14px);
    pointer-events: none;
    transition:
        opacity 0.45s ease,
        transform 0.7s cubic-bezier(0.34, 1.3, 0.5, 1);
}

.morph-link-grup.aktif {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition-delay: 0.25s;
}

/* Rozet — Play Store / App Store badge tarzı */
.morph-link-rozet {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 20px 9px 15px;
    background: linear-gradient(to bottom, #1b1b1f, #0e0e11);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 14px;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.morph-link-rozet > i {
    font-size: 1.45rem;
    width: 26px;
    text-align: center;
    flex-shrink: 0;
}

.mlr-metin {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    text-align: left;
}

.mlr-metin small {
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    opacity: 0.65;
    white-space: nowrap;
}

.mlr-metin strong {
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
}

.morph-link-rozet:hover {
    transform: translateY(-3px);
    border-color: var(--ai-kirmizi);
    box-shadow: 0 14px 32px var(--ai-kirmizi-glow);
}

body.karanlik-mod .morph-link-rozet {
    background: linear-gradient(to bottom, #26262b, #131316);
    border-color: rgba(255, 255, 255, 0.14);
}

body.karanlik-mod .morph-link-rozet:hover {
    border-color: var(--ai-kirmizi);
}

/* ════════════════════════════════════════════════════════════════════
   RESPONSIVE — Mobil çözünürlüklere uyum
   ════════════════════════════════════════════════════════════════════ */

/* Tablet yatay */
@media (max-width: 1024px) {
    .morph-sahne { height: 600px; }
    .morph-sahne[data-aktif="web"] .morph-cihaz { width: 92%; max-width: 700px; height: 440px; }
    .morph-sahne[data-aktif="desktop"] .morph-cihaz { width: 92%; max-width: 680px; height: 460px; }
    .morph-sahne[data-aktif="mobile"] .morph-cihaz { width: 280px; height: 565px; }
    .morph-sahne[data-aktif="watch"] .morph-cihaz { width: 210px; height: 245px; }

    /* Rozetler cihaz diplerine göre */
    .morph-sahne[data-aktif="web"] .morph-linkler { bottom: 68px; }
    .morph-sahne[data-aktif="desktop"] .morph-linkler { bottom: 4px; }
    .morph-sahne[data-aktif="mobile"] .morph-linkler { bottom: 10px; }
    .morph-sahne[data-aktif="watch"] .morph-linkler { bottom: 70px; }
}

/* Tablet dikey / büyük telefonlar */
@media (max-width: 1024px) {
    .morph-sahne { height: 560px; }
    .morph-cihaz { margin-top: -70px; }

    .morph-sahne[data-aktif="web"] .morph-cihaz { width: 95%; max-width: 600px; height: 380px; }
    .morph-sahne[data-aktif="desktop"] .morph-cihaz { width: 95%; max-width: 580px; height: 400px; }
    .morph-sahne[data-aktif="mobile"] .morph-cihaz { width: 250px; height: 470px; border-radius: 38px; }
    .morph-sahne[data-aktif="mobile"] .morph-skin-mobile::before { border-radius: 32px; }
    .morph-sahne[data-aktif="mobile"] .morph-ekran { top: 10px; right: 10px; bottom: 10px; left: 10px; border-radius: 28px; }
    .morph-sahne[data-aktif="watch"] .morph-cihaz { width: 195px; height: 225px; }

    /* Telefon yan tuşları 470px gövdeye orantılanır */
    .m-phone-btn-sessiz { top: 85px; height: 20px; }
    .m-phone-btn-ses-ust { top: 120px; height: 36px; }
    .m-phone-btn-ses-alt { top: 164px; height: 36px; }
    .m-phone-btn-guc { top: 140px; height: 52px; }
    .m-phone-home-bar { bottom: 16px; }

    /* Web chrome */
    .m-browser-titlebar { height: 34px; padding: 0 10px; gap: 10px; }
    .m-browser-tab { max-width: 180px; padding: 6px 11px; font-size: 0.72rem; }
    .m-browser-toolbar { height: 38px; padding: 0 12px; gap: 10px; }
    .m-browser-url { font-size: 0.72rem; height: 26px; padding: 0 12px; }
    .m-browser-url > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .m-browser-nav, .m-browser-actions { gap: 8px; font-size: 0.78rem; }

    /* Desktop chrome */
    .m-desktop-titlebar { height: 30px; }
    .m-desktop-baslik { font-size: 0.72rem; gap: 8px; }
    .m-dt-btn { width: 38px; }
    .m-desktop-menubar { height: 26px; font-size: 0.72rem; gap: 14px; padding: 0 12px; }
    .m-desktop-statusbar { height: 22px; font-size: 0.66rem; gap: 14px; }

    /* Ekran konumları yeni titlebar boyutlarına uyar */
    .morph-sahne[data-aktif="web"] .morph-ekran { top: 72px; }
    .morph-sahne[data-aktif="desktop"] .morph-ekran { top: 56px; bottom: 22px; }

    /* Monitör ayağı küçülür */
    .m-desktop-stand { width: 76px; height: 36px; }
    .m-desktop-taban { top: calc(100% + 33px); width: 190px; height: 12px; }

    /* Rozetler cihaz diplerine göre */
    .morph-sahne[data-aktif="web"] .morph-linkler { bottom: 64px; }
    .morph-sahne[data-aktif="desktop"] .morph-linkler { bottom: 10px; }
    .morph-sahne[data-aktif="mobile"] .morph-linkler { bottom: 18px; }
    .morph-sahne[data-aktif="watch"] .morph-linkler { bottom: 42px; }
}

/* Standart telefon (iPhone, modern Android) */
@media (max-width: 540px) {
    .morph-sahne { height: 670px; }
    .morph-cihaz { margin-top: -55px; }

    .morph-sahne[data-aktif="web"] .morph-cihaz { width: 96%; max-width: 480px; height: 320px; }
    .morph-sahne[data-aktif="desktop"] .morph-cihaz { width: 96%; max-width: 480px; height: 340px; }
    .morph-sahne[data-aktif="mobile"] .morph-cihaz { width: 270px; height: 530px; border-radius: 44px; }
    .morph-sahne[data-aktif="mobile"] .morph-skin-mobile::before { border-radius: 38px; }
    .morph-sahne[data-aktif="watch"] .morph-cihaz { width: 195px; height: 225px; }

    /* Monitör ayağı küçülür */
    .m-desktop-stand { width: 68px; height: 32px; }
    .m-desktop-taban { top: calc(100% + 29px); width: 170px; height: 11px; }

    /* Link rozetleri kompaktlaşır */
    .morph-link-grup { gap: 10px; }
    .morph-link-rozet { padding: 7px 14px 7px 11px; gap: 9px; border-radius: 12px; }
    .morph-link-rozet > i { font-size: 1.15rem; width: 20px; }
    .mlr-metin small { font-size: 0.55rem; }
    .mlr-metin strong { font-size: 0.82rem; }

    /* 3 rozetli mobil grup tek satıra sığsın diye üst satırını gizler */
    .morph-link-grup[data-mod="mobile"] .mlr-metin small { display: none; }

    /* Rozetler cihaz diplerine göre */
    .morph-sahne[data-aktif="web"] .morph-linkler { bottom: 148px; }
    .morph-sahne[data-aktif="desktop"] .morph-linkler { bottom: 100px; }
    .morph-sahne[data-aktif="mobile"] .morph-linkler { bottom: 48px; }
    .morph-sahne[data-aktif="watch"] .morph-linkler { bottom: 116px; }

    /* Web chrome - kompakt */
    .m-browser-titlebar { height: 30px; gap: 8px; padding: 0 8px; }
    .m-traffic { gap: 5px; }
    .m-light { width: 10px; height: 10px; }
    .m-browser-tab { max-width: 140px; padding: 5px 9px; font-size: 0.66rem; gap: 6px; }
    .m-browser-tab > span { max-width: 80px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .m-browser-yeni-tab { width: 22px; height: 22px; font-size: 0.65rem; }
    .m-browser-toolbar { height: 34px; padding: 0 10px; gap: 8px; }
    .m-browser-url { font-size: 0.65rem; height: 22px; padding: 0 10px; gap: 7px; }
    .m-browser-nav { gap: 7px; font-size: 0.72rem; }
    .m-browser-actions { gap: 8px; font-size: 0.72rem; }

    /* Desktop chrome - kompakt */
    .m-desktop-titlebar { height: 28px; }
    .m-desktop-baslik { font-size: 0.66rem; padding-left: 10px; gap: 6px; }
    .m-desktop-baslik > i { font-size: 0.78rem; }
    .m-dt-btn { width: 34px; font-size: 0.65rem; }
    .m-desktop-menubar { height: 22px; font-size: 0.65rem; gap: 12px; padding: 0 10px; }
    .m-desktop-statusbar { height: 20px; font-size: 0.6rem; gap: 12px; padding: 0 10px; }

    /* Ekran konumları */
    .morph-sahne[data-aktif="web"] .morph-ekran { top: 64px; }
    .morph-sahne[data-aktif="desktop"] .morph-ekran { top: 50px; bottom: 20px; }
    .morph-sahne[data-aktif="mobile"] .morph-ekran { top: 11px; right: 11px; bottom: 11px; left: 11px; border-radius: 33px; }
    .morph-sahne[data-aktif="watch"] .morph-ekran { top: 12px; right: 12px; bottom: 12px; left: 12px; border-radius: 38px; }

    /* Telefon: kamera ve status bar orantılı */
    .m-phone-island { width: 72px; height: 20px; top: 22px; }
    .m-phone-island::after { width: 6px; height: 6px; right: 9px; }
    .m-phone-island::before { width: 4px; height: 4px; left: 9px; }
    .m-phone-statusbar { top: 20px; left: 22px; right: 22px; height: 26px; font-size: 0.78rem; }
    .m-phone-ikon { font-size: 0.74rem; gap: 5px; }
    .m-phone-ikon i.fa-battery-three-quarters { font-size: 0.88rem; }
    .m-phone-home-bar { width: 110px; height: 5px; bottom: 15px; }

    /* Yan tuşlar 530px gövdeye orantılanır */
    .m-phone-btn-sessiz { top: 95px; height: 22px; }
    .m-phone-btn-ses-ust { top: 132px; height: 38px; }
    .m-phone-btn-ses-alt { top: 178px; height: 38px; }
    .m-phone-btn-guc { top: 150px; height: 56px; }

    /* Saat kayışları küçülür */
    .m-watch-strap { width: 95px; }
    .m-watch-strap-ust, .m-watch-strap-alt { height: 90px; }
    .m-watch-crown { width: 9px; height: 26px; right: -6px; }
    .m-watch-yan-btn { width: 7px; height: 20px; }

    /* Oklar küçülür */
    .morph-ok { width: 36px; height: 36px; font-size: 0.8rem; }
    .morph-ok-sol { left: 8px; }
    .morph-ok-sag { right: 8px; }

    /* Arka plan efektleri küçülür */
    .morph-bg-aura { width: 400px; height: 400px; }
    .morph-bg-yorunge { width: 380px; height: 380px; }
}

/* Küçük telefonlar (iPhone SE, eski Androidler) */
@media (max-width: 380px) {
    .morph-sahne { height: 620px; }
    .morph-cihaz { margin-top: -45px; }

    .morph-sahne[data-aktif="web"] .morph-cihaz { width: 96%; height: 290px; }
    .morph-sahne[data-aktif="desktop"] .morph-cihaz { width: 96%; height: 310px; }
    .morph-sahne[data-aktif="mobile"] .morph-cihaz { width: 240px; height: 475px; border-radius: 40px; }
    .morph-sahne[data-aktif="mobile"] .morph-skin-mobile::before { border-radius: 34px; }
    .morph-sahne[data-aktif="mobile"] .morph-ekran { top: 10px; right: 10px; bottom: 10px; left: 10px; border-radius: 30px; }
    .morph-sahne[data-aktif="watch"] .morph-cihaz { width: 175px; height: 205px; }

    /* Yan tuşlar 475px gövdeye orantılanır */
    .m-phone-btn-sessiz { top: 85px; height: 20px; }
    .m-phone-btn-ses-ust { top: 118px; height: 34px; }
    .m-phone-btn-ses-alt { top: 160px; height: 34px; }
    .m-phone-btn-guc { top: 135px; height: 50px; }

    /* Rozetler: üst satır gizlenir, tek satır marka adı kalır */
    .mlr-metin small { display: none; }
    .mlr-metin strong { font-size: 0.78rem; }
    .morph-link-rozet { padding: 8px 12px 8px 10px; gap: 8px; }
    .morph-link-grup { gap: 8px; }

    /* Monitör ayağı küçülür */
    .m-desktop-stand { width: 64px; height: 28px; }
    .m-desktop-taban { top: calc(100% + 25px); width: 150px; height: 10px; }

    /* Rozetler cihaz diplerine göre */
    .morph-sahne[data-aktif="web"] .morph-linkler { bottom: 140px; }
    .morph-sahne[data-aktif="desktop"] .morph-linkler { bottom: 96px; }
    .morph-sahne[data-aktif="mobile"] .morph-linkler { bottom: 14px; }
    .morph-sahne[data-aktif="watch"] .morph-linkler { bottom: 118px; }

    /* Daha agresif kısaltma */
    .m-browser-tab { max-width: 110px; }
    .m-browser-tab > span { max-width: 60px; }
    .m-browser-url > span { font-size: 0.6rem; }
    .m-browser-actions { gap: 6px; }
    .m-browser-actions i.fa-star { display: none; }

    .m-desktop-baslik > span { max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .m-desktop-menubar > span:nth-child(n+4) { display: none; }
    .m-desktop-statusbar > span:nth-child(n+3) { display: none; }

    .m-phone-island { width: 64px; height: 18px; top: 20px; }
    .m-phone-island::after { width: 5px; height: 5px; right: 8px; }
    .m-phone-island::before { width: 4px; height: 4px; left: 8px; }
    .m-phone-statusbar { font-size: 0.72rem; top: 18px; left: 20px; right: 20px; }

    .m-watch-strap { width: 85px; }
    .m-watch-strap-ust, .m-watch-strap-alt { height: 75px; }
}

/* ──── KARANLIK MOD ──── */
body.karanlik-mod .morph-sahne {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.3), rgba(var(--vurgu-rgb), 0.06));
    border-color: rgba(255, 255, 255, 0.06);
}

body.karanlik-mod .morph-bilgi-rozet,
body.karanlik-mod .morph-kontrol,
body.karanlik-mod .morph-ok {
    background: rgba(31, 41, 55, 0.85);
    border-color: rgba(255, 255, 255, 0.1);
    color: #f9fafb;
}

body.karanlik-mod .morph-rozet-baslik { color: #f9fafb; }
body.karanlik-mod .morph-rozet-alt { color: #9ca3af; }

body.karanlik-mod .morph-skin-web { background: #1c1c1e; border-color: rgba(255, 255, 255, 0.08); }
body.karanlik-mod .m-browser-titlebar { background: linear-gradient(to bottom, #2a2a2c, #1c1c1e); border-bottom-color: #2a2a2c; }
body.karanlik-mod .m-browser-tab { background: #2a2a2c; color: #e5e7eb; }
body.karanlik-mod .m-browser-toolbar { background: #1f1f1f; border-bottom-color: #2a2a2c; }
body.karanlik-mod .m-browser-url { background: #2a2a2c; color: #e5e7eb; }

body.karanlik-mod .morph-skin-desktop { background: #1f1f1f; border-color: rgba(255, 255, 255, 0.08); }
body.karanlik-mod .m-desktop-titlebar { background: linear-gradient(to bottom, #2a2a2c, #1f1f1f); border-bottom-color: #2a2a2c; }
body.karanlik-mod .m-desktop-baslik { color: #f9fafb; }
body.karanlik-mod .m-desktop-menubar { background: #1f1f1f; color: #d1d5db; border-bottom-color: #2a2a2c; }
body.karanlik-mod .m-dt-btn { color: #f9fafb; }
body.karanlik-mod .m-dt-btn:hover { background: rgba(255, 255, 255, 0.08); }
body.karanlik-mod .m-desktop-statusbar { background: linear-gradient(to bottom, #2a2a2c, #1f1f1f); color: #9ca3af; border-top-color: #2a2a2c; }

body.karanlik-mod .m-desktop-stand {
    background:
        linear-gradient(to right, rgba(0, 0, 0, 0.35), rgba(255, 255, 255, 0.07) 50%, rgba(0, 0, 0, 0.4)),
        linear-gradient(to bottom, #2e2e32, #1c1c1f);
}

body.karanlik-mod .m-desktop-taban {
    background: linear-gradient(to bottom, #36363a, #1e1e21);
    box-shadow:
        0 6px 14px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ── Karanlık mod: Telefon (siyah titanyum) ── */
body.karanlik-mod .morph-skin-mobile {
    background: linear-gradient(120deg, #3a3a3e 0%, #232326 35%, #18181b 50%, #2c2c30 70%, #3e3e42 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 0 0 2.5px rgba(0, 0, 0, 0.5),
        inset 0 2px 6px rgba(255, 255, 255, 0.06),
        inset 0 -2px 8px rgba(0, 0, 0, 0.3);
}

body.karanlik-mod .morph-skin-mobile::before {
    background: #050507;
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.05),
        inset 0 1px 2px rgba(255, 255, 255, 0.03);
}

body.karanlik-mod .m-phone-yan-btn {
    background: linear-gradient(to right, #3a3a3e, #55555a 50%, #2e2e32);
    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.15),
        0 1px 2px rgba(0, 0, 0, 0.4);
}

body.karanlik-mod .m-phone-statusbar { color: #f5f5f7; }
body.karanlik-mod .m-phone-ikon i { color: #d1d1d6; }
body.karanlik-mod .m-phone-ikon i.fa-battery-three-quarters { color: #f5f5f7; }
body.karanlik-mod .m-phone-home-bar { background: #f5f5f7; opacity: 0.85; }

/* ── Karanlık mod: Akıllı Saat (siyah titanyum + dark sport band) ── */
body.karanlik-mod .morph-skin-watch {
    background: linear-gradient(120deg, #3a3a3e 0%, #232326 35%, #18181b 50%, #2c2c30 70%, #3e3e42 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.1),
        inset 0 0 0 2.5px rgba(0, 0, 0, 0.4),
        inset 0 2px 6px rgba(255, 255, 255, 0.06),
        inset 0 -2px 6px rgba(0, 0, 0, 0.3);
}

body.karanlik-mod .morph-skin-watch::before {
    background: #050507;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
}

body.karanlik-mod .m-watch-strap {
    background: linear-gradient(135deg, #1c1c1e 0%, #2a2a2c 50%, #232325 100%);
    box-shadow:
        inset 0 0 0 1px rgba(255, 255, 255, 0.04),
        inset 0 1px 2px rgba(255, 255, 255, 0.05);
}

body.karanlik-mod .m-watch-strap-ust,
body.karanlik-mod .m-watch-strap-alt {
    background:
        radial-gradient(ellipse at center 35%, rgba(0, 0, 0, 0.45) 0 4px, transparent 5px),
        radial-gradient(ellipse at center 65%, rgba(0, 0, 0, 0.45) 0 4px, transparent 5px),
        linear-gradient(135deg, #1c1c1e 0%, #2a2a2c 50%, #232325 100%);
    background-size: 100% 33%, 100% 33%, 100% 100%;
    background-position: center top, center bottom, center;
    background-repeat: no-repeat;
}

body.karanlik-mod .m-watch-crown,
body.karanlik-mod .m-watch-yan-btn {
    background: linear-gradient(to right, #3a3a3c, #1c1c1e);
    box-shadow:
        2px 0 6px rgba(0, 0, 0, 0.4),
        inset 0 0 0 0.5px rgba(255, 255, 255, 0.08);
}

body.karanlik-mod .m-watch-crown::after {
    background: repeating-linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.1) 0,
        rgba(255, 255, 255, 0.1) 1px,
        transparent 1px,
        transparent 3px
    );
}


/* ==========================================================================
   DENEYİM BÖLÜMÜ — PREMIUM FLIP KARTLARI (3'lü Swipe Grid)
   Kapsam: TÜM kurallar #deneyimler altına izole edilmiştir; sitenin başka
   hiçbir bölümünü etkilemez. (Referans dosyadaki global * ve body reset'leri
   bilerek dahil EDİLMEMİŞTİR.)
   ========================================================================== */

/* Referansın global *{box-sizing} sıfırlaması yerine yalnızca kart içi sıfırlama */
#deneyimler .cards-wrapper,
#deneyimler .cards-wrapper * {
    box-sizing: border-box;
}

/* 3 kartı yan yana tutan, mobilde yatay kaydırmayı sağlayan ana kapsayıcı */
#deneyimler .cards-wrapper {
    display: flex;
    gap: 24px;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 0 0;
    justify-content: center;
    align-items: flex-start;
}

#deneyimler .card-container {
    width: 320px;
    height: 400px;
    perspective: 1200px;
    flex-shrink: 0;
}

#deneyimler .card {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
}

#deneyimler .card.flipped {
    transform: rotateY(180deg);
}

#deneyimler .card-front,
#deneyimler .card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 24px;
    background: #ffffff;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 8px rgba(0, 0, 0, 0.04);
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

#deneyimler .card-back {
    transform: rotateY(180deg);
}

/* ----- Ön Yüz Başlık ----- */
#deneyimler .front-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
}

#deneyimler .header-icon {
    font-size: 1.4rem;
    color: #4b5563;
    background: #f3f4f6;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

#deneyimler .title-notch {
    background: #f9fafb;
    border-radius: 30px;
    padding: 6px 20px;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
}

#deneyimler .front-title {
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    background: linear-gradient(135deg, #7c3aed, #2563eb, #059669, #d97706);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: deneyim-shine 5s ease-in-out infinite;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

#deneyimler .front-subtitle {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #6b7280;
    font-weight: 600;
    margin-top: 2px;
}

@keyframes deneyim-shine {
    0% { background-position: 0% center; }
    50% { background-position: 100% center; }
    100% { background-position: 0% center; }
}

/* ----- İstatistikler ----- */
#deneyimler .stats-wrapper {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

#deneyimler .stat-box {
    flex: 1;
    background: #f9fafb;
    border-radius: 14px;
    padding: 10px 4px;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
    border: 1px solid #f3f4f6;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#deneyimler .stat-icon {
    font-size: 1rem;
    margin-bottom: 4px;
    color: #4b5563;
}

#deneyimler .stat-label {
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9ca3af;
    margin-bottom: 2px;
    font-weight: 700;
}

#deneyimler .stat-value {
    font-size: 0.8rem;
    font-weight: 700;
    color: #111827;
}

/* ----- İkon Grid 4'lü ----- */
#deneyimler .lang-icons-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px 10px;
    justify-items: center;
    align-items: start;
}

#deneyimler .lang-icon-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    transition: transform 0.2s;
}

#deneyimler .lang-icon-wrapper:hover {
    transform: translateY(-3px);
}

#deneyimler .lang-btn {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    transition: all 0.2s ease;
    border: 1px solid #edf2f7;
}

#deneyimler .lang-icon-wrapper:hover .lang-btn {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.06);
    border-color: #d1d5db;
}

#deneyimler .lang-name-label {
    font-size: 0.6rem;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    text-align: center;
}

/* ----- Arka Yüz ----- */
#deneyimler .back-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 2px solid #f3f4f6;
    margin-top: 10px;
}

#deneyimler .back-logo {
    font-size: 2.8rem;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05));
}

#deneyimler .back-language-name {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1f2937;
}

#deneyimler .back-close-btn {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b7280;
    border: 1px solid #f3f4f6;
    transition: all 0.2s;
    font-size: 0.9rem;
    z-index: 10;
}

#deneyimler .back-close-btn:hover {
    background: #f9fafb;
    color: #111827;
}

#deneyimler .back-details {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

#deneyimler .detail-row {
    background: #f9fafb;
    border-radius: 14px;
    padding: 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
    border: 1px solid #f3f4f6;
}

#deneyimler .detail-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6b7280;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

#deneyimler .experience-text {
    font-size: 0.95rem;
    font-weight: 700;
    color: #111827;
}

#deneyimler .libraries-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#deneyimler .lib-tag {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 6px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #374151;
}

/* ========== MOBİL UYUMLULUK (YATAY KAYDIRMA - CAROUSEL) ========== */
@media (max-width: 1050px) {
    #deneyimler .cards-wrapper {
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-padding: 0;            /* merkez snap doğru ortalasın */
        -ms-overflow-style: none;     /* IE/Edge gizli scrollbar */
        scrollbar-width: none;        /* Firefox gizli scrollbar */
        padding: 20px 28px 40px;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }

    /* Chrome/Safari gizli scrollbar */
    #deneyimler .cards-wrapper::-webkit-scrollbar {
        display: none;
    }

    #deneyimler .card-container {
        scroll-snap-align: center;
        scroll-snap-stop: always;     /* her kaydırmada tek kart — hızlı kayma yok */
        width: 84vw;                  /* Ekrana sığdır ama bir sonrakinin ucunu göster */
        max-width: 320px;
    }
}

@media (max-width: 360px) {
    #deneyimler .card-container {
        height: 420px;        /* Çok küçük ekranlarda ikonlar için ekstra yükseklik */
    }
    #deneyimler .lang-btn {
        width: 44px;
        height: 44px;
        font-size: 1.45rem;
    }
    #deneyimler .front-title {
        font-size: 1.1rem;
    }
}

/* ========== KARANLIK MOD UYUMU (kartlar koyu cam temaya geçer) ==========
   Açık modda kartlar referanstaki gibi beyaz kalır; yalnızca .karanlik-mod
   aktifken aşağıdaki override'lar devreye girer. Site dark paletiyle uyumlu. */
body.karanlik-mod #deneyimler .card-front,
body.karanlik-mod #deneyimler .card-back {
    background: #18181b;
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
}

body.karanlik-mod #deneyimler .header-icon {
    background: rgba(255, 255, 255, 0.05);
    color: #d4d4d8;
    box-shadow: none;
}

body.karanlik-mod #deneyimler .title-notch {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.3);
}

body.karanlik-mod #deneyimler .front-subtitle {
    color: #a1a1aa;
}

body.karanlik-mod #deneyimler .stat-box {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.07);
    box-shadow: none;
}

body.karanlik-mod #deneyimler .stat-icon {
    color: #d4d4d8;
}

body.karanlik-mod #deneyimler .stat-label {
    color: #71717a;
}

body.karanlik-mod #deneyimler .stat-value {
    color: #f4f4f5;
}

body.karanlik-mod #deneyimler .lang-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

body.karanlik-mod #deneyimler .lang-icon-wrapper:hover .lang-btn {
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

body.karanlik-mod #deneyimler .lang-name-label {
    color: #a1a1aa;
}

body.karanlik-mod #deneyimler .back-header {
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.karanlik-mod #deneyimler .back-language-name {
    color: #f4f4f5;
}

body.karanlik-mod #deneyimler .back-close-btn {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.08);
    color: #a1a1aa;
}

body.karanlik-mod #deneyimler .back-close-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}

body.karanlik-mod #deneyimler .detail-row {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.07);
}

body.karanlik-mod #deneyimler .detail-label {
    color: #a1a1aa;
}

body.karanlik-mod #deneyimler .experience-text {
    color: #f4f4f5;
}

body.karanlik-mod #deneyimler .lib-tag {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.1);
    color: #e4e4e7;
}


/* ==========================================================================
   HERO — SOSYAL EĞRİ BARLAR (yörüngeyi takip eden kavisli yazılar)
   Merkez logonun çevresinde 4 köşeye yerleşmiş kavisli haplar. Sabit, dönmez.
   ========================================================================== */
.sosyal-yorunge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 440px;
    height: 440px;
    pointer-events: none;   /* merkez logoya/tuvale tıklanabilsin */
    z-index: 5;
}

.sy-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}

/* Tıklanabilir bar (yalnızca barların kendisi) */
.sy-bar {
    pointer-events: auto;
    cursor: pointer;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.12));
    transition: filter 0.3s ease;
}

.sy-bar:hover {
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.22));
}

/* Kavisli hap: kenar (alt katman) + dolgu (üst katman) */
.sy-bar-cizgi {
    fill: none;
    stroke: rgba(0, 0, 0, 0.07);
    stroke-width: 39;          /* dolgu 36 -> ~1.5px ince kenarlık */
    stroke-linecap: round;
}

/* Tema rengine uyumlu kenarlık — vurgu değişkenlerine bağlı, tema değişince
   otomatik uyar. Hepsi aynı paletten olduğu için cıvık durmaz. */
.sy-bar[aria-label="instagram"] .sy-bar-cizgi { stroke: var(--vurgu-1);      filter: drop-shadow(0 0 3px rgba(var(--vurgu-rgb), 0.55)); }
.sy-bar[aria-label="github"]    .sy-bar-cizgi { stroke: var(--vurgu-1);      filter: drop-shadow(0 0 3px rgba(var(--vurgu-rgb), 0.55)); }
.sy-bar[aria-label="linkedin"]  .sy-bar-cizgi { stroke: var(--vurgu-1-koyu); filter: drop-shadow(0 0 3px rgba(var(--vurgu-rgb), 0.55)); }

.sy-bar-dolgu {
    fill: none;
    stroke: #ffffff;
    stroke-width: 36;
    stroke-linecap: round;
    transition: stroke 0.3s ease;
}

/* Eğri yazı */
.sy-text {
    pointer-events: none;   /* metin tıklamayı engellemesin, link <a> zaten sarıyor */
    /* Safari, <text> üzerindeki dominant-baseline'ı textPath glifllerine
       güvenilir aktarmıyor; dikey ortalamayı CSS ile de pekiştiriyoruz. */
    dominant-baseline: central;
}

.sy-icon {
    font-family: "Font Awesome 6 Brands";
    font-weight: 400;
    font-size: 22px;
    dominant-baseline: central;   /* Safari textPath dikey hizalama */
}

.sy-handle {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 600;
    font-size: 17.5px;
    letter-spacing: 0.2px;
    fill: #1f2937;
    dominant-baseline: central;   /* Safari textPath dikey hizalama */
}

/* Mobilde konteyner küçüldüğü için yazıları daha da büyüt */
@media (max-width: 1024px) {
    .sy-icon { font-size: 26px; }
    .sy-handle { font-size: 20.5px; }
}

.sy-bar:hover .sy-handle {
    fill: #0f172a;
}

/* --- Karanlık mod: haplar koyu cam yüzeye geçer --- */
body.karanlik-mod .sy-bar-cizgi {
    stroke: rgba(255, 255, 255, 0.12);
}

body.karanlik-mod .sy-bar-dolgu {
    stroke: #232327;
}

body.karanlik-mod .sy-handle {
    fill: #e5e7eb;
}

body.karanlik-mod .sy-bar:hover .sy-handle {
    fill: #ffffff;
}


/* ==========================================================================
   HERO — HIZLI İŞLEM BARI (Beğen · Kaydet · Paylaş)
   Beyaz arka planlı, ikonlu butonlar. İşlevsel mantık: hero-aksiyonlar.js
   (Eski .uzmanlik-ikonlari 5 kutusunun yerine geldi.)
   ========================================================================== */
.hero-aksiyonlar {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 28px 0 30px;
}

.hero-aksiyon-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 50px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    color: #1f2937;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.hero-aksiyon-btn i {
    font-size: 1.1rem;
    color: var(--ai-kirmizi);
    transition: transform 0.25s ease;
}

.hero-aksiyon-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(var(--vurgu-rgb), 0.18);
    border-color: rgba(var(--vurgu-rgb), 0.35);
}

.hero-aksiyon-btn:hover i {
    transform: scale(1.18);
}

.hero-aksiyon-btn:active {
    transform: translateY(-1px) scale(0.98);
}

/* Mobilde 3 buton tek satırda yan yana kalsın (Paylaş alta inmesin) */
@media (max-width: 1024px) {
    .hero-aksiyonlar {
        justify-content: center;
        gap: 8px;
        margin: 22px 0 26px;
        flex-wrap: nowrap;
    }
    .hero-aksiyon-btn {
        padding: 9px 13px;
        font-size: 0.82rem;
        gap: 6px;
        white-space: nowrap;
    }
    .hero-aksiyon-btn i {
        font-size: 1rem;
    }
}

/* Aktif durum (beğenildi / kaydedildi) yalnızca dolu ikonla gösterilir;
   buton çerçevesi/yazısı değişmez ki sürekli seçili görünmesin. */

/* ── Tıklama "pop" mikro animasyonu ── */
.hero-aksiyon-btn.pop {
    animation: aksiyon-pop 0.35s ease;
}

@keyframes aksiyon-pop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}

/* ── Kalp patlaması: butondan yukarı saçılan mini kalpler ── */
.ucan-kalp {
    position: fixed;
    z-index: 9999;
    pointer-events: none;
    color: var(--ai-kirmizi);
    animation: kalp-uc 0.9s ease-out forwards;
    opacity: 0;
}

@keyframes kalp-uc {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(0.4);
    }
    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--ux, 0px)), calc(-50% + var(--uy, -80px))) scale(1.2);
    }
}

/* ── Toast bildirimi (kaydet / kopyala geri bildirimi) ── */
#aksiyon-toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translate(-50%, 16px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: #1f2937;
    color: #ffffff;
    padding: 12px 22px;
    border-radius: 14px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.92rem;
    font-weight: 600;
    text-align: center;
    max-width: calc(100vw - 40px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
    z-index: 10000;
}

#aksiyon-toast.gorunur {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}

#aksiyon-toast small {
    font-size: 0.78rem;
    font-weight: 500;
    opacity: 0.75;
}

body.karanlik-mod #aksiyon-toast {
    background: #f9fafb;
    color: #111827;
}

/* ── Paylaş popover'ı (Web Share API yoksa fallback) ── */
.paylas-kapsayici {
    position: relative;
    display: inline-flex;
}

.paylas-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 215px;
    padding: 8px;
    background: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 16px;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16);
    display: flex;
    flex-direction: column;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    z-index: 50;
}

.paylas-menu.acik {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

body[dir="rtl"] .paylas-menu {
    left: auto;
    right: 0;
}

.paylas-secenek {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    background: none;
    border: none;
    border-radius: 10px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 0.9rem;
    font-weight: 600;
    color: #1f2937;
    text-decoration: none;
    text-align: start;
    cursor: pointer;
    transition: background 0.2s ease;
}

.paylas-secenek:hover {
    background: rgba(var(--vurgu-rgb), 0.07);
}

.paylas-secenek i {
    width: 18px;
    text-align: center;
    font-size: 1rem;
    color: var(--ai-kirmizi);
}

/* ── Karanlık mod uyumu (Beğen · Kaydet · Paylaş) ──
   Sabit beyaz zemin/koyu metin yerine, sitedeki diğer kartlarla aynı
   karanlık yüzey paleti (#1f2937 / #374151 / #f9fafb). İkonlar kırmızı
   vurgu rengini koruduğu için onlara dokunulmaz. */
body.karanlik-mod .hero-aksiyon-btn {
    background: #1f2937;
    border-color: #374151;
    color: #f9fafb;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
}

body.karanlik-mod .hero-aksiyon-btn:hover {
    border-color: rgba(var(--vurgu-rgb), 0.45);
    box-shadow: 0 10px 24px rgba(var(--vurgu-rgb), 0.28);
}

body.karanlik-mod .paylas-menu {
    background: #1f2937;
    border-color: #374151;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
}

body.karanlik-mod .paylas-secenek {
    color: #f9fafb;
}

body.karanlik-mod .paylas-secenek:hover {
    background: rgba(var(--vurgu-rgb), 0.18);
}

/* Mobilde Paylaş en sağdaki buton: menü sağa hizalanıp taşmasın */
@media (max-width: 1024px) {
    .paylas-menu {
        left: auto;
        right: 0;
    }
    body[dir="rtl"] .paylas-menu {
        left: 0;
        right: auto;
    }
}


/* ==========================================================================
   MASKOT AYAR İKONLARI — Font Awesome ikonları (tema: ay/güneş, renk: palet)
   (Eksik PNG'lerin yerine; hem mobil hem masaüstünde geçerli.)
   ========================================================================== */
.ayar-ikonu i {
    font-size: 1.15rem;
    line-height: 1;
    transition: transform 0.2s ease, color 0.2s ease;
}
#btn-tema i { color: #475569; }
#btn-renk i { color: var(--ai-kirmizi, var(--vurgu-1)); }
body.karanlik-mod #btn-tema i { color: #f59e0b; }   /* güneş sarısı */
body.karanlik-mod #btn-renk i { color: var(--ai-kirmizi, var(--vurgu-1)); }
@media (hover: hover) {
    .ayar-ikonu:hover i { transform: scale(1.12); }
}

/* Tema (açık/kapalı) ikonu: karanlık modda 180° döner — yarım daire öbür yana geçer,
   böylece mod değişimi ikonda da net görünür (renk değişimine ek görsel ipucu). */
body.karanlik-mod #tema-ikon { transform: rotate(180deg); }
@media (hover: hover) {
    body.karanlik-mod #btn-tema:hover i { transform: rotate(180deg) scale(1.12); }
}


/* ==========================================================================
   MOBİL — MASKOT + KONUŞMA BALONU
   Maskot solda; yanında masaüstündeki gibi konuşma balonu (yazı) durur.
   Dil · Tema · Renk butonları artık header'daki dişli menüsünde. (Masaüstü ayrı.)
   ========================================================================== */
@media (max-width: 1024px) {
    .asistan-yatay-hiza {
        flex-direction: row !important;
        gap: 12px !important;
    }
}


/* ==========================================================================
   MOBİL — MASKOT GIF (şeffaf, çerçevesiz)
   GIF başarıyla yüklenince JS ".gif-aktif" ekler → siyah yuvarlak kalkar,
   emoji gizlenir, şeffaf GIF tek başına durur. GIF yoksa emoji'li hâl korunur.
   ========================================================================== */
@media (max-width: 1024px) {
    .asistan-avatar-siyah.gif-aktif {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        animation: none !important;
        width: auto !important;
        height: auto !important;
        overflow: visible !important;
    }
    .asistan-avatar-siyah.gif-aktif::after { display: none !important; }
    .asistan-avatar-siyah.gif-aktif #maskot-surat { display: none !important; }
    .asistan-avatar-siyah.gif-aktif #maskot-gif {
        display: block !important;
        width: 46px !important;
        height: 46px !important;
        object-fit: contain !important;
    }
}


/* ==========================================================================
   MOBİL — ÜST MASKOT KAPSÜLÜ + SAĞ AYAR (DİŞLİ) KUTUSU KÜÇÜLTME
   Header'daki maskot kapsülü ve sağdaki dişli buton mobilde daha
   uygun (küçük) dursun. Sadece mobil; masaüstü etkilenmez.
   ========================================================================== */
@media (max-width: 1024px) {
    /* --- Maskot kapsülü --- */
    .asistan-konteynir.sag-taraf {
        padding: 5px 11px !important;
    }
    .asistan-yatay-hiza {
        gap: 11px !important;
    }
    .asistan-avatar-siyah {
        width: 39px !important;
        height: 39px !important;
    }
    #maskot-surat {
        font-size: 1.3rem !important;
    }
    .konusma-balonu {
        font-size: 0.76rem !important;
        min-height: 32px !important;
    }

    /* --- Sağ ayar (dişli) kutusu --- */
    .ayar-acici {
        width: 42px !important;
        height: 42px !important;
        border-radius: 10px !important;
    }
    .ayar-acici i {
        font-size: 1.05rem !important;
    }

    /* --- Açılır ayar paneli (dişlinin altında, DİKEY açılır) --- */
    .hizli-ayarlar {
        flex-direction: column !important;
        gap: 7px !important;
        padding: 9px 6px !important;
    }
    .hizli-ayarlar .ayar-ikonu {
        width: 38px !important;
        height: 38px !important;
    }
    .hizli-ayarlar .ayar-ikonu i {
        font-size: 0.95rem !important;
    }
    .hizli-ayarlar .ayar-ikonu img {
        width: 20px !important;
        height: 20px !important;
    }
    .hizli-ayarlar #btn-dil img {
        width: 24px !important;
        height: 24px !important;
    }
}


/* ==========================================================================
   MOBİL — PROJELER (MORPH) BÖLÜMÜ PERFORMANS OPTİMİZASYONU
   Sürekli çalışan ağır animasyonları (60px blur'lu nabız aura, yörünge dönüşü,
   cihaz süzülme) mobilde kapatır → kaydırma kasması azalır. Görsel olarak
   neredeyse aynı kalır (sadece hareket durur). Masaüstü etkilenmez.
   ========================================================================== */
@media (max-width: 1024px) {
    .morph-bg-aura {
        animation: none !important;
        filter: blur(35px) !important;   /* 60px ağır blur hafifletildi */
        opacity: 0.22 !important;
    }
    .morph-bg-yorunge {
        animation: none !important;
    }
    .morph-cihaz {
        animation: none !important;
        /* Geçiş anında durum-özel max-width (600/580) düşünce width:95% bir an
           gerçek değerine (tablette ~730-970px) balon gibi açılıp taşıyordu.
           Bu TABAN max-width her durumda (geçiş dahil) geçerli → balon/sızma engellenir.
           Geniş ekranlarda (masaüstü) bu blok zaten çalışmaz, etki yok. */
        max-width: min(90vw, 600px);
    }
    /* Platform (cihaz altı gölge) mobilde sabit px (web 540 / masaüstü 520) kalıp
       ekrandan taşıyordu; geçişte yatay sızma yapıyordu. Ekrana sığacak şekilde sınırla.
       max-width kendiliğinden sınırlayıcı: geniş ekranlarda (tablet/masaüstü) etkisiz. */
    .morph-platform {
        max-width: 85vw;
    }
    /* Mobilde morf geçişi biraz daha yavaş (0.85s → 1.1s) — ok tuşuyla geçişte
       "ani" his olmasın. JS kilidi de mobilde 1150ms (bkz. modaGec). Masaüstü 0.85s. */
    .morph-cihaz,
    .morph-platform,
    .morph-ekran {
        transition-duration: 1.1s;
    }
}


/* ==========================================================================
   PROJELER — "YAKINDA" KARTI (morph showcase yerine)
   Mevcut cam/vurgu değişkenleriyle; açık ve karanlık moda otomatik uyar.
   ========================================================================== */
.proje-yakinda {
    max-width: 560px;
    margin: 10px auto 0;
    padding: 48px 32px;
    text-align: center;
    background: var(--cam-bg);
    border: 1px solid var(--cam-border);
    border-radius: var(--radius-degeri);
    box-shadow: 0 10px 30px var(--cam-golge);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
.proje-yakinda-ikon {
    width: 72px;
    height: 72px;
    margin: 0 auto 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 1.8rem;
    color: #fff;
    background: var(--ai-gradient);
    box-shadow: 0 8px 20px var(--ai-kirmizi-glow);
}
.proje-yakinda-baslik {
    font-size: 1.5rem;
    color: var(--ana-metin);
    margin: 0 0 12px;
}
.proje-yakinda-aciklama {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--yardimci-metin);
    margin: 0 auto 28px;
    max-width: 420px;
}
.proje-yakinda-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    color: var(--vurgu-1);
    background: rgba(var(--vurgu-rgb), 0.10);
    border: 1px solid rgba(var(--vurgu-rgb), 0.30);
    transition: transform 0.2s ease, background 0.2s ease;
}
.proje-yakinda-link:hover {
    transform: translateY(-2px);
    background: rgba(var(--vurgu-rgb), 0.18);
}


/* ==========================================================================
   PROJELER — cihaz EKRANI içindeki "Yakında" kartı
   Ekran arka planı her zaman koyu (lacivert) → yazılar açık renk.
   ========================================================================== */
.morph-yakinda {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    text-align: center;
    padding: 16px;
    box-sizing: border-box;
}
.morph-yakinda-ikon {
    font-size: 1.7rem;
    color: var(--vurgu-1);
}
.morph-yakinda-baslik {
    font-size: 0.95rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
}
.morph-yakinda-aciklama {
    font-size: 0.72rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.6);
    max-width: 220px;
}
.morph-yakinda-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    text-decoration: none;
    color: #fff;
    background: rgba(var(--vurgu-rgb), 0.22);
    border: 1px solid rgba(var(--vurgu-rgb), 0.5);
    transition: background 0.2s ease, transform 0.2s ease;
}
.morph-yakinda-link:hover {
    background: rgba(var(--vurgu-rgb), 0.35);
    transform: translateY(-1px);
}
/* Saat ekranı küçük: sadece ikon + başlık görünsün */
.morph-medya[data-mod="watch"] .morph-yakinda-aciklama,
.morph-medya[data-mod="watch"] .morph-yakinda-link {
    display: none;
}
.morph-medya[data-mod="watch"] .morph-yakinda { gap: 5px; padding: 8px; }
.morph-medya[data-mod="watch"] .morph-yakinda-ikon { font-size: 1.25rem; }
.morph-medya[data-mod="watch"] .morph-yakinda-baslik { font-size: 0.6rem; line-height: 1.2; }

/* Mağaza/link butonları ŞİMDİLİK gizli — projeler hazır olunca bu kural silinince geri gelir */
.morph-linkler {
    display: none !important;
}