@import url("fonts.css");

/* ============================================================================
   UHDE Bilişim — "Kesit"
   The site is a core sample. You start at the surface, in dawn light, and read
   downward through strata that darken and warm as the lantern takes over from
   the sun. Every colour is lifted straight from the game's Resurrect-64 palette,
   so the studio's site and the studio's art speak the same language.
   ========================================================================== */

:root {
  /* Resurrect-64, the palette every Underroot sprite is locked to */
  --void:    #2e222f;
  --deep:    #3e3546;
  --stone:   #625565;
  --ash:     #9babb2;
  --bone:    #c7dcd0;
  --lantern: #f9c22b;
  --flare:   #fbff86;
  --moss:    #1ebc73;
  --leaf:    #91db69;
  --water:   #4d9be6;
  --ice:     #8fd3ff;
  --clay:    #a05a26;
  --ember:   #e83b3b;
  --skin:    #fdcbb0;
  --violet:  #a884f3;

  --ink:      var(--bone);
  --ink-dim:  #a49dae;
  --label:    #8e97a0;   /* eyebrows / pixel captions — stone was ~2:1 on the ground and vanished */
  --accent:   var(--lantern);
  --surface:  #251c26;

  --measure: 66ch;
  --gutter: clamp(1.25rem, 5vw, 4.5rem);
  --rhythm: clamp(3.6rem, 8vh, 6.5rem);

  --display: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --body:    "Newsreader", Georgia, "Times New Roman", serif;
  --pixel:   "Pixelify Sans", ui-monospace, monospace;

  color-scheme: dark;
}

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

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

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font: 400 clamp(1.02rem, 0.55vw + 0.9rem, 1.18rem)/1.72 var(--body);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Film grain. Static, cheap, and it stops the flat fills from looking like plastic. */
body::after {
  content: "";
  position: fixed;
  inset: -50%;
  pointer-events: none;
  z-index: 9;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- type ---------------------------------------------------------------- */

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  line-height: 1.02;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}

h2 { font-size: clamp(2.1rem, 4.4vw, 3.5rem); }
h3 { font-size: clamp(1.3rem, 1.7vw, 1.6rem); font-variation-settings: "SOFT" 60, "WONK" 0; }

p { margin: 0 0 1.15em; max-width: var(--measure); }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--flare); }
:focus-visible { outline: 2px solid var(--lantern); outline-offset: 3px; border-radius: 2px; }

strong { color: #fff; font-weight: 600; }

/* The eyebrow: the game's own typeface, used as a label the way a core sample
   is labelled with its depth. */
.eyebrow {
  font: 400 0.78rem/1 var(--pixel);
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--label);
  margin: 0 0 1.6rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.eyebrow::after {
  content: "";
  flex: 1;
  height: 3px;
  color: var(--stone);
  /* a dither line, not a hairline: the same 2px checker the sprites use */
  background-image: repeating-conic-gradient(currentColor 0 25%, transparent 0 50%);
  background-size: 4px 4px;
  opacity: 0.55;
}

.lead { font-size: 1.22em; color: #d8d2df; }

/* ---- shell --------------------------------------------------------------- */

.skip {
  position: absolute; left: -9999px;
  background: var(--lantern); color: var(--void);
  padding: 0.6rem 1rem; font: 400 0.8rem var(--pixel); z-index: 20;
}
.skip:focus { left: 1rem; top: 1rem; }

.wrap { width: min(1180px, 100%); margin-inline: auto; padding-inline: var(--gutter); }

.nav {
  position: sticky; top: 0; z-index: 8;
  padding-block: 0.95rem;
  background: color-mix(in srgb, var(--void) 86%, transparent);
  backdrop-filter: blur(9px);
  border-bottom: 1px solid color-mix(in srgb, var(--stone) 40%, transparent);
}
.nav__inner { display: flex; align-items: center; gap: 1.4rem; }
.nav__mark {
  font: 700 1.05rem/1 var(--pixel);
  letter-spacing: 0.18em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
.nav__mark span { color: var(--lantern); }
.nav a:not(.nav__mark) {
  font: 400 0.82rem/1 var(--pixel);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-dim);
  text-decoration: none;
}
.nav a:not(.nav__mark):hover { color: var(--lantern); }
@media (max-width: 620px) { .nav a:not(.nav__mark) { display: none; } }

section { padding-block: var(--rhythm); position: relative; }

/* ---- hero: the surface, and the first metre of soil ---------------------- */

.hero {
  position: relative;
  padding-block: clamp(3.5rem, 11vh, 7rem) clamp(3.5rem, 9vh, 5.5rem);
  isolation: isolate;
  overflow: hidden;
}
/* Strata. Each band is a soil horizon; they warm and darken downward. */
.hero::before {
  content: "";
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg,
      #3a2f3d 0%, #342a38 22%,
      #2f2433 46%, #2a1f2e 68%,
      var(--void) 100%);
}
/* The lantern. It follows the pointer on the hero, and rests centre-low without one. */
.hero::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
  background: radial-gradient(
    38rem 30rem at var(--lx, 62%) var(--ly, 72%),
    color-mix(in srgb, var(--lantern) 20%, transparent) 0%,
    color-mix(in srgb, var(--clay) 9%, transparent) 42%,
    transparent 72%);
}

