/* ================================================================
   ENGELSIZ ISPARTA - RESPONSIVE
   Breakpoints: 1024px, 768px, 480px
   ================================================================ */

/* ===== TABLET LANDSCAPE (1024px) ===== */
@media (max-width: 1024px) {
    :root {
        --space-section: 80px;
    }

    .section-title { font-size: 2rem; }

    /* Navbar */
    .nav-links { gap: 2px; }
    .nav-links a { padding: 8px 10px; font-size: 0.88rem; }

    /* Footer */
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }

    /* Hero intermediate scaling */
    .hero h1 { font-size: 2.6rem; }
    .hero .container { gap: 40px; }
    .hero-visual .phone-mockup { width: 250px; }

    /* CTA */
    .cta-section h2 { font-size: 2.1rem; }

    /* Home - Stats */
    .stats-grid { gap: 20px; }

    /* About page */
    .story-grid { gap: 40px; }
    .story-phone { width: 155px; }

    /* Features page */
    .main-features-grid { gap: 20px; }
    .detail-row { gap: 40px; margin-bottom: 60px; }
    .qr-grid { gap: 40px; }
    .accessibility-grid { gap: 40px; }

    /* App page */
    .showcase-content { gap: 40px; }
    .showcase-phone { width: 260px; }
    .app-features-grid { gap: 40px; }
    .screenshots-grid { gap: 20px; }

    /* Protocol page */
    .parties-grid { grid-template-columns: repeat(2, 1fr); }
    .intro-grid { gap: 40px; }
    .scope-grid { gap: 40px; }

    /* Contact page */
    .contact-grid { gap: 32px; }
    .contact-form { padding: 36px; }
}

