/* ==========================================================================
   Yula Baby tasarım sistemi
   Renkler logodan ve fotoğraf fonlarından ölçüldü; ayrıntı: docs/TASARIM.md
   Kural: her şey köşeli; tek eğri logodan gelen yay (kemer).
   ========================================================================== */

/* 1. Yazı tipi (kendi sunucumuzdan) ------------------------------------- */
/* Inter Tight: dik, nötr grotesk. Başlıklarda ince (300), metinde normal (400). */
@font-face {
    font-family: "Inter Tight";
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("../fonts/inter-tight-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Inter Tight";
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("../fonts/inter-tight-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 2. Belirteçler --------------------------------------------------------- */
:root {
    color-scheme: light;

    --milk: #FAFAF9;
    --paper: #F3F2EF;
    --studio: #E7E4E0;
    --line: #DCD8D3;
    --line-soft: #E9E6E2;
    --ink: #262524;
    --ink-2: #5F5A55;
    --ink-3: #77716B;
    --taupe: #957F6D;
    --taupe-deep: #6F5B4B;
    --taupe-pale: #EFEAE5;
    --error: #9E3B2E;
    --success: #4A6746;

    --font-display: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-text: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

    --fs-display: clamp(2.3rem, 1.35rem + 3.6vw, 4.6rem);
    --fs-h2: clamp(1.9rem, 1.35rem + 2.1vw, 3.2rem);
    --fs-h3: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
    --fs-lede: clamp(1.02rem, 0.97rem + 0.25vw, 1.15rem);
    --fs-body: 1rem;
    --fs-small: 0.875rem;
    --fs-meta: 0.78rem;

    --ease: cubic-bezier(0.22, 1, 0.36, 1);
    --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
    --dur: 0.45s;
    --dur-slow: 1.1s;

    --gutter: clamp(16px, 4vw, 56px);
    --maxw: 1440px;
    --announce-h: 34px;
    --nav-h: 68px;
    --header-h: calc(var(--announce-h) + var(--nav-h));

    --z-header: 60;
    --z-drawer: 110;
    --z-modal: 200;
    --z-cookie: 220;
}

@media (max-width: 1023px) {
    :root { --nav-h: 58px; --announce-h: 32px; }
}

/* 3. Temel ----------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--header-h) + 12px);
}

body {
    background: var(--milk);
    color: var(--ink);
    font-family: var(--font-text);
    font-size: var(--fs-body);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-feature-settings: "kern" 1;
}

::selection { background: var(--taupe-pale); color: var(--ink); }

:focus-visible {
    outline: 2px solid var(--taupe);
    outline-offset: 3px;
}

img, video { max-width: 100%; }

.font-serif, .y-display, .y-h1, .y-h2, .y-h3 {
    font-family: var(--font-display);
    font-feature-settings: "kern" 1, "liga" 1, "lnum" 1;
}

.y-display {
    font-size: var(--fs-display);
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -0.032em;
    padding-bottom: 0.04em;
}

.y-h2 {
    font-size: var(--fs-h2);
    font-weight: 300;
    line-height: 1.06;
    letter-spacing: -0.028em;
    padding-bottom: 0.04em;
}

.y-h3 {
    font-size: var(--fs-h3);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -0.018em;
}

.y-lede {
    font-size: var(--fs-lede);
    line-height: 1.6;
    color: var(--ink-2);
    max-width: 44ch;
}

.y-meta {
    font-size: var(--fs-meta);
    letter-spacing: 0.02em;
    color: var(--ink-2);
}

.y-kicker {
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--taupe-deep);
}

.y-sr-only {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

.y-skip {
    position: fixed;
    left: 12px; top: -60px;
    z-index: calc(var(--z-cookie) + 1);
    background: var(--ink); color: var(--milk);
    padding: 10px 16px; font-size: var(--fs-small);
    transition: top 0.2s var(--ease);
}
.y-skip:focus { top: 12px; }

/* 4. Yerleşim --------------------------------------------------------------- */
.y-container {
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.y-section { padding-block: clamp(72px, 9vw, 150px); }
.y-section--tight { padding-block: clamp(56px, 6vw, 96px); }

/* 5. Düğmeler ve bağlantılar ---------------------------------------------- */
.y-btn {
    --btn-bg: transparent;
    --btn-fg: var(--ink);
    --btn-bd: var(--ink);
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6em;
    min-height: 50px;
    padding: 0 30px;
    border: 1px solid var(--btn-bd);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-family: var(--font-text);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    isolation: isolate;
    transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform 0.15s ease;
}

.y-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--btn-fill, var(--ink));
    transform: scaleY(0);
    transform-origin: 50% 100%;
    transition: transform 0.5s var(--ease);
}

.y-btn:hover::before { transform: scaleY(1); }
.y-btn:hover { color: var(--btn-hover-fg, var(--milk)); }
.y-btn:active { transform: translateY(1px); }
.y-btn[disabled], .y-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.y-btn[disabled]::before { display: none; }

/* Düğmeler dolgusuz: zemin rengi + ince çerçeve, üzerine gelince mürekkep aşağıdan dolar.
   Birincil (solid) mürekkep çerçeveli, ikincil (ghost) açık çizgili. */
.y-btn--solid { --btn-bd: var(--ink); --btn-fill: var(--ink); }
.y-btn--ghost { --btn-bd: var(--line); --btn-fill: var(--ink); }
.y-btn--ghost:hover { border-color: var(--ink); }
.y-btn--light { --btn-fg: var(--milk); --btn-bd: rgba(250, 250, 249, 0.8); --btn-fill: var(--milk); --btn-hover-fg: var(--ink); }
.y-btn--light:hover { border-color: var(--milk); }
.y-btn--block { width: 100%; }
/* Onay anı (ör. "Sepete eklendi"): dolu kalır */
.y-btn.is-done { color: var(--milk); }
.y-btn.is-done::before { transform: scaleY(1); }
.y-btn.is-done[disabled] { opacity: 1; cursor: default; }
.y-btn.is-done[disabled]::before { display: block; }
.y-btn--sm { min-height: 40px; padding: 0 18px; font-size: 0.8rem; }
/* Giriş alanının yanında (ör. indirim kodu "Uygula") alanla aynı yükseklik */
.y-btn--field { min-height: 0; padding: 0 20px; font-size: 0.8rem; }
.y-btn--danger { --btn-fg: #9A3B2E; --btn-bd: #9A3B2E; --btn-fill: #9A3B2E; }

.y-btn .y-icon { width: 17px; height: 17px; }

.y-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    font-size: var(--fs-small);
    font-weight: 500;
    color: var(--ink);
    padding-block: 6px;
}
.y-link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 2px;
    height: 1px;
    background: currentColor;
    transform-origin: 0 50%;
    transition: transform 0.5s var(--ease);
}
.y-link:hover::after { transform: scaleX(0); transform-origin: 100% 50%; }
.y-link .y-icon { width: 15px; height: 15px; transition: transform 0.5s var(--ease); }
.y-link:hover .y-icon { transform: translateX(3px); }

/* 6. İkonlar --------------------------------------------------------------- */
.y-icon {
    width: 22px;
    height: 22px;
    fill: currentColor;
    flex: none;
    display: inline-block;
    vertical-align: middle;
}

.y-iconbtn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--ink);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: color 0.3s var(--ease), opacity 0.3s var(--ease);
}
.y-iconbtn:hover { color: var(--taupe-deep); }

