/* ============ Root Değerleri & Renk Sistemi ============ */
/* Renkleri isimleriyle tanımla. Yeni renk, var olanın yakınıysa tekrar oluşturma. */
:root {
    /* Nötr palet */
    --white: #ffffff;
    --black: #0b0d10;
    --smoke: #f5f7fa;
    /* açık gri */
    --cloud: #eef2f6;
    /* satır zemin */
    --ash: #c9d1da;
    /* sınır çizgisi */
    --slate: #6b7684;
    /* ikincil metin */
    --graphite: #2b3137;
    /* başlık/metin koyu */

    /* Vurgu paleti */
    --navy: #ff2a1b;
    --steel: #1f4e79;
    --sky: #3fa9f5;
    --emerald: #2ecc71;
    --amber: #ffb400;
    --crimson: #d32f2f;

    --lavender: #e8e8e9;
    --redhead: #ff2a1b;
    /* tablo başlığı kırmızı */
    --grayhead: #ff2a1b;
    /* koyu gri başlık */

    /* --lavender: #E5E3F3;
  --redhead: #b30000;
  --grayhead: #555; */

    /* Tipografi & ölçü */
    --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    --radius: 10px;
    --shadow: 0 1px 2px rgba(0, 0, 0, .05);
    --col-gap: 18px;
    /* sütun aralığı hissi */
    --row-pad-y: 12px;
    /* satır yüksekliği */
    --cell-pad-x: 14px;
    /* hücre iç boşluk - yatay */
    --min-col-width: 120px;
    /* geniş tablolar için minimum sütun */
    --border: 1px solid var(--ash);
}

/* ============ Kapsayıcılar ============ */
.h-table-wrap {
    margin: 16px 0 28px;
}

.h-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-gutter: stable both-edges;
    /* background: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,0) 20px),
              linear-gradient(to left, rgba(0,0,0,0) 0, rgba(0,0,0,0) 20px);
  border: var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow); */
}

/* ============ Tablo Temeli ============ */
.h-table {
    width: 100%;
    border-collapse: separate;
    /* sütun aralığı hissi için */
    border-spacing: 0;
    font-family: var(--font);
    color: var(--graphite);
    background: var(--white);
    min-width: calc(5 * var(--min-col-width));
    /* çok daralmayı engelle */
}

.h-table caption {
    text-align: left;
    padding: 12px 14px;
    color: var(--slate);
    font-size: 0.95rem;
}

/* Başlıklar */
.h-table thead th {
    position: sticky;
    /* mobilde kaydırırken başlık görünür kalsın */
    top: 0;
    z-index: 1;
    text-align: center;
    /* her zaman ortalı */
    white-space: nowrap;
    font-weight: 700;
    letter-spacing: .2px;
    background: var(--smoke);
    padding: calc(var(--row-pad-y) + 2px) var(--cell-pad-x);
    border-bottom: var(--border);
    border-right: 1px solid var(--cloud);
}

/* Hücreler */
.h-table td,
.h-table th {
    padding: var(--row-pad-y) var(--cell-pad-x);
    vertical-align: middle;
    text-align: center;
}

.h-table tbody td {
    border-bottom: 1px solid var(--cloud);
    /* sütun aralığı: ikinci ve sonrası için fazladan sol boşluk */
}

.h-table tbody td+td,
.h-table tfoot th+th,
.h-table tfoot th+td,
.h-table tfoot td+td {
    padding-left: calc(var(--cell-pad-x) + var(--col-gap));
}

/* Son sütunda sağ sınır hattı etkisi */
.h-table thead th:last-child,
.h-table tbody td:last-child,
.h-table tfoot th:last-child,
.h-table tfoot td:last-child {
    border-right: none;
}

/* Alt toplam/foot */
.h-table tfoot th,
.h-table tfoot td {
    background: var(--smoke);
    border-top: var(--border);
    font-weight: 700;
}

/* ============ Faydalı Sınıflar ============ */
.num {
    /* sayısal sütunlar için */
    text-align: right;
    font-variant-numeric: tabular-nums;
    /* kolon hizasını sabitler */
}

/* metin hizaları */
.text-right {
    text-align: right !important;
}

