/* =====================================================================
   Curevia.net - Rehber modulu stilleri
   Bagimlilik: tokens.css + base.css + components.css
   Yalnizca rehber sayfalarinda yuklenir (extraStyles).
   ===================================================================== */

/* =====================================================================
   SEMATIK GORSEL (animasyonlu SVG)
   ===================================================================== */
.figure {
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, var(--color-surface-2), var(--color-surface));
    box-shadow: var(--shadow-sm);
}

.figure__svg {
    width: 100%;
    height: auto;
    max-height: 22rem;
}

.figure__caption {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--color-border);
    font-size: var(--text-xs);
    color: var(--color-text-faint);
    text-align: center;
}

/* --- Ortak SVG parcalari --------------------------------------------- */
.figure__glass {
    fill: color-mix(in srgb, var(--color-surface) 70%, transparent);
    stroke: var(--color-border-strong);
    stroke-width: 2;
}

.figure__cap {
    fill: var(--color-primary);
    opacity: 0.85;
}

.figure__rubber {
    stroke: var(--color-text-faint);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.figure__liquid {
    fill: var(--color-primary);
    opacity: 0.55;
}

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

.figure__needle {
    stroke: var(--color-border-strong);
    stroke-width: 2.5;
    stroke-linecap: round;
}

.figure__label {
    fill: var(--color-text-muted);
    font-family: var(--font-sans);
    font-size: 11px;
    text-anchor: middle;
}

.figure__ticks line {
    stroke: var(--color-text-faint);
    stroke-width: 1.6;
}

.figure__eye path,
.figure__eye circle {
    fill: none;
    stroke: var(--color-text-muted);
    stroke-width: 1.8;
}

.figure__snow path {
    stroke: var(--color-accent);
    stroke-width: 2.2;
    stroke-linecap: round;
}

.figure__thermo .figure__glass {
    fill: color-mix(in srgb, var(--color-surface) 80%, transparent);
}

.figure__mercury {
    fill: var(--color-accent);
}

.figure__arrow path {
    stroke: var(--color-primary);
    stroke-width: 2.4;
    stroke-linecap: round;
    fill: none;
}

.figure__bubble {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 1.6;
    opacity: 0.8;
}

.figure__drop {
    fill: var(--color-primary);
    opacity: 0.8;
}

/* =====================================================================
   HAREKETLER
   ===================================================================== */
@media (prefers-reduced-motion: no-preference) {

    /* Solvent damlalari: flakona dogru duser */
    .figure--drops .figure__drop,
    [data-figure="vial"] .figure__drop {
        animation: figure-drop 2.6s ease-in infinite;
    }

    [data-figure="vial"] .figure__drop--2 { animation-delay: 0.5s; }
    [data-figure="vial"] .figure__drop--3 { animation-delay: 1s; }

    @keyframes figure-drop {
        0%   { transform: translate(18px, -6px) scale(0.6); opacity: 0; }
        35%  { opacity: 0.9; }
        100% { transform: translate(-6px, 42px) scale(1); opacity: 0; }
    }

    /* Siringa pistonu: hafif ileri-geri */
    [data-figure="vial"] .figure__plunger {
        animation: figure-plunger 3.4s ease-in-out infinite;
    }

    @keyframes figure-plunger {
        0%, 60%, 100% { transform: translateY(0); }
        30%           { transform: translateY(-9px); }
    }

    /* Basinc oklari: nabiz etkisi */
    [data-figure="pressure"] .figure__arrow--up {
        animation: figure-pulse-up 2.4s ease-in-out infinite;
    }

    [data-figure="pressure"] .figure__arrow--down {
        animation: figure-pulse-down 2.4s ease-in-out infinite;
    }

    @keyframes figure-pulse-up {
        0%, 100% { transform: translateY(6px); opacity: 0.45; }
        50%      { transform: translateY(-6px); opacity: 1; }
    }

    @keyframes figure-pulse-down {
        0%, 100% { transform: translateY(-6px); opacity: 0.45; }
        50%      { transform: translateY(6px); opacity: 1; }
    }

    /* Flakon ici hava kabarciklari */
    [data-figure="pressure"] .figure__bubble--a { animation: figure-rise 3s ease-in infinite; }
    [data-figure="pressure"] .figure__bubble--b { animation: figure-rise 3.6s ease-in 0.6s infinite; }
    [data-figure="pressure"] .figure__bubble--c { animation: figure-rise 3.2s ease-in 1.2s infinite; }

    /* Hava kabarcigi tahliyesi: siringa egimi + titreşim */
    [data-figure="bubbles"] .figure__tilt {
        animation: figure-tilt 4s ease-in-out infinite;
        transform-origin: 155px 150px;
    }

    @keyframes figure-tilt {
        0%, 100% { transform: rotate(0deg); }
        50%      { transform: rotate(-14deg); }
    }

    [data-figure="bubbles"] .figure__bubble--rise1 { animation: figure-rise 2.2s ease-in infinite; }
    [data-figure="bubbles"] .figure__bubble--rise2 { animation: figure-rise 2.6s ease-in 0.4s infinite; }
    [data-figure="bubbles"] .figure__bubble--rise3 { animation: figure-rise 2.4s ease-in 0.9s infinite; }

    @keyframes figure-rise {
        0%   { transform: translateY(16px); opacity: 0; }
        30%  { opacity: 1; }
        100% { transform: translateY(-42px); opacity: 0; }
    }

    [data-figure="bubbles"] .figure__vibration {
        animation: figure-vibrate 0.35s ease-in-out infinite;
    }

    @keyframes figure-vibrate {
        0%, 100% { transform: translateX(0); }
        50%      { transform: translateX(-2.5px); }
    }

    /* Insülin siringasi: dolum seviyesi */
    [data-figure="syringe"] .figure__liquid {
        animation: figure-fill 4.5s ease-in-out infinite;
        transform-origin: 161px 158px;
    }

    @keyframes figure-fill {
        0%, 100% { transform: scaleY(1); }
        50%      { transform: scaleY(0.55); }
    }

    [data-figure="syringe"] .figure__plunger {
        animation: figure-plunger-slow 4.5s ease-in-out infinite;
    }

    @keyframes figure-plunger-slow {
        0%, 100% { transform: translateY(0); }
        50%      { transform: translateY(28px); }
    }

    [data-figure="syringe"] .figure__eye {
        animation: figure-look 4s ease-in-out infinite;
    }

    @keyframes figure-look {
        0%, 100% { transform: translateY(-3px); }
        50%      { transform: translateY(3px); }
    }

    /* Soguk zincir: termometre ve kar tanesi */
    [data-figure="coldchain"] .figure__mercury {
        animation: figure-mercury 5s ease-in-out infinite;
    }

    @keyframes figure-mercury {
        0%, 100% { transform: scaleY(1); }
        50%      { transform: scaleY(0.7); }
    }

    [data-figure="coldchain"] .figure__snow {
        animation: figure-spin 14s linear infinite;
        transform-origin: 50px 86px;
    }

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

/* =====================================================================
   REHBER YERLESIMI
   ===================================================================== */
.guide-layout {
    display: grid;
    gap: var(--space-6);
    margin-bottom: var(--space-10);
}

@media (min-width: 62rem) {
    .guide-layout {
        grid-template-columns: minmax(0, 2fr) minmax(16rem, 1fr);
        align-items: start;
    }
}

.guide-layout__toc {
    position: sticky;
    top: calc(var(--header-height) + var(--space-4));
}

.toc {
    margin: 0;
    padding-left: var(--space-5);
    counter-reset: toc;
}

.toc li {
    margin-bottom: var(--space-2);
    counter-increment: toc;
}

.toc a {
    display: inline-block;
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-decoration: none;
}

.toc a::before {
    content: counter(toc) ". ";
    color: var(--color-text-faint);
    font-variant-numeric: tabular-nums;
}

.toc a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}

/* =====================================================================
   ADIMLAR
   ===================================================================== */
.steps--animated .step {
    scroll-margin-top: calc(var(--header-height) + var(--space-6));
}

.steps--animated .step::before {
    background: var(--color-primary);
}

.step__warning {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-warning-border);
    border-left-width: 4px;
    border-radius: var(--radius-sm);
    background: var(--color-warning-soft);
    color: var(--color-warning);
    font-size: var(--text-sm);
    line-height: var(--leading-snug);
}

.step__warning-icon {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.1rem;
}

@media (prefers-reduced-motion: no-preference) {
    .steps--animated .step {
        animation: step-in 420ms cubic-bezier(0.32, 0.72, 0, 1) both;
    }

    .steps--animated .step:nth-child(1) { animation-delay: 40ms; }
    .steps--animated .step:nth-child(2) { animation-delay: 120ms; }
    .steps--animated .step:nth-child(3) { animation-delay: 200ms; }
    .steps--animated .step:nth-child(4) { animation-delay: 280ms; }
    .steps--animated .step:nth-child(5) { animation-delay: 360ms; }
    .steps--animated .step:nth-child(6) { animation-delay: 440ms; }

    @keyframes step-in {
        from { opacity: 0; transform: translateY(10px); }
        to   { opacity: 1; transform: translateY(0); }
    }
}

/* Not listesi */
.check-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.check-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin: 0;
    font-size: var(--text-base);
}

.check-list li::before {
    content: "";
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.2rem;
    border-radius: var(--radius-full);
    background: var(--color-primary-soft);
    border: 1px solid var(--color-primary);
}

/* Gezinme */
.guide-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

/* Kart basligi icindeki ikon hizalamasi */
.card__head .card__title {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}