/* 7. Header ---------------------------------------------------------------- */
.y-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: var(--z-header);
    transform: translateY(0);
    transition: transform 0.55s var(--ease);
    will-change: transform;
}
.y-header.is-hidden { transform: translateY(calc(-1 * var(--header-h))); }
.y-header.is-hidden.has-open-panel { transform: none; }

.y-announce {
    height: var(--announce-h);
    background: var(--paper);
    color: var(--ink-2);
    font-size: 0.78rem;
    letter-spacing: 0.01em;
    overflow: hidden;
}
.y-announce__track {
    position: relative;
    height: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
}
.y-announce__msg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline: var(--gutter);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.y-announce__msg.is-active { opacity: 1; transform: none; }
.y-announce__msg.is-leaving { opacity: 0; transform: translateY(-8px); }

.y-nav {
    position: relative;
    height: var(--nav-h);
    background: var(--milk);
    border-bottom: 1px solid transparent;
    transition: border-color 0.4s var(--ease), background-color 0.4s var(--ease);
}
.y-header.is-scrolled .y-nav,
.y-header.has-open-panel .y-nav { border-bottom-color: var(--line-soft); }

.y-nav__inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.y-nav__left { display: flex; align-items: center; min-width: 0; }
.y-nav__right { display: flex; align-items: center; justify-content: flex-end; gap: 2px; }

