/**
 * Royal Teknik - Responsive Styles
 */

/* ======================================
   Large Devices (Desktops, less than 1200px)
====================================== */
@media (max-width: 1199.98px) {
    .container {
        max-width: 960px;
    }
    
    .cs-hero .col-xl-7 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .cs-hero .col-xl-5 {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .cs-hero_title {
        font-size: 3rem;
    }
    
    .cs-footer_top_in {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ======================================
   Medium Devices (Tablets, less than 992px)
====================================== */
@media (max-width: 991.98px) {
    .container {
        max-width: 720px;
    }
    
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    /* Preloader Mobil */
    #preloader {
        padding: 15px;
    }
    
    .preloader-logo {
        max-width: min(180px, 55vw);
        max-height: min(70px, 10vh);
    }
    
    .loader {
        width: 40px;
        height: 40px;
    }
    
    .loader-inner {
        width: 24px;
        height: 24px;
    }
    
    /* Header */
    .cs-header {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
        left: 0;
        right: 0;
    }
    
    .cs-top_bar {
        display: none;
    }
    
    .cs-nav {
        display: none;
    }
    
    .cs-main_header {
        padding: 10px 15px;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    .cs-main_header .container {
        width: 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
        margin: 0;
    }
    
    .cs-main_header_in {
        width: 100%;
        max-width: 100%;
        overflow: hidden;
    }
    
    .cs-main_header_right .cs-btn {
        display: none;
    }
    
    .cs-menu_toggle {
        display: flex;
    }
    
    .cs-menu_toggle span {
        background: #ffffff;
    }
    
    /* Hero */
    .cs-hero.cs-style6 {
        min-height: auto;
        padding: 70px 0 60px;
        margin-top: 0;
    }
    
    .cs-hero .row {
        flex-direction: column;
    }
    
    .cs-hero .col-xl-7,
    .cs-hero .col-xl-5 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    .cs-hero_text {
        text-align: center;
        margin-bottom: 40px;
    }
    
    .cs-hero_title {
        font-size: 2.5rem;
    }
    
    .cs-hero_img > img {
        max-width: 70%;
        margin: 0 auto;
    }
    
    /* Page Hero */
    .page-hero {
        padding: 90px 0 60px;
        margin-top: 0;
    }
    
    .page-hero-content h1 {
        font-size: 2rem;
    }
    
    /* Sections */
    .cs-section {
        padding: 60px 0;
    }
    
    .cs-section_title {
        font-size: 2rem;
    }
    
    /* Services */
    .cs-services_grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Stats */
    .cs-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Footer */
    .cs-footer_top_in {
        grid-template-columns: 1fr;
        text-align: center;
    }
    
    .cs-footer_widget_title::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .cs-footer_contact_list li {
        justify-content: center;
    }
    
    .cs-footer .cs-social_btns {
        justify-content: center;
    }
    
    .cs-footer_bottom_in {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    /* About */
    .cs-about {
        padding: 60px 0;
    }
    
    .cs-about .row {
        flex-direction: column !important;
    }
    
    .cs-about .col-lg-6 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        margin-bottom: 40px;
    }
    
    .cs-about .col-lg-6:last-child {
        margin-bottom: 0;
    }
    
    .cs-about_text {
        max-width: 100%;
        padding: 0 15px;
    }
    
    .cs-about_text p {
        font-size: 1rem;
        line-height: 1.8;
        margin-bottom: 20px;
    }
    
    .cs-about_img {
        margin-bottom: 20px;
        padding: 0 15px;
    }
    
    .cs-about_experience {
        position: static;
        margin-top: 20px;
        display: inline-block;
        left: auto;
        bottom: auto;
    }
    
    /* Blog */
    .cs-blog_grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Page Header */
    .cs-page_title {
        font-size: 2.5rem;
    }
    
    /* Partners - Tablet */
    .cs-partners {
        padding: 60px 0;
    }
    
    .cs-partners_heading h3 {
        font-size: 1.3rem;
    }
    
    .cs-logo_slider .swiper-slide {
        padding: 0 20px;
        height: 110px;
    }
    
    .cs-logo_slider .swiper-slide a,
    .cs-logo_slider .swiper-slide > img {
        min-width: 120px;
        min-height: 70px;
    }
    
    .cs-logo_slider img {
        max-height: 60px;
        max-width: 140px;
    }
}

/* ======================================
   Small Devices (Landscape phones, less than 768px)
====================================== */
@media (max-width: 767.98px) {
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    .container {
        max-width: 540px;
        overflow-x: hidden;
    }
    
    /* Header */
    .cs-header {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    .cs-main_header {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    .cs-main_header .container {
        width: 100%;
        max-width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .cs-main_header_in {
        width: 100%;
        max-width: 100%;
    }
    
    h1 { font-size: 2.25rem; }
    h2 { font-size: 1.875rem; }
    h3 { font-size: 1.5rem; }
    
    /* Hero */
    .cs-hero.cs-style6 {
        padding: 100px 0 50px;
    }
    
    .cs-hero_title {
        font-size: 2rem;
    }
    
    .cs-hero_subtitle {
        font-size: 1rem;
    }
    
    .cs-hero_img > img {
        max-width: 80%;
    }
    
    .cs-hero_video_btn {
        width: 60px;
        height: 60px;
    }
    
    /* Partners/Logo Slider - Mobile */
    .cs-partners {
        padding: 50px 0;
    }
    
    .cs-partners_heading {
        margin-bottom: 35px;
    }
    
    .cs-partners_heading h3 {
        font-size: 1.15rem;
    }
    
    .cs-logo_slider {
        padding: 10px 0;
    }
    
    .cs-logo_slider .swiper-slide {
        height: 100px;
        padding: 0 15px;
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
        will-change: transform;
    }
    
    .cs-logo_slider .swiper-slide a,
    .cs-logo_slider .swiper-slide > img {
        padding: 15px;
        min-width: 110px;
        min-height: 65px;
        border-radius: 8px;
    }
    
    .cs-logo_slider .swiper-wrapper {
        -webkit-transform-style: preserve-3d;
        transform-style: preserve-3d;
    }
    
    .cs-logo_slider img {
        max-height: 50px;
        max-width: 130px;
        -webkit-user-drag: none;
        -webkit-touch-callout: none;
    }
    
    /* Services */
    .cs-services_grid {
        grid-template-columns: 1fr;
    }
    
    .cs-service_card {
        padding: 25px;
    }
    
    /* Stats */
    .cs-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
    
    .cs-stat_number {
        font-size: 2.5rem;
    }
    
    /* Contact Form */
    .cs-contact_form {
        padding: 30px 20px;
    }
    
    .cs-form_group.cs-half {
        grid-template-columns: 1fr;
    }
    
    /* Blog */
    .cs-blog_grid {
        grid-template-columns: 1fr;
    }
    
    /* Brands */
    .cs-brand_grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* FAQ */
    .cs-faq_question {
        padding: 15px 20px;
        font-size: 1rem;
    }
    
    .cs-faq_answer_content {
        padding: 0 20px 20px;
    }
    
    /* Contact Float */
    .cs-contact_float {
        bottom: 20px;
        right: 20px;
    }
    
    .cs-contact_float_btn {
        width: 55px;
        height: 55px;
    }
    
    .cs-contact_float_item span {
        display: none;
    }
    
    .cs-contact_float_item {
        padding: 12px;
    }
    
    /* Translate Widget */
    .cs-translate_widget {
        bottom: 20px;
        left: 20px;
    }
    
    /* Page Header */
    .cs-page_header {
        padding: 120px 0 60px;
    }
    
    .cs-page_title {
        font-size: 2rem;
    }
    
    .cs-breadcrumb {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    /* Scroll Top */
    .cs-scroll_top {
        bottom: 85px;
        right: 20px;
        width: 40px;
        height: 40px;
    }
}

/* ======================================
   Extra Small Devices (Portrait phones, less than 576px)
====================================== */
@media (max-width: 575.98px) {
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    .container {
        padding: 0 15px;
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Preloader Küçük Mobil */
    #preloader {
        padding: 10px;
        gap: 15px;
    }
    
    .preloader-logo {
        max-width: min(150px, 50vw);
        max-height: min(60px, 8vh);
    }
    
    .loader {
        width: 36px;
        height: 36px;
    }
    
    .loader-inner {
        width: 22px;
        height: 22px;
    }
    
    h1 { font-size: 1.875rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }
    
    /* Header */
    .cs-header {
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    .cs-main_header {
        padding: 10px 0;
        width: 100%;
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    .cs-main_header .container {
        width: 100%;
        max-width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        margin: 0;
    }
    
    .cs-main_header_in {
        width: 100%;
        max-width: 100%;
    }
    
    .cs-site_branding img {
        max-height: 40px;
    }
    
    /* Hero */
    .cs-hero.cs-style6 {
        padding: 90px 0 40px;
    }
    
    .cs-hero_title {
        font-size: 1.75rem;
    }
    
    .cs-hero_subtitle {
        font-size: 0.95rem;
    }
    
    .cs-text_btn {
        font-size: 1rem;
    }
    
    /* Sections */
    .cs-section {
        padding: 50px 0;
    }
    
    .cs-section_heading {
        margin-bottom: 35px;
    }
    
    .cs-section_subtitle {
        font-size: 0.75rem;
        padding: 0;
    }
    
    .cs-section_subtitle::before,
    .cs-section_subtitle::after {
        display: none;
    }
    
    .cs-section_title {
        font-size: 1.5rem;
    }
    
    /* Services */
    .cs-service_icon {
        width: 65px;
        height: 65px;
        font-size: 1.5rem;
    }
    
    .cs-service_title {
        font-size: 1.1rem;
    }
    
    /* Stats */
    .cs-stat_item {
        padding: 20px 15px;
    }
    
    .cs-stat_number {
        font-size: 2rem;
    }
    
    .cs-stat_text {
        font-size: 0.85rem;
    }
    
    /* Reviews */
    .cs-review_card {
        padding: 20px;
    }
    
    .cs-reviews_rating .stars {
        font-size: 1.25rem;
    }
    
    /* Contact Form */
    .cs-contact_form {
        padding: 25px 15px;
        border-radius: var(--radius-lg);
    }
    
    .cs-form_input {
        padding: 12px 15px;
    }
    
    .cs-form_submit {
        padding: 14px 25px;
        font-size: 1rem;
    }
    
    /* Blog */
    .cs-blog_thumb {
        height: 180px;
    }
    
    .cs-blog_content {
        padding: 20px;
    }
    
    .cs-blog_title {
        font-size: 1.1rem;
    }
    
    .cs-blog_meta {
        flex-direction: column;
        gap: 8px;
    }
    
    /* Brands */
    .cs-brand_grid {
        grid-template-columns: 1fr;
    }
    
    .cs-brand_card {
        padding: 30px 20px;
    }
    
    /* Footer */
    .cs-footer_top {
        padding: 50px 0 30px;
    }
    
    .cs-footer_widget_title {
        font-size: 1.1rem;
        margin-bottom: 20px;
    }
    
    .cs-footer_widget_menu a,
    .cs-footer_contact_list li {
        font-size: 0.9rem;
    }
    
    .cs-copyright,
    .cs-footer_bottom_links {
        font-size: 0.8rem;
    }
    
    /* Mobile Menu */
    .cs-mobile_menu {
        max-width: 100%;
    }
    
    /* Video Modal */
    .cs-video_modal_content {
        width: 95%;
    }
    
    .cs-video_modal_close {
        top: -40px;
        font-size: 2rem;
    }
    
    /* Page Header */
    .cs-page_header {
        padding: 100px 0 50px;
    }
    
    .cs-page_title {
        font-size: 1.75rem;
    }
    
    /* Partners Slider */
    .cs-logo_slider img {
        max-height: 40px;
        max-width: 100px;
    }
}

/* ======================================
   Print Styles
====================================== */
@media print {
    .cs-header,
    .cs-contact_float,
    .cs-translate_widget,
    .cs-scroll_top,
    #preloader {
        display: none !important;
    }
    
    .cs-hero.cs-style6 {
        min-height: auto;
        padding: 50px 0;
    }
    
    .cs-hero.cs-style6::before {
        display: none;
    }
    
    body {
        color: #000;
        background: #fff;
    }
    
    a {
        text-decoration: underline;
    }
}

/* ======================================
   High Resolution Displays
====================================== */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .cs-hero.cs-style6 {
        background-size: cover;
    }
}

/* ======================================
   Reduced Motion
====================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
}

/* ======================================
   Dark Mode Support (Optional)
====================================== */
@media (prefers-color-scheme: dark) {
    /* Uncomment to enable dark mode
    :root {
        --dark-color: #f8f9fa;
        --light-color: #1a1a2e;
        --white: #16213e;
        --gray-100: #1a1a2e;
        --gray-200: #212529;
        --gray-800: #f8f9fa;
    }
    
    body {
        background-color: #0a0a14;
        color: #e9ecef;
    }
    */
}

/* ======================================
   Landscape Orientation on Mobile
====================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .cs-hero.cs-style6 {
        min-height: auto;
        padding: 80px 0 40px;
    }
    
    .cs-hero_title {
        font-size: 1.5rem;
    }
    
    .cs-hero_img {
        display: none;
    }
}

/* ======================================
   Touch Device Optimizations
====================================== */
@media (hover: none) and (pointer: coarse) {
    .cs-nav_list > li > a::after {
        display: none;
    }
    
    .cs-service_card:hover {
        transform: none;
    }
    
    .cs-blog_card:hover {
        transform: none;
    }
    
    .cs-brand_card:hover {
        transform: none;
    }
    
    .cs-contact_float_item:hover {
        transform: none;
    }
}

/* ======================================
   IE11 Fallbacks
====================================== */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
    .cs-service_card,
    .cs-blog_card,
    .cs-brand_card,
    .cs-review_card {
        display: block;
    }
    
    .cs-services_grid,
    .cs-blog_grid,
    .cs-brand_grid,
    .cs-stats,
    .cs-footer_top_in {
        display: flex;
        flex-wrap: wrap;
    }
    
    .cs-services_grid > *,
    .cs-blog_grid > *,
    .cs-brand_grid > * {
        flex: 0 0 calc(33.333% - 20px);
        margin: 10px;
    }
}