:root {
  --black: #000000;
  --blue: #2f7bff;
  --cyan: #7fd4ff;
  --ink: #eaf1fb;
  --soft: #b9c6da;
  --dim: #7f8ea6;
  --display: "Unbounded", "Arial Black", system-ui, sans-serif;
  --body: "Manrope", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .75, .15, 1);
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--black); color: var(--ink);
  font-family: var(--body); font-size: 1rem; line-height: 1.65;
  overflow: hidden; -webkit-font-smoothing: antialiased;
}
::selection { background: var(--blue); color: #fff; }

#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.vignette {
  position: fixed; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 70% at 50% 42%, transparent 50%, rgba(0,0,0,.7) 100%),
    linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 30%, transparent 55%);
}

/* Sağ tarafı karartan katman: çizgi yok, yumuşak geçiş */
.shade {
  position: fixed; inset: 0; pointer-events: none; z-index: 6; opacity: 0;
  background:
    linear-gradient(90deg, rgba(0,2,10,0) 0%, rgba(0,2,10,.35) 30%, rgba(0,3,12,.82) 52%, rgba(0,2,8,.94) 100%);
  transition: opacity .8s var(--ease);
}
body.panel-open .shade { opacity: 1; }

/* Yükleme ekranı */
.loader {
  position: fixed; inset: 0; z-index: 50; background: #000;
  display: grid; place-content: center; justify-items: center; gap: 1.5rem;
  transition: opacity .45s ease, visibility .45s;
}
.loader.gone { opacity: 0; visibility: hidden; }
.loader.gone * { animation: none; }
.loader-mark-unused {
  width: 34px; height: 34px; border: 2px solid var(--cyan); transform: rotate(45deg);
  box-shadow: 0 0 22px rgba(127,212,255,.5); animation: spin 1.6s var(--ease) infinite;
}
.loader-bar { width: 140px; height: 2px; background: rgba(47,123,255,.2); overflow: hidden; }
.loader-bar span { display: block; width: 40%; height: 100%; background: var(--cyan); animation: slide 1.1s ease-in-out infinite; }
@keyframes spin { to { transform: rotate(405deg); } }
@keyframes slide { from { transform: translateX(-100%); } to { transform: translateX(250%); } }

/* Marka */
.brand { position: fixed; top: calc(env(safe-area-inset-top, 0px) + 1.6rem); left: 2rem; z-index: 12; }
.brand-link {
  display: inline-flex; align-items: center; gap: .7rem;
  color: var(--ink); text-decoration: none;
  font-family: var(--display); font-weight: 500; font-size: .9rem;
  opacity: 0; transform: translateY(-6px); transition: opacity .6s ease, transform .6s var(--ease);
}
.brand-link svg { color: var(--cyan); filter: drop-shadow(0 0 6px rgba(127,212,255,.6)); }
body.panel-open .brand-link { opacity: 1; transform: none; }

/* Hero */
.hero {
  position: fixed; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + max(7vh, 2.5rem));
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 1.5rem; z-index: 3;
  transition: opacity .6s ease, transform .8s var(--ease), filter .6s ease;
}
/* gecikme sadece sayfa ilk açılırken */
body.panel-open .hero { opacity: 0; transform: translateY(40px) scale(.97); filter: blur(6px); pointer-events: none; visibility: hidden;
  transition: opacity .6s ease, transform .8s var(--ease), filter .6s ease, visibility 0s linear .8s; }

/* Başlık (ilk versiyondaki stil) */
.title {
  margin: 0; font-family: var(--display); font-weight: 800;
  line-height: .92; letter-spacing: -0.02em;
  display: flex; flex-direction: column; align-items: center;
}
.title .t1 {
  font-weight: 300; font-size: clamp(1.4rem, 3.4vw, 2.6rem);
  letter-spacing: .08em; color: var(--cyan);
}
.title .t2 {
  font-size: clamp(3.6rem, 12vw, 9.5rem);
  color: transparent;
  -webkit-text-stroke: 1.5px var(--blue);
  text-shadow: 0 0 28px rgba(47,123,255,.55);
}
.tagline { margin: 1rem 0 2rem; color: var(--soft); max-width: 44ch; font-size: 1.02rem; }

