/* =====================================================================
   ALLIANZ BAKICILIK — Gold & Beyaz Tasarım Sistemi (style.css)
   Performans: backdrop-filter / filter: blur / mix-blend-mode KULLANILMAZ.
   Animasyonlar yalnızca transform + opacity (SVG çizgi çizimi hariç).
   ===================================================================== */

/* ---------- FONTLAR (yerel, Türkçe latin-ext dahil) ---------- */
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/instrument-serif-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Instrument Serif'; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/instrument-serif-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/instrument-serif-latin-400-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(fonts/instrument-serif-latin-ext-400-italic.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Manrope'; font-weight: 300; font-display: swap; src: url(fonts/manrope-latin-300-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Manrope'; font-weight: 300; font-display: swap; src: url(fonts/manrope-latin-ext-300-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Manrope'; font-weight: 400; font-display: swap; src: url(fonts/manrope-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Manrope'; font-weight: 400; font-display: swap; src: url(fonts/manrope-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Manrope'; font-weight: 500; font-display: swap; src: url(fonts/manrope-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Manrope'; font-weight: 500; font-display: swap; src: url(fonts/manrope-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Manrope'; font-weight: 600; font-display: swap; src: url(fonts/manrope-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Manrope'; font-weight: 600; font-display: swap; src: url(fonts/manrope-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }
@font-face { font-family: 'Manrope'; font-weight: 700; font-display: swap; src: url(fonts/manrope-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD }
@font-face { font-family: 'Manrope'; font-weight: 700; font-display: swap; src: url(fonts/manrope-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF }

/* ---------- TOKENLAR ---------- */
:root {
  --wine-950: #faf5ea;
  --wine-900: #f5ecd7;
  --plum: #eee0bf;
  --deep: #e6d19f;
  --accent: #a8802f;
  --accent-2: #c9a24a;
  --blush: #b48c3a;
  --blush-soft: #eadbb4;
  --porcelain: #ffffff;
  --porcelain-2: #f7f0e1;
  --on-dark: #2a2213;
  --on-dark-2: rgba(42, 34, 19, .74);
  --on-dark-3: rgba(42, 34, 19, .52);
  --on-light: #2a2213;
  --on-light-2: rgba(42, 34, 19, .72);
  --line-dark: rgba(176, 138, 62, .26);
  --line-light: rgba(176, 138, 62, .22);
  --serif: 'Instrument Serif', 'Times New Roman', Georgia, serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
  --m: 1;          /* hareket mesafesi çarpanı */
  --t: 1;          /* süre çarpanı */
  --wrap: 1360px;
  --gut: clamp(20px, 4vw, 48px);
  --top-h: 112px;  /* duyuru + header */
  --r: 6px;
  --r-lg: 14px;
  --sh-soft: 0 30px 60px -30px rgba(110, 80, 20, .30);
  --sh-card: 0 40px 80px -40px rgba(90, 65, 15, .38);
  --on-accent: #ffffff;
  --gold-grad: linear-gradient(135deg, #bf9844 0%, #a17b2c 55%, #7f601e 100%);
}
@media (prefers-reduced-motion: reduce) { :root { --m: .3; --t: .45 } }

/* ---------- TEMEL ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box }
html { -webkit-text-size-adjust: 100% }
html.lenis, html.lenis body { height: auto }
.lenis.lenis-smooth { scroll-behavior: auto !important }
.lenis.lenis-stopped { overflow: hidden }
body { font-family: var(--sans); font-size: 16px; line-height: 1.7; color: var(--on-dark); background: var(--wine-950); overflow-x: clip; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility }
body.no-scroll { overflow: hidden }
img, video, svg { display: block; max-width: 100% }
a { color: inherit; text-decoration: none }
button, input, select, textarea { font: inherit; color: inherit }
button { background: none; border: 0; cursor: pointer }
ul { list-style: none }
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: -.01em }
em { font-style: italic }
::selection { background: var(--accent); color: var(--on-dark) }
:focus-visible { outline: 2px solid var(--blush); outline-offset: 3px }
.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut) }
.narrow { max-width: 920px }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0 }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
.skip { position: fixed; left: 16px; top: -60px; z-index: 9999; background: var(--porcelain); color: var(--on-light); padding: 10px 16px; border-radius: var(--r) }
.skip:focus { top: 16px }
.ic { width: 20px; height: 20px; flex: none }
main { position: relative; display: block }

/* tipografi */
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--accent); margin-bottom: 22px }
.eyebrow::before { content: ""; width: 34px; height: 1px; background: currentColor; opacity: .6 }
.eyebrow-light { color: var(--blush) }
.sec-title { font-size: clamp(38px, 5.4vw, 78px); color: var(--on-light) }
.sec-title em { color: var(--accent) }
.sec-title.light { color: var(--on-dark) }
.sec-title.light em { color: var(--blush) }
.sec-head { margin-bottom: clamp(44px, 6vw, 80px) }
.sec-head.center { text-align: center; display: flex; flex-direction: column; align-items: center }
.sec-head.split { display: grid; grid-template-columns: 1fr 1fr; column-gap: 60px; align-items: end }
.sec-head.split .eyebrow { grid-column: 1 / -1 }
.sec-head.split p { color: var(--on-light-2); font-size: 17px; max-width: 460px; justify-self: end }
.link-line { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 600; letter-spacing: .04em; border-bottom: 1px solid currentColor; padding-bottom: 4px }
.link-line .ic { width: 16px; height: 16px; transition: transform .5s var(--ease) }
.link-line:hover .ic { transform: translateX(4px) }

/* maskeli başlık — Türkçe aksanlar için üst/alt pay bırakılır */
.mask-title { font-size: clamp(44px, 6.4vw, 96px); line-height: 1.02 }
.hero-title { font-size: clamp(44px, 5.4vw, 88px) }
.mw { display: inline-block; overflow: hidden; vertical-align: top; padding: .14em .02em .18em; margin: -.14em -.02em -.18em }
.mwi { display: inline-block; transform: translateY(115%); will-change: transform }
.mask-title em { color: var(--blush) }
body.is-ready .mwi { transform: none; transition: transform calc(1.2s * var(--t)) var(--ease) calc(var(--d) * 70ms + .1s) }
html:not(.js) .mwi { transform: none }

/* görünme */
html.js .reveal { opacity: 0; transform: translateY(calc(44px * var(--m))) }
html.js .reveal.in { opacity: 1; transform: none; transition: opacity calc(1s * var(--t)) var(--ease) calc(var(--i, 0) * 90ms), transform calc(1.2s * var(--t)) var(--ease) calc(var(--i, 0) * 90ms) }
html.js .reveal-now { opacity: 0; transform: translateY(calc(26px * var(--m))) }
body.is-ready .reveal-now { opacity: 1; transform: none; transition: opacity calc(1s * var(--t)) var(--ease) var(--rd, .2s), transform calc(1.2s * var(--t)) var(--ease) var(--rd, .2s) }

/* SVG çizgi çizimi */
.draw path { stroke-dasharray: 1; stroke-dashoffset: 1 }
.in .draw path, .draw.in path { stroke-dashoffset: 0; transition: stroke-dashoffset calc(1.8s * var(--t)) var(--ease) .25s }
html:not(.js) .draw path { stroke-dashoffset: 0 }

/* ---------- BUTONLAR ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 56px; padding: 0 28px; border-radius: 60px; font-size: 14.5px; font-weight: 600; letter-spacing: .02em; overflow: hidden; isolation: isolate; white-space: nowrap; transition: color .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease) }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: translateY(101%); transition: transform .6s var(--ease) }
.btn:hover::before { transform: none }
.btn .ic { width: 18px; height: 18px; transition: transform .5s var(--ease) }
.btn:hover .ic-arrow { transform: translateX(4px) }
.btn-primary { background: var(--accent); color: var(--on-dark) }
.btn-primary::before { background: var(--wine-900) }
.btn-light { background: var(--porcelain); color: var(--on-light) }
.btn-light::before { background: var(--blush) }
.btn-ghost { border: 1px solid rgba(176, 138, 62, .35); color: var(--on-dark) }
.btn-ghost::before { background: var(--on-dark) }
.btn-ghost:hover { color: var(--on-light) }
.btn-outline { border: 1px solid var(--line-light); color: var(--on-light); background: transparent }
.btn-outline::before { background: var(--accent) }
.btn-outline:hover { color: var(--on-dark); border-color: var(--accent) }
.btn-wa { background: var(--deep); color: var(--on-dark); border: 1px solid rgba(184, 146, 70, .3) }
.btn-wa::before { background: var(--accent) }
.btn-wa .ic-wa { width: 18px; height: 18px }
.btn-block { width: 100% }

/* chip */
.chip { display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: 30px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: rgba(176, 138, 62, .1); color: var(--accent); border: 1px solid var(--line-light) }
.chip-soft { background: transparent }
.chip-dark { background: rgba(176, 138, 62, .06); color: var(--blush); border-color: var(--line-dark) }

/* ---------- SCROLL İLERLEME ---------- */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 1300; background: linear-gradient(90deg, var(--accent), var(--blush)); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none }

/* ---------- ÜST ALAN: DUYURU + HEADER ---------- */
.site-top { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; transition: transform .7s var(--ease) }
.site-top.is-scrolled { transform: translateY(-36px) }
.site-top.is-hidden { transform: translateY(-100%) }
.announce { height: 36px; background: var(--accent); color: var(--on-dark); overflow: hidden; display: flex; align-items: center; font-size: 12.5px; font-weight: 500; letter-spacing: .06em }
.an-track { display: flex; width: max-content; animation: marquee 46s linear infinite }
.an-track span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap }
.an-track span::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--blush) }
@keyframes marquee { to { transform: translateX(-50%) } }

.header { position: relative; height: 76px }
.header::before { content: ""; position: absolute; inset: 0; background: var(--wine-900); border-bottom: 1px solid var(--line-dark); opacity: 0; transition: opacity .5s var(--ease) }
.site-top.is-scrolled .header::before, .site-top.is-solid .header::before { opacity: 1 }
.hdr { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px }
.logo { display: flex; align-items: center; gap: 12px; flex: none }
.logo img { width: 44px; height: auto }
.logo-txt { font-family: var(--serif); font-size: 22px; line-height: 1; letter-spacing: .14em; color: var(--on-dark) }
.logo-txt small { display: block; font-family: var(--sans); font-size: 9px; letter-spacing: .42em; color: var(--blush); margin-top: 5px }
.nav > ul { display: flex; align-items: center; gap: 6px; perspective: 1400px }
.nav > ul > li { position: relative }
.nav > ul > li > a { display: inline-flex; align-items: center; gap: 6px; height: 76px; padding: 0 16px; font-size: 14px; font-weight: 500; letter-spacing: .03em; color: var(--on-dark-2); transition: color .4s }
.nav > ul > li > a:hover, .nav > ul > li > a.active, .nav > ul > li:focus-within > a { color: var(--on-dark) }
.nav > ul > li > a.active::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 22px; height: 1px; background: var(--blush) }
.nav .chev { width: 12px; height: 12px; transition: transform .4s var(--ease) }
.nav li:hover .chev { transform: rotate(180deg) }
/* 3D açılır menüler */
.drop, .mega { position: absolute; top: calc(100% - 8px); opacity: 0; visibility: hidden; transform-origin: 50% 0; transform: perspective(1200px) rotateX(-18deg) translateY(10px); transition: opacity .45s var(--ease), transform .6s var(--ease), visibility 0s .6s; z-index: 5 }
.has-drop:hover .drop, .has-drop:focus-within .drop, .has-mega:hover .mega, .has-mega:focus-within .mega { opacity: 1; visibility: visible; transform: none; transition: opacity .45s var(--ease), transform .6s var(--ease), visibility 0s }
.drop { left: 0; min-width: 240px; padding: 10px; background: var(--porcelain); border-radius: var(--r-lg); box-shadow: var(--sh-card) }
.drop a { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-radius: 8px; color: var(--on-light); font-size: 14px; font-weight: 500; transition: background .3s, transform .4s var(--ease) }
.drop a:hover { background: rgba(176, 138, 62, .08); transform: translateX(4px) }
.mega { position: fixed; left: 50%; top: calc(var(--top-h) - 12px); width: min(1080px, calc(100vw - 48px)); margin-left: calc(min(1080px, calc(100vw - 48px)) / -2); background: var(--porcelain); color: var(--on-light); border-radius: var(--r-lg); box-shadow: var(--sh-card); display: grid; grid-template-columns: 1.15fr 1fr; overflow: hidden }
.site-top.is-scrolled .mega { top: calc(var(--top-h) - 36px - 12px) }
.mega-list { padding: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; align-content: start }
.mega-head { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding: 6px 12px 14px; border-bottom: 1px solid var(--line-light); margin-bottom: 8px }
.mega-head b { font-family: var(--serif); font-weight: 400; font-size: 26px }
.mega-head a { font-size: 13px; font-weight: 600; color: var(--accent) }
.mega-item { display: grid; grid-template-columns: 34px 1fr; gap: 4px 10px; padding: 14px 12px; border-radius: 10px; transition: background .3s }
.mega-item span { font-family: var(--serif); font-size: 20px; color: var(--accent); line-height: 1.2 }
.mega-item b { font-weight: 600; font-size: 14.5px }
.mega-item small { grid-column: 2; font-size: 12.5px; line-height: 1.5; color: var(--on-light-2) }
.mega-item:hover, .mega-item.on { background: rgba(176, 138, 62, .07) }
.mega-prev { position: relative; background: var(--wine-900); color: var(--on-dark); padding: 22px; display: flex; flex-direction: column; gap: 16px }
.mega-img { position: relative; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; background: var(--porcelain); padding: 6px }
.mega-img img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; transition: opacity .4s }
.mega-prev h4 { font-size: 30px }
.mega-prev p { font-size: 13.5px; color: var(--on-dark-2); line-height: 1.6 }
.mega-prev .btn { align-self: flex-start; height: 46px }

