/* =========================================================
   TMV2 - 08 UTILITIES.CSS
   ---------------------------------------------------------
   TR:
   Bu dosya hızlı kullanım için yardımcı (utility) sınıfları içerir.
   Margin, padding, flex, display, shadow gibi tekrar eden
   işlemler burada kısa sınıflarla çözülür.

   EN:
   This file contains utility classes for quick usage.
   Margin, padding, flex, display, shadow and repetitive
   patterns are handled via short classes.

   KURAL / RULE:
   - Component yazılmaz
   - Sadece yardımcı sınıflar yazılır
   - Hızlı geliştirme için kullanılır
========================================================= */


/* =========================================================
   DISPLAY
========================================================= */

.tmv2-d-block {
    display: block;
}

.tmv2-d-inline {
    display: inline;
}

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

.tmv2-d-flex {
    display: flex;
}

.tmv2-d-grid {
    display: grid;
}

.tmv2-d-none {
    display: none;
}


/* =========================================================
   FLEX
========================================================= */

.tmv2-flex {
    display: flex;
}

.tmv2-flex-row {
    flex-direction: row;
}

.tmv2-flex-col {
    flex-direction: column;
}

.tmv2-flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tmv2-flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tmv2-flex-wrap {
    flex-wrap: wrap;
}


/* =========================================================
   GAP
========================================================= */

.tmv2-gap-1 {
    gap: var(--tmv2-space-1);
}

.tmv2-gap-2 {
    gap: var(--tmv2-space-2);
}

.tmv2-gap-3 {
    gap: var(--tmv2-space-3);
}

.tmv2-gap-4 {
    gap: var(--tmv2-space-4);
}

.tmv2-gap-5 {
    gap: var(--tmv2-space-5);
}

.tmv2-gap-6 {
    gap: var(--tmv2-space-6);
}

.tmv2-gap-8 {
    gap: var(--tmv2-space-8);
}


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

.tmv2-m-0 {
    margin: 0;
}

.tmv2-m-1 {
    margin: var(--tmv2-space-1);
}

.tmv2-m-2 {
    margin: var(--tmv2-space-2);
}

.tmv2-m-3 {
    margin: var(--tmv2-space-3);
}

.tmv2-m-4 {
    margin: var(--tmv2-space-4);
}

.tmv2-m-5 {
    margin: var(--tmv2-space-5);
}

.tmv2-m-6 {
    margin: var(--tmv2-space-6);
}

.tmv2-mt-4 {
    margin-top: var(--tmv2-space-4);
}

.tmv2-mb-4 {
    margin-bottom: var(--tmv2-space-4);
}

.tmv2-ml-4 {
    margin-left: var(--tmv2-space-4);
}

.tmv2-mr-4 {
    margin-right: var(--tmv2-space-4);
}

.tmv2-mx-auto {
    margin-left: auto;
    margin-right: auto;
}


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

.tmv2-p-0 {
    padding: 0;
}

.tmv2-p-1 {
    padding: var(--tmv2-space-1);
}

.tmv2-p-2 {
    padding: var(--tmv2-space-2);
}

.tmv2-p-3 {
    padding: var(--tmv2-space-3);
}

.tmv2-p-4 {
    padding: var(--tmv2-space-4);
}

.tmv2-p-5 {
    padding: var(--tmv2-space-5);
}

.tmv2-p-6 {
    padding: var(--tmv2-space-6);
}

.tmv2-pt-4 {
    padding-top: var(--tmv2-space-4);
}

.tmv2-pb-4 {
    padding-bottom: var(--tmv2-space-4);
}

.tmv2-pl-4 {
    padding-left: var(--tmv2-space-4);
}

.tmv2-pr-4 {
    padding-right: var(--tmv2-space-4);
}


/* =========================================================
   WIDTH / HEIGHT
========================================================= */

.tmv2-w-100 {
    width: 100%;
}

.tmv2-h-100 {
    height: 100%;
}

.tmv2-max-w-100 {
    max-width: 100%;
}


/* =========================================================
   TEXT ALIGN
========================================================= */

.tmv2-text-left {
    text-align: left;
}

.tmv2-text-center {
    text-align: center;
}

.tmv2-text-right {
    text-align: right;
}


/* =========================================================
   ROUNDED
========================================================= */

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

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

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

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

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

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


/* =========================================================
   SHADOW
========================================================= */

.tmv2-shadow-xs {
    box-shadow: var(--tmv2-shadow-xs);
}

.tmv2-shadow-sm {
    box-shadow: var(--tmv2-shadow-sm);
}

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

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

.tmv2-shadow-xl {
    box-shadow: var(--tmv2-shadow-xl);
}


/* =========================================================
   BACKGROUND
========================================================= */

.tmv2-bg-white {
    background: #fff;
}

.tmv2-bg-light {
    background: var(--tmv2-bg-surface);
}

.tmv2-bg-muted {
    background: var(--tmv2-bg-muted);
}

.tmv2-bg-primary {
    background: var(--tmv2-color-primary);
    color: var(--tmv2-text-inverse);
}

.tmv2-bg-gradient {
    background: var(--tmv2-gradient-primary);
    color: var(--tmv2-text-inverse);
}


/* =========================================================
   BORDER
========================================================= */

.tmv2-border {
    border: 1px solid var(--tmv2-border);
}

.tmv2-border-0 {
    border: none;
}


/* =========================================================
   POSITION
========================================================= */

.tmv2-relative {
    position: relative;
}

.tmv2-absolute {
    position: absolute;
}

.tmv2-fixed {
    position: fixed;
}


/* =========================================================
   OVERFLOW
========================================================= */

.tmv2-overflow-hidden {
    overflow: hidden;
}

.tmv2-overflow-auto {
    overflow: auto;
}


/* =========================================================
   CURSOR
========================================================= */

.tmv2-pointer {
    cursor: pointer;
}


/* =========================================================
   OPACITY
========================================================= */

.tmv2-opacity-0 {
    opacity: 0;
}

.tmv2-opacity-50 {
    opacity: .5;
}

.tmv2-opacity-100 {
    opacity: 1;
}