:root {
    --bg: #f6ecd8;
    --bg-2: #efe1c4;
    --paper: #fbf6ea;
    --ink: #1f1710;
    --ink-soft: #3c2f22;
    --muted: #7a6950;
    --rule: #d8c59a;
    --terracotta: #b74726;
    --terracotta-deep: #8a3216;
    --copper: #9a5a2a;
    --olive: #5f6a2b;
    --iznik: #1a5a74;
    --gold: #c49a3c;
    --shadow: 0 20px 40px -22px rgba(31, 23, 16, 0.35);
    --radius: 14px;
    --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
    --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mono: "Courier New", "Lucida Console", monospace;
    --container: 1180px;
    --ease: cubic-bezier(.22,.61,.36,1);
}

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

html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }

html {
    max-width: 100%;
    overflow-x: clip;
}

body {
    margin: 0;
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink);
    background:
        radial-gradient(1200px 600px at 80% -10%, rgba(183, 71, 38, 0.08), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(26, 90, 116, 0.09), transparent 65%),
        var(--bg);
    background-attachment: fixed;
    min-height: 100vh;
    max-width: 100%;
    overflow-x: clip;
    position: relative;
}

/* Safari < 16 fallback: без clip используем hidden на html (не на body, чтобы sticky-header не потерялся) */
@supports not (overflow-x: clip) {
    html { overflow-x: hidden; }
    body { overflow-x: visible; }
}

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

/* hidden attribute must always win over author display rules */
[hidden] { display: none !important; }

section[id] {
    scroll-margin-top: 96px;
}

/* Paper grain overlay */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: .35;
    mix-blend-mode: multiply;
    background-image:
        radial-gradient(rgba(122, 105, 80, 0.12) 1px, transparent 1px),
        radial-gradient(rgba(122, 105, 80, 0.08) 1px, transparent 1px);
    background-size: 3px 3px, 7px 7px;
    background-position: 0 0, 1px 1px;
}

/* Skip link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ink);
    color: var(--paper);
    padding: 10px 16px;
    z-index: 1000;
}
.skip-link:focus { left: 12px; top: 12px; }

*:focus-visible {
    outline: 2px solid var(--iznik);
    outline-offset: 3px;
    border-radius: 4px;
}

a { color: var(--terracotta-deep); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--iznik); }

h1, h2, h3, h4 {
    font-family: var(--serif);
    color: var(--ink);
    font-weight: 600;
    letter-spacing: -0.01em;
    margin: 0 0 .6em;
}
h1 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); line-height: 1.08; }
h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.15; }
h3 { font-size: 1.3rem; line-height: 1.3; }
p { margin: 0 0 1em; }

.container {
    width: min(100% - 2rem, var(--container));
    margin-inline: auto;
    position: relative;
    z-index: 1;
}

/* ====== ORNAMENT / MOZAIK ====== */
.ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: var(--copper);
    margin: 12px 0 24px;
}
.ornament::before,
.ornament::after {
    content: "";
    height: 1px;
    flex: 1;
    max-width: 80px;
    background: linear-gradient(90deg, transparent, var(--copper), transparent);
}
.ornament-diamond {
    width: 10px; height: 10px;
    background: var(--copper);
    transform: rotate(45deg);
}

.mozaik-border {
    --tile: 14px;
    height: var(--tile);
    background-image:
        linear-gradient(45deg, var(--terracotta) 25%, transparent 25%, transparent 75%, var(--terracotta) 75%),
        linear-gradient(45deg, var(--iznik) 25%, transparent 25%, transparent 75%, var(--iznik) 75%);
    background-size: calc(var(--tile) * 2) calc(var(--tile) * 2);
    background-position: 0 0, var(--tile) var(--tile);
    opacity: .75;
}

/* ====== NAVBAR ====== */
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: transparent;
    border-bottom: 1px solid var(--rule);
    isolation: isolate;
}
.site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(251, 246, 234, 0.88);
    backdrop-filter: saturate(140%) blur(10px);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
    z-index: -1;
    pointer-events: none;
}
.nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 0;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--ink);
    font-family: var(--serif);
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: .01em;
}
.brand-mark {
    width: 36px; height: 36px;
    display: grid;
    place-items: center;
    background: var(--terracotta);
    color: var(--paper);
    font-family: var(--serif);
    font-size: 1.1rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--paper), 0 0 0 2px var(--terracotta-deep);
    position: relative;
}
.brand-mark::after {
    content: "";
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    border: 1px dashed rgba(251, 246, 234, 0.7);
    pointer-events: none;
}
.brand-sub {
    font-family: var(--sans);
    font-size: .72rem;
    color: var(--muted);
    letter-spacing: .14em;
    text-transform: uppercase;
    display: block;
    font-weight: 500;
}
.nav ul {
    list-style: none;
    margin: 0; padding: 0;
    display: flex;
    gap: 26px;
    align-items: center;
}
.nav a.navlink {
    color: var(--ink-soft);
    text-decoration: none;
    font-size: .98rem;
    padding: 6px 0;
    position: relative;
}
.nav a.navlink[aria-current="page"],
.nav a.navlink[aria-current="true"],
.nav a.navlink.is-active,
.nav a.navlink:hover {
    color: var(--terracotta-deep);
}
.nav a.navlink::after {
    content: "";
    position: absolute;
    left: 50%; right: 50%; bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--terracotta), var(--gold), var(--iznik));
    transform-origin: center;
    transition: left .34s var(--ease), right .34s var(--ease), opacity .34s ease;
    opacity: 0;
    border-radius: 2px;
}
.nav a.navlink:hover::after,
.nav a.navlink[aria-current="page"]::after,
.nav a.navlink[aria-current="true"]::after,
.nav a.navlink.is-active::after {
    left: 0; right: 0;
    opacity: 1;
}
.nav-cta {
    background: var(--ink);
    color: var(--paper);
    padding: 10px 18px;
    border-radius: 999px;
    text-decoration: none;
    font-size: .95rem;
    letter-spacing: .02em;
    transition: background .2s ease, transform .2s ease;
}
.nav-cta:hover { background: var(--terracotta-deep); color: var(--paper); transform: translateY(-1px); }

.nav-toggle {
    display: none;
    width: 44px; height: 44px;
    border: 1px solid var(--rule);
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
}
.nav-toggle span {
    display: block;
    width: 22px; height: 2px;
    background: var(--ink);
    margin: 4px auto;
    transition: transform .25s ease, opacity .25s ease;
}

