/* /uretim v3 (ARN-221): the design language of THE/STUDIO (dark photo hero, centred Figtree headlines, square uppercase
   buttons, process band, split band with numbers) and Lefty Production Co (square black buttons), with the brand guideline
   trials/uretim/BRAND.md. Monochrome: every design token is a CSS variable in the first block; no other colours in this file.
   Reference tokens and screenshots: trials/uretim/DESIGN.md, "v3 reference tokens (ARN-221)". */
.trial-uretim {
  /* Colour (BRAND.md section 5). Colour beyond these comes only from photos. */
  --u-black: #111111;         /* primary buttons on white, announcement bar, footer */
  --u-ink: #2d2d2d;           /* text and headings */
  --u-band: #2b2b2b;          /* header on inner pages, process band */
  --u-grey-800: #3a3a3a;      /* primary button hover */
  --u-white: #ffffff;         /* page, text on dark */
  --u-grey-50: #f5f5f7;       /* quiet sections, image tiles, light button fill on dark */
  --u-grey-200: #e3e3e3;      /* hairlines, input borders at rest */
  --u-grey-400: #8a8a8a;      /* second headline line on white (large text only) */
  --u-grey-500: #6b6b6b;      /* secondary text, captions */
  --u-on-dark-2: #bdbdbd;     /* second headline line and secondary text on dark */
  --u-overlay: rgb(17 17 17 / 55%); /* photo overlay under white text */
  --u-error: #b42318;         /* form errors only */
  /* Type (BRAND.md section 6): Figtree 500 headings, Montserrat for the rest (the fonts of THE/STUDIO) */
  --u-font: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --u-font-head: 'Figtree', var(--u-font);
  --u-h1: 2.5rem;             /* 40px phone, 64px desktop */
  --u-h2: 1.75rem;            /* 28px phone, 44px desktop */
  --u-h3: 1.125rem;           /* 18px */
  --u-body: 1rem;
  --u-small: .875rem;
  --u-kicker: .8125rem;       /* 13px, 500, uppercase, +0.08em */
  --u-announce: .75rem;       /* 12px */
  --u-track: .08em;
  --u-track-btn: .04em;
  /* Shape (BRAND.md section 7) */
  --u-radius: 2px;
  --u-btn-h: 48px;
  --u-btn-pad: 0 40px;
  --u-btn-size: .875rem;      /* 14px, 600, uppercase */
  --u-input-h: 48px;
  --u-header-h: 64px;
  /* Layout (8px scale, BRAND.md section 8) */
  --u-max: 1200px;
  --u-gutter: 16px;
  --u-gap: 16px;
  --u-section: 64px;

  /* base.css variables mapped to the tokens */
  --font: var(--u-font);
  --font-head: var(--u-font-head);
  --radius: var(--u-radius);
  --radius-sm: var(--u-radius);
  --shadow: none;
  --line: var(--u-grey-200);
  --soft: var(--u-grey-50);
  --wa: var(--u-black);
  --err: var(--u-error);
}
@media (min-width: 880px) {
  .trial-uretim { --u-h1: 4rem; --u-h2: 2.75rem; --u-h3: 1.25rem; --u-gutter: 32px; --u-gap: 24px; --u-section: 112px; --u-header-h: 72px; }
}
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.trial-uretim { background: var(--u-white); color: var(--u-ink); font: 400 var(--u-body)/1.6 var(--u-font); }
.trial-uretim .wrap { max-width: var(--u-max); padding: 0 var(--u-gutter); }
.trial-uretim .wrap.narrow { max-width: 720px; }
.trial-uretim a { color: var(--u-ink); }

/* Type */
.trial-uretim h1, .trial-uretim h2 { font-family: var(--u-font-head); font-weight: 500; letter-spacing: -0.01em; color: inherit; }
.trial-uretim h1 { font-size: var(--u-h1); line-height: 1.1; margin: 0 0 16px; }
.trial-uretim h2 { font-size: var(--u-h2); line-height: 1.15; margin: 0 0 16px; }
.trial-uretim h3 { font: 600 var(--u-h3)/1.3 var(--u-font-head); margin: 0 0 4px; }
.trial-uretim .lead { color: var(--u-grey-500); font-size: 1.0625rem; }
.u-kicker { margin: 0 0 16px; font-size: var(--u-kicker); font-weight: 500; letter-spacing: var(--u-track); text-transform: uppercase; }
.u-h1-2, .u-h2-2 { display: block; }
.u-title { text-align: center; margin-bottom: 40px !important; }

