/* ==========================================================================
   YCL Games — editorial identity layer
   --------------------------------------------------------------------------
   Rebuilt from scratch: near-black ground, off-white text, one accent
   pulled from Mozaik Blast's own mark. No cards, no gradients, no glow —
   typography alone carries the page. No gameplay captures, no in-game UI,
   and no abstract stand-in for the board or its blocks anywhere on the
   marketing site — not even a CSS grid quoting the game's geometry. This
   is a studio/brand site, not a feature catalog for Mozaik Blast — the
   game gets one brief, type-only masthead, not a walkthrough of its
   mechanics. Three rules:

     1. NOTHING IS A CARD. Content sits directly on the page, separated by
        whitespace and the occasional hairline — never a filled, bordered
        box. Photography is not framed in a device mockup.
     2. ONE ACCENT, USED SPARINGLY. It marks a line, a link, a focus ring —
        never a fill, never a flood, never a gradient.
     3. TYPE CARRIES HIERARCHY. Eyebrow → Display → Subhead → Body →
        Caption, five distinct registers. Not every heading is the same
        size; not every section shouts.

   No longer depends on the Nocturne design system (archived to
   _archive/legacy-ds/) — its tokens, resets and fonts were a starting
   scaffold, not this site's design. Fonts are loaded directly by this
   project now (see the <link> tags in index.html).

   Class names the page scripts hook into are kept exactly as those
   scripts expect them: #ycl-scroll-progress, .y-rv, .y-in, .y-clip,
   the glass-nav and y-menu families, and #ycl-waitlist-count with
   .y-msg--ok. Every one of those reveals fires the instant its element
   enters the viewport (ycl-ui.js's IntersectionObserver) — nothing here
   is scroll-scrubbed or gated behind a GSAP timeline.
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
  /* Midnight navy ailesi. Notr siyah yerine cok koyu lacivert: hero'nun
     Iznik mavisi parlamalari ve altindaki bolumler ayni atmosferde kaliyor,
     aralarinda sert bir kesim olusmuyor. Saf #000 kullanilmiyor. */
  /* Her sayfanin en ustundeki ton. Dikey rampa buradan --y-bg'ye iner ve
     bu rampa TUM sayfalarda ayni (bkz. .theme-root), boylece ana sayfadan
     bir yasal sayfaya gecerken ust renk atlamiyor. */
  --y-top:       #0d1728;
  --y-bg:        #070b14;
  --y-bg-2:      #0a101d;
  --y-surface:   #101827;

  /* Hairline'lar da hafif mavi-serin tonda, yoksa navy uzerinde gri duruyor. */
  --y-line:      rgba(206,222,247,0.10);
  --y-line-2:    rgba(206,222,247,0.19);

  --y-text:      #f2f1ed;
  --y-dim:       rgba(242,241,237,0.64);
  /* 0.42 iken mono etiketler (10.5-11.5px) #070b14 uzerinde 3.74:1 idi;
     kucuk metin icin WCAG AA 4.5:1 istiyor. 0.48 -> 4.52:1. */
  --y-dim-2:     rgba(242,241,237,0.48);

  /* Pulled from Mozaik Blast's own mark (the logo's violet-indigo stone) —
     the game and the studio now share one identity instead of being kept
     deliberately apart. Still used as a line and a mark, never a flood. */
  --y-accent:    #6e5ce6;
  --y-accent-hi: #8f7ff2;
  --y-accent-dk: #4a3bb0;
  --y-on-accent: #ffffff;

  --y-pad:  clamp(20px, 5vw, 72px);
  --y-sec:  clamp(96px, 12vw, 200px);
  --y-max:  1440px;

  --y-ease:      cubic-bezier(0.16, 1, 0.3, 1);
  --y-ease-soft: cubic-bezier(0.22, 1, 0.36, 1);

  /* Archivo carries every display size — its width axis, not extra
     weight, is what gives headings presence. Plex Sans is body copy;
     Plex Mono is every eyebrow, caption and piece of metadata, so the
     three registers never compete. */
  --y-display: "Archivo", "IBM Plex Sans", system-ui, sans-serif;
  --y-body:    "IBM Plex Sans", system-ui, sans-serif;
  --y-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* The only two widths Archivo's variable axis is ever set to. Every
     bold/uppercase Archivo usage on the site traces back to one of these
     two — no component invents its own number, so nothing ever renders
     at the font's untouched default width by omission. */
  --wdth-display: 78; /* Hero word, section h2s, Mozaik Blast name */
  --wdth-label:   84; /* nav wordmark, menu items, subnav brand, more/news row titles */
}

html.theme-light {
  --y-top:       #e9eef7;
  --y-bg:        #f6f5f2;
  --y-bg-2:      #eeece7;
  --y-surface:   #ffffff;
  --y-line:      rgba(15,15,18,0.12);
  --y-line-2:    rgba(15,15,18,0.22);
  --y-text:      #121215;
  --y-dim:       rgba(15,15,18,0.66);
  --y-dim-2:     rgba(15,15,18,0.56);
  --y-accent:    #5744d1;
  --y-accent-hi: #4a3bb0;
  --y-accent-dk: #3a2e8c;
  --y-on-accent: #ffffff;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--y-bg);
  color: var(--y-text);
  font-family: var(--y-body);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* The template runtime paints its own defaults before this sheet is
   applied; assert the real ground/text colors so there is never a flash
   of unstyled white. */
html, body { background: var(--y-bg) !important; color: var(--y-text) !important; }

* { box-sizing: border-box; }
/* Alt-piksel yuvarlamasi 375px gibi dar ekranlarda 1-2px yatay kaydirma
   yaratabiliyor. "clip" kullaniliyor, "hidden" degil: hidden bir kaydirma
   kapsayicisi olusturup sticky navbar'i bozardi; clip bozmaz. Galeri
   seridi kendi bagimsiz kaydirma kutusunda oldugu icin etkilenmiyor. */
html, body { overflow-x: clip; }
img, video { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }
/* Satir ici baglantilar. --y-accent (#6e5ce6) koyu zeminde 4.06:1 veriyordu
   ve govde metni boyutunda WCAG AA'yi gecmiyordu; --y-accent-hi (#8f7ff2)
   6.08:1. Hover artik alt cizgi ile ayirt ediliyor, renkle degil. */
a:not([class]) { color: var(--y-accent-hi); }
a:not([class]):hover { color: var(--y-accent-hi); text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--y-accent);
  outline-offset: 2px;
}
::selection { background: color-mix(in srgb, var(--y-accent) 34%, transparent); color: var(--y-text); }