/* ===== TABLET PORTRAIT / MOBILE (768px) ===== */
@media (max-width: 768px) {
    :root {
        --space-section: 64px;
        --navbar-height: 64px;
    }

    /* Navbar - Mobile Menu */
    .mobile-menu-btn { display: block; }

    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: var(--navbar-height);
        left: 0;
        right: 0;
        background: var(--navy);
        padding: 16px 24px 24px;
        gap: 4px;
        box-shadow: 0 12px 32px rgba(0,0,0,0.35);
        border-top: 1px solid rgba(255,255,255,0.06);
        animation: slideDown 0.3s ease forwards;
    }

    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    .nav-links.active { display: flex; }

    .nav-links a {
        padding: 12px 16px;
        border-radius: var(--radius-sm);
        font-size: 0.95rem;
        width: 100%;
    }

    .nav-links a:hover,
    .nav-links a.active {
        background: rgba(255,255,255,0.06);
    }

    .nav-links a.active::after {
        display: none;
    }

    /* Navbar brand */
    .navbar-brand { font-size: 1.1rem; gap: 10px; }
    .navbar-brand .brand-logo { width: 40px; height: 40px; }

    /* Section spacing */
    .section-title { font-size: 1.85rem; }
    .section-subtitle { font-size: 1rem; }

    /* Page Hero */
    .page-hero { padding: 120px 0 56px; }
    .page-hero h1 { font-size: 2rem; }
    .page-hero p { font-size: 1rem; }

    /* Cards */
    .card { padding: 26px 20px; }

    /* Footer */
    .footer { padding: 48px 0 24px; }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    .footer-brand p { max-width: 100%; }
    .footer-bottom {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    /* Back to top */
    .back-to-top {
        bottom: 20px;
        right: 20px;
        width: 42px;
        height: 42px;
        font-size: 1rem;
    }

    /* ===== HOME PAGE ===== */
    .hero {
        min-height: 0;
        padding: calc(var(--navbar-height) + 40px) 0 60px;
    }
    .hero .container {
        flex-direction: column;
        text-align: center;
        gap: 40px;
    }
    .hero h1 { font-size: 2.1rem; }
    .hero-badge { font-size: 0.8rem; padding: 7px 16px; gap: 6px; }
    .hero-desc { margin: 0 auto 32px; max-width: 100%; }
    .hero-buttons { justify-content: center; }
    .hero-visual .phone-mockup { width: 240px; }

    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }

    .about-grid { grid-template-columns: 1fr; gap: 40px; }
    .about-visual { order: -1; justify-content: center; }
    .about-phone { width: 150px; }

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

    .steps { flex-direction: column; max-width: 400px; margin: 0 auto; }
    .step-connector { display: none !important; }

    .cta-section h2 { font-size: 1.8rem; }
    .cta-section > .container > p { font-size: 1rem; }

    .a11y-info-grid { grid-template-columns: 1fr; gap: 36px; }
    .a11y-badge-group { grid-template-columns: 1fr 1fr; gap: 12px; }

    /* ===== ABOUT PAGE ===== */
    .story-grid { grid-template-columns: 1fr; gap: 40px; }
    .story-visual { order: -1; }
    .story-phone { width: 150px; }

    .mission-grid { grid-template-columns: 1fr; }
    .mission-card { padding: 32px 24px; }

    .timeline::before { left: 24px; }
    .timeline-item { padding-left: 64px; padding-right: 0; width: 100%; left: 0 !important; }
    .timeline-item:nth-child(even) { padding-left: 64px; padding-right: 0; text-align: left; left: 0 !important; }
    .timeline-dot { left: 16px !important; right: auto !important; }

    .project-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
    .pstat-number { font-size: 2rem; }

    .institution-section .highlight-box { padding: 24px; }

    /* ===== FEATURES PAGE ===== */
    .main-features-grid { grid-template-columns: 1fr; max-width: 440px; margin: 0 auto; }
    .feature-card-lg { padding: 32px 24px; }

    .detail-row { grid-template-columns: 1fr; gap: 32px; margin-bottom: 56px; }
    .detail-row .detail-visual { order: -1; }
    .detail-row.reverse .detail-visual { order: -1; }
    .detail-phone { width: 200px; }
    .detail-text h3 { font-size: 1.35rem; }

    .qr-grid { grid-template-columns: 1fr; gap: 32px; }
    .qr-image { order: -1; text-align: center; }
    .qr-image img { max-width: 400px; margin: 0 auto; }
    .qr-text h3 { font-size: 1.4rem; }

    .accessibility-grid { grid-template-columns: 1fr; gap: 32px; }
    .a11y-phone { width: 200px; }
    .a11y-card { padding: 20px; }

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

    /* ===== APP PAGE ===== */
    .showcase-content { flex-direction: column; text-align: center; }
    .showcase-phone { width: 240px; }
    .showcase-text h3 { font-size: 1.5rem; }
    .showcase-text .app-subtitle { font-size: 1rem; }

    .screenshots-grid { grid-template-columns: repeat(2, 1fr); max-width: 450px; margin: 0 auto; gap: 20px; }

    .app-features-grid { grid-template-columns: 1fr; gap: 40px; }
    .app-feat-phone { width: 220px; }

    .guide-grid { grid-template-columns: 1fr 1fr; }
    .guide-card { padding: 28px 20px; }

    .req-card { padding: 32px 24px; }
    .req-grid { grid-template-columns: 1fr; }

    /* ===== CONTACT PAGE ===== */
    .contact-grid { grid-template-columns: 1fr; }
    .contact-form { padding: 28px; }
    .contact-form h3 { font-size: 1.2rem; }
    .form-row { grid-template-columns: 1fr; }

    .institution-grid { grid-template-columns: 1fr; }
    .inst-card { padding: 32px 24px; }

    .map-wrapper { height: 300px; }

    .faq-grid { max-width: 100%; }
    .faq-question { padding: 18px 20px; font-size: 0.98rem; }
    .faq-item.open .faq-answer { padding: 0 20px 20px; }

    /* ===== PROTOCOL PAGE ===== */
    .intro-grid { grid-template-columns: 1fr; gap: 40px; }
    .intro-visual { order: -1; }
    .protocol-doc { max-width: 300px; margin: 0 auto; padding: 36px 28px; }

    .parties-grid { grid-template-columns: repeat(2, 1fr); }
    .party-card { padding: 32px 20px; }

    .article-item { flex-direction: column; gap: 16px; padding: 28px 24px; }

    .objectives-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; }
    .obj-card { padding: 28px 20px; }

    .scope-grid { grid-template-columns: 1fr; }
    .scope-visual { order: -1; }
    .scope-phone { width: 150px; }

    .protocol-cta h2 { font-size: 1.8rem; }
    .protocol-cta > .container > p { font-size: 0.95rem; }

    /* Highlight boxes */
    .highlight-box { padding: 24px; }
    .highlight-box p { font-size: 0.95rem; }
}