.y-nav__burger { margin-left: -10px; }

.y-nav__links {
    display: flex;
    align-items: stretch;
    gap: clamp(18px, 2vw, 32px);
    height: var(--nav-h);
    list-style: none;
    margin: 0; padding: 0;
}
.y-nav__item { position: static; display: flex; align-items: center; }
.y-nav__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 100%;
    font-size: 0.875rem;
    font-weight: 450;
    letter-spacing: 0.01em;
    color: var(--ink);
    white-space: nowrap;
}
.y-nav__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 20px;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 0.45s var(--ease);
}
.y-nav__item:hover > .y-nav__link::after,
.y-nav__item:focus-within > .y-nav__link::after,
.y-nav__link:hover::after,
.y-nav__link[aria-current="page"]::after { transform: scaleX(1); }

.y-nav__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--nav-h);
    padding-inline: 12px;
}
.y-nav__logo img {
    height: 54px;
    width: auto;
    display: block;
}

.y-bag__count {
    position: absolute;
    top: 7px;
    right: 3px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--ink);
    color: var(--milk);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.y-bag__count.is-bump { animation: y-bump 0.6s var(--ease); }
@keyframes y-bump { 0% { transform: scale(1); } 35% { transform: scale(1.35); } 100% { transform: scale(1); } }

@media (min-width: 1024px) {
    .y-nav__burger { display: none; }
}
@media (max-width: 1023px) {
    .y-nav__links { display: none; }
    .y-nav__logo img { height: 40px; }
    .y-hide-mobile { display: none !important; }
}

/* Mega panel */
.y-mega {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    background: var(--milk);
    border-top: 1px solid var(--line-soft);
    border-bottom: 1px solid var(--line-soft);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.35s var(--ease), transform 0.45s var(--ease), visibility 0s linear 0.35s;
}
.y-nav__item:hover > .y-mega,
.y-nav__item:focus-within > .y-mega,
.y-nav__item.is-open > .y-mega {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.35s var(--ease), transform 0.45s var(--ease), visibility 0s;
}
.y-mega__inner {
    display: grid;
    grid-template-columns: 1fr 1.4fr minmax(220px, 260px);
    gap: 48px;
    max-width: var(--maxw);
    margin-inline: auto;
    padding: 40px var(--gutter) 48px;
}
.y-mega__title {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    line-height: 1.05;
    margin-bottom: 18px;
}
.y-mega__list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 40px; }
.y-mega__list li { break-inside: avoid; }
.y-mega__list a {
    display: inline-block;
    padding: 7px 0;
    font-size: 0.9375rem;
    color: var(--ink-2);
    transition: color 0.3s var(--ease), transform 0.4s var(--ease);
}
.y-mega__list a:hover { color: var(--ink); transform: translateX(4px); }
.y-mega__all { margin-top: 18px; }
.y-mega__figure { position: relative; display: block; overflow: hidden; background: var(--studio); height: 300px; }
.y-mega__figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.y-mega__figure:hover img { transform: scale(1.03); }
.y-mega__caption { margin-top: 12px; font-size: var(--fs-small); color: var(--ink-2); }

/* 8. Mobil çekmece ------------------------------------------------------- */
.y-drawer-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-drawer);
    background: rgba(38, 37, 36, 0.28);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
}
.y-drawer-backdrop.is-open { opacity: 1; visibility: visible; transition: opacity 0.4s var(--ease), visibility 0s; }

