/* =========================================================
   TMV2 - 05 COMPONENTS.CSS
   ---------------------------------------------------------
   TR:
   Bu dosya ortak UI bileşenlerini oluşturur.
   Buton, kart, form, tablo, alert, modal gibi tekrar kullanılan
   parçalar burada tanımlanır.

   EN:
   This file defines reusable UI components.
   Buttons, cards, forms, tables, alerts, modals and repeated
   interface elements are handled here.

   KURAL / RULE:
   - Component sınıfları burada yazılır
   - Renk/font doğrudan yazılmaz
   - Semantic değişkenler kullanılır
========================================================= */


/* =========================================================
   BUTTON
   TR: Genel buton yapısı
   EN: Base button structure
========================================================= */

.tmv2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    border: 1px solid transparent;
    border-radius: var(--btn-radius);
    padding: var(--btn-padding-y) var(--btn-padding-x);
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: 1;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
    transition: background-color var(--tmv2-transition-fast), color var(--tmv2-transition-fast), border-color var(--tmv2-transition-fast), transform var(--tmv2-transition-fast), box-shadow var(--tmv2-transition-fast);
}

    .tmv2-btn:hover {
        transform: translateY(-2px);
    }

.tmv2-btn-primary {
    background: var(--btn-primary-bg);
    color: var(--btn-primary-text) !important;
    box-shadow: var(--btn-primary-shadow);
}

    .tmv2-btn-primary:hover {
        background: var(--btn-primary-hover);
        color: var(--btn-primary-text) !important;
    }

.tmv2-btn-outline {
    background: var(--btn-outline-bg);
    color: var(--btn-outline-text) !important;
    border-color: var(--btn-outline-border);
}

    .tmv2-btn-outline:hover {
        background: var(--btn-outline-hover-bg);
        color: var(--btn-outline-hover-text) !important;
        border-color: var(--btn-outline-hover-border);
    }

.tmv2-btn-light {
    background: var(--btn-light-bg);
    color: var(--btn-light-text) !important;
    border-color: var(--btn-light-border);
}

.tmv2-btn-dark {
    background: var(--btn-dark-bg);
    color: var(--btn-dark-text) !important;
}

.tmv2-btn-icon {
    width: 42px;
    height: 42px;
    padding: 0;
    border-radius: var(--tmv2-radius-pill);
}


/* =========================================================
   CARD
   TR: Genel kart bileşeni
   EN: Base card component
========================================================= */

.tmv2-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    transition: transform var(--tmv2-transition-fast), box-shadow var(--tmv2-transition-fast), border-color var(--tmv2-transition-fast);
}

    .tmv2-card:hover {
        transform: translateY(-4px);
        box-shadow: var(--card-shadow-hover);
        border-color: var(--card-border-strong);
    }

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

.tmv2-card-title {
    margin-bottom: var(--tmv2-space-3);
    color: var(--card-title);
    font-weight: var(--tmv2-weight-bold);
}

.tmv2-card-text {
    color: var(--card-text);
}

.tmv2-card-img {
    width: 100%;
    height: 240px;
    object-fit: cover;
}


/* =========================================================
   FORM
   TR: Form input, select, textarea yapıları
   EN: Form input, select, textarea structures
========================================================= */

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

.tmv2-form-label {
    display: inline-block;
    margin-bottom: var(--tmv2-space-2);
    color: var(--form-label);
    font-weight: var(--tmv2-weight-semibold);
}

.tmv2-form-control,
.tmv2-form-select,
.tmv2-form-textarea {
    width: 100%;
    background: var(--form-bg);
    color: var(--form-text);
    border: 1px solid var(--form-border);
    border-radius: var(--form-radius);
    padding: .85rem 1rem;
    font-family: var(--tmv2-font-main);
    font-size: var(--tmv2-font-base);
    outline: none;
    transition: border-color var(--tmv2-transition-fast), box-shadow var(--tmv2-transition-fast), background-color var(--tmv2-transition-fast);
}

    .tmv2-form-control::placeholder,
    .tmv2-form-textarea::placeholder {
        color: var(--form-placeholder);
    }

    .tmv2-form-control:focus,
    .tmv2-form-select:focus,
    .tmv2-form-textarea:focus {
        border-color: var(--form-border-focus);
        box-shadow: var(--form-shadow-focus);
    }

.tmv2-form-textarea {
    min-height: 140px;
    resize: vertical;
}

.tmv2-form-help {
    margin-top: var(--tmv2-space-2);
    font-size: var(--tmv2-font-sm);
    color: var(--form-help);
}


/* =========================================================
   BADGE
   TR: Etiket ve küçük durum göstergeleri
   EN: Badge and small status indicators
========================================================= */

