/* Samet Öndeş | Web & Mobil Yazılım
   Sinematik koyu tema (tek tema, bilinçli): mürekkep siyahı + tek vurgu (kor turuncusu).
   Köşe sistemi: kartlar 22px, cihaz çerçeveleri 36px, butonlar tam hap.
   Hareket: GSAP + ScrollTrigger + Lenis (masaüstü), three.js hero. prefers-reduced-motion: düz, statik sürüm (.rm). */

@font-face { font-family: "Bricolage"; src: url(fonts/bricolage-latin.woff2) format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BA, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Bricolage"; src: url(fonts/bricolage-latin-ext.woff2) format("woff2"); font-weight: 200 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+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: "SB Rakam"; src: url(fonts/inter-600-rakam.woff2) format("woff2"); font-weight: 600; font-display: block; unicode-range: U+30-3A; }
@font-face { font-family: "Geist"; src: url(fonts/geist-latin.woff2) format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BA, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; src: url(fonts/geist-latin-ext.woff2) format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* galeri kartlarında salonların kendi başlık yazı tipleri (yalnızca gereken kesim) */
@font-face { font-family: "Barlow Condensed"; src: url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BA, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; src: url(fonts/barlow-condensed-latin-ext-700-normal.woff2) format("woff2"); font-weight: 700; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant"; src: url(fonts/cormorant-garamond-latin-600-italic.woff2) format("woff2"); font-weight: 600; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+20BA, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant"; src: url(fonts/cormorant-garamond-latin-ext-600-italic.woff2) format("woff2"); font-weight: 600; font-style: italic; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --bg: #0b0d0c;
  --bg-2: #111413;
  --surface: #161a18;
  --ink: #f1f2ee;
  --text: #c6ccc7;
  --muted: #8d958f;
  --line: rgb(241 242 238 / .1);
  --accent: #ff5a2c;
  --accent-ink: #0b0d0c;
  --frame: #222826;
  --r-card: 22px;
  --r-device: 36px;
  --wrap: min(1280px, 100% - 2 * clamp(16px, 4.5vw, 56px));
  --f-display: "Bricolage", ui-sans-serif, system-ui, sans-serif;
  --f-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1rem/1.6 var(--f-body); -webkit-font-smoothing: antialiased; overflow-x: clip; }
img, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
h1, h2, h3 { font-family: var(--f-display); color: var(--ink); margin: 0; font-weight: 650; letter-spacing: -.035em; line-height: 1.04; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--accent); color: var(--accent-ink); }
.wrap { width: var(--wrap); margin-inline: auto; }
.ico { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 90; background: var(--ink); color: var(--bg); padding: 10px 16px; border-radius: 999px; text-decoration: none; }
.skip:focus { top: 12px; }
.eyebrow { display: inline-flex; margin-bottom: 18px; font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.h2 { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 4rem); max-width: 16ch; }
.lead { margin-top: 16px; max-width: 50ch; font-size: 1.08rem; }
/* SplitText satır maskeleri: Ö Ş İ Ğ gibi büyük harf işaretleri ve g/y kuyrukları kırpılmasın */
.line-mask { padding: .16em 0 .12em; margin: -.16em 0 -.12em; }

/* ---------- butonlar ---------- */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 52px; padding: 0 26px;
  border-radius: 999px; font: 600 1rem/1 var(--f-body); text-decoration: none; white-space: nowrap; border: 1.5px solid transparent;
  cursor: pointer; transition: background-color .3s, border-color .3s, color .3s; -webkit-tap-highlight-color: transparent; }