.y-mmenu {
    position: absolute;
    inset: 0 auto 0 0;
    width: min(420px, 100%);
    display: flex;
    flex-direction: column;
    background: var(--milk);
    transform: translateX(-100%);
    transition: transform 0.55s var(--ease);
}
.y-drawer-backdrop.is-open .y-mmenu { transform: none; }

.y-mmenu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-h);
    padding-inline: var(--gutter) calc(var(--gutter) - 10px);
    border-bottom: 1px solid var(--line-soft);
    flex: none;
}
.y-mmenu__head img { height: 38px; width: auto; }
.y-mmenu__body { flex: 1; overflow-y: auto; padding: 10px var(--gutter) 28px; overscroll-behavior: contain; }
.y-mmenu__list { list-style: none; margin: 0; padding: 0; }
.y-mmenu__row { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line-soft); }
.y-mmenu__link {
    flex: 1;
    display: block;
    padding: 14px 0 12px;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 300;
    letter-spacing: -0.025em;
    line-height: 1.1;
    color: var(--ink);
}
.y-mmenu__toggle {
    width: 44px; height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--ink-2);
    transition: transform 0.4s var(--ease);
}
.y-mmenu__toggle[aria-expanded="true"] { transform: rotate(180deg); }
.y-mmenu__sub { list-style: none; margin: 0; padding: 6px 0 16px; display: none; }
.y-mmenu__sub.is-open { display: block; }
.y-mmenu__sub a { display: block; padding: 9px 0; font-size: 0.975rem; color: var(--ink-2); }
.y-mmenu__sub a:hover { color: var(--ink); }
.y-mmenu__secondary { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 2px; }
.y-mmenu__secondary a { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 0.95rem; color: var(--ink-2); }
.y-mmenu__secondary .y-icon { width: 19px; height: 19px; color: var(--ink); }
.y-mmenu__foot {
    flex: none;
    padding: 18px var(--gutter);
    border-top: 1px solid var(--line-soft);
    font-size: var(--fs-small);
    color: var(--ink-2);
}
.y-mmenu__foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }

/* 9. Arama ---------------------------------------------------------------- */
.y-search {
    position: fixed;
    inset: 0;
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    background: var(--milk);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
}
.y-search.is-open { opacity: 1; visibility: visible; transition: opacity 0.4s var(--ease), visibility 0s; }
.y-search__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-h);
    padding-inline: var(--gutter) calc(var(--gutter) - 10px);
    border-bottom: 1px solid var(--line-soft);
}
.y-search__head img { height: 40px; width: auto; }
.y-search__body {
    flex: 1;
    width: 100%;
    max-width: 980px;
    margin-inline: auto;
    padding: clamp(48px, 12vh, 140px) var(--gutter) 40px;
}
.y-search__label { display: block; margin-bottom: 18px; }
.y-search__field { position: relative; border-bottom: 1px solid var(--ink); }
.y-search__input {
    width: 100%;
    padding: 8px 56px 14px 0;
    background: transparent;
    border: 0;
    outline: none;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.1rem + 2.8vw, 3.2rem);
    font-weight: 300;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--ink);
}
.y-search__input::placeholder { color: var(--ink-3); opacity: 1; }
.y-search__submit { position: absolute; right: -10px; bottom: 10px; }
.y-search__submit .y-icon { width: 28px; height: 28px; }
.y-search__suggest { margin-top: 36px; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.y-search__suggest button {
    font-size: 1rem;
    color: var(--ink-2);
    background: none;
    border: 0;
    padding: 4px 0;
    cursor: pointer;
    border-bottom: 1px solid var(--line);
    transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}
.y-search__suggest button:hover { color: var(--ink); border-color: var(--ink); }

/* 10. Sepet çekmecesi ---------------------------------------------------- */
.y-cart-overlay {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-drawer) - 1);
    background: rgba(38, 37, 36, 0.28);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s var(--ease), visibility 0s linear 0.4s;
}
.y-cart-overlay.is-open { opacity: 1; visibility: visible; transition: opacity 0.4s var(--ease), visibility 0s; }

