/* Kartela — bağımsız kabuk (aşama 4). Sınıf öneki: bb-. Motor stilleri yok; tüm görünüm bu dosyadadır.
   Menü: kartela şeridi (asılı renk numunesi sekmeleri), açılınca yelpaze · Geçiş: boya silindiri süpürmesi (alttan yukarı)
   Alt bilgi: teneke kutu etiketi · Yazı tipi: Young Serif (SIL OFL 1.1, assets/fonts) başlıklarda; gövde sistem sans.
   Palet: krem duvar beyazı + petrol mavisi (yapı) + mercan (eylem); kartela renkleri CMS’ten gelir (--sw). Koyu tam ekran bölüm yok. */
@font-face { font-family: "Young Serif"; src: url("../fonts/youngserif-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap;
    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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Young Serif"; src: url("../fonts/youngserif-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap;
    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; }

/* ── 1. tokenlar, sıfırlama ─────────────────────────────────────────── */
:root {
    --f-d: "Young Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --f-b: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --f-m: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
    --gut: clamp(1.1rem, .5rem + 2.6vw, 3rem);
    --ease: cubic-bezier(.2, .75, .2, 1);
    --ease-io: cubic-bezier(.6, .05, .3, 1);
    --head-h: 74px;
    --sec: clamp(3.4rem, 2rem + 5.6vw, 7rem);
    --h1: clamp(2.45rem, 1.1rem + 4.9vw, 5.5rem);
    --h2: clamp(1.95rem, 1.2rem + 2.9vw, 3.7rem);
    --h3: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
    --paper: color-mix(in srgb, var(--c-soft) 75%, #fff);
    --tape: color-mix(in srgb, var(--c-accent-soft) 14%, #e8d7a9);
    --shadow: 0 1px 0 color-mix(in srgb, var(--c-ink) 6%, transparent), 0 22px 34px -26px color-mix(in srgb, var(--c-ink) 55%, transparent);
    --pick: var(--c-accent-soft);
    --cms-fab-bottom: 1.1rem; --cms-fab-right: 1.1rem;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--head-h) + 1rem); }
body { margin: 0; background: var(--c-bg); color: var(--c-ink); font: 400 1.0625rem/1.65 var(--f-b); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
body.is-locked { overflow: hidden; }
img, svg { max-width: 100%; display: block; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--f-d); font-weight: 400; letter-spacing: .002em; line-height: 1.06; text-wrap: balance; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--c-accent-soft); color: var(--c-ink); }
.bb-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.bb-skip { position: fixed; left: 1rem; top: -4rem; z-index: 200; background: var(--c-primary); color: var(--c-on-primary); padding: .7rem 1rem; border-radius: 3px; transition: top .2s; }
.bb-skip:focus { top: 1rem; }
.bb-preview { background: var(--c-accent); color: var(--c-on-accent); text-align: center; padding: .5rem; font: 600 .8rem/1.4 var(--f-b); }
.bb-wrap { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--gut); }
.bb-narrow { max-width: 820px; }
.bb-muted { color: var(--c-muted); }
.bb-small { font-size: .85rem; color: var(--c-muted); margin-top: .9rem; }
.bb-link { color: var(--c-primary-ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; text-decoration-color: var(--c-accent-soft); }
.bb-link:hover { text-decoration-color: var(--c-accent); }
.bb-lead { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); color: var(--c-ink-soft); max-width: 60ch; }
.bb-h1 { font-size: var(--h1); } .bb-h2 { font-size: var(--h2); } .bb-h3 { font-size: var(--h3); } .bb-h4 { font-size: 1.28rem; line-height: 1.2; }
.bb-num { font-family: var(--f-d); font-variant-numeric: lining-nums; }
.bb-cur { font-family: var(--f-b); font-size: .62em; font-weight: 700; margin-right: .08em; vertical-align: .22em; }
.bb-main { display: block; min-height: 60vh; }

/* ── 2. ortak parçalar: etiket, bant, düğme, başlık ─────────────────── */
.bb-tag { display: inline-flex; align-items: center; gap: .55rem; padding: .32rem .8rem .32rem .6rem; background: var(--paper); border: 1px solid var(--c-border-2); border-radius: 3px; font: 600 .76rem/1 var(--f-m); letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-soft); box-shadow: 0 1px 0 color-mix(in srgb, var(--c-ink) 8%, transparent); }
.bb-tag__dot { width: .85rem; height: .85rem; border-radius: 2px; background: var(--sw, var(--pick)); outline: 1px solid color-mix(in srgb, var(--c-ink) 25%, transparent); outline-offset: 0; transition: background .5s; }
.bb-tag__sep { opacity: .45; }
.bb-tape { display: inline-block; position: relative; padding: .5rem 1.05rem; background: var(--tape); color: var(--c-ink-soft); font: 600 .84rem/1.25 var(--f-b); clip-path: polygon(0 0, 100% 0, 98.4% 18%, 100% 36%, 98.6% 55%, 100% 76%, 98.8% 100%, 0 100%, 1.6% 80%, 0 60%, 1.4% 38%, 0 18%); box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.bb-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 3rem; padding: .7rem 1.5rem; background: var(--c-accent); color: var(--c-on-accent); font: 700 .98rem/1.2 var(--f-b); letter-spacing: .01em; border: 2px solid var(--c-accent); border-radius: 3px; box-shadow: 4px 4px 0 color-mix(in srgb, var(--c-accent-dark) 80%, #000 0%); transition: transform .2s var(--ease), box-shadow .2s var(--ease), background .2s; }
.bb-btn:hover { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--c-accent-dark); background: var(--c-accent-dark); border-color: var(--c-accent-dark); }
.bb-btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--c-accent-dark); }
.bb-btn svg { width: 1.15em; height: 1.15em; }
.bb-btn--ghost { background: transparent; color: var(--c-primary-ink); border-color: var(--c-primary); box-shadow: 4px 4px 0 color-mix(in srgb, var(--c-primary) 28%, transparent); }
.bb-btn--ghost:hover { background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary); box-shadow: 2px 2px 0 color-mix(in srgb, var(--c-primary) 28%, transparent); }
.bb-btn--sm { min-height: 2.5rem; padding: .45rem 1rem; font-size: .88rem; box-shadow: 3px 3px 0 var(--c-accent-dark); }
.bb-btn--lg { min-height: 3.4rem; padding-inline: 1.8rem; font-size: 1.05rem; }
.bb-btn--block { display: flex; width: 100%; }
.bb-btn.is-cur { background: var(--c-primary); border-color: var(--c-primary); box-shadow: 3px 3px 0 var(--c-primary-dark); }
.bb-sec { padding-block: var(--sec); position: relative; }
.bb-sec--tight { padding-block: clamp(2rem, 1rem + 4vw, 4.5rem); }
.bb-sec--alt { background: var(--c-surface); }
.bb-sh { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: .6rem 2rem; margin-bottom: clamp(1.6rem, 3vw, 3rem); }
.bb-sh--col { display: block; }
.bb-sh .bb-k { grid-column: 1 / -1; }
.bb-k { display: flex; align-items: center; gap: .7rem; font: 600 .8rem/1 var(--f-m); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); margin-bottom: .9rem; }
.bb-k__n { display: inline-grid; place-items: center; min-width: 2.2rem; height: 1.7rem; padding-inline: .4rem; background: var(--c-primary); color: var(--c-on-primary); border-radius: 2px; letter-spacing: 0; }
.bb-more { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--c-primary-ink); border-bottom: 2px solid var(--c-accent-soft); padding-bottom: .15rem; }
.bb-more svg { width: 1.1em; height: 1.1em; transition: transform .25s var(--ease); }
.bb-more:hover svg { transform: translateX(4px); }
.bb-ticks { display: grid; gap: .55rem; }
.bb-ticks li { display: grid; grid-template-columns: 1.3rem 1fr; gap: .6rem; align-items: start; font-size: .96rem; }
.bb-ticks svg { width: 1.2rem; height: 1.2rem; color: var(--c-primary); margin-top: .18rem; }
.bb-ticks--big { gap: .8rem; } .bb-ticks--big li { font-size: 1.05rem; }
.bb-prose { color: var(--c-ink-soft); max-width: 68ch; }
.bb-prose > * + * { margin-top: 1.05em; }
.bb-prose h2, .bb-prose h3 { font-size: var(--h3); color: var(--c-ink); margin-top: 1.7em; }
.bb-prose a { color: var(--c-primary-ink); text-decoration: underline; text-decoration-color: var(--c-accent-soft); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.bb-prose ul, .bb-prose ol { padding-left: 1.2rem; } .bb-prose ul { list-style: disc; } .bb-prose ol { list-style: decimal; }
.bb-prose li::marker { color: var(--c-accent); }
.bb-prose--lead > p:first-child { font-size: clamp(1.25rem, 1.05rem + 1vw, 1.7rem); line-height: 1.45; color: var(--c-ink); font-family: var(--f-d); }
.bb-prose--art > p:first-child::first-letter { font-family: var(--f-d); font-size: 4.2em; float: left; line-height: .82; padding: .06em .12em 0 0; color: var(--c-accent); }
[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-reveal].is-in, .no-js [data-reveal] { opacity: 1; transform: none; }
@keyframes bb-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) { .bb-rise { animation: bb-rise .9s var(--ease) both; } .bb-hero__copy > .bb-rise:nth-child(2) { animation-delay: .08s; } .bb-hero__copy > .bb-rise:nth-child(3) { animation-delay: .16s; } .bb-hero__copy > .bb-rise:nth-child(4) { animation-delay: .26s; } .bb-hero__copy > .bb-rise:nth-child(5) { animation-delay: .34s; } .bb-hero__copy > .bb-rise:nth-child(6) { animation-delay: .42s; } .bb-pick.bb-rise { animation-delay: .5s; } }

