/* Metin2Glass — "Yakında" sayfası, seçenek 2: ticaret camı penceresi (solda metin, sağda ürün penceresinin taslağı).
   Renkler sitenin v2 koyu görünümünden. Dış kaynak yok: yazı tipi, simge, logo ve eşya çizimleri bu klasörde. */

@font-face {
  font-family: "Figtree";
  src: url("fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #1b1b1b; --bg-2: #202021; --bg-3: #262626;
  --ln: #3e3e38; --ln-soft: #2e2e2b;
  --tx: #c3c1ba; --tx-hi: #faf9f1; --tx-mut: #a4a294; --tx-dim: #8d8d89;
  --accent: #ecb260; --accent-soft: #3a342c; --gold: #ffc800; --won: #00d5be; --won-bg: #00786f; --yang: #ff8904;
  /* pencere (sitenin açılır pencereleri) */
  --gp-zemin: rgba(24, 24, 27, .95); --gp-kenar: #2d2d33; --gp-bas: #18181b; --gp-ayrac: #222225;
  --font: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --gutter: clamp(16px, 4vw, 3rem);
  --wrap: 70rem;
}

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

html {
  font-size: clamp(15px, 0.36vw + 11.8px, 28px);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  background: var(--bg);
}

body {
  margin: 0; min-height: 100vh; min-height: 100svh; overflow-x: hidden;
  background:
    radial-gradient(ellipse 55% 60% at 74% 52%, rgba(236, 178, 96, .07) 0%, rgba(236, 178, 96, 0) 70%),
    linear-gradient(180deg, #212122 0%, var(--bg) 46%) fixed,
    var(--bg);
  color: var(--tx);
  font: 400 1rem/1.55 var(--font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* Dil: yalnız seçili dildeki metin görünür (html lang, site.js gövde çizilmeden ayarlar). */
html[lang="en"] .t[lang="tr"], html[lang="tr"] .t[lang="en"] { display: none !important; }

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.page {
  display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: minmax(0, 1fr); overflow-x: clip;
  min-height: 100vh; min-height: 100svh;
  padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right);
}

/* ---------- üst: logo + dil ---------- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto;
  padding: 1.35rem var(--gutter) .75rem;
}
.brand { display: flex; align-items: center; gap: .95rem; margin: 0; min-width: 0; font-weight: 400; line-height: 1; }
.brand img { display: block; height: 2.9rem; width: auto; max-width: min(60vw, 20rem); object-fit: contain; object-position: left center; }
.tagline {
  padding: .25rem 0 .25rem .95rem; border-left: 1px solid var(--ln);
  font: 650 .72rem/1 var(--font); letter-spacing: .28em; text-transform: uppercase; color: var(--accent); white-space: nowrap;
}

.langs {
  display: inline-flex; flex: none; gap: 2px; padding: 3px;
  border: 1px solid var(--ln); border-radius: 999px; background: rgba(27, 27, 27, .72);
}
html:not(.js) .langs { display: none; }
.langs button {
  min-width: 2.9rem; min-height: 2.1rem; padding: 0 .8rem;
  border: 0; border-radius: 999px; background: transparent; color: var(--tx-mut);
  font: 650 .8125rem/1 var(--font); letter-spacing: .08em; cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.langs button:hover { color: var(--tx-hi); }
.langs button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
.langs button:focus-visible { outline-offset: 1px; }
/* dokunmatik ekranda parmakla rahat basılsın */
@media (pointer: coarse) { .langs button { min-height: 2.6rem; } }

/* ---------- orta ---------- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); align-items: center; gap: clamp(2rem, 5vw, 4.5rem);
  width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto;
  padding: 1rem var(--gutter) 2.5rem;
}

.copy { max-width: 34rem; }
.eyebrow {
  display: inline-flex; align-items: center; margin: 0; padding: .42rem .85rem;
  border: 1px solid rgba(236, 178, 96, .38); border-radius: 999px; background: rgba(58, 52, 44, .5);
  font: 650 .75rem/1.2 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--accent);
}
.headline {
  margin: 1.15rem 0 0;
  font: 700 clamp(2.1rem, 1.1rem + 2.7vw, 3.6rem)/1.06 var(--font); letter-spacing: -.025em; color: var(--tx-hi);
}
.headline em { display: block; font-style: normal; color: var(--accent); }
.lead { margin: 1.15rem 0 0; max-width: 31rem; font-size: 1.0625rem; color: var(--tx); text-wrap: pretty; }
.quote { margin: 1.6rem 0 0; max-width: 31rem; padding: .15rem 0 .15rem 1rem; border-left: 2px solid var(--accent); }
.quote blockquote { margin: 0; }
.quote blockquote p { margin: 0; font-size: 1rem; font-style: italic; line-height: 1.5; color: var(--tx-hi); text-wrap: pretty; }
.quote figcaption { margin-top: .45rem; font-size: .8125rem; font-weight: 600; letter-spacing: .02em; color: var(--accent); }
.discord {
  display: inline-flex; align-items: center; gap: .6rem; margin: 1.6rem 0 0; padding: .7rem 1.15rem;
  border-radius: 10px; background: #5865f2; color: #fff; font-weight: 600; font-size: .98rem; text-decoration: none;
  box-shadow: 0 6px 18px rgba(88, 101, 242, .28); transition: background-color .15s ease, transform .15s ease;
}
.discord:hover { background: #4752c4; transform: translateY(-1px); }
.discord:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.discord svg { flex: none; }
@media (prefers-reduced-motion: reduce) { .discord, .discord:hover { transition: none; transform: none; } }
.status {
  display: inline-flex; align-items: center; gap: .65rem; margin: 1.7rem 0 0; padding: .6rem .95rem;
  border: 1px solid var(--ln-soft); border-radius: 10px; background: rgba(32, 32, 33, .75);
  font-size: .9375rem; line-height: 1.3; color: var(--tx);
}
.dot, .g-live i, .ev.now { position: relative; display: block; flex: none; border-radius: 50%; background: var(--won); }
.dot { width: .5rem; height: .5rem; }
.dot::after, .g-live i::after, .ev.now::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--won);
  animation: ping 2.6s ease-out infinite;
}
@keyframes ping {
  0% { transform: scale(1); opacity: .55; }
  70%, 100% { transform: scale(2.8); opacity: 0; }
}

/* ---------- sağ: pencere taslağı ---------- */
.stage { position: relative; isolation: isolate; width: 100%; justify-self: end; }
.stage::before {
  content: ""; position: absolute; inset: -12% -14%; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(236, 178, 96, .13), rgba(236, 178, 96, .03) 60%, rgba(236, 178, 96, 0));
}
.glass {
  position: relative; overflow: hidden;
  border: 1px solid var(--gp-kenar); border-radius: 16px; background: var(--gp-zemin);
  box-shadow: 0 28px 70px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .03);
  font: 400 .875rem/1.3 var(--font-ui); color: var(--tx);
}
.sk { display: block; height: .45rem; border-radius: 4px; background: #34343a; }

.g-head {
  display: flex; align-items: center; gap: .75rem; height: 3.6rem; padding: 0 .95rem;
  background: var(--gp-bas); border-bottom: 1px solid var(--gp-ayrac);
}
.g-icon {
  display: grid; place-items: center; width: 2.35rem; height: 2.35rem; flex: none; border-radius: 8px;
  border: 1px solid rgba(224, 185, 47, .25); background: linear-gradient(#232326, #18181b); color: #e0b92f;
}
.g-icon svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.g-title { display: flex; flex-direction: column; gap: .4rem; flex: 1; min-width: 0; }
.g-title b { font-size: .9375rem; font-weight: 700; line-height: 1.1; color: var(--tx-hi); }
.g-sub { width: 8.5rem; max-width: 70%; }
.g-live { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; flex: none; }
.g-live i { width: .5rem; height: .5rem; }

.g-search {
  display: flex; align-items: center; gap: .55rem; height: 2.45rem; margin: .8rem .95rem 0; padding: 0 .8rem;
  border: 1px solid var(--ln); border-radius: 10px; background: #1f1f22; color: var(--tx-dim);
}
.g-search svg { width: 1rem; height: 1rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.caret { width: 1.5px; height: 1.05rem; flex: none; margin-right: -.3rem; background: var(--accent); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ph { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .8125rem; color: var(--tx-dim); }

/* Oyun içi dükkan ızgarası: sekizgen hücreler, çok hücreli eşyalar (kılıç 1x3, zırh 1x2 ...) */
.board { --gap: 5px; --oct: 8px; position: relative; display: grid; padding: .85rem .95rem .95rem; }
.cells, .items { grid-area: 1 / 1; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }
.items { grid-template-rows: repeat(5, minmax(0, 1fr)); }
.cells i {
  position: relative; display: block; aspect-ratio: 1; background: #3a3a35;
  clip-path: polygon(var(--oct) 0, calc(100% - var(--oct)) 0, 100% var(--oct), 100% calc(100% - var(--oct)),
    calc(100% - var(--oct)) 100%, var(--oct) 100%, 0 calc(100% - var(--oct)), 0 var(--oct));
}
.cells i::before {
  --o: calc(var(--oct) - .4px);
  content: ""; position: absolute; inset: 1px;
  background: radial-gradient(circle at 50% 30%, #29292a 0%, #1d1d1e 78%);
  clip-path: polygon(var(--o) 0, calc(100% - var(--o)) 0, 100% var(--o), 100% calc(100% - var(--o)),
    calc(100% - var(--o)) 100%, var(--o) 100%, 0 calc(100% - var(--o)), 0 var(--o));
}
.cells i.sel { background: rgba(236, 178, 96, .8); }
.cells i.sel::before { background: radial-gradient(circle at 50% 35%, #3b3123 0%, #231e17 80%); }

.it {
  display: block; min-width: 0; min-height: 0; padding: 14%;
  background: linear-gradient(115deg, #4a4943 0%, #4a4943 40%, #a8a493 50%, #4a4943 60%, #4a4943 100%);
  background-size: 300% 100%; background-position: 100% 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-origin: content-box; mask-origin: content-box;
  -webkit-mask-clip: content-box; mask-clip: content-box;
  animation: shim 6s ease-in-out infinite;
}
.it.on {
  background-image: linear-gradient(115deg, #b78a35 0%, #b78a35 40%, #ffe08a 50%, #b78a35 60%, #b78a35 100%);
  filter: drop-shadow(0 0 6px rgba(255, 200, 0, .25));
}
.d1 { animation-delay: .4s; } .d2 { animation-delay: 1.3s; } .d3 { animation-delay: 2.2s; } .d4 { animation-delay: 3.1s; } .d5 { animation-delay: 4s; }
@keyframes shim {
  0% { background-position: 100% 0; }
  45%, 100% { background-position: 0 0; }
}
.sword    { grid-area: 1 / 1 / 4 / 2; -webkit-mask-image: url("items/sword.svg");    mask-image: url("items/sword.svg"); padding: 9% 14%; }
.helmet   { grid-area: 1 / 2 / 2 / 3; -webkit-mask-image: url("items/helmet.svg");   mask-image: url("items/helmet.svg"); }
.armor    { grid-area: 1 / 3 / 3 / 4; -webkit-mask-image: url("items/armor.svg");    mask-image: url("items/armor.svg"); padding: 12% 12%; }
.ring     { grid-area: 1 / 4 / 2 / 5; -webkit-mask-image: url("items/ring.svg");     mask-image: url("items/ring.svg"); padding: 20%; }
.potion   { grid-area: 1 / 5 / 2 / 6; -webkit-mask-image: url("items/potion.svg");   mask-image: url("items/potion.svg"); padding: 17%; }
.shield   { grid-area: 2 / 2 / 4 / 3; -webkit-mask-image: url("items/shield.svg");   mask-image: url("items/shield.svg"); }
.potion2  { grid-area: 2 / 4 / 3 / 5; -webkit-mask-image: url("items/potion.svg");   mask-image: url("items/potion.svg"); padding: 17%; }
.gem      { grid-area: 2 / 5 / 3 / 6; -webkit-mask-image: url("items/gem.svg");      mask-image: url("items/gem.svg"); padding: 18%; }
.bracelet { grid-area: 4 / 1 / 5 / 2; -webkit-mask-image: url("items/bracelet.svg"); mask-image: url("items/bracelet.svg"); padding: 16%; }
.necklace { grid-area: 4 / 2 / 5 / 3; -webkit-mask-image: url("items/necklace.svg"); mask-image: url("items/necklace.svg"); padding: 16%; }
.boots    { grid-area: 5 / 1 / 6 / 2; -webkit-mask-image: url("items/boots.svg");    mask-image: url("items/boots.svg"); padding: 16%; }

/* fare imleci zırhın üstünde; eşya bilgisi kutusu altında açılmış */
.cursor {
  position: absolute; left: calc(.95rem + (100% - 1.9rem) * .555); top: calc(.85rem + (100% - 1.8rem) * .3);
  width: .95rem; height: 1.3rem; fill: var(--tx-hi); stroke: #111; stroke-width: 1.2; stroke-linejoin: round;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
}
.tip {
  position: absolute; left: 47%; top: 43%; width: 50%;
  display: flex; flex-direction: column; gap: .42rem; padding: .75rem .8rem .8rem;
  border: 1px solid var(--gp-kenar); border-radius: 10px; background: rgba(20, 20, 23, .97);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .65);
}
.tip-name { height: .6rem; width: 80%; background: linear-gradient(90deg, var(--gold), #f2b800); }
.tip-sub { width: 42%; height: .38rem; background: #3f3f46; }
.tip-ln { display: block; height: 1px; margin: .12rem 0; background: #2a2a2f; }
.bo { height: .38rem; background: #4a4a52; }
.bo.hi { background: rgba(0, 213, 190, .7); }
.w86 { width: 86%; } .w78 { width: 78%; } .w70 { width: 70%; } .w62 { width: 62%; }
.tip-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 1rem; }
.tip-k { font-size: .6875rem; font-weight: 600; color: #a1a1aa; }
.tip-v { display: inline-flex; align-items: center; gap: .35rem; }
.won {
  display: grid; place-items: center; width: 1.25rem; height: .95rem; border-radius: 4px; background: var(--won-bg);
}
.won::after { content: "W"; font: 800 .55rem/1 var(--font-ui); color: #cbfbf1; }
.yang { width: 2.4rem; background: rgba(255, 137, 4, .85); }
.seller { width: 3.4rem; background: #99a1af; opacity: .75; }
.spark { width: 3.6rem; height: 1rem; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.g-time {
  display: grid; gap: .55rem; padding: .75rem .95rem .9rem;
  background: var(--gp-bas); border-top: 1px solid var(--gp-ayrac);
}
.g-time-k { font: 650 .625rem/1 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--tx-dim); }
.track { position: relative; display: block; height: .9rem; margin: 0 .3rem; }
.track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--ln); }
.track::after {
  content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 3px); height: 7px;
  background: repeating-linear-gradient(90deg, #4a4943 0 1px, transparent 1px 12.5%);
}
.ev { position: absolute; z-index: 1; top: 50%; width: .5rem; height: .5rem; margin: -.25rem 0 0 -.25rem; border-radius: 50%; background: var(--accent); }
.ev.s { background: var(--won); }
.e1 { left: 7%; } .e2 { left: 19%; } .e3 { left: 33%; } .e4 { left: 49%; } .e5 { left: 63%; } .e6 { left: 79%; }
.ev.now { left: 97%; width: .55rem; height: .55rem; box-shadow: 0 0 0 3px rgba(0, 213, 190, .18); }

/* ---------- alt ---------- */
.foot {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem 2rem;
  width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin: 0 auto;
  padding: 1.1rem var(--gutter) calc(1.3rem + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(62, 62, 56, .55);
  font-size: .8125rem; line-height: 1.5; color: var(--tx-dim);
}
.foot p { margin: 0; max-width: 60rem; }
.foot .copy-r { white-space: nowrap; }
.foot a { color: var(--tx); text-underline-offset: 2px; }

/* ---------- dar ekran ---------- */
@media (max-width: 880px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; padding-top: .75rem; }
  .copy { max-width: 36rem; }
  .stage { justify-self: center; max-width: 27rem; }
}
@media (max-width: 560px) {
  .top { align-items: flex-start; padding-top: 1.1rem; }
  .brand { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .brand { flex: 0 1 auto; }
  .brand img { height: 2.4rem; max-width: 100%; }
  .tagline { padding: 0; border-left: 0; font-size: .66rem; }
  .board { --gap: 4px; --oct: 6px; padding: .75rem .8rem .8rem; }
  .tip { padding: .6rem .65rem .65rem; gap: .36rem; left: 45%; width: 53%; }
  .foot { flex-direction: column; align-items: center; text-align: center; }
}

/* ---------- hareket istemeyenler ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .it { background-position: 50% 0; }
  .it:not(.on) { background-position: 100% 0; }
}