.hdr-actions { display: flex; align-items: center; gap: 6px }
.icon-btn { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--on-dark); border: 1px solid transparent; transition: border-color .4s, background .4s }
.icon-btn:hover { border-color: var(--line-dark); background: rgba(176, 138, 62, .06) }
.icon-btn .ic { width: 19px; height: 19px }
.hdr-cta { height: 46px; padding: 0 20px; margin: 0 6px; font-size: 13.5px }
.burger-lines { width: 22px; height: 12px; position: relative }
.burger-lines i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .5s var(--ease) }
.burger-lines i:first-child { top: 0 }
.burger-lines i:last-child { bottom: 0; transform-origin: right; transform: scaleX(.65) }
.icon-btn:hover .burger-lines i:last-child { transform: none }

/* ---------- TAM EKRAN DAİRESEL MENÜ ---------- */
.fs-menu { position: fixed; inset: 0; z-index: 1200; pointer-events: none; visibility: hidden; transition: visibility 0s .9s }
.fs-menu.open { pointer-events: auto; visibility: visible; transition: none }
.fs-circle { position: absolute; top: calc(-1 * var(--r0, 150vmax)); right: calc(-1 * var(--r0, 150vmax)); width: calc(2 * var(--r0, 150vmax)); height: calc(2 * var(--r0, 150vmax)); border-radius: 50%; background: radial-gradient(circle at 50% 50%, var(--deep), var(--wine-950) 70%); transform: scale(0); transition: transform .9s var(--ease-io) }
.fs-menu.open .fs-circle { transform: scale(1) }
.fs-inner { position: relative; height: 100%; overflow-y: auto; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-content: center; padding: 110px var(--gut) 50px; max-width: var(--wrap); margin: 0 auto }
.fs-close { position: absolute; top: 20px; right: var(--gut); z-index: 3 }
.fs-links a { display: flex; align-items: baseline; gap: 18px; font-family: var(--serif); font-size: clamp(40px, 6vw, 76px); line-height: 1.15; color: var(--on-dark); opacity: 0; transform: translateY(40px); transition: opacity .3s, transform .3s, color .4s }
.fs-links a span { font-family: var(--sans); font-size: 12px; letter-spacing: .2em; color: var(--blush) }
.fs-links a:hover { color: var(--blush) }
.fs-menu.open .fs-links a { opacity: 1; transform: none; transition: opacity .8s var(--ease) calc(.35s + var(--i) * 70ms), transform .9s var(--ease) calc(.35s + var(--i) * 70ms), color .4s }
.fs-side { opacity: 0; transform: translateY(30px); transition: opacity .3s, transform .3s; display: flex; flex-direction: column; gap: 28px; align-self: center }
.fs-menu.open .fs-side { opacity: 1; transform: none; transition: opacity .8s var(--ease) .6s, transform .9s var(--ease) .6s }
.fs-side h3 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--blush); margin-bottom: 12px }
.fs-side a { display: block; color: var(--on-dark-2); padding: 5px 0; transition: color .3s }
.fs-side a:hover { color: var(--on-dark) }

/* ---------- ARAMA ---------- */
.search-ov { position: fixed; inset: 0; z-index: 1250; background: var(--wine-950); opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s .5s }
.search-ov.open { opacity: 1; visibility: visible; transition: opacity .5s var(--ease) }
.search-ov::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 0%, rgba(176, 138, 62, .45), transparent 60%); pointer-events: none }
.so-inner { position: relative; max-width: 980px; margin: 0 auto; padding: 120px var(--gut) 40px; height: 100%; display: flex; flex-direction: column; transform: translateY(30px); transition: transform .7s var(--ease) }
.search-ov.open .so-inner { transform: none }
.so-field { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid var(--line-dark); padding-bottom: 14px }
.so-field .ic { width: 30px; height: 30px; color: var(--blush) }
.so-field input { flex: 1; background: none; border: 0; outline: 0; font-family: var(--serif); font-size: clamp(34px, 5vw, 64px); color: var(--on-dark); min-width: 0 }
.so-field input::placeholder { color: var(--on-dark-3) }
.so-hint { margin: 16px 0 26px; color: var(--on-dark-3); font-size: 13px }
.so-results { overflow-y: auto; flex: 1; display: grid; gap: 4px; align-content: start }
.so-res { display: grid; grid-template-columns: 80px 1fr auto; gap: 20px; align-items: center; padding: 14px; border-radius: 10px; border: 1px solid transparent; transition: background .3s, border-color .3s }
.so-res:hover, .so-res:focus { background: rgba(176, 138, 62, .04); border-color: var(--line-dark) }
.so-res .th { width: 80px; height: 56px; border-radius: 6px; overflow: hidden; background: var(--plum) }
.so-res .th img { width: 100%; height: 100%; object-fit: cover }
.so-res b { display: block; font-family: var(--serif); font-weight: 400; font-size: 24px; line-height: 1.2 }
.so-res small { color: var(--on-dark-2); font-size: 13px }
.so-res mark { background: none; color: var(--blush) }
.so-res .kind { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--blush) }

/* ---------- TEKLİF PANELİ ---------- */
.qp-scrim { position: fixed; inset: 0; z-index: 1100; background: rgba(38, 29, 12, .6); opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s }
.qp-scrim.open { opacity: 1; visibility: visible; transition: opacity .5s }
.qpanel { position: fixed; top: 0; right: 0; bottom: 0; z-index: 1150; width: min(560px, 100%); background: var(--porcelain); color: var(--on-light); transform: translateX(100%); transition: transform .8s var(--ease-io); display: flex; flex-direction: column; box-shadow: -40px 0 80px -40px rgba(70, 52, 18, 0.27) }
.qpanel.open { transform: none }
.qp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 30px 34px 18px; border-bottom: 1px solid var(--line-light) }
.qp-head h2 { font-size: 40px; color: var(--on-light) }
.qp-head h2 em { color: var(--accent) }
.qp-head p { font-size: 14px; color: var(--on-light-2); margin-top: 6px }
.qp-close { color: var(--on-light); border-color: var(--line-light) }
.qp-body { flex: 1; overflow-y: auto; padding: 24px 34px 34px; overscroll-behavior: contain }
.qp-quick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 22px }
.qp-quick .btn { height: 48px; font-size: 13px; padding: 0 16px }

/* ---------- FORM ---------- */
.dd-form { color: var(--on-light) }
.form-head { margin-bottom: 26px }
.form-title { font-size: clamp(34px, 3.4vw, 48px); color: var(--on-light) }
.form-head p { color: var(--on-light-2); margin-top: 8px }
.f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.dd-form-compact .f-grid { grid-template-columns: 1fr }
.fg { position: relative }
.fg-full { grid-column: 1 / -1 }
.fg input, .fg select, .fg textarea { width: 100%; height: 60px; padding: 24px 18px 8px; border: 1px solid var(--line-light); border-radius: 10px; background: #fff; color: var(--on-light); font-size: 15px; outline: none; transition: border-color .3s, box-shadow .3s; -webkit-appearance: none; appearance: none }
.fg textarea { height: auto; min-height: 130px; resize: vertical; padding-top: 28px }
.fg select { cursor: pointer; padding-right: 44px }
.fg label { position: absolute; left: 19px; top: 19px; font-size: 15px; color: var(--on-light-2); pointer-events: none; transform-origin: 0 0; transition: transform .35s var(--ease), color .3s }
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(176, 138, 62, .1) }
.fg input:focus + label, .fg input:not(:placeholder-shown) + label, .fg textarea:focus + label, .fg textarea:not(:placeholder-shown) + label, .fg-select.has-value label, .fg select:focus + label { transform: translateY(-11px) scale(.76); color: var(--accent); font-weight: 600 }
.fg-select .ic-plus { position: absolute; right: 18px; top: 20px; width: 18px; height: 18px; color: var(--accent); pointer-events: none }
.fg.invalid input, .fg.invalid select { border-color: var(--accent-2); box-shadow: 0 0 0 4px rgba(201, 162, 74, .12) }
.consent { position: relative; display: flex; gap: 12px; margin: 18px 0 20px; font-size: 13px; line-height: 1.6; color: var(--on-light-2); cursor: pointer }
.consent input { position: absolute; opacity: 0; width: 22px; height: 22px }
.consent .box { flex: none; width: 22px; height: 22px; border: 1px solid var(--accent); border-radius: 5px; display: grid; place-items: center; background: #fff; transition: background .3s }
.consent .box .ic { width: 14px; height: 14px; color: #fff; opacity: 0; transform: scale(.5); transition: opacity .3s, transform .4s var(--ease) }
.consent input:checked + .box { background: var(--accent) }
.consent input:checked + .box .ic { opacity: 1; transform: none }
.consent input:focus-visible + .box { outline: 2px solid var(--accent); outline-offset: 2px }
.consent.invalid .box { box-shadow: 0 0 0 4px rgba(201, 162, 74, .18) }
.consent a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px }
.form-msg { display: none; margin-top: 16px; padding: 14px 16px; border-radius: 10px; font-size: 14px; font-weight: 500 }
.form-msg.ok { display: block; background: #eaf4ec; color: #1f5a31; border: 1px solid #b9dcc2 }
.form-msg.err { display: block; background: rgba(176, 138, 62, .07); color: var(--accent); border: 1px solid var(--line-light) }
.form-note { margin-top: 14px; font-size: 12px; color: var(--on-light-2) }
.dd-form button[disabled] { opacity: .6; pointer-events: none }
.form-card { background: var(--porcelain); color: var(--on-light); border-radius: var(--r-lg); padding: clamp(28px, 4vw, 56px); box-shadow: var(--sh-card); position: relative }
.form-card::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--line-light); border-radius: 10px; pointer-events: none }

