/* ==========================================================================
   Rönesans Mobilya — Online Katalog
   --------------------------------------------------------------------------
   Sayfa ölçüleri sayfanın kendi genişliğine göre (container query birimleri,
   cqw) hesaplanır. Böylece:
     • masaüstü çift sayfa, tablet tek sayfa ve yakınlaştırma aynı bileşenleri
       gerçek düzen olarak yeniden çizer (transform: scale kullanılmaz),
     • ileride aynı sayfalar A4 baskı / PDF için kullanılabilir (210 × 297 oranı).
   Telefonlar için "compact" profili ayrı sayfalama + ayrı tipografi kullanır.
   ========================================================================== */

:root {
    --paper: #fbf8f3;
    --paper-2: #f3ede4;
    --ink: #2a2420;
    --ink-soft: #4a4039;
    --muted: #85786c;
    --faint: #a99c8f;
    --accent: #8a6446;
    --accent-dark: #6e4f37;
    --line: #e2d6c6;
    --back: #362c25;
    --back-ink: #efe5d8;
    --stage: #2b2521;
    --stage-2: #211c19;
    --chrome-ink: #eee4d7;
    --chrome-soft: rgba(238, 228, 215, .62);
    --serif: "Cormorant Garamond", "Times New Roman", Georgia, serif;
    --sans: "Jost", "Futura", "Avenir Next", "Segoe UI", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body.viewer-body {
    margin: 0;
    background: radial-gradient(120% 90% at 50% 40%, var(--stage) 0%, var(--stage-2) 100%);
    color: var(--chrome-ink);
    font-family: var(--sans);
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------------------ viewer */

.viewer {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    padding-bottom: env(safe-area-inset-bottom);
}

.viewer__preview {
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    padding: 7px 12px;
    background: #b7792f;
    color: #fff;
    font-size: 13px;
    letter-spacing: .02em;
}
.viewer__preview strong { letter-spacing: .12em; }
.viewer__preview a { color: #fff; }

.viewer__top {
    flex: none;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    padding: 12px 20px 4px;
    min-height: 48px;
}
.viewer__brand {
    justify-self: start;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 16px;
    letter-spacing: .18em;
    color: var(--chrome-ink);
    white-space: nowrap;
}
.viewer__title {
    font-size: 12px;
    letter-spacing: .28em;
    text-transform: uppercase;
    color: var(--chrome-soft);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.viewer__meta { justify-self: end; font-size: 12px; color: var(--chrome-soft); letter-spacing: .08em; }

.viewer__stage {
    flex: 1 1 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
    padding: 12px 16px;
    touch-action: pan-y;
}

.viewer__loading {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--chrome-soft);
}
.viewer__loading span {
    width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,.2);
    border-top-color: var(--chrome-ink);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.viewer__noscript { color: var(--chrome-ink); }

.flip-host { position: relative; margin: 0 auto; }

/* Kontroller: kataloğu boğmayan minimal şerit */
.viewer__controls {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 4px auto 14px;
    padding: 5px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(6px);
    width: max-content;
    max-width: calc(100vw - 16px);
}

.vc {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    min-width: 38px;
    padding: 0 10px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--chrome-ink);
    font: 500 13px/1 var(--sans);
    letter-spacing: .04em;
    cursor: pointer;
    transition: background .15s, opacity .15s;
}
.vc:hover { background: rgba(255, 255, 255, .1); }
.vc:focus-visible { outline: 2px solid var(--chrome-ink); outline-offset: 1px; }
.vc:disabled { opacity: .3; cursor: default; background: transparent; }
.vc svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vc-page {
    min-width: 92px;
    text-align: center;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    letter-spacing: .06em;
    color: var(--chrome-ink);
    white-space: nowrap;
}
.vc--sound .vc-sound__off { display: none; }
.vc--sound.is-muted .vc-sound__on { display: none; }
.vc--sound.is-muted .vc-sound__off { display: inline; }
.vc--sound.is-muted { opacity: .6; }
.vc-sep { width: 1px; height: 22px; background: rgba(255,255,255,.14); margin: 0 4px; }

/* ------------------------------------------------------------------ sayfa */

.page {
    background: var(--paper);
    color: var(--ink);
    overflow: hidden;
    container-type: size;
    font-family: var(--sans);
    user-select: none;
    -webkit-user-select: none;
}

.page__inner {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    width: 100%;
    height: 100%;
    padding: 5.2cqw 6.4cqw 4.2cqw;
}

.page__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3cqw;
    padding-bottom: 2.4cqw;
    margin-bottom: 3.6cqw;
    border-bottom: 1px solid var(--line);
}
.page__brand {
    font-family: var(--serif);
    font-weight: 600;
    font-size: max(9px, 2cqw);
    letter-spacing: .2em;
    color: var(--ink);
    white-space: nowrap;
}
.page__running {
    font-size: max(8px, 1.75cqw);
    letter-spacing: .32em;
    color: var(--muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.page__body {
    display: flex;
    flex-direction: column;
    gap: 3.6cqw;
    min-height: 0;
}

.page__foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 2cqw;
    padding-top: 2.2cqw;
    margin-top: 3cqw;
    border-top: 1px solid var(--line);
    font-size: max(7.5px, 1.45cqw);
    letter-spacing: .12em;
    color: var(--muted);
}
.page__mail { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page__num { justify-self: end; font-variant-numeric: tabular-nums; color: var(--ink-soft); }

/* Marka / logo ------------------------------------------------------------ */

.brand { display: inline-flex; flex-direction: column; align-items: center; line-height: 1; color: var(--ink); }
.brand--light { color: var(--back-ink); }
.brand__main { font-family: var(--serif); font-weight: 600; letter-spacing: .2em; margin-right: -.2em; }
.brand__sub { font-family: var(--sans); font-weight: 500; letter-spacing: .62em; margin-right: -.62em; margin-top: .55em; }
.brand--img { display: block; height: auto; object-fit: contain; }

.brand--xs .brand__main { font-size: max(9px, 2.3cqw); }
.brand--xs .brand__sub { font-size: max(5px, .95cqw); }
.brand--xs.brand--img { height: max(12px, 3.4cqw); width: auto; }
.brand--md .brand__main { font-size: 7cqw; }
.brand--md .brand__sub { font-size: 2.2cqw; }
.brand--md.brand--img { width: 36cqw; }
.brand--lg .brand__main { font-size: 9.4cqw; }
.brand--lg .brand__sub { font-size: 2.7cqw; }
.brand--lg.brand--img { width: 46cqw; max-height: 18cqw; }

/* Üst şeritteki logo sayfa dışında: sabit piksel ölçüler */
.viewer__brand .brand { color: var(--chrome-ink); }
.viewer__brand .brand__main { font-size: 17px; }
.viewer__brand .brand__sub { font-size: 7px; }
.viewer__brand .brand--img { height: 26px; width: auto; filter: brightness(0) invert(.92); }

/* Görseller --------------------------------------------------------------- */

.page img {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
}
.page img[src] { opacity: 1; }
.page .brand--img { opacity: 1; height: auto; }

.ph {
    display: block;
    width: 100%;
    height: 100%;
    background:
        linear-gradient(135deg, transparent 49.6%, var(--line) 49.6%, var(--line) 50.4%, transparent 50.4%),
        var(--paper-2);
    opacity: .7;
}

/* ------------------------------------------------------------------ kapak */

.cover {
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    justify-items: center;
    text-align: center;
    padding: 9cqw 7.5cqw 6.5cqw;
}
.cover__brand {
    margin-bottom: 5.5cqw;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 6.4cqw;
    line-height: 1;
    letter-spacing: .14em;
    margin-right: -.14em;
    color: #000;
    white-space: nowrap;
}
.cover__period {
    display: flex;
    align-items: center;
    gap: 3cqw;
    width: 100%;
    margin: 0 0 5.5cqw;
    font: 500 max(9px, 2.45cqw)/1.2 var(--sans);
    letter-spacing: .34em;
    text-transform: uppercase;
    color: var(--accent-dark);
    justify-content: center;
}
.cover__period::before, .cover__period::after { content: ""; flex: 1; max-width: 14cqw; height: 1px; background: var(--accent); opacity: .45; }
.cover__media { width: 100%; min-height: 0; overflow: hidden; background: var(--paper-2); }
.cover__media img { object-fit: cover; }
.cover__web {
    margin-top: 5cqw;
    font-size: max(8px, 2.05cqw);
    letter-spacing: .3em;
    color: var(--ink-soft);
}

/* ------------------------------------------------------------------ ürün grid */

.pgrid {
    display: grid;
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    grid-template-rows: repeat(var(--rows), minmax(0, 1fr) auto auto auto auto auto);
    column-gap: 4.4cqw;
    row-gap: 0;
    flex: 1 1 0;
    min-height: 0;
    width: 100%;
    margin-inline: auto;
}
.pgrid--row { max-width: calc(var(--cols) * 31cqw); }
.pgrid--grid.pgrid--n1 { max-width: 64cqw; }
.pgrid--grid.pgrid--n2 { max-width: 88cqw; }

.pcard {
    display: grid;
    grid-row: span 6;
    grid-template-rows: subgrid;
    min-width: 0;
    min-height: 0;
}
@supports not (grid-template-rows: subgrid) {
    .pcard { grid-template-rows: minmax(0, 1fr) auto auto auto auto auto; }
}

.pcard > * { margin: 0; min-width: 0; }

.pcard__media {
    min-height: 0;
    margin-bottom: 2.2cqw;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}
/* Ürün görseli: asla esnemez, kırpılmaz; ürünler ortak bir zemin çizgisine oturur */
.pcard__media img { object-fit: contain; object-position: 50% 100%; }

.pcard__name {
    font-size: max(10px, 2.3cqw);
    font-weight: 600;
    line-height: 1.22;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.pcard__desc, .pcard__spec {
    font-size: max(9px, 1.85cqw);
    line-height: 1.3;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-soft);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}
.pcard__desc:not(:empty) { margin-top: .5cqw; }
.pcard__spec { color: var(--muted); -webkit-line-clamp: 1; }
.pcard__code {
    font-size: max(8px, 1.5cqw);
    line-height: 1.35;
    letter-spacing: .06em;
    color: var(--faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pcard__code:not(:empty) { margin-top: .5cqw; }
.pcard__code span { letter-spacing: .02em; }
.pcard__price {
    margin-top: 1.1cqw !important;
    margin-bottom: 3.4cqw !important;
    font-size: max(11px, 2.75cqw);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .02em;
    color: var(--accent-dark);
    font-variant-numeric: lining-nums;
}
.pgrid--row .pcard__price { margin-bottom: 0 !important; }

.price__old {
    font-weight: 400;
    font-size: .78em;
    color: var(--faint);
    margin-right: .35em;
    text-decoration-thickness: 1px;
}
.price--empty { font-weight: 500; font-size: .72em; letter-spacing: .06em; color: var(--muted); text-transform: uppercase; }

/* ------------------------------------------------------------------ LAYOUT A: hero */

.hero {
    flex: 1.12 1 0;
    min-height: 0;
    display: grid;
    grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr);
    gap: 4.8cqw;
}
.hero--noimg { grid-template-columns: 1fr; text-align: center; }
.hero__media { min-height: 0; overflow: hidden; background: var(--paper-2); }
.hero__media img { object-fit: cover; object-position: 50% 60%; }
.hero__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
}
.hero__title {
    margin: 0 0 3cqw;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 5.3cqw;
    line-height: 1.02;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ink);
    overflow-wrap: anywhere;
}
.hero__features {
    list-style: none;
    margin: 0 0 3cqw;
    padding: 0;
    font-size: max(9px, 1.9cqw);
    line-height: 1.75;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
.hero__features li { position: relative; padding-left: 1.3em; }
.hero__features li::before { content: "•"; position: absolute; left: 0; color: var(--accent); }
.hero--noimg .hero__features li { padding-left: 0; }
.hero--noimg .hero__features li::before { position: static; margin-right: .6em; }
.hero__desc { margin: 0 0 3cqw; font-size: max(9px, 1.8cqw); line-height: 1.55; color: var(--muted); }
.hero__price {
    margin: 0;
    padding-top: 2.4cqw;
    border-top: 1px solid var(--line);
    font-family: var(--sans);
    font-weight: 600;
    font-size: max(11px, 2.75cqw);
    line-height: 1.2;
    letter-spacing: .02em;
    color: var(--accent-dark);
}
.hero--noimg .hero__price { border-top: 0; }

/* Ürünü olmayan hero sayfası: görsel üstte büyük, metin altta */
.is-solo .hero { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
.is-solo .hero__text { flex-direction: row; flex-wrap: wrap; align-items: flex-end; column-gap: 5cqw; }
.is-solo .hero__title { flex: 1 1 100%; }
.is-solo .hero__price { border-top: 0; margin-left: auto; }

/* ------------------------------------------------------------------ LAYOUT B/D: başlık + grid */

.ctitle { display: flex; align-items: baseline; flex-wrap: wrap; gap: 1.2cqw 4cqw; }
.ctitle__name {
    margin: 0;
    font-family: var(--serif);
    font-weight: 600;
    font-size: 5cqw;
    line-height: 1.05;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.ctitle__desc { margin: 0; font-size: max(9px, 1.8cqw); letter-spacing: .08em; color: var(--muted); text-transform: uppercase; }
.ctitle--compact .ctitle__name { font-size: 4.2cqw; }

/* ------------------------------------------------------------------ LAYOUT C: öne çıkan ürün */

.feature {
    flex: 1.3 1 0;
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 2.6cqw;
}
.feature__media { min-height: 0; display: flex; align-items: flex-end; justify-content: center; }
.feature__media img { object-fit: contain; object-position: 50% 100%; }
.feature__text {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4cqw;
    padding-top: 2.4cqw;
    border-top: 1px solid var(--line);
}
.feature__info { min-width: 0; }
.feature__info > * { margin: 0; }
.feature__name {
    font-size: max(12px, 3.2cqw);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    line-height: 1.15;
    overflow-wrap: anywhere;
}
.feature__desc, .feature__spec { margin-top: .8cqw !important; font-size: max(9px, 1.95cqw); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); }
.feature__spec { color: var(--muted); }
.feature__code { margin-top: .8cqw !important; font-size: max(8px, 1.55cqw); color: var(--faint); letter-spacing: .06em; overflow-wrap: anywhere; }
.feature__price {
    margin: 0;
    flex: none;
    font-family: var(--sans);
    font-weight: 600;
    font-size: max(11px, 2.75cqw);
    line-height: 1.2;
    letter-spacing: .02em;
    color: var(--accent-dark);
    white-space: nowrap;
}

/* ------------------------------------------------------------------ notlar / ara sayfa */

.notes { justify-content: center; padding: 0 4cqw; }
.notes__title { margin: 0 0 4cqw; font-family: var(--serif); font-weight: 600; font-size: 5.4cqw; letter-spacing: .05em; text-transform: uppercase; }
.notes__list { list-style: none; margin: 0 0 6cqw; padding: 0; font-size: max(10px, 2.2cqw); line-height: 1.6; color: var(--ink-soft); }
.notes__list li { position: relative; padding: 1.3cqw 0 1.3cqw 1.6em; border-bottom: 1px solid var(--line); }
.notes__list li::before { content: "•"; position: absolute; left: .2em; color: var(--accent); }
.notes__contact { font-size: max(9px, 2cqw); letter-spacing: .06em; color: var(--muted); }
.notes__contact p { margin: 0 0 1cqw; }
.notes__contact strong { color: var(--ink); font-weight: 500; }

.filler {
    grid-template-rows: none;
    place-content: center;
    justify-items: center;
    text-align: center;
    gap: 4cqw;
    background:
        linear-gradient(var(--paper), var(--paper)) padding-box,
        var(--paper);
}
.filler__period { margin: 0; font-size: max(8px, 2cqw); letter-spacing: .32em; text-transform: uppercase; color: var(--accent-dark); }
.filler__tagline { margin: 0; font-family: var(--serif); font-style: italic; font-size: 3.4cqw; color: var(--muted); }

/* ------------------------------------------------------------------ arka kapak */

.page--back { background: var(--back); color: var(--back-ink); }
.back {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 9cqw;
}
.back__top { display: grid; justify-items: center; gap: 4cqw; }
.back__tagline { margin: 0; font-family: var(--serif); font-style: italic; font-size: 3.6cqw; color: rgba(239, 229, 216, .78); }
.back__notes {
    width: 100%;
    margin-top: 7cqw;
    padding: 4.5cqw 5cqw;
    border: 1px solid rgba(239, 229, 216, .22);
    text-align: left;
}
.back__notes h2 { margin: 0 0 2.4cqw; font: 500 max(9px, 1.9cqw)/1.2 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: #d9c3a6; }
.back__notes ul { margin: 0; padding: 0 0 0 1.2em; font-size: max(9px, 1.95cqw); line-height: 1.7; color: rgba(239, 229, 216, .86); }
.back__contact {
    display: grid;
    justify-items: center;
    gap: 1.4cqw;
    font-size: max(9px, 2.1cqw);
    letter-spacing: .08em;
    margin-top: 7cqw;
}
.back__contact a { color: var(--back-ink); text-decoration: none; pointer-events: auto; }
.back__contact a:hover { text-decoration: underline; }
.back__web { font-size: max(10px, 2.7cqw); letter-spacing: .24em; margin-bottom: 1.4cqw; }
.back__contact address { margin-top: 1.6cqw; font-style: normal; line-height: 1.6; color: rgba(239, 229, 216, .7); }
.back__social { display: flex; gap: 3.5cqw; margin-top: 5cqw; }
.back__social a { display: inline-flex; width: max(22px, 5.2cqw); height: max(22px, 5.2cqw); color: var(--back-ink); }
.back__social svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.back__company { margin: 6cqw 0 0; font-size: max(7.5px, 1.5cqw); letter-spacing: .2em; color: rgba(239, 229, 216, .55); text-transform: uppercase; }

/* ==========================================================================
   COMPACT PROFİL (telefon) — ayrı sayfalama, okunaklı minimum yazı boyutları
   ========================================================================== */

.is-compact .page__inner { padding: 5cqw 5.5cqw 4cqw; }
.is-compact .page__head { padding-bottom: 2.6cqw; margin-bottom: 4cqw; }
.is-compact .page__running { font-size: max(10px, 3cqw); letter-spacing: .22em; }
.is-compact .page__brand { font-size: max(12px, 3.6cqw); letter-spacing: .14em; }
.is-compact .brand--xs .brand__main { font-size: max(12px, 4cqw); }
.is-compact .brand--xs .brand__sub { font-size: max(6px, 1.6cqw); }
.is-compact .brand--xs.brand--img { height: max(16px, 5.5cqw); }
.is-compact .page__foot { grid-template-columns: 1fr auto; font-size: max(10px, 2.8cqw); letter-spacing: .06em; }

.is-compact .pgrid { column-gap: 5cqw; }
.is-compact .pgrid--row, .is-compact .pgrid--grid.pgrid--n1, .is-compact .pgrid--grid.pgrid--n2 { max-width: none; }
.is-compact .pcard__media { margin-bottom: 2.6cqw; }
.is-compact .pcard__name { font-size: clamp(13px, 4.1cqw, 19px); letter-spacing: .03em; }
.is-compact .pcard__desc, .is-compact .pcard__spec { font-size: clamp(11.5px, 3.4cqw, 16px); letter-spacing: .03em; }
.is-compact .pcard__code { font-size: clamp(10.5px, 3cqw, 14px); letter-spacing: .02em; }
.is-compact .pcard__price { font-size: clamp(15px, 4.9cqw, 22px); margin-top: 1.4cqw !important; margin-bottom: 5cqw !important; }
.is-compact .pgrid--row .pcard__price { margin-bottom: 0 !important; }

.is-compact .hero { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; gap: 3.6cqw; flex-grow: 1.35; }
.is-compact .hero--noimg { grid-template-rows: auto; }
.is-compact .hero__title { font-size: clamp(22px, 8cqw, 40px); margin-bottom: 2.4cqw; }
.is-compact .hero__features { font-size: clamp(11px, 3.2cqw, 15px); line-height: 1.55; margin-bottom: 2.4cqw; columns: 2; column-gap: 4cqw; }
.is-compact .hero__desc { font-size: clamp(11px, 3.2cqw, 15px); }
.is-compact .hero__price { font-size: clamp(15px, 4.9cqw, 22px); padding-top: 2cqw; }
.is-compact .is-solo .hero__features { columns: 1; }

.is-compact .ctitle__name { font-size: clamp(22px, 8cqw, 40px); }
.is-compact .ctitle__desc { font-size: clamp(11px, 3.2cqw, 15px); }
.is-compact .ctitle--compact .ctitle__name { font-size: clamp(20px, 7cqw, 34px); }

.is-compact .feature { flex-grow: 1.4; }
.is-compact .feature__text { flex-direction: column; align-items: flex-start; gap: 2cqw; }
.is-compact .feature__name { font-size: clamp(15px, 5cqw, 22px); }
.is-compact .feature__desc, .is-compact .feature__spec { font-size: clamp(11.5px, 3.4cqw, 16px); }
.is-compact .feature__code { font-size: clamp(10.5px, 3cqw, 14px); }
.is-compact .feature__price { font-size: clamp(15px, 4.9cqw, 22px); }

.is-compact .cover { padding: 12cqw 7cqw 8cqw; }
.is-compact .cover__brand { font-size: 8.4cqw; letter-spacing: .1em; margin-right: -.1em; }
.is-compact .cover__period { font-size: clamp(11px, 3.5cqw, 16px); letter-spacing: .26em; }
.is-compact .cover__web { font-size: clamp(11px, 3.3cqw, 15px); }
.is-compact .brand--lg .brand__main { font-size: 11.5cqw; }
.is-compact .brand--lg .brand__sub { font-size: 3.4cqw; }

.is-compact .notes__title { font-size: clamp(22px, 7.5cqw, 36px); }
.is-compact .notes__list { font-size: clamp(13px, 3.9cqw, 17px); }
.is-compact .notes__contact { font-size: clamp(12px, 3.5cqw, 16px); }

.is-compact .back { padding: 9cqw 7cqw; }
.is-compact .back__tagline { font-size: clamp(15px, 5cqw, 22px); }
.is-compact .back__notes h2 { font-size: clamp(10px, 3cqw, 14px); }
.is-compact .back__notes ul { font-size: clamp(12px, 3.5cqw, 16px); }
.is-compact .back__contact { font-size: clamp(13px, 3.8cqw, 17px); gap: 2cqw; }
.is-compact .back__web { font-size: clamp(14px, 4.4cqw, 19px); }
.is-compact .back__company { font-size: clamp(9px, 2.6cqw, 12px); }

/* ------------------------------------------------------------------ arama */

.viewer { position: relative; }
.search {
    position: absolute;
    left: 50%;
    bottom: 76px;
    z-index: 40;
    width: min(440px, calc(100vw - 24px));
    transform: translateX(-50%);
    background: #fff;
    color: var(--ink);
    border-radius: 14px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
    overflow: hidden;
}
.search[hidden] { display: none; }
.search__box { display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--line); }
.search__box > svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; }
.search__box input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: 400 16px/1.4 var(--sans);
    color: var(--ink);
}
.search__box input::-webkit-search-cancel-button { display: none; }
.search__close { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.search__close:hover { background: var(--paper-2); }
.search__close svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-soft); stroke-width: 1.8; stroke-linecap: round; }
.search__results { list-style: none; margin: 0; padding: 6px; max-height: min(52vh, 420px); overflow-y: auto; }
.search__results:empty { display: none; }
.search__item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 12px;
    padding: 9px 10px;
    border-radius: 8px;
    cursor: pointer;
}
.search__item.is-active, .search__item:hover { background: var(--paper-2); }
.search__name { font-size: 14px; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search__page { font-size: 12px; color: var(--accent-dark); white-space: nowrap; align-self: center; }
.search__meta { grid-column: 1 / -1; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search__empty { padding: 14px 10px; font-size: 14px; color: var(--muted); }

/* Aramada bulunan ürün kısa süre vurgulanır */
.pcard.is-hit .pcard__media, .feature.is-hit .feature__media { animation: hit 2.4s ease; border-radius: 4px; }
@keyframes hit {
    0%, 60% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 8px rgba(138, 100, 70, .15); }
    100% { box-shadow: 0 0 0 2px transparent, 0 0 0 8px transparent; }
}

@media (max-width: 640px) {
    .search { bottom: 60px; }
}

/* ------------------------------------------------------------------ yakınlaştırma */

.zoom {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    background: rgba(25, 21, 18, .97);
}
.zoom[hidden] { display: none; }
.zoom__bar {
    display: flex;
    justify-content: center;
    gap: 6px;
    padding: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.zoom__scroll {
    overflow: auto;
    cursor: grab;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
.zoom__scroll.is-dragging { cursor: grabbing; }
.zoom__canvas {
    display: flex;
    width: max-content;
    margin: 0 auto;
    padding: 24px;
    box-shadow: none;
}
.zoom__canvas .page { flex: none; box-shadow: 0 10px 40px rgba(0, 0, 0, .35); }

/* ------------------------------------------------------------------ StPageFlip */

.stf__parent { position: relative; display: block; box-sizing: border-box; transform: translateZ(0); -ms-touch-action: pan-y; touch-action: pan-y; }
.stf__wrapper { position: relative; width: 100%; box-sizing: border-box; }
.stf__parent canvas { position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
.stf__block { position: absolute; width: 100%; height: 100%; box-sizing: border-box; perspective: 2000px; }
.stf__item { display: none; position: absolute; transform-style: preserve-3d; }
.stf__outerShadow, .stf__innerShadow, .stf__hardShadow, .stf__hardInnerShadow { position: absolute; left: 0; top: 0; }
.flip-host .stf__wrapper { height: 100%; }

/* ------------------------------------------------------------------ küçük ekran kromu */

@media (max-width: 640px) {
    .viewer__top { grid-template-columns: auto 1fr; padding: 10px 14px 2px; min-height: 40px; }
    .viewer__meta { display: none; }
    .viewer__brand { font-size: 12px; letter-spacing: .12em; }
    .viewer__title { font-size: 10px; letter-spacing: .2em; text-align: right; }
    .viewer__stage { padding: 6px 8px; }
    .viewer__controls { margin: 4px auto 8px; gap: 0; }
    .vc { height: 40px; min-width: 40px; padding: 0 8px; }
    .vc__text, .vc--edge, .vc-sep { display: none; }
    .vc-page { min-width: 64px; }
}
@media (max-height: 520px) {
    .viewer__top { display: none; }
    .viewer__controls { margin-bottom: 4px; }
}

body.is-immersive .viewer__top, body.is-immersive .viewer__preview { display: none; }

@media (prefers-reduced-motion: reduce) {
    .page img, .vc { transition: none; }
}