/* ==========================================================================
   layout.css — site chrome and page layout:
   header (top bar, brand row, navigation, dropdowns, compact bar, drawer, search dialog),
   home stage band, page hero, breadcrumb trail, sidebar layout, section nav, contact card,
   footer, side rail / bottom action bar, cookie notice.
   Generic components (buttons, chips, cards, forms, dialog, toast …) live in components.css.
   Mobile-first: base = < 1024 px (compact bar + drawer); desktop chrome from 1024 px.
   ========================================================================== */

/* ---------------------------------------------------------------- header */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-navy-800);
  color: var(--color-white);
}

/* top bar: contact + utility links + language (desktop only) */
.top-bar {
  display: none;
  background: var(--color-navy-800);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

.site-header--home .top-bar {
  background: var(--color-navy-900);
}

.top-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  height: var(--header-topbar-height);
}

.top-bar__contact,
.top-bar__aside,
.top-bar__links {
  display: flex;
  align-items: center;
}

.top-bar__contact {
  gap: var(--space-28);
  min-width: 0;
  overflow: hidden;   /* very long addresses in the settings are cut with an ellipsis instead of running into the utility links */
}

.top-bar__aside {
  flex: none;
  gap: var(--space-24);
}

.top-bar__links {
  gap: var(--space-24);
}

.top-bar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-width: 0;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

.top-bar__item--muted {
  color: var(--color-on-dark);
}

.top-bar__item:hover,
.top-bar__link:hover {
  color: var(--color-sky-400);
}

.top-bar__link {
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

.top-bar__item > span {
  overflow: hidden;
  text-overflow: ellipsis;
}

.top-bar__contact > li {
  display: flex;
  flex: 0 1 auto;
  min-width: 0;
}

.top-bar__contact > .top-bar__phone {
  flex: none;   /* the telephone number never gives way; the e-mail and KEP addresses do */
}

.top-bar__kep {
  display: none;
}

.top-bar__divider {
  width: 1px;
  height: 14px;
  background: var(--color-on-dark-border);
}

/* language switch */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
}

.lang-switch__item {
  color: var(--color-on-dark);
  transition: color var(--dur-fast) var(--ease-out);
}

a.lang-switch__item:hover {
  color: var(--color-white);
}

.lang-switch__item.is-current {
  color: var(--color-white);
  font-weight: var(--weight-bold);
}

/* main header area (brand row + navigation) */
.site-header__main {
  display: none;
  padding-block: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}

.brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  min-height: 102px;
  padding-block: var(--space-10);
  margin-bottom: 16px;
}

.brand {
  display: inline-flex;
  align-items: flex-end;
  gap: 22px;
  color: var(--color-white);
}

.brand__logo {
  flex: none;
  width: 131px;
  height: 77px;
}

.brand__name {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-left: 22px;
  border-left: 1.375px solid var(--color-border);
  white-space: nowrap;
}

/* wordmark: heavy slab "CEYHAN" over a serif line of the same width (the sub line is justified to the width of the first) */
.brand__name-strong {
  font-family: "Roboto Slab", Georgia, "Times New Roman", serif;
  font-size: 36px;
  font-weight: 900;
  line-height: 40px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.brand__name-sub {
  margin-right: 2px; /* the trailing letter-spacing of the line above is not visible */
  font-family: "PT Serif", Georgia, "Times New Roman", serif;
  font-size: 12px;
  font-weight: 700;
  line-height: 15px;
  text-align: justify;
  text-align-last: justify;
  text-transform: uppercase;
}

.brand-row__aside {
  display: flex;
  align-items: center;
  gap: var(--space-24);
}

.brand-row__aside .brand-row__cta {
  display: none;
}

.brand-row__tagline {
  display: flex;
  align-items: center;
  gap: 22px;
  padding-top: var(--space-6);
  font-size: var(--text-title-size);
  line-height: 1.722;
  white-space: nowrap;
}

.brand-row__emblem {
  flex: none;
  width: 72px;
  height: 75px;
}

.brand-row__slogan-accent {
  color: var(--color-sky-400);
}

/* navigation row */
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-24);
  min-height: 51px;
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}

.main-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(16px, calc(18px + (100vw - 1024px) * 0.06), 40px);   /* 18 px @1024 → 40 px @1440 */
}

.main-nav__item {
  position: relative;
}

.main-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-6);
  min-height: 44px;
  color: var(--color-white);
  font-size: var(--text-body-sm-size);
  line-height: 1.6;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}

.main-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  background: var(--color-sky-400);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.main-nav__link:hover,
.main-nav__item.is-current > .main-nav__link,
.main-nav__item.is-open > .main-nav__link {
  color: var(--color-sky-400);
}

.main-nav__item.is-current > .main-nav__link {
  font-weight: var(--weight-medium);
}

.main-nav__item.is-open > .main-nav__link::after,
.main-nav__link[aria-current="page"]::after {
  opacity: 1;
}

.main-nav__chevron {
  transition: transform var(--dur-base) var(--ease-out);
}

.main-nav__item.is-open .main-nav__chevron {
  transform: rotate(180deg);
}

.nav-row__actions {
  display: flex;
  align-items: center;
  gap: var(--space-20);
  flex: none;
}