.hero__mark {
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "SOFT" 20, "WONK" 1;
  font-size: clamp(4.2rem, 15.5vw, 12.5rem);
  line-height: 0.84;
  letter-spacing: -0.045em;
  margin: 0;
  color: #fff;
  /* the letters catch the lantern from below-left, like every lit sprite in the game */
  background: linear-gradient(172deg, #fff 34%, var(--skin) 66%, var(--lantern) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__sub {
  font: 400 clamp(0.78rem, 1.5vw, 0.95rem)/1 var(--pixel);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--label);
  margin: 1.2rem 0 2.2rem;
}
.hero__line { max-width: 44ch; font-size: clamp(1.15rem, 1.6vw, 1.42rem); color: #ddd7e3; }
.hero__line em { font-style: normal; color: var(--lantern); }

/* ---- product cards: two core samples, side by side ----------------------- */

.samples {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.sample {
  --tint: var(--lantern);
  position: relative;
  display: flex; flex-direction: column;
  padding: 1.6rem 1.6rem 1.5rem;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 7%, var(--surface)) 0%, var(--surface) 55%);
  border: 1px solid color-mix(in srgb, var(--stone) 45%, transparent);
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
  transition: transform 0.25s cubic-bezier(.2,.8,.2,1), border-color 0.25s, box-shadow 0.25s;
}
/* the surface crust: a bright dithered lip along the top edge of the sample */
.sample::before {
  content: "";
  position: absolute; inset: 0 0 auto; height: 4px;
  background-image: repeating-conic-gradient(var(--tint) 0 25%, transparent 0 50%);
  background-size: 4px 4px;
}
.sample:hover, .sample:focus-visible {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--tint) 55%, transparent);
  box-shadow: 0 18px 44px -28px color-mix(in srgb, var(--tint) 70%, transparent);
}
.sample__kind {
  font: 400 0.72rem/1 var(--pixel);
  letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--tint); margin-bottom: 1.5rem;
}
.sample h3 { margin-bottom: 0.55rem; color: #fff; }
.sample p { color: var(--ink-dim); font-size: 0.98rem; margin-bottom: 1.5rem; }
.sample__go {
  margin-top: auto;
  font: 400 0.78rem/1 var(--pixel);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--tint);
  display: inline-flex; align-items: center; gap: 0.6rem;
}
.sample__go::after { content: "→"; transition: transform 0.25s; }
.sample:hover .sample__go::after { transform: translateX(4px); }
/* A card that isn't a link: client work we can describe but never send a visitor to. */
.sample--static { cursor: default; }
.sample--static:hover { transform: none; border-color: color-mix(in srgb, var(--stone) 45%, transparent); box-shadow: none; }
.sample__spec {
  margin-top: auto; margin-bottom: 0;
  padding-top: 1.1rem;
  border-top: 1px solid color-mix(in srgb, var(--stone) 30%, transparent);
  font-size: 0.88rem; color: var(--label);
}
.sample__art {
  width: 56px; height: 56px; border-radius: 6px;
  image-rendering: pixelated;
  margin-bottom: 1.2rem;
  box-shadow: 0 6px 20px -10px #000;
}

/* ---- plain content sections --------------------------------------------- */

