/* ============== Uludaginfo — Brand stylesheet ============== */ /* Bug Report 03.06 — fontlar WOFF2'ye çevrildi (web-optimize: ~840KB OTF/TTF → ~328KB WOFF2). Modern tarayıcıların hepsi WOFF2 destekler; ölü public/fonts/ kopyası da silindi. */ /* Bug Report 03.06 P2 — başlık fontu (Mark Pro) için font-display: optional. swap, ilk paint'te fallback gösterip font yüklenince geçiyordu (slider FOUT). optional + preload ile font ilk paint'te hazır olur, geç swap olmaz → flash yok. (Gövde fontu Gotham swap'ta kalır.) */ @font-face { font-family: 'Mark Pro'; src: url('fonts/MarkPro.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: optional; } @font-face { font-family: 'Mark Pro'; src: url('fonts/MarkPro-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: optional; } @font-face { font-family: 'Mark Pro'; src: url('fonts/MarkPro-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: optional; } @font-face { font-family: 'Mark Pro'; src: url('fonts/MarkPro-Black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: optional; } @font-face { font-family: 'Mark Pro'; src: url('fonts/MarkPro-HeavyItalic.woff2') format('woff2'); font-weight: 900; font-style: italic; font-display: optional; } @font-face { font-family: 'Gotham'; src: url('fonts/Gotham.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Gotham'; src: url('fonts/Gotham-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } :root { --u-blue: #2C8BB4; --u-teal: #3CA89A; --u-yellow: #F5C42F; --u-fuchsia: #E5126D; --u-black: #0A0A0A; --u-snow: #FAFCFE; --u-slate: #1F2937; --u-line: #0A0A0A; --u-card: #FFFFFF; --u-muted: #6B7280; --u-green: #1B9E5A; --u-red: #E5126D; --u-radius: 14px; --u-radius-lg: 22px; --u-shadow: 0 1px 0 rgba(10,10,10,0.06), 0 12px 28px -16px rgba(10,10,10,0.18); --u-border: 2px solid var(--u-black); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* 03.06 — Scale/pinch-zoom engelleme (viewport user-scalable=no'yu pekiştirir; iOS Safari meta'yı yok sayabildiği için touch-action ile de engelliyoruz). pan-x + pan-y → dikey/yatay scroll ve JS swipe çalışır, pinch-zoom kapalı. */ html { touch-action: pan-x pan-y; } body { font-family: 'Gotham', 'Helvetica Neue', Helvetica, Arial, sans-serif; background: var(--u-snow); color: var(--u-slate); font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } .wrap { max-width: 1320px; margin: 0 auto; padding: 0 40px; } h1, h2, h3, h4 { font-family: 'Mark Pro', 'Helvetica Neue', Arial, sans-serif; color: var(--u-black); margin: 0; letter-spacing: -0.01em; } .eyebrow { font-family: 'Mark Pro', sans-serif; font-weight: 900; font-style: italic; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--u-fuchsia); } /* ============ Header ============ */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--u-black); color: #fff; border-bottom: 3px solid var(--u-yellow); } .site-header .inner { display: flex; align-items: center; gap: 28px; max-width: 1320px; margin: 0 auto; padding: 14px 40px; } .brand { display: flex; align-items: center; gap: 12px; } .brand .mark { width: 38px; height: 38px; } .brand .word { font-family: 'Mark Pro', sans-serif; font-weight: 900; font-size: 22px; letter-spacing: -0.01em; color: #fff; line-height: 1; } .brand .word .dot { color: var(--u-yellow); } .nav { display: flex; gap: 4px; flex: 1; justify-content: center; } .nav a { font-family: 'Mark Pro', sans-serif; font-weight: 500; font-size: 13.5px; letter-spacing: 0.02em; color: #E5E7EB; padding: 8px 12px; border-radius: 8px; transition: all 160ms ease; } .nav a:hover { background: rgba(255,255,255,0.08); color: #fff; } .nav a.active { color: var(--u-yellow); } .nav a.active::after { content: ''; display: block; height: 2px; background: var(--u-yellow); margin-top: 4px; border-radius: 2px; } .head-actions { display: flex; gap: 8px; align-items: center; } .locale { display: flex; gap: 2px; padding: 4px; background: rgba(255,255,255,0.06); border-radius: 999px; } .locale button { background: transparent; border: 0; color: #cbd5e1; font-family: 'Mark Pro', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.08em; padding: 6px 9px; border-radius: 999px; } .locale button.on { background: var(--u-yellow); color: var(--u-black); } .icon-btn { width: 36px; height: 36px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 0; color: #fff; display: grid; place-items: center; } .icon-btn:hover { background: rgba(255,255,255,0.16); } /* ============ Buttons ============ */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 12px; font-family: 'Mark Pro', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.02em; border: 2px solid transparent; cursor: pointer; transition: transform 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease; } .btn-primary { background: var(--u-fuchsia); color: #fff; border-color: var(--u-black); } .btn-primary:hover { background: var(--u-yellow); color: var(--u-black); transform: translateY(-1px); } .btn-ghost { background: transparent; color: #fff; border-color: #fff; } .btn-ghost:hover { background: #fff; color: var(--u-black); } .btn-dark { background: var(--u-black); color: #fff; border-color: var(--u-black); } .btn-dark:hover { background: var(--u-fuchsia); border-color: var(--u-fuchsia); } .btn-yellow { background: var(--u-yellow); color: var(--u-black); border-color: var(--u-black); } .btn-sm { padding: 9px 14px; font-size: 13px; border-radius: 10px; } /* ============ Cards / general ============ */ .card { background: #fff; border-radius: var(--u-radius-lg); border: 2px solid var(--u-black); box-shadow: var(--u-shadow); } .card.flat { box-shadow: none; } /* ============ Hero ============ */ .hero { position: relative; overflow: hidden; min-height: 720px; border-bottom: 3px solid var(--u-black); background: #0a1622; } .hero .bg { position: absolute; inset: 0; background-position: center; background-size: cover; filter: saturate(1.05) contrast(1.02); } .hero .bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0.20) 0%, rgba(10,10,10,0.05) 30%, rgba(10,10,10,0.85) 100%), linear-gradient(90deg, rgba(10,10,10,0.55), rgba(10,10,10,0.0) 55%); } .hero .inner { position: relative; z-index: 2; max-width: 1440px; margin: 0 auto; padding: 56px 40px 64px; min-height: 720px; display: flex; flex-direction: column; justify-content: space-between; } .hero .top-left { display: flex; flex-direction: column; gap: 18px; max-width: 920px; padding-left: 0; } .hero .bottom-right { margin-top: auto; margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 14px; padding-right: 0; } .hero .pre { display: flex; gap: 10px; align-items: center; color: #fff; } .hero .pre .pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.10); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.25); color: #fff; padding: 6px 12px; border-radius: 999px; font-family: 'Mark Pro', sans-serif; font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; } .hero .pre .pill .ldot { width: 8px; height: 8px; border-radius: 50%; background: var(--u-fuchsia); box-shadow: 0 0 0 4px rgba(229,18,109,0.25); animation: pulse 1.5s infinite; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(229,18,109,0.45); } 50% { box-shadow: 0 0 0 8px rgba(229,18,109,0); } } .hero h1 { font-family: 'Mark Pro', sans-serif; font-weight: 900; color: #fff; font-size: 104px; line-height: 0.88; letter-spacing: -0.025em; text-transform: uppercase; text-shadow: 0 2px 24px rgba(0,0,0,0.30); max-width: 980px; } .hero h1 .accent { color: var(--u-yellow); } .hero .sub { font-family: 'Mark Pro', sans-serif; font-weight: 500; color: rgba(255,255,255,0.95); font-size: 22px; line-height: 1.35; max-width: 620px; margin-top: 20px; } .hero .ctas { display: flex; gap: 14px; margin-top: 28px; } .hero .ctas .btn-primary { padding: 16px 26px; font-size: 16px; } .hero .ctas .btn-ghost { padding: 16px 24px; font-size: 16px; } /* Live stats */ .live-stats { position: absolute; top: 50%; right: 40px; z-index: 3; transform: translateY(-50%); display: flex; flex-direction: column; gap: 10px; width: 220px; } .stat-pill { background: rgba(255,255,255,0.96); border: 2px solid var(--u-black); border-radius: 14px; padding: 0; min-width: 180px; min-height: 80px; display: flex; flex-direction: row; align-items: center; gap: 0; box-shadow: 0 6px 20px rgba(0,0,0,0.18); transition: all 200ms ease; overflow: hidden; cursor: pointer; text-decoration: none; color: inherit; } .stat-pill:hover { transform: translateY(-2px); } .stat-pill-ic { flex: 0 0 50%; height: 54px; object-fit: contain; display: block; padding: 4px 8px; } .stat-pill-body { flex: 0 0 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 12px 8px 12px 0; } .stat-pill .big { font-family: 'Mark Pro', sans-serif; font-weight: 900; font-size: 28px; color: var(--u-black); line-height: 1; text-align: center; } .stat-pill .big sup { font-size: 13px; font-weight: 700; } .stat-pill .lbl { font-family: 'Gotham', sans-serif; font-size: 11px; color: var(--u-slate); letter-spacing: 0.04em; text-align: center; } /* Snowflakes overlay */ .snow { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; } .snow span { position: absolute; top: -20px; color: #fff; opacity: 0.55; animation: fall linear infinite; font-size: 14px; text-shadow: 0 0 8px rgba(255,255,255,0.25); } @keyframes fall { 0% { transform: translateY(-10vh) translateX(0) rotate(0deg); opacity: 0; } 10% { opacity: 0.7; } 100% { transform: translateY(110vh) translateX(40px) rotate(360deg); opacity: 0; } } .scroll-cue { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 3; color: #fff; display: flex; flex-direction: column; align-items: center; gap: 6px; font-family: 'Mark Pro'; font-weight: 700; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; animation: bob 2s infinite ease-in-out; } @keyframes bob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } } /* ============ Section frame ============ */ section.block { padding: 88px 0; position: relative; } .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 36px; } .section-head h2 { font-family: 'Mark Pro', sans-serif; font-weight: 700; font-size: 56px; line-height: 0.95; letter-spacing: -0.02em; color: var(--u-black); } .section-head h2 .accent { color: var(--u-fuchsia); } .section-head h2 .accent-yellow { color: var(--u-yellow); -webkit-text-stroke: 1.5px var(--u-black); } .section-head h2 .accent-yellow-solid { color: var(--u-yellow); } /* Dark-background section variant (used by .act-section). Lifts text + tag colors so heading + intro paragraph stay readable on black. */ .act-section { background: var(--u-black); color: #fff; } .act-section .section-head h2 { color: #fff; } .act-section .section-head p { color: rgba(255,255,255,0.7); } .section-tag.tag-on-dark { background: var(--u-yellow); color: var(--u-black); } .section-head p { color: var(--u-slate); font-size: 16px; max-width: 460px; margin: 8px 0 0; } .section-head .right { display: flex; gap: 12px; align-items: center; } .section-tag { display: inline-flex; align-items: center; gap: 8px; background: var(--u-black); color: #fff; padding: 6px 12px; border-radius: 999px; font-family: 'Mark Pro'; font-weight: 900; font-style: italic; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 14px; } .section-tag .sq { width: 8px; height: 8px; background: var(--u-yellow); } .intro-badge { display: inline-flex; gap: 8px; align-items: center; color: var(--u-muted); font-size: 11px; font-family: 'Mark Pro'; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 12px; } .intro-badge .led { width: 7px; height: 7px; border-radius: 50%; background: var(--u-fuchsia); animation: pulse 1.5s infinite; } /* ============ Webcam tiles ============ */ .cam-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .cam-tile { position: relative; aspect-ratio: 16/9; border-radius: var(--u-radius); overflow: hidden; border: 2px solid var(--u-black); cursor: pointer; background: #1a2433; transition: transform 200ms ease, box-shadow 200ms ease; } .cam-tile:hover { transform: scale(1.02); box-shadow: 0 18px 36px -12px rgba(0,0,0,0.35); } .cam-tile .img { position: absolute; inset: 0; background-size: cover; background-position: center; } .cam-tile .img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.0) 40%, rgba(0,0,0,0.65) 100%); } .cam-tile .live { position: absolute; top: 10px; left: 10px; display: inline-flex; align-items: center; gap: 6px; background: rgba(10,10,10,0.6); color: #fff; padding: 5px 10px; border-radius: 999px; font-family: 'Mark Pro'; font-weight: 900; font-style: italic; font-size: 11px; letter-spacing: 0.16em; } .cam-tile .live .d { width: 7px; height: 7px; border-radius: 50%; background: var(--u-fuchsia); animation: pulse 1.5s infinite; } .cam-tile .name { position: absolute; bottom: 12px; left: 14px; right: 14px; font-family: 'Mark Pro'; font-weight: 700; font-size: 19px; color: #fff; display: flex; justify-content: space-between; align-items: end; gap: 8px; } .cam-tile .name .alt { font-family: 'Gotham'; font-weight: 400; font-size: 12px; opacity: 0.85; } .cam-tile .badge-temp { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.95); color: var(--u-black); padding: 4px 9px; border-radius: 999px; font-family: 'Mark Pro'; font-weight: 900; font-size: 12px; border: 2px solid var(--u-black); } /* ============ Weather / snow row ============ */ .wx-row { display: grid; grid-template-columns: 5fr 5fr 6fr; gap: 18px; } .wx-row.wx-row-2 { grid-template-columns: 1fr 1fr; } .wx-cast .wx-cast-sub { margin-top: 16px; padding-top: 16px; border-top: 1px dashed #e5e7eb; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .wx-cast .wx-cast-sub-label { font-family: 'Mark Pro'; font-weight: 900; font-style: italic; font-size: 13px; letter-spacing: 0.14em; color: var(--u-fuchsia); text-transform: uppercase; margin-bottom: 0; } .wx-cast .wx-cast-sub-form { display: flex; gap: 8px; } .wx-cast .wx-cast-sub-form input { flex: 1; padding: 7px 12px; border: 1.5px solid var(--u-black); border-radius: 8px; font-family: 'Gotham'; font-size: 12px; outline: none; } .wx-cast .wx-cast-sub-form .btn { padding: 7px 14px; font-size: 12px; } .wx-card { padding: 28px; } .wx-today { background: #011528; color: #fff; border-color: var(--u-black); position: relative; overflow: hidden; background-size: cover; background-position: center; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } .wx-today::before { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(1,21,40,0.72) 0%, rgba(1,21,40,0.48) 100%); pointer-events: none; z-index: 0; } .wx-today > * { position: relative; z-index: 1; } .wx-today .big-t { font-family: 'Mark Pro'; font-weight: 900; font-size: 90px; line-height: 0.9; letter-spacing: -0.04em; color: #fff; } .wx-today .big-t sup { font-size: 30px; font-weight: 700; vertical-align: super; margin-left: 4px; } .wx-today .wx-cond { font-family: 'Gotham', sans-serif; font-size: 15px; color: rgba(255,255,255,0.9); margin-top: 8px; } .wx-today .wx-divider { margin: 20px 0 16px; height: 1px; background: rgba(255,255,255,0.30); } .wx-today .wx-snow-lbl { font-family: 'Mark Pro'; font-weight: 500; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.75); margin-bottom: 6px; } .wx-today .wx-snow-val { font-family: 'Mark Pro'; font-weight: 900; font-size: 90px; line-height: 0.9; letter-spacing: -0.03em; color: #fff; } .wx-today .wx-snow-unit { font-family: 'Mark Pro'; font-weight: 700; font-size: 30px; letter-spacing: 0; } /* Visually hidden but reachable by screen readers — used by big-t to expose "°C". */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Stretched-link pattern: makes the entire container clickable while keeping the visible CTA as the only real . The ::after overlay covers the parent (which must have .has-stretched-link so we can scope position: relative). */ .has-stretched-link { position: relative; } .has-stretched-link .stretched-link::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: auto; background: transparent; } .has-stretched-link .stretched-link:focus-visible { outline: none; } .has-stretched-link:has(.stretched-link:focus-visible) { outline: 3px solid var(--u-yellow); outline-offset: 4px; } .wx-snow { background: #fff; } .wx-snow .head { display: flex; justify-content: space-between; align-items: start; } .wx-snow .delta { font-family: 'Mark Pro'; font-weight: 900; font-size: 80px; line-height: 0.9; color: var(--u-fuchsia); letter-spacing: -0.03em; } .wx-snow .delta sup { font-size: 22px; vertical-align: super; margin-left: 4px; color: var(--u-fuchsia); font-weight: 700; } .wx-snow .delta-label { font-family: 'Mark Pro'; font-weight: 500; font-size: 12px; color: var(--u-muted); letter-spacing: 0.12em; text-transform: uppercase; } .wx-snow .chart { margin-top: 10px; height: 100px; } .wx-snow .sub-form { display: flex; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px dashed #e5e7eb; } .wx-snow .sub-form input { flex: 1; padding: 10px 12px; border: 2px solid var(--u-black); border-radius: 10px; font-family: 'Gotham'; font-size: 13px; outline: none; } .wx-snow .sub-form .btn { padding: 10px 14px; font-size: 13px; } .wx-cast { background: #fff; } /* Card B header (5-day title + MGM badge) — extracted from inline styles. */ .wx-cast .wx-cast-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin: 0; } .wx-cast .wx-cast-eyebrow { font-family: 'Mark Pro', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--u-muted); } .wx-cast .wx-cast-title { font-family: 'Mark Pro', sans-serif; font-weight: 700; font-size: 24px; color: var(--u-black); margin-top: 4px; line-height: 1.1; } .wx-cast .wx-cast-title .accent { color: var(--u-fuchsia); } .wx-cast .wx-cast-attest { font-family: 'Mark Pro', sans-serif; font-weight: 900; font-style: italic; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--u-fuchsia); background: rgba(229,18,109,0.10); padding: 6px 10px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; } .wx-cast .wx-cast-foot { margin-top: 14px; padding-top: 14px; border-top: 1px dashed #e5e7eb; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; } .wx-cast .wx-cast-foot span { font-family: 'Gotham'; font-size: 12px; color: var(--u-muted); } .wx-cast .wx-cast-foot a { font-family: 'Mark Pro', sans-serif; font-weight: 700; font-size: 12px; color: var(--u-fuchsia); transition: color 160ms ease; } .wx-cast .wx-cast-foot a:hover { color: var(--u-black); } .wx-cast .grid5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 14px; } .wx-cast .day { text-align: center; padding: 14px 8px; border-radius: 12px; border: 1.5px solid #e5e7eb; } /* Bug Report 01.06.2026 madde 3 — bugünün hücresi başlık yanındaki var(--u-blue) ile aynı (önceki sarı yerine). Çocuk metinler beyaza alınır. */ .wx-cast .day.today { background: var(--u-blue); border-color: var(--u-blue); } .wx-cast .day.today .d, .wx-cast .day.today .t, .wx-cast .day.today .tn, .wx-cast .day.today .sn { color: #fff; } .wx-cast .day .d { font-family: 'Mark Pro'; font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--u-slate); } .wx-cast .day .ic { font-size: 22px; margin: 6px 0 4px; } .wx-cast .day .t { font-family: 'Mark Pro'; font-weight: 900; font-size: 18px; color: var(--u-black); } .wx-cast .day .tn { font-family: 'Gotham'; font-size: 11px; color: var(--u-muted); } .wx-cast .day .sn { font-family: 'Mark Pro'; font-weight: 900; font-style: italic; font-size: 11px; color: var(--u-blue); letter-spacing: 0.06em; } /* ============ AdSense placeholder ============ */ .uludagadsense { margin: 0 auto; width: 728px; max-width: 100%; height: 90px; border: 2px dashed #cbd5e1; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #94a3b8; background: repeating-linear-gradient(45deg, transparent 0 8px, rgba(148,163,184,0.05) 8px 16px); font-family: 'Mark Pro'; font-weight: 700; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; overflow: hidden; } .uludagadsense::before { content: '◇'; margin-right: 10px; opacity: 0.5; } /* Gerçek AdSense reklamı (.adsbygoogle) yerleştiğinde placeholder görünümünü (dashed kenarlık, çizgili zemin, ◇ etiket, sabit yükseklik) kaldır — kutu yalnızca ortalama + genişlik kabı olarak kalır, reklam kendi boyutunu alır. */ .uludagadsense:has(.adsbygoogle) { border: none; background: none; height: auto; min-height: 0; overflow: visible; } .uludagadsense:has(.adsbygoogle)::before { content: none; } .kn-uludagadsense-zone .kn-uludagadsense-box:has(.adsbygoogle) { height: auto; } /* ============ Pist / liftler özet ============ */ .slope-grid { display: grid; grid-template-columns: 7fr 9fr; gap: 24px; } .map-card { position: relative; border-radius: var(--u-radius-lg); overflow: hidden; border: 2px solid var(--u-black); min-height: 420px; background: #e7eef6; } .map-card .ph-map { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 50% at 40% 40%, rgba(60,168,154,0.5), transparent 70%), radial-gradient(ellipse 80% 50% at 75% 70%, rgba(44,139,180,0.5), transparent 70%), linear-gradient(135deg, #DCE7F2, #C4D6EA); } .map-card .ph-lines { position: absolute; inset: 0; } .map-card .ph-overlay { position: absolute; left: 24px; bottom: 24px; right: 24px; display: flex; justify-content: space-between; align-items: end; } .map-card .ph-overlay .pill-stat { display: flex; gap: 8px; } .map-card .ph-overlay .pill-stat .pi { background: rgba(255,255,255,0.95); border: 2px solid var(--u-black); padding: 6px 10px; border-radius: 999px; font-family: 'Mark Pro'; font-weight: 700; font-size: 12px; } .map-card .marker { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--u-black); background: var(--u-fuchsia); box-shadow: 0 4px 10px rgba(0,0,0,0.18); display: grid; place-items: center; color: #fff; font-family: 'Mark Pro'; font-weight: 900; font-size: 11px; } .legend-card { padding: 24px; } .legend-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-top: 16px; } .legend-pill { display: flex; flex-direction: column; gap: 8px; padding: 16px 14px; border-radius: 14px; border: 2px solid var(--u-black); background: #fff; } .legend-pill .dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--u-black); } .legend-pill .l1 { font-family: 'Mark Pro'; font-weight: 700; font-size: 13px; } .legend-pill .l2 { font-family: 'Mark Pro'; font-weight: 900; font-size: 24px; color: var(--u-black); } .legend-pill .l3 { font-family: 'Gotham'; font-size: 11px; color: var(--u-muted); } .lift-strip { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-top: 24px; } .lift-mini { padding: 14px; border-radius: 14px; background: #fff; border: 2px solid var(--u-black); display: flex; flex-direction: column; gap: 6px; } .lift-mini .top { display: flex; align-items: center; gap: 8px; justify-content: space-between; } .lift-mini .code { font-family: 'Mark Pro'; font-weight: 900; font-size: 11px; letter-spacing: 0.18em; color: var(--u-muted); } .lift-mini .nm { font-family: 'Mark Pro'; font-weight: 700; font-size: 15px; color: var(--u-black); line-height: 1.1; } .lift-mini .kn { font-family: 'Gotham'; font-size: 11px; color: var(--u-muted); } .lift-mini .stat { display: flex; align-items: center; gap: 6px; font-family: 'Mark Pro'; font-weight: 700; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; } .lift-mini .stat .d { width: 8px; height: 8px; border-radius: 50%; } .lift-mini .stat.open .d { background: var(--u-green); box-shadow: 0 0 0 3px rgba(27,158,90,0.18); } .lift-mini .stat.closed .d { background: var(--u-red); } .lift-mini .stat.open { color: var(--u-green); } .lift-mini .stat.closed { color: var(--u-red); } .lift-mini .meta { display: flex; gap: 8px; color: var(--u-muted); font-size: 11px; font-family: 'Gotham'; } /* ============ Activities ============ */ .act-wrap { position: relative; } .act-row { display: flex; gap: 18px; overflow-x: auto; scroll-behavior: smooth; padding-bottom: 6px; scroll-snap-type: x mandatory; } .act-row::-webkit-scrollbar { height: 8px; } .act-row::-webkit-scrollbar-thumb { background: var(--u-black); border-radius: 4px; } .act-card { flex: 0 0 320px; height: 420px; border-radius: var(--u-radius-lg); background: #fff; border: 2px solid var(--u-black); overflow: hidden; display: flex; flex-direction: column; scroll-snap-align: start; text-decoration: none; color: inherit; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; } .act-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -16px rgba(0,0,0,0.4); border-color: var(--u-fuchsia); } .act-card:focus-visible { outline: 3px solid var(--u-yellow); outline-offset: 3px; } .act-card .gal-img { transition: transform 600ms ease; } .act-card:hover .gal-img { transform: scale(1.04); } .act-card .detail .arr { display: inline-block; transition: transform 200ms ease; } .act-card:hover .detail .arr { transform: translateX(4px); } .act-card .gal { height: 60%; position: relative; background: #e7eef6; overflow: hidden; } .act-card .gal-img { position: absolute; inset: 0; background-size: cover; background-position: center; } .act-card .dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 5px; } .act-card .dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.5); border: 1px solid rgba(0,0,0,0.2); } .act-card .dots span.on { background: #fff; } .act-card .gal .tag { position: absolute; top: 12px; left: 12px; background: var(--u-fuchsia); color: #fff; padding: 5px 10px; border-radius: 999px; font-family: 'Mark Pro'; font-weight: 900; font-style: italic; font-size: 10px; letter-spacing: 0.16em; border: 2px solid var(--u-black); } .act-card .body { padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; } .act-card h3 { font-family: 'Mark Pro'; font-weight: 700; font-size: 22px; line-height: 1.05; color: var(--u-black); } .act-card p { font-size: 13px; color: var(--u-slate); margin: 0; flex: 1; } .act-card .row-b { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; } .act-card .price { font-family: 'Mark Pro'; font-weight: 900; font-size: 14px; } .act-card .price small { font-family: 'Gotham'; font-weight: 400; font-size: 11px; color: var(--u-muted); } .act-card a.detail, .act-card span.detail { font-family: 'Gotham'; font-weight: 700; font-size: 12px; color: var(--u-fuchsia); } .act-nav { position: absolute; top: -56px; right: 0; display: flex; gap: 8px; } .act-nav button { width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 2px solid var(--u-black); display: grid; place-items: center; } .act-nav button:hover { background: var(--u-yellow); } /* ---- Big slider arrows: prominent, on slider edges ---- */ .act-wrap { padding: 0 8px; } .act-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 68px; height: 68px; border-radius: 50%; background: var(--u-yellow); color: var(--u-black); border: 3px solid var(--u-black); display: grid; place-items: center; cursor: pointer; z-index: 6; box-shadow: 0 6px 0 var(--u-black), 0 14px 28px -10px rgba(0,0,0,0.45); transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease; } .act-arrow:hover { transform: translateY(calc(-50% - 2px)); box-shadow: 0 8px 0 var(--u-black), 0 18px 32px -10px rgba(0,0,0,0.55); background: #fff; } .act-arrow:active { transform: translateY(calc(-50% + 2px)); box-shadow: 0 3px 0 var(--u-black); } .act-arrow-left { left: -10px; } .act-arrow-right { right: -10px; } .act-arrow svg { display: block; } .events { margin-top: 28px; display: grid; grid-template-columns: 240px 1fr 1fr 1fr; gap: 0; background: var(--u-black); color: #fff; border-radius: 14px; overflow: hidden; } .events .lbl { padding: 18px 22px; display: flex; flex-direction: column; gap: 4px; background: var(--u-fuchsia); } .events .lbl .t1 { font-family: 'Mark Pro'; font-weight: 900; font-style: italic; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.85; } .events .lbl .t2 { font-family: 'Mark Pro'; font-weight: 900; font-size: 24px; line-height: 1; } .events .ev { padding: 18px 22px; border-left: 1px solid rgba(255,255,255,0.16); display: flex; flex-direction: column; gap: 4px; } .events .ev .dt { font-family: 'Mark Pro'; font-weight: 900; font-style: italic; font-size: 11px; letter-spacing: 0.16em; color: var(--u-yellow); } .events .ev .nm { font-family: 'Mark Pro'; font-weight: 700; font-size: 17px; } .events .ev .lk { font-family: 'Gotham'; font-weight: 700; font-size: 12px; color: rgba(255,255,255,0.7); } /* ============ Konaklama hero ============ */ .konak { position: relative; height: 540px; border-radius: var(--u-radius-lg); overflow: hidden; border: 2px solid var(--u-black); background: #1f2937; } .konak .bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .konak .bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(10,10,10,0.78) 0%, rgba(10,10,10,0.4) 60%, transparent); } .konak .body { position: relative; z-index: 2; padding: 60px 56px; height: 100%; display: flex; flex-direction: column; justify-content: center; } .konak h2 { font-family: 'Mark Pro'; font-weight: 900; font-size: 84px; line-height: 0.92; color: #fff; max-width: 560px; letter-spacing: -0.025em; } .konak p { color: rgba(255,255,255,0.9); margin: 16px 0 28px; max-width: 480px; font-size: 16px; } .konak .stack { display: flex; gap: 12px; } .konak .hotels-mini { position: absolute; right: 56px; top: 50%; transform: translateY(-50%); z-index: 2; display: grid; grid-template-columns: repeat(3, 90px); gap: 8px; } .konak .hotels-mini .h { height: 90px; border-radius: 12px; border: 2px solid var(--u-black); background: linear-gradient(135deg, #fff, #f1f5f9); display: grid; place-items: center; font-family: 'Mark Pro'; font-weight: 900; font-size: 11px; color: var(--u-slate); letter-spacing: 0.12em; text-align: center; padding: 6px; } .konak .hotels-mini .h.fuchsia { background: var(--u-fuchsia); color: #fff; } .konak .hotels-mini .h.yellow { background: var(--u-yellow); color: var(--u-black); } .konak .hotels-mini .h.teal { background: var(--u-teal); color: #fff; } /* ============ News ============ */ .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } /* Bug Report 05.06 — güncel haberler yatay kaydırma (carousel): mobil swipe (native scroll), desktop ok butonları. Aktiviteler scroller deseniyle aynı. */ .news-wrap { position: relative; } .news-row { display: flex; gap: 22px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; /* overflow-x:auto → overflow-y de auto olur; hover'da kart -3px kalkınca üstü + gölgesi bu kutuda kırpılıyordu (üst çerçeve "kayboluyor"). Üstte headroom aç, negatif margin ile layout kaymasın. */ padding-top: 10px; margin-top: -10px; padding-bottom: 12px; /* Siyah kaydırma çubuğu gizlendi (Burak 2026-06-25) — scroll davranışı korunur (ok butonları + swipe), sadece görünür scrollbar kaldırıldı. */ scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/Edge legacy */ } .news-row::-webkit-scrollbar { height: 0; width: 0; display: none; } .news-row .news-card { flex: 0 0 340px; scroll-snap-align: start; } .news-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 60px; height: 60px; border-radius: 50%; background: var(--u-yellow); color: var(--u-black); border: 3px solid var(--u-black); display: grid; place-items: center; cursor: pointer; z-index: 6; box-shadow: 0 6px 0 var(--u-black), 0 14px 28px -10px rgba(0,0,0,0.45); transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease; } .news-arrow:hover { transform: translateY(calc(-50% - 2px)); background: #fff; } .news-arrow:active { transform: translateY(calc(-50% + 2px)); box-shadow: 0 3px 0 var(--u-black); } .news-arrow-left { left: -10px; } .news-arrow-right { right: -10px; } .news-arrow svg { display: block; } @media (max-width: 768px) { /* Mobilde oklar gizli (swipe ile gezilir); şerit tam-bleed + komşu kart peek. */ .news-arrow { display: none; } .news-row { margin: 0 -16px; padding: 0 16px 8px; } .news-row .news-card { flex-basis: 82%; } } .news-card { display: flex; flex-direction: column; background: #fff; border: 2px solid var(--u-black); border-radius: var(--u-radius-lg); overflow: hidden; color: inherit; text-decoration: none; transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease; } .news-card:hover { transform: translateY(-3px); box-shadow: 0 16px 32px -16px rgba(0,0,0,0.3); border-color: var(--u-fuchsia); } .news-card:focus-visible { outline: 3px solid var(--u-fuchsia); outline-offset: 3px; } .news-card .img { aspect-ratio: 16/9; background-size: cover; background-position: center; background-color: #0a1622; border-bottom: 2px solid var(--u-black); position: relative; } /* Hover'da img zoom (scale) KALDIRILDI (2026-06-13): kart translateY + img scale birlikteyken border-radius+overflow clip bozulup img üst kenarı 2px taşıp fuchsia üst çerçeveyi örtüyordu ("üst kenar beyaza dönüyor"). Lift + çerçeve rengi + gölge hover yeterli; zoom'a gerek yok. */ .news-card .body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; } .news-card .meta { display: flex; gap: 10px; align-items: center; } .news-card .cat { font-family: 'Mark Pro', sans-serif; font-weight: 900; font-style: italic; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; background: var(--u-fuchsia); padding: 4px 9px; border-radius: 999px; } .news-card .cat.cat-alert { background: var(--u-red); } .news-card .cat.cat-event { background: var(--u-teal); color: #fff; } .news-card .dt { font-family: 'Gotham'; font-size: 12px; color: var(--u-muted); } .news-card h3 { font-family: 'Mark Pro', sans-serif; font-weight: 700; font-size: 22px; line-height: 1.2; color: var(--u-black); } .news-card p { font-size: 14px; color: var(--u-slate); margin: 0; flex: 1; } .news-card .more { font-family: 'Mark Pro', sans-serif; font-weight: 700; font-size: 13px; letter-spacing: 0.04em; color: var(--u-fuchsia); margin-top: 4px; display: inline-flex; align-items: center; gap: 6px; } .news-card .more .arr { display: inline-block; transition: transform 200ms ease; } .news-card:hover .more .arr { transform: translateX(4px); } /* ============ Partners ============ */ /* Centered head for the partners section (extracted from inline styles). */ .partners-section .partners-head { text-align: center; margin-bottom: 24px; } .partners-section .partners-head h2 { font-family: 'Mark Pro', sans-serif; font-weight: 700; font-size: 36px; margin-top: 10px; } /* Bug Report 01.06.2026 madde 1 — Çözüm Ortakları tek satır. maximiles kaldırıldı (8 logo). Grid yerine flex-nowrap: logolar küçülerek her zaman tek satıra sığar; responsive dosyalardaki .partners grid-template-columns override'ları flex container'da no-op kalır (display burada flex). */ .partners { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 10px; padding: 28px 0; list-style: none; margin: 0; } .partners > li { display: contents; } .partner { flex: 1 1 0; min-width: 0; aspect-ratio: 1 / 1; /* Bug Report 05.06 — partner logolarının arka planı kaldırıldı (beyaz kutu + border yerine şeffaf; JPG logolar şeffaf PNG'ye çevrildi). */ background: transparent; border: 0; border-radius: 14px; display: grid; place-items: center; padding: 10px; text-decoration: none; transition: transform 200ms ease, box-shadow 200ms ease; overflow: hidden; } .partner:hover { transform: translateY(-3px); } .partner img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(1) opacity(0.7); transition: filter 200ms ease, transform 200ms ease; } .partner:hover img { filter: grayscale(0) opacity(1); transform: scale(1.04); } .partner.partner-dark { background: #0A0A0A; border-color: #0A0A0A; } .partner.partner-dark img { filter: grayscale(1) brightness(1.4) opacity(0.85); } .partner.partner-dark:hover img { filter: brightness(1) opacity(1); } /* ============ Footer ============ */ .site-footer { background: var(--u-black); color: #cbd5e1; padding: 64px 0 24px; border-top: 6px solid var(--u-yellow); } .site-footer .top { display: grid; grid-template-columns: 1.4fr 1fr 1fr minmax(310px, 1.4fr); gap: 48px; padding-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,0.1); } .site-footer h4 { font-family: 'Mark Pro'; font-weight: 900; font-style: italic; color: var(--u-yellow); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 18px; } .site-footer .about-blk { padding-right: 16px; } .site-footer .big-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; } .site-footer .big-brand .mk { width: 72px; height: 72px; } .site-footer .big-brand .nm { font-family: 'Mark Pro'; font-weight: 900; color: #fff; font-size: 28px; line-height: 1; } .site-footer .big-brand .nm small { font-family: 'Gotham'; font-weight: 400; font-size: 12px; color: rgba(255,255,255,0.6); display: block; letter-spacing: 0.06em; } .site-footer p { color: rgba(255,255,255,0.75); font-size: 13px; } .site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .site-footer ul a { color: rgba(255,255,255,0.8); font-size: 14px; transition: color 160ms ease; } .site-footer ul a:hover { color: var(--u-yellow); } .site-footer .newsletter { margin-top: 22px; } .site-footer .newsletter .ttl { font-family: 'Mark Pro'; font-weight: 900; font-size: 18px; color: #fff; margin-bottom: 8px; } .site-footer .newsletter .row { display: flex; flex-direction: column; align-items: stretch; gap: 12px; } .site-footer .newsletter .recaptcha-box { max-width: 100%; overflow: hidden; } /* "Abone Ol" butonu e-posta input'u ile aynı genişlikte (kolonu tam doldurur) + metni yatay/dikey ortalı. */ .site-footer .newsletter .btn { align-self: stretch; width: 100%; display: inline-flex; align-items: center; justify-content: center; text-align: center; } /* #footer-bulten anchor — Bildir/Abone Ol linkleri buraya kayınca sticky header altında kalmasın diye üst boşluk. */ .site-footer .footer-newsletter-col { scroll-margin-top: 90px; } .site-footer .newsletter input { flex: 1; padding: 12px 14px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.2); color: #fff; font-family: 'Gotham'; font-size: 13px; outline: none; } .site-footer .newsletter input::placeholder { color: rgba(255,255,255,0.5); } .site-footer .newsletter .btn { padding: 12px 16px; font-size: 13px; } .site-footer .socials { display: flex; gap: 8px; margin-top: 16px; } .site-footer .socials a { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.06); display: grid; place-items: center; } .site-footer .socials a:hover { background: var(--u-fuchsia); } .site-footer .disclosure { padding: 18px 0; color: rgba(255,255,255,0.5); font-size: 11.5px; } .site-footer .bottom { padding-top: 18px; border-top: 1px solid rgba(255,255,255,0.1); display: flex; justify-content: space-between; align-items: center; gap: 16px; color: rgba(255,255,255,0.6); font-size: 12.5px; } .site-footer .bottom a { color: var(--u-yellow); } /* ============ Breadcrumb (generic — + legacy list pages) ============ */ .crumbs { color: rgba(255,255,255,0.7); font-family: 'Mark Pro'; font-weight: 500; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; display: flex; gap: 10px; } .crumbs span:not(:last-child)::after { content: '·'; margin-left: 10px; opacity: 0.5; } .crumbs .now { color: var(--u-yellow); } /* Defensive: keep header sticky across all pages even if a page-level rule sets position elsewhere */ .site-header { position: sticky !important; top: 0 !important; } /* ============ Liftler page ============ */ .liftler-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: -32px; position: relative; z-index: 5; } .lift-stat { background: #fff; border: 2px solid var(--u-black); border-radius: var(--u-radius-lg); padding: 22px; display: flex; gap: 16px; align-items: center; } .lift-stat .icn { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; border: 2px solid var(--u-black); } .lift-stat .num { font-family: 'Mark Pro'; font-weight: 900; font-size: 40px; line-height: 1; color: var(--u-black); } .lift-stat .lab { font-family: 'Mark Pro'; font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--u-slate); } .lift-stat .delta { font-family: 'Gotham'; font-size: 11px; color: var(--u-muted); margin-top: 4px; } .lift-stat.total .icn { background: var(--u-yellow); } .lift-stat.open .icn { background: var(--u-teal); color: #fff; } .lift-stat.closed .icn { background: var(--u-fuchsia); color: #fff; } .lift-stat.queue .icn { background: var(--u-blue); color: #fff; } .filter-bar { margin-top: 36px; padding: 16px; background: #fff; border: 2px solid var(--u-black); border-radius: 14px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; } .fb-group { display: flex; align-items: center; gap: 10px; } .fb-group label { font-family: 'Mark Pro'; font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--u-slate); } .seg { display: inline-flex; padding: 4px; background: #f1f5f9; border-radius: 999px; gap: 2px; border: 1.5px solid #cbd5e1; } .seg button { background: transparent; border: 0; padding: 7px 14px; font-family: 'Mark Pro'; font-weight: 700; font-size: 12px; letter-spacing: 0.04em; border-radius: 999px; color: var(--u-slate); } .seg button.on { background: var(--u-black); color: #fff; } .dd { position: relative; display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1.5px solid var(--u-black); padding: 7px 14px; border-radius: 10px; font-family: 'Mark Pro'; font-weight: 700; font-size: 12px; } .dd select { border: 0; background: transparent; outline: none; font: inherit; padding-right: 4px; } .search-in { margin-left: auto; display: flex; align-items: center; gap: 8px; padding: 0 12px; background: #f1f5f9; border-radius: 10px; border: 1.5px solid #cbd5e1; height: 36px; } .search-in input { border: 0; background: transparent; outline: none; font: inherit; padding: 8px 0; width: 220px; } .search-in svg { color: var(--u-muted); } .lift-table-wrap { margin-top: 22px; background: #fff; border: 2px solid var(--u-black); border-radius: var(--u-radius-lg); overflow: hidden; } .lt { width: 100%; border-collapse: collapse; font-family: 'Gotham'; font-size: 14px; } .lt thead th { position: sticky; top: 0; z-index: 2; background: var(--u-black); color: #fff; font-family: 'Mark Pro'; font-weight: 700; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; padding: 14px 18px; text-align: left; white-space: nowrap; } .lt tbody td { padding: 16px 18px; border-bottom: 1px solid #e5e7eb; vertical-align: middle; } .lt tbody tr:nth-child(odd) td { background: #FAFCFE; } .lt tbody tr { transition: background 160ms ease; cursor: pointer; } .lt tbody tr:hover td { background: rgba(245,196,47,0.18) !important; } .lt .lcode { font-family: 'Mark Pro'; font-weight: 900; font-size: 14px; background: var(--u-black); color: var(--u-yellow); padding: 5px 9px; border-radius: 6px; letter-spacing: 0.06em; display: inline-block; /* 03.06 — lift kodu pill'i sabit genişlikte + ortalı (L1 ile TK10 aynı genişlikte hizalansın). box-sizing: border-box → padding min-width'e dahil. */ box-sizing: border-box; min-width: 56px; max-width: 96px; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .lt .ln { font-family: 'Mark Pro'; font-weight: 700; color: var(--u-black); font-size: 15px; } .lt .lkind { font-family: 'Gotham'; font-size: 13px; color: var(--u-slate); } .lt .lnum { font-family: 'Mark Pro'; font-weight: 700; font-size: 14px; color: var(--u-black); } .lt .badge-s { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-family: 'Mark Pro'; font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; } .badge-open { background: rgba(27,158,90,0.12); color: var(--u-green); } .badge-open .d, .badge-closed .d, .badge-hold .d { width: 8px; height: 8px; border-radius: 50%; } .badge-open .d { background: var(--u-green); box-shadow: 0 0 0 3px rgba(27,158,90,0.18); } .badge-closed { background: rgba(229,18,109,0.12); color: var(--u-fuchsia); } .badge-closed .d { background: var(--u-fuchsia); } .badge-hold { background: rgba(245,196,47,0.18); color: #92760a; } .badge-hold .d { background: var(--u-yellow); } .zone-tag { display: inline-block; padding: 4px 10px; border-radius: 999px; font-family: 'Mark Pro'; font-weight: 700; font-size: 11px; background: #f1f5f9; color: var(--u-slate); letter-spacing: 0.08em; } /* Drawer */ .drawer-mask { position: fixed; inset: 0; background: rgba(10,10,10,0.45); z-index: 100; opacity: 0; pointer-events: none; transition: opacity 240ms ease; } .drawer-mask.open { opacity: 1; pointer-events: auto; } .drawer { /* madde 7 (02.06) — sabit 520px mobilde ekranı taşıyordu (sol sütun görünmüyordu). min() ile dar ekranda 100vw, geniş ekranda 520px. */ position: fixed; top: 0; right: 0; height: 100vh; width: min(520px, 100vw); z-index: 101; max-width: 100vw; background: var(--u-snow); transform: translateX(100%); transition: transform 320ms cubic-bezier(.5,0,.2,1); overflow-y: auto; border-left: 3px solid var(--u-black); display: flex; flex-direction: column; /* Bug Report 02.06 (2. takip) madde 6 — mobil lift detay: 1) 100dvh: mobil tarayıcı araç çubuğu 100vh'i taşırıp alt CTA'ları ("Nasıl Giderim" / "Skipass Al") ekran dışında bırakıyordu; dvh görünür yüksekliği baz alır → CTA'lar scroll ile erişilebilir. 2) overscroll-behavior: contain → drawer sonuna gelince scroll arka plandaki liftler sayfasına kaçmaz (scroll chaining fix). */ height: 100dvh; overscroll-behavior: contain; } .drawer.open { transform: translateX(0); } .drawer .dh { display: flex; align-items: center; justify-content: space-between; padding: 18px 24px; border-bottom: 1.5px solid #e5e7eb; background: #fff; position: sticky; top: 0; z-index: 2; } .drawer .dh .ttl { font-family: 'Mark Pro'; font-weight: 900; font-size: 22px; color: var(--u-black); } .drawer .dh .x { width: 36px; height: 36px; border-radius: 50%; background: #f1f5f9; border: 0; display: grid; place-items: center; } .drawer .dimg { height: 240px; background-size: cover; background-position: center; background-color: #0e1822; position: relative; } .drawer .dimg .ic-bg { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,0.25); } .drawer .dimg .badge-s { position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,0.95); border: 2px solid var(--u-black); } .drawer .dbody { padding: 24px; display: flex; flex-direction: column; gap: 22px; } .kv-list { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .kv { background: #fff; border: 1.5px solid #e5e7eb; border-radius: 12px; padding: 14px 16px; } .kv .k { font-family: 'Mark Pro'; font-weight: 700; font-size: 11px; color: var(--u-muted); letter-spacing: 0.12em; text-transform: uppercase; } .kv .v { font-family: 'Mark Pro'; font-weight: 900; font-size: 22px; color: var(--u-black); margin-top: 4px; } /* madde 7 (02.06) — dar ekranda drawer içi 2-kolon grid taşıyordu; tek kolona düşür + padding daralt (lift detay mobilde ekrana otursun). */ @media (max-width: 560px) { .drawer .dbody { padding: 16px; gap: 16px; } .kv-list { grid-template-columns: 1fr; } .drawer .dh { padding: 14px 16px; } .drawer .dimg { height: 180px; } } .pist-pills { display: flex; flex-wrap: wrap; gap: 8px; } .pist-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; font-family: 'Mark Pro'; font-weight: 700; font-size: 12px; background: #fff; border: 2px solid var(--u-black); } .pist-pill .pp { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--u-black); } .pp.g { background: #1B9E5A; } .pp.b { background: #2C8BB4; } .pp.r { background: #E5126D; } .pp.k { background: #0A0A0A; } .pp.y { background: #F5C42F; } .video-ph { aspect-ratio: 16/9; background: #0e1822; border: 2px solid var(--u-black); border-radius: 12px; display: grid; place-items: center; color: rgba(255,255,255,0.5); position: relative; overflow: hidden; } .video-ph::after { content: 'YouTube embed · tur videosu'; position: absolute; bottom: 12px; font-family: 'Mark Pro'; font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; } .video-ph .play { width: 64px; height: 64px; border-radius: 50%; background: var(--u-fuchsia); border: 3px solid #fff; display: grid; place-items: center; } /* ============ Bilet page ============ */ .season-strip { background: var(--u-yellow); color: var(--u-black); display: flex; align-items: center; justify-content: space-between; padding: 14px 40px; max-width: 1320px; margin: 0 auto; border-radius: 0; font-family: 'Mark Pro'; font-weight: 700; font-size: 13px; letter-spacing: 0.06em; border-bottom: 2px solid var(--u-black); } .season-strip .l, .season-strip .r { display: flex; gap: 14px; align-items: center; } .season-banner { background: var(--u-yellow); border-bottom: 2px solid var(--u-black); } /* Bilet hero — floating skipass card */ .bilet-hero-card { position: absolute; right: 60px; top: 50%; transform: translateY(-50%) rotate(-6deg); z-index: 2; width: 380px; height: auto; border-radius: 18px; box-shadow: 0 32px 60px -16px rgba(0,0,0,0.55), 0 6px 0 var(--u-black); border: 3px solid var(--u-black); background: #fff; } @media (max-width: 768px) { .bilet-hero-card { width: 220px; right: 16px; } } .ticket-matrix-wrap { margin-top: 36px; background: #fff; border: 2px solid var(--u-black); border-radius: var(--u-radius-lg); overflow: hidden; } .tm { width: 100%; border-collapse: collapse; font-family: 'Gotham'; } .tm thead th { background: var(--u-black); color: #fff; font-family: 'Mark Pro'; font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; padding: 16px 14px; text-align: center; } .tm thead th.row-header { background: var(--u-black); text-align: left; padding-left: 22px; } .tm tbody td { padding: 18px 14px; text-align: center; border-bottom: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb; position: relative; cursor: pointer; transition: background 160ms ease; } .tm tbody td:last-child { border-right: 0; } .tm tbody tr:last-child td { border-bottom: 0; } .tm tbody td.rh { text-align: left; padding-left: 22px; background: #FAFCFE !important; cursor: default; min-width: 200px; } .tm tbody td.rh .nm { font-family: 'Mark Pro'; font-weight: 700; font-size: 16px; color: var(--u-black); } .tm tbody td.rh .sb { font-family: 'Gotham'; font-size: 12px; color: var(--u-muted); margin-top: 2px; } .tm tbody td .pr { font-family: 'Mark Pro'; font-weight: 900; font-size: 28px; color: var(--u-black); letter-spacing: -0.02em; } .tm tbody td .pr sup { font-family: 'Mark Pro'; font-weight: 700; font-size: 13px; vertical-align: super; margin-right: 2px; color: var(--u-fuchsia); } .tm tbody td .pr-sub { font-family: 'Gotham'; font-size: 11px; color: var(--u-muted); margin-top: 2px; } .tm tbody td.cell:hover { background: rgba(229,18,109,0.10); } .tm tbody td .add-btn { position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%) translateY(8px); background: var(--u-fuchsia); color: #fff; border: 2px solid var(--u-black); font-family: 'Mark Pro'; font-weight: 700; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; opacity: 0; transition: all 160ms ease; pointer-events: none; text-decoration: none; cursor: pointer; } .tm tbody td.cell:hover .add-btn { opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; } .tm tbody td.na .pr { color: var(--u-muted); font-weight: 700; font-size: 22px; } .tm tbody td.na::after { content: '—'; } .tm tbody td.na .pr, .tm tbody td.na .add-btn { display: none; } .tm tbody td.featured { background: rgba(245,196,47,0.18); } .tm tbody td.featured::before { content: 'POPÜLER'; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font-family: 'Mark Pro'; font-weight: 900; font-style: italic; font-size: 9px; letter-spacing: 0.18em; color: var(--u-fuchsia); } .helper-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 26px; } .helper-card { padding: 22px; display: flex; flex-direction: column; gap: 10px; } .helper-card .icn { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; border: 2px solid var(--u-black); background: var(--u-yellow); } .helper-card.fuchsia .icn { background: var(--u-fuchsia); color: #fff; } .helper-card.blue .icn { background: var(--u-blue); color: #fff; } .helper-card h3 { font-family: 'Mark Pro'; font-weight: 700; font-size: 18px; color: var(--u-black); } .helper-card p { font-size: 13.5px; color: var(--u-slate); margin: 0; } .helper-card .lk { font-family: 'Mark Pro'; font-weight: 700; font-size: 12px; color: var(--u-fuchsia); margin-top: 4px; letter-spacing: 0.06em; } .faq { margin-top: 36px; } .faq h2 { font-family: 'Mark Pro'; font-weight: 700; font-size: 40px; color: var(--u-black); margin-bottom: 18px; } .faq-item { background: #fff; border: 2px solid var(--u-black); border-radius: 14px; margin-bottom: 12px; overflow: hidden; } .faq-item summary { list-style: none; cursor: pointer; padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; font-family: 'Mark Pro'; font-weight: 700; font-size: 17px; color: var(--u-black); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary .plus { width: 28px; height: 28px; border-radius: 50%; background: var(--u-yellow); border: 2px solid var(--u-black); display: grid; place-items: center; font-family: 'Mark Pro'; font-weight: 900; font-size: 16px; transition: transform 200ms ease; } .faq-item[open] summary .plus { transform: rotate(45deg); background: var(--u-fuchsia); color: #fff; } .faq-item .ans { padding: 0 22px 22px; color: var(--u-slate); font-size: 14.5px; } /* ============ Cart drawer (bilet) ============ */ .cart-fab { position: fixed; right: 24px; bottom: 24px; z-index: 60; background: var(--u-fuchsia); color: #fff; border: 3px solid var(--u-black); border-radius: 999px; padding: 14px 22px; display: flex; align-items: center; gap: 10px; font-family: 'Mark Pro'; font-weight: 700; font-size: 14px; box-shadow: 0 14px 32px -10px rgba(229,18,109,0.55); transition: transform 160ms ease; } .cart-fab:hover { transform: scale(1.04); } .cart-fab .badge { background: var(--u-yellow); color: var(--u-black); border-radius: 999px; width: 22px; height: 22px; display: grid; place-items: center; font-size: 11px; font-weight: 900; } /* ============ Utility ============ */ .muted { color: var(--u-muted); } /* ============ Webcams + Events 3-col ============ */ .cam-row { display: grid; grid-template-columns: 1fr 2fr; gap: 20px; } /* Combined events card — image-side title carries the whole block */ .events-combined { position: relative; border-radius: var(--u-radius-lg); overflow: hidden; border: 2px solid var(--u-black); background: #fff; height: 480px; display: grid; grid-template-columns: 1fr 1fr; box-shadow: var(--u-shadow); } .events-combined .left-pane { position: relative; overflow: hidden; border-right: 2px solid var(--u-black); cursor: pointer; } .events-combined .left-pane .img { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 320ms ease; } .events-combined .left-pane:hover .img { transform: scale(1.04); } .events-combined .left-pane .img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.25) 35%, rgba(0,0,0,0.85) 100%); } .events-combined .left-pane .count-pill { position: absolute; top: 14px; right: 14px; z-index: 3; background: var(--u-yellow); color: var(--u-black); border: 2px solid var(--u-black); padding: 5px 10px; border-radius: 999px; font-family: 'Mark Pro'; font-weight: 900; font-size: 12px; letter-spacing: 0.06em; } .events-combined .left-pane .body { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 2; color: #fff; display: flex; flex-direction: column; gap: 4px; } .events-combined .left-pane .lbl-up { font-family: 'Mark Pro'; font-weight: 900; font-style: italic; font-size: 11px; letter-spacing: 0.18em; color: var(--u-yellow); } .events-combined .left-pane h3 { font-family: 'Mark Pro'; font-weight: 700; font-size: 36px; color: #fff; line-height: 0.95; letter-spacing: -0.01em; } .events-combined .left-pane .sub-line { font-family: 'Gotham'; font-size: 13px; color: rgba(255,255,255,0.88); margin-top: 8px; max-width: 280px; } .events-combined .left-pane .cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; width: fit-content; background: #fff; color: var(--u-black); border: 2px solid var(--u-black); font-family: 'Mark Pro'; font-weight: 700; font-size: 13px; letter-spacing: 0.02em; padding: 9px 14px; border-radius: 10px; transition: background 160ms ease, color 160ms ease; } .events-combined .left-pane:hover .cta { background: var(--u-fuchsia); color: #fff; border-color: var(--u-fuchsia); } .events-combined .right-pane { background: #fff; overflow: hidden; display: flex; flex-direction: column; position: relative; } .events-combined .right-pane::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: linear-gradient(90deg, var(--u-fuchsia) 0%, var(--u-fuchsia) 60%, transparent); z-index: 3; pointer-events: none; } .events-combined .right-pane .strip-meta { background: var(--u-snow); display: flex; justify-content: space-between; align-items: center; padding: 12px 22px; border-bottom: 1.5px dashed #e5e7eb; } .events-combined .right-pane .strip-meta .lbl-up { font-family: 'Mark Pro'; font-weight: 900; font-style: italic; font-size: 11px; letter-spacing: 0.18em; color: var(--u-fuchsia); } .events-combined .right-pane .strip-meta .count { background: var(--u-black); color: var(--u-yellow); padding: 4px 10px; border-radius: 999px; font-family: 'Mark Pro'; font-weight: 900; font-size: 11px; letter-spacing: 0.08em; } .events-combined .right-pane .el-body { flex: 1; overflow-y: auto; overflow-x: hidden; } .events-combined .right-pane .el-body::-webkit-scrollbar { width: 6px; } .events-combined .right-pane .el-body::-webkit-scrollbar-thumb { background: var(--u-black); border-radius: 4px; } .events-combined .right-pane .el-body::-webkit-scrollbar-track { background: #f1f5f9; } /* Single-column variant: when right-pane is removed, image fills the whole card and slices go horizontal */ .events-combined.events-combined-full { grid-template-columns: 1fr; } .events-combined.events-combined-full .left-pane-split { border-right: 0; grid-template-rows: none; grid-template-columns: 1fr 1fr 1fr; } .events-combined.events-combined-full .left-pane-split .el-slice { border-bottom: 0; border-right: 1.5px solid var(--u-black); } .events-combined.events-combined-full .left-pane-split .el-slice:last-child { border-right: 0; } .events-combined.events-combined-full .left-pane-split .el-slice::before { background: linear-gradient(180deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0.20) 45%, rgba(0,0,0,0.80) 100%); } .events-combined.events-combined-full .left-pane-split .el-slice-cap { left: 20px; right: 20px; bottom: 20px; } .events-combined.events-combined-full .left-pane-split .el-slice-nm { font-size: 22px; } /* 3-slice left pane — one image per event row */ .events-combined .left-pane-split { display: grid; grid-template-rows: 1fr 1fr 1fr; gap: 0; border-right: 2px solid var(--u-black); background: var(--u-black); } .events-combined .left-pane-split .el-slice { position: relative; overflow: hidden; background-size: cover; background-position: center; border-bottom: 1.5px solid var(--u-black); text-decoration: none; transition: filter 200ms ease; } .events-combined .left-pane-split .el-slice:last-child { border-bottom: 0; } .events-combined .left-pane-split .el-slice::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.35) 55%, rgba(0,0,0,0.10) 100%); z-index: 1; } .events-combined .left-pane-split .el-slice:hover { filter: brightness(1.08); } .events-combined .left-pane-split .el-slice-tag { position: absolute; top: 12px; right: 12px; z-index: 2; background: var(--u-fuchsia); color: #fff; border: 1.5px solid var(--u-black); font-family: 'Mark Pro'; font-weight: 900; font-style: italic; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; } .events-combined .left-pane-split .el-slice-tag.y { background: var(--u-yellow); color: var(--u-black); } .events-combined .left-pane-split .el-slice-tag.t { background: var(--u-teal); color: #fff; } .events-combined .left-pane-split .el-slice-tag.f { background: var(--u-fuchsia); color: #fff; } .events-combined .left-pane-split .el-slice-cap { position: absolute; left: 18px; bottom: 14px; z-index: 2; display: flex; flex-direction: column; gap: 4px; color: #fff; max-width: calc(100% - 36px); } .events-combined .left-pane-split .el-slice-date { font-family: 'Mark Pro'; font-weight: 900; font-style: italic; font-size: 11px; letter-spacing: 0.2em; color: var(--u-yellow); } .events-combined .left-pane-split .el-slice-nm { font-family: 'Mark Pro'; font-weight: 700; font-size: 18px; line-height: 1.1; color: #fff; letter-spacing: -0.01em; text-shadow: 0 2px 10px rgba(0,0,0,0.5); } .events-combined .left-pane-split .el-slice-cta { font-family: 'Gotham'; font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--u-yellow); margin-top: 2px; } .cam-tile-big { position: relative; border-radius: var(--u-radius-lg); overflow: hidden; border: 2px solid var(--u-black); cursor: pointer; aspect-ratio: auto; height: 480px; transition: transform 200ms ease, box-shadow 200ms ease; } .cam-tile-big:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -16px rgba(0,0,0,0.35); } .cam-tile-big .img { position: absolute; inset: 0; background-size: cover; background-position: center; } .cam-tile-big .img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.2) 35%, rgba(0,0,0,0.85) 100%); } .cam-tile-big .body { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 2; color: #fff; display: flex; flex-direction: column; gap: 4px; } .cam-tile-big .lbl-up { font-family: 'Mark Pro'; font-weight: 900; font-style: italic; font-size: 11px; letter-spacing: 0.18em; color: var(--u-yellow); } .cam-tile-big h3 { font-family: 'Mark Pro'; font-weight: 700; font-size: 36px; color: #fff; line-height: 0.95; letter-spacing: -0.01em; } .cam-tile-big .sub-line { font-family: 'Gotham'; font-size: 13px; color: rgba(255,255,255,0.88); margin-top: 8px; max-width: 320px; } .cam-tile-big .cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; width: fit-content; background: #fff; color: var(--u-black); border: 2px solid var(--u-black); font-family: 'Mark Pro'; font-weight: 700; font-size: 13px; letter-spacing: 0.02em; padding: 9px 14px; border-radius: 10px; transition: background 160ms ease, color 160ms ease; } .cam-tile-big:hover .cta { background: var(--u-yellow); } .cam-tile-big .live { position: absolute; top: 14px; left: 14px; z-index: 3; display: inline-flex; align-items: center; gap: 7px; background: rgba(10,10,10,0.7); color: #fff; padding: 7px 12px; border-radius: 999px; font-family: 'Mark Pro'; font-weight: 900; font-style: italic; font-size: 12px; letter-spacing: 0.16em; } .cam-tile-big .live .d { width: 8px; height: 8px; border-radius: 50%; background: var(--u-fuchsia); animation: pulse 1.5s infinite; } .cam-tile-big .count-pill { position: absolute; top: 14px; right: 14px; z-index: 3; background: var(--u-yellow); color: var(--u-black); border: 2px solid var(--u-black); padding: 5px 10px; border-radius: 999px; font-family: 'Mark Pro'; font-weight: 900; font-size: 12px; letter-spacing: 0.06em; } /* tiny grid of 4 thumbs inside the big cam tile */ .cam-thumbs { position: absolute; left: 14px; right: 14px; top: 50px; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; height: 220px; } .cam-thumbs .t { position: relative; border-radius: 8px; overflow: hidden; border: 1.5px solid rgba(255,255,255,0.5); } .cam-thumbs .t::after { content: ''; position: absolute; inset: 0; background-size: cover; background-position: center; background-image: var(--bg); } .cam-thumbs .t .mini-live { position: absolute; top: 4px; left: 4px; z-index: 2; width: 6px; height: 6px; border-radius: 50%; background: var(--u-fuchsia); box-shadow: 0 0 0 2px rgba(0,0,0,0.4); } /* Events list (right column) */ .events-list { height: 480px; background: #fff; border: 2px solid var(--u-black); border-radius: var(--u-radius-lg); overflow: hidden; display: flex; flex-direction: column; } .events-list .el-head { padding: 18px 22px; background: var(--u-black); color: #fff; display: flex; justify-content: space-between; align-items: center; border-bottom: 2px solid var(--u-black); } .events-list .el-head .ttl { font-family: 'Mark Pro'; font-weight: 900; font-size: 18px; } .events-list .el-head .lbl-up { font-family: 'Mark Pro'; font-weight: 900; font-style: italic; font-size: 10px; letter-spacing: 0.18em; color: var(--u-yellow); } .events-list .el-head .count { background: var(--u-fuchsia); color: #fff; padding: 4px 10px; border-radius: 999px; font-family: 'Mark Pro'; font-weight: 900; font-size: 11px; letter-spacing: 0.08em; } .events-list .el-body { flex: 1; overflow-y: auto; overflow-x: hidden; } .events-list .el-body::-webkit-scrollbar { width: 6px; } .events-list .el-body::-webkit-scrollbar-thumb { background: var(--u-black); border-radius: 4px; } .events-list .el-body::-webkit-scrollbar-track { background: #f1f5f9; } .el-item { display: grid; grid-template-columns: 56px 1fr auto; gap: 14px; padding: 14px 18px; border-bottom: 1px solid #eef2f6; align-items: center; cursor: pointer; transition: background 140ms ease; } .el-item:hover { background: rgba(245,196,47,0.18); } .el-item:last-child { border-bottom: 0; } .el-item .date-box { text-align: center; padding: 6px 0; background: var(--u-snow); border: 1.5px solid var(--u-black); border-radius: 8px; } .el-item .date-box .d { font-family: 'Mark Pro'; font-weight: 900; font-size: 20px; line-height: 1; color: var(--u-black); } .el-item .date-box .m { font-family: 'Mark Pro'; font-weight: 700; font-size: 10px; letter-spacing: 0.12em; color: var(--u-fuchsia); margin-top: 2px; } .el-item.live .date-box { background: var(--u-fuchsia); border-color: var(--u-fuchsia); } .el-item.live .date-box .d { color: #fff; } .el-item.live .date-box .m { color: var(--u-yellow); } .el-item .nm { font-family: 'Mark Pro'; font-weight: 700; font-size: 14.5px; color: var(--u-black); line-height: 1.2; } .el-item .meta-r { display: flex; gap: 8px; align-items: center; margin-top: 4px; } .el-item .tag { font-family: 'Mark Pro'; font-weight: 700; font-size: 10px; letter-spacing: 0.1em; background: #f1f5f9; color: var(--u-slate); padding: 2px 8px; border-radius: 999px; } .el-item .tag.f { background: var(--u-fuchsia); color: #fff; } .el-item .tag.y { background: var(--u-yellow); color: var(--u-black); } .el-item .tag.t { background: var(--u-teal); color: #fff; } .el-item .tag.b { background: var(--u-blue); color: #fff; } .el-item .time-r { font-family: 'Gotham'; font-size: 11px; color: var(--u-muted); } .el-item .arr { color: var(--u-muted); font-family: 'Mark Pro'; font-weight: 900; } /* Konaklama row 2-col */ .konak-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .konak-mini { position: relative; height: 520px; border-radius: var(--u-radius-lg); overflow: hidden; border: 2px solid var(--u-black); background: #1f2937; } .konak-mini .bg { position: absolute; inset: 0; background-size: cover; background-position: center; } .konak-mini .bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,10,10,0.10) 0%, rgba(10,10,10,0.70) 80%, rgba(10,10,10,0.85) 100%); } .konak-mini .body { position: relative; z-index: 2; padding: 44px 44px 40px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; } .konak-mini h2 { font-family: 'Mark Pro'; font-weight: 900; font-size: 68px; line-height: 0.92; color: #fff; max-width: 380px; letter-spacing: -0.025em; margin-top: 14px; } .konak-mini p { color: rgba(255,255,255,0.92); margin: 14px 0 22px; max-width: 420px; font-size: 15px; } .konak-mini .stack { display: flex; gap: 12px; } .konak-mini .placeholder-note { position: absolute; top: 16px; right: 16px; z-index: 3; background: rgba(255,255,255,0.85); color: var(--u-black); padding: 5px 10px; border-radius: 8px; font-family: 'Mark Pro'; font-weight: 700; font-size: 10px; letter-spacing: 0.1em; border: 1.5px solid var(--u-black); } /* Ulaşım card */ .ulasim { position: relative; height: 520px; border-radius: var(--u-radius-lg); border: 2px solid var(--u-black); overflow: hidden; background: var(--u-black); color: #fff; display: flex; flex-direction: column; } .ulasim .head { padding: 32px 36px 22px; background: linear-gradient(135deg, #1F3854 0%, #0A1622 100%); border-bottom: 2px solid var(--u-yellow); } .ulasim .head .lbl-up { font-family: 'Mark Pro'; font-weight: 900; font-style: italic; font-size: 11px; letter-spacing: 0.2em; color: var(--u-yellow); } .ulasim .head h2 { font-family: 'Mark Pro'; font-weight: 900; font-size: 52px; color: #fff; line-height: 0.95; letter-spacing: -0.02em; margin-top: 8px; } .ulasim .head p { color: rgba(255,255,255,0.78); margin: 8px 0 0; max-width: 460px; font-size: 14px; } .ulasim .modes { flex: 1; padding: 8px 0; display: flex; flex-direction: column; background: var(--u-black); } .ulasim .mode { display: grid; grid-template-columns: 56px 1fr auto; gap: 18px; align-items: center; padding: 16px 36px; border-bottom: 1px solid rgba(255,255,255,0.08); transition: background 140ms ease; cursor: pointer; } .ulasim .mode:last-child { border-bottom: 0; } .ulasim .mode:hover { background: rgba(229,18,109,0.12); } .ulasim .mode .ic { width: 52px; height: 52px; border-radius: 12px; display: grid; place-items: center; border: 2px solid #fff; } .ulasim .mode.c-yel .ic { background: var(--u-yellow); border-color: var(--u-yellow); color: var(--u-black); } .ulasim .mode.c-tea .ic { background: var(--u-teal); border-color: var(--u-teal); } .ulasim .mode.c-fuc .ic { background: var(--u-fuchsia); border-color: var(--u-fuchsia); } .ulasim .mode.c-blu .ic { background: var(--u-blue); border-color: var(--u-blue); } .ulasim .mode .nm { font-family: 'Mark Pro'; font-weight: 700; font-size: 17px; color: #fff; line-height: 1.1; } .ulasim .mode .sub-line { font-family: 'Gotham'; font-size: 12.5px; color: rgba(255,255,255,0.7); margin-top: 4px; } .ulasim .mode .meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .ulasim .mode .meta .v { font-family: 'Mark Pro'; font-weight: 900; font-size: 22px; color: #fff; letter-spacing: -0.01em; } .ulasim .mode .meta .k { font-family: 'Mark Pro'; font-weight: 500; font-size: 10px; letter-spacing: 0.14em; color: rgba(255,255,255,0.55); text-transform: uppercase; } .ulasim .foot { background: var(--u-yellow); color: var(--u-black); padding: 14px 36px; display: flex; justify-content: space-between; align-items: center; font-family: 'Mark Pro'; font-weight: 700; font-size: 13px; } .ulasim .foot a { background: var(--u-black); color: var(--u-yellow); padding: 7px 14px; border-radius: 999px; font-size: 11px; letter-spacing: 0.1em; } .row { display: flex; gap: 12px; } .row.center { align-items: center; } .spacer-lg { height: 56px; } .hr-dotted { border: 0; border-top: 1.5px dashed #e5e7eb; margin: 56px 0; } /* Hide drawer on smaller previews (we're desktop-only) */ @media (max-width: 1100px) { .wrap { padding: 0 24px; } } .nav-v2 .nav-link.active::after { display: none; } .nav-v2 .nav-trigger::after { display: none; } /* ============ Dropdown Nav v2 ============ */ .nav-v2 { display: flex; gap: 2px; flex: 1; justify-content: center; align-items: center; flex-wrap: nowrap; white-space: nowrap; } } .ui-ic { display: inline-grid; place-items: center; flex-shrink: 0; } .ui-ic svg { width: 100%; height: 100%; display: block; } .ui-ic img { width: 100%; height: 100%; display: block; object-fit: contain; } .nav-v2 .nav-link { display: inline-flex; align-items: center; gap: 8px; font-family: 'Mark Pro', sans-serif; font-weight: 500; font-size: 13.5px; letter-spacing: 0.02em; color: rgba(255,255,255,0.85); padding: 4px 14px 4px 4px; border-radius: 999px; text-decoration: none; transition: all 160ms ease; } .nav-v2 .nav-link .trg-ic { color: var(--u-yellow); opacity: 0.85; } .nav-v2 .nav-link:hover { background: rgba(255,255,255,0.08); color: #fff; } .nav-v2 .nav-link:hover .trg-ic { opacity: 1; } .nav-v2 .nav-link.active { color: var(--u-yellow); background: rgba(245,196,47,0.10); } /* Icon-only nav button (home) */ .nav-v2 .nav-icon-only { padding: 8px 10px; gap: 0; } .nav-v2 .nav-icon-only .trg-ic { width: 18px; height: 18px; color: var(--u-yellow); opacity: 1; } .nav-v2 .nav-icon-only:hover { background: rgba(245,196,47,0.15); } .nav-group { position: relative; } .nav-trigger { display: inline-flex; align-items: center; gap: 8px; font-family: 'Mark Pro', sans-serif; font-weight: 500; font-size: 13.5px; letter-spacing: 0.02em; color: rgba(255,255,255,0.85); padding: 4px 12px 4px 4px; border-radius: 999px; cursor: pointer; background: transparent; border: 0; transition: all 160ms ease; } .nav-trigger .chev { width: 12px; height: 12px; display: inline-grid; place-items: center; opacity: 0.6; transition: transform 200ms ease, opacity 200ms ease; } .nav-trigger .chev svg { width: 100%; height: 100%; } .nav-trigger:hover { background: rgba(255,255,255,0.08); color: #fff; } .nav-trigger:hover .chev { opacity: 1; } .nav-group.has-active .nav-trigger { color: var(--u-yellow); background: rgba(245,196,47,0.10); } .nav-group.has-active .nav-trigger .chev { opacity: 1; } .nav-group.open .nav-trigger { background: rgba(255,255,255,0.16); color: #fff; } .nav-group.open .nav-trigger .chev { transform: rotate(180deg); opacity: 1; } .nav-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(4px); padding-top: 14px; opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 180ms ease; z-index: 100; } .nav-group.open .nav-dropdown { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } @media (hover: hover) and (pointer: fine) { .nav-group:hover .nav-dropdown { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } } .nav-dropdown-inner { background: #fff; color: var(--u-black); border: 2px solid var(--u-black); border-radius: 16px; min-width: 320px; padding: 8px; box-shadow: 0 22px 48px -12px rgba(0,0,0,0.35); position: relative; } .nav-dropdown-inner::before { content: ''; position: absolute; top: -8px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 14px; height: 14px; background: #fff; border-top: 2px solid var(--u-black); border-left: 2px solid var(--u-black); } .nav-dropdown .dd-item { display: grid; grid-template-columns: 42px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; text-decoration: none; color: var(--u-black); transition: background 140ms ease; } .nav-dropdown .dd-item:hover { background: var(--u-snow); } .nav-dropdown .dd-item.active { background: var(--u-yellow); } .nav-dropdown .item-ic { width: 42px; height: 42px; border-radius: 11px; background: #1a1a1a; color: var(--u-yellow); display: grid; place-items: center; border: 1.5px solid rgba(245,196,47,0.30); overflow: hidden; flex-shrink: 0; transition: border-color 140ms ease, box-shadow 140ms ease, color 140ms ease; } .nav-dropdown .item-ic img { width: 42px; height: 42px; display: block; object-fit: cover; } .nav-dropdown .item-ic svg { width: 22px; height: 22px; display: block; } .nav-dropdown .dd-item:hover .item-ic { border-color: var(--u-fuchsia); box-shadow: 0 0 0 3px rgba(236,72,153,0.18); color: var(--u-fuchsia); } .nav-dropdown .dd-item:hover .item-ic img { filter: brightness(1.18); } .nav-dropdown .dd-item.active .item-ic { border-color: var(--u-yellow); box-shadow: 0 0 0 3px rgba(245,196,47,0.20); color: var(--u-yellow); } .nav-dropdown .item-label { display: block; font-family: 'Mark Pro'; font-weight: 700; font-size: 14px; line-height: 1.2; color: var(--u-black); } .nav-dropdown .item-desc { display: block; font-family: 'Gotham'; font-size: 11.5px; color: var(--u-muted); margin-top: 2px; line-height: 1.3; } /* ============ Shared list-page utilities (kayak-okullari, ekipman, gastronomi, mekanlar) ============ */ .lp-toolbar { background: var(--u-snow); padding: 28px 0 18px; } .lp-toolbar .ctrls { display: flex; flex-wrap: wrap; gap: 18px; align-items: center; background: #fff; border: 2px solid var(--u-black); border-radius: 16px; padding: 16px 20px; box-shadow: var(--u-shadow); } .lp-toolbar .grp { display: flex; flex-direction: column; gap: 8px; } .lp-toolbar label { font-family: 'Mark Pro'; font-weight: 900; font-style: italic; font-size: 10px; letter-spacing: 0.2em; color: var(--u-muted); text-transform: uppercase; } .lp-toolbar .seg { display: inline-flex; background: #f3f3ef; border: 2px solid var(--u-black); border-radius: 999px; padding: 3px; } .lp-toolbar .seg button { background: transparent; border: 0; cursor: pointer; padding: 7px 14px; border-radius: 999px; font-family: 'Mark Pro'; font-weight: 900; font-style: italic; font-size: 11px; letter-spacing: 0.1em; color: var(--u-slate); display: inline-flex; align-items: center; gap: 6px; } .lp-toolbar .seg button:hover { color: var(--u-fuchsia); } .lp-toolbar .seg button.on { background: var(--u-black); color: var(--u-yellow); } .lp-toolbar .search { flex: 1; min-width: 220px; max-width: 380px; display: flex; align-items: center; gap: 8px; background: #f7f7f4; border: 1.5px solid #d8d6cf; border-radius: 12px; padding: 10px 14px; } .lp-toolbar .search input { border: 0; background: transparent; outline: none; flex: 1; font-family: 'Gotham'; font-size: 13.5px; color: var(--u-slate); } .lp-az { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; font-family: 'Mark Pro'; font-weight: 900; font-style: italic; font-size: 11px; letter-spacing: 0.16em; color: var(--u-muted); } .lp-az button { border: 0; background: transparent; cursor: pointer; padding: 5px 8px; border-radius: 6px; font-family: inherit; font-size: 11px; font-weight: 900; font-style: italic; color: var(--u-slate); letter-spacing: 0; } .lp-az button:hover { background: var(--u-yellow); color: var(--u-black); } .lp-az button.active { background: var(--u-black); color: var(--u-yellow); } /* Modal gallery */ .lp-modal { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,0.92); display: none; align-items: center; justify-content: center; padding: 40px; } .lp-modal.open { display: flex; } .lp-modal .box { width: min(1200px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 14px; color: #fff; } .lp-modal .top { display: flex; justify-content: space-between; align-items: center; } .lp-modal .top .nm { font-family: 'Mark Pro'; font-weight: 900; font-style: italic; font-size: 28px; text-transform: uppercase; letter-spacing: -0.02em; } .lp-modal .top .nm .meta { display: block; font-size: 12px; font-weight: 500; font-style: normal; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin-top: 4px; } .lp-modal .closex { background: var(--u-fuchsia); color: #fff; border: 2px solid #fff; border-radius: 50%; width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer; } .lp-modal .stage { position: relative; aspect-ratio: 16/9; background: #000; border-radius: 16px; overflow: hidden; border: 2px solid rgba(255,255,255,0.15); } .lp-modal .stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .lp-modal .nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.95); color: var(--u-black); border: 2px solid var(--u-black); width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; } .lp-modal .nav-btn.prev { left: 16px; } .lp-modal .nav-btn.next { right: 16px; } .lp-modal .thumbs { display: flex; gap: 8px; overflow-x: auto; } .lp-modal .thumbs img { width: 90px; height: 56px; object-fit: cover; border-radius: 8px; border: 2px solid transparent; cursor: pointer; flex-shrink: 0; } .lp-modal .thumbs img.on { border-color: var(--u-yellow); } /* ============ Unified nav icon (home + trigger same chip) ============ */ .nav-v2 .nav-link .trg-ic, .nav-v2 .nav-trigger .trg-ic, .nav-v2 .nav-icon-only .trg-ic { width: 36px; height: 36px; border-radius: 10px; background: #1a1a1a; border: 1.5px solid rgba(245,196,47,0.35); display: inline-grid; place-items: center; color: var(--u-yellow); opacity: 1; flex-shrink: 0; overflow: hidden; transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease; } .nav-v2 .nav-link .trg-ic svg, .nav-v2 .nav-trigger .trg-ic svg, .nav-v2 .nav-icon-only .trg-ic svg { width: 18px; height: 18px; display: block; } .nav-v2 .nav-link .trg-ic img, .nav-v2 .nav-trigger .trg-ic img, .nav-v2 .nav-icon-only .trg-ic img { width: 36px; height: 36px; display: block; object-fit: cover; } .nav-v2 .nav-link:hover .trg-ic, .nav-v2 .nav-trigger:hover .trg-ic, .nav-v2 .nav-icon-only:hover .trg-ic { border-color: rgba(245,196,47,0.70); box-shadow: 0 0 0 3px rgba(245,196,47,0.15); } .nav-v2 .nav-link:hover .trg-ic img, .nav-v2 .nav-trigger:hover .trg-ic img, .nav-v2 .nav-icon-only:hover .trg-ic img { filter: brightness(1.15); } .nav-group.has-active .nav-trigger .trg-ic, .nav-v2 .nav-link.active .trg-ic, .nav-group.open .nav-trigger .trg-ic { border-color: var(--u-yellow); box-shadow: 0 0 0 3px rgba(245,196,47,0.25); } .nav-group.has-active .nav-trigger .trg-ic img, .nav-v2 .nav-link.active .trg-ic img, .nav-group.open .nav-trigger .trg-ic img { filter: brightness(1.2); } .nav-v2 .nav-icon-only { padding: 8px 10px; } /* ============ Language dropdown ============ */ .head-actions { gap: 10px; } .locale-select { position: relative; } .locale-select .lc-trigger { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.16); color: #fff; cursor: pointer; padding: 7px 12px; border-radius: 999px; font-family: 'Mark Pro', sans-serif; font-weight: 700; font-size: 12.5px; letter-spacing: 0.04em; transition: background 160ms ease, border-color 160ms ease; } .locale-select .lc-trigger:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.28); } .locale-select .lc-trigger .lc-flag { font-size: 15px; line-height: 1; } .locale-select .lc-trigger .lc-code { font-weight: 900; letter-spacing: 0.06em; } .locale-select .lc-trigger .lc-chev { opacity: 0.7; transition: transform 200ms ease, opacity 200ms ease; } .locale-select.open .lc-trigger { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.36); } .locale-select.open .lc-trigger .lc-chev { transform: rotate(180deg); opacity: 1; } .locale-select .lc-menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; background: #fff; border: 2px solid var(--u-black); border-radius: 14px; padding: 6px; box-shadow: 0 18px 36px -10px rgba(0,0,0,0.35), 0 4px 0 var(--u-yellow); opacity: 0; visibility: hidden; transform: translateY(-6px); transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 180ms; z-index: 60; } .locale-select.open .lc-menu { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 180ms ease, transform 180ms ease, visibility 0s linear 0s; } .locale-select .lc-opt { display: grid; grid-template-columns: 22px 36px 1fr; align-items: center; gap: 8px; width: 100%; background: transparent; border: 0; cursor: pointer; padding: 9px 10px; border-radius: 10px; text-align: left; font-family: 'Mark Pro', sans-serif; color: var(--u-black); font-size: 13.5px; transition: background 140ms ease; } .locale-select .lc-opt:hover { background: var(--u-snow); } .locale-select .lc-opt .lc-flag { font-size: 16px; } .locale-select .lc-opt .lc-code { font-weight: 900; letter-spacing: 0.08em; color: var(--u-muted); font-size: 11.5px; } .locale-select .lc-opt .lc-nm { font-weight: 500; color: var(--u-slate); } .locale-select .lc-opt.is-on { background: rgba(245,196,47,0.22); } .locale-select .lc-opt.is-on .lc-code, .locale-select .lc-opt.is-on .lc-nm { color: var(--u-black); } /* ============ Search modal ============ */ .search-modal { position: fixed; inset: 0; z-index: 1000; opacity: 0; visibility: hidden; transition: opacity 200ms ease, visibility 0s linear 200ms; } .search-modal.open { opacity: 1; visibility: visible; transition: opacity 200ms ease, visibility 0s linear 0s; } .search-modal .sm-backdrop { position: absolute; inset: 0; background: rgba(10, 22, 34, 0.62); backdrop-filter: blur(8px); } .search-modal .sm-panel { position: absolute; left: 50%; top: 12vh; transform: translateX(-50%) translateY(-12px); width: min(720px, calc(100vw - 32px)); background: #fff; border: 2px solid var(--u-black); border-radius: 22px; box-shadow: 0 24px 60px -18px rgba(0,0,0,0.55), 0 6px 0 var(--u-yellow); padding: 22px; display: flex; flex-direction: column; gap: 14px; transition: transform 220ms ease; } .search-modal.open .sm-panel { transform: translateX(-50%) translateY(0); } .search-modal .sm-form { display: grid; grid-template-columns: 28px 1fr auto; gap: 12px; align-items: center; padding: 12px 16px; border: 2px solid var(--u-black); border-radius: 14px; background: #fff; } .search-modal .sm-ic { color: var(--u-fuchsia); display: inline-grid; place-items: center; } .search-modal input { border: 0; outline: 0; background: transparent; font-family: 'Mark Pro', sans-serif; font-weight: 500; font-size: 20px; color: var(--u-black); letter-spacing: -0.01em; } .search-modal input::placeholder { color: var(--u-muted); } .search-modal .sm-esc { font-family: 'Mark Pro', sans-serif; font-weight: 900; font-size: 10.5px; letter-spacing: 0.18em; padding: 5px 10px; border-radius: 8px; background: var(--u-snow); border: 1.5px solid var(--u-black); color: var(--u-black); cursor: pointer; } .search-modal .sm-meta { display: flex; justify-content: space-between; align-items: center; font-family: 'Mark Pro', sans-serif; } .search-modal .sm-eyebrow { font-weight: 900; font-style: italic; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--u-fuchsia); } .search-modal .sm-hint { font-size: 12px; color: var(--u-muted); } .search-modal .sm-hint kbd { font-family: 'Mark Pro', sans-serif; font-weight: 900; background: var(--u-snow); border: 1.5px solid var(--u-muted); border-radius: 6px; padding: 1px 6px; font-size: 11px; color: var(--u-black); margin-right: 4px; } .search-modal .sm-sug { display: flex; flex-direction: column; gap: 10px; padding-top: 6px; border-top: 1px dashed #e5e7eb; } .search-modal .sm-sug-ttl { font-family: 'Mark Pro', sans-serif; font-weight: 900; font-style: italic; font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--u-muted); } .search-modal .sm-sug-chips { display: flex; gap: 8px; flex-wrap: wrap; } .search-modal .sm-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--u-snow); border: 1.5px solid var(--u-black); color: var(--u-black); text-decoration: none; padding: 7px 12px; border-radius: 999px; font-family: 'Mark Pro', sans-serif; font-weight: 700; font-size: 12px; transition: background 140ms ease, color 140ms ease; } .search-modal .sm-chip:hover { background: var(--u-yellow); } /* ============================================================ * MOBILE NAV — Hamburger + slide-in drawer * Default: hamburger hidden, full nav shown. The breakpoint * (max-width: 1024px) below flips it so the drawer takes over * on laptop-narrow, tablet, and phone widths. * ============================================================ */ .hamburger-btn { display: none; width: 40px; height: 40px; border-radius: 10px; background: rgba(255,255,255,0.08); border: 0; color: #fff; align-items: center; justify-content: center; cursor: pointer; transition: background 140ms ease; padding: 0; } .hamburger-btn:hover { background: rgba(255,255,255,0.16); } .hamburger-btn .bar { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; position: relative; transition: transform 220ms ease, opacity 160ms ease; } .hamburger-btn .bar::before, .hamburger-btn .bar::after { content: ''; position: absolute; left: 0; right: 0; height: 2px; background: #fff; border-radius: 2px; transition: transform 220ms ease, top 160ms ease; } .hamburger-btn .bar::before { top: -6px; } .hamburger-btn .bar::after { top: 6px; } .hamburger-btn.is-open .bar { background: transparent; } .hamburger-btn.is-open .bar::before { top: 0; transform: rotate(45deg); } .hamburger-btn.is-open .bar::after { top: 0; transform: rotate(-45deg); } .nav-drawer { position: fixed; inset: 0; z-index: 90; pointer-events: none; visibility: hidden; } .nav-drawer.is-open { pointer-events: auto; visibility: visible; } .nav-drawer .nd-backdrop { position: absolute; inset: 0; background: rgba(10,10,10,0.5); opacity: 0; transition: opacity 240ms ease; } .nav-drawer.is-open .nd-backdrop { opacity: 1; } .nav-drawer .nd-panel { position: absolute; top: 0; right: 0; width: min(360px, 88vw); height: 100%; background: var(--u-black); color: #fff; border-left: 3px solid var(--u-yellow); transform: translateX(100%); transition: transform 260ms ease; display: flex; flex-direction: column; box-shadow: -16px 0 40px -8px rgba(0,0,0,0.5); } .nav-drawer.is-open .nd-panel { transform: translateX(0); } .nav-drawer .nd-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid rgba(255,255,255,0.10); } .nav-drawer .nd-head .nd-title { font-family: 'Mark Pro', sans-serif; font-weight: 900; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--u-yellow); } .nav-drawer .nd-close { width: 36px; height: 36px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 0; color: #fff; display: grid; place-items: center; cursor: pointer; } .nav-drawer .nd-close:hover { background: rgba(255,255,255,0.16); } .nav-drawer .nd-body { flex: 1; overflow-y: auto; padding: 8px 8px 24px; -webkit-overflow-scrolling: touch; } .nav-drawer .nd-group { border-bottom: 1px solid rgba(255,255,255,0.06); } .nav-drawer .nd-link, .nav-drawer .nd-trigger { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; background: transparent; border: 0; color: #fff; font-family: 'Mark Pro', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0.01em; text-align: left; cursor: pointer; border-radius: 10px; transition: background 140ms ease; } .nav-drawer .nd-link:hover, .nav-drawer .nd-trigger:hover { background: rgba(255,255,255,0.08); } .nav-drawer .nd-link.active { color: var(--u-yellow); background: rgba(245,196,47,0.10); } .nav-drawer .nd-trigger .trg-ic, .nav-drawer .nd-link .trg-ic { width: 36px; height: 36px; border-radius: 10px; background: #1a1a1a; color: var(--u-yellow); border: 1.5px solid rgba(245,196,47,0.35); display: grid; place-items: center; flex-shrink: 0; overflow: hidden; } .nav-drawer .nd-trigger .trg-ic svg, .nav-drawer .nd-link .trg-ic svg { width: 18px; height: 18px; } .nav-drawer .nd-trigger .trg-ic img, .nav-drawer .nd-link .trg-ic img { width: 36px; height: 36px; display: block; object-fit: cover; } .nav-drawer .nd-trigger .nd-chev { margin-left: auto; width: 14px; height: 14px; transition: transform 220ms ease; opacity: 0.7; } .nav-drawer .nd-group.is-open .nd-trigger .nd-chev { transform: rotate(180deg); } .nav-drawer .nd-submenu { max-height: 0; overflow: hidden; transition: max-height 280ms ease; padding-left: 12px; } .nav-drawer .nd-group.is-open .nd-submenu { max-height: 700px; } .nav-drawer .nd-sub-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; margin: 2px 0; border-radius: 10px; color: #cbd5e1; font-family: 'Mark Pro', sans-serif; font-weight: 500; font-size: 13.5px; line-height: 1.3; transition: background 140ms ease, color 140ms ease; } .nav-drawer .nd-sub-item:hover { background: rgba(255,255,255,0.06); color: #fff; } .nav-drawer .nd-sub-item.active { background: var(--u-yellow); color: var(--u-black); } .nav-drawer .nd-sub-item .sub-ic { width: 28px; height: 28px; border-radius: 8px; background: #1a1a1a; color: var(--u-yellow); border: 1.5px solid rgba(245,196,47,0.30); display: grid; place-items: center; flex-shrink: 0; overflow: hidden; } .nav-drawer .nd-sub-item .sub-ic img { width: 28px; height: 28px; display: block; object-fit: cover; } .nav-drawer .nd-sub-item .sub-ic svg { width: 14px; height: 14px; } .nav-drawer .nd-sub-item:hover .sub-ic { border-color: var(--u-fuchsia); box-shadow: 0 0 0 2px rgba(236,72,153,0.18); color: var(--u-fuchsia); } .nav-drawer .nd-sub-item.active .sub-ic { border-color: var(--u-yellow); box-shadow: 0 0 0 2px rgba(245,196,47,0.20); color: var(--u-yellow); } .nav-drawer .nd-sub-item .lbl { display: block; font-weight: 700; font-size: 14px; color: inherit; } .nav-drawer .nd-sub-item .dsc { display: block; font-weight: 500; font-size: 11.5px; letter-spacing: 0.02em; opacity: 0.7; margin-top: 2px; } .nav-drawer .nd-sub-item.active .dsc { opacity: 0.8; } /* When drawer is open, lock the page scroll. */ body.nav-locked { overflow: hidden; } /* Below 1025px the full horizontal nav doesn't fit; switch to drawer. */ @media (max-width: 1024px) { .site-header .nav-v2 { display: none; } .site-header .head-actions { margin-left: auto; } .hamburger-btn { display: flex; } } /* ============================================================ * Mobile / tablet quickstats bar (.mqs) * Sits directly under the hero on screens <1025px and replaces * the hero overlay live-stats card. Production data-live-value * hooks are preserved so the API hydrator updates both versions. * ============================================================ */ .mqs { display: none; } /* desktop default — hero overlay used instead */ @media (max-width: 1024px) { /* Suppress the hero overlay; .mqs takes over. */ .hero-slider .live-stats { display: none !important; } /* Hide slider dot labels — only numeric "01 / 02 / 03" left. Desktop range (≥1025) still shows the full label. */ .hs-dot .nm { display: none; } .mqs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--u-black); border-bottom: 3px solid var(--u-yellow); padding: 0; } .mqs-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 14px 8px; background: #0a0a0a; color: #fff; text-decoration: none; transition: background 160ms ease; } .mqs-item:hover { background: #1a1a1a; } .mqs-item .mqs-ic { width: 30px; height: 30px; color: var(--u-yellow); object-fit: contain; display: block; } .mqs-item .mqs-v { font-family: 'Mark Pro', sans-serif; font-weight: 900; font-size: 18px; line-height: 1; color: #fff; margin-top: 2px; } .mqs-item .mqs-v small { font-size: 11px; color: rgba(255,255,255,0.7); font-weight: 700; margin-left: 1px; } .mqs-item .mqs-k { font-family: 'Mark Pro', sans-serif; font-weight: 700; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.6); } /* Skipass card gets the fuchsia accent (it's a CTA, not a stat). */ .mqs-item.mqs-cta { background: var(--u-fuchsia); } .mqs-item.mqs-cta:hover { background: #c40d5e; } .mqs-item.mqs-cta .mqs-ic { color: #fff; } .mqs-item.mqs-cta .mqs-v { color: #fff; font-size: 14px; } .mqs-item.mqs-cta .mqs-k { color: rgba(255,255,255,0.85); } } @media (max-width: 480px) { .mqs-item { padding: 12px 4px; gap: 3px; } .mqs-item .mqs-ic { width: 26px; height: 26px; } .mqs-item .mqs-v { font-size: 16px; } .mqs-item.mqs-cta .mqs-v { font-size: 12.5px; } .mqs-item .mqs-k { font-size: 9px; letter-spacing: 0.08em; } } /* ============================================================ * Section toggles requested by Burak (2026-05-18) * ============================================================ */ /* Haberler cards: never show the long description paragraph or the "Devamını oku" cue — only image, category badge, date, headline. */ .news-card p, .news-card .more { display: none; } .news-card .body { gap: 8px; padding-bottom: 22px; } /* Mobile + tablet: drop the "ULUDAĞ KAYAK MERKEZİ / Toplam 22 Mekanik Tesis … / MEKANİK TESİSLER" summary card from the Pist & Lift section entirely (icons + counts + skier silhouette). The slope-grid keeps the left interactive map; the right static info card hides. */ @media (max-width: 768px) { .slope-grid .pl-card { display: none; } } /* Mobile + tablet: every Rehber Bento tile becomes the same single-column size; the desktop hero-vs-side asymmetry disappears below 769px. */ @media (max-width: 768px) { .kf-bento { grid-template-columns: 1fr !important; /* `none` (not `auto`) so every tile — including the .kf-hero whose content is all position:absolute — sizes from grid-auto-rows:240px. With an explicit `auto` track the hero collapsed to ~0px (Ekipman Kiralama tile invisible). */ grid-template-rows: none !important; grid-auto-rows: 240px; gap: 14px; } .kf-hero, .kf-side { grid-column: auto !important; grid-row: auto !important; } .kf-hero .ic-blk, .kf-side .ic-blk { width: 48px; height: 48px; border-radius: 12px; top: 18px; left: 18px; overflow: hidden; } .kf-hero .ic-blk svg { width: 24px; height: 24px; } .kf-hero .ic-blk img, .kf-side .ic-blk img { width: 48px; height: 48px; object-fit: cover; display: block; } .kf-hero .count { top: 18px; right: 18px; padding: 5px 10px; font-size: 10.5px; } .kf-hero .body { left: 20px; right: 20px; bottom: 20px; max-width: none; } .kf-hero h3 { font-size: 28px; line-height: 1.0; margin: 8px 0 6px; } .kf-hero p { display: none; } .kf-hero .cta { font-size: 10.5px; padding: 6px 11px; } } /* Mobile + tablet: Konaklama + Ulaşım tiles single column, equal height. Also collapse the vertical gap between the Rehber bento and this section so the two read as one continuous "Uludağ Rehberi" block on small screens (Burak's request 2026-05-18). The inline padding-top:88px on the bento section is overridden via attribute selector to avoid touching the HTML. */ @media (max-width: 768px) { .kn-row { grid-template-columns: 1fr !important; gap: 16px; } .kn-tile { height: 420px !important; } section[data-screen-label="Keşfet · Daha Fazlası"] { padding-bottom: 14px !important; } section[data-screen-label="Konaklama ve Ulaşım"] { padding-top: 0 !important; } } /* ============================================================ * Bug Report 03.06.2026 — Kayak Okulları + Ekipman Kiralama açıklaması * en fazla 8 satır; taşarsa "Devamını Oku" → pop-up modal (tam açıklama). * ReadMoreDescription component'i kullanır. ============================ */ .fac-desc-clamp { display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden; } .fac-readmore { margin-top: 8px; background: none; border: 0; padding: 0; cursor: pointer; font-family: 'Mark Pro', sans-serif; font-weight: 900; font-size: 12.5px; letter-spacing: 0.04em; color: var(--u-fuchsia); } .fac-readmore:hover { text-decoration: underline; } .fac-modal-mask { position: fixed; inset: 0; z-index: 200; background: rgba(10,10,10,0.6); display: flex; align-items: center; justify-content: center; padding: 20px; } .fac-modal { background: #fff; border: 2px solid var(--u-black); border-radius: 16px; max-width: 640px; width: 100%; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 20px 50px -20px rgba(0,0,0,0.5); } .fac-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; border-bottom: 2px solid var(--u-black); } .fac-modal-head h3 { font-family: 'Mark Pro', sans-serif; font-weight: 900; font-size: 20px; color: var(--u-black); margin: 0; } .fac-modal-x { width: 36px; height: 36px; border-radius: 999px; border: 2px solid var(--u-black); background: #fff; display: grid; place-items: center; color: var(--u-black); flex-shrink: 0; } .fac-modal-x:hover { background: var(--u-yellow); } .fac-modal-body { padding: 22px; overflow-y: auto; overscroll-behavior: contain; font-family: 'Gotham', sans-serif; font-size: 14.5px; line-height: 1.6; color: var(--u-slate); } .fac-modal-body > :first-child { margin-top: 0; } .fac-modal-body p { margin: 0 0 0.7em; } /* Mobile + tablet: hide the entire partners section. */ @media (max-width: 768px) { .partners-section { display: none; } } /* ============================================================ * Bug Report 03.06.2026 — global tipografi düzeltmeleri * (en sonda + !important: page-styles hero/title kurallarını ezer) * 1) Tüm başlıklardan ITALIK kaldırıldı (Mark Pro Black dik durur). * 2) Başlık harf aralığı biraz açıldı (önceki -0.02/-0.025em çok dardı). * 3) Mobilde dev hero başlıkları sabit px ile taşıyordu → viewport'a * göre clamp() ile küçültüldü (yüzdesel/vw tabanlı). * ============================================================ */ /* 1) Italik kaldır — başlıklar + kicker/eyebrow/başlık öğeleri */ h1, h2, h3, h4, h5, h6, .eyebrow, .ey, .ttl, .sub { font-style: normal !important; } /* 2) Başlık harf aralığını aç (sadece gerçek h-tag başlıklar) */ h1, h2, h3, h4 { letter-spacing: -0.005em !important; } /* 3) Mobilde başlık taşmasını engelle — vw tabanlı clamp */ @media (max-width: 768px) { h1 { font-size: clamp(30px, 8.5vw, 58px) !important; line-height: 1.02 !important; word-break: break-word; } h2 { font-size: clamp(23px, 6vw, 40px) !important; line-height: 1.05 !important; } h3 { font-size: clamp(17px, 4.6vw, 24px) !important; } }