/* =============================================
   HazırSiteYaptır — Responsive Styles
   Minimal & Elegant Redesign
   ============================================= */

/* =============================================
   Tablet — 1024px
   ============================================= */
@media (max-width: 1024px) {
    :root {
        --section-padding: 100px;
    }

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

    .hero-content h1 {
        font-size: 2.8rem;
    }

    .hero-float {
        display: none;
    }

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

    .pricing-card.popular {
        transform: none;
    }

    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr;
    }

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

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

    .how-it-works-grid {
        flex-wrap: wrap;
    }

    .how-it-works-step {
        max-width: 100%;
        flex: 0 0 calc(50% - 12px);
    }

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

    .contact-grid {
        gap: 40px;
    }

    .about-grid {
        gap: 40px;
    }
}

/* =============================================
   Mobile — 768px
   ============================================= */
@media (max-width: 768px) {
    :root {
        --section-padding: 80px;
    }

    /* Top bar hidden */
    .top-bar {
        display: none;
    }

    /* Navbar mobile */
    .navbar {
        padding: 12px 0;
    }

    .navbar .container {
        flex-wrap: wrap;
    }

    .mobile-toggle {
        display: block;
    }

    .nav-menu {
        display: none;
        flex-direction: column;
        width: 100%;
        order: 3;
        padding-top: 16px;
        border-top: 1px solid var(--border);
        margin-top: 16px;
        gap: 0;
    }

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

    .nav-menu a {
        padding: 14px 0;
        border-bottom: 1px solid var(--border);
        border-radius: 0;
        font-size: 15px;
    }

    .nav-actions {
        order: 2;
    }

    /* Hero mobile */
    .hero {
        padding: 80px 0 60px;
    }

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

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

    .hero-content h1 {
        font-size: 2.4rem;
        line-height: 1.1;
    }

    .hero-content p {
        font-size: 1rem;
    }

    .hero-visual {
        max-width: 440px;
        margin: 0 auto;
    }

    .hero-float {
        display: none;
    }

    .hero-buttons {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }

    .hero-buttons .btn {
        width: 100%;
    }

    .hero-trust {
        justify-content: center;
    }

    /* Section mobile */
    .section-title {
        margin-bottom: 48px;
    }

    .section-title h2 {
        font-size: 1.8rem;
    }

    .section-title p {
        font-size: 0.95rem;
    }

    /* Grids to single column */
    .features-grid,
    .pricing-grid,
    .blog-grid {
        grid-template-columns: 1fr;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    /* Page header mobile */
    .page-header {
        padding: 60px 0 40px;
    }

    .page-header h1 {
        font-size: 1.8rem;
    }

    /* CTA mobile */
    .cta-section {
        padding: 80px 0;
    }

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

    .cta-section p {
        font-size: 1rem;
    }

    /* How It Works */
    .how-it-works-grid {
        flex-direction: column;
        align-items: center;
    }

    .how-it-works-step {
        max-width: 100%;
        flex: none;
        width: 100%;
    }

    /* Stats mobile */
    .stats-counter-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .stat-counter-number {
        font-size: 36px;
    }

    .stat-counter-suffix {
        font-size: 28px;
    }

    /* Testimonials mobile */
    .testimonials-grid {
        grid-template-columns: 1fr;
    }

    /* Why Features mobile */
    .why-features-grid {
        grid-template-columns: 1fr;
    }

    /* Floating buttons mobile */
    .float-btn {
        width: 44px;
        height: 44px;
    }

    .float-btn i {
        font-size: 16px;
    }

    /* Admin responsive */
    .admin-wrapper {
        flex-direction: column;
    }

    .admin-sidebar {
        width: 100%;
        position: relative;
        height: auto;
    }

    .admin-content {
        margin-left: 0;
    }

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

    /* Dashboard responsive */
    .dashboard-wrapper {
        flex-direction: column;
    }

    .dashboard-sidebar {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--border);
        padding: 15px 0;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        justify-content: center;
    }

    .dashboard-sidebar a {
        padding: 8px 15px;
    }

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

/* =============================================
   Small Mobile — 480px
   ============================================= */
@media (max-width: 480px) {
    :root {
        --section-padding: 64px;
    }

    .container {
        padding: 0 16px;
    }

    .hero {
        padding: 64px 0;
    }

    .hero-content h1 {
        font-size: 2rem;
    }

    .hero-label {
        font-size: 12px;
        padding: 5px 12px;
    }

    .pricing-header .price {
        font-size: 36px;
    }

    .auth-card {
        padding: 28px;
    }

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

    .dashboard-stats {
        grid-template-columns: 1fr;
    }

    .stats-counter-grid {
        grid-template-columns: 1fr;
    }

    .stat-counter-number {
        font-size: 32px;
    }

    .stat-counter-suffix {
        font-size: 24px;
    }

    .stats-section {
        padding: 48px 0;
    }

    .feature-card {
        padding: 32px 24px;
    }

    .how-it-works-step {
        padding: 36px 24px 32px;
    }

    .step-number {
        font-size: 48px;
        top: 16px;
        left: 20px;
    }

    .blog-card-body {
        padding: 20px;
    }

    .testimonial-card {
        padding: 28px 24px;
    }
}