/* FEB Yapı — proje vitrini. Typeface: theme.css (Times New Roman). Palette: portal-scoped, below.
 *
 * Layout: Uplevel Moda is the star. Its architectural render opens the page full-bleed (no overlay on
 * the photograph itself); from 1024px the name, location, offer, site action, call / WhatsApp and a few
 * facts sit bottom-left on one localized deep-sea scrim, below that they follow the photo on the page.
 * The decorative 3D FEB mascot stands in the render's bottom-right corner. Sarıyer, Aren Park and
 * Ortaköy follow as a quiet "Diğer projelerimiz" row of three compact cards; a deep-sea footer band
 * closes the page.
 *
 * Palette (Antalya): Radix Colors light scales, roughly 60 / 30 / 10.
 *   sand   (Radix sand)   limestone old town: page, surfaces, borders, text      ~60%
 *   cyan   (Radix cyan)   Mediterranean sea: header mark, buttons, footer band   ~30%
 *   orange (Radix orange) terracotta and citrus: the 12-month offer and accents  ~10%
 * Only these three scales, white, the WhatsApp brand green and the photographs appear on the page.
 * Contrast (WCAG AA), worst case per role: sand-12 on sand-2 15.5:1; sand-11 on sand-3 5.3:1; white on
 * cyan-12 11.95:1; white on cyan-11 4.76:1 (links, on white only); sand-2 on cyan-12 11.35:1; orange-12
 * on orange-3 10.3:1; orange-7 on cyan-12 6.4:1 (decorative). Hero copy on the photo sits on a cyan-12
 * scrim that is >= 82% opaque behind every text line (white on it >= 6:1 over even a white sky); the
 * offer, buttons and cards are solid fills. Focus: 2px cyan-11 ring with a white band (>= 4.5:1 on the
 * page, white and tints); 3px sand-1 ring on the dark scrim and footer (>= 11:1 on cyan-12).
 */

