/* ── HERO ── */
.lab-hero {
    position: relative;
    background: var(--bb-grad-hero);
    color: var(--bb-on-dark);
    overflow: hidden;
    border-bottom: 1px solid var(--bb-border-gold)
}

/* tek, hafif teal ışıma — overflow:hidden kapsayıcının içinde, taşma yok */
.lab-hero::before {
    content: "";
    position: absolute;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(63, 180, 180, .16), transparent 70%);
    top: -200px;
    right: -140px;
    pointer-events: none
}

.lab-hero__inner {
    position: relative;
    text-align: center;
    padding-block: clamp(64px, 11vh, 128px);
    max-width: 760px;
    margin-inline: auto
}

.lab-hero h1 {
    font-family: var(--bb-font-display);
    font-size: var(--bb-display-l);
    line-height: 1;
    letter-spacing: var(--bb-ls-display);
    margin: 0
}

.lab-hero h1 .teal {
    color: var(--bb-teal-400)
}

.lab-hero__sub {
    font-size: var(--bb-text-l);
    color: var(--bb-on-dark-dim);
    max-width: 54ch;
    margin: var(--bb-4) auto 0;
    line-height: var(--bb-lh-body)
}

.lab-hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bb-2);
    justify-content: center;
    margin-top: var(--bb-6)
}

/* ── LAB KARTLARI ── */
.lab-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--bb-5)
}

.lab-kart {
    display: flex;
    flex-direction: column;
    padding: var(--bb-5);
    min-width: 0;
    transition: transform var(--bb-dur-base) var(--bb-ease-standard), box-shadow var(--bb-dur-base) var(--bb-ease-standard)
}

.lab-kart:hover {
    transform: translateY(-4px);
    box-shadow: var(--bb-e3)
}

.lab-kart__head {
    display: flex;
    align-items: center;
    gap: var(--bb-3);
    margin-bottom: var(--bb-4);
    padding-bottom: var(--bb-4);
    border-bottom: 1px solid var(--bb-border)
}

.lab-kart__thumb {
    width: 56px;
    height: 56px;
    border-radius: var(--bb-r-md);
    object-fit: contain;
    background: var(--bb-grad-ivory);
    padding: 6px;
    box-shadow: var(--bb-e1);
    flex-shrink: 0
}

.lab-kart__name {
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-xl);
    letter-spacing: .02em;
    color: var(--bb-cacao-700);
    line-height: 1.1;
    overflow-wrap: anywhere
}

.lab-kart__lot {
    font-size: var(--bb-text-xs);
    color: var(--bb-on-light-dim);
    font-weight: 700;
    letter-spacing: .04em;
    margin-top: 2px
}

.lab-rows {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--bb-border);
    border-radius: var(--bb-r-md);
    overflow: hidden;
    margin-bottom: var(--bb-4)
}

.lab-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bb-3);
    background: var(--bb-surface-raised);
    padding: 11px 14px
}

.lab-row .k {
    font-size: var(--bb-text-s);
    color: var(--bb-ink-700);
    font-weight: 700
}

.lab-row .v {
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-l);
    letter-spacing: .02em;
    color: var(--bb-cacao-700)
}

.lab-row .v.teal {
    color: var(--bb-teal-600)
}

.lab-purity {
    display: flex;
    align-items: center;
    gap: var(--bb-3);
    margin-bottom: var(--bb-4)
}

.lab-purity .track {
    flex: 1;
    height: 7px;
    border-radius: var(--bb-r-pill);
    background: var(--bb-surface-2);
    overflow: hidden
}

.lab-purity .fill {
    height: 100%;
    border-radius: var(--bb-r-pill);
    background: var(--bb-grad-teal)
}

.lab-purity .pct {
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-l);
    color: var(--bb-teal-600)
}

.lab-clean {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--bb-5)
}

.lab-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--bb-text-xs);
    font-weight: 800;
    letter-spacing: .02em;
    padding: 5px 11px;
    border-radius: var(--bb-r-pill);
    background: rgba(46, 125, 91, .10);
    color: var(--bb-success)
}

.lab-kart .bb-btn {
    margin-top: auto
}

/* ── COA: SERTİFİKA BİLGİLERİ ── */
.coa-meta {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--bb-border);
    border-radius: var(--bb-r-lg);
    overflow: hidden;
    box-shadow: var(--bb-e1)
}

.coa-meta__item {
    background: var(--bb-surface-raised);
    padding: var(--bb-4) var(--bb-5);
    min-width: 0
}

.coa-meta__k {
    font-size: var(--bb-text-xs);
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--bb-on-light-dim)
}

.coa-meta__v {
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-l);
    letter-spacing: .02em;
    color: var(--bb-cacao-700);
    margin-top: 4px;
    overflow-wrap: anywhere
}

.coa-meta__v.teal {
    color: var(--bb-teal-600)
}

.coa-meta__v.ok {
    color: var(--bb-success)
}

.coa-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--bb-4);
    margin-top: var(--bb-4);
    padding: var(--bb-4) var(--bb-5);
    border-radius: var(--bb-r-lg);
    background: rgba(46, 125, 91, .08);
    border: 1px solid var(--bb-border)
}

.coa-summary .prod {
    font-size: var(--bb-text-s);
    font-weight: 700;
    color: var(--bb-ink-700);
    overflow-wrap: anywhere
}

/* ── KANABİNOİD POTENS ── */
.can-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--bb-3);
    margin-top: var(--bb-6)
}

.can-card {
    padding: var(--bb-5) var(--bb-3);
    text-align: center
}

