:root {
  /* Dışarıdan yazı tipi yüklenmez; cihazın kendi yazı tipleri kullanılır */
  --font-display: ui-rounded, 'Segoe UI Variable Display', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --font-body: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
}
/* RubyMarket - Müşteri sayfası stilleri */
.wrap { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* Üst bar */
.site-header { padding: 22px 0; }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand__name { font: 700 21px/1 var(--font-display); letter-spacing: -.01em; }
.link-quiet { display: inline-flex; align-items: center; gap: 8px; color: var(--muted); text-decoration: none; font-size: 14.5px; font-weight: 500; padding: 8px 12px; border-radius: 10px; transition: color .15s, background-color .15s; }
.link-quiet:hover { color: var(--text); background: rgba(255, 226, 230, .07); }

/* Ana alan */
.stage { min-height: calc(100vh - 170px); display: flex; align-items: center; padding: 28px 0 56px; }
.stage > .wrap { display: flex; justify-content: center; }

/* Kart */
.card {
  width: 100%; max-width: 480px; padding: 32px;
  background: linear-gradient(180deg, rgba(42, 23, 33, .86), rgba(30, 16, 22, .9));
  border: 1px solid var(--line-strong); border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .8);
  backdrop-filter: blur(14px);
}
.card__title { font-size: 24px; margin-bottom: 6px; }
.card__sub { color: var(--muted); font-size: 15px; }
.stack { display: flex; flex-direction: column; gap: 20px; }

/* 1) Anahtar girişi */
.login { width: 100%; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 72px; align-items: center; }
.login .card { max-width: none; }
.intro h1 { font-size: clamp(2.1rem, 4.4vw, 3.3rem); font-weight: 800; margin-bottom: 18px; max-width: 14ch; }
.intro__lead { color: var(--muted); font-size: 17.5px; max-width: 46ch; margin-bottom: 36px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: step; max-width: 46ch; }
.steps li { position: relative; padding-left: 46px; counter-increment: step; }
.steps li::before {
  content: counter(step); position: absolute; left: 0; top: 1px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  font: 700 14px/1 var(--font-display); color: var(--rose);
  background: rgba(226, 53, 82, .14); border: 1px solid rgba(226, 53, 82, .35);
}
.steps strong { display: block; font-weight: 600; margin-bottom: 2px; }
.steps span { color: var(--muted); font-size: 14.5px; }

.key-input { text-align: center; font-family: var(--font-mono); font-size: 19px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: 16px; }
.key-input::placeholder { letter-spacing: .08em; font-weight: 500; }
.captcha { display: flex; justify-content: center; padding: 12px 8px; background: rgba(255, 226, 230, .04); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }

/* 2) Hesap bilgileri */
.account-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px; }
.account-head h1 { font-size: 28px; }
.creds { display: grid; gap: 10px; margin-bottom: 20px; }
.cred { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; padding: 12px 14px; background: var(--inset); border: 1px solid var(--line); border-radius: 14px; }
.cred__label { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); font-weight: 600; }
.cred__value { font-family: var(--font-mono); font-size: 15.5px; font-weight: 500; word-break: break-all; min-width: 0; }
.cred__actions { display: flex; gap: 6px; }
.cred .btn-icon { width: 34px; height: 34px; }
.meta-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 20px; font-size: 14px; color: var(--muted); }
.pips { display: inline-flex; gap: 5px; align-items: center; }
.pip { width: 9px; height: 9px; border-radius: 3px; transform: rotate(45deg); background: rgba(255, 226, 230, .14); }
.pip.on { background: var(--ruby); }
.note { display: flex; gap: 10px; font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.note i { color: var(--rose); margin-top: 3px; }

/* 3) Sonuç */
.result { text-align: center; }
.result__icon { width: 56px; height: 56px; margin: 0 auto 18px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; }
.result__icon.ok { background: rgba(63, 214, 154, .12); border: 1px solid rgba(63, 214, 154, .35); color: var(--ok); }
.result__icon.err { background: rgba(226, 53, 82, .12); border: 1px solid rgba(226, 53, 82, .38); color: var(--rose); }
.result h1 { font-size: 26px; margin-bottom: 8px; }
.result p { color: var(--muted); font-size: 15px; }
.result__msg { margin-bottom: 26px; line-height: 1.6; }
.result__msg b { color: var(--text); }

.gem-plate {
  margin: 26px 0 20px; padding: 2px;
  background: linear-gradient(135deg, var(--rose), var(--ruby) 45%, var(--ruby-deep));
  clip-path: polygon(24px 0, calc(100% - 24px) 0, 100% 24px, 100% calc(100% - 24px), calc(100% - 24px) 100%, 24px 100%, 0 calc(100% - 24px), 0 24px);
}
.gem-plate__inner {
  position: relative; padding: 30px 14px;
  background: linear-gradient(160deg, #31141e, #1a0b11);
  clip-path: polygon(22px 0, calc(100% - 22px) 0, 100% 22px, 100% calc(100% - 22px), calc(100% - 22px) 100%, 22px 100%, 0 calc(100% - 22px), 0 22px);
}
.gem-plate__inner::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 38%, rgba(255, 141, 160, .09) 50%, transparent 62%); }
.code {
  position: relative; z-index: 1; display: block; width: 100%;
  background: none; border: 0; padding: 0 0 0 .2em; color: #fff;
  font: 700 clamp(2rem, 10vw, 3.1rem)/1 var(--font-mono); letter-spacing: .2em; word-break: break-all;
}
.code__hint { position: relative; z-index: 1; margin-top: 12px; font-size: 13px; color: var(--muted); }