:root {
  /* Radix Colors sand (light): limestone. */
  --p-sand-1: #fdfdfc;
  --p-sand-2: #f9f9f8;
  --p-sand-3: #f1f0ef;
  --p-sand-4: #e9e8e6;
  --p-sand-5: #e2e1de;
  --p-sand-6: #dad9d6;
  --p-sand-7: #cfceca;
  --p-sand-8: #bcbbb5;
  --p-sand-9: #8d8d86;
  --p-sand-10: #82827c;
  --p-sand-11: #63635e;
  --p-sand-12: #21201c;
  /* Radix Colors cyan (light): the Mediterranean. */
  --p-cyan-1: #fafdfe;
  --p-cyan-2: #f2fafb;
  --p-cyan-3: #def7f9;
  --p-cyan-4: #caf1f6;
  --p-cyan-5: #b5e9f0;
  --p-cyan-6: #9ddde7;
  --p-cyan-7: #7dcedc;
  --p-cyan-8: #3db9cf;
  --p-cyan-9: #00a2c7;
  --p-cyan-10: #0797b9;
  --p-cyan-11: #107d98;
  --p-cyan-12: #0d3c48;
  /* Radix Colors orange (light): terracotta and citrus. */
  --p-orange-1: #fefcfb;
  --p-orange-2: #fff7ed;
  --p-orange-3: #ffefd6;
  --p-orange-4: #ffdfb5;
  --p-orange-5: #ffd19a;
  --p-orange-6: #ffc182;
  --p-orange-7: #f5ae73;
  --p-orange-8: #ec9455;
  --p-orange-9: #f76b15;
  --p-orange-10: #ef5f00;
  --p-orange-11: #cc4e00;
  --p-orange-12: #582d1d;
  --p-white: #ffffff;
  --p-whatsapp: #25d366;

  /* Roles. */
  --p-page: var(--p-sand-2);
  --p-header: var(--p-white);
  --p-surface: var(--p-white);               /* cards, bubble, cookie banner */
  --p-border: var(--p-sand-6);
  --p-text: var(--p-sand-12);
  --p-text-muted: var(--p-sand-11);
  --p-link: var(--p-cyan-11);                /* on white only (4.76:1) */
  --p-solid: var(--p-cyan-12);               /* primary action, call button, wordmark */
  --p-solid-hover: var(--p-cyan-11);
  --p-on-solid: var(--p-white);
  --p-tint: var(--p-cyan-3);                 /* hover fills */
  --p-hover-border: var(--p-cyan-8);
  --p-offer-bg: var(--p-orange-3);           /* Faizsiz 12 Ay Taksit: the terracotta accent */
  --p-offer-border: var(--p-orange-6);
  --p-offer-mark: var(--p-orange-9);
  --p-offer-text: var(--p-orange-12);
  --p-sea: var(--p-cyan-12);                 /* footer band, hero scrim */
  --p-on-sea: var(--p-sand-2);
  --p-on-sea-muted: var(--p-sand-3);
  --p-sea-accent: var(--p-orange-7);
  --p-focus: var(--p-cyan-11);
  --p-scrim: 13, 60, 72;                     /* cyan-12 as r, g, b for the scrim's alpha steps */
  --p-shadow: 0 1px 2px rgba(33, 32, 28, 0.06), 0 12px 32px rgba(33, 32, 28, 0.1);
  --p-shadow-soft: 0 1px 2px rgba(33, 32, 28, 0.05), 0 4px 14px rgba(33, 32, 28, 0.06);

  /* The shared theme tokens, re-pointed for this page only (this stylesheet is loaded by the portal
   * alone, after theme.css), so consent.css's own rules for the banner follow the same roles. */
  --feb-bg: var(--p-page);
  --feb-surface: var(--p-surface);
  --feb-surface-raised: var(--p-cyan-3);
  --feb-sea: var(--p-cyan-3);
  --feb-sage: var(--p-cyan-4);
  --feb-ink: var(--p-text);
  --feb-ink-muted: var(--p-text-muted);
  --feb-accent: var(--p-cyan-11);
  --feb-accent-deep: var(--p-cyan-12);
  --feb-line: var(--p-border);
  --feb-line-soft: var(--p-sand-5);

  --gutter: clamp(1rem, 3.2vw, 3.5rem);
  /* Left / right edge of the content column: the gutter, or centred at 80rem on wide screens. */
  --inset: max(var(--gutter), calc((100% - 80rem) / 2));
  --topbar-height: 4rem;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* `html body` outranks theme.css's page colour rule (loaded earlier). */
html body {
  margin: 0;
  background: var(--p-page);
  color: var(--p-text);
  font-family: var(--feb-font);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

/* Focus: a 2px cyan-11 ring with a white band on both sides, so it reads on the page, on white cards and
   on the solid buttons. On the dark scrim and the sea footer it becomes a 3px sand-1 ring. */
:focus-visible {
  outline: 2px solid var(--p-focus);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--p-white);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: var(--gutter);
  z-index: 10;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  background: var(--p-solid);
  color: var(--p-on-solid);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(calc(-100% - 1rem));
}

.skip-link:focus {
  transform: none;
}

/* ---- Top bar --------------------------------------------------------------------------------- */

/* One white row with a sand-6 hairline: the FEB YAPI wordmark (cyan-12), the brand line on wide screens,
 * then the direct-contact actions. */
.topbar {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  min-height: var(--topbar-height);
  padding: 0.5rem var(--inset);
  background: var(--p-header);
  border-bottom: 1px solid var(--p-border);
}

.brand {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  min-width: 0;
}

/* The WordPress site's geometric wordmark (feb-wordmark.svg), drawn in cyan-12. */
.brand__logo {
  width: auto;
  height: 28px;
}

/* Existing FEB brand line beside the wordmark (wide screens only). */
.brand__line {
  display: none;
  padding-left: 1.25rem;
  border-left: 1px solid var(--p-border);
  font-style: italic;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: var(--p-text-muted);
  white-space: nowrap;
}

/* Direct contact (tel: / wa.me): the measured phone and WhatsApp actions, always above the fold.
 * Phones: two round 44px icon buttons, their text visually hidden but naming the link: call is the solid
 * cyan-12 primary (white icon), WhatsApp a white button with a thin brand-green ring and a sand-12 glyph
 * (the glyph alone identifies it, so it needs >= 3:1; green on white is only 2:1). From the tablet up:
 * the number as a quiet text link, WhatsApp as the same white pill with its label, where the glyph turns
 * brand green, and the corporate homepage as a cyan-11 text link (also in the footer). */
.topbar__actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.offer__call,
.offer__whatsapp,
.topbar__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.offer__call,
.offer__whatsapp {
  border-radius: 999px;
}

.offer__call {
  background: var(--p-solid);
  color: var(--p-on-solid);
}

.offer__call:hover {
  background: var(--p-solid-hover);
}

.offer__whatsapp {
  border: 2px solid var(--p-whatsapp);
  background: var(--p-surface);
  color: var(--p-text);
}

.offer__whatsapp:hover {
  background: var(--p-tint);
}

.offer__icon {
  flex: none;
  width: 18px;
  height: 18px;
}

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

.topbar__cta {
  display: none;
  color: var(--p-link);
}

.topbar__cta:hover > span:first-child,
.offer__call:hover .offer__number {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

/* ---- Showcase: Uplevel Moda hero --------------------------------------------------------------- */

.showcase {
  display: block;
}

.showcase:focus {
  outline: none;
  box-shadow: none;
}

/* Phones and tablets: the render on top (about 40% of the screen), the copy on the page below it. From
 * 1024px (see the media query) the render is the full-bleed hero and the copy sits on its scrim. */
.stage {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.stage__media {
  position: relative;
  height: clamp(14rem, 40svh, 30rem);
  overflow: hidden;
  background: var(--p-sand-3);
}

.stage__render,
.stage__render img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.stage__render img {
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}

/* 3D mascot (runtime: portal-photo.js; contracts: agents FebPortalMath, PortalA11yDirection-2). The
 * transparent canvas covers exactly the photo; the script keeps the character and its bubble clear of the
 * copy (.feature) and the header. Decorative and pointer-transparent; revealed only after its first
 * successful frame (data-drawn) on a supported spot: the photo's bottom-right corner. */
.mascot {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.mascot * {
  pointer-events: none;
}

.mascot[data-hidden] {
  visibility: hidden;
}

.mascot__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.mascot[data-drawn][data-placed] .mascot__canvas {
  opacity: 1;
}

.mascot:not([data-drawn][data-placed]) .mascot__bubble {
  display: none;
}

/* Speech bubble: a white card placed beside the character by the script; sand-12 message. The campaign
 * itself is the static offer in the hero copy, so the bubble never repeats it. */
.mascot__bubble {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
  max-width: 256px;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--p-border);
  border-radius: 0.5rem;
  background: var(--p-surface);
  color: var(--p-text);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  white-space: pre-line;
  box-shadow: var(--p-shadow);
}

/* The copy. Colours come from role variables so the same markup reads on the page (default) and on the
 * dark scrim (from 1024px). */
.feature {
  --ink: var(--p-text);
  --ink-muted: var(--p-text-muted);
  --mark: var(--p-orange-9);
  --button-bg: var(--p-surface);
  --button-border: var(--p-border);
  --button-text: var(--p-solid);
  --button-hover: var(--p-tint);
  position: relative;
  z-index: 2;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1.5rem var(--inset) 2rem;
  color: var(--ink);
}

.feature__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.feature__eyebrow::before {
  content: "";
  flex: none;
  width: 2rem;
  height: 2px;
  background: var(--mark);
}

.feature__name {
  margin: 0;
  font-family: var(--feb-font);
  font-weight: 400;
  font-size: clamp(2.75rem, 5.2vw + 1.5rem, 6rem);
  line-height: 1;
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
  color: var(--ink);
}

.feature__location {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.feature__pin {
  flex: none;
  color: var(--mark);
}

/* ---- Campaign offer ------------------------------------------------------------------------- */

/* The terracotta accent: the offer shared by every project, static and shown once, inside the hero copy.
 * Solid orange-3 with an orange-6 border and an orange-9 spine; orange-12 text (10.3:1). */
.offer {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  max-width: 30rem;
  margin: 0.25rem 0 0;
  padding: 0.875rem 1.25rem;
  border: 1px solid var(--p-offer-border);
  border-left: 5px solid var(--p-offer-mark);
  border-radius: 2px;
  background: var(--p-offer-bg);
  color: var(--p-offer-text);
}

.offer__title {
  font-size: clamp(1.25rem, 1.4vw + 0.9rem, 1.625rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.offer__note {
  font-size: 0.9375rem;
  line-height: 1.4;
}

/* Inline link in the note (the contact page); underlined so it reads as a link without colour alone. */
.offer__link {
  color: var(--p-offer-text);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

.offer__link:hover {
  text-decoration-thickness: 2px;
}

/* ---- Hero actions ----------------------------------------------------------------------------- */

.feature__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.625rem;
  width: 100%;
  max-width: 30rem;
  margin-top: 0.25rem;
}

/* Primary action: solid cyan-12, white text (11.95:1), cyan-11 on hover (4.76:1). The white hairline keeps
 * its edge on the dark scrim. */
.feature__site {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "action arrow" "domain arrow";
  align-items: center;
  gap: 0.125rem 1rem;
  min-width: 0;
  min-height: 56px;
  padding: 0.75rem 1.25rem;
  border: 1px solid rgba(253, 253, 252, 0.55);
  border-radius: 2px;
  background: var(--p-solid);
  color: var(--p-on-solid);
  font-weight: 700;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.feature__action {
  grid-area: action;
  font-size: 1.125rem;
  line-height: 1.25;
}

.feature__site:hover {
  background: var(--p-solid-hover);
}

.feature__domain {
  grid-area: domain;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.25;
  color: var(--p-on-solid);
}

.feature__arrow {
  grid-area: arrow;
  font-size: 1.375rem;
  line-height: 1;
  color: var(--p-on-solid);
}

.feature__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.625rem;
}

.feature__call,
.feature__whatsapp {
  display: inline-flex;
  flex: 1 1 9.5rem;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  min-height: 48px;
  padding: 0.5rem 1rem;
  border: 1px solid var(--button-border);
  border-radius: 2px;
  background: var(--button-bg);
  color: var(--button-text);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
}

.feature__call:hover,
.feature__whatsapp:hover {
  background: var(--button-hover);
}

.feature__whatsapp {
  background: var(--p-surface);
  color: var(--p-text);
  border-color: var(--p-whatsapp);
}

.feature__whatsapp:hover {
  background: var(--p-tint);
}

.feature__whatsapp .offer__icon {
  color: var(--p-whatsapp);
}

/* Facts straight from the Uplevel Moda site's own copy (see portal.php). */
.feature__facts {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.375rem 1.5rem;
  max-width: 40rem;
  margin: 0.5rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.9375rem;
  line-height: 1.35;
  color: var(--ink);
}

.feature__facts li {
  display: flex;
  align-items: baseline;
  gap: 0.625rem;
}

.feature__facts li::before {
  content: "";
  flex: none;
  width: 0.4375rem;
  height: 0.4375rem;
  transform: translateY(-0.0625rem) rotate(45deg);
  background: var(--mark);
}

.feature__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.125rem;
}

.feature__caption {
  margin: 0.25rem 0 0;
  max-width: 46ch;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-muted);
}

/* Mascot controls: quiet native text buttons in normal flow (binding: agent PortalA11yDirection-2), each a
 * full 44px hit area; labels change with the action offered. */
.mascot-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.75rem;
}

.mascot-controls__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  margin: 0;
  padding: 0 0.25rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: underline;
  text-decoration-color: var(--mark);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
  cursor: pointer;
}

.mascot-controls__button:hover {
  text-decoration-thickness: 2px;
}

.mascot-controls__button[aria-disabled="true"] {
  color: var(--ink-muted);
  text-decoration: none;
  cursor: default;
}

.mascot-controls__note {
  flex-basis: 100%;
  margin: 0;
  max-width: 46ch;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--ink-muted);
}

/* ---- Other projects --------------------------------------------------------------------------- */

/* Clearly subordinate to Moda: a quiet heading, then three compact white cards (small photo, name, domain,
 * "Siteye git"), each one native link. */
.others {
  position: relative;
  z-index: 2;
  padding: 2.5rem var(--inset) 3rem;
}

.others__title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 1.25rem;
  font-family: var(--feb-font);
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.2;
  color: var(--p-text);
}