.y-vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.y-skip {
  position: fixed; top: -100%; left: 12px; z-index: 100;
  padding: 10px 16px;
  background: var(--y-accent); color: var(--y-on-accent);
  font-family: var(--y-mono); font-size: 13px;
  transition: top 0.2s var(--y-ease);
}
.y-skip:focus-visible { top: 12px; }

/* Sayfa geneli dikey renk rampasi. .theme-root ana sayfada da, yasal
   sayfalarda da, 404 ve challenge'da da bulunan tek ortak sarmalayici;
   rampayi burada tanimlayinca butun sayfalar ayni ust tondan baslayip ayni
   zemine iniyor. Sabit piksel yuksekligi kullaniliyor ki sayfa uzunlugu
   degistiginde gecis hizi degismesin. */
.theme-root {
  background:
    /* Cok soluk Iznik mavisi isik. Ayni deger her sayfada uygulandigi icin
       ana sayfa ile yasal sayfalarin ust atmosferi ayni; hero bunun uzerine
       kendi daha guclu blomunu ekler. */
    radial-gradient(120% 100% at 78% 0%, rgba(42,109,181,0.10), transparent 64%) top center / 100% 560px no-repeat,
    linear-gradient(180deg, var(--y-top) 0%, var(--y-bg) 100%) top center / 100% 560px no-repeat,
    var(--y-bg);
}

.y-wrap { max-width: var(--y-max); margin-inline: auto; padding-inline: var(--y-pad); }
.y-sec { padding-block: var(--y-sec); position: relative; }
.y-sec--tight { padding-block: clamp(64px, 8vw, 120px); }
/* A single quiet top hairline, not a filled panel — whitespace and type
   scale carry the sense of a new movement starting; this just adds one
   more thin, deliberate marker where a section genuinely needs one. No
   background shift, no bottom border, so nothing reads as a boxed card
   or a closed-off "section panel". */
.y-band { border-top: 1px solid var(--y-line); }

/* ── Type system ────────────────────────────────────────────────────────── */
/* Eyebrow: mono, wide-tracked, small — every section's quietest label. */
.y-eyebrow {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--y-mono); font-size: 11.5px; font-weight: 500;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--y-dim-2);
  margin: 0 0 clamp(18px, 2.4vw, 28px);
}
.y-eyebrow::before { content: ""; width: 16px; height: 1px; background: var(--y-accent); flex: none; }

/* Display: the hero wordmark register — used once at full scale, and at
   smaller clamps for section titles that need to carry real weight. */

/* Subhead: section titles that don't need hero-scale weight. */
.y-h2 {
  font-family: var(--y-display);
  font-variation-settings: "wdth" var(--wdth-display);
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.y-h3 {
  font-family: var(--y-body);
  font-weight: 600;
  font-size: clamp(19px, 1.9vw, 24px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin: 0;
}
.y-soft { color: var(--y-dim-2); }

.y-lead { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; color: var(--y-dim); margin: 0; max-width: 46ch; }
.y-body { font-size: 15.5px; line-height: 1.72; color: var(--y-dim); margin: 0; }
.y-caption {
  font-family: var(--y-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--y-dim-2);
}

/* Per-line reveal hook — inline-block so a clip-path/transform on one
   line never disturbs another's position. Reused by any heading that
   wants a staggered line-by-line entrance. */
.y-line { display: inline-block; }

/* ── Icons (unchanged inline-mask system) ─────────────────────────────── */
.y-i {
  display: inline-block; width: 1em; height: 1em;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  vertical-align: -0.125em;
}
.y-i-arrow-right { -webkit-mask-image: var(--i-arrow-right); mask-image: var(--i-arrow-right); }
.y-i-caret-left  { -webkit-mask-image: var(--i-caret-left);  mask-image: var(--i-caret-left); }
.y-i-caret-right { -webkit-mask-image: var(--i-caret-right); mask-image: var(--i-caret-right); }
.y-i-menu        { -webkit-mask-image: var(--i-menu);        mask-image: var(--i-menu); }
.y-i-close       { -webkit-mask-image: var(--i-close);       mask-image: var(--i-close); }
.y-i-sun         { -webkit-mask-image: var(--i-sun);         mask-image: var(--i-sun); }
.y-i-moon        { -webkit-mask-image: var(--i-moon);        mask-image: var(--i-moon); }
.y-i-download    { -webkit-mask-image: var(--i-download);    mask-image: var(--i-download); }

:root {
  --i-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-caret-left:  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
  --i-caret-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
  --i-menu:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3.5 7h17M3.5 12h17M3.5 17h17'/%3E%3C/svg%3E");
  --i-close:       url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --i-sun:         url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.4v2.2M12 19.4v2.2M2.4 12h2.2M19.4 12h2.2M5.2 5.2l1.6 1.6M17.2 17.2l1.6 1.6M18.8 5.2l-1.6 1.6M6.8 17.2l-1.6 1.6'/%3E%3C/svg%3E");
  --i-moon:        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 14.8A8.8 8.8 0 0 1 9.2 3.5a8.8 8.8 0 1 0 11.3 11.3z'/%3E%3C/svg%3E");
  --i-download:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7.5 10.5L12 15l4.5-4.5M4 20h16'/%3E%3C/svg%3E");
}

/* ── Scroll progress ────────────────────────────────────────────────────── */
#ycl-scroll-progress {
  position: fixed; inset: 0 0 auto 0; height: 2px;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--y-accent);
  z-index: 60; pointer-events: none; will-change: transform;
}

/* ── Navigation ─────────────────────────────────────────────────────────── */
.glass-nav {
  position: sticky; top: 0; z-index: 50;
  /* Hero'nun ust tonuyla ayni: navbar sayfanin uzerine yapistirilmis ayri
     bir koyu dikdortgen gibi degil, ayni atmosferin devami gibi okunur. */
  /* Saydam: altindaki ortak rampayi gosterir, boylece navbar hicbir sayfada
     ayri bir bant gibi durmuyor. Zemini yalnizca sayfa kayinca aliyor. */
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease;
}
.glass-nav.is-stuck {
  /* Sayfa kayinca hafif saydam + blur: altindaki icerik belli belirsiz
     gecerken navbar yine ayni renk ailesinde kalir. */
  background: color-mix(in srgb, var(--y-top) 88%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom-color: var(--y-line);
}


/* padding-block bumped from 20px so the centered logo (see
   .y-nav__center-logo) has real room to be legible without crowding
   the bar's own edges. */
.y-nav { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 24px; }
.y-nav__brand { display: inline-flex; align-items: center; gap: 12px; }
.y-nav__logo { height: 30px; width: auto; object-fit: contain; }
html.theme-light .y-nav__logo { filter: brightness(0) saturate(0); }
/* Centered independently of .glass-nav (the sticky positioning context),
   not of .y-wrap's max-width column — so it sits on the true header
   midpoint regardless of how wide the brand/links content on either side
   is. Absolute + out of the flex flow, so it never affects their layout,
   and no filter/recolor: shown exactly as exported, per design brief. */
.y-nav__center-logo {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  height: 72px; width: auto; object-fit: contain;
  pointer-events: none;
}
@media (max-width: 800px) {
  .y-nav__center-logo { height: 58px; }
}
.y-nav__wordmark {
  font-family: var(--y-display); font-variation-settings: "wdth" var(--wdth-label); font-weight: 800;
  font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--y-text);
}