/* ---------- ÇEREZ ---------- */
.cookie { position: fixed; left: 20px; bottom: 20px; z-index: 1050; width: min(430px, calc(100% - 40px)); background: var(--porcelain); color: var(--on-light); border-radius: var(--r-lg); padding: 24px; box-shadow: var(--sh-card); transform: translateY(140%); transition: transform .9s var(--ease) }
.cookie.show { transform: none }
.cookie h2 { font-size: 26px; margin-bottom: 6px }
.cookie p { font-size: 13px; color: var(--on-light-2); line-height: 1.65; margin-bottom: 16px }
.cookie p a { color: var(--accent); font-weight: 600; text-decoration: underline }
.cookie .row { display: flex; gap: 10px }
.cookie .btn { flex: 1; height: 46px; font-size: 13px; padding: 0 14px }

/* ---------- SAYFA GEÇİŞİ ---------- */
.pt { position: fixed; inset: 0; z-index: 2000; display: flex; pointer-events: none }
.pt i { flex: 1; height: 100%; background: var(--wine-900); transform: scaleY(0); transform-origin: 50% 100% }
.pt i:nth-child(even) { background: var(--porcelain) }
.pt.cover { pointer-events: auto }
.pt.cover i { transform: scaleY(1); transition: transform .55s var(--ease-io) calc(var(--i) * 60ms) }
.pt.reveal-out i { transform-origin: 50% 0 }
.pt.start i { transform: scaleY(1); transition: none }
.pt.leave i { transform: scaleY(0); transform-origin: 50% 0; transition: transform .7s var(--ease-io) calc(var(--i) * 60ms) }

/* ---------- İMLEÇ ---------- */
.cursor { position: fixed; left: 0; top: 0; z-index: 3000; pointer-events: none; display: none }
.has-cursor .cursor { display: block }
.cur-dot { position: fixed; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--blush) }
.cur-ring { position: fixed; left: -20px; top: -20px; width: 40px; height: 40px }
.cur-ring i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid rgba(184, 146, 70, .6); transition: transform .45s var(--ease), background .3s, border-color .3s }
.cur-ring span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.6); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--on-dark); opacity: 0; transition: opacity .3s, transform .45s var(--ease); white-space: nowrap }
.cursor.link .cur-ring i { transform: scale(1.6) }
.cursor.label .cur-ring i { transform: scale(2.3); background: var(--accent); border-color: var(--accent) }
.cursor.label .cur-ring span { opacity: 1; transform: translate(-50%, -50%) scale(1) }
.cursor.label .cur-dot { opacity: 0 }
.has-cursor, .has-cursor a, .has-cursor button { cursor: none }
.has-cursor input, .has-cursor textarea, .has-cursor select { cursor: auto }

/* ---------- SABİT BUTONLAR ---------- */
.fab-wa { position: fixed; right: 22px; bottom: 22px; z-index: 900; width: 60px; height: 60px; border-radius: 50%; background: var(--accent); color: var(--on-dark); display: grid; place-items: center; box-shadow: 0 16px 34px -12px rgba(176, 138, 62, .8) }
.fab-wa .ic-wa { width: 28px; height: 28px; position: relative; z-index: 2 }
.fab-wa::before, .fab-wa::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--accent); animation: wave 2.8s var(--ease) infinite; opacity: 0 }
.fab-wa::after { animation-delay: 1.4s }
@keyframes wave { 0% { transform: scale(1); opacity: .8 } 100% { transform: scale(1.9); opacity: 0 } }
.to-top { position: fixed; right: 30px; bottom: 96px; z-index: 900; width: 44px; height: 44px; border-radius: 50%; background: var(--porcelain); color: var(--accent); display: grid; place-items: center; box-shadow: var(--sh-soft); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .5s var(--ease), transform .5s var(--ease) }
.to-top.show { opacity: 1; transform: none; pointer-events: auto }
.to-top .ic { width: 18px; height: 18px; transform: rotate(-90deg) }

/* ---------- PRELOADER ---------- */
.preloader { position: fixed; inset: 0; z-index: 2500; background: var(--porcelain); color: var(--on-light); display: flex; flex-direction: column; align-items: center; justify-content: center; transition: transform 1.1s var(--ease-io) }
.preloader.done { transform: translateY(-100%) }
.pl-art { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .35 }
.pl-art path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: drawIn 2.4s var(--ease) forwards }
.pl-art path:nth-child(2) { animation-delay: .15s } .pl-art path:nth-child(3) { animation-delay: .3s } .pl-art path:nth-child(4) { animation-delay: .45s } .pl-art path:nth-child(5) { animation-delay: .6s } .pl-art path:nth-child(6) { animation-delay: .75s }
@keyframes drawIn { to { stroke-dashoffset: 0 } }
.pl-center { position: relative; text-align: center; padding: 0 20px }
.pl-name { display: flex; justify-content: center; flex-wrap: wrap; font-family: var(--serif); font-size: clamp(34px, 7vw, 92px); letter-spacing: .06em; line-height: 1.1; overflow: hidden; padding: .14em 0 .12em }
.pl-l { display: inline-block; transform: translateY(120%); animation: letterUp 1s var(--ease) forwards; animation-delay: calc(.2s + var(--i) * 45ms) }
@keyframes letterUp { to { transform: none } }
.pl-sub { margin-top: 12px; font-size: 12px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); opacity: 0; animation: fadeUp .9s var(--ease) 1s forwards }
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px) } to { opacity: 1; transform: none } }
.pl-foot { position: absolute; left: var(--gut); right: var(--gut); bottom: 40px; display: flex; align-items: center; gap: 24px }
.pl-count { font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--accent); min-width: 110px }
.pl-bar { flex: 1; height: 1px; background: var(--line-light); overflow: hidden }
.pl-bar i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50% }

/* =====================================================================
   ANASAYFA
   ===================================================================== */
/* HERO */
.hero { position: relative; min-height: 100vh; min-height: 100svh; padding: calc(var(--top-h) + 40px) 0 90px; display: flex; align-items: center; overflow: hidden; background: var(--wine-950) }
.hero-bg { position: absolute; inset: 0; pointer-events: none }
.hero-glow { position: absolute; border-radius: 50% }
.hero-glow.g1 { width: 1100px; height: 1100px; right: -300px; top: -380px; background: radial-gradient(circle, rgba(176, 138, 62, .55), transparent 62%) }
.hero-glow.g2 { width: 900px; height: 900px; left: -380px; bottom: -520px; background: radial-gradient(circle, rgba(232, 208, 150, .45), transparent 64%) }
.hero-lines { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(184, 146, 70, .06) 1px, transparent 1px); background-size: calc(100% / 12) 100%; opacity: .8 }
.hero-outline { position: absolute; left: 0; right: 0; bottom: 6%; overflow: hidden; opacity: .9 }
.ho-track { display: flex; width: max-content; animation: marquee 60s linear infinite }
.ho-track span { font-family: var(--serif); font-size: clamp(120px, 17vw, 260px); line-height: 1.1; padding: 0 .3em; color: transparent; -webkit-text-stroke: 1px rgba(184, 146, 70, .16); white-space: nowrap }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center }
.tag { display: inline-flex; align-items: center; gap: 12px; font-size: 12.5px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--blush); margin-bottom: 26px }
.tag::before { content: ""; width: 8px; height: 8px; border: 1px solid var(--blush); transform: rotate(45deg) }
.hero-title { max-width: 720px }
.hero-p { margin-top: 28px; max-width: 540px; font-size: 17.5px; color: var(--on-dark-2); line-height: 1.75 }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px }
.hero-trust { display: flex; flex-wrap: wrap; margin-top: 50px; border-top: 1px solid var(--line-dark) }
.hero-trust li { flex: 1; min-width: 130px; padding: 20px 20px 0 0; margin-right: 20px; position: relative }
.hero-trust li + li { padding-left: 20px; border-left: 1px solid var(--line-dark) }
.hero-trust b { display: block; font-family: var(--serif); font-weight: 400; font-size: 36px; line-height: 1; color: var(--on-dark) }
.hero-trust span { font-size: 13px; color: var(--on-dark-2) }