.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 2.4rem 2.8rem;
  margin-top: 2.6rem;
}
.cols h3 { color: #fff; margin-bottom: 0.6rem; }
.cols p { color: var(--ink-dim); font-size: 0.98rem; margin: 0; }

.strip {
  border-block: 1px solid color-mix(in srgb, var(--stone) 35%, transparent);
  background: color-mix(in srgb, var(--moss) 5%, var(--void));
}

/* ---- footer -------------------------------------------------------------- */

.foot {
  padding-block: 3.4rem 4rem;
  border-top: 1px solid color-mix(in srgb, var(--stone) 35%, transparent);
  font-size: 0.92rem;
  color: var(--ink-dim);
}
.foot__grid { display: flex; flex-wrap: wrap; gap: 1.6rem 3rem; align-items: baseline; }
.foot__grid > * { margin: 0; }
.foot a { color: var(--ash); }
.foot a:hover { color: var(--lantern); }
.foot__legal { font: 400 0.72rem/1.7 var(--pixel); letter-spacing: 0.1em; color: var(--label); margin-top: 2.2rem; }
/* Pixelify Sans has no © glyph; left in the pixel run it substitutes into a stray quote mark. */
.foot__legal .c { font-family: var(--body); letter-spacing: 0; }

/* Ticaret unvanı / merkez / MERSİS / sicil no — TTK 39/2. Set as a definition list so a screen reader
   pairs each label with its value, and so the columns can reflow without losing that pairing. */
.kunye {
  margin: 2.6rem 0 0;
  padding-top: 2rem;
  border-top: 1px solid color-mix(in srgb, var(--stone) 30%, transparent);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.1rem 2.4rem;
  font-size: 0.86rem;
}
.kunye dt {
  font: 400 0.68rem/1 var(--pixel);
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--stone); margin-bottom: 0.4rem;
}
.kunye dd { margin: 0; color: var(--ink-dim); font-variant-numeric: tabular-nums; }

/* ---- the Underroot page -------------------------------------------------- */

.game-hero { --tint: var(--moss); }
.game-hero::after {
  background: radial-gradient(34rem 26rem at 70% 38%,
    color-mix(in srgb, var(--moss) 15%, transparent) 0%,
    color-mix(in srgb, var(--water) 7%, transparent) 45%, transparent 72%);
}
.game-hero h1 {
  font-size: clamp(2.9rem, 8vw, 6rem);
  color: #fff;
  margin-bottom: 0.4rem;
}
.game-hero .tagline {
  font: 400 clamp(0.75rem, 1.4vw, 0.9rem)/1 var(--pixel);
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--leaf); margin-bottom: 2.2rem;
}

.banner {
  width: 100%; height: auto; display: block;
  image-rendering: pixelated;
  border: 1px solid color-mix(in srgb, var(--stone) 45%, transparent);
  border-radius: 3px;
  margin-block: 2.4rem 0;
}

.cta {
  display: inline-flex; align-items: center; gap: 0.75rem;
  padding: 0.95rem 1.6rem;
  background: var(--lantern); color: var(--void);
  font: 700 0.85rem/1 var(--pixel);
  letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; border-radius: 2px;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--lantern) 55%, transparent);
  transition: box-shadow 0.3s, transform 0.2s, background 0.2s;
}
.cta:hover {
  background: var(--flare); color: var(--void);
  transform: translateY(-2px);
  box-shadow: 0 12px 40px -14px color-mix(in srgb, var(--lantern) 80%, transparent);
}
.cta--ghost {
  background: transparent; color: var(--ash);
  border: 1px solid color-mix(in srgb, var(--stone) 60%, transparent);
  box-shadow: none;
}
.cta--ghost:hover { background: transparent; color: var(--lantern); border-color: var(--lantern); }
.cta-row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

/* screenshot rail — drag/scroll, snapped, pixels kept crisp */
.rail {
  display: flex; gap: 1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block: 0.5rem 1.5rem;
  margin-inline: calc(var(--gutter) * -1);
  padding-inline: var(--gutter);
  scrollbar-width: thin;
  scrollbar-color: var(--stone) transparent;
}
.rail figure { margin: 0; flex: 0 0 min(78vw, 34rem); scroll-snap-align: center; }
.rail img {
  width: 100%; height: auto; display: block;
  image-rendering: pixelated;
  border: 1px solid color-mix(in srgb, var(--stone) 45%, transparent);
  border-radius: 3px;
}
.rail figcaption {
  font: 400 0.72rem/1.5 var(--pixel);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--label); margin-top: 0.8rem;
}