/* ======== Butonlar: 3D grid hover ======== */
.menu { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; perspective: 900px; }
.menu-btn {
  --rx: 0deg; --ry: 0deg; --mx: 50%;
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-grid; place-items: center;
  min-width: 10.5rem; height: 3.6rem; padding: 0 1.6rem;
  color: var(--ink); text-decoration: none;
  font-family: var(--display); font-weight: 500; font-size: .88rem; letter-spacing: .02em;
  background: linear-gradient(180deg, rgba(10,22,52,.55), rgba(0,6,20,.75));
  border: 1px solid rgba(47,123,255,.35);
  border-radius: 3px;
  backdrop-filter: blur(8px);
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform .35s var(--ease), border-color .3s, box-shadow .35s, color .3s;
}
/* köşe parantezleri */
.menu-btn::after {
  content: ""; position: absolute; inset: 4px; pointer-events: none; z-index: 2;
  background:
    linear-gradient(var(--cyan), var(--cyan)) top left / 10px 1px,
    linear-gradient(var(--cyan), var(--cyan)) top left / 1px 10px,
    linear-gradient(var(--cyan), var(--cyan)) bottom right / 10px 1px,
    linear-gradient(var(--cyan), var(--cyan)) bottom right / 1px 10px;
  background-repeat: no-repeat; opacity: .55;
  transition: inset .35s var(--ease), opacity .3s;
}
/* üstte gezen ışık */
.menu-btn::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(110px 50px at var(--mx) 110%, rgba(127,212,255,.2), transparent 70%);
  opacity: 0; transition: opacity .3s;
}
/* içeride perspektif grid zemini */
.menu-btn .grid {
  position: absolute; left: -50%; right: -50%; top: 10%; bottom: -60%; z-index: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(127,212,255,.9) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,212,255,.9) 1px, transparent 1px);
  background-size: 22px 22px;
  transform: perspective(120px) rotateX(58deg);
  transform-origin: 50% 0%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 45%);
  opacity: 0;
  animation: gridflow .7s linear infinite paused;
  transition: opacity .35s;
}
@keyframes gridflow { from { background-position: 0 0; } to { background-position: 0 22px; } }
.menu-btn .label { position: relative; z-index: 3; transform: translateZ(20px); text-shadow: 0 1px 8px rgba(0,0,0,.8); }

.menu-btn:hover, .menu-btn:focus-visible {
  border-color: rgba(127,212,255,.6); color: #fff;
  box-shadow: 0 8px 26px -12px rgba(47,123,255,.45), inset 0 0 18px rgba(47,123,255,.12);
}
.menu-btn:hover .grid, .menu-btn:focus-visible .grid { opacity: .28; animation-play-state: running; }
.menu-btn:hover::before, .menu-btn:focus-visible::before { opacity: 1; }
.menu-btn:hover::after, .menu-btn:focus-visible::after { inset: 2px; opacity: .8; }
.menu-btn:active { transform: rotateX(var(--rx)) rotateY(var(--ry)) scale(.97); }
.menu-btn[aria-current="page"] { border-color: var(--cyan); }

a:focus-visible, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

/* ======== Panel ======== */
.panel {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 10;
  width: min(620px, 100%);
  padding: calc(env(safe-area-inset-top, 0px) + 6.5rem) 3.5rem calc(env(safe-area-inset-bottom, 0px) + 4rem) 2.5rem;
  overflow-y: auto; overflow-x: hidden; scrollbar-width: thin; scrollbar-color: rgba(47,123,255,.5) transparent;
}
.panel-inner {
  opacity: 0; transform: translateX(40px);
  transition: opacity .5s ease, transform .7s var(--ease);
}
body.panel-open .panel-inner { opacity: 1; transform: none; transition-delay: .15s; }

