@media (max-width: 768px) {
    body[data-page="home"] .hero-section {
        padding: 72px 0 80px; /* 72px 0 64px → 72px 0 80px (alt padding artırıldı, scroll için nefes alanı, "daha fazla var" hissi, scroll motivasyonu) */
        min-height: auto;
        margin-top: 0; /* 16px → 0 (padding-top artırıldığı için margin-top gereksiz) */
    }

    body[data-page="home"] .hero-grid {
        gap: 40px; /* 28px → 40px (hero-content → hero-visuals arası daha net ayrım, content → media transition) */
        padding: 0 var(--spacing-sm);
    }

    body[data-page="home"] .hero-content {
        text-align: left;
        max-width: 100%; /* +YENİ: Reading flow için container width kontrolü */
    }

    body[data-page="home"] .hero-title {
        margin-bottom: 0; /* +YENİ: Title → description spacing hero-description margin-top ile kontrol edilecek */
    }

    body[data-page="home"] .hero-title-line-1 {
        display: block;
        margin-bottom: 4px; /* +YENİ: Title line-1 → line-2 arası intentional separation (visual hierarchy) */
    }

    body[data-page="home"] .hero-title-line-2 {
        display: block;
        margin-top: 0; /* +YENİ: Gereksiz üst boşluk kontrolü (hero-title-line-1 margin-bottom yeterli) */
    }

    body[data-page="home"] .hero-description {
        margin-top: 24px; /* 20px → 24px (title → description arası daha net ayrım, visual hierarchy) */
        margin-bottom: 0; /* +YENİ: Gereksiz alt boşluk kontrolü (hero-buttons margin-top yeterli) */
        max-width: 32ch; /* Zaten mevcut, optimal reading flow */
        line-height: 1.65; /* Zaten mevcut, optimal readability */
    }

    body[data-page="home"] .hero-buttons {
        gap: 12px; /* Zaten mevcut, dengeli */
        margin-top: 32px; /* 28px → 32px (description → buttons arası daha net ayrım, CTA prominence) */
        margin-bottom: 0; /* +YENİ: Gereksiz alt boşluk kontrolü (hero-grid gap yeterli) */
    }

    body[data-page="home"] .hero-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    /* ============================================
       KEYBOARD FEATURES - MOBILE OPTIMIZED
       Görsel gizlendi, metin içeriği öne çıkarıldı
       ============================================ */
    body[data-page="home"] #keyboard-features {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        height: auto !important;
        min-height: 50vh; /* Ekranda güzel bir presence */
        padding: 72px var(--spacing-sm) 64px var(--spacing-sm) !important;
        margin-top: 0;
        background: linear-gradient(
            180deg,
            rgba(10, 10, 20, 0.95) 0%,
            rgba(15, 15, 30, 0.98) 50%,
            rgba(10, 10, 20, 0.95) 100%
        );
        position: relative;
        overflow: hidden;
    }

    /* Soft white spotlight - premium minimal feel */
    body[data-page="home"] #keyboard-features::before {
        content: '';
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 280px;
        height: 280px;
        background: radial-gradient(
            ellipse 60% 50% at center,
            rgba(255, 255, 255, 0.04) 0%,
            rgba(255, 255, 255, 0.02) 35%,
            rgba(255, 255, 255, 0.005) 60%,
            transparent 80%
        );
        pointer-events: none;
        z-index: 1;
        filter: blur(20px);
    }

    body[data-page="home"] .keyboard-features-text {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding: 0 var(--spacing-sm);
        gap: 0;
        max-width: 100%;
        width: 100%;
        position: relative;
        z-index: 10;
    }

    body[data-page="home"] .keyboard-features-text * {
        visibility: visible !important;
        opacity: 1 !important;
    }

    body[data-page="home"] .keyboard-features-title {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-bottom: 24px;
        text-align: center !important;
        max-width: 100%;
        width: 100%;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        background: none !important;
        background-clip: unset !important;
        -webkit-background-clip: unset !important;
        font-size: clamp(1.75rem, 7vw, 2.35rem) !important;
        font-weight: 800 !important;
        line-height: 1.15 !important;
        letter-spacing: -0.03em;
    }

    body[data-page="home"] .keyboard-features-subtitle {
        margin-bottom: 0;
        max-width: 34ch;
        line-height: 1.7;
        text-align: center !important;
        color: rgba(255, 255, 255, 0.75);
        font-weight: 400;
    }

    body[data-page="home"] .btn-keyboard-primary {
        margin-top: 32px;
        padding: 14px 32px;
        font-size: 0.95rem;
        font-weight: 600;
        border-radius: 8px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 4px 20px rgba(255, 255, 255, 0.1);
    }

    body[data-page="home"] .btn-keyboard-primary:active {
        transform: scale(0.98);
    }

    /* HIDE: Aura visual on mobile */
    body[data-page="home"] .keyboard-features-aura,
    body[data-page="home"] #code-fragments-container {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        position: absolute !important;
        pointer-events: none !important;
    }

    body[data-page="home"] .tech-stack-section {
        margin-top: 32px; /* 16px → 32px (keyboard-features → tech-stack geçişi daha dengeli, scroll momentum) */
        margin-bottom: 48px; /* 40px → 48px (tech-stack → expertise geçişi daha net, section priority hierarchy) */
    }

    body[data-page="home"] .tech-stack-marquee-wrapper,
    body[data-page="home"] .tech-stack-marquee-content {
        padding: 32px 0; /* 24px → 32px (tech-stack section entry rhythm, daha dengeli vertical spacing) */
        min-height: 96px !important;
    }

    body[data-page="home"] .marquee-track,
    body[data-page="home"] .marquee-segment {
        gap: 24px;
    }

    body[data-page="home"] .expertise-section {
        padding: 72px 0 80px; /* 64px 0 80px → 72px 0 80px (üst padding artırıldı, section entry rhythm, content focus - "dur ve oku" hissi, section priority hierarchy) */
    }

    body[data-page="home"] .expertise-container {
        grid-template-columns: 1fr;
        gap: 24px; /* 20px → 24px (kartlar arası spacing daha net, algısal gruplama) */
        padding: 0 var(--spacing-sm);
    }

    body[data-page="home"] .expertise-card-1,
    body[data-page="home"] .expertise-card-2,
    body[data-page="home"] .expertise-card-3,
    body[data-page="home"] .expertise-card-4,
    body[data-page="home"] .expertise-card-5,
    body[data-page="home"] .expertise-card-6 {
        height: auto !important;
    }

    body[data-page="home"] .expertise-card {
        height: auto;
        min-height: 240px;
        padding: 32px; /* 28px → 32px (kart içi padding daha dengeli, kart → spacing oranı optimize) */
    }

    body[data-page="home"] .card-content {
        gap: 0; /* +YENİ: Flex gap kontrolü (spacing margin ile kontrol edilecek) */
    }

    body[data-page="home"] .card-label {
        margin-bottom: 12px; /* +YENİ: Label → title arası spacing (visual hierarchy) */
    }

    body[data-page="home"] .card-title {
        margin-top: 0; /* +YENİ: Desktop margin-top: 16px override (card-label margin-bottom ile kontrol edilecek) */
        margin-bottom: 16px; /* +YENİ: Title → description arası spacing (reading flow) */
    }

    body[data-page="home"] .card-desc {
        margin-top: 0; /* +YENİ: Desktop margin-top: 12px override (card-title margin-bottom ile kontrol edilecek) */
        margin-bottom: 0; /* +YENİ: Gereksiz alt boşluk kontrolü */
        line-height: 1.6; /* +YENİ: Optimal readability */
    }

    body[data-page="home"] .cta-section {
        padding: 72px 0 72px; /* 64px 0 72px → 72px 0 72px (üst padding artırıldı, section entry rhythm, action focus - "devam et" hissi, expertise → CTA geçişi dengeli) */
    }

    body[data-page="home"] .cta-section h2 {
        margin-bottom: 20px; /* +YENİ: CTA title → description arası spacing (section entry rhythm, visual hierarchy) */
    }

    body[data-page="home"] .cta-section p {
        margin-bottom: 0; /* +YENİ: Gereksiz alt boşluk kontrolü (cta-section .btn margin-top ile kontrol edilecek) */
        max-width: 32ch; /* +YENİ: Optimal reading flow (hero-description ve keyboard-features-subtitle ile tutarlı) */
        line-height: 1.65; /* +YENİ: Optimal readability (hero-description ve keyboard-features-subtitle ile tutarlı) */
    }

    body[data-page="home"] .cta-section .btn {
        margin-top: 32px; /* +YENİ: Description → CTA button arası spacing (CTA prominence, section entry rhythm) */
    }

    body[data-page="home"] .cta-section .container {
        padding: 0 var(--spacing-sm);
        max-width: 36rem;
    }

    /* 480px breakpoint optimizations */
    @media (max-width: 480px) {
        body[data-page="home"] .hero-section {
            padding: 64px 0 56px; /* 72px 0 64px → 64px 0 56px (480px için optimize, küçük ekranlarda daha dengeli) */
        }

        body[data-page="home"] .hero-grid {
            gap: 32px; /* 40px → 32px (480px için optimize, küçük ekranlarda daha dengeli) */
        }

        body[data-page="home"] .hero-title-line-1 {
            margin-bottom: 3px; /* 4px → 3px (480px için optimize, küçük ekranlarda daha kompakt) */
        }

        body[data-page="home"] .hero-description {
            margin-top: 20px; /* 24px → 20px (480px için optimize, küçük ekranlarda daha kompakt) */
        }

        body[data-page="home"] .hero-buttons {
            margin-top: 28px; /* 32px → 28px (480px için optimize, küçük ekranlarda daha kompakt) */
        }

        body[data-page="home"] .hero-section {
            padding: 64px 0 72px; /* 64px 0 80px → 64px 0 72px (480px için optimize, küçük ekranlarda daha dengeli) */
        }

        /* KEYBOARD FEATURES - 480px optimization */
        body[data-page="home"] #keyboard-features {
            min-height: 45vh;
            padding: 56px var(--spacing-sm) 48px var(--spacing-sm) !important;
        }

        body[data-page="home"] .keyboard-features-title {
            margin-bottom: 16px;
        }

        body[data-page="home"] .keyboard-features-subtitle {
            max-width: 30ch;
            line-height: 1.65;
        }

        body[data-page="home"] .btn-keyboard-primary {
            margin-top: 28px;
            padding: 12px 28px;
            font-size: 0.9rem;
        }

        body[data-page="home"] .tech-stack-section {
            margin-top: 24px; /* 32px → 24px (480px için optimize, küçük ekranlarda daha kompakt) */
            margin-bottom: 40px; /* 48px → 40px (480px için optimize, küçük ekranlarda daha kompakt) */
        }

        body[data-page="home"] .tech-stack-marquee-wrapper,
        body[data-page="home"] .tech-stack-marquee-content {
            padding: 28px 0; /* 32px → 28px (480px için optimize, küçük ekranlarda daha kompakt) */
        }

        body[data-page="home"] .expertise-section {
            padding: 64px 0 72px; /* 72px 0 80px → 64px 0 72px (480px için optimize, küçük ekranlarda daha kompakt) */
        }

        body[data-page="home"] .cta-section {
            padding: 64px 0 64px; /* 72px 0 72px → 64px 0 64px (480px için optimize, küçük ekranlarda daha kompakt) */
        }

        body[data-page="home"] .cta-section h2 {
            margin-bottom: 18px; /* 20px → 18px (480px için optimize, küçük ekranlarda daha kompakt) */
        }

        body[data-page="home"] .cta-section .btn {
            margin-top: 28px; /* 32px → 28px (480px için optimize, küçük ekranlarda daha kompakt) */
        }

        body[data-page="home"] .expertise-container {
            gap: 20px; /* 24px → 20px (480px için optimize) */
        }

        body[data-page="home"] .expertise-card {
            padding: 28px; /* 32px → 28px (480px için optimize) */
        }

        body[data-page="home"] .card-label {
            margin-bottom: 10px; /* 12px → 10px (480px için optimize) */
        }

        body[data-page="home"] .card-title {
            margin-bottom: 14px; /* 16px → 14px (480px için optimize) */
        }
    }
}