/* ==========================================================================
   Ana sayfa
   ========================================================================== */

/* Hero */
.hero { position: relative; isolation: isolate; min-height: 780px; min-height: max(100svh, 780px); display: flex; align-items: flex-end; padding: calc(var(--nav-h) + 64px) 0 clamp(56px, 9vh, 108px); overflow: clip; }
.hero-media { position: absolute; inset: 0; z-index: -2; background: #0b0f18; overflow: hidden; }
.hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform: scale(1.08); will-change: transform; }
.hero-media video { opacity: 0; transition: opacity 1.6s ease; }
.hero-media video.on { opacity: 1; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(9, 11, 16, .88) 0%, rgba(9, 11, 16, .6) 34%, rgba(9, 11, 16, .12) 68%, rgba(9, 11, 16, .3) 100%),
    linear-gradient(180deg, rgba(9, 11, 16, .72) 0, rgba(9, 11, 16, 0) 24%, rgba(9, 11, 16, 0) 50%, var(--bg) 100%);
}
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); gap: clamp(28px, 5vw, 80px); align-items: end; }
.hero-copy { display: grid; gap: 26px; justify-items: start; }
.hero-title { margin: 0; text-shadow: 0 4px 40px rgba(0, 0, 0, .55); }
.hero-title .gold {
  display: inline-block; margin-top: .08em; font-family: var(--font-px); font-weight: 700; letter-spacing: .005em; font-size: .92em; line-height: 1.02;
  background: linear-gradient(180deg, #fff3c2 0%, #ffc23d 46%, #ff8c1a 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 #4d2300) drop-shadow(0 10px 0 rgba(0, 0, 0, .38));
}
.hero-copy .lead { color: #c8cfe0; text-shadow: 0 2px 20px rgba(0, 0, 0, .6); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }
.hero-cta .btn-gold { margin-block: 4px; }
.hero-sub { display: flex; flex-wrap: wrap; gap: 8px; }
.hero-card { display: grid; gap: 16px; padding: 18px; border-radius: var(--r-lg); align-self: end; max-width: 520px; justify-self: end; width: 100%; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .8); }
.hc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: .85rem; }
.hc-top .px { color: var(--muted); }
.hc-steps { display: grid; gap: 10px; counter-reset: s; font-size: .9rem; color: var(--muted); }
.hc-steps li { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: center; counter-increment: s; }
.hc-steps li::before { content: counter(s); display: grid; place-items: center; width: 26px; height: 26px; font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: #2a1500; background: var(--gold); box-shadow: inset 0 -3px 0 rgba(120, 50, 0, .35); }
.hc-steps b { color: var(--text); font-weight: 600; }
.hc-steps code { font-family: var(--font-display); font-weight: 600; color: var(--gold-3); }
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-card { justify-self: start; max-width: 560px; }
  .hero::before { background: linear-gradient(180deg, rgba(9, 11, 16, .75) 0, rgba(9, 11, 16, .35) 30%, rgba(9, 11, 16, .72) 62%, var(--bg) 100%); }
}
@media (max-width: 560px) { .hero { padding-top: calc(var(--nav-h) + 36px); } .hero-cta .btn-lg { width: 100%; } .mc-entry { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 10px; padding: 10px; } .mc-entry img { width: 48px; height: 48px; } .mc-name { font-size: .88rem; } .mc-motd { font-size: .76rem; } .mc-side { font-size: .8rem; } }

/* Bant */
.band { border-block: 1px solid var(--line); background: var(--bg-1); padding-block: 22px; }