.y-nav__links { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
/* Same flex/gap treatment as .y-nav__links, reused for the trailing
   theme-toggle + language-switch pair now that all real nav links moved
   left — this is a "balance" group, not a second nav, so it stays small. */
.y-nav__right { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 36px); }
/* .y-nav__brand (the old left-aligned icon+wordmark) is gone, so on mobile
   the hamburger is the only in-flow child left in .y-nav; without this it
   would sit at the start of the row instead of staying pinned right. */
.y-nav__mobile-toggle { margin-left: auto; }
.y-nav__a {
  position: relative;
  font-family: var(--y-mono); font-size: 11px; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--y-dim); padding-block: 7px;
  transition: color 0.25s ease;
}
.y-nav__a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--y-accent); transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.4s var(--y-ease);
}
.y-nav__a:hover { color: var(--y-text); }
.y-nav__a:hover::after, .y-nav__a.is-active::after { transform: scaleX(1); }
.y-nav__a.is-active { color: var(--y-text); }

.y-nav__sep { width: 1px; height: 16px; background: var(--y-line-2); }
.y-nav__lang { font-family: var(--y-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; color: var(--y-dim-2); }
.y-nav__lang:hover { color: var(--y-accent); }
.y-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--y-line);
  background: transparent; color: var(--y-dim); cursor: pointer; font-size: 15px;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.y-icon-btn:hover { color: var(--y-accent); border-color: var(--y-accent); }

.y-menu {
  display: flex; flex-direction: column;
  padding: 4px var(--y-pad) 30px;
  background: var(--y-bg); border-bottom: 1px solid var(--y-line);
  position: relative; z-index: 49;
}
.y-menu__a {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 2px;
  font-family: var(--y-display); font-variation-settings: "wdth" var(--wdth-label); font-weight: 700;
  font-size: 22px; letter-spacing: -0.01em; text-transform: uppercase;
  color: var(--y-text); border-bottom: 1px solid var(--y-line);
}
.y-menu__a:hover { color: var(--y-accent); }
.y-menu__row { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.y-menu__toggle {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 18px; border: 1px solid var(--y-line);
  background: none; color: var(--y-dim); font: inherit; font-size: 13px; cursor: pointer;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.y-menu__toggle:hover { color: var(--y-accent); border-color: var(--y-accent); }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.y-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.y-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: var(--y-mono); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid transparent; cursor: pointer;
  transition: background 0.3s var(--y-ease), border-color 0.3s var(--y-ease), color 0.3s var(--y-ease), transform 0.3s var(--y-ease);
}
.y-btn--primary { background: var(--y-accent); color: var(--y-on-accent); border-color: var(--y-accent); }
.y-btn--ghost   { border-color: var(--y-line-2); color: var(--y-text); }
.y-btn--quiet   { padding-inline: 0; color: var(--y-accent); }
.y-btn--sm      { padding: 10px 16px; font-size: 11.5px; }
@media (hover: hover) {
  /* --y-accent-dk (not --accent-hi): with on-accent now white, the hover
     fill needs to get darker, not lighter, to keep the white label
     readable — --accent-hi is reserved for text-on-background contexts. */
  .y-btn--primary:hover { background: var(--y-accent-dk); border-color: var(--y-accent-dk); }
  .y-btn--ghost:hover   { border-color: var(--y-text); }
  .y-btn--quiet:hover   { color: var(--y-accent-hi); }
}
.y-btn .y-i { transition: transform 0.35s var(--y-ease); }
.y-btn:hover .y-i-arrow-right { transform: translateX(3px); }

/* ── Facts row (hero + spec use) ───────────────────────────────────────── */
.y-facts { display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 40px); }
.y-facts dt { font-family: var(--y-mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--y-dim-2); margin: 0 0 6px; }
.y-facts dd { margin: 0; font-size: 14px; font-weight: 600; color: var(--y-text); }
.y-facts > div { border-top: 1px solid var(--y-line); padding-top: 10px; }

/* ── Reveal system (mechanics driven by ycl-ui.js) ────────────────────────
   Short duration, short travel: a quick settle, not a slide-in. Every
   section wraps at most two .y-rv blocks (a head, and a body/list), so
   entering a section reads as one or two quiet beats, never a cascade of
   separately-timed fades. */
.y-rv { transition: opacity 0.55s var(--y-ease), transform 0.55s var(--y-ease); }
html.y-js .y-rv { opacity: 0; transform: translate3d(0, 16px, 0); }
html.y-js .y-rv.is-in { opacity: 1; transform: none; }

.y-in { animation: y-in 1.1s var(--y-ease) both; animation-delay: var(--d, 0ms); }
@keyframes y-in { from { opacity: 0; transform: translate3d(0, 20px, 0); } to { opacity: 1; transform: none; } }

.y-clip { animation: y-clip 1.3s var(--y-ease) both; animation-delay: var(--d, 0ms); }
@keyframes y-clip { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
  html.y-js .y-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .y-in, .y-clip { animation: none !important; }
}

/* ==========================================================================
   SECTION HEAD — the eyebrow + title + lead pattern most sections open on.
   ========================================================================== */
.y-head { max-width: 66ch; }
.y-head--wide { max-width: none; }

/* ==========================================================================
   MOZAIK BLAST (#oyun) — no image, shape or board geometry, and no section
   numeral either: depth comes from a cascading indent instead. The name's
   second line steps in from the first; the copy paragraph continues that
   same indent; the facts/CTA row continues it again — one diagonal line
   running down the section rather than a boxed two-column template, so
   it reads as its own composition rather than a repeat of the hero's.
   ========================================================================== */
.y-game__type { margin-top: clamp(28px, 4vw, 48px); }
.y-game__name {
  margin: 0;
  display: flex; flex-direction: column;
}
/* Same large/soft two-line contrast as .y-hero__word — one width axis,
   the second line softened by size and color alone, not a separate axis
   trick. Keeps the site to one typographic pattern instead of two. */