.others__title::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--p-border);
}

.others__list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.others__card {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  align-items: stretch;
  min-height: 5.5rem;
  border: 1px solid var(--p-border);
  border-radius: 2px;
  background: var(--p-surface);
  color: var(--p-text);
  text-decoration: none;
  box-shadow: var(--p-shadow-soft);
}

.others__photo {
  position: relative;
  display: block;
  min-height: 5.5rem;
  overflow: hidden;
  background: var(--p-sand-3);
}

.others__photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 50%);
}

.others__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.125rem;
  min-width: 0;
  padding: 0.75rem 1rem;
}

.others__name {
  font-size: 1.25rem;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.others__domain {
  font-size: 0.875rem;
  line-height: 1.3;
  color: var(--p-text-muted);
  overflow-wrap: anywhere;
}

/* White card: cyan-11 text is 4.76:1. */
.others__action {
  margin-top: 0.25rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--p-link);
}

.others__card:hover {
  border-color: var(--p-hover-border);
}

.others__card:hover .others__name,
.others__card:focus-visible .others__name {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* ---- Footer ---------------------------------------------------------------------------------- */

/* A full-width cyan-12 sea band closes the page: sand-2 text (11.35:1), a terracotta rule on top, the
 * content on the same 80rem column as the rest of the page. */
.site-footer {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 2rem;
  padding: 2rem var(--inset) 1.25rem;
  background: var(--p-sea);
  border-top: 4px solid var(--p-sea-accent);
  color: var(--p-on-sea);
  font-size: 0.9375rem;
  --p-focus: var(--p-sand-1);
}

.site-footer :focus-visible {
  outline: 3px solid var(--p-sand-1);
  outline-offset: 3px;
  box-shadow: none;
}

/* The consent opener keeps consent.css's own focus rule otherwise (sand-12 on the sea would vanish). */
body .site-footer .feb-consent-open:focus-visible {
  outline: 3px solid var(--p-sand-1);
  outline-offset: 3px;
  box-shadow: none;
}

.site-footer__name {
  margin: 0;
  font-family: var(--feb-font);
  font-size: 1.375rem;
  color: var(--p-on-sea);
}

.site-footer__address {
  margin-top: 0.25rem;
  font-style: normal;
  color: var(--p-on-sea-muted);
}

.site-footer__nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.25rem;
  margin: 0 -0.625rem;
  padding: 0;
  list-style: none;
}

