/* Hathunia schwarz-weiß (dritte Variante). Nur Schwarz, Papierweiß und abgeleitete Grautöne, keine Akzentfarbe. */
@font-face { font-family: Instrument; src: url(schriften/instrument-latin-ext.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap;
             unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Instrument; src: url(schriften/instrument-latin.woff2) format('woff2'); font-weight: 400; font-style: normal; font-display: swap;
             unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Instrument; src: url(schriften/instrument-italic-latin-ext.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap;
             unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Instrument; src: url(schriften/instrument-italic-latin.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap;
             unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Archivo; src: url(schriften/archivo-latin-ext-wdth-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; unicode-range: U+0100-024F; }
@font-face { font-family: Archivo; src: url(schriften/archivo-latin-wdth-normal.woff2) format('woff2'); font-weight: 100 900; font-display: swap; }

:root {
  --kara: #0C0C0D; --kara-2: #161617; --kara-yumusak: #9A9A97;      /* Nacht, Text darauf, leiser Text darauf */
  --kagit: #F2F1EE; --kagit-yumusak: #5E5E5B;                         /* Papier, leiser Text darauf */
  --gutter: clamp(16px, 4.5vw, 72px);
  --serif: Instrument, 'Times New Roman', serif;
  --sans: Archivo, system-ui, sans-serif;
  --premium: cubic-bezier(.4, 0, .2, 1);
}
* { box-sizing: border-box; margin: 0; }
html { background: var(--kara); color: var(--kagit); }
body { font-family: var(--sans); font-size: 1.0625rem; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.sprung { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--kagit); color: var(--kara); padding: 8px 12px; }
.sprung:focus { left: 8px; }

/* Kopfleiste ohne Fläche: dreht sich per „difference“ selbst um, weiß über Schwarz, schwarz über Weiß */
.kopf { position: fixed; inset: 0 0 auto 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
        padding: 18px var(--gutter); color: #FFFFFF; mix-blend-mode: difference; pointer-events: none; }
.kopf > * { pointer-events: auto; }
.marke { display: block; width: clamp(104px, 9vw, 136px); }
.marke img { display: block; width: 100%; height: auto; }
.kopf__sag { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); font-size: 14px; font-weight: 500; letter-spacing: .01em; }
.cizgili { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 3px;
           transition: background-size .32s var(--premium); }
.cizgili:hover { background-size: 0 1px; background-position: 100% 100%; }
.cizgili--buyuk { font-size: 1.05rem; font-weight: 600; }

/* Register (Menü): Vollbild, große Schrift */
.register { position: fixed; inset: 0; z-index: 25; background: var(--kara); display: grid; align-content: center; padding: 96px var(--gutter) 48px; }
.register[hidden] { display: none; }
.register ol { list-style: none; padding: 0; }
.register li { font-family: var(--serif); font-size: clamp(2.6rem, 8vw, 6.5rem); line-height: 1.02; letter-spacing: -.02em; }
.register li a { text-decoration: none; }
.register li a:hover { font-style: italic; }
.register li span { color: #5A5A58; }
.register__not { margin-top: 28px; font-size: .9rem; color: var(--kara-yumusak); max-width: 40ch; }

/* ---------- Startbild ---------- */
.buehne { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--kara); }
.ebene { position: absolute; inset: 0; }
.positiv { color: var(--kagit); }
/* Lichtfleck = Ellipse um (--lx, --ly); beim Start ein Schlitz, der sich öffnet */
.negativ { z-index: 2; background: var(--kagit); color: var(--kara); --lx: 28%; --ly: 46%; --rx: 0px; --ry: 0px;
           clip-path: ellipse(var(--rx) var(--ry) at var(--lx) var(--ly)); }
.hof { position: absolute; left: 0; top: 0; width: 2px; height: 2px; pointer-events: none; opacity: 0; z-index: 1;
       translate: var(--hx, 62vw) var(--hy, 47svh); }
.hof::before { content: ""; position: absolute; left: -50vmin; top: -50vmin; width: 100vmin; height: 100vmin; border-radius: 50%;
               background: radial-gradient(closest-side, rgba(242, 241, 238, .16), rgba(242, 241, 238, .05) 55%, rgba(242, 241, 238, 0));
               transform: scale(var(--hs, .5)); }

.kulisse { position: absolute; left: 0; right: 0; bottom: 6svh; overflow: hidden; pointer-events: none; }
.kulisse__band { display: flex; gap: .35em; width: max-content; font-family: var(--serif); font-style: italic; font-size: clamp(7rem, 22vw, 24rem);
                 line-height: .9; letter-spacing: -.03em; white-space: nowrap; animation: band 70s linear infinite; }
.positiv .kulisse__band { color: transparent; -webkit-text-stroke: 1px rgba(242, 241, 238, .13); }
.negativ .kulisse__band { color: rgba(12, 12, 13, var(--kulisse-a, .07)); }
@keyframes band { to { transform: translateX(-50%); } }

.baslik { position: absolute; left: var(--gutter); top: 21svh; font-family: var(--serif); font-weight: 400; font-size: clamp(3.6rem, 10.4vw, 11.5rem);
          line-height: .9; letter-spacing: -.025em; }
.baslik .satir { display: block; }
.baslik .satir:nth-child(2) { padding-left: .9em; }
.baslik em { font-style: italic; }
.gsap-wartet .baslik { visibility: hidden; }

.unter { position: absolute; right: var(--gutter); bottom: 9svh; width: min(25rem, 34vw); font-size: .95rem; }
.unter__giris { max-width: 34ch; }
.positiv .unter__giris, .positiv .unter__not { color: var(--kara-yumusak); }
.negativ .unter__giris, .negativ .unter__not { color: var(--kagit-yumusak); }
.hizmetler { list-style: none; padding: 0; margin: 20px 0 12px; border-top: 1px solid currentColor; }
.hizmetler li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px solid rgba(127, 127, 125, .35);
                font-variant-numeric: tabular-nums; }
.unter__not { font-size: .8rem; margin-bottom: 22px; }

.staub { position: absolute; inset: 0; pointer-events: none; }
.staub i { position: absolute; width: var(--g, 3px); height: var(--g, 3px); border-radius: 50%; background: var(--kagit); opacity: var(--o, .4); }

/* ---------- Papier (Fotoğraf) ---------- */
.papier { position: relative; background: var(--kagit); color: var(--kara); padding: clamp(96px, 16vh, 180px) 0 clamp(96px, 14vh, 160px); overflow: hidden; }
.dev-kelime { font-family: var(--serif); font-weight: 400; font-size: clamp(5.5rem, 21vw, 22rem); line-height: .82; letter-spacing: -.035em; white-space: nowrap; }
.dev-kelime span { display: inline-block; padding-left: var(--gutter); }
.papier__satz { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); padding: clamp(40px, 8vh, 96px) var(--gutter) 0; }
.vizor { grid-column: 2; position: relative; padding: 34px 38px; max-width: 34rem; }
.vizor__kose { position: absolute; width: 22px; height: 22px; border: 0 solid currentColor; }
.vizor__kose:nth-of-type(1) { left: 0; top: 0; border-width: 1px 0 0 1px; }
.vizor__kose:nth-of-type(2) { right: 0; top: 0; border-width: 1px 1px 0 0; }
.vizor__kose:nth-of-type(3) { left: 0; bottom: 0; border-width: 0 0 1px 1px; }
.vizor__kose:nth-of-type(4) { right: 0; bottom: 0; border-width: 0 1px 1px 0; }
.papier__giris { font-size: 1.2rem; line-height: 1.5; max-width: 36ch; }
.fiyatlar { margin: 28px 0 18px; border-top: 1px solid currentColor; font-variant-numeric: tabular-nums; }
.fiyatlar div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(127, 127, 125, .4); }
.fiyatlar dd { font-weight: 600; }
.papier__not { font-size: .86rem; color: var(--kagit-yumusak); max-width: 44ch; }

/* ---------- Verschluss ---------- */
.verschluss { position: relative; height: 100svh; background: var(--kagit); color: var(--kara); display: grid; place-items: center; overflow: hidden; }
.verschluss__satir { font-family: var(--serif); font-size: clamp(2.2rem, 5.6vw, 5.4rem); line-height: 1; letter-spacing: -.02em; text-align: center; padding: 0 var(--gutter); }
.lamellen { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(7, 1fr); pointer-events: none; }
.lamellen i { display: block; background: var(--kara); transform: scaleY(0); margin-bottom: -1px; }   /* jede Lamelle schließt sich von ihrer Mitte aus */

/* ---------- Gece (Video) ---------- */
.gece { position: relative; background: var(--kara); color: var(--kagit); padding: clamp(80px, 14vh, 160px) 0 clamp(64px, 10vh, 120px); overflow: hidden; }
.gece__ust { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; padding-right: var(--gutter); }
.zaman { display: flex; align-items: center; gap: 10px; font-variant-numeric: tabular-nums; font-size: 1.1rem; letter-spacing: .04em; padding-bottom: 2.4vw; }
.zaman__nokta { width: 9px; height: 9px; border-radius: 50%; background: var(--kagit); }
.gece__satz { padding: clamp(40px, 7vh, 80px) var(--gutter) 0; max-width: 40rem; }
.gece .papier__giris { color: var(--kagit); }
.gece .fiyatlar div { border-color: rgba(154, 154, 151, .35); }
.devami { margin: clamp(72px, 12vh, 140px) var(--gutter) 0; font-size: .82rem; color: var(--kara-yumusak); max-width: 60ch; }

@media (max-width: 860px) {
  .kopf { padding: 14px var(--gutter); }
  .kopf__sag { font-size: 13px; gap: 16px; }
  .baslik { top: 15svh; font-size: clamp(3.2rem, 17vw, 6rem); }
  .baslik .satir:nth-child(2) { padding-left: .6em; }
  .unter { left: var(--gutter); right: var(--gutter); width: auto; bottom: 4svh; font-size: .9rem; }
  .unter__giris { display: none; }
  .hizmetler { margin-top: 0; }
  .hizmetler li { padding: 5px 0; }
  .kulisse { bottom: auto; top: 54svh; }
  .kulisse__band { font-size: 30vw; }
  .negativ { --lx: 56%; --ly: 27%; }
  .papier__satz { grid-template-columns: 1fr; }
  .vizor { grid-column: 1; padding: 26px 24px; }
  .gece__ust { flex-direction: column; align-items: flex-start; padding-right: 0; }
  .zaman { padding: 0 var(--gutter); }
}
@media (max-height: 700px) and (min-width: 861px) {
  .baslik { top: 17svh; font-size: clamp(3.4rem, 8.6vw, 9rem); }
  .unter__giris { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kulisse__band { animation: none; }
  .gsap-wartet .baslik { visibility: visible; }
  .negativ { --rx: 15vmin; --ry: 15vmin; }
  .lamellen { display: none; }
  .verschluss { height: auto; padding: 18vh 0; }
  .cizgili { transition: none; }
}

/* ===================== Rest der Seite (23.10.2026, nach OK des Chefs) =====================
   Grundsatz: Was in CSS steht, ist der Endzustand jedes Übergangs. sw.js setzt den Anfang und spielt ihn ab.
   So sieht die Seite ohne Bewegung (oder ohne JavaScript) ruhig und vollständig aus. */
.gizli { position: absolute; width: 0; height: 0; overflow: hidden; }
.baslik-orta { font-family: var(--serif); font-weight: 400; font-size: clamp(2.8rem, 6.2vw, 6.4rem); line-height: .95; letter-spacing: -.02em; margin-bottom: 28px; }
.baslik-orta em, .dev-kelime em { font-style: italic; }
.liste { list-style: none; padding: 0; margin: 24px 0; }
.liste li { padding: 9px 0; border-top: 1px solid rgba(127, 127, 125, .35); }
.liste li:last-child { border-bottom: 1px solid rgba(127, 127, 125, .35); }

/* Önce / sonra: zwei Filme im Sucher, Text daneben, abwechselnd links und rechts. Unter dem Text Zeitcode wie bei „Video“,
   die Linie darüber füllt sich mit dem Film (--i von 0 bis 1, gesetzt in sw.js) */
.filmler { background: var(--kara); color: var(--kagit); padding: clamp(24px, 6vh, 72px) var(--gutter) clamp(96px, 16vh, 180px); }
.filmler__ust { max-width: 40rem; margin-bottom: clamp(48px, 9vh, 104px); }
.filmler .papier__giris { color: var(--kara-yumusak); }
.film { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.film + .film { margin-top: clamp(72px, 14vh, 160px); }
.film--ters { grid-template-columns: minmax(0, 3fr) minmax(0, 8fr); }
.film--ters .film__kare { order: 2; }
.film__kare { position: relative; padding: clamp(10px, 1.3vw, 18px); }
.film__video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--kara-2); }
.film__video:not([controls]) { cursor: pointer; }
.film__yazi { font-size: .92rem; color: var(--kara-yumusak); max-width: 24rem; padding-bottom: clamp(10px, 1.3vw, 18px); }
.film__ad { font-family: var(--serif); font-size: clamp(1.7rem, 2.6vw, 2.4rem); line-height: 1; letter-spacing: -.015em; color: var(--kagit); margin-bottom: 14px; }
.film__ad em { font-style: italic; }
.film__alt { position: relative; display: flex; align-items: center; gap: 18px; margin: 20px 0 16px; padding-top: 12px; color: var(--kagit);
             border-top: 1px solid rgba(154, 154, 151, .3); font-size: .86rem; font-variant-numeric: tabular-nums; }
.film__alt[hidden] { display: none; }
.film__alt::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 1px; background: var(--kagit);
                     transform: scaleX(var(--i, 0)); transform-origin: 0 50%; transition: transform .25s linear; }