.y-game__name .y-line:last-child {
  font-size: clamp(30px, 4.8vw, 72px);
  margin-left: clamp(32px, 11vw, 160px);
  margin-top: clamp(4px, 1vw, 14px);
  color: var(--y-dim-2);
}

.y-game__status { margin: clamp(14px, 2vw, 20px) 0 0 clamp(32px, 11vw, 160px); color: var(--y-accent-hi); }

.y-game__copy { margin-top: clamp(32px, 4.5vw, 56px); margin-left: clamp(32px, 11vw, 160px); max-width: 44ch; }
.y-game__copy .y-body + .y-body { margin-top: 6px; }

.y-game__meta {
  margin-top: clamp(40px, 5vw, 64px); margin-left: clamp(32px, 11vw, 160px);
  display: flex; flex-wrap: wrap; align-items: center; gap: clamp(24px, 4vw, 48px);
}

@media (max-width: 700px) {
  .y-game__name .y-line:last-child, .y-game__status, .y-game__copy, .y-game__meta { margin-left: 0; }
}

/* ==========================================================================
   THE STUDIO (#studyo) — typography and whitespace carry this one; a huge,
   quiet background word instead of any imagery (no invented office/team
   photography, no stock footage, no 3D intro — see ycl-motion.js note).
   ========================================================================== */
/* Bottom padding trimmed to the same scale .y-sec--tight uses — Studio is
   flanked by Mozaik Blast (also a plain .y-sec), and two full .y-sec
   paddings stacked back to back is the one gap on the page that measured
   noticeably larger than every other section-to-section transition. */
.y-studio { position: relative; overflow: hidden; padding-bottom: clamp(64px, 8vw, 120px); }
.y-studio__word {
  position: absolute;
  right: clamp(-40px, -2vw, 0px); top: 50%; transform: translateY(-50%);
  font-family: var(--y-display); font-variation-settings: "wdth" var(--wdth-display); font-weight: 800;
  font-size: clamp(140px, 22vw, 360px); line-height: 1;
  color: var(--y-dim-2); opacity: 0.06;
  white-space: nowrap; user-select: none; pointer-events: none; z-index: 0;
}
.y-studio__body { position: relative; z-index: 1; max-width: 58ch; }
.y-studio__body .y-lead { margin-bottom: 18px; }
.y-studio__body .y-body + .y-body { margin-top: 14px; }
.y-links { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 22px; }
.y-link { font-size: 14px; color: var(--y-dim); transition: color 0.25s ease; }
.y-link:hover { color: var(--y-accent); }

@media (max-width: 800px) { .y-studio__word { display: none; } }

/* ==========================================================================
   WHAT'S NEXT — quietest beat: two-line title, no image, no second CTA.
   ========================================================================== */
.y-siradaki__lines { max-width: 20ch; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.y-faq { border-top: 1px solid var(--y-line); }
.y-faq details { border-bottom: 1px solid var(--y-line); }
.y-faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding-block: 20px;
  font-family: var(--y-body); font-size: 16px; font-weight: 600;
  color: var(--y-text); cursor: pointer; list-style: none;
}
.y-faq summary::-webkit-details-marker { display: none; }
.y-faq summary::after {
  content: ""; width: 10px; height: 10px; flex: none;
  -webkit-mask-image: var(--i-arrow-down); mask-image: var(--i-arrow-down);
  -webkit-mask-size: contain; mask-size: contain;
  background-color: currentColor;
  transition: transform 0.35s var(--y-ease);
}
:root { --i-arrow-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v15M6 13l6 6 6-6'/%3E%3C/svg%3E"); }
.y-faq summary:hover { color: var(--y-accent); }
.y-faq details[open] summary { color: var(--y-accent); }
.y-faq details[open] summary::after { transform: rotate(180deg); }
.y-faq__a { padding-bottom: 20px; max-width: 60ch; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.y-signup { padding-block: clamp(24px, 3vw, 36px); border-top: 1px solid var(--y-line); border-bottom: 1px solid var(--y-line); margin-block: clamp(28px, 3.5vw, 40px); }
.y-form { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.y-form .input {
  flex: 1 1 240px; min-width: 0;
  padding: 14px 16px;
  background: var(--y-bg); border: 1px solid var(--y-line-2);
  font: inherit; font-size: 15px; color: var(--y-text);
}
.y-form .input::placeholder { color: var(--y-dim-2); }
.y-form .input:focus-visible { border-color: var(--y-accent); outline-offset: 0; }
#ycl-waitlist-count { margin-top: 12px; font-family: var(--y-mono); font-size: 12.5px; color: var(--y-dim-2); opacity: 0; transition: opacity 0.3s ease; }
.y-msg { font-size: 13.5px; margin-top: 10px; }
.y-msg--ok { color: var(--y-accent-hi); }
.y-msg--err { color: #e8836f; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.y-footer { border-top: 1px solid var(--y-line); background: var(--y-bg-2); padding-block: clamp(56px, 7vw, 88px) clamp(28px, 3vw, 40px); }
.y-footer__top { display: grid; grid-template-columns: 1.4fr repeat(4, 1fr); gap: clamp(32px, 4vw, 56px); padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--y-line); }
.y-footer__brand { display: flex; flex-direction: column; gap: 16px; }
/* .y-footer__brand is a column flex container with no align-items override,
   so it defaults to stretch — on the cross (horizontal) axis that stretched
   this image to the full column width instead of its intended small mark. */
.y-footer__logo { height: 34px; width: auto; object-fit: contain; align-self: flex-start; }
.y-footer__tag { margin: 0; max-width: 30ch; font-size: 14px; color: var(--y-dim); line-height: 1.65; }
.y-fcol h2 { font-family: var(--y-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--y-dim-2); margin: 0 0 16px; }
.y-fcol ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.y-fcol a { font-size: 14px; color: var(--y-dim); transition: color 0.2s ease; }
.y-fcol a:hover { color: var(--y-accent); }
.y-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: clamp(20px, 2.4vw, 28px); font-family: var(--y-mono); font-size: 11.5px; color: var(--y-dim-2); }

@media (max-width: 1050px) {
  /* Beş sütun (marka + Site + Yasal + Destek + Takip) dar masaüstünde
     sıkışıyordu; marka kendi satırına alınıyor. */
  .y-footer__top { grid-template-columns: repeat(4, 1fr); }
  .y-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 800px) {
  .y-footer__top { grid-template-columns: 1fr 1fr; }
  .y-footer__brand { grid-column: 1 / -1; }
}

/* ==========================================================================
   NEWS
   ========================================================================== */
.y-news__list { margin-top: clamp(28px, 3.5vw, 44px); }
.y-news__row {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 24px;
  padding-block: 16px; border-top: 1px solid var(--y-line);
}
.y-news__row:last-child { border-bottom: 1px solid var(--y-line); }
.y-news__date { font-family: var(--y-mono); font-size: 11.5px; letter-spacing: 0.08em; color: var(--y-dim-2); flex: none; width: 9ch; }
.y-news__title { font-size: 15.5px; color: var(--y-text); }

/* ==========================================================================
   CONTACT (compact) — small block near the footer, not a full section.
   ========================================================================== */
.y-contact { padding-block: clamp(56px, 7vw, 96px); }
.y-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); }
.y-faq-mini { border-top: 1px solid var(--y-line); }
.y-faq-mini details { border-bottom: 1px solid var(--y-line); }
@media (max-width: 900px) { .y-contact__grid { grid-template-columns: 1fr; gap: clamp(28px, 6vw, 40px); } }