/* 5D sahne */
.stage { position: relative; height: clamp(480px, 42vw, 640px); perspective: 1600px }
.stage-inner { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform }
.porcelain { position: absolute; background: linear-gradient(145deg, #fffdf9, var(--porcelain-2)); border-radius: 4px; box-shadow: 0 40px 70px -30px rgba(70, 52, 18, 0.25) }
.pc1 { width: 62%; height: 74%; left: 6%; top: 8%; transform: translateZ(-160px) rotateZ(-5deg) }
.pc2 { width: 44%; height: 50%; right: 0; top: 2%; transform: translateZ(-90px) rotateZ(4deg); background: linear-gradient(145deg, #fbf4e4, #efdfb9) }
.pc3 { width: 38%; height: 30%; left: 0; bottom: 4%; transform: translateZ(-60px) }
.wire { position: absolute; border: 1px solid rgba(184, 146, 70, .45); border-radius: 3px }
.wr1 { inset: 4% 10% 8% 16%; transform: translateZ(-40px) rotateZ(3deg) }
.wr2 { inset: 12% 2% 0 24%; transform: translateZ(60px); border-color: rgba(176, 138, 62, .8) }
.story { position: absolute; left: 20%; top: 12%; width: 62%; height: 74%; transform-style: preserve-3d; transform: translateZ(30px); transition: transform calc(1.3s * var(--t)) var(--ease-io); cursor: pointer }
.story.flipped { transform: translateZ(30px) rotateY(180deg) }
.story-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 12px; border-radius: 6px; background: linear-gradient(145deg, #e2c47c, var(--accent) 40%, #8f6b25); box-shadow: 0 60px 90px -40px rgba(70, 52, 18, 0.41), inset 0 1px 0 rgba(255, 255, 255, .25); overflow: hidden }
.story-face::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(176, 138, 62, .3); border-radius: 3px; pointer-events: none }
.story-face.back { transform: rotateY(180deg) }
.story-face img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px }
.sheen { position: absolute; left: 0; top: 0; width: 70%; height: 70%; margin: -35% 0 0 -35%; border-radius: 50%; background: radial-gradient(circle, rgba(176, 138, 62, .38), rgba(176, 138, 62, .08) 35%, transparent 65%); pointer-events: none; transform: translate(var(--sx, 50%), var(--sy, 40%)); will-change: transform }
.story-face .sheen { position: absolute; width: 60%; height: 60% }
.shard { position: absolute; display: block; transform-style: preserve-3d; animation: floatZ calc(9s / var(--t)) ease-in-out infinite }
.sh1 { width: 60px; height: 60px; left: 6%; top: 12%; background: var(--accent); --z: 140px; clip-path: polygon(50% 0, 100% 100%, 0 100%) }
.sh2 { width: 34px; height: 34px; right: 8%; top: 6%; border: 1px solid var(--blush); --z: 200px; animation-delay: -2s }
.sh3 { width: 90px; height: 12px; right: 2%; bottom: 26%; background: var(--porcelain); --z: 120px; animation-delay: -4s }
.sh4 { width: 22px; height: 22px; left: 14%; bottom: 14%; border-radius: 50%; background: var(--blush); --z: 180px; animation-delay: -1s }
.sh5 { width: 46px; height: 46px; left: 2%; top: 52%; border: 1px solid rgba(176, 138, 62, .6); transform: rotate(45deg); --z: 90px; animation-delay: -3s }
.sh6 { width: 14px; height: 70px; right: 20%; top: 0; background: var(--deep); --z: 240px; animation-delay: -5s }
.sh7 { width: 70px; height: 70px; right: 14%; bottom: 4%; border-radius: 50%; border: 1px solid var(--accent); --z: 160px; animation-delay: -6s }
@keyframes floatZ { 0%, 100% { transform: translateZ(var(--z)) translateY(0) rotate(0) } 50% { transform: translateZ(var(--z)) translateY(calc(-18px * var(--m))) rotate(8deg) } }
.glass-card { position: absolute; left: 0; bottom: 10%; width: min(300px, 70%); display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: 12px; background: linear-gradient(140deg, rgba(176, 138, 62, .82), rgba(245, 236, 215, .92)); border: 1px solid rgba(184, 146, 70, .35); box-shadow: 0 30px 60px -20px rgba(70, 52, 18, 0.32), inset 0 1px 0 rgba(255, 255, 255, .15); transform: translateZ(140px); transition: border-color .4s }
.glass-card:hover { border-color: var(--blush) }
.gc-ic { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--porcelain); color: var(--accent) }
.glass-card b { display: block; font-family: var(--serif); font-weight: 400; font-size: 22px; line-height: 1.2 }
.glass-card small { font-size: 12.5px; color: var(--on-dark-2); line-height: 1.5; display: block; margin-top: 4px }
.stage-shadow { position: absolute; left: 12%; right: 6%; bottom: -40px; height: 80px; background: radial-gradient(ellipse at center, rgba(70, 52, 18, 0.25), transparent 70%); pointer-events: none }
.scroll-hint { position: absolute; left: 50%; bottom: 26px; width: 26px; height: 42px; margin-left: -13px; border: 1px solid var(--line-dark); border-radius: 20px }
.scroll-hint i { position: absolute; left: 50%; top: 8px; width: 2px; height: 8px; margin-left: -1px; background: var(--blush); border-radius: 2px; animation: hint 1.8s var(--ease) infinite }
@keyframes hint { 0% { transform: translateY(0); opacity: 1 } 100% { transform: translateY(14px); opacity: 0 } }

/* ŞERİTLER */
.strips { position: relative; background: var(--porcelain); overflow: hidden }
.strip { overflow: hidden; padding: 20px 0 }
.strip-dark { background: var(--accent); color: var(--on-dark) }
.strip-light { background: var(--porcelain); color: var(--accent); border-bottom: 1px solid var(--line-light) }
.strip-track { display: flex; width: max-content; animation: marquee 50s linear infinite }
.strip-track.rev { animation-direction: reverse; animation-duration: 60s }
.strip-track span { display: inline-flex; align-items: center; gap: 40px; padding-right: 40px; font-family: var(--serif); font-size: clamp(20px, 2.1vw, 30px); line-height: 1.3; white-space: nowrap }
.strip-track span::after { content: "✦"; font-size: .6em; opacity: .7 }

/* 5D HİZMET EVRENİ */
.universe { position: relative; background: var(--wine-950) }
.uni-pin { position: relative; height: 380vh }
.uni-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; perspective: 1800px; perspective-origin: 50% 40% }
.uni-head { position: relative; z-index: 3; padding-top: calc(var(--top-h) - 10px); display: grid; grid-template-columns: 1fr 1fr; align-items: end; column-gap: 40px }
.uni-head .eyebrow { grid-column: 1 / -1; margin-bottom: 14px }
.uni-head .sec-title { font-size: clamp(38px, 4.6vw, 70px) }
.uni-head p { color: var(--on-dark-2); max-width: 420px; justify-self: end }
.uni-floor { position: absolute; left: -50%; right: -50%; bottom: -10%; height: 70%; transform-origin: 50% 100%; transform: rotateX(78deg); background-image: linear-gradient(rgba(184, 146, 70, .13) 1px, transparent 1px), linear-gradient(90deg, rgba(184, 146, 70, .13) 1px, transparent 1px); background-size: 80px 80px; pointer-events: none }
.uni-floor::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, transparent, var(--wine-950) 85%) }
.uni-beam { position: absolute; left: 50%; top: -20%; width: 70%; height: 110%; margin-left: -35%; background: radial-gradient(ellipse at 50% 0%, rgba(184, 146, 70, .22), rgba(176, 138, 62, .1) 35%, transparent 65%); pointer-events: none }
.uni-stage { position: absolute; left: 0; right: 0; top: 0; bottom: 0; transform-style: preserve-3d; pointer-events: none }
.uni-cards { position: absolute; left: 50%; top: 62%; width: 0; height: 0; transform-style: preserve-3d }
.u-card { position: absolute; left: calc(var(--cw, 250px) / -2); top: calc(var(--ch, 420px) / -2); width: var(--cw, 250px); height: var(--ch, 420px); transform-style: preserve-3d; pointer-events: auto; will-change: transform }
.u-tilt { position: relative; width: 100%; height: 100%; border-radius: 8px; overflow: hidden; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease); transform-style: preserve-3d }
.u-tilt::before { content: ""; position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent 0 55%, var(--blush) 70%, var(--accent) 80%, transparent 90%); opacity: 0; transition: opacity .4s }
.u-card:hover .u-tilt::before { opacity: 1; animation: spin 3.2s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }
.u-body { position: absolute; inset: 1px; border-radius: 7px; padding: 20px; display: flex; flex-direction: column; background: linear-gradient(165deg, rgba(176, 138, 62, .92), rgba(250, 244, 230, .96) 45%, rgba(38, 29, 12, .98)); border: 1px solid rgba(184, 146, 70, .22); transform-style: preserve-3d }
.u-body::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, rgba(255, 255, 255, .12), transparent 38%); pointer-events: none }
.u-num { font-family: var(--serif); font-size: 58px; line-height: .9; color: transparent; -webkit-text-stroke: 1px rgba(184, 146, 70, .7) }
.u-body h3 { font-size: 28px; margin: 10px 0 6px; color: var(--on-dark) }
.u-body p { font-size: 13px; line-height: 1.55; color: var(--on-dark-2) }
.u-media { margin-top: auto; background: var(--porcelain); padding: 6px; border-radius: 5px; transition: transform .6s var(--ease); box-shadow: 0 20px 30px -18px rgba(70, 52, 18, 0.32) }
.u-media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 3px }
.u-card:hover .u-media { transform: translateZ(30px) translateY(-6px) }
.u-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--blush) }
.u-link .ic { width: 16px; height: 16px; transition: transform .5s var(--ease) }
.u-card:hover .u-link .ic { transform: translateX(4px) }
.u-reflect { position: absolute; left: 6%; right: 6%; top: 100%; height: 60px; margin-top: 8px; background: radial-gradient(ellipse at 50% 0%, rgba(176, 138, 62, .55), transparent 70%); opacity: .8; pointer-events: none }

/* ÖNE ÇIKAN SEKME */
.feature { background: var(--porcelain); color: var(--on-light); padding: clamp(90px, 11vw, 160px) 0 }
.tabs { position: relative; display: flex; justify-content: center; gap: 4px; width: fit-content; max-width: 100%; margin: 0 auto clamp(40px, 5vw, 70px); padding: 6px; border-radius: 60px; border: 1px solid var(--line-light); background: #fff; overflow-x: auto; scrollbar-width: none }
.tabs::-webkit-scrollbar { display: none }
.tab { position: relative; z-index: 2; height: 46px; padding: 0 24px; border-radius: 40px; font-size: 14px; font-weight: 600; color: var(--on-light-2); white-space: nowrap; transition: color .4s }
.tab.active { color: var(--on-dark) }
.tab-ind { position: absolute; z-index: 1; left: 0; top: 6px; height: 46px; width: 100px; border-radius: 40px; background: var(--accent); transform-origin: 0 50%; transition: transform .6s var(--ease) }
.tab-panel { display: none; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center }
.tab-panel.active { display: grid; animation: panelIn calc(.9s * var(--t)) var(--ease) }
@keyframes panelIn { from { opacity: 0; transform: translateY(calc(24px * var(--m))) } to { opacity: 1; transform: none } }
.pedestal { position: relative; padding: 20px 20px 70px; perspective: 1400px }
.ped-ring { position: absolute; left: 8%; right: 8%; bottom: 10px; height: 110px; border-radius: 50%; border: 1px solid var(--accent); box-shadow: 0 0 0 14px rgba(176, 138, 62, .06), 0 0 0 28px rgba(176, 138, 62, .04) }
.ped-base { position: absolute; left: 16%; right: 16%; bottom: 36px; height: 60px; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, var(--wine-900), var(--wine-950) 70%); box-shadow: 0 30px 40px -20px rgba(38, 29, 12, .7) }
.ped-flip { position: relative; z-index: 2; aspect-ratio: 4/3.2; transform-style: preserve-3d; transition: transform calc(1.1s * var(--t)) var(--ease-io) }
.pedestal:hover .ped-flip { transform: rotateY(180deg) }
.pf { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 10px; background: var(--wine-900); border-radius: 8px; box-shadow: var(--sh-card) }
.pf.back { transform: rotateY(180deg) }
.pf img { width: 100%; height: 100%; object-fit: cover; border-radius: 4px }
.feat-title { font-size: clamp(40px, 4.4vw, 64px); color: var(--on-light); margin-bottom: 18px }
.feat-content > p { color: var(--on-light-2); font-size: 16.5px }
.benefits { display: grid; gap: 14px; margin: 26px 0 32px }
.benefits li { display: flex; gap: 14px; align-items: flex-start; padding-bottom: 14px; border-bottom: 1px solid var(--line-light); font-size: 15px; color: var(--on-light) }
.benefits li b { font-weight: 600 }
.benefits .ic { width: 20px; height: 20px; color: var(--accent); margin-top: 3px }
.benefits-2 { grid-template-columns: 1fr 1fr; column-gap: 30px }
.feat-cta { display: flex; flex-wrap: wrap; gap: 12px }