.film__dugme, .film__buyut { font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.film__buyut { margin-left: auto; }
.film__kaynak { font-size: .74rem; line-height: 1.45; }
.film__kaynak a { color: inherit; }

/* Web siteleri: Bühne mit Browserfenster (Endzustand: Fenster füllt alles) */
.web { background: var(--kagit); color: var(--kara); }
.web__sahne { position: relative; height: 100svh; overflow: hidden; background: var(--kara); }
.pencere { position: absolute; inset: 0; background: var(--kagit); color: var(--kara);
           clip-path: inset(var(--pt, 0px) var(--pr, 0px) var(--pb, 0px) var(--pl, 0px) round var(--prad, 0px)); }
.pencere__cubuk { position: absolute; left: 0; top: 0; z-index: 1; display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px; width: 100vw;
                  border-bottom: 1px solid rgba(12, 12, 13, .14); background: var(--kagit); font-size: 12px; color: var(--kagit-yumusak);
                  transform: translate(var(--pl, 0px), var(--pt, 0px)); opacity: var(--cubuk, 0); }
.pencere__cubuk i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid currentColor; }
.pencere__cubuk span { margin-left: 18px; padding: 3px 14px; border-radius: 6px; background: rgba(12, 12, 13, .06); }
.pencere__ic { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; transform: scale(var(--pis, 1)); transform-origin: 50% 50%; }
.dev-kelime--orta { white-space: normal; font-size: clamp(4.6rem, 15vw, 16rem); line-height: .86; }
.dev-kelime--orta span { padding-left: 0; }
.pencere__alt { margin-top: 26px; font-size: 1.1rem; color: var(--kagit-yumusak); }
.web__satz { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center;
             padding: clamp(72px, 12vh, 140px) var(--gutter) clamp(96px, 16vh, 180px); }