.tmv2-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    border: 1px solid var(--badge-border);
    border-radius: var(--tmv2-radius-pill);
    padding: .4rem .75rem;
    background: var(--badge-bg);
    color: var(--badge-text);
    font-size: var(--tmv2-font-xs);
    font-weight: var(--tmv2-weight-bold);
}

.tmv2-badge-success {
    background: var(--badge-success-bg);
    color: var(--badge-success-text);
}

.tmv2-badge-danger {
    background: var(--badge-danger-bg);
    color: var(--badge-danger-text);
}

.tmv2-badge-warning {
    background: var(--badge-warning-bg);
    color: var(--badge-warning-text);
}

.tmv2-badge-info {
    background: var(--badge-info-bg);
    color: var(--badge-info-text);
}


/* =========================================================
   ALERT
   TR: Bilgilendirme kutuları
   EN: Alert boxes
========================================================= */

.tmv2-alert {
    border: 1px solid var(--alert-border);
    border-radius: var(--alert-radius);
    padding: var(--tmv2-space-4) var(--tmv2-space-5);
    box-shadow: var(--alert-shadow);
    font-weight: var(--tmv2-weight-medium);
}

.tmv2-alert-success {
    background: var(--alert-success-bg);
    color: var(--alert-success-text);
    border-color: var(--alert-success-border);
}

.tmv2-alert-danger {
    background: var(--alert-danger-bg);
    color: var(--alert-danger-text);
    border-color: var(--alert-danger-border);
}

.tmv2-alert-warning {
    background: var(--alert-warning-bg);
    color: var(--alert-warning-text);
    border-color: var(--alert-warning-border);
}

.tmv2-alert-info {
    background: var(--alert-info-bg);
    color: var(--alert-info-text);
    border-color: var(--alert-info-border);
}


/* =========================================================
   DROPDOWN
   TR: Açılır menü yapısı
   EN: Dropdown menu structure
========================================================= */

.tmv2-dropdown {
    position: relative;
}

.tmv2-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: var(--tmv2-z-dropdown);
    min-width: 240px;
    background: var(--dropdown-bg);
    border: 1px solid var(--dropdown-border);
    border-radius: var(--dropdown-radius);
    box-shadow: var(--dropdown-shadow);
    padding: var(--tmv2-space-2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity var(--tmv2-transition-fast), visibility var(--tmv2-transition-fast), transform var(--tmv2-transition-fast);
}

.tmv2-dropdown:hover .tmv2-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tmv2-dropdown-link {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .75rem .9rem;
    border-radius: var(--tmv2-radius-lg);
    color: var(--dropdown-text);
    font-weight: var(--tmv2-weight-medium);
}

    .tmv2-dropdown-link:hover {
        background: var(--dropdown-hover-bg);
        color: var(--dropdown-hover-text);
    }


/* =========================================================
   TABLE
   TR: Modern tablo bileşeni
   EN: Modern table component
========================================================= */

.tmv2-table-wrap {
    overflow-x: auto;
    background: var(--table-bg);
    border: 1px solid var(--table-border);
    border-radius: var(--tmv2-radius-xl);
    box-shadow: var(--tmv2-shadow-xs);
}

.tmv2-table {
    width: 100%;
    border-collapse: collapse;
    color: var(--table-text);
}

    .tmv2-table th,
    .tmv2-table td {
        padding: var(--tmv2-space-4);
        border-bottom: 1px solid var(--table-border);
        text-align: left;
        vertical-align: middle;
    }

    .tmv2-table th {
        background: var(--table-head-bg);
        color: var(--table-head-text);
        font-weight: var(--tmv2-weight-bold);
        font-size: var(--tmv2-font-sm);
    }

    .tmv2-table tbody tr:hover {
        background: var(--table-row-hover);
    }

    .tmv2-table tbody tr:last-child td {
        border-bottom: 0;
    }


/* =========================================================
   BREADCRUMB
   TR: Sayfa yolu gösterimi
   EN: Page path navigation
========================================================= */

.tmv2-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    background: var(--breadcrumb-bg);
    color: var(--breadcrumb-text);
    font-size: var(--tmv2-font-sm);
}

    .tmv2-breadcrumb a {
        color: var(--breadcrumb-link);
        font-weight: var(--tmv2-weight-semibold);
    }

.tmv2-breadcrumb-separator {
    color: var(--breadcrumb-separator);
}


/* =========================================================
   PAGINATION
   TR: Sayfalama sistemi
   EN: Pagination system
========================================================= */

.tmv2-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    flex-wrap: wrap;
}