/* ===== SMALL MOBILE (480px) ===== */
@media (max-width: 480px) {
    :root {
        --space-section: 52px;
    }

    .container { padding: 0 16px; }

    .section-title { font-size: 1.6rem; }
    .section-subtitle { font-size: 0.92rem; }
    .section-header { margin-bottom: var(--space-2xl); }
    .section-tag { font-size: 0.72rem; padding: 5px 14px; letter-spacing: 1.5px; }

    .page-hero { padding: 110px 0 44px; }
    .page-hero h1 { font-size: 1.65rem; }
    .page-hero p { font-size: 0.92rem; }
    .page-hero .breadcrumb { font-size: 0.8rem; }

    .btn { padding: 12px 22px; font-size: 0.92rem; }
    .btn-lg { padding: 14px 26px; font-size: 0.98rem; }

    /* Home */
    .hero { padding: calc(var(--navbar-height) + 32px) 0 48px; }
    .hero h1 { font-size: 1.75rem; }
    .hero-desc { font-size: 0.95rem; }
    .hero-badge { font-size: 0.72rem; padding: 6px 12px; gap: 5px; letter-spacing: 0; }
    .hero-visual .phone-mockup { width: 200px; }
    .hero-buttons { flex-direction: column; align-items: center; gap: 10px; }
    .hero-buttons .btn { width: 100%; max-width: 280px; }

    .stats-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .stat-number { font-size: 1.7rem; }
    .stat-label { font-size: 0.82rem; }

    .about-phone { width: 130px; }

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

    .cta-section h2 { font-size: 1.5rem; }

    .a11y-badge-group { grid-template-columns: 1fr; }
    .a11y-info-content h3 { font-size: 1.4rem; }

    .screenshots-grid { gap: 16px; }

    /* About */
    .story-phone { width: 130px; }
    .story-content h3 { font-size: 1.4rem; }

    .timeline-item { padding-left: 52px; }
    .project-stats-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .pstat-number { font-size: 1.7rem; }
    .pstat-item { padding: 24px 12px; }

    /* Features */
    .tech-grid { grid-template-columns: 1fr; }
    .detail-phone { width: 180px; }
    .detail-text h3 { font-size: 1.2rem; }
    .qr-text h3 { font-size: 1.2rem; }
    .a11y-phone { width: 180px; }

    /* App */
    .showcase-phone { width: 200px; }
    .showcase-text h3 { font-size: 1.3rem; }
    .app-feat-phone { width: 190px; }
    .guide-grid { grid-template-columns: 1fr; }
    .guide-card { padding: 24px 16px; }

    /* Contact */
    .contact-form { padding: 20px; }
    .contact-form h3 { font-size: 1.1rem; margin-bottom: 20px; }
    .contact-form input,
    .contact-form textarea,
    .contact-form select {
        padding: 12px 14px;
        font-size: 0.95rem;
    }
    .info-card { padding: 20px; gap: 14px; }
    .info-card .info-icon { width: 44px; height: 44px; }
    .map-wrapper { height: 250px; }
    .faq-question { padding: 16px; font-size: 0.92rem; }
    .faq-item.open .faq-answer { padding: 0 16px 16px; }
    .inst-card { padding: 24px 16px; }

    /* Protocol */
    .intro-content h3 { font-size: 1.4rem; }
    .protocol-doc { padding: 28px 20px; }
    .parties-grid { grid-template-columns: 1fr; }
    .party-card { padding: 28px 16px; }
    .article-item { padding: 20px 16px; }
    .article-number { width: 44px; height: 44px; font-size: 0.95rem; }
    .scope-phone { width: 130px; }
    .scope-text h3 { font-size: 1.3rem; }
    .protocol-cta h2 { font-size: 1.5rem; }

    /* Footer */
    .footer { padding: 40px 0 20px; }
    .footer-grid { gap: 24px; }
    .footer-brand h3 { font-size: 1.1rem; }
    .footer-col h4 { font-size: 0.8rem; margin-bottom: 12px; }
}