.timer { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 22px; font-size: 14px; color: var(--muted); text-align: left; }
.ring { position: relative; width: 46px; height: 46px; flex: none; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 3.5; }
.ring .track { stroke: rgba(255, 226, 230, .12); }
.ring .bar { stroke: var(--rose); stroke-linecap: round; stroke-dasharray: 125.66; stroke-dashoffset: 0; animation: ring-drain 30s linear forwards; }
.ring b { position: absolute; inset: 0; display: grid; place-items: center; font: 700 14px/1 var(--font-mono); color: var(--text); }
@keyframes ring-drain { to { stroke-dashoffset: 125.66; } }

/* Alt bar */
.site-footer { padding: 22px 0 28px; color: var(--muted); font-size: 13.5px; }
.site-footer__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 20px; }
.secure i { color: var(--rose); margin-right: 4px; }

/* ================= Animasyonlar (müşteri sayfası) ================= */
/* Açılış: tek bir sıralı sahne */
.intro h1, .intro__lead, .steps li { animation: rise .75s cubic-bezier(.2, .7, .2, 1) both; }
.intro h1 { animation-delay: .05s; }
.intro__lead { animation-delay: .17s; }
.steps li:nth-child(1) { animation-delay: .3s; }
.steps li:nth-child(2) { animation-delay: .4s; }
.steps li:nth-child(3) { animation-delay: .5s; }
.login .card, .stage > .wrap > .card { animation: pop-in .7s .2s cubic-bezier(.2, .7, .2, 1) both; }
.login .card { animation-delay: .28s; }

/* Adımlar sırayla parlar: akışı gösterir */
@keyframes step-glow {
  0%, 22%, 100% { background: rgba(226, 53, 82, .14); box-shadow: 0 0 0 0 rgba(226, 53, 82, 0); }
  8%, 14% { background: rgba(226, 53, 82, .4); box-shadow: 0 0 0 7px rgba(226, 53, 82, .1); }
}
.steps li::before { animation: step-glow 7.5s ease-in-out infinite; }
.steps li:nth-child(2)::before { animation-delay: 2.5s; }
.steps li:nth-child(3)::before { animation-delay: 5s; }

/* Anahtar alanı: yazarken harfler nefes alır */
.key-input:focus { animation: key-breathe 2.4s ease-in-out infinite; }
@keyframes key-breathe { 0%, 100% { box-shadow: 0 0 0 3px rgba(226, 53, 82, .22); } 50% { box-shadow: 0 0 0 6px rgba(226, 53, 82, .12); } }

/* Hesap bilgileri */
.account-head, .cred, .meta-row, .note, #codeForm { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
.account-head { animation-delay: .25s; }
.cred:nth-child(1) { animation-delay: .35s; }
.cred:nth-child(2) { animation-delay: .45s; }
.meta-row { animation-delay: .55s; }
.note { animation-delay: .62s; }
#codeForm { animation-delay: .7s; }
@keyframes pip-pop { 0% { transform: rotate(45deg) scale(0); } 70% { transform: rotate(45deg) scale(1.4); } 100% { transform: rotate(45deg) scale(1); } }
.pip { animation: pip-pop .45s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(.7s + var(--i, 0) * 70ms); }
.pip.on { box-shadow: 0 0 8px rgba(226, 53, 82, .55); }

/* Sonuç */
.result__icon { position: relative; animation: pop-in .6s .15s cubic-bezier(.3, 1.4, .5, 1) both; }
.result__icon.ok::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid var(--ok);
  animation: ring-out 1.6s .5s ease-out infinite;
}
@keyframes ring-out { from { transform: scale(1); opacity: .7; } to { transform: scale(1.9); opacity: 0; } }
.result__icon.err { animation: pop-in .6s .15s ease both, shake .5s .55s ease both; }
.result h1, .result p, .result .btn { animation: rise .55s cubic-bezier(.2, .7, .2, 1) both; }
.result h1 { animation-delay: .3s; }
.result p { animation-delay: .38s; }
.result .btn { animation-delay: .6s; }

/* Kod plakası: ışık süpürür, kod harf harf belirir (fx.js) */
.gem-plate { animation: pop-in .8s .35s cubic-bezier(.2, .7, .2, 1) both; filter: drop-shadow(0 0 22px rgba(226, 53, 82, .28)); }
.gem-plate__inner::after { background: linear-gradient(115deg, transparent 38%, rgba(255, 141, 160, .16) 50%, transparent 62%); background-size: 260% 100%; background-position: 160% 0; animation: sheen 3.6s 1.2s ease-in-out infinite; }
@keyframes sheen { 0% { background-position: 160% 0; } 55%, 100% { background-position: -60% 0; } }
.code { transition: transform .15s ease, color .15s; }
.code:hover { transform: scale(1.03); }
.code:active { transform: scale(.98); }
.code .ch { display: inline-block; }
.code .ch.lock { animation: lock-in .35s ease-out both; }
@keyframes lock-in { 0% { color: var(--rose); transform: translateY(-6px) scale(1.15); } 100% { color: #fff; transform: none; } }

/* Geri sayım: son 10 saniyede halka ısınır */
.timer.urgent .ring .bar { stroke: var(--warn); }
.timer.urgent .ring b { color: var(--warn); animation: tick-pulse 1s ease-in-out infinite; }
@keyframes tick-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

@media (max-width: 860px) {
  .login { grid-template-columns: 1fr; gap: 36px; }
  .intro h1 { max-width: none; }
  .stage { align-items: flex-start; padding-top: 12px; }
}
@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  .card { padding: 24px 20px; }
  .key-input { font-size: 17px; }
}