/* Erdinç Peşin · imza Dekor — Gestaltung der Seite.
   Seit dem 2026-10-23 nach Entwurf D (webseite/entwuerfe/d-vitrin, Weisung: „Kannst du es so übernehmen"):
   ein ruhiger Ausstellungsraum in den Firmenfarben Nachtblau und Gold auf hellem Grund — links die Karte
   mit den Leistungen, rechts das stehende Raumfoto, das mit dem Abschnitt wechselt. Richtung „The split
   stage" (design-taste-frontend), Gestaltungssprache angelehnt an VitrA, nichts übernommen. */
:root {
  --bg: #eceef1;           /* Grund: kühles Hellgrau, passend zum Nachtblau, kein Creme */
  --paper: #ffffff;        /* Karte und Papier: reines Weiß wie im Ausstellungsraum */
  --surface: #dfe3e9;      /* eine Tonstufe dunkler: Gergi-tavan-Feld */
  --ink: #0b1222;          /* Tinte: Nachtblau aus dem Logo */
  --muted: #4a5468;        /* Zweittext, über 7:1 auf dem Grund */
  --marine: #0b1222;       /* Nachtblau als Fläche: hinter der Leistungs-Karte, Überschrift */
  --accent: #d6ad55;       /* Gold aus dem Logo: Aktion, Grußband, „imza" im Fuß */
  --accent-strong: #e8c46f;
  --accent-ink: #0b1222;   /* Schrift auf Gold */
  --gold-ink: #866521;     /* Gold als Schrift auf Weiß (über 4,5:1) */
  --dark: #0b1222;         /* Kontakt: nachtblaue Bänder */
  --dark-2: #121c31;
  --on-dark: #e9e7e2;
  --on-dark-muted: #a9b2c3;

  --intro-grund: #0b1222;  /* Intro in den Originalfarben der Seite */
  --intro-farbe: #d6ad55;

  --step-small: clamp(0.875rem, 0.85rem + 0.1vw, 0.9375rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-head: clamp(2rem, 1.5rem + 1.6vw, 2.5rem);
  --step-display: clamp(2.25rem, 0.9rem + 3.6vw, 4.125rem);

  --kenar: 12px;           /* äußerer Rand und Abstand der Tafeln */
  --innen: clamp(20px, 3.4vw, 48px);
  --rund: 20px;            /* der eine Radius der Tafeln und Fotos; Knöpfe sind ganz rund */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --t-hover: 180ms;
  --t-press: 140ms;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; background: var(--bg); scroll-behavior: smooth; }
body {
  font-family: "Albert Sans", system-ui, sans-serif;
  font-size: var(--step-body);
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--accent-ink); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* Knöpfe: ganz rund, eine Füllung */
.dugme, .hucre {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 28px;
  border-radius: 999px;
  font-weight: 500;
  transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease;
}
.dugme { background: var(--accent); color: var(--accent-ink); }
.dugme:active, .hucre:active, .sekme:active { transform: scale(0.97); }

/* ---------- Die Bühne: links die Karte, rechts das stehende Foto ---------- */
.sahne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--kenar);
  padding: var(--kenar) var(--kenar) 0;
}
.sahne__metin { display: grid; gap: var(--kenar); align-content: start; }
.sahne__foto {
  position: sticky;
  top: var(--kenar);
  align-self: start;
  height: calc(100svh - 2 * var(--kenar));
  border-radius: var(--rund);
  overflow: clip;
  background: var(--surface);
}
.sahne__resim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.sahne__resim.is-on { opacity: 1; }
/* Gestapelte Fotos, die gerade nicht vorne stehen, lädt der Browser erst nach der ersten Bewegung
   (Klasse bilder-hazir vom Skript): Sie liegen an derselben Stelle wie das vordere und würden
   sonst trotz loading="lazy" sofort mitgeladen — am Handy kostete das Sekunden bis zum ersten Bild. */