/* ── Legal sub-pages (Privacy/Terms/Press/etc.) ──────────────────────────── */
.y-subnav { padding-block: 18px; border-bottom: 1px solid var(--y-line); }
.y-subnav__brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--y-display); font-variation-settings: "wdth" var(--wdth-label); font-weight: 800; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--y-text); }
.y-subnav__brand img { height: 28px; width: auto; object-fit: contain; }
/* Gorunur breadcrumb izi. JSON-LD BreadcrumbList ile ayni metni kullanir;
   Google gorunur iz ile structured data'nin eslesmesini bekler. */
.y-crumb { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 16px; }
.y-crumb__sep { opacity: 0.4; }
.y-crumb__current { color: var(--y-dim); }
/* Yasal/alt sayfa govdesi. Daha once yalnizca max-width vardi, yan bosluk
   ve ortalama yoktu: metin ekranin sol kenarina yapisiyordu (mobilde iki
   kenara birden). Artik sitenin geri kalaniyla ayni gutter'i kullaniyor.
   max-width, gutter eklendigi icin buyutuldu ki satir uzunlugu 74ch kalsin. */
.y-sub {
  padding-block: clamp(48px, 7vw, 96px);
  padding-inline: var(--y-pad);
  max-width: calc(74ch + 2 * var(--y-pad));
  margin-inline: auto;
}
/* Basin sayfasi asset izgaralari icin daha genis olcu. Bu sinif HTML'de
   kullaniliyordu ama CSS karsiligi hic yoktu. */
.y-sub--wide { max-width: calc(1100px + 2 * var(--y-pad)); }
.y-sub h1 { font-family: var(--y-display); font-variation-settings: "wdth" var(--wdth-label); font-weight: 800; font-size: clamp(30px, 4vw, 48px); letter-spacing: -0.01em; text-transform: uppercase; margin: 0 0 8px; }
.y-sub h2 { font-family: var(--y-body); font-weight: 700; font-size: clamp(19px, 2vw, 23px); margin: 40px 0 12px; }
.y-sub p, .y-sub li { font-size: 15.5px; line-height: 1.72; color: var(--y-dim); }
.y-sub strong { color: var(--y-text); font-weight: 600; }
.y-sub hr { border: 0; height: 1px; background: var(--y-line); margin: 40px 0; }
.y-subfoot { padding-block: 20px; border-top: 1px solid var(--y-line); display: flex; flex-wrap: wrap; gap: 8px 20px; }
.y-subfoot a, .y-subfoot span { font-size: 12.5px; color: var(--y-dim-2); }
.y-subfoot a:hover { color: var(--y-accent); }

.pk-asset-card { border: 1px solid var(--y-line); background: var(--y-surface); }
.pk-thumb { width: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--y-bg-2); }
.pk-thumb.logo { object-fit: contain; padding: 18px; box-sizing: border-box; }
/* Onizleme kucuk dosyadan gelir; tam cozunurluk yalnizca indirme
   baglantisindadir (425KB'lik PNG thumbnail olarak yuklenmiyor). */
/* Telefon ekran görüntüleri dikey: 16/10 kırpması ekranın yalnızca yatay bir
   şeridini gösteriyordu. Bu varyant görselin tamamını doğru oranda tutar. */
.pk-thumb--shot { aspect-ratio: 640 / 1170; }
.pk-asset-card span { font-size: 12.5px; color: var(--y-dim); }

/* ── Responsive rhythm ────────────────────────────────────────────────────
   Density drops in step: type scales via clamp() already, so this is
   mostly about column collapse (handled per-component above) and section
   spacing on small screens. */