/* İki dünya */
.worlds { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 26px); }
.world { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: clamp(520px, 52vw, 640px); border-radius: 28px; overflow: hidden; border: 1px solid var(--line-2); transition: transform .6s var(--ease), border-color .3s, box-shadow .6s var(--ease); }
.world:hover { transform: translateY(-6px); box-shadow: 0 50px 90px -40px var(--glow, rgba(255, 194, 61, .35)); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.world-media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.world-media > img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.world:hover .world-media > img { transform: scale(1.07); }
.world::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(9, 11, 16, .05) 0%, rgba(9, 11, 16, .5) 40%, rgba(9, 11, 16, .97) 80%); }
.world-body { margin-top: auto; padding: clamp(24px, 3vw, 40px); display: grid; gap: 16px; }
.world-body p { color: #bcc4d6; max-width: 46ch; }
.world .h3 { font-size: clamp(1.7rem, 1.6vw + 1rem, 2.4rem); }
.world-actions { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; margin-top: 4px; }
.world-server { --accent: var(--gold); --glow: rgba(255, 194, 61, .38); }
.world-server .eyebrow { color: var(--gold); }
.world-crosv { --accent: var(--mint); --glow: rgba(124, 92, 255, .5); background: radial-gradient(90% 70% at 85% 8%, rgba(124, 92, 255, .42), transparent 60%), radial-gradient(70% 60% at 8% 55%, rgba(34, 211, 166, .2), transparent 60%), #0c0f18; }
.world-crosv::before { background: linear-gradient(180deg, rgba(9, 11, 16, 0) 0%, rgba(9, 11, 16, .4) 42%, rgba(9, 11, 16, .94) 82%); }
.world-crosv .world-media { background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(80% 70% at 60% 25%, #000, transparent 75%); mask-image: radial-gradient(80% 70% at 60% 25%, #000, transparent 75%); }
.fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.fx-chip { position: absolute; display: inline-flex; align-items: center; gap: 10px; padding: 9px 14px; border-radius: 14px; background: rgba(18, 22, 34, .82); border: 1px solid var(--line-2); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .8); font-size: .88rem; font-weight: 500; white-space: nowrap; backdrop-filter: blur(8px); animation: bob 7s ease-in-out infinite; animation-delay: var(--dl, 0s); }
.fx-chip b { font-weight: 700; }
.fx-chip .arr { color: var(--dim); }
.fx-chip .res { color: var(--mint-2); font-weight: 600; }
.fx-chip .em { font-size: 1.15rem; line-height: 1; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); } 50% { transform: translateY(-12px) rotate(var(--r, 0deg)); } }
@media (max-width: 860px) { .worlds { grid-template-columns: minmax(0, 1fr); } .world { min-height: 520px; } }
/* Dar kartlarda yüzen etiketler metnin üstüne binmesin: üstte akışa girip sarılırlar (satır içi left/top yok sayılır) */
@media (max-width: 1280px) {
  .world-crosv .fx { position: relative; inset: auto; display: flex; flex-wrap: wrap; gap: 10px; padding: 22px clamp(24px, 3vw, 40px) 0; }
  .world-crosv .fx-chip { position: static; }
}
@media (prefers-reduced-motion: reduce) { .fx-chip { animation: none; } }

/* Liman */
.liman-grid { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.liman-copy { display: grid; gap: 24px; justify-items: start; }
.stops { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; }
.stop { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); transition: border-color .25s, background .25s, transform .25s var(--ease); }
.stop:hover { border-color: rgba(255, 194, 61, .35); background: rgba(255, 194, 61, .06); transform: translateX(4px); }
.stop i { display: grid; place-items: center; width: 34px; height: 34px; font-family: var(--font-display); font-style: normal; font-weight: 700; color: #2a1500; background: linear-gradient(180deg, #ffe08a, #ffb02e); box-shadow: inset 0 -3px 0 rgba(120, 50, 0, .35); }
.stop b { display: block; font-weight: 600; font-size: .95rem; line-height: 1.25; }
.stop small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.3; margin-top: 1px; }
.plan-card { perspective: 1600px; }
.plan-link { display: block; border-radius: var(--r-lg); }
.plan-card .frame { aspect-ratio: 1; transform: rotateX(12deg) rotateZ(-4deg) scale(.96); transform-origin: 50% 60%; transition: transform 1s var(--ease), box-shadow 1s var(--ease); box-shadow: 0 60px 100px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(255, 255, 255, .06); }
.plan-card:hover .frame { transform: none; }
.plan-tag { position: absolute; left: 14px; bottom: 14px; z-index: 2; }
@media (max-width: 920px) { .liman-grid { grid-template-columns: minmax(0, 1fr); } .plan-card { order: -1; max-width: 560px; overflow: clip; padding: 6px; } .plan-card .frame { transform: rotateX(8deg) rotateZ(-2deg) scale(.93); } }
@media (max-width: 520px) { .stops { grid-template-columns: minmax(0, 1fr); } }

/* Eldoria */
.eldoria { position: relative; isolation: isolate; overflow: clip; padding-block: clamp(300px, 34vw, 520px) clamp(64px, 8vw, 110px); }
.eldoria-bg { position: absolute; inset: 0; z-index: -2; }
.eldoria-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }
@media (max-width: 720px) { .eldoria { padding-top: 340px; } .eldoria-bg img { object-position: 57% 0%; } }
.eldoria::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, var(--bg) 0%, rgba(9, 11, 16, .1) 18%, rgba(9, 11, 16, .08) 34%, rgba(9, 11, 16, .78) 62%, var(--bg) 100%); }
.eldoria-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 32px; align-items: end; margin-bottom: 40px; }
.eldoria-head .h2 { font-size: clamp(2.2rem, 4.6vw + .5rem, 4.4rem); text-shadow: 0 4px 40px rgba(0, 0, 0, .6); }
.eldoria-head .lead { margin-top: 18px; color: #c8cfe0; }
.chapters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; counter-reset: ch; }
.chapter { position: relative; padding: 20px 18px 18px; border-radius: 18px; background: rgba(12, 14, 22, .72); border: 1px solid var(--line-2); backdrop-filter: blur(14px); display: grid; gap: 8px; align-content: start; transition: transform .4s var(--ease), border-color .3s, background .3s; }
.chapter:hover { transform: translateY(-6px); border-color: rgba(255, 194, 61, .45); background: rgba(22, 20, 24, .85); }
.chapter .n { font-family: var(--font-display); font-weight: 700; font-size: .85rem; letter-spacing: .14em; color: var(--gold); }
.chapter h3 { font-family: var(--font-display); font-size: 1.12rem; letter-spacing: -.02em; line-height: 1.2; }
.chapter p { font-size: .82rem; color: var(--muted); line-height: 1.45; }
.chapter .boss { display: inline-flex; align-items: center; gap: 7px; margin-top: 6px; font-size: .78rem; font-weight: 600; color: #ffb7ad; }
.chapter .boss::before { content: ""; width: 8px; height: 8px; background: var(--ember); box-shadow: 0 0 10px var(--ember); transform: rotate(45deg); flex: none; }
.chapter:last-child { border-color: rgba(255, 91, 77, .4); background: linear-gradient(180deg, rgba(60, 18, 16, .75), rgba(12, 14, 22, .8)); }
.chapter:last-child .n { color: var(--ember); }
@media (max-width: 1080px) { .chapters { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .chapters { grid-template-columns: minmax(0, 1fr); } .eldoria-head { grid-template-columns: minmax(0, 1fr); } }

/* Özellikler */
.features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.features .tile h3 { margin-top: 4px; }
@media (max-width: 980px) { .features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .features { grid-template-columns: minmax(0, 1fr); } }

/* CrosV bandı */
.crosv-band { position: relative; isolation: isolate; overflow: clip; background: radial-gradient(60% 80% at 82% 20%, rgba(124, 92, 255, .24), transparent 62%), radial-gradient(50% 70% at 6% 92%, rgba(34, 211, 166, .14), transparent 62%), var(--bg-1); border-block: 1px solid var(--line); }
.crosv-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.crosv-copy { display: grid; gap: 24px; justify-items: start; }
.crosv-copy .checks { display: grid; gap: 12px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; color: #c3cadb; }
.checks li svg { width: 20px; height: 20px; margin-top: 3px; color: var(--mint); }
.crosv-actions { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 980px) { .crosv-grid { grid-template-columns: minmax(0, 1fr); } }

/* Sayılar */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.stat { background: var(--bg-1); padding: clamp(24px, 3vw, 40px); display: grid; gap: 6px; }
.stat b { font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em; filter: drop-shadow(0 3px 0 #4d2300); font-size: clamp(2.6rem, 3.2vw + 1rem, 4.2rem); line-height: 1; background: linear-gradient(180deg, #fff3c2, #ffc23d 55%, #ff9a1f); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.stat span { color: var(--muted); font-size: .95rem; }
@media (max-width: 820px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Katıl */
.join-card { position: relative; overflow: hidden; border-radius: 28px; border: 1px solid var(--line-2); background: radial-gradient(70% 90% at 100% 0%, rgba(255, 194, 61, .14), transparent 60%), var(--bg-1); padding: clamp(28px, 5vw, 64px); display: grid; gap: clamp(28px, 4vw, 48px); }
.join-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; }
.ip-box { display: inline-flex; align-items: center; gap: 16px; padding: 14px 14px 14px 22px; border-radius: 16px; background: rgba(0, 0, 0, .4); border: 1px solid var(--line-2); }
.ip-box code { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 2vw + .6rem, 2.1rem); color: var(--gold-3); letter-spacing: 0; text-shadow: 0 2px 0 #4d2300; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); counter-reset: st; }
.step { display: grid; gap: 12px; align-content: start; padding: 24px; border-radius: 20px; background: rgba(255, 255, 255, .035); border: 1px solid var(--line); counter-increment: st; }
.step::before { content: "0" counter(st); font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; letter-spacing: -.03em; line-height: 1; color: var(--gold); text-shadow: 0 3px 0 #4d2300; }
.step h3 { font-family: var(--font-display); font-size: 1.2rem; letter-spacing: -.02em; }
.step p { color: var(--muted); font-size: .95rem; }
.step code, .inline-code { font-family: var(--font-display); font-weight: 600; color: var(--gold-3); background: rgba(255, 194, 61, .08); border: 1px solid rgba(255, 194, 61, .2); padding: 1px 7px; font-size: .92em; }
.join-note { color: var(--muted); font-size: .9rem; display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; }
@media (max-width: 860px) { .join-top, .steps { grid-template-columns: minmax(0, 1fr); } .ip-box { width: 100%; justify-content: space-between; } }
@media (max-width: 520px) { .ip-box { flex-wrap: wrap; justify-content: center; padding: 14px; } .ip-box code { flex: 1 1 100%; text-align: center; } .ip-box .btn { width: 100%; } }

/* Kapanış */
.finale { position: relative; isolation: isolate; overflow: clip; text-align: center; padding-block: clamp(96px, 14vw, 180px); }
.finale-bg { position: absolute; inset: 0; z-index: -2; }
.finale-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.finale::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 70% at 50% 50%, rgba(9, 11, 16, .55), rgba(9, 11, 16, .9)), linear-gradient(180deg, var(--bg), transparent 30%, transparent 70%, var(--bg)); }
.finale .h1 { font-size: clamp(2.6rem, 6vw + .5rem, 5.2rem); text-shadow: 0 4px 40px rgba(0, 0, 0, .6); }
.finale-inner { display: grid; gap: 28px; justify-items: center; }
.finale .hero-cta { justify-content: center; }