/* ── 3. başlık: kartela şeridi (asılı renk numunesi sekmeleri) ───────── */
@view-transition { navigation: auto; }
.bb-head { position: sticky; top: 0; z-index: 60; height: var(--head-h); background: color-mix(in srgb, var(--c-bg) 97%, transparent); border-bottom: 1px solid var(--c-border); view-transition-name: bbhead; transition: box-shadow .3s; }
.bb-head.is-stuck { box-shadow: 0 14px 24px -22px color-mix(in srgb, var(--c-ink) 60%, transparent); }
.bb-head__in { height: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(1rem, 2vw, 2.4rem); max-width: 1440px; margin-inline: auto; padding-inline: var(--gut); }
.bb-brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--c-primary-ink); }
.bb-brand__name { font-family: var(--f-d); font-size: 1.5rem; letter-spacing: .06em; line-height: 1; }
.bb-brand__logo { max-height: 40px; width: auto; }
.bb-mark { flex: none; }
.bb-strip { align-self: start; justify-self: center; min-width: 0; }
.bb-strip__l { display: flex; align-items: flex-start; gap: 5px; }
.bb-strip__i { position: relative; }
.bb-tab { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 1px; min-width: 4.7rem; height: 3.35rem; padding: .35rem .8rem .5rem; background: var(--paper); border: 1px solid var(--c-border-2); border-top: 0; border-radius: 0 0 5px 5px; font-weight: 600; font-size: .86rem; line-height: 1.1; white-space: nowrap; overflow: hidden; transition: height .35s var(--ease), background .3s, box-shadow .3s; }
.bb-tab__c { position: absolute; left: 0; right: 0; top: 0; height: .62rem; background: var(--sw); transition: height .35s var(--ease); }
.bb-tab__n { position: relative; font: 600 .66rem/1 var(--f-m); letter-spacing: .06em; color: var(--c-muted); }
.bb-tab__t { position: relative; }
.bb-tab:hover, .bb-tab:focus-visible { height: 3.95rem; box-shadow: 0 10px 14px -12px color-mix(in srgb, var(--c-ink) 55%, transparent); }
.bb-tab.is-cur { height: 4.5rem; background: var(--sw); }
.bb-tab.is-cur .bb-tab__c { height: 0; }
.bb-tab.is-cur .bb-tab__n { color: var(--c-ink); }
.bb-nav__subtoggle { position: absolute; right: 2px; top: 1px; width: 1.5rem; height: 1.5rem; display: grid; place-items: center; font-size: .7rem; color: var(--c-ink-soft); z-index: 2; }
.bb-nav__sub { position: absolute; left: 0; top: calc(100% + 4px); min-width: 12rem; display: none; padding: .4rem; background: var(--paper); border: 1px solid var(--c-border-2); box-shadow: var(--shadow); z-index: 5; }
.bb-strip__i.is-open > .bb-nav__sub, .bb-strip__i:hover > .bb-nav__sub, .bb-strip__i:focus-within > .bb-nav__sub { display: block; }
.bb-nav__sub a { display: block; padding: .5rem .7rem; font-size: .9rem; border-radius: 2px; } .bb-nav__sub a:hover { background: var(--c-surface); }
.bb-head__act { display: flex; align-items: center; gap: .8rem; }
.bb-head__tel { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; font-size: .92rem; white-space: nowrap; color: var(--c-primary-ink); }
.bb-head__tel svg { width: 1.1rem; height: 1.1rem; }
.bb-head__fan { display: inline-flex; align-items: center; gap: .55rem; height: 2.5rem; padding-inline: .8rem .95rem; border: 2px solid var(--c-primary); border-radius: 3px; font-weight: 700; font-size: .88rem; color: var(--c-primary-ink); transition: background .2s, color .2s; }
.bb-head__fan:hover { background: var(--c-primary); color: var(--c-on-primary); }
.bb-fanico { position: relative; width: 1.3rem; height: 1.3rem; display: inline-block; flex: none; }
.bb-fanico i { position: absolute; left: .12rem; bottom: .08rem; width: 1.05rem; height: .3rem; border-radius: 2px; background: currentColor; transform-origin: .12rem 50%; transition: transform .4s var(--ease); }
.bb-fanico i:nth-child(1) { transform: rotate(-62deg); opacity: .45; } .bb-fanico i:nth-child(2) { transform: rotate(-31deg); opacity: .7; } .bb-fanico i:nth-child(3) { transform: rotate(0); }
[data-fan-open]:hover .bb-fanico i:nth-child(1) { transform: rotate(-82deg); } [data-fan-open]:hover .bb-fanico i:nth-child(2) { transform: rotate(-41deg); }
.bb-head__prog { position: absolute; left: 0; bottom: -1px; height: 4px; width: 100%; background: var(--pick); transform: scaleX(var(--p, 0)); transform-origin: 0 50%; }
@media (max-width: 1240px) { .bb-head__tel span { display: none; } .bb-head__tel { width: 2.5rem; height: 2.5rem; justify-content: center; border: 2px solid var(--c-border-2); border-radius: 3px; } }
@media (max-width: 1060px) { .bb-strip { display: none; } .bb-head__in { grid-template-columns: 1fr auto; } :root { --head-h: 64px; } .bb-head__tel, .bb-head__act .bb-btn { display: none; } }
@media (max-width: 1060px) { body { padding-bottom: 4.9rem; } }

/* ── 4. yelpaze (tam ekran menü) ─────────────────────────────────────── */
.bb-fan { position: fixed; inset: 0; z-index: 90; visibility: hidden; opacity: 0; transition: opacity .35s ease, visibility 0s .8s; --th: 66px; --len: min(60vw, 640px); --step: 12deg; --start: calc(-6deg * (var(--n) - 1)); }
.bb-fan.is-open { visibility: visible; opacity: 1; transition: opacity .3s ease; }
.bb-fan__veil { position: absolute; inset: 0; background: var(--c-bg); }
.bb-fan__x { position: absolute; right: clamp(1rem, 4vw, 3rem); top: 1.2rem; z-index: 3; display: inline-flex; align-items: center; gap: .5rem; height: 2.7rem; padding-inline: 1rem; border: 2px solid var(--c-primary); border-radius: 3px; font-weight: 700; color: var(--c-primary-ink); background: var(--c-bg); }
.bb-fan__x svg { width: 1.1rem; height: 1.1rem; } .bb-fan__x:hover { background: var(--c-primary); color: var(--c-on-primary); }
.bb-fan__deck { position: absolute; left: clamp(2.4rem, 7vw, 7rem); top: 50%; width: 0; height: 0; margin: 0; list-style: none; z-index: 2; }
.bb-card { position: absolute; left: 0; top: calc(var(--th) / -2); width: var(--len); height: var(--th); transform-origin: 0 50%; transform: rotate(0deg); transition: transform .8s var(--ease) calc(var(--i) * 50ms); filter: drop-shadow(0 8px 10px color-mix(in srgb, var(--c-ink) 22%, transparent)); }
.is-open .bb-card { transform: rotate(calc(var(--start) + var(--i) * var(--step))); }
.bb-card__a { display: flex; align-items: center; justify-content: flex-end; gap: .9rem; height: 100%; padding: 0 1.1rem 0 4rem; background: var(--sw); border-radius: 3px 14px 14px 3px; color: var(--c-ink); position: relative; transition: transform .3s var(--ease); }
.bb-card__a::before { content: ""; position: absolute; left: .9rem; top: 50%; width: .85rem; height: .85rem; margin-top: -.42rem; border-radius: 50%; background: var(--c-bg); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .3); }
.bb-card__a:hover, .bb-card__a:focus-visible { transform: translateX(14px); }
.bb-card__code { font: 600 .72rem/1 var(--f-m); letter-spacing: .06em; opacity: .7; margin-right: auto; }
.bb-card__t { font-family: var(--f-d); font-size: clamp(1.15rem, .9rem + 1vw, 1.75rem); line-height: 1; white-space: nowrap; }
.bb-card__nm { display: none; font-size: .78rem; font-weight: 600; opacity: .7; white-space: nowrap; }
.bb-card__a.is-cur { box-shadow: inset 0 -5px 0 var(--c-ink); }
.bb-card--go .bb-card__a { color: var(--c-on-accent); } .bb-card--go .bb-card__code { opacity: .85; }
.bb-fan__rivet { position: absolute; left: -12px; top: -12px; width: 24px; height: 24px; border-radius: 50%; background: var(--c-primary); box-shadow: 0 0 0 5px var(--c-bg), 0 2px 8px rgba(0, 0, 0, .35); z-index: 5; }
.bb-fan__side { position: absolute; right: clamp(1.5rem, 6vw, 6rem); top: 50%; transform: translateY(-50%); width: min(330px, 28vw); z-index: 2; opacity: 0; transition: opacity .5s .5s; }
.is-open .bb-fan__side { opacity: 1; }
.bb-fan__k { font: 600 .78rem/1 var(--f-m); letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); margin-bottom: .6rem; }
.bb-fan__h { font-family: var(--f-d); font-size: 1.9rem; line-height: 1.1; margin-bottom: 1.2rem; }
.bb-fan__kids { margin-bottom: 1.2rem; display: grid; gap: .3rem; } .bb-fan__kids a { font-weight: 600; border-bottom: 2px solid var(--c-accent-soft); }
.bb-fan__meta { display: grid; gap: .45rem; font-size: .95rem; color: var(--c-ink-soft); } .bb-fan__meta a { font-weight: 700; color: var(--c-primary-ink); }
@media (max-width: 1100px) {
    .bb-fan { --th: 52px; --len: calc(100vw - 4.6rem); --step: 10.5deg; }
    .bb-fan__deck { left: 1.4rem; top: 46%; }
    .bb-fan__side { left: 1.4rem; right: 1.4rem; top: auto; bottom: calc(5.6rem + env(safe-area-inset-bottom)); transform: none; width: auto; }
    .bb-fan__k, .bb-fan__h, .bb-fan__kids { display: none; }
    .bb-card__code { display: none; } .bb-card__a { padding-left: 2.6rem; } .bb-card__nm { display: inline; }
    .bb-card__a:hover { transform: none; }
}
@media (max-width: 420px) { .bb-card__nm { display: none; } .bb-card__t { font-size: 1.15rem; } }