/* icon buttons (search, hamburger, close) */
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.icon-button:active {
  transform: scale(0.96);
}

.icon-button--light {
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-navy-800);
}

.icon-button--light:hover {
  background: var(--color-surface);
  color: var(--color-blue-600);
}

.icon-button--ghost-light {
  color: var(--color-white);
}

.icon-button--ghost-light:hover {
  background: var(--color-hover-on-dark);
}

.icon-button--ghost {
  color: var(--color-navy-800);
}

.icon-button--ghost:hover {
  background: var(--color-surface);
}

/* the investor CTA: nav row ≥ 1280, brand row 1024–1279 (see below) */
.nav-row__actions .nav-row__cta {
  white-space: nowrap;
}

/* dropdowns */
.dropdown {
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--space-16));
  z-index: var(--z-dropdown);
  padding-top: 14px;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}

.main-nav__item.is-open > .dropdown,
html:not(.js) .main-nav__item:hover > .dropdown,
html:not(.js) .main-nav__item:focus-within > .dropdown {
  visibility: visible;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition-delay: 0s;
}

.dropdown__panel {
  display: flex;
  gap: var(--space-16);
  width: max-content;
  padding: var(--space-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-dropdown);
}

.dropdown__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 240px;
}

.dropdown__panel > .dropdown__list:only-child {
  min-width: 260px;   /* Figma 101:137 single-column width */
}

.dropdown__list + .dropdown__list {
  padding-left: var(--space-16);
  border-left: 1px solid var(--color-border);
}

.dropdown__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-height: 44px;
  padding: var(--space-10) var(--space-16);
  border-radius: var(--radius-md);
  color: var(--color-navy-800);
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-medium);
  line-height: 1.6;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.dropdown__arrow {
  --icon-size: 16px;
  color: var(--color-blue-500);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}

.dropdown__link:hover,
.dropdown__link:focus-visible,
.dropdown__link[aria-current="page"] {
  background: var(--color-surface);
  color: var(--color-blue-600);
}

.dropdown__link:hover .dropdown__arrow,
.dropdown__link:focus-visible .dropdown__arrow,
.dropdown__link[aria-current="page"] .dropdown__arrow {
  opacity: 1;
  transform: none;
}

/* focus ring of dark chrome elements */
.site-header :focus-visible,
.site-footer :focus-visible,
.drawer :focus-visible,
.page-hero :focus-visible,
.home-stage :focus-visible {
  outline-color: var(--color-sky-400);
}

.site-header .dropdown :focus-visible,
.site-header .icon-button--light:focus-visible,
.site-header .button--on-dark:focus-visible {
  outline-color: var(--color-sky-400);
}

/* ---- compact bar (< 1024 px) */
.compact-bar {
  background: var(--color-navy-800);
  border-bottom: 1px solid var(--color-on-dark-border);
}

.compact-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-height: 64px;
  padding-block: var(--space-8);
}

.compact-bar__actions {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.brand--compact {
  gap: var(--space-12);
  align-items: center;
  min-width: 0;
  min-height: 44px;
}

.brand--compact .brand__logo {
  width: 66px;
  height: 39px;
}

.brand--compact .brand__name {
  gap: 1px;
  padding-left: var(--space-12);
  border-left-width: 1px;
}

/* phones: the desktop wordmark in proportion (36/12 -> 24/8), CEYHAN as wide as the line below (Figma 202:194) */
.brand--compact .brand__name-strong {
  font-size: 24px;
  line-height: 26px;
  letter-spacing: 1px;
}

.brand--compact .brand__name-sub {
  margin-right: 1px;
  font-size: 8px;
  line-height: 10px;
}

/* very narrow phones (320–359 px): the same wordmark a step smaller, so search + menu still fit on the bar */
@media (max-width: 359.98px) {
  .brand--compact {
    gap: var(--space-10);
  }

  .brand--compact .brand__logo {
    width: 54px;
    height: 32px;
  }

  .brand--compact .brand__name {
    padding-left: var(--space-10);
  }

  .brand--compact .brand__name-strong {
    font-size: 20px;
    line-height: 22px;
    letter-spacing: 0.8px;
  }

  .brand--compact .brand__name-sub {
    margin-right: 0.8px;
    font-size: 6.7px;
    line-height: 9px;
  }
}

.compact-bar .icon-button--light {
  border-color: transparent;
  background: transparent;
  color: var(--color-white);
}

.compact-bar .icon-button--light:hover {
  background: var(--color-hover-on-dark);
  color: var(--color-white);
}

/* ---- mobile drawer (native <dialog>) */
.drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(100%, 420px);
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--color-navy-800);
  color: var(--color-white);
  overflow: hidden;
}

.drawer::backdrop {
  background: var(--color-scrim);
}

.drawer[open] {
  animation: drawer-in var(--dur-base) var(--ease-out);
}

.drawer[open]::backdrop {
  animation: drawer-fade var(--dur-base) var(--ease-out);
}

