/**
 * chem-compat.css — Kimyasal Uyumluluk Tablosu (page-kimyasal-uyumluluk.php).
 *
 * Genel sınıflar (.section, .container, .section-title, .btn-hero) yeniden
 * tanımlanmaz; burada yalnız sayfaya özgü parçalar var.
 *
 * Tablolar iki yönlü kaydırılabilir: dar ekranda yatay scroll KENDİ kabında
 * kalır (gövde asla yatay kaymaz), malzeme/kimyasal sütunu sticky olarak solda
 * durur ki hangi satıra baktığınız kaybolmasın.
 */

/* Sayfa genişliği — 1200px. Genel .container 1720px'e kadar açılıyor; bu sayfada
   tablo/araç tam genişlikte dağılmasın diye bölümler blog/hakkımızda ile AYNI
   ölçüde sınırlanır. (Hero .phero kendi tam-genişlik bileşenidir; rehber/sınır
   bölümleri zaten .chem-prose = 820px okuma kolonu — onlara dokunulmaz.) */
.chem > .container,
.chem-featured > .container,
.chem-next > .container { max-width: var(--container-xl); }

/* Bölüm açıklaması — components.css'te yok, burada tanımlı. */
.section-lead {
    max-width: 68ch;
    margin-top: var(--space-3);
    color: var(--color-text-muted);
    line-height: var(--leading-normal);
}

/* ── Arama alanları ─────────────────────────────────────────────────────── */
.chem-tool { margin-top: var(--space-8); }

.chem-tool__inputs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-4);
}

.chem-field__label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.chem-field__box { position: relative; }

.chem-field__input {
    width: 100%;
    padding: var(--space-3) var(--space-10) var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: #fff;
    font: inherit;
    font-size: var(--text-base);
    color: var(--color-navy);
    transition: border-color var(--duration-fast) var(--ease-default),
                box-shadow var(--duration-fast) var(--ease-default);
}
.chem-field__input::placeholder { color: var(--color-text-muted); opacity: 0.7; }
.chem-field__input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgb(22 83 153 / 0.15);
}

.chem-field__clear {
    position: absolute;
    top: 50%;
    right: var(--space-3);
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    border: none;
    border-radius: var(--radius-full);
    background-color: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}
.chem-field__clear:hover { background-color: var(--color-border); color: var(--color-navy); }

/* Öneri listesi */
.chem-field__list {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 288px;
    overflow-y: auto;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background-color: #fff;
    box-shadow: 0 12px 32px rgb(15 23 42 / 0.14);
    list-style: none;
}
.chem-field__list li {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--color-navy);
    cursor: pointer;
}
.chem-field__list li:hover,
.chem-field__list li.is-active { background-color: var(--color-surface); }
.chem-field__en { font-size: var(--text-xs); color: var(--color-text-muted); }

.chem-tool__empty,
.chem-tool__noscript {
    margin-top: var(--space-6);
    padding: var(--space-5);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-lg);
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ── Tablolar ───────────────────────────────────────────────────────────── */
.chem-tool__tablewrap,
.chem-featured__scroll {
    margin-top: var(--space-6);
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background-color: #fff;
    -webkit-overflow-scrolling: touch;
}

.chem-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
.chem-table th,
.chem-table td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    white-space: nowrap;
}
.chem-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background-color: var(--color-navy);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.chem-table thead th a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Sol sütun sabit — yatay kaydırırken satırın kimliği kaybolmasın. */
.chem-table__mat {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #fff;
    font-weight: 600;
    color: var(--color-navy);
}
.chem-table thead .chem-table__mat { z-index: 3; background-color: var(--color-navy); }
.chem-table tbody tr:nth-child(even) .chem-table__mat { background-color: var(--color-surface); }
.chem-table tbody tr:nth-child(even) { background-color: var(--color-surface); }

.chem-table__en {
    display: block;
    font-size: var(--text-xs);
    font-weight: 400;
    color: var(--color-text-muted);
}