.y-cart {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: var(--z-drawer);
    width: min(440px, 100%);
    display: flex;
    flex-direction: column;
    background: var(--milk);
    transform: translateX(100%);
    transition: transform 0.55s var(--ease);
}
.y-cart.is-open { transform: none; }
.y-cart__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: var(--nav-h);
    padding-inline: 24px 14px;
    border-bottom: 1px solid var(--line-soft);
    flex: none;
}
.y-cart__title { font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1; }
.y-cart__items { flex: 1; overflow-y: auto; padding: 8px 24px; overscroll-behavior: contain; }
.y-cart__empty { padding: 72px 0; text-align: center; }
.y-cart__empty p { font-family: var(--font-display); font-size: 1.4rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 8px; }
.y-cart__empty span { display: block; color: var(--ink-2); font-size: var(--fs-small); margin-bottom: 26px; }
.y-cart__row { display: grid; grid-template-columns: 76px 1fr auto; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line-soft); }
.y-cart__thumb { width: 76px; aspect-ratio: 3 / 4; object-fit: cover; background: var(--studio); }
.y-cart__name { font-size: 0.9rem; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.y-cart__meta { margin-top: 4px; font-size: var(--fs-meta); color: var(--ink-2); }
.y-cart__price { margin-top: 10px; font-size: 0.9rem; font-weight: 500; font-variant-numeric: tabular-nums; }
.y-cart__remove { align-self: start; margin: -8px -10px 0 0; color: var(--ink-3); }
.y-cart__remove:hover { color: var(--error); }
.y-cart__remove .y-icon { width: 18px; height: 18px; }
.y-cart__foot { flex: none; padding: 18px 24px 24px; border-top: 1px solid var(--line-soft); display: grid; gap: 10px; }
.y-cart__ship { font-size: var(--fs-meta); color: var(--ink-2); padding-bottom: 6px; }
.y-cart__ship strong { color: var(--ink); font-weight: 600; }
.y-cart__subtotal { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 8px; }
.y-cart__subtotal span { font-size: var(--fs-small); color: var(--ink-2); }
.y-cart__subtotal strong { font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; }

/* 11. Footer ---------------------------------------------------------------- */
.y-footer { background: var(--paper); color: var(--ink); margin-top: auto; }
.y-footer__top {
    display: grid;
    grid-template-columns: minmax(240px, 1.3fr) repeat(4, minmax(0, 1fr));
    gap: 40px;
    max-width: var(--maxw);
    margin-inline: auto;
    padding: clamp(56px, 7vw, 96px) var(--gutter) 48px;
}
.y-footer__brand img { height: 64px; width: auto; margin-bottom: 18px; }
.y-footer__brand p { font-size: var(--fs-small); color: var(--ink-2); max-width: 30ch; line-height: 1.6; }
.y-footer__social { display: flex; gap: 4px; margin-top: 18px; margin-left: -10px; }
.y-footer h4 {
    font-family: var(--font-text);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 16px;
    color: var(--ink);
}
.y-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.y-footer li a, .y-footer li button {
    display: inline-block;
    padding: 5px 0;
    font-size: var(--fs-small);
    color: var(--ink-2);
    background: none;
    border: 0;
    text-align: left;
    cursor: pointer;
    transition: color 0.3s var(--ease);
}
.y-footer li a:hover, .y-footer li button:hover { color: var(--ink); }
.y-footer__contact li { font-size: var(--fs-small); color: var(--ink-2); padding: 5px 0; line-height: 1.5; }
.y-footer__legal {
    border-top: 1px solid var(--line);
}
.y-footer__legal-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 18px 32px;
    max-width: var(--maxw);
    margin-inline: auto;
    padding: 22px var(--gutter);
    font-size: var(--fs-meta);
    color: var(--ink-2);
}
.y-footer__ids { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.y-footer__ids span { white-space: nowrap; }
.y-footer__badges { display: flex; align-items: center; gap: 14px; }
.y-footer__badges a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px solid var(--line); background: var(--milk); transition: border-color 0.3s var(--ease); }
.y-footer__badges a:hover { border-color: var(--ink-3); }
.y-footer__badges img { height: 20px; width: auto; filter: grayscale(1); opacity: 0.8; transition: filter 0.3s var(--ease), opacity 0.3s var(--ease); }
.y-footer__badges a:hover img { filter: none; opacity: 1; }