@media (max-width: 900px) {
    .nav-toggle { display: block; }
    .nav ul {
        position: absolute;
        top: 100%; left: 0; right: 0;
        background: var(--paper);
        flex-direction: column;
        align-items: stretch;
        padding: 10px 20px 20px;
        border-bottom: 1px solid var(--rule);
        gap: 0;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        pointer-events: none;
        box-shadow: 0 20px 32px -24px rgba(31, 23, 16, 0.35);
        transition:
            max-height .38s cubic-bezier(.2, .7, .2, 1),
            opacity .28s ease,
            transform .32s cubic-bezier(.2, .7, .2, 1),
            visibility 0s linear .38s;
    }
    .nav ul li a { display: block; padding: 12px 0; border-bottom: 1px dashed var(--rule); }
    .nav.open ul {
        max-height: 480px;
        opacity: 1;
        visibility: visible;
        transform: none;
        pointer-events: auto;
        transition:
            max-height .38s cubic-bezier(.2, .7, .2, 1),
            opacity .28s ease,
            transform .32s cubic-bezier(.2, .7, .2, 1),
            visibility 0s linear 0s;
    }
    .nav.open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
    .nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
    .nav.open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* ====== HERO ====== */
.hero {
    position: relative;
    padding: 70px 0 60px;
    overflow: hidden;
}
.hero-inner {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 60px;
    align-items: center;
}
.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--terracotta-deep);
    font-size: .82rem;
    letter-spacing: .26em;
    text-transform: uppercase;
    margin-bottom: 18px;
    font-weight: 600;
}
.hero-eyebrow::before {
    content: "";
    width: 30px; height: 1px;
    background: var(--terracotta);
}
.hero h1 em {
    font-style: italic;
    color: var(--terracotta-deep);
    font-family: var(--serif);
}
.hero-lead {
    font-size: 1.08rem;
    color: var(--ink-soft);
    max-width: 52ch;
    margin-bottom: 26px;
}
.hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}
.btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 24px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: .01em;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
    font-family: var(--sans);
}
.btn-primary {
    background: var(--terracotta);
    color: var(--paper);
    box-shadow: var(--shadow);
}
.btn-primary:hover { background: var(--terracotta-deep); color: var(--paper); transform: translateY(-1px); }
.btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}
.btn-ghost:hover { background: var(--ink); color: var(--paper); }

/* Hero visual */
.hero-visual {
    position: relative;
    aspect-ratio: 4/5;
    border-radius: 6px;
    background:
        radial-gradient(circle at 30% 20%, rgba(196, 154, 60, 0.35), transparent 50%),
        linear-gradient(135deg, #e9d8ad 0%, #d9bd7d 100%);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.hero-visual::before {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(31, 23, 16, 0.35);
    border-radius: 4px;
    pointer-events: none;
}
.hero-visual::after {
    content: "";
    position: absolute;
    inset: 28px;
    border: 1px dashed rgba(31, 23, 16, 0.25);
    border-radius: 4px;
    pointer-events: none;
}

/* Iznik-style CSS tile inside hero */
.tile-plate {
    position: absolute;
    inset: 40px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, #fbf6ea 0%, #f1e2bd 55%, #e4c98a 100%);
    box-shadow:
        inset 0 0 0 2px #9a5a2a,
        inset 0 0 0 6px #fbf6ea,
        inset 0 0 0 7px #c49a3c,
        0 10px 30px -12px rgba(0,0,0,.35);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.tile-plate::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        conic-gradient(from 0deg,
            rgba(183, 71, 38, 0.0) 0 30deg,
            rgba(183, 71, 38, 0.25) 30deg 60deg,
            rgba(183, 71, 38, 0.0) 60deg 90deg,
            rgba(26, 90, 116, 0.25) 90deg 120deg,
            rgba(183, 71, 38, 0.0) 120deg 150deg,
            rgba(95, 106, 43, 0.25) 150deg 180deg,
            rgba(183, 71, 38, 0.0) 180deg 210deg,
            rgba(183, 71, 38, 0.25) 210deg 240deg,
            rgba(183, 71, 38, 0.0) 240deg 270deg,
            rgba(26, 90, 116, 0.25) 270deg 300deg,
            rgba(183, 71, 38, 0.0) 300deg 330deg,
            rgba(95, 106, 43, 0.25) 330deg 360deg);
    mask: radial-gradient(circle, black 30%, transparent 72%);
    -webkit-mask: radial-gradient(circle, black 30%, transparent 72%);
}
.tile-rosette {
    width: 56%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle, #fbf6ea 0%, #fbf6ea 28%, transparent 29%),
        conic-gradient(from 22.5deg,
            #b74726 0 45deg, #1a5a74 45deg 90deg,
            #b74726 90deg 135deg, #1a5a74 135deg 180deg,
            #b74726 180deg 225deg, #1a5a74 225deg 270deg,
            #b74726 270deg 315deg, #1a5a74 315deg 360deg);
    box-shadow: inset 0 0 0 3px #fbf6ea, 0 0 0 3px #c49a3c;
    position: relative;
    animation: spin 40s linear infinite;
}
.tile-rosette::after {
    content: "";
    position: absolute;
    inset: 28%;
    border-radius: 50%;
    background:
        radial-gradient(circle, #c49a3c 0%, #c49a3c 40%, #fbf6ea 41%);
    box-shadow: inset 0 0 0 2px #8a3216;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hero-tag {
    position: absolute;
    background: var(--paper);
    border: 1px solid var(--rule);
    padding: 10px 14px;
    font-family: var(--serif);
    font-style: italic;
    font-size: .95rem;
    color: var(--ink-soft);
    box-shadow: var(--shadow);
    transform: rotate(-3deg);
}
.hero-tag-1 { top: -10px; right: 18%; transform: rotate(4deg); }
.hero-tag-2 { bottom: 22px; left: -14px; }

@media (prefers-reduced-motion: reduce) {
    .tile-rosette { animation: none; }
    html { scroll-behavior: auto; }
}

@media (max-width: 900px) {
    .hero-inner { grid-template-columns: 1fr; gap: 36px; }
    .hero-visual { max-width: 420px; margin: 0 auto; }
}

/* ====== SECTION ====== */
section { padding: 70px 0; position: relative; }
.section-head {
    text-align: center;
    max-width: 740px;
    margin: 0 auto 40px;
}
.section-head .kicker {
    color: var(--copper);
    font-size: .78rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    font-weight: 600;
}
.section-head p {
    color: var(--ink-soft);
    font-size: 1.05rem;
}

/* ====== KUTU CARDS ====== */
.kutu-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}
.kutu-card {
    background: var(--paper);
    border-radius: var(--radius);
    padding: 30px 28px 26px;
    border: 1px solid var(--rule);
    position: relative;
    overflow: hidden;
    transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.kutu-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background:
        repeating-linear-gradient(90deg,
            var(--terracotta) 0 14px,
            var(--iznik) 14px 28px,
            var(--olive) 28px 42px);
}
.kutu-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
}
.kutu-card h3 {
    font-family: var(--serif);
    font-size: 1.4rem;
    margin-top: 10px;
}
.kutu-size {
    color: var(--muted);
    font-size: .88rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    font-weight: 600;
}
.kutu-desc {
    color: var(--ink-soft);
    font-size: .98rem;
    margin: 14px 0 18px;
}
.kutu-price {
    font-family: var(--serif);
    font-size: 1.25rem;
    color: var(--terracotta-deep);
    border-top: 1px dashed var(--rule);
    padding-top: 14px;
    margin-top: auto;
}
.kutu-price small {
    display: block;
    color: var(--muted);
    font-family: var(--sans);
    font-size: .8rem;
    margin-top: 4px;
    font-style: normal;
}

@media (max-width: 900px) {
    .kutu-grid { grid-template-columns: 1fr; }
}

/* ====== PROCESS STEPS ====== */
.process {
    background: linear-gradient(180deg, transparent, rgba(216, 197, 154, 0.2));
}
.steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 22px;
    counter-reset: step;
}
.step {
    background: var(--paper);
    border-radius: var(--radius);
    padding: 32px 24px 26px;
    position: relative;
    border: 1px solid var(--rule);
    counter-increment: step;
}
.step::before {
    content: counter(step, decimal-leading-zero);
    display: block;
    font-family: var(--serif);
    font-size: 1.8rem;
    color: var(--terracotta);
    margin-bottom: 8px;
}
.step h3 {
    font-size: 1.1rem;
    margin-bottom: 6px;
}
.step p { font-size: .95rem; color: var(--ink-soft); margin: 0; }