/* ── 5. mobil alt çubuk ──────────────────────────────────────────────── */
.bb-dock { display: none; }
@media (max-width: 1060px) {
    .bb-dock { position: fixed; left: .6rem; right: .6rem; bottom: calc(.6rem + env(safe-area-inset-bottom)); z-index: 70; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 5px; background: var(--paper); border: 1.5px solid var(--c-ink); border-radius: 6px; box-shadow: 4px 4px 0 color-mix(in srgb, var(--c-ink) 85%, transparent); view-transition-name: bbdock; }
    .bb-dock__a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 3.2rem; border-radius: 3px; font: 700 .72rem/1 var(--f-b); color: var(--c-ink); }
    .bb-dock__a svg { width: 1.25rem; height: 1.25rem; }
    .bb-dock__a--go { background: var(--c-accent); color: var(--c-on-accent); }
    .bb-dock__fan { background: var(--pick); }
    .bb-fab, .cms-fab-host { bottom: 5.4rem !important; }
}
@media (min-width: 1061px) { .bb-dock__fan { display: none; } }

/* ── 6. hero: boya silindiri ─────────────────────────────────────────── */
.bb-hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(640px, calc(100svh - var(--head-h)), 830px); padding-block: clamp(2.4rem, 5vw, 4.6rem) clamp(3.4rem, 6vw, 5.4rem); }
.bb-hero__wall { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--wall-now, var(--c-bg)); }
.bb-hero__paint { position: absolute; inset: 0; background: var(--paint, var(--pick)); transform: scaleY(0); transform-origin: 50% 100%; }
.bb-hero__roll { position: absolute; inset: 0; transform: translateY(100%); opacity: 0; pointer-events: none; }
.bb-hero.is-roll .bb-hero__paint { animation: bb-paint 1.6s var(--ease-io) both; }
.bb-hero.is-roll .bb-hero__roll { animation: bb-rollup 1.6s var(--ease-io) both; }
@keyframes bb-paint { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes bb-rollup { 0% { transform: translateY(100%); opacity: 1; } 90% { opacity: 1; } 100% { transform: translateY(0); opacity: 0; } }
.bb-roller { position: absolute; left: -1%; right: -1%; top: -40px; height: 80px; }
.bb-roller__head { position: absolute; inset: 0; border-radius: 40px; background: var(--roll, var(--pick)); border: 2px solid color-mix(in srgb, var(--c-ink) 30%, transparent); box-shadow: inset 0 -10px 0 rgba(0, 0, 0, .09), inset 0 9px 0 rgba(255, 255, 255, .28), 0 16px 22px -14px rgba(0, 0, 0, .45); }
.bb-roller__head::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .0) 0 22px, rgba(255, 255, 255, .2) 22px 34px); }
.bb-roller__head::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 46px; border-radius: 0 40px 40px 0; background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .12)); }
.bb-roller__arm { position: absolute; right: 7%; top: 78px; width: 12px; height: 118px; border-radius: 6px; background: #8d857a; }
.bb-roller__arm::before { content: ""; position: absolute; left: -6%; top: -41px; width: 58px; height: 12px; margin-left: -46px; background: #8d857a; border-radius: 6px; display: none; }
.bb-roller__grip { position: absolute; right: calc(7% - 16px); top: 190px; width: 44px; height: 138px; border-radius: 22px; background: var(--c-primary); box-shadow: inset 0 22px 0 var(--c-accent), 0 10px 14px -8px rgba(0, 0, 0, .4); }
.bb-hero__skirt { position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: var(--paper); border-top: 1px solid color-mix(in srgb, var(--c-ink) 14%, transparent); box-shadow: 0 -10px 20px -12px rgba(0, 0, 0, .18); }
.bb-hero__shadow { position: absolute; inset: 0; background: radial-gradient(90% 80% at 12% 0%, rgba(255, 255, 255, .5), transparent 62%), linear-gradient(180deg, transparent 72%, rgba(0, 0, 0, .06)); pointer-events: none; }
.bb-hero__grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .72fr); gap: clamp(1.6rem, 4vw, 4.5rem); align-items: center; }
.bb-hero__copy { display: grid; justify-items: start; gap: 1.15rem; }
.bb-hero__eye { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--c-ink-soft); font-size: .95rem; }
.bb-hero__eye svg { width: 1.1rem; height: 1.1rem; color: var(--c-accent-ink); }
.bb-hero__title { font-size: var(--h1); line-height: 1; max-width: 13ch; text-wrap: balance; }
.bb-hero__sub { font-size: clamp(1.05rem, .95rem + .5vw, 1.28rem); color: var(--c-ink-soft); max-width: 46ch; }
.bb-hero__act { display: flex; flex-wrap: wrap; gap: .9rem 1rem; margin-top: .4rem; }
.bb-hero__chips { display: flex; flex-wrap: wrap; gap: .55rem .7rem; margin-top: .4rem; }
.bb-hero__chips .bb-tape:nth-child(1) { transform: rotate(-1.3deg); } .bb-hero__chips .bb-tape:nth-child(2) { transform: rotate(.9deg); } .bb-hero__chips .bb-tape:nth-child(3) { transform: rotate(-.6deg); }
.bb-pick { position: relative; background: var(--paper); border: 1px solid var(--c-border-2); padding: 1.7rem 1.4rem 1.3rem; border-radius: 3px; box-shadow: var(--shadow); transform: rotate(1.4deg); }
.bb-pick__hole { position: absolute; left: 50%; top: .55rem; width: .9rem; height: .9rem; margin-left: -.45rem; border-radius: 50%; background: var(--wall-now, var(--c-bg)); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); transition: background .5s; }
.bb-pick__k { font: 600 .72rem/1 var(--f-m); letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); margin-bottom: .5rem; }
.bb-pick__t { font-size: 1.5rem; margin-bottom: 1rem; }
.bb-pick__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; padding-top: .5rem; }
.bb-chipbtn { position: relative; aspect-ratio: 3 / 4.2; display: flex; align-items: flex-end; padding: .35rem; background: var(--sw); border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); transition: transform .3s var(--ease), box-shadow .3s; }
.bb-chipbtn__c { font: 600 .62rem/1 var(--f-m); color: var(--c-ink); background: color-mix(in srgb, var(--paper) 78%, transparent); padding: .15rem .25rem; border-radius: 1px; }
.bb-chipbtn:hover { transform: translateY(-4px); }
.bb-chipbtn.is-on { transform: translateY(-9px); box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--c-ink), 0 14px 14px -10px rgba(0, 0, 0, .5); }
.bb-pick__now { margin-top: 1.1rem; font-size: 1rem; } .bb-pick__now b { font: 700 .86rem var(--f-m); background: var(--sw-now, var(--pick)); padding: .1rem .35rem; border-radius: 2px; }
.bb-pick__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--c-border-2); }
.bb-pick__stats div { display: flex; flex-direction: column-reverse; }
.bb-pick__stats dd { font-family: var(--f-d); font-size: 1.5rem; line-height: 1.1; } .bb-pick__stats dt { font-size: .74rem; color: var(--c-muted); line-height: 1.25; }
.bb-pick__note { margin-top: .9rem; font-size: .8rem; color: var(--c-muted); line-height: 1.45; }
.bb-pick__live { display: flex; align-items: center; gap: .5rem; margin-top: .8rem; font-size: .82rem; font-weight: 700; color: var(--c-primary-ink); }
.bb-live { width: .6rem; height: .6rem; border-radius: 50%; background: var(--c-secondary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-secondary) 30%, transparent); }
@media (prefers-reduced-motion: no-preference) { .bb-hero:not(.is-off) .bb-live { animation: bb-pulse 2.4s ease-in-out infinite; } }
@keyframes bb-pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--c-secondary) 6%, transparent); } }
@media (max-width: 900px) {
    .bb-hero { min-height: 0; padding-block: 2rem 4rem; } .bb-hero__grid { grid-template-columns: 1fr; } .bb-hero__title { max-width: 12ch; }
    .bb-roller { height: 60px; top: -30px; } .bb-roller__head { border-radius: 30px; } .bb-roller__arm { top: 58px; height: 80px; } .bb-roller__grip { top: 134px; width: 36px; height: 100px; right: calc(7% - 12px); }
    .bb-pick { transform: none; max-width: 460px; } .bb-pick__grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 420px) { .bb-hero__act .bb-btn { flex: 1 1 100%; } .bb-pick__stats dd { font-size: 1.25rem; } }

/* ── 7. renk numunesi kartları (hizmetler) ───────────────────────────── */
.bb-sheet { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.4rem, 3vw, 2.8rem) clamp(1rem, 2.4vw, 2.2rem); align-items: start; }
.bb-sheet__c:nth-child(1) { grid-column: 1 / span 5; } .bb-sheet__c:nth-child(2) { grid-column: 6 / span 4; margin-top: 3rem; } .bb-sheet__c:nth-child(3) { grid-column: 10 / span 3; margin-top: 1rem; }
.bb-sheet__c:nth-child(4) { grid-column: 1 / span 3; margin-top: .5rem; } .bb-sheet__c:nth-child(5) { grid-column: 4 / span 4; margin-top: 2.5rem; } .bb-sheet__c:nth-child(6) { grid-column: 8 / span 5; }
.bb-sheet--rel .bb-sheet__c { grid-column: span 4 !important; margin-top: 0 !important; }
.bb-chip { position: relative; background: var(--paper); border: 1px solid var(--c-border-2); border-radius: 3px; box-shadow: var(--shadow); transition: transform .4s var(--ease), box-shadow .4s; }
.bb-sheet__c:nth-child(odd) .bb-chip { transform: rotate(-.7deg); } .bb-sheet__c:nth-child(even) .bb-chip { transform: rotate(.6deg); }
.bb-chip:hover, .bb-chip:focus-within { transform: translateY(-8px) rotate(0); }
.bb-chip__top { display: flex; align-items: center; gap: .7rem; padding: .85rem 3rem .85rem 1rem; background: var(--sw); border-radius: 2px 2px 0 0; position: relative; }
.bb-chip__code { font: 700 .78rem/1 var(--f-m); letter-spacing: .06em; padding: .2rem .4rem; background: color-mix(in srgb, var(--paper) 70%, transparent); border-radius: 1px; }
.bb-chip__name { font: 600 .82rem/1.1 var(--f-b); }
.bb-chip__hole { position: absolute; right: .95rem; top: 50%; width: 1rem; height: 1rem; margin-top: -.5rem; border-radius: 50%; background: var(--c-bg); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35); }
.bb-chip__media { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--c-surface); }
.bb-chip__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.bb-chip:hover .bb-chip__media img { transform: scale(1.04); }
.bb-chip__badge { position: absolute; left: .7rem; top: .7rem; z-index: 1; padding: .3rem .6rem; background: var(--tape); font-size: .74rem; font-weight: 700; transform: rotate(-2deg); }
.bb-chip__icon { width: 3rem; height: 3rem; margin: auto; }
.bb-chip__body { padding: 1.1rem 1.1rem 1.25rem; }
.bb-chip__title { font-size: 1.4rem; line-height: 1.12; } .bb-chip__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.bb-chip__sum { margin-top: .55rem; font-size: .94rem; color: var(--c-ink-soft); }
.bb-chip__meta { display: grid; gap: .5rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed var(--c-border-2); }
.bb-chip__meta div { display: grid; grid-template-columns: 5.2rem 1fr; gap: .6rem; align-items: baseline; }
.bb-chip__meta dt { font: 600 .68rem/1 var(--f-m); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); }
.bb-chip__meta dd { font-size: 1.12rem; font-weight: 700; } .bb-chip__meta small { font-size: .8rem; font-weight: 500; color: var(--c-muted); }
@media (max-width: 960px) { .bb-sheet { grid-template-columns: repeat(2, 1fr); } .bb-sheet__c:nth-child(n) { grid-column: auto; margin-top: 0; } .bb-sheet__c:nth-child(even) { margin-top: 2rem; } .bb-sheet--rel .bb-sheet__c { grid-column: auto !important; } }
@media (max-width: 620px) { .bb-sheet { grid-template-columns: 1fr; } .bb-sheet__c:nth-child(even) { margin-top: 0; } }