/* YATAY GALERİ */
.hgal { position: relative; background: var(--wine-900) }
.hg-pin { position: relative; height: 300vh }
.hg-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; gap: 40px; padding-top: 40px }
.hg-sticky::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 0%, rgba(176, 138, 62, .45), transparent 55%); pointer-events: none }
.hg-head { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 30px }
.hg-head .sec-title { font-size: clamp(38px, 4.6vw, 70px) }
.hg-meta { display: flex; align-items: center; gap: 22px; min-width: 320px }
.hg-count { font-family: var(--serif); font-size: 30px; color: var(--on-dark-2); white-space: nowrap }
.hg-count b { font-weight: 400; color: var(--on-dark) }
.hg-bar { flex: 1; height: 1px; background: var(--line-dark); overflow: hidden }
.hg-bar i { display: block; height: 100%; background: var(--blush); transform: scaleX(0); transform-origin: 0 50% }
.hg-meta .link-line { color: var(--blush); white-space: nowrap }
.hg-viewport { position: relative; perspective: 1600px }
.hg-track { display: flex; gap: 34px; padding: 0 calc(50vw - clamp(280px, 28vw, 440px) / 2); width: max-content; transform-style: preserve-3d; will-change: transform }
.hg-card { width: clamp(280px, 28vw, 440px); flex: none; transform-style: preserve-3d; will-change: transform }
.hg-card a { display: block; background: var(--porcelain); color: var(--on-light); border-radius: 8px; padding: 10px; box-shadow: var(--sh-card) }
.hg-media { overflow: hidden; border-radius: 4px; aspect-ratio: 4/3 }
.hg-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease) }
.hg-card a:hover .hg-media img { transform: scale(1.06) }
.hg-info { padding: 18px 10px 10px }
.hg-info h3 { font-size: 30px; margin: 12px 0 6px }
.hg-info p { font-size: 13.5px; color: var(--on-light-2) }

/* VİDEO */
.vscale { background: var(--porcelain) }
.vs-pin { position: relative; height: 240vh }
.vs-sticky { position: sticky; top: 0; height: 100vh; display: grid; place-items: center; overflow: hidden }
.vs-card { position: relative; width: calc(100vw - 40px); height: calc(100vh - 40px); border-radius: 18px; overflow: hidden; background: #fff; border: 10px solid #fff; box-shadow: 0 40px 100px -40px rgba(38, 29, 12, .5); transform: scale(var(--s, .42)); will-change: transform }
.vs-card video { width: 100%; height: 100%; object-fit: cover; border-radius: 10px }
.vs-shade { position: absolute; inset: 0; background: radial-gradient(ellipse at 30% 70%, rgba(38, 29, 12, .75), rgba(38, 29, 12, .2) 60%, transparent); border-radius: 10px }
.vs-title { position: absolute; left: clamp(24px, 5vw, 80px); bottom: clamp(24px, 6vw, 90px); color: var(--on-dark); opacity: 0; transform: translateY(40px); transition: opacity .8s var(--ease), transform 1s var(--ease) }
.vs-title.on { opacity: 1; transform: none }
.vs-title h2 { font-size: clamp(46px, 7vw, 96px) }
.vs-title h2 em { color: var(--blush) }

/* SÜREÇ */
.process { background: var(--porcelain); color: var(--on-light); padding: clamp(90px, 11vw, 150px) 0 }
.process-tight { background: var(--porcelain-2) }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; counter-reset: s }
.step { position: relative; padding: 34px 28px 32px; background: #fff; border: 1px solid var(--line-light); border-radius: 8px; transition: transform .6s var(--ease), box-shadow .6s var(--ease); perspective: 600px }
.step::before { content: ""; position: absolute; left: 28px; right: 28px; top: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; transition: transform .8s var(--ease) }
.step:hover { transform: translateY(-8px); box-shadow: var(--sh-soft) }
.step:hover::before { transform: none }
.step-n { font-family: var(--serif); font-size: 64px; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--accent) }
.step-ic { width: 58px; height: 58px; margin: 22px 0 22px; border-radius: 50%; border: 1px solid var(--line-light); display: grid; place-items: center; color: var(--accent); transition: transform .8s var(--ease) }
.step-ic .ic { width: 26px; height: 26px }
.step:hover .step-ic { transform: rotateY(180deg) }
.step h3 { font-size: 28px; margin-bottom: 8px }
.step p { font-size: 14.5px; color: var(--on-light-2) }
.steps-compact .step { padding: 26px 22px }
.steps-compact .step-n { font-size: 48px }

/* HAKKIMIZDA ÖNİZLEME */
.about-pre { background: var(--porcelain-2); color: var(--on-light); padding: clamp(90px, 11vw, 160px) 0; overflow: hidden }
.ap-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: center }
.word-quote { font-family: var(--serif); font-size: clamp(32px, 3.8vw, 58px); line-height: 1.18; color: var(--accent) }
.word-quote.xl { font-size: clamp(36px, 4.8vw, 72px) }
.word-quote .w { opacity: .16; transition: opacity .5s var(--ease) }
.word-quote .w.on { opacity: 1 }
.ap-lead { margin: 28px 0; font-size: 18px; color: var(--on-light-2) }
.collage { position: relative; height: clamp(440px, 40vw, 600px) }
.cl { position: absolute; padding: 8px; background: #fff; border-radius: 6px; box-shadow: var(--sh-card) }
.cl img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px }
.cl1 { left: 0; top: 6%; width: 62%; height: 58% }
.cl2 { right: 0; top: 0; width: 42%; height: 40%; border: 1px solid var(--accent) }
.cl3 { right: 6%; bottom: 0; width: 58%; height: 46%; background: var(--wine-900) }
.cl-frame { position: absolute; left: 12%; top: 16%; width: 70%; height: 72%; border: 1px solid var(--accent); border-radius: 4px; transform: translate(-14px, 14px); z-index: -1 }
.collage:hover .cl1 { transform: translate(-6px, -6px) }
.cl { transition: transform .9s var(--ease), opacity 1s var(--ease) }

/* TEKLİF ALANI */
.quote-sec { background: var(--wine-950); padding: clamp(90px, 11vw, 160px) 0; position: relative; overflow: hidden }
.quote-sec::before { content: ""; position: absolute; width: 1200px; height: 1200px; left: -500px; top: -500px; border-radius: 50%; background: radial-gradient(circle, rgba(176, 138, 62, .4), transparent 60%) }
.qs-grid { position: relative; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 90px); align-items: center }
.qs-side .sec-title { color: var(--on-dark); font-size: clamp(38px, 4.6vw, 70px) }
.qs-side > p { color: var(--on-dark-2); margin: 20px 0 34px; font-size: 17px }
.qs-side .eyebrow { color: var(--blush) }
.qs-lines a { display: flex; align-items: center; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line-dark); transition: transform .5s var(--ease) }
.qs-lines a:last-child { border-bottom: 1px solid var(--line-dark) }
.qs-lines a:hover { transform: translateX(8px) }
.qs-lines .ic { width: 22px; height: 22px; color: var(--blush) }
.qs-lines small { display: block; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--on-dark-3) }

/* ---------- FOOTER ---------- */
.footer { position: relative; background: var(--wine-950); color: var(--on-dark); padding: clamp(80px, 9vw, 130px) 0 30px; overflow: hidden; border-top: 1px solid var(--line-dark) }
.footer::before { content: ""; position: absolute; width: 1000px; height: 1000px; right: -400px; top: -500px; border-radius: 50%; background: radial-gradient(circle, rgba(176, 138, 62, .35), transparent 62%); pointer-events: none }
.ft-top { position: relative; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px }
.ft-brand img { width: 150px; margin-bottom: 20px }
.ft-brand p { color: var(--on-dark-2); max-width: 320px; font-size: 14.5px }
.ft-col h3 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--blush); margin-bottom: 20px }
.ft-col a, .ft-col span { display: flex; align-items: center; gap: 10px; color: var(--on-dark-2); font-size: 14.5px; padding: 6px 0; transition: color .3s, transform .4s var(--ease) }
.ft-col a:hover { color: var(--on-dark); transform: translateX(4px) }
.ft-col .ic { width: 16px; height: 16px; color: var(--blush) }
.ft-social { display: flex; gap: 10px; margin-top: 18px }
.ft-social a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-dark); display: grid; place-items: center; padding: 0; transition: background .4s, border-color .4s }
.ft-social a:hover { background: var(--accent); border-color: var(--accent); transform: none }
.ft-social .ic { width: 18px; height: 18px; color: var(--on-dark) }
.ft-giant { position: relative; margin: clamp(50px, 7vw, 90px) 0 20px; line-height: .9; user-select: none }
.ft-giant-base, .ft-giant-fill span { display: block; font-family: var(--serif); font-size: clamp(40px, 10.6vw, 190px); letter-spacing: -.01em; white-space: nowrap; text-align: center; padding: .08em 0 .1em }
.ft-giant-base { color: transparent; -webkit-text-stroke: 1px rgba(184, 146, 70, .25) }
.ft-giant-fill { position: absolute; inset: 0; overflow: hidden; transform: translateX(calc(-100% + var(--fp, 0) * 100%)) }
.ft-giant-fill span { transform: translateX(calc(100% - var(--fp, 0) * 100%)); background: linear-gradient(90deg, var(--accent), var(--blush) 60%, var(--porcelain)); -webkit-background-clip: text; background-clip: text; color: transparent }
.ft-bottom { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--line-dark); font-size: 13px; color: var(--on-dark-3) }
.ft-legal { display: flex; gap: 20px; flex-wrap: wrap }
.ft-legal a, .ft-legal button { color: var(--on-dark-2); font-size: 13px; transition: color .3s }
.ft-legal a:hover, .ft-legal button:hover { color: var(--on-dark) }
.ft-credit { width: 100%; text-align: center; font-size: 12px; margin-top: 10px }
.ft-credit a { color: var(--blush); border-bottom: 1px dashed var(--blush) }

/* =====================================================================
   İÇ SAYFALAR
   ===================================================================== */