@keyframes drawer-in {
  from { transform: translateX(24px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

@keyframes drawer-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.drawer__panel {
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* the panel only takes the opening focus (dialogApi [data-autofocus]); Tab moves on to the links, no ring on the panel itself */
.drawer__panel:focus {
  outline: none;
}

.drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  min-height: 64px;
  padding: var(--space-8) var(--space-16) var(--space-8) var(--space-20);
  border-bottom: 1px solid var(--color-on-dark-border);
}

.drawer__body {
  flex: 1;
  padding: var(--space-8) var(--space-20) calc(var(--space-32) + env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
  overscroll-behavior: contain;
}

.drawer-nav__item {
  border-bottom: 1px solid var(--color-on-dark-border);
}

.drawer-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  width: 100%;
  min-height: 56px;
  color: var(--color-white);
  font-size: 1.0625rem;
  font-weight: var(--weight-medium);
  text-transform: uppercase;
}

.drawer-nav__item.is-current > .drawer-nav__link {
  color: var(--color-sky-400);
}

.drawer-nav__chevron {
  transition: transform var(--dur-base) var(--ease-out);
}

.drawer-nav__trigger[aria-expanded="true"] .drawer-nav__chevron {
  transform: rotate(180deg);
}

.drawer-nav__sub {
  padding: 0 0 var(--space-12) var(--space-8);
}

.drawer-nav__sublink {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--space-6);
  color: var(--color-on-image);
  font-size: var(--text-body-sm-size);
}

.drawer-nav__sublink:hover,
.drawer-nav__sublink[aria-current="page"] {
  color: var(--color-sky-400);
}

.drawer__cta {
  margin-top: var(--space-24);
}

.drawer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8) var(--space-20);
  margin-top: var(--space-24);
  font-size: var(--text-body-sm-size);
}

.drawer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-on-image);
}

.drawer__contact {
  display: flex;
  flex-direction: column;
  margin-top: var(--space-16);
  padding-top: var(--space-16);
  border-top: 1px solid var(--color-on-dark-border);
  font-size: var(--text-body-sm-size);
}

.drawer__contact a {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  min-height: 44px;
  color: var(--color-white);
}

.drawer__kep {
  display: flex;
  flex-direction: column;
  padding-block: var(--space-8);
  color: var(--color-on-dark);
  font-size: var(--text-small-size);
  overflow-wrap: anywhere;
}

.drawer__kep a {
  min-height: 0;
  color: var(--color-white);
}

.lang-switch--drawer {
  margin-top: var(--space-16);
  gap: var(--space-8);
}

.lang-switch--drawer .lang-switch__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  min-height: 44px;
  padding-inline: var(--space-12);
  border: 1px solid var(--color-on-dark-border);
  border-radius: var(--radius-sm);
}

.lang-switch--drawer .lang-switch__item.is-current {
  border-color: var(--color-white);
}

/* no-JS fallback: the menu is rendered inline under the compact bar (nothing can open the dialog) */
html:not(.js) .compact-bar [data-drawer-open],
html:not(.js) .drawer [data-drawer-close] {
  display: none;
}

@media (max-width: 1023.98px) {
  html:not(.js) .drawer {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
  }

  html:not(.js) .drawer__header {
    display: none;
  }
}

/* ---- search dialog (native <dialog>) */
.search-dialog {
  width: min(100% - 2 * var(--gutter), 720px);
  max-width: none;
  margin: 12vh auto auto;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  color: var(--color-slate-600);
  box-shadow: var(--shadow-dropdown);
}

.search-dialog::backdrop {
  background: var(--color-scrim);
}

.search-dialog[open] {
  animation: dialog-in var(--dur-base) var(--ease-out);
}

.search-dialog[open]::backdrop {
  animation: drawer-fade var(--dur-base) var(--ease-out);
}

