/* ==========================================================
   ROBOWALL V2
   RESPONSIVE
========================================================== */


/* ==========================================================
   1200 PX ALTI
========================================================== */

@media (max-width: 1200px) {

    :root {
        --container: 1120px;
    }

    .navbar-links {
        gap: 20px;
    }

    .navbar-links a {
        font-size: 12px;
    }

    .hero-container {
        gap: 48px;
    }

    .hero-image-frame {
        height: 520px;
    }

    .process-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .process-grid::before {
        display: none;
    }

}


/* ==========================================================
   1000 PX ALTI — TABLET
========================================================== */

@media (max-width: 1000px) {

    section {
        padding: 95px 0;
    }

    .site-header {
        background:
            rgba(2, 7, 15, 0.94);
    }

    .navbar {
        min-height: 76px;
    }

    .mobile-menu-button {
        display: grid;
    }

    .navbar-offer-button {
        display: none;
    }

    .navbar-links {
        position: absolute;

        top: 76px;
        right: 0;
        left: 0;

        padding: 24px;

        display: none;
        flex-direction: column;
        align-items: stretch;

        gap: 0;

        background:
            rgba(3, 10, 20, 0.98);

        border-top:
            1px solid
            rgba(45, 169, 255, 0.14);

        border-bottom:
            1px solid
            rgba(45, 169, 255, 0.14);

        backdrop-filter: blur(18px);
    }

    .navbar-links.open {
        display: flex;
    }

    .navbar-links a {
        padding: 15px 0;

        font-size: 13px;

        text-align: center;
    }

    .navbar-links a::after {
        bottom: 7px;
    }

    .hero-section {
        min-height: auto;

        padding:
            125px 0
            75px;
    }

    .hero-container {
        grid-template-columns:
            1fr;

        gap: 58px;
    }

    .hero-content {
        text-align: center;
    }

    .hero-label {
        margin-right: auto;
        margin-left: auto;
    }

    .hero-title {
        margin-right: auto;
        margin-left: auto;
    }

    .hero-description {
        margin-right: auto;
        margin-left: auto;
    }

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

    .hero-visual {
        width: 100%;
    }

    .hero-image-frame {
        max-width: 820px;

        height: 500px;

        margin: auto;

        transform: none;
    }

    .hero-image-frame:hover {
        transform:
            translateY(-6px);
    }

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

    .hero-stat:nth-child(2) {
        border-right: 0;
    }

    .hero-stat:nth-child(-n + 2) {
        border-bottom:
            1px solid
            rgba(255, 255, 255, 0.08);
    }

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

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

    .project-card {
        min-height: 420px;
    }

    .about-container {
        grid-template-columns:
            1fr;

        gap: 56px;
    }

    .about-content {
        text-align: center;
    }

    .about-content p {
        margin-right: auto;
        margin-left: auto;
    }

    .about-content .primary-button {
        margin-right: auto;
        margin-left: auto;
    }

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

    .contact-box {
        grid-template-columns:
            1fr;

        gap: 32px;

        text-align: center;
    }

    .contact-content p {
        margin-right: auto;
        margin-left: auto;
    }

    .contact-actions {
        width: min(100%, 420px);

        margin: auto;
    }

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

}


/* ==========================================================
   700 PX ALTI — TELEFON
========================================================== */