.page-hero, .d-hero { position: relative; padding: calc(var(--top-h) + clamp(60px, 8vw, 120px)) 0 clamp(70px, 8vw, 120px); background: var(--wine-950); overflow: hidden }
.ph-bg { position: absolute; inset: 0; pointer-events: none }
.ph-lines { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(184, 146, 70, .06) 1px, transparent 1px); background-size: calc(100% / 12) 100% }
.ph-glow { position: absolute; width: 1100px; height: 1100px; right: -380px; top: -460px; border-radius: 50%; background: radial-gradient(circle, rgba(176, 138, 62, .55), transparent 62%) }
.ph-inner { position: relative }
.ph-title { max-width: 1100px }
.ph-lead { margin-top: 26px; max-width: 620px; font-size: 18px; color: var(--on-dark-2) }
.crumb { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--on-dark-3); margin-bottom: 30px }
.crumb a { color: var(--on-dark-2) }
.crumb a:hover { color: var(--blush) }
.crumb b { font-weight: 500; color: var(--blush) }

/* hizmetler listesi */
.svc-list { background: var(--porcelain); color: var(--on-light); padding: clamp(60px, 8vw, 110px) 0 }
.svc-layout { display: grid; grid-template-columns: 290px 1fr; gap: clamp(30px, 4vw, 60px); align-items: start }
.svc-aside { position: sticky; top: 100px }
.aside-title { font-size: 30px; margin-bottom: 16px }
.acc-item { border-top: 1px solid var(--line-light) }
.acc-item:last-child { border-bottom: 1px solid var(--line-light) }
.acc-q { width: 100%; display: flex; align-items: center; gap: 12px; padding: 18px 2px; font-size: 15px; font-weight: 600; text-align: left }
.acc-q span { flex: 1 }
.acc-q em { font-style: normal; font-size: 12px; color: var(--accent); background: rgba(176, 138, 62, .08); border-radius: 20px; padding: 2px 9px }
.acc-q i, .faq-q i { position: relative; width: 14px; height: 14px; flex: none }
.acc-q i::before, .acc-q i::after, .faq-q i::before, .faq-q i::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--accent); transition: transform .5s var(--ease) }
.acc-q i::after, .faq-q i::after { transform: rotate(90deg) }
.acc-item.open .acc-q i::after, .faq-item.open .faq-q i::after { transform: rotate(0) }
.acc-a, .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s var(--ease) }
.acc-item.open .acc-a, .faq-item.open .faq-a { grid-template-rows: 1fr }
.acc-a > div, .faq-a > div { overflow: hidden }
.acc-a ul { padding: 0 0 16px }
.acc-a a { display: flex; justify-content: space-between; align-items: center; padding: 9px 12px; border-radius: 8px; font-size: 14.5px; color: var(--on-light-2); transition: background .3s, color .3s }
.acc-a a:hover { background: #fff; color: var(--accent) }
.acc-a .ic { width: 15px; height: 15px }
.filters { margin-bottom: 34px }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px }
.chip-btn { height: 42px; padding: 0 18px; border-radius: 30px; border: 1px solid var(--line-light); background: #fff; font-size: 13.5px; font-weight: 600; color: var(--on-light-2); transition: background .3s, color .3s, border-color .3s }
.chip-btn:hover { border-color: var(--accent); color: var(--accent) }
.chip-btn.active { background: var(--accent); border-color: var(--accent); color: var(--on-dark) }
.filter-row { display: grid; grid-template-columns: 1fr 1.3fr; gap: 14px }
.fg-inline .ic-plus, .fg-search .ic { position: absolute; right: 18px; top: 20px; width: 18px; height: 18px; color: var(--accent); pointer-events: none }
.fg-inline select + label { transform: translateY(-11px) scale(.76); color: var(--accent); font-weight: 600 }
.f-count { margin-top: 14px; font-size: 13.5px; color: var(--on-light-2) }
.f-count b { color: var(--accent) }
.f-empty { padding: 40px; text-align: center; border: 1px dashed var(--line-light); border-radius: 10px; color: var(--on-light-2) }
.f-empty a { color: var(--accent); font-weight: 600 }
.p-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; perspective: 1600px }
.p-grid-3 { grid-template-columns: repeat(3, 1fr) }
.p-card { transform-style: preserve-3d }
.p-card[hidden] { display: none }
.p-link { display: block; height: 100%; background: #fff; border: 1px solid var(--line-light); border-radius: 10px; padding: 10px; transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s }
.p-link:hover { box-shadow: var(--sh-soft); border-color: rgba(176, 138, 62, .35) }
.p-media { position: relative; overflow: hidden; border-radius: 6px; aspect-ratio: 16/11; background: var(--wine-900) }
.p-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease) }
.p-link:hover .p-media img { transform: scale(1.07) }
.p-num { position: absolute; right: 14px; bottom: 6px; font-family: var(--serif); font-size: 56px; line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(176, 138, 62, .9) }
.p-body { padding: 20px 12px 14px }
.p-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px }
.p-body h3 { font-size: 32px; margin-bottom: 6px; color: var(--on-light) }
.p-body p { font-size: 14.5px; color: var(--on-light-2) }
.p-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 13.5px; font-weight: 700; color: var(--accent); opacity: 0; transform: translateY(8px); transition: opacity .5s var(--ease), transform .5s var(--ease) }
.p-cta .ic { width: 16px; height: 16px }
.p-link:hover .p-cta, .p-link:focus .p-cta { opacity: 1; transform: none }

/* CTA bandı */
.cta-band { background: var(--accent); color: var(--on-dark); padding: clamp(60px, 8vw, 110px) 0; position: relative; overflow: hidden }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 0%, rgba(176, 138, 62, .16), transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(38, 29, 12, .5), transparent 55%) }
.cta-inner { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap }
.cta-inner .sec-title { font-size: clamp(36px, 4.4vw, 64px); max-width: 720px }
.cta-inner p { color: var(--on-dark-2); margin-top: 14px; max-width: 560px }
.cta-inner .eyebrow { color: var(--blush-soft) }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap }

/* hizmet detay */
.d-hero-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center }
.d-tags { display: flex; gap: 8px; margin-bottom: 22px }
.d-visual { position: relative; padding: 30px 30px 30px 0 }
.porcelain-frame { position: relative; z-index: 2; background: var(--porcelain); padding: 12px; border-radius: 8px; box-shadow: var(--sh-card) }
.d-frame { border: 1px solid var(--accent) }
.d-layer { position: absolute; border-radius: 6px }
.dl1 { inset: 0 0 60px 60px; border: 1px solid var(--blush); opacity: .5 }
.dl2 { left: 40px; right: -20px; top: 60px; bottom: -10px; background: var(--deep); z-index: 1 }
.d-num { position: absolute; right: -10px; top: -30px; z-index: 3; font-family: var(--serif); font-size: clamp(90px, 10vw, 150px); line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--blush) }
.zoom { position: relative; overflow: hidden; border-radius: 4px; aspect-ratio: 4/3.1; cursor: zoom-in }
.zoom > img { width: 100%; height: 100%; object-fit: cover }
.zoom-lens { position: absolute; left: 0; top: 0; width: 180px; height: 180px; margin: -90px 0 0 -90px; border-radius: 50%; border: 2px solid var(--porcelain); box-shadow: 0 10px 30px rgba(70, 52, 18, 0.2); background-repeat: no-repeat; opacity: 0; transition: opacity .3s; pointer-events: none; will-change: transform }
.zoom.lens-on .zoom-lens { opacity: 1 }
.zoom-btn { position: absolute; right: 14px; bottom: 14px; width: 46px; height: 46px; border-radius: 50%; background: var(--porcelain); color: var(--accent); display: grid; place-items: center; box-shadow: var(--sh-soft) }
.d-main { background: var(--porcelain); color: var(--on-light); padding: clamp(60px, 8vw, 110px) 0 }
.d-layout { display: grid; grid-template-columns: 1fr 380px; gap: clamp(30px, 5vw, 70px); align-items: start }
.tabs-light { margin: 0 0 40px; justify-content: flex-start }
.d-intro { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 32px); line-height: 1.35; color: var(--on-light); margin-bottom: 20px }
.d-h { font-size: 34px; margin: 34px 0 6px; color: var(--on-light) }
.tab-panel p { color: var(--on-light-2) }
.d-content .tab-panel.active { display: block }
.d-content .steps { grid-template-columns: 1fr 1fr }
.d-aside { position: sticky; top: 100px }
.quote-card { background: var(--wine-900); color: var(--on-dark); border-radius: var(--r-lg); padding: 32px; box-shadow: var(--sh-card); display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden }
.quote-card::before { content: ""; position: absolute; width: 400px; height: 400px; right: -200px; top: -200px; border-radius: 50%; background: radial-gradient(circle, rgba(176, 138, 62, .7), transparent 65%) }
.quote-card > * { position: relative }
.quote-card .eyebrow { color: var(--blush); margin-bottom: 0 }
.qc-title { font-size: 40px }
.quote-card p { color: var(--on-dark-2); font-size: 14.5px }
.qc-list { display: grid; gap: 10px; padding: 10px 0 8px; border-top: 1px solid var(--line-dark) }
.qc-list li { display: flex; gap: 10px; align-items: center; font-size: 14px }
.qc-list .ic { width: 18px; height: 18px; color: var(--blush) }
.qc-phone { display: flex; justify-content: center; gap: 10px; align-items: center; font-size: 14px; color: var(--on-dark-2); padding-top: 4px }
.qc-phone .ic { width: 16px; height: 16px }

/* FAQ */
.faq { display: grid; gap: 10px }
.faq-item { background: #fff; border: 1px solid var(--line-light); border-radius: 10px; transition: border-color .4s, box-shadow .4s }
.faq-item.open { border-color: rgba(176, 138, 62, .35); box-shadow: var(--sh-soft) }
.faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 24px; text-align: left; font-size: 16px; font-weight: 600; color: var(--on-light) }
.faq-a p { padding: 0 24px 22px; color: var(--on-light-2); font-size: 15px }
.faq-a a { color: var(--accent); font-weight: 600 }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 1600; background: rgba(38, 29, 12, .94); display: grid; place-items: center; padding: 60px 20px; opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s }
.lightbox.open { opacity: 1; visibility: visible; transition: opacity .5s }
.lightbox figure { max-width: min(1200px, 100%); transform: scale(.94); transition: transform .7s var(--ease) }
.lightbox.open figure { transform: none }
.lightbox img { max-height: 80vh; width: auto; margin: 0 auto; border: 10px solid var(--porcelain); border-radius: 6px }
.lightbox figcaption { text-align: center; margin-top: 14px; font-family: var(--serif); font-size: 26px }
.lb-close { position: absolute; top: 20px; right: 20px }

/* galeri */
.hgal-page .hg-pin { height: 300vh }
.g-grid-sec { background: var(--porcelain); color: var(--on-light); padding: clamp(80px, 10vw, 140px) 0 }
.g-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px }
.g-item { background: #fff; padding: 8px; border-radius: 8px; border: 1px solid var(--line-light) }
.g-item.g1 { margin-top: 40px }
.g-open { display: block; width: 100%; overflow: hidden; border-radius: 4px; aspect-ratio: 4/5 }
.g-open img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease) }
.g-open:hover img { transform: scale(1.06) }
.g-item figcaption { display: flex; gap: 12px; align-items: baseline; padding: 14px 8px 6px; font-family: var(--serif); font-size: 24px }
.g-item figcaption span { font-family: var(--sans); font-size: 12px; color: var(--accent); font-weight: 700 }
.g-video { background: var(--wine-950); padding: clamp(80px, 10vw, 140px) 0 }
.gv-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center }
.gv-media video { width: 100%; border-radius: 4px; aspect-ratio: 16/10; object-fit: cover }
.gv-text .sec-title { color: var(--on-dark); font-size: clamp(36px, 4.4vw, 64px) }
.gv-text p { color: var(--on-dark-2); margin: 18px 0 30px }
.gv-text .eyebrow { color: var(--blush) }