/* ── 8. litre ve maliyet hesaplayıcı ─────────────────────────────────── */
.bb-calc { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); margin-top: clamp(3rem, 6vw, 5.5rem); padding: clamp(1.4rem, 3.4vw, 3rem); background: var(--c-surface); border: 1px solid var(--c-border-2); border-radius: 3px; position: relative; }
.bb-calc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: linear-gradient(90deg, var(--c-accent-soft) 0 20%, var(--c-secondary) 20% 40%, var(--c-primary) 40% 60%, var(--c-accent) 60% 80%, var(--c-border-2) 80%); }
.bb-calc__head { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; align-items: center; }
.bb-calc__ico { grid-row: span 2; position: relative; width: 2.6rem; height: 2.6rem; }
.bb-calc__ico i { position: absolute; left: .3rem; right: .3rem; height: .5rem; border-radius: 2px; background: var(--c-primary); } .bb-calc__ico i:nth-child(1) { top: .4rem; opacity: .4; } .bb-calc__ico i:nth-child(2) { top: 1.05rem; opacity: .7; } .bb-calc__ico i:nth-child(3) { top: 1.7rem; background: var(--c-accent); }
.bb-calc__hint { grid-column: 2; color: var(--c-ink-soft); font-size: .98rem; }
.bb-calc__f { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 1.1rem; align-content: start; }
.bb-calc__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.bb-f { display: grid; gap: .35rem; min-width: 0; }
.bb-f > span, .bb-f > label { font: 600 .74rem/1.2 var(--f-m); letter-spacing: .05em; text-transform: uppercase; color: var(--c-ink-soft); }
.bb-f input, .bb-f select, .bb-f textarea { width: 100%; min-height: 2.9rem; padding: .6rem .8rem; background: var(--paper); border: 1.5px solid var(--c-border-2); border-radius: 3px; font-size: 1rem; transition: border-color .2s, box-shadow .2s; }
.bb-f textarea { min-height: 7rem; resize: vertical; }
.bb-f input:focus, .bb-f select:focus, .bb-f textarea:focus { outline: 0; border-color: var(--c-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary) 22%, transparent); }
.bb-f.is-err input, .bb-f.is-err textarea { border-color: var(--c-accent-dark); }
.bb-seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1.5px solid var(--c-border-2); border-radius: 3px; background: var(--paper); overflow: hidden; }
.bb-seg label { position: relative; cursor: pointer; } .bb-seg input { position: absolute; opacity: 0; inset: 0; } .bb-seg span { display: block; padding: .6rem 1rem; text-align: center; font-weight: 700; font-size: .9rem; border-right: 1px solid var(--c-border); }
.bb-seg label:last-child span { border-right: 0; } .bb-seg input:checked + span { background: var(--c-primary); color: var(--c-on-primary); } .bb-seg input:focus-visible + span { outline: 3px solid var(--c-accent); outline-offset: -3px; }
.bb-seg--s span { padding: .6rem .8rem; }
.bb-check { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; cursor: pointer; } .bb-check input { width: 1.25rem; height: 1.25rem; accent-color: var(--c-primary); }
.bb-calc__out { background: var(--paper); border: 1px solid var(--c-border-2); border-radius: 3px; padding: 1.5rem; display: grid; gap: 1rem; align-content: start; box-shadow: var(--shadow); }
.bb-calc__big { font-family: var(--f-d); font-size: clamp(2.6rem, 2rem + 3vw, 4.4rem); line-height: 1; } .bb-calc__big small { font: 600 1rem var(--f-b); color: var(--c-muted); }
.bb-calc__d { display: grid; gap: .6rem; } .bb-calc__d div { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding-bottom: .55rem; border-bottom: 1px dashed var(--c-border-2); }
.bb-calc__d dt { font-size: .86rem; color: var(--c-ink-soft); } .bb-calc__d dd { font-weight: 800; text-align: right; }
.bb-calc__bar { height: .9rem; background: var(--c-surface-2); border-radius: 2px; overflow: hidden; } .bb-calc__bar i { display: block; height: 100%; width: 40%; background: var(--pick); transition: width .5s var(--ease); }
.bb-calc__note { font-size: .82rem; color: var(--c-muted); line-height: 1.5; }
@media (max-width: 860px) { .bb-calc { grid-template-columns: 1fr; } .bb-calc__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px) { .bb-seg span { padding-inline: .6rem; font-size: .84rem; } }