.web__metin { max-width: 30rem; }
.ornek { position: relative; margin: 0 4% 0 0; }
.ornek__cerceve { position: relative; }
.ornek img { display: block; width: 100%; height: auto; filter: grayscale(1) contrast(1.04); border: 1px solid var(--kara); }
.ornek .ornek__handy { position: absolute; right: -5%; bottom: -10%; width: 24%; border: 5px solid var(--kara); border-radius: 18px; }
.ornek figcaption { margin-top: 18px; font-size: .82rem; color: var(--kagit-yumusak); }

/* Uhr: Zeiger dreht einmal, aus Tag wird Nacht (Endzustand: Nacht, 02:14) */
.saat { position: relative; height: 100svh; overflow: hidden; background: var(--kagit); color: #FFFFFF; }
.saat__gece { position: absolute; inset: 0; background: var(--kara); }
.saat__ibre { position: absolute; left: 50%; top: 50%; width: 1px; height: 80vmax; margin-left: -.5px; background: #FFFFFF; mix-blend-mode: difference;
              transform-origin: 50% 0; transform: rotate(calc(var(--a, 0deg) + 180deg)); opacity: var(--ibre, 0); }
.saat__zaman { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-58%); text-align: center; font-family: var(--serif);
               font-size: clamp(5rem, 19vw, 20rem); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; mix-blend-mode: difference; }
