.mnav:focus { outline: none; }
.mnav :focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 4px; }

.mnav {
  inset: 0;
  width: 100vw;
  max-width: 100vw;
  height: 100svh;
  max-height: 100svh;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--paper);
  overflow: clip;
  box-shadow: none;
}
.mnav__sheet {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
  min-height: 0;
  /* One measure for the whole sheet. The bar, the index, the action and the
     utility strip all start on the same left edge — the single strongest
     signal that this was composed rather than assembled. */
  --mnav-inset: clamp(1.375rem, 6vw, 2rem);
}
/* --------------------------------------------------------------------- bar */
/* Sticky, so the way out is never scrolled away. */
.mnav__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 4.2vw, 1.5rem) var(--mnav-inset);
  padding-top: calc(clamp(1rem, 4.2vw, 1.5rem) + env(safe-area-inset-top, 0px));
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.brand--mnav {
  --mark-size: clamp(2.6rem, 11.5vw, 3.1rem);
  --descriptor-scale: 0.262;
  --lockup-gap: 0.23;
  /* Intrinsic width, deliberately. min-width:0 here let the flex bar squeeze
     the lockup while `white-space: nowrap` kept the wordmark at full length —
     so it silently overflowed under the close control instead of the layout
     telling anyone. Sized off vw, it fits from 320px up with room to spare. */
  flex: none;
}
/* A labelled control, not an anonymous glyph. 44px of height, the word that
   says what it does, and the cross kept to a hairline so it belongs to the
   same drawing as the gate line. */
.mnav__close {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  flex: none;
  height: 2.75rem;
  padding-inline: .95rem;
  border: 1px solid var(--line);
  border-radius: 2rem;
  color: var(--ink);
  background: transparent;
  transition: background 220ms var(--motion), border-color 220ms var(--motion), color 220ms var(--motion);
}
.mnav__close-text {
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  margin-right: -.14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 220ms var(--motion);
}
.mnav__close svg {
  width: .875rem;
  height: .875rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
}
.mnav__close:hover,
.mnav__close:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.mnav__close:hover .mnav__close-text,
.mnav__close:focus-visible .mnav__close-text { color: var(--paper); }
/* -------------------------------------------------------------------- body */
/* A column, not a stack. The index sits at the top where the eye starts; the
   action and the utility strip settle onto the bottom edge, so a tall phone
   reads as a composed page with the conclusion at the foot rather than as a
   short list with 200px of dead paper under it. When a group is open and the
   content outgrows the sheet, the auto margin collapses and it simply scrolls. */
.mnav__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: clamp(1.25rem, 5vw, 1.75rem) var(--mnav-inset)
           calc(clamp(1.5rem, 6vw, 2.25rem) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: clamp(1.5rem, 5.5vw, 2.25rem);
}
.mnav__nav { flex: 0 0 auto; }
.mnav__cta { margin-top: auto; }
/* ------------------------------------------------------------------- index */
.mnav__index { display: grid; }
.mnav__item + .mnav__item { border-top: 1px solid var(--line); }
.mnav__row {
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  align-items: start;
  gap: 0;
  width: 100%;
  /* Height, not just width. Four rows have to hold the middle of the sheet on
     an 844pt phone; sized only off vw they left a 500px hole between the last
     label and the action. The svh term lets the index itself be the generous
     thing, instead of the emptiness under it. Never below ~62px of target. */
  padding: clamp(.95rem, 4.3svh, 2.6rem) 0;
  text-align: left;
  color: var(--ink);
  background: none;
  border: 0;
}
/* Cap-line alignment, derived rather than nudged.
   Manrope: ascent 1.066em, descent .3em, cap height .72em. For a line-height
   of L the half-leading is (L - 1.366)/2, so the cap sits (L - 1.366)/2 +
   1.066 - .72 below the box top. That is .163em at L=1 (the number) and
   .193em at L=1.06 (the label). Aligning the two means offsetting the number
   by the difference — which is what makes it read as marginal numbering on the
   label's own horizontal instead of as a bullet floating beside it. */
.mnav__num {
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  color: var(--gold-ink);
  padding-top: calc(var(--mnav-label-size) * 0.193 - .112rem);
  transition: color 240ms var(--motion);
}
.mnav__label {
  --mnav-label-size: clamp(1.75rem, 8.4vw, 2.25rem);
  font-size: var(--mnav-label-size);
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.028em;
  color: var(--ink);
  transition: color 240ms var(--motion);
}
.mnav__row { --mnav-label-size: clamp(1.75rem, 8.4vw, 2.25rem); }
/* The disclosure mark: two hairlines, the vertical one retracting to nothing.
   A plus that becomes a minus states the state without a rotating chevron. */