/* ── 9. boya katmanları (süreç) ──────────────────────────────────────── */
.bb-layers { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.bb-cut { position: sticky; top: calc(var(--head-h) + 1.5rem); margin: 0; }
.bb-cut__l { display: flex; flex-direction: column; height: clamp(360px, 52vw, 520px); border: 2px solid var(--c-ink); border-radius: 3px; overflow: hidden; background: var(--paper); box-shadow: 8px 8px 0 color-mix(in srgb, var(--c-ink) 14%, transparent); }
.bb-cut__b { position: relative; flex: 1; display: flex; align-items: center; padding-inline: 1.2rem; font: 700 .85rem/1 var(--f-m); letter-spacing: .06em; text-transform: uppercase; transform-origin: 0 50%; border-top: 1px solid color-mix(in srgb, var(--c-ink) 16%, transparent); }
.bb-cut__b:first-child { border-top: 0; }
.bb-cut__b--0 { flex: 3.2; background: repeating-linear-gradient(0deg, transparent 0 28px, rgba(0, 0, 0, .1) 28px 30px), repeating-linear-gradient(90deg, transparent 0 62px, rgba(0, 0, 0, .1) 62px 64px), color-mix(in srgb, var(--c-accent) 22%, var(--c-surface-2)); }
.bb-cut__b--1 { flex: 1.1; background: color-mix(in srgb, var(--c-bg) 70%, #fff); } .bb-cut__b--2 { flex: .8; background: var(--c-surface-2); }
.bb-cut__b--3 { flex: 1.1; background: var(--pick); } .bb-cut__b--4 { flex: 1.1; background: color-mix(in srgb, var(--pick) 82%, var(--c-ink)); color: var(--c-ink); }
.bb-cut figcaption { margin-top: 1.2rem; font-size: .9rem; color: var(--c-muted); max-width: 34ch; }
.js .bb-cut__b { transform: scaleX(0); transition: transform .9s var(--ease) calc(var(--i) * 140ms); }
.js .bb-cut.is-in .bb-cut__b { transform: none; }
.bb-steps { counter-reset: s; display: grid; gap: 0; margin-top: 2rem; }
.bb-step { position: relative; padding: 1.7rem 0 1.7rem 5.5rem; border-top: 2px solid var(--c-ink); }
.bb-step:last-child { border-bottom: 2px solid var(--c-ink); }
.bb-step__n { position: absolute; left: 0; top: 1.2rem; width: 3.6rem; height: 3.6rem; display: grid; place-items: center; background: var(--sw); font-family: var(--f-d); font-size: 1.9rem; border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%; }
.bb-step__t { font-size: 1.55rem; } .bb-step__x { margin-top: .5rem; color: var(--c-ink-soft); max-width: 52ch; }
@media (max-width: 860px) { .bb-layers { grid-template-columns: 1fr; } .bb-cut { position: static; } .bb-cut__l { height: 300px; } .bb-step { padding-left: 4.6rem; } .bb-step__n { width: 3.1rem; height: 3.1rem; font-size: 1.6rem; } }

/* ── 10. söz maddeleri, ilçe bulutu, kova paketler ───────────────────── */
.bb-soz { display: grid; grid-template-columns: minmax(260px, .7fr) minmax(0, 1.3fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.bb-soz__h { position: sticky; top: calc(var(--head-h) + 1.5rem); }
.bb-soz__l { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); }
.bb-soz__i { display: grid; grid-template-columns: auto 1fr; gap: 1.3rem; align-items: start; max-width: 40rem; }
.bb-soz__i:nth-child(even) { margin-left: clamp(0px, 5vw, 4.5rem); }
.bb-soz__i p { color: var(--c-ink-soft); margin-top: .4rem; }
.bb-soz__l--wide .bb-soz__i { max-width: none; }
.bb-dab { flex: none; display: grid; place-items: center; width: 4.2rem; height: 4.2rem; background: var(--sw); border-radius: 58% 42% 55% 45% / 48% 58% 42% 52%; transition: border-radius .8s var(--ease), transform .5s var(--ease); }
.bb-dab svg { width: 1.7rem; height: 1.7rem; color: var(--c-ink); }
.bb-soz__i:hover .bb-dab { border-radius: 42% 58% 45% 55% / 56% 44% 56% 44%; transform: rotate(-6deg); }
.bb-dab--big { width: clamp(9rem, 20vw, 15rem); height: clamp(9rem, 20vw, 15rem); margin-top: 2.2rem; }
@media (max-width: 860px) { .bb-soz { grid-template-columns: 1fr; } .bb-soz__h { position: static; } .bb-dab--big { display: none; } .bb-soz__i:nth-child(even) { margin-left: 0; } .bb-dab { width: 3.4rem; height: 3.4rem; } }
.bb-cloud { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem 2.2rem; }
.bb-dist { position: relative; display: inline-grid; grid-template-columns: auto auto; align-items: baseline; column-gap: .55rem; padding: .05em .12em; background: linear-gradient(var(--sw), var(--sw)) 0 88% / 55% .34em no-repeat; transition: background-size .5s var(--ease); }
.bb-dist__n { font-family: var(--f-d); font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3.6rem); line-height: 1.15; }
.bb-dist.is-big .bb-dist__n { font-size: clamp(2.4rem, 1.4rem + 4.6vw, 5.8rem); }
.bb-dist__t { font: 700 .74rem/1 var(--f-m); letter-spacing: .04em; color: var(--c-ink-soft); background: var(--paper); padding: .22rem .4rem; border: 1px solid var(--c-border-2); border-radius: 2px; transform: translateY(-.9em); }
.bb-dist__s { grid-column: 1 / -1; font-size: .84rem; color: var(--c-muted); max-width: 28ch; line-height: 1.35; }
.bb-dist:hover, .bb-dist:focus-visible { background-size: 100% 100%; }
.bb-cloud--all { gap: .6rem 3rem; }
.bb-areas__note { margin-top: 2.2rem; max-width: 56ch; font-size: .95rem; color: var(--c-ink-soft); padding-left: 1rem; border-left: 4px solid var(--c-accent-soft); }
.bb-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; margin-top: clamp(2.4rem, 5vw, 4rem); }
.bb-days li { display: grid; grid-template-columns: auto 1fr; gap: .9rem; align-items: start; padding: 1.1rem; background: var(--paper); border: 1px solid var(--c-border-2); border-radius: 3px; }
.bb-days b { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; background: var(--c-primary); color: var(--c-on-primary); font-family: var(--f-d); border-radius: 50%; }
@media (max-width: 760px) { .bb-days { grid-template-columns: 1fr; } .bb-cloud { gap: .2rem 1.4rem; } }
.bb-buckets { display: grid; grid-template-columns: 1.12fr 1fr 1fr; gap: clamp(1.4rem, 3vw, 2.8rem); align-items: end; padding-top: 2.8rem; }
.bb-bucket { position: relative; }
.bb-bucket__handle { position: absolute; left: 14%; right: 14%; top: -2.3rem; height: 4.2rem; border: 5px solid var(--c-border-2); border-bottom: 0; border-radius: 6rem 6rem 0 0; }
.bb-bucket__lid { height: 1.9rem; background: var(--sw); border: 1px solid color-mix(in srgb, var(--c-ink) 25%, transparent); border-radius: 5px 5px 0 0; position: relative; z-index: 1; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .08); }
.bb-bucket__body { position: relative; background: var(--paper); border: 1px solid var(--c-border-2); border-top: 0; padding: 1.7rem 1.5rem 1.6rem; box-shadow: var(--shadow); clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%); padding-inline: 2rem; }
.bb-bucket__badge { position: absolute; right: 1.4rem; top: -.3rem; padding: .3rem .7rem; background: var(--c-accent); color: var(--c-on-accent); font-size: .74rem; font-weight: 700; transform: rotate(2deg); }
.bb-bucket__t { font-size: 1.5rem; } .bb-bucket__t a:hover { text-decoration: underline; text-decoration-color: var(--sw); text-decoration-thickness: 4px; }
.bb-bucket__s { margin-top: .6rem; color: var(--c-ink-soft); font-size: .95rem; }
.bb-bucket__p { margin: 1.1rem 0; display: flex; align-items: baseline; gap: .5rem; }
.bb-bucket__a { font-family: var(--f-d); font-size: clamp(2.2rem, 1.8rem + 1.6vw, 3.2rem); line-height: 1; } .bb-bucket__u { color: var(--c-muted); font-size: .88rem; }
.bb-bucket .bb-ticks { margin-bottom: 1.4rem; }
.bb-bucket.is-feat { transform: translateY(-1rem); } .bb-bucket.is-feat .bb-bucket__lid { height: 2.6rem; background: var(--c-accent); }
.bb-bucket.is-feat .bb-bucket__body { background: color-mix(in srgb, var(--sw) 18%, var(--paper)); }
.bb-pk__note { margin-top: 2rem; font-size: .9rem; color: var(--c-muted); max-width: 60ch; }
@media (max-width: 900px) { .bb-buckets { grid-template-columns: 1fr; gap: 3.4rem; } .bb-bucket.is-feat { transform: none; } }