.site-footer__nav a,
.site-footer__nav .feb-consent-open {
  color: var(--p-on-sea);
}

.site-footer__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.625rem;
  text-decoration: underline;
  text-decoration-color: var(--p-sea-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.site-footer__nav a:hover,
.site-footer__nav .feb-consent-open:hover {
  text-decoration-thickness: 2px;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(249, 249, 248, 0.28);
  font-size: 0.8125rem;
  color: var(--p-on-sea-muted);
}

.site-footer__legal p {
  margin: 0;
}

/* ---- Consent banner on the portal (markup and behaviour: Consent.php, consent.css) -------------------
 * White like the other portal surfaces (sand-12 text, cyan-11 link); both choices keep one equal style,
 * the portal's primary solid cyan-12 with white text (11.95:1). Selectors outrank consent.css, which
 * loads after this file. */

body .feb-consent {
  border-top-color: var(--p-border);
  background: var(--p-surface);
  box-shadow: 0 -8px 24px rgba(33, 32, 28, 0.08);
}

body .feb-consent__text a {
  color: var(--p-link);
}

body .feb-consent .feb-consent__button {
  border-color: var(--p-solid);
  border-radius: 2px;
  background: var(--p-solid);
  color: var(--p-on-solid);
}

body .feb-consent .feb-consent__button:hover {
  border-color: var(--p-solid-hover);
  background: var(--p-solid-hover);
  color: var(--p-on-solid);
}

/* ---- Tablet: 720 — labelled header actions, two-column facts, three-card row ---------------------- */

@media (min-width: 720px) {
  :root {
    --topbar-height: 4.5rem;
  }

  .topbar {
    padding-block: 0.75rem;
  }

  .brand__logo {
    height: 34px;
  }

  .topbar__actions {
    gap: 1rem;
  }

  .offer__label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
  }

  .offer__icon {
    width: 16px;
    height: 16px;
  }

  .offer__call {
    padding-inline: 0.25rem;
    background: transparent;
    color: var(--p-text);
  }

  .offer__call:hover {
    background: transparent;
  }

  .offer__call .offer__icon {
    color: var(--p-solid);
  }

  .offer__whatsapp {
    padding-inline: 1rem 1.125rem;
  }

  /* Labelled from here on, so the glyph may carry the brand green (decorative, the text names the link). */
  .offer__whatsapp .offer__icon {
    color: var(--p-whatsapp);
  }

  .stage__media {
    height: clamp(20rem, 46svh, 34rem);
  }

  .feature__facts {
    grid-template-columns: repeat(2, minmax(0, auto));
    justify-content: start;
  }

  .feature__contact {
    flex-wrap: nowrap;
  }

  .others__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
  }

  .others__card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 8rem auto;
  }

  .others__photo {
    min-height: 0;
  }

  .site-footer {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .site-footer__legal {
    grid-column: 1 / -1;
  }
}

