/* ====================================
   YARDIMCI CLASS'LAR
   Utility ve helper class'lar
   ==================================== */

/* ---------- SCROLLBAR GİZLEME ---------- */
.hide-scrollbar::-webkit-scrollbar {
    display: none;
}

.hide-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* ---------- DİSPLAY ---------- */
.hidden {
    display: none;
}

.block {
    display: block;
}

.inline-block {
    display: inline-block;
}

.inline {
    display: inline;
}

/* Responsive display */
@media (min-width: 768px) {
    .md\:block {
        display: block;
    }

    .md\:hidden {
        display: none;
    }
}

/* ---------- POSITION ---------- */
.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.sticky {
    position: sticky;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.top-0 {
    top: 0;
}

.right-0 {
    right: 0;
}

.bottom-0 {
    bottom: 0;
}

.left-0 {
    left: 0;
}

.z-10 {
    z-index: 10;
}

.z-20 {
    z-index: 20;
}

.z-30 {
    z-index: 30;
}

.z-40 {
    z-index: 40;
}

.z-50 {
    z-index: 50;
}

.-z-10 {
    z-index: -10;
}

/* ---------- BORDER ---------- */
.border {
    border: 1px solid #e2e8f0;
}

.border-t {
    border-top: 1px solid #f1f5f9;
}

.border-b {
    border-bottom: 1px solid #f1f5f9;
}

.rounded-full {
    border-radius: var(--radius-full);
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.rounded-xl {
    border-radius: var(--radius-xl);
}

/* ---------- BACKGROUND ---------- */
.bg-white {
    background: white;
}

.bg-slate-50 {
    background: #f8fafc;
}

.bg-slate-900 {
    background: var(--primary);
}

.bg-gradient {
    background: linear-gradient(to bottom, #f8fafc, white, white);
}

/* ---------- WIDTH / HEIGHT ---------- */
.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.max-w-7xl {
    max-width: var(--container-xl);
}

.max-w-4xl {
    max-width: 896px;
}

.max-w-3xl {
    max-width: 768px;
}

.max-w-2xl {
    max-width: 672px;
}

/* ---------- OVERFLOW ---------- */
.overflow-hidden {
    overflow: hidden;
}

.overflow-auto {
    overflow: auto;
}

/* ---------- CURSOR ---------- */
.cursor-pointer {
    cursor: pointer;
}

.cursor-default {
    cursor: default;
}

/* ---------- OPACITY ---------- */
.opacity-0 {
    opacity: 0;
}

.opacity-100 {
    opacity: 1;
}

/* ---------- TRANSITION ---------- */
.transition {
    transition: all var(--transition-base);
}

.transition-fast {
    transition: all var(--transition-fast);
}

/* ---------- BOX SHADOW ---------- */
.shadow-sm {
    box-shadow: var(--shadow-sm);
}

.shadow-md {
    box-shadow: var(--shadow-md);
}

.shadow-lg {
    box-shadow: var(--shadow-lg);
}

/* ====================================
   MARGIN UTILITIES
   ==================================== */

/* Margin all */
.m-0 {
    margin: 0 !important;
}

.m-1 {
    margin: var(--spacing-1) !important;
}

.m-2 {
    margin: var(--spacing-2) !important;
}

.m-3 {
    margin: var(--spacing-3) !important;
}

.m-4 {
    margin: var(--spacing-4) !important;
}

.m-5 {
    margin: var(--spacing-5) !important;
}

.m-6 {
    margin: var(--spacing-6) !important;
}

.m-8 {
    margin: var(--spacing-8) !important;
}

.m-10 {
    margin: var(--spacing-10) !important;
}

.m-12 {
    margin: var(--spacing-12) !important;
}

.m-16 {
    margin: var(--spacing-16) !important;
}

.m-20 {
    margin: var(--spacing-20) !important;
}

/* Margin top */
.mt-0 {
    margin-top: 0 !important;
}

.mt-1 {
    margin-top: var(--spacing-1) !important;
}

.mt-2 {
    margin-top: var(--spacing-2) !important;
}

.mt-3 {
    margin-top: var(--spacing-3) !important;
}

.mt-4 {
    margin-top: var(--spacing-4) !important;
}

.mt-5 {
    margin-top: var(--spacing-5) !important;
}

.mt-6 {
    margin-top: var(--spacing-6) !important;
}

.mt-8 {
    margin-top: var(--spacing-8) !important;
}

.mt-10 {
    margin-top: var(--spacing-10) !important;
}

.mt-12 {
    margin-top: var(--spacing-12) !important;
}

.mt-16 {
    margin-top: var(--spacing-16) !important;
}

.mt-20 {
    margin-top: var(--spacing-20) !important;
}

.mt-24 {
    margin-top: var(--spacing-24) !important;
}

/* Margin bottom */
.mb-0 {
    margin-bottom: 0 !important;
}

.mb-1 {
    margin-bottom: var(--spacing-1) !important;
}

.mb-2 {
    margin-bottom: var(--spacing-2) !important;
}

.mb-3 {
    margin-bottom: var(--spacing-3) !important;
}

.mb-4 {
    margin-bottom: var(--spacing-4) !important;
}

.mb-5 {
    margin-bottom: var(--spacing-5) !important;
}

.mb-6 {
    margin-bottom: var(--spacing-6) !important;
}

.mb-8 {
    margin-bottom: var(--spacing-8) !important;
}

.mb-10 {
    margin-bottom: var(--spacing-10) !important;
}

.mb-12 {
    margin-bottom: var(--spacing-12) !important;
}

.mb-16 {
    margin-bottom: var(--spacing-16) !important;
}

.mb-20 {
    margin-bottom: var(--spacing-20) !important;
}

.mb-24 {
    margin-bottom: var(--spacing-24) !important;
}

/* Margin left */
.ml-0 {
    margin-left: 0 !important;
}

.ml-1 {
    margin-left: var(--spacing-1) !important;
}

.ml-2 {
    margin-left: var(--spacing-2) !important;
}

.ml-3 {
    margin-left: var(--spacing-3) !important;
}

.ml-4 {
    margin-left: var(--spacing-4) !important;
}

.ml-5 {
    margin-left: var(--spacing-5) !important;
}

.ml-6 {
    margin-left: var(--spacing-6) !important;
}

.ml-8 {
    margin-left: var(--spacing-8) !important;
}

.ml-10 {
    margin-left: var(--spacing-10) !important;
}

.ml-12 {
    margin-left: var(--spacing-12) !important;
}

.ml-auto {
    margin-left: auto !important;
}

/* Margin right */
.mr-0 {
    margin-right: 0 !important;
}

.mr-1 {
    margin-right: var(--spacing-1) !important;
}

.mr-2 {
    margin-right: var(--spacing-2) !important;
}

.mr-3 {
    margin-right: var(--spacing-3) !important;
}

.mr-4 {
    margin-right: var(--spacing-4) !important;
}

.mr-5 {
    margin-right: var(--spacing-5) !important;
}

.mr-6 {
    margin-right: var(--spacing-6) !important;
}

.mr-8 {
    margin-right: var(--spacing-8) !important;
}

.mr-10 {
    margin-right: var(--spacing-10) !important;
}

.mr-auto {
    margin-right: auto !important;
}

/* Margin x axis (left & right) */
.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.mx-1 {
    margin-left: var(--spacing-1) !important;
    margin-right: var(--spacing-1) !important;
}

.mx-2 {
    margin-left: var(--spacing-2) !important;
    margin-right: var(--spacing-2) !important;
}

.mx-3 {
    margin-left: var(--spacing-3) !important;
    margin-right: var(--spacing-3) !important;
}

.mx-4 {
    margin-left: var(--spacing-4) !important;
    margin-right: var(--spacing-4) !important;
}

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Margin y axis (top & bottom) */
.my-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.my-1 {
    margin-top: var(--spacing-1) !important;
    margin-bottom: var(--spacing-1) !important;
}

.my-2 {
    margin-top: var(--spacing-2) !important;
    margin-bottom: var(--spacing-2) !important;
}

.my-3 {
    margin-top: var(--spacing-3) !important;
    margin-bottom: var(--spacing-3) !important;
}

.my-4 {
    margin-top: var(--spacing-4) !important;
    margin-bottom: var(--spacing-4) !important;
}

.my-5 {
    margin-top: var(--spacing-5) !important;
    margin-bottom: var(--spacing-5) !important;
}

.my-6 {
    margin-top: var(--spacing-6) !important;
    margin-bottom: var(--spacing-6) !important;
}

.my-8 {
    margin-top: var(--spacing-8) !important;
    margin-bottom: var(--spacing-8) !important;
}

.my-10 {
    margin-top: var(--spacing-10) !important;
    margin-bottom: var(--spacing-10) !important;
}

.my-12 {
    margin-top: var(--spacing-12) !important;
    margin-bottom: var(--spacing-12) !important;
}

/* Responsive margin top */
@media (min-width: 768px) {
    .md\:mt-0 {
        margin-top: 0 !important;
    }

    .md\:mt-1 {
        margin-top: var(--spacing-1) !important;
    }

    .md\:mt-2 {
        margin-top: var(--spacing-2) !important;
    }

    .md\:mt-3 {
        margin-top: var(--spacing-3) !important;
    }

    .md\:mt-4 {
        margin-top: var(--spacing-4) !important;
    }

    .md\:mt-6 {
        margin-top: var(--spacing-6) !important;
    }

    .md\:mt-8 {
        margin-top: var(--spacing-8) !important;
    }

    .md\:mt-10 {
        margin-top: var(--spacing-10) !important;
    }

    .md\:mt-12 {
        margin-top: var(--spacing-12) !important;
    }

    .md\:mt-16 {
        margin-top: var(--spacing-16) !important;
    }

    .md\:mb-0 {
        margin-bottom: 0 !important;
    }

    .md\:mb-1 {
        margin-bottom: var(--spacing-1) !important;
    }

    .md\:mb-2 {
        margin-bottom: var(--spacing-2) !important;
    }

    .md\:mb-3 {
        margin-bottom: var(--spacing-3) !important;
    }

    .md\:mb-4 {
        margin-bottom: var(--spacing-4) !important;
    }

    .md\:mb-6 {
        margin-bottom: var(--spacing-6) !important;
    }

    .md\:mb-8 {
        margin-bottom: var(--spacing-8) !important;
    }

    .md\:mb-10 {
        margin-bottom: var(--spacing-10) !important;
    }

    .md\:mb-12 {
        margin-bottom: var(--spacing-12) !important;
    }

    .md\:mb-16 {
        margin-bottom: var(--spacing-16) !important;
    }
}

/* ====================================
   PADDING UTILITIES
   ==================================== */

/* Padding all */
.p-0 {
    padding: 0 !important;
}

.p-1 {
    padding: var(--spacing-1) !important;
}

.p-2 {
    padding: var(--spacing-2) !important;
}

.p-3 {
    padding: var(--spacing-3) !important;
}

.p-4 {
    padding: var(--spacing-4) !important;
}

.p-5 {
    padding: var(--spacing-5) !important;
}

.p-6 {
    padding: var(--spacing-6) !important;
}

.p-8 {
    padding: var(--spacing-8) !important;
}

.p-10 {
    padding: var(--spacing-10) !important;
}

.p-12 {
    padding: var(--spacing-12) !important;
}

.p-16 {
    padding: var(--spacing-16) !important;
}

.p-20 {
    padding: var(--spacing-20) !important;
}

/* Padding top */
.pt-0 {
    padding-top: 0 !important;
}

.pt-1 {
    padding-top: var(--spacing-1) !important;
}

.pt-2 {
    padding-top: var(--spacing-2) !important;
}

.pt-3 {
    padding-top: var(--spacing-3) !important;
}

.pt-4 {
    padding-top: var(--spacing-4) !important;
}

.pt-5 {
    padding-top: var(--spacing-5) !important;
}

.pt-6 {
    padding-top: var(--spacing-6) !important;
}

.pt-8 {
    padding-top: var(--spacing-8) !important;
}

.pt-10 {
    padding-top: var(--spacing-10) !important;
}

.pt-12 {
    padding-top: var(--spacing-12) !important;
}

.pt-16 {
    padding-top: var(--spacing-16) !important;
}

.pt-20 {
    padding-top: var(--spacing-20) !important;
}

/* Padding bottom */
.pb-0 {
    padding-bottom: 0 !important;
}

.pb-1 {
    padding-bottom: var(--spacing-1) !important;
}

.pb-2 {
    padding-bottom: var(--spacing-2) !important;
}

.pb-3 {
    padding-bottom: var(--spacing-3) !important;
}

.pb-4 {
    padding-bottom: var(--spacing-4) !important;
}

.pb-5 {
    padding-bottom: var(--spacing-5) !important;
}

.pb-6 {
    padding-bottom: var(--spacing-6) !important;
}

.pb-8 {
    padding-bottom: var(--spacing-8) !important;
}

.pb-10 {
    padding-bottom: var(--spacing-10) !important;
}

.pb-12 {
    padding-bottom: var(--spacing-12) !important;
}

.pb-16 {
    padding-bottom: var(--spacing-16) !important;
}

.pb-20 {
    padding-bottom: var(--spacing-20) !important;
}

/* Padding left */
.pl-0 {
    padding-left: 0 !important;
}

.pl-1 {
    padding-left: var(--spacing-1) !important;
}

.pl-2 {
    padding-left: var(--spacing-2) !important;
}

.pl-3 {
    padding-left: var(--spacing-3) !important;
}

.pl-4 {
    padding-left: var(--spacing-4) !important;
}

.pl-5 {
    padding-left: var(--spacing-5) !important;
}

.pl-6 {
    padding-left: var(--spacing-6) !important;
}

.pl-8 {
    padding-left: var(--spacing-8) !important;
}

.pl-10 {
    padding-left: var(--spacing-10) !important;
}

/* Padding right */
.pr-0 {
    padding-right: 0 !important;
}

.pr-1 {
    padding-right: var(--spacing-1) !important;
}

.pr-2 {
    padding-right: var(--spacing-2) !important;
}

.pr-3 {
    padding-right: var(--spacing-3) !important;
}

.pr-4 {
    padding-right: var(--spacing-4) !important;
}

.pr-5 {
    padding-right: var(--spacing-5) !important;
}

.pr-6 {
    padding-right: var(--spacing-6) !important;
}

.pr-8 {
    padding-right: var(--spacing-8) !important;
}

.pr-10 {
    padding-right: var(--spacing-10) !important;
}

/* Padding x axis (left & right) */
.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.px-1 {
    padding-left: var(--spacing-1) !important;
    padding-right: var(--spacing-1) !important;
}

.px-2 {
    padding-left: var(--spacing-2) !important;
    padding-right: var(--spacing-2) !important;
}

.px-3 {
    padding-left: var(--spacing-3) !important;
    padding-right: var(--spacing-3) !important;
}

.px-4 {
    padding-left: var(--spacing-4) !important;
    padding-right: var(--spacing-4) !important;
}

.px-5 {
    padding-left: var(--spacing-5) !important;
    padding-right: var(--spacing-5) !important;
}

.px-6 {
    padding-left: var(--spacing-6) !important;
    padding-right: var(--spacing-6) !important;
}

/* Padding y axis (top & bottom) */
.py-0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.py-1 {
    padding-top: var(--spacing-1) !important;
    padding-bottom: var(--spacing-1) !important;
}

.py-2 {
    padding-top: var(--spacing-2) !important;
    padding-bottom: var(--spacing-2) !important;
}

.py-3 {
    padding-top: var(--spacing-3) !important;
    padding-bottom: var(--spacing-3) !important;
}

.py-4 {
    padding-top: var(--spacing-4) !important;
    padding-bottom: var(--spacing-4) !important;
}

.py-5 {
    padding-top: var(--spacing-5) !important;
    padding-bottom: var(--spacing-5) !important;
}

.py-6 {
    padding-top: var(--spacing-6) !important;
    padding-bottom: var(--spacing-6) !important;
}

.py-8 {
    padding-top: var(--spacing-8) !important;
    padding-bottom: var(--spacing-8) !important;
}