/* ── 11. çalışmalar (boya bandıyla duvara yapıştırılmış), oda önizleme ─ */
.bb-wall { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1.6rem, 3vw, 3rem) clamp(1rem, 2.4vw, 2rem); align-items: start; }
.bb-wall__i:nth-child(1) { grid-column: 1 / span 5; } .bb-wall__i:nth-child(2) { grid-column: 6 / span 4; margin-top: 3rem; } .bb-wall__i:nth-child(3) { grid-column: 10 / span 3; }
.bb-wall__i:nth-child(4) { grid-column: 1 / span 3; margin-top: 1rem; } .bb-wall__i:nth-child(5) { grid-column: 4 / span 4; margin-top: 3rem; } .bb-wall__i:nth-child(6) { grid-column: 8 / span 5; }
.bb-wall--all .bb-wall__i:nth-child(n) { grid-column: span 4; margin-top: 0; } .bb-wall--all .bb-wall__i:nth-child(3n+2) { margin-top: 2.2rem; }
.bb-pic { position: relative; display: block; background: var(--paper); padding: .7rem .7rem 0; border: 1px solid var(--c-border-2); box-shadow: var(--shadow); transition: transform .4s var(--ease); }
.bb-wall__i:nth-child(odd) .bb-pic { transform: rotate(-1.1deg); } .bb-wall__i:nth-child(even) .bb-pic { transform: rotate(.9deg); }
.bb-pic:hover, .bb-pic:focus-visible { transform: rotate(0) translateY(-6px); }
.bb-pic img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.bb-pic__t { position: absolute; z-index: 2; width: 5.4rem; height: 1.7rem; background: var(--tape); opacity: .92; clip-path: polygon(0 0, 100% 0, 96% 25%, 100% 50%, 95% 75%, 100% 100%, 0 100%, 4% 75%, 0 50%, 5% 25%); }
.bb-pic__t--a { left: -1.4rem; top: .1rem; transform: rotate(-38deg); } .bb-pic__t--b { right: -1.4rem; top: .1rem; transform: rotate(38deg); }
.bb-pic__cap { display: grid; gap: .1rem; padding: .8rem .2rem .9rem; } .bb-pic__cap b { font-family: var(--f-d); font-weight: 400; font-size: 1.12rem; line-height: 1.2; } .bb-pic__cap small { font: 500 .72rem/1.4 var(--f-m); letter-spacing: .02em; color: var(--c-muted); }
.bb-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 2.2rem; }
.bb-filter button { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.6rem; padding: .4rem 1rem; background: var(--paper); border: 1.5px solid var(--c-border-2); border-radius: 3px; font-weight: 700; font-size: .9rem; }
.bb-filter button i { width: .85rem; height: .85rem; border-radius: 2px; background: var(--sw); outline: 1px solid rgba(0, 0, 0, .2); }
.bb-filter button.is-on { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }
@media (max-width: 900px) { .bb-wall { grid-template-columns: repeat(2, 1fr); } .bb-wall__i:nth-child(n), .bb-wall--all .bb-wall__i:nth-child(n) { grid-column: auto; margin-top: 0; } .bb-wall__i:nth-child(even) { margin-top: 2rem; } }
@media (max-width: 560px) { .bb-wall { grid-template-columns: 1fr; } .bb-wall__i:nth-child(even) { margin-top: 0; } }
.bb-room { display: grid; grid-template-columns: minmax(250px, .62fr) minmax(0, 1.38fr); gap: clamp(1.4rem, 4vw, 3.4rem); margin-top: clamp(3.4rem, 6vw, 6rem); padding: clamp(1.2rem, 3vw, 2.6rem); background: var(--c-surface); border: 1px solid var(--c-border-2); border-radius: 3px; align-items: center; }
.bb-room__hint { margin: .6rem 0 1.2rem; color: var(--c-ink-soft); font-size: .98rem; }
.bb-room__sw { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin-bottom: 1.1rem; }
.bb-dot { aspect-ratio: 1; background: var(--sw); border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); transition: transform .3s var(--ease); } .bb-dot:hover { transform: scale(1.12); }
.bb-dot.is-on { box-shadow: 0 0 0 2px var(--c-surface), 0 0 0 4px var(--c-ink); transform: scale(1.08); }
.bb-room__note { margin-top: 1rem; font-size: .8rem; color: var(--c-muted); line-height: 1.5; }
.bb-room__stage { position: relative; --x: 50%; box-shadow: var(--shadow); border: 6px solid var(--paper); outline: 1px solid var(--c-border-2); background: var(--paper); overflow: hidden; }
.bb-room__svg { width: 100%; height: auto; display: block; }
.bb-room__after { fill: var(--rw); transition: fill .5s; } .bb-room__sheen { opacity: 0; transition: opacity .4s; } .bb-room.is-saten .bb-room__sheen { opacity: 1; }
.bb-room__before { fill: color-mix(in srgb, var(--c-surface-2) 70%, #b5a47f); } .bb-room__stain { fill: #c9b88c; opacity: .45; } .bb-room__stain--2 { opacity: .5; } .bb-room__crack { fill: none; stroke: #8c7a5f; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.bb-room__floor { fill: #d4b58a; } .bb-room__skirt { fill: #fffdf8; stroke: #e1d4ba; }
.bb-room__win rect { fill: #cfe3f1; stroke: #fffdf8; stroke-width: 10; } .bb-room__win path { stroke: #fffdf8; stroke-width: 8; }
.bb-room__pic rect:nth-child(1) { fill: var(--c-primary); } .bb-room__pic rect:nth-child(2) { fill: #fffdf8; } .bb-room__pic circle { fill: var(--c-accent); } .bb-room__pic path { fill: var(--c-primary); opacity: .7; }
.bb-room__sofa rect { fill: var(--c-primary); } .bb-room__cush { fill: var(--c-accent-soft) !important; } .bb-room__plant path { fill: #8fae93; } .bb-room__pot { fill: var(--c-accent) !important; }
.bb-room__lbl { position: absolute; top: .8rem; padding: .3rem .7rem; background: var(--paper); border: 1px solid var(--c-border-2); font: 700 .74rem/1 var(--f-m); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.bb-room__lbl--b { left: .8rem; } .bb-room__lbl--a { right: .8rem; }
.bb-room__line { position: absolute; top: 0; bottom: 0; left: var(--x); width: 4px; margin-left: -2px; background: var(--paper); box-shadow: 0 0 0 1px rgba(0, 0, 0, .2); pointer-events: none; }
.bb-room__line::after { content: "↔"; position: absolute; left: 50%; top: 50%; width: 2.8rem; height: 2.8rem; margin: -1.4rem 0 0 -1.4rem; display: grid; place-items: center; background: var(--c-accent); color: var(--c-on-accent); border-radius: 50%; font-weight: 800; box-shadow: 0 6px 12px -4px rgba(0, 0, 0, .5); }
.bb-room__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.bb-room__stage:focus-within .bb-room__line::after { outline: 3px solid var(--c-primary); outline-offset: 2px; }
@media (max-width: 860px) { .bb-room { grid-template-columns: 1fr; } .bb-room__sw { grid-template-columns: repeat(5, 1fr); max-width: 22rem; } }

/* ── 12. bilgi notları, rehber, kapanış bandı ────────────────────────── */
.bb-notes { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.6rem, 3.4vw, 3rem) clamp(1.2rem, 3vw, 3rem); }
.bb-note { position: relative; padding: 2.2rem 1.7rem 1.7rem; background: var(--paper); border-radius: 2px; box-shadow: var(--shadow); border-bottom: 7px solid var(--sw); }
.bb-note:nth-child(1) { transform: rotate(-.8deg); } .bb-note:nth-child(2) { transform: rotate(.7deg) translateY(1.6rem); } .bb-note:nth-child(3) { transform: rotate(.5deg); } .bb-note:nth-child(4) { transform: rotate(-.6deg) translateY(1.6rem); }
.bb-note__tape { position: absolute; left: 50%; top: -.8rem; width: 6.2rem; height: 1.8rem; margin-left: -3.1rem; background: var(--tape); transform: rotate(-2deg); clip-path: polygon(0 0, 100% 0, 96% 30%, 100% 60%, 96% 100%, 0 100%, 4% 60%, 0 30%); }
.bb-note__ctx { font: 600 .72rem/1 var(--f-m); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); margin-bottom: .7rem; }
.bb-note__q { margin-top: .6rem; color: var(--c-ink-soft); }
.bb-notes__foot { margin-top: 3.4rem; font-size: .88rem; color: var(--c-muted); }
@media (max-width: 760px) { .bb-notes { grid-template-columns: 1fr; } .bb-note:nth-child(n) { transform: none; } }
.bb-guide { display: grid; grid-template-columns: 1.35fr 1fr; grid-auto-flow: dense; gap: clamp(1.2rem, 3vw, 2.4rem); counter-reset: g; }
.bb-art { counter-increment: g; position: relative; display: grid; gap: 1rem; align-content: start; }
.bb-art__m { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--sw); }
.bb-art__m img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); } .bb-art:hover .bb-art__m img { transform: scale(1.04); }
.bb-art__m--i { display: grid; place-items: center; } .bb-art__m--i svg { width: 3rem; height: 3rem; }
.bb-art__b { display: grid; gap: .5rem; }
.bb-art__cat { justify-self: start; font: 700 .72rem/1 var(--f-m); letter-spacing: .08em; text-transform: uppercase; padding: .3rem .5rem; background: var(--sw); }
.bb-art__t { font-family: var(--f-d); font-weight: 400; font-size: clamp(1.3rem, 1.1rem + .9vw, 1.85rem); line-height: 1.15; }
.bb-art:hover .bb-art__t { text-decoration: underline; text-decoration-color: var(--sw); text-decoration-thickness: .22em; text-underline-offset: .1em; }
.bb-art__x { color: var(--c-ink-soft); font-size: .96rem; } .bb-art__meta { display: flex; gap: 1rem; font-size: .8rem; color: var(--c-muted); }
.bb-guide .bb-art:nth-child(1) { grid-row: span 2; } .bb-guide .bb-art:nth-child(1) .bb-art__t { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.7rem); }
.bb-guide .bb-art:nth-child(n+2) { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; } .bb-guide .bb-art:nth-child(n+2) .bb-art__x { display: none; }
.bb-guide--all { grid-template-columns: repeat(2, 1fr); } .bb-guide--all .bb-art:nth-child(n) { grid-row: auto; grid-template-columns: 1fr; } .bb-guide--all .bb-art:nth-child(n+2) .bb-art__x { display: block; }
.bb-guide--all .bb-art:nth-child(1) { grid-column: 1 / -1; grid-template-columns: 1.3fr 1fr; align-items: center; }
@media (max-width: 860px) { .bb-guide, .bb-guide--all { grid-template-columns: 1fr; } .bb-guide .bb-art:nth-child(1) { grid-row: auto; } .bb-guide--all .bb-art:nth-child(1) { grid-template-columns: 1fr; } .bb-guide .bb-art:nth-child(n+2) { grid-template-columns: 1fr 1.4fr; } }
.bb-cta { position: relative; padding: clamp(2.6rem, 6vw, 5.4rem) clamp(1.4rem, 5vw, 4.5rem) clamp(2rem, 4vw, 3.6rem); background: var(--c-surface); border: 1px solid var(--c-border-2); border-radius: 3px; overflow: hidden; display: grid; gap: 1.2rem; justify-items: start; }
.bb-cta__band { position: absolute; left: 0; right: 0; top: 0; display: flex; height: 1rem; } .bb-cta__band li { flex: 1; background: var(--sw); }
.bb-cta__tape { display: inline-block; padding: .55rem 1.1rem; background: var(--tape); font-weight: 700; font-size: .88rem; transform: rotate(-1.6deg); clip-path: polygon(0 0, 100% 0, 98% 30%, 100% 60%, 98% 100%, 0 100%, 2% 60%, 0 30%); }
.bb-cta__t { font-size: clamp(2.2rem, 1.2rem + 4vw, 4.8rem); line-height: 1.02; max-width: 15ch; }
.bb-cta__x { max-width: 48ch; color: var(--c-ink-soft); font-size: 1.12rem; }
.bb-cta__act { display: flex; flex-wrap: wrap; gap: .9rem 1rem; margin-top: .6rem; }

/* ── 13. alt bilgi: teneke kutu etiketi ──────────────────────────────── */
.bb-foot { margin-top: clamp(2rem, 5vw, 4rem); border-top: 1px solid var(--c-border-2); background: var(--c-surface); }
.bb-foot__band { display: flex; height: 1.9rem; margin: 0; } .bb-foot__band li { flex: 1; background: var(--sw); display: flex; align-items: center; justify-content: center; font: 600 .62rem/1 var(--f-m); color: var(--c-ink); opacity: .95; } .bb-foot__band span { opacity: 0; transition: opacity .3s; } .bb-foot__band li:hover span { opacity: .8; }
.bb-foot__in { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr) minmax(0, .7fr); gap: clamp(1.6rem, 4vw, 4rem); padding-block: clamp(2.4rem, 5vw, 4.4rem); align-items: start; }
.bb-can, .bb-label { position: relative; background: var(--paper); border: 2px solid var(--c-ink); border-radius: 4px; padding: 1.6rem 1.6rem 1.4rem; box-shadow: 6px 6px 0 color-mix(in srgb, var(--c-ink) 14%, transparent); }
.bb-can::before, .bb-label::before { content: ""; position: absolute; inset: 6px; border: 1px dashed var(--c-border-2); border-radius: 2px; pointer-events: none; }
.bb-can__k, .bb-label__k { font: 700 .74rem/1 var(--f-m); letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); margin-bottom: 1rem; }
.bb-can__brand { display: flex; align-items: center; gap: .7rem; font-family: var(--f-d); font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem); line-height: 1; color: var(--c-primary-ink); margin-bottom: .8rem; letter-spacing: .04em; }
.bb-can__brand .bb-mark { width: 2.6rem; height: 2.6rem; }
.bb-can__s { color: var(--c-ink-soft); max-width: 44ch; margin-bottom: 1.2rem; }
.bb-can__d { display: grid; gap: .5rem; } .bb-can__d div { display: grid; grid-template-columns: 5rem 1fr; gap: .8rem; padding-bottom: .5rem; border-bottom: 1px dotted var(--c-border-2); font-size: .94rem; }
.bb-can__d dt { font: 700 .7rem/1.5 var(--f-m); text-transform: uppercase; letter-spacing: .08em; color: var(--c-muted); } .bb-can__d a { font-weight: 700; color: var(--c-primary-ink); }
.bb-can__soc { display: flex; gap: .6rem; margin-top: 1.1rem; } .bb-can__soc a { width: 2.5rem; height: 2.5rem; display: grid; place-items: center; border: 1.5px solid var(--c-ink); border-radius: 3px; } .bb-can__soc a:hover { background: var(--c-ink); color: var(--c-bg); } .bb-can__soc svg { width: 1.1rem; height: 1.1rem; }
.bb-can__bars { display: block; height: 2.2rem; margin-top: 1.2rem; background: repeating-linear-gradient(90deg, var(--c-ink) 0 2px, transparent 2px 5px, var(--c-ink) 5px 6px, transparent 6px 11px, var(--c-ink) 11px 14px, transparent 14px 17px); opacity: .8; }
.bb-foot__col { display: grid; gap: .7rem; align-content: start; }
.bb-foot__col h4 { font: 700 .76rem/1 var(--f-m); letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); margin-bottom: .4rem; }
.bb-foot__col a { display: flex; align-items: center; gap: .6rem; font-weight: 600; padding-block: .1rem; } .bb-foot__col a:hover { text-decoration: underline; text-decoration-color: var(--c-accent); text-decoration-thickness: 2px; }
.bb-foot__col i { width: .8rem; height: .8rem; border-radius: 2px; background: var(--sw); outline: 1px solid rgba(0, 0, 0, .2); flex: none; }
.bb-foot__bar { border-top: 1px solid var(--c-border-2); background: var(--c-surface-2); }
.bb-foot__barin { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; padding-block: 1rem; font-size: .84rem; color: var(--c-ink-soft); } .bb-foot__barin nav { display: flex; flex-wrap: wrap; gap: 1.2rem; } .bb-foot__barin a:hover { text-decoration: underline; }
@media (max-width: 960px) { .bb-foot__in { grid-template-columns: 1fr 1fr; } .bb-can { grid-column: 1 / -1; } }
@media (max-width: 560px) { .bb-foot__in { grid-template-columns: 1fr; } .bb-can__d div { grid-template-columns: 1fr; gap: .1rem; } }
.bb-fab { position: fixed; right: 1.1rem; bottom: 1.1rem; z-index: 65; }