/* Malzeme grubu ayırıcı satırı */
.chem-table__grouprow th {
    background-color: var(--color-surface);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-primary);
}

.chem-cell { text-align: center; }
.chem-table__link { width: 44px; text-align: center; }
.chem-table__link a { display: inline-grid; place-items: center; color: var(--color-primary); }
.chem-table__link .icon { width: 16px; height: 16px; }

/* ── Derece rozetleri ───────────────────────────────────────────────────── */
.chem-badge {
    display: inline-grid;
    place-items: center;
    min-width: 28px;
    height: 28px;
    padding-inline: var(--space-2);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1;
}
/* Renkler yalnız başına anlam taşımaz: harf (A/B/C/D) her zaman görünür ve
   title niteliği metinle açıklar — renk körlüğü için erişilebilir kalır. */
.chem-badge--a { background-color: #dcfce7; color: #166534; }
.chem-badge--b { background-color: #dbeafe; color: #1e40af; }
.chem-badge--c { background-color: #fef3c7; color: #92400e; }
.chem-badge--d { background-color: #fee2e2; color: #991b1b; }
.chem-badge--x { background-color: var(--color-surface); color: var(--color-text-muted); }

/* ── Açıklama (legend) ──────────────────────────────────────────────────── */
.chem-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    margin-top: var(--space-6);
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    background-color: var(--color-surface);
    list-style: none;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}
.chem-legend li { display: flex; align-items: center; gap: var(--space-2); }
.chem-legend strong { color: var(--color-navy); }

.chem-featured__note {
    margin-top: var(--space-5);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ── Metin bölümleri ────────────────────────────────────────────────────── */
.chem-prose { max-width: 820px; }
.chem-prose h3 {
    margin-top: var(--space-10);
    margin-bottom: var(--space-3);
    font-size: var(--text-xl);
    color: var(--color-navy);
}
.chem-prose p {
    margin-bottom: var(--space-4);
    line-height: var(--leading-loose);
}
.chem-prose a {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.chem-list {
    margin: var(--space-4) 0 var(--space-6);
    padding-left: var(--space-6);
    list-style: decimal;
    line-height: var(--leading-loose);
}
.chem-list li { margin-top: var(--space-3); }
.chem-list li::marker { color: var(--color-primary); font-weight: 700; }

.chem-disclaimer {
    padding: var(--space-5);
    border-left: 3px solid var(--color-primary);
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    background-color: #fff;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

/* ── İlgili rehberler ───────────────────────────────────────────────────── */
.chem-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
    margin-top: var(--space-6);
    list-style: none;
}
.chem-links__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    height: 100%;
    padding: var(--space-5) var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background-color: #fff;
    transition: border-color var(--duration-fast) var(--ease-default),
                transform var(--duration-fast) var(--ease-default);
}
.chem-links__link:hover { border-color: var(--color-primary); transform: translateY(-2px); }
.chem-links__title { font-weight: 700; color: var(--color-navy); }
.chem-links__desc { font-size: var(--text-sm); color: var(--color-text-muted); }

/* ── CTA ────────────────────────────────────────────────────────────────── */
.chem-cta {
    margin-top: var(--space-10);
    padding: var(--space-8);
    border-radius: var(--radius-xl);
    background-color: var(--color-navy);
    color: #fff;
}
.chem-cta__text {
    max-width: 60ch;
    margin-bottom: var(--space-6);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: var(--leading-snug);
}
.chem-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ── Duyarlı ────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .chem-tool__inputs { grid-template-columns: 1fr; }
    .chem-links { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    /* Dar ekranda sabit sol sütun daralır ama okunur kalır. */
    .chem-table th,
    .chem-table td { padding: var(--space-2) var(--space-3); }
    .chem-table__mat { max-width: 46vw; white-space: normal; }
    .chem-cta { padding: var(--space-6); }
    .chem-cta__actions .btn { width: 100%; justify-content: center; }
    .chem-legend { gap: var(--space-3); }
}