.close {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 1.3rem); right: 1.6rem; z-index: 11;
  width: 48px; height: 48px; min-width: 0; padding: 0;
  display: grid; place-items: center; overflow: hidden; isolation: isolate;
  background: rgba(0,6,20,.6); color: var(--ink); cursor: pointer;
  border: 1px solid rgba(47,123,255,.4); border-radius: 3px;
  opacity: 0; transform: scale(.8) rotate(-45deg);
  transition: opacity .4s ease, transform .5s var(--ease), border-color .3s, color .3s;
}
body.panel-open .close {
  opacity: 1; transform: none;
  /* gecikme sadece açılış animasyonunda; hover anında tepki verir */
  transition: opacity .4s ease .25s, transform .5s var(--ease) .25s, border-color .3s, color .3s, box-shadow .35s;
}
.close::after {
  content: ""; position: absolute; inset: 4px; pointer-events: none; z-index: 2;
  background:
    linear-gradient(var(--cyan), var(--cyan)) top left / 8px 1px,
    linear-gradient(var(--cyan), var(--cyan)) top left / 1px 8px,
    linear-gradient(var(--cyan), var(--cyan)) bottom right / 8px 1px,
    linear-gradient(var(--cyan), var(--cyan)) bottom right / 1px 8px;
  background-repeat: no-repeat; opacity: .55;
  transition: inset .35s var(--ease), opacity .3s;
}
.close:hover::after, .close:focus-visible::after { inset: 2px; opacity: .8; }
.close svg { position: relative; z-index: 2; transition: transform .4s var(--ease); }
.close .grid {
  position: absolute; inset: -30% -40% -60%; z-index: 0;
  background-image: linear-gradient(rgba(127,212,255,.8) 1px, transparent 1px), linear-gradient(90deg, rgba(127,212,255,.8) 1px, transparent 1px);
  background-size: 12px 12px; transform: perspective(80px) rotateX(55deg);
  -webkit-mask-image: linear-gradient(to bottom, transparent 10%, #000 60%); mask-image: linear-gradient(to bottom, transparent 10%, #000 60%);
  opacity: 0; transition: opacity .3s; animation: gridflow .6s linear infinite paused;
}
.close:hover, .close:focus-visible {
  border-color: rgba(127,212,255,.6); color: #fff;
  box-shadow: 0 8px 26px -12px rgba(47,123,255,.45), inset 0 0 18px rgba(47,123,255,.12);
}
.close:hover .grid, .close:focus-visible .grid { opacity: .28; animation-play-state: running; }
.close:hover svg { transform: rotate(90deg); }

/* Panel başlıkları: ana sayfadaki "Fahrettin's / House" diliyle aynı */
.panel h2 {
  position: relative; isolation: isolate;
  margin: 1.2rem 0 2.4rem; padding-bottom: 1.1rem;
  font-family: var(--display); font-weight: 300;
  font-size: clamp(2rem, 3.6vw, 2.9rem); line-height: 1.05; letter-spacing: .06em;
  color: var(--ink);
  text-shadow: 0 0 22px rgba(127,212,255,.35);
}
/* arkadaki büyük, içi boş yankı */
.panel h2::before {
  content: attr(data-text);
  position: absolute; z-index: -1; left: -.04em; bottom: .55em;
  font-weight: 800; font-size: 1.9em; letter-spacing: -0.02em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(47,123,255,.45);
  text-shadow: none; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 95%);
          mask-image: linear-gradient(90deg, #000 40%, transparent 95%);
}
/* alttaki kısa ışık çizgisi */
.panel h2::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 3.2rem; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--cyan), var(--blue));
  box-shadow: 0 0 12px rgba(47,123,255,.7);
}
.panel p { max-width: 58ch; margin: 0 0 1.1rem; color: var(--soft); }
.panel .lead { font-size: 1.2rem; line-height: 1.55; color: var(--ink); }
.note { color: var(--dim) !important; font-size: .95rem; }