/* ── 14. iç sayfalar ─────────────────────────────────────────────────── */
.bb-ph { position: relative; padding-block: clamp(2rem, 5vw, 4.4rem) clamp(2.6rem, 5vw, 4.4rem); overflow: hidden; }
.bb-ph::before { content: ""; position: absolute; right: 0; top: 0; bottom: 18px; width: min(38vw, 520px); background: var(--sw); opacity: .5; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); }
.bb-ph::after { content: ""; position: absolute; right: min(8vw, 120px); top: 2.4rem; width: 9rem; height: 12rem; background: var(--paper); border: 1px solid var(--c-border-2); box-shadow: var(--shadow); transform: rotate(5deg); border-top: 2.2rem solid var(--sw); }
.bb-ph__in { position: relative; z-index: 1; display: grid; justify-items: start; gap: 1.2rem; }
.bb-ph__t { font-size: clamp(2.2rem, 1.1rem + 4.2vw, 4.9rem); line-height: 1.02; max-width: 17ch; } .bb-ph__t--long { font-size: clamp(1.9rem, 1.2rem + 3vw, 3.5rem); max-width: 24ch; }
.bb-ph__s { max-width: 56ch; font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); color: var(--c-ink-soft); }
.bb-ph__act { display: flex; flex-wrap: wrap; gap: .8rem 1rem; margin-top: .4rem; }
.bb-ph__stroke { position: absolute; left: 0; bottom: 0; width: 100%; height: 18px; background: var(--sw); border-radius: 0 14px 14px 0 / 0 9px 9px 0; transform-origin: 0 50%; }
@media (prefers-reduced-motion: no-preference) { .bb-ph__stroke { animation: bb-stroke 1.1s .15s var(--ease-io) both; } }
@keyframes bb-stroke { from { transform: scaleX(0); } to { transform: none; } }
@media (max-width: 700px) { .bb-ph::after { display: none; } .bb-ph::before { width: 56vw; opacity: .35; } }
.bb-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .6rem; font-size: .84rem; color: var(--c-muted); } .bb-crumbs i { font-style: normal; opacity: .5; } .bb-crumbs a:hover { color: var(--c-ink); text-decoration: underline; } .bb-crumbs span { color: var(--c-ink); font-weight: 600; }
.bb-deck { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 4rem); align-items: start; }
.bb-deck__idx { position: sticky; top: calc(var(--head-h) + 1.4rem); }
.bb-deck__idx ol { display: grid; gap: .25rem; margin-top: .6rem; } .bb-deck__idx a { display: grid; grid-template-columns: 1rem auto 1fr; gap: .6rem; align-items: center; padding: .55rem .4rem; border-bottom: 1px dashed var(--c-border-2); font-size: .9rem; } .bb-deck__idx i { width: .9rem; height: .9rem; background: var(--sw); border-radius: 2px; outline: 1px solid rgba(0, 0, 0, .15); } .bb-deck__idx b { font: 700 .72rem var(--f-m); } .bb-deck__idx a:hover { background: var(--c-surface); }
.bb-deck__rows { display: grid; gap: clamp(1.6rem, 3vw, 2.6rem); }
.bb-row { position: relative; display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr) auto; gap: clamp(1rem, 2.4vw, 2.2rem); align-items: stretch; background: var(--paper); border: 1px solid var(--c-border-2); border-left: 12px solid var(--sw); box-shadow: var(--shadow); transition: transform .4s var(--ease); }
.bb-row:hover { transform: translateX(6px); }
.bb-row__m { position: relative; display: block; min-height: 12rem; background: var(--c-surface); overflow: hidden; } .bb-row__m img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; } .bb-row__code { position: absolute; left: .7rem; top: .7rem; z-index: 1; font: 700 .76rem var(--f-m); padding: .25rem .45rem; background: var(--sw); }
.bb-row__b { padding: 1.4rem 0 1.4rem; display: grid; gap: .55rem; align-content: center; } .bb-row__nm { font: 600 .74rem/1 var(--f-m); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); } .bb-row__nm em { font-style: normal; background: var(--tape); color: var(--c-ink); padding: .15rem .45rem; margin-left: .6rem; }
.bb-row__b p:not(.bb-row__nm) { color: var(--c-ink-soft); font-size: .96rem; }
.bb-row__f { display: flex; flex-wrap: wrap; gap: .4rem 2rem; margin-top: .4rem; } .bb-row__f dt { font: 600 .66rem/1 var(--f-m); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); margin-bottom: .2rem; } .bb-row__f dd { font-weight: 700; } .bb-row__f small { font-weight: 500; color: var(--c-muted); }
.bb-row__go { display: grid; place-items: center; width: 4rem; border-left: 1px dashed var(--c-border-2); } .bb-row__go svg { width: 1.5rem; height: 1.5rem; transition: transform .3s var(--ease); } .bb-row:hover .bb-row__go svg { transform: translateX(5px); }
@media (max-width: 960px) { .bb-deck { grid-template-columns: 1fr; } .bb-deck__idx { display: none; } }
@media (max-width: 640px) { .bb-row { grid-template-columns: 1fr; border-left-width: 8px; } .bb-row__m { min-height: 11rem; } .bb-row__b { padding: 0 1.1rem 1.1rem; } .bb-row__go { display: none; } }
.bb-sd { display: grid; grid-template-columns: minmax(0, 1fr) 21rem; gap: clamp(1.6rem, 4vw, 4rem); align-items: start; }
.bb-sd__fig { position: relative; margin: 0 0 2rem; border: 10px solid var(--sw); background: var(--sw); box-shadow: var(--shadow); } .bb-sd__fig img { width: 100%; } .bb-sd__code { display: block; padding: .5rem .2rem .6rem; font: 700 .76rem var(--f-m); letter-spacing: .06em; text-transform: uppercase; }
.bb-sd__h { margin: 2.2rem 0 1rem; }
.bb-tagbox { position: sticky; top: calc(var(--head-h) + 1.6rem); margin-top: 3rem; }
.bb-tagbox__string { position: absolute; left: 50%; top: -3rem; width: 2px; height: 3rem; margin-left: -1px; background: var(--c-ink); opacity: .6; }
.bb-tagbox__in { position: relative; padding: 2rem 1.4rem 1.5rem; background: var(--paper); border: 2px solid var(--c-ink); border-top: 1rem solid var(--sw); border-radius: 4px 4px 14px 14px; box-shadow: 6px 6px 0 color-mix(in srgb, var(--c-ink) 14%, transparent); display: grid; gap: .9rem; }
.bb-tagbox__in::before { content: ""; position: absolute; left: 50%; top: -.8rem; width: 1rem; height: 1rem; margin-left: -.5rem; border-radius: 50%; background: var(--c-bg); border: 2px solid var(--c-ink); z-index: 1; }
.bb-tagbox__k { font: 700 .76rem var(--f-m); letter-spacing: .1em; color: var(--c-muted); }
.bb-tagbox__p { font-family: var(--f-d); font-size: clamp(2.2rem, 1.7rem + 1.6vw, 3rem); line-height: 1; } .bb-tagbox__p small { display: block; font: 600 .74rem var(--f-m); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); margin-bottom: .5rem; } .bb-tagbox__p .bb-per { display: inline; font: 500 .85rem var(--f-b); text-transform: none; letter-spacing: 0; }
.bb-tagbox__n { font-size: .8rem; color: var(--c-muted); line-height: 1.5; }
.bb-facts { display: grid; gap: .55rem; } .bb-facts div { padding-bottom: .55rem; border-bottom: 1px dotted var(--c-border-2); } .bb-facts dt { font: 600 .66rem/1 var(--f-m); letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted); margin-bottom: .25rem; } .bb-facts dd { font-weight: 600; font-size: .94rem; }
@media (max-width: 920px) { .bb-sd { grid-template-columns: 1fr; } .bb-tagbox { position: static; margin-top: 3.4rem; max-width: 26rem; } }
.bb-art-page { display: grid; grid-template-columns: 11rem minmax(0, 46rem); gap: clamp(1.6rem, 4vw, 4rem); justify-content: center; }
.bb-art-page__side { position: sticky; top: calc(var(--head-h) + 1.6rem); align-self: start; display: grid; gap: 1.2rem; justify-items: start; }
.bb-art-page__read { display: grid; font-size: .8rem; color: var(--c-muted); } .bb-art-page__read b { font-family: var(--f-d); font-weight: 400; font-size: 3.4rem; line-height: 1; color: var(--c-ink); }
.bb-art-page__fig { position: relative; margin: 0 0 2.4rem; background: var(--paper); padding: .7rem; border: 1px solid var(--c-border-2); box-shadow: var(--shadow); transform: rotate(-.5deg); } .bb-art-page__fig img { width: 100%; }
.bb-disc { margin-top: 2.6rem; padding: 1rem 1.2rem; background: var(--c-surface); border-left: 5px solid var(--c-accent-soft); font-size: .9rem; color: var(--c-ink-soft); }
@media (max-width: 860px) { .bb-art-page { grid-template-columns: 1fr; } .bb-art-page__side { position: static; grid-auto-flow: column; justify-content: start; align-items: center; } .bb-art-page__read { display: flex; align-items: baseline; gap: .5rem; } .bb-art-page__read b { font-size: 2rem; } }
.bb-about { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.bb-vows { display: grid; gap: 1.1rem; counter-reset: v; } .bb-vows li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.1rem 1.2rem; background: var(--paper); border: 1px solid var(--c-border-2); border-left: 8px solid var(--sw); box-shadow: var(--shadow); } .bb-vows b { font: 700 .8rem var(--f-m); color: var(--c-muted); padding-top: .25rem; } .bb-vows p { color: var(--c-ink-soft); font-size: .94rem; margin-top: .25rem; }
@media (max-width: 860px) { .bb-about { grid-template-columns: 1fr; } }
.bb-two { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); gap: clamp(1.6rem, 4vw, 4rem); align-items: start; }
.bb-paper { position: relative; background: var(--paper); border: 1px solid var(--c-border-2); box-shadow: var(--shadow); padding: clamp(1.8rem, 4vw, 3rem) clamp(1.2rem, 4vw, 3rem) clamp(1.4rem, 3vw, 2.4rem); } .bb-paper > .bb-pic__t--a { left: -1.2rem; top: .6rem; }
.bb-label--aside { position: sticky; top: calc(var(--head-h) + 1.6rem); display: grid; gap: 1.1rem; } .bb-label--aside p { color: var(--c-ink-soft); font-size: .95rem; } .bb-label--note { margin-top: 2.4rem; }
.bb-info { display: grid; gap: .8rem; position: relative; } .bb-info div { padding-bottom: .7rem; border-bottom: 1px dotted var(--c-border-2); } .bb-info dt { font: 700 .68rem var(--f-m); letter-spacing: .1em; text-transform: uppercase; color: var(--c-muted); margin-bottom: .2rem; } .bb-info dd { font-weight: 600; } .bb-info a { color: var(--c-primary-ink); }
@media (max-width: 900px) { .bb-two { grid-template-columns: 1fr; } .bb-label--aside { position: static; } }
.bb-form { display: grid; gap: 1.1rem; } .bb-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; } @media (max-width: 560px) { .bb-form__row { grid-template-columns: 1fr; } }
.bb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bb-err { color: var(--c-accent-ink); font-size: .85rem; font-weight: 600; }
.bb-notice { padding: 1.4rem; background: var(--c-surface); border-left: 6px solid var(--c-secondary); } .bb-notice p { margin-top: .5rem; color: var(--c-ink-soft); }
.bb-wiz__bar { display: none; }
.is-wiz .bb-wiz__bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: .6rem; } .bb-wiz__bar li { padding: .5rem .6rem; background: var(--c-surface-2); font: 700 .72rem/1.2 var(--f-m); letter-spacing: .04em; text-transform: uppercase; color: var(--c-muted); border-top: 6px solid var(--c-border-2); } .bb-wiz__bar li.is-on { color: var(--c-ink); border-top-color: var(--c-accent); background: var(--paper); } .bb-wiz__bar li.is-done { border-top-color: var(--c-primary); }
.bb-wiz__s { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 1.1rem; } .bb-wiz__s + .bb-wiz__s { margin-top: .6rem; }
.bb-wiz__s legend { padding: 0; display: flex; align-items: center; gap: .8rem; margin-bottom: 1rem; float: left; width: 100%; } .bb-wiz__s legend + * { clear: both; }
.bb-wiz__n { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; background: var(--c-primary); color: var(--c-on-primary); border-radius: 50%; font-size: 1.1rem; }
.is-wiz .bb-wiz__s:not(.is-cur) { display: none; } .bb-wiz__nav { display: flex; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; }
.bb-faq { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: clamp(1.6rem, 4vw, 4rem); align-items: start; }
.bb-faq__tabs { position: sticky; top: calc(var(--head-h) + 1.4rem); display: grid; gap: .4rem; } .bb-faq__tabs a { display: flex; align-items: center; gap: .6rem; padding: .7rem .8rem; background: var(--paper); border: 1px solid var(--c-border-2); border-radius: 3px; font-weight: 700; font-size: .92rem; } .bb-faq__tabs i { width: 1rem; height: 1rem; background: var(--sw); border-radius: 2px; outline: 1px solid rgba(0, 0, 0, .15); } .bb-faq__tabs a:hover { background: var(--c-surface); }
.bb-faq__g { margin: 2.6rem 0 1rem; display: flex; align-items: center; gap: .8rem; } .bb-faq__g:first-child { margin-top: 0; } .bb-faq__g::before { content: ""; width: 2.2rem; height: .9rem; background: var(--sw); border-radius: 0 6px 6px 0; }
.bb-q { background: var(--paper); border: 1px solid var(--c-border-2); border-left: 8px solid var(--sw); margin-bottom: .6rem; }
.bb-q summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 1.2rem; font-weight: 700; cursor: pointer; } .bb-q summary::-webkit-details-marker { display: none; }
.bb-q summary i { flex: none; position: relative; width: 1.3rem; height: 1.3rem; } .bb-q summary i::before, .bb-q summary i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; background: var(--c-primary); transition: transform .3s var(--ease); } .bb-q summary i::after { transform: rotate(90deg); } .bb-q[open] summary i::after { transform: rotate(0); }
.bb-q__a { padding: 0 1.2rem 1.2rem; max-width: 62ch; }
@media (max-width: 860px) { .bb-faq { grid-template-columns: 1fr; } .bb-faq__tabs { position: static; grid-auto-flow: column; overflow-x: auto; padding-bottom: .4rem; } .bb-faq__tabs a { white-space: nowrap; } }
.bb-err404 { position: relative; overflow: hidden; padding-block: clamp(3rem, 8vw, 7rem); } .bb-err404__in { display: grid; grid-template-columns: auto 1fr; gap: clamp(1.4rem, 5vw, 5rem); align-items: center; }
.bb-err404__n { font-family: var(--f-d); font-size: clamp(7rem, 4rem + 18vw, 18rem); line-height: .85; color: transparent; -webkit-text-stroke: 3px var(--c-ink); background: linear-gradient(180deg, transparent 52%, var(--pick) 52%); -webkit-background-clip: text; background-clip: text; }
.bb-err404__t { display: grid; gap: 1.2rem; justify-items: start; } .bb-pre { padding: 1rem; background: var(--c-surface); border: 1px solid var(--c-border-2); font-size: .78rem; overflow: auto; max-width: 100%; }
@media (max-width: 700px) { .bb-err404__in { grid-template-columns: 1fr; } }
.bb-blk__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.4rem; margin-top: 1.4rem; } .bb-blk__card { padding: 1.1rem; background: var(--paper); border: 1px solid var(--c-border-2); box-shadow: var(--shadow); } .bb-blk__card img { margin-bottom: .8rem; }
.bb-blk__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: 1rem; margin-top: 1.2rem; } .bb-blk__fig { margin-top: 1.6rem; } .bb-blk--img figcaption { font-size: .85rem; color: var(--c-muted); margin-top: .6rem; }
.bb-blk__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1.4rem; margin-top: 1.4rem; } .bb-blk__stats dd { font-family: var(--f-d); font-size: 2.6rem; line-height: 1; } .bb-blk__stats div { display: flex; flex-direction: column-reverse; padding: 1rem; background: var(--paper); border-top: 6px solid var(--c-accent-soft); }
.bb-bq { padding: 1.6rem 1.6rem 1.6rem 2rem; border-left: 8px solid var(--c-accent-soft); background: var(--paper); font-family: var(--f-d); font-size: 1.6rem; line-height: 1.3; } .bb-bq cite { display: block; margin-top: .8rem; font: 600 .9rem var(--f-b); color: var(--c-muted); font-style: normal; }
.bb-blk--hero .bb-wrap { display: grid; gap: 1.1rem; justify-items: start; }