@keyframes dialog-in {
  from { transform: translateY(-8px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.search-dialog__panel {
  padding: var(--space-20);
}

.search-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  margin-bottom: var(--space-16);
}

.search-dialog__title {
  font-size: var(--text-title-size);
  line-height: var(--text-title-lh);
}

.search-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
}

.search-form__field {
  position: relative;
  display: flex;
  align-items: center;
}

.search-form__icon {
  position: absolute;
  left: var(--space-16);
  color: var(--color-slate-500);
  pointer-events: none;
}

.search-form__input {
  width: 100%;
  min-height: 52px;
  padding: 0 var(--space-16) 0 var(--space-56);
  border: 1px solid var(--color-control-border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
  color: var(--color-navy-800);
  font-size: 1.0625rem;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}

.search-form__input::placeholder {
  color: var(--color-text-muted);
}

.search-form__input:focus {
  border-color: var(--color-blue-500);
  outline: none;
  box-shadow: var(--shadow-focus);
}

.search-dialog__hint {
  margin-top: var(--space-12);
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

@media (min-width: 480px) {
  .search-form {
    flex-direction: row;
  }

  .search-form__field {
    flex: 1;
  }

  .search-form .button {
    min-height: 52px;
  }
}

/* --------------------------------------------------------- desktop chrome */
@media (min-width: 1024px) {
  .site-header {
    position: relative;
  }

  .top-bar {
    display: block;
  }

  .site-header__main {
    display: block;
  }

  .compact-bar {
    display: none;
  }

  .drawer,
  .drawer::backdrop {
    display: none;
  }

  /* the CTA moves next to the tagline while the nav row is too narrow */
  .brand-row__tagline {
    gap: var(--space-16);
  }

  .nav-row__actions .nav-row__cta {
    display: none;
  }

  .brand-row {
    gap: var(--space-16);
  }

  .brand-row__aside .brand-row__cta {
    display: inline-flex;
  }
}

@media (min-width: 1280px) {
  .top-bar__kep {
    display: block;
  }

  .nav-row__actions .nav-row__cta {
    display: inline-flex;
  }

  .brand-row__aside .brand-row__cta {
    display: none;
  }

  .brand-row__tagline {
    gap: 22px;
    margin-right: var(--space-10);
  }
}

/* ------------------------------------------------------------- home stage */
/* navy band of the header continues behind the top of the slider (Figma 46:200: the band ends at 51 % of the centre slide,
   y = 536 at 1440 = 310 px below the header). The slide height follows the stage width, so the band does too. */
.home-stage {
  --stage-top: var(--space-24);          /* keep in sync with .hero-slider (--hero-slider-top) */
  --stage-slide: calc((100vw - 2 * var(--gutter)) * 0.582);   /* single full-width slide below 768 */
  position: relative;
}

.home-stage::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: calc(var(--stage-top) + var(--stage-slide) * 0.5);
  background: var(--color-navy-800);
}

/* no slides (an empty panel): the band would stand behind nothing */
.home-stage--empty::before {
  display: none;
}

.home-stage__slogan {
  display: none;
}

/* phones (Figma 202:188): the navy band wraps the whole slider (caption, slides, controls) and ends in a rounded white sheet */
@media (max-width: 767.98px) {
  .home-stage:not(.home-stage--empty) {
    padding-bottom: calc(var(--space-24) + var(--space-16));
    background: linear-gradient(180deg, var(--color-navy-800) 0%, var(--color-navy-900) 100%);
  }

  .home-stage:not(.home-stage--empty)::before {
    display: none;
  }

  .home-stage:not(.home-stage--empty)::after {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: var(--space-24);
    border-radius: var(--space-24) var(--space-24) 0 0;
    background: var(--color-white);
  }

  .home-stage__slogan {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3em;
    margin: 0;
    padding-top: var(--space-10);
    color: var(--color-white);
    font-size: var(--text-body-sm-size);
    font-weight: 500;
    line-height: 1.4;
  }

  .home-stage__slogan span {
    color: var(--color-sky-400);
  }

  /* Atatürk emblem in front of the slogan, as in the desktop header (Figma 210:189) */
  .home-stage__emblem {
    flex: none;
    width: auto;
    height: 40px;
    margin-right: calc(var(--space-12) - 0.3em);
  }

  /* controls now sit on navy, not on the white page */
  .home-stage .hero-slider__controls :focus-visible {
    outline-color: var(--color-sky-400);
  }

  .home-stage .hero-slider__controls .button--secondary {
    border-color: rgb(255 255 255 / 0.4);
    background: transparent;
    color: var(--color-white);
  }

  .home-stage .hero-slider__controls .button--secondary:hover {
    background: var(--color-hover-on-dark);
  }

  .home-stage .hero-slider__controls .button--ghost {
    color: var(--color-on-dark);
  }

  .home-stage .hero-slider__dot::before {
    background: rgb(255 255 255 / 0.4);
  }

  .home-stage .hero-slider__dot[aria-current="true"]::before {
    background: var(--color-sky-400);
  }

  .home-stage .hero-slider__floor {
    background: #000;
    opacity: 0.25;
  }
}

@media (min-width: 768px) {
  .home-stage {
    --stage-top: var(--space-32);
    --stage-slide: calc(min(100vw, 1440px) * 0.3549);   /* 511 / 1440 */
  }

  .home-stage::before {
    height: calc(var(--stage-top) + var(--stage-slide) * 0.5106);
  }
}

@media (min-width: 1024px) {
  .home-stage {
    --stage-top: var(--space-48);
  }
}

/* --------------------------------------------------------------- page hero */
.page-hero {
  background: var(--color-navy-800);
  color: var(--color-white);
}

.page-hero__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-top: var(--space-24);
  padding-bottom: var(--space-32);
}

.page-hero__title {
  color: var(--color-white);
}

.page-hero__intro,
.page-hero__meta {
  max-width: 760px;
  color: var(--color-on-image);
  font-size: var(--text-lead-size);
  line-height: var(--text-lead-lh);
}

.page-hero__meta {
  color: var(--color-on-dark);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

/* breadcrumb trail on navy */
.trail {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-10);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

.trail__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
}

.trail__item + .trail__item::before {
  content: "/";
  content: "/" / "";
  color: var(--color-on-dark-border);
}

.trail__link {
  color: var(--color-on-dark);
  transition: color var(--dur-fast) var(--ease-out);
}

.trail__link:hover {
  color: var(--color-white);
}

/* touch: the link box is 44 px tall; negative margins keep the visual row height (18 px) */
.trail__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  margin-block: -13px;
  padding-inline: var(--space-6);
  margin-inline: calc(-1 * var(--space-6));
}

@media (min-width: 1024px) {
  .trail__link {
    min-height: 0;
    margin-block: 0;
    padding-inline: 0;
    margin-inline: 0;
  }
}

.trail__current {
  color: var(--color-white);
}

@media (min-width: 768px) {
  .page-hero__inner {
    gap: var(--space-16);
    padding-top: var(--space-40);
    padding-bottom: var(--space-48);
  }
}