.tmv2-page-link {
    min-width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pagination-bg);
    color: var(--pagination-text);
    border: 1px solid var(--pagination-border);
    border-radius: var(--tmv2-radius-pill);
    font-weight: var(--tmv2-weight-bold);
    transition: all var(--tmv2-transition-fast);
}

    .tmv2-page-link:hover {
        background: var(--pagination-hover-bg);
        color: var(--tmv2-color-primary);
    }

    .tmv2-page-link.active {
        background: var(--pagination-active-bg);
        color: var(--pagination-active-text);
        border-color: var(--pagination-active-bg);
    }


/* =========================================================
   MODAL
   TR: Modal / dialog altyapısı
   EN: Modal / dialog structure
========================================================= */

.tmv2-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--tmv2-z-modal);
    background: var(--modal-backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--tmv2-space-4);
}

.tmv2-modal {
    width: min(100%, 640px);
    background: var(--modal-bg);
    color: var(--modal-text);
    border: 1px solid var(--modal-border);
    border-radius: var(--modal-radius);
    box-shadow: var(--modal-shadow);
    overflow: hidden;
}

.tmv2-modal-header,
.tmv2-modal-body,
.tmv2-modal-footer {
    padding: var(--tmv2-space-5);
}

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

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


/* =========================================================
   LOADER
   TR: Yüklenme göstergesi
   EN: Loading indicator
========================================================= */

.tmv2-loader {
    width: 42px;
    height: 42px;
    border: 4px solid var(--loader-bg);
    border-top-color: var(--loader-color);
    border-radius: 50%;
    animation: tmv2-spin .8s linear infinite;
}

@keyframes tmv2-spin {
    to {
        transform: rotate(360deg);
    }
}


/* =========================================================
   SKELETON
   TR: Veri yüklenirken görünen iskelet ekran
   EN: Skeleton screen while loading data
========================================================= */

.tmv2-skeleton {
    position: relative;
    overflow: hidden;
    background: var(--skeleton-bg);
    border-radius: var(--tmv2-radius-lg);
}

    .tmv2-skeleton::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, transparent, var(--skeleton-highlight), transparent );
        transform: translateX(-100%);
        animation: tmv2-skeleton 1.4s infinite;
    }

@keyframes tmv2-skeleton {
    to {
        transform: translateX(100%);
    }
}


/* =========================================================
   EMPTY STATE
   TR: Veri bulunamadı / içerik yok ekranı
   EN: No data / no content state
========================================================= */

.tmv2-empty {
    background: var(--empty-bg);
    border: 1px dashed var(--empty-border);
    border-radius: var(--tmv2-radius-2xl);
    padding: var(--tmv2-space-12);
    text-align: center;
}

.tmv2-empty-title {
    color: var(--empty-title);
    font-weight: var(--tmv2-weight-bold);
    margin-bottom: var(--tmv2-space-2);
}

.tmv2-empty-text {
    color: var(--empty-text);
}


/* =========================================================
   TABS
   TR: Sekmeli içerik yapısı
   EN: Tabbed content structure
========================================================= */

.tmv2-tabs {
    display: flex;
    align-items: center;
    gap: .5rem;
    border-bottom: 1px solid var(--tmv2-border);
    margin-bottom: var(--tmv2-space-6);
}

.tmv2-tab {
    padding: .85rem 1rem;
    color: var(--tmv2-text-soft);
    font-weight: var(--tmv2-weight-semibold);
    border-bottom: 2px solid transparent;
}

    .tmv2-tab:hover,
    .tmv2-tab.active {
        color: var(--tmv2-color-primary);
        border-bottom-color: var(--tmv2-color-primary);
    }


/* =========================================================
   ACCORDION
   TR: Açılır kapanır içerik kutuları
   EN: Collapsible content boxes
========================================================= */

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

.tmv2-accordion-item {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--tmv2-radius-xl);
    overflow: hidden;
}

.tmv2-accordion-head {
    padding: var(--tmv2-space-4) var(--tmv2-space-5);
    font-weight: var(--tmv2-weight-bold);
    color: var(--text-heading);
    cursor: pointer;
}

.tmv2-accordion-body {
    padding: 0 var(--tmv2-space-5) var(--tmv2-space-5);
    color: var(--text-soft);
}


/* =========================================================
   SOCIAL ICONS
   TR: Sosyal medya ikonları
   EN: Social media icons
========================================================= */

.tmv2-social {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.tmv2-social-link {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--tmv2-radius-pill);
    background: rgba(var(--tmv2-color-primary-rgb), .12);
    color: var(--tmv2-color-primary) !important;
    transition: all var(--tmv2-transition-fast);
}

    .tmv2-social-link:hover {
        background: var(--tmv2-color-primary);
        color: var(--tmv2-text-inverse) !important;
        transform: translateY(-2px);
    }