/* ── 15. görüntüleyici ───────────────────────────────────────────────── */
.bb-lb { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; background: color-mix(in srgb, var(--c-bg) 96%, transparent); padding: 3.6rem 1rem 2rem; }
.bb-lb__f { position: relative; max-width: min(1040px, 94vw); background: var(--paper); padding: .8rem .8rem 0; border: 1px solid var(--c-border-2); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .5); transform: rotate(-.5deg); } .bb-lb__f img { max-height: 72vh; width: auto; margin-inline: auto; } .bb-lb__f figcaption { padding: .9rem .2rem 1rem; font: 500 .85rem var(--f-m); color: var(--c-ink-soft); }
.bb-lb__tape { position: absolute; left: 50%; top: -.9rem; width: 7rem; height: 1.8rem; margin-left: -3.5rem; background: var(--tape); transform: rotate(-2deg); }
.bb-lb__x, .bb-lb__n { position: absolute; z-index: 2; width: 3rem; height: 3rem; display: grid; place-items: center; background: var(--paper); border: 2px solid var(--c-ink); border-radius: 3px; } .bb-lb__x { right: 1rem; top: 1rem; } .bb-lb__n--p { left: 1rem; top: 50%; transform: rotate(180deg); } .bb-lb__n--n { right: 1rem; top: 50%; } .bb-lb svg { width: 1.3rem; height: 1.3rem; }

/* ── 16. sayfa geçişi: boya silindiri süpürmesi ──────────────────────── */
::view-transition-old(root) { animation: bb-out .55s var(--ease) both; }
::view-transition-new(root) { animation: bb-in .85s var(--ease-io) both; }
@keyframes bb-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes bb-out { to { opacity: .55; transform: translateY(-2.5%); } }
::view-transition-group(bbhead), ::view-transition-group(bbdock) { animation-duration: .3s; }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
    html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
    [data-reveal] { opacity: 1; transform: none; } .js .bb-cut__b { transform: none; }
}
@media print { .bb-head, .bb-dock, .bb-fan, .bb-fab { display: none !important; } }

/* 19. Kartela variant */
:root { --radius-md: 4px; }