html:not(.bilder-hazir) .sahne__resim:not(.is-on),
html.js:not(.bilder-hazir) .tabak__foto:not(.is-on) { display: none; }
.kirp { transform: scale(1.16); }          /* Story-Bilder mit schwarzen Rändern links und rechts */
.sahne__serit {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 56px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 8px 20px;
  font-size: var(--step-small);
  background: var(--paper);
}

/* Erste Karte: wie eine gedruckte Karte, alles in der Mitte */
.kart {
  min-height: calc(100svh - 2 * var(--kenar));
  display: grid;
  grid-template-rows: auto 1fr;
  padding: 24px var(--innen) 32px;
  border-radius: var(--rund);
  background: var(--paper);
  text-align: center;
}
.kart__ust { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 16px; }
.kart__baglanti { justify-self: start; padding: 10px 0; font-size: var(--step-small); }
.kart__sag { justify-self: end; display: flex; align-items: center; gap: 2px; margin-top: -2px; }
.simge-baglanti { display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--muted); transition: color var(--t-hover) ease; }
.simge { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.simge__nokta { fill: currentColor; stroke: none; }
.kart__sag .kart__baglanti { margin-left: 10px; }
.kart__marka { display: grid; justify-items: center; gap: 6px; color: var(--accent); }
.kart__marka .marke { width: clamp(150px, 15vw, 220px); height: auto; fill: currentColor; }
.kart__marka span { font-size: var(--step-small); color: var(--ink); letter-spacing: 0; }
.kart__orta { align-self: start; display: grid; justify-items: center; gap: 28px; margin-top: 19svh; }
.kart__baslik {
  max-width: 14ch;
  font-size: var(--step-display);
  text-wrap: balance;
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--marine);
}
.kart__cumle { max-width: 40ch; text-wrap: balance; }