.btn > * { pointer-events: none; }
.btn--wa { background: var(--accent); color: var(--accent-ink); }
.btn--ghost { border-color: rgb(241 242 238 / .24); color: var(--ink); background: rgb(11 13 12 / .35); }
.btn--ink { background: var(--ink); color: var(--bg); }
.btn--sm { min-height: 44px; padding: 0 18px; font-size: .92rem; }
.btn:active { scale: .97; }
@media (hover: hover) { .btn--ghost:hover { border-color: var(--ink); } .btn--wa:hover { background: #ff6d43; } }

/* ---------- açılış perdesi ---------- */
.intro { position: fixed; inset: 0; z-index: 80; display: none; }
.intro-on .intro { display: block; }
.intro__pane { position: absolute; left: 0; right: 0; height: 50.5%; background: #070908; }
.intro__pane--t { top: 0; } .intro__pane--b { bottom: 0; }
.intro__name { position: absolute; left: 50%; top: 50%; translate: -50% -50%; font: 650 clamp(2.4rem, 1.4rem + 5vw, 6rem)/1 var(--f-display); letter-spacing: -.045em; color: var(--ink); white-space: nowrap; padding: .2em .05em .12em; overflow: hidden; }
.intro__name span { display: inline-block; }
.intro__name em { font-style: normal; color: var(--accent); }
.intro__count { position: absolute; left: clamp(16px, 4.5vw, 56px); bottom: calc(26px + env(safe-area-inset-bottom)); font: 600 clamp(3rem, 2rem + 6vw, 7.5rem)/.9 var(--f-display); color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.04em; }
.intro__role { position: absolute; right: clamp(16px, 4.5vw, 56px); bottom: calc(34px + env(safe-area-inset-bottom)); color: var(--muted); font-size: .95rem; }
.intro__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--accent); transform-origin: left; transform: scaleX(0); }

/* ---------- üst bar ---------- */
.top { position: fixed; inset: 0 0 auto; z-index: 40; padding-top: env(safe-area-inset-top); transition: background-color .4s, border-color .4s, translate .5s var(--ease); border-bottom: 1px solid transparent; }
.top.is-solid, .top.menu-acik { background: rgb(11 13 12 / .82); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); border-bottom-color: var(--line); }
.top__in, .brand b, .brand small, .top .btn, .menu-btn, .yer__btn, .yer__sonraki { transition: height .45s var(--ease), min-height .45s var(--ease), width .45s var(--ease), font-size .45s var(--ease), opacity .3s, margin .45s var(--ease); }
/* ince bar: aşağı inince */
.top.is-mini .top__in { height: 52px; }
.top.is-mini .brand { min-height: 40px; }
.top.is-mini .brand b { font-size: 1rem; }
.top.is-mini .brand small { font-size: .7rem; }
.top.is-mini .btn { min-height: 38px; }
.top.is-mini .menu-btn { width: 38px; height: 38px; }
.top.is-mini .yer__btn, .top.is-mini .yer__sonraki { min-height: 36px; }
.top.is-mini .yer__btn { font-size: .9rem; }
.top.is-mini .menu { max-height: calc(100dvh - 52px); }
@media (min-width: 960px) { .top.is-mini .top__in { height: 56px; } .top.is-mini .brand small { opacity: 0; height: 0; margin: 0; overflow: hidden; } .top.is-mini .menu { max-height: calc(100dvh - 56px); } }
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; }
.top__sag { display: flex; align-items: center; gap: 8px; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 48px; text-decoration: none; line-height: 1.1; }
.brand__isaret { width: 40px; height: 40px; flex: none; }
.brand__yazi { display: flex; flex-direction: column; justify-content: center; }
.brand b { font: 700 1.14rem/1.05 var(--f-display); color: var(--ink); letter-spacing: -.02em; padding-top: .12em; }
.brand small { font-size: .74rem; color: var(--muted); }
.top .btn__label { display: none; }
.top .btn { min-height: 44px; padding: 0 13px; }
@media (min-width: 560px) { .top .btn__label { display: inline; } .top .btn { padding: 0 18px; } }
.menu-btn { width: 44px; height: 44px; display: grid; place-content: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; background: rgb(241 242 238 / .04); cursor: pointer; }
.menu-btn i { display: block; width: 18px; height: 1.5px; border-radius: 2px; background: var(--ink); transition: translate .35s var(--ease), rotate .35s var(--ease); }
.menu-btn[aria-expanded="true"] i:first-child { translate: 0 3.75px; rotate: 45deg; }
.menu-btn[aria-expanded="true"] i:last-child { translate: 0 -3.75px; rotate: -45deg; }
/* konum: bulunulan bölüm, sıradaki bölüm, ilerleme */
.yer { display: none; align-items: center; gap: 6px; }
.yer__btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px 0 16px; border-radius: 999px; border: 1px solid var(--line); background: rgb(241 242 238 / .05); color: var(--ink); font: 600 .95rem/1 var(--f-body); cursor: pointer; transition: background-color .2s, border-color .2s; }
.yer__btn:hover, .yer__btn[aria-expanded="true"] { background: rgb(241 242 238 / .1); border-color: rgb(241 242 238 / .2); }
.yer__no { color: var(--accent); font-variant-numeric: tabular-nums; font-size: .82rem; }
.yer__ad { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yer__ok { width: 16px; height: 16px; color: var(--muted); transition: rotate .3s var(--ease); }
.yer__btn[aria-expanded="true"] .yer__ok { rotate: 180deg; }
.yer__sonraki { display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; text-decoration: none; color: var(--text); font-size: .9rem; transition: color .2s, background-color .2s; }
.yer__sonraki small { color: var(--muted); font-size: .78rem; }
.yer__sonraki span { color: var(--ink); font-weight: 600; }
.yer__sonraki .ico { width: 16px; height: 16px; color: var(--accent); }
.yer__sonraki:hover { background: rgb(241 242 238 / .06); }
.yer__sonraki[hidden] { display: none !important; }
/* adım şeridi: her bölüm bir parça; geçilenler dolu, bulunulan okundukça dolar */
.top__ilerle { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; display: flex; gap: 3px; padding-inline: max(0px, calc((100% - var(--wrap)) / 2)); pointer-events: none; opacity: 0; transition: opacity .4s, height .3s; }
.top.is-solid .top__ilerle, .top.menu-acik .top__ilerle { opacity: 1; }
.top.is-mini .top__ilerle { height: 3px; }
.top__ilerle > i { flex: 1; border-radius: 3px; background: rgb(241 242 238 / .12); overflow: hidden; }
.top__ilerle > i.su-an { background: rgb(241 242 238 / .22); }
.top__ilerle b { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(var(--d, 0)); transition: transform .25s linear; }
/* telefonda ince bar: marka yerine konum + sıradaki + WhatsApp */
@keyframes yerGel { from { opacity: 0; translate: 0 6px; } }
@media (max-width: 959px) {
  .top.is-mini .brand, .top.is-mini .menu-btn { display: none; }
  .top.is-mini .yer { display: flex; flex: 1; min-width: 0; animation: yerGel .4s var(--ease); }
  .top.is-mini .yer__btn { flex: 1; min-width: 0; min-height: 38px; gap: 8px; padding: 0 12px; font-size: .9rem; }
  .top.is-mini .yer__ad { flex: 1; min-width: 0; max-width: none; text-align: left; }
  .top.is-mini .yer__sonraki:not([hidden]) { display: inline-flex; flex: none; width: 38px; min-height: 38px; padding: 0; justify-content: center; border: 1px solid var(--line); background: rgb(241 242 238 / .05); }
  .top.is-mini .yer__sonraki small, .top.is-mini .yer__sonraki span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .top.is-mini .yer__sonraki .ico { width: 18px; height: 18px; }
}
/* bölümler menüsü */
.menu { max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--line); }
.menu[hidden] { display: none; }
.menu__in { width: var(--wrap); margin-inline: auto; padding: 18px 0 22px; }
.menu__bas { color: var(--muted); font-size: .88rem; }
.menu__liste { margin-top: 10px; display: grid; }
.menu__liste a { display: grid; grid-template-columns: 2.4em minmax(0, 1fr); column-gap: 10px; row-gap: 4px; padding: 14px 12px 14px 4px; border-top: 1px solid var(--line); text-decoration: none; border-radius: 14px; transition: background-color .2s; }
.menu__liste li:first-child a { border-top: 0; }
.menu__liste a:hover { background: rgb(241 242 238 / .05); }
.menu__no { grid-row: span 2; padding-top: .2em; color: var(--muted); font: 600 .85rem/1 var(--f-body); font-variant-numeric: tabular-nums; }
.menu__liste b { color: var(--ink); font: 650 1.2rem/1.15 var(--f-display); letter-spacing: -.02em; }
.menu__liste small { color: var(--muted); font-size: .88rem; line-height: 1.45; }
.menu__liste a[aria-current] { background: rgb(255 90 44 / .1); }
.menu__liste a[aria-current] .menu__no, .menu__liste a[aria-current] b { color: var(--accent); }
.menu__alt { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.menu__alt p { color: var(--text); max-width: 52ch; font-size: .95rem; }
html.menu-kilit { overflow: hidden; }
.top.menu-acik { background: rgb(11 13 12 / .97); }
@media (min-width: 960px) {
  .top__in { display: grid; grid-template-columns: 1fr auto 1fr; height: 72px; }
  .yer { display: flex; }
  .top__sag { justify-self: end; }
  .menu-btn { display: none; }
  .menu { max-height: calc(100dvh - 72px); }
  .menu__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 14px; }
  .menu__liste a, .menu__liste li:first-child a { border-top: 1px solid var(--line); padding: 16px 14px 18px 6px; }
}
@media (min-width: 1180px) { .yer__sonraki { display: inline-flex; } }