/* Announcement bar + header. Inner pages: dark band. Landing: transparent on top of the hero photo. */
.trial-uretim .announce { margin: 0; background: var(--u-black); color: var(--u-white); text-align: center; font-size: var(--u-announce); font-weight: 500; padding: 9px var(--u-gutter); }
.trial-uretim .site-header { position: sticky; top: 0; background: var(--u-band); backdrop-filter: none; border-bottom: 0; color: var(--u-white); }
.trial-uretim .header-inner { min-height: var(--u-header-h); gap: 16px; }
.trial-uretim .brand { font-family: var(--u-font-head); font-weight: 500; font-size: 1.125rem; letter-spacing: .24em; color: var(--u-white); }
.trial-uretim .site-nav { display: none; margin-left: 88px; gap: 40px; }
.trial-uretim .site-nav a { padding: 8px 0; border-radius: 0; font-size: .9375rem; font-weight: 500; color: var(--u-white); }
.trial-uretim .site-nav a:hover { background: none; text-decoration: underline; text-underline-offset: 6px; }
.trial-uretim .header-cta { margin-left: auto; display: inline-flex; align-items: center; min-height: 36px; padding: 0 16px; background: var(--u-grey-50); color: var(--u-ink); border-radius: var(--u-radius); font-size: var(--u-small); font-weight: 500; text-decoration: none; white-space: nowrap; }
.trial-uretim .header-cta:hover { background: var(--u-white); }
@media (min-width: 880px) {
  .trial-uretim .site-nav { display: flex; }
  .trial-uretim .header-cta { margin-left: auto; }
}
.u-home .site-header { position: relative; z-index: 20; background: transparent; }
.u-home .u-hero { margin-top: calc(-1 * var(--u-header-h)); }
@media (max-width: 559px) { .trial-uretim .brand { font-size: .9375rem; letter-spacing: .16em; } }

/* Footer: black, wordmark only */
.trial-uretim .site-footer { background: var(--u-black); color: var(--u-white); border: 0; padding: 48px 0; }
.trial-uretim .footer-brand { color: var(--u-white); font-family: var(--u-font-head); font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.trial-uretim .footer-small { color: var(--u-on-dark-2); }

/* Buttons: rectangle 2px, 48px, Montserrat 600 14px uppercase. On white: black fill / black outline.
   On dark or photo (.u-dark): light fill / white outline. Full width on phones. */
.trial-uretim .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--u-btn-h); padding: var(--u-btn-pad);
  border-radius: var(--u-radius); border: 1px solid var(--u-black); background: transparent; color: var(--u-black);
  font: 600 var(--u-btn-size)/1 var(--u-font); letter-spacing: var(--u-track-btn); text-transform: uppercase;
  text-decoration: none; cursor: pointer; box-shadow: none; width: 100%;
}
.trial-uretim .btn-primary { background: var(--u-black); color: var(--u-white); }
.trial-uretim .btn-primary:hover { background: var(--u-grey-800); border-color: var(--u-grey-800); }
.trial-uretim .btn-ghost:hover, .trial-uretim .btn:not(.btn-primary):hover { background: var(--u-black); color: var(--u-white); }
.u-hero .btn-primary, .u-band .btn-primary, .u-cta .btn-primary { background: var(--u-grey-50); border-color: var(--u-grey-50); color: var(--u-ink); }
.u-hero .btn-primary:hover, .u-band .btn-primary:hover, .u-cta .btn-primary:hover { background: var(--u-white); border-color: var(--u-white); }
.u-hero .btn-ghost { border-color: var(--u-white); color: var(--u-white); }
.trial-uretim .u-hero .btn-ghost:hover { background: var(--u-white); color: var(--u-ink); }
@media (min-width: 880px) { .trial-uretim .btn { width: auto; } .trial-uretim .btn-block, .trial-uretim .form-actions .btn-primary { width: 100%; } }
.u-actions { display: grid; gap: 16px; }
@media (min-width: 880px) { .u-actions { display: flex; justify-content: center; gap: 20px; } }

/* Hero: full-bleed photo with a dark overlay, centred text (THE/STUDIO) */
.u-hero { position: relative; display: grid; min-height: max(600px, calc(100svh - 40px)); background: var(--u-band); color: var(--u-white); overflow: hidden; }
.u-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.u-hero::after { content: ''; position: absolute; inset: 0; background: var(--u-overlay); }
.u-hero-text { position: relative; z-index: 1; align-self: center; text-align: center; padding-top: calc(var(--u-header-h) + 48px); padding-bottom: 80px; }
.u-hero h1 { margin: 0 auto 16px; max-width: 16ch; }
.u-h1-2 { color: var(--u-on-dark-2); }
.u-hero-sub { font-size: 1.125rem; max-width: 40ch; margin: 0 auto 40px; }
@media (min-width: 880px) { .u-hero h1 { max-width: none; } .u-hero-sub { font-size: 1.25rem; max-width: 52ch; } }