/* Oyun / uygulama kartı */
.entry {
  position: relative; margin-bottom: 2rem;
  background: linear-gradient(180deg, rgba(14,30,70,.45), rgba(2,8,24,.6));
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(47,123,255,.22), 0 30px 60px -30px rgba(0,0,0,.9);
  transition: box-shadow .4s, transform .5s var(--ease);
}
.entry:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(127,212,255,.55), 0 30px 70px -25px rgba(47,123,255,.55); }
.cover {
  position: relative; height: 190px; overflow: hidden;
  display: grid; place-items: center;
}
.cover-title {
  position: relative; z-index: 2; font-family: var(--display); font-weight: 800;
  font-size: 3.2rem; letter-spacing: .08em; color: transparent;
  -webkit-text-stroke: 1px rgba(234,241,251,.85);
  text-shadow: 0 0 30px rgba(127,212,255,.35);
}
.cover-game {
  background:
    radial-gradient(ellipse 60% 55% at 50% 58%, var(--glow), transparent 70%),
    radial-gradient(ellipse 45% 65% at 50% 60%, #000 55%, transparent 56%),
    linear-gradient(180deg, #0a1428 0%, #040914 100%);
}
.cover-game .grid-floor {
  position: absolute; left: -40%; right: -40%; bottom: -30%; height: 75%; overflow: hidden;
  transform: perspective(200px) rotateX(60deg); transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 60%); mask-image: linear-gradient(to bottom, transparent, #000 60%);
}
/* grid, arka plan konumu yerine transform ile akıyor: tarayıcı her karede yeniden boyamıyor, ekran kartı kaydırıyor */
.cover-game .grid-floor::before {
  content: ""; position: absolute; left: 0; right: 0; top: -28px; bottom: 0;
  background-image: linear-gradient(rgba(47,123,255,.7) 1px, transparent 1px), linear-gradient(90deg, rgba(47,123,255,.7) 1px, transparent 1px);
  background-size: 28px 28px;
  will-change: transform;
  animation: gridslide 1.4s linear infinite;
}
@keyframes gridslide { from { transform: translateY(0); } to { transform: translateY(28px); } }
.cover-app {
  background: radial-gradient(ellipse at 50% 120%, rgba(47,123,255,.4), transparent 60%), linear-gradient(180deg, #06102a, #02060f);
}
.cover-app .chart {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(90deg, rgba(47,123,255,.12) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(0deg, rgba(47,123,255,.12) 0 1px, transparent 1px 32px);
}
.cover-app .spark { position: absolute; left: 0; right: 0; top: 22%; height: 60%; width: 100%; }
.cover-app .spark polyline { fill: none; stroke: #7fd4ff; stroke-width: 2; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(127,212,255,.8)); }
.entry-body { padding: 1.5rem 1.6rem 1.6rem; }
.entry-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .7rem; }
.entry h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 1.3rem; letter-spacing: .03em; color: #fff; }
.status {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .3rem .75rem; border-radius: 99px; font-size: .8rem; font-weight: 700; color: var(--cyan);
  background: rgba(47,123,255,.14); white-space: nowrap;
}
.status::before { content: ""; width: .45rem; height: .45rem; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 10px var(--cyan); animation: blink 1.8s ease-in-out infinite; }
@keyframes blink { 50% { opacity: .3; } }
.tags { list-style: none; padding: 0; margin: 1.2rem 0 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tags li { padding: .3rem .7rem; font-size: .82rem; color: var(--soft); border-radius: 3px; background: rgba(255,255,255,.05); }

.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 2.5rem; }
.facts div { padding: 1.2rem 1rem; border-radius: 4px; background: rgba(47,123,255,.08); }
.facts strong { display: block; font-family: var(--display); font-size: 1.9rem; font-weight: 700; color: #fff; line-height: 1.1; }
.facts span { font-size: .85rem; color: var(--dim); }

.cta { margin: .8rem 0 .6rem; min-width: 14rem; }
.mail { color: var(--dim) !important; font-size: .95rem; margin-bottom: 2.5rem !important; }
.socials { list-style: none; padding: 0; margin: 0; }
.socials a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 0; color: var(--ink); text-decoration: none; font-weight: 500;
  background: linear-gradient(90deg, rgba(47,123,255,.35), transparent) bottom left / 100% 1px no-repeat;
  transition: color .25s, padding .35s var(--ease);
}
.socials a::after { content: ""; width: 7px; height: 7px; border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .5; }
.socials a:hover { color: var(--cyan); padding-left: .6rem; }

.fallback {
  position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 60;
  padding: .8rem 1.2rem; border: 1px solid var(--blue); background: #000; border-radius: 4px;
}

@media (max-width: 900px) {
  .shade { background: linear-gradient(180deg, rgba(0,2,10,.55) 0%, rgba(0,2,10,.9) 35%, rgba(0,2,10,.96) 100%); }
  .panel { width: 100%; padding-left: 1.75rem; padding-right: 1.75rem; }
}
@media (max-width: 600px) {
  .brand { left: 1.25rem; }
  .menu { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 380px; gap: .7rem; }
  .menu-btn { min-width: 0; }
  .facts { grid-template-columns: 1fr; }
  .cover { height: 150px; }
  .cover-title { font-size: 2.4rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: .01s !important; }
}


/* ======== Proje pinleri ======== */
.hero { pointer-events: none; }
.hero .menu, .hero .tagline { pointer-events: auto; }
body.panel-open .hero .menu, body.panel-open .hero .tagline { pointer-events: none; }
.pins { position: fixed; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
.pin {
  position: absolute; left: 0; top: 0; opacity: 0; visibility: hidden; translate: -50% -100%;
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem 1rem .6rem .7rem; white-space: nowrap; text-decoration: none;
  color: var(--cyan); line-height: 1.2;
  background: rgba(3, 14, 40, .72); backdrop-filter: blur(5px);
  border: 1px solid rgba(127,212,255,.4); border-left: 3px solid currentColor; border-radius: 2px;
  box-shadow: 0 0 22px -8px rgba(47,123,255,.6);
  transition: border-color .25s, box-shadow .25s, background .25s;
  will-change: transform, opacity;
}
.pin-apps { color: #6fa6ff; border-color: rgba(47,123,255,.45); }
.pin::after {
  content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 14px;
  background: linear-gradient(currentColor, transparent); opacity: .6;
}
.pin-icon { width: 22px; height: 22px; flex: none; }
.pin-icon svg { width: 100%; height: 100%; display: block; }
.pin-text { display: flex; flex-direction: column; }
.pin strong { font-family: var(--display); font-weight: 500; font-size: .95rem; letter-spacing: .06em; color: #fff; }
.pin em { font-style: normal; font-size: .75rem; margin-top: .2rem; }
.pin:hover, .pin:focus-visible {
  background: rgba(20, 50, 120, .8); border-color: currentColor;
  box-shadow: 0 0 26px -6px rgba(47,123,255,.75);
}

/* kapak yazısı karta sığsın */
.cover { container-type: inline-size; height: 150px; }
.cover-title { font-size: clamp(1.6rem, 8cqw, 3rem); white-space: nowrap; }
.soon { color: var(--dim) !important; font-size: .95rem; margin: 0 !important; }
.entry { scroll-margin-top: 5.5rem; }
.entry.flash { animation: flash 1.6s ease-out; }
@keyframes flash { 0%, 30% { box-shadow: 0 0 0 1px var(--cyan), 0 0 40px -6px rgba(127,212,255,.8); } }

/* ======== İmleç: ince üçgen ok, temaya uygun (gridli mavi) ======== */
html, body, * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cdefs%3E%3CclipPath id='c'%3E%3Cpath d='M9 1.2 L6.8 20.6 L18.2 15.2 Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d='M9 1.2 L6.8 20.6 L18.2 15.2 Z' fill='%2304102c'/%3E%3Cg clip-path='url%28%23c%29' stroke='%232f7bff' stroke-width='.6' opacity='.9'%3E%3Cpath d='M0 5.5h24M0 9.5h24M0 13.5h24M0 17.5h24M8 0v24M12 0v24M16 0v24'/%3E%3C/g%3E%3Cpath d='M9 1.2 L6.8 20.6 L18.2 15.2 Z' fill='none' stroke='%237fd4ff' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 9 1, auto; }
a, button, .menu-btn, .pin, a *, button *, .menu-btn *, .pin * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23bfeaff'/%3E%3Cstop offset='1' stop-color='%232f7bff'/%3E%3C/linearGradient%3E%3CclipPath id='c'%3E%3Cpath d='M9 1.2 L6.8 20.6 L18.2 15.2 Z'/%3E%3C/clipPath%3E%3C/defs%3E%3Cpath d='M9 1.2 L6.8 20.6 L18.2 15.2 Z' fill='url%28%23f%29'/%3E%3Cg clip-path='url%28%23c%29' stroke='%23fff' stroke-width='.5' opacity='.45'%3E%3Cpath d='M0 5.5h24M0 9.5h24M0 13.5h24M0 17.5h24M8 0v24M12 0v24M16 0v24'/%3E%3C/g%3E%3Cpath d='M9 1.2 L6.8 20.6 L18.2 15.2 Z' fill='none' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 9 1, pointer !important; }

/* ======== Ses aç/kapat ======== */
.sound-toggle {
  position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 1.4rem); left: 1.6rem; z-index: 12;
  width: 44px; height: 44px; padding: 0; display: grid; place-items: center; overflow: hidden; isolation: isolate;
  background: rgba(0,6,20,.55); color: var(--soft); border: 1px solid rgba(47,123,255,.35); border-radius: 3px;
  backdrop-filter: blur(6px); transition: border-color .3s, color .3s;
}
.sound-toggle svg { position: relative; z-index: 2; }
.sound-toggle .off { display: none; }
.sound-toggle.muted .on { display: none; }
.sound-toggle.muted .off { display: block; }
.sound-toggle .grid {
  position: absolute; inset: -30% -40% -60%; z-index: 0;
  background-image: linear-gradient(rgba(127,212,255,.8) 1px, transparent 1px), linear-gradient(90deg, rgba(127,212,255,.8) 1px, transparent 1px);
  background-size: 11px 11px; transform: perspective(80px) rotateX(55deg);
  -webkit-mask-image: linear-gradient(to bottom, transparent 10%, #000 60%); mask-image: linear-gradient(to bottom, transparent 10%, #000 60%);
  opacity: 0; transition: opacity .3s; animation: gridflow .6s linear infinite paused;
}
.sound-toggle:hover { border-color: rgba(127,212,255,.7); color: #fff; }
.sound-toggle:hover .grid { opacity: .28; animation-play-state: running; }

/* Sürükleyince yazılar seçilip maviye boyanmasın */
body { -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; }
a, svg { -webkit-user-drag: none; }
/* e-posta adresi kopyalanabilsin */
.mail { -webkit-user-select: text; user-select: text; }

/* ======== Tıklanabilir kartlar ======== */
.entry-link { display: block; color: inherit; text-decoration: none; }
.entry-link .entry-body h3 {
  margin: 0 0 .45rem; font-family: var(--display); font-weight: 500; font-size: 1.3rem; letter-spacing: .03em; color: #fff;
}
.entry-link .entry-body p { margin: 0; }
.entry-link:hover .cover-title, .entry-link:focus-visible .cover-title { -webkit-text-stroke-color: #fff; text-shadow: 0 0 30px rgba(127,212,255,.7); }
.entry-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 4px; }

/* bölüm değişince yumuşak geçiş */
.panel section:not([hidden]) { animation: secIn .45s var(--ease); }
@keyframes secIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ======== Oyun / uygulama sayfası ======== */
.back {
  display: inline-flex; align-items: center; gap: .6rem;
  margin: 0 0 1.4rem; padding: .55rem .9rem .55rem .8rem;
  color: var(--soft); text-decoration: none; font-family: var(--display); font-weight: 500; font-size: .8rem;
  border: 1px solid rgba(47,123,255,.35); border-radius: 3px; background: rgba(0,6,20,.5);
  transition: border-color .25s, color .25s, box-shadow .3s;
}
.back::before { content: ""; width: 7px; height: 7px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.back:hover, .back:focus-visible { color: #fff; border-color: rgba(127,212,255,.6); box-shadow: 0 8px 26px -12px rgba(47,123,255,.45), inset 0 0 18px rgba(47,123,255,.12); }
.detail-cover {
  margin: 0 0 2.2rem; border-radius: 6px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(47,123,255,.25), 0 30px 60px -30px rgba(0,0,0,.9);
}
.detail-cover .cover { height: 230px; }
.detail .detail-full { margin: -1.2rem 0 1.6rem !important; color: var(--cyan) !important; font-family: var(--display); font-weight: 300; letter-spacing: .06em; font-size: 1rem; }

.sub-h { margin: 2.6rem 0 1.1rem; font-family: var(--display); font-weight: 500; font-size: 1.05rem; letter-spacing: .05em; color: #fff; }
.modes { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.modes li {
  display: grid; gap: .2rem; padding: 1rem 1.2rem; border-radius: 4px;
  background: rgba(47,123,255,.07); box-shadow: inset 3px 0 0 var(--blue);
}
.modes strong { font-family: var(--display); font-weight: 500; font-size: .95rem; color: #fff; }
.modes span { color: var(--soft); font-size: .95rem; }

/* ======== Ekibimiz ======== */
.team { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.team li {
  display: flex; flex-direction: column; align-items: center; gap: .8rem; text-align: center;
  padding: 1.4rem .8rem 1.2rem; border-radius: 4px; background: rgba(47,123,255,.07);
}
.avatar {
  position: relative; display: grid; place-items: center; width: 64px; height: 64px; overflow: hidden;
  font-family: var(--display); font-weight: 500; font-size: 1.1rem; color: #fff; letter-spacing: .04em;
  border: 1px solid rgba(127,212,255,.5); border-radius: 3px;
  background:
    linear-gradient(rgba(47,123,255,.35) 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(90deg, rgba(47,123,255,.35) 1px, transparent 1px) 0 0 / 8px 8px,
    radial-gradient(circle at 50% 60%, rgba(47,123,255,.45), rgba(0,8,26,.9) 70%);
  box-shadow: 0 0 22px -6px rgba(47,123,255,.7);
  text-shadow: 0 0 12px rgba(127,212,255,.8);
}
.team .name { font-weight: 500; color: var(--ink); line-height: 1.3; }
@media (max-width: 600px) { .team { grid-template-columns: 1fr; } .team li { flex-direction: row; text-align: left; } }

/* ======== Oyun posterleri (3D kart) ======== */
.game-card { display: grid; grid-template-columns: minmax(120px, 36%) 1fr; align-items: center; gap: 0; }
.game-card .entry-body { padding: 1.2rem 1.4rem; }
.poster {
  --rx: 0deg; --ry: 0deg; --px: 0px; --py: 0px; --gx: 50%; --gy: 0%;
  position: relative; aspect-ratio: 2 / 3; overflow: hidden; border-radius: 4px;
  transform: perspective(700px) rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform .5s var(--ease), box-shadow .4s;
  box-shadow: 0 0 0 1px rgba(127,212,255,.25), 0 18px 30px -18px rgba(0,0,0,.9);
  will-change: transform;
}
.game-card .poster { margin: .9rem 0 .9rem .9rem; }
.poster.tilting { transition: transform .12s linear, box-shadow .4s; }
.poster .cover { position: absolute; inset: 0; height: auto; }
.poster img {
  position: absolute; left: -5%; top: -5%; width: 110%; height: 110%; object-fit: cover;
  opacity: 0; transition: opacity .6s ease, transform .5s var(--ease);
  transform: translate(var(--px), var(--py));
}
.poster.tilting img { transition: opacity .6s ease, transform .12s linear; }
.poster img.loaded { opacity: 1; }
.poster .glare {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle at var(--gx) var(--gy), rgba(255,255,255,.28), transparent 55%);
  mix-blend-mode: screen;
}
.poster::after { /* köşe parantezleri */
  content: ""; position: absolute; inset: 5px; pointer-events: none; z-index: 2; opacity: .6;
  background:
    linear-gradient(var(--cyan), var(--cyan)) top left / 12px 1.5px,
    linear-gradient(var(--cyan), var(--cyan)) top left / 1.5px 12px,
    linear-gradient(var(--cyan), var(--cyan)) bottom right / 12px 1.5px,
    linear-gradient(var(--cyan), var(--cyan)) bottom right / 1.5px 12px;
  background-repeat: no-repeat; transition: inset .35s var(--ease), opacity .3s;
}
.tilt:hover .poster { box-shadow: 0 0 0 1px rgba(127,212,255,.6), 0 24px 40px -16px rgba(47,123,255,.6); }
.tilt:hover .poster .glare { opacity: 1; }
.tilt:hover .poster::after { inset: 3px; opacity: 1; }

/* detay sayfası: gridli bant arkada, poster önde */
.detail-cover-game { position: relative; height: 400px; display: grid; place-items: center; }
.detail-cover-game > .cover { position: absolute; inset: 0; height: 100%; }
.detail-cover-game .poster { width: min(220px, 55%); z-index: 1; box-shadow: 0 0 0 1px rgba(127,212,255,.35), 0 30px 50px -20px rgba(0,0,0,.95), 0 0 60px -20px rgba(47,123,255,.7); }
@media (max-width: 600px) {
  .detail-cover-game { height: 330px; }
  .game-card .entry-body { padding: 1rem; }
}

/* Oyun kartı yazı bölümü: arkada gridli zemin (posterler yüklenmeden önceki kapak gibi) */
.game-card .entry-body {
  position: relative; isolation: isolate; align-self: stretch; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
}
.body-bg {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 75% 60% at 50% 105%, var(--glow, rgba(47,123,255,.3)), transparent 70%),
    linear-gradient(180deg, rgba(10,20,40,.9) 0%, rgba(4,9,20,.95) 100%);
}
.body-bg .grid-floor {
  position: absolute; left: -40%; right: -40%; bottom: -35%; height: 85%; overflow: hidden;
  transform: perspective(200px) rotateX(60deg); transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 65%); mask-image: linear-gradient(to bottom, transparent, #000 65%);
  opacity: .75;
}
.body-bg .grid-floor::before {
  content: ""; position: absolute; left: 0; right: 0; top: -28px; bottom: 0;
  background-image: linear-gradient(rgba(47,123,255,.7) 1px, transparent 1px), linear-gradient(90deg, rgba(47,123,255,.7) 1px, transparent 1px);
  background-size: 28px 28px;
  will-change: transform;
  animation: gridslide 1.4s linear infinite;
}
.game-card .entry-body h3, .game-card .entry-body p { text-shadow: 0 1px 10px rgba(0,0,0,.9); }

/* ======== Oyun sayfası: poster bütün bölümü kaplar, yazılara doğru kararır ======== */
.detail-game { position: relative; isolation: isolate; padding-top: 300px; }
.detail-game .back { position: absolute; top: 0; left: 0; margin: 0; z-index: 2; background: rgba(0,6,20,.65); }
.detail-game .detail-cover-game {
  position: absolute; z-index: -1; margin: 0;
  top: calc(-6.5rem - env(safe-area-inset-top, 0px)); left: -2.5rem; right: -3.5rem;
  height: calc(6.5rem + 300px + 260px);
  display: block; border-radius: 0; box-shadow: none; overflow: hidden;
  /* sola ve aşağı doğru yumuşakça kaybolur: sahnenin üzerinde kesik kenar olmaz */
  -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%), linear-gradient(to right, transparent 0%, #000 14%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, #000 50%, transparent 100%), linear-gradient(to right, transparent 0%, #000 14%);
          mask-composite: intersect;
}
.detail-game .detail-cover-game > .cover { display: none; }
.detail-game .detail-cover-game .poster {
  position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto;
  transform: none; border-radius: 0; box-shadow: none; overflow: hidden;
}
.detail-game .detail-cover-game .poster::after, .detail-game .detail-cover-game .poster .glare { display: none; }
.detail-game .detail-cover-game .poster .cover { display: block; }
.detail-game .detail-cover-game .poster img { left: 0; top: 0; width: 100%; height: 100%; object-position: center 22%; transform: none; }
/* yazı bölümüne doğru kararma */
.detail-game .detail-cover-game::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,2,8,.05) 0%, rgba(0,2,8,.2) 35%, rgba(0,2,8,.75) 60%, rgba(0,2,8,.97) 78%);
}
.detail-game h2 { text-shadow: 0 2px 18px rgba(0,0,0,.9), 0 0 22px rgba(127,212,255,.3); }
.detail-game h2::before { -webkit-text-stroke-color: rgba(47,123,255,.35); }
.detail-game p { text-shadow: 0 1px 10px rgba(0,0,0,.8); }
@media (max-width: 900px) {
  .detail-game .detail-cover-game { left: -1.75rem; right: -1.75rem; -webkit-mask-image: linear-gradient(to bottom, #000 50%, transparent 100%); mask-image: linear-gradient(to bottom, #000 50%, transparent 100%); }
}
@media (max-width: 600px) {
  .detail-game { padding-top: 240px; }
  .detail-game .detail-cover-game { height: calc(6.5rem + 240px + 220px); }
}

/* Detay sayfasında sağ üstteki buton geri tuşu olur; içerikteki ayrı geri linki gizlenir */
.close .ico-back { display: none; }
.panel.in-detail .close .ico-close { display: none; }
.panel.in-detail .close .ico-back { display: block; }
.panel.in-detail .close:hover svg { transform: translateX(-2px); }
.detail .back { display: none; }
.detail-game { padding-top: 330px; }

/* Oyun sayfası kapak resminin üst kısmında da hafif karartma */
.detail-game .detail-cover-game::after {
  background:
    linear-gradient(to bottom, rgba(0,2,8,.6) 0%, rgba(0,2,8,.25) 16%, rgba(0,2,8,0) 30%),
    linear-gradient(to bottom, rgba(0,2,8,.05) 0%, rgba(0,2,8,.2) 35%, rgba(0,2,8,.75) 60%, rgba(0,2,8,.97) 78%);
}
@media (max-width: 600px) { .detail-game { padding-top: 260px; } }

/* Kapak resmi en üstten başlasın (başlık kesilmesin), üst karartma görünür olsun */
.detail-game .detail-cover-game .poster img { object-position: center top; }
.detail-game .detail-cover-game::after {
  background:
    linear-gradient(to bottom, rgba(0,2,8,.72) 0%, rgba(0,2,8,.45) 10%, rgba(0,2,8,.12) 22%, rgba(0,2,8,0) 32%),
    linear-gradient(to bottom, rgba(0,2,8,0) 0%, rgba(0,2,8,.2) 40%, rgba(0,2,8,.75) 62%, rgba(0,2,8,.97) 80%);
}

/* Karartma katmanı resmin üstünde kalsın (poster z-index:1 olduğu için görünmüyordu) */
.detail-game .detail-cover-game::after {
  z-index: 2;
  background:
    radial-gradient(circle at 100% 0%, rgba(0,2,8,.75) 0%, rgba(0,2,8,0) 22%),
    linear-gradient(to bottom, rgba(0,2,8,.7) 0%, rgba(0,2,8,.4) 10%, rgba(0,2,8,.1) 22%, rgba(0,2,8,0) 30%),
    linear-gradient(to bottom, rgba(0,2,8,0) 0%, rgba(0,2,8,.15) 45%, rgba(0,2,8,.7) 64%, rgba(0,2,8,.97) 80%);
}
/* yazılar resmin karanlık kısmında başlasın */
.detail-game { padding-top: 440px; }
.detail-game .detail-cover-game { height: calc(6.5rem + 440px + 200px); }
@media (max-width: 600px) {
  .detail-game { padding-top: 330px; }
  .detail-game .detail-cover-game { height: calc(6.5rem + 330px + 170px); }
}

/* Sağ üst buton: kapatma hover'ı kırmızı, geri hover'ı turuncu */
.close:hover, .close:focus-visible {
  --cyan: #ff5a6a;
  color: #fff; border-color: rgba(255,90,106,.7);
  box-shadow: 0 8px 26px -12px rgba(255,60,80,.55), inset 0 0 18px rgba(255,60,80,.16);
}
.close:hover .grid, .close:focus-visible .grid {
  background-image: linear-gradient(rgba(255,90,106,.85) 1px, transparent 1px), linear-gradient(90deg, rgba(255,90,106,.85) 1px, transparent 1px);
}
.panel.in-detail .close:hover, .panel.in-detail .close:focus-visible {
  --cyan: #ffa040;
  border-color: rgba(255,160,64,.75);
  box-shadow: 0 8px 26px -12px rgba(255,140,40,.55), inset 0 0 18px rgba(255,140,40,.16);
}
.panel.in-detail .close:hover .grid, .panel.in-detail .close:focus-visible .grid {
  background-image: linear-gradient(rgba(255,160,64,.85) 1px, transparent 1px), linear-gradient(90deg, rgba(255,160,64,.85) 1px, transparent 1px);
}

/* ======== İndir butonu / geliştirme durumu ======== */
.actions { margin: 2rem 0 0; }
.download { min-width: 0; height: 3.4rem; padding: 0 1.6rem; }
.download .label { display: inline-flex; align-items: center; gap: .6rem; }
.dev-status {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .75rem 1.2rem; border-radius: 3px;
  font-family: var(--display); font-weight: 500; font-size: .85rem; color: #ffc47a;
  background: rgba(255,160,64,.08); border: 1px dashed rgba(255,160,64,.45);
}
.dev-status::before {
  content: ""; width: .5rem; height: .5rem; border-radius: 50%;
  background: #ffa040; box-shadow: 0 0 10px #ffa040; animation: blink 1.8s ease-in-out infinite;
}