/* =====================================================================
   Curevia.net - Dozaj hesaplayici stilleri
   Bagimlilik: tokens.css + base.css + components.css
   Yalnizca /hesaplayici sayfasinda yuklenir (extraStyles).
   ===================================================================== */

.calc-layout {
    display: grid;
    gap: var(--space-6);
    align-items: start;
}

@media (min-width: 62rem) {
    .calc-layout {
        grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    }
}

.calc-form .card__body {
    gap: var(--space-5);
}

/* Birim secimi (mcg / mg) dar kalsin */
.calc-unit {
    flex: 0 0 auto;
    width: 5.5rem;
    padding-right: var(--space-8);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.input-group .input {
    flex: 1 1 auto;
    min-width: 0;
}

/* =====================================================================
   SONUC DEGERLERI
   ===================================================================== */
.calc-values {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: var(--space-4);
    margin: 0 0 var(--space-6);
    padding-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.calc-values > div {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
}

.calc-values dt {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-2);
}

.calc-values dd {
    margin: 0;
    font-size: var(--text-lg);
    font-weight: var(--weight-bold);
    font-variant-numeric: tabular-nums;
    color: var(--color-primary);
    word-break: break-word;
}

.calc-values__formula {
    display: block;
    margin-top: var(--space-2);
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    color: var(--color-text-faint);
}

.calc-result[data-state="error"] .calc-values dd {
    color: var(--color-text-faint);
}

/* =====================================================================
   SIRINGA GOSTERGESI
   ===================================================================== */
.calc-syringe-wrap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
}

.calc-syringe {
    flex: 0 0 auto;
    width: 7rem;
    height: auto;
    max-height: 20rem;
}

.calc-syringe__body {
    fill: color-mix(in srgb, var(--color-surface-3) 75%, transparent);
    stroke: var(--color-border-strong);
    stroke-width: 3;
}

.calc-syringe__fill {
    fill: var(--color-primary);
    opacity: 0.7;
    transition: height var(--transition-slow), y var(--transition-slow);
}

.calc-syringe__marker {
    stroke: var(--color-accent);
    stroke-width: 2.4;
    stroke-dasharray: 5 4;
    transition: y1 var(--transition-slow), y2 var(--transition-slow);
}

.calc-syringe__ticks line {
    stroke: var(--color-border-strong);
    stroke-width: 1.6;
}

.calc-syringe__labels text {
    fill: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
}

.calc-syringe__plunger {
    fill: var(--color-text-muted);
}

.calc-syringe__caption {
    flex: 1 1 12rem;
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.calc-syringe__caption strong {
    display: inline-block;
    margin-bottom: var(--space-2);
    color: var(--color-text);
    font-size: var(--text-md);
    font-variant-numeric: tabular-nums;
}

.calc-syringe__caption .text-xs {
    display: block;
    margin-top: var(--space-2);
}

/* =====================================================================
   MESAJLAR
   ===================================================================== */
.calc-messages {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.calc-messages:empty {
    display: none;
}

.calc-messages__list {
    margin: 0;
    padding-left: var(--space-5);
}

.calc-messages__list li {
    margin-bottom: var(--space-1);
}

.calc-messages__list li:last-child {
    margin-bottom: 0;
}

/* =====================================================================
   YONTEM ACIKLAMASI
   ===================================================================== */
.calc-formula {
    display: grid;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    padding-left: var(--space-5);
}

.calc-formula li {
    margin: 0;
}

.calc-formula span {
    display: block;
}

.calc-formula .text-mono {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-surface-3);
    font-size: var(--text-xs);
    color: var(--color-text);
}

/* Hareket azaltma tercihinde gecisler kapanir */
@media (prefers-reduced-motion: reduce) {
    .calc-syringe__fill,
    .calc-syringe__marker {
        transition: none;
    }
}