/* ---------- Leistungen als Karte: Papier mit Zickzackkante auf Nachtblau ---------- */
.menu {
  display: grid;
  justify-items: center;
  padding: clamp(56px, 7vw, 96px) var(--innen);
  border-radius: var(--rund);
  background: var(--marine);
}
.menu__kagit {
  width: min(580px, 100%);
  padding: 64px clamp(20px, 3vw, 44px) 56px;
  background: var(--paper);
  clip-path: polygon(0.00% 10px, 1.79% 0px, 3.57% 10px, 5.36% 0px, 7.14% 10px, 8.93% 0px, 10.71% 10px, 12.50% 0px, 14.29% 10px, 16.07% 0px, 17.86% 10px, 19.64% 0px, 21.43% 10px, 23.21% 0px, 25.00% 10px, 26.79% 0px, 28.57% 10px, 30.36% 0px, 32.14% 10px, 33.93% 0px, 35.71% 10px, 37.50% 0px, 39.29% 10px, 41.07% 0px, 42.86% 10px, 44.64% 0px, 46.43% 10px, 48.21% 0px, 50.00% 10px, 51.79% 0px, 53.57% 10px, 55.36% 0px, 57.14% 10px, 58.93% 0px, 60.71% 10px, 62.50% 0px, 64.29% 10px, 66.07% 0px, 67.86% 10px, 69.64% 0px, 71.43% 10px, 73.21% 0px, 75.00% 10px, 76.79% 0px, 78.57% 10px, 80.36% 0px, 82.14% 10px, 83.93% 0px, 85.71% 10px, 87.50% 0px, 89.29% 10px, 91.07% 0px, 92.86% 10px, 94.64% 0px, 96.43% 10px, 98.21% 0px, 100.00% 10px, 100.00% calc(100% - 10px), 98.21% calc(100% - 0px), 96.43% calc(100% - 10px), 94.64% calc(100% - 0px), 92.86% calc(100% - 10px), 91.07% calc(100% - 0px), 89.29% calc(100% - 10px), 87.50% calc(100% - 0px), 85.71% calc(100% - 10px), 83.93% calc(100% - 0px), 82.14% calc(100% - 10px), 80.36% calc(100% - 0px), 78.57% calc(100% - 10px), 76.79% calc(100% - 0px), 75.00% calc(100% - 10px), 73.21% calc(100% - 0px), 71.43% calc(100% - 10px), 69.64% calc(100% - 0px), 67.86% calc(100% - 10px), 66.07% calc(100% - 0px), 64.29% calc(100% - 10px), 62.50% calc(100% - 0px), 60.71% calc(100% - 10px), 58.93% calc(100% - 0px), 57.14% calc(100% - 10px), 55.36% calc(100% - 0px), 53.57% calc(100% - 10px), 51.79% calc(100% - 0px), 50.00% calc(100% - 10px), 48.21% calc(100% - 0px), 46.43% calc(100% - 10px), 44.64% calc(100% - 0px), 42.86% calc(100% - 10px), 41.07% calc(100% - 0px), 39.29% calc(100% - 10px), 37.50% calc(100% - 0px), 35.71% calc(100% - 10px), 33.93% calc(100% - 0px), 32.14% calc(100% - 10px), 30.36% calc(100% - 0px), 28.57% calc(100% - 10px), 26.79% calc(100% - 0px), 25.00% calc(100% - 10px), 23.21% calc(100% - 0px), 21.43% calc(100% - 10px), 19.64% calc(100% - 0px), 17.86% calc(100% - 10px), 16.07% calc(100% - 0px), 14.29% calc(100% - 10px), 12.50% calc(100% - 0px), 10.71% calc(100% - 10px), 8.93% calc(100% - 0px), 7.14% calc(100% - 10px), 5.36% calc(100% - 0px), 3.57% calc(100% - 10px), 1.79% calc(100% - 0px), 0.00% calc(100% - 10px));
}
.menu__baslik { font-size: var(--step-head); font-weight: 400; line-height: 1.1; letter-spacing: -0.03em; text-align: center; margin-bottom: 40px; }
.liste { width: 100%; border-collapse: collapse; }
.liste__grup + .liste__grup .liste__grup-ad { padding-top: 44px; }
.liste__grup-ad { padding-bottom: 14px; font-weight: 600; text-align: left; color: var(--gold-ink); }
.liste__kalem > * { padding-top: 18px; vertical-align: bottom; }
.liste__kalem th { font-weight: 500; text-align: left; white-space: nowrap; }
.liste__nokta { width: 100%; padding-inline: 10px; }
.liste__nokta::after { content: ""; display: block; margin-bottom: 0.42em; border-bottom: 4px dotted var(--muted); }
.liste__deger { white-space: nowrap; text-align: left; color: var(--muted); }
.liste__aciklama td { padding-top: 4px; max-width: 34ch; color: var(--muted); }
.menu__not { margin-top: 44px; text-align: center; }