@media (max-width: 900px) {
    .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .steps { grid-template-columns: 1fr; }
}

/* ====== KUTU SECICI (interactive) ====== */
.selector {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 20px;
    padding: 40px;
    box-shadow: var(--shadow);
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 40px;
    align-items: center;
    position: relative;
    overflow: hidden;
}
.selector::before {
    content: "";
    position: absolute;
    top: -60px; right: -60px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(196, 154, 60, 0.22), transparent 70%);
    pointer-events: none;
}
.selector h3 { font-size: 1.5rem; margin-bottom: 6px; }
.selector-controls { display: grid; gap: 22px; }
.slider-row {
    display: flex; flex-direction: column; gap: 8px;
}
.slider-row label,
.slider-row .slider-row-label {
    font-weight: 600;
    color: var(--ink-soft);
    font-size: .95rem;
    display: flex; justify-content: space-between;
    align-items: baseline;
}
.slider-row label strong {
    font-family: var(--serif);
    font-size: 1.2rem;
    color: var(--terracotta-deep);
}
.slider-row input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--terracotta) 0%, var(--gold) 100%);
    outline: none;
}
.slider-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px; height: 22px;
    background: var(--paper);
    border: 3px solid var(--terracotta-deep);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(31,23,16,.3);
}
.slider-row input[type="range"]::-moz-range-thumb {
    width: 22px; height: 22px;
    background: var(--paper);
    border: 3px solid var(--terracotta-deep);
    border-radius: 50%;
    cursor: pointer;
}

.toggle-group {
    display: inline-flex;
    background: var(--bg-2);
    border-radius: 999px;
    padding: 4px;
    gap: 4px;
    border: 1px solid var(--rule);
}
.toggle-group button {
    background: transparent;
    border: none;
    padding: 10px 18px;
    border-radius: 999px;
    cursor: pointer;
    color: var(--ink-soft);
    font-family: var(--sans);
    font-size: .95rem;
    transition: background .2s ease, color .2s ease;
}
.toggle-group button[aria-pressed="true"] {
    background: var(--ink);
    color: var(--paper);
}
.checkbox-row {
    display: flex;
    gap: 10px;
    align-items: center;
    color: var(--ink-soft);
    cursor: pointer;
    user-select: none;
}

.selector-output {
    background: linear-gradient(180deg, #fbf6ea, #f1e2bd);
    border-radius: 14px;
    padding: 30px 28px;
    text-align: center;
    border: 1px solid var(--rule);
    position: relative;
}
.selector-output .label {
    text-transform: uppercase;
    letter-spacing: .22em;
    font-size: .75rem;
    color: var(--muted);
    margin-bottom: 8px;
    font-weight: 600;
}
.selector-output .price {
    font-family: var(--serif);
    font-size: 2rem;
    color: var(--terracotta-deep);
    line-height: 1.15;
    margin-bottom: 6px;
}
.selector-output .note {
    font-size: .85rem;
    color: var(--muted);
    font-style: italic;
}
.selector-output hr {
    border: none;
    border-top: 1px dashed var(--rule);
    margin: 16px 0;
}
.selector-disclaimer {
    grid-column: 1 / -1;
    font-size: .85rem;
    color: var(--muted);
    border-top: 1px dashed var(--rule);
    padding-top: 16px;
}

@media (max-width: 900px) {
    .selector { grid-template-columns: 1fr; padding: 28px 22px; }
}

/* ====== ALERJEN / SAKLAMA info ====== */
.info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
}
.info-card {
    padding: 28px 24px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    position: relative;
}
.info-card .tile-badge {
    width: 42px; height: 42px;
    border-radius: 8px;
    background:
        linear-gradient(45deg, var(--terracotta) 25%, transparent 25%),
        linear-gradient(-45deg, var(--iznik) 25%, transparent 25%),
        var(--gold);
    margin-bottom: 14px;
}
.info-card h3 { font-size: 1.15rem; }
.info-card p { font-size: .95rem; color: var(--ink-soft); margin: 0; }
@media (max-width: 900px) { .info-grid { grid-template-columns: 1fr; } }

/* ====== FAQ ====== */
.faq-list {
    max-width: 820px;
    margin: 0 auto;
}
.faq-item {
    border-top: 1px solid var(--rule);
    background: transparent;
}
.faq-list .faq-item:last-child { border-bottom: 1px solid var(--rule); }
.faq-item button.faq-q {
    width: 100%;
    background: transparent;
    border: 0;
    padding: 22px 56px 22px 0;
    font-family: var(--serif);
    font-size: 1.15rem;
    color: var(--ink);
    text-align: left;
    cursor: pointer;
    position: relative;
    line-height: 1.35;
}
.faq-item .faq-q::after {
    content: "+";
    position: absolute;
    right: 8px; top: 50%;
    transform: translateY(-50%);
    font-size: 1.6rem;
    color: var(--terracotta);
    font-family: var(--serif);
    transition: transform .3s ease;
}
.faq-item[aria-expanded="true"] .faq-q::after { content: "−"; }
.faq-a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .46s cubic-bezier(.2, .7, .2, 1);
    color: var(--ink-soft);
    will-change: grid-template-rows;
}
.faq-a > .faq-a-inner {
    overflow: hidden;
    min-height: 0;
    padding: 0 0 22px;
    max-width: 100%;
}
.faq-item[aria-expanded="true"] .faq-a { grid-template-rows: 1fr; }
.faq-a p {
    margin: 0;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .28s ease, transform .32s ease;
}
.faq-item[aria-expanded="true"] .faq-a p {
    opacity: 1;
    transform: none;
    transition-delay: .14s;
}

/* ====== CONTACT FORM ====== */
.contact-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 50px;
}
.contact-details {
    background: var(--paper);
    padding: 32px 30px;
    border-radius: var(--radius);
    border: 1px solid var(--rule);
    height: fit-content;
}
.contact-details dl { margin: 0; }
.contact-details dt {
    font-size: .78rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
    margin-top: 18px;
}
.contact-details dt:first-child { margin-top: 0; }
.contact-details dd {
    margin: 4px 0 0;
    font-size: 1.05rem;
    color: var(--ink);
}
.contact-details dd a { color: var(--ink); }