/* hakkımızda */
.ab-intro { background: var(--porcelain); color: var(--on-light); padding: clamp(80px, 10vw, 140px) 0 }
.ab-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 100px); align-items: center }
.ab-body { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 34px); line-height: 1.4; color: var(--on-light) }
.feat-list { display: grid; gap: 12px; margin-top: 34px }
.feat-list li { display: flex; gap: 14px; align-items: center; padding: 16px 18px; background: #fff; border: 1px solid var(--line-light); border-radius: 8px; font-weight: 500; font-size: 15px }
.feat-list .ic { width: 20px; height: 20px; color: var(--accent) }
.board { position: relative; height: clamp(460px, 44vw, 640px) }
.bd { position: absolute; padding: 8px; background: #fff; border-radius: 6px; box-shadow: var(--sh-card); transition: transform .9s var(--ease), opacity 1s var(--ease) }
.bd img, .bd video { width: 100%; height: 100%; object-fit: cover; border-radius: 3px }
.bd1 { left: 0; top: 0; width: 56%; height: 52% }
.bd2 { right: 0; top: 14%; width: 46%; height: 42%; background: var(--wine-900) }
.bd3 { left: 12%; bottom: 0; width: 60%; height: 42%; border: 1px solid var(--accent) }
.bd-logo { position: absolute; right: 2%; bottom: 6%; width: 30%; padding: 20px; background: var(--porcelain-2); border-radius: 6px; border: 1px solid var(--line-light) }
.big-quote { background: var(--porcelain-2); color: var(--on-light); padding: clamp(90px, 11vw, 170px) 0 }
.mv { background: var(--porcelain); padding: clamp(80px, 10vw, 140px) 0; color: var(--on-light) }
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px }
.mv-card { position: relative; overflow: hidden; padding: clamp(32px, 4vw, 54px); border-radius: var(--r-lg); background: #fff; border: 1px solid var(--line-light) }
.mv-card.dark { background: var(--wine-900); color: var(--on-dark); border-color: transparent }
.mv-card h2 { font-size: clamp(36px, 3.6vw, 52px); margin: 20px 0 14px }
.mv-card p { color: var(--on-light-2); position: relative; z-index: 1 }
.mv-card.dark p { color: var(--on-dark-2) }
.mv-big { position: absolute; right: 10px; bottom: -60px; font-family: var(--serif); font-style: italic; font-size: 260px; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--line-light) }
.mv-card.dark .mv-big { -webkit-text-stroke-color: var(--line-dark) }
.t-ic { width: 60px; height: 60px; border-radius: 50%; border: 1px solid var(--line-light); display: grid; place-items: center; color: var(--accent) }
.mv-card.dark .t-ic { border-color: var(--line-dark); color: var(--blush) }
.t-ic .ic { width: 26px; height: 26px }
.trust { background: var(--porcelain-2); color: var(--on-light); padding: clamp(80px, 10vw, 140px) 0 }
.t-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px }
.t-card { background: #fff; border: 1px solid var(--line-light); border-radius: 8px; padding: 30px 26px; transition: transform .6s var(--ease), box-shadow .6s var(--ease) }
.t-card:hover { transform: translateY(-8px); box-shadow: var(--sh-soft) }
.t-card h3 { font-size: 28px; margin: 22px 0 8px }
.t-card p { font-size: 14.5px; color: var(--on-light-2) }
.t-card .link-line { margin-top: 14px; color: var(--accent) }

/* iletişim */
.c-cards-sec { background: var(--porcelain); color: var(--on-light); padding: clamp(60px, 8vw, 100px) 0 0 }
.c-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px }
.c-card:nth-child(2) { grid-column: span 2 }
.c-card { background: #fff; border: 1px solid var(--line-light); border-radius: 10px; padding: 26px 22px; transition: transform .6s var(--ease), box-shadow .6s var(--ease), border-color .5s }
.c-card:hover { transform: translateY(-6px); box-shadow: var(--sh-soft); border-color: rgba(176, 138, 62, .35) }
.c-ic { width: 50px; height: 50px; border-radius: 50%; background: var(--wine-900); color: var(--blush); display: grid; place-items: center; margin-bottom: 20px }
.c-ic .ic { width: 22px; height: 22px }
.c-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 6px }
.c-val { font-size: 15px; font-weight: 600; word-break: break-word; line-height: 1.5 }
.c-val small { font-weight: 400; color: var(--on-light-2) }
.c-val a:hover { color: var(--accent) }
.c-main { background: var(--porcelain); color: var(--on-light); padding: clamp(40px, 6vw, 70px) 0 clamp(80px, 10vw, 130px) }
.c-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; align-items: start }
.c-side { display: grid; gap: 22px }
.wa-card { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; background: var(--wine-900); color: var(--on-dark); border-radius: var(--r-lg); padding: 30px; box-shadow: var(--sh-card) }
.wa-card .btn { grid-column: 1 / -1 }
.wa-ic { width: 60px; height: 60px; border-radius: 50%; background: var(--accent); display: grid; place-items: center }
.wa-ic .ic-wa { width: 28px; height: 28px }
.wa-card h2 { font-size: 32px }
.wa-card p { color: var(--on-dark-2); font-size: 14.5px; margin-top: 6px }
.map-card { position: relative; border-radius: var(--r-lg); overflow: hidden; background: #fff; padding: 8px; border: 1px solid var(--line-light) }
.map-card iframe { display: block; width: 100%; height: 320px; border: 0; border-radius: 8px }
.map-tag { position: absolute; left: 22px; bottom: 22px; display: inline-flex; gap: 8px; align-items: center; padding: 10px 14px; border-radius: 30px; background: var(--wine-900); color: var(--on-dark); font-size: 13px; font-weight: 600 }
.map-tag .ic { width: 16px; height: 16px; color: var(--blush) }
.c-faq { background: var(--porcelain-2); color: var(--on-light); padding: clamp(80px, 10vw, 130px) 0 }

/* yasal */
.legal { background: var(--porcelain); color: var(--on-light); padding: clamp(60px, 8vw, 100px) 0 }
.legal-grid { display: grid; grid-template-columns: 280px 1fr; gap: 40px; align-items: start }
.toc { position: sticky; top: 100px; background: #fff; border: 1px solid var(--line-light); border-radius: 10px; padding: 24px }
.toc h2 { font-size: 26px; margin-bottom: 12px }
.toc a { display: block; padding: 7px 10px; border-radius: 6px; font-size: 14px; color: var(--on-light-2); transition: background .3s, color .3s }
.toc a:hover { background: rgba(176, 138, 62, .07); color: var(--accent) }
.doc { background: #fff; border: 1px solid var(--line-light); border-radius: var(--r-lg); padding: clamp(28px, 4vw, 56px) }
.doc .meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px }
.doc .meta span { font-size: 12px; font-weight: 600; background: rgba(176, 138, 62, .07); color: var(--accent); padding: 6px 12px; border-radius: 30px }
.doc h2 { display: flex; gap: 12px; align-items: baseline; font-size: 34px; color: var(--on-light); margin: 40px 0 14px; scroll-margin-top: 110px }
.doc h2 .n { font-family: var(--sans); font-size: 12px; font-weight: 700; color: var(--on-dark); background: var(--accent); padding: 3px 9px; border-radius: 6px; transform: translateY(-6px) }
.doc h3 { font-size: 24px; margin: 22px 0 8px }
.doc p, .doc li { font-size: 15.5px; line-height: 1.85; color: var(--on-light-2) }
.doc p { margin-bottom: 12px }
.doc ul, .doc ol { padding-left: 22px; margin: 6px 0 14px; list-style: disc }
.doc ol { list-style: lower-alpha }
.doc li::marker { color: var(--accent) }
.doc strong { color: var(--on-light); font-weight: 600 }
.doc a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px }
.table-scroll { overflow-x: auto }
.doc table { width: 100%; border-collapse: collapse; margin: 10px 0 20px; font-size: 14.5px }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 12px 14px; border-bottom: 1px solid var(--line-light); color: var(--on-light-2) }
.doc th { background: rgba(176, 138, 62, .05); color: var(--on-light); font-weight: 600 }
.box-note { background: rgba(176, 138, 62, .05); border-left: 3px solid var(--accent); padding: 16px 20px; border-radius: 6px; margin: 16px 0; color: var(--on-light-2); font-size: 15px }
.doc-back { margin-top: 34px }

/* =====================================================================
   DUYARLI (1440 / 1180 / 900 / 640)
   ===================================================================== */
