/* Ticreas — site stilleri */
/* Layout: light grey stage, scroll-driven card choreography per section, empty image slots (.ph) ready for real visuals. Single light look by design. */

/* Plus Jakarta Sans — sitenin tek yazı tipi (SIL OFL 1.1, bkz. /assets/fonts/OFL.txt).
   Tek değişken font dosyası 400–800 arası bütün kalınlıkları kapsar; Latin + Türkçe karakter alt kümesi. */
@font-face { font-family: "Plus Jakarta Sans"; src: url("/assets/fonts/PlusJakartaSans.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }

:root {
  --bg: #F4F4F5;
  --card: #FFFFFF;
  --ink: #111113;
  --grey: #9C9CA3;
  --soft: #6B6B72;
  --line: #E4E4E7;
  --ph: #E3E3E7;
  --ph-ink: #9A9AA2;
  --red: #A3172B;
  --coral: #FF5562;
  --blue: #2D5BFF;
  --magenta: #D23CF0;
  --lime: #E4F65A;
  --f: "Plus Jakarta Sans", "Helvetica Neue", Arial, system-ui, sans-serif;
  --wrap: 1180px;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--f); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4, p { margin: 0; }
h1, h2, .hero-h { font-weight: 500; letter-spacing: -0.035em; line-height: 1.04; text-wrap: balance; }
/* Plus Jakarta Sans'ın boşluk karakteri dar (0,17em); kelimeler birbirine yapışmasın.
   Her elemana ayrı uygulanır: em değeri miras alınırken piksele dönüştüğü için gövdeye bir kez yazmak başlıklarda yetmez. */
*, *::before, *::after { word-spacing: .06em; }
:is(h1, h2, h3, h4, .hero-h), :is(h1, h2, h3, h4, .hero-h) * { word-spacing: .1em; }
a { color: inherit; }
button { font: inherit; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px)); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 8px; }
.eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; }
.eyebrow span { color: var(--magenta); }
.g { color: var(--grey); }
.w { transition: color .25s; }
.btn-dark { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 20px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 500; text-decoration: none; border: 0; cursor: pointer; transition: transform .2s, background .2s; }
.btn-dark:hover { transform: translateY(-1px); background: #2A2A2E; }
.btn-link { font-size: 13px; color: var(--soft); text-decoration: none; padding: 10px 6px; }
.btn-link:hover { color: var(--ink); }
.chip { position: absolute; z-index: 6; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; color: #fff; background: var(--blue); white-space: nowrap; animation: bob 4s ease-in-out infinite; box-shadow: 0 6px 14px -6px rgba(0,0,0,.35); }
.chip.dark { background: var(--ink); }
.chip.red { background: var(--red); }
.chip.green { background: #2FAE7A; }
.chip::after { content: ""; position: absolute; left: 10px; bottom: -4px; width: 8px; height: 8px; background: inherit; transform: rotate(45deg); border-radius: 1px; }
@keyframes bob { 50% { transform: translateY(-6px); } }

/* empty image slot */
.ph { position: relative; background: var(--ph); border-radius: 14px; overflow: hidden; }
.ph::after { content: attr(data-l); position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--ph-ink); text-align: center; padding: 6px; }
.ph.on-dark { background: #2A2A2E; }
.ph.on-dark::after { color: #77777F; }
.card-sh { box-shadow: 0 18px 40px -18px rgba(17, 17, 19, .35), 0 0 0 1px rgba(17,17,19,.04); }

/* header */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding-top: env(safe-area-inset-top, 0px); background: rgba(244, 244, 245, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hdr-in { height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
@media (min-width: 901px) { .hdr-in { display: grid; grid-template-columns: 1fr auto 1fr; position: relative; } .hdr-in .hdr-ic { justify-self: end; } .hdr nav .nav-cta { position: absolute; right: max(24px, env(safe-area-inset-right, 0px)); top: 50%; transform: translateY(-50%); } }
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; letter-spacing: -0.02em; text-decoration: none; }
.brand i { width: 18px; height: 18px; border-radius: 6px 6px 6px 2px; background: var(--coral); display: block; transform: rotate(-12deg); }
.hdr nav { display: flex; align-items: center; gap: 30px; font-size: 16px; font-weight: 500; }
.hdr nav a { text-decoration: none; color: var(--ink); opacity: .82; }
.hdr nav a:hover { opacity: 1; }
.hdr nav a.dot::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); margin-right: 6px; vertical-align: 1px; }
.hdr-ic { display: flex; gap: 6px; }
.hdr-ic a { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--card); color: var(--ink); }
.hdr-ic svg { width: 17px; height: 17px; }

/* 1 hero (sticky, cards fan then collapse) */
.hero { position: relative; }
.hero-stick { position: relative; height: 100vh; min-height: 620px; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding-top: calc(110px + env(safe-area-inset-top, 0px)); }
.hero-txt { text-align: center; position: relative; z-index: 3; }
.hero h1, .hero .hero-h { font-size: clamp(38px, 5vw, 68px); }
.fan { position: relative; width: 100%; flex: 1; max-height: 470px; perspective: 1400px; }
.fan .fc { position: absolute; left: 50%; top: 50%; width: clamp(110px, 12vw, 158px); aspect-ratio: 4 / 5; margin: 0; border-radius: 16px; transform-origin: 50% 120%; will-change: transform; }
.fan .chip { top: 8%; }
.hero-foot { position: relative; z-index: 3; text-align: center; padding-bottom: 7vh; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hero-foot p { font-size: 13px; color: var(--soft); max-width: 420px; }
.hero-foot .acts { display: flex; gap: 8px; align-items: center; }

/* 2 showcase cascade */
.show { padding-block: 60px 120px; }
.show-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 30px; align-items: start; }
.show h2 { font-size: clamp(32px, 3.6vw, 48px); margin-top: 14px; }
.show h2 .r { color: var(--red); }
.show .txt { font-size: 13px; color: var(--soft); max-width: 300px; margin-top: 26px; }
.show .acts { display: flex; gap: 8px; align-items: center; margin-top: 22px; }
.cascade { position: relative; height: 600px; margin-top: 40px; }
.cascade .cc { position: absolute; top: 0; left: 0; width: clamp(130px, 14vw, 180px); aspect-ratio: 1 / 1.08; border-radius: 16px; will-change: transform; }
.cascade .updown { position: absolute; right: -6px; top: 40px; display: flex; flex-direction: column; gap: 4px; }
.cascade .updown button { width: 26px; height: 26px; border: 0; background: transparent; cursor: pointer; color: var(--soft); border-radius: 50%; }
.cascade .updown button:hover { background: var(--card); color: var(--ink); }

/* 3 gateway slider */
.gate { padding-block: 40px 70px; }
.gate-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; position: relative; }
.gate h1, .gate h2 { font-size: clamp(32px, 3.6vw, 48px); margin-top: 12px; }
.gate .chip { position: relative; animation: bob 4s ease-in-out infinite; margin-right: 8%; }
.slider { position: relative; margin-top: 26px; border-radius: 18px; overflow: hidden; aspect-ratio: 16 / 7.2; min-height: 260px; }
.slides { display: flex; height: 100%; transition: transform .8s cubic-bezier(.7,0,.2,1); }
.slides .ph { flex: 0 0 100%; height: 100%; border-radius: 0; }
.slides .ph:nth-child(2) { background: #D9D9DE; }
.filters { display: flex; gap: 8px; margin-top: 22px; overflow-x: auto; scrollbar-width: none; padding: 2px 40px 2px 0; mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
.filters::-webkit-scrollbar { display: none; }
.filters button { flex: none; border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 11px 20px; font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background .25s, color .25s, border-color .25s, transform .2s; white-space: nowrap; }
.filters button:hover { border-color: #C9C9CE; transform: translateY(-1px); }
.filters button[aria-selected="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.slider { margin-top: 18px !important; }
.slides .sl-empty { background: #E9E9EC; }
.slide-img { flex: 0 0 100%; height: 100%; position: relative; background: #C9CCC8; }
.slide-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
.sl-cap { position: absolute; left: 84px; bottom: 20px; padding: 6px 14px; border-radius: 999px; background: rgba(17,17,19,.55); color: #fff; font-size: 11px; font-weight: 600; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.slides .ph:nth-child(3) { background: #CFCFD5; }
.sl-ui { position: absolute; inset: 0; pointer-events: none; }
.sl-ui > * { pointer-events: auto; }
.sl-toggles { position: absolute; left: 22px; top: 22px; display: flex; flex-direction: column; gap: 6px; }
.sl-toggles button { width: 30px; height: 30px; border-radius: 9px; border: 0; cursor: pointer; background: rgba(255,255,255,.95); }
.sl-toggles button[aria-pressed="false"] { background: var(--ink); }
.sl-more { position: absolute; right: 22px; top: 16px; color: #fff; font-weight: 700; letter-spacing: .1em; background: rgba(17,17,19,.35); border-radius: 999px; padding: 2px 10px; font-size: 12px; }
.sl-watch { position: absolute; left: 22px; bottom: 20px; padding: 6px 14px; border-radius: 999px; background: #fff; font-size: 11px; font-weight: 600; border: 0; cursor: pointer; }
.sl-arrows { position: absolute; right: 22px; bottom: 18px; display: flex; gap: 6px; }
.sl-arrows button { width: 30px; height: 30px; border-radius: 50%; border: 0; background: #fff; cursor: pointer; font-size: 14px; }
.sl-dots { position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%); display: flex; gap: 6px; }
.sl-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.6); transition: width .3s, background .3s; }
.sl-dots i.on { width: 18px; border-radius: 6px; background: #fff; }



/* Ticreas brand touches */
:root { --tc: #F04B5D; }
.chip { display: none !important; }
@media (max-width: 600px) { .dbr { display: none; } }
.brand-logo { height: 30px; width: auto; display: block; }
.tc { color: var(--tc); }
.btn-dark.btn-tc { background: var(--tc); }
.btn-dark.btn-tc:hover { background: #D93A4C; }
.show h2 .r { color: var(--tc); }
.glance { margin-top: 26px; max-width: 440px; }
.glance-t { font-size: 10.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin: 0 0 10px; }
.glance ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.glance li { font-size: 12.5px; line-height: 1.5; color: var(--soft); padding-left: 16px; position: relative; }
.glance li::before { content: ""; position: absolute; left: 0; top: .55em; width: 7px; height: 7px; border-radius: 2px; background: var(--tc); }
.glance li b { display: block; color: var(--ink); font-weight: 600; font-size: 13px; }
.scope { margin-top: 22px; max-width: 440px; }
.scope-list { display: flex; flex-wrap: wrap; gap: 6px; }
.scope-list span { font-size: 11.5px; font-weight: 500; padding: 6px 12px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.show .acts { margin-top: 26px; }


/* services (story) + detail sheet */
.story-sub { max-width: 520px; margin: 14px auto 0; font-size: 13px; color: var(--soft); }
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 46px; }
.svc-card { position: relative; overflow: hidden; display: flex; align-items: flex-end; width: 100%; min-height: 420px; text-align: left; text-decoration: none; border: 0; cursor: pointer; font: inherit; border-radius: 22px; padding: 0; background: var(--bg); transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s; }
.svc-card.is-c { color: #fff; }
.svc-card.is-w { color: var(--ink); box-shadow: 0 0 0 1px var(--line); }
.svc-card:hover { transform: translateY(-4px); box-shadow: 0 30px 50px -30px rgba(17,17,19,.35); }
.svc-card:focus-visible { outline: 2px solid var(--tc); outline-offset: 3px; }
.svc-art { position: absolute; right: 4%; top: 4%; width: 46%; max-width: 280px; height: auto; pointer-events: none; overflow: visible; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.svc-card:hover .svc-art { transform: translateY(-8px) rotate(-2deg) scale(1.03); }
.svc-img { position: absolute; right: 2%; top: 2%; width: 50%; max-width: 300px; height: auto; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent), linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent); mask-composite: intersect; transition: transform .8s cubic-bezier(.2,.7,.2,1); }
.svc-card:hover .svc-img { transform: translateY(-6px) scale(1.03); }
.svc-big .svc-img { right: 0; left: 0; top: 0; width: 100%; max-width: none; height: 100%; object-fit: cover; transform: none; -webkit-mask-image: none; mask-image: none; }
@media (max-width: 760px) { .svc-img { width: 56%; } }
.svc-txt { position: relative; z-index: 1; padding: 30px; max-width: 360px; }
.svc-ic { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid currentColor; }
.svc-ic svg { width: 15px; height: 15px; }
.svc-card h4 { font-size: clamp(26px, 2.6vw, 36px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.04; margin: 18px 0 0; }
.svc-card p { font-size: 13px; line-height: 1.5; margin: 10px 0 0; opacity: .82; max-width: 30ch; }
.svc-pill { display: inline-block; margin-top: 18px; font-size: 12px; font-weight: 600; padding: 9px 18px; border-radius: 999px; }
.svc-card.is-c .svc-pill { background: #fff; color: var(--ink); }
.svc-card.is-w .svc-pill { background: var(--ink); color: #fff; }
@media (max-width: 760px) { .svc-grid { grid-template-columns: minmax(0, 1fr); } .svc-card { min-height: 420px; } .svc-art { width: 56%; } }
.svc-big { min-height: 0; aspect-ratio: 1 / 1.05; cursor: default; }
.svc-big:hover { transform: none; }
.svc-big .svc-art { width: 74%; max-width: none; right: 13%; top: 13%; }
.svc-sheet { position: fixed; inset: 0; z-index: 100; background: var(--bg); display: flex; flex-direction: column; animation: svcIn .5s cubic-bezier(.2,.7,.2,1); }
.svc-sheet[hidden] { display: none; }
@keyframes svcIn { from { opacity: 0; transform: translateY(40px); } }
.svc-bar { flex: none; display: flex; align-items: center; gap: 14px; padding: calc(12px + env(safe-area-inset-top, 0px)) max(28px, env(safe-area-inset-right, 0px)) 12px max(20px, env(safe-area-inset-left, 0px)); border-bottom: 1px solid var(--line); background: rgba(244,244,245,.92); backdrop-filter: blur(12px); }
.svc-x, .svc-nav button { width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--card); color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 0 0 1px var(--line); }
.svc-x svg, .svc-nav svg { width: 17px; height: 17px; }
.svc-crumb { font-size: 12.5px; color: var(--soft); }
.svc-crumb i { font-style: normal; margin: 0 4px; opacity: .5; }
.svc-crumb b { color: var(--ink); font-weight: 600; }
.svc-nav { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--soft); font-variant-numeric: tabular-nums; }
.svc-body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
.svc-in { max-width: 1120px; margin: 0 auto; padding: 56px max(20px, env(safe-area-inset-right, 0px)) 80px max(20px, env(safe-area-inset-left, 0px)); }
.svc-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; align-items: center; }
.svc-hero h1, .svc-hero h2 { font-size: clamp(34px, 4.4vw, 60px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.04; }
/* Başlığın içindeki hizmet adı etiketi: ayrı bir .eyebrow paragrafıyla birebir aynı görünür */
.svc-kicker { display: block; margin-bottom: 14px; line-height: 1.5; letter-spacing: .18em; word-spacing: .06em; }
.svc-hero h1 .svc-kicker, .svc-hero h2 .svc-kicker { color: var(--ink); }
.svc-hero h1 span, .svc-hero h2 span { color: var(--tc); }
.svc-hero .lead { font-size: 15px; line-height: 1.65; color: var(--soft); margin-top: 22px; max-width: 34em; }
.svc-hero .acts { display: flex; gap: 8px; align-items: center; margin-top: 28px; }
.svc-big .cx { position: absolute; left: 0; top: 0; width: 360px; height: 396px; transform-origin: 0 0; }
.svc-sec { margin-top: 80px; }
.svc-sec h3 { font-size: clamp(28px, 3vw, 42px); font-weight: 500; letter-spacing: -0.035em; margin-top: 12px; }
.svc-steps { list-style: none; margin: 30px 0 0; padding: 0; counter-reset: st; border-bottom: 1px solid var(--line); }
.svc-steps li { counter-increment: st; display: grid; grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.5fr); gap: 32px; align-items: baseline; padding: 30px 0; border-top: 1px solid var(--line); }
.svc-steps li::before { content: counter(st, decimal-leading-zero); font-size: 15px; font-weight: 600; color: var(--tc); letter-spacing: .04em; }
.svc-steps li b { font-size: clamp(20px, 2vw, 26px); font-weight: 500; letter-spacing: -0.025em; line-height: 1.2; }
.svc-steps li p { font-size: 15px; color: var(--soft); line-height: 1.65; margin: 0; max-width: 56ch; }
@media (max-width: 760px) { .svc-steps li { grid-template-columns: 48px minmax(0, 1fr); gap: 8px 16px; } .svc-steps li p { grid-column: 2; } }
.svc-inc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.svc-inc span { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; font-weight: 500; padding: 12px 18px 12px 12px; border-radius: 999px; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.svc-inc span::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: var(--tc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center / 13px no-repeat; flex: none; }
.svc-cta { margin-top: 80px; border-radius: 26px; background: var(--ink); color: #fff; padding: 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.svc-cta h3 { font-size: clamp(22px, 2.4vw, 32px); font-weight: 500; letter-spacing: -0.03em; }
.svc-cta p { font-size: 13px; color: #A9A9B0; margin-top: 6px; }
.svc-others { margin-top: 56px; }
.svc-others-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; margin-top: 18px; }
.svc-others-list button, .svc-others-list a { display: block; text-decoration: none; text-align: left; border: 0; cursor: pointer; font: inherit; background: var(--card); border-radius: 14px; padding: 16px; font-size: 13px; font-weight: 600; color: var(--ink); box-shadow: 0 0 0 1px var(--line); transition: box-shadow .2s, transform .2s; }
.svc-others-list button:hover, .svc-others-list a:hover { box-shadow: 0 0 0 1.5px var(--tc); transform: translateY(-2px); }
.svc-others-list button small, .svc-others-list a small { display: block; font-weight: 400; color: var(--soft); font-size: 11.5px; margin-top: 4px; }
body.svc-open { overflow: hidden; }
@media (max-width: 900px) { .svc-hero { grid-template-columns: minmax(0, 1fr); gap: 32px; } .svc-big { max-width: 420px; } .svc-in { padding-top: 32px; } .svc-cta { padding: 28px; } .svc-crumb { display: none; } }


/* header: services dropdown + mobile menu */
.nav-dd { position: relative; }
.nav-dd-btn { border: 0; background: none; padding: 6px 0; font: inherit; font-size: 16px; font-weight: 500; color: var(--ink); opacity: .82; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.nav-dd-btn:hover, .nav-dd-btn[aria-expanded="true"] { opacity: 1; }
.nav-dd-btn svg { width: 14px; height: 14px; transition: transform .25s; }
.nav-dd-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-dd-panel::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-dd-panel { position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%); width: 560px; background: #fff; border-radius: 20px; padding: 18px; box-shadow: 0 30px 60px -24px rgba(17,17,19,.35), 0 0 0 1px rgba(17,17,19,.05); animation: ddIn .25s cubic-bezier(.2,.7,.2,1); }
@keyframes ddIn { from { opacity: 0; transform: translate(-50%, -6px); } }
.nav-dd-t { margin: 0 6px 10px; font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); }
.nav-dd-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.nav-dd-list a { display: flex; align-items: center; gap: 12px; text-align: left; text-decoration: none; border: 0; background: none; padding: 8px; border-radius: 14px; cursor: pointer; font: inherit; color: var(--ink); transition: background .2s; }
.nav-dd-list a:hover, .nav-dd-list a:focus-visible { background: var(--bg); }
.nav-dd-list img { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; }
.nav-dd-list b { display: block; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.nav-dd-list small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 12.5px; color: var(--soft); line-height: 1.35; margin-top: 2px; }
.hdr-burger { display: none; width: 38px; height: 38px; border-radius: 50%; border: 0; background: var(--card); color: var(--ink); place-items: center; cursor: pointer; padding: 0; }
.hdr-burger svg { width: 15px; height: 15px; }
@media (max-width: 900px) {
  .hdr-burger { display: grid; }
  .hdr.m-open nav { display: flex; position: absolute; top: calc(58px + env(safe-area-inset-top, 0px)); left: max(16px, env(safe-area-inset-left, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); flex-direction: column; align-items: stretch; gap: 0; background: #fff; border-radius: 20px; padding: 10px; box-shadow: 0 30px 60px -24px rgba(17,17,19,.4); max-height: calc(100vh - 90px); overflow-y: auto; }
  .hdr.m-open nav > a, .hdr.m-open .nav-dd-btn { font-size: 15px; padding: 12px 10px; opacity: 1; width: 100%; justify-content: space-between; }
  .nav-dd-panel { position: static; transform: none; width: auto; box-shadow: none; padding: 0 0 8px; animation: none; }
  .nav-dd-list { grid-template-columns: minmax(0, 1fr); }
  .nav-dd-t { display: none; }
}


/* contact page */
.nav-cta { background: var(--ink); color: #fff !important; opacity: 1 !important; padding: 10px 20px; border-radius: 999px; }
.ct-in { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 64px; align-items: start; padding-top: 72px; }
.ct-l h1, .ct-l h2 { font-size: clamp(40px, 5vw, 72px); font-weight: 500; letter-spacing: -0.045em; line-height: 1; margin-top: 16px; }
.ct-l h1 span, .ct-l h2 span { color: var(--tc); }
.ct-l .lead { font-size: 16px; line-height: 1.65; color: var(--soft); margin-top: 22px; max-width: 30em; }
.ct-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px; margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); }
.ct-info small { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--soft); }
.ct-info b { display: block; font-size: 16px; font-weight: 500; margin-top: 6px; }
.ct-info .sel { user-select: all; }
.ct-form { background: var(--card); border-radius: 26px; padding: 32px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 30px 60px -40px rgba(17,17,19,.35); }
.ct-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ct-form label { display: flex; flex-direction: column; gap: 8px; font-size: 12.5px; font-weight: 600; }
.ct-form input, .ct-form select, .ct-form textarea { font: inherit; font-size: 15px; font-weight: 400; color: var(--ink); background: var(--bg); border: 1px solid transparent; border-radius: 14px; padding: 13px 14px; min-height: 48px; box-sizing: border-box; width: 100%; resize: vertical; transition: border-color .2s, background .2s; }
.ct-form input:focus, .ct-form select:focus, .ct-form textarea:focus { outline: none; border-color: var(--tc); background: #fff; }
.ct-form [aria-invalid="true"] { border-color: #D93A4C; }
.ct-send { align-self: flex-start; min-height: 48px; padding: 12px 28px; font-size: 14px; }
.ct-err { margin: 0; font-size: 13px; color: #C2283B; }
.ct-ok { margin: 0; font-size: 14px; color: #1E7A4C; background: #E7F6EE; padding: 12px 14px; border-radius: 12px; }
@media (max-width: 900px) { .ct-in { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 32px; } .ct-row { grid-template-columns: minmax(0, 1fr); } .ct-form { padding: 22px; } }
@media (max-width: 900px) { .hdr.m-open nav > a.nav-cta { text-align: center; justify-content: center; margin-top: 6px; } }


/* about page */
.ab-h { font-size: clamp(40px, 5.6vw, 84px); font-weight: 500; letter-spacing: -0.045em; line-height: 1; margin-top: 16px; }
.ab-h span { color: var(--tc); }
.ab-intro { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; margin-top: 48px; }
.ab-intro p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--soft); }
.ab-vals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 24px; }
.ab-vals div { background: var(--card); border-radius: 22px; padding: 30px 28px; }
.ab-vals b { display: block; font-size: 26px; font-weight: 500; letter-spacing: -0.03em; }
.ab-vals b::before { content: ""; display: block; width: 10px; height: 10px; border-radius: 3px; background: var(--tc); margin-bottom: 22px; }
.ab-vals p { margin: 12px 0 0; font-size: 14.5px; line-height: 1.65; color: var(--soft); }
.ab-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 24px; }
@media (max-width: 600px) { .ab-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ab-logo { height: 72px; } }
.ab-logo { height: 88px; border-radius: 18px; display: grid; place-items: center; padding: 16px 24px; }
.ab-logo.lt { box-shadow: inset 0 0 0 1px var(--line); }
.ab-logo img { max-width: 100%; max-height: 46px; width: auto; height: auto; object-fit: contain; }
@media (max-width: 900px) { .ab-intro, .ab-vals { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* work covers (İşlerimiz): stacked list of big project cards */
.wslider { position: relative; margin-top: 22px; }
.wslider.none .wk-arr, .wslider.none .wdots, .wslider.single .wk-arr, .wslider.single .wdots { display: none; }
.works-view { overflow: hidden; border-radius: 28px; }
.works { display: flex; transition: transform .9s cubic-bezier(.7,0,.2,1); }
.works > .cover { flex: 0 0 100%; }
.wdots { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 6px; z-index: 4; }
.wdots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 6px; background: rgba(255,255,255,.5); cursor: pointer; transition: width .3s, background .3s; }
.wdots button.on { width: 20px; background: #fff; }
.works-empty { padding: 60px 0; text-align: center; color: var(--soft); font-size: 14px; background: var(--card); border-radius: 26px; }
.cover { position: relative; overflow: hidden; border-radius: 28px; aspect-ratio: 1400 / 770; min-height: 440px; display: grid; grid-template-columns: 41% 59%; }
.cover[hidden] { display: none; }
.cv-l { position: relative; z-index: 2; display: flex; flex-direction: column; padding: 7% 0 7% 14%; }
.cv-logo img { height: clamp(60px, 6.4vw, 92px); width: auto; display: block; }
.cv-h { font-family: var(--f); font-size: clamp(22px, 2.3vw, 34px); line-height: 1.38; letter-spacing: -0.005em; margin: auto 0; padding-right: 8%; }
.cv-tags { display: flex; flex-wrap: wrap; gap: 6px; max-width: 30em; pointer-events: none; user-select: none; }
.cv-tags span { font-family: var(--f); font-size: 11px; font-weight: 500; letter-spacing: .01em; padding: 4px 11px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; line-height: 1.5; }
.cv-r { position: relative; z-index: 1; }
.shots { position: absolute; left: 0; top: 12%; bottom: 0; width: 78%; background: #fff; overflow: hidden; box-shadow: 0 30px 60px -28px rgba(0,0,0,.45); }
.shots .shot { position: absolute; left: 0; top: 0; width: 100%; height: auto; display: block; opacity: 0; transition: opacity .6s ease; }
.shots .shot.on { opacity: 1; }
.shots.photo { width: auto; right: 0; top: auto; bottom: 0; aspect-ratio: 1277 / 717; border-radius: 18px 0 0 0; background: #C9CCC8; }
.shots.photo .shot { height: 100%; object-fit: cover; }
.peek { position: absolute; right: 0; top: 12%; bottom: 0; width: 19%; overflow: hidden; background: #fff; box-shadow: -10px 0 30px -20px rgba(0,0,0,.4); }
.peek img { height: 100%; width: auto; max-width: none; display: block; object-fit: cover; object-position: left top; }
.wk-arr { position: absolute; top: 50%; z-index: 4; width: 50px; height: 50px; margin-top: -25px; border-radius: 50%; border: 0; background: #fff; color: var(--ink); display: grid; place-items: center; cursor: pointer; box-shadow: 0 10px 24px -10px rgba(17,17,19,.35); transition: transform .2s; }
.wk-arr:hover { transform: scale(1.06); }
.wk-arr[hidden] { display: none; }
.wk-arr svg { width: 20px; height: 20px; }
.wk-arr.prev { left: 16px; } .wk-arr.next { right: 16px; }
@media (min-width: 901px) { .cover .cv-l { padding-left: max(14%, 96px); } }
.kd-front, .kd-back { position: absolute; overflow: hidden; background: #fff; }
.kd-front img, .kd-back img { width: 100%; height: auto; display: block; }
.kd-front { left: 0; top: 11%; bottom: 0; width: 58%; z-index: 2; box-shadow: 0 40px 80px -30px rgba(0,0,0,.65), 0 0 0 1px rgba(255,255,255,.06); }
.kd-back { right: 5%; top: 30%; width: 47%; z-index: 1; box-shadow: 0 30px 60px -30px rgba(0,0,0,.5); }
@media (max-width: 900px) { .kd-front { left: 24px; top: 24px; width: 70%; } .kd-back { right: 0; top: 90px; width: 55%; } }
/* Körfez Deniz live mockup (crisp HTML recreation of korfezdeniz.com.tr) */
.kdm { container-type: size; }
.kdm-win { position: absolute; left: 0; top: 11%; bottom: 0; width: 80%; background: #fff; border-radius: 12px 12px 0 0; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); }
.kdm-win .cv-bar { height: 3.6cqw; min-height: 18px; background: #EEF0F4; display: flex; align-items: center; gap: .8cqw; padding: 0 1.6cqw; flex: none; }
.kdm-win .cv-bar i { width: 1.2cqw; height: 1.2cqw; min-width: 7px; min-height: 7px; border-radius: 50%; background: #FF5F57; display: block; }
.kdm-win .cv-bar i:nth-child(2) { background: #FEBC2E; } .kdm-win .cv-bar i:nth-child(3) { background: #28C840; }
.kdm-win .cv-bar span { flex: 0 1 44%; margin: 0 auto; height: 2cqw; min-height: 12px; border-radius: 999px; background: #fff; }
.kdm-about { flex: none; margin-top: auto; background: #EEF3F8; padding: 3cqw 6% 3.4cqw; display: grid; grid-template-columns: .8fr 2fr; gap: 3cqw; align-items: center; font-family: var(--f); }
.kdm-about img { width: 42%; justify-self: center; filter: brightness(0) saturate(100%) invert(19%) sepia(55%) saturate(1300%) hue-rotate(190deg); opacity: .85; }
.kdm-about h5 { margin: 0 0 1cqw; font-size: 1.7cqw; font-weight: 800; color: #0E2A47; }
.kdm-about p { margin: 0; font-size: .95cqw; line-height: 1.7; color: #5A6675; }
.kdm-mnav span { margin-left: auto; flex: none; }

.kdm-hero { position: relative; aspect-ratio: 16 / 8.6; flex: none; overflow: hidden; color: #fff; font-family: var(--f); }
.kdm-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.kdm-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4,20,40,.72) 0%, rgba(4,20,40,.25) 55%, transparent 80%), linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%); }
.kdm-nav { position: absolute; z-index: 2; left: 6%; right: 5%; top: 5%; display: flex; align-items: center; gap: 1.3cqw; }
.kdm-nav img { height: 5.4cqw; width: auto; margin-right: auto; }
.kdm-nav nav { display: flex; gap: 1.9cqw; }
.kdm-nav b { font-size: 1.05cqw; font-weight: 700; letter-spacing: .02em; }
.kdm-nav em { font-style: normal; font-size: 1cqw; font-weight: 700; border: 1px solid rgba(255,255,255,.8); padding: .35cqw .6cqw; border-radius: 3px; background: #fff; color: #0A2944; }
.kdm-nav em.o { background: none; color: #fff; margin-left: -.6cqw; }
.kdm-copy { position: absolute; z-index: 2; left: 9%; top: 31%; }
.kdm-copy h4 { margin: 0; font-weight: 900; font-size: 4.3cqw; line-height: 1.08; letter-spacing: .005em; text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.kdm-copy p { margin: 1.6cqw 0 0; font-size: 1.15cqw; line-height: 1.6; font-weight: 500; opacity: .92; }
.kdm-proj { flex: none; padding-bottom: 3cqw; display: grid; grid-template-columns: 1fr 1fr 1.05fr; gap: 2.2cqw; padding: 3.4cqw 6% 0; font-family: var(--f); color: #1B2A3A; align-items: start; }
.kdm-proj figure { margin: 0; }
.kdm-proj img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; box-shadow: 0 8px 16px -10px rgba(0,0,0,.4); }
.kdm-proj figcaption { font-size: .95cqw; font-weight: 600; margin-top: 1.1cqw; letter-spacing: .02em; }
.kdm-pt h5 { margin: 0 0 1cqw; font-size: 2cqw; font-weight: 800; color: #0E2A47; letter-spacing: .01em; }
.kdm-pt p { margin: 0; font-size: 1cqw; line-height: 1.7; color: #5A6675; }
.kdm-phone { position: absolute; right: 4%; bottom: -14%; width: 25%; aspect-ratio: 9 / 19; background: #0B0D12; border-radius: 4.2cqw; padding: .9cqw; z-index: 3; box-shadow: 0 40px 70px -24px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.12); }
.kdm-scr { width: 100%; height: 100%; border-radius: 3.4cqw; overflow: hidden; background: #fff; display: flex; flex-direction: column; font-family: var(--f); }
.kdm-mhero { position: relative; height: 62%; color: #fff; flex: none; }
.kdm-mhero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kdm-mhero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(4,20,40,.55), rgba(4,20,40,.1) 45%, rgba(4,20,40,.55)); }
.kdm-mnav { position: absolute; z-index: 2; left: 8%; right: 8%; top: 9%; display: flex; justify-content: space-between; align-items: center; }
.kdm-mnav img { height: 4.6cqw; width: auto; }
.kdm-mnav span { width: 3.2cqw; height: 1.9cqw; border-top: 2px solid #fff; border-bottom: 2px solid #fff; position: relative; }
.kdm-mnav span::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 2px solid #fff; transform: translateY(-50%); }
.kdm-mhero h4 { position: absolute; z-index: 2; left: 9%; bottom: 10%; margin: 0; font-weight: 900; font-size: 2.6cqw; line-height: 1.1; }
.kdm-mcard { position: relative; margin: 4% 6%; flex: 1; overflow: hidden; border-radius: 1.4cqw; }
.kdm-mcard img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kdm-mcard b { position: absolute; left: 8%; bottom: 8%; color: #fff; font-size: 1.5cqw; font-weight: 800; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
@media (max-width: 900px) { .kdm-win { left: 24px; width: 86%; top: 20px; } .kdm-phone { right: 5%; bottom: -10%; width: 30%; } }
/* PY Teknoloji live mockup (recreated from pyteknoloji.com.tr) */
.cover.py { background: radial-gradient(60% 80% at 92% 8%, #34343A 0%, transparent 60%), radial-gradient(50% 60% at 20% 100%, #1C1C20 0%, transparent 70%), #0B0B0D; color: #fff; }
.cover.py .py-logo { height: clamp(34px, 3.4vw, 50px); margin-top: 10px; }
.cover.py .cv-tags span { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.26); }
.cover.py .cv-tags span.on { background: rgba(255,255,255,.14); color: #fff; border-color: transparent; }
.pym { container-type: size; font-family: var(--f); }
.pym-card { position: absolute; right: 3%; top: 4%; width: 46%; border-radius: 12px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.pym-card img { width: 100%; display: block; }
.pym-win { position: absolute; left: 0; top: 12%; bottom: 0; width: 80%; background: #fff; border-radius: 12px 12px 0 0; overflow: hidden; display: flex; flex-direction: column; z-index: 2; box-shadow: 0 40px 90px -30px rgba(0,0,0,.85); color: #0B0B0D; }
.pym-win .cv-bar { height: 3.6cqw; min-height: 18px; background: #EFEFF1; display: flex; align-items: center; gap: .8cqw; padding: 0 1.6cqw; flex: none; }
.pym-win .cv-bar i { width: 1.2cqw; height: 1.2cqw; min-width: 7px; min-height: 7px; border-radius: 50%; background: #FF5F57; display: block; }
.pym-win .cv-bar i:nth-child(2) { background: #FEBC2E; } .pym-win .cv-bar i:nth-child(3) { background: #28C840; }
.pym-win .cv-bar span { flex: 0 1 44%; margin: 0 auto; height: 2cqw; min-height: 12px; border-radius: 999px; background: #fff; }
.pym-nav { flex: none; display: flex; align-items: center; gap: 2.4cqw; padding: 1.8cqw 4.5%; box-shadow: 0 6px 14px -12px rgba(0,0,0,.3); position: relative; z-index: 2; background: #fff; }
.pym-nav img { height: 4.2cqw; width: auto; margin-right: auto; }
.pym-nav nav { display: flex; gap: 2.6cqw; }
.pym-nav b { font-size: 1.05cqw; font-weight: 500; }
.pym-burg { width: 3cqw; height: 3cqw; border-radius: 50%; border: 1.5px solid #0B0B0D; position: relative; flex: none; background: linear-gradient(#0B0B0D,#0B0B0D) center 40% / 45% 1.5px no-repeat, linear-gradient(#0B0B0D,#0B0B0D) center 60% / 45% 1.5px no-repeat; }
.pym-nav em { font-style: normal; font-size: 1.05cqw; font-weight: 600; background: #0B0B0D; color: #fff; padding: 1cqw 2cqw; border-radius: 999px; }
.pym-hero { position: relative; flex: none; aspect-ratio: 16 / 7.6; overflow: hidden; background: #fff; }
.pym-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 55%; }
.pym-copy { position: absolute; left: 5%; top: 30%; }
.pym-copy h4 { margin: 0; font-size: 4cqw; font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; }
.pym-copy p { margin: 1.4cqw 0 0; font-size: 1.15cqw; color: #2A2A30; }
.pym-dots { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); display: flex; gap: 1.6cqw; }
.pym-dots i { width: .9cqw; height: .9cqw; border-radius: 50%; border: 1px solid #555; display: block; }
.pym-dots i.on { background: #0B0B0D; border-color: #0B0B0D; }
.pym-stats { flex: none; background: #0B0B0D; color: #fff; display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); align-items: center; gap: 2cqw; padding: 3cqw 5%; }
.pym-stats h5 { margin: 0; font-size: 2.2cqw; font-weight: 700; line-height: 1.1; }
.pym-stats b { display: block; font-size: 2.6cqw; font-weight: 700; }
.pym-stats small { font-size: .9cqw; color: #A9A9B0; }
.pym-serv { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2cqw; padding: 3cqw 5% 0; }
.pym-serv figure { margin: 0; position: relative; border-radius: 1.4cqw; overflow: hidden; }
.pym-serv img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.pym-serv figcaption { position: absolute; left: 7%; right: 7%; bottom: 7%; color: #fff; font-size: 1.3cqw; font-weight: 600; text-shadow: 0 1px 10px rgba(0,0,0,.5); }
.pym-phone { position: absolute; right: 4%; bottom: -5%; width: 23%; aspect-ratio: 9 / 19; background: #0B0B0D; border-radius: 4.2cqw; padding: .9cqw; z-index: 3; box-shadow: 0 40px 70px -24px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.16); }
.pym-scr { width: 100%; height: 100%; border-radius: 3.4cqw; overflow: hidden; background: #fff; color: #0B0B0D; display: flex; flex-direction: column; align-items: center; text-align: center; }
.pym-mnav { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 9% 9% 6%; box-shadow: 0 6px 12px -10px rgba(0,0,0,.3); }
.pym-mnav img { height: 3.4cqw; width: auto; }
.pym-mnav .pym-burg { width: 3.2cqw; height: 3.2cqw; }
.pym-scr h4 { margin: 9% 8% 0; font-size: 2.2cqw; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }
.pym-scr p { margin: 4% 10% 0; font-size: .95cqw; color: #333; line-height: 1.5; }
.pym-mabout { width: 86%; margin-top: 7%; border-radius: 1.2cqw; display: block; aspect-ratio: 4 / 3; object-fit: cover; }
.pym-scr .pym-mh { margin: 7% 8% 0 !important; font-size: 1.75cqw !important; font-weight: 700 !important; text-align: left; align-self: stretch; }
.pym-scr .pym-mp { margin: 4% 8% 0 !important; font-size: .85cqw !important; line-height: 1.6 !important; color: #444 !important; text-align: left; }
.pym-mbtn { align-self: flex-start; margin: 6% 8% 0; background: #0B0B0D; color: #fff; font-size: .9cqw; font-weight: 600; padding: 1cqw 1.8cqw; border-radius: 999px; }
.pym-mstats { width: 100%; background: #0B0B0D; color: #fff; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw 1cqw; padding: 2.4cqw 2cqw; text-align: left; }
.pym-mstats h4 { grid-column: 1 / -1; margin: 0 0 .4cqw !important; font-size: 1.7cqw !important; font-weight: 700; line-height: 1.15; letter-spacing: 0; }
.pym-mstats b { display: block; font-size: 2cqw; font-weight: 700; }
.pym-mstats small { font-size: .75cqw; color: #A9A9B0; }
.pym-mt { margin: 3.4cqw 0 1.6cqw !important; font-size: 1.35cqw !important; font-weight: 600; line-height: 1.2 !important; color: #0B0B0D !important; }
.pym-mserv { position: relative; width: 84%; border-radius: 1.4cqw; overflow: hidden; }
.pym-mserv img { width: 100%; aspect-ratio: 4 / 4.4; object-fit: cover; display: block; }
.pym-mserv.sm { margin-top: 1.4cqw; }
.pym-mserv span { position: absolute; left: 8%; bottom: 8%; color: #fff; font-size: 1.15cqw; font-weight: 600; text-align: left; line-height: 1.25; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
.pym-mimg { width: 100%; margin-top: 4%; display: block; }
@media (max-width: 900px) { .pym-win { left: 24px; width: 86%; top: 20px; } .pym-card { display: none; } .pym-phone { right: 5%; bottom: -10%; width: 30%; } }
/* Mezzie: laptop (website) + Instagram phone */
.cover.mz { background: radial-gradient(70% 90% at 90% 10%, #4E6E51 0%, transparent 60%), linear-gradient(135deg, #1E3123 0%, #2B4430 55%, #34503A 100%); color: #F6F1E8; }
.cover.mz .mz-logo { height: clamp(28px, 2.6vw, 40px); margin-top: 14px; }
.cover.mz .cv-tags span { color: rgba(246,241,232,.82); border-color: rgba(246,241,232,.3); }
.cover.mz .cv-tags span.on { background: rgba(246,241,232,.16); color: #fff; border-color: transparent; }
.mzm { container-type: size; font-family: var(--f); }
.mzm-laptop { position: absolute; left: -1%; top: 19%; width: 84%; z-index: 1; filter: drop-shadow(0 40px 50px rgba(0,0,0,.45)); }
.mzm-screen { background: #0E0F10; border-radius: 1.8cqw 1.8cqw 0 0; padding: 1.4cqw 1.4cqw 1.8cqw; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.mzm-site { aspect-ratio: 16 / 10; overflow: hidden; background: #fff; display: flex; flex-direction: column; color: #1A1A1A; }
.mzm-base { height: 2.2cqw; margin: 0 -6%; background: linear-gradient(180deg, #D9DADC 0%, #B9BBBE 55%, #8E9094 100%); border-radius: 0 0 2.6cqw 2.6cqw / 0 0 2cqw 2cqw; position: relative; }
.mzm-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 40%; transform: translateX(-50%); background: #A7A9AC; border-radius: 0 0 1cqw 1cqw; }
.mzm-hero { position: relative; flex: none; height: 64%; overflow: hidden; }
.mzm-hero > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mzm-hc { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; }
.mzm-hc img { width: 34%; opacity: .92; }
.mzm-hc p { margin: .6cqw 0 0; font-size: 1.6cqw; font-weight: 500; text-shadow: 0 1px 10px rgba(0,0,0,.25); }
.mzm-nav { flex: none; display: flex; align-items: center; justify-content: center; gap: 2.4cqw; padding: 1cqw 0; border-bottom: 1px solid #ECECEC; }
.mzm-nav b { font-size: .95cqw; font-weight: 400; }
.mzm-nav img { height: 2.8cqw; margin: 0 1.4cqw; }
.mzm-about { flex: 1; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }
.mzm-about > img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.mzm-about div { padding: 1.8cqw 4cqw; }
.mzm-about h5 { margin: 0; font-size: 1.5cqw; font-weight: 400; }
.mzm-about h6 { margin: 1cqw 0 0; font-size: 1.3cqw; font-weight: 500; color: #628466; }
.mzm-about p { margin: .8cqw 0 0; font-size: .8cqw; line-height: 1.6; color: #333; }
.mzm-phone { position: absolute; right: 3%; top: 24%; width: 27%; aspect-ratio: 9 / 19; background: #0E0F10; border-radius: 4.4cqw; padding: .9cqw; z-index: 3; box-shadow: 0 40px 70px -24px rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,255,255,.14); }
.mzm-scr { width: 100%; height: 100%; border-radius: 3.6cqw; overflow: hidden; background: #fff; color: #111; display: flex; flex-direction: column; }
.mzm-ig-top { display: flex; justify-content: space-between; align-items: center; padding: 9% 8% 4%; }
.mzm-ig-top b { font-size: 1.5cqw; font-weight: 700; }
.mzm-ig-top i { width: 2cqw; height: 2cqw; border: 1.5px solid #111; border-radius: .5cqw; }
.mzm-prof { display: flex; align-items: center; gap: 1.6cqw; padding: 0 8%; }
.mzm-av { width: 7cqw; height: 7cqw; border-radius: 50%; background: #2F4A33; display: grid; place-items: center; flex: none; box-shadow: 0 0 0 .4cqw #fff, 0 0 0 .7cqw #D9D9D9; }
.mzm-av img { width: 72%; }
.mzm-prof b { display: block; font-size: 1.2cqw; font-weight: 600; }
.mzm-prof small { font-size: .85cqw; color: #555; }
.mzm-btns { display: grid; grid-template-columns: 1fr 1fr; gap: .8cqw; padding: 5% 8% 4%; }
.mzm-btns span { text-align: center; font-size: .95cqw; font-weight: 600; padding: .9cqw 0; border-radius: .9cqw; background: #2F4A33; color: #fff; }
.mzm-btns span.g { background: #EFEFEF; color: #111; }
.mzm-tabs { display: flex; border-top: 1px solid #EEE; }
.mzm-tabs i { flex: 1; height: 2.6cqw; position: relative; }
.mzm-tabs i.on::after { content: ""; position: absolute; left: 30%; right: 30%; bottom: 0; height: 2px; background: #111; }
.mzm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; }
.mzm-grid img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
@media (max-width: 900px) { .mzm-laptop { left: 20px; top: 24px; width: 80%; } .mzm-phone { right: 4%; top: 18%; width: 34%; } }
/* Tise: browser + phone */
.cover.ts { background: radial-gradient(55% 70% at 88% 6%, rgba(232,85,95,.28) 0%, transparent 60%), radial-gradient(70% 90% at 70% 100%, #22307A 0%, transparent 65%), linear-gradient(135deg, #0A1033 0%, #121C52 60%, #18266A 100%); color: #fff; }
.cover.ts .ts-logo { height: clamp(34px, 3.2vw, 48px); margin-top: 10px; }
.cover.ts .cv-tags span, .cover.tx .cv-tags span { color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.28); }
.cover.ts .cv-tags span.on { background: rgba(255,255,255,.14); color: #fff; border-color: transparent; }
.tsm, .txm { container-type: size; }
.tsm { font-family: var(--f); }
.tsm-win { position: absolute; left: 0; top: 12%; bottom: 0; width: 80%; background: #F7F8FC; border-radius: 12px 12px 0 0; overflow: hidden; display: flex; flex-direction: column; z-index: 2; box-shadow: 0 40px 90px -30px rgba(0,0,0,.8); color: #12163A; }
.tsm-win .cv-bar, .txm-site .cv-bar { height: 3.6cqw; min-height: 18px; background: #EDEEF3; display: flex; align-items: center; gap: .8cqw; padding: 0 1.6cqw; flex: none; }
.tsm-win .cv-bar i { width: 1.2cqw; height: 1.2cqw; min-width: 7px; min-height: 7px; border-radius: 50%; background: #FF5F57; display: block; }
.tsm-win .cv-bar i:nth-child(2) { background: #FEBC2E; } .tsm-win .cv-bar i:nth-child(3) { background: #28C840; }
.tsm-win .cv-bar span { flex: 0 1 44%; margin: 0 auto; height: 2cqw; min-height: 12px; border-radius: 999px; background: #fff; }
.tsm-nav { flex: none; display: flex; align-items: center; gap: 2.2cqw; padding: 1.6cqw 4.5%; background: #fff; box-shadow: 0 6px 14px -12px rgba(0,0,0,.25); position: relative; z-index: 2; }
.tsm-nav img { height: 3.4cqw; margin-right: auto; }
.tsm-nav nav { display: flex; gap: 2.2cqw; }
.tsm-nav b { font-size: 1.05cqw; font-weight: 500; }
.tsm-nav em { font-style: normal; font-size: 1.05cqw; font-weight: 600; background: #12163A; color: #fff; padding: 1cqw 2cqw; border-radius: 999px; }
.tsm-hero { position: relative; flex: none; aspect-ratio: 16 / 8.6; overflow: hidden; background: #fff; }
.tsm-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.tsm-copy { position: absolute; left: 5%; top: 24%; width: 46%; }
.tsm-copy h4 { margin: 0; font-size: 3.9cqw; font-weight: 800; line-height: 1.12; letter-spacing: -0.01em; }
.tsm-copy p { margin: 1.4cqw 0 0; font-size: 1.05cqw; line-height: 1.6; color: #333; }
.tsm-copy em { display: inline-block; margin-top: 2cqw; font-style: normal; font-size: 1.05cqw; font-weight: 600; background: #10195E; color: #fff; padding: 1.1cqw 2.2cqw; border-radius: 999px; }
.tsm-sec { flex: 1; padding: 2.6cqw 5% 0; }
.tsm-sec h5 { margin: 0 0 1.8cqw; font-size: 2.4cqw; font-weight: 800; }
.tsm-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.tsm-c { display: flex; gap: 1.2cqw; background: #fff; border: 1px solid #E7E9F2; border-radius: 1.6cqw; padding: 1.6cqw; align-items: flex-start; }
.tsm-c span { width: 4.6cqw; height: 4.6cqw; border-radius: 1cqw; background: #EEF0FB; display: grid; place-items: center; flex: none; }
.tsm-c span img { width: 80%; }
.tsm-c b { display: block; font-size: 1.1cqw; font-weight: 700; line-height: 1.25; }
.tsm-c small { display: block; font-size: .85cqw; color: #666; margin-top: .5cqw; line-height: 1.5; }
.tsm-phone, .txm-phone { position: absolute; right: 4%; bottom: -5%; width: 24%; aspect-ratio: 9 / 19; background: #0B0D16; border-radius: 4.2cqw; padding: .9cqw; z-index: 3; box-shadow: 0 40px 70px -24px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.14); }
.tsm-scr, .txm-scr { width: 100%; height: 100%; border-radius: 3.4cqw; overflow: hidden; background: #F7F8FC; color: #12163A; display: flex; flex-direction: column; }
.tsm-mnav { display: flex; justify-content: space-between; align-items: center; padding: 10% 8% 6%; background: #fff; }
.tsm-mnav img { height: 3cqw; }
.tsm-mnav i { width: 3cqw; height: 1.8cqw; border-top: 2px solid #12163A; border-bottom: 2px solid #12163A; }
.tsm-mlist { display: flex; flex-direction: column; gap: 1cqw; padding: 5% 6%; }
.tsm-mlist .tsm-c { padding: 1.2cqw; border-radius: 1.4cqw; }
.tsm-mlist .tsm-c span { width: 4cqw; height: 4cqw; }
.tsm-mlist .tsm-c b { font-size: 1cqw; }
.tsm-mlist .tsm-c small { font-size: .75cqw; }
.tsm-led { position: relative; margin: 0 6%; border-radius: 1.4cqw; overflow: hidden; flex: 1; min-height: 0; }
.tsm-led img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tsm-led b { position: absolute; left: 8%; bottom: 10%; color: #fff; font-size: 1.15cqw; line-height: 1.25; text-shadow: 0 1px 8px rgba(0,0,0,.6); }
/* Tinox: laptop + phone, light steel card */
.cover.tx { background: radial-gradient(55% 75% at 78% 30%, #2C3496 0%, transparent 70%), linear-gradient(135deg, #141A5C 0%, #1A206C 55%, #20277E 100%); color: #fff; }
.cover.tx .tx-logo { height: clamp(34px, 3.3vw, 50px); margin-top: 10px; }
.cover.tx .cv-tags span { color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.28); }
.cover.tx .cv-tags span.on { background: #EE4B62; color: #fff; border-color: #EE4B62; }
.txk { container-type: inline-size; }
.txk-grid { position: absolute; inset: 7% 5% 7% 2%; display: grid; grid-template-columns: 1fr 1fr .9fr; grid-template-rows: 1.05fr 1fr; gap: 2.2cqw; }
.txk-t { position: relative; overflow: hidden; border-radius: 2.2cqw; background: #fff; box-shadow: 0 30px 60px -30px rgba(0,0,0,.55); }
.txk-t small { position: absolute; left: 7%; top: 8%; font-size: clamp(9px, 1.35cqw, 12px); font-weight: 600; letter-spacing: .02em; color: #6B6F8F; z-index: 2; }
.txk-logo { grid-column: 1 / 3; }
.txk-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.txk-pat { grid-row: 1 / 3; grid-column: 3; }
.txk-pat { background: #EE4B62 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%22120%22%20height%3D%22120%22%20viewBox%3D%220%200%20120%20120%22%3E%3Cpolygon%20points%3D%2249.1%2C41.0%2030.0%2C52.0%2010.9%2C41.0%2010.9%2C19.0%2030.0%2C8.0%2049.1%2C19.0%22%20fill%3D%22%231A206C%22/%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2230%22%20r%3D%2210%22%20fill%3D%22%23EE4B62%22/%3E%3Cpolygon%20points%3D%22109.1%2C101.0%2090.0%2C112.0%2070.9%2C101.0%2070.9%2C79.0%2090.0%2C68.0%20109.1%2C79.0%22%20fill%3D%22%231A206C%22/%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%2290%22%20r%3D%2210%22%20fill%3D%22%23EE4B62%22/%3E%3Cpolygon%20points%3D%22109.1%2C-19.0%2090.0%2C-8.0%2070.9%2C-19.0%2070.9%2C-41.0%2090.0%2C-52.0%20109.1%2C-41.0%22%20fill%3D%22%231A206C%22/%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%22-30%22%20r%3D%2210%22%20fill%3D%22%23EE4B62%22/%3E%3Cpolygon%20points%3D%22-10.9%2C101.0%20-30.0%2C112.0%20-49.1%2C101.0%20-49.1%2C79.0%20-30.0%2C68.0%20-10.9%2C79.0%22%20fill%3D%22%231A206C%22/%3E%3Ccircle%20cx%3D%22-30%22%20cy%3D%2290%22%20r%3D%2210%22%20fill%3D%22%23EE4B62%22/%3E%3Cpolygon%20points%3D%22169.1%2C41.0%20150.0%2C52.0%20130.9%2C41.0%20130.9%2C19.0%20150.0%2C8.0%20169.1%2C19.0%22%20fill%3D%22%231A206C%22/%3E%3Ccircle%20cx%3D%22150%22%20cy%3D%2230%22%20r%3D%2210%22%20fill%3D%22%23EE4B62%22/%3E%3Cpolygon%20points%3D%2249.1%2C161.0%2030.0%2C172.0%2010.9%2C161.0%2010.9%2C139.0%2030.0%2C128.0%2049.1%2C139.0%22%20fill%3D%22%231A206C%22/%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%22150%22%20r%3D%2210%22%20fill%3D%22%23EE4B62%22/%3E%3Cpolygon%20points%3D%22109.1%2C221.0%2090.0%2C232.0%2070.9%2C221.0%2070.9%2C199.0%2090.0%2C188.0%20109.1%2C199.0%22%20fill%3D%22%231A206C%22/%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%22210%22%20r%3D%2210%22%20fill%3D%22%23EE4B62%22/%3E%3C/svg%3E") 0 0 / 11cqw 11cqw repeat; }
.txk-col { display: flex; flex-direction: column; justify-content: flex-end; padding: 7%; gap: 1.6cqw; }
.txk-dots { display: flex; }
.txk-dots i { width: 6.4cqw; height: 6.4cqw; border-radius: 50%; margin-right: -1.6cqw; box-shadow: 0 0 0 .35cqw #fff; }
.txk-codes { display: flex; flex-direction: column; gap: .6cqw; font-size: clamp(9px, 1.3cqw, 12px); color: #1A206C; font-weight: 600; }
.txk-codes span { display: flex; justify-content: space-between; gap: 8px; }
.txk-codes b { font-weight: 500; color: #8A8DA8; }
@container (max-width: 520px) { .txk-codes { display: none; } .txk-dots i { width: 9cqw; height: 9cqw; } }
.txk-card { background: #ECECEE; }
.txk-card img { position: absolute; width: 66%; height: auto; border-radius: .5cqw; box-shadow: 0 14px 28px -12px rgba(26,32,108,.45); }
.txk-card .p { left: 9%; top: 26%; transform: rotate(-6deg); }
.txk-card .w { right: 7%; bottom: 12%; transform: rotate(4deg); }
.txm { font-family: var(--f); }
.txm-laptop { position: absolute; left: -1%; top: 19%; width: 84%; z-index: 1; filter: drop-shadow(0 40px 46px rgba(30,30,60,.35)); }
.txm-screen { background: #0E0F12; border-radius: 1.8cqw 1.8cqw 0 0; padding: 1.4cqw 1.4cqw 1.8cqw; }
.txm-site { aspect-ratio: 16 / 10; overflow: hidden; background: #fff; display: flex; flex-direction: column; color: #1F1F2E; }
.txm-base { height: 2.2cqw; margin: 0 -6%; background: linear-gradient(180deg, #E4E6E9 0%, #C3C6CB 55%, #9A9DA3 100%); border-radius: 0 0 2.6cqw 2.6cqw / 0 0 2cqw 2cqw; position: relative; }
.txm-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 16%; height: 40%; transform: translateX(-50%); background: #AEB1B6; border-radius: 0 0 1cqw 1cqw; }
.txm-nav { flex: none; display: flex; align-items: center; gap: 2cqw; padding: 1.3cqw 3%; }
.txm-nav img { height: 2.6cqw; margin-right: auto; }
.txm-nav nav { display: flex; gap: 2cqw; margin-right: auto; }
.txm-nav b { font-size: .95cqw; font-weight: 600; }
.txm-nav span { font-size: .95cqw; font-weight: 500; }
.txm-nav i { width: 1.6cqw; height: 1.6cqw; border: 1.5px solid #1F1F2E; display: block; }
.txm-nav i.s { border-radius: 50%; } .txm-nav i.b { border-radius: .3cqw .3cqw .5cqw .5cqw; }
.txm-hero { flex: none; margin: 0 2.4%; border-radius: .8cqw; overflow: hidden; }
.txm-hero img { width: 100%; display: block; aspect-ratio: 1512 / 760; object-fit: cover; object-position: center 40%; }
.txm-feat { flex: 1; display: grid; grid-template-columns: 1fr 1fr 1fr; margin: 1.6cqw 2.4% 0; background: #F2F3F8; border-radius: .8cqw .8cqw 0 0; text-align: center; align-items: center; padding: 1.4cqw 1cqw; }
.txm-feat small { display: block; font-size: .75cqw; font-weight: 700; letter-spacing: .06em; }
.txm-feat b { display: block; font-size: .75cqw; font-weight: 500; color: #555; margin-top: .4cqw; }
.txm-feat h5 { margin: 0; font-size: 2cqw; font-weight: 700; }
.txm-phone { right: 3%; top: 26%; bottom: auto; width: 26%; background: #0E0F12; }
.txm-scr { background: #fff; color: #1F1F2E; }
.txm-mnav { display: flex; justify-content: space-between; align-items: center; padding: 10% 8% 5%; }
.txm-mnav img { height: 2.8cqw; }
.txm-mnav i { width: 2.4cqw; height: 2.4cqw; display: block; }
.txm-mnav i.m { border-top: 2px solid #1F1F2E; border-bottom: 2px solid #1F1F2E; height: 1.6cqw; }
.txm-mnav i.b { border: 1.5px solid #1F1F2E; border-radius: .3cqw .3cqw .5cqw .5cqw; }
.txm-scr h5 { margin: 3% 0 0; text-align: center; font-size: 1.8cqw; font-weight: 700; }
.txm-chips { display: flex; gap: .8cqw; justify-content: center; margin: 4% 0; }
.txm-chips span { font-size: .85cqw; padding: .5cqw 1.2cqw; border-radius: 999px; background: #F1F2F6; }
.txm-chips span.on { background: #26215F; color: #fff; }
.txm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqw; padding: 0 6%; }
.txm-p img { width: 100%; display: block; aspect-ratio: 1; object-fit: cover; border-radius: .8cqw; background: #fff; box-shadow: 0 0 0 1px #EEE; }
.txm-p small { display: block; font-size: .65cqw; font-weight: 600; margin-top: .6cqw; line-height: 1.3; text-align: center; }
@media (max-width: 900px) { .tsm-win { left: 24px; width: 86%; top: 20px; } .tsm-phone { right: 5%; bottom: -8%; width: 30%; } .txm-laptop { left: 20px; top: 24px; width: 80%; } .txm-phone { right: 4%; top: 18%; width: 34%; } }
/* The Hair Lounge: identity collage */
.cover.bz { background: #050506; color: #F4F4F4; }
.cover.bz .cv-l { z-index: 3; }
.cover.bz .bz-logo { height: clamp(34px, 3.4vw, 50px); margin-top: 10px; }
.cover.bz .cv-tags span { color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.28); }
.cover.bz .cv-tags span.on { background: #ED1C24; color: #fff; border-color: #ED1C24; }
.bz-bg { position: absolute; top: 0; right: 0; bottom: 0; width: 66%; z-index: 0; -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 22%, #000 48%); mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.5) 22%, #000 48%); }
.bz-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 50%; display: block; filter: grayscale(.15) contrast(1.05) brightness(.82); }
.bz-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,5,6,.35) 0%, transparent 30%, transparent 65%, rgba(5,5,6,.7) 100%); }
.bzm { container-type: size; }
.bzm-phone { position: absolute; right: 3.5%; top: 16%; width: 24%; aspect-ratio: 9 / 19; background: #0B0B0C; border-radius: 4.6cqw; padding: .9cqw; z-index: 3; box-shadow: 0 50px 80px -24px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.16); transform: rotate(4deg); }
.bzm-scr { width: 100%; height: 100%; border-radius: 3.8cqw; overflow: hidden; background: #fff; display: flex; flex-direction: column; color: #111; }
.bzm-top { display: flex; align-items: center; gap: 1.2cqw; padding: 5.2cqw 2.2cqw 1.6cqw; font-size: 1.6cqw; }
.bzm-top b { font-weight: 600; flex: 1; }
.bzm-top i { width: 2.4cqw; height: .6cqw; background: radial-gradient(circle, #111 40%, transparent 42%) 0 0 / .8cqw .6cqw repeat-x; }
.bzm-av { width: 4.6cqw; height: 4.6cqw; border-radius: 50%; background: #0B0B0C; display: grid; place-items: center; box-shadow: 0 0 0 .35cqw #fff, 0 0 0 .6cqw #ED1C24; overflow: hidden; }
.bzm-av img { width: 100%; height: 100%; display: block; }
.bzm-post { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }
.bzm-act { display: flex; gap: 1.8cqw; padding: 1.8cqw 2.2cqw 1cqw; }
.bzm-act svg { width: 3cqw; height: 3cqw; }
.bzm-cap { margin: 0; padding: 0 2.2cqw; font-size: 1.45cqw; line-height: 1.4; color: #333; }
.bzm-cap b { color: #111; }
@media (max-width: 900px) { .bz-bg { width: 100%; right: 0; top: 40%; -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 35%); mask-image: linear-gradient(180deg, transparent 0%, #000 35%); } }
.bz-ofis img, .bz-kimlik img, .bz-post img { width: 100%; display: block; }
.bz-ofis { right: 4%; top: 8%; width: 52%; box-shadow: 0 30px 60px -28px rgba(0,0,0,.8); }
.bz-kimlik { left: 0; top: 33%; width: 64%; z-index: 2; box-shadow: 0 40px 80px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.06); }
.bz-post { right: 6%; bottom: 6%; width: 27%; z-index: 3; border-radius: 10px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.1); }
.cover.hl { background: radial-gradient(60% 80% at 85% 10%, #3A3A3E 0%, transparent 60%), linear-gradient(135deg, #0A0A0B 0%, #141416 60%, #1C1C1F 100%); color: #F2F2F2; }
.cover.hl .hl-logo { height: clamp(34px, 3.2vw, 48px); margin-top: 10px; }
.cover.hl .cv-tags span { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.26); }
.cover.hl .cv-tags span.on { background: rgba(255,255,255,.14); color: #fff; border-color: transparent; }
.hl-sign, .hl-kit, .hl-razor { position: absolute; overflow: hidden; border-radius: 14px; }
.hl-sign img, .hl-kit img, .hl-razor img { width: 100%; display: block; }
.hl-sign { right: 4%; top: 8%; width: 52%; box-shadow: 0 30px 60px -28px rgba(0,0,0,.7); }
.hl-kit { left: 0; top: 33%; width: 64%; z-index: 2; box-shadow: 0 40px 80px -30px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.06); }
.hl-razor { right: 6%; bottom: 7%; width: 34%; z-index: 3; box-shadow: 0 30px 60px -20px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.08); }
@media (max-width: 900px) { .hl-sign { right: -4%; top: 10px; width: 60%; } .hl-kit { left: 24px; top: 80px; width: 78%; } .hl-razor { right: 18px; bottom: 70px; width: 40%; } }
/* Milvus: browser + app phone */
.cover.mv { background: radial-gradient(40% 55% at 95% 5%, rgba(255,255,255,.45) 0%, transparent 60%), linear-gradient(105deg, #12164F 0%, #1A2E9F 26%, #1E8BE6 42%, #43D7FF 60%, #6FE3FF 100%); color: #fff; }
.cover.mv .mv-logo { height: clamp(30px, 2.8vw, 42px); margin-top: 12px; }
.cover.mv .cv-tags span { color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.28); }
.cover.mv .cv-tags span.on { background: #43D7FF; color: #12164F; border-color: #43D7FF; }
.mvm { container-type: size; font-family: var(--f); }
.mvm-win { position: absolute; left: 0; top: 12%; bottom: 0; width: 80%; background: #fff; border-radius: 12px 12px 0 0; overflow: hidden; display: flex; flex-direction: column; z-index: 2; box-shadow: 0 40px 90px -30px rgba(0,0,0,.75); color: #12164F; }
.mvm-win .cv-bar { height: 3.6cqw; min-height: 18px; background: #EEF0F6; display: flex; align-items: center; gap: .8cqw; padding: 0 1.6cqw; flex: none; }
.mvm-win .cv-bar i { width: 1.2cqw; height: 1.2cqw; min-width: 7px; min-height: 7px; border-radius: 50%; background: #FF5F57; display: block; }
.mvm-win .cv-bar i:nth-child(2) { background: #FEBC2E; } .mvm-win .cv-bar i:nth-child(3) { background: #28C840; }
.mvm-win .cv-bar span { flex: 0 1 44%; margin: 0 auto; height: 2cqw; min-height: 12px; border-radius: 999px; background: #fff; }
.mvm-nav { flex: none; display: flex; align-items: center; gap: 2cqw; padding: 1.5cqw 4%; border-bottom: 1px solid #EEF0F6; }
.mvm-nav img { height: 2.6cqw; margin-right: auto; }
.mvm-nav nav { display: flex; gap: 2cqw; margin-right: auto; }
.mvm-nav b { font-size: .95cqw; font-weight: 500; color: #2B2F5E; }
.mvm-lang { font-size: .8cqw; font-weight: 700; background: #F1F3F8; border-radius: 999px; padding: .4cqw .5cqw; display: flex; gap: .6cqw; align-items: center; color: #555; }
.mvm-lang i { font-style: normal; background: #fff; border-radius: 999px; padding: .3cqw .7cqw; color: #12164F; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
.mvm-nav em, .mvm-btns em { font-style: normal; font-size: .95cqw; font-weight: 700; background: #1A206C; color: #fff; padding: .9cqw 1.8cqw; border-radius: 999px; }
.mvm-hero { flex: none; text-align: center; padding: 4.4cqw 8% 3.6cqw; background: radial-gradient(50% 70% at 50% 0%, #D3F4FF 0%, rgba(211,244,255,0) 70%), linear-gradient(180deg, #fff, #F5F8FC); }
.mvm-eye { margin: 0; font-size: .85cqw; font-weight: 700; letter-spacing: .14em; color: #2A6F8F; display: inline-flex; align-items: center; gap: .8cqw; }
.mvm-eye i { width: .8cqw; height: .8cqw; background: #43D7FF; border-radius: 2px; }
.mvm-hero h4 { margin: 1.6cqw 0 0; font-size: 4.6cqw; font-weight: 800; line-height: 1.08; letter-spacing: -0.035em; color: #12164F; }
.mvm-hero h4 span { color: #1A206C; }
.mvm-hero h4 u { text-decoration: none; background: linear-gradient(90deg, #1000AF, #43D7FF); -webkit-background-clip: text; background-clip: text; color: transparent; }
.mvm-sub { margin: 1.8cqw auto 0; max-width: 34em; font-size: 1.05cqw; line-height: 1.6; color: #5A607E; }
.mvm-btns { display: flex; justify-content: center; gap: 1cqw; margin-top: 2.2cqw; }
.mvm-btns em.o { background: #fff; color: #12164F; box-shadow: inset 0 0 0 1px #DDE1EC; }
.mvm-chips { display: flex; justify-content: center; gap: 2cqw; margin-top: 2.4cqw; font-size: .85cqw; color: #3A3F66; }
.mvm-chips span::before { content: ""; display: inline-block; width: .6cqw; height: .6cqw; border-radius: 50%; background: #43D7FF; margin-right: .6cqw; vertical-align: .1em; }
.mvm-sol { flex: 1; background: #F3F6FB; padding: 3cqw 6% 0; }
.mvm-sol h5 { margin: 0 0 1.8cqw; font-size: 2.6cqw; font-weight: 800; letter-spacing: -0.02em; }
.mvm-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1.8cqw; }
.mvm-cards > div { background: #fff; border: 1px solid #E3E8F2; border-radius: 1.6cqw; padding: 2cqw; display: grid; grid-template-columns: auto 1fr; column-gap: 1.2cqw; align-items: center; }
.mvm-cards img { width: 3.2cqw; grid-row: span 2; }
.mvm-cards b { font-size: 1.6cqw; font-weight: 800; }
.mvm-cards small { font-size: .75cqw; letter-spacing: .12em; color: #2A6F8F; font-weight: 600; }
.mvm-cards p { grid-column: 1 / -1; margin: 1.6cqw 0 0; display: flex; flex-wrap: wrap; gap: .6cqw; }
.mvm-cards p span { font-size: .75cqw; background: #EAF6FB; color: #23436B; padding: .4cqw .9cqw; border-radius: 999px; }
.mvm-phone { position: absolute; right: 4%; bottom: -6%; width: 24%; aspect-ratio: 9 / 19; background: #0B0D1C; border-radius: 4.2cqw; padding: .9cqw; z-index: 3; box-shadow: 0 40px 70px -24px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.14); }
.mvm-scr { width: 100%; height: 100%; border-radius: 3.4cqw; overflow: hidden; background: linear-gradient(160deg, #1A206C 0%, #1F5FD0 60%, #43D7FF 100%); display: flex; align-items: center; justify-content: center; }
.mvm-login { width: 82%; background: #fff; border-radius: 1.6cqw; padding: 2.4cqw 1.8cqw; display: flex; flex-direction: column; color: #12164F; }
.mvm-login img { width: 56%; align-self: center; margin-bottom: 2.2cqw; }
.mvm-login label { font-size: .8cqw; font-weight: 700; margin-top: .8cqw; }
.mvm-login .in { font-size: .7cqw; color: #9AA0B8; border-bottom: 1px solid #DDE1EC; padding: .6cqw 0; }
.mvm-login em { font-style: normal; text-align: center; margin-top: 2cqw; background: #1A73E8; background: linear-gradient(90deg, #1000AF, #2E7CF6); color: #fff; font-size: .9cqw; font-weight: 700; padding: 1cqw 0; border-radius: .8cqw; }
@media (max-width: 900px) { .mvm-win { left: 24px; width: 86%; top: 20px; } .mvm-phone { right: 5%; bottom: -8%; width: 30%; } }
/* SARİAD: browser + phone, navy & gold */
.cover.sr { background: radial-gradient(60% 80% at 88% 8%, rgba(255,240,205,.55) 0%, transparent 60%), radial-gradient(60% 70% at 10% 100%, rgba(176,122,34,.45) 0%, transparent 65%), linear-gradient(135deg, #E8BD63 0%, #D9A441 55%, #CB952F 100%); color: #09365E; }
.sr-brand { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.sr-seal { width: clamp(44px, 4vw, 58px); height: clamp(44px, 4vw, 58px); border-radius: 50%; background: #fff; display: grid; place-items: center; flex: none; box-shadow: 0 0 0 3px rgba(9,54,94,.85), 0 10px 20px -10px rgba(9,54,94,.5); }
.sr-seal img { width: 88%; height: auto !important; }
.sr-brand b { display: block; font-family: var(--f); font-size: clamp(20px, 1.9vw, 28px); font-weight: 700; letter-spacing: .12em; }
.sr-brand small { display: block; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: rgba(9,54,94,.78); max-width: 22em; line-height: 1.4; margin-top: 2px; }
.cover.sr .cv-h { font-family: var(--f); font-weight: 500; }
.cover.sr .cv-tags span { color: #09365E; border-color: rgba(9,54,94,.35); }
.cover.sr .cv-tags span.on { background: #09365E; color: #F3D9A0; border-color: #09365E; }
.srm { container-type: size; font-family: var(--f); }
.srm-win { position: absolute; left: 0; top: 12%; bottom: 0; width: 80%; background: #FBF8F1; border-radius: 12px 12px 0 0; overflow: hidden; display: flex; flex-direction: column; z-index: 2; box-shadow: 0 40px 90px -30px rgba(0,0,0,.75); color: #09365E; }
.srm-win .cv-bar { height: 3.6cqw; min-height: 18px; background: #EEEBE3; display: flex; align-items: center; gap: .8cqw; padding: 0 1.6cqw; flex: none; }
.srm-win .cv-bar i { width: 1.2cqw; height: 1.2cqw; min-width: 7px; min-height: 7px; border-radius: 50%; background: #FF5F57; display: block; }
.srm-win .cv-bar i:nth-child(2) { background: #FEBC2E; } .srm-win .cv-bar i:nth-child(3) { background: #28C840; }
.srm-win .cv-bar span { flex: 0 1 44%; margin: 0 auto; height: 2cqw; min-height: 12px; border-radius: 999px; background: #fff; }
.srm-nav { flex: none; display: flex; align-items: center; gap: 1.2cqw; padding: 1.4cqw 4%; background: #fff; border-top: 3px solid #D9A441; }
.srm-nav > img { height: 4.2cqw; }
.srm-nb { margin-right: auto; }
.srm-nb b { display: block; font-family: var(--f); font-size: 1.7cqw; letter-spacing: .12em; }
.srm-nb small { display: block; font-size: .55cqw; color: #8A7A55; letter-spacing: .04em; font-weight: 600; }
.srm-nav nav { display: flex; gap: 1.8cqw; }
.srm-nav nav b { font-size: .95cqw; font-weight: 600; color: #3A4A60; padding-bottom: .3cqw; }
.srm-nav nav b.on { color: #09365E; border-bottom: 2px solid #D9A441; }
.srm-nav em, .srm-btns em { font-style: normal; font-size: .85cqw; font-weight: 700; letter-spacing: .06em; background: #D9A441; color: #09365E; padding: 1cqw 1.8cqw; border-radius: .3cqw; }
.srm-hero { flex: none; display: grid; grid-template-columns: 1.15fr .85fr; gap: 3cqw; padding: 4cqw 5% 3.4cqw; align-items: center; }
.srm-eye { margin: 0; font-size: .7cqw; font-weight: 700; letter-spacing: .14em; color: #B5883A; display: flex; align-items: center; gap: .8cqw; }
.srm-eye::before { content: ""; width: 3cqw; height: 1px; background: #D9A441; }
.srm-copy h4 { margin: 1.4cqw 0 0; font-family: var(--f); font-size: 3.5cqw; font-weight: 700; line-height: 1.12; color: #09365E; }
.srm-sub { margin: 1.6cqw 0 0; font-size: 1.05cqw; line-height: 1.6; color: #4A5568; }
.srm-btns { display: flex; gap: 1cqw; margin-top: 2.2cqw; }
.srm-btns em.o { background: transparent; color: #09365E; box-shadow: inset 0 0 0 1px #09365E; }
.srm-img { position: relative; }
.srm-img > img { width: 100%; aspect-ratio: 4 / 4.6; object-fit: cover; display: block; border-radius: .4cqw; box-shadow: 0 20px 40px -24px rgba(9,54,94,.5); }
.srm-img span { position: absolute; left: -2.4cqw; bottom: -2cqw; width: 7cqw; height: 7cqw; border-radius: 50%; background: #fff; display: grid; place-items: center; box-shadow: 0 10px 20px -10px rgba(0,0,0,.4); }
.srm-img span img { width: 82%; }
.srm-stats { flex: none; background: #09365E; color: #fff; display: grid; grid-template-columns: repeat(4, 1fr); align-items: start; padding: 2.6cqw 5%; border-top: 3px solid #D9A441; }
.srm-stats b { display: block; font-family: var(--f); font-size: 2.8cqw; font-weight: 700; color: #F3D9A0; }
.srm-stats small { font-size: .75cqw; letter-spacing: .12em; color: rgba(255,255,255,.75); font-weight: 600; }
.srm-about { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; padding: 3cqw 5%; background: #fff; align-items: start; }
.srm-about h5 { margin: 1cqw 0 0; font-family: var(--f); font-size: 2.2cqw; line-height: 1.2; font-weight: 700; }
.srm-about > p { margin: 2.4cqw 0 0; font-size: 1cqw; line-height: 1.7; color: #4A5568; }
.srm-phone { position: absolute; right: 4%; bottom: -6%; width: 24%; aspect-ratio: 9 / 19; background: #0A1220; border-radius: 4.2cqw; padding: .9cqw; z-index: 3; box-shadow: 0 40px 70px -24px rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,255,255,.14); }
.srm-scr { width: 100%; height: 100%; border-radius: 3.4cqw; overflow: hidden; background: #FBF8F1; color: #09365E; display: flex; flex-direction: column; }
.srm-mnav { display: flex; align-items: center; gap: 1cqw; padding: 10% 8% 5%; background: #fff; border-top: 3px solid #D9A441; }
.srm-mnav img { height: 3.6cqw; }
.srm-mnav b { font-family: var(--f); font-size: 1.5cqw; letter-spacing: .1em; margin-right: auto; }
.srm-mnav i { width: 2.6cqw; height: 1.6cqw; border-top: 2px solid #09365E; border-bottom: 2px solid #09365E; }
.srm-meye { margin: 9% 8% 0; font-size: .65cqw; font-weight: 700; letter-spacing: .14em; color: #B5883A; }
.srm-scr h5 { margin: 1.4% 8% 0; font-family: var(--f); font-size: 2.1cqw; font-weight: 700; }
.srm-news { margin: 6% 7% 0; background: #fff; border-radius: 1cqw; overflow: hidden; box-shadow: 0 10px 20px -14px rgba(9,54,94,.4); }
.srm-news img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.srm-news small { display: block; margin: 1.4cqw 1.4cqw 0; font-size: .6cqw; font-weight: 700; letter-spacing: .12em; color: #B5883A; }
.srm-news b { display: block; margin: .6cqw 1.4cqw 0; font-family: var(--f); font-size: 1.2cqw; line-height: 1.25; }
.srm-news span { display: block; margin: 1cqw 1.4cqw 1.6cqw; font-size: .75cqw; font-weight: 700; color: #09365E; }
@media (max-width: 900px) { .srm-win { left: 24px; width: 86%; top: 20px; } .srm-phone { right: 5%; bottom: -8%; width: 30%; } }
/* Körfez Deniz */
.cover.kd { background: radial-gradient(70% 90% at 85% 0%, #2B577D 0%, transparent 65%), linear-gradient(135deg, #041B30 0%, #0A2944 50%, #14314F 100%); color: #fff; }
.cover.kd .cv-tags span { color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.28); }
.cover.kd .cv-tags span.on { background: rgba(255,255,255,.14); color: #fff; border-color: transparent; }
/* Joviness */
.cover.jv { background: linear-gradient(90deg, rgba(31,56,48,.96) 0%, rgba(41,71,62,.88) 45%, rgba(41,71,62,.55) 100%), url(../img/jv-pattern.jpg) center / cover, #29473E; color: #fff; }
.cover.jv .jv-logo { height: clamp(24px, 2.2vw, 34px); margin-top: 18px; }
.cover.jv .cv-tags span { color: rgba(255,255,255,.82); border-color: rgba(255,255,255,.28); }
.cover.jv .cv-tags span.on { background: rgba(255,255,255,.14); color: #fff; border-color: transparent; }
.jv-card, .jv-hero, .jv-post { position: absolute; overflow: hidden; }
.jv-card img, .jv-hero img, .jv-post img { width: 100%; height: auto; display: block; }
.jv-card { right: 5%; top: 10%; width: 50%; border-radius: 14px; box-shadow: 0 30px 60px -28px rgba(0,0,0,.55); }
.jv-hero { left: 0; top: 34%; width: 66%; border-radius: 14px; z-index: 2; box-shadow: 0 40px 80px -30px rgba(0,0,0,.65); }
.jv-post { right: 8%; bottom: 7%; width: 24%; border-radius: 12px; z-index: 3; box-shadow: 0 30px 50px -20px rgba(0,0,0,.6); }
@media (max-width: 900px) { .jv-card { right: -4%; top: 10px; width: 56%; } .jv-hero { left: 24px; top: 70px; width: 78%; } .jv-post { right: 18px; bottom: 70px; width: 32%; } }
@media (max-width: 900px) {
  .cover { aspect-ratio: auto; min-height: 0; height: 640px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; border-radius: 22px; }
  .cv-l { padding: 28px 24px 0; gap: 16px; }
  .cv-logo img { height: 54px; }
  .cv-h { margin: 0; font-size: 21px; padding-right: 0; }
  .cv-tags span { font-size: 10.5px; padding: 3px 10px; }
  .shots { left: 24px; width: auto; right: 0; top: 24px; }
  .shots.photo { left: 0; top: auto; }
  .peek { display: none; }
  .wk-arr { width: 40px; height: 40px; margin-top: 0; top: auto; bottom: 14px; } .wk-arr.prev { left: 16px; right: auto; } .wk-arr.next { right: 16px; }
  .wdots { bottom: 30px; }
}

/* 4 trusted */
.trust { padding-block: 50px 90px; }
.trust-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.trust h2 { font-size: clamp(22px, 2vw, 28px); }
.trust-head p { font-size: 12px; color: var(--soft); margin-top: 6px; }
.trust-arrows { display: flex; gap: 6px; }
.trust-arrows span { width: 26px; height: 26px; display: grid; place-items: center; color: var(--soft); }
.logos { margin-top: 30px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.logos-track { display: flex; gap: 70px; width: max-content; animation: slide 26s linear infinite; }
.logos-track span { font-weight: 700; font-size: 20px; letter-spacing: -0.03em; color: #A5A5AC; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.logos-track span i { width: 18px; height: 18px; border-radius: 50%; background: #B9B9BF; display: block; }
@keyframes slide { to { transform: translateX(-50%); } }

/* 5 big paragraph with deck */
.para { height: 170vh; position: relative; }
.para-stick { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; padding-bottom: 13vh; overflow: hidden; }
.para p.big { position: relative; z-index: 1; max-width: 860px; text-align: center; font-size: clamp(24px, 2.8vw, 38px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.22; padding: 0 24px; }
.para p.big .w { color: #CFCFD4; }
.para p.big .w.on { color: var(--ink); }
.para p.big .w.ac.on { color: #3ABFA0; }
.ico-in { display: inline-grid; place-items: center; width: 1.05em; height: 1.05em; border-radius: .28em; vertical-align: -0.12em; background: var(--ink); color: #fff; }
.ico-in.or { background: var(--coral); }
.ico-in svg { width: .62em; height: .62em; }
.deck { position: absolute; left: 50%; top: 50%; width: clamp(110px, 10vw, 140px); aspect-ratio: 4 / 5; z-index: 2; transform: translate(-50%, -60%); pointer-events: none; }
.deck .dc { position: absolute; inset: 0; border-radius: 14px; will-change: transform; }
.deck .dc:nth-child(1) { background: #D8D8DD; }
.deck .dc:nth-child(2) { background: #CDCDD3; }
.deck .dc:nth-child(3) { background: #C3C3CA; }
.deck .dc:nth-child(4) { background: #E3E3E7; }
.para .chip { top: 22%; }
.para-icons { position: absolute; bottom: 7vh; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; }
.para-icons span { width: 26px; height: 26px; border-radius: 50%; background: var(--card); display: grid; place-items: center; }
.para-icons svg { width: 14px; height: 14px; }

/* 6 diagonal deck (horizontal on scroll) */
.diag { height: 100vh; min-height: 640px; position: relative; }
.diag-area { position: absolute; inset: 6vh max(24px, env(safe-area-inset-right, 0px)) 4vh max(24px, env(safe-area-inset-left, 0px)); max-width: var(--wrap); margin: 0 auto; }
.diag .info-card { left: 0; top: 50%; transform: translateY(-50%); width: min(270px, 22%); }
@media (max-width: 900px) { .diag .info-card { top: 0; transform: none; width: 220px; } }
.diag-stick { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.diag-row { position: absolute; left: 0; top: 0; will-change: transform; }
.diag-row .dg { position: absolute; width: clamp(150px, 15vw, 196px); aspect-ratio: 1 / 1.05; border-radius: 16px; }
.info-card { position: absolute; width: 270px; padding: 18px; background: var(--card); border-radius: 16px; z-index: 4; }
.info-card h4 { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
.info-card p { font-size: 11.5px; color: var(--soft); margin-top: 26px; }
.info-card .ring { position: absolute; right: 14px; top: 14px; width: 22px; height: 22px; border-radius: 50%; border: 5px solid var(--ink); }

/* 7 vision tabs */
.vision { padding-block: 100px 90px; }
.vision-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; align-items: center; }
.vision h2 { font-size: clamp(34px, 3.8vw, 54px); margin-top: 20px; letter-spacing: -0.04em; }
.vision .txt { font-size: 15px; line-height: 1.6; color: var(--soft); max-width: 400px; margin-top: 18px; }
.tools { position: relative; height: 200px; margin-top: 40px; max-width: 360px; }
.tools span { position: absolute; width: 34px; height: 34px; display: grid; place-items: center; color: var(--ink); animation: bob 5s ease-in-out infinite; }
.tools svg { width: 24px; height: 24px; }
.tabs { position: relative; }
.tab-row { display: flex; align-items: flex-end; }
.tab-row button { border: 0; cursor: pointer; padding: 10px 18px 12px; font-size: 13px; font-weight: 500; border-radius: 14px 14px 0 0; background: #EAEAEC; color: var(--ink); margin-right: -10px; position: relative; }
.tab-row button[aria-selected="true"] { background: var(--ink); color: #fff; z-index: 2; }
.tab-create { margin-left: auto; align-self: center; padding: 4px 10px; border-radius: 999px; background: var(--card); font-size: 11px; font-weight: 600; display: flex; align-items: center; gap: 6px; }
.tab-create::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.tab-panel { background: var(--ink); border-radius: 0 16px 16px 16px; padding: 14px; }
.tab-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tab-grid .slot { aspect-ratio: 1 / 1.1; min-height: 120px; border-radius: 10px; background: #26262A; }
.tab-grid .ph:nth-child(2) { animation-delay: .05s; } .tab-grid .ph:nth-child(3) { animation-delay: .1s; } .tab-grid .ph:nth-child(4) { animation-delay: .15s; } .tab-grid .ph:nth-child(5) { animation-delay: .2s; } .tab-grid .ph:nth-child(6) { animation-delay: .25s; }
@keyframes popin { from { transform: translateY(14px) scale(.96); opacity: .3; } }

/* 8 avatars */
.ava { position: relative; overflow: hidden; padding-block: 60px; }
.ava-row { display: flex; gap: 18px; width: max-content; animation: slide 40s linear infinite; }
.ava-row.rev { animation-direction: reverse; animation-duration: 46s; }
.ava-row { align-items: center; padding-block: 16px; }
.ava-mini { flex: none; width: 64px; height: 64px; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 18px 30px -20px rgba(17,17,19,.45), 0 0 0 1px rgba(17,17,19,.04); }
.ava-mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 600px) { .ava-mini { width: 52px; height: 52px; border-radius: 13px; } }
.ava-center { text-align: center; padding-block: 90px; }
.ava-center h2 { font-size: clamp(34px, 4.6vw, 64px); margin-top: 18px; }
.ava-center p { font-size: 12.5px; color: var(--soft); margin-top: 10px; }
.ava-center .spark { width: 18px; height: 18px; margin: 0 auto; display: block; }

/* 9 story grid */
.story { padding-block: 70px 60px; }
.story-head { text-align: center; }
.story h2 { font-size: clamp(30px, 3.4vw, 46px); margin-top: 10px; }
.story-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 46px; max-width: 900px; margin-left: auto; margin-right: auto; align-items: start; }
.story-col { display: flex; flex-direction: column; gap: 16px; will-change: transform; }
.st { background: var(--card); border-radius: 14px; padding: 12px; }
.st .ph { border-radius: 10px; }
.st h4 { font-size: 14px; font-weight: 600; letter-spacing: -0.02em; margin-top: 14px; }
.st p { font-size: 11.5px; color: var(--soft); margin-top: 4px; }
.st .more { font-size: 11px; color: var(--soft); margin-top: 10px; display: inline-block; text-decoration: none; }
.st .more:hover { color: var(--ink); }
.st .playv { position: absolute; left: 10px; top: 10px; z-index: 2; display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; background: #fff; padding: 4px 9px; border-radius: 999px; }
.st .playv::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); }
.st.dark { background: var(--ink); color: #fff; min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px; }
.st.dark p { color: #8E8E96; }
.st.dark .pin { width: 28px; height: 28px; border-radius: 50%; background: #fff; color: var(--ink); display: grid; place-items: center; margin-bottom: 18px; }

/* 10 marketplace carousel */
.mkt { padding-block: 70px 40px; }
.mkt-grid { display: grid; grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); gap: 30px; }
.mkt h2 { font-size: clamp(28px, 3vw, 40px); margin-top: 12px; }
.mkt .txt { font-size: 12px; color: var(--soft); margin-top: 12px; max-width: 220px; }
.mkt-arrows { display: flex; gap: 6px; margin-top: 70px; }
.mkt-arrows button { width: 26px; height: 26px; border-radius: 50%; border: 0; background: transparent; cursor: pointer; color: var(--soft); font-size: 14px; }
.mkt-arrows button:hover { background: var(--card); color: var(--ink); }
.mkt-right { position: relative; }
.view-all { position: absolute; right: 0; top: -40px; padding: 6px 16px; border-radius: 999px; background: var(--magenta); color: #fff; font-size: 11px; font-weight: 600; text-decoration: none; }
.mkt-view { overflow: hidden; }
.mkt-track { display: flex; gap: 12px; transition: transform .6s cubic-bezier(.7,0,.2,1); }
.mkt-item { flex: 0 0 calc((100% - 36px) / 4); }
.mkt-item .ph { aspect-ratio: 1; border-radius: 12px; }
.mkt-item span { display: block; font-size: 11.5px; margin-top: 8px; color: var(--soft); }
.mkt-bar { height: 2px; background: var(--line); margin-top: 30px; position: relative; max-width: 260px; }
.mkt-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); width: 33%; transition: left .6s cubic-bezier(.7,0,.2,1); }

/* 11 dock + zoom grid */
.dock-sec { padding-block: 80px 0; display: flex; justify-content: center; }
.dock { display: flex; align-items: flex-end; gap: 10px; padding: 10px 14px; border-radius: 20px; height: 84px; }
.dock button { width: 30px; height: 30px; border-radius: 9px; border: 0; cursor: pointer; transition: width .18s, height .18s; flex: none; display: grid; place-items: center; color: #fff; }
.dock button svg { width: 55%; height: 55%; }
.zoom { height: 260vh; position: relative; margin-top: 40px; }
.zoom-stick { position: sticky; top: 0; height: 100vh; overflow: hidden; display: grid; place-items: center; }
.zgrid { position: relative; width: min(1000px, 94vw); height: min(640px, 82vh); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 18px; }
.zgrid .zt { border-radius: 16px; will-change: transform, opacity; }
.zcenter { position: absolute; left: 50%; top: 50%; width: 22%; height: 66%; transform: translate(-50%,-50%); border-radius: 18px; z-index: 5; overflow: hidden; }
.zcenter .ph { position: absolute; inset: 0; border-radius: inherit; background: #D3D3D8; }
.zcenter .chip { left: 12%; top: 18%; background: rgba(255,255,255,.85); color: var(--coral); }
.zcenter .like { position: absolute; right: 10px; top: 10px; z-index: 3; padding: 3px 9px; border-radius: 999px; background: #fff; font-size: 10px; font-weight: 600; }
.zcenter .who { position: absolute; left: 10px; bottom: 10px; z-index: 3; display: flex; align-items: center; gap: 8px; font-size: 11px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.25); }
.zcenter .who i { width: 22px; height: 22px; border-radius: 7px; background: #fff; display: block; }
.zcenter .who small { display: block; opacity: .85; font-size: 9.5px; }

/* 12 membership */
.mem { padding-block: 60px 60px; }
.mem-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px; align-items: center; }
.mem h2 { font-size: clamp(22px, 2vw, 28px); margin-top: 14px; letter-spacing: -0.025em; }
.mem .txt { font-size: 12px; color: var(--soft); max-width: 300px; margin-top: 8px; }
.prices { position: relative; height: 230px; }
.pr { position: absolute; top: 30px; width: 150px; padding: 14px; border-radius: 12px; background: var(--card); cursor: pointer; border: 0; text-align: left; transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.pr small { font-size: 10.5px; color: var(--soft); display: block; }
.pr strong { display: block; font-size: 38px; font-weight: 600; letter-spacing: -0.04em; line-height: 1.1; margin-top: 6px; }
.pr strong sup { font-size: 13px; font-weight: 500; vertical-align: top; position: relative; top: 6px; margin-right: 2px; }
.pr strong sub { font-size: 11px; font-weight: 500; vertical-align: baseline; }
.pr em { font-style: normal; display: block; font-size: 9.5px; color: var(--grey); margin-top: 14px; }
.pr .pop { position: absolute; right: 10px; top: 10px; background: #fff; color: var(--ink); padding: 2px 8px; border-radius: 999px; font-size: 9.5px; font-weight: 600; }
.pr.sel { background: var(--coral); color: #fff; }
.pr.sel small, .pr.sel em { color: rgba(255,255,255,.85); }
.pr:hover { box-shadow: 0 22px 40px -18px rgba(0,0,0,.35); }

/* 13 lime band */
.lime-wrap { padding-block: 20px 20px; }
.lime { position: relative; overflow: hidden; background: var(--lime); border-radius: 22px; height: 300px; user-select: none; touch-action: pan-y; }
.lime-ghost { position: absolute; left: 6%; top: -30px; font-size: 200px; font-weight: 700; letter-spacing: -0.06em; color: rgba(255,255,255,.35); line-height: 1; pointer-events: none; }
.lime-marq { position: absolute; left: 0; top: 22px; display: flex; width: max-content; gap: 26px; animation: slide 30s linear infinite; font-size: clamp(30px, 3.4vw, 46px); font-weight: 600; letter-spacing: -0.04em; white-space: nowrap; align-items: center; }
.lime-marq .tile { width: .9em; height: .9em; border-radius: .18em; display: inline-block; vertical-align: -0.1em; }
.ball { position: absolute; left: 0; top: 0; width: 46px; height: 46px; border-radius: 50%; background: #fff; display: grid; place-items: center; cursor: grab; will-change: transform; box-shadow: 0 4px 10px -4px rgba(0,0,0,.25); }
.ball:active { cursor: grabbing; }
.ball svg { width: 26px; height: 26px; pointer-events: none; }

/* 14 two cards */
.pair { padding-block: 20px 50px; }
.pair-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.pc { position: relative; border-radius: 18px; overflow: hidden; aspect-ratio: 1 / .8; }
.pc .ph { position: absolute; inset: 0; border-radius: 0; }
.pc .ph::after { place-items: start end; padding: 18px; }
.pc .in { position: absolute; left: 22px; bottom: 22px; right: 22px; z-index: 2; }
.pc .in .mk { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; margin-bottom: 12px; display: block; }
.pc h3 { font-size: clamp(22px, 2.2vw, 30px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.05; }
.pc p { font-size: 11.5px; margin-top: 8px; max-width: 260px; opacity: .85; }
.pc .btn-dark { margin-top: 14px; min-height: 30px; padding: 4px 14px; font-size: 11px; }
.pc .in { left: 30px; bottom: 30px; right: 30px; }
.pc h3 { font-size: clamp(26px, 2.6vw, 38px); }
.pc p { font-size: 13px; max-width: 300px; }
.pc-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; min-height: 38px; padding: 6px 18px; border-radius: 999px; font-size: 12.5px; font-weight: 600; text-decoration: none; transition: transform .25s ease, gap .25s ease; }
.pc-btn:hover { gap: 12px; }
.pc.a { color: #fff; background: radial-gradient(120% 90% at 85% 0%, #FF7A86 0%, #F04B5D 45%, #D93347 100%); }
.pc.a .pc-btn { background: #fff; color: #111113; }
.pc.b { color: #fff; background: #111113; }
.pc.b .pc-btn { background: #F04B5D; color: #fff; }
.pc-chat { position: absolute; top: 30px; right: 30px; width: min(62%, 330px); display: flex; flex-direction: column; gap: 10px; }
.bub { font-size: 12.5px; line-height: 1.4; padding: 12px 14px; border-radius: 16px; background: #fff; color: #111113; box-shadow: 0 12px 30px rgba(120,10,25,.18); max-width: 90%; }
.bub b { display: block; font-size: 10.5px; font-weight: 600; color: #8A8A92; margin-bottom: 3px; }
.bub.in1 { border-bottom-left-radius: 4px; align-self: flex-start; }
.bub.me { align-self: flex-end; background: #111113; color: #fff; border-bottom-right-radius: 4px; }
.bub.me b { color: #F04B5D; }
.bub.typing { display: flex; gap: 4px; padding: 12px 14px; }
.bub.typing i { width: 6px; height: 6px; border-radius: 50%; background: #B5B5BC; animation: tdot 1.2s infinite; }
.bub.typing i:nth-child(2) { animation-delay: .15s; } .bub.typing i:nth-child(3) { animation-delay: .3s; }
@keyframes tdot { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.pc-fan { position: absolute; top: 30px; right: 30px; width: 60%; height: 46%; }
.pc-fan img { position: absolute; right: 0; top: 0; width: 78%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.45); transition: transform .5s cubic-bezier(.2,.7,.2,1); }
.pc-fan img:nth-child(1) { transform: translate(-30%, 4%) rotate(-8deg); }
.pc-fan img:nth-child(2) { transform: translate(-14%, 14%) rotate(-3deg); }
.pc-fan img:nth-child(3) { transform: translate(0, 20%) rotate(3deg); }
.pc.b:hover .pc-fan img:nth-child(1) { transform: translate(-38%, 0) rotate(-11deg); }
.pc.b:hover .pc-fan img:nth-child(3) { transform: translate(4%, 22%) rotate(5deg); }
@media (max-width: 760px) { .pair-grid { grid-template-columns: 1fr; } .pc { aspect-ratio: auto; display: flex; flex-direction: column; } .pc .in { position: relative; left: auto; right: auto; bottom: auto; padding: 0 24px 26px; } .pc-chat { position: relative; top: auto; right: auto; width: auto; margin: 24px 24px 26px; } .pc-fan { position: relative; top: auto; right: auto; width: auto; height: 190px; margin: 26px 24px 30px; } .pc-fan img { width: 80%; } }
@media (prefers-reduced-motion: reduce) { .bub.typing i { animation: none; } }

/* footer */
.ftr { background: #EBEBED; border-radius: 22px 22px 0 0; margin-top: 30px; }
.ftr-in { padding-block: 44px calc(30px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: minmax(0, 1.2fr) repeat(4, minmax(0, .6fr)); gap: 30px; }
.ftr h4 { font-size: 18px; font-weight: 500; letter-spacing: -0.025em; display: flex; align-items: center; gap: 10px; }
.ftr h4 .arw { font-size: 11px; background: var(--card); border-radius: 999px; padding: 2px 8px; }
.ftr .txt { font-size: 11.5px; color: var(--soft); max-width: 300px; margin-top: 10px; }
.socials { display: flex; gap: 8px; margin-top: 30px; }
.socials a { width: 30px; height: 30px; border-radius: 50%; background: var(--card); display: grid; place-items: center; }
.socials svg { width: 14px; height: 14px; }
.fcol > a, .fcol > span { display: block; font-size: 12px; padding: 4px 0; text-decoration: none; }
.fcol a:hover { color: var(--coral); }
.fcol .badge { font-size: 9px; background: var(--coral); color: #fff; padding: 1px 6px; border-radius: 999px; margin-left: 6px; }
.copy { grid-column: 1 / -1; display: flex; justify-content: flex-end; font-size: 11px; color: var(--soft); }
.ct-kvkk { margin: 0; font-size: 12px; line-height: 1.55; color: var(--soft); }
.ct-kvkk a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--tc); text-underline-offset: 2px; }
.ct-info a { color: inherit; text-decoration: none; }
.ct-info a:hover { color: var(--tc); }

/* iletişim formu: botlar için görünmeyen tuzak alan */
.ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* metin sayfaları: politikalar ve 404 */
.legal { max-width: 820px; margin: 0 auto; padding-top: 72px; padding-bottom: 96px; }
.legal h1 { font-size: clamp(36px, 4.6vw, 60px); letter-spacing: -0.04em; line-height: 1.02; margin-top: 14px; }
.legal h1 span { color: var(--tc); }
.legal h2 { font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.025em; margin-top: 48px; }
.legal p, .legal li { font-size: 15.5px; line-height: 1.7; color: var(--soft); }
.legal p { margin-top: 16px; max-width: 42em; }
.legal ul { margin: 18px 0 0; padding-left: 20px; display: grid; gap: 10px; }
.legal li b { color: var(--ink); font-weight: 600; }
.legal a:not(.btn-dark) { color: var(--ink); text-decoration-color: var(--tc); text-underline-offset: 3px; }
.legal .acts { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 32px; }
.legal-info { margin: 20px 0 0; display: grid; gap: 0; max-width: 42em; background: var(--card); border-radius: 18px; padding: 6px 22px; }
.legal-info > div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 12px 0; border-top: 1px solid var(--line); }
.legal-info > div:first-child { border-top: 0; }
.legal-info dt { font-size: 13px; font-weight: 600; color: var(--ink); }
.legal-info dd { margin: 0; font-size: 15px; color: var(--soft); }
@media (max-width: 560px) { .legal-info > div { grid-template-columns: minmax(0, 1fr); gap: 2px; } }
.legal-crumb { font-size: 12.5px; color: var(--soft); }
.legal-crumb a { color: inherit; text-decoration: none; }
.legal-crumb a:hover { color: var(--tc); }
@media (max-width: 900px) { .legal { padding-top: 40px; padding-bottom: 64px; } }


/* travelling cards (shared elements between sections) */
.trav { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 40; pointer-events: none; }
.tv { position: absolute; left: 0; top: 0; width: 360px; height: 396px; border-radius: 26px; overflow: hidden; transform-origin: 0 0; will-change: transform, opacity; opacity: 0; }
.tv.ph::after { font-size: 12px; }
.tv-img { background: #fff; }
.tv-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tv-cap { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 10px; padding: 30px; color: #fff; background: linear-gradient(180deg, rgba(17,17,19,0) 20%, rgba(17,17,19,.88) 62%); opacity: 0; transition: opacity .3s ease; pointer-events: none; z-index: 5; }
.tv-cap b { font-size: 34px; font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; transform: translateY(10px); transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.tv-cap span { font-size: 22px; line-height: 1.35; color: rgba(255,255,255,.85); transform: translateY(10px); transition: transform .35s cubic-bezier(.2,.7,.2,1) .04s; }
.tv.hov .tv-cap { opacity: 1; }
.tv.hov .tv-cap b, .tv.hov .tv-cap span { transform: none; }
.tab-grid .slot { cursor: default; }
.tv.flip { animation: flip .5s cubic-bezier(.2,.7,.2,1); }
@keyframes flip { 40% { filter: brightness(1.08); } }
/* word reveal: blur in, word by word */
.reveal .w { display: inline-block; opacity: 0; filter: blur(8px); transform: translateY(6px); color: #B9B9BF; transition: opacity .6s ease, filter .6s ease, transform .6s ease, color 1s ease; }
.reveal.in .w { opacity: 1; filter: none; transform: none; color: inherit; }
.fu { opacity: 0; transform: translateY(14px); filter: blur(4px); transition: opacity .7s ease, transform .7s ease, filter .7s ease; }
.fu.in { opacity: 1; transform: none; filter: none; }
@media (prefers-reduced-motion: reduce) { .reveal .w, .fu { opacity: 1; filter: none; transform: none; color: inherit; transition: none; } }


/* ---------- agency UI composition cards (designed at 360×396, scaled by transform) ---------- */
.cx { overflow: hidden; color: #111113; font-family: var(--f); }
.cx * { box-sizing: border-box; }
.cx.g1 { background: radial-gradient(120% 90% at 20% 10%, #FFE1E4, transparent 60%), radial-gradient(90% 80% at 90% 90%, #FFD2B3, transparent 60%), #FFF1EE; }
.cx.g2 { background: radial-gradient(110% 90% at 85% 10%, #DCE4FF, transparent 60%), radial-gradient(90% 80% at 10% 90%, #F6E3FF, transparent 60%), #F3F5FF; }
.cx.g3 { background: radial-gradient(110% 90% at 15% 15%, #F4FBC9, transparent 60%), radial-gradient(90% 80% at 90% 90%, #FFE0EA, transparent 60%), #FBFCEF; }
.cx.g4 { background: radial-gradient(110% 90% at 80% 15%, #FBD9FF, transparent 60%), radial-gradient(90% 80% at 10% 90%, #FFE1E4, transparent 60%), #FDF1FF; }
.cx.g5 { background: radial-gradient(110% 90% at 20% 20%, #FFE3C7, transparent 60%), radial-gradient(90% 80% at 90% 85%, #FFF3B8, transparent 60%), #FFF6EC; }
.cx.g6 { background: radial-gradient(110% 90% at 85% 15%, #D3F5EA, transparent 60%), radial-gradient(90% 80% at 10% 90%, #DCE4FF, transparent 60%), #F0FAF7; }
.cx .u { position: absolute; background: #fff; border-radius: 14px; box-shadow: 0 14px 30px -14px rgba(17,17,19,.32); font-size: 11px; line-height: 1.3; }
.cx .u small { color: #6B6B72; font-size: 9.5px; display: block; }
.cx .big { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; display: flex; align-items: baseline; gap: 6px; }
.cx .up { font-size: 11px; color: #1FAF6B; font-weight: 700; }
.cx .pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; font-weight: 700; font-size: 11px; }
.cx .av { width: 26px; height: 26px; border-radius: 50%; flex: none; display: block; }
.cx .ph2 { background: linear-gradient(160deg, #FF9AA4, #FF5562 60%, #E23D7C); position: relative; }
.cx .ph2.b { background: linear-gradient(160deg, #9AB0FF, #2D5BFF); }
.cx .ph2.l { background: linear-gradient(160deg, #F2FF9E, #C9DD22); }
.cx .ph2.o { background: linear-gradient(160deg, #FFC08A, #FF7A1A); }
.cx .ph2.m { background: linear-gradient(160deg, #F2A6FF, #D23CF0); }
.cx .ph2.d { background: linear-gradient(160deg, #3A3A42, #111113); }
.cx .phone { position: absolute; width: 168px; height: 344px; background: #111113; border-radius: 30px; padding: 7px; box-shadow: 0 30px 50px -24px rgba(17,17,19,.55); }
.cx .scr { width: 100%; height: 100%; background: #fff; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; position: relative; }
.cx .bars { display: flex; align-items: flex-end; gap: 4px; height: 38px; margin-top: 8px; }
.cx .bars i { flex: 1; border-radius: 4px 4px 2px 2px; background: #FFD3D7; display: block; }
.cx .bars i:last-child { background: #FF5562; }
.cx .bars.b i { background: #DCE4FF; } .cx .bars.b i:last-child { background: #2D5BFF; }
.cx .fl { animation: cxfl 6s ease-in-out infinite; }
.cx .fl.d2 { animation-delay: -2s; } .cx .fl.d3 { animation-delay: -4s; }
@keyframes cxfl { 50% { translate: 0 -6px; } }
/* instagram */
.cx .igh { display: flex; align-items: center; gap: 8px; padding: 16px 10px 8px; font-size: 10px; font-weight: 700; }
.cx .ring { width: 30px; height: 30px; border-radius: 50%; padding: 2px; background: conic-gradient(#FF7A1A, #FF5562, #D23CF0, #FF7A1A); flex: none; }
.cx .ring i { display: block; width: 100%; height: 100%; border-radius: 50%; border: 2px solid #fff; background: #FF5562; }
.cx .igs { display: flex; justify-content: space-around; font-size: 9px; color: #6B6B72; padding: 0 6px 8px; text-align: center; }
.cx .igs b { display: block; font-size: 11px; color: #111113; }
.cx .igg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; }
.cx .igg i { aspect-ratio: 1; display: block; }
/* browser */
.cx .br { position: absolute; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 50px -24px rgba(17,17,19,.4); }
.cx .brb { display: flex; gap: 5px; padding: 9px 11px; background: #F1F1F3; align-items: center; }
.cx .brb i { width: 8px; height: 8px; border-radius: 50%; background: #D5D5DA; display: block; }
.cx .brb i:first-child { background: #FF5562; }
.cx .brb span { margin-left: 8px; flex: 1; height: 14px; border-radius: 999px; background: #fff; font-size: 8.5px; color: #6B6B72; display: flex; align-items: center; padding: 0 8px; }
.cx .site { padding: 14px; display: grid; grid-template-columns: 1.1fr .9fr; gap: 10px; align-items: center; }
.cx .site h4 { margin: 0; font-size: 15px; letter-spacing: -0.03em; line-height: 1.05; }
.cx .site p { margin: 6px 0 8px; font-size: 8.5px; color: #6B6B72; }
.cx .btn { display: inline-block; background: #111113; color: #fff; font-size: 8.5px; padding: 5px 9px; border-radius: 999px; }
.cx .site .ph2 { aspect-ratio: 1; border-radius: 10px; }
.cx .tiles { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cx .tiles i { height: 34px; border-radius: 8px; background: #F3F4FA; display: block; }
.cx .score { width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(#1FAF6B 0 94%, #E7F6EE 94% 100%); display: grid; place-items: center; flex: none; }
.cx .score b { width: 26px; height: 26px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 10px; }
.cx .mob { position: absolute; width: 74px; height: 146px; background: #111113; border-radius: 16px; padding: 4px; box-shadow: 0 20px 34px -16px rgba(17,17,19,.5); }
.cx .mob .scr { border-radius: 12px; padding: 8px 6px; gap: 5px; }
.cx .mob .scr i { display: block; border-radius: 4px; background: #F1F1F3; height: 8px; }
.cx .mob .scr i.h { height: 36px; background: linear-gradient(160deg, #9AB0FF, #2D5BFF); }
/* identity */
.cx .board { position: absolute; left: 8%; top: 10%; width: 84%; height: 62%; background: #fff; border-radius: 16px; padding: 14px; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1.2fr 1fr; gap: 10px; box-shadow: 0 30px 50px -24px rgba(17,17,19,.35); }
.cx .logo { grid-row: 1 / 3; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 46px; letter-spacing: -0.06em; }
.cx .logo b { color: #111113; }
.cx .sw { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
.cx .sw i { border-radius: 8px; display: flex; align-items: flex-end; padding: 4px; font-style: normal; font-size: 7px; font-weight: 600; }
.cx .typ { border-radius: 12px; background: #F6F6F7; padding: 10px; }
.cx .typ .aa { font-size: 30px; font-weight: 700; letter-spacing: -0.05em; line-height: 1; }
.cx .ok { width: 16px; height: 16px; border-radius: 50%; background: #1FAF6B; display: grid; place-items: center; color: #fff; font-style: normal; font-size: 10px; flex: none; }
/* reels */
.cx .reel { flex: 1; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px; color: #fff; }
.cx .play { position: absolute; left: 50%; top: 42%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: rgba(255,255,255,.92); display: grid; place-items: center; }
.cx .play::after { content: ""; border-left: 13px solid #111113; border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 4px; }
.cx .reel b { font-size: 12px; }
.cx .reel small { color: rgba(255,255,255,.85); font-size: 9px; }
.cx .side { position: absolute; right: 8px; bottom: 60px; display: flex; flex-direction: column; gap: 10px; align-items: center; font-size: 8px; color: #fff; }
.cx .side i { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,.25); display: block; }
.cx .tl { position: absolute; left: 6%; bottom: 7%; width: 54%; padding: 10px; }
.cx .tl .trk { display: flex; gap: 3px; margin-top: 7px; }
.cx .tl .trk i { height: 18px; border-radius: 4px; display: block; }
/* ads */
.cx .ad { position: absolute; left: 8%; top: 12%; width: 54%; padding: 10px; }
.cx .ad .ph2 { height: 120px; border-radius: 10px; margin: 8px 0; }
.cx .ad .cta { display: flex; justify-content: space-between; align-items: center; font-size: 9px; }
.cx .ad .cta span { background: #2D5BFF; color: #fff; padding: 4px 8px; border-radius: 6px; font-weight: 600; }
.cx .slider { height: 6px; border-radius: 999px; background: #EEE; margin-top: 8px; position: relative; }
.cx .slider i { position: absolute; left: 0; top: 0; bottom: 0; width: 64%; border-radius: inherit; background: #FF5562; display: block; }
.cx .slider i::after { content: ""; position: absolute; right: -6px; top: -4px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.25); }
/* dashboard */
.cx .dash { position: absolute; left: 6%; top: 11%; width: 88%; height: 60%; background: #fff; border-radius: 14px; overflow: hidden; display: grid; grid-template-columns: 54px 1fr; box-shadow: 0 30px 50px -24px rgba(17,17,19,.4); }
.cx .nav { background: #111113; padding: 12px 10px; display: flex; flex-direction: column; gap: 10px; }
.cx .nav i { height: 8px; border-radius: 4px; background: #3A3A42; display: block; }
.cx .nav i:first-child { width: 22px; height: 22px; border-radius: 7px; background: #FF5562; margin-bottom: 6px; }
.cx .nav i.on { background: #FF5562; }
.cx .main { padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cx .kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cx .kpis div { background: #F6F6F8; border-radius: 8px; padding: 6px 7px; font-size: 8px; color: #6B6B72; }
.cx .kpis b { display: block; color: #111113; font-size: 12px; letter-spacing: -0.02em; }
.cx .chart { flex: 1; border-radius: 8px; background: #F6F6F8; position: relative; overflow: hidden; }
.cx .chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* calendar */
.cx .cal { position: absolute; left: 7%; top: 11%; width: 86%; padding: 12px; }
.cx .cal .hd { display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 12px; margin-bottom: 8px; }
.cx .cal .grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.cx .cal .grid span { height: 34px; border-radius: 6px; background: #F6F6F8; font-size: 7.5px; color: #9A9AA2; padding: 3px; position: relative; }
.cx .cal .grid span i { position: absolute; left: 3px; right: 3px; bottom: 3px; height: 9px; border-radius: 3px; display: block; }
.cx .cal .wk { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; font-size: 7.5px; color: #6B6B72; margin-bottom: 4px; text-align: center; }
.cx .avs { display: flex; }
.cx .avs i { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; margin-left: -7px; display: block; }
.cx .avs i:first-child { margin-left: 0; }
/* logo design */
.cx .cons { position: absolute; left: 10%; top: 9%; width: 62%; aspect-ratio: 1; background: #fff; border-radius: 16px; box-shadow: 0 30px 50px -24px rgba(17,17,19,.35); overflow: hidden; }
.cx .cons .gridbg { position: absolute; inset: 0; background-image: linear-gradient(#EEF0F4 1px, transparent 1px), linear-gradient(90deg, #EEF0F4 1px, transparent 1px); background-size: 18px 18px; }
.cx .cons .c { position: absolute; border: 1.5px dashed #2D5BFF; border-radius: 50%; }
.cx .cons .mark { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-weight: 700; font-size: 92px; letter-spacing: -0.07em; line-height: 1; color: #FF5562; }
.cx .cons .mark b { color: #111113; }
.cx .vers { position: absolute; right: 7%; top: 14%; display: flex; flex-direction: column; gap: 8px; }
.cx .vers span { width: 64px; height: 64px; border-radius: 14px; display: grid; place-items: center; font-weight: 700; font-size: 26px; letter-spacing: -0.06em; box-shadow: 0 10px 20px -10px rgba(17,17,19,.3); }
/* report */
.cx .rep { position: absolute; left: 8%; top: 11%; width: 60%; padding: 12px; }
.cx .donut { width: 92px; height: 92px; border-radius: 50%; margin: 10px auto 6px; background: conic-gradient(#FF5562 0 46%, #2D5BFF 46% 74%, #E4F65A 74% 90%, #D23CF0 90% 100%); display: grid; place-items: center; }
.cx .donut b { width: 58px; height: 58px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 12px; text-align: center; line-height: 1.1; }
.cx .leg { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 8px; font-size: 8.5px; color: #6B6B72; }
.cx .leg span::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 2px; background: var(--c); margin-right: 4px; }
@media (prefers-reduced-motion: reduce) { .cx .fl { animation: none; } }

.gate-sub { margin-top: 14px; max-width: 520px; font-size: 15px; line-height: 1.5; color: var(--soft); }
.tab-note { margin-top: 10px; font-size: 11px; color: var(--soft); text-align: right; }
/* mobile static cards */
.mob .trav { display: none; }
.mob .fan .tv, .mob .cascade .tv, .mob .tab-grid .tv { will-change: auto; }
.mob .fan, .mob .cascade { overflow: visible; }
.mob .fan .tv, .mob .cascade .tv { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.mob .fan.floaty .tv { animation: mflt 4.2s ease-in-out var(--fd, 0s) infinite; }
@keyframes mflt { 50% { translate: 0 -7px; } }
.mob .fan-hint { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 11px; font-weight: 600; color: var(--soft); background: #fff; border-radius: 999px; padding: 5px 11px; box-shadow: 0 6px 16px -8px rgba(17,17,19,.3); z-index: 30; pointer-events: none; animation: hintIn .6s ease 1.6s both; }
@keyframes hintIn { from { opacity: 0; transform: translate(-50%, 6px); } }
@media (prefers-reduced-motion: reduce) { .mob .fan.floaty .tv { animation: none; } }
.mob .tab-grid .slot { position: relative; overflow: hidden; background: transparent; }
.mob .tab-grid .slot .tv { border-radius: 26px; }
.mob .tv-cap { padding: 26px; } .mob .tv-cap b { font-size: 40px; } .mob .tv-cap span { font-size: 26px; }
.mob .para { height: 130vh; }
.mob .para-stick { justify-content: center; padding-bottom: 0; }

/* responsive */
@media (max-width: 900px) {
  .hdr nav { display: none; }
  .show-grid, .vision-grid, .mkt-grid, .mem-grid, .pair-grid { grid-template-columns: minmax(0, 1fr); }
  .cascade { margin-top: 20px; height: 330px; }
  .gate-head { flex-wrap: wrap; }
  .mkt-item { flex-basis: calc((100% - 12px) / 2); }
  .mkt-arrows { margin-top: 20px; }
  .zgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 10px; }
  .zcenter { width: 36%; height: 50%; }
  .prices { height: 220px; max-width: 420px; }
  .ftr-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ftr-in > div:first-child { grid-column: 1 / -1; }
  .story-cols { grid-template-columns: minmax(0, 1fr); }
  .info-card { width: 190px; }
}
@media (max-width: 560px) {
  .pr { width: 120px; padding: 12px; }
  .pr strong { font-size: 30px; }
  .lime { height: 280px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .chip, .tools span, .ava-row, .logos-track, .lime-marq { animation: none; }
  .slides, .mkt-track, .pr { transition: none; }
}