.mnav__sign {
  position: relative;
  width: 1rem;
  height: 1rem;
  /* .193em to the cap line + half a cap height, less half the mark's box. */
  margin-top: calc(var(--mnav-label-size) * 0.553 - .5rem);
  flex: none;
}
.mnav__sign::before,
.mnav__sign::after {
  content: '';
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1px;
  background: var(--ink);
  transform: translateY(-50%);
  transition: transform 340ms var(--motion), background 240ms;
}
.mnav__sign::after { transform: translateY(-50%) rotate(90deg); }
.mnav__row[aria-expanded="true"] .mnav__sign::after { transform: translateY(-50%) rotate(90deg) scaleX(0); }
.mnav__row[aria-expanded="true"] .mnav__sign::before,
.mnav__row[aria-expanded="true"] .mnav__sign::after { background: var(--gold-deep); }
.mnav__row[aria-expanded="true"] .mnav__label { color: var(--gold-ink); }
.mnav__row[aria-expanded="true"] .mnav__num { color: var(--gold-deep); }
@media (hover: hover) {
  .mnav__row:hover .mnav__label { color: var(--gold-ink); }
  .mnav__row:hover .mnav__num { color: var(--gold-deep); }
}
.mnav__row:focus-visible .mnav__label { color: var(--gold-ink); }
.mnav__row:active .mnav__label { color: var(--gold-ink); }
/* ------------------------------------------------------- disclosure panel */
/* 0fr → 1fr animates to the content's own height with no measured pixel value
   anywhere, so a group of three and a group of six behave identically. */
.mnav__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 460ms var(--motion);
}
.mnav__panel-inner {
  overflow: hidden;
  position: relative;
  min-height: 0;
}
.mnav__item.is-open > .mnav__panel { grid-template-rows: 1fr; }
/* THE GATE LINE — the mark's arch at 1px. A short top run, a quarter-arc
   shoulder, then the spine. clip-path wipes it downward instead of scaleY, so
   the arc keeps its radius while it draws. */
.mnav__gate {
  position: absolute;
  left: .55rem;
  top: .15rem;
  bottom: 1.15rem;
  width: 1.15rem;
  border-left: 1px solid var(--gold);
  border-top: 1px solid var(--gold);
  border-top-left-radius: 1.15rem;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 520ms var(--motion) 60ms;
  pointer-events: none;
}
.mnav__item.is-open .mnav__gate { clip-path: inset(0 0 0 0); }
.mnav__sub {
  display: grid;
  padding: 0 0 1.15rem 2.4rem;
}
.mnav__sub a {
  display: block;
  min-height: 2.875rem;
  padding: .7rem 0;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink);
  opacity: 0;
  transform: translateY(.4rem);
  transition: opacity 320ms var(--motion), transform 320ms var(--motion), color 200ms;
}
.mnav__item.is-open .mnav__sub a { opacity: 1; transform: none; }
.mnav__item.is-open .mnav__sub li:nth-child(1) a { transition-delay: 150ms; }
.mnav__item.is-open .mnav__sub li:nth-child(2) a { transition-delay: 190ms; }
.mnav__item.is-open .mnav__sub li:nth-child(3) a { transition-delay: 230ms; }
.mnav__item.is-open .mnav__sub li:nth-child(4) a { transition-delay: 270ms; }
.mnav__item.is-open .mnav__sub li:nth-child(5) a { transition-delay: 310ms; }
.mnav__item.is-open .mnav__sub li:nth-child(6) a { transition-delay: 350ms; }
.mnav__sub a:hover,
.mnav__sub a:focus-visible,
.mnav__sub a:active { color: var(--gold-ink); }
/* --------------------------------------------------------------------- cta */
/* Charcoal, not another gold slab. Gold reads as the accent ON the block —
   the label and a hairline disc — which is how the rest of the site uses it,
   and it lets the action close the page instead of shouting over it. */