@media (max-width: 1000px) {
  .y-footer__top { padding-bottom: clamp(32px, 6vw, 48px); }
}
@media (max-width: 560px) {
  .y-actions .y-btn { flex: 1 1 100%; }
  .y-footer__top { grid-template-columns: 1fr; }
  .y-footer__bottom { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 380px) {
  :root { --y-pad: 18px; }
}

/* ==========================================================================
   GAME FEATURES + SHOT GALLERY
   --------------------------------------------------------------------------
   Faz 1 içerik blokları. Yeni renk/tipografi sistemi yok — mevcut tokenlar
   ve mevcut ritim (hairline ayraçlar, mono etiketler) aynen kullanılıyor,
   böylece bölüm sitenin geri kalanından ayrışmıyor.
   ========================================================================== */
.y-feat__list { margin-top: clamp(28px, 3.5vw, 44px); }
.y-feat__row {
  display: grid; grid-template-columns: 3ch minmax(0, 22ch) minmax(0, 1fr);
  align-items: baseline; gap: clamp(14px, 2.5vw, 32px);
  padding-block: clamp(18px, 2.2vw, 26px); border-top: 1px solid var(--y-line);
}
.y-feat__row:last-child { border-bottom: 1px solid var(--y-line); }
.y-feat__num { font-family: var(--y-mono); font-size: 13px; color: var(--y-dim-2); }
.y-feat__name {
  font-family: var(--y-display); font-variation-settings: "wdth" var(--wdth-label); font-weight: 700;
  font-size: clamp(15px, 1.5vw, 19px); text-transform: uppercase; letter-spacing: -0.005em;
  color: var(--y-text);
}
.y-feat__desc { font-size: 15px; line-height: 1.7; color: var(--y-dim); margin: 0; }

/* Google Play yorumlari — gercek, tarihli alintilar. y-feat ile ayni
   hairline ritmini kullanir, yeni bir gorsel dil eklemez. */
.y-review__list { margin-top: clamp(28px, 3.5vw, 44px); }
.y-review__row {
  display: grid; grid-template-columns: minmax(0, 20ch) minmax(0, 1fr);
  align-items: baseline; gap: clamp(14px, 2.5vw, 32px);
  padding-block: clamp(18px, 2.2vw, 26px); border-top: 1px solid var(--y-line);
}
.y-review__row:last-child { border-bottom: 1px solid var(--y-line); }
.y-review__meta { font-family: var(--y-mono); font-size: 13px; color: var(--y-dim-2); line-height: 1.6; }
.y-review__meta strong { display: block; color: var(--y-text); font-weight: 600; font-size: 14px; margin-bottom: 2px; }
.y-review__stars { color: var(--y-accent); letter-spacing: 0.1em; }
.y-review__quote { font-size: 15px; line-height: 1.7; color: var(--y-dim); margin: 0; }
.y-review__link { margin-top: clamp(16px, 2vw, 22px); display: inline-block; }


/* ==========================================================================
   FAZ 2 — PREMIUM STUDIO LAYER
   --------------------------------------------------------------------------
   Hero, telefon mockup, seramik dekoratif taslar, tema galerisi ve navbar
   CTA. Mevcut token sistemi korunuyor; buraya yalnizca Iznik cinisi
   paletinden birkac dekoratif renk ve oyunun kendi altin vurgusu eklendi.
   Yeni font, WebGL, particle veya animasyon kutuphanesi yok — her efekt
   CSS gradient/transform ile yapiliyor.
   ========================================================================== */
:root {
  /* Iznik cinisi paleti — yalnizca dekoratif seramik taslarda kullanilir. */
  --iz-lacivert: #16305c;
  --iz-mavi:     #2a6db5;
  --iz-turkuaz:  #2fa39c;
  --iz-krem:     #e3d7ba;
  --iz-kiremit:  #bf5730;
  /* Oyunun kendi baslik altini — "MOZAIK BLAST" kelime markasi icin. */
  --mb-gold:     #d9b26a;
}
html.theme-light {
  --iz-krem: #cbb98d;
  --mb-gold: #8f6b1f;
}

/* == Hero =================================================================
   Cinematic ama sakin: iki genis radial isik ve tek bir dikey gradient.
   Hareket eden arka plan yok, video yok, canvas yok. */
.y-hero {
  position: relative; overflow: hidden;
  /* Dikey rampa .theme-root'ta; hero yalnizca kendi isik blomlarini ekler,
     boylece ana sayfa ile alt sayfalarin ust tonu birebir ayni kaliyor. */
  background:
    /* Telefonun arkasindaki Iznik mavisi parlama */
    radial-gradient(120% 82% at 78% 10%, rgba(42,109,181,0.22), transparent 64%),
    /* Sol altta cok soluk turkuaz - seramik tonunu tasir */
    radial-gradient(95% 72% at 2% 92%, rgba(47,163,156,0.11), transparent 62%);
}
html.theme-light .y-hero {
  background:
    radial-gradient(120% 82% at 78% 10%, rgba(42,109,181,0.15), transparent 64%),
    radial-gradient(95% 72% at 2% 92%, rgba(47,163,156,0.10), transparent 62%);
}

.y-hero__row {
  display: grid;
  grid-template-columns: minmax(0, 0.88fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(36px, 5vw, 76px);
  min-height: calc(100svh - 64px);
  padding-block: clamp(44px, 6vw, 84px) clamp(48px, 7vw, 92px);
}
.y-hero__type { display: flex; flex-direction: column; align-items: flex-start; }

/* H1 kasitli olarak 56px'de duruyor — devasa tipografi yok. */
.y-hero__h1 {
  margin: 14px 0 0;
  font-family: var(--y-display);
  font-variation-settings: "wdth" 86;
  font-weight: 800;
  /* 375px -> 32px, 768px -> ~43px, 1024px+ -> 56px.
     4vw tablette 32px'e sikisiyordu; 5.6vw tabletin 42-48px hedefini tutturur. */
  font-size: clamp(32px, 5.6vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--y-text);
  max-width: 15ch;
}
.y-hero__game {
  margin: clamp(18px, 2vw, 26px) 0 0;
  font-family: var(--y-display);
  font-variation-settings: "wdth" 84;
  font-weight: 800;
  font-size: clamp(13px, 1.15vw, 15px);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--mb-gold);
}
.y-hero__desc {
  margin: 12px 0 0;
  font-size: clamp(15px, 1.15vw, 16.5px);
  line-height: 1.65;
  color: var(--y-dim);
  max-width: 42ch;
}
.y-hero__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 12px 16px; margin-top: clamp(26px, 3vw, 34px);
}
.y-hero__note {
  margin: 15px 0 0; display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--y-mono); font-size: 11.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--y-dim-2);
}
.y-hero__note::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #3ec98a; box-shadow: 0 0 0 3px rgba(62,201,138,0.18);
}

/* Ana CTA — gercek <a>, tum alan tiklanabilir. */
.y-cta {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 15px 24px; border-radius: 10px;
  background: var(--y-accent); color: var(--y-on-accent);
  font-family: var(--y-body); font-size: 15px; font-weight: 600;
  letter-spacing: -0.005em;
  box-shadow: 0 10px 26px -10px rgba(110,92,230,0.75);
  transition: transform 0.25s var(--y-ease), background 0.25s ease, box-shadow 0.25s ease;
}
.y-cta:hover { background: var(--y-accent-hi); transform: translateY(-2px); box-shadow: 0 16px 32px -12px rgba(110,92,230,0.85); }
.y-cta:active { transform: translateY(0); }
.y-cta svg { flex: none; }
/* Resmi Google Play rozeti. Google'in marka kurallari asseti degistirmemeyi,
   en az 40px yukseklikte gostermeyi ve cevresinde rozet yuksekliginin 1/4'u
   kadar bosluk birakmayi sart kosuyor; ikonu yeniden cizmek yasak. Bu yuzden
   onceki SVG'li ozel buton yerine Google'in kendi PNG'si kullaniliyor. */