@media (min-width: 1024px) {
  .page-hero__inner {
    padding-top: var(--space-48);
    padding-bottom: var(--space-64);
  }
}

/* ------------------------------------------------------------ page layout */
.page-body {
  padding-block: var(--space-32) var(--space-64);
}

.page-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-32);
}

.page-layout__sidebar {
  display: contents;
}

.page-layout__main {
  order: 2;
  min-width: 0;
}

.page-layout--full .page-layout__main {
  order: 0;
}

.page-layout__sidebar > .sidebar-menu,
.page-layout__sidebar > .sidebar-toc {
  order: 1;
}

.page-layout__sidebar > .contact-card {
  order: 3;
}

@media (min-width: 768px) {
  .page-body {
    padding-block: var(--space-48) var(--space-80);
  }

  .page-layout {
    gap: var(--space-40);
  }
}

@media (min-width: 1024px) {
  .page-body {
    padding-block: var(--space-72) var(--space-112);
  }

  .page-layout--sidebar {
    display: grid;
    grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
    align-items: start;
    gap: var(--sidebar-gap);
  }

  .page-layout__sidebar {
    position: sticky;
    top: var(--space-24);
    display: flex;
    flex-direction: column;
    gap: var(--space-24);
  }

  .page-layout__main,
  .page-layout--full .page-layout__main {
    order: 0;
  }

  .page-layout__sidebar > .sidebar-menu,
  .page-layout__sidebar > .sidebar-toc,
  .page-layout__sidebar > .contact-card {
    order: 0;
  }
}

/* sidebar section menu: card on desktop, scrollable chip bar below 1024 */
.sidebar-menu {
  min-width: 0;
}

.sidebar-menu__title {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sidebar-menu__list {
  display: flex;
  gap: var(--space-8);
  margin-inline: calc(-1 * var(--gutter));
  padding: var(--space-4) var(--gutter);
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(90deg, transparent 0, black var(--gutter), black calc(100% - var(--gutter)), transparent 100%);
}

.sidebar-menu__list::-webkit-scrollbar {
  display: none;
}

.sidebar-menu__item {
  flex: none;
  scroll-snap-align: start;
}

.sidebar-menu__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  min-height: 44px;
  padding: var(--space-10) var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-white);
  color: var(--color-slate-600);
  font-size: var(--text-body-sm-size);
  line-height: 1.6;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.sidebar-menu__link:hover {
  border-color: var(--color-control-border);
  color: var(--color-navy-800);
}

.sidebar-menu__link.is-active {
  border-color: var(--color-navy-800);
  background: var(--color-navy-800);
  color: var(--color-white);
  font-weight: var(--weight-medium);
}

.sidebar-menu__arrow {
  display: none;
}

@media (min-width: 1024px) {
  .sidebar-menu {
    padding: var(--space-20) var(--space-8) var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-white);
  }

  .sidebar-menu__title {
    position: static;
    width: auto;
    height: auto;
    padding: 0 var(--space-16) var(--space-10);
    overflow: visible;
    clip-path: none;
    color: var(--color-text-muted);
    font-size: var(--text-eyebrow-size);
    font-weight: var(--weight-medium);
    line-height: var(--text-eyebrow-lh);
    letter-spacing: var(--text-eyebrow-tracking);
    text-transform: uppercase;
    white-space: normal;
  }

  .sidebar-menu__list {
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    overflow: visible;
    mask-image: none;
  }

  .sidebar-menu__item {
    flex: initial;
  }

  .sidebar-menu__link {
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: var(--space-12) var(--space-16);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    white-space: normal;
  }

  .sidebar-menu__link:hover {
    background: var(--color-surface);
  }

  .sidebar-menu__link.is-active {
    background: var(--color-surface);
    color: var(--color-navy-800);
  }

  .sidebar-menu__arrow {
    display: block;
    color: var(--color-blue-500);
    opacity: 0;
    transition: opacity var(--dur-fast) var(--ease-out);
  }

  .sidebar-menu__link.is-active .sidebar-menu__arrow {
    opacity: 1;
  }
}

/* contact card ("Bize ulaşın") */
.contact-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-28);
  border-radius: var(--radius-lg);
  background: var(--color-navy-800);
  color: var(--color-white);
}

.contact-card :focus-visible {
  outline-color: var(--color-sky-400);
}

.contact-card__eyebrow {
  color: var(--color-sky-400);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-eyebrow-lh);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
}

.contact-card__title {
  color: var(--color-white);
  font-size: var(--text-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-title-lh);
}

.contact-card__phone {
  font-size: var(--text-title-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-title-lh);
}

.contact-card__email {
  color: var(--color-on-dark);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
  overflow-wrap: anywhere;
}

.contact-card__phone:hover,
.contact-card__email:hover {
  color: var(--color-sky-400);
}

@media (max-width: 1023.98px) {
  .contact-card__phone,
  .contact-card__email {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* tablet: the card spans the content width, text on the left, telephone and e-mail on the right */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .contact-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, max-content);
    align-items: center;
    column-gap: var(--space-40);
  }

  .contact-card__eyebrow,
  .contact-card__title {
    grid-column: 1;
  }

  .contact-card__eyebrow,
  .contact-card__phone {
    grid-row: 1;
  }

  .contact-card__title,
  .contact-card__email {
    grid-row: 2;
  }

  .contact-card__phone,
  .contact-card__email {
    grid-column: 2;
  }
}

