:root {
  /* palette */
  --bg: #191919;
  --surface: #1f1f1f;
  --surface2: #2a2a2a;
  --line: #333333;
  --ink: #f2f2f2;
  --muted: #9d9c9d;
  --accent: #f4182c;
  --accent-d: #cf1022;
  --plum: #92152e;
  --cream: #e5c686;
  --gold: #b99d61;
  --light: #f2f2f2;
  --light-ink: #191919;
  --light-muted: #5d5d5d;
  /* type */
  --head: 'Raleway', 'Inter', system-ui, sans-serif;
  --body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --px: 'Raleway', 'Inter', sans-serif;
  --gut: clamp(16px, 4vw, 48px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.65 var(--body); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--accent); }
h1, h2, h3 { font-family: var(--head); font-weight: 800; line-height: 1.1; margin: 0; }
::selection { background: var(--accent); color: #fff; }

.wrap { max-width: 1240px; margin: 0 auto; padding-inline: var(--gut); }
.wrap--narrow { max-width: 860px; }
.red { color: var(--accent); }
.kicker, .eyebrow { font: 800 13px/1.2 var(--head); text-transform: uppercase; letter-spacing: .16em; color: var(--accent); margin: 0 0 16px; }
.lead { font-size: 18px; color: var(--muted); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font: 700 15px/1 var(--head); text-decoration: none;
  color: #fff; background: var(--accent); border: 2px solid var(--accent); border-radius: 10px;
  padding: 14px 24px; white-space: nowrap; cursor: pointer; transition: background .2s, border-color .2s, transform .2s, box-shadow .2s;
}
.btn:hover { background: var(--accent-d); border-color: var(--accent-d); transform: translateY(-2px); box-shadow: 0 10px 24px rgba(244, 24, 44, .28); }
.btn:active { transform: none; box-shadow: none; }
.btn:focus-visible, .tile:focus-visible, .faq summary:focus-visible, .chips input:focus-visible + span { outline: 2px solid var(--cream); outline-offset: 3px; }
.btn--outline { background: transparent; border-color: rgba(255,255,255,.7); }
.btn--outline:hover { background: #fff; border-color: #fff; color: var(--light-ink); box-shadow: none; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); box-shadow: none; }
.btn--ghost:hover { background: var(--surface2); border-color: var(--line); box-shadow: none; transform: none; }
.btn--sm { padding: 12px 18px; font-size: 12px; }
.btn--wide { width: 100%; }

/* ---------- header ---------- */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 12px var(--gut); background: rgba(25, 25, 25, .92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav__logo, .brand-link { text-decoration: none; }
.brand { display: inline-block; font: 900 26px/1 var(--head); font-feature-settings: "calt" 0, "liga" 0, "salt" 0; font-variant: normal; letter-spacing: .14em; color: var(--ink); white-space: nowrap; }
.brand__x { display: inline-block; color: var(--accent); font-size: 1.32em; line-height: 1; letter-spacing: 0; vertical-align: -.09em; margin: -.2em .106em -.2em .02em; transform-origin: 50% 49.7%; }
.nav__logo:hover .brand__x { transform: rotate(90deg); transition: transform .3s; }
.footer__brand .brand { font-size: 30px; margin-bottom: 16px; }
.nav__links { display: flex; align-items: center; gap: 28px; }
.nav__links > a:not(.btn), .mega__btn { color: var(--ink); text-decoration: none; font: 700 14px var(--head); background: none; border: 0; cursor: pointer; padding: 8px 0; transition: color .15s; }
.nav__links > a:not(.btn):hover, .mega__btn:hover { color: var(--accent); }
.nav__burger { display: none; }

.mega { position: relative; }
.mega__panel {
  position: absolute; top: calc(100% + 14px); left: -24px; display: grid; grid-template-columns: repeat(3, 190px); gap: 24px;
  padding: 24px; background: var(--surface); border: 1px solid var(--line); border-top: 3px solid var(--accent); border-radius: 0 0 8px 8px;
  box-shadow: 0 24px 48px rgba(0,0,0,.45); opacity: 0; visibility: hidden; transform: translateY(8px); transition: .2s;
}
.mega::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.mega:hover .mega__panel, .mega:focus-within .mega__panel, .mega.is-open .mega__panel { opacity: 1; visibility: visible; transform: none; }
.mega__h { font: 800 11px var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; }
.mega__panel a { display: block; color: var(--ink); text-decoration: none; font-size: 14px; padding: 6px 0; }
.mega__panel a:hover { color: var(--accent); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: min(92vh, 860px); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; }
.hero__bg { position: absolute; inset: 0; z-index: -1; }
.hero__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(25,25,25,.95) 0%, rgba(25,25,25,.75) 45%, rgba(25,25,25,.35) 100%), linear-gradient(transparent 55%, var(--bg)); }
.slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1.2s ease, transform 7s linear; }
.slide.is-on { opacity: 1; transform: scale(1); }
.hero__inner { width: 100%; padding-top: 120px; }
.hero h1 { font-size: clamp(48px, 8vw, 104px); font-weight: 900; letter-spacing: -.02em; max-width: 12ch; }
.hero__lead { font-size: clamp(16px, 1.6vw, 19px); color: #d6d6d6; max-width: 56ch; margin: 24px 0 36px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.stats { list-style: none; width: 100%; margin: 64px auto 0; padding-block: 0 48px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; }
.stats li { padding: 22px 24px; background: rgba(31,31,31,.8); border-top: 3px solid var(--accent); backdrop-filter: blur(6px); }
.stats b { display: block; font: 900 clamp(26px, 3vw, 38px)/1 var(--head); color: #fff; margin-bottom: 8px; }
.stats span { font-size: 14px; color: var(--muted); }

/* ---------- tools strip ---------- */
.strip { border-block: 1px solid var(--line); overflow: hidden; background: var(--surface); }
.strip__track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.strip span { font: 800 18px var(--head); text-transform: uppercase; letter-spacing: .12em; color: #6a6a6a; padding: 26px 40px; white-space: nowrap; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- spotlights ---------- */
.spot { display: grid; grid-template-columns: 1fr 1fr; min-height: 340px; }
.spot--flip .spot__media { order: 2; }
.spot__media { position: relative; overflow: hidden; background: #111; }
.spot__media img { width: 100%; height: 116%; top: -8%; object-fit: cover; position: absolute; left: 0; transform: translateY(var(--py, 0px)) scale(var(--sc, 1)); transition: transform 1.2s ease; will-change: transform; }
.spot:hover .spot__media img { --sc: 1.04; }
.spot__text { padding: clamp(28px, 4vw, 52px) clamp(24px, 6vw, 80px); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.spot:nth-of-type(even) .spot__text { background: var(--surface); }
.spot h2 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 10px; }
.spot p:not(.kicker) { color: var(--muted); font-size: 16px; margin: 0 0 20px; max-width: 40ch; }

.ticks { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 10px; }
.ticks li { padding-left: 30px; position: relative; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .45em; width: 16px; height: 9px; border-left: 3px solid var(--accent); border-bottom: 3px solid var(--accent); transform: rotate(-45deg); }

/* ---------- blocks ---------- */
.block { padding-block: clamp(80px, 10vw, 128px); }
.light { background: var(--light); color: var(--light-ink); }
.light p { color: var(--light-muted); }
.head { margin-bottom: 48px; }
.head h2, .block h2 { font-size: clamp(32px, 4.6vw, 54px); }
.head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }

.svc { background: #fff; padding: 32px 28px; border-radius: 6px; border-bottom: 3px solid transparent; transition: transform .25s, border-color .25s, box-shadow .25s; }
.svc:hover { transform: translateY(-6px); border-color: var(--accent); box-shadow: 0 18px 40px rgba(0,0,0,.08); }
.svc__no { font: 900 15px var(--head); color: var(--accent); }
.svc h3 { font-size: 22px; margin: 14px 0 10px; }
.svc p { margin: 0; font-size: 15px; }

.why { padding: 8px 0; }
.why__ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; background: var(--light-ink); color: var(--accent); margin-bottom: 18px; }
.why h3 { font-size: 22px; margin-bottom: 8px; }
.why p { margin: 0; font-size: 15px; }

.model { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 36px 30px 8px; transition: border-color .2s, transform .2s; }
.model:hover { border-color: var(--accent); transform: translateY(-4px); }
.model--hl { border-color: var(--accent); }
.model__tag { position: absolute; top: -13px; left: 30px; font: 800 11px var(--head); letter-spacing: .12em; text-transform: uppercase; background: var(--accent); color: #fff; padding: 6px 10px; border-radius: 3px; }
.model h3 { font-size: 26px; margin-bottom: 12px; }
.model p { color: var(--muted); font-size: 15px; margin: 0 0 22px; }

.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; counter-reset: s; }
.steps li { border-top: 3px solid var(--light-ink); padding-top: 22px; }
.steps li:hover { border-color: var(--accent); }
.steps span { font: 900 40px/1 var(--head); color: var(--accent); }
.steps h3 { font-size: 19px; margin: 12px 0 8px; }
.steps p { margin: 0; font-size: 14px; }

/* ---------- portfolio ---------- */
.filters { display: flex; gap: 6px; background: var(--surface); padding: 5px; border-radius: 6px; border: 1px solid var(--line); }
.filters button { font: 800 12px var(--head); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); background: none; border: 0; padding: 10px 16px; border-radius: 4px; cursor: pointer; }
.filters button.is-on { background: var(--accent); color: #fff; }
.work { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 290px; grid-auto-flow: dense; gap: 14px; }
.tile { all: unset; box-sizing: border-box; cursor: pointer; position: relative; overflow: hidden; border-radius: 6px; background: var(--surface); }
.tile[hidden] { display: none; }
.tile--wide { grid-column: span 2; }
.tile--tall { grid-row: span 2; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 50%, rgba(10,10,10,.9)); opacity: .75; transition: opacity .3s; }
.tile__info { position: absolute; left: 22px; right: 22px; bottom: 20px; z-index: 1; transform: translateY(8px); transition: transform .3s; }
.tile__info b { display: block; font: 800 22px/1.15 var(--head); color: #fff; }
.tile__info span { font-size: 13px; color: var(--cream); }
.tile:hover img { transform: scale(1.06); }
.tile:hover::after { opacity: 1; }
.tile:hover .tile__info { transform: none; }

/* ---------- tracking promo ---------- */
.track-promo { background: radial-gradient(ellipse at 80% 50%, rgba(244, 24, 44,.16), transparent 60%), var(--bg); border-top: 1px solid var(--line); }
.track-promo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 6vw, 80px); align-items: center; }
.track-promo h2 { margin-bottom: 18px; }
.track-promo .lead { margin: 0 0 24px; }
.mock { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 28px; box-shadow: 0 30px 60px rgba(0,0,0,.5); transform: rotate(-1.5deg); }
.mock__head { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.mock__code { font: 800 12px var(--head); letter-spacing: .1em; color: var(--accent); border: 1px solid var(--line); padding: 4px 8px; border-radius: 4px; }
.mock__label { margin: 22px 0 2px; font-size: 13px; color: var(--muted); }
.mock__title { margin: 0; font: 900 32px var(--head); }
.mock__bar { display: flex; gap: 5px; margin-top: 20px; }
.mock__bar i { flex: 1; height: 8px; border-radius: 9px; background: var(--surface2); }
.mock__bar .d { background: var(--accent); }
.mock__bar .a { background: repeating-linear-gradient(-45deg, var(--accent) 0 7px, #ff6d8b 7px 14px); background-size: 20px 20px; animation: stripes .8s linear infinite; }
@keyframes stripes { to { background-position: 20px 0; } }
.mock__meta { display: flex; justify-content: space-between; margin-top: 10px; font-size: 13px; color: var(--muted); }
.mock__meta b { color: var(--ink); }
.mock__wip { display: flex; gap: 14px; align-items: center; margin-top: 22px; padding: 12px; background: var(--bg); border-radius: 8px; border-left: 3px solid var(--accent); }
.mock__wip img { width: 88px; height: 66px; object-fit: cover; border-radius: 6px; background: var(--surface2); }
.mock__wip p { margin: 0; font-size: 14px; color: var(--muted); }

/* ---------- faq ---------- */
.faq { border-bottom: 1px solid var(--line); }
.faq:first-of-type { border-top: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 24px 48px 24px 0; font: 700 19px/1.35 var(--head); position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font: 400 30px var(--body); color: var(--accent); transition: transform .2s; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { margin: 0; padding: 0 0 24px; color: var(--muted); max-width: 70ch; }

/* ---------- contact ---------- */
.contact { background: linear-gradient(135deg, #2a0a12, var(--bg) 55%); border-top: 3px solid var(--accent); }
.contact__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(36px, 6vw, 80px); align-items: start; }
.contact h2 { font-size: clamp(30px, 4vw, 46px); margin-bottom: 18px; }
.contact__mail { font-size: 18px; margin-top: 28px; }
.form { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: clamp(22px, 4vw, 36px); }
.form__steps { list-style: none; padding: 0; margin: 0 0 28px; display: flex; gap: 8px; counter-reset: fs; }
.form__steps li { flex: 1; font: 800 11px var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); padding-top: 10px; border-top: 3px solid var(--surface2); counter-increment: fs; transition: .2s; }
.form__steps li::before { content: counter(fs) ". "; }
.form__steps li.is-on, .form__steps li.is-done { color: var(--ink); border-color: var(--accent); }
.form__page { border: 0; padding: 0; margin: 0; display: none; }
.form__page.is-on { display: block; animation: pageIn .3s ease; }
@keyframes pageIn { from { opacity: 0; transform: translateX(16px); } }
.form legend { font: 800 22px var(--head); margin-bottom: 18px; padding: 0; }
.chips { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chips label { position: relative; cursor: pointer; }
.chips input { position: absolute; opacity: 0; }
.chips span { display: block; padding: 16px; border: 1px solid var(--line); border-radius: 6px; font-weight: 600; font-size: 15px; transition: .15s; }
.chips label:hover span { border-color: #555; }
.chips input:checked + span { border-color: var(--accent); background: rgba(244, 24, 44,.1); box-shadow: inset 0 0 0 1px var(--accent); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form label:not(.chips label) { display: block; font-size: 14px; font-weight: 500; color: var(--muted); margin-bottom: 16px; }
.form input:not([type=radio]):not([type=checkbox]), .form textarea {
  display: block; width: 100%; margin-top: 8px; padding: 13px 14px; font: 16px var(--body); color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 6px; outline: none; transition: border-color .15s, box-shadow .15s;
}
.form input:focus, .form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(244, 24, 44,.18); }
.form .is-bad { border-color: var(--accent); }
.hp { position: absolute; left: -9999px; }
.form__nav { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.form__status { font-size: 15px; min-height: 1.5em; margin: 16px 0 0; text-align: right; }
.form__status.ok { color: #7ee2a0; } .form__status.err { color: #ff7d95; }

/* ---------- footer ---------- */
.footer { background: #121212; border-top: 1px solid var(--line); padding-top: 72px; color: var(--muted); font-size: 14px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; }

.footer__brand p { margin: 0 0 8px; max-width: 30ch; }
.footer__h { font: 800 12px var(--head); text-transform: uppercase; letter-spacing: .14em; color: var(--ink); margin: 0 0 14px; }
.footer__grid a { display: block; color: var(--muted); text-decoration: none; padding: 4px 0; }
.footer__grid a:hover { color: var(--accent); }
.footer__bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 56px; padding-block: 24px; font-size: 13px; }

/* ---------- lightbox ---------- */
.lightbox { border: 0; padding: 0; background: var(--surface); color: var(--ink); max-width: min(1100px, 94vw); border-radius: 10px; overflow: hidden; }
.lightbox::backdrop { background: rgba(8, 8, 8, .9); }
.lightbox img { max-height: 76vh; width: auto; margin: 0 auto; }
.lightbox__close { position: absolute; top: 12px; right: 12px; z-index: 2; font-size: 16px; background: rgba(0,0,0,.6); color: #fff; border: 0; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
.lightbox__bar b { display: block; font: 800 20px var(--head); text-align: center; }
.lightbox__bar span { display: block; font-size: 13px; color: var(--muted); text-align: center; }
.lightbox__nav { font-size: 18px; background: var(--surface2); color: var(--ink); border: 1px solid var(--line); width: 44px; height: 44px; border-radius: 50%; cursor: pointer; }


/* ---------- alt sayfalar (hizmet + proje) ---------- */
.mega__panel--list { grid-template-columns: repeat(2, 210px); }
.spot__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.link-more { color: var(--ink); font: 700 15px var(--head); text-decoration: none; border-bottom: 2px solid var(--accent); padding-bottom: 3px; transition: color .15s; }
.link-more:hover { color: var(--accent); }
.light .link-more { color: var(--light-ink); }

.phero { padding: clamp(40px, 7vw, 88px) 0 clamp(48px, 7vw, 88px); background: radial-gradient(ellipse at 85% 30%, rgba(244, 24, 44,.14), transparent 55%), var(--bg); border-bottom: 1px solid var(--line); }
.phero__grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.phero h1 { font-size: clamp(36px, 5.4vw, 66px); font-weight: 900; letter-spacing: -.015em; margin-bottom: 20px; }
.phero .lead { max-width: 58ch; margin: 0 0 32px; }
.phero__img { border-radius: 8px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--surface); box-shadow: 0 30px 60px rgba(0,0,0,.45); }
.phero__img img { width: 100%; height: 100%; object-fit: cover; }
.phero--project { padding-bottom: 40px; border-bottom: 0; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 26px; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--ink); }

.allwork { text-align: center; margin-top: 40px; }
.filters--wide { flex-wrap: wrap; margin-top: 28px; display: inline-flex; }
.filters small { opacity: .6; margin-left: 4px; font-size: 11px; }
.block--top0 { padding-top: 24px; }
.work--grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); grid-auto-rows: 280px; }
.work--even { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); grid-auto-rows: 300px; }
.steps--4 { grid-template-columns: repeat(4, 1fr); }
.block--tight { padding-block: clamp(56px, 7vw, 88px); }

.others { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.other { position: relative; display: block; border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--surface); text-decoration: none; }
.other img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; opacity: .55; }
.other span { position: absolute; left: 18px; bottom: 16px; font: 800 18px var(--head); color: #fff; }
.other:hover img { transform: scale(1.05); opacity: .8; }

.cta-band { background: var(--accent); color: #fff; padding-block: clamp(48px, 6vw, 72px); }
.cta-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.cta-band h2 { font-size: clamp(26px, 3.4vw, 40px); max-width: 24ch; }
.cta-band p { margin: 10px 0 0; color: rgba(255,255,255,.85); }
.btn--light { background: #fff; border-color: #fff; color: var(--accent); }
.btn--light:hover { background: var(--light-ink); border-color: var(--light-ink); color: #fff; box-shadow: none; }

.pmeta { display: flex; flex-wrap: wrap; gap: 12px 48px; margin: 8px 0 0; padding-top: 24px; border-top: 1px solid var(--line); }
.pmeta dt { font: 800 11px var(--head); text-transform: uppercase; letter-spacing: .14em; color: var(--gold); margin-bottom: 4px; }
.pmeta dd { margin: 0; font-size: 15px; }
.pmeta a { color: var(--ink); }
.pmeta a:hover { color: var(--accent); }

.gal { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.gal__item { all: unset; box-sizing: border-box; cursor: zoom-in; border-radius: 6px; overflow: hidden; background: var(--surface); aspect-ratio: 16 / 10; }
.gal__item--main { grid-column: 1 / -1; aspect-ratio: auto; max-height: 82vh; display: grid; place-items: center; background: #111; }
.gal__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.gal__item--main img { object-fit: contain; max-height: 82vh; }
.gal__item:hover img { transform: scale(1.03); }
.gal__item--video { cursor: default; aspect-ratio: 16 / 9; background: #000; }
.gal__item--video video { width: 100%; height: 100%; object-fit: contain; display: block; }
.gal__item:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.prose h2 { font-size: clamp(26px, 3vw, 34px); margin-bottom: 16px; }
.prose p { color: var(--muted); font-size: 17px; }

.pnav { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-bottom: clamp(56px, 7vw, 88px); }
.pnav__a { display: flex; align-items: center; gap: 16px; padding: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; text-decoration: none; color: var(--ink); transition: border-color .2s; }
.pnav__a:hover { border-color: var(--accent); }
.pnav__a--next { justify-content: flex-end; text-align: right; }
.pnav__a img { width: 96px; height: 64px; object-fit: cover; border-radius: 4px; }
.pnav__a span { font: 800 18px var(--head); }
.pnav__a small { display: block; font: 600 12px var(--body); color: var(--muted); margin-bottom: 2px; }

@media (max-width: 1080px) {
  .phero__grid { grid-template-columns: 1fr; }
  .steps--4 { grid-template-columns: 1fr 1fr; }
  .others { grid-template-columns: 1fr 1fr; }
  .mega__panel--list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .gal, .pnav, .others, .steps--4 { grid-template-columns: 1fr; }
  .pnav__a img { width: 64px; height: 48px; }
  .work--even { grid-auto-rows: 240px; }
}

/* ---------- offer / standards / blog ---------- */
.offer { background: linear-gradient(120deg, #2a0a12, #191919 60%); border-block: 1px solid var(--line); padding-block: clamp(48px, 6vw, 72px); }
.offer__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.offer h2 { font-size: clamp(26px, 3.2vw, 40px); margin-bottom: 12px; }
.offer p:not(.kicker) { color: var(--muted); max-width: 60ch; margin: 0; }
.offer__cta { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.std { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.std > div { background: var(--bg); padding: 28px; }
.std h3 { font-size: 19px; margin-bottom: 8px; }
.std h3::before { content: ""; display: block; width: 28px; height: 3px; background: var(--accent); margin-bottom: 16px; }
.std p { color: var(--muted); margin: 0; font-size: 15px; }
.posts { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 24px; }
.post { display: flex; flex-direction: column; gap: 8px; text-decoration: none; color: inherit; }
.post__img { aspect-ratio: 16 / 9; border-radius: 6px; overflow: hidden; background: var(--surface); margin-bottom: 8px; }
.post__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.post:hover .post__img img { transform: scale(1.05); }
.post__meta { font: 700 12px var(--head); text-transform: uppercase; letter-spacing: .1em; color: var(--accent); }
.post b { font: 800 21px/1.25 var(--head); }
.post:hover b { color: var(--accent); }
.post__lead { font-size: 14px; color: var(--muted); }
.light .post__lead { color: var(--light-muted); }
.article__h1 { font-size: clamp(32px, 4.4vw, 52px) !important; }
.article__cover { width: 100%; border-radius: 8px; margin: 8px 0 40px; aspect-ratio: 16 / 9; object-fit: cover; }
.article { padding-bottom: 24px; }
.article h2 { font-size: clamp(22px, 2.4vw, 28px); margin: 40px 0 12px; }
.article h3 { font-size: 19px; margin: 24px 0 8px; }
.article ul { color: var(--muted); padding-left: 20px; }
.article li { margin-bottom: 6px; }
.article a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
.brief__sec { border-top: 1px solid var(--line); padding: 24px 0; }
.brief__sec h2 { font-size: 22px; display: flex; gap: 14px; align-items: baseline; margin-bottom: 10px; }
.brief__sec h2 span { color: var(--accent); font-size: 15px; }
.brief__sec ul { margin: 0; padding-left: 0; list-style: none; color: var(--muted); }
.brief__sec li { padding: 6px 0 6px 28px; position: relative; }
.brief__sec li::before { content: ""; position: absolute; left: 0; top: 11px; width: 14px; height: 14px; border: 2px solid var(--line); border-radius: 3px; }
@media (max-width: 1080px) { .std { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .std { grid-template-columns: 1fr; } }

.spot__media--contain { background: radial-gradient(circle at 50% 45%, #2a2a2a, #111 70%); }
.spot__media--contain img { object-fit: contain; padding: 6%; }
.about { display: grid; grid-template-columns: 340px 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.about__card { background: radial-gradient(ellipse at 30% 20%, rgba(244, 24, 44,.25), transparent 60%), var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 40px 32px; text-align: center; }
.about__mono { width: 140px; height: 140px; margin: 0 auto 22px; border-radius: 50%; display: grid; place-items: center; background: var(--bg); border: 2px solid var(--line); font: 900 52px/1 var(--head); letter-spacing: .06em; }
.about__mono span { color: var(--accent); }
.about__name { font: 800 22px var(--head); margin: 0; }
.about__role { color: var(--muted); margin: 4px 0 0; font-size: 14px; }
.about h2 { font-size: clamp(28px, 3.6vw, 44px); margin-bottom: 18px; }
.about .lead { margin: 0 0 24px; }
.about__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.about__list li { padding-left: 22px; border-left: 3px solid var(--accent); color: var(--muted); }
.about__list b { color: var(--ink); display: block; }
@media (max-width: 860px) { .about { grid-template-columns: 1fr; } .about__card { max-width: 340px; } }

/* ---------- reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .nav__burger { display: grid; gap: 5px; background: none; border: 0; padding: 10px; cursor: pointer; }
  .nav__burger span { width: 24px; height: 2px; background: var(--ink); transition: .2s; }
  .nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav__burger ~ .nav__links {
    position: fixed; inset: 68px 0 auto 0; flex-direction: column; align-items: stretch; gap: 0;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: 8px var(--gut) 24px;
    max-height: calc(100vh - 68px); overflow: auto; display: none;
  }
  .nav__burger ~ .nav__links.is-open { display: flex; }
  .nav__burger ~ .nav__links > a:not(.btn), .nav__burger ~ .nav__links .mega__btn { padding: 14px 0; border-bottom: 1px solid var(--line); text-align: left; width: 100%; font-size: 16px; }
  .nav__links .btn { margin-top: 16px; }
  .mega__panel { position: static; grid-template-columns: 1fr; gap: 12px; opacity: 1; visibility: visible; transform: none; display: none; box-shadow: none; border: 0; padding: 8px 0 8px 14px; background: none; }
  .mega.is-open .mega__panel { display: grid; }
  .mega:hover .mega__panel { display: none; }
  .mega.is-open:hover .mega__panel { display: grid; }
  .stats { grid-template-columns: 1fr 1fr; }
  .spot, .track-promo__grid, .contact__grid { grid-template-columns: 1fr; }
  .spot__media { min-height: 240px; }
  .spot--flip .spot__media { order: 0; }
  .grid3 { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: repeat(3, 1fr); row-gap: 36px; }
  .work { grid-template-columns: 1fr 1fr; grid-auto-rows: 240px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .grid3, .steps, .work, .chips, .form__row, .footer__grid { grid-template-columns: 1fr; }
  .form__row { gap: 0; }
  .tile--wide { grid-column: auto; }
  .tile--tall { grid-row: span 1; }
  .work { grid-auto-rows: 260px; }
  .stats li { padding: 16px; }
  .spot__media { min-height: 200px; }
  .mock { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- showreel ("What is OXODI?") ---------- */
.reel { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(64px, 9vw, 120px); border-block: 1px solid var(--line); }
.reel__bg { position: absolute; inset: 0; z-index: -1; }
.reel__bg img { width: 100%; height: 100%; object-fit: cover; filter: blur(6px) saturate(.9); transform: scale(1.06); }
.reel__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(25,25,25,.96), rgba(25,25,25,.82)); }
.reel__grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.reel__text h2 { font-size: clamp(32px, 4.4vw, 52px); font-weight: 900; text-transform: uppercase; margin-bottom: 28px; }
.reel__text .gold { color: var(--cream); }
.reel__text p { color: #cfcfcf; font-size: 17px; margin: 0 0 20px; max-width: 54ch; }
.reel__text .btn { margin-top: 12px; }
.reel__player { position: relative; display: block; padding: 0; border: 1px solid rgba(229,198,134,.45); background: #000; cursor: pointer; aspect-ratio: 16/10; width: 100%; box-shadow: 0 0 0 6px rgba(25,25,25,.6), 0 24px 60px rgba(0,0,0,.55); border-radius: 4px; }
.reel__player video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; border-radius: 3px; }
.reel__play { position: absolute; left: 50%; top: 50%; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: rgba(25,25,25,.62); transition: transform .2s, background .2s; }
.reel__play::after { content: ""; position: absolute; left: 50%; top: 50%; border: 17px solid transparent; border-left: 28px solid #fff; border-right: 0; transform: translate(-30%, -50%); }
.reel__player:hover .reel__play, .reel__player:focus-visible .reel__play { transform: scale(1.1); background: var(--accent); }
.reel__player:focus-visible { outline: 2px solid var(--cream); outline-offset: 4px; }
.reel__label { position: absolute; left: 50%; bottom: -22px; transform: translateX(-50%); white-space: nowrap; padding: 15px 34px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; font: 800 15px var(--head); text-transform: uppercase; letter-spacing: .06em; color: var(--ink); }
.lightbox--video { max-width: min(1100px, 94vw); width: 100%; }
.lightbox--video video { width: 100%; max-height: 74vh; display: block; background: #000; }
.reel__tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 16px; }
.reel__tabs button { font: 700 13px var(--head); padding: 9px 16px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface2); color: var(--ink); cursor: pointer; }
.reel__tabs button.is-on, .reel__tabs button:hover { background: var(--accent); border-color: var(--accent); }
@media (max-width: 860px) { .reel__grid { grid-template-columns: 1fr; } .reel__player { margin-bottom: 28px; } .reel__play { width: 72px; height: 72px; margin: -36px 0 0 -36px; } }

/* ---------- join (artist roster) ---------- */
.roster-note { color: var(--muted); max-width: 62ch; margin: 12px 0 32px; }
.roster-perks { margin-top: 8px; }
.join { max-width: 760px; }
.join select { width: 100%; padding: 13px 14px; font: inherit; color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; margin-top: 6px; }
.join__group { border: 0; padding: 0; margin: 0 0 20px; }
.join__group legend { font-size: 14px; font-weight: 500; margin-bottom: 10px; color: var(--ink); }
.join__group legend span, .join .opt { color: var(--muted); font-weight: 400; }
.join .req { color: var(--accent); font-weight: 600; }
.chips--multi { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.chips--multi span { padding: 12px 14px; font-size: 14px; }
.dropzone { border: 2px dashed var(--line); border-radius: 8px; padding: 22px; margin: 4px 0 20px; text-align: center; transition: border-color .15s, background .15s; }
.dropzone.is-over { border-color: var(--accent); background: rgba(244, 24, 44,.06); }
.dropzone__hint { color: var(--muted); font-size: 14px; margin: 12px 0 0; }
.dropzone__list { list-style: none; padding: 0; margin: 12px 0 0; font-size: 14px; }
.dropzone__list li { padding: 4px 0; }
.dropzone__list button { margin-left: 8px; background: none; border: 0; color: var(--accent); cursor: pointer; text-decoration: underline; font: inherit; }
.join .consent { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; }
.join .consent input { width: auto; margin-top: 4px; flex: none; }
.roster-steps { margin-top: 24px; }
.join input[type=file] { display: none !important; }
.roster-steps { grid-template-columns: repeat(4, 1fr); }
.roster-steps li { counter-increment: s; display: flex; flex-direction: column; gap: 8px; }
.roster-steps li::before { content: counter(s, decimal-leading-zero); font: 900 40px/1 var(--head); color: var(--accent); margin-bottom: 6px; }
.roster-steps b { font: 800 19px/1.2 var(--head); color: var(--ink); }
.roster-steps span { font: 400 14px/1.55 var(--body, inherit); color: var(--muted); }
@media (max-width: 860px) { .roster-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .roster-steps { grid-template-columns: 1fr; } }

/* ---------- life: small motions + sword cursor ---------- */
.brand__x { animation: xspin 8s ease-in-out infinite; }
@keyframes xspin { 0%, 88% { transform: rotate(0); } 100% { transform: rotate(360deg); } }
.hero__inner > *, .stats { animation: rise .8s cubic-bezier(.2,.8,.2,1) both; }
.hero__inner > :nth-child(1) { animation-delay: .05s; }
.hero__inner > :nth-child(2) { animation-delay: .15s; }
.hero__inner > :nth-child(3) { animation-delay: .28s; }
.hero__inner > :nth-child(4) { animation-delay: .4s; }
.stats { animation-delay: .55s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
.link-more { background: linear-gradient(var(--accent), var(--accent)) 0 100% / 100% 2px no-repeat; border-bottom: 0; padding-bottom: 4px; transition: color .15s, background-size .25s; }
.link-more:hover { background-size: 0 2px; background-position: 100% 100%; }
.spot__text h2 { transition: transform .5s ease; }
.spot:hover .spot__text h2 { transform: translateX(6px); }
.sw { position: fixed; left: 0; top: 0; width: 0; height: 0; z-index: 2147483647; pointer-events: none; opacity: 0; transition: opacity .2s; }
.sw.show { opacity: 1; }
.sw i { position: absolute; left: -3px; top: -3px; width: 32px; height: 32px; transform-origin: 3px 3px; transition: transform .28s cubic-bezier(.3, 1.7, .5, 1); }
.sw svg { width: 100%; height: 100%; display: block; }
.sw.hot i { transform: scale(1.25) rotate(-14deg); }
.sw.down i { transform: scale(.85) rotate(10deg); }
.sw .spark { position: absolute; left: -12px; top: -12px; width: 28px; height: 28px; border: 2px solid var(--accent); border-radius: 50%; opacity: 0; }
.sw.swpop .spark { animation: pop .45s ease-out; }
@keyframes pop { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(2.2); } }
html.sw-on, html.sw-on * { cursor: none !important; }
@media (prefers-reduced-motion: reduce) { .brand__x, .hero__inner > *, .stats { animation: none; } .sw i { transition: none; } }

/* showreel: selection + logo mark */
.vmark { position: absolute; font: 900 16px/1 var(--head); letter-spacing: .14em; color: rgba(255,255,255,.88); text-shadow: 0 1px 6px rgba(0,0,0,.7); pointer-events: none; }
.vmark b { color: var(--accent); font-size: 1.3em; line-height: 0; font-weight: 900; }
.reel__player .vmark { left: 14px; bottom: 12px; }
.vwrap { position: relative; }
.vwrap .vmark { left: 16px; bottom: 64px; font-size: 18px; }
.reel__picks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.reel__picks button { position: relative; padding: 0; border: 2px solid rgba(255,255,255,.18); border-radius: 8px; overflow: hidden; background: #000; cursor: pointer; aspect-ratio: 16 / 7; transition: border-color .2s, transform .2s; }
.reel__picks button:hover { transform: translateY(-2px); }
.reel__picks button.is-on { border-color: var(--accent); }
.reel__picks video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; opacity: .7; transition: opacity .2s; }
.reel__picks button.is-on video, .reel__picks button:hover video { opacity: 1; }
.reel__picks span { position: absolute; left: 10px; bottom: 8px; font: 700 14px var(--head); color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.8); }
.reel__side .reel__player { margin-bottom: 0; }

.about__photo { width: 180px; height: 180px; margin: 0 auto 22px; border-radius: 50%; object-fit: cover; border: 3px solid var(--accent); box-shadow: 0 0 0 6px rgba(244, 24, 44,.15); display: block; }

/* ---------- gold hairlines ---------- */
:root { --hair: rgba(229, 198, 134, .55); --hair-soft: rgba(229, 198, 134, .26); }
.nav { border-bottom-color: var(--hair-soft); }
.block, .offer { position: relative; }
.block::before, .offer::before { content: ""; position: absolute; top: 0; left: 50%; width: min(1180px, calc(100% - 2 * var(--gut))); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--hair), transparent); pointer-events: none; }
.light.block::before { background: linear-gradient(90deg, transparent, rgba(185, 157, 97, .7), transparent); }
.offer { border-block-color: var(--hair-soft); }
.hero::after { content: ""; position: absolute; inset: 18px; border: 1px solid rgba(229, 198, 134, .2); pointer-events: none; z-index: 1; }
.stats li { box-shadow: inset 0 0 0 1px rgba(229, 198, 134, .16); }
.spot__media::after { content: ""; position: absolute; inset: 14px; border: 1px solid var(--hair); pointer-events: none; z-index: 1; }
.tile::before { content: ""; position: absolute; inset: 10px; border: 1px solid var(--hair); opacity: 0; transform: scale(1.04); transition: opacity .35s, transform .35s; z-index: 2; pointer-events: none; }
.tile:hover::before, .tile:focus-visible::before { opacity: 1; transform: none; }
.about__card { position: relative; border-color: var(--hair-soft); }
.about__card::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--hair-soft); pointer-events: none; border-radius: 2px; }
.form, .mock { border-color: var(--hair-soft); box-shadow: inset 0 0 0 6px var(--surface), inset 0 0 0 7px var(--hair-soft); }
.mock { box-shadow: 0 30px 60px rgba(0, 0, 0, .5), inset 0 0 0 6px var(--surface), inset 0 0 0 7px var(--hair-soft); }
.faq, .faq:first-of-type { border-color: var(--hair-soft); }
.btn--outline, .btn--ghost { border-color: var(--hair); }
.footer { border-top: 0; position: relative; }
.footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--hair) 20%, var(--hair) 80%, transparent); }
@media (max-width: 640px) { .hero::after { inset: 10px; } .spot__media::after { inset: 10px; } }

/* ---------- opening: pipeline render ---------- */
.nav__links, .nav__burger { transition: opacity .6s ease; }
html.intro .nav__logo, html.intro .nav__links, html.intro .nav__burger { opacity: 0; }
html.intro { overflow: hidden; }
.intro-layer { position: fixed; left: 0; top: 0; width: 100%; z-index: 10001; pointer-events: none; }
.il { position: absolute; left: 0; top: 0; font-family: var(--head); font-weight: 900; letter-spacing: 0; color: var(--ink); white-space: nowrap; will-change: transform, opacity; opacity: 0; line-height: normal; }
.il--x { color: var(--accent); line-height: 1; transform-origin: 50% 49.7%; }
.boot { position: fixed; inset: 0; z-index: 10000; background: #191919; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.boot--red { background: var(--accent); z-index: 9999; }
.boot__frame { padding: 10px; border: 1px solid var(--hair); outline: 1px solid var(--hair-soft); outline-offset: 5px; }
.boot__pic { position: relative; width: min(46vh, 74vw); aspect-ratio: 1; overflow: hidden; background: #101010; }
.bs { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .28s ease; }
.bs.on { opacity: 1; }
.bs1 { filter: url(#bf-edge); }
.bs2 { filter: url(#bf-block); }
.bs3 { filter: grayscale(1) sepia(.3) contrast(1.08); }
.bs4 { filter: saturate(.5) brightness(1.02); }
.bs5 { filter: none; }
.boot__scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--cream); box-shadow: 0 0 14px var(--cream); opacity: 0; }
.boot__bar { display: flex; gap: 6px; width: min(46vh, 74vw); }
.boot__bar span { flex: 1; height: 3px; background: rgba(229, 198, 134, .22); }
.boot__bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .4s ease; }
.boot__meta { width: min(46vh, 74vw); display: flex; justify-content: space-between; align-items: baseline; font: 700 13px var(--head); letter-spacing: .08em; color: var(--muted); }
.boot__label { color: var(--ink); font-weight: 800; }
.boot__pct { font-variant-numeric: tabular-nums; }

/* ---------- pipeline scroll bar + slash ---------- */
.pipe { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 90; display: flex; gap: 4px; pointer-events: none; }
.pipe span { flex: 1; background: rgba(229, 198, 134, .14); }
.pipe i { display: block; height: 100%; width: 0; background: var(--accent); }
.pipe__tag { position: absolute; right: 12px; top: 8px; font: 800 11px/1 var(--head); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); background: rgba(25, 25, 25, .88); border: 1px solid var(--hair-soft); padding: 6px 9px; border-radius: 3px; opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s; }
.pipe__tag:empty { display: none; }
.pipe__tag.on { opacity: 1; transform: none; }
.trail { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 2147483645; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .boot, .boot--red { display: none; } }

/* opening: gold hairline details */
.boot__frame { position: relative; }
.boot__rule { position: absolute; height: 1px; pointer-events: none; }
.boot__corners { position: absolute; inset: -16px; pointer-events: none;
  --g: var(--cream);
  background:
    linear-gradient(var(--g), var(--g)) 0 0 / 22px 1px no-repeat, linear-gradient(var(--g), var(--g)) 0 0 / 1px 22px no-repeat,
    linear-gradient(var(--g), var(--g)) 100% 0 / 22px 1px no-repeat, linear-gradient(var(--g), var(--g)) 100% 0 / 1px 22px no-repeat,
    linear-gradient(var(--g), var(--g)) 0 100% / 22px 1px no-repeat, linear-gradient(var(--g), var(--g)) 0 100% / 1px 22px no-repeat,
    linear-gradient(var(--g), var(--g)) 100% 100% / 22px 1px no-repeat, linear-gradient(var(--g), var(--g)) 100% 100% / 1px 22px no-repeat; }
.boot__meta::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 1px; background: linear-gradient(90deg, transparent, rgba(229,198,134,.35), transparent); }
.boot__meta { position: relative; }

/* ---------- small details ---------- */
.fx-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; z-index: 9000; pointer-events: none; }
.fx-pop { position: fixed; width: 8px; height: 8px; margin: -4px 0 0 -4px; border: 2px solid var(--accent); pointer-events: none; z-index: 9001; animation: fxpop .55s steps(6) forwards; }
@keyframes fxpop { to { transform: scale(5); opacity: 0; } }
.fx-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); max-width: calc(100% - 32px); padding: 12px 16px; background: #f2f2f2; color: #191919; border-left: 6px solid var(--accent); box-shadow: 6px 6px 0 var(--accent); font: 600 14px/1.4 Inter, sans-serif; z-index: 9002; transition: opacity .5s; }
.fx-toast b { color: var(--accent); margin-right: 6px; font-family: Raleway, sans-serif; font-weight: 900; }
.fx-toast a { color: #191919; text-decoration: underline; }
.fx-toast.is-out { opacity: 0; }
.pop { margin-top: 40px; }
.pop__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; font: 700 13px Inter, sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pop__bar b { color: var(--ink); }
.pop__field { position: relative; width: 100%; aspect-ratio: 16 / 9; max-height: 60vh; background: #101010; border: 1px solid var(--hair); overflow: hidden; touch-action: manipulation; user-select: none; }
.pop__field canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pop__over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: rgba(16, 16, 16, .82); text-align: center; padding: 16px; }
.pop__over[hidden] { display: none; }
.pop__over p { margin: 0; font: 800 clamp(18px, 4vw, 28px) Raleway, sans-serif; }
@media (prefers-reduced-motion: reduce) { .fx-pop { display: none; } }

/* artists */
.agrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 20px; }
.acard { display: block; color: inherit; text-decoration: none; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--surface); transition: transform .25s, border-color .25s; }
.acard:hover { transform: translateY(-3px); border-color: var(--accent); }
.acard__img { display: block; aspect-ratio: 4 / 3; background: #111; overflow: hidden; }
.acard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.acard:hover .acard__img img { transform: scale(1.04); }
.acard__who { display: flex; gap: 12px; align-items: center; padding: 14px 16px; }
.acard__who b { display: block; font: 800 17px var(--head); }
.acard__who small { color: var(--muted); font-size: 13px; }
.avatar { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--accent); color: #fff; font: 900 15px var(--head); }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--lg { width: clamp(84px, 12vw, 120px); height: clamp(84px, 12vw, 120px); font-size: clamp(26px, 4vw, 38px); }
.aprof { display: flex; gap: clamp(18px, 3vw, 36px); align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.aprof > div { flex: 1 1 300px; min-width: 0; }
.aprof .lead { margin-bottom: 18px; }
.aempty { max-width: 60ch; padding: clamp(24px, 4vw, 48px); border: 1px dashed var(--line); border-radius: 8px; }
.aempty h2 { margin-bottom: 12px; }
.sample-banner { background: var(--accent); color: #fff; text-align: center; padding: 10px 16px; font: 700 13px Inter, sans-serif; letter-spacing: .04em; }

/* logo: ince altın çizgi */
.brand { position: relative; padding-bottom: .22em; }
.brand::after { content: ""; position: absolute; left: 0; right: .14em; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(240,214,150,0), rgba(240,214,150,.95) 45%, rgba(255,240,205,1)); }

/* demo: credits & crew */
.tile .tile__by{display:block;margin-top:4px;font:600 12px var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-style:normal}
.crew__list{list-style:none;margin:20px 0 0;padding:0;border-top:1px solid var(--line)}
.crew__list li{display:grid;grid-template-columns:48px minmax(120px,1fr) minmax(140px,1.2fr) 2fr auto;gap:16px;align-items:baseline;padding:18px 4px;border-bottom:1px solid var(--line);transition:background .2s}
.crew__list li:hover,.crew__list li:target{background:rgba(255,255,255,.04)}
.crew__p{font:800 13px var(--head);letter-spacing:.12em;color:var(--accent)}
.crew__list b{font:800 20px var(--head)}
.crew__r{color:var(--cream)}.crew__s{color:var(--muted);font-size:14px}
.crew__l{font-size:13px;color:var(--muted);text-decoration:none}.crew__l:hover{color:#fff}
.crew__note{margin-top:24px;max-width:60ch;color:var(--muted)}
@media(max-width:720px){.crew__list li{grid-template-columns:40px 1fr;row-gap:4px}.crew__r,.crew__s,.crew__l{grid-column:2}}

.crew__list li{grid-template-columns:36px 52px minmax(120px,1fr) minmax(140px,1.2fr) 2fr auto;align-items:center}
.crew__list .avatar{width:48px;height:48px;border:1px solid var(--line)}
@media(max-width:720px){.crew__list li{grid-template-columns:36px 48px 1fr}.crew__r,.crew__s,.crew__l{grid-column:3}}

/* ---------- gallery presentation: framed prints with museum labels ---------- */
:root { --mat: #111; --frame: rgba(229, 198, 134, .38); }
.work { grid-auto-rows: 400px; gap: 34px 26px; }
.work--grid { grid-auto-rows: 350px; }
.tile { display: flex; flex-direction: column; overflow: visible; border-radius: 0; background: none; }
.tile::after, .tile::before { display: none; }
.tile img { flex: 1; min-height: 0; box-sizing: border-box; padding: 11px; background: var(--mat); border: 1px solid var(--frame); transition: border-color .3s, transform .4s ease; }
.tile:hover img { transform: translateY(-3px); border-color: var(--cream); }
.tile__info { position: static; transform: none; padding: 14px 2px 0; display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: baseline; }
.tile:hover .tile__info { transform: none; }
.tile__info b { grid-column: 1; font: 700 17px/1.25 var(--head); letter-spacing: .01em; }
.tile__info > span { grid-column: 1; margin-top: 3px; font-size: 13px; color: var(--muted); }
.tile .tile__by { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin: 0; font: 500 12.5px var(--body); letter-spacing: 0; text-transform: none; color: var(--gold); position: relative; padding-top: 9px; }
.tile .tile__by::before { content: ""; position: absolute; top: 0; right: 0; width: 22px; height: 2px; background: var(--accent); transition: width .3s; }
.tile:hover .tile__by::before { width: 100%; }

.gal { display: block; columns: 2; column-gap: 34px; }
.gal__item { display: block; box-sizing: border-box; aspect-ratio: auto; break-inside: avoid; margin: 0 0 34px; padding: 0 0 34px; border-radius: 0; background: none; position: relative; }
.gal__item img { display: block; width: 100%; height: auto; box-sizing: border-box; padding: 12px; background: var(--mat); border: 1px solid var(--frame); object-fit: contain; transition: border-color .3s; }
.gal__item:hover img { transform: none; border-color: var(--cream); }
.gal__item::after { content: attr(data-tags); position: absolute; left: 2px; bottom: 6px; font: 500 12.5px var(--body); color: var(--gold); letter-spacing: .04em; }
.gal__item--main { column-span: all; max-height: none; display: block; background: none; }
.gal__item--main img { max-height: 82vh; padding: clamp(10px, 1.6vw, 20px); }
.gal__item--video { aspect-ratio: auto; }
.gal--single { columns: 1; }

.phero--project .wrap:has(> .pmeta) { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); column-gap: clamp(32px, 6vw, 96px); align-items: start; }
.phero--project .wrap:has(> .pmeta) > .crumbs { grid-column: 1 / -1; }
.phero--project .wrap:has(> .pmeta) > :is(.kicker, h1, .lead) { grid-column: 1; }
.phero--project .wrap:has(> .pmeta) > .pmeta { grid-column: 2; grid-row: 2 / span 3; align-self: end; }
.phero--project h1::before { content: ""; display: block; width: 44px; height: 3px; background: var(--accent); margin-bottom: 22px; }
.pmeta { display: block; padding-top: 0; border-top: 1px solid var(--hair); }
.pmeta > div { display: grid; grid-template-columns: 104px 1fr; gap: 16px; padding: 13px 0; border-bottom: 1px solid var(--hair-soft); }
.pmeta dt { font: 600 13px var(--body); text-transform: none; letter-spacing: 0; color: var(--gold); margin: 0; }
.pmeta dd { font-size: 15px; }
.pnav__a { border-radius: 0; border-color: var(--hair-soft); }
.pnav__a img { border-radius: 0; }
@media (max-width: 900px) {
  .phero--project .wrap:has(> .pmeta) { display: block; }
  .phero--project .wrap:has(> .pmeta) > .pmeta { margin-top: 28px; }
}
@media (max-width: 720px) {
  .gal { columns: 1; }
  .work, .work--grid { grid-auto-rows: 330px; gap: 28px 18px; }
}

/* crew: yan yana yuvarlak profiller */
.crew__list{display:flex;flex-wrap:wrap;justify-content:center;gap:36px 28px;border-top:0}
.crew__list li,.crew__list li:hover,.crew__list li:target{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;width:150px;padding:0;border:0;background:none}
.crew__list .avatar{width:112px;height:112px;border:2px solid var(--line);margin-bottom:6px}
.crew__list b{font-size:17px}
.crew__r{font-size:13px;color:var(--muted)}
.crew__gold{display:grid;place-items:center;width:30px;height:30px;margin-top:6px;border-radius:50%;border:1px solid var(--cream);color:var(--cream);background:rgba(229,198,134,.08);transition:background .2s,color .2s,transform .2s}
.crew__gold:hover{background:var(--cream);color:#191919;transform:translateY(-2px)}
@media(max-width:720px){.crew__list li{grid-template-columns:none;width:130px}.crew__r{grid-column:auto}}

.crew__ph{position:relative;display:block;margin-bottom:6px}
.crew__ph .avatar{margin-bottom:0}
.crew__ph .crew__gold{position:absolute;right:-2px;bottom:-2px;margin:0;background:#191919;box-shadow:0 0 0 3px #191919}
.crew__ph .crew__gold:hover{background:var(--cream)}

/* pricing + portal */
.offer-card{border:1px solid var(--cream);border-radius:16px;padding:28px 32px;background:rgba(229,198,134,.06);margin-bottom:28px}
.offer-card h2{font-size:clamp(28px,4vw,40px);margin:4px 0 10px}
.ptable-wrap{overflow-x:auto}
.ptable{width:100%;border-collapse:collapse;min-width:520px}
.ptable th,.ptable td{text-align:left;padding:16px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.ptable thead th{font:800 12px var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ptable tbody th{font-weight:700}
.ptable th small{display:block;font-weight:400;color:var(--muted);margin-top:2px}
.ptable td b{color:var(--cream);font-size:18px}
.pnote{color:var(--muted);font-size:14px;margin-top:16px}
.pgrid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:28px}
.pgrid2 h3{margin-bottom:8px}
.ptabs{display:flex;gap:8px;margin-bottom:20px}
.ptabs button{background:none;border:1px solid var(--line);color:var(--muted);padding:9px 16px;border-radius:99px;font:700 14px var(--head);cursor:pointer}
.ptabs button[aria-selected="true"]{border-color:var(--cream);color:var(--cream)}
.pgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 18px}
.pform .field input,.pform .field select,.pform .field textarea{display:block;width:100%;margin-top:6px;background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit}
.pform .field input:focus,.pform .field select:focus,.pform .field textarea:focus{outline:0;border-color:var(--cream)}
.perr{color:#ff8a9a;min-height:1.4em;margin:12px 0 0}
.pstat{display:inline-block;padding:3px 10px;border-radius:99px;font:700 12px var(--head);letter-spacing:.08em;text-transform:uppercase;margin-right:8px}
.pstat--pending{background:#e5c68622;color:var(--cream)}.pstat--approved{background:#2f6b45;color:#fff}.pstat--rejected{background:#6b2f35;color:#fff}
.pdl{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin:24px 0}
.pdl dt{font:700 12px var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.pdl dd{margin:4px 0 0}
.pact{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 18px}

.pnote { font-size: 14px !important; border-left: 3px solid var(--accent); padding-left: 14px; font-style: italic; }

/* OXODI imzası: sanatçısı olmayan işlerde sol alt logo */
.gal__item { position: relative; }
.wm { position: absolute; left: 24px; bottom: 58px; z-index: 2; pointer-events: none; font: 900 13px/1 var(--head); letter-spacing: .14em; color: #fff; background: rgba(17,17,17,.62); padding: 7px 10px 7px 11px; border-radius: 4px; backdrop-filter: blur(4px); }
.wm i { font-style: normal; color: var(--accent); font-size: 1.32em; line-height: 0; letter-spacing: 0; margin: 0 .1em 0 .02em; vertical-align: -.06em; }

/* Sade ana sayfa: daha küçük başlıklar, daha sıkı bölümler */
.hero h1 { font-size: clamp(36px, 5.2vw, 68px); max-width: 18ch; }
.hero__inner { padding-top: 96px; }
.block, .head h2, .block h2 { }
.head h2, .block h2 { font-size: clamp(26px, 3.2vw, 40px); }
.block { padding-block: clamp(56px, 7vw, 88px); }
.offer h2 { font-size: clamp(24px, 2.8vw, 34px); }
.contact h2 { font-size: clamp(26px, 3.2vw, 38px); }
.hero__inner { padding-bottom: clamp(48px, 7vw, 88px); }

/* Açılış ekranı: JS yüklenmeden önce de sayfayı hemen kapat, site "önce görünüp sonra kapanmasın" */
html.intro::before { content: ""; position: fixed; inset: 0; z-index: 9990; background: #191919; animation: oxCoverOff 0s 10s forwards; }
@keyframes oxCoverOff { to { opacity: 0; visibility: hidden; } }

/* Açılış çıkışı: ince kırmızı çizgi çekilir, koyu ekran çizgiden ikiye ayrılıp site açılır */
.lncover { position: fixed; inset: 0; z-index: 10003; pointer-events: none; overflow: hidden; }
.lncover__h { position: absolute; left: 0; right: 0; height: 50.2%; background: #191919; will-change: transform; }
.lncover__h--t { top: 0; }
.lncover__h--b { bottom: 0; }
.lncover__line { position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--accent); transform: scaleX(0); transform-origin: 50% 50%; box-shadow: 0 0 14px rgba(244, 24, 44, .55); }
html.intro.intro-open::before { display: none; }

/* about: crew row (round avatars side by side) */
.crewrow { display: flex; flex-wrap: wrap; gap: 36px 44px; margin: 28px 0 8px; }
.cperson { display: flex; flex-direction: column; align-items: center; text-align: center; width: 168px; color: inherit; text-decoration: none; }
.cperson__ring { display: grid; place-items: center; width: 150px; height: 150px; border-radius: 50%; overflow: hidden; border: 3px solid var(--accent); background: var(--surface); box-shadow: 0 0 0 6px rgba(255, 17, 65, .12); transition: transform .25s, box-shadow .25s; }
.cperson__ring img { width: 100%; height: 100%; object-fit: cover; }
.cperson__ring span { font: 900 40px var(--head); color: #fff; }
a.cperson:hover .cperson__ring { transform: translateY(-4px); box-shadow: 0 0 0 8px rgba(255, 17, 65, .22); }
.cperson b { margin-top: 14px; font: 800 17px var(--head); }
.cperson small { color: var(--muted); font-size: 13px; margin-top: 2px; }

/* about: team */
.team { display: flex; flex-wrap: wrap; gap: 40px 56px; margin-top: 28px; }
.tmember { display: flex; flex-direction: column; align-items: center; text-align: center; width: 260px; }
.tmember h3 { margin: 16px 0 2px; font: 800 20px var(--head); }
.tmember__role { color: var(--muted); font-size: 14px; margin: 0 0 12px; }
.tchips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; padding: 0; margin: 0 0 16px; }
.tchips li { border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: 12px; color: var(--gold, #e5c686); }
.tmember .cperson__ring span { font: 900 40px var(--head); color: #fff; }

/* ---------- project page: cinematic stage + framed plates ---------- */
.pstage { position: relative; overflow: hidden; isolation: isolate; padding: clamp(28px, 4vw, 48px) 0 clamp(40px, 5vw, 64px); }
.pstage::before { content: ""; position: absolute; inset: -80px; z-index: -2; background: var(--cover) center / cover no-repeat; filter: blur(70px) saturate(1.35) brightness(.42); transform: scale(1.15); }
.pstage::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(25,25,25,.15) 0%, rgba(25,25,25,.35) 55%, var(--bg) 100%); }
.pstage__head { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px clamp(32px, 6vw, 96px); align-items: end; margin: clamp(28px, 4vw, 56px) 0 clamp(28px, 4vw, 48px); }
.pstage h1 { font: 900 clamp(42px, 7vw, 96px)/.95 var(--head); letter-spacing: -.02em; margin: 0; }
.pstage .kicker { margin: 0 0 14px; }
.pstage .lead { margin: 0; max-width: 46ch; color: rgba(242,242,242,.82); font-size: clamp(16px, 1.5vw, 19px); }
.pno { margin: 0 0 10px; font: 400 13px var(--pixel, var(--head)); letter-spacing: .2em; text-transform: uppercase; color: var(--cream); }
.pno i { font-style: normal; color: var(--muted); }
.pstage__stage { display: flex; justify-content: center; }
.pstage__fig { all: unset; box-sizing: border-box; position: relative; display: block; max-width: 100%; cursor: zoom-in; padding: clamp(8px, 1.2vw, 16px); background: rgba(12,12,12,.62); border: 1px solid var(--hair); box-shadow: 0 50px 110px rgba(0,0,0,.6), 0 0 0 8px rgba(229,198,134,.06); backdrop-filter: blur(6px); transition: transform .5s, box-shadow .5s; }
.pstage__fig:hover { transform: translateY(-3px); box-shadow: 0 60px 120px rgba(0,0,0,.65), 0 0 0 8px rgba(229,198,134,.12); }
.pstage__fig img { display: block; max-width: 100%; max-height: min(78vh, 860px); width: auto; height: auto; margin: 0 auto; }
.pstage__fig:focus-visible { outline: 2px solid var(--cream); outline-offset: 5px; }
.pstage .wm { left: clamp(20px, 2.4vw, 32px); bottom: clamp(20px, 2.4vw, 32px); }
.pstage .pmeta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: clamp(32px, 4vw, 56px) 0 0; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair-soft); }
.pstage .pmeta > div { display: block; padding: 20px 22px; border: 0; border-left: 1px solid var(--hair-soft); }
.pstage .pmeta > div:first-child { border-left: 0; padding-left: 0; }
.pstage .pmeta dt { font: 700 11px var(--head); text-transform: uppercase; letter-spacing: .16em; color: var(--cream); margin: 0 0 8px; }
.pstage .pmeta dd { font-size: 15px; line-height: 1.45; }

.pstory { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(0, 2.2fr); gap: clamp(24px, 6vw, 96px); max-width: 1000px; }
.pstory h2 { margin: 6px 0 0; font-size: clamp(26px, 3vw, 38px); }
.pstory .prose p:first-child { font-size: clamp(17px, 1.7vw, 21px); line-height: 1.6; color: var(--ink); }

.plates { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 26px); padding-bottom: clamp(32px, 4vw, 56px); }
.plate { all: unset; box-sizing: border-box; position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; padding: clamp(10px, 1.4vw, 18px); cursor: zoom-in; background: radial-gradient(ellipse at 50% 40%, #232323, #121212); border: 1px solid var(--hair-soft); overflow: hidden; transition: border-color .3s, transform .4s; }
.plate img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: transform .6s; }
.plate::after { content: attr(data-no); position: absolute; right: 14px; top: 12px; font: 400 12px var(--pixel, var(--head)); letter-spacing: .18em; color: var(--cream); opacity: .75; }
.plate:hover { border-color: var(--hair); transform: translateY(-2px); }
.plate:hover img { transform: scale(1.025); }
.plate:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.plate:last-child:nth-child(odd), .plate--video { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.plate--video { cursor: default; padding: 0; background: #000; }
.plate--video video { width: 100%; height: 100%; object-fit: contain; display: block; }
.plate .wm { left: 14px; bottom: 14px; }

.pnav__a { padding: 18px; }
.pnav__a img { width: 150px; height: 96px; }
.pnav__a span { font-size: clamp(18px, 2vw, 24px); }
@media (max-width: 900px) {
  .pstage__head, .pstory { grid-template-columns: 1fr; }
  .pstage .pmeta > div { padding-left: 0; border-left: 0; }
  .plates { grid-template-columns: 1fr; }
  .plate:last-child:nth-child(odd) { aspect-ratio: 4 / 3; }
  .pnav__a img { width: 80px; height: 56px; }
}

/* logo: kırmızı levha wordmark (metin yerine görsel) */
.brand, .footer__brand .brand { font-size: 0; letter-spacing: 0; padding: 0; width: 104px; height: 30px; background: url(assets/logo-sword.png) left center / contain no-repeat; vertical-align: middle; }
.footer__brand .brand { width: 99px; height: 43px; }
.brand::after { display: none; }
.brand__x { animation: none; }

/* ---------- contact / hire us polish ---------- */
.contact { position: relative; overflow: hidden; background:
  radial-gradient(60% 70% at 8% 0%, rgba(244, 24, 44, .16), transparent 70%),
  radial-gradient(40% 50% at 100% 100%, rgba(229, 198, 134, .07), transparent 70%),
  linear-gradient(135deg, #2a0a12, var(--bg) 58%); }
.contact__grid { align-items: stretch; }
.contact__intro { display: flex; flex-direction: column; align-items: flex-start; }
.contact__live { display: inline-flex; align-items: center; gap: 10px; margin: 6px 0 0; padding: 8px 14px; font: 700 13px/1 var(--head); letter-spacing: .04em; color: var(--cream); border: 1px solid var(--hair-soft); border-radius: 999px; background: rgba(229, 198, 134, .06); }
.contact__pulse { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #5fe08e; }
.contact__pulse::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #5fe08e; opacity: 0; animation: contactPulse 2.2s ease-out infinite; }
@keyframes contactPulse { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.8); opacity: 0; } }
.contact__perks { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 0; width: 100%; border-top: 1px solid var(--hair-soft); }
.contact__perks li { position: relative; display: grid; gap: 2px; padding: 16px 0 16px 38px; border-bottom: 1px solid var(--hair-soft); }
.contact__perks li::before { content: ""; position: absolute; left: 4px; top: 21px; width: 14px; height: 8px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.contact__perks b { font: 800 16px/1.3 var(--head); color: var(--ink); }
.contact__perks span { font-size: 14px; color: var(--muted); }
.contact__mail { display: grid; gap: 4px; margin-top: 28px; padding: 16px 22px; width: 100%; max-width: 360px; text-decoration: none; border: 1px solid var(--hair-soft); border-radius: 10px; background: rgba(255, 255, 255, .02); transition: border-color .2s, background .2s, transform .2s; }
.contact__mail:hover, .contact__mail:focus-visible { border-color: var(--hair); background: rgba(229, 198, 134, .06); transform: translateY(-2px); }
.contact__mail-label { font: 800 11px/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.contact__mail-addr { font: 800 20px/1.3 var(--head); color: var(--ink); }
.contact__mail:hover .contact__mail-addr { color: var(--cream); }
button.contact__mail { font: inherit; color: inherit; text-align: left; cursor: pointer; }
.contact__mail-hint { font-style: normal; margin-left: 6px; color: var(--cream); opacity: .7; }
.contact__mail.is-copied { border-color: #5fe08e; }
.contact__mail.is-copied .contact__mail-hint { color: #5fe08e; opacity: 1; }

.form { position: relative; align-self: start; box-shadow: 0 30px 70px rgba(0, 0, 0, .45), inset 0 0 0 6px var(--surface), inset 0 0 0 7px var(--hair-soft); }
.form__steps li { position: relative; }
.form__steps li::before { content: "0" counter(fs) "  "; color: var(--accent); }
.form__steps li.is-done { color: var(--cream); }
.form__steps li.is-done::before { content: "✓  "; }
.form legend { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 6px; }
.form__hint { margin: 0 0 20px; font-size: 14px; color: var(--muted); }
.chips span { position: relative; padding: 16px 16px 16px 44px; border-radius: 8px; background: rgba(255, 255, 255, .015); }
.chips span::before { content: ""; position: absolute; left: 16px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 2px solid var(--line); border-radius: 50%; transition: border-color .15s, background .15s, box-shadow .15s; }
.chips label:hover span { border-color: var(--hair); transform: translateY(-1px); }
.chips input:checked + span { background: rgba(244, 24, 44, .12); }
.chips input:checked + span::before { border-color: var(--accent); background: var(--accent); box-shadow: inset 0 0 0 3px var(--surface); }
.form label:not(.chips label) { color: var(--cream); font: 700 12px/1 var(--head); letter-spacing: .1em; text-transform: uppercase; }
.form input:not([type=radio]):not([type=checkbox]), .form textarea { margin-top: 10px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.form textarea { resize: vertical; min-height: 110px; }
.form input::placeholder, .form textarea::placeholder { color: #6d6c6d; }
.form .is-bad { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(244, 24, 44, .16); }
.form__nav { align-items: center; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hair-soft); }
.form__nav .btn { min-width: 130px; }
#formSend::after { content: "→"; transition: transform .2s; }
#formSend:hover::after { transform: translateX(4px); }
#formNext::after { content: "→"; transition: transform .2s; }
#formNext:hover::after { transform: translateX(4px); }
.form__note { margin: 14px 0 0; font-size: 12.5px; color: #77767a; text-align: right; }
@media (max-width: 900px) {
  .contact__perks { margin-top: 22px; }
  .contact__mail { max-width: none; }
  .form__note, .form__status { text-align: left; }
}
@media (max-width: 640px) {
  .chips span { padding: 14px 14px 14px 42px; }
  .form__nav .btn { flex: 1; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) { .contact__pulse::after { animation: none; } }

/* artist-credited works: name watermark instead of the OXODI mark */
.wm--name { letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }

/* ---------- mobile fixes ---------- */
[hidden] { display: none !important; }
.contact__grid > *, .spot > *, .track-promo__grid > * { min-width: 0; }
.form__nav { flex-wrap: wrap; }
.contact__mail-addr { overflow-wrap: anywhere; }

/* artist / studio mark on blog cover images */
.article__fig, .post__img { position: relative; display: block; }
.article__fig .wm { left: 16px; bottom: 16px; }
.post__img .wm { left: 10px; bottom: 10px; font-size: 10px; padding: 5px 8px; }
.article__fig { margin: 8px 0 40px; }
.article__fig .article__cover { margin: 0; display: block; }

/* services cards with imagery */
.svc { overflow: hidden; }
.svc__img { margin: -32px -28px 22px; aspect-ratio: 16 / 10; overflow: hidden; background: #111; }
.svc__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.svc:hover .svc__img img { transform: scale(1.05); }

/* motion band */
.motion { background: radial-gradient(60% 80% at 100% 0%, rgba(244, 24, 44, .12), transparent 70%), var(--bg); }
.motion__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.motion__media { margin: 0; position: relative; border-radius: 10px; overflow: hidden; border: 1px solid var(--hair-soft); box-shadow: 0 30px 70px rgba(0, 0, 0, .5); background: #000; aspect-ratio: 16 / 9; }
.motion__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.motion__text h2 { font-size: clamp(26px, 3.2vw, 40px); margin-bottom: 16px; }
.motion__text .btn { margin-top: 8px; }
@media (max-width: 900px) { .motion__grid { grid-template-columns: 1fr; } }

/* studio call-out at the end of guide articles */
.studio-box { margin: 48px 0 8px; padding: clamp(22px, 4vw, 34px); border: 1px solid var(--hair-soft); border-left: 3px solid var(--accent); border-radius: 10px; background: linear-gradient(135deg, rgba(244, 24, 44, .08), rgba(255, 255, 255, .02) 60%); }
.studio-box h2 { font-size: clamp(20px, 2.4vw, 26px); margin: 0 0 10px; }
.studio-box p:not(.kicker) { color: var(--ink); opacity: .85; margin: 0 0 18px; }
.studio-box .kicker { margin-bottom: 10px; }
.prose .studio-box a.btn { color: #fff; text-decoration: none; }
.motion__bar { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; gap: 5px; z-index: 2; }
.motion__bar button { all: unset; flex: 1; height: 14px; cursor: pointer; display: flex; align-items: center; }
.motion__bar button::before { content: ""; position: absolute; }
.motion__bar button { position: relative; }
.motion__bar button::after { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 3px; border-radius: 2px; background: rgba(255, 255, 255, .28); }
.motion__bar i { position: absolute; left: 0; top: 5px; height: 3px; width: 0; border-radius: 2px; background: #fff; z-index: 1; }
.motion__bar button:focus-visible::after { outline: 2px solid var(--cream); outline-offset: 2px; }

/* ---------- packages + launch campaign ---------- */
.packages { background: linear-gradient(180deg, var(--bg), #141414); }
.campaign { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0 0 28px; padding: 16px 20px; border: 1px solid rgba(244, 24, 44, .45); border-radius: 10px; background: linear-gradient(90deg, rgba(244, 24, 44, .16), rgba(244, 24, 44, .03)); }
.campaign__tag { font: 800 11px/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: #fff; background: var(--accent); padding: 8px 10px; border-radius: 6px; white-space: nowrap; }
.campaign p { margin: 0; font-size: 15px; color: var(--ink); flex: 1; min-width: 240px; }
.campaign b { color: var(--cream); }
.pkgs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
.pkg { position: relative; display: flex; flex-direction: column; padding: 26px 22px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); transition: border-color .25s, transform .25s; }
.pkg:hover { border-color: var(--hair); transform: translateY(-4px); }
.pkg--hi { border-color: var(--accent); box-shadow: 0 24px 60px rgba(244, 24, 44, .14); }
.pkg__badge { position: absolute; top: -11px; right: 18px; font: 800 10px/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--light-ink); background: var(--cream); padding: 6px 9px; border-radius: 5px; }
.pkg__tag { font: 800 11px/1 var(--head); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.pkg h3 { font-size: 24px; margin: 0 0 10px; }
.pkg__lead { font-size: 14.5px; color: var(--muted); margin: 0 0 16px; }
.pkg ul { list-style: none; margin: 0 0 22px; padding: 16px 0 0; border-top: 1px solid var(--line); display: grid; gap: 9px; flex: 1; }
.pkg li { position: relative; padding-left: 22px; font-size: 14.5px; }
.pkg li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 10px; height: 5px; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); }
.pkg li b { color: var(--cream); }
.pkgs__note { margin: 22px 0 0; font-size: 14px; color: var(--muted); }
@media (max-width: 1100px) { .pkgs { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .pkgs { grid-template-columns: 1fr; } .campaign { padding: 14px 16px; } }

/* ---------- portfolio tiles v2: equal grid, hover caption + image strip ---------- */
.work { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; grid-auto-flow: row; gap: 26px; }
.tile { display: block; }
.tile img { padding: 0; border: 0; background: none; flex: none; min-height: 0; }
.tile__media { position: relative; display: block; aspect-ratio: 4 / 3; padding: 11px; background: var(--mat); border: 1px solid var(--frame); overflow: hidden; transition: border-color .3s, transform .4s ease; }
.tile__media > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.tile:hover .tile__media { border-color: var(--cream); transform: translateY(-3px); }
.tile:hover .tile__media > img { transform: scale(1.04); }
.tile:hover img { transform: none; }
.tile:hover .tile__media > img { transform: scale(1.04); }
.tile__thumbs { display: none; }
@media (hover: hover) {
  .tile__info { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; padding: 56px 16px 14px; background: linear-gradient(transparent, rgba(8, 8, 8, .78) 40%, rgba(8, 8, 8, .94)); opacity: 0; transform: translateY(14px); transition: opacity .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
  .tile:hover .tile__info, .tile:focus-visible .tile__info { opacity: 1; transform: none; }
  .tile__info b { color: #fff; }
  .tile__info > span { color: rgba(255, 255, 255, .72); }
  .tile__thumbs { display: flex; flex-direction: column; gap: 8px; position: absolute; left: 22px; top: 22px; width: 22%; z-index: 2; pointer-events: none; }
  .tile__thumbs img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid rgba(255, 255, 255, .45); border-radius: 3px; box-shadow: 0 8px 18px rgba(0, 0, 0, .55); background: #111; opacity: 0; transform: translateX(-16px); transition: opacity .3s ease, transform .35s cubic-bezier(.2, .8, .2, 1); }
  .tile__thumbs img:not([src]) { visibility: hidden; }
  .tile:hover .tile__thumbs img { opacity: 1; transform: none; }
  .tile:hover .tile__thumbs img:nth-child(2) { transition-delay: .06s; }
  .tile:hover .tile__thumbs img:nth-child(3) { transition-delay: .12s; }
}
@media (max-width: 900px) { .work { grid-template-columns: 1fr 1fr; gap: 20px; } }
@media (max-width: 640px) { .work { grid-template-columns: 1fr; } }

/* ---------- packages v2: simpler ---------- */
.campaign { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px; margin: 0 0 26px; }
.campaign li { font-size: 14.5px; color: var(--ink); padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .08); }
.campaign li.campaign__tag { background: var(--accent); border-color: var(--accent); color: #fff; font: 800 11px/1.2 var(--head); letter-spacing: .12em; text-transform: uppercase; padding: 9px 12px; }
.pkg { padding: 26px 22px 22px; }
.pkg h3 { font-size: 22px; margin: 0 0 6px; }
.pkg__lead { margin: 0 0 18px; color: var(--muted); }
.pkg ul { gap: 11px; padding-top: 16px; }
.pkg li { font-size: 15px; }
.pkg__badge { background: var(--accent); color: #fff; }
.pkgs__note { text-align: center; }

/* ---------- homepage blog strip ---------- */
.insights .posts--home { margin-top: 4px; }

/* tile hover v3: caption top-left, image strip bottom-left (no overlap) */
@media (hover: hover) {
  .tile__info { top: 12px; bottom: auto; display: block; padding: 16px 18px 46px; background: linear-gradient(rgba(8, 8, 8, .94), rgba(8, 8, 8, .72) 55%, transparent); transform: translateY(-14px); }
  .tile__info b { font-size: 18px; }
  .tile__info > span { display: block; margin-top: 4px; max-width: 34ch; }
  .tile .tile__by { display: block; margin-top: 8px; text-align: left; }
  .tile .tile__by::before { display: none; }
  .tile__thumbs { top: auto; bottom: 22px; width: 17%; }
}
@media (hover: hover) {
  .tile__info { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-items: baseline; padding: 14px 16px 34px; }
  .tile__info b { grid-column: 1; grid-row: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tile .tile__by { grid-column: 2; grid-row: 1; margin: 0; white-space: nowrap; font-size: 12px; }
  .tile__info > span { grid-column: 1 / -1; grid-row: 2; max-width: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .tile__thumbs { width: 15%; bottom: 20px; gap: 6px; }
}

/* studio watermark: the real sword logo instead of the old text mark */
.wm:not(.wm--name) { font-size: 0; line-height: 0; width: 84px; height: 30px; padding: 0; box-sizing: border-box; background: url(assets/logo-sword.png) center / 66px auto no-repeat, rgba(17, 17, 17, .62); }
.wm:not(.wm--name) i { display: none; }
.post__img .wm:not(.wm--name) { width: 66px; height: 24px; background-size: 52px auto, auto; }

/* facts strip under the hero */
.facts { background: var(--bg); }
.facts .stats { margin: 0 auto; padding-block: 34px; animation: none; }
.facts .stats li { background: var(--surface); }

/* Interactive tracking demo card */
.mock__head { align-items: center; gap: 8px; margin: 0; }
input.mock__code { width: 17ch; min-width: 0; background: transparent; outline: 0; text-transform: uppercase; font: 800 12px var(--head); letter-spacing: .1em; color: var(--accent); }
input.mock__code:focus { border-color: var(--accent); background: rgba(244, 24, 44, .06); }
.mock__go { border: 1px solid var(--line); background: var(--surface2); color: var(--ink); font: 800 11px var(--head); letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 4px; cursor: pointer; transition: background .2s, border-color .2s; }
.mock__go:hover, .mock__go:focus-visible { background: var(--accent); border-color: var(--accent); }
.mock__label { margin: 18px 0 2px; }
.mock__bar button { flex: 1; height: 8px; padding: 0; border: 0; border-radius: 9px; background: var(--surface2); cursor: pointer; position: relative; transition: transform .15s, box-shadow .15s; }
.mock__bar button::before { content: ""; position: absolute; inset: -10px 0; }
.mock__bar button:hover { transform: scaleY(1.6); }
.mock__bar button.d { background: var(--accent); }
.mock__bar button.a { background: repeating-linear-gradient(-45deg, var(--accent) 0 7px, #ff6d8b 7px 14px); background-size: 20px 20px; animation: stripes .8s linear infinite; }
.mock__bar button.on { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--cream); }
.mock__bar button:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; }
.mock__wip { min-height: 90px; transition: opacity .2s; }
.mock__wip.is-todo { border-left-color: var(--line); }
.mock__wip.is-todo p { font-style: italic; }
.mock__wip.fade { opacity: 0; }
.mock__hint { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
.mock__hint a { color: var(--cream); }
.mock__hint.err { color: #ff7b88; }
@media (prefers-reduced-motion: reduce) { .mock__bar button.a { animation: none; } }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- 2026-10-13 denetim düzeltmeleri ---- */
/* paket başlangıç fiyatı */
.pkg__price { margin: -4px 0 10px; font: 500 14px var(--body); color: var(--muted, #9a9a9a); }
.pkg__price b { font: 800 26px/1 var(--head); color: var(--ink); }
.light .pkg__price b { color: var(--light-ink); }
/* küçük kırmızı etiketlerde okunabilir kontrast (WCAG AA): koyu zeminde açık, açık zeminde koyu kırmızı */
.kicker, .eyebrow { color: #ff4a5a; }
.light .kicker, .light .eyebrow { color: #c8102e; }
/* özel kılıç imleci açıkken bile yazı alanlarında metin imleci görünsün */
html.sw-on input, html.sw-on textarea, html.sw-on select, html.sw-on [contenteditable] { cursor: text !important; }
html.sw-on select { cursor: pointer !important; }

/* klavye kullanıcıları için "içeriğe atla" bağlantısı: yalnızca odaklanınca görünür */
.skip { position: absolute; left: 12px; top: -60px; z-index: 1000; padding: 10px 16px; background: #fff; color: #111; font-weight: 700; border-radius: 6px; }
.skip:focus { top: 12px; }