/* ---------- Gergi tavan: quadratische Tafel, Reiter, zwei Aktionen ---------- */
.tabak {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  min-height: 88svh;
  margin: var(--kenar);
  padding: 40px;
  border-radius: var(--rund);
  background: var(--surface);
}
.tabak__resim { position: relative; align-self: center; aspect-ratio: 1; overflow: clip; border-radius: var(--rund); background: var(--bg); }
.tabak__foto { width: 100%; aspect-ratio: 1; object-fit: cover; }
.js .tabak__foto { position: absolute; inset: 0; height: 100%; opacity: 0; }
.js .tabak__foto.is-on { opacity: 1; }
.tabak__yan { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding-block: 8px; }
.sekmeler { display: none; flex-wrap: wrap; gap: 4px 22px; }
.js .sekmeler { display: flex; }
.sekme {
  padding: 10px 0;
  font-size: var(--step-body);
  color: var(--muted);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color var(--t-hover) ease;
}
.sekme[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.tabak__ust { display: grid; gap: 16px; }
.tabak__baslik { font-size: var(--step-head); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
.tabak__paneller { display: grid; gap: 24px; max-width: 46ch; }
.js .tabak__paneller { gap: 0; }
.js .tabak__panel { grid-area: 1 / 1; visibility: hidden; opacity: 0; }
.js .tabak__panel.is-on { visibility: visible; opacity: 1; }
.tabak__ad { margin-bottom: 14px; font-size: var(--step-display); font-weight: 300; line-height: 1; letter-spacing: -0.03em; }
.tabak__eylem { display: grid; grid-template-columns: 1fr 1fr; gap: var(--kenar); }
.hucre { min-height: 72px; background: var(--paper); }
.hucre--koyu { background: var(--ink); color: var(--paper); }

/* ---------- Uygulama: eine Reihe zum Ziehen ---------- */
.sira { padding-block: clamp(120px, 12vw, 180px) 0; }
.sira__bas {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 52ch) minmax(0, 1fr);
  align-items: baseline;
  gap: 24px;
  margin-bottom: 40px;
  padding-inline: calc(var(--kenar) + var(--innen));
}
.sira__baslik { font-size: var(--step-head); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
.sira__sayi { justify-self: end; color: var(--muted); }
.sira__cumle { max-width: 52ch; }
.sira__ray {
  display: flex;
  gap: var(--kenar);
  height: 68svh;
  min-height: 420px;
  padding-inline: calc(var(--kenar) + var(--innen));
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scroll-padding-inline: calc(var(--kenar) + var(--innen));
  scrollbar-width: none;
  cursor: grab;
}
.sira__ray::-webkit-scrollbar { display: none; }
.sira__ray.zieht { cursor: grabbing; scroll-snap-type: none; }
.modul { flex: none; height: 100%; scroll-snap-align: start; }
.modul figure, figure.modul { overflow: clip; border-radius: var(--rund); }
.modul img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.modul--uzun { aspect-ratio: 3 / 4; }
.modul--genis { aspect-ratio: 16 / 10; }
.modul--cift { display: grid; grid-template-rows: 1fr 1fr; gap: var(--kenar); aspect-ratio: 2 / 3; }
.modul--cift figure { min-height: 0; }

/* ---------- Kontakt: die Anschrift in Zeilen ---------- */
.iletisim {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 24px;
  row-gap: 48px;
  align-items: start;
  margin: 0 var(--kenar);
  padding: clamp(48px, 6vw, 88px) var(--innen);
  border-radius: var(--rund);
  background: var(--dark);
  color: var(--on-dark);
}
.iletisim__sol { grid-column: 1 / 6; display: grid; gap: 24px; justify-items: start; }
.iletisim__baslik { font-size: var(--step-head); font-weight: 400; line-height: 1.1; letter-spacing: -0.03em; }
.iletisim__cumle { max-width: 34ch; color: var(--on-dark-muted); }
.iletisim__aksiyon { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.dugme--koyu { background: var(--dark-2); color: var(--on-dark); }
.iletisim__liste { grid-column: 7 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; }
.iletisim__liste > div:first-child { grid-row: span 2; }
.iletisim__liste dt { font-size: var(--step-small); color: var(--accent); margin-bottom: 8px; }
.iletisim__liste dd { font-size: clamp(1.1875rem, 1.05rem + 0.45vw, 1.5rem); font-weight: 300; line-height: 1.35; letter-spacing: -0.015em; }
.iletisim__liste a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; transition: text-decoration-color var(--t-hover) ease; }

/* ---------- Schluss: das „imza" schreibt sich über dem Kontakt; Fuß: eine ruhige Zeile ---------- */
/* „imza" mit gleichem Abstand zur Bildreihe darüber und zum Kontaktfeld darunter bis zum sichtbaren
   Schriftzug — erst 140 px, dann 200 px (Weisungen vom 2026-10-23). Der Schriftzug sitzt in seiner Grafik
   oben und unten je etwa 8 px (am Handy 3 px) nach innen, darum hier 192 px bzw. 197 px. */
.kapanis { --imza-abstand: 192px; padding: var(--imza-abstand) calc(var(--kenar) + var(--innen)); }
.fuss { padding: clamp(24px, 2.4vw, 36px) calc(var(--kenar) + var(--innen)) 28px; }
.fuss__imza { width: min(100%, 1100px); height: auto; margin-inline: auto; fill: var(--accent); }
.fuss__satir {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: baseline;
  gap: 24px;
  font-size: var(--step-small);
  color: var(--muted);
}
.fuss__linkler { display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--ink); }
.fuss__sag { justify-self: end; display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--ink); }
.fuss__cerez { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; transition: text-decoration-color var(--t-hover) ease; }
.fuss__kunye { margin-top: 14px; font-size: var(--step-small); font-style: normal; color: var(--muted); }
.fuss a, .sahne__serit a, .kart__baglanti, .tabak__panel a { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.2em; transition: text-decoration-color var(--t-hover) ease, color var(--t-hover) ease; }