@media (max-width: 1100px) {
    .y-footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .y-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 540px) {
    .y-footer__top { grid-template-columns: 1fr 1fr; gap: 32px 20px; }
}

/* 12. Çerez bandı ve tercihler ------------------------------------------ */
.y-cookie {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--z-cookie);
    background: var(--milk);
    border-top: 1px solid var(--line);
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.6s var(--ease), visibility 0s linear 0.6s;
}
.y-cookie.is-open { transform: none; visibility: visible; transition: transform 0.6s var(--ease), visibility 0s; }
.y-cookie__inner {
    display: flex;
    align-items: center;
    gap: 20px 40px;
    max-width: var(--maxw);
    margin-inline: auto;
    padding: 18px var(--gutter);
}
.y-cookie__text { flex: 1; font-size: 0.8rem; line-height: 1.6; color: var(--ink-2); }
.y-cookie__text a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.y-cookie__actions { display: flex; flex-wrap: wrap; gap: 8px; flex: none; }
.y-cookie__actions .y-btn { min-height: 42px; padding: 0 18px; font-size: 0.8rem; }
@media (max-width: 900px) {
    .y-cookie__inner { flex-direction: column; align-items: stretch; gap: 14px; padding-block: 16px; }
    .y-cookie__actions { display: grid; grid-template-columns: 1fr 1fr; }
    .y-cookie__actions .y-btn { white-space: normal; line-height: 1.25; min-height: 46px; padding: 8px 12px; text-align: center; }
    .y-cookie__actions .y-btn:last-child { grid-column: 1 / -1; order: -1; }
}

.y-modal {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-cookie) + 10);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(38, 37, 36, 0.32);
}
.y-modal.is-open { display: flex; }
.y-modal__panel {
    width: min(620px, 100%);
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    background: var(--milk);
    padding: clamp(22px, 4vw, 36px);
    animation: y-rise 0.5s var(--ease);
}
@keyframes y-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.y-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.y-modal__head h3 { font-family: var(--font-display); font-size: 1.6rem; font-weight: 400; letter-spacing: -0.02em; line-height: 1.1; }
.y-choice {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 0;
    border-top: 1px solid var(--line-soft);
    cursor: pointer;
}
.y-choice p { font-size: 0.925rem; font-weight: 500; }
.y-choice span { display: block; margin-top: 3px; font-size: var(--fs-meta); color: var(--ink-2); line-height: 1.5; }
.y-choice input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--ink); flex: none; }

/* 13. Canlı destek (sepet/ödeme) ------------------------------------------ */
.y-help {
    position: fixed;
    right: clamp(14px, 3vw, 28px);
    bottom: clamp(14px, 3vw, 28px);
    z-index: calc(var(--z-drawer) - 5);
    display: none;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}
.y-help.is-visible { display: flex; }
.y-help__card {
    display: none;
    width: min(300px, calc(100vw - 32px));
    padding: 18px;
    background: var(--milk);
    border: 1px solid var(--line);
    box-shadow: 0 18px 40px -24px rgba(38, 37, 36, 0.35);
    font-size: var(--fs-small);
    color: var(--ink-2);
    animation: y-rise 0.4s var(--ease);
}
.y-help__card.is-open { display: block; }
.y-help__card strong { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; }
.y-help__card .y-btn { margin-top: 14px; min-height: 42px; width: 100%; }
.y-help__toggle {
    width: 52px; height: 52px;
    border-radius: 999px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ink);
    color: var(--milk);
    border: 0;
    cursor: pointer;
    box-shadow: 0 14px 30px -18px rgba(38, 37, 36, 0.6);
    transition: background 0.3s var(--ease), transform 0.2s ease;
}
.y-help__toggle:hover { background: var(--taupe-deep); }
.y-help__toggle:active { transform: scale(0.96); }