/* Statement: large centred text on white */
.u-statement { padding: var(--u-section) 0 48px; text-align: center; }
.u-statement h2 { max-width: 20ch; margin: 0 auto 16px; font-size: clamp(2rem, 4.5vw, 3.25rem); }
.u-h2-2 { color: var(--u-grey-400); }
.u-statement p { color: var(--u-grey-500); margin: 0 auto; max-width: 48ch; }

/* Photo mosaic: 2 × 2 on phones, 4 in a row on desktop, full bleed */
.u-mosaic { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.u-mosaic figure { margin: 0; background: var(--u-grey-50); aspect-ratio: 4 / 5; overflow: hidden; }
.u-mosaic img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 880px) { .u-mosaic { grid-template-columns: repeat(4, 1fr); gap: 8px; } }

/* Sections */
.u-section { padding: var(--u-section) 0; }
.u-note { color: var(--u-grey-500); font-size: var(--u-small); margin: 16px 0 0; text-align: center; }

/* Capability table */
.u-table { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--u-ink); }
.u-row { display: grid; grid-template-columns: 88px 1fr; grid-template-areas: 'img name' 'img min' 'img lead'; column-gap: 16px; row-gap: 2px; padding: 16px 0; border-bottom: 1px solid var(--u-grey-200); align-items: center; }
.u-row-head { display: none; }
.u-row-img { grid-area: img; align-self: start; display: block; }
.u-row-img img { width: 88px; height: 88px; object-fit: cover; background: var(--u-grey-50); }
.u-row-name { grid-area: name; }
.u-row-name a { color: var(--u-ink); font: 600 var(--u-h3)/1.3 var(--u-font-head); text-decoration: none; }
.u-row-name a:hover { text-decoration: underline; text-underline-offset: 4px; }
.u-row-name span { display: block; color: var(--u-grey-500); font-size: var(--u-small); }
.u-row-val { font-size: .9375rem; font-variant-numeric: tabular-nums; }
.u-row-min { grid-area: min; }
.u-row-lead { grid-area: lead; }
.u-row-label { color: var(--u-grey-500); font-size: .8125rem; margin-right: 6px; }
@media (min-width: 760px) {
  .u-row { grid-template-columns: 120px 2fr 1fr 1fr; grid-template-areas: none; column-gap: 32px; }
  .u-row > * { grid-area: auto !important; }
  .u-row-head { display: grid; padding: 12px 0; font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: var(--u-track); color: var(--u-grey-500); }
  .u-row-img img { width: 120px; height: 120px; }
  .u-row-label { display: none; }
  .u-row-val { font-weight: 500; }
}

/* Process band: dark, numbered columns, light button */
.u-band { background: var(--u-band); color: var(--u-white); padding: var(--u-section) 0; text-align: center; }
.u-steps { list-style: none; margin: 0 0 48px; padding: 0; display: grid; gap: 32px; text-align: left; }
.u-steps li { border-top: 1px solid rgb(255 255 255 / 25%); padding-top: 20px; }
.u-step-n { display: block; font: 500 var(--u-small)/1 var(--u-font); letter-spacing: var(--u-track); color: var(--u-on-dark-2); margin-bottom: 16px; }
.u-steps h3 { color: var(--u-white); }
.u-steps p { margin: 0; color: var(--u-on-dark-2); font-size: var(--u-small); }
.u-steps .u-step-time { color: var(--u-white); font-weight: 600; margin-bottom: 8px; font-size: var(--u-small); }
@media (min-width: 760px) { .u-steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .u-steps { grid-template-columns: repeat(4, 1fr); gap: var(--u-gap); } }

/* Split band: numbers on grey left, photo right (THE/STUDIO "years of craft") */
.u-split { display: grid; background: var(--u-grey-50); }
.u-split-text { padding: var(--u-section) var(--u-gutter); }
.u-split-img { margin: 0; aspect-ratio: 1; overflow: hidden; background: var(--u-grey-200); }
.u-split-img img { width: 100%; height: 100%; object-fit: cover; }
.u-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 24px; margin: 40px 0; }
.u-facts dt { font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: var(--u-track); color: var(--u-grey-500); margin-bottom: 4px; }
.u-facts dd { margin: 0; font: 500 2.25rem/1.1 var(--u-font-head); font-variant-numeric: tabular-nums; }
.u-facts dd span { display: block; font: 400 var(--u-small)/1.4 var(--u-font); color: var(--u-grey-500); }
.u-proof { display: grid; gap: 16px; margin: 0; border-top: 1px solid var(--u-grey-200); padding-top: 24px; }
.u-proof dt { font-weight: 600; }
.u-proof dd { margin: 0; color: var(--u-grey-500); font-size: var(--u-small); }
@media (min-width: 880px) {
  .u-split { grid-template-columns: 1fr 1fr; align-items: stretch; }
  .u-split-text { padding: var(--u-section) 64px; max-width: 640px; justify-self: end; }
  .u-split-img { aspect-ratio: auto; min-height: 560px; }
  .u-facts dd { font-size: 3.25rem; }
  .u-proof { grid-template-columns: 1fr 1fr; gap: 24px; }
}