form.lead-form {
    background: var(--paper);
    padding: 34px 30px;
    border-radius: var(--radius);
    border: 1px solid var(--rule);
    display: grid;
    gap: 18px;
}
.lead-form .field {
    display: grid;
    gap: 6px;
}
.lead-form label {
    font-size: .92rem;
    font-weight: 600;
    color: var(--ink-soft);
}
.lead-form label .req { color: var(--terracotta-deep); }
.lead-form input,
.lead-form textarea {
    width: 100%;
    padding: 12px 14px;
    font-family: var(--sans);
    font-size: 1rem;
    border: 1px solid var(--rule);
    background: var(--bg);
    color: var(--ink);
    border-radius: 8px;
    transition: border-color .22s ease, background .22s ease, box-shadow .22s ease;
    -webkit-tap-highlight-color: transparent;
}
.lead-form input:hover,
.lead-form textarea:hover {
    border-color: var(--copper);
}
.lead-form input:focus,
.lead-form input:focus-visible,
.lead-form textarea:focus,
.lead-form textarea:focus-visible {
    outline: none;
    border-color: var(--iznik);
    background: var(--paper);
    box-shadow: 0 0 0 1px var(--iznik), 0 0 22px -8px rgba(26, 90, 116, 0.35);
}
/* Checkbox inside consent-row: tight focus ring instead of global 3px */
.consent-row input[type="checkbox"] {
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
.consent-row input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--iznik);
    outline-offset: 2px;
    border-radius: 3px;
}
/* Toggle-group buttons + range slider: subtle focus */
.toggle-group button:focus-visible {
    outline: 2px solid var(--iznik);
    outline-offset: 3px;
}
.slider-row input[type="range"]:focus-visible {
    outline: 2px solid var(--iznik);
    outline-offset: 4px;
    border-radius: 3px;
}
.lead-form textarea { min-height: 130px; resize: vertical; }
.lead-form .hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.consent-row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: .9rem;
    color: var(--ink-soft);
}
.consent-row input { width: auto; margin-top: 4px; }
.form-status {
    padding: 14px 16px;
    border-radius: 8px;
    font-size: .95rem;
    display: none;
}
.form-status.visible { display: block; }
.form-status.success { background: #e9efd8; color: #3a4a14; border: 1px solid #b5c283; }
.form-status.error { background: #fadad1; color: #7a2413; border: 1px solid #e3a58f; }

@media (max-width: 900px) {
    .contact-layout { grid-template-columns: 1fr; }
}

/* ====== TABLE SCROLL CONTAINER ====== */
.table-scroll {
    position: relative;
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius);
    background: var(--paper);
    scrollbar-color: var(--copper) transparent;
    scrollbar-width: thin;
}
.table-scroll::-webkit-scrollbar { height: 8px; }
.table-scroll::-webkit-scrollbar-track { background: transparent; }
.table-scroll::-webkit-scrollbar-thumb {
    background: var(--copper);
    border-radius: 8px;
}
.table-scroll::-webkit-scrollbar-thumb:hover { background: var(--terracotta-deep); }
.table-scroll table { margin: 0; }
/* Edge fade cue when content overflows */
.table-scroll::before,
.table-scroll::after {
    content: "";
    position: absolute;
    top: 0; bottom: 8px;
    width: 28px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 260ms ease;
    z-index: 2;
}
.table-scroll::before {
    left: 0;
    background: linear-gradient(90deg, var(--paper), rgba(251, 246, 234, 0));
}
.table-scroll::after {
    right: 0;
    background: linear-gradient(-90deg, var(--paper), rgba(251, 246, 234, 0));
}
.table-scroll.has-scroll-left::before { opacity: 1; }
.table-scroll.has-scroll-right::after { opacity: 1; }

/* ====== PRICE LIST TABLE ====== */
.price-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--radius);
    overflow: hidden;
    font-size: .98rem;
}
.price-table caption {
    text-align: left;
    padding: 18px 22px 0;
    font-family: var(--serif);
    font-size: 1.2rem;
    color: var(--ink);
    caption-side: top;
}
.price-table th,
.price-table td {
    padding: 14px 22px;
    text-align: left;
    border-bottom: 1px solid var(--rule);
}
.price-table th {
    background: var(--bg-2);
    font-weight: 600;
    font-family: var(--serif);
    color: var(--ink);
}
.price-table tr:last-child td { border-bottom: 0; }
.price-table td:last-child {
    font-family: var(--serif);
    color: var(--terracotta-deep);
    white-space: nowrap;
}
.price-disclaimer {
    margin-top: 14px;
    font-size: .88rem;
    color: var(--muted);
    font-style: italic;
}

/* ====== LONG-FORM / LEGAL PAGE ====== */
.page-head {
    padding: 64px 0 32px;
    position: relative;
}
.page-head h1 { margin-bottom: .3em; }
.page-head .lead {
    color: var(--ink-soft);
    font-size: 1.08rem;
    max-width: 64ch;
}
.page-body {
    padding: 10px 0 70px;
}
.prose {
    max-width: 780px;
    margin: 0 auto;
}
.prose h2 { margin-top: 2em; font-size: 1.6rem; }
.prose h3 { margin-top: 1.6em; font-size: 1.2rem; }
.prose p { color: var(--ink-soft); }
.prose ul, .prose ol {
    color: var(--ink-soft);
    padding-left: 20px;
}
.prose li { margin-bottom: 6px; }
.prose .meta {
    font-size: .88rem;
    color: var(--muted);
    border-top: 1px dashed var(--rule);
    padding-top: 14px;
    margin-top: 40px;
}

/* ====== 404 ====== */
.err404 {
    min-height: 70vh;
    display: grid;
    place-items: center;
    text-align: center;
}
.err404 .code {
    font-family: var(--serif);
    font-size: clamp(5rem, 18vw, 10rem);
    line-height: 1;
    color: var(--terracotta);
    letter-spacing: -0.04em;
}