/* 14. Ürün kartı ---------------------------------------------------------- */
.y-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.y-card__media {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: var(--studio);
}
.y-card__link { position: absolute; inset: 0; display: block; }
.y-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.7s var(--ease), transform 1.4s var(--ease);
}
.y-card__img--alt { opacity: 0; }
.y-card:hover .y-card__img { transform: scale(1.025); }
.y-card:hover .y-card__img--alt.is-loaded { opacity: 1; }
.y-card:hover .y-card__img.has-secondary.alt-ready { opacity: 0; }

.y-card__quick {
    position: absolute;
    left: 10px; right: 10px; bottom: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 42px;
    padding: 0 14px;
    background: rgba(250, 250, 249, 0.94);
    color: var(--ink);
    border: 0;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s var(--ease), transform 0.5s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease);
}
.y-card__quick .y-icon { width: 16px; height: 16px; }
.y-card:hover .y-card__quick,
.y-card:focus-within .y-card__quick { opacity: 1; transform: none; }
.y-card__quick:hover { background: var(--ink); color: var(--milk); }
.y-card__quick[disabled] { cursor: not-allowed; color: var(--ink-3); }
.y-card__quick[disabled]:hover { background: rgba(250, 250, 249, 0.94); color: var(--ink-3); }
.y-card__quick .y-quick-check { display: none; }
.y-card__quick.quick-add-btn-success,
.y-card__quick.quick-add-btn-success:hover { background: var(--ink) !important; color: var(--milk) !important; opacity: 1; transform: none; }
.y-card__quick.quick-add-btn-success .y-quick-check { display: inline-block; }
.y-card__quick.quick-add-btn-success .y-quick-bag { display: none; }

@media (hover: none) {
    .y-card__quick {
        opacity: 1;
        transform: none;
        left: auto;
        right: 8px;
        bottom: 8px;
        width: 40px;
        min-height: 40px;
        padding: 0;
        border-radius: 999px;
    }
    .y-card__quick [data-quick-add-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .y-card__quick .y-quick-bag, .y-card__quick .y-quick-check { display: inline-flex; }
    .y-card__quick .y-quick-check { display: none; }
    .y-card__quick.quick-add-btn-success .y-quick-check { display: inline-flex; }
    .y-card__quick.quick-add-btn-success .y-quick-bag { display: none; }
    .y-card__quick .y-icon { width: 18px; height: 18px; }
}

.y-card__meta { display: block; padding: 14px 2px 0; }
.y-card__name {
    font-size: 0.875rem;
    font-weight: 450;
    line-height: 1.4;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.y-card__color { margin-top: 2px; font-size: var(--fs-meta); color: var(--ink-3); }
.y-card__price { margin-top: 6px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.y-price { font-weight: 500; color: var(--ink); }
.y-price--old { color: var(--ink-3); text-decoration: line-through; font-size: 0.8rem; }
.y-price__pct { font-size: 0.75rem; font-weight: 600; color: var(--taupe-deep); }

.product-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 4;
    padding: 5px 9px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.3;
    text-transform: uppercase;
    pointer-events: none;
    background: var(--milk);
    color: var(--ink);
}
.product-badge--indirim { background: var(--ink); color: var(--milk); }
.product-badge--yeni { background: var(--milk); color: var(--taupe-deep); }

.size-picker.y-sizepicker {
    position: absolute;
    left: 10px; right: 10px; bottom: 10px;
    z-index: 6;
    padding: 14px;
    background: var(--milk);
    border: 1px solid var(--line);
    animation: y-rise 0.35s var(--ease);
}
.y-sizepicker p { font-size: var(--fs-meta); color: var(--ink-2); margin-bottom: 10px; }
.y-sizepicker__row { display: flex; gap: 6px; }
.y-sizepicker select {
    flex: 1;
    min-width: 0;
    height: 40px;
    padding: 0 10px;
    border: 1px solid var(--line);
    background: var(--milk);
    font-size: 0.85rem;
    color: var(--ink);
    border-radius: 0;
}
.y-sizepicker select:focus { outline: none; border-color: var(--ink); }
.y-sizepicker button {
    height: 40px;
    padding: 0 14px;
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid var(--ink);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.y-sizepicker button:hover { background: var(--ink); color: var(--milk); }
.y-sizepicker button[data-size-cancel]:hover { background: transparent; color: var(--ink); border-color: var(--ink); }
.y-sizepicker button[data-size-cancel] { background: transparent; color: var(--ink); border-color: var(--line); }

.y-skel { position: relative; overflow: hidden; background: var(--studio); }
.y-skel::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(250, 250, 249, 0.55) 50%, transparent 80%);
    transform: translateX(-100%);
    animation: y-shimmer 1.6s var(--ease-io) infinite;
}
@keyframes y-shimmer { to { transform: translateX(100%); } }
.y-skel-line { height: 12px; margin-top: 12px; background: var(--studio); }

/* 15. Bölüm başlıkları ------------------------------------------------------ */
.y-sechead {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: clamp(28px, 3.5vw, 48px);
}
.y-sechead__aside { display: flex; align-items: center; gap: 22px; flex: none; }

/* 16. İç sayfa başlığı ---------------------------------------------------- */
.y-pagehead { padding: clamp(40px, 6vw, 88px) 0 clamp(28px, 4vw, 48px); }
.y-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--fs-meta); color: var(--ink-3); margin-bottom: 18px; }
.y-crumbs a { color: var(--ink-2); transition: color 0.3s var(--ease); }
.y-crumbs a:hover { color: var(--ink); }
.y-crumbs span[aria-hidden] { color: var(--line); }

