/* ========================================
   UNIVERSAL RESPONSIVE BASE CSS
   Tüm platformlara uyumlu temel yapı
======================================== */

/* Reset ve Box Model */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

*::before,
*::after {
    box-sizing: border-box;
}

/* HTML ve Body Temel Ayarları */
html {
    font-size: 16px; /* 1rem = 16px */
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
}

body {
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

/* Responsive Images ve Media */
img,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Container Yapısı */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.container-fluid {
    width: 100%;
    padding: 0 15px;
}

/* Flexible Layout Utilities */
.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -15px;
}

.col {
    flex: 1;
    padding: 0 15px;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
======================================== */

/* Extra Small devices (phones, 576px and down) */
@media (max-width: 575.98px) {
    html {
        font-size: 14px;
    }

    .container {
        padding: 0 10px;
    }

    .container-fluid {
        padding: 0 10px;
    }

    .row {
        margin: 0 -10px;
    }

    .col {
        padding: 0 10px;
    }

    /* Hide/Show utilities */
    .d-xs-none { display: none !important; }
    .d-xs-block { display: block !important; }
    .d-xs-flex { display: flex !important; }
}

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) and (max-width: 767.98px) {
    html {
        font-size: 15px;
    }

    .d-sm-none { display: none !important; }
    .d-sm-block { display: block !important; }
    .d-sm-flex { display: flex !important; }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    html {
        font-size: 16px;
    }

    .d-md-none { display: none !important; }
    .d-md-block { display: block !important; }
    .d-md-flex { display: flex !important; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .d-lg-none { display: none !important; }
    .d-lg-block { display: block !important; }
    .d-lg-flex { display: flex !important; }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: 1140px;
    }

    .d-xl-none { display: none !important; }
    .d-xl-block { display: block !important; }
    .d-xl-flex { display: flex !important; }
}

/* Ultra wide screens (1400px and up) */
@media (min-width: 1400px) {
    .container {
        max-width: 1320px;
    }
}

/* ========================================
   MOBILE FIRST RESPONSIVE UTILITIES
======================================== */

/* Text Alignment */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

@media (max-width: 767.98px) {
    .text-center-mobile { text-align: center; }
    .text-left-mobile { text-align: left; }
}

/* Spacing Utilities */
.p-0 { padding: 0; }
.p-1 { padding: 0.25rem; }
.p-2 { padding: 0.5rem; }
.p-3 { padding: 1rem; }
.p-4 { padding: 1.5rem; }
.p-5 { padding: 3rem; }

.m-0 { margin: 0; }
.m-1 { margin: 0.25rem; }
.m-2 { margin: 0.5rem; }
.m-3 { margin: 1rem; }
.m-4 { margin: 1.5rem; }
.m-5 { margin: 3rem; }

/* Responsive Spacing */
@media (max-width: 767.98px) {
    .p-mobile-0 { padding: 0; }
    .p-mobile-1 { padding: 0.5rem; }
    .p-mobile-2 { padding: 1rem; }

    .m-mobile-0 { margin: 0; }
    .m-mobile-1 { margin: 0.5rem; }
    .m-mobile-2 { margin: 1rem; }
}

/* ========================================
   FORM ELEMENTS RESPONSIVE
======================================== */
input,
textarea,
select,
button {
    font-size: inherit;
    line-height: inherit;
}

@media (max-width: 767.98px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    textarea,
    select {
        width: 100%;
        padding: 12px;
        font-size: 16px; /* iOS zoom engellemek için */
    }
}

/* ========================================
   TABLE RESPONSIVE
======================================== */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767.98px) {
    .table-responsive table {
        min-width: 600px;
    }
}

/* ========================================
   PRINT STYLES
======================================== */
@media print {
    * {
        background: transparent !important;
        color: black !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.4;
    }

    .d-print-none {
        display: none !important;
    }

    .d-print-block {
        display: block !important;
    }
}

/* ========================================
   ACCESSIBILITY & PERFORMANCE
======================================== */
/* Focus indicators */
:focus {
    outline: 2px solid rgba(47, 47, 51, 0);
    outline-offset: 2px;
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: more) {
    * {
        border-color: currentColor;
    }
}

/* ========================================
   UTILITY CLASSES
======================================== */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.w-100 { width: 100%; }
.h-100 { height: 100%; }

/* Responsive width utilities */
@media (max-width: 767.98px) {
    .w-mobile-100 { width: 100% !important; }
    .w-mobile-auto { width: auto !important; }
}