/* ====== FOOTER ====== */
.site-footer {
    background: #1f1710;
    color: #e9d8ad;
    padding: 60px 0 0;
    margin-top: 40px;
    position: relative;
}
.site-footer::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 6px;
    background:
        repeating-linear-gradient(90deg,
            var(--terracotta) 0 14px,
            var(--iznik) 14px 28px,
            var(--olive) 28px 42px,
            var(--gold) 42px 56px);
}
.footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 34px;
    padding-bottom: 44px;
}
.site-footer h4 {
    font-family: var(--serif);
    font-size: 1rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #fbf6ea;
    margin-bottom: 14px;
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 8px; }
.site-footer a { color: #e9d8ad; text-decoration: none; }
.site-footer a:hover { color: #fbf6ea; text-decoration: underline; }
.site-footer p { color: #c7b38a; font-size: .95rem; }
.footer-sub {
    border-top: 1px solid rgba(233, 216, 173, 0.18);
    padding: 20px 0;
    font-size: .85rem;
    color: #c7b38a;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
@media (max-width: 900px) {
    .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
    .footer-grid { grid-template-columns: 1fr; }
}

/* ====== COOKIE BANNER ====== */
.cc-banner {
    position: fixed;
    left: 20px; right: 20px; bottom: 20px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 14px;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,.4);
    padding: 22px 26px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 18px;
    align-items: center;
    z-index: 200;
    transform: translateY(calc(100% + 40px));
    transition: transform .4s var(--ease);
    max-width: 960px;
    margin-inline: auto;
}
.cc-banner.visible { transform: translateY(0); }
.cc-text h3 {
    font-size: 1.05rem;
    margin-bottom: 4px;
}
.cc-text p {
    margin: 0;
    color: var(--ink-soft);
    font-size: .92rem;
}
.cc-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.cc-btn {
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--ink);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font-size: .93rem;
    font-family: var(--sans);
    transition: background .2s, color .2s;
}
.cc-btn.cc-primary {
    background: var(--ink);
    color: var(--paper);
}
.cc-btn.cc-primary:hover { background: var(--terracotta-deep); border-color: var(--terracotta-deep); }
.cc-btn:hover { background: var(--ink); color: var(--paper); }

/* Cookie settings modal */
.cc-modal {
    position: fixed;
    inset: 0;
    background: rgba(31, 23, 16, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 300;
}
.cc-modal.visible { display: flex; }
.cc-modal-inner {
    background: var(--paper);
    border-radius: 16px;
    padding: 30px;
    max-width: 520px;
    width: 100%;
    box-shadow: 0 40px 80px -30px rgba(0,0,0,.5);
    max-height: 90vh;
    overflow: auto;
}
.cc-modal h3 { margin-bottom: 4px; }
.cc-cat {
    border-top: 1px solid var(--rule);
    padding: 16px 0;
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 20px;
}
.cc-cat h4 { margin: 0 0 4px; font-size: 1rem; font-family: var(--serif); }
.cc-cat p { margin: 0; font-size: .9rem; color: var(--ink-soft); }
.cc-switch {
    position: relative;
    width: 46px; height: 26px;
    flex-shrink: 0;
}
.cc-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.cc-switch .slider-bg {
    position: absolute; inset: 0;
    background: var(--rule);
    border-radius: 26px;
    transition: background .2s;
    cursor: pointer;
}
.cc-switch .slider-bg::before {
    content: "";
    position: absolute;
    top: 3px; left: 3px;
    width: 20px; height: 20px;
    background: var(--paper);
    border-radius: 50%;
    transition: transform .2s;
}
.cc-switch input:checked + .slider-bg { background: var(--olive); }
.cc-switch input:checked + .slider-bg::before { transform: translateX(20px); }
.cc-switch input:disabled + .slider-bg { opacity: .7; cursor: not-allowed; }
.cc-modal-actions {
    display: flex; gap: 10px; justify-content: flex-end;
    margin-top: 20px; flex-wrap: wrap;
}

@media (max-width: 700px) {
    .cc-banner { grid-template-columns: 1fr; padding: 20px; }
}

/* ====== SITE MAP list ====== */
.sitemap-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px 30px;
}
.sitemap-list li {
    position: relative;
    padding: 18px 22px;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 12px;
    transition:
        transform .4s cubic-bezier(.22,.61,.36,1),
        box-shadow .4s cubic-bezier(.22,.61,.36,1),
        border-color .4s ease,
        background-color .4s ease;
    isolation: isolate;
    overflow: hidden;
}
/* Gradient border via mask-composite (revealed on hover) */
.sitemap-list li::before {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    border-radius: inherit;
    background: linear-gradient(135deg,
        var(--terracotta) 0%,
        var(--gold) 30%,
        var(--iznik) 65%,
        var(--terracotta) 100%);
    background-size: 280% 280%;
    background-position: 0% 0%;
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
    z-index: 1;
}
/* Warm inner wash on hover */
.sitemap-list li::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(circle at 15% 50%,
        rgba(196, 154, 60, 0.14),
        rgba(183, 71, 38, 0.05) 50%,
        transparent 72%);
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s ease;
    z-index: 0;
}
.sitemap-list li:hover,
.sitemap-list li:focus-within {
    transform: translateY(-3px);
    box-shadow:
        0 22px 40px -22px rgba(31, 23, 16, 0.4),
        0 0 0 0 rgba(196, 154, 60, 0);
    border-color: transparent;
    background-color: var(--paper);
}
.sitemap-list li:hover::before,
.sitemap-list li:focus-within::before {
    opacity: 1;
    animation: sitemap-border-flow 5s linear infinite;
}
.sitemap-list li:hover::after,
.sitemap-list li:focus-within::after {
    opacity: 1;
}
@keyframes sitemap-border-flow {
    0%   { background-position: 0% 0%; }
    100% { background-position: 140% 140%; }
}

.sitemap-list a {
    position: relative;
    z-index: 2;
    color: var(--ink);
    text-decoration: none;
    font-family: var(--serif);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: color .3s ease, transform .32s cubic-bezier(.22,.61,.36,1);
}
/* Ornament dot: grows in on hover */
.sitemap-list a::before {
    content: "";
    width: 0; height: 8px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--terracotta), var(--gold));
    box-shadow: 0 0 0 0 rgba(183, 71, 38, 0.4);
    transition:
        width .34s cubic-bezier(.5, 1.6, .4, 1),
        box-shadow .42s ease;
    flex-shrink: 0;
}
.sitemap-list li:hover a,
.sitemap-list li:focus-within a {
    color: var(--terracotta-deep);
    transform: translateX(4px);
}
.sitemap-list li:hover a::before,
.sitemap-list li:focus-within a::before {
    width: 8px;
    box-shadow: 0 0 0 4px rgba(183, 71, 38, 0.14);
}
.sitemap-list small {
    position: relative;
    z-index: 2;
    display: block;
    color: var(--muted);
    font-size: .85rem;
    margin-top: 4px;
}
.sitemap-list a:focus-visible {
    outline: none;
}