.text-left {
    text-align: left !important;
}

.text-center {
    text-align: center !important;
}

/* genişlik yardımcıları (opsiyonel) */
.col-sm {
    min-width: 120px;
}

.col-md {
    min-width: 160px;
}

.col-lg {
    min-width: 220px;
}

.nowrap {
    white-space: nowrap;
}

/* zebra */
.is-striped tbody tr:nth-child(odd) {
    background: var(--cloud);
}

/* yoğunluk: compact / normal / comfy */
.h-table[data-density="compact"] td,
.h-table[data-density="compact"] th {
    padding-top: 8px;
    padding-bottom: 8px;
}

.h-table[data-density="comfy"] td,
.h-table[data-density="comfy"] th {
    padding-top: 16px;
    padding-bottom: 16px;
}

/* odak/klavye erişilebilirliği */
.h-table-scroll:focus {
    outline: 2px solid var(--sky);
    outline-offset: 2px;
    border-radius: var(--radius);
}

/* bağlantılar ve rozetler */
.h-table a {
    color: var(--steel);
    text-decoration: none;
}

.h-table a:hover {
    text-decoration: underline;
}

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: .8rem;
    line-height: 1.6;
    background: var(--sky);
    color: var(--white);
}

.badge.success {
    background: var(--emerald);
}

.badge.warn {
    background: var(--amber);
    color: var(--black);
}

.badge.danger {
    background: var(--crimson);
}

/* ============ Küçük ekran optimizasyonları ============ */
@media (max-width: 768px) {
    :root {
        --col-gap: 12px;
        --cell-pad-x: 12px;
        --row-pad-y: 10px;
        --min-col-width: 140px;
        /* kaydırma alanı daha kullanılabilir olsun */
    }

    .h-table thead th {
        font-size: .95rem;
    }

    .h-table td,
    .h-table th {
        font-size: .95rem;
    }
}

/* ============ Koyu zeminli bölümde kullanım (opsiyonel) ============ */
.dark-section .h-table-scroll {
    border-color: rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .03);
}

.dark-section .h-table {
    background: transparent;
    color: var(--white);
}

.dark-section .h-table thead th {
    background: rgba(255, 255, 255, .08);
    color: var(--white);
    border-bottom-color: rgba(255, 255, 255, .2);
}

.dark-section .h-table tbody td {
    border-bottom-color: rgba(255, 255, 255, .08);
}

.dark-section .is-striped tbody tr:nth-child(odd) {
    background: rgba(255, 255, 255, .04);
}

.dark-section .h-table tfoot th,
.dark-section .h-table tfoot td {
    background: rgba(255, 255, 255, .08);
}

/* Başlığı koyu şerit isteyen tablolar için */
.is-darkhead thead th {
    background: var(--navy);
    color: var(--white);
    border-bottom-color: rgba(255, 255, 255, .25);
    border-right-color: rgba(255, 255, 255, .15);
}

/* Çok satırlı başlık (TR/EN + birim) */
.th-stacked th {
    line-height: 1.15;
}

.th-stacked .th-title {
    display: block;
    font-weight: 800;
}

.th-stacked .th-sub {
    display: block;
    font-size: .9rem;
    opacity: .9;
}

.th-stacked .th-unit {
    display: block;
    font-size: .85rem;
    letter-spacing: .2px;
    opacity: .8;
}

/* Koyu başlıkta tonlar */
.is-darkhead thead .th-sub,
.is-darkhead thead .th-unit {
    color: rgba(255, 255, 255, .9);
}


/* yalnızca bu tabloya uygulanacak zebra tonu */
.is-striped-lavender tbody tr:nth-child(odd) {
    background: var(--lavender);
}

.is-redhead thead th {
    background: var(--redhead);
    color: var(--white);
    text-align: center;
    border: 1px solid #fff;
}

/* alt açıklama satırı */
.table-note {
    font-size: .9rem;
    margin-top: .5rem;
    color: #333;
}

.table-note strong {
    color: #c00;
}

.is-grayhead thead th {
    background: var(--grayhead);
    color: var(--white);
    text-align: center;
    border: 1px solid #fff;
}

th.blank,
td.blank {
    background-color: #f6f6f6 !important;
}