/* table-of-contents sidebar (legal texts) */
.sidebar-toc {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}

.sidebar-toc__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: var(--space-12) var(--space-20);
  color: var(--color-text-muted);
  font-size: var(--text-eyebrow-size);
  font-weight: var(--weight-medium);
  letter-spacing: var(--text-eyebrow-tracking);
  text-transform: uppercase;
  list-style: none;
}

.sidebar-toc__title::-webkit-details-marker {
  display: none;
}

.sidebar-toc__list {
  padding: 0 var(--space-8) var(--space-8);
}

/* below 1024 px the table of contents starts collapsed: the markup is server-rendered open (it is open on desktop), so until main.js has
   collapsed it the list is hidden — otherwise the first paint shows it open and the page jumps when it closes (layout shift) */
@media (max-width: 1023.98px) {
  html.js:not(.is-ready) .sidebar-toc__details > .sidebar-toc__list {
    display: none;
  }
}

@media (min-width: 1024px) {
  /* a long table of contents scrolls inside the sticky sidebar instead of running off the viewport */
  .sidebar-toc {
    max-height: calc(100vh - 2 * var(--space-24));
    overflow-y: auto;
  }
}

.sidebar-toc__link {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  min-height: 44px;
  padding: var(--space-10) var(--space-12);
  border-radius: var(--radius-md);
  color: var(--color-slate-600);
  font-size: var(--text-body-sm-size);
  line-height: 1.5;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}

.sidebar-toc__link:hover {
  background: var(--color-surface);
  color: var(--color-navy-800);
}

.sidebar-toc__index {
  flex: none;
  min-width: 1.5em;
  color: var(--color-blue-600);
  font-weight: var(--weight-medium);
}

/* ------------------------------------------------------------------ footer */
.site-footer {
  background: var(--color-navy-900);
  color: var(--color-on-dark);
}

.site-footer__inner {
  padding-top: var(--space-48);
  padding-bottom: var(--space-24);
}

.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-40) var(--space-24);
  padding-bottom: var(--space-40);
}

.footer-brand,
.footer-column--contact {
  grid-column: 1 / -1;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-20);
  max-width: 360px;
}

.footer-brand__logo {
  display: block;
}

.footer-brand__logo img {
  width: 109px;
  height: 64px;
}

.footer-brand__text {
  font-size: var(--text-body-sm-size);
  line-height: 1.667;
}

.footer-brand__social {
  display: flex;
  gap: var(--space-10);
}

.footer-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-on-dark-border);
  border-radius: var(--radius-sm);
  color: var(--color-white);
  transition: border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}

.footer-social:hover {
  border-color: var(--color-sky-400);
  background: var(--color-hover-sky);
}

.footer-column__title {
  margin-bottom: var(--space-16);
  color: var(--color-white);
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-bold);
  line-height: 1.733;
  letter-spacing: 0;
}

.footer-column__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.footer-link {
  display: block;
  padding-block: var(--space-6);
  color: var(--color-on-dark);
  font-size: var(--text-body-sm-size);
  line-height: 1.147;
  transition: color var(--dur-fast) var(--ease-out);
}

.footer-link:hover {
  color: var(--color-white);
}

.footer-link--small {
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

@media (max-width: 1023.98px) {
  .footer-contact__kep a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  .footer-link,
  .footer-contact__line {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding-block: 0;
  }

  .footer-column__list {
    gap: 0;
  }

  .footer-column__title {
    margin-bottom: var(--space-4);
  }
}

.footer-contact__address {
  margin-bottom: var(--space-16);
  font-style: normal;
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.footer-contact__line {
  display: block;
  padding-block: var(--space-6);
  color: var(--color-white);
  font-size: var(--text-body-sm-size);
  line-height: 1.147;
  overflow-wrap: anywhere;
}

.footer-contact__line:hover,
.footer-contact__kep a:hover {
  color: var(--color-sky-400);
}

.footer-contact__kep {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-top: var(--space-12);
  font-size: var(--text-small-size);
  line-height: 1.146;
}

.footer-contact__kep a {
  color: var(--color-white);
  overflow-wrap: anywhere;
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding-top: var(--space-24);
  border-top: 1px solid var(--color-footer-rule);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-24);
}

/* "Powered by Wiki": as quiet as the copyright line, the brand name is the link */
.site-footer__credit {
  margin: 0;
  color: var(--color-on-dark);
  white-space: nowrap;
}

.site-footer__credit-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .site-footer__inner {
    padding-top: var(--space-64);
  }

  .site-footer__columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .footer-brand {
    grid-column: 1 / 3;
  }

  .footer-column--contact {
    grid-column: 3 / -1;
  }

  .site-footer__bottom {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    column-gap: var(--space-24);
  }

  .site-footer__credit {
    margin-left: auto;
  }
}