/* Closing call to action on a dark photo */
.u-cta { position: relative; display: grid; min-height: clamp(480px, 70svh, 640px); background: var(--u-band); color: var(--u-white); overflow: hidden; text-align: center; }
.u-cta-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.u-cta::after { content: ''; position: absolute; inset: 0; background: var(--u-overlay); }
.u-cta-text { position: relative; z-index: 1; align-self: center; padding-top: 64px; padding-bottom: 64px; }
.u-cta p { color: var(--u-on-dark-2); margin: 0 auto 32px; }

/* The floating WhatsApp button stays (base.css): black, square corners */
.trial-uretim .wa-float { color: var(--u-white); border-radius: var(--u-radius); box-shadow: none; font-size: var(--u-small); font-weight: 500; }
.trial-uretim main .btn-wa { display: none; }

/* Brief form: one column, labels above, rectangles; step titles in Figtree over a black rule */
.u-brief { padding: 48px 0 var(--u-section); }
.u-brief h1 { font-size: var(--u-h2); margin-bottom: 8px; }
.u-brief-form { margin-top: 32px; }
.u-step { border: 0; border-radius: 0; background: transparent; padding: 0 0 8px; margin: 0; display: grid; gap: 20px; min-width: 0; }
.u-step-title { width: 100%; padding: 0 0 12px; margin-bottom: 20px; border-bottom: 1px solid var(--u-ink); font: 500 1.5rem/1.2 var(--u-font-head); display: block; float: left; }
.u-step-title + * { clear: both; }
.u-step-no { display: block; font: 500 .75rem/1.4 var(--u-font); text-transform: uppercase; letter-spacing: var(--u-track); color: var(--u-grey-500); margin-bottom: 4px; }
.js-steps .u-step-no { display: none; }
.u-two { display: grid; gap: 20px; }
@media (min-width: 560px) { .u-two { grid-template-columns: 1fr 1fr; } .u-price { grid-template-columns: 2fr 1fr; } }
.u-total:empty { display: none; }
.u-total { margin: -8px 0 0; }
.u-total.u-warn { color: var(--u-error); }
.u-progress { display: grid; gap: 8px; }
.u-progress-bar { height: 2px; background: var(--u-grey-200); overflow: hidden; }
.u-progress-bar span { display: block; height: 100%; width: 0; background: var(--u-black); transition: width .25s; }
.u-progress-text { margin: 0; font-size: .75rem !important; font-weight: 500; text-transform: uppercase; letter-spacing: var(--u-track); }
.u-step-nav { display: flex; gap: 12px; margin-top: 8px; }
.trial-uretim .u-step-nav .btn { flex: 1; padding: 0 24px; }
.js-steps .u-step[hidden], .js-steps .form-actions[hidden] { display: none; }
.u-step-error { color: var(--u-error); font-size: var(--u-small); margin: 0; }
.trial-uretim fieldset { min-width: 0; }
.trial-uretim .label { font-weight: 500; font-size: var(--u-small); }
.trial-uretim .hint, .trial-uretim .opt, .trial-uretim .form-note, .trial-uretim .muted { color: var(--u-grey-500); }
.trial-uretim input[type=text], .trial-uretim input[type=tel], .trial-uretim input[type=email], .trial-uretim input[type=number], .trial-uretim input[type=date], .trial-uretim select, .trial-uretim textarea {
  border: 1px solid var(--u-grey-200); border-radius: var(--u-radius); background: var(--u-white); min-height: var(--u-input-h); font-family: var(--u-font); color: var(--u-ink);
}
.trial-uretim input:hover, .trial-uretim select:hover, .trial-uretim textarea:hover { border-color: var(--u-ink); }
.trial-uretim input:focus-visible, .trial-uretim select:focus-visible, .trial-uretim textarea:focus-visible, .trial-uretim a:focus-visible, .trial-uretim .btn:focus-visible, .trial-uretim button:focus-visible, .trial-uretim summary:focus-visible, .trial-uretim .choice input:focus-visible + .choice-body { outline: 2px solid var(--u-ink); outline-offset: 2px; border-color: var(--u-ink); }
.u-hero a:focus-visible, .u-band a:focus-visible, .u-cta a:focus-visible, .site-header a:focus-visible { outline-color: var(--u-white) !important; }
.trial-uretim .has-error input, .trial-uretim .has-error select, .trial-uretim .has-error textarea, .field-choices.has-error .choice-body { border-color: var(--u-error); }
.trial-uretim .choices { gap: 8px; }
.trial-uretim .choice-body { border: 1px solid var(--u-grey-200); border-radius: var(--u-radius); background: var(--u-white); }
.trial-uretim .choice:hover .choice-body { border-color: var(--u-ink); }
.trial-uretim .choice input:checked + .choice-body { border-color: var(--u-ink); box-shadow: inset 0 0 0 1px var(--u-ink); background: var(--u-grey-50); }
.trial-uretim .choice-label { font-weight: 600; }
.trial-uretim .choice-hint { color: var(--u-grey-500); }
.trial-uretim .check input { accent-color: var(--u-ink); }
.trial-uretim .file-input { border: 1px dashed var(--u-ink); border-radius: var(--u-radius); background: var(--u-grey-50); }
.trial-uretim .file-input::file-selector-button { margin-right: 12px; padding: 12px 16px; border: 1px solid var(--u-ink); border-radius: var(--u-radius); background: var(--u-white); color: var(--u-ink); font: 600 .75rem var(--u-font); letter-spacing: var(--u-track-btn); text-transform: uppercase; cursor: pointer; }
.trial-uretim .alert-error { border-radius: var(--u-radius); background: var(--u-white); border: 1px solid var(--u-error); }
.trial-uretim .error { color: var(--u-error); }