/* 17. Görünür olunca yumuşak giriş ---------------------------------------- */
[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 1s var(--ease), transform 1.2s var(--ease);
    transition-delay: calc(var(--reveal-i, 0) * 90ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* Maske: gözlenen öğe kırpılmaz (aksi halde IntersectionObserver onu hiç görmez); içerik kırpılır. */
[data-reveal="mask"] { opacity: 1; transform: none; }
[data-reveal="mask"] > * {
    display: block;
    height: 100%;
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1.3s var(--ease);
}
[data-reveal="mask"].is-in > * { clip-path: inset(0 0 0 0); }

/* 18. Azaltılmış hareket --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    [data-reveal], [data-reveal="mask"], [data-reveal="mask"] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
    .y-header { transition: none; }
}

/* Mobilde canlı destek balonu görünürken indirim çarkı sekmesi üst üste binmesin */
@media (max-width: 768px) {
    .y-help.is-visible ~ #sw-tab { bottom: calc(150px + env(safe-area-inset-bottom)); }
}

/* Çerçevesiz bilgi notları ve durum etiketleri ------------------------------ */
.y-note {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    font-size: var(--fs-small);
    line-height: 1.6;
    color: var(--ink-2);
    text-align: left;
}
.y-note > div { flex: 1; min-width: 0; }
.y-note__label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.68rem;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--taupe-deep);
}
.y-note__text { color: var(--ink); }
.y-note__close {
    flex-shrink: 0;
    padding: 2px 0;
    background: none;
    border: 0;
    font-size: var(--fs-meta);
    color: var(--ink-3);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.y-note__close:hover { color: var(--ink); }
.y-note--center { justify-content: center; text-align: center; }
.y-note--error { color: #9A3B2E; }
.y-note--success { color: #3E6B4B; }

.y-status {
    --status: var(--taupe);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ink);
    white-space: nowrap;
}
.y-status::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--status); flex-shrink: 0; }
.y-status--wait { --status: #C29A4A; }
.y-status--new { --status: #6D86A0; }
.y-status--prep { --status: #D1A93F; }
.y-status--ship { --status: #8A74A6; }
.y-status--ok { --status: #4F8A5E; }
.y-status--bad { --status: #B5483A; }