/* 1024–1439: brand + contact on the first row, four link columns with sky dividers below */
@media (min-width: 1024px) {
  .site-footer__inner {
    padding-top: var(--space-72);
    padding-bottom: var(--space-32);
  }

  .site-footer__columns {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 0;
    row-gap: var(--space-40);
    padding-bottom: var(--space-56);
  }

  .footer-brand {
    grid-column: 1 / 3;
    order: 1;
    max-width: 420px;
  }

  .footer-column--contact {
    grid-column: 3 / 5;
    order: 2;
    padding-left: var(--space-40);
  }

  .site-footer__columns > .footer-column:not(.footer-column--contact) {
    order: 3;
    padding: 0 var(--space-20);
    border-left: 1px solid var(--color-sky-400);
  }

  .site-footer__columns > .footer-column:not(.footer-column--contact):first-of-type {
    padding-left: 0;
    border-left: 0;
  }
}

/* ≥ 1440: exactly the Figma row — brand 260 · four link columns (215 / 180 / 135 / 120) · contact, 1 px sky dividers */
@media (min-width: 1440px) {
  .site-footer__columns {
    display: flex;
    align-items: stretch;
    gap: 20px;
    margin-bottom: var(--space-56);
    padding-block: 25px;
  }

  .footer-brand {
    flex: 0 0 260px;
    max-width: none;
    gap: 20px;
    order: 0;
  }

  .site-footer__columns > .footer-column:not(.footer-column--contact) {
    order: 0;
    flex: 0 1 var(--footer-column-basis, 160px);
    min-width: max-content;
    padding: 0 0 0 21px;
    border-left: 1px solid var(--color-sky-400);
  }

  /* basis = Figma column width (+ 21 px of divider and padding for columns 2-4) */
  .site-footer__columns > .footer-column:nth-of-type(1) { --footer-column-basis: 215px; }
  .site-footer__columns > .footer-column:nth-of-type(2) { --footer-column-basis: 201px; }
  .site-footer__columns > .footer-column:nth-of-type(3) { --footer-column-basis: 156px; }
  .site-footer__columns > .footer-column:nth-of-type(4) { --footer-column-basis: 141px; }

  .site-footer__columns > .footer-column:not(.footer-column--contact):first-of-type {
    padding-left: 0;
    border-left: 0;
  }

  .footer-column--contact {
    flex: 1 1 247px;
    order: 0;
    padding-left: 21px;
    border-left: 1px solid var(--color-sky-400);
  }

  .footer-column__list {
    gap: 16px;
  }

  .footer-link {
    padding-block: 0;
    line-height: 1.147;
  }

  .footer-contact__line {
    padding-block: 0;
  }

  .footer-contact__line + .footer-contact__line {
    margin-top: 16px;
  }
}

/* --------------------------------------------------------------- side rail */
/* < 1024 px: bottom action bar; the page gets bottom padding so nothing is covered */
.side-rail {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: var(--z-side-rail);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  border-top: 1px solid var(--color-on-dark-border);
  background: var(--color-navy-800);
  box-shadow: var(--shadow-bottom-bar);
  /* scroll-linked collapse (main.js): --rail-p goes 0 -> 1 pixel for pixel with the page while scrolling down and back while
     scrolling up; the bar slides down by the height of its labels so only the icons stay, the labels fade out on the way */
  transform: translateY(calc(var(--rail-p, 0) * var(--rail-range, 0px)));
  will-change: transform;
}

.side-rail__list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}

.side-rail__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  height: 100%;
  min-height: var(--bottom-bar-min-height);
  padding: var(--space-6) var(--space-4);
  color: var(--color-white);
  font-size: 11px;
  font-weight: var(--weight-medium);
  line-height: 1.15;
  text-align: center;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.side-rail__item + .side-rail__item .side-rail__link {
  border-left: 1px solid var(--color-on-dark-border);
}

.side-rail__link:hover {
  background: var(--color-navy-900);
}

.side-rail__link :focus-visible,
.side-rail__link:focus-visible {
  outline-color: var(--color-sky-400);
  outline-offset: -3px;
}

.side-rail__icon {
  --icon-size: 20px;
  flex: none;
  stroke-width: 1.6;
}

.side-rail__label {
  opacity: calc(1 - var(--rail-p, 0));
}

/* keep the footer clear of the bottom action bar */
.site-footer {
  padding-bottom: calc(var(--bottom-bar-height) + env(safe-area-inset-bottom, 0px));
}

html.is-drawer-open .side-rail {
  visibility: hidden;
}

/* 1024–1599: compact icon tabs on the left edge, label reveals on hover/focus */
@media (min-width: 1024px) {
  .site-footer {
    padding-bottom: 0;
  }

  .side-rail {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 0;
    padding-bottom: 0;
    border-top: 0;
    background: transparent;
    box-shadow: none;
    transform: translateY(-50%);
  }

  .side-rail__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
  }

  .side-rail__link {
    /* tab width = gutter − 12 px (min 28 px, max 56 px): 12 px of air always remain between the rail and the content */
    --rail-tab: clamp(28px, calc(var(--gutter) - 12px), var(--side-rail-compact-width));
    flex-direction: row;
    justify-content: flex-start;
    gap: 0;
    width: var(--rail-tab);
    min-height: 48px;
    padding: 0;
    overflow: hidden;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    background: var(--color-rail-blue);
    box-shadow: var(--shadow-rail);
    text-align: left;
    white-space: nowrap;
    transition: width var(--dur-base) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
  }

  .side-rail__item + .side-rail__item .side-rail__link {
    border-left: 0;
  }

  .side-rail__item:nth-child(even) .side-rail__link {
    border: 1px solid var(--color-on-dark-border);
    border-left: 0;
    background: var(--color-navy-800);
  }

  .side-rail__link:hover,
  .side-rail__link:focus-visible {
    width: 232px;
    background: var(--color-navy-900);
  }

  .side-rail__item:nth-child(odd) .side-rail__link:hover,
  .side-rail__item:nth-child(odd) .side-rail__link:focus-visible {
    background: var(--color-rail-blue);
  }

  .side-rail__icon {
    --icon-size: 22px;
    flex: none;
    margin-inline: calc((var(--rail-tab) - 22px) / 2);
  }

  .side-rail__label {
    padding-right: var(--space-16);
    font-size: var(--text-body-sm-size);
  }
}

