/* ============================================================================ Proje Vitrini — "Meridian" 3D interaktif ilan haritası (vanilla port) Tasarım kaynağı: design_handoff_property_map (README hifi tokens). TÜM class'lar mrd- prefix, TÜM değişkenler --mrd- prefix → site style.css ile çakışmaz. Tema site'in değeriyle senkron (ayrı toggle yok). ========================================================================== */ :root { --mrd-font-display: "Instrument Serif", Georgia, "Times New Roman", serif; --mrd-font-sans: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; --mrd-accent: oklch(0.62 0.11 155); /* marka yeşili tonunda terracotta yerine */ --mrd-accent-ink: oklch(0.99 0.01 155); --mrd-dur: 600ms; --mrd-ease: cubic-bezier(0.34, 1.56, 0.64, 1); /* springy (default feel) */ --mrd-pop-z: 112px; --mrd-pop-rise: 16px; --mrd-card-w: 172px; --mrd-card-w-hover: 272px; --mrd-card-ph: 96px; --mrd-card-ph-hover: 166px; /* Light */ --mrd-bg: oklch(0.965 0.006 90); --mrd-bg-2: oklch(0.94 0.008 88); --mrd-surface: oklch(0.995 0.003 95); --mrd-surface-2: oklch(0.975 0.004 92); --mrd-text: oklch(0.26 0.012 70); --mrd-muted: oklch(0.52 0.012 70); --mrd-faint: oklch(0.7 0.01 75); --mrd-border: oklch(0.9 0.006 85); --mrd-hairline: oklch(0.88 0.006 85); --mrd-shadow-rgb: 40 33 24; --mrd-map-grid: oklch(0.9 0.006 85 / 0.7); --mrd-map-tint-a: oklch(0.93 0.01 90); --mrd-map-tint-b: oklch(0.9 0.012 200); } :root[data-theme="dark"] { --mrd-bg: oklch(0.19 0.012 65); --mrd-bg-2: oklch(0.16 0.012 65); --mrd-surface: oklch(0.245 0.014 66); --mrd-surface-2: oklch(0.285 0.015 66); --mrd-text: oklch(0.95 0.006 85); --mrd-muted: oklch(0.72 0.012 80); --mrd-faint: oklch(0.56 0.012 80); --mrd-border: oklch(0.34 0.014 66); --mrd-hairline: oklch(0.3 0.014 66); --mrd-shadow-rgb: 0 0 0; --mrd-map-grid: oklch(0.32 0.012 66 / 0.6); --mrd-map-tint-a: oklch(0.22 0.014 66); --mrd-map-tint-b: oklch(0.24 0.02 220); } /* App shell — vitrin board alanı (navbar'ın ALTINDA, viewport'u doldurur). position:fixed → site navbar (daha yüksek z) üstte yüzer; top JS'te navbar yüksekliğine ayarlanır. */ .mrd-app { position: fixed; inset: 0; z-index: 1; overflow: hidden; font-family: var(--mrd-font-sans); background: var(--mrd-bg); color: var(--mrd-text); -webkit-font-smoothing: antialiased; } /* Üst araç çubuğu (count + currency) — site navbar'ının altında konumlanır */ .mrd-topbar { position: absolute; top: 0; left: 0; right: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; pointer-events: none; } .mrd-topbar > * { pointer-events: auto; } .mrd-topbar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .mrd-topbar-right { display: flex; align-items: center; gap: 10px; } .mrd-count-pill { font-size: 12px; letter-spacing: 0.04em; color: var(--mrd-muted); background: var(--mrd-surface); border: 1px solid var(--mrd-border); padding: 9px 14px; border-radius: 999px; box-shadow: 0 1px 2px rgb(var(--mrd-shadow-rgb) / 0.06); display: flex; align-items: center; gap: 11px; } .mrd-count-pill b { color: var(--mrd-text); font-weight: 600; } .mrd-seg { display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; } .mrd-seg i { width: 6px; height: 6px; border-radius: 50%; background: var(--mrd-accent); align-self: center; } .mrd-seg.mrd-imarli i { background: oklch(0.55 0.15 245); } .mrd-divline { width: 1px; height: 14px; background: var(--mrd-border); } .mrd-cur-switch { display: inline-flex; background: var(--mrd-surface); border: 1px solid var(--mrd-border); border-radius: 999px; padding: 3px; box-shadow: 0 1px 2px rgb(var(--mrd-shadow-rgb) / 0.06); } .mrd-cur-btn { width: 30px; height: 28px; border: none; background: transparent; color: var(--mrd-muted); font-size: 14px; font-weight: 600; border-radius: 999px; cursor: pointer; transition: background 160ms var(--mrd-ease), color 160ms var(--mrd-ease); } .mrd-cur-btn.on { background: var(--mrd-accent); color: var(--mrd-accent-ink); } .mrd-cur-btn:hover:not(.on) { color: var(--mrd-text); } .mrd-addbtn { font-family: var(--mrd-font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--mrd-accent-ink); background: var(--mrd-accent); border: 1px solid var(--mrd-accent); border-radius: 999px; padding: 9px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; box-shadow: 0 2px 8px rgb(var(--mrd-shadow-rgb) / 0.12); transition: transform 160ms var(--mrd-ease), filter 160ms; } .mrd-addbtn:hover { transform: translateY(-1px); filter: brightness(1.05); } /* Map stage / 3D plane */ .mrd-stage { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 42%; cursor: grab; } .mrd-stage.dragging { cursor: grabbing; } .mrd-plane { position: absolute; inset: -4%; transform-style: preserve-3d; transition: transform 240ms ease-out; } .mrd-fallback { position: absolute; inset: -30%; background: radial-gradient(120% 90% at 30% 18%, var(--mrd-map-tint-b), transparent 60%), radial-gradient(120% 100% at 78% 88%, var(--mrd-map-tint-a), transparent 65%), var(--mrd-bg); } .mrd-fallback::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--mrd-map-grid) 1px, transparent 1px), linear-gradient(90deg, var(--mrd-map-grid) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: radial-gradient(130% 120% at 50% 45%, #000 55%, transparent 92%); mask-image: radial-gradient(130% 120% at 50% 45%, #000 55%, transparent 92%); opacity: 0.55; } /* Türkiye harita arka planı (drop-in) — varsa background-image set edilir */ .mrd-basemap { position: absolute; inset: 0; width: 100%; height: 100%; background-position: center; background-repeat: no-repeat; background-size: contain; opacity: 0.9; pointer-events: none; } .mrd-hint { position: absolute; left: 50%; top: 8%; transform: translateX(-50%); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mrd-faint); pointer-events: none; text-align: center; } /* Loading / empty */ .mrd-state { position: absolute; inset: 0; display: grid; place-items: center; z-index: 30; color: var(--mrd-muted); font-size: 13px; text-align: center; pointer-events: none; } .mrd-state .mrd-state-inner { pointer-events: auto; } .mrd-spin { width: 30px; height: 30px; margin: 0 auto 12px; border-radius: 50%; border: 3px solid var(--mrd-hairline); border-top-color: var(--mrd-accent); animation: mrdspin 0.8s linear infinite; } @keyframes mrdspin { to { transform: rotate(360deg); } } /* Pins */ .mrd-pin { position: absolute; transform-style: preserve-3d; width: 0; height: 0; } .mrd-pin-shadow { position: absolute; left: 50%; top: 8px; width: 100px; height: 20px; border-radius: 50%; background: radial-gradient(closest-side, rgb(var(--mrd-shadow-rgb) / 0.32), rgb(var(--mrd-shadow-rgb) / 0.12) 58%, transparent 78%); filter: blur(6px); transform: translate(-50%, 0) scale(0.76); opacity: 0.5; transition: opacity var(--mrd-dur) var(--mrd-ease), transform var(--mrd-dur) var(--mrd-ease), filter var(--mrd-dur) var(--mrd-ease); } .mrd-pin.is-hover .mrd-pin-shadow, .mrd-pin.is-active .mrd-pin-shadow { opacity: 0.9; filter: blur(13px); transform: translate(-50%, 20px) scale(1.5); } .mrd-card-wrap { position: absolute; left: 50%; bottom: 17px; transform: translate(-50%, 0) translateZ(0); transform-origin: 50% 130%; transition: transform var(--mrd-dur) var(--mrd-ease); will-change: transform; } .mrd-pin.is-hover .mrd-card-wrap, .mrd-pin.is-active .mrd-card-wrap { transform: translate(-50%, calc(var(--mrd-pop-rise) * -1)) translateZ(var(--mrd-pop-z)); } .mrd-card-tip { position: absolute; left: 50%; bottom: -7px; width: 16px; height: 16px; background: var(--mrd-surface); border-right: 1px solid var(--mrd-border); border-bottom: 1px solid var(--mrd-border); border-bottom-right-radius: 3px; transform: translateX(-50%) rotate(45deg); box-shadow: 4px 4px 9px rgb(var(--mrd-shadow-rgb) / 0.14); } .mrd-card { position: relative; width: var(--mrd-card-w); background: var(--mrd-surface); border: 1px solid var(--mrd-border); border-radius: 16px; overflow: hidden; cursor: pointer; box-shadow: 0 1px 2px rgb(var(--mrd-shadow-rgb) / 0.08), 0 6px 16px rgb(var(--mrd-shadow-rgb) / 0.10); transition: width var(--mrd-dur) var(--mrd-ease), box-shadow var(--mrd-dur) var(--mrd-ease), border-color var(--mrd-dur) var(--mrd-ease); } .mrd-pin.is-hover { z-index: 40; } .mrd-pin.is-active { z-index: 30; } .mrd-pin.is-hover .mrd-card { width: var(--mrd-card-w-hover); box-shadow: 0 2px 6px rgb(var(--mrd-shadow-rgb) / 0.10), 0 30px 60px rgb(var(--mrd-shadow-rgb) / 0.26); border-color: var(--mrd-hairline); } .mrd-card-photo { position: relative; width: 100%; height: var(--mrd-card-ph); transition: height var(--mrd-dur) var(--mrd-ease); overflow: hidden; } .mrd-pin.is-hover .mrd-card-photo { height: var(--mrd-card-ph-hover); } .mrd-photo-fill { position: absolute; inset: 0; background-size: cover; background-position: center; } /* Gerçek foto yoksa: hue-bazlı tema-aware gradient (per-kart --ph-hue) */ .mrd-photo-fill.is-grad { background: radial-gradient(90% 70% at 74% 20%, oklch(0.92 0.07 var(--ph-hue) / 0.95), transparent 62%), linear-gradient(180deg, oklch(0.86 0.06 var(--ph-hue)) 0%, oklch(0.8 0.07 var(--ph-hue)) 45%, oklch(0.7 0.07 calc(var(--ph-hue) + 8)) 46%, oklch(0.6 0.06 calc(var(--ph-hue) + 8)) 100%); } :root[data-theme="dark"] .mrd-photo-fill.is-grad { background: radial-gradient(90% 70% at 74% 22%, oklch(0.5 0.09 var(--ph-hue) / 0.9), transparent 60%), linear-gradient(180deg, oklch(0.34 0.05 var(--ph-hue)) 0%, oklch(0.3 0.05 var(--ph-hue)) 45%, oklch(0.24 0.04 calc(var(--ph-hue) + 8)) 46%, oklch(0.18 0.03 calc(var(--ph-hue) + 8)) 100%); } .mrd-photo-fill.is-grad::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,0.16) 0%, transparent 30%, transparent 70%, rgba(0,0,0,0.12) 100%); } .mrd-card-chip { position: absolute; top: 9px; left: 9px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 600; color: var(--mrd-accent-ink); background: var(--mrd-accent); padding: 4px 8px; border-radius: 6px; box-shadow: 0 2px 6px rgb(var(--mrd-shadow-rgb) / 0.18); } /* 2026-06-07: "ÖRNEK İLAN" rozeti — vitrin kartları canlıda demo, ciddi algılanmasın. */ .mrd-card-ornek { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); z-index: 4; font-size: 9.5px; letter-spacing: 0.12em; font-weight: 800; text-transform: uppercase; color: #fff; background: rgba(20,20,24,0.82); padding: 4px 11px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); box-shadow: 0 2px 8px rgba(0,0,0,0.25); } .mrd-cat-tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 8px; border-radius: 6px; background: var(--mrd-cat-bg); color: var(--mrd-cat-fg); border: 1px solid var(--mrd-cat-bd); white-space: nowrap; } .mrd-cat-tag::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--mrd-cat-dot); flex: none; } .mrd-card-photo .mrd-cat-tag { position: absolute; top: 33px; left: 9px; box-shadow: 0 2px 6px rgb(var(--mrd-shadow-rgb) / 0.16); } .mrd-cat-proje { --mrd-cat-fg: oklch(0.5 0.14 300); --mrd-cat-bg: oklch(0.965 0.03 300); --mrd-cat-bd: oklch(0.88 0.05 300); --mrd-cat-dot: oklch(0.56 0.16 300); } .mrd-cat-imarli { --mrd-cat-fg: oklch(0.47 0.13 245); --mrd-cat-bg: oklch(0.965 0.03 245); --mrd-cat-bd: oklch(0.88 0.05 245); --mrd-cat-dot: oklch(0.55 0.15 245); } .mrd-cat-arazi { --mrd-cat-fg: oklch(0.43 0.12 150); --mrd-cat-bg: oklch(0.955 0.035 150); --mrd-cat-bd: oklch(0.86 0.06 150); --mrd-cat-dot: oklch(0.5 0.14 150); } :root[data-theme="dark"] .mrd-cat-proje { --mrd-cat-fg: oklch(0.84 0.12 300); --mrd-cat-bg: oklch(0.3 0.06 300); --mrd-cat-bd: oklch(0.42 0.08 300); --mrd-cat-dot: oklch(0.72 0.16 300); } :root[data-theme="dark"] .mrd-cat-imarli { --mrd-cat-fg: oklch(0.84 0.11 245); --mrd-cat-bg: oklch(0.3 0.06 245); --mrd-cat-bd: oklch(0.42 0.08 245); --mrd-cat-dot: oklch(0.72 0.15 245); } :root[data-theme="dark"] .mrd-cat-arazi { --mrd-cat-fg: oklch(0.84 0.11 150); --mrd-cat-bg: oklch(0.3 0.06 150); --mrd-cat-bd: oklch(0.42 0.08 150); --mrd-cat-dot: oklch(0.72 0.15 150); } .mrd-card-fav { position: absolute; top: 7px; right: 7px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 0.82); color: #444; opacity: 0; transform: scale(0.8); transition: opacity var(--mrd-dur) var(--mrd-ease), transform var(--mrd-dur) var(--mrd-ease); } .mrd-pin.is-hover .mrd-card-fav { opacity: 1; transform: scale(1); } :root[data-theme="dark"] .mrd-card-fav { background: rgb(20 20 22 / 0.7); color: #eee; } .mrd-card-body { padding: 9px 11px 11px; } .mrd-card-price { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; color: var(--mrd-text); font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 5px; } .mrd-card-price .mrd-per { font-size: 10px; font-weight: 500; color: var(--mrd-faint); } .mrd-price-area { font-size: 12px; font-weight: 600; color: var(--mrd-muted); margin-left: 6px; padding-left: 8px; border-left: 1px solid var(--mrd-hairline); } .mrd-roll { display: inline-flex; align-items: flex-end; font-variant-numeric: tabular-nums; } .mrd-roll-d { display: inline-block; height: 1em; overflow: hidden; line-height: 1; } .mrd-roll-col { display: flex; flex-direction: column; transition: transform 900ms cubic-bezier(0.22, 1, 0.36, 1); } .mrd-roll-col > span { height: 1em; line-height: 1; display: block; text-align: center; } .mrd-roll-s { display: inline-block; } .mrd-card-loc { margin-top: 2px; font-size: 12px; color: var(--mrd-muted); display: flex; align-items: center; gap: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mrd-card-loc .mrd-marker { width: 5px; height: 5px; border-radius: 50%; background: var(--mrd-accent); flex: none; } .mrd-card-more { max-height: 0; opacity: 0; overflow: hidden; transition: max-height var(--mrd-dur) var(--mrd-ease), opacity calc(var(--mrd-dur) * 0.8) var(--mrd-ease), margin var(--mrd-dur) var(--mrd-ease); margin-top: 0; } .mrd-pin.is-hover .mrd-card-more { max-height: 320px; opacity: 1; margin-top: 9px; } .mrd-card-title { font-family: var(--mrd-font-display); font-size: 21px; line-height: 1.04; color: var(--mrd-text); } .mrd-card-hood { font-size: 11px; color: var(--mrd-faint); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mrd-card-tagline { font-size: 12px; color: var(--mrd-muted); margin-top: 3px; line-height: 1.35; } .mrd-card-stats { display: flex; gap: 14px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--mrd-hairline); } .mrd-stat { display: flex; flex-direction: column; gap: 1px; } .mrd-stat b { font-size: 13px; font-weight: 600; color: var(--mrd-text); font-variant-numeric: tabular-nums; } .mrd-stat span { font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mrd-faint); } .mrd-size-pick { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--mrd-hairline); } .mrd-size-head { display: flex; align-items: baseline; justify-content: space-between; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--mrd-faint); } .mrd-size-head b { font-family: var(--mrd-font-sans); font-size: 13px; font-weight: 600; color: var(--mrd-text); letter-spacing: 0; text-transform: none; } .mrd-size-slider { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; margin: 9px 0 7px; border-radius: 999px; background: var(--mrd-hairline); cursor: ew-resize; outline: none; } .mrd-size-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--mrd-accent); border: 2px solid var(--mrd-surface); box-shadow: 0 1px 4px rgb(var(--mrd-shadow-rgb) / 0.3); cursor: ew-resize; } .mrd-size-slider::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--mrd-accent); border: 2px solid var(--mrd-surface); box-shadow: 0 1px 4px rgb(var(--mrd-shadow-rgb) / 0.3); cursor: ew-resize; } .mrd-size-foot { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px; color: var(--mrd-muted); } .mrd-size-foot span:first-child { color: var(--mrd-accent); font-weight: 600; } .mrd-card-open { margin-top: 10px; width: 100%; font-family: var(--mrd-font-sans); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mrd-accent); background: transparent; border: 1px solid var(--mrd-accent); border-radius: 8px; padding: 8px; cursor: pointer; transition: background 160ms var(--mrd-ease), color 160ms var(--mrd-ease); } .mrd-card-open:hover { background: var(--mrd-accent); color: var(--mrd-accent-ink); } /* Detail overlay — body'ye eklenir, :root --mrd-* değişkenlerini miras alır */ .mrd-detail-scrim { position: fixed; inset: 0; z-index: 9995; background: rgb(var(--mrd-shadow-rgb) / 0.42); backdrop-filter: blur(7px) saturate(115%); -webkit-backdrop-filter: blur(7px) saturate(115%); display: grid; place-items: center; padding: clamp(16px, 4vh, 48px); animation: mrdScrimIn 340ms var(--mrd-ease) both; font-family: var(--mrd-font-sans); } .mrd-detail-scrim.closing { animation: mrdScrimOut 280ms var(--mrd-ease) both; } @keyframes mrdScrimIn { from { opacity: 0; } to { opacity: 1; } } @keyframes mrdScrimOut { from { opacity: 1; } to { opacity: 0; } } .mrd-detail { position: relative; width: min(1040px, 94vw); max-height: 90vh; background: var(--mrd-surface); border: 1px solid var(--mrd-border); border-radius: 22px; overflow: hidden; display: grid; grid-template-columns: 1.25fr 1fr; box-shadow: 0 50px 120px rgb(var(--mrd-shadow-rgb) / 0.45); animation: mrdDetailIn 480ms var(--mrd-ease) both; color: var(--mrd-text); } .mrd-detail-scrim.closing .mrd-detail { animation: mrdDetailOut 280ms var(--mrd-ease) both; } @keyframes mrdDetailIn { from { opacity: 0; transform: translateY(28px) scale(0.962); } to { opacity: 1; transform: none; } } @keyframes mrdDetailOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(20px) scale(0.97); } } .mrd-detail-gallery { position: relative; background: var(--mrd-surface-2); display: flex; flex-direction: column; justify-content: center; min-height: 0; padding: 14px 0 18px; } .mrd-gallery-hero { position: relative; flex: 0 0 auto; height: clamp(200px, 38vh, 360px); padding: 4px 16px 10px; } .mrd-gallery-hero .mrd-shot { width: 100%; height: 100%; border-radius: 14px; overflow: hidden; box-shadow: 0 8px 24px rgb(var(--mrd-shadow-rgb) / 0.16); background-size: cover; background-position: center; } .mrd-gallery-thumbs { flex: 0 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 0 16px; } .mrd-gallery-thumb { position: relative; aspect-ratio: 4 / 3; border-radius: 9px; overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: border-color 180ms var(--mrd-ease), transform 180ms var(--mrd-ease); background-size: cover; background-position: center; } .mrd-gallery-thumb:hover { transform: translateY(-2px); } .mrd-gallery-thumb.active { border-color: var(--mrd-accent); } .mrd-gallery-label { flex: 0 0 auto; padding: 14px 18px 8px; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mrd-faint); font-weight: 600; } .mrd-detail-info { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; } .mrd-detail-info-inner { padding: 34px 36px 36px; } .mrd-detail-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; } .mrd-detail-tags { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .mrd-detail-type { font-size: 13px; color: var(--mrd-muted); margin-top: -3px; } .mrd-detail-status { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; color: var(--mrd-accent); } .mrd-detail-status .mrd-marker { width: 6px; height: 6px; border-radius: 50%; background: var(--mrd-accent); } .mrd-detail-title { font-family: var(--mrd-font-display); font-size: 38px; line-height: 1.04; color: var(--mrd-text); text-wrap: balance; } .mrd-detail-loc { font-size: 14px; color: var(--mrd-muted); } .mrd-detail-price { margin-top: 20px; font-weight: 600; font-size: 30px; letter-spacing: -0.015em; color: var(--mrd-text); font-variant-numeric: tabular-nums; } .mrd-detail-desc { margin-top: 18px; font-size: 14px; line-height: 1.62; color: var(--mrd-muted); text-wrap: pretty; } /* Yapılaşma Hakkı kutusu (imar/emsal veya %5 plansız) */ .mrd-build { margin-top: 22px; padding: 14px 16px; border-radius: 12px; background: var(--mrd-surface-2); border: 1px solid var(--mrd-hairline); } .mrd-build-head { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mrd-faint); font-weight: 600; } .mrd-build-head .mrd-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mrd-accent); } .mrd-build-main { margin-top: 8px; font-size: 15px; font-weight: 600; color: var(--mrd-text); } .mrd-build-note { margin-top: 5px; font-size: 12.5px; line-height: 1.5; color: var(--mrd-muted); } .mrd-build.is-plansiz { border-color: oklch(0.86 0.06 150); } :root[data-theme="dark"] .mrd-build.is-plansiz { border-color: oklch(0.42 0.08 150); } .mrd-detail-keystats { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--mrd-hairline); } .mrd-keystat { flex: none; } .mrd-keystat b { font-family: var(--mrd-font-display); font-size: 25px; color: var(--mrd-text); white-space: nowrap; } .mrd-keystat span { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mrd-faint); margin-top: 2px; } .mrd-spec-grid { margin-top: 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--mrd-hairline); border: 1px solid var(--mrd-hairline); border-radius: 12px; overflow: hidden; } .mrd-spec { background: var(--mrd-surface); padding: 13px 15px; } .mrd-spec span { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mrd-faint); } .mrd-spec b { display: block; margin-top: 3px; font-size: 16px; font-weight: 600; color: var(--mrd-text); font-variant-numeric: tabular-nums; } .mrd-agent-card { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding: 11px 13px; background: var(--mrd-surface-2); border: 1px solid var(--mrd-hairline); border-radius: 14px; } .mrd-agent-avatar { width: 46px; height: 46px; border-radius: 50%; flex: none; display: grid; place-items: center; font-family: var(--mrd-font-display); font-size: 18px; color: var(--mrd-accent-ink); background: radial-gradient(circle at 32% 28%, color-mix(in oklch, var(--mrd-accent) 72%, #fff), var(--mrd-accent)); box-shadow: inset 0 0 0 1px rgb(var(--mrd-shadow-rgb) / 0.08); } .mrd-agent-meta { flex: 1; min-width: 0; } .mrd-agent-meta b { display: block; font-size: 14px; font-weight: 600; color: var(--mrd-text); } .mrd-agent-meta span { font-size: 11px; color: var(--mrd-muted); } .mrd-agent-actions { display: flex; gap: 8px; } .mrd-agent-btn { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: var(--mrd-surface); border: 1px solid var(--mrd-border); color: var(--mrd-text); cursor: pointer; text-decoration: none; transition: transform 150ms var(--mrd-ease), background 150ms, color 150ms, border-color 150ms; } .mrd-agent-btn:hover { transform: translateY(-1px); background: var(--mrd-accent); color: var(--mrd-accent-ink); border-color: var(--mrd-accent); } .mrd-detail-cta { margin-top: 26px; display: flex; gap: 10px; flex-wrap: wrap; } .mrd-btn { font-family: var(--mrd-font-sans); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 10px; padding: 13px 18px; cursor: pointer; transition: transform 150ms var(--mrd-ease), filter 150ms var(--mrd-ease), background 150ms, color 150ms; border: 1px solid var(--mrd-accent); } .mrd-btn:hover { transform: translateY(-1px); } .mrd-btn-primary { background: var(--mrd-accent); color: var(--mrd-accent-ink); flex: 1; min-width: 160px; } .mrd-btn-primary:hover { filter: brightness(1.05); } .mrd-btn-ghost { background: transparent; color: var(--mrd-text); border-color: var(--mrd-border); } .mrd-btn-ghost:hover { border-color: var(--mrd-accent); color: var(--mrd-accent); } .mrd-detail-index { margin-top: 20px; font-size: 11px; letter-spacing: 0.06em; color: var(--mrd-faint); text-transform: uppercase; } .mrd-detail-close-row { position: absolute; top: 14px; right: 14px; z-index: 6; display: flex; gap: 8px; } .mrd-detail-close, .mrd-nav-btn { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--mrd-surface); border: 1px solid var(--mrd-border); color: var(--mrd-text); cursor: pointer; box-shadow: 0 3px 10px rgb(var(--mrd-shadow-rgb) / 0.18); transition: transform 160ms var(--mrd-ease), background 160ms, color 160ms, border-color 160ms; } .mrd-detail-close:hover { transform: rotate(90deg); } .mrd-nav-btn:hover { background: var(--mrd-accent); color: var(--mrd-accent-ink); border-color: var(--mrd-accent); } .mrd-hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 0.86); border: 1px solid rgb(0 0 0 / 0.06); color: #222; cursor: pointer; box-shadow: 0 4px 14px rgb(var(--mrd-shadow-rgb) / 0.22); transition: background 150ms var(--mrd-ease), transform 150ms var(--mrd-ease); z-index: 3; } .mrd-hero-arrow.left { left: 26px; } .mrd-hero-arrow.right { right: 26px; } .mrd-hero-arrow:hover { background: #fff; transform: translateY(-50%) scale(1.08); } :root[data-theme="dark"] .mrd-hero-arrow { background: rgb(28 28 30 / 0.82); border-color: rgb(255 255 255 / 0.1); color: #f2f2f2; } .mrd-hero-count { position: absolute; bottom: 22px; right: 28px; font-size: 12px; font-weight: 600; color: #fff; background: rgb(0 0 0 / 0.5); padding: 5px 11px; border-radius: 999px; z-index: 3; font-variant-numeric: tabular-nums; } @media (max-width: 860px) { .mrd-detail { grid-template-columns: 1fr; max-height: 92vh; overflow-y: auto; } .mrd-gallery-hero { height: clamp(180px, 30vh, 280px); } .mrd-detail-title { font-size: 30px; } .mrd-topbar { padding: 12px 14px; } } @media (prefers-reduced-motion: reduce) { .mrd-app *, .mrd-detail-scrim * { transition-duration: 0.01ms !important; } } /* Mobil: 3D devre dışı, pin'ler tıklanabilir kalır (parallax/pan JS'te kapanır) */ .mrd-app.mrd-flat .mrd-plane { transform: none !important; } /* ============================================================================ Faz 4 — İlan Ekle formu + İlanlarım (js/vitrin-ilan.js). Tema-aware --mrd. ========================================================================== */ .mrd-form-scrim { position: fixed; inset: 0; z-index: 9996; background: rgb(var(--mrd-shadow-rgb) / 0.42); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: grid; place-items: center; padding: clamp(10px, 3vh, 36px); font-family: var(--mrd-font-sans); animation: mrdScrimIn 280ms var(--mrd-ease) both; } .mrd-form { width: min(720px, 96vw); max-height: 92vh; display: flex; flex-direction: column; background: var(--mrd-surface); color: var(--mrd-text); border: 1px solid var(--mrd-border); border-radius: 18px; overflow: hidden; box-shadow: 0 40px 100px rgb(var(--mrd-shadow-rgb) / 0.4); animation: mrdDetailIn 360ms var(--mrd-ease) both; } .mrd-form-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--mrd-hairline); flex: 0 0 auto; } .mrd-form-tabs { display: flex; gap: 6px; } .mrd-form-tabs button { font-family: var(--mrd-font-sans); font-size: 13px; font-weight: 600; color: var(--mrd-muted); background: transparent; border: none; cursor: pointer; padding: 8px 14px; border-radius: 9px; } .mrd-form-tabs button.active { background: var(--mrd-accent); color: var(--mrd-accent-ink); } .mrd-form-tabs button:not(.active):hover { color: var(--mrd-text); background: var(--mrd-surface-2); } .mrd-form-close { background: transparent; border: none; color: var(--mrd-muted); font-size: 1.1rem; cursor: pointer; padding: 6px 8px; border-radius: 8px; } .mrd-form-close:hover { color: var(--mrd-text); background: var(--mrd-surface-2); } .mrd-form-body { overflow-y: auto; padding: 18px 20px 22px; } .mrd-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 14px; } .mrd-fg { display: flex; flex-direction: column; gap: 5px; } .mrd-fg.full { grid-column: 1 / -1; } .mrd-fg label { font-size: 12px; font-weight: 600; color: var(--mrd-muted); letter-spacing: 0.01em; } .mrd-fg .form-control { font-size: 14px; } .mrd-seg-radio { display: flex; gap: 18px; padding: 6px 0; } .mrd-seg-radio label { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; font-weight: 500; color: var(--mrd-text); cursor: pointer; } .mrd-seg-radio input { accent-color: var(--mrd-accent); width: 16px; height: 16px; } .mrd-pinmap { height: 230px; border-radius: 10px; overflow: hidden; border: 1px solid var(--mrd-border); } .mrd-pin-info { font-size: 12px; color: var(--mrd-muted); margin-top: 5px; } .mrd-photo-grid { display: flex; flex-wrap: wrap; gap: 9px; } .mrd-photo-cell { position: relative; width: 92px; height: 92px; border-radius: 10px; overflow: hidden; border: 1px solid var(--mrd-border); background: var(--mrd-surface-2); cursor: grab; flex: none; } .mrd-photo-cell img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } .mrd-photo-cell.dragging { opacity: 0.5; } .mrd-photo-cell.over { outline: 2px dashed var(--mrd-accent); outline-offset: -2px; } .mrd-photo-cover { position: absolute; left: 5px; bottom: 5px; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--mrd-accent-ink); background: var(--mrd-accent); padding: 2px 6px; border-radius: 5px; } .mrd-photo-del { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; border: none; background: rgb(0 0 0 / 0.55); color: #fff; cursor: pointer; font-size: 11px; } .mrd-photo-del:hover { background: #c0392b; } .mrd-photo-spin { width: 26px; height: 26px; margin: 33px auto; border-radius: 50%; border: 3px solid var(--mrd-hairline); border-top-color: var(--mrd-accent); animation: mrdspin 0.8s linear infinite; } .mrd-photo-add { font-family: var(--mrd-font-sans); font-size: 13px; font-weight: 600; color: var(--mrd-accent); background: transparent; border: 1px dashed var(--mrd-accent); border-radius: 10px; padding: 9px 16px; cursor: pointer; margin-top: 9px; display: inline-flex; align-items: center; gap: 5px; } .mrd-photo-add:hover { background: color-mix(in oklch, var(--mrd-accent) 10%, transparent); } .mrd-form-actions { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 6px; flex-wrap: wrap; } .mrd-form-note { font-size: 11.5px; color: var(--mrd-faint); flex: 1; min-width: 200px; } .mrd-form-actions .btn-analyze-imar { width: auto; min-width: 160px; } .mrd-form-success { text-align: center; padding: 30px 16px; } .mrd-form-success i { font-size: 3rem; color: var(--mrd-accent); } .mrd-form-success h3 { font-family: var(--mrd-font-display); font-size: 26px; margin: 10px 0 6px; color: var(--mrd-text); } .mrd-form-success p { font-size: 14px; color: var(--mrd-muted); line-height: 1.55; max-width: 440px; margin: 0 auto 18px; } .mrd-mine-load, .mrd-mine-empty { text-align: center; padding: 40px 16px; color: var(--mrd-muted); font-size: 14px; } .mrd-mine-list { display: flex; flex-direction: column; gap: 11px; } .mrd-mine-item { display: flex; gap: 12px; padding: 11px; border: 1px solid var(--mrd-hairline); border-radius: 13px; background: var(--mrd-surface-2); } .mrd-mine-cover { width: 74px; height: 74px; border-radius: 9px; flex: none; background-size: cover; background-position: center; } .mrd-mine-cover.is-empty { display: grid; place-items: center; color: var(--mrd-faint); font-size: 1.3rem; background: var(--mrd-surface); } .mrd-mine-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .mrd-mine-title { font-size: 14.5px; font-weight: 600; color: var(--mrd-text); } .mrd-mine-loc { font-size: 12px; color: var(--mrd-muted); } .mrd-mine-badge { align-self: flex-start; font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; margin-top: 2px; } .mrd-mine-badge.wait { background: oklch(0.92 0.06 75); color: oklch(0.45 0.12 75); } .mrd-mine-badge.pay { background: oklch(0.92 0.06 245); color: oklch(0.45 0.13 245); } .mrd-mine-badge.live { background: oklch(0.92 0.07 150); color: oklch(0.42 0.13 150); } .mrd-mine-badge.rej { background: oklch(0.92 0.06 25); color: oklch(0.5 0.16 25); } .mrd-mine-pay { display: inline-block; margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--mrd-accent-ink); background: var(--mrd-accent); padding: 6px 13px; border-radius: 8px; text-decoration: none; align-self: flex-start; } .mrd-mine-rej { margin-top: 6px; font-size: 12px; color: oklch(0.5 0.16 25); } @media (max-width: 560px) { .mrd-form-grid { grid-template-columns: 1fr; } } /* ============================================================================ MapLibre 3D arazi haritası (zemin) — pin'ler marker olarak üstte ========================================================================== */ /* ⚠️ .mrd-app .mrd-map (özgüllük 0,2,0) → MapLibre'ın .maplibregl-map{position:relative} (0,1,0) ezmesini engeller; relative olursa container 0 yüksekliğe çöküp harita kaybolur (mapH:0 bug'ı). */ .mrd-app .mrd-map { position: absolute !important; inset: 0; width: 100%; height: 100%; background: var(--mrd-bg); } .mrd-map .maplibregl-ctrl-attrib { font-size: 10px; opacity: 0.7; } .mrd-map .maplibregl-ctrl-bottom-right { bottom: 8px; right: 8px; } .mrd-app .maplibregl-marker { cursor: pointer; } /* kart-loc + detay-status içindeki küçük nokta (eski .mrd-marker → .mrd-marker-dot) */ .mrd-card-loc .mrd-marker-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--mrd-accent); flex: none; } .mrd-detail-status .mrd-marker-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mrd-accent); } /* 2026-06-05 İlan formu — adres arama barı + foto kapak çerçevesi */ .mrd-addr-search { display: flex; gap: 6px; margin-bottom: 7px; } .mrd-addr-search input { flex: 1; font-size: 14px; padding: 8px 12px; border: 1px solid var(--mrd-border); border-radius: 9px; background: var(--mrd-surface); color: var(--mrd-text); } .mrd-addr-search button { font-size: 13px; font-weight: 600; color: var(--mrd-accent-ink); background: var(--mrd-accent); border: none; border-radius: 9px; padding: 0 16px; cursor: pointer; white-space: nowrap; } .mrd-addr-search button:disabled { opacity: 0.6; } .mrd-photo-cell.is-cover { outline: 2px solid var(--mrd-accent); outline-offset: -2px; box-shadow: 0 0 0 3px color-mix(in oklch, var(--mrd-accent) 22%, transparent); } /* 2026-06-05 Proje ilerleme — kart altı % + detay adım checklist + rezervasyon */ .mrd-prog { margin-top: 8px; padding-top: 9px; border-top: 1px solid var(--mrd-hairline); } .mrd-prog-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--mrd-muted); margin-bottom: 5px; } .mrd-prog-top b { color: var(--mrd-text); font-size: 13px; font-weight: 700; } .mrd-prog-bar { height: 7px; border-radius: 99px; background: var(--mrd-surface-2); overflow: hidden; border: 1px solid var(--mrd-hairline); } .mrd-prog-bar.lg { height: 9px; } .mrd-prog-bar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--mrd-accent), oklch(0.7 0.13 155)); transition: width 600ms var(--mrd-ease); } .mrd-prog-mini { font-size: 11px; color: var(--mrd-faint); margin-top: 4px; } .mrd-steps-box { margin: 18px 0; padding: 16px; border: 1px solid var(--mrd-border); border-radius: 14px; background: var(--mrd-surface-2); } .mrd-steps-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; } .mrd-steps-head span { font-size: 13px; font-weight: 600; color: var(--mrd-text); } .mrd-steps-head b { font-size: 15px; font-weight: 700; color: var(--mrd-accent); } .mrd-steps { list-style: none; margin: 12px 0 0; padding: 0; } .mrd-step { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 13.5px; border-top: 1px solid var(--mrd-hairline); } .mrd-step:first-child { border-top: none; } .mrd-step svg { flex: none; } .mrd-step.done { color: var(--mrd-text); } .mrd-step.done svg { color: var(--mrd-accent); } .mrd-step.current { color: var(--mrd-text); font-weight: 600; } .mrd-step.current svg { color: oklch(0.6 0.15 245); } .mrd-step.todo { color: var(--mrd-faint); } .mrd-step.todo svg { color: var(--mrd-faint); } .mrd-steps-foot { margin-top: 10px; font-size: 12px; color: var(--mrd-muted); text-align: right; } .mrd-detail-cta-note { margin-top: 9px; font-size: 11.5px; line-height: 1.5; color: var(--mrd-faint); }