/* Yula Baby beden rehberi
   Boy çizgisi (ana sayfa + beden-rehberi.html) ve beden tablosu. */

/* Boy çizgisi ---------------------------------------------------- */
.y-ruler {
    position: relative;
    background: var(--paper);
}
.y-ruler__stage {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
    padding: clamp(72px, 10vw, 120px) var(--gutter);
    max-width: var(--maxw);
    margin-inline: auto;
}
.y-ruler__intro .y-lede { margin-top: 18px; }

.y-readout { margin-top: clamp(24px, 3vw, 40px); }
.y-readout__cm {
    font-family: var(--font-text);
    font-size: clamp(3.4rem, 2.4rem + 4vw, 6.4rem);
    font-weight: 300;
    line-height: 0.9;
    letter-spacing: -0.04em;
    font-variant-numeric: lining-nums tabular-nums;
}
.y-readout__cm small { font-size: 0.3em; font-weight: 400; letter-spacing: 0; margin-left: 0.18em; color: var(--ink-2); }
.y-readout__row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; }
.y-readout__label { font-size: var(--fs-small); color: var(--ink-2); }
.y-readout__size { font-family: var(--font-display); font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.3rem); font-weight: 400; letter-spacing: -0.025em; line-height: 1; }
.y-readout__alt { font-size: var(--fs-small); color: var(--ink-2); }
.y-readout__alt a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.y-readout__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 26px; }
.y-readout__note { margin-top: 18px; font-size: var(--fs-meta); color: var(--ink-2); max-width: 38ch; }

.y-ruler__board {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 clamp(18px, 3vw, 44px);
    align-items: end;
}

.y-frame {
    --frame-h: min(62svh, 560px);
    position: relative;
    width: clamp(92px, 10vw, 128px);
    height: var(--frame-h);
    margin-left: 34px;
    background:
        linear-gradient(90deg, rgba(38, 37, 36, 0.05) 0 1px, transparent 1px calc(100% - 1px), rgba(38, 37, 36, 0.06) calc(100% - 1px)),
        linear-gradient(90deg, #F8F6F3, #FDFCFA 40%, #F6F4F0);
    box-shadow: inset 6px 0 0 -5px rgba(38, 37, 36, 0.05), 0 30px 60px -48px rgba(38, 37, 36, 0.5);
    touch-action: none;
    cursor: ns-resize;
}
/* cetvel çentikleri: 1 cm, 5 cm, 10 cm */
.y-frame__ticks {
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    background-image:
        linear-gradient(to top, rgba(38, 37, 36, 0.55) 0 1px, transparent 1px),
        linear-gradient(to top, rgba(38, 37, 36, 0.35) 0 1px, transparent 1px),
        linear-gradient(to top, rgba(38, 37, 36, 0.22) 0 1px, transparent 1px);
    background-size: 30px calc(100% / var(--span-10, 6.6)), 20px calc(100% / var(--span-5, 13.2)), 11px calc(100% / var(--span-1, 66));
    background-repeat: repeat-y;
    background-position: 0 100%;
    pointer-events: none;
}
.y-frame__num {
    position: absolute;
    left: -34px;
    width: 28px;
    transform: translateY(50%);
    text-align: right;
    font-size: 0.68rem;
    font-variant-numeric: tabular-nums;
    color: var(--ink-3);
    pointer-events: none;
}
.y-frame__band {
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dashed rgba(38, 37, 36, 0.18);
    pointer-events: none;
    transition: background-color 0.5s var(--ease);
}
.y-frame__band.is-active { background: rgba(149, 127, 109, 0.14); }
.y-frame__band-label {
    position: absolute;
    left: calc(100% + 14px);
    bottom: 50%;
    transform: translateY(50%);
    white-space: nowrap;
    font-family: var(--font-text);
    font-size: 0.82rem;
    letter-spacing: 0.01em;
    line-height: 1;
    color: var(--ink-3);
    transition: color 0.4s var(--ease), transform 0.5s var(--ease);
}
.y-frame__band.is-active .y-frame__band-label { color: var(--ink); transform: translate(4px, 50%); }

.y-marker {
    position: absolute;
    left: -10px;
    right: -10px;
    bottom: calc(var(--h, 0.5) * 100%);
    height: 0;
    z-index: 3;
    pointer-events: none;
}
.y-marker__line {
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 2px;
    background: var(--ink);
}
.y-marker__handle {
    position: absolute;
    right: -18px;
    top: 0;
    width: 36px;
    height: 36px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: var(--milk);
    border: 1.5px solid var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: grab;
    pointer-events: auto;
    touch-action: none;
    transition: transform 0.25s var(--ease), background 0.25s var(--ease);
}
.y-marker__handle::before, .y-marker__handle::after {
    content: "";
    position: absolute;
    left: 50%;
    width: 0; height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    transform: translateX(-50%);
}
.y-marker__handle::before { top: 9px; border-bottom: 5px solid var(--ink); }
.y-marker__handle::after { bottom: 9px; border-top: 5px solid var(--ink); }
.y-marker__handle:hover, .y-marker__handle.is-grabbing { transform: translateY(-50%) scale(1.08); }
.y-marker__handle.is-grabbing { cursor: grabbing; background: var(--taupe-pale); }
.y-marker__note {
    position: absolute;
    right: calc(100% + 48px);
    top: 0;
    transform: translateY(-50%);
    white-space: nowrap;
    font-family: var(--font-text);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
}

.y-ruler__photo {
    position: relative;
    align-self: end;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 999px 999px 0 0;
    background: var(--studio);
    transform-origin: 50% 100%;
    transform: scale(var(--grow, 0.9));
    will-change: transform;
}
.y-ruler__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.y-ruler__hint {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: var(--fs-meta);
    color: var(--ink-2);
}
.y-ruler__hint[hidden] { display: none; }
@media (max-width: 1023px) { .y-ruler__hint { display: none; } }
.y-ruler__hint .y-icon { width: 16px; height: 16px; }

.y-stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); }
.y-stepper button { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; color: var(--ink); }
.y-stepper button:hover { background: var(--milk); }
.y-stepper .y-icon { width: 16px; height: 16px; }
.y-stepper output { min-width: 64px; text-align: center; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }

@media (min-width: 1024px) {
    .y-ruler { height: 250vh; }
    .y-ruler__stage {
        position: sticky;
        top: 0;
        height: 100vh;
        height: 100svh;
        min-height: 640px;
        grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
        align-items: center;
        gap: clamp(32px, 5vw, 96px);
        padding: calc(var(--nav-h) + 3vh) var(--gutter) 5vh;
    }
    .y-ruler__board { grid-template-columns: auto auto; justify-content: center; gap: 0 clamp(110px, 10vw, 160px); }
    .y-frame { --frame-h: min(70svh, 640px); }
    .y-ruler__photo { width: clamp(240px, 22vw, 340px); justify-self: start; }
    .y-stepper { display: none; }
}
.y-readout__note-mobile {
    margin-top: 10px;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.2;
    color: var(--taupe-deep);
}
@media (min-width: 1024px) { .y-readout__note-mobile { display: none; } }

@media (max-width: 1023px) {
    .y-ruler__stage {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas:
            "title title"
            "lede lede"
            "board readout"
            "actions actions"
            "note note";
        gap: 0 20px;
        align-items: end;
    }
    .y-ruler__intro { display: contents; }
    .y-ruler__intro .y-h2 { grid-area: title; }
    .y-ruler__intro .y-lede { grid-area: lede; margin-bottom: 28px; }
    .y-readout { grid-area: readout; margin-top: 0; align-self: center; }
    .y-readout__row { flex-direction: column; align-items: flex-start; gap: 4px; }
    .y-readout__actions { grid-area: actions; margin-top: 28px; }
    .y-readout__note { grid-area: note; }
    .y-ruler__board { grid-area: board; display: block; padding-right: 76px; }
    .y-frame { --frame-h: min(52svh, 440px); width: 74px; }
    .y-frame__band-label { font-size: 0.95rem; left: calc(100% + 24px); }
    .y-ruler__photo, .y-marker__note { display: none; }
}
@media (max-width: 380px) {
    .y-readout__cm { font-size: 2.9rem; }
    .y-readout__actions .y-btn { width: 100%; }
}


/* Beden rehberi sayfası ------------------------------------------------------ */
.y-guide-head .y-page__lede a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

.y-sizes {
    max-width: var(--maxw);
    margin-inline: auto;
    padding: clamp(72px, 9vw, 130px) var(--gutter) clamp(72px, 9vw, 140px);
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(48px, 7vw, 120px);
    align-items: start;
    scroll-margin-top: var(--header-h);
}
.y-sizes .y-lede { margin-top: 14px; }
.y-sizes__scroll { margin-top: 32px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.y-sizes__table { width: 100%; min-width: 440px; border-collapse: collapse; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.y-sizes__table th {
    text-align: left;
    font-size: var(--fs-meta);
    font-weight: 500;
    color: var(--ink-3);
    padding: 0 16px 12px 0;
    border-bottom: 1px solid var(--ink);
}
.y-sizes__table td { padding: 16px 16px 16px 0; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
.y-sizes__table td:first-child { color: var(--ink); font-weight: 500; white-space: nowrap; }
.y-sizes__table td:nth-child(2) { white-space: nowrap; }
.y-sizes__table td:last-child, .y-sizes__table th:last-child { padding-right: 0; text-align: right; }
.y-sizes__table tr { transition: background-color 0.3s var(--ease); }
.y-sizes__table tbody tr:hover { background: var(--paper); }
.y-sizes__table a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.y-sizes__table small { display: block; margin-top: 2px; font-size: var(--fs-meta); color: var(--ink-3); font-weight: 400; }

.y-howto { counter-reset: howto; margin-top: 28px; display: grid; gap: 22px; }
.y-howto li { counter-increment: howto; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 4px 12px; }
.y-howto li::before {
    content: counter(howto);
    grid-row: span 2;
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: var(--fs-meta);
    color: var(--ink-2);
}
.y-howto strong { font-weight: 500; color: var(--ink); }
.y-howto span { font-size: var(--fs-small); line-height: 1.6; color: var(--ink-2); }
.y-sizes__help { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--ink-2); }

@media (max-width: 900px) {
    .y-sizes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
    .y-sizes__table { min-width: 0; }
    .y-sizes__table th, .y-sizes__table td { padding-right: 10px; }
    .y-sizes__table td:nth-child(3) { font-size: var(--fs-meta); }
}