.mnav__cta { display: grid; gap: .7rem; }
.mnav__cta-note {
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.mnav__action {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.75rem;
  padding: .9rem 1rem .9rem 1.35rem;
  border-radius: .4rem;
  background: var(--ink);
  color: var(--gold-lit);
  transition: background 260ms var(--motion);
}
.mnav__action-label {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.mnav__action-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.125rem;
  height: 2.125rem;
  border: 1px solid rgb(240 178 26 / .38);
  border-radius: 50%;
  transition: background 260ms var(--motion), border-color 260ms var(--motion);
}
.mnav__action-icon svg {
  width: .95rem;
  height: .95rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 300ms var(--motion), stroke 260ms var(--motion);
}
.mnav__action:hover,
.mnav__action:focus-visible,
.mnav__action:active { background: #1a201b; }
.mnav__action:hover .mnav__action-icon,
.mnav__action:focus-visible .mnav__action-icon,
.mnav__action:active .mnav__action-icon { background: var(--gold-lit); border-color: var(--gold-lit); }
.mnav__action:hover .mnav__action-icon svg,
.mnav__action:focus-visible .mnav__action-icon svg,
.mnav__action:active .mnav__action-icon svg { stroke: var(--ink); transform: translate(2px, -2px); }
/* ----------------------------------------------------------------- utility */
/* A corporate strip, not a caption dump: two labelled cells on one baseline,
   under a rule, at a weight that says "reference" rather than "read me". */
.mnav__utility {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem 1.5rem;
  padding-top: clamp(1.1rem, 4.5vw, 1.5rem);
  border-top: 1px solid var(--line);
}
.mnav__utility-cell { display: grid; gap: .38rem; }
.mnav__utility-cell:last-child { text-align: right; }
.mnav__utility-label {
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .16em;
  margin-right: -.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.mnav__utility-cell a,
.mnav__utility-cell p {
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.mnav__utility-cell a { transition: color 200ms; }
.mnav__utility-cell a:hover,
.mnav__utility-cell a:focus-visible { color: var(--gold-ink); }
/* ------------------------------------------------------------------ motion */
/* The sheet settles rather than slides: it is the whole screen, so a lateral
   slide would read as a panel arriving from somewhere. Everything after it is
   a short stagger measured in tens of milliseconds — present, not performed. */
.mnav, .mnav::backdrop {
  transition: opacity 300ms var(--motion), transform 380ms var(--motion),
              display 380ms allow-discrete, overlay 380ms allow-discrete;
}
.mnav { opacity: 1; transform: none; }
.mnav:not([open]) { opacity: 0; transform: translateY(.75rem); }
@starting-style {
  .mnav[open] { opacity: 0; transform: translateY(.75rem); }
}
.mnav::backdrop { background: rgb(25 32 26 / .3); opacity: 1; }
.mnav:not([open])::backdrop { opacity: 0; }
.mnav__bar, .mnav__item, .mnav__cta, .mnav__utility {
  opacity: 1;
  transform: none;
}
.mnav[open] .mnav__bar,
.mnav[open] .mnav__item,
.mnav[open] .mnav__cta,
.mnav[open] .mnav__utility {
  transition: opacity 420ms var(--motion), transform 420ms var(--motion);
}
@starting-style {
  .mnav[open] .mnav__bar,
  .mnav[open] .mnav__item,
  .mnav[open] .mnav__cta,
  .mnav[open] .mnav__utility { opacity: 0; transform: translateY(.75rem); }
}
.mnav[open] .mnav__bar { transition-delay: 40ms; }
.mnav[open] .mnav__item:nth-child(1) { transition-delay: 110ms; }
.mnav[open] .mnav__item:nth-child(2) { transition-delay: 155ms; }
.mnav[open] .mnav__item:nth-child(3) { transition-delay: 200ms; }
.mnav[open] .mnav__item:nth-child(4) { transition-delay: 245ms; }
/* Fifth row: Çözümler became its own group. */
.mnav[open] .mnav__item:nth-child(5) { transition-delay: 290ms; }
.mnav[open] .mnav__cta { transition-delay: 305ms; }
.mnav[open] .mnav__utility { transition-delay: 345ms; }
@media (prefers-reduced-motion: reduce) {
  .mnav, .mnav::backdrop, .mnav *, .mnav *::before, .mnav *::after {
    transition: none !important;
    transition-delay: 0ms !important;
  }
  .mnav:not([open]) { transform: none; }
  .mnav__gate { clip-path: none; }
  .mnav__sub a { opacity: 1; transform: none; }
}
/* --------------------------------------------------------------- adaptive */
/* Tablets keep the same index but stop it from stretching across the width:
   the sheet becomes a right-hand column and the labels stop growing. */
@media (min-width: 40em) {
  .mnav { inset: 0 0 0 auto; width: min(27rem, 100vw); border-left: 1px solid var(--line); box-shadow: -30px 0 90px rgb(23 33 27 / .16); }
  .mnav:not([open]) { transform: translateX(1rem); }
  @starting-style { .mnav[open] { transform: translateX(1rem); } }
}
/* Short phones in landscape, and small phones generally: the index tightens
   before it ever needs to scroll past the action. */
@media (max-height: 44em) {
  .mnav__row { padding-block: clamp(.65rem, 2.4svh, .95rem); }
  .mnav__label { --mnav-label-size: clamp(1.5rem, 7vw, 1.875rem); }
  .mnav__row { --mnav-label-size: clamp(1.5rem, 7vw, 1.875rem); }
  .mnav__body { gap: 1.4rem; }
  .brand--mnav { --mark-size: 2.4rem; }
}
@media (max-height: 34em) {
  .mnav__cta-note { display: none; }
  .mnav__action { min-height: 3.25rem; }
  .mnav__utility { padding-top: .9rem; }
}