/* Pxl Haber — tek stil dosyası */

/* ---------- Fontlar (Inter: gövde, Archivo: menü ve başlıklar) ---------- */
@font-face { font-family: Inter; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; font-weight: 100 900; font-display: swap; src: url(../fonts/inter-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: Archivo; font-weight: 100 900; font-display: swap; src: url(../fonts/archivo-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Archivo; font-weight: 100 900; font-display: swap; src: url(../fonts/archivo-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root { color-scheme: dark; }
html { height: 100%; overflow-y: scroll; scroll-behavior: smooth; scrollbar-width: thin; scrollbar-color: #3a3a3a #1a1a1a; }
html::-webkit-scrollbar { width: 4px; }
html::-webkit-scrollbar-track { background: #1a1a1a; }
html::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 3px; }
html::-webkit-scrollbar-thumb:hover { background: #4a4a4a; }
body {
  min-height: 100vh; color: #fff; font-family: Inter, Arial, sans-serif;
  background: linear-gradient(180deg, #070707, #0e0e0e); background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; background: none; border: 0; outline: 0; }
button { cursor: pointer; }
img { display: block; }

/* ---------- Animasyonlar ---------- */
.fade-in { animation: fade-in 1.75s cubic-bezier(.85, 0, .15, 1) forwards; }
.slide-in-minus { animation: slide-in-minus 2s cubic-bezier(.85, 0, .15, 1) forwards; }
.slide-in-plus { animation: slide-in-plus 2s cubic-bezier(.85, 0, .15, 1) forwards; }
.slide-in-plus-with-fade-in { animation: slide-in-plus 2s cubic-bezier(.85, 0, .15, 1) forwards, fade-in 1.75s cubic-bezier(.85, 0, .15, 1) forwards; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes slide-in-minus { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes slide-in-plus { from { transform: translateY(100%); } to { transform: none; } }
@keyframes list-in { from { transform: translateX(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes list-out { from { transform: none; opacity: 1; } to { transform: translateX(-100%); opacity: 0; } }
@keyframes pulse { 50% { transform: scale(1.25); } }
@keyframes shine { 0% { top: -100%; height: 100%; } 50% { top: 100%; height: 50%; } 100% { top: -100%; height: 100%; } }
@keyframes thinker { from { background-position: -100% top; } to { background-position: 250% top; } }
@keyframes shimmer { from { background-position: -100% top; } to { background-color: #fff; background-position: 250% top; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Ortak çerçeve: blur, logo, sosyal, telif ---------- */
.blur-group { position: absolute; inset: 0; overflow: hidden; pointer-events: none; user-select: none; z-index: 1000; }
.blur-group img { position: fixed; max-width: 532px; z-index: -1; }
.blur-group .top-left { left: -256px; top: -256px; }
.blur-group .top-right { right: -256px; top: -256px; opacity: .3; }
.blur-group .bottom-left { left: -256px; bottom: -256px; }

.logo { position: fixed; top: 34px; left: 40px; z-index: 1000; user-select: none; transition: filter .2s ease-out; }
.logo:hover { filter: brightness(90%); }
.logo:active { filter: brightness(75%); }

.socials { position: fixed; top: 39px; right: 40px; z-index: 1000; display: flex; gap: 5px; align-items: center; justify-content: center; transition: all .2s cubic-bezier(.85, 0, .15, 1); }
.socials a { display: flex; padding: 8px; border-radius: 960px; color: #fff; transition: all .2s ease-out; }
.socials a:hover { background: hsl(235, 10%, 25%); filter: brightness(.8); }
.socials a:active { background: hsl(235, 10%, 30%); filter: brightness(.9); }
.socials svg { width: 16px; height: 16px; fill: currentColor; }

.copyright { display: flex; gap: 4px; font-size: 14px; pointer-events: none; }
.copyright b { color: hsla(0, 0%, 100%, .6); font-weight: 525; }
.copyright span { color: hsla(0, 0%, 100%, .5); font-weight: 450; }
.copyright.corner { position: fixed; right: 40px; bottom: 39px; z-index: 1000; }

/* mobil üst sağ: telif + hamburger */
.footer { position: fixed; top: 39px; right: 40px; z-index: 1000; display: none; align-items: center; gap: 24px; }
.footer .copyright { opacity: 0; transform: translateX(20%); transition: all .2s cubic-bezier(.85, 0, .15, 1); }
.footer .copyright.is-active { opacity: 1; transform: none; }
.menu-button {
  position: relative; width: 34px; height: 34px; border-radius: 960px;
  background: linear-gradient(180deg, #262833, #17181e); border: 1.5px solid #25262e;
  box-shadow: inset 0 2px 4px 0 rgba(100, 103, 122, .22); transition: all .2s ease-out;
}
.menu-button:hover { filter: brightness(120%); }
.menu-button span { position: absolute; left: 9px; width: 14px; height: 1px; background: currentColor; transition: all .2s cubic-bezier(0, 0, 0, 1); }
.menu-button span:nth-child(1) { top: 12px; }
.menu-button span:nth-child(2) { top: 16px; }
.menu-button span:nth-child(3) { top: 20px; }
.menu-button.is-open span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.menu-button.is-open span:nth-child(2) { opacity: 0; }
.menu-button.is-open span:nth-child(3) { transform: translateY(-4px) rotate(-45deg); }

/* ---------- Menü (masaüstü: sol alt, mobil: tam ekran) ---------- */
.menu { position: fixed; left: 40px; bottom: 39px; z-index: 5000; font-family: Archivo, Arial, sans-serif; }
.menu-content { position: absolute; left: 0; bottom: 0; display: flex; flex-direction: column; gap: 6px; width: max-content; transition: all .3s cubic-bezier(.85, 0, .15, 1); }
.menu-content.policies { gap: 0; }
.menu-content.is-visible { opacity: 1; visibility: visible; transition-delay: .6s; }
.menu-content:not(.is-visible) { opacity: 0; visibility: hidden; pointer-events: none; transition-delay: .4s; }
.menu .item {
  width: fit-content; text-align: left; font-size: 22px; font-weight: 570; line-height: 46px;
  background: linear-gradient(180deg, #fff, #dbdce9); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  transition: filter .2s ease-out;
}
.menu .item:hover { filter: brightness(75%); }
.menu .item:active { filter: brightness(50%); }
.menu .item.list-in { opacity: 0; transform: translateX(-100%); animation: list-in .5s cubic-bezier(.85, 0, .15, 1) forwards; animation-delay: calc(var(--i, 1) * .1s); }
.menu .item.list-out { animation: list-out .5s cubic-bezier(.85, 0, .15, 1) forwards; animation-delay: calc(var(--i, 1) * .1s); }
.menu .back {
  display: flex; align-items: center; gap: 6px; width: fit-content; margin-bottom: 16px; padding: 5px 10px 5px 6px;
  background: hsl(235, 20%, 6%); border: 1.5px solid hsl(233, 11%, 13%); border-radius: 8px; transition: background .2s ease-out;
}
.menu .back:hover { background: hsl(235, 20%, 9%); }
.menu .back:active { background: hsl(235, 20%, 15%); }
.menu .back svg { width: 14px; height: 14px; opacity: .7; }
.menu .back span { font-size: 15px; font-weight: 700; line-height: 18px; background: linear-gradient(180deg, #fff, #ccceeb); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

@media (max-width: 1211px) {
  .copyright.corner { display: none; }
  .footer { display: flex; }
  .blur-group .bottom-left { display: none; }
  .socials { left: 0; right: 0; top: auto; width: 100%; }
  .socials a { filter: brightness(.9); }
  .socials:not(.is-active) { bottom: -100%; opacity: 0; pointer-events: none; }
  .socials.is-active { bottom: 48px; opacity: 1; }

  .menu {
    inset: 0; z-index: 500; display: flex; align-items: center; justify-content: center; background: #000;
    opacity: 0; visibility: hidden; transform: scale(1.1) translateY(2.5%) skew(-2deg);
    transition: all .2s cubic-bezier(.85, 0, .15, 1);
  }
  .menu.is-active { opacity: 1; visibility: visible; transform: none; }
  .menu-content { left: auto; bottom: auto; align-items: center; }
  .menu .item { text-align: center; font-size: 26px; font-weight: 500; line-height: 56px; background-image: linear-gradient(180deg, #fff, #ccceeb); }
  .menu .item:hover { filter: brightness(130%); }
  .menu .item:active { filter: brightness(70%); }
  .menu .back { margin-bottom: 12px; }
  .menu .back span { font-size: 16px; font-weight: 500; }
}
@media (max-width: 567px) {
  .logo { left: 24px; }
  .footer { right: 24px; }
}

/* ---------- Ana sayfa: cetveller ---------- */
@property --ruler-top { syntax: "<color>"; initial-value: #9500ff; inherits: false; }
@property --ruler-bottom { syntax: "<color>"; initial-value: #282828; inherits: false; }
@property --ruler-shine { syntax: "<color>"; initial-value: #8000ff; inherits: false; }

.waitlist { min-height: 100vh; overflow: hidden; }
.ruler-group { position: fixed; inset: 0; z-index: -1; display: flex; justify-content: center; align-items: flex-start; padding: 0 24px; }
.ruler-group .side { flex: 1 1; max-width: 516.5px; height: 100%; display: flex; justify-content: space-between; }
.ruler-group .gap { flex: 1 1 560px; max-width: 512px; }
.ruler-group .ruler { width: 1.5px; height: 100%; background: linear-gradient(180deg, #141414 85%, rgba(14, 14, 14, 0)); }

.beam { display: flex; justify-content: center; }
.beam .center { display: flex; justify-content: center; gap: 48px; width: 100%; max-width: 512px; height: 200px; }
.beam.bottom .center { height: 232px; }
.beam .ruler {
  position: relative; width: 1.5px; height: 100%; overflow: hidden;
  background: linear-gradient(180deg, var(--ruler-top) 0, var(--ruler-bottom) 67.5%);
  box-shadow: 0 0 12px 0 rgba(128, 40, 255, .2);
  transition: --ruler-top .2s ease-out, --ruler-bottom .2s ease-out, --ruler-shine .2s ease-out;
}
.beam .ruler:nth-child(2) { background: linear-gradient(180deg, var(--ruler-bottom) 32.5%, var(--ruler-top) 100%); }
.beam .ruler::before {
  content: ""; position: absolute; top: -200%; width: 100%; z-index: 1;
  background: linear-gradient(1turn, transparent, var(--ruler-shine), transparent);
  animation: shine 4s ease-out infinite 2s;
}
.beam .ruler:nth-child(2)::before { animation-delay: 1.75s; }

.waitlist.is-post .beam .ruler { --ruler-top: #ffb100; --ruler-shine: #f8d351; }
.waitlist.is-post .beam .ruler:nth-child(2) { --ruler-top: #282828; --ruler-bottom: #ffb100; }
.waitlist.is-post .beam .ruler::before { animation-duration: 1s; animation-delay: 1s; }
.waitlist.is-post .beam .ruler:nth-child(2)::before { animation-delay: .5s; }
.waitlist.is-error .beam .ruler { --ruler-top: #f00; --ruler-shine: #f80051; }
.waitlist.is-error .beam .ruler:nth-child(2) { --ruler-top: #282828; --ruler-bottom: #f00; }
.waitlist.is-error .beam .ruler::before { animation-duration: 3s; animation-delay: 3s; }
.waitlist.is-error .beam .ruler:nth-child(2)::before { animation-duration: 2s; animation-delay: 1s; }
.waitlist.is-success .beam .ruler { --ruler-top: #0f0; --ruler-shine: #00f851; }
.waitlist.is-success .beam .ruler:nth-child(2) { --ruler-top: #282828; --ruler-bottom: #0f0; }
.waitlist.is-success .beam .ruler::before { animation-duration: .5s; animation-delay: 3s; }
.waitlist.is-success .beam .ruler:nth-child(2)::before { animation-duration: 2s; animation-delay: 1s; }

/* ---------- Ana sayfa: LED paneli ---------- */
.form-container { display: flex; justify-content: center; width: 100%; }
.form { width: 100%; max-width: 560px; padding: 0 24px; }
.panel {
  display: grid; grid-template-columns: repeat(18, 1fr); gap: 24px; align-content: center;
  width: 100%; max-height: 212px; padding: 24px;
  background: linear-gradient(180deg, #17181e, #0c0c0c); border: 1.5px solid #282828; border-radius: 20px;
  box-shadow: inset 0 0 12px 0 #1b1b1e; transition: filter .2s ease-out;
}
.panel:hover { filter: brightness(120%); }
.led { width: 2px; height: 2px; aspect-ratio: 1; border-radius: 960px; background: #444; box-shadow: inset 0 0 2px 0 #565656; transition: all .2s ease-out; }
.led.is-on { background: #ecdcff; }
.led.is-on:not(.is-emphasized) { border: .5px solid #9500ff; box-shadow: 0 0 6px 0 #8000ff, inset 0 0 1px 1px rgba(160, 60, 255, .25), inset 0 0 1px 1px rgba(60, 0, 105, .8); }
.led.is-on.is-emphasized { outline: .5px solid #8000ff; box-shadow: 0 0 6px 0 #9500ff, inset 0 0 1px 1px rgba(180, 110, 253, .25), inset 0 0 1px 1px rgba(190, 120, 255, .8); animation: pulse 1s ease-out infinite .5s; }
.waitlist:is(.is-post, .is-error, .is-success) .led.is-on { background: #fff4dc; }
.waitlist.is-post .led.is-on:not(.is-emphasized) { border-color: #ffb100; box-shadow: 0 0 6px 0 #ffb100, inset 0 0 1px 1px rgba(255, 208, 0, .25), inset 0 0 1px 1px rgba(125, 95, 0, .8); }
.waitlist.is-post .led.is-on.is-emphasized { outline-color: #ffb100; box-shadow: 0 0 6px 0 #f8d351, inset 0 0 1px 1px rgba(253, 226, 70, .25), inset 0 0 1px 1px rgba(255, 231, 88, .8); }
.waitlist.is-error .led.is-on:not(.is-emphasized) { border-color: red; box-shadow: 0 0 6px 0 red, inset 0 0 1px 1px rgba(255, 0, 0, .25), inset 0 0 1px 1px rgba(125, 0, 0, .8); }
.waitlist.is-error .led.is-on.is-emphasized { outline-color: red; box-shadow: 0 0 6px 0 #f80051, inset 0 0 1px 1px rgba(253, 0, 70, .25), inset 0 0 1px 1px rgba(255, 0, 88, .8); }
.waitlist.is-success .led.is-on:not(.is-emphasized) { border-color: #00b100; box-shadow: 0 0 6px 0 #00b100, inset 0 0 1px 1px rgba(0, 208, 0, .25), inset 0 0 1px 1px rgba(0, 95, 0, .8); }
.waitlist.is-success .led.is-on.is-emphasized { outline-color: #00b100; box-shadow: 0 0 6px 0 #00d351, inset 0 0 1px 1px rgba(0, 226, 70, .25), inset 0 0 1px 1px rgba(0, 231, 88, .8); }

/* ---------- Ana sayfa: form ekranları ---------- */
.screens {
  position: relative; display: flex; width: 100%; padding: 40px; border-radius: 0 0 10px 10px;
  background: linear-gradient(180deg, rgba(10, 10, 10, 0), #17181e 100%); box-shadow: inset 0 -5px 15px -11px #2d303f;
  transition: padding-bottom .2s cubic-bezier(.85, 0, .15, 1);
}
.waitlist.is-success .screens { padding-bottom: 128px; }
.screen { display: flex; flex-direction: column; gap: 64px; width: 100%; z-index: 2; transition: all .3s cubic-bezier(.85, 0, .15, 1); }
.screen:not(:first-child) { position: absolute; inset: 0; padding: inherit; }
.screen.is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: .15s; }
.screen:not(.is-visible) { opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(-10px); }
.meta { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.meta h1 { font-family: Archivo, Arial, sans-serif; font-size: 36px; font-weight: 500; line-height: 48px; background: linear-gradient(180deg, #fff, #ccceeb); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.meta p { color: #d0d2e5; font-size: 18px; font-weight: 375; line-height: 26px; }
.meta .process-status {
  display: inline-block; font-weight: 500;
  background: #8f91a3 linear-gradient(90deg, #8f91a3, #ececec 50%, #8f91a3) no-repeat -100% top / 50% 200%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: thinker 1.5s infinite;
}
.input-group { display: flex; flex-direction: column; justify-content: center; gap: 32px; }
.input { display: flex; height: 48px; border-radius: 8px; background: hsla(240, 15%, 6%, .5); box-shadow: 0 0 0 1.75px #252529; transition: all .2s ease-out; }
.input:hover { filter: brightness(120%); }
.input:focus-within { box-shadow: 0 0 0 3px #393942; }
.input input { width: 100%; height: 100%; padding: 0 16px; font-size: 16px; font-weight: 375; line-height: 28px; color: #fff; }
.input input::placeholder { color: #c2c2c2; opacity: 1; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.form button {
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px;
  background: linear-gradient(180deg, #262833, #17181e); border: 1.5px solid #25262e; border-radius: 8px;
  box-shadow: inset 0 2px 4px 0 rgba(100, 103, 122, .22); transition: all .2s ease-out;
}
.form button:hover { filter: brightness(110%); }
.form button:active { filter: brightness(120%); }
.form button span { font-size: 16px; font-weight: 700; line-height: 28px; background: linear-gradient(180deg, #fff, #ccceeb); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.whats-next { display: flex; flex-direction: column; gap: 24px; }
.whats-next-item { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 16px; background: linear-gradient(180deg, #0f0f12, #0e0e11); border: 1.75px solid #1f1f1f; border-radius: 8px; }
.whats-next-icon { display: flex; padding: 5px; border-radius: 960px; background: #292b34; }
.whats-next-icon svg { width: 14px; height: 14px; color: #e8eaff; stroke-width: 2.5px; }
.whats-next-text { font-size: 15px; font-weight: 600; line-height: 22px; background: linear-gradient(180deg, #e8eaff 60%, #d1d3e9); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

@media (max-width: 628px) {
  .beam.top .center { height: 100px; }
  .ruler-group .side:first-child { justify-content: flex-end; }
  .ruler-group .side:first-child .ruler:not(:last-child), .ruler-group .side:last-child .ruler:not(:first-child) { display: none; }
}
@media (max-width: 612px) {
  .panel { gap: 16px 12px; padding: 16px; }
  .screens { padding: 24px 24px 40px; }
  .screen { gap: 36px; }
  .meta h1 { font-size: 28px; line-height: 36px; }
  .meta p { font-size: 16px; line-height: 24px; }
}

/* ---------- Metin sayfaları ---------- */
.article-container { display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: 164px; padding: 0 40px 350px; }
.article { display: flex; flex-direction: column; gap: 32px; width: 100%; max-width: 45%; }
.article h1 {
  display: inline-block; width: fit-content; font-size: 40px; font-weight: 500; line-height: 56px;
  background-color: #686a79; background-image: linear-gradient(90deg, transparent, #ccceeb 25%, #fff 50%, #ccceeb 75%, transparent);
  background-repeat: no-repeat; background-size: 50% 200%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: shimmer 6s forwards;
}
.article h2 { color: #d0d2e5; font-size: 24px; font-weight: 500; line-height: 48px; }
.article p, .article li { color: #e7e7e7; font-size: 18px; font-weight: 450; line-height: 32px; }
.article strong { color: #fff; font-weight: 700; }
.article ol { padding-left: 1.2em; }
.article ol li::marker { color: #d0d2e5; }
.article a { text-decoration: underline; text-decoration-color: #555; text-underline-offset: 4px; transition: text-decoration-color .2s; }
.article a:hover { text-decoration-color: #fff; }
.article .tight { display: flex; flex-direction: column; gap: 32px; }
.article .tight h2 { margin-top: 12px; }
.article .tight p { margin-top: -24px; }
@media (max-width: 1211px) { .article { max-width: 932px; } }
@media (max-width: 1024px) {
  .article h1 { font-size: 32px; line-height: 48px; }
  .article h2 { font-size: 20px; line-height: 36px; }
  .article p, .article li { font-size: 16px; line-height: 30px; }
}
@media (max-width: 567px) { .article-container { padding: 0 24px 200px; } }