/* ≥ 1600: full 128 px tiles as in Figma (75:7), vertically centred, always labelled */
@media (min-width: 1600px) {
  .side-rail__list {
    gap: 9.74px;
  }

  .side-rail__link {
    flex-direction: column;
    justify-content: flex-start;
    gap: 9.74px;
    width: var(--side-rail-width);
    min-height: 128px;
    padding: 12.99px 6px;
    overflow: visible;
    border-radius: 4.87px;
    text-align: center;
    white-space: normal;
    transition: background-color var(--dur-fast) var(--ease-out);
  }

  .side-rail__item:nth-child(n + 2) .side-rail__link {
    min-height: 133px;
  }

  .side-rail__link:hover,
  .side-rail__link:focus-visible {
    width: var(--side-rail-width);
  }

  .side-rail__icon {
    --icon-size: 58px;
    margin-inline: 0;
    stroke-width: 1.2;
  }

  .side-rail__label {
    padding: 0;
    font-size: 14.617px;
    line-height: 1.15;
  }
}

/* ------------------------------------------------------------ cookie notice
   Below 768 px the notice is compact (one short sentence + the three buttons in one row, ≈ 120 px) so that it and the
   bottom action bar leave the first screen readable; from 768 px the full card with title and description. */
.cookie-banner {
  position: fixed;
  right: var(--gutter);
  bottom: calc(var(--bottom-bar-height) + var(--space-8) + env(safe-area-inset-bottom, 0px));
  left: var(--gutter);
  z-index: var(--z-cookie);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
  max-width: 964px;
  margin-inline: auto;
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-white);
  box-shadow: var(--shadow-soft);
  animation: cookie-in var(--dur-base) var(--ease-out);
}

@keyframes cookie-in {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.cookie-banner__title {
  display: none;
  color: var(--color-navy-800);
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-body-sm-lh);
}

.cookie-banner__description {
  color: var(--color-slate-600);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

.cookie-banner__copy--long {
  display: none;
}

.cookie-banner__link {
  display: inline-block;
  margin-block: -15px;    /* 44 px hit box without moving the text */
  padding-block: 15px;
  color: var(--color-blue-600);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}

.cookie-banner__actions {
  display: flex;
  gap: var(--space-8);
}

.cookie-banner__actions .button {
  flex: 1 1 auto;
  min-width: 0;
  padding-inline: var(--space-6);
}

@media (min-width: 360px) {
  .cookie-banner__actions .button {
    flex-basis: 0;
  }
}

@media (min-width: 768px) {
  .cookie-banner {
    bottom: calc(var(--bottom-bar-height) + var(--space-12) + env(safe-area-inset-bottom, 0px));
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-24);
    padding: var(--space-24) var(--space-28);
  }

  .cookie-banner__title {
    display: block;
  }

  .cookie-banner__copy--long {
    display: inline;
  }

  .cookie-banner__copy--short {
    display: none;
  }

  .cookie-banner__actions {
    flex: none;
  }

  .cookie-banner__actions .button {
    flex: none;
    padding-inline: var(--space-16);
  }
}

@media (min-width: 1024px) {
  .cookie-banner {
    bottom: var(--space-24);
  }
}

/* cookie preferences dialog content */
.cookie-dialog__intro {
  margin-bottom: var(--space-16);
  font-size: var(--text-body-sm-size);
  line-height: var(--text-body-sm-lh);
}

.cookie-options {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.cookie-option + .cookie-option {
  border-top: 1px solid var(--color-border);
}

.cookie-option__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  min-height: 44px;
  padding: var(--space-16);
  cursor: pointer;
}

.cookie-option__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.cookie-option__name {
  color: var(--color-navy-800);
  font-size: var(--text-body-sm-size);
  font-weight: var(--weight-medium);
  line-height: var(--text-body-sm-lh);
}

.cookie-option__desc {
  color: var(--color-text-muted);
  font-size: var(--text-small-size);
  line-height: var(--text-small-lh);
}

.cookie-option__switch {
  appearance: none;
  position: relative;
  flex: none;
  width: 44px;
  height: 26px;
  border-radius: var(--radius-full);
  background: var(--color-control-border);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.cookie-option__switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-white);
  box-shadow: var(--shadow-knob);
  transition: transform var(--dur-fast) var(--ease-out);
}

.cookie-option__switch:checked {
  background: var(--color-navy-800);
}

.cookie-option__switch:checked::after {
  transform: translateX(18px);
}

.cookie-option__switch:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}