/* The corporate homepage link joins the row once it fits beside the contact actions. */
@media (min-width: 900px) {
  .topbar__cta {
    display: inline-flex;
    padding-inline: 0.25rem;
  }

  .topbar__cta::before {
    content: "";
    width: 1px;
    height: 1.25rem;
    margin-right: 0.75rem;
    background: var(--p-border);
  }
}

/* ---- Desktop: the render is the hero; copy on a localized deep-sea scrim ------------------------- */

@media (min-width: 1024px) {
  :root {
    --topbar-height: 5rem;
  }

  .brand__logo {
    height: 38px;
  }

  .brand__line {
    display: inline;
  }

  .stage {
    min-height: clamp(36rem, calc(100svh - var(--topbar-height)), 60rem);
    align-items: end;
  }

  .stage__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    height: auto;
  }

  /* The scrim: cyan-12, strongest in the bottom-left corner where the copy sits, gone before the middle
   * of the photograph. Nothing covers the building, the sky or the mascot's corner. */
  .stage__media::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
      radial-gradient(ellipse 68% 128% at 0% 100%,
        rgba(var(--p-scrim), 0.94) 0%,
        rgba(var(--p-scrim), 0.9) 55%,
        rgba(var(--p-scrim), 0.62) 78%,
        rgba(var(--p-scrim), 0) 100%);
    pointer-events: none;
  }

  .feature {
    --ink: var(--p-sand-1);
    --ink-muted: var(--p-sand-1);
    --mark: var(--p-orange-7);
    --button-bg: transparent;
    --button-border: rgba(253, 253, 252, 0.7);
    --button-text: var(--p-sand-1);
    --button-hover: rgba(253, 253, 252, 0.14);
    width: min(100%, calc(40rem + var(--inset)));
    padding: 2rem 2rem clamp(1.75rem, 4.5vh, 3.5rem) var(--inset);
  }

  .feature :focus-visible {
    outline: 3px solid var(--p-sand-1);
    outline-offset: 3px;
    box-shadow: none;
  }

  .feature__name {
    font-size: clamp(4rem, 6.4vw, 6.25rem);
  }

  .feature__location {
    font-size: 1.25rem;
  }

  .feature__site {
    min-height: 60px;
  }

  .feature__action {
    font-size: 1.25rem;
  }

  .feature__facts {
    margin-top: 0.75rem;
  }

  /* Over the scrim the white call button inverts: sand-12 on white stays 15:1. */
  .feature__whatsapp:hover {
    background: var(--p-tint);
  }

  .others__card {
    grid-template-rows: 9rem auto;
  }
}