.y-badge {
  display: inline-block; flex: none;
  border-radius: 8px;
  transition: transform 0.25s var(--y-ease), opacity 0.25s ease;
}
.y-badge img { height: 56px; width: auto; display: block; }
.y-badge:hover { transform: translateY(-2px); opacity: 0.92; }
.y-badge:focus-visible { outline: 2px solid var(--y-accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .y-badge:hover { transform: none; } }
@media (max-width: 560px) { .y-badge img { height: 50px; } }

.y-cta--ghost {
  background: transparent; color: var(--y-text);
  border: 1px solid var(--y-line-2); box-shadow: none;
}
.y-cta--ghost:hover { background: transparent; border-color: var(--y-text); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .y-cta:hover { transform: none; } }

/* == Hero gorseli: telefon + seramik taslar =============================== */
.y-hero__visual { position: relative; display: flex; justify-content: center; }
.y-hero__stage { position: relative; width: min(310px, 100%); }

.y-phone {
  position: relative; z-index: 2;
  border-radius: 42px; padding: 9px;
  background: linear-gradient(158deg, #39404f 0%, #171b24 38%, #0b0d12 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    0 0 0 1px rgba(255,255,255,0.05),
    0 34px 72px -22px rgba(0,0,0,0.8);
  transform: perspective(1300px) rotateY(-7deg) rotateX(1.5deg);
}
.y-phone__screen {
  position: relative; overflow: hidden; border-radius: 34px;
  background: #0a1330;
  /* Ekran orani gorsele gore ayarlanir; boylece hicbir ekran goruntusu
     kirpilmaz veya esnetilmez. Varsayilan tema kareleri 640x1170. */
  aspect-ratio: var(--screen-ar, 640 / 1170);
}
/* Hero karesi farkli bir cihazdan (1080x2219) geldigi icin kendi oranini
   tasiyor. object-fit: contain, oran birebir eslesse bile kirpmaya karsi
   ek guvence. */
.y-phone--hero .y-phone__screen { --screen-ar: 1080 / 2219; }
.y-phone__screen img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* On kamera deligi (punch-hole) — ekranin en ustunde, ortada. */
.y-phone__screen::before {
  content: ""; position: absolute; z-index: 2;
  top: 3.2%; left: 50%; transform: translateX(-50%);
  width: 3.2%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #454b58 0%, #0a0c11 62%, #000 100%);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.35), inset 0 0 2px rgba(255,255,255,0.25);
}
/* Gesture cubugu — ekranin en altinda, ortada. */
.y-phone__screen::after {
  content: ""; position: absolute; z-index: 2;
  bottom: 1.6%; left: 50%; transform: translateX(-50%);
  width: 32%; height: 0.7%; min-height: 3px; border-radius: 4px;
  background: rgba(255,255,255,0.5);
}
/* Yan tuslar — cerceveyi gercek cihaz hissine yaklastiran detaylar.
   Sag: guc tusu. Sol: ses tusu (tek kabartma, sadelestirilmis). */
.y-phone::after {
  content: ""; position: absolute; right: -2px; top: 27%;
  width: 2px; height: 62px; border-radius: 2px;
  background: linear-gradient(180deg, #4a5162, #23262f);
}
.y-phone::before {
  content: ""; position: absolute; left: -2px; top: 17%;
  width: 2px; height: 44px; border-radius: 2px;
  background: linear-gradient(180deg, #4a5162, #23262f);
}
.y-phone__glow {
  position: absolute; inset: -12% -16%; z-index: 1;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(42,109,181,0.32), transparent 70%);
  filter: blur(16px);
}

/* Seramik mozaik taslari. Tetris/Minecraft blogu degil: yumusak koseli,
   bevel'li, mat seramik yuzey ve uzerinde soluk bir Iznik rozeti. */
.y-tile {
  position: absolute; z-index: 3;
  border-radius: 15px;
  background: linear-gradient(152deg, var(--t-hi) 0%, var(--t-base) 55%, var(--t-lo) 100%);
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.40),
    inset 0 -2px 5px rgba(0,0,0,0.30),
    0 12px 24px -10px rgba(0,0,0,0.65);
  animation: y-tile-float 8s var(--y-ease-soft) infinite;
  animation-delay: var(--t-delay, 0s);
}
.y-tile::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M20 7c4 5 4 9 0 13-4-4-4-8 0-13z'/%3E%3Cpath d='M20 33c-4-5-4-9 0-13 4 4 4 8 0 13z'/%3E%3Cpath d='M7 20c5-4 9-4 13 0-4 4-8 4-13 0z'/%3E%3Cpath d='M33 20c-5 4-9 4-13 0 4-4 8-4 13 0z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 68% 68%; background-position: center; background-repeat: no-repeat;
  opacity: 0.34;
}
@keyframes y-tile-float {
  0%, 100% { transform: translateY(0) rotate(var(--t-rot, 0deg)); }
  50%      { transform: translateY(-10px) rotate(var(--t-rot, 0deg)); }
}
.y-tile--a { width: 62px; height: 62px; top: 4%;     left: -13%; --t-hi:#4b8fd6; --t-base:var(--iz-mavi);     --t-lo:#1d4f88; --t-rot:-10deg; --t-delay:0s; }
.y-tile--b { width: 46px; height: 46px; top: 26%;    left: -20%; --t-hi:#5ec8bf; --t-base:var(--iz-turkuaz);  --t-lo:#1d7a74; --t-rot:8deg;   --t-delay:1.3s; }
.y-tile--c { width: 54px; height: 54px; bottom: 16%; left: -15%; --t-hi:#f0e7d0; --t-base:var(--iz-krem);     --t-lo:#b8a97f; --t-rot:-6deg;  --t-delay:2.6s; }
.y-tile--d { width: 50px; height: 50px; top: 11%;    right: -15%; --t-hi:#d97b52; --t-base:var(--iz-kiremit); --t-lo:#8d3c1d; --t-rot:12deg;  --t-delay:0.7s; }
.y-tile--e { width: 58px; height: 58px; bottom: 8%;  right: -12%; --t-hi:#2f568f; --t-base:var(--iz-lacivert);--t-lo:#0d1e3d; --t-rot:-9deg;  --t-delay:1.9s; }

@media (prefers-reduced-motion: reduce) {
  .y-tile { animation: none; transform: rotate(var(--t-rot, 0deg)); }
  .y-phone { transform: none; }
}

@media (max-width: 1000px) {
  /* Mobil: once metin + CTA, sonra telefon. */
  .y-hero__row { grid-template-columns: 1fr; min-height: 0; gap: clamp(40px, 8vw, 56px); padding-block: clamp(36px, 8vw, 56px) clamp(44px, 9vw, 64px); }
  .y-hero__h1 { max-width: 18ch; }
  .y-phone { transform: none; }
}
@media (max-width: 560px) {
  /* Taslar telefonun daha yakinina cekiliyor ki 375px'de sayfayi tasirmasin. */
  .y-hero__stage { width: min(252px, 72vw); }
  .y-tile--a { width: 46px; height: 46px; left: -11%; }
  .y-tile--b { width: 36px; height: 36px; left: -13%; }
  .y-tile--c { width: 40px; height: 40px; left: -10%; }
  .y-tile--d { width: 38px; height: 38px; right: -11%; }
  .y-tile--e { width: 44px; height: 44px; right: -9%; }
}

/* == Navbar =============================================================== */
.y-nav--f2 { display: flex; align-items: center; gap: clamp(14px, 2.5vw, 36px); padding-block: 16px; }
.y-nav--f2 .y-nav__links { margin-inline: auto; }
.y-nav__brandmark {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--y-display); font-variation-settings: "wdth" var(--wdth-label);
  font-weight: 800; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--y-text); flex: none;
}
.y-nav__brandmark img { height: 26px; width: auto; object-fit: contain; }
.y-nav__cta {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  padding: 9px 15px; border-radius: 8px;
  background: var(--y-accent); color: var(--y-on-accent);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  transition: background 0.25s ease;
}
.y-nav__cta:hover { background: var(--y-accent-hi); }
.y-nav__end { display: flex; align-items: center; gap: 14px; flex: none; }

/* == Tema galerisi ======================================================== */
.y-gal { margin-top: clamp(26px, 3vw, 40px); }
.y-gal__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.y-gal__nav { display: flex; gap: 8px; flex: none; }
.y-gal__btn {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--y-line-2); background: transparent; color: var(--y-text);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease;
}
.y-gal__btn:hover:not(:disabled) { border-color: var(--y-text); background: var(--y-surface); }
.y-gal__btn:disabled { opacity: 0.3; cursor: default; }
.y-gal__btn svg { width: 15px; height: 15px; }

.y-gal__strip {
  display: flex; gap: clamp(12px, 1.4vw, 20px);
  overflow-x: auto; overscroll-behavior-x: contain;
  /* proximity, mandatory degil: mandatory olan surum ok butonlarinin
     kismi kaydirmasini surekli geri cekiyordu. proximity dokunmatik
     kaydirmada ayni hizalamayi verir ama programatik kaydirmayi bozmaz. */
  scroll-snap-type: x proximity; scroll-behavior: smooth;
  padding: 18px 0 20px;
  scrollbar-width: thin; scrollbar-color: var(--y-line-2) transparent;
}
.y-gal__strip::-webkit-scrollbar { height: 6px; }
.y-gal__strip::-webkit-scrollbar-track { background: transparent; }
.y-gal__strip::-webkit-scrollbar-thumb { background: var(--y-line-2); border-radius: 3px; }
.y-gal__strip:focus-visible { outline: 2px solid var(--y-accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .y-gal__strip { scroll-behavior: auto; } }

.y-gal__item { flex: 0 0 clamp(168px, 17vw, 224px); scroll-snap-align: start; margin: 0; }
.y-gal__shot {
  position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--y-line); background: var(--y-bg-2);
  transition: transform 0.35s var(--y-ease), border-color 0.3s ease, box-shadow 0.35s var(--y-ease);
}
.y-gal__shot img { width: 100%; height: auto; aspect-ratio: 640 / 1170; object-fit: cover; display: block; }
/* Tema adi artik <h3>: baslik hiyerarsisi h1 (hero) > h2 (Temalar) >
   h3 (tema adi). Basligin varsayilan margin/agirligini sifirla. */
.y-gal__cap {
  margin: 13px 0 0; font-weight: 500;
  margin-top: 13px;
  font-family: var(--y-mono); font-size: 11.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--y-dim-2);
  transition: color 0.3s ease;
}
@media (hover: hover) {
  .y-gal__item:hover .y-gal__shot { transform: translateY(-5px); border-color: var(--y-line-2); box-shadow: 0 22px 40px -22px rgba(0,0,0,0.8); }
  .y-gal__item:hover .y-gal__cap { color: var(--y-text); }
}
@media (prefers-reduced-motion: reduce) { .y-gal__item:hover .y-gal__shot { transform: none; } }
@media (max-width: 700px) { .y-gal__nav { display: none; } }

/* == Oyun karti (Oyunlar bolumu) ========================================== */
.y-gamecard {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(28px, 4vw, 64px); align-items: center;
  margin-top: clamp(28px, 3.5vw, 44px);
}
.y-gamecard__media { position: relative; display: flex; justify-content: center; }
.y-gamecard__media .y-phone { width: min(238px, 100%); transform: perspective(1300px) rotateY(6deg); }
@media (prefers-reduced-motion: reduce) { .y-gamecard__media .y-phone { transform: none; } }
@media (max-width: 860px) {
  .y-gamecard { grid-template-columns: 1fr; }
  .y-gamecard__media { order: -1; }
  .y-gamecard__media .y-phone { transform: none; }
}


/* == Kayan serit (ticker) =================================================
   Hero'nun ustunde ince bir marka seridi. Navbar ile ayni navy ailesinde
   oldugu icin sayfaya yapistirilmis yabanci bir bant gibi durmuyor.
   Animasyon tamamen CSS; JS ile scroll dongusu kurulmuyor. */
.y-ticker {
  position: relative;
  overflow: hidden;                 /* seridin kendisi disari tasmaz */
  /* Serit, rampanin tepe tonunda biter; ustu bir tik daha koyu.
     Boylece serit -> navbar -> hero kesintisiz devam eder. */
  background: linear-gradient(180deg, color-mix(in srgb, var(--y-top) 88%, #000) 0%, var(--y-top) 100%);
  border-bottom: 1px solid var(--y-line);
}

.y-ticker__track {
  display: flex;
  width: max-content;
  animation: y-ticker-run 64s linear infinite;
}
.y-ticker__copy {
  display: flex; align-items: center; flex: none;
  gap: clamp(20px, 3vw, 38px);
  padding-block: 9px;
  padding-right: clamp(20px, 3vw, 38px);
}
.y-ticker__item {
  font-family: var(--y-mono);
  font-size: 10px; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase;
  white-space: nowrap;
  /* %44 iken 3.98:1 idi; 10px metin icin yetersiz. %52 -> 5.17:1. */
  color: color-mix(in srgb, var(--y-text) 52%, transparent);
}
/* Kucuk seramik karo ayraci: dondurulmus kare, Iznik mavisi. */
.y-ticker__sep {
  /* Kucuk ve soluk: ayrac, okunan icerigin onune gecmemeli. */
  width: 5px; height: 5px; flex: none;
  transform: rotate(45deg); border-radius: 1.5px;
  background: color-mix(in srgb, var(--iz-mavi) 52%, transparent);
}
@keyframes y-ticker-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  /* Serit gorunur kalir, sadece durur. */
  .y-ticker__track { animation: none; }
}
@media (max-width: 560px) {
  .y-ticker__copy { gap: 18px; padding-right: 18px; padding-block: 8px; }
  .y-ticker__item { font-size: 9.5px; letter-spacing: 0.26em; }
}