@media (max-width: 1440px) {
  .hero-trust b { font-size: 32px }
}
@media (max-width: 1180px) {
  .nav > ul > li > a { padding: 0 11px }
  .hdr-cta { display: none }
  .hero-grid { grid-template-columns: 1fr 1fr }
  .stage { height: 520px }
  .steps { grid-template-columns: repeat(2, 1fr) }
  .t-grid { grid-template-columns: repeat(2, 1fr) }
  .c-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .c-card:nth-child(2) { grid-column: span 1 }
  .ft-top { grid-template-columns: 1fr 1fr }
  .d-layout { grid-template-columns: 1fr 320px }
  .p-grid-3 { grid-template-columns: repeat(2, 1fr) }
}
@media (max-width: 900px) {
  :root { --top-h: 100px }
  .header { height: 64px }
  .nav { display: none }
  .hero { padding-top: calc(var(--top-h) + 30px) }
  .hero-grid, .ap-grid, .qs-grid, .ab-grid, .gv-grid, .c-layout, .d-hero-grid, .d-layout, .svc-layout, .legal-grid, .mv-grid { grid-template-columns: 1fr }
  .stage { height: 460px; max-width: 560px; width: 100%; margin: 20px auto 0 }
  .sec-head.split { grid-template-columns: 1fr }
  .sec-head.split p { justify-self: start; margin-top: 16px }
  /* 3D sabit bölümler mobilde de aktif ve 5D geçişlidir */
  .uni-head { padding-top: calc(var(--top-h) + 10px); grid-template-columns: 1fr; margin-bottom: 20px; text-align: center }
  .uni-head p { justify-self: center; margin-top: 8px; text-align: center }
  .uni-cards { top: 60% }
  .u-card h3 { font-size: 24px; margin: 6px 0 4px }
  .u-card p { font-size: 13px; line-height: 1.5 }
  .hg-head { flex-direction: row; justify-content: space-between; align-items: flex-end }
  .hg-meta { display: flex; gap: 14px; align-items: center }
  .hg-card { width: clamp(250px, 72vw, 340px) }
  .vs-card { width: calc(100vw - 24px); max-width: 100%; height: clamp(420px, 70vh, 650px) }
  .svc-aside, .d-aside, .toc { position: relative; top: auto }
  .collage { height: 460px }
  .board { height: 520px }
  .c-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .c-card:nth-child(2) { grid-column: 1 / -1 }
  .d-visual { padding: 20px 20px 20px 0 }
  .fs-inner { grid-template-columns: 1fr; align-content: start; padding-top: 100px }
  .benefits-2 { grid-template-columns: 1fr }
  .tab-panel { grid-template-columns: 1fr }
  .p-grid-3 { grid-template-columns: 1fr 1fr }
  .g-grid { grid-template-columns: 1fr 1fr }
  .g-item.g1 { margin-top: 0 }
}
@media (max-width: 640px) {
  :root { --gut: 18px }
  body { font-size: 15.5px }
  .logo-txt { font-size: 18px }
  .logo img { width: 36px }
  .icon-btn { width: 42px; height: 42px }
  .hdr-actions .hide-sm { display: none }
  .hero-cta .btn, .cta-actions .btn, .feat-cta .btn { width: 100% }
  .hero-trust li { min-width: 0; padding-right: 10px; margin-right: 10px }
  .hero-trust li + li { padding-left: 10px }
  .hero-trust b { font-size: 26px }
  .hero-trust span { font-size: 11.5px }
  .stage { height: 380px }
  .glass-card { width: 78%; padding: 14px; bottom: 2% }
  .glass-card b { font-size: 19px }
  .uni-cards { top: 62% }
  .u-body { padding: 18px }
  .u-num { font-size: 44px }
  .u-card h3 { font-size: 22px }
  .p-grid, .p-grid-3, .g-grid, .steps, .t-grid, .c-grid, .f-grid, .filter-row, .ft-top, .d-content .steps { grid-template-columns: 1fr }
  .u-media img { aspect-ratio: 16/10 }
  .tabs { justify-content: flex-start; width: 100% }
  .tab { padding: 0 16px; font-size: 13px }
  .qp-head, .qp-body { padding-left: 20px; padding-right: 20px }
  .qp-quick { grid-template-columns: 1fr }
  .so-res { grid-template-columns: 56px 1fr; gap: 12px }
  .so-res .th { width: 56px; height: 44px }
  .so-res .kind { display: none }
  .so-res b { font-size: 20px }
  .collage { height: 380px }
  .board { height: 440px }
  .fab-wa { right: 16px; bottom: 16px; width: 56px; height: 56px }
  .to-top { right: 22px; bottom: 84px }
  .cookie { left: 12px; bottom: 12px; width: calc(100% - 24px); padding: 20px }
  .cookie .row { flex-direction: column }
  .ft-bottom { flex-direction: column; text-align: center }
  .pl-foot { bottom: 26px }
  .pl-count { font-size: 34px; min-width: 80px }
  .d-num { right: 0 }
  .wa-card { grid-template-columns: 1fr }
  .map-card iframe { height: 260px }
}

/* ızgara çocukları taşmasın */
.d-layout > *, .legal-grid > *, .svc-layout > *, .c-layout > *, .hero-grid > *, .qs-grid > *, .ap-grid > *, .ab-grid > *, .gv-grid > *, .tab-panel > * { min-width: 0 }
html { overflow-x: clip }
input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration { -webkit-appearance: none; appearance: none }

/* video kapak + rozet (video yüklenmese de alan boş kalmaz) */
.vs-card video, .vwrap video { position: relative; z-index: 1 }
.vs-poster { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: 10px; background: var(--wine-900) }
.vwrap { position: relative; overflow: hidden }
.vwrap .vs-poster { inset: 8px; border-radius: 3px }
.porcelain-frame.vwrap .vs-poster { inset: 12px }
.vs-poster img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); animation: kenburns 18s ease-in-out infinite alternate }
@keyframes kenburns { from { transform: scale(1.08) translate(0, 0) } to { transform: scale(1.18) translate(-2%, -2%) } }
video.v-failed { opacity: 0 }
.vs-shade { z-index: 2 }
.vs-title { z-index: 4 }
.vs-badge { position: absolute; left: 50%; top: 50%; z-index: 3; width: 300px; height: 300px; margin: -150px 0 0 -150px; display: grid; place-items: center; pointer-events: none; transition: opacity .4s }
.vs-ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 22s linear infinite }
.vs-ring text { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .1em; fill: var(--porcelain) }
.vs-play { width: 130px; height: 130px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 35% 30%, #e0c27a, var(--accent) 45%, var(--wine-900)); color: var(--porcelain); box-shadow: 0 30px 60px -20px rgba(70, 52, 18, 0.32), inset 0 1px 0 rgba(255, 255, 255, .25); position: relative }
.vs-play::before, .vs-play::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .45); animation: wave 3s var(--ease) infinite }
.vs-play::after { animation-delay: 1.5s }
.vs-play svg { width: 44px; height: 44px; margin-left: 6px }
.vs-chips { position: absolute; left: 0; right: 0; bottom: 8%; z-index: 3; display: flex; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 0 20px; transition: opacity .4s }
.vs-chips span { padding: 12px 22px; border-radius: 40px; background: rgba(255, 255, 255, .94); color: var(--accent); font-size: 17px; font-weight: 700; letter-spacing: .04em; box-shadow: 0 16px 30px -14px rgba(70, 52, 18, 0.23) }
@media (max-width: 900px) {
  .vs-badge { width: 200px; height: 200px; margin: -100px 0 0 -100px; top: 42% }
  .vs-play { width: 86px; height: 86px }
  .vs-play svg { width: 30px; height: 30px }
  .vs-chips { display: none }
}

/* =====================================================================
   ALLIANZ BAKICILIK — Gold & Beyaz tema katmanı
   (Renk düzeltmeleri; yerleşim/animasyonlara dokunmaz)
   ===================================================================== */
/* Altın zemin üzerindeki alanlarda yazılar beyaz */
.announce, .strip-dark, .cta-band, .fab-wa {
  --on-dark: #ffffff; --on-dark-2: rgba(255, 255, 255, .88); --on-dark-3: rgba(255, 255, 255, .72);
  --blush: #fff3d4; --line-dark: rgba(255, 255, 255, .3);
}
.announce, .strip-dark, .cta-band { background: var(--gold-grad) }
::selection { background: var(--accent); color: #fff }

/* Butonlar */
.btn-primary { background: var(--gold-grad); color: #fff; box-shadow: 0 14px 30px -16px rgba(150, 110, 30, .6) }
.btn-primary::before { background: #8a6922 }
.btn-light { color: var(--on-light) }
.btn-light::before { background: #2a2213 }
.btn-light:hover { color: #fff }
.btn-ghost { border-color: rgba(176, 138, 62, .45); color: var(--on-light) }
.btn-ghost::before { background: var(--accent) }
.btn-ghost:hover { color: #fff }
.btn-outline:hover { color: #fff }
.btn-wa { background: #fff; color: var(--on-light); border: 1px solid var(--line-light) }
.btn-wa::before { background: var(--accent) }
.btn-wa:hover { color: #fff }
.fab-wa { background: var(--gold-grad); color: #fff; box-shadow: 0 16px 34px -12px rgba(150, 110, 30, .6) }
.tab-ind { background: var(--gold-grad) }
.tab.active, .chip-btn.active, .doc h2 .n { color: #fff }
.cursor.label .cur-ring span { color: #fff }
.c-link { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 3px }

/* Logo & header */
.logo img { width: 52px; height: auto; border-radius: 50%; box-shadow: 0 6px 16px -6px rgba(120, 90, 25, .45) }
.logo-txt { color: var(--accent); letter-spacing: .12em }
.logo-txt small { color: var(--on-light-2) }
.header::before { background: rgba(255, 255, 255, .97); box-shadow: 0 12px 30px -22px rgba(90, 65, 15, .4) }
.ft-brand img { width: 170px }
.footer { border-top: 1px solid rgba(176, 138, 62, .35) }

/* Sayfa geçişi perdesi: altın / beyaz */
.pt i { background: var(--gold-grad) }
.pt i:nth-child(even) { background: #fff }

/* Görsel üzerindeki yazılar beyaz kalır */
.vs-title { color: #fff }
.vs-title h2 em { color: #f3d98f }
.p-num { -webkit-text-stroke: 1px rgba(255, 255, 255, .9) }
.vs-play { background: radial-gradient(circle at 35% 30%, #ecd28a, #b8913f 45%, #8a6922); color: #fff }

/* Işık / parıltı efektleri */
.sheen { background: radial-gradient(circle, rgba(255, 255, 255, .38), rgba(255, 255, 255, .08) 35%, transparent 65%) }
.story-face::after { border-color: rgba(255, 255, 255, .5) }
.cta-band::before { background: radial-gradient(ellipse at 80% 0%, rgba(255, 255, 255, .24), transparent 55%), radial-gradient(ellipse at 0% 100%, rgba(90, 65, 15, .3), transparent 55%) }
.hero-glow.g1, .ph-glow { background: radial-gradient(circle, rgba(212, 175, 95, .24), transparent 62%) }
.hg-sticky::before { background: radial-gradient(ellipse at 20% 0%, rgba(212, 175, 95, .22), transparent 55%) }
.quote-card::before { background: radial-gradient(circle, rgba(212, 175, 95, .3), transparent 65%) }

/* Kartlar */
.u-body { background: linear-gradient(165deg, #ffffff, #fbf5e7 45%, #f3e7cb); border-color: rgba(176, 138, 62, .35) }
.glass-card { background: linear-gradient(140deg, rgba(255, 255, 255, .96), rgba(247, 238, 218, .96)); border-color: rgba(176, 138, 62, .4) }
.ped-base { box-shadow: 0 30px 40px -20px rgba(90, 65, 15, .3) }

@media (max-width: 640px) {
  .logo img { width: 40px }
}
.cta-band .btn-ghost { color: #fff; border-color: rgba(255, 255, 255, .55) }
.cta-band .btn-ghost::before { background: #fff }
.cta-band .btn-ghost:hover { color: var(--on-light) }

/* Görsel geçişli vitrin (video yerine) */
.vs-slides img { position: absolute; inset: 0; opacity: 0; animation: vsFade 24s linear infinite, kenburns 18s ease-in-out infinite alternate }
.vs-slides img:nth-child(1) { animation-delay: 0s, 0s }
.vs-slides img:nth-child(2) { animation-delay: -18s, -4s }
.vs-slides img:nth-child(3) { animation-delay: -12s, -8s }
.vs-slides img:nth-child(4) { animation-delay: -6s, -12s }
@keyframes vsFade { 0% { opacity: 1 } 25% { opacity: 1 } 29% { opacity: 0 } 96% { opacity: 0 } 100% { opacity: 1 } }
.porcelain-frame.vwrap .vs-slides { position: relative; inset: auto; aspect-ratio: 16/10; border-radius: 4px }
.vs-seal { width: 150px; height: 150px; padding: 0; background: none; box-shadow: 0 30px 60px -20px rgba(20, 14, 4, .6) }
.vs-seal img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover }
@media (max-width: 640px) { .vs-seal { width: 110px; height: 110px } }