.saat__satir { position: absolute; left: 0; right: 0; bottom: 12svh; text-align: center; font-family: var(--serif); font-size: clamp(1.8rem, 3.6vw, 3.4rem);
               mix-blend-mode: difference; padding: 0 var(--gutter); }

/* WhatsApp asistanı: Nacht, Gespräch baut sich auf */
.asistan { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; min-height: 100svh;
           padding: clamp(96px, 12vh, 140px) var(--gutter); background: var(--kara); color: var(--kagit); }
.asistan .papier__giris { color: var(--kagit); }
.asistan .papier__not, .insta .papier__not { margin: 4px 0 22px; }
.asistan .papier__not { color: var(--kara-yumusak); }
.sohbet { max-width: 28rem; width: 100%; justify-self: end; }
.sohbet__kim { font-size: .85rem; color: var(--kara-yumusak); padding-bottom: 12px; border-bottom: 1px solid rgba(154, 154, 151, .3); }
.sohbet__kim b { color: var(--kagit); font-weight: 600; }
.sohbet__akis { list-style: none; padding: 14px 0 0; display: flex; flex-direction: column; gap: 8px; }
.m { max-width: 84%; padding: 9px 13px 7px; border-radius: 16px; font-size: .93rem; line-height: 1.4; }
.m time { display: block; text-align: right; font-size: .68rem; opacity: .6; margin-top: 2px; font-variant-numeric: tabular-nums; }
.gelen { align-self: flex-start; border: 1px solid rgba(242, 241, 238, .4); border-bottom-left-radius: 4px; }
.giden { align-self: flex-end; background: var(--kagit); color: var(--kara); border-bottom-right-radius: 4px; }
.kart { align-self: center; text-align: center; border: 1px solid var(--kagit); border-radius: 12px; font-size: .86rem; padding: 10px 18px; }
.kart b { display: block; font-weight: 600; }
.durum { align-self: center; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--kara-yumusak); padding: 4px 0; }
.sohbet__not { margin-top: 16px; font-size: .78rem; color: var(--kara-yumusak); }

