/* =====================================================================
   Halken 30 · Apple ürün sayfası hissi
   Font: sistem fontu (Apple cihazlarda SF Pro), diğerlerinde Inter.
   Bölüm ritmi: siyah ve açık gri (#f5f5f7) bilinçli olarak sırayla.
   Vurgu: Halken mavisi (açık zeminde #0a5bd3, koyu zeminde #4b9bff).
   Köşeler: kartlar 28px, küçük karolar 18px, butonlar tam yuvarlak.
   ===================================================================== */
:root {
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --black: #013386;
  --hb-1: #014cb0;          /* logodaki Halken mavisi (sol) */
  --hb-2: #013386;          /* logodaki Halken mavisi (sağ) */
  --hb-deep: #01215a;       /* derin lacivert */
  --hb-grad: linear-gradient(115deg, var(--hb-1) 0%, #023f9c 50%, var(--hb-2) 100%);
  --ink-d: #ffffff;
  --ink-d2: rgba(255,255,255,.74);
  --light: #f5f5f7;
  --white: #fff;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --blue: #014cb0;
  --blue-hover: #0158cc;
  --blue-d: #bcd6ff;
  --r: 28px;
  --nav-g: 44px;
  --nav-l: 52px;
  --ease: cubic-bezier(.25, .1, .25, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  /* yaylı (spring) geri dönüş: hafif sönümlü */
  --spring: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1);
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-l) + 8px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { font-family: var(--font); font-size: 17px; line-height: 1.47; letter-spacing: -.022em; color: var(--ink); background: var(--black); -webkit-font-smoothing: antialiased; overflow-x: clip; font-optical-sizing: auto; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
[data-lang]:not(.lang-active) { display: none !important; }
:focus-visible { outline: 2px solid var(--blue-d); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; top: -60px; left: 12px; z-index: 200; padding: 8px 14px; border-radius: 999px; background: var(--white); color: var(--ink); }
.skip:focus { top: 8px; }
.wrap { width: 100%; max-width: 1024px; margin: 0 auto; padding: 0 22px; }
.ph { font-size: 1em; }

.dark { background: var(--hb-2); color: var(--ink-d); }
.hero, .finale { background: var(--hb-grad); }
.scene { background: linear-gradient(180deg, var(--hb-2) 0%, var(--hb-deep) 30%, var(--hb-deep) 100%); }
.values { background: linear-gradient(180deg, var(--hb-deep) 0%, var(--hb-2) 100%); }
.light { background: var(--light); color: var(--ink); }
.light-2 { background: var(--white); color: var(--ink); }

/* ---------- tipografi ---------- */
.h1 { font-size: clamp(48px, 7vw, 80px); line-height: 1.05; font-weight: 600; letter-spacing: -.015em; }
.h2 { font-size: clamp(40px, 5.4vw, 56px); line-height: 1.07; font-weight: 600; letter-spacing: -.005em; text-wrap: balance; }
.lead { font-size: clamp(19px, 1.8vw, 21px); line-height: 1.38; font-weight: 400; letter-spacing: .011em; color: var(--ink-2); max-width: 36ch; margin: 14px auto 0; }
.dark .lead { color: var(--ink-d2); }
.kicker { font-size: 21px; font-weight: 600; color: var(--blue); margin-bottom: 6px; letter-spacing: .011em; }
.center-head { text-align: center; }
.grad { background: linear-gradient(90deg, #ffffff 0%, #d6e6ff 50%, #9cc3ff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- butonlar ---------- */
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 22px; border-radius: 980px; background: var(--blue); color: #fff; font-size: 17px; font-weight: 400; letter-spacing: -.022em; white-space: nowrap; transition: background .2s var(--ease), transform .45s var(--spring); }
.dark .pill { background: #fff; color: var(--hb-2); }
.pill:hover { background: var(--blue-hover); }
.dark .pill:hover { background: #e6efff; }
.pill:active { transform: scale(.97); transition: transform .1s ease-out; }
.pill-ghost { background: transparent !important; color: #fff !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.pill-ghost:hover { background: rgba(255,255,255,.1) !important; }
.pill-sm { min-height: 28px; padding: 0 12px; font-size: 12px; letter-spacing: -.01em; }
.more { display: inline-flex; align-items: center; gap: 2px; color: var(--blue); font-size: 17px; }
.dark .more { color: var(--blue-d); }
.more:hover { text-decoration: underline; }
.more .ph { font-size: 13px; transform: translateY(1px); transition: transform .3s var(--spring); }
.more:hover .ph { transform: translate(2px, 1px); }

/* ---------- genel menü (cam) ---------- */
.gnav { position: relative; z-index: 60; height: var(--nav-g); background: rgba(1,30,82,.86); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); }
.gnav-row { height: 100%; display: flex; align-items: center; justify-content: space-between; }
.gnav-logo img { height: 22px; width: auto; }
.lang { display: flex; gap: 2px; }
.lang button { padding: 4px 9px; border-radius: 980px; font-size: 12px; color: rgba(245,245,247,.8); letter-spacing: 0; }
.lang button:hover { color: #fff; }
.lang button.active { background: rgba(245,245,247,.16); color: #fff; }

/* ---------- ürün menüsü (yapışkan, cam) ---------- */
.lnav { position: sticky; top: 0; z-index: 55; height: var(--nav-l); color: var(--ink-d); background: rgba(1,46,124,.72); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(255,255,255,.16); transition: background .4s var(--ease); }
.lnav-row { height: 100%; display: flex; align-items: center; gap: 24px; }
.lnav-title { font-size: 21px; font-weight: 600; letter-spacing: .011em; margin-right: auto; }
.lnav-links { display: flex; gap: 22px; }
.lnav-links a { font-size: 12px; color: rgba(245,245,247,.8); letter-spacing: -.01em; }
.lnav-links a:hover { color: var(--blue-d); }
.lnav .pill { background: #fff; color: var(--hb-2); }
.lnav-sentinel { display: block; height: 1px; margin-top: -1px; }
@media (max-width: 734px) { .lnav-links { display: none; } .lnav-title { font-size: 19px; } }
@media (prefers-reduced-transparency: reduce) {
  .gnav, .lnav { background: var(--hb-2); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---------- hero ---------- */
.hero { padding-top: 64px; text-align: center; overflow-x: clip; }
.hero-mark { width: 104px; height: auto; margin: 0 auto 18px; }
.hero-title { font-size: clamp(56px, 9vw, 96px); line-height: 1.02; font-weight: 600; letter-spacing: -.02em; }
.hero-sub { margin: 18px auto 0; font-size: clamp(21px, 2.2vw, 28px); line-height: 1.14; letter-spacing: .007em; color: var(--ink-d2); max-width: 26ch; }
.hero-cta { margin-top: 28px; display: flex; gap: 26px; justify-content: center; align-items: center; flex-wrap: wrap; }
@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: rise 1.2s var(--ease-out) both; }
  .hero-copy > :nth-child(2) { animation-delay: .08s; }
  .hero-copy > :nth-child(3), .hero-copy > :nth-child(4), .hero-copy > :nth-child(5) { animation-delay: .16s; }
  .hero-copy > :nth-child(6) { animation-delay: .26s; }
}
@keyframes rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.zoom { margin-top: 64px; height: 170vh; view-timeline: --zoom block; }
.zoom-frame { position: sticky; top: var(--nav-l); height: calc(100dvh - var(--nav-l)); overflow: hidden; display: grid; place-items: center; }
.zoom-frame img { width: 100%; height: 100%; object-fit: cover; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .zoom-frame img { animation: unzoom linear both; animation-timeline: --zoom; animation-range: contain 0% contain 55%; }
  }
}
@keyframes unzoom { from { transform: scale(.72); border-radius: 36px; } to { transform: scale(1); border-radius: 0; } }
@supports not (animation-timeline: view()) { .zoom { height: auto; } .zoom-frame { position: static; height: 72vh; } }
@media (prefers-reduced-motion: reduce) { .zoom { height: auto; } .zoom-frame { position: static; height: 72vh; } }

/* ---------- sabit rakam sahnesi ---------- */
.scene { height: 420vh; view-timeline: --scene block; }
.scene-sticky { position: sticky; top: var(--nav-l); height: calc(100dvh - var(--nav-l)); display: grid; place-items: center; overflow: hidden; }
.line { grid-area: 1 / 1; text-align: center; padding: 0 22px; opacity: 0; }
.line-big { font-size: clamp(64px, 12vw, 144px); line-height: 1.02; font-weight: 700; letter-spacing: -.03em; }
.line-cap { margin: 18px auto 0; font-size: clamp(19px, 2vw, 24px); line-height: 1.3; color: var(--ink-d2); max-width: 32ch; letter-spacing: .009em; }
.l1 .line-big { background: linear-gradient(180deg, #fff 30%, #9db8e8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.l4 .line-big { background: linear-gradient(90deg, #ffffff, #8fbaff); -webkit-background-clip: text; background-clip: text; color: transparent; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .line { animation: lineInOut linear both; animation-timeline: --scene; }
    .l1 { animation-range: contain 0% contain 26%; }
    .l2 { animation-range: contain 24% contain 50%; }
    .l3 { animation-range: contain 48% contain 74%; }
    .l4 { animation-range: contain 72% contain 100%; animation-name: lineIn; }
  }
}
@keyframes lineInOut { 0% { opacity: 0; transform: translateY(40px) scale(.96); } 25%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-40px) scale(1.02); } }
@keyframes lineIn { 0% { opacity: 0; transform: translateY(40px) scale(.96); } 30%, 100% { opacity: 1; transform: none; } }
/* destek yoksa ya da hareket azaltılmışsa: sade liste */
@supports not (animation-timeline: view()) {
  .scene { height: auto; padding: 120px 0; }
  .scene-sticky { position: static; height: auto; display: grid; gap: 80px; }
  .line { grid-area: auto; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .scene { height: auto; padding: 120px 0; }
  .scene-sticky { position: static; height: auto; display: grid; gap: 80px; }
  .line { grid-area: auto; opacity: 1; animation: none !important; }
}

/* ---------- galeri ---------- */
.gallery { padding: 120px 0 72px; overflow-x: clip; }
.g-head { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap; margin-bottom: 40px; }
.g-scroller { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; scroll-padding-inline: max(22px, calc((100vw - 1024px) / 2 + 22px)); overscroll-behavior-x: contain; }
.g-scroller::-webkit-scrollbar { display: none; }
.g-track { display: flex; gap: 20px; width: max-content; padding: 4px max(22px, calc((100vw - 1024px) / 2 + 22px)) 24px; }
.g-card { position: relative; flex: 0 0 auto; width: clamp(300px, 34vw, 400px); height: clamp(480px, 62vh, 600px); border-radius: var(--r); overflow: hidden; background: var(--white); scroll-snap-align: start; display: flex; flex-direction: column; box-shadow: 2px 4px 12px rgba(0,0,0,.08); transition: transform .5s var(--spring), box-shadow .4s var(--ease); }
.g-card:hover { transform: scale(1.015); box-shadow: 2px 8px 28px rgba(0,0,0,.14); }
.g-card:active { transform: scale(.99); transition: transform .1s ease-out; }
.g-text { padding: 30px 30px 0; }
.g-place { font-size: 12px; font-weight: 600; letter-spacing: -.01em; color: var(--ink-2); text-transform: uppercase; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.g-badge { text-transform: none; font-weight: 600; color: var(--blue); }
.g-name { margin-top: 6px; font-size: 28px; line-height: 1.14; font-weight: 600; letter-spacing: .007em; }
.g-kind { margin-top: 6px; font-size: 17px; color: var(--ink); }
.g-card img { margin-top: auto; width: 100%; height: 58%; object-fit: cover; }
.g-sold { background: var(--hb-grad); color: var(--ink-d); justify-content: space-between; }
.g-sold .g-place { color: var(--ink-d2); }
.g-list { list-style: none; margin-top: 14px; display: grid; gap: 4px; }
.g-list li { font-size: 28px; font-weight: 600; line-height: 1.18; letter-spacing: .004em; }
.g-sold-mark { width: 46% !important; height: auto !important; margin: 0 30px 30px auto !important; opacity: .9; }
.g-paddles { display: flex; justify-content: flex-end; gap: 14px; margin-top: 8px; }
.paddle { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: rgba(210,210,215,.64); color: rgba(0,0,0,.56); font-size: 18px; transition: background .2s, color .2s, transform .45s var(--spring), opacity .2s; }
.paddle:hover { background: rgba(223,223,227,.7); color: rgba(0,0,0,.64); }
.paddle:active { transform: scale(.94); transition: transform .1s ease-out; }
.paddle[disabled] { opacity: .42; cursor: default; }

/* ---------- yeni bölüm karoları ---------- */
.chapter { padding: 120px 0; }
.tiles { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tile { position: relative; border-radius: var(--r); overflow: hidden; background: var(--light); min-height: 640px; display: flex; flex-direction: column; text-align: center; isolation: isolate; }
.tile-wide { grid-column: 1 / -1; min-height: 720px; background: var(--hb-2); color: var(--ink-d); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--ease-out); }
.tile:hover img { transform: scale(1.03); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(245,245,247,.97) 0%, rgba(245,245,247,.9) 30%, rgba(245,245,247,0) 58%); }
.tile-wide::after { background: linear-gradient(180deg, rgba(1,40,110,.92) 0%, rgba(1,40,110,.74) 34%, rgba(1,40,110,0) 62%); }
.tile-text { padding: 52px 32px 0; }
.tile-place { font-size: 17px; font-weight: 600; color: var(--blue); }
.tile-wide .tile-place { color: #bcd6ff; }
.tile-name { margin-top: 4px; font-size: clamp(34px, 4vw, 48px); line-height: 1.08; font-weight: 600; letter-spacing: -.003em; }
.tile-desc { margin: 10px auto 0; font-size: 19px; line-height: 1.32; max-width: 38ch; letter-spacing: .012em; }
.tile-wide .tile-desc { color: var(--ink-d); }
.tile-links { margin-top: 16px; display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; }
.tile-wide .more { color: #fff; }
@media (max-width: 734px) {
  .tiles { grid-template-columns: 1fr; }
  .tile, .tile-wide { min-height: 560px; }
  .tile-text { padding: 40px 22px 0; }
}

/* ---------- değerler ---------- */
.values { padding: 130px 0 0; }
.hls { margin-top: 64px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
.hl .ph { font-size: 34px; color: #fff; width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; background: rgba(255,255,255,.12); }
.hl h3 { margin-top: 14px; font-size: 21px; font-weight: 600; letter-spacing: .011em; }
.hl p { margin-top: 6px; font-size: 17px; color: var(--ink-d2); }
.wide-img { margin-top: 96px; max-width: 1180px; }
.wide-img img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; border-radius: var(--r) var(--r) 0 0; }
@media (max-width: 900px) { .hls { grid-template-columns: 1fr 1fr; gap: 36px 24px; } }
@media (max-width: 520px) { .hls { grid-template-columns: 1fr; } .wide-img img { aspect-ratio: 4 / 3; } }

/* ---------- yol ---------- */
.path { padding: 120px 0; }
.steps { list-style: none; margin-top: 56px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.step { background: var(--white); border-radius: 18px; padding: 26px 22px; min-height: 150px; display: flex; flex-direction: column; justify-content: space-between; gap: 16px; font-size: 19px; font-weight: 600; line-height: 1.25; letter-spacing: .012em; }
.step .ph { font-size: 26px; color: #fff; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--hb-grad); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }

/* ---------- yorumlar ---------- */
.quotes { padding: 120px 0; }
.qs { margin-top: 56px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.q { background: var(--light); border-radius: var(--r); padding: 48px 40px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px; }
.q blockquote { font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; font-weight: 600; letter-spacing: .004em; }
.q blockquote::before { content: "\201C"; }
.q blockquote::after { content: "\201D"; }
.q figcaption { font-size: 17px; color: var(--ink-2); }
@media (max-width: 734px) { .qs { grid-template-columns: 1fr; } .q { padding: 32px 26px; } }

/* ---------- final ---------- */
.finale { padding: 140px 0 150px; }
.finale-mark { width: 150px; height: auto; margin: 0 auto 30px; }

/* ---------- footer ---------- */
.foot { background: var(--light); color: var(--ink-2); font-size: 12px; line-height: 1.33; letter-spacing: -.01em; padding: 18px 0 22px; }
.foot-note { padding-bottom: 16px; border-bottom: 1px solid #d2d2d7; }
.foot-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; padding: 20px 0; }
.foot h4 { font-size: 12px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.foot ul { list-style: none; display: grid; gap: 8px; }
.foot a { color: #424245; }
.foot a:hover { text-decoration: underline; }
.foot-bottom { border-top: 1px solid #d2d2d7; padding-top: 16px; display: flex; gap: 24px; flex-wrap: wrap; }
.foot-credit { margin-left: auto; }
@media (max-width: 734px) { .foot-cols { grid-template-columns: 1fr 1fr; } }

/* ---------- görünürken gelme ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease-out), transform 1.1s var(--ease-out); }
  .js .reveal.in { opacity: 1; transform: none; }
}
@media (max-width: 734px) {
  .gallery, .chapter, .path, .quotes { padding: 88px 0; }
  .values { padding-top: 96px; }
  .finale { padding: 100px 0 110px; }
}

/* =====================================================================
   v3: tek menü + 3D açılış
   ===================================================================== */
:root { --nav-l: 60px; }
.lnav { background: rgba(1,40,108,.66); border-bottom: 1px solid rgba(255,255,255,.12); }
.lnav-row { gap: 28px; }
.lnav-logo { margin-right: auto; display: flex; }
.lnav-logo img { height: 32px; width: auto; }
.lnav .lang { margin-left: 4px; }
.lnav .pill-sm { min-height: 32px; padding: 0 14px; font-size: 13px; }
@media (max-width: 734px) { .lnav-logo img { height: 24px; } .lnav-row { gap: 12px; } .lang button { padding: 4px 7px; } }
@media (max-width: 420px) { .lnav .pill-sm { display: none; } }

.hero { position: relative; min-height: calc(100dvh - var(--nav-l)); padding: 0; display: grid; align-items: end; isolation: isolate;
  background: linear-gradient(180deg, rgba(1,51,134,0) 62%, var(--hb-2) 100%), var(--hb-grad); }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 50% at 50% 34%, rgba(120,170,255,.28), rgba(120,170,255,0) 70%); }
.stage { position: absolute; inset: 0; z-index: 0; }
.stage canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .45s var(--ease-out); }
.stage.webgl-on canvas { opacity: 1; }
.stage-fallback { position: absolute; left: 50%; top: 37%; width: clamp(200px, 27vw, 600px); height: auto; transform: translate(-50%, -50%); transition: opacity .9s var(--ease-out); filter: drop-shadow(0 18px 40px rgba(0,20,80,.45)); }
/* düz logo yalnızca 3B çalışmazsa görünür; normalde açılış doğrudan animasyonla başlar */
.stage-fallback { opacity: 0; }
.stage.webgl-off:not(.webgl-on) .stage-fallback { opacity: 1; }
.hero-copy { position: relative; z-index: 1; padding: 0 22px 9vh; pointer-events: none; }
.hero-copy a { pointer-events: auto; }
.hero-title { font-size: clamp(44px, 6.6vw, 84px); line-height: 1.04; letter-spacing: -.02em; text-wrap: balance; text-shadow: 0 6px 40px rgba(1,30,90,.35); }
.hero-sub { margin-top: 14px; }
.zoom-wrap { background: var(--hb-2); padding-top: 24px; }
.zoom { margin-top: 0; }
@media (max-width: 734px) {
  .hero { min-height: calc(100svh - var(--nav-l)); }
  .hero-copy { padding-bottom: 7vh; }
  .stage-fallback { top: 23%; width: 62vw; }
}
/* v4: sahnenin altı bir sonraki bölüme yumuşakça bağlansın */
.stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26%; pointer-events: none;
  background: linear-gradient(180deg, rgba(1,51,134,0) 0%, rgba(1,51,134,.55) 55%, var(--hb-2) 100%); }


/* =====================================================================
   Çok sayfalı site: projeler, satışta, proje ve ilan detayları, rehber
   ===================================================================== */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.lnav-links a.is-active { color: #fff; }
.narrow { max-width: 760px; }
.center-cta { text-align: center; margin-top: 44px; }
.h3 { font-size: 24px; line-height: 1.17; font-weight: 600; letter-spacing: .009em; margin-bottom: 14px; }
.lead-l { margin-left: 0; text-align: left; }
.hero-cta-l { justify-content: flex-start; }

/* rozetler */
.badge { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: 0; padding: 3px 9px; border-radius: 980px; text-transform: none; }
.badge-new { background: #e8f0ff; color: var(--hb-1); }
.badge-sale { background: #e6f6ec; color: #1a7f45; }
.badge-done { background: #eef0f4; color: #4a5162; }
.badge-sold { background: rgba(255,255,255,.18); color: #fff; }

/* sayfa başlığı */
.page-hero { background: var(--hb-grad); padding: 96px 0 84px; }
.page-hero .lead { color: var(--ink-d2); }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: 14px; color: rgba(255,255,255,.8); margin-bottom: 18px; flex-wrap: wrap; }
.crumbs a:hover { color: #fff; text-decoration: underline; }
.crumbs .ph { font-size: 11px; opacity: .7; }
.crumbs-dark { color: var(--ink-2); margin-bottom: 22px; }
.crumbs-dark a { color: var(--blue); }

/* filtre çipleri */
.listing { padding: 56px 0 110px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 36px; }
.chip { min-height: 38px; padding: 0 16px; border-radius: 980px; background: var(--white); color: var(--ink); font-size: 15px; box-shadow: inset 0 0 0 1px #d2d2d7; transition: background .2s, color .2s, box-shadow .2s, transform .4s var(--spring); }
.chip b { font-weight: 600; color: var(--ink-2); margin-left: 4px; }
.chip:hover { box-shadow: inset 0 0 0 1px var(--blue); }
.chip:active { transform: scale(.96); transition: transform .1s ease-out; }
.chip.is-on { background: var(--ink); color: #fff; box-shadow: none; }
.chip.is-on b { color: rgba(255,255,255,.7); }
.chips-sm { margin: 0; justify-content: flex-start; flex-wrap: nowrap; }
.chips-sm .chip { min-height: 34px; padding: 0 13px; font-size: 14px; white-space: nowrap; }

/* proje kartları */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.pcard { position: relative; display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: var(--white); box-shadow: 2px 4px 12px rgba(0,0,0,.06); transition: transform .5s var(--spring), box-shadow .4s var(--ease); }
.pcard:hover { transform: translateY(-3px); box-shadow: 2px 12px 32px rgba(0,0,0,.12); }
.pcard[hidden] { display: none; }
.pc-img { aspect-ratio: 4 / 3; overflow: hidden; background: #e8e8ed; }
.pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.pcard:hover .pc-img img { transform: scale(1.04); }
.pc-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.pc-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--ink-2); }
.pc-name { margin-top: 10px; font-size: 26px; font-weight: 600; line-height: 1.12; letter-spacing: .004em; }
.pc-kind { margin-top: 6px; color: var(--ink-2); font-size: 16px; }
.pc-foot { margin-top: auto; padding-top: 18px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.pc-count { font-size: 14px; font-weight: 600; color: #1a7f45; }
.pcard-sold { background: var(--hb-grad); color: #fff; min-height: 260px; }
.pcard-sold .pc-meta, .pcard-sold .pc-kind { color: rgba(255,255,255,.78); }
.pc-mark { position: absolute; right: 22px; bottom: 22px; width: 92px; opacity: .9; }

/* birim kartları */
.ugrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.ugrid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ugrid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ugrid-4 { grid-template-columns: 1fr; } }
.onsale { padding: 120px 0; }
.onsale .ugrid { margin-top: 56px; }
.ucard { display: flex; flex-direction: column; border-radius: 22px; overflow: hidden; background: var(--white); box-shadow: 2px 4px 12px rgba(0,0,0,.06); transition: transform .5s var(--spring), box-shadow .4s var(--ease); }
.ucard:hover { transform: translateY(-3px); box-shadow: 2px 12px 30px rgba(0,0,0,.12); }
.ucard[hidden] { display: none; }
.light-2 .ucard { background: var(--light); box-shadow: none; }
.uc-img { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: #e8e8ed; }
.uc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.ucard:hover .uc-img img { transform: scale(1.04); }
.uc-code { position: absolute; left: 12px; top: 12px; font-size: 12px; font-weight: 600; padding: 4px 9px; border-radius: 980px; background: rgba(255,255,255,.92); color: var(--ink); }
.uc-body { padding: 18px 20px 20px; display: flex; flex-direction: column; flex: 1; }
.uc-proj { font-size: 13px; font-weight: 600; color: var(--blue); }
.uc-proj span { color: var(--ink-2); font-weight: 400; margin-left: 4px; }
.uc-title { margin-top: 4px; font-size: 21px; font-weight: 600; letter-spacing: .011em; }
.uc-facts { margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.uc-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.uc-chips li { font-size: 12px; padding: 4px 9px; border-radius: 980px; background: #eef3fd; color: var(--hb-2); }
.light-2 .uc-chips li { background: var(--white); }
.uc-foot { margin-top: auto; padding-top: 16px; display: flex; justify-content: space-between; align-items: center; }
.uc-foot .ph { color: var(--blue); transition: transform .4s var(--spring); }
.ucard:hover .uc-foot .ph { transform: translateX(3px); }
.price { font-size: 19px; font-weight: 600; letter-spacing: .01em; }
.price-ask { font-size: 15px; color: var(--blue); }

/* satışta: filtre çubuğu */
.filters { position: sticky; top: var(--nav-l); z-index: 40; background: rgba(245,245,247,.86); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid #d2d2d7; margin-top: -56px; margin-bottom: 26px; }
.filters-row { display: flex; gap: 14px; align-items: center; padding-top: 12px; padding-bottom: 12px; overflow-x: auto; scrollbar-width: none; max-width: 1180px; }
.filters-row::-webkit-scrollbar { display: none; }
.sel select { min-height: 34px; padding: 0 30px 0 13px; border-radius: 980px; border: 0; box-shadow: inset 0 0 0 1px #d2d2d7; background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236e6e73' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 12px center; font: inherit; font-size: 14px; color: var(--ink); -webkit-appearance: none; appearance: none; cursor: pointer; }
.result { font-size: 15px; color: var(--ink-2); margin-bottom: 18px; }
.empty { text-align: center; padding: 60px 20px; color: var(--ink-2); display: grid; gap: 18px; justify-items: center; }
.empty[hidden] { display: none; }

/* proje detay */
.p-hero { position: relative; min-height: min(86vh, 820px); display: flex; align-items: flex-end; overflow: clip; color: #fff; isolation: isolate; }
.p-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.p-hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(1,30,90,.25) 0%, rgba(1,30,90,0) 30%, rgba(1,40,110,.55) 62%, rgba(1,45,120,.94) 100%); }
.p-hero-copy { padding-bottom: 64px; }
.p-meta { display: flex; gap: 12px; align-items: center; font-size: 16px; color: rgba(255,255,255,.86); }
.p-meta .badge-done { background: rgba(255,255,255,.18); color: #fff; }
.p-meta .badge-new { background: #fff; color: var(--hb-2); }
.p-meta .badge-sale { background: #d7f5e2; color: #12613a; }
.p-title { margin-top: 10px; font-size: clamp(48px, 7.4vw, 96px); line-height: 1.02; font-weight: 600; letter-spacing: -.02em; }
.p-kind { margin-top: 8px; font-size: clamp(19px, 2vw, 24px); color: rgba(255,255,255,.86); }
.p-hero .hero-cta { justify-content: flex-start; }
.p-hero .pill { background: #fff; color: var(--hb-2); }
.p-hero .more { color: #fff; }
.p-intro { padding: 100px 0 80px; }
.intro-lead { font-size: clamp(24px, 2.8vw, 34px); line-height: 1.24; font-weight: 600; letter-spacing: .004em; max-width: 30ch; margin: 0 auto; text-align: center; text-wrap: balance; }
.p-stats { list-style: none; display: flex; justify-content: center; gap: 56px; flex-wrap: wrap; margin-top: 56px; text-align: center; }
.p-stats b { display: block; font-size: 34px; font-weight: 600; letter-spacing: -.01em; color: var(--blue); }
.p-stats span { font-size: 15px; color: var(--ink-2); }
.pg-sec { padding: 96px 0 72px; }
.pg-track { padding-bottom: 24px; }
.pg-item { flex: 0 0 auto; width: clamp(300px, 46vw, 640px); aspect-ratio: 3 / 2; border-radius: var(--r); overflow: hidden; scroll-snap-align: start; cursor: zoom-in; background: #e8e8ed; }
.pg-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.pg-item:hover img { transform: scale(1.03); }
.why-sec { padding: 110px 0; }
.prose { margin-top: 18px; display: grid; gap: 16px; font-size: 19px; line-height: 1.5; color: #333336; letter-spacing: .012em; }
.presale { padding: 110px 0; }
.dist-sec { padding: 110px 0; }
.dist { list-style: none; margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.dist li { background: var(--white); border-radius: 18px; padding: 24px 22px; }
.dist b { display: block; font-size: 30px; font-weight: 600; letter-spacing: -.01em; color: var(--blue); }
.dist span { font-size: 15px; color: var(--ink-2); }
.cta-band { padding: 120px 0; background: var(--hb-grad); }

/* ilan detay */
.ilan { padding: 40px 0 80px; }
.ilan-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(320px, 1fr); gap: 36px; align-items: start; }
.ilan-main { display: block; width: 100%; aspect-ratio: 3 / 2; border-radius: var(--r); overflow: hidden; background: #e8e8ed; cursor: zoom-in; }
.ilan-main img { width: 100%; height: 100%; object-fit: cover; }
.ilan-thumbs { margin-top: 10px; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.th { aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; opacity: .62; transition: opacity .2s; }
.th img { width: 100%; height: 100%; object-fit: cover; }
.th:hover, .th.is-on { opacity: 1; }
.th.is-on { box-shadow: 0 0 0 2px var(--blue); }
.ilan-card { position: sticky; top: calc(var(--nav-l) + 20px); background: var(--light); border-radius: var(--r); padding: 30px; }
.ic-proj { display: flex; gap: 10px; align-items: center; font-size: 15px; font-weight: 600; }
.ic-proj a { color: var(--blue); }
.ic-title { margin-top: 8px; font-size: 34px; line-height: 1.1; font-weight: 600; letter-spacing: .004em; }
.ic-title span { font-size: 18px; color: var(--ink-2); font-weight: 500; margin-left: 6px; }
.ic-loc { margin-top: 8px; color: var(--ink-2); display: flex; gap: 6px; align-items: center; }
.facts { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: #d2d2d7; border-radius: 16px; overflow: hidden; }
.facts div { background: var(--white); padding: 12px 14px; }
.facts dt { font-size: 12px; color: var(--ink-2); }
.facts dd { font-size: 18px; font-weight: 600; }
.pay { list-style: none; margin-top: 18px; display: grid; gap: 6px; }
.pay li { display: flex; gap: 8px; align-items: center; font-size: 15px; }
.pay .ph { color: #1a7f45; font-size: 18px; }
.ic-price { margin-top: 18px; }
.ic-cta { margin-top: 14px; display: grid; gap: 10px; }
.pill-wide { width: 100%; }
.pill-ghost-l { background: transparent !important; color: var(--blue) !important; box-shadow: inset 0 0 0 1px var(--blue); }
.ic-src { margin-top: 14px; display: inline-flex; gap: 4px; align-items: center; font-size: 13px; color: var(--ink-2); }
.ic-src:hover { color: var(--blue); }
.ilan-info { padding: 90px 0; }
.ilan-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.summary { font-size: 21px; line-height: 1.42; letter-spacing: .011em; }
.feat { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 20px; }
.feat li { display: flex; gap: 10px; align-items: center; font-size: 16px; padding: 10px 0; border-bottom: 1px solid #d2d2d7; }
.feat li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex: 0 0 auto; }
.orig { margin-top: 24px; }
.orig summary { cursor: pointer; color: var(--blue); font-size: 15px; }
.orig .prose { font-size: 16px; }
.plans-sec { padding: 90px 0; }
.plans { margin-top: 40px; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.plans .pg-item { width: 100%; aspect-ratio: auto; background: #fff; box-shadow: inset 0 0 0 1px #e1e1e6; }
.plans .pg-item img { object-fit: contain; max-height: 560px; }
@media (max-width: 960px) {
  .ilan-grid { grid-template-columns: 1fr; }
  .ilan-card { position: static; }
  .ilan-cols { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 560px) { .feat { grid-template-columns: 1fr; } .ilan-card { padding: 22px; } .ic-title { font-size: 28px; } }

/* rehber */
.guide { padding: 110px 0; }
.gsteps { list-style: none; margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.gsteps .step { min-height: 200px; justify-content: flex-start; gap: 10px; background: var(--light); }
.gsteps .step b { font-size: 15px; color: var(--blue); font-weight: 600; }
.gsteps .step h3 { font-size: 21px; font-weight: 600; }
.gsteps .step p { font-size: 16px; font-weight: 400; color: var(--ink-2); line-height: 1.4; }
.guide-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.costs { list-style: none; display: grid; gap: 10px; }
.costs li { background: var(--white); border-radius: 16px; padding: 20px 22px; font-size: 19px; font-weight: 600; display: flex; gap: 12px; align-items: center; }
.costs li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--blue); }
.guide-why { padding: 120px 0; }
.hl-l .ph { margin-bottom: 4px; }
.arts { list-style: none; display: grid; gap: 8px; margin-top: 8px; }
.arts a { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; background: var(--light); border-radius: 16px; font-size: 17px; font-weight: 500; }
.arts a:hover { color: var(--blue); }
@media (max-width: 900px) { .gsteps { grid-template-columns: 1fr 1fr; } .guide-cols { grid-template-columns: 1fr; gap: 32px; } }
@media (max-width: 560px) { .gsteps { grid-template-columns: 1fr; } .page-hero { padding: 72px 0 64px; } .p-stats { gap: 28px; } }
.filters { overflow-x: clip; }
@media (min-width: 900px) { .filters-row { flex-wrap: wrap; overflow: visible; row-gap: 10px; } }

/* mobil sekme çubuğu (iOS tarzı) */
.tabbar { display: none; }
@media (max-width: 734px) {
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    padding: 6px 6px calc(6px + env(safe-area-inset-bottom)); background: rgba(250,250,252,.82);
    backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-top: 1px solid rgba(0,0,0,.08); }
  .tabbar a { display: grid; justify-items: center; gap: 2px; padding: 4px 0; font-size: 10.5px; color: #8e8e93; letter-spacing: 0; transition: color .2s, transform .4s var(--spring); }
  .tabbar a .ph { font-size: 24px; }
  .tabbar a.is-active { color: var(--blue); }
  .tabbar a:active { transform: scale(.94); transition: transform .1s ease-out; }
  body { padding-bottom: calc(64px + env(safe-area-inset-bottom)); }
  .ilan-thumbs { display: flex; overflow-x: auto; scrollbar-width: none; }
  .ilan-thumbs::-webkit-scrollbar { display: none; }
  .ilan-thumbs .th { flex: 0 0 84px; }
}
@media (max-width: 734px) and (prefers-reduced-transparency: reduce) { .tabbar { background: #fafafc; backdrop-filter: none; } }

/* WhatsApp butonları: Halken mavisi, ikonlu */
.pill { gap: 8px; }
.pill .ph { font-size: 18px; }
.pill-wa { background: var(--blue); color: #fff; }
.pill-wa:hover { background: var(--blue-hover); }
.dark .pill.pill-wa, .lnav .pill.pill-wa, .p-hero .pill.pill-wa, .cta-band .pill.pill-wa {
  background: #2b78ff; color: #fff; box-shadow: 0 10px 28px rgba(0,24,110,.35), inset 0 0 0 1px rgba(255,255,255,.22); }
.dark .pill.pill-wa:hover, .lnav .pill.pill-wa:hover, .p-hero .pill.pill-wa:hover, .cta-band .pill.pill-wa:hover { background: #4189ff; }
.lnav .pill.pill-wa { box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.lnav .pill-sm .ph { font-size: 15px; }
/* açılış: satıştaki evler ana buton */
.pill-home { background: #fff !important; color: var(--hb-2) !important; font-weight: 500; }
.pill-home:hover { background: #e9f0ff !important; }
.hero .hero-cta { gap: 12px; }
.hero-more { margin-top: 18px; display: flex; gap: 28px; justify-content: center; flex-wrap: wrap; pointer-events: auto; }
@media (max-width: 520px) { .hero .hero-cta .pill { width: 100%; max-width: 320px; } }
.tile-links { align-items: center; }
.tile .pill-sm { min-height: 34px; padding: 0 14px; font-size: 14px; }
.tile-wide .pill.pill-wa { background: #2b78ff; }

/* =====================================================================
   Proje duvarı (açılıştan sonra)
   ===================================================================== */
.wall { position: relative; height: 240vh; background: var(--hb-2); view-timeline: --wall block; }
.wall-sticky { position: sticky; top: var(--nav-l); height: calc(100dvh - var(--nav-l)); overflow: hidden; display: grid; place-items: center; isolation: isolate; }
.wall-rows { position: absolute; left: 50%; top: 50%; width: 170vw; display: grid; gap: 18px; z-index: -2;
  transform: translate(-50%, -50%) perspective(1600px) rotateX(20deg) rotateZ(-7deg) scale(1); transform-origin: 50% 50%; }
.wall-row { display: flex; gap: 18px; width: max-content; }
.wall-row a { position: relative; flex: 0 0 auto; width: clamp(220px, 21vw, 360px); aspect-ratio: 4 / 3; border-radius: 18px; overflow: hidden; background: #0a3a90; box-shadow: 0 18px 40px rgba(0,16,60,.35); }
.wall-row img { width: 100%; height: 100%; object-fit: cover; }
.wall-row span { position: absolute; left: 12px; bottom: 10px; font-size: 13px; font-weight: 600; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.wall-shade { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(48% 42% at 50% 50%, rgba(1,40,110,.9) 0%, rgba(1,40,110,.7) 45%, rgba(1,40,110,.15) 80%, rgba(1,40,110,0) 100%),
              linear-gradient(180deg, var(--hb-2) 0%, rgba(1,51,134,0) 18%, rgba(1,51,134,0) 82%, var(--hb-2) 100%); }
.wall-copy { text-align: center; padding: 0 22px; max-width: 760px; }
.wall-title { font-size: clamp(40px, 6vw, 76px); line-height: 1.04; font-weight: 600; letter-spacing: -.02em; text-wrap: balance; }
.wall-lead { margin: 16px auto 0; font-size: clamp(19px, 2vw, 24px); line-height: 1.3; color: var(--ink-d2); max-width: 30ch; }
.wall-copy .hero-cta { margin-top: 28px; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .row-1, .row-3 { animation: wallLeft linear both; animation-timeline: --wall; animation-range: cover 0% cover 100%; }
    .row-2 { animation: wallRight linear both; animation-timeline: --wall; animation-range: cover 0% cover 100%; }
    .wall-rows { animation: wallTilt linear both; animation-timeline: --wall; animation-range: contain 0% contain 70%; }
    .wall-copy { animation: wallCopy linear both; animation-timeline: --wall; animation-range: contain 0% contain 30%; }
  }
}
@keyframes wallLeft { from { transform: translateX(0); } to { transform: translateX(-28%); } }
@keyframes wallRight { from { transform: translateX(-28%); } to { transform: translateX(0); } }
@keyframes wallTilt {
  from { transform: translate(-50%, -50%) perspective(1600px) rotateX(34deg) rotateZ(-10deg) scale(1.18); }
  to   { transform: translate(-50%, -50%) perspective(1600px) rotateX(12deg) rotateZ(-5deg) scale(1); }
}
@keyframes wallCopy { from { opacity: 0; transform: translateY(40px) scale(.96); } to { opacity: 1; transform: none; } }
@supports not (animation-timeline: view()) { .wall { height: auto; } .wall-sticky { position: relative; top: 0; height: 90vh; } }
@media (prefers-reduced-motion: reduce) { .wall { height: auto; } .wall-sticky { position: relative; top: 0; height: 90vh; } }
@media (max-width: 734px) {
  .wall { height: 200vh; }
  .wall-row a { width: 46vw; border-radius: 14px; }
  .wall-rows { width: 260vw; gap: 12px; }
  .wall-row { gap: 12px; }
}
@media (max-width: 734px) {
  .wall-row span { display: none; }
  .wall-shade { background: radial-gradient(80% 46% at 50% 50%, rgba(1,40,110,.94) 0%, rgba(1,40,110,.82) 50%, rgba(1,40,110,.25) 85%, rgba(1,40,110,0) 100%),
    linear-gradient(180deg, var(--hb-2) 0%, rgba(1,51,134,0) 18%, rgba(1,51,134,0) 82%, var(--hb-2) 100%); }
}

/* =====================================================================
   v6: Apple gibi ağır ve yumuşak akış
   Duvar artık CSS kaydırma animasyonu yerine JS'nin ataletle hesapladığı --p (0..1) değişkeniyle hareket eder.
   ===================================================================== */
.wall { height: 340vh; --p: 1; --pc: 1; }
.wall .wall-rows, .wall .wall-row, .wall .wall-copy { animation: none !important; }
.wall-rows { transform: translate(-50%, -50%) perspective(1600px)
  rotateX(calc(32deg - 20deg * var(--p))) rotateZ(calc(-9deg + 4deg * var(--p))) scale(calc(1.16 - .16 * var(--p))); will-change: transform; }
.row-1, .row-3 { transform: translateX(calc(-16% * var(--p))); will-change: transform; }
.row-2 { transform: translateX(calc(-16% + 16% * var(--p))); will-change: transform; }
.wall-copy { opacity: var(--pc); transform: translateY(calc(36px - 36px * var(--pc))) scale(calc(.96 + .04 * var(--pc))); }
.js .wall { --p: 0; --pc: 0; }
@media (prefers-reduced-motion: reduce) { .js .wall { --p: 1; --pc: 1; } }
@media (max-width: 734px) { .wall { height: 280vh; } }
/* rakam sahnesi: daha uzun mesafe = daha ağır geçişler */
.scene { height: 560vh; }
@media (max-width: 734px) { .scene { height: 460vh; } }
/* rakam sahnesi: ataletli --p ile geçişler */
.scene { --p: 0; }
.scene .line { animation: none !important; opacity: var(--o); transform: translateY(calc((1 - var(--o)) * var(--dir, 1) * 34px)) scale(calc(.97 + .03 * var(--o))); will-change: opacity, transform; }
.scene .l1 { --o: clamp(0, (0.27 - var(--p)) / 0.07, 1); --dir: -1; }
.scene .l2 { --o: min(clamp(0, (var(--p) - 0.25) / 0.07, 1), clamp(0, (0.52 - var(--p)) / 0.07, 1)); }
.scene .l3 { --o: min(clamp(0, (var(--p) - 0.50) / 0.07, 1), clamp(0, (0.77 - var(--p)) / 0.07, 1)); }
.scene .l4 { --o: clamp(0, (var(--p) - 0.75) / 0.07, 1); }
@media (prefers-reduced-motion: reduce) { .scene .line { --o: 1 !important; transform: none; } }
/* sahneler artık JS ile her tarayıcıda çalışır: eski "destek yok" yedeğini JS açıkken geri al */
@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js .scene { height: 560vh; padding: 0; }
    .js .scene-sticky { position: sticky; top: var(--nav-l); height: calc(100dvh - var(--nav-l)); display: grid; place-items: center; gap: 0; }
    .js .scene .line { grid-area: 1 / 1; }
    .js .wall { height: 340vh; }
    .js .wall-sticky { position: sticky; top: var(--nav-l); height: calc(100dvh - var(--nav-l)); }
  }
}

/* =====================================================================
   v7: WOW bölümleri
   ===================================================================== */
/* ---------- kat seçici ---------- */
.facade-sec { padding: 130px 0 120px; background: radial-gradient(80% 60% at 50% 30%, #0b4bb8 0%, var(--hb-deep) 70%); }
.sp-kicker { font-size: 13px; font-weight: 600; color: #bcd6ff; }
.sp-hint { margin-top: 10px; color: var(--ink-d2); font-size: 17px; }
@keyframes spIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* bina: gündüz render'ı, seçilen katta akşam render'ı (aynı kamera) maskeyle açılır */
.kat-grid { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.facade { position: sticky; top: 76px; aspect-ratio: var(--ar, 1 / 1); max-height: 86vh; width: 100%; border-radius: 28px; overflow: hidden;
  background: #0a2a6a; box-shadow: 0 40px 80px rgba(0,8,40,.45), inset 0 0 0 1px rgba(255,255,255,.1); isolation: isolate; }
.fc-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.fc-night { opacity: 0; transition: opacity 1.4s var(--ease-out); }
.facade[data-mode="night"] .fc-night { opacity: 1; }
.fc-l { opacity: 0; transition: opacity .7s var(--ease-out); }
.fc-l.on { opacity: 1; }
.fc-dim { fill: rgba(0,10,40,.42); opacity: 0; transition: opacity .6s var(--ease-out); pointer-events: none; }
.facade.has-sel .fc-dim { opacity: 1; }
.facade[data-mode="night"] .fc-dim { fill: rgba(0,6,24,.5); }
.fc-hit polygon { fill: transparent; stroke: rgba(255,255,255,0); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; cursor: pointer; transition: stroke .35s, fill .35s; }
.fc-hit polygon.hov { stroke: rgba(255,255,255,.55); }
.fc-hit polygon.sel { stroke: #fff; filter: drop-shadow(0 0 6px rgba(120,180,255,.95)); }
.facade[data-mode="night"] .fc-hit polygon.sel { fill: rgba(43,120,255,.18); }

/* kat rayı */
.facade-sec .kicker { color: #9cc2ff; }
.fc-rail { position: absolute; z-index: 2; left: 14px; top: 50%; transform: translateY(-50%); display: grid; gap: 6px; padding: 6px; border-radius: 22px;
  background: rgba(1,20,70,.38); backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.fr-btn { position: relative; display: grid; grid-template-columns: 34px; align-items: center; padding: 4px; border-radius: 16px; color: #fff; text-align: left; transition: background .25s, transform .15s; }
.fr-btn b { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 15px; background: rgba(255,255,255,.12); transition: background .25s, color .25s; }
.fr-btn span { position: absolute; left: calc(100% + 12px); top: 50%; transform: translate(-4px, -50%); font-size: 13px; font-weight: 500; white-space: nowrap; color: #fff; padding: 5px 10px; border-radius: 980px;
  background: rgba(1,20,70,.6); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.fr-btn:hover span, .fr-btn.hov span, .fr-btn:focus-visible span { opacity: 1; transform: translate(0, -50%); }
.fr-btn:hover, .fr-btn.hov { background: rgba(255,255,255,.1); }
.fr-btn:active { transform: scale(.97); }
.fr-btn.is-on { background: rgba(255,255,255,.16); }
.fr-btn.is-on b { background: #fff; color: var(--hb-2); }
.fr-btn.is-sold b { color: rgba(255,255,255,.45); background: rgba(255,255,255,.05); }
.fr-btn.is-sold.is-on b { background: rgba(255,255,255,.7); color: var(--hb-2); }
.facade:not(.has-night) .fc-dim { fill: rgba(3,12,44,.62); }
.fc-chips { margin-top: 30px; justify-content: center; }
.fc-chips .chip { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.fc-chips .chip.is-on { background: #fff; color: var(--hb-2); }
.fc-proj:not([hidden]) { animation: spIn .6s var(--ease-out); }
.fs-none { margin-top: 16px; display: grid; gap: 16px; justify-items: start; }
.fs-empty .more { margin-top: 14px; display: inline-flex; color: #bcd6ff; }

/* gündüz / akşam */
.fc-mode { position: absolute; z-index: 2; right: 22px; top: 22px; display: flex; padding: 4px; border-radius: 980px; background: rgba(1,20,70,.38);
  backdrop-filter: blur(20px) saturate(160%); -webkit-backdrop-filter: blur(20px) saturate(160%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
.fc-mode button { display: flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 980px; font-size: 14px; color: rgba(255,255,255,.85); transition: background .3s, color .3s; }
.fc-mode button.is-on { background: #fff; color: var(--hb-2); }
.fc-hint { position: absolute; z-index: 2; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 980px;
  font-size: 14px; color: #fff; background: rgba(1,20,70,.45); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  opacity: 0; transition: opacity .6s; pointer-events: none; }
.facade.hint .fc-hint { opacity: 1; animation: hintBob 2.4s ease-in-out infinite; }
.facade.has-sel .fc-hint { opacity: 0; animation: none; }
@keyframes hintBob { 50% { transform: translate(-50%, -4px); } }

/* kat sayfası */
.fc-sheet { border-radius: 28px; padding: 30px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
.fs-sum { font-size: 28px; font-weight: 600; line-height: 1.15; }
.fs-empty .sp-hint { max-width: 62ch; }
.fs-floor:not([hidden]), .fs-empty { animation: spIn .5s var(--ease-out); }
.fs-head h3 { margin-top: 4px; font-size: 32px; font-weight: 600; line-height: 1.1; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.fs-head h3 span { font-size: 17px; font-weight: 500; color: var(--ink-d2); }
.fs-body { margin-top: 20px; display: grid; gap: 16px; }
.fs-body.no-plan { grid-template-columns: 1fr; }
.fs-plan { background: #fff; border-radius: 18px; padding: 10px; }
.fs-plan img { width: 100%; max-height: 240px; object-fit: contain; display: block; }
.fs-units { display: grid; gap: 10px; }
.fs-unit { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px; border-radius: 18px; background: rgba(1,30,90,.45); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); transition: background .25s; }
.fs-unit:hover { background: rgba(1,40,120,.6); }
.fs-unit img, .fs-ph { width: 88px; height: 64px; border-radius: 12px; object-fit: cover; background: rgba(255,255,255,.08); display: block; }
.fs-info b { display: block; font-size: 20px; line-height: 1.1; }
.fs-info span { font-size: 14px; color: var(--ink-d2); }
.fs-act { display: flex; align-items: center; gap: 8px; }
.fs-wa { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: #fff; background: #2b78ff; box-shadow: 0 6px 16px rgba(0,30,120,.4); transition: transform .15s, background .25s; }
.fs-wa:hover { background: #3d86ff; }
.fs-wa:active { transform: scale(.94); }
.fs-go { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.12); color: #fff; transition: background .25s; }
.fs-go:hover { background: rgba(255,255,255,.22); }

@media (max-width: 900px) {
  .kat-grid { grid-template-columns: 1fr; }
  .facade { max-height: none; border-radius: 22px; }
  .facade { position: relative; top: auto; }
  .fc-rail { left: 10px; gap: 4px; padding: 4px; border-radius: 18px; }
  .fr-btn b { width: 30px; height: 30px; font-size: 14px; }
  .fc-mode { right: 10px; top: 10px; }
  .fc-mode button { padding: 7px 11px; font-size: 13px; }
  .fc-sheet { padding: 20px; border-radius: 22px; }
  .fs-head h3 { font-size: 26px; }
}
@media (max-width: 520px) {
  .fs-unit { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; }
  .fs-unit img, .fs-ph { width: 64px; height: 52px; }
}
@media (prefers-reduced-motion: reduce) { .fc-l, .fc-night, .fc-dim { transition: none; } .facade.hint .fc-hint { animation: none; } }

/* ---------- harita ---------- */
.mapsec { padding: 120px 0; background: linear-gradient(180deg, var(--hb-deep) 0%, #011a48 100%); }
.map-chips { margin-top: 36px; margin-bottom: 26px; }
.map-chips .chip { background: rgba(255,255,255,.08); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.map-chips .chip.is-on { background: #fff; color: var(--hb-2); }
.map-wrap { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 28px; align-items: start; }
.map-stage { position: relative; aspect-ratio: 1000 / 700; overflow: hidden; border-radius: var(--r); perspective: 1600px;
  background: radial-gradient(70% 70% at 50% 40%, #0d4fc2 0%, #04276e 70%); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.map-tilt { position: absolute; inset: 6% 4%; transform-style: preserve-3d; transform-origin: 50% 60%;
  transform: rotateX(calc(32deg + var(--rx, 0deg))) rotateZ(var(--rz, 0deg)); transition: transform 1.2s cubic-bezier(.2,.8,.2,1); }
.map-plane { position: relative; width: 100%; height: 100%; aspect-ratio: auto !important; transform-style: preserve-3d; }
.island { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 24px 30px rgba(0,8,40,.45)); }
.island .land path { stroke: rgba(255,255,255,.9); stroke-width: 1.2px; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.pin, .mark { position: absolute; transform-style: preserve-3d; transform: translate(-50%, -100%) rotateX(-32deg); transform-origin: 50% 100%; }
.pin.off, .mark.off { visibility: hidden; }
.pin.lb-below span { order: 3; }
.pin.lb-below { transform: translate(-50%, -7px) translateZ(26px) rotateX(-32deg); transform-origin: 50% 7px; }
.map-plane.zoomed .pin.lb-hide span { opacity: 0; }
.map-plane.zoomed .pin.lb-hide:hover span, .map-plane.zoomed .pin.lb-hide:focus-visible span { opacity: 1; z-index: 3; }
.pin { display: grid; justify-items: center; gap: 4px; z-index: 2; }
.pin i { order: 2; width: 14px; height: 14px; border-radius: 50%; background: #2b78ff; box-shadow: 0 0 0 3px #fff, 0 6px 14px rgba(0,10,50,.5); }
.pin span { order: 1; font-size: 12px; font-weight: 600; white-space: nowrap; padding: 4px 9px; border-radius: 980px; background: #fff; color: var(--hb-2); box-shadow: 0 6px 16px rgba(0,10,50,.35); opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s; }
.pin-new i { background: #ffb020; }
.pin-sold i { background: #9aa6bd; }
.map-plane.zoomed .pin span, .pin:hover span, .pin:focus-visible span { opacity: 1; transform: none; }
.mark { display: flex; gap: 5px; align-items: center; font-size: 11px; color: rgba(255,255,255,.75); white-space: nowrap; z-index: 1; transform: translate(-6px, -50%) rotateX(-32deg); transform-origin: 0 50%; }
.mark i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.75); }
.map-card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); border-radius: var(--r); padding: 24px; min-height: 300px; }
.mc-view h3 { font-size: 24px; font-weight: 600; margin-bottom: 14px; }
.mc-lead { color: var(--ink-d2); font-size: 17px; }
.mc-item { display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; padding: 8px; border-radius: 14px; transition: background .2s; }
.mc-item:hover { background: rgba(255,255,255,.08); }
.mc-item img { width: 64px; height: 48px; object-fit: cover; border-radius: 9px; }
.mc-item b { display: block; font-size: 16px; }
.mc-item span { font-size: 13px; color: var(--ink-d2); }
.mc-dot { width: 64px; height: 48px; border-radius: 9px; background: rgba(255,255,255,.08); }
.mc-view:not([hidden]) { animation: spIn .5s var(--ease-out); }
.map-note { margin-top: 16px; font-size: 12px; color: rgba(255,255,255,.5); }
@media (max-width: 960px) { .map-wrap { grid-template-columns: 1fr; } .map-stage { aspect-ratio: 4 / 3.4; } }
@media (prefers-reduced-motion: reduce) { .map-plane, .pin, .mark { transition: none; } }

/* ---------- render / şantiye ---------- */
.compare-sec { padding: 120px 0; }
.ba { position: relative; margin-top: 44px; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: #ddd; user-select: none; touch-action: pan-y; }
.ba img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.ba-before { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; background: #fff; transform: translateX(-1px); cursor: ew-resize; outline: none; }
.ba-handle i { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--hb-2); font-size: 22px; box-shadow: 0 8px 24px rgba(0,0,0,.25); transition: transform .3s var(--spring); }
.ba-handle:focus-visible i, .ba.dragging .ba-handle i { transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 0 0 4px rgba(43,120,255,.5), 0 8px 24px rgba(0,0,0,.25); }
.ba-tag { position: absolute; top: 16px; font-size: 13px; font-weight: 600; padding: 5px 11px; border-radius: 980px; background: rgba(0,0,0,.45); color: #fff; backdrop-filter: blur(8px); }
.ba-tag-l { left: 16px; } .ba-tag-r { right: 16px; }
.ba-strip { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ba-thumb { width: 100%; aspect-ratio: 16 / 10; border-radius: 16px; }
.p-intro + .compare-sec, .compare-sec + .light-2 { padding-top: 40px; }

/* ---------- video ---------- */
.videos { padding: 120px 0; background: var(--hb-grad); }
.vgrid { margin-top: 48px; display: grid; grid-template-columns: 1.7fr 1fr; gap: 16px; }
.videos .kicker { color: #9cc2ff; }
.vcard { position: relative; border-radius: var(--r); overflow: hidden; aspect-ratio: 16 / 10; background: #012b75; text-align: left; transition: transform .5s var(--spring); }
.vcard:first-child { grid-row: span 2; aspect-ratio: auto; }
.vcard:hover { transform: scale(1.015); }
.vcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
.vcard:hover img { transform: scale(1.05); }
.vcard::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(1,20,70,0) 45%, rgba(1,20,70,.85)); }
.vplay { position: absolute; z-index: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center; background: rgba(255,255,255,.92); color: var(--hb-2); font-size: 28px; box-shadow: 0 10px 30px rgba(0,0,0,.3); transition: transform .4s var(--spring); }
.vcard:hover .vplay { transform: translate(-50%, -50%) scale(1.08); }
.vcard:first-child .vplay { width: 84px; height: 84px; font-size: 34px; }
.vcard:not(:first-child) .vplay { width: 52px; height: 52px; font-size: 22px; top: 40%; }
.vmeta { position: absolute; z-index: 1; left: 20px; bottom: 16px; color: #fff; font-size: 14px; display: grid; }
.vmeta b { font-size: 19px; }
.vdlg { border: 0; padding: 0; background: transparent; width: min(1100px, 94vw); margin: auto; overflow: visible; }
.vdlg::backdrop { background: rgba(0,8,30,.9); }
.vframe { aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; }
.vframe iframe { width: 100%; height: 100%; border: 0; }
.vdlg .lb-close { top: -56px; right: 0; }
@media (max-width: 900px) { .vgrid { grid-template-columns: 1fr 1fr; } .vcard:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; } }
@media (max-width: 560px) { .vgrid { grid-template-columns: 1fr; } }

/* ---------- zaman tüneli ve kurucu ---------- */
.timeline { padding: 110px 0; }
.tl-track { list-style: none; padding-top: 30px; }
.tl-item { flex: 0 0 auto; width: 240px; display: grid; gap: 8px; scroll-snap-align: start; border-top: 2px solid #d2d2d7; padding-top: 16px; }
.tl-item b { font-size: 34px; font-weight: 600; color: var(--blue); }
.tl-item img { border-radius: 14px; aspect-ratio: 4 / 3; object-fit: cover; }
.founder { padding: 110px 0; }
.fq-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; margin: 0 auto 22px; }
.fq { font-size: clamp(26px, 3vw, 38px); line-height: 1.22; font-weight: 600; }
.fq-who { margin-top: 18px; color: var(--ink-2); }


/* ---------- Google yorumları ---------- */
.reviews { padding: 120px 0; }
.rv-grid { margin-top: 52px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rv-score, .rv { background: var(--light); border-radius: var(--r); padding: 34px 30px; }
.rv-score { display: grid; align-content: center; justify-items: start; gap: 8px; background: var(--hb-grad); color: #fff; }
.rv-big { font-size: 76px; line-height: 1; font-weight: 700; letter-spacing: -.03em; }
.rv-count { display: flex; align-items: center; gap: 8px; font-size: 17px; color: rgba(255,255,255,.85); }
.rv-btn { margin-top: 12px; background: #fff; color: var(--hb-2); }
.rv { display: flex; flex-direction: column; gap: 18px; }
.rv-stars { display: flex; gap: 2px; color: #ffb020; font-size: 17px; }
.rv-stars .off { color: rgba(0,0,0,.15); }
.rv-stars-lg { font-size: 24px; }
.rv blockquote { flex: 1; font-size: 21px; line-height: 1.3; font-weight: 600; letter-spacing: -.005em; }
.rv blockquote::before { content: "\201C"; } .rv blockquote::after { content: "\201D"; }
.rv figcaption { display: grid; gap: 2px; font-size: 14px; color: var(--ink-2); }
.rv figcaption b { font-size: 16px; color: var(--ink); }
@media (max-width: 1000px) { .rv-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .rv-grid { grid-template-columns: 1fr; } .reviews { padding: 88px 0; } }


/* ---------- harita animasyonları ---------- */
.map-stage::before { content: ""; position: absolute; inset: -20%; pointer-events: none; opacity: .55;
  background: radial-gradient(30% 22% at 30% 40%, rgba(120,180,255,.22), transparent 70%), radial-gradient(26% 20% at 70% 65%, rgba(120,180,255,.16), transparent 70%);
  animation: seaDrift 18s ease-in-out infinite alternate; }
@keyframes seaDrift { to { transform: translate(6%, -4%) scale(1.08); } }
.island .arcs path { fill: none; stroke-linecap: round; }
.island .arc { stroke: rgba(1,76,176,.55); stroke-width: calc(1.6px * var(--u, 1)); stroke-dasharray: 1; stroke-dashoffset: 0; }
.island .arc.is-sold { stroke: rgba(90,110,150,.4); stroke-dasharray: .015 .015; }
.mapsec.anim .arc.is-sold { stroke-dasharray: 1; }
.island .arc-flow { stroke: #1f6bff; stroke-width: calc(3.2px * var(--u, 1)); stroke-dasharray: .1 .9; stroke-dashoffset: 1; opacity: 0; }
.arc-flow.is-sold { display: none; }
.pin-hq { z-index: 3; }
.pin-hq i { width: 18px; height: 18px; background: #fff; box-shadow: 0 0 0 4px #2b78ff, 0 8px 18px rgba(0,10,50,.55); }
.pin-hq span { opacity: 1; transform: none; background: var(--hb-2); color: #fff; }
.pin i { position: relative; }
.pin-sale i::after, .pin-hq i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid rgba(80,150,255,.9); opacity: 0; }
.mapsec.play .pin-sale i::after { animation: pinPulse 2.4s ease-out calc(2.6s + var(--i) * .15s) infinite; }
.mapsec.play .pin-hq i::after { border-color: rgba(255,255,255,.9); animation: pinPulse 2.4s ease-out .4s infinite; }
@keyframes pinPulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3); opacity: 0; } }

/* giriş: ada merkezden açılır, yaylar çizilir, noktalar sırayla düşer */
.mapsec.anim .map-tilt { transform: rotateX(58deg) rotateZ(-6deg) scale(.86); transition: transform 2s cubic-bezier(.2,.8,.2,1); }
.mapsec.anim.play .map-tilt { transform: rotateX(calc(32deg + var(--rx, 0deg))) rotateZ(var(--rz, 0deg)); }
.mapsec.anim .island { clip-path: circle(0% at var(--hx, 70%) var(--hy, 50%)); transition: clip-path 2.4s cubic-bezier(.45,.05,.25,1); }
.mapsec.anim.play .island { clip-path: circle(95% at var(--hx, 70%) var(--hy, 50%)); }
.mapsec.anim .arc { stroke-dashoffset: 1; }
.mapsec.anim.play .arc { stroke-dashoffset: 0; transition: stroke-dashoffset 1s cubic-bezier(.4,0,.2,1) calc(1.1s + var(--i) * .14s); }
.mapsec.play .arc-flow { opacity: 1; animation: arcFlow 3.2s linear calc(2.6s + var(--i) * .3s) infinite; }
@keyframes arcFlow { from { stroke-dashoffset: 1; } to { stroke-dashoffset: -.08; } }
.mapsec.anim .pin, .mapsec.anim .mark { opacity: 0; translate: 0 -28px; }
.mapsec.anim.play .pin { opacity: 1; translate: 0 0; transition: opacity .35s ease calc(1.9s + var(--i) * .14s), translate .7s cubic-bezier(.34,1.56,.64,1) calc(1.9s + var(--i) * .14s); }
.mapsec.anim.play .pin-hq { transition-delay: .5s, .5s; }
.mapsec.anim.play .mark { opacity: 1; translate: 0 0; transition: opacity .8s ease 1.4s, translate .8s ease 1.4s; }
@media (prefers-reduced-motion: reduce) {
  .map-stage::before, .mapsec.play .arc-flow, .mapsec.play .pin-sale i::after, .mapsec.play .pin-hq i::after { animation: none; }
  .arc-flow { display: none; }
}


/* ---------- 3B harita ---------- */
.map-stage.gl-on { background: #05245e; }
.map-stage.gl-on::before, .map-stage.gl-on .map-tilt { display: none; }
.map-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.m3-labels { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.m3-label { position: absolute; left: 0; top: 0; font-size: 12px; font-weight: 600; white-space: nowrap; padding: 5px 10px; border-radius: 980px;
  background: rgba(255,255,255,.94); color: var(--hb-2); box-shadow: 0 8px 20px rgba(0,10,50,.4); opacity: 0; transition: opacity .35s; pointer-events: none; }
.m3-label.on { opacity: 1; pointer-events: auto; }
.m3-label.m3-hq { background: var(--hb-2); color: #fff; box-shadow: 0 0 0 1px rgba(255,255,255,.5), 0 8px 20px rgba(0,10,50,.4); }
.m3-label.m3-new::before, .m3-label.m3-sale::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; background: #2b78ff; vertical-align: 1px; }
.m3-label.m3-new::before { background: #ffb43a; }
.m3-label.m3-sold { background: rgba(255,255,255,.75); color: #4a5670; }
.m3-mark { position: absolute; left: 0; top: 0; font-size: 11px; color: #0b2f73; font-weight: 600; white-space: nowrap; opacity: 0; transition: opacity .8s; padding: 2px 7px; border-radius: 980px; background: rgba(255,255,255,.55); }
.m3-mark.on { opacity: 1; }

/* 3B harita: bölge kartları */
.m3-label img, .m3-label em, .m3-ph { display: none; }
.m3-label b { font-weight: 600; }
.m3-leaders { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.m3-leaders path { fill: none; stroke: rgba(255,255,255,.9); stroke-width: 1.5; stroke-dasharray: 3 3; transition: opacity .35s; filter: drop-shadow(0 1px 2px rgba(0,10,50,.5)); }
.m3-label.card { display: grid; grid-template-columns: 1fr; width: 132px; padding: 5px 5px 8px; border-radius: 14px; white-space: normal; text-align: left; gap: 0;
  box-shadow: 0 14px 30px rgba(0,10,50,.45); transition: opacity .35s, box-shadow .2s; }
.m3-label.card::before { display: none; }
.m3-label.card img, .m3-label.card .m3-ph { display: block; width: 100%; height: 72px; object-fit: cover; border-radius: 10px; margin-bottom: 6px; }
.m3-label.card .m3-ph { background: var(--hb-grad); display: grid; place-items: center; }
.m3-label.card .m3-ph img { width: 54px; height: auto; margin: 0; border-radius: 0; }
.m3-label.card b { font-size: 13px; line-height: 1.15; padding: 0 4px; }
.m3-label.card em { display: block; font-style: normal; font-size: 11px; font-weight: 500; color: #5b6b8a; padding: 2px 4px 0; }
.m3-label.card.m3-sale { box-shadow: 0 0 0 2px #2b78ff, 0 14px 30px rgba(0,10,50,.45); }
.m3-label.card.m3-new { box-shadow: 0 0 0 2px #ff9f1a, 0 14px 30px rgba(0,10,50,.45); }
a.m3-label.card:hover { box-shadow: 0 0 0 2px #fff, 0 18px 36px rgba(0,10,50,.55); z-index: 3; }
@media (max-width: 600px) { .m3-label.card { width: 104px; } .m3-label.card img, .m3-label.card .m3-ph { height: 52px; } .m3-label.card b { font-size: 12px; } }

/* =====================================================================
   harita.html: tam ekran proje haritası (Google Haritalar düzeni)
   ===================================================================== */
body.bare { overflow: hidden; background: #05245e; }
body.bare main { display: block; }
.gm { position: fixed; inset: 0; overflow: hidden; color: var(--ink); font-size: 15px; }
.gm-stage { position: absolute; inset: 0; border-radius: 0; aspect-ratio: auto; background: #05245e; cursor: grab; }
.gm-stage.grabbing { cursor: grabbing; }
.gm .m3-label.sel { box-shadow: 0 0 0 3px #fff, 0 0 0 6px #2b78ff, 0 18px 36px rgba(0,10,50,.55) !important; z-index: 4; }

/* sol panel */
.gm-panel { position: absolute; z-index: 5; left: 16px; top: 16px; bottom: 16px; width: 384px; display: flex; flex-direction: column;
  background: #fff; border-radius: 22px; box-shadow: 0 12px 40px rgba(0,10,50,.35); overflow: hidden; }
.gm-handle { display: none; }
.gm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; background: var(--hb-grad); }
.gm-logo img { height: 30px; width: auto; display: block; }
.gm-lang button { color: rgba(255,255,255,.75); }
.gm-lang button.active { color: #fff; background: rgba(255,255,255,.18); }
.gm-search { position: relative; margin: 14px 14px 6px; display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 48px; border-radius: 24px;
  background: #f1f4f9; box-shadow: inset 0 0 0 1px rgba(0,0,0,.06); }
.gm-search:focus-within { background: #fff; box-shadow: 0 0 0 2px #2b78ff; }
.gm-search > i { font-size: 20px; color: #5b6b8a; }
.gm-search input { flex: 1; border: 0; background: transparent; font: inherit; font-size: 16px; color: var(--ink); outline: none; min-width: 0; }
.gm-search input::-webkit-search-cancel-button { display: none; }
.gm-clear { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #5b6b8a; }
.gm-clear:hover { background: rgba(0,0,0,.06); }
.gm-clear[hidden] { display: none; }
.gm-list-view, .gm-detail { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.gm-filters { display: flex; gap: 6px; flex-wrap: wrap; padding: 8px 14px 10px; border-bottom: 1px solid #eef1f6; }
.gm-f { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 980px; font-size: 13px; font-weight: 500; color: var(--ink); box-shadow: inset 0 0 0 1px #d9dfea; }
.gm-f span { color: #8592ab; font-weight: 400; }
.gm-f.is-on { background: #e8f0ff; box-shadow: inset 0 0 0 1px #2b78ff; color: #0b4fd6; }
.gm-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.gm-dot-sale { background: #2b78ff; } .gm-dot-new { background: #ff9f1a; } .gm-dot-done { background: #4f86e8; } .gm-dot-sold { background: #8a96ad; }
.gm-list { list-style: none; padding: 4px 0; }
.gm-item { width: 100%; display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center; padding: 12px 16px; text-align: left; border-bottom: 1px solid #f1f3f8; transition: background .15s; }
.gm-item:hover { background: #f5f8fe; }
.gm-item.is-on { background: #eaf1ff; }
.gm-item > img, .gm-ph { width: 88px; height: 66px; border-radius: 12px; object-fit: cover; display: block; }
.gm-ph { background: var(--hb-grad); display: grid; place-items: center; }
.gm-ph img { width: 52px; height: auto; }
.gm-it { display: grid; gap: 2px; min-width: 0; }
.gm-it b { font-size: 16px; font-weight: 600; }
.gm-it > span:not(.gm-badges) { font-size: 13px; color: #5b6b8a; }
.gm-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.gm-badges em { font-style: normal; font-size: 12px; font-weight: 600; padding: 3px 8px; border-radius: 980px; }
.gm-st-sale { background: #e3edff; color: #0b4fd6; } .gm-st-new { background: #fff1de; color: #a85d00; }
.gm-st-done { background: #eef2f8; color: #3d5a8f; } .gm-st-sold { background: #eceef2; color: #5f6b80; }
.gm-u { background: #e7f7ee; color: #127a43; }
.gm-empty { padding: 30px 16px; color: #5b6b8a; text-align: center; }
.gm-back-site { display: flex; align-items: center; gap: 8px; padding: 16px; font-size: 14px; color: #0b4fd6; }
/* detay */
.gm-back { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; width: 100%; padding: 12px 16px; font-size: 14px; font-weight: 500; color: #0b4fd6; background: rgba(255,255,255,.94); backdrop-filter: blur(10px); border-bottom: 1px solid #eef1f6; }
.gm-hero { aspect-ratio: 16 / 10; background: #eef2f8; }
.gm-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gm-hero-sold { background: var(--hb-grad); display: grid; place-items: center; }
.gm-hero-sold img { width: 110px; height: auto; }
.gm-dbody { padding: 18px 18px 26px; }
.gm-dbody h2 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.1; }
.gm-reg { margin-top: 6px; display: flex; align-items: center; gap: 6px; color: #5b6b8a; font-size: 14px; }
.gm-dbody .gm-badges { margin-top: 10px; }
.gm-acts { margin: 18px 0 4px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gm-btn { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 44px; padding: 8px 12px; border-radius: 14px; font-size: 14px; font-weight: 600;
  color: #0b4fd6; background: #eef3ff; text-align: center; transition: background .15s, transform .1s; }
.gm-btn:hover { background: #e1eaff; } .gm-btn:active { transform: scale(.98); }
.gm-btn-wa { background: #2b78ff; color: #fff; } .gm-btn-wa:hover { background: #1f6bff; }
.gm-intro { margin-top: 14px; font-size: 15px; line-height: 1.55; color: #3a4660; }
.gm-gal { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gm-gal img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 10px; display: block; }

/* bölge çipleri */
.gm-chips { position: absolute; z-index: 4; top: 16px; left: 416px; right: 16px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px; }
.gm-chips::-webkit-scrollbar { display: none; }
.gm-chip { flex: none; padding: 9px 16px; border-radius: 980px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 500; box-shadow: 0 4px 14px rgba(0,10,50,.3); transition: background .15s, color .15s; }
.gm-chip:hover { background: #f1f5fc; }
.gm-chip.is-on { background: #0b4fd6; color: #fff; }

/* kontroller */
.gm-ctrl { position: absolute; z-index: 4; right: 16px; bottom: 32px; display: grid; gap: 10px; justify-items: end; }
.gm-c { width: 44px; height: 44px; border-radius: 12px; background: #fff; color: #33415c; display: grid; place-items: center; font-size: 20px; box-shadow: 0 4px 14px rgba(0,10,50,.3); transition: background .15s; }
.gm-c:hover { background: #f1f5fc; } .gm-c b { font-size: 14px; font-weight: 700; }
.gm-zoom { display: grid; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,10,50,.3); }
.gm-zoom .gm-c { border-radius: 0; box-shadow: none; } .gm-zoom .gm-c + .gm-c { border-top: 1px solid #e6eaf2; }
.gm-attrib { position: absolute; z-index: 3; right: 72px; bottom: 10px; font-size: 11px; color: rgba(255,255,255,.7); }

/* mobil: alt panel */
@media (max-width: 760px) {
  .gm-panel { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 42vh; border-radius: 22px 22px 0 0; transition: height .35s cubic-bezier(.2,.8,.2,1); }
  .gm-panel.open { height: 86vh; }
  .gm-handle { display: grid; place-items: center; height: 22px; flex: none; }
  .gm-handle span { width: 40px; height: 5px; border-radius: 3px; background: #c9d1df; }
  .gm-head { padding: 8px 14px; }
  .gm-logo img { height: 26px; }
  .gm-search { margin: 10px 12px 4px; height: 44px; }
  .gm-chips { left: 12px; right: 12px; top: 12px; }
  .gm-ctrl { right: 12px; bottom: calc(42vh + 14px); }
  .gm-panel.open ~ .gm-ctrl { opacity: 0; pointer-events: none; }
  .gm-attrib { display: none; }
  .gm-item { grid-template-columns: 72px 1fr; padding: 10px 14px; }
  .gm-item > img, .gm-ph { width: 72px; height: 56px; }
}
@media (prefers-reduced-motion: reduce) { .gm-panel { transition: none; } }

/* ana sayfa: tam ekran düğmesi */
.map-full { display: flex; justify-content: center; margin: -8px 0 22px; }
.map-full .pill { background: #fff; color: var(--hb-2); }
.map-full .pill i { font-size: 18px; }


/* ---------- WhatsApp öncesi form ---------- */
.leaddlg { border: 0; padding: 0; background: transparent; width: min(420px, calc(100vw - 24px)); margin: auto; color: var(--ink); }
.leaddlg::backdrop { background: rgba(1,15,50,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.leaddlg[open] .ld-card { animation: ldIn .35s cubic-bezier(.2,.9,.3,1.1); }
@keyframes ldIn { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.ld-card { position: relative; display: grid; gap: 12px; padding: 28px 24px 20px; border-radius: 24px; background: #fff; box-shadow: 0 30px 80px rgba(0,10,50,.4); }
.ld-x { position: absolute; right: 12px; top: 12px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #5b6b8a; font-size: 18px; }
.ld-x:hover { background: #f1f4f9; }
.ld-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 26px; color: #fff; background: #2b78ff; }
.ld-card h2 { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.ld-p { font-size: 14px; color: #5b6b8a; line-height: 1.45; }
.ld-ctx { font-size: 13px; font-weight: 600; color: #0b4fd6; background: #eef3ff; padding: 8px 12px; border-radius: 10px; }
.ld-card label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: #33415c; }
.ld-card input { font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid #d9dfea; background: #f8fafd; color: var(--ink); }
.ld-card input:focus { outline: none; border-color: #2b78ff; background: #fff; box-shadow: 0 0 0 3px rgba(43,120,255,.18); }
.ld-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.ld-err { font-size: 13px; color: #c62828; }
.ld-go { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; border-radius: 14px; background: #2b78ff; color: #fff; font-size: 16px; font-weight: 600; }
.ld-go:hover { background: #1f6bff; } .ld-go:disabled { opacity: .7; }
.ld-go i { font-size: 20px; }
.ld-skip { font-size: 13px; color: #5b6b8a; text-decoration: underline; text-underline-offset: 3px; justify-self: center; padding: 4px; }


/* =====================================================================
   telefon düzeltmeleri (Ekim 2026 denetimi)
   ===================================================================== */
@media (max-width: 734px) {
  /* açılış: alttaki bağlantılar sekme çubuğunun arkasında kalmasın */
  .hero { min-height: calc(100svh - var(--nav-l) - 64px - env(safe-area-inset-bottom)); }
  .hero-copy { padding-bottom: 6vh; }
  /* kaydırma sahneleri telefonda daha kısa: boş mavi ekranlar azalsın */
  .scene, .js .scene { height: 340vh !important; }
  .wall, .js .wall { height: 240vh !important; }
  /* çipler tek satır, yana kaydırılır */
  .fc-chips, .map-chips { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; margin-left: -22px; margin-right: -22px; padding: 2px 22px 4px; scroll-padding: 0 22px; }
  .fc-chips::-webkit-scrollbar, .map-chips::-webkit-scrollbar { display: none; }
  .fc-chips .chip, .map-chips .chip { flex: none; }
  /* satıştaki evler: yana kaydırmalı kartlar */
  .ugrid-4 { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 36px -22px 0; padding: 4px 22px 14px; scroll-padding: 0 22px; scrollbar-width: none; }
  .ugrid-4::-webkit-scrollbar { display: none; }
  .ugrid-4 > * { flex: 0 0 84%; scroll-snap-align: start; }
  /* sekme çubuğunda WhatsApp */
  .tabbar .tab-wa { color: #2b78ff; }
  .tabbar .tab-wa .ph-fill { font-size: 24px; }
}
@media (max-width: 560px) {
  /* ev listeleri: telefonda yatay liste kartı (satıştaki 38 ev ~6 ekrana sığar) */
  .ugrid:not(.ugrid-4) { grid-template-columns: 1fr; gap: 10px; }
  .ugrid:not(.ugrid-4) .ucard { display: grid; grid-template-columns: 116px 1fr; border-radius: 18px; }
  .ugrid:not(.ugrid-4) .uc-img { aspect-ratio: auto; height: 100%; min-height: 128px; }
  .ugrid:not(.ugrid-4) .uc-img img { height: 100%; }
  .ugrid:not(.ugrid-4) .uc-code { top: 8px; left: 8px; font-size: 11px; padding: 3px 7px; }
  .ugrid:not(.ugrid-4) .uc-body { padding: 12px 14px 12px; gap: 2px; }
  .ugrid:not(.ugrid-4) .uc-proj { font-size: 12px; }
  .ugrid:not(.ugrid-4) .uc-proj span { display: none; }
  .ugrid:not(.ugrid-4) .uc-title { font-size: 18px; }
  .ugrid:not(.ugrid-4) .uc-facts { font-size: 13px; }
  .ugrid:not(.ugrid-4) .uc-chips { margin-top: 6px; }
  .ugrid:not(.ugrid-4) .uc-chips li:nth-child(n+3) { display: none; }
  .ugrid:not(.ugrid-4) .uc-foot { margin-top: 6px; padding-top: 0; border: 0; font-size: 14px; }
}
.facts div:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 734px) {
  /* telefonda bölüm boşlukları daha sıkı */
  .guide, .guide-why, .mapsec, .facade-sec, .videos, .reviews, .onsale, .chapter, .values, .path, .quotes { padding-top: 76px !important; padding-bottom: 76px !important; }
  .gsteps .step { min-height: 0; }
  .center-head .h2, .h2 { text-wrap: balance; }
}
@media (max-width: 734px) { .map-card { min-height: 0; padding: 20px; } .mc-lead { font-size: 15px; } }

/* =====================================================================
   geniş ekranlar: içerik dar bir sütunda kalmasın, ekranı doldursun
   ===================================================================== */
@media (min-width: 1360px) {
  .wrap { max-width: 1280px; padding: 0 32px; }
  .wide-img, .filters-row { max-width: 1280px; }
  .lnav-row { max-width: 1440px; }
  .lnav-links a { font-size: 13px; }
  .h2 { font-size: 64px; }
  .h1 { font-size: 88px; }
  .lead { font-size: 22px; max-width: 42ch; }
  .hero-title { font-size: clamp(64px, 5.6vw, 96px); }
  .hero-sub { font-size: 26px; }
}
@media (min-width: 1680px) {
  body { font-size: 18px; }
  .wrap { max-width: 1520px; padding: 0 48px; }
  .wide-img, .filters-row { max-width: 1520px; }
  .lnav-row { max-width: 1600px; }
  :root { --nav-l: 60px; }
  .lnav-links a { font-size: 14px; }
  .lnav-logo img { height: 36px; }
  .h2 { font-size: 76px; }
  .h1 { font-size: 104px; }
  .kicker { font-size: 24px; }
  .lead { font-size: 24px; }
  .hero-title { font-size: clamp(80px, 5.4vw, 112px); }
  .hero-sub { font-size: 28px; }
  .uc-title { font-size: 24px; }
  .uc-facts { font-size: 16px; }
  .fs-head h3 { font-size: 36px; }
  .gm-panel { width: 420px; }
  .gm-chips { left: 452px; }
}

/* =====================================================================
   sihirbaz · favoriler · randevu pencereleri
   ===================================================================== */
.xdlg { border: 0; padding: 0; background: transparent; width: min(560px, calc(100vw - 24px)); margin: auto; color: var(--ink); }
.xdlg.compare { width: min(980px, calc(100vw - 24px)); }
.xdlg::backdrop { background: rgba(1,15,50,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.xdlg[open] .x-card { animation: ldIn .35s cubic-bezier(.2,.9,.3,1.1); }
.x-card { position: relative; padding: 28px 24px 22px; border-radius: 24px; background: #fff; box-shadow: 0 30px 80px rgba(0,10,50,.4); max-height: calc(100dvh - 40px); overflow-y: auto; }
.x-body { display: grid; gap: 12px; }
.x-body h2 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; padding-right: 30px; }
.x-kicker { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #0b4fd6; }
.x-p { font-size: 14px; color: #5b6b8a; line-height: 1.45; }
.x-opts { display: grid; gap: 10px; margin-top: 6px; }
.x-opt { min-height: 56px; padding: 0 18px; border-radius: 16px; text-align: left; font-size: 17px; font-weight: 600; color: var(--ink); background: #f3f6fb; box-shadow: inset 0 0 0 1px #e3e9f3; transition: background .15s, box-shadow .15s, transform .1s; }
.x-opt:hover { background: #eaf1ff; box-shadow: inset 0 0 0 2px #2b78ff; }
.x-opt:active { transform: scale(.985); }
.x-back { justify-self: start; display: flex; align-items: center; gap: 6px; padding: 6px 2px; font-size: 14px; color: #5b6b8a; }
.x-units { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.x-unit { display: grid; grid-template-columns: 64px 1fr; gap: 10px; align-items: center; padding: 8px; border-radius: 14px; background: #f5f7fb; transition: background .15s; }
.x-unit:hover { background: #eaf1ff; }
.x-unit img { width: 64px; height: 52px; object-fit: cover; border-radius: 10px; }
.x-unit b { display: block; font-size: 14px; } .x-unit em { display: block; font-style: normal; font-size: 12px; color: #33415c; } .x-unit small { font-size: 11px; color: #8592ab; }
.x-acts { display: grid; gap: 10px; margin-top: 6px; }
.x-all { text-align: center; font-size: 15px; font-weight: 600; color: #0b4fd6; padding: 6px; }
.x-acts .x-back { justify-self: center; }
.x-form { display: grid; gap: 12px; }
.x-form label { display: grid; gap: 5px; font-size: 13px; font-weight: 600; color: #33415c; }
.x-form input, .x-form select { font: inherit; font-size: 16px; padding: 12px 14px; border-radius: 12px; border: 1px solid #d9dfea; background: #f8fafd; color: var(--ink); min-width: 0; }
.x-form input:focus, .x-form select:focus { outline: none; border-color: #2b78ff; background: #fff; box-shadow: 0 0 0 3px rgba(43,120,255,.18); }
.x-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.x-tablewrap { overflow-x: auto; margin: 4px -4px 0; }
.x-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.x-table th { text-align: left; font-weight: 600; color: #5b6b8a; padding: 10px 8px; white-space: nowrap; vertical-align: top; }
.x-table td { padding: 10px 8px; border-top: 1px solid #eef1f6; min-width: 150px; vertical-align: top; }
.x-table thead td { border: 0; }
.x-table thead img { width: 100%; height: 96px; object-fit: cover; border-radius: 12px; display: block; margin-bottom: 6px; }
.x-table thead b { font-size: 15px; color: var(--ink); }
.x-rm { display: block; margin-top: 4px; font-size: 12px; color: #c62828; }

/* favori kalbi */
.fav { position: absolute; right: 10px; top: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: rgba(255,255,255,.92); color: #33415c; font-size: 19px; box-shadow: 0 4px 12px rgba(0,10,50,.18); transition: transform .2s var(--spring, ease); }
.fav .ph-fill { display: none; color: #e5484d; }
.fav.on .ph-fill { display: block; } .fav.on .ph-heart:not(.ph-fill) { display: none; }
.fav:hover { transform: scale(1.08); }
.fav.pop { animation: favPop .45s cubic-bezier(.3,1.6,.5,1); }
@keyframes favPop { 40% { transform: scale(1.3); } }
.fav-wide { position: static; width: auto; height: 46px; border-radius: 980px; grid-template-columns: auto; padding: 0 18px; box-shadow: inset 0 0 0 1px #d2d2d7; background: #fff; display: flex; justify-content: center; gap: 6px; }
.favbar { position: fixed; z-index: 66; left: 18px; bottom: 18px; display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 980px;
  background: #fff; color: var(--ink); font-size: 14px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,10,50,.3); }
.favbar .ph-fill { color: #e5484d; font-size: 18px; }
.favbar b { min-width: 22px; height: 22px; border-radius: 11px; background: #e5484d; color: #fff; font-size: 12px; display: grid; place-items: center; padding: 0 6px; }
.favbar[hidden] { display: none; }
.more-btn { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.pill-light { background: #fff; color: var(--hb-2); }
@media (max-width: 734px) {
  .favbar { left: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); }
  .x-units { grid-template-columns: 1fr; }
  .x-card { padding: 24px 18px 18px; }
}
.xdlg .x-acts { position: sticky; bottom: -22px; margin: 6px -24px -22px; padding: 12px 24px 18px; background: linear-gradient(180deg, rgba(255,255,255,0), #fff 18%); }
@media (max-width: 734px) { .finder .x-unit:nth-child(n+5) { display: none; } .xdlg .x-acts { margin: 6px -18px -18px; padding: 12px 18px 16px; bottom: -18px; } }