@media (max-width: 700px) {

    :root {
        --radius: 17px;
    }

    body {
        background:
            radial-gradient(
                circle at 50% 0%,
                rgba(0, 133, 255, 0.12),
                transparent 32%
            ),
            linear-gradient(
                180deg,
                #04070d,
                #07111f
            );
    }

    section {
        padding:
            78px 0;
    }

    .container {
        width: min(92%, 620px);
    }

    .navbar {
        min-height: 70px;
    }

    .navbar-links {
        top: 70px;
    }

    .brand-mark {
        width: 39px;
        height: 39px;

        font-size: 25px;
    }

    .brand-copy strong {
        font-size: 14px;

        letter-spacing: 3px;
    }

    .brand-copy small {
        font-size: 6px;

        letter-spacing: 1.7px;
    }

    .hero-section {
        padding:
            108px 0
            62px;
    }

    .hero-title {
        font-size:
            clamp(
                42px,
                13vw,
                58px
            );

        letter-spacing: -2.7px;
    }

    .hero-description {
        font-size: 14px;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .primary-button,
    .secondary-button,
    .outline-button {
        width: 100%;
    }

    .hero-image-frame {
        height: 385px;

        border-radius: 20px;
    }

    .hero-image-frame img {
        object-position:
            63% center;
    }

    .floating-card {
        min-width: auto;

        padding:
            10px 12px;
    }

    .floating-card-top {
        top: 14px;
        right: 14px;
    }

    .floating-card-bottom {
        left: 14px;
        bottom: 14px;
    }

    .floating-card-icon {
        width: 36px;
        height: 36px;
    }

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

    .hero-stat {
        min-height: 84px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(255, 255, 255, 0.08);
    }

    .hero-stat:last-child {
        border-bottom: 0;
    }

    .hero-stat:nth-child(-n + 2) {
        border-bottom:
            1px solid
            rgba(255, 255, 255, 0.08);
    }

    .scroll-indicator {
        display: none;
    }

    .neon-wave {
        width: 540px;
        height: 250px;

        opacity: 0.64;
    }

    .neon-wave-left {
        left: -390px;
    }

    .neon-wave-right {
        right: -390px;
    }

    .section-heading h2,
    .about-content h2,
    .contact-content h2 {
        font-size:
            clamp(
                34px,
                10vw,
                46px
            );

        letter-spacing: -1.8px;
    }

    .section-heading p {
        font-size: 14px;
    }

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

    .service-card {
        min-height: 285px;
    }

    .section-heading-row {
        align-items: flex-start;
        flex-direction: column;
    }

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

    .project-card {
        min-height: 365px;
    }

    .project-content {
        padding: 24px;
    }

    .project-content h3 {
        font-size: 26px;
    }

    .project-content a {
        opacity: 1;

        transform: none;
    }

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

    .process-card {
        min-height: 205px;
    }

    .about-values {
        grid-template-columns:
            1fr;
    }

    .about-value-card {
        min-height: 195px;
    }

    .contact-section {
        padding:
            28px 0
            80px;
    }

    .contact-box {
        padding:
            34px 24px;

        border-radius: 20px;
    }

    .footer-container {
        grid-template-columns:
            1fr;

        gap: 38px;
    }

    .footer-brand {
        max-width: 100%;
    }

    .footer-bottom {
        flex-direction: column;

        text-align: center;
    }

    .ai-assistant-button {
        right: 14px;
        bottom: 14px;

        min-height: 52px;

        padding:
            7px 14px
            7px 7px;
    }

    .ai-assistant-icon {
        width: 37px;
        height: 37px;
    }

    .ai-assistant-copy small {
        display: none;
    }

}


/* ==========================================================
   430 PX ALTI — KÜÇÜK TELEFON
========================================================== */

@media (max-width: 430px) {

    .brand-copy small {
        display: none;
    }

    .hero-label {
        max-width: 100%;

        font-size: 8px;
        letter-spacing: 1.4px;
    }

    .hero-title {
        font-size: 40px;
    }

    .hero-image-frame {
        height: 330px;
    }

    .floating-card strong {
        font-size: 9px;
    }

    .floating-card small {
        display: none;
    }

    .hero-stat {
        padding:
            18px 20px;
    }

    .service-card {
        padding: 25px;
    }

    .service-card a {
        left: 25px;
    }

    .project-card {
        min-height: 330px;
    }

    .contact-content h2 {
        font-size: 34px;
    }

}


/* ==========================================================
   HAREKET AZALTMA TERCİHİ
========================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;
    }

}