/* ---------- bitmiş işler ---------- */
.works { padding: clamp(90px, 12vw, 160px) 0; border-top: 1px solid var(--line); }
.works__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(40px, 6vw, 72px); align-items: center; }
.works__metin .lead { max-width: 52ch; margin-top: 22px; }
.works__ust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--ink); font: 650 clamp(1.05rem, .95rem + .4vw, 1.3rem)/1.2 var(--f-display); letter-spacing: -.01em; }
.works__ust span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: 999px; background: rgb(37 211 102 / .1); color: #6fe3a0; font: 600 .8rem/1 var(--f-body); letter-spacing: 0; }
.works__ust span::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #25d366; box-shadow: 0 0 0 4px rgb(37 211 102 / .18); }
.works__ad { margin-top: 18px; font-size: clamp(2.7rem, 1.4rem + 5.2vw, 5.6rem); line-height: .98; letter-spacing: -.045em; max-width: 11ch; }
.works__urun { margin-top: 20px; color: var(--ink); font: 600 clamp(1.05rem, .9rem + .7vw, 1.45rem)/1.35 var(--f-display); letter-spacing: -.015em; }
.works__urun span { white-space: nowrap; }
.works__urun i { font-style: normal; color: var(--accent); padding-inline: .15em; }
.works .screen__in video { display: block; width: 100%; aspect-ratio: 1600 / 1000; border-radius: 12px; object-fit: cover; object-position: left top; background: #f7f4ef; }
.works__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.works__sahne { position: relative; padding: 0 13% 9% 0; }
.works__sahne .screen { margin-top: 0; }
.works__sahne .works__tel { position: absolute; right: 0; bottom: 0; width: 31%; max-width: 230px; }
@media (max-width: 759px) { .works__sahne .screen__in img { aspect-ratio: 1440 / 900; } .works__sahne .works__tel { width: 36%; } }
@media (min-width: 960px) { .works__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); } }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; }
.hero__isik { position: absolute; inset: 0; z-index: -2; pointer-events: none; background:
  radial-gradient(60% 55% at 74% 46%, rgb(255 90 44 / .16), transparent 70%),
  radial-gradient(40% 40% at 10% 0%, rgb(255 90 44 / .07), transparent 70%); }