@media (max-width: 700px) { .sitemap-list { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
    .sitemap-list li:hover::before,
    .sitemap-list li:focus-within::before { animation: none; }
}

/* ====== REVEAL ====== */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.visible {
    opacity: 1;
    transform: none;
}

/* ====== FOOTER BRAND ON DARK ====== */
.site-footer .brand { margin-bottom: 14px; color: #fbf6ea; }
.site-footer .brand > span { color: #fbf6ea; }
.site-footer .brand .brand-sub { color: #c7b38a; }

/* ====== UTILITY / PAGE-SPECIFIC ====== */
.em-accent { color: var(--terracotta-deep); font-style: italic; }
.no-pad-top { padding-top: 0; }
.center-text { text-align: center; }
.prose-center-note { text-align: center; max-width: 760px; margin: 28px auto 0; }

.faq-head { margin: 0; }

.selector-output-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    font-size: .9rem;
}
.selector-output-grid .serif { font-family: var(--serif); }
.selector-output-grid .label-tight { margin-bottom: 2px; }

.contact-block-h2 { font-size: 1.3rem; margin: 0 0 12px; }
.contact-details .note-small { font-size: .88rem; color: var(--muted); margin-top: 18px; }
.form-hint { margin: 0 0 4px; color: var(--ink-soft); font-size: .95rem; }
.optional-mark { color: var(--muted); font-weight: 400; }

/* ====== CTA BANNER (dark) ====== */
.cta-banner {
    background: linear-gradient(135deg, #2b2218 0%, #3c2f22 100%);
    color: #f6ecd8;
    border-radius: 20px;
    padding: 50px 40px;
    text-align: center;
    position: relative;
    overflow: hidden;
    isolation: isolate;
}
.cta-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(45deg, rgba(183, 71, 38, 0.08) 0 12px, transparent 12px 24px);
    pointer-events: none;
    z-index: -1;
}
.cta-banner h2 { color: #fbf6ea; }
.cta-banner p { max-width: 640px; margin: 0 auto 24px; color: #e9d8ad; }

/* ====== 404 CTA ROW ====== */
.err404 .cta-row {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}
.err404 p {
    max-width: 560px;
    margin: 0 auto 24px;
    color: var(--ink-soft);
}

/* ====== FAQ A11Y ICON FIX ====== */
.faq-q { type: button; }

/* ====== REDUCED MOTION ====== */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal { opacity: 1 !important; transform: none !important; }
    .tile-rosette { animation: none !important; }
}

/* ====== TAP TARGET ====== */
@media (pointer: coarse) {
    .nav a.navlink { padding: 10px 0; }
    .faq-q { min-height: 48px; }
}

/* =========================================================
   ADVANCED THEMATIC EFFECTS
   Turkish breakfast / Iznik / mozaik atmosphere
   ========================================================= */

/* ---- Cursor aura (warm sunrise glow follows pointer) ---- */
.cursor-spot {
    position: fixed;
    top: 0; left: 0;
    width: 620px; height: 620px;
    margin: -310px 0 0 -310px;
    background:
        radial-gradient(circle at center,
            rgba(196, 154, 60, 0.22) 0%,
            rgba(183, 71, 38, 0.12) 22%,
            rgba(26, 90, 116, 0.06) 48%,
            transparent 65%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 30;
    mix-blend-mode: soft-light;
    opacity: 0;
    transition: opacity 380ms ease, width 440ms ease, height 440ms ease, margin 440ms ease;
    will-change: transform, opacity;
}
.cursor-spot.is-on { opacity: 1; }
.cursor-spot.is-hot {
    width: 380px; height: 380px;
    margin: -190px 0 0 -190px;
    mix-blend-mode: screen;
}
@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
    .cursor-spot { display: none !important; }
}

/* ---- Stage curtain (sunrise rise on first load) ---- */
.stage-curtain {
    position: fixed; inset: 0;
    z-index: 9000;
    pointer-events: none;
    background:
        linear-gradient(180deg,
            #1f1710 0%,
            #2b2218 28%,
            #6a2914 52%,
            #b74726 72%,
            #c49a3c 88%,
            #fbf6ea 100%);
    transform-origin: 50% 100%;
}
.stage-curtain::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        repeating-linear-gradient(45deg,
            rgba(0,0,0,0) 0 16px,
            rgba(251, 246, 234, 0.04) 16px 17px);
    mix-blend-mode: overlay;
    pointer-events: none;
}
.stage-curtain::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 5px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(196, 154, 60, 0.4) 20%,
        #fbf6ea 50%,
        rgba(196, 154, 60, 0.4) 80%,
        transparent 100%);
    box-shadow: 0 0 40px rgba(196, 154, 60, 0.85), 0 0 80px rgba(183, 71, 38, 0.4);
}
.stage-curtain.is-up {
    animation: curtain-rise 1350ms cubic-bezier(.65, .02, .15, .99) forwards;
}
@keyframes curtain-rise {
    0%   { transform: translateY(0); opacity: 1; }
    70%  { opacity: 1; }
    100% { transform: translateY(-108%); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .stage-curtain { display: none !important; }
}

/* ---- Spark burst on button click (ember) ---- */
.spark {
    position: fixed;
    width: 5px; height: 5px;
    border-radius: 50%;
    background: radial-gradient(circle,
        #fbf6ea 0%,
        var(--gold) 30%,
        var(--terracotta) 70%,
        transparent 90%);
    box-shadow:
        0 0 8px rgba(196, 154, 60, 0.85),
        0 0 20px rgba(183, 71, 38, 0.4);
    pointer-events: none;
    z-index: 9999;
    animation: spark-fly 920ms cubic-bezier(.2, .7, .2, 1) forwards;
    will-change: transform, opacity;
    transform: translate(-50%, -50%);
}
@keyframes spark-fly {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(calc(-50% + var(--dx, 0)), calc(-50% + var(--dy, 0))) scale(0.2); }
}
@media (prefers-reduced-motion: reduce) {
    .spark { display: none !important; }
}

/* ---- Hero: plate with real image ---- */
.hero-plate {
    position: absolute;
    inset: 36px;
    margin: 0;
    border-radius: 50%;
    overflow: hidden;
    background:
        radial-gradient(circle at 48% 45%, #fbf6ea 0%, #f1e2bd 58%, #e4c98a 100%);
    box-shadow:
        inset 0 0 0 2px var(--copper),
        inset 0 0 0 6px var(--paper),
        inset 0 0 0 7px var(--gold),
        0 24px 50px -16px rgba(31, 23, 16, 0.5);
    transition: transform 900ms cubic-bezier(.2, .7, .2, 1);
    z-index: 1;
}
.hero-visual:hover .hero-plate { transform: rotate(6deg) scale(1.02); }
.hero-plate img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
    transform: scale(1.05);
    transition: transform 1200ms cubic-bezier(.2, .7, .2, 1), filter 700ms;
    filter: saturate(1.04) contrast(1.02);
}
.hero-visual:hover .hero-plate img {
    transform: scale(1.12);
    filter: saturate(1.15) contrast(1.05);
}
/* slow ring rotation */
.hero-plate-ring {
    position: absolute;
    inset: 48px;
    border-radius: 50%;
    border: 1px dashed rgba(251, 246, 234, 0.55);
    pointer-events: none;
    z-index: 3;
    animation: ring-rotate 50s linear infinite;
}
@keyframes ring-rotate { to { rotate: 360deg; } }

/* conic rosette medallion overlapping plate edge */
.hero-rosette {
    position: absolute;
    width: 94px; height: 94px;
    top: 12px; right: 14px;
    border-radius: 50%;
    background:
        radial-gradient(circle, #fbf6ea 0%, #fbf6ea 26%, transparent 27%),
        conic-gradient(from 22.5deg,
            var(--terracotta) 0 45deg, var(--iznik) 45deg 90deg,
            var(--terracotta) 90deg 135deg, var(--iznik) 135deg 180deg,
            var(--terracotta) 180deg 225deg, var(--iznik) 225deg 270deg,
            var(--terracotta) 270deg 315deg, var(--iznik) 315deg 360deg);
    box-shadow:
        0 0 0 3px var(--paper),
        0 0 0 5px var(--gold),
        0 10px 28px -6px rgba(31, 23, 16, 0.45);
    animation: rosette-spin 24s linear infinite;
    z-index: 5;
}
.hero-rosette::after {
    content: "";
    position: absolute;
    inset: 30%;
    border-radius: 50%;
    background: radial-gradient(circle, var(--gold) 0%, var(--gold) 42%, #fbf6ea 43%);
    box-shadow: inset 0 0 0 2px var(--terracotta-deep);
}
@keyframes rosette-spin { to { rotate: 360deg; } }

/* ---- Steam wisps rising from plate (Turkish tea/coffee) ---- */
.hero-steam {
    position: absolute;
    top: 20px;
    left: 50%;
    width: 200px;
    height: 150px;
    transform: translateX(-50%);
    z-index: 4;
    pointer-events: none;
}
.hero-steam span {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 3px;
    height: 70px;
    background: linear-gradient(180deg,
        transparent 0%,
        rgba(251, 246, 234, 0.85) 35%,
        rgba(251, 246, 234, 0.4) 75%,
        transparent 100%);
    border-radius: 50%;
    transform-origin: 50% 100%;
    opacity: 0;
    filter: blur(1.2px);
    animation: steam-rise 4.2s ease-in infinite;
}
.hero-steam span:nth-child(1) { margin-left: -34px; animation-delay: 0s; }
.hero-steam span:nth-child(2) { margin-left: 0;     animation-delay: 1.2s; }
.hero-steam span:nth-child(3) { margin-left: 28px;  animation-delay: 2.4s; }
@keyframes steam-rise {
    0%   { transform: translate(-50%, 0) scaleY(0.5) rotate(-3deg); opacity: 0; }
    18%  { opacity: 0.85; }
    80%  { opacity: 0.25; }
    100% { transform: translate(-50%, -120px) scaleY(1.6) rotate(8deg); opacity: 0; }
}

/* ---- Hero particles (drifting gold seeds / zaatar) ---- */
.hero-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 2;
    border-radius: 6px;
}
.seed {
    position: absolute;
    width: var(--size, 5px);
    height: var(--size, 5px);
    left: var(--px, 50%);
    bottom: -10px;
    border-radius: 50%;
    background: radial-gradient(circle, var(--gold), var(--copper));
    box-shadow: 0 0 4px rgba(196, 154, 60, 0.55);
    opacity: 0;
    animation: seed-drift var(--dur, 14s) linear infinite;
    animation-delay: var(--delay, 0s);
    will-change: transform, opacity;
}
@keyframes seed-drift {
    0%   { transform: translate3d(0, 0, 0) rotate(0); opacity: 0; }
    10%  { opacity: 0.7; }
    85%  { opacity: 0.35; }
    100% { transform: translate3d(var(--dx, 0), calc(-1 * var(--rise, 520px)), 0) rotate(var(--rot, 240deg)); opacity: 0; }
}

/* ---- Scroll-progress ribbon in header ---- */
.site-header .scroll-ribbon {
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 2px;
    background: linear-gradient(90deg,
        var(--terracotta) 0%,
        var(--gold) 45%,
        var(--iznik) 100%);
    transform-origin: 0 50%;
    transform: scaleX(var(--rs-scroll, 0));
    transition: transform 140ms linear;
    pointer-events: none;
    z-index: 2;
}

/* ---- 3D tilt on cards ---- */
.kutu-grid { perspective: 1400px; }
.kutu-card {
    --rx: 0deg;
    --ry: 0deg;
    transform: rotateX(var(--rx)) rotateY(var(--ry)) translateY(var(--ty, 0));
    transform-style: preserve-3d;
    will-change: transform;
}
.kutu-card.is-tilting {
    transition: background-color 400ms var(--ease), box-shadow 400ms var(--ease);
}
.kutu-card .kutu-size { transform: translateZ(14px); }
.kutu-card h3 { transform: translateZ(22px); }
.kutu-card .kutu-desc { transform: translateZ(8px); }
.kutu-card .kutu-price { transform: translateZ(28px); }

.info-grid { perspective: 1400px; }
.info-card {
    --rx: 0deg; --ry: 0deg;
    transform: rotateX(var(--rx)) rotateY(var(--ry));
    transform-style: preserve-3d;
    will-change: transform;
}
.info-card.is-tilting { transition: box-shadow 400ms var(--ease); }
.info-card .tile-badge { transform: translateZ(18px); }
.info-card h3 { transform: translateZ(14px); }

/* ---- Gold shimmer sweep on section h2 (safe pattern) ---- */
.section-head h2 {
    position: relative;
    display: inline-block;
    isolation: isolate;
}
.section-head h2::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: -50%;
    width: 40%;
    background: linear-gradient(100deg,
        transparent 0%,
        rgba(196, 154, 60, 0.25) 40%,
        rgba(251, 246, 234, 0.75) 50%,
        rgba(196, 154, 60, 0.25) 60%,
        transparent 100%);
    transform: skewX(-18deg) translateX(-30%);
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: overlay;
    z-index: 1;
}
.section-head.visible h2::after {
    animation: h2-shimmer 1.6s cubic-bezier(.2, .7, .2, 1) 240ms forwards;
}
@keyframes h2-shimmer {
    0%   { opacity: 0; transform: skewX(-18deg) translateX(-30%); }
    18%  { opacity: 1; }
    82%  { opacity: 1; }
    100% { opacity: 0; transform: skewX(-18deg) translateX(360%); }
}

/* ---- Scroll-linked mozaik drift ---- */
.mozaik-border {
    --tile: 14px;
    background-image:
        linear-gradient(45deg, var(--terracotta) 25%, transparent 25%, transparent 75%, var(--terracotta) 75%),
        linear-gradient(45deg, var(--iznik) 25%, transparent 25%, transparent 75%, var(--iznik) 75%);
    background-size: calc(var(--tile) * 2) calc(var(--tile) * 2);
    background-position:
        calc(var(--rs-scroll, 0) * -180px) 0,
        calc(var(--rs-scroll, 0) * -180px + var(--tile)) var(--tile);
    opacity: .75;
}

/* ---- Process steps: conic gradient number ring ---- */
.step {
    position: relative;
    overflow: hidden;
}
.step::before {
    position: relative;
    z-index: 1;
}
.step::after {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 140px; height: 140px;
    background:
        conic-gradient(from 180deg,
            rgba(183, 71, 38, 0.18) 0deg,
            rgba(196, 154, 60, 0.18) 120deg,
            rgba(26, 90, 116, 0.18) 240deg,
            rgba(183, 71, 38, 0.18) 360deg);
    border-radius: 50%;
    filter: blur(10px);
    animation: step-glow 14s linear infinite;
    pointer-events: none;
    z-index: 0;
}
.step:nth-child(2)::after { animation-delay: -3.5s; }
.step:nth-child(3)::after { animation-delay: -7s; }
.step:nth-child(4)::after { animation-delay: -10.5s; }
@keyframes step-glow { to { rotate: 360deg; } }

/* ---- Inline figure (content images) ---- */
.inline-fig {
    position: relative;
    margin: 0;
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: linear-gradient(135deg, var(--bg-2), #e4c98a 55%, var(--copper));
    box-shadow:
        0 28px 50px -22px rgba(31, 23, 16, 0.5),
        0 0 0 1px var(--rule);
    isolation: isolate;
    transform: rotate(-1.5deg);
    transition: transform 560ms var(--ease), box-shadow 560ms var(--ease);
    max-width: 420px;
}
.inline-fig:hover {
    transform: rotate(0) scale(1.015);
    box-shadow:
        0 36px 60px -24px rgba(31, 23, 16, 0.55),
        0 0 0 1px var(--terracotta);
}
.inline-fig img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transform: scale(1.04);
    transition: transform 1000ms var(--ease), filter 700ms;
    filter: saturate(1.05);
}
.inline-fig:hover img {
    transform: scale(1.1);
    filter: saturate(1.15);
}
.inline-fig::before {
    content: "";
    position: absolute;
    inset: 14px;
    border: 1px dashed rgba(251, 246, 234, 0.55);
    border-radius: 12px;
    pointer-events: none;
    z-index: 2;
}
.inline-fig .fig-tag {
    position: absolute;
    bottom: 16px; left: 16px;
    background: rgba(31, 23, 16, 0.78);
    color: var(--paper);
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 0.74rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    font-weight: 600;
    z-index: 3;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.inline-fig .fig-corner {
    position: absolute;
    width: 42px; height: 42px;
    border-radius: 8px;
    background:
        linear-gradient(45deg, var(--terracotta) 25%, transparent 25%),
        linear-gradient(-45deg, var(--iznik) 25%, transparent 25%),
        var(--gold);
    top: 16px; right: 16px;
    z-index: 3;
    transform: rotate(-8deg);
    box-shadow: 0 6px 14px -4px rgba(31, 23, 16, 0.5);
    transition: transform 400ms var(--ease);
}
.inline-fig:hover .fig-corner { transform: rotate(8deg) scale(1.05); }

/* ---- Split row with figure + text ---- */
.split-row {
    display: grid;
    grid-template-columns: 1.1fr 400px;
    gap: 70px;
    align-items: center;
}
.split-row.reverse { grid-template-columns: 400px 1.1fr; }
.split-row .section-head { text-align: left; margin: 0; }
.split-row .section-head .kicker { justify-content: flex-start; }
@media (max-width: 900px) {
    .split-row, .split-row.reverse {
        grid-template-columns: 1fr;
        gap: 34px;
    }
    .split-row .inline-fig, .split-row.reverse .inline-fig {
        margin-inline: auto;
    }
}

/* ---- Meze card with mini fig chip ---- */
.kutu-card.has-fig {
    overflow: visible;
    isolation: isolate;
}
.kutu-card.has-fig .fig-mini {
    position: absolute;
    top: -34px;
    right: 14px;
    width: 108px; height: 108px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--paper);
    box-shadow:
        0 12px 26px -10px rgba(31, 23, 16, 0.55),
        0 0 0 2px var(--gold);
    transform: rotate(8deg);
    transition: transform 560ms var(--ease);
    background: var(--bg-2);
    z-index: 2;
}
.kutu-card.has-fig:hover .fig-mini {
    transform: rotate(0) scale(1.08);
}
.kutu-card.has-fig .fig-mini img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
@media (max-width: 560px) {
    .kutu-card.has-fig .fig-mini {
        top: -22px; right: 12px;
        width: 86px; height: 86px;
    }
}

/* ---- Extra defenses against horizontal overflow ---- */
.kutu-grid, .info-grid, .steps, .hero-inner, .contact-layout, .split-row {
    min-width: 0;
}
.hero-visual { max-width: 100%; }
/* Allow kutu-grid to show hover-lift and fig-mini peek without horizontal leakage */
.kutu-grid { padding-top: 40px; margin-top: -40px; }
/* Clamp max widths so rotated figures can't push container */
.inline-fig { max-width: min(420px, 100%); }

/* ---- Calligraphy-style watermark ---- */
.watermark-wrap {
    position: relative;
    overflow: hidden;
}
.watermark {
    position: absolute;
    font-family: var(--serif);
    font-style: italic;
    font-weight: 400;
    color: var(--ink);
    opacity: 0.045;
    pointer-events: none;
    font-size: clamp(6rem, 18vw, 16rem);
    line-height: 0.85;
    letter-spacing: -0.04em;
    z-index: 0;
    user-select: none;
    white-space: nowrap;
}
.watermark.watermark-tl { top: -40px; left: -30px; }
.watermark.watermark-br {
    bottom: -80px; right: -30px;
    color: var(--terracotta-deep);
    opacity: 0.05;
}

/* ---- Price table gold sweep on hover ---- */
.price-table tr {
    position: relative;
    transition: background-color 340ms var(--ease);
}
.price-table tbody tr:hover {
    background: linear-gradient(90deg, transparent, rgba(196, 154, 60, 0.12), transparent);
}

/* ---- Button magnetic inner glow ---- */
.btn.btn-primary {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}
.btn.btn-primary::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle 120px at var(--mx, 50%) var(--my, 50%),
        rgba(251, 246, 234, 0.45),
        transparent 70%);
    opacity: 0;
    transition: opacity 320ms;
    pointer-events: none;
    z-index: 1;
    border-radius: inherit;
    mix-blend-mode: overlay;
}
.btn.btn-primary:hover::before { opacity: 1; }
.btn.btn-primary > * { position: relative; z-index: 2; }