/* Kacheln: neun Felder drehen sich von Schwarz zu Weiß (Endzustand: weiß) */
.kareler { position: relative; height: 100svh; overflow: hidden; background: var(--kara); }
.kareler__izgara { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); }
.kareler__izgara i { display: block; background: var(--kagit); margin: -.5px; }
.kareler__kelime { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--serif); font-style: italic; color: var(--kara);
                   font-size: clamp(3.6rem, 12vw, 12rem); letter-spacing: -.03em; }

/* Instagram yönetimi */
.insta { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center;
         padding: clamp(72px, 10vh, 120px) var(--gutter) clamp(96px, 14vh, 160px); background: var(--kagit); color: var(--kara); }
.insta .papier__not { color: var(--kagit-yumusak); }
.profil { max-width: 27rem; width: 100%; justify-self: end; }
.profil__ust { display: flex; align-items: center; gap: 14px; font-size: .9rem; line-height: 1.35; margin-bottom: 14px; }
.profil__ust b { font-weight: 600; }
.profil__resim { width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--kara); display: grid; place-items: center; overflow: hidden; }
.profil__resim svg { width: 46%; fill: var(--kara); }
.onay { display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1px solid var(--kara); padding: 9px 10px 9px 12px; font-size: .8rem; margin-bottom: 10px; }
.onay__dugme { background: var(--kara); color: var(--kagit); padding: 5px 12px; font-weight: 600; white-space: nowrap; }
.profil__izgara { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.profil__izgara li { aspect-ratio: 1; display: grid; place-items: center; background: #E2E1DD; overflow: hidden; }
.profil__izgara svg { width: 46%; fill: var(--kara); }
.profil__izgara .k-ters { background: var(--kara); }
.profil__izgara .k-ters svg { fill: var(--kagit); }
.profil__izgara .k-cizgi svg { fill: none; stroke: var(--kara); stroke-width: 5; }
.profil__izgara .k-cizgi.k-ters svg { stroke: var(--kagit); }
.profil__izgara .k-isik { background: radial-gradient(circle at 50% 42%, #FFFFFF 0, #D4D3CF 72%); }
.profil__izgara .k-yeni { background: var(--kagit); outline: 1px solid var(--kara); outline-offset: -1px; }
.profil__izgara .k-yazi { font-family: var(--serif); font-size: clamp(.9rem, 1.5vw, 1.25rem); line-height: 1.05; text-align: center; }
.profil__izgara .k-yazi.k-ters { color: var(--kagit); }
.profil__izgara .k-uc { display: flex; justify-content: center; align-items: center; gap: 2%; }
.profil__izgara .k-uc svg { width: 25%; }
.profil__izgara .k-kucuk svg { width: 28%; }
.insta .sohbet__not { color: var(--kagit-yumusak); }

/* Vorhang: die weiße Seite teilt sich in der Mitte (Endzustand: offen, Schwarz) */
.perde { position: relative; height: 100svh; overflow: hidden; background: var(--kara); color: var(--kagit); display: grid; place-items: center; }
.perde__satir, .perde__yari span { font-family: var(--serif); font-size: clamp(2.6rem, 6.4vw, 6.4rem); line-height: 1; letter-spacing: -.02em; text-align: center; }
.perde__yari { position: absolute; top: 0; bottom: 0; width: 50%; overflow: hidden; background: var(--kagit); color: var(--kara); }
.perde__yari--sol { left: 0; transform: translateX(-101%); }
.perde__yari--sag { right: 0; transform: translateX(101%); }
.perde__yari span { position: absolute; top: 50%; width: 100vw; transform: translateY(-50%); }
.perde__yari--sol span { left: 0; }
.perde__yari--sag span { left: -50vw; }

/* Ablauf: vier Schritte, eine Lichtlinie zeigt den aktuellen */
.nasil { position: relative; background: var(--kara); color: var(--kagit); padding: clamp(64px, 10vh, 120px) var(--gutter) clamp(80px, 12vh, 140px); }
.adimlar { list-style: none; padding: 0; position: relative; max-width: 72rem; }
.adimlar li { display: grid; grid-template-columns: 4rem minmax(0, 1fr) minmax(0, 22rem); gap: 24px; align-items: baseline; padding: 24px 0;
              border-top: 1px solid rgba(154, 154, 151, .3); opacity: var(--adim-a, 1); transition: opacity .35s var(--premium); }
.adim__no { font-family: var(--serif); font-style: italic; font-size: 2rem; color: var(--kara-yumusak); }
.adim__ad { font-family: var(--serif); font-size: clamp(1.9rem, 3.6vw, 3.4rem); line-height: 1; letter-spacing: -.015em; }
.adim__not { color: var(--kara-yumusak); }
.isik-cizgi { position: absolute; left: var(--gutter); right: var(--gutter); top: 0; height: 2px; pointer-events: none; opacity: 0;
              background: linear-gradient(90deg, rgba(242, 241, 238, 0), var(--kagit) 18%, var(--kagit) 82%, rgba(242, 241, 238, 0));
              box-shadow: 0 0 18px 2px rgba(242, 241, 238, .35); }
.nasil__studyo { margin-top: clamp(56px, 9vh, 96px); font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.3rem); line-height: 1.15; max-width: 30ch; }

/* Häufige Fragen */
.sorular { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start;
           padding: clamp(96px, 14vh, 160px) var(--gutter); background: var(--kagit); color: var(--kara); }
.sss { border-bottom: 1px solid rgba(127, 127, 125, .4); }
.soru { border-top: 1px solid rgba(127, 127, 125, .4); }
.soru h3 { font: inherit; }
.soru button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; text-align: left; padding: 18px 0;
               font-family: var(--serif); font-size: clamp(1.25rem, 2vw, 1.7rem); line-height: 1.15; }
.soru button i { position: relative; flex: none; width: 16px; height: 16px; transition: transform .3s var(--premium); }
.soru button i::before, .soru button i::after { content: ""; position: absolute; left: 0; top: 7.5px; width: 16px; height: 1px; background: currentColor; }
.soru button i::after { transform: rotate(90deg); }
.soru button[aria-expanded=true] i { transform: rotate(45deg); }
.cevap p { padding: 0 0 20px; max-width: 58ch; color: var(--kagit-yumusak); }

/* Schluss: kleiner Lichtfleck, darin die Einladung (Endzustand) */
.son { position: relative; height: 100svh; overflow: hidden; background: var(--kara); }
.son__isik { position: absolute; inset: 0; display: grid; place-items: center; background: var(--kagit); color: var(--kara);
             clip-path: circle(var(--sr, max(30vmin, 14rem)) at 50% 50%); }
.son__ic { max-width: 19rem; text-align: center; font-size: .9rem; line-height: 1.45; }
.son__baslik { font-family: var(--serif); font-weight: 400; font-size: 2.6rem; line-height: 1; letter-spacing: -.02em; margin-bottom: 12px; }
.son__baslik em { font-style: italic; }
.son__ic .cizgili { display: inline-block; margin-top: 16px; font-weight: 600; }
.son__posta { display: block; margin-top: 8px; font-size: .82rem; color: var(--kagit-yumusak); text-decoration: none; }

.fuss { background: var(--kara); color: var(--kara-yumusak); padding: 40px var(--gutter) 48px; font-size: .82rem; display: grid; gap: 12px; }
.fuss__marke { width: 110px; display: block; }
.fuss__marke img { display: block; width: 100%; height: auto; }
.fuss nav { display: flex; gap: 22px; color: var(--kagit); }
.fuss__klein { font-size: .74rem; max-width: 70ch; }

@media (max-width: 860px) {
  .web__satz, .asistan, .insta, .sorular, .film, .film--ters { grid-template-columns: 1fr; }
  .film--ters .film__kare { order: 0; }
  .film__kare { margin: 0 -8px; padding: 8px; }
  .sohbet, .profil { justify-self: start; }
  .ornek { margin: 24px 0 40px; }
  .adimlar li { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .adim__not { grid-column: 2; }
  .saat__zaman { font-size: 26vw; }
}
@media (prefers-reduced-motion: reduce) {
  .kareler { display: none; }
  .perde { height: 60svh; }
  .soru button i { transition: none; }
}

/* Hintergrundmusik: Knopf „Ses“ in der Kopfleiste, drei Balken schwingen, solange Musik läuft (Wunsch Chef 26.10.2026) */
.ses-knopf { display: inline-flex; align-items: center; gap: 8px; }
.ses-knopf[hidden] { display: none; }
.ses-dalga { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; }
.ses-dalga i { display: block; width: 2px; height: 3px; background: currentColor; transition: height .3s var(--premium); }
.ses-knopf[aria-pressed="true"] .ses-dalga i { animation: ses-dalga 1.1s var(--premium) infinite alternate; }
.ses-knopf[aria-pressed="true"] .ses-dalga i:nth-child(2) { animation-delay: -.45s; }
.ses-knopf[aria-pressed="true"] .ses-dalga i:nth-child(3) { animation-delay: -.8s; }
@keyframes ses-dalga { from { height: 3px; } to { height: 12px; } }
@media (prefers-reduced-motion: reduce) { .ses-knopf[aria-pressed="true"] .ses-dalga i { animation: none; height: 9px; } }
/* sehr kleine Handys: nur die Balken (Beschriftung bleibt für Screenreader), Kopfzeile etwas enger, Logo minimal kleiner */
@media (max-width: 360px) { .ses-knopf > span:last-child { display: none; } .kopf__sag { gap: 12px; } .marke { width: 92px; } }