/* ---- Wide: the three cards read as one row under the hero ---------------------------------------- */

@media (min-width: 1440px) {
  :root {
    --topbar-height: 5rem;
  }

  .brand__logo {
    height: 40px;
  }

  .others {
    padding-block: 3.5rem 4.5rem;
  }

  .others__card {
    grid-template-columns: 11rem minmax(0, 1fr);
    grid-template-rows: none;
    min-height: 7.5rem;
  }

  .others__photo {
    min-height: 7.5rem;
  }
}

/* Very narrow phones: the eyebrow keeps to one line instead of breaking inside "FEB Yapı". */
@media (max-width: 23.75rem) {
  .feature__eyebrow {
    gap: 0.5rem;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    white-space: nowrap;
  }

  .feature__eyebrow::before {
    width: 1rem;
  }
}

/* ---- Motion: only when the visitor allows it ---------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .topbar__cta,
  .offer__call,
  .offer__whatsapp,
  .feature__site,
  .feature__call,
  .feature__whatsapp,
  .others__card,
  .site-footer__nav a,
  .feb-consent .feb-consent__button {
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  }

  /* The mascot fades in and out when it is moved to a new spot. */
  .mascot__canvas {
    transition: opacity 0.3s ease;
  }
}

/* ---- Forced colors: system palette -------------------------------------------------------------- */

@media (forced-colors: active) {
  /* No scrim: the copy returns to an opaque Canvas panel so system text colours stay readable. */
  .stage__media::after {
    display: none;
  }

  .feature {
    background: Canvas;
    color: CanvasText;
  }

  .offer,
  .others__card,
  .mascot__bubble {
    border: 1px solid CanvasText;
  }

  .topbar__cta,
  .offer__call,
  .offer__whatsapp,
  .feature__site,
  .feature__call,
  .feature__whatsapp,
  .mascot-controls__button {
    border: 1px solid ButtonText;
  }

  .site-footer {
    border-top: 4px solid CanvasText;
  }

  :focus-visible,
  .feature :focus-visible,
  .site-footer :focus-visible {
    outline: 3px solid CanvasText;
    outline-offset: 3px;
  }
}