/* ---- Kicker animated dot ---- */
.kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.kicker::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--copper);
    box-shadow: 0 0 0 0 rgba(196, 154, 60, 0.5);
    animation: kicker-pulse 2.4s ease-in-out infinite;
}
@keyframes kicker-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(196, 154, 60, 0.45); }
    50%      { box-shadow: 0 0 0 8px rgba(196, 154, 60, 0); }
}

/* ---- Kutu card shimmer stripe on hover ---- */
.kutu-card {
    overflow: hidden;
}
.kutu-card > .shine-bar {
    position: absolute;
    top: 0; bottom: 0; left: -60%;
    width: 32%;
    background: linear-gradient(110deg,
        transparent 0%,
        rgba(251, 246, 234, 0.4) 45%,
        rgba(196, 154, 60, 0.3) 55%,
        transparent 100%);
    transform: skewX(-18deg);
    pointer-events: none;
    transition: left 900ms cubic-bezier(.2, .7, .2, 1);
    z-index: 3;
    mix-blend-mode: overlay;
}
.kutu-card:hover > .shine-bar { left: 130%; }

/* ---- Hero load-in stagger ---- */
.hero .reveal { transition-delay: 60ms; }
body.is-loaded .hero .hero-eyebrow { animation: hero-fade 700ms cubic-bezier(.2, .7, .2, 1) both; }
body.is-loaded .hero h1 { animation: hero-fade 800ms cubic-bezier(.2, .7, .2, 1) 160ms both; }
body.is-loaded .hero-lead { animation: hero-fade 800ms cubic-bezier(.2, .7, .2, 1) 260ms both; }
body.is-loaded .hero-ctas { animation: hero-fade 800ms cubic-bezier(.2, .7, .2, 1) 360ms both; }
body.is-loaded .hero-visual {
    animation: hero-plate-in 1100ms cubic-bezier(.2, .7, .2, 1) 240ms both;
}
@keyframes hero-fade {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: none; }
}
@keyframes hero-plate-in {
    0%   { opacity: 0; transform: scale(.9) rotate(-8deg); }
    100% { opacity: 1; transform: none; }
}

/* Desktop-only intro (avoid mobile-flash) */
@media (max-width: 900px) {
    body.is-loaded .hero .hero-eyebrow,
    body.is-loaded .hero h1,
    body.is-loaded .hero-lead,
    body.is-loaded .hero-ctas,
    body.is-loaded .hero-visual { animation: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-plate, .hero-rosette, .hero-plate-ring { animation: none !important; }
    .hero-steam, .hero-particles { display: none !important; }
    .step::after { animation: none !important; }
    .kicker::before { animation: none !important; }
    body.is-loaded .hero .hero-eyebrow,
    body.is-loaded .hero h1,
    body.is-loaded .hero-lead,
    body.is-loaded .hero-ctas,
    body.is-loaded .hero-visual { animation: none !important; }
}