/* Confirmation, call booking, project page (shared core pages in the /uretim look) */
.trial-uretim .section { padding: 48px 0; }
.trial-uretim .confirm-card { border-top: 1px solid var(--u-ink); }
.trial-uretim .confirm .lead, .trial-uretim .confirm-card .lead { color: var(--u-ink); }
.trial-uretim .wa-inline { font-weight: 500; }
.trial-uretim .wa-inline svg { color: var(--u-ink); }
.trial-uretim .card { border-radius: 0; border: 0; border-top: 1px solid var(--u-grey-200); padding: 24px 0; box-shadow: none; background: transparent; }
.trial-uretim .card h2 { font-size: 1.5rem; }
.trial-uretim .badge { border-radius: var(--u-radius); background: var(--u-grey-50); }
.trial-uretim .badge-won, .trial-uretim .badge-lost { background: var(--u-grey-50); color: var(--u-ink); }
.trial-uretim .track-status .status-won, .trial-uretim .ok { color: var(--u-ink); }
.trial-uretim .step-done .dot, .trial-uretim .step-current .dot { background: var(--u-ink); border-color: var(--u-ink); }
.trial-uretim .step-current .dot { box-shadow: 0 0 0 4px var(--u-grey-200); }
.trial-uretim .thumb, .trial-uretim .file-link, .trial-uretim .file-preview figure { border-radius: 0; }
.trial-uretim .kv > div { border-bottom: 1px solid var(--u-grey-200); }
.u-after { padding-top: 0 !important; }
.u-slot-form { display: grid; gap: 16px; margin-top: 16px; }
.u-slot { border: 0; padding: 0; margin: 0; min-width: 0; }
.u-slot legend { padding: 0; margin-bottom: 8px; }
.u-slot-row { display: grid; grid-template-columns: 1.3fr 1fr; gap: 8px; }
.u-slot-local { margin: 4px 0 0; min-height: 1.2em; }
.u-slot-list { margin: 0 0 16px; padding-left: 20px; }
.u-slot-list li { margin-bottom: 4px; }
.u-change summary { cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.u-call-confirmed { font-size: 1.0625rem; }
.u-thread { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 8px; }
.u-msg { padding: 12px 16px; border: 1px solid var(--u-grey-200); max-width: 92%; }
.u-msg p { margin: 0; }
.u-msg-brand { background: var(--u-grey-50); justify-self: end; }
.u-msg-team { background: var(--u-white); justify-self: start; border-left: 2px solid var(--u-ink); }
.u-msg-meta { font-size: .8125rem; color: var(--u-grey-500); margin-bottom: 4px; }
.u-comment-form { display: grid; gap: 8px; }
.trial-uretim .u-comment-form .btn { justify-self: start; padding: 0 24px; }