.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 2rem 2.4rem; margin-top: 2.8rem; }
.feature h3 { color: #fff; font-size: 1.12rem; margin-bottom: 0.45rem; }
.feature p { color: var(--ink-dim); font-size: 0.95rem; margin: 0; }
.feature__tag { font: 400 0.7rem/1 var(--pixel); letter-spacing: 0.2em; color: var(--tint, var(--moss)); display: block; margin-bottom: 0.7rem; }

/* the promise band — the one thing a cozy-game player wants to read */
.promise { background: color-mix(in srgb, var(--tint, var(--moss)) 7%, var(--void)); border-block: 1px solid color-mix(in srgb, var(--tint, var(--moss)) 28%, transparent); }
.promise h2 { color: color-mix(in srgb, var(--tint, var(--moss)) 70%, white); }
.promise ul { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 0.9rem; max-width: var(--measure); }
.promise li { padding-left: 1.9rem; position: relative; color: #d8d2df; }
.promise li::before { content: "✓"; position: absolute; left: 0; color: var(--tint, var(--moss)); font-family: var(--pixel); }

/* ---- legal pages --------------------------------------------------------- */

.legal { padding-block: clamp(3rem, 8vh, 5rem) var(--rhythm); }
.legal h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); color: #fff; margin-bottom: 1.2rem; }
.legal h2 { font-size: 1.35rem; margin-block: 2.6rem 0.8rem; color: var(--lantern); font-variation-settings: "SOFT" 60, "WONK" 0; }
.legal p, .legal li { max-width: var(--measure); color: #cfc9d6; }
.legal .meta {
  font: 400 0.76rem/1.9 var(--pixel);
  letter-spacing: 0.08em; color: var(--label);
  border-left: 3px solid color-mix(in srgb, var(--stone) 60%, transparent);
  padding-left: 1rem; margin-bottom: 2.6rem; max-width: var(--measure);
}
.langswitch { display: flex; gap: 0.5rem; margin-bottom: 2rem; }
.langswitch a {
  font: 400 0.74rem/1 var(--pixel); letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.5rem 0.85rem; border: 1px solid color-mix(in srgb, var(--stone) 50%, transparent);
  border-radius: 2px; text-decoration: none; color: var(--ink-dim);
}
.langswitch a[aria-current="page"] { background: var(--lantern); color: var(--void); border-color: var(--lantern); }

/* ---- reveal on scroll ---------------------------------------------------- */

/* The reveal ADDS an animation; it never removes the content.
   The first version hid every .rise at opacity 0 and let JavaScript put it back. Any element the
   observer skipped was then invisible forever — and one was: the fourth bullet on the Takibi Esası
   page never appeared, while the same page with the script deleted read fine. Text must not depend
   on a script. So nothing is hidden; `in` simply plays a fade-up from the element's own start state. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(16px); }
}
@media (prefers-reduced-motion: no-preference) {
  .rise.in { animation: rise-in 0.7s cubic-bezier(.2,.8,.2,1) both; }
}

@media (prefers-reduced-motion: reduce) {
  .sample, .cta, .sample__go::after { transition: none; }
}


/* ---- app pages: the homepage is a shelf, each app explains itself here ------ */

/* The card icon again, blown up: the app announces itself with the same mark you tapped. */
.hero__icon {
  width: 88px; height: 88px;
  image-rendering: pixelated;
  border-radius: 12px;
  display: block;
  margin-bottom: 1.7rem;
  box-shadow: 0 14px 40px -18px color-mix(in srgb, var(--tint, var(--lantern)) 80%, transparent);
}

/* Status, stack, platform — short facts that would clutter a sentence. */
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.chip {
  font: 400 0.7rem/1 var(--pixel);
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.5rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--stone) 55%, transparent);
  border-radius: 2px;
  color: var(--label);
}
.chip--live { color: var(--tint, var(--moss)); border-color: color-mix(in srgb, var(--tint, var(--moss)) 55%, transparent); }

.app-hero h1 { font-size: clamp(2.6rem, 6.5vw, 4.6rem); color: #fff; margin-bottom: 0.5rem; }
.app-hero .tagline {
  font: 400 clamp(0.72rem, 1.3vw, 0.86rem)/1 var(--pixel);
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--tint, var(--lantern)); margin-bottom: 2rem;
}
.app-hero::after {
  background: radial-gradient(32rem 24rem at 68% 42%,
    color-mix(in srgb, var(--tint, var(--lantern)) 15%, transparent) 0%, transparent 70%);
}