.can-card__name {
    font-size: var(--bb-text-xs);
    font-weight: 800;
    letter-spacing: .03em;
    color: var(--bb-on-light-dim);
    min-height: 2.4em;
    line-height: 1.3
}

.can-card__val {
    font-family: var(--bb-font-display);
    font-size: var(--bb-display-s);
    letter-spacing: .01em;
    color: var(--bb-cacao-700);
    line-height: 1;
    margin: var(--bb-3) 0
}

.can-card__val.teal {
    color: var(--bb-teal-600)
}

.can-card__tag {
    display: inline-block;
    font-size: var(--bb-text-xs);
    font-weight: 800;
    letter-spacing: .03em;
    padding: 4px 12px;
    border-radius: var(--bb-r-pill);
    background: var(--bb-surface-2);
    color: var(--bb-on-light-dim)
}

.can-card__tag.main {
    background: var(--bb-grad-teal);
    color: var(--bb-on-dark)
}

/* ── TAM ANALİZ TABLOSU (COA) ── */
/* tablo her zaman kendi kutusunda yatay kayar — dar viewport'ta sayfayı taşırmaz */
.lab-table-wrap {
    margin-top: var(--bb-6);
    border-radius: var(--bb-r-xl);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: var(--bb-e2);
    background: var(--bb-surface-raised);
    max-width: 100%;
    border: 1px solid var(--bb-border)
}

table.lab-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--bb-text-s);
    min-width: 720px
}

table.lab-table th,
table.lab-table td {
    text-align: left;
    padding: 14px var(--bb-5);
    border-bottom: 1px solid var(--bb-border);
    vertical-align: middle
}

table.lab-table td:nth-child(n+2) {
    font-variant-numeric: tabular-nums
}

table.lab-table thead th {
    background: var(--bb-grad-cacao);
    color: var(--bb-on-dark);
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-s);
    letter-spacing: .05em;
    font-weight: 400;
    text-transform: uppercase;
    position: sticky;
    top: 0;
    z-index: 1
}

table.lab-table tbody tr:last-child td {
    border-bottom: none
}

table.lab-table tbody tr:nth-child(even) {
    background: var(--bb-ivory-50)
}

table.lab-table td.mad {
    font-weight: 800;
    color: var(--bb-cacao-700)
}

.lab-pass {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 800;
    color: var(--bb-success);
    background: rgba(46, 125, 91, .10);
    padding: 4px 12px;
    border-radius: var(--bb-r-pill);
    font-size: var(--bb-text-xs);
    white-space: nowrap
}

/* ── ANALİST / MÜHÜR ── */
.coa-sign {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--bb-5);
    align-items: stretch;
    margin-top: var(--bb-6)
}

.coa-sign__card {
    display: flex;
    flex-direction: column;
    gap: var(--bb-3);
    padding: var(--bb-6)
}

.coa-sign__card p {
    font-size: var(--bb-text-m);
    color: var(--bb-ink-700);
    line-height: var(--bb-lh-body)
}

.coa-sign__analyst {
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-l);
    color: var(--bb-cacao-700);
    margin-top: var(--bb-2)
}

.coa-sign__role {
    font-size: var(--bb-text-s);
    color: var(--bb-on-light-dim);
    font-weight: 700
}

.coa-sign__seal {
    display: grid;
    place-items: center;
    text-align: center;
    padding: var(--bb-6);
    border: 1px solid var(--bb-border-gold);
    border-radius: var(--bb-r-xl);
    background: rgba(201, 162, 75, .06)
}

.coa-sign__seal .badge {
    width: 84px;
    height: 84px;
    border-radius: var(--bb-r-pill);
    border: 2px solid var(--bb-border-gold);
    display: grid;
    place-items: center;
    color: var(--bb-gold-400);
    font-family: var(--bb-font-display);
    font-size: 13px;
    letter-spacing: .06em;
    line-height: 1.1;
    margin-bottom: var(--bb-4)
}

.coa-sign__seal .lab {
    font-family: var(--bb-font-display);
    font-size: var(--bb-text-xl);
    letter-spacing: .04em;
    color: var(--bb-cacao-700)
}

.coa-sign__seal .loc {
    font-size: var(--bb-text-xs);
    font-weight: 700;
    color: var(--bb-on-light-dim);
    margin-top: 4px
}

/* ── NOT / DİSCLAIMER ── */
.lab-note {
    display: flex;
    gap: var(--bb-4);
    align-items: flex-start;
    background: var(--bb-surface);
    border: 1px solid var(--bb-border);
    border-radius: var(--bb-r-lg);
    padding: var(--bb-5);
    margin-top: var(--bb-5)
}

.lab-note .ic {
    font-size: 22px;
    flex-shrink: 0;
    line-height: 1.2
}

.lab-note p {
    font-size: var(--bb-text-s);
    color: var(--bb-on-light-dim);
    line-height: var(--bb-lh-body)
}

@media (max-width:980px) {
    .lab-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .coa-meta {
        grid-template-columns: repeat(2, 1fr)
    }

    .can-grid {
        grid-template-columns: repeat(3, 1fr)
    }

    .coa-sign {
        grid-template-columns: 1fr
    }
}

@media (max-width:560px) {
    .lab-grid {
        grid-template-columns: 1fr
    }

    .coa-meta {
        grid-template-columns: 1fr
    }

    .can-grid {
        grid-template-columns: repeat(2, 1fr)
    }

    .coa-summary {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--bb-3)
    }

    .lab-note {
        flex-direction: column;
        gap: var(--bb-3)
    }
}

@media (max-width:480px) {
    .lab-hero .bb-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr))
    }
}