@media (hover: hover) and (pointer: fine) {
  .dugme:hover { background: var(--accent-strong); }
  .hucre:hover { background: var(--bg); }
  .hucre--koyu:hover { background: var(--accent); color: var(--accent-ink); }
  .sekme:hover { color: var(--ink); }
  .fuss a:hover, .sahne__serit a:hover, .kart__baglanti:hover { text-decoration-color: currentColor; }
  .kart__marka:hover .marke { transform: translateY(-2px); }
  .iletisim__liste a:hover { text-decoration-color: currentColor; }
  .dugme--koyu:hover { background: var(--accent); color: var(--accent-ink); }
  .simge-baglanti:hover { color: var(--ink); }
  .modul img { transition: transform 900ms var(--ease-out); }
  .modul figure:hover img:not(.kirp), figure.modul:hover img:not(.kirp) { transform: scale(1.03); }
}

/* ---------- Bewegung (nur mit JavaScript und erlaubter Bewegung) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .sahne__resim, .js .tabak__foto { transition: opacity 1600ms ease; }
  .js .tabak__panel { transition: opacity 500ms ease, visibility 0s linear 500ms; }
  .js .tabak__panel.is-on { transition: opacity 600ms ease 150ms, visibility 0s; }
  .kart__marka .marke { transition: transform 400ms var(--ease-out); }
  .js [data-load] { opacity: 0; animation: steigen 900ms var(--ease-out) var(--d, 0ms) forwards; }
  .intro-an [data-load] { animation-play-state: paused; }
  .js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 700ms ease calc(var(--i, 0) * 80ms), transform 900ms var(--ease-out) calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js .sahne__foto { animation: aufdecken 1100ms var(--ease-out) 120ms both; }
  .intro-an .sahne__foto { animation-play-state: paused; }
}
@keyframes steigen { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes aufdecken { from { clip-path: inset(6% 6% 6% 6% round var(--rund)); } to { clip-path: inset(0 round var(--rund)); } }

/* ---------- Telefon: das Foto zuerst, die Karte gleitet darüber ---------- */
@media (max-width: 899px) {
  :root { --innen: 20px; }
  .sahne { grid-template-columns: minmax(0, 1fr); }
  .sahne__foto { order: -1; height: 44svh; }
  .sahne__metin { position: relative; z-index: 1; }
  .kart { min-height: 0; padding-top: 18px; padding-bottom: 40px; }
  .kart__ust { align-items: center; }
  .kart__baglanti { display: none; }
  .kart__marka { grid-column: 2; }
  .kart__sag { grid-column: 3; margin-right: -10px; }
  .kart__marka .marke { width: 34vw; max-width: 180px; }
  .kart__marka span { display: none; }
  .kart__orta { margin-top: 20px; gap: 18px; }
  .kart__baslik { font-size: clamp(2.1rem, 7.4vw, 3.25rem); }
  .dugme { width: 100%; }
  .sahne__serit { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 16px; }
  .menu { padding: 40px 0; background: var(--marine); }
  .menu__kagit { width: calc(100% - 24px); padding: 52px 20px 44px; }
  .liste__nokta { padding-inline: 6px; }
  .liste__deger { font-size: var(--step-small); }
  .tabak { grid-template-columns: minmax(0, 1fr); padding: 16px; min-height: 0; }
  .tabak__yan { gap: 28px; }
  .tabak__ad { font-size: clamp(2.1rem, 7.4vw, 3.25rem); }
  .tabak__eylem { grid-template-columns: 1fr; }
  .hucre { min-height: 60px; }
  .sira__ray { height: 62svh; min-height: 0; gap: 8px; padding-inline: 20px; scroll-padding-inline: 20px; }
  .modul--uzun { width: 72vw; aspect-ratio: auto; }
  .modul--cift { width: 64vw; aspect-ratio: auto; gap: 8px; }
  .modul--genis { width: 88vw; height: 66%; align-self: center; aspect-ratio: auto; }
  .sira__bas { grid-template-columns: minmax(0, 1fr) auto; row-gap: 12px; margin-bottom: 28px; }
  .kapanis { --imza-abstand: 197px; }
  .sira__cumle { grid-column: 1 / -1; grid-row: 2; }
  .iletisim { grid-template-columns: minmax(0, 1fr); row-gap: 40px; padding: 40px 20px; }
  .iletisim__sol, .iletisim__liste { grid-column: 1; }
  .iletisim__aksiyon { width: 100%; }
  .iletisim__aksiyon .dugme { flex: 1 1 100%; }
  .iletisim__liste { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .iletisim__liste > div:first-child { grid-row: auto; }
  .fuss__satir { grid-template-columns: 1fr; gap: 8px; }
  .fuss__sag { justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* ---------- Unterschrift-Intro (Farben: --intro-grund, --intro-farbe) und das „imza" über dem Kontakt ---------- */
:root {
  --ease-intro-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-intro-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-yazi: cubic-bezier(0.37, 0.08, 0.32, 1);
}
.intro { display: none; }
.intro-an { overflow: hidden; }
.intro-an .intro, .intro.is-gehend {
  display: grid;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 100;
  background: var(--intro-grund);
  color: var(--intro-farbe);
  cursor: pointer;
}
.intro.is-gehend { opacity: 0; pointer-events: none; transition: opacity 650ms var(--ease-intro-in-out); }
.intro__marke { width: min(76vw, 540px); height: auto; fill: currentColor; overflow: visible; }
.intro__gec {
  position: absolute;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  padding: 12px 14px;
  font: inherit;
  font-size: 0.875rem;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
.zug { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-reduced-motion: no-preference) {
  .intro-an .intro .zug, .js .fuss__imza .zug { stroke-dasharray: var(--l); stroke-dashoffset: var(--l); }
  .intro-an .intro .zug, .js .fuss__imza.yaziliyor .zug { animation: zug var(--d) var(--ease-yazi) var(--t) forwards; }
  .intro .intro__ep { opacity: 0; animation: auftauchen 700ms var(--ease-intro-out) 80ms forwards; }
  .intro .intro__name { opacity: 0; animation: auftauchen 700ms var(--ease-intro-out) 760ms forwards; }
  .intro .intro__dekor { opacity: 0; animation: auftauchen 600ms var(--ease-intro-out) var(--t) forwards; }
}
@keyframes zug { to { stroke-dashoffset: 0; } }
@keyframes auftauchen { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- Çerez ayarları: Aufbau nach turkcell.com.tr, Knöpfe in Nachtblau, Leisten in Gold ---------- */
.cerez {
  position: fixed;
  z-index: 90;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  width: min(760px, calc(100% - 24px));
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 26px 36px 22px;
  text-align: center;
  color: var(--ink);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(11, 18, 34, 0.18); /* taste-skill-ignore: schwebender Dialog, wie im Vorbild */
}
.cerez[hidden] { display: none; }
.cerez__baslik { font-size: 1.375rem; font-weight: 400; line-height: 1.2; letter-spacing: -0.02em; }
.cerez__metin { max-width: 72ch; font-size: 0.9375rem; line-height: 1.5; color: var(--muted); }
.cerez__dugmeler { display: flex; justify-content: center; gap: 20px; margin-top: 10px; }
.cerez__dugme {
  min-width: 172px;
  min-height: 40px;
  padding: 0 22px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  color: #fff;
  background: var(--marine);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color var(--t-hover) ease, transform var(--t-press) var(--ease-out);
}
.cerez__dugme:active { transform: scale(0.97); }
.cerez__dugme--tercih { order: 1; }
.cerez__dugme--red { order: 2; }
.cerez__dugme--kabul { order: 3; }
@media (hover: hover) and (pointer: fine) {
  .cerez__dugme:hover { background: #1d2c4c; }
  .fuss__cerez:hover { text-decoration-color: currentColor; }
}

.tercih {
  width: min(720px, calc(100% - 24px));
  max-width: none;
  max-height: min(680px, calc(100svh - 32px));
  margin: auto;
  padding: 0;
  color: var(--ink);
  background: #fff;
  border: 0;
  border-radius: 6px;
  overflow: hidden;
}
.tercih[open] { display: flex; flex-direction: column; }
.tercih::backdrop { background: rgba(11, 18, 34, 0.55); }
.tercih__ust, .tercih__alt { display: flex; align-items: center; gap: 12px; padding: 8px 14px; color: var(--marine); background: var(--accent); }
.tercih__simge { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.tercih__baslik { flex: 1; font-size: 1.1875rem; font-weight: 600; letter-spacing: -0.01em; }
.tercih__kapat { display: grid; place-items: center; width: 40px; height: 40px; color: inherit; background: none; border: 0; cursor: pointer; }
.tercih__kapat svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }
.tercih__sekmeler { display: grid; grid-template-columns: 1fr 1fr; }
.tercih__sekmeler [role="tab"] { min-height: 46px; padding: 0 12px; font: inherit; font-size: 0.9375rem; font-weight: 500; color: var(--ink); background: var(--surface); border: 0; cursor: pointer; }
.tercih__sekmeler [aria-selected="true"] { background: #fff; }
.tercih__govde { flex: 1; overflow: auto; padding: 20px 22px; background: #fff; }
.tercih__panel { display: grid; gap: 18px; }
.tercih__panel[hidden] { display: none; }
.tercih__kart { padding: 14px 12px 16px; background: #fff; border-radius: 6px; box-shadow: 0 1px 8px rgba(11, 18, 34, 0.09); /* taste-skill-ignore: Karten im schwebenden Dialog, wie im Vorbild */ }
.tercih__satir { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 8px; }
.tercih__satir h3, .tercih__metin h3 { font-size: 1rem; font-weight: 600; }
.tercih__kart p, .tercih__metin p { font-size: 0.875rem; line-height: 1.55; color: var(--muted); }
.tercih__metin { gap: 10px; }
.tercih__metin h3:not(:first-child) { margin-top: 10px; }
.tercih__metin a { color: var(--ink); }
.tercih__tarih { margin-top: 8px; }
.tercih__alt { justify-content: space-between; }
.tercih__logo { width: 58px; height: auto; fill: var(--marine); }
.tercih__dugmeler { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; }
.tercih__dugmeler .cerez__dugme { min-width: 0; }
.anahtar {
  appearance: none;
  position: relative;
  flex: none;
  width: 48px;
  height: 26px;
  margin: 0;
  background: #d3d7de;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 200ms ease;
}
.anahtar::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform 200ms var(--ease-out); }
.anahtar:checked { background: var(--accent); }
.anahtar:checked::after { transform: translateX(22px); }
.anahtar:disabled { cursor: not-allowed; opacity: 0.55; }
.anahtar:focus-visible { outline: 3px solid var(--marine); outline-offset: 2px; }

@media (max-width: 899px) {
  .cerez { bottom: 12px; justify-items: start; padding: 20px 20px 22px; text-align: left; }
  .cerez__dugmeler { flex-direction: column; width: 100%; gap: 16px; }
  .cerez__dugmeler .cerez__dugme { order: 0; width: 100%; }
  .tercih__alt { flex-wrap: wrap; }
}