/* hero sahnesi: salon reelleri ve önde Nova'nın ekran kaydını oynatan telefon. Kolonlar kaydırınca zıt yönde kayar (derinlik). */
.hero__sahne { position: relative; height: clamp(470px, 132vw, 600px); margin-top: 8px; overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 84%, transparent); mask-image: linear-gradient(transparent, #000 12%, #000 84%, transparent); }
.reel-kolon { position: absolute; top: 0; display: grid; gap: 12px; width: 31%; will-change: transform; }
.reel-kolon--a { left: -9%; top: 6%; } .reel-kolon--b { left: 34.5%; top: -24%; opacity: .55; } .reel-kolon--c { right: -9%; top: 18%; }
.reel { position: relative; aspect-ratio: 9 / 16; border-radius: var(--r-card); overflow: hidden; background: var(--surface); }
.reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92); }
.reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 55%, rgb(11 13 12 / .45)); }
.hero__kart { position: absolute; z-index: 3; height: auto; border-radius: 16px; box-shadow: 0 24px 50px -18px rgb(0 0 0 / .75), 0 0 0 1px rgb(255 255 255 / .06); }
.hero__kart--bildirim { width: 52%; left: 1%; top: 18%; }
.hero__kart--wa { width: 46%; right: 0; top: 50%; }
.hero__kart--bilet { width: 34%; left: 3%; top: 68%; }
@media (prefers-reduced-motion: no-preference) {
  .hero__kart { animation: suzul 7s ease-in-out infinite; }
  .hero__kart--wa { animation-delay: -2.4s; } .hero__kart--bilet { animation-delay: -4.6s; }
}
@keyframes suzul { 50% { translate: 0 -10px; } }
.tel { position: absolute; left: 50%; top: 50%; width: min(58%, 252px); translate: -50% -50%; }
.hero__in { position: relative; width: var(--wrap); margin-inline: auto; padding-top: calc(env(safe-area-inset-top) + 100px); padding-bottom: 48px; }
.hero h1 { font-size: min(clamp(2.6rem, 1.3rem + 5.2vw, 5.4rem), 12.4vw); line-height: 1.02; max-width: 11em; }
.hero__sub { margin-top: 20px; font-size: clamp(1.04rem, .98rem + .35vw, 1.25rem); max-width: 40ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
@media (max-width: 959px) { .hero__in { padding-bottom: 8px; } }
@media (max-width: 559px) { .hero__cta .btn { flex: 1 1 100%; } }
@media (min-width: 960px) {
  .hero { display: flex; align-items: center; }
  .hero__in { padding-top: 110px; padding-bottom: 80px; }
  .hero h1 { font-size: clamp(3.3rem, 1rem + 3.7vw, 4.8rem); max-width: 11.5em; }
  .hero__sub { max-width: 40ch; }
  .hero__in { width: var(--wrap); }
  .hero__in > *, .hero .hero__in h1 { max-width: min(44vw, 600px); }
  .hero .hero__in h1 { font-size: clamp(3rem, 1rem + 3.2vw, 4.4rem); }
  .hero__sahne { position: absolute; top: 76px; bottom: 0; right: max(0px, calc((100vw - 1400px) / 2)); width: min(50vw, 720px); height: auto; margin: 0; }
  .reel-kolon { width: 29%; gap: 16px; }
  .reel-kolon--a { left: 2%; top: -4%; } .reel-kolon--b { left: 35.5%; top: -38%; } .reel-kolon--c { right: 2%; top: 10%; }
  .tel { width: min(40%, 290px); }
  .hero__kart--bildirim { width: 36%; left: 0; top: 13%; }
  .hero__kart--wa { width: 34%; right: 0; top: 47%; }
  .hero__kart--bilet { width: 26%; left: 2%; top: 64%; }
}

/* ---------- kayan yazı ---------- */
.marquee { padding: clamp(26px, 4.5vw, 52px) 0; overflow: hidden; border-block: 1px solid var(--line); }
.marquee__track { display: flex; width: max-content; will-change: transform; }
.marquee__group { display: flex; align-items: center; flex: none; font: 650 clamp(2.6rem, 1.6rem + 5vw, 6.6rem)/1.1 var(--f-display); letter-spacing: -.04em; }
.marquee__group span { color: var(--ink); white-space: nowrap; }
.marquee__group span.o { color: transparent; -webkit-text-stroke: 1.5px rgb(241 242 238 / .55); }
.marquee__group i { width: .32em; height: .32em; margin: 0 .5em; border-radius: 50%; background: var(--accent); flex: none; }

/* ---------- kaydırınca dolan cümle ---------- */
.statement { padding: clamp(90px, 13vw, 190px) 0; }
.statement p { font: 600 clamp(2rem, 1.1rem + 3.6vw, 4.4rem)/1.1 var(--f-display); letter-spacing: -.035em; color: var(--ink); max-width: 21ch; }
.js:not(.rm) .statement .w { color: rgb(241 242 238 / .4); } /* okunmamış kelime: büyük yazıda 3:1 kontrast */
.statement .w.hl { color: var(--accent); }

/* ---------- sabitlenen hikâye ---------- */
.story { background: var(--bg-2); }
.story__pin { min-height: 100svh; display: grid; align-content: center; padding: 96px 0 44px; }
.story__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; }
.story__steps { position: relative; margin-top: 26px; min-height: 8.5em; }
.story__step { position: absolute; inset: 0 0 auto; }
.story__step .n { display: block; font: 600 .86rem/1 var(--f-body); color: var(--accent); margin-bottom: 12px; font-variant-numeric: tabular-nums; letter-spacing: .04em; }
.story__step b { display: block; font: 650 clamp(1.5rem, 1.1rem + 1.4vw, 2.2rem)/1.12 var(--f-display); color: var(--ink); letter-spacing: -.025em; }
.story__step p { margin-top: 10px; max-width: 38ch; }
.rm .story__steps, .no-js .story__steps { min-height: 0; }
.rm .story__step, .no-js .story__step { position: relative; margin-top: 24px; }
.story__bar { margin-top: 24px; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; max-width: 360px; }
.story__bar i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }
.device { position: relative; }
.story .device { justify-self: center; width: min(62vw, 300px); }
.js:not(.rm) .story .scr img:not(:first-child) { opacity: 0; }
@media (max-width: 959px) {
  .story__pin { padding-top: 82px; align-content: start; }
  .story__grid { gap: 14px; }
  .story .device { order: -1; width: min(44vw, 210px, 31svh); }
  .story__steps { min-height: 8em; margin-top: 12px; }
  .story .h2 { font-size: clamp(1.5rem, 1.1rem + 2.4vw, 2.3rem); }
}
@media (min-width: 960px) { .story__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: 64px; } .story .device { width: min(27vw, 340px); } }

/* ---------- sayaçlar ---------- */
.stats { padding: clamp(90px, 12vw, 160px) 0; }
.stats__grid { margin-top: clamp(36px, 5vw, 64px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line); }
.stat { background: var(--bg); padding: clamp(20px, 3.5vw, 40px); display: flex; flex-direction: column; gap: 22px; min-height: clamp(170px, 26vw, 240px); justify-content: flex-start; }
.stat strong { font: 700 clamp(2.6rem, 1.6rem + 4.4vw, 5.8rem)/.9 var(--f-display); letter-spacing: -.05em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat strong small { font-size: .42em; letter-spacing: 0; color: var(--accent); margin-left: .3em; }
.stat span { color: var(--muted); max-width: 24ch; font-size: .96rem; }
@media (min-width: 960px) { .stats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- yatay salon galerisi ---------- */
.gallery { overflow: hidden; }
.gallery__head { padding-top: clamp(40px, 6vw, 80px); }
.gallery__pin { padding: clamp(30px, 4vw, 52px) 0 clamp(70px, 9vw, 120px); }
.gallery__track { display: flex; gap: clamp(14px, 2.2vw, 28px); padding-inline: max(16px, (100vw - 1280px) / 2); width: max-content; }
.salon { position: relative; flex: none; width: min(86vw, 600px); height: min(165vw, 760px, 88svh); border-radius: var(--r-card); padding: clamp(22px, 3vw, 32px); overflow: hidden; isolation: isolate; display: flex; flex-direction: column; background: var(--c1); color: var(--c-ink); }
.salon h3 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); color: var(--c-ink); }
.salon p { opacity: .8; margin-top: 6px; }
.salon__sw { display: flex; gap: 8px; margin-top: 14px; }
.salon__sw i { width: 22px; height: 22px; border-radius: 50%; box-shadow: 0 0 0 1px rgb(255 255 255 / .28) inset; }
.salon__phones { position: relative; flex: 1; margin-top: 14px; }
.salon__phones .ph { position: absolute; top: 0; height: 100%; width: auto; }
.salon__phones .ph:nth-child(1) { left: 0; z-index: 2; }
.salon__phones .ph:nth-child(2) { right: 0; top: 5%; height: 95%; rotate: 4deg; }
.salon--nova { --c1: #1f5f5b; --c-ink: #f1f7f5; }
.salon--kuzey { --c1: #1a1814; --c-ink: #f5efe4; box-shadow: 0 0 0 1px rgb(240 180 69 / .3) inset; border-radius: 6px; }
.salon--kuzey h3 { font: 700 clamp(2rem, 1.5rem + 1.8vw, 3rem)/.95 "Barlow Condensed", var(--f-display); text-transform: uppercase; letter-spacing: .01em; color: #f0b445; }
.salon--lina { border-radius: 44px; }
.salon--lina h3 { font: italic 600 clamp(2rem, 1.5rem + 1.8vw, 3rem)/1 "Cormorant", Georgia, serif; letter-spacing: 0; }
.salon__spec { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 6px 22px; margin-top: 16px; }
.salon__spec div { display: grid; gap: 2px; }
.salon__spec dt { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; opacity: .82; }
.salon__spec dd { margin: 0; font-weight: 600; font-size: .9rem; }
.salon--lina { --c1: #8e2f5a; --c-ink: #fff3f8; }
.salon--sen { --c1: var(--accent); --c-ink: var(--accent-ink); justify-content: space-between; }
.salon--sen h3 { font-size: clamp(2.3rem, 1.4rem + 3.6vw, 4.2rem); max-width: 8ch; }
.salon--sen p { opacity: .85; max-width: 30ch; font-size: 1.05rem; }
.salon--sen .btn { align-self: flex-start; }
.gallery__note { margin-top: 12px; color: var(--muted); font-size: .92rem; }

/* ---------- önce / sonra ---------- */
.compare { padding: clamp(90px, 12vw, 160px) 0; background: var(--bg-2); }
.compare__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; align-items: center; }
.ba { position: relative; justify-self: center; width: min(76vw, 340px); user-select: none; -webkit-user-select: none; }
.ba .scr img { pointer-events: none; }
.ba__after { clip-path: inset(0 0 0 var(--pos, 50%)); }
.ba__line { position: absolute; top: 1.6%; bottom: 1.6%; left: calc(4.4% + 91.2% * var(--p, .5)); width: 2px; margin-left: -1px; background: var(--ink); z-index: 2; pointer-events: none; }
.ba__knob { position: absolute; top: 50%; left: calc(4.4% + 91.2% * var(--p, .5)); width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; background: var(--ink); color: var(--bg); display: grid; place-items: center; z-index: 3; box-shadow: 0 10px 30px rgb(0 0 0 / .45); pointer-events: none; }
.ba__knob .ico { width: 24px; height: 24px; }
.ba input { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; touch-action: pan-y; }
.ba__tag { position: absolute; top: auto; bottom: -46px; z-index: 3; padding: 6px 11px; border-radius: 999px; font-size: .76rem; font-weight: 600; background: rgb(11 13 12 / .78); color: var(--ink); pointer-events: none; }
.ba__tag--l { left: 6px; } .ba__tag--r { right: 6px; }
.ba { margin-bottom: 46px; }
.compare__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.salon__spec { grid-template-columns: repeat(4, auto); }
@media (max-width: 559px) { .salon__spec { grid-template-columns: repeat(2, auto); } }
@media (min-width: 960px) { .compare__grid { grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 80px; } }

/* ---------- panel vitrini ---------- */
.panel-show { padding: clamp(90px, 12vw, 160px) 0 clamp(60px, 8vw, 110px); overflow: hidden; }
.panel-show__head { text-align: center; max-width: 780px; margin-inline: auto; }
.panel-show .h2 { margin-inline: auto; }
.panel-show .lead { margin-inline: auto; }
.screen { margin-top: clamp(40px, 6vw, 72px); perspective: 1400px; }
.screen__in { border-radius: 18px; padding: 8px; background: var(--frame); box-shadow: 0 60px 120px -40px rgb(0 0 0 / .9), 0 0 0 1px rgb(241 242 238 / .07) inset; transform-origin: 50% 0; }
.screen__in img { border-radius: 12px; width: 100%; aspect-ratio: 1600 / 1000; object-fit: cover; object-position: left top; }
/* ---------- panel işlevleri ---------- */
.feat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; margin-top: clamp(36px, 5vw, 60px); }
.feat__list { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x proximity; padding: 2px 2px 8px; margin-inline: -2px; scrollbar-width: none; }
.feat__list::-webkit-scrollbar { display: none; }
.feat__btn { display: inline-flex; align-items: center; gap: 10px; min-height: 46px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--text); font: 500 .95rem/1.2 var(--f-body); cursor: pointer; white-space: nowrap; scroll-snap-align: start; text-align: left; transition: background-color .3s, color .3s, border-color .3s; -webkit-tap-highlight-color: transparent; }
.feat__btn .ico { color: var(--muted); transition: color .3s; }
.feat__btn small { display: none; }
.feat__btn[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.feat__btn[aria-pressed="true"] .ico { color: var(--accent); }
.feat__desc { margin-top: 18px; min-height: 3.2em; color: var(--text); max-width: 52ch; }
.feat__stage { position: relative; }
.feat__desk { position: relative; aspect-ratio: 1600 / 1000; border-radius: 12px; overflow: hidden; background: #f3f6f5; }
.feat__desk video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; transition: opacity .3s ease; }
.feat__desk video.gecis, .feat__phone video.gecis { opacity: 0; }
.feat .screen { margin-top: 0; }
.feat__phone { position: absolute; right: 0; bottom: -10%; width: 23%; max-width: 260px; }
@media (min-width: 760px) { .feat__stage { padding-right: 8%; } }
@media (max-width: 759px) {
  .feat .screen { display: none; }
  .feat__phone { position: relative; right: auto; bottom: auto; width: min(68vw, 290px); max-width: none; margin-inline: auto; }
}
@media (min-width: 1080px) {
  .feat { grid-template-columns: 330px minmax(0, 1fr); gap: 48px; align-items: start; }
  .feat__list { flex-direction: column; overflow: visible; padding: 0; margin: 0; gap: 4px; }
  .feat__btn { width: 100%; white-space: normal; border-radius: 18px; padding: 14px 16px; align-items: flex-start; border-color: transparent; }
  .feat__btn .ico { margin-top: .15em; }
  .feat__btn span { display: grid; gap: 4px; }
  .feat__btn b { font-weight: 600; }
  .feat__btn[aria-pressed="true"] { background: var(--surface); color: var(--ink); border-color: var(--line); }
  .feat__btn[aria-pressed="true"] small { display: block; color: var(--text); font-size: .9rem; line-height: 1.5; }
  .feat__btn:hover:not([aria-pressed="true"]) { background: rgb(241 242 238 / .05); }
  .feat__desc { display: none; }
  .feat__stage { padding-bottom: 7%; }
}
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; }
.chips li { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-size: .95rem; }
.chips .ico { color: var(--accent); }
@media (max-width: 759px) { .screen__in img { aspect-ratio: 5 / 6; } }

/* ---------- süreç ---------- */
.process { padding: clamp(90px, 12vw, 160px) 0; border-top: 1px solid var(--line); }
.steps { position: relative; margin-top: clamp(36px, 5vw, 64px); display: grid; }
.steps__line { position: absolute; left: 11px; top: 8px; bottom: 48px; width: 2px; background: var(--line); }
.steps__line i { position: absolute; inset: 0; background: var(--accent); transform-origin: top; }
.js:not(.rm) .steps__line i { transform: scaleY(0); }
.step { position: relative; padding: 0 0 44px 54px; }
.step::before { content: ""; position: absolute; left: 4px; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--bg); border: 2px solid var(--muted); transition: border-color .4s, background-color .4s, scale .4s var(--ease); }
.step.on::before, .rm .step::before { border-color: var(--accent); background: var(--accent); scale: 1.15; }
.step h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); }
.step p { margin-top: 8px; max-width: 46ch; }
@media (min-width: 960px) { .steps { grid-template-columns: 1fr 1fr; column-gap: 64px; } .steps__line { display: none; } .step { padding-bottom: 56px; } }

/* ---------- paketler ---------- */
.plans-sec { padding: clamp(90px, 12vw, 160px) 0; border-top: 1px solid var(--line); }
.plans { margin-top: clamp(36px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.plan { position: relative; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); padding: clamp(24px, 4vw, 34px); display: flex; flex-direction: column; overflow: hidden; isolation: isolate; }
.plan::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgb(255 90 44 / .18), transparent 60%); pointer-events: none; }
.plan:hover::after { opacity: 1; }
.plan h3 { font-size: 1.55rem; }
.plan > p { margin-top: 10px; color: var(--muted); }
.checks { margin: 22px 0 30px; display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; }
.checks .ico { color: var(--accent); margin-top: .2em; }
.plan .btn { margin-top: auto; align-self: flex-start; }
.plan--pick { border-color: rgb(255 90 44 / .55); background: linear-gradient(180deg, rgb(255 90 44 / .12), var(--surface) 45%); }
.badge { align-self: flex-start; margin-bottom: 16px; padding: 6px 12px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-size: .8rem; font-weight: 600; }
.plans__note { margin-top: 22px; color: var(--muted); max-width: 70ch; }
@media (min-width: 980px) { .plans { grid-template-columns: 1fr 1.15fr 1fr; } .plan--pick { margin-block: -14px; padding-block: 46px; } }

/* ---------- diğer işler ---------- */
.other { padding: clamp(56px, 8vw, 96px) 0; border-block: 1px solid var(--line); background: var(--bg-2); }
.other__in { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px 26px; align-items: center; }
.other img { width: clamp(76px, 14vw, 112px); border-radius: 22%; }
.other h2 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); }
.other p { margin-top: 8px; max-width: 60ch; }
.other .btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 760px) { .other__in { grid-template-columns: auto minmax(0, 1fr) auto; } .other .btn { grid-column: auto; } }

/* ---------- SSS ---------- */
.faq-sec { padding: clamp(90px, 12vw, 160px) 0; }
.faq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.faq__list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 70px; padding: 14px 0; cursor: pointer; list-style: none; font: 600 1.1rem/1.3 var(--f-body); color: var(--ink); -webkit-tap-highlight-color: transparent; }
.faq summary::-webkit-details-marker { display: none; }
.pm { position: relative; flex: none; width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgb(241 242 238 / .18); }
.pm::before, .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -.75px 0 0 -6px; background: var(--ink); transition: rotate .4s var(--ease); }
.pm::after { rotate: 90deg; }
details[open] .pm::after { rotate: 0deg; }
.faq .ans { overflow: hidden; }
.faq .ans p { padding: 0 0 24px; max-width: 62ch; }
@media (min-width: 980px) { .faq { grid-template-columns: .8fr 1.2fr; gap: 64px; } .faq__head { position: sticky; top: 120px; align-self: start; } }

/* ---------- kapanış ---------- */
.final { position: relative; padding: clamp(100px, 14vw, 200px) 0; overflow: hidden; isolation: isolate; text-align: center; }
.final__bg { position: absolute; inset: -12% 0; z-index: -1; background: url(media/hero-poster.webp) center / cover; opacity: .6; }
.final__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 50%, rgb(11 13 12 / .2), var(--bg) 88%); }
.final { text-align: left; }
.final__grid { display: grid; gap: clamp(36px, 5vw, 72px); align-items: center; }
.final h2 { font-size: min(clamp(2.6rem, 1.2rem + 4.6vw, 5.6rem), 12.6vw); max-width: 12ch; }
.final p { margin-top: 22px; max-width: 40ch; font-size: 1.12rem; }
.final__iletisim { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 30px; }
.final__mail { color: var(--text); text-decoration: none; padding: 10px 0; border-bottom: 1px solid var(--line); }
.final__mail:hover { color: var(--ink); border-color: var(--accent); }
.final__tel { display: inline-flex; align-items: center; gap: 10px; font: 600 clamp(1.25rem, 1rem + .8vw, 1.6rem)/1 var(--f-display); color: var(--ink); text-decoration: none; padding: 10px 0; }
@media (min-width: 960px) { .final__grid { grid-template-columns: minmax(0, 1.1fr) minmax(360px, 440px); } }
/* WhatsApp sohbeti: yazdığınız salon adı mesaja eklenir, gönder WhatsApp'ı açar */
.sohbet { display: grid; border-radius: 28px; overflow: hidden; background: #0b141a; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .85), 0 0 0 1px rgb(255 255 255 / .07); }
.sohbet__ust { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 14px 18px; background: #202c33; }
.sohbet__pp { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.sohbet__kim b { display: block; color: #e9edef; font-size: 1.02rem; }
.sohbet__kim small { display: flex; align-items: center; gap: 6px; color: #8696a0; font-size: .82rem; }
.cevrim { width: 8px; height: 8px; border-radius: 50%; background: #25d366; }
.sohbet__wa { width: 26px; height: 26px; color: #25d366; }
.sohbet__ic { display: grid; gap: 8px; align-content: start; min-height: 260px; padding: 18px 16px; background: #0b141a radial-gradient(circle at 20% 10%, rgb(255 255 255 / .03), transparent 40%); }
.sohbet__gun { justify-self: center; padding: 4px 10px; border-radius: 8px; background: #182229; color: #8696a0; font-size: .74rem; font-weight: 600; }
.balon { position: relative; margin: 0; max-width: 86%; padding: 9px 12px 6px; border-radius: 4px 14px 14px 14px; background: #202c33; color: #e9edef; font-size: .95rem; line-height: 1.45; }
.balon small { display: block; text-align: right; font-size: .7rem; color: #8696a0; margin-top: 2px; }
.balon--giden { justify-self: end; border-radius: 14px 4px 14px 14px; background: #005c4b; }
.balon--giden small { color: #a6c9c0; }
.sohbet__yaz { display: grid; grid-template-columns: minmax(0, 1fr) 48px; gap: 8px; padding: 10px 12px 12px; background: #0b141a; }
.sohbet__yaz input { height: 48px; padding: 0 18px; border-radius: 999px; border: 0; background: #2a3942; color: #e9edef; font: 500 1rem var(--f-body, inherit); outline: none; min-width: 0; }
.sohbet__yaz input::placeholder { color: #8696a0; }
.sohbet__yaz input:focus-visible { box-shadow: 0 0 0 2px #25d366; }
.sohbet__gonder { width: 48px; height: 48px; border-radius: 50%; border: 0; display: grid; place-items: center; background: #25d366; color: #0b141a; cursor: pointer; transition: transform .2s; }
.sohbet__gonder:active { transform: scale(.94); }
.sohbet__gonder .ico { width: 22px; height: 22px; }

.foot { padding: 28px 0 calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); font-size: .92rem; color: var(--muted); }
.foot__in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 18px 32px; }
.foot__kim { display: grid; gap: 12px; justify-items: start; }
.foot__logo { width: auto; height: 64px; margin-left: -14px; }
.foot__kim b { font: 650 1.3rem/1.1 var(--f-display); color: var(--ink); letter-spacing: -.02em; }
.foot__kim span { color: var(--text); }
.foot__ilet { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: center; }
.foot__alt { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .85rem; }
.foot a { color: var(--text); display: inline-block; padding: 12px 0; margin: -12px 0; }

/* ---------- mobil yüzen WhatsApp ---------- */
.fab { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 45; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); box-shadow: 0 14px 30px -10px rgb(0 0 0 / .7); translate: 0 130px; transition: translate .5s var(--ease); }
.fab .ico { width: 28px; height: 28px; }
.fab.show { translate: 0 0; }
.fab { display: none !important; }

/* ---------- JS çalışırken giriş durumları (yalnızca hareket açıkken) ---------- */
.js:not(.rm) [data-rise] { opacity: 0; }
.js:not(.rm):not(.ready) .hero__in { visibility: hidden; animation: guvenlik 0s 5s forwards; }
.intro-on .intro { animation: guvenlik-gizle 0s 7s forwards; }
@keyframes guvenlik { to { visibility: visible; } }
@keyframes guvenlik-gizle { to { visibility: hidden; } }
.rm .gallery__pin, .no-js .gallery__pin { overflow-x: auto; scroll-snap-type: x mandatory; }
.rm .salon { scroll-snap-align: center; }
/* mobil: galeri doğal parmak kaydırması (sabitlenmiş yatay animasyon iPhone'da takılıyordu) */
@media (max-width: 959px) {
  .gallery__pin { overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .gallery__pin::-webkit-scrollbar { display: none; }
  .gallery__track { padding-inline: 16px; }
  .salon { scroll-snap-align: center; height: min(170vw, 700px, 86svh); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.gizli { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 959px) { .hero__kart--bildirim { width: 56%; left: max(2%, 16px); top: 12%; } .hero__kart--wa { width: 50%; right: max(2%, 16px); top: 54%; } .hero__kart--bilet { display: none; } }
.final .sohbet .balon { margin: 0; max-width: 86%; font-size: .95rem; }
.sohbet-gorunur .fab { translate: 0 130px; }

/* sohbet: profil kartı (tam fotoğraf) */
.sohbet__profil { display: grid; justify-items: center; gap: 4px; text-align: center; padding: 6px 10px 14px; }
.sohbet__profil img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; margin-bottom: 8px; box-shadow: 0 0 0 3px #202c33; }
.sohbet__profil b { color: #e9edef; font: 650 1.25rem/1.2 var(--f-display); }
.sohbet__profil span { color: #aebac1; font-size: .92rem; }
.sohbet__profil small { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 4px 10px; border-radius: 999px; background: #182229; color: #8696a0; font-size: .74rem; font-weight: 600; }
.sohbet__profil small .ico { width: 14px; height: 14px; color: #25d366; }
.sohbet__kim small { color: #25d366 !important; }

/* ---------- telefon maketi: iPhone 15 Pro oranları ----------
   gövde 71.6 mm; ekran 390x844 içerik + 13cqw durum çubuğu. Kenar: yanda %4.4 genişlik, üst/altta %1.6 yükseklik (≈ eşit mm).
   Ekran, telefonun içine konumlandırılır (inset yüzdesi telefonun kendi boyutundan): kalınlık her boyutta aynı oranda kalır. */
.tel, .device, .salon__phones .ph { aspect-ratio: 1 / 2.212; height: auto; border-radius: 16.5% / 7.6%; background: #050506;
  box-shadow: inset 0 0 0 1px #6b6b70, inset 0 0 0 2.5px #2a2a2d, inset 0 0 0 3.5px #0b0b0c,
    0 1px 0 rgb(255 255 255 / .06), 0 40px 70px -34px rgb(0 0 0 / .9), 0 18px 30px -18px rgb(0 0 0 / .55); }
.salon__phones .ph { height: 100%; width: auto; }
.tel::before, .device::before, .salon__phones .ph::before { content: ""; position: absolute; left: -1.5px; top: 20%; width: 2px; height: 15%; border-radius: 2px 0 0 2px; background: linear-gradient(#3a3a3e 0 43%, transparent 43% 57%, #3a3a3e 57%); }
.tel::after, .device::after, .salon__phones .ph::after { content: ""; position: absolute; right: -1.5px; top: 27%; width: 2px; height: 10%; border-radius: 0 2px 2px 0; background: #3a3a3e; }
.tel__ekran, .device .scr, .ph__ekran { position: absolute; inset: 1.6% 4.4%; display: flex; flex-direction: column; overflow: hidden; border-radius: 13.2% / 6.1%; background: #f4f6f5; container-type: inline-size; }
.sb { --sb-bg: #f4f6f5; --sb-fg: #000; position: relative; flex: none; height: 13cqw; background: var(--sb-bg); color: var(--sb-fg); transition: background-color .35s, color .35s; }
.sb__saat { position: absolute; left: 0; width: 34cqw; top: 7.6cqw; translate: 0 -50%; padding-left: 1.6cqw; text-align: center; font: 600 4.33cqw/1 -apple-system, "SF Pro Text", "SB Rakam", system-ui, sans-serif; letter-spacing: -.02em; font-feature-settings: "tnum" 0, "cv11" 1; }
.sb__ada { position: absolute; left: 50%; top: 2.8cqw; width: 32cqw; height: 9.4cqw; translate: -50% 0; border-radius: 99px; background: #000; }
.sb__ik { position: absolute; right: 0; width: 34cqw; top: 7.6cqw; translate: 0 -50%; padding-right: 1.4cqw; display: flex; align-items: center; justify-content: center; gap: 1.45cqw; }
.sb__ik svg { display: block; fill: currentColor; overflow: visible; }
.sb__huc { width: 4.35cqw; height: 2.8cqw; }
.sb__wifi { width: 3.95cqw; height: 2.85cqw; }
.sb__pil { width: 7cqw; height: 3.25cqw; }
.ekr { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.ekr > img, .ekr > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.alt { --alt-bg: #f4f6f5; position: relative; flex: none; height: 5.4cqw; background: var(--alt-bg); transition: background-color .35s; }
.alt::after { content: ""; position: absolute; left: 50%; bottom: 1.5cqw; width: 35cqw; height: 1.35cqw; translate: -50% 0; border-radius: 9px; background: var(--ev, rgb(11 11 12 / .8)); }
.ba .alt { background: linear-gradient(90deg, var(--alt-bg) var(--pos, 50%), var(--alt-bg2, var(--alt-bg)) var(--pos, 50%)); }
/* önce/sonra: durum çubuğu iki yarıda, her biri kendi ekranının rengi */
.ba .sb { background: linear-gradient(90deg, var(--sb-bg) var(--pos, 50%), var(--sb-bg2, var(--sb-bg)) var(--pos, 50%)); }
.ba .sb__ik { color: var(--sb-fg2, var(--sb-fg)); }

/* ---------- süreç: taslaktan ana siteye ---------- */
.surec-detay { margin-top: clamp(24px, 4vw, 48px); display: grid; gap: clamp(28px, 4vw, 56px); padding-top: clamp(32px, 4vw, 52px); border-top: 1px solid var(--line); }
.surec-detay__metin p { margin-top: 14px; max-width: 54ch; color: var(--muted); }
.surec-detay__metin .surec-detay__lead { margin-top: 16px; color: var(--ink); font-size: clamp(1.12rem, 1rem + .5vw, 1.4rem); line-height: 1.45; }
.surec-detay__destek { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; align-items: start; margin-top: 22px !important; padding: 16px 18px; border-radius: 16px; border: 1px solid rgb(255 90 44 / .35); background: rgb(255 90 44 / .07); color: var(--ink) !important; }
.surec-detay__destek .ico { color: var(--accent); margin-top: .15em; }
.surec-detay__sorular { border-radius: var(--r-card); border: 1px solid var(--line); background: var(--surface); padding: clamp(22px, 3vw, 32px); }
.surec-detay__sorular h3 { font-size: 1.25rem; }
.surec-detay__sorular ol { margin-top: 18px; display: grid; gap: 4px; counter-reset: s; }
.surec-detay__sorular li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: start; padding: 11px 0; border-bottom: 1px solid var(--line); }
.surec-detay__sorular li:last-child { border-bottom: 0; }
.surec-detay__sorular .ico { width: 20px; height: 20px; color: var(--accent); margin-top: .1em; }
@media (min-width: 960px) { .surec-detay { grid-template-columns: 1fr 1.05fr; align-items: start; } }

/* ---------- paketler: fiyat, geniş kart, ek hizmetler ---------- */
.plan__fiyat { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.plan__fiyat b { font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem); font-weight: 700; letter-spacing: -.02em; line-height: 1; color: var(--ink); }
.plan__fiyat s { color: var(--muted); font-size: 1.05rem; }
.plan__fiyat small { flex-basis: 100%; color: var(--muted); font-size: .86rem; }
.plan > .plan__fiyat + .checks { margin-top: 20px; }
.plan--genis { margin-top: 16px; display: grid; gap: 18px; align-items: center; }
.plan--genis__bas { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.plan--genis__bas p { margin-top: 8px; color: var(--muted); max-width: 56ch; }
.plan--genis .plan__fiyat { margin-top: 0; }
.plan--genis .btn { margin-top: 0; }
.plan__ik { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: rgb(255 90 44 / .12); color: var(--accent); }
@media (min-width: 980px) { .plan--genis { grid-template-columns: minmax(0, 1fr) auto auto; gap: 36px; } .plan--genis .plan__fiyat small { flex-basis: auto; } }
.ekler__b { margin-top: clamp(40px, 5vw, 60px); font-size: 1.35rem; }
.ekler { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.ekler li { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--surface); }
.ekler li > .ico { width: 26px; height: 26px; color: var(--accent); margin-bottom: 4px; }
.ekler b { font-size: 1.02rem; line-height: 1.3; }
.ekler p { color: var(--muted); font-size: .92rem; }
.ekler a { margin-top: auto; padding-top: 8px; display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; font-size: .92rem; }
.ekler a .ico { width: 16px; height: 16px; }
@media (min-width: 640px) { .ekler { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .ekler { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ekler a { text-decoration: none; }

/* alt bilgi: hizmet sayfaları (SEO iç bağlantı) */
.foot__hizmet { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 4px 18px; align-items: center; }
.foot__hizmet b { color: var(--ink); font-weight: 650; margin-right: 6px; }
.foot .foot__hizmet a { padding: 10px 0; margin: 0; color: var(--text); }
.foot .foot__hizmet a:hover { color: var(--ink); }