/* vanilla-extract-css-ns:src/css/reset.css.ts.vanilla.css?source=Lmlla2JjYzAgewogIGJvcmRlcjogMDsKICBib3gtc2l6aW5nOiBib3JkZXItYm94OwogIGZvbnQtc2l6ZTogMTAwJTsKICBsaW5lLWhlaWdodDogbm9ybWFsOwogIG1hcmdpbjogMDsKICBwYWRkaW5nOiAwOwogIHRleHQtYWxpZ246IGxlZnQ7CiAgdmVydGljYWwtYWxpZ246IGJhc2VsaW5lOwogIC13ZWJraXQtdGFwLWhpZ2hsaWdodC1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0KLmlla2JjYzEgewogIGxpc3Qtc3R5bGU6IG5vbmU7Cn0KLmlla2JjYzIgewogIHF1b3Rlczogbm9uZTsKfQouaWVrYmNjMjpiZWZvcmUsIC5pZWtiY2MyOmFmdGVyIHsKICBjb250ZW50OiAnJzsKfQouaWVrYmNjMyB7CiAgYm9yZGVyLWNvbGxhcHNlOiBjb2xsYXBzZTsKICBib3JkZXItc3BhY2luZzogMDsKfQouaWVrYmNjNCB7CiAgYXBwZWFyYW5jZTogbm9uZTsKfQouaWVrYmNjNSB7CiAgb3V0bGluZTogbm9uZTsKfQouaWVrYmNjNTo6cGxhY2Vob2xkZXIgewogIG9wYWNpdHk6IDE7Cn0KLmlla2JjYzYgewogIGJhY2tncm91bmQtY29sb3I6IHRyYW5zcGFyZW50OwogIGNvbG9yOiBpbmhlcml0Owp9Ci5pZWtiY2M3OmRpc2FibGVkIHsKICBvcGFjaXR5OiAxOwp9Ci5pZWtiY2M3OjotbXMtZXhwYW5kIHsKICBkaXNwbGF5OiBub25lOwp9Ci5pZWtiY2M4OjotbXMtY2xlYXIgewogIGRpc3BsYXk6IG5vbmU7Cn0KLmlla2JjYzg6Oi13ZWJraXQtc2VhcmNoLWNhbmNlbC1idXR0b24gewogIC13ZWJraXQtYXBwZWFyYW5jZTogbm9uZTsKfQouaWVrYmNjOSB7CiAgYmFja2dyb3VuZDogbm9uZTsKICBjdXJzb3I6IHBvaW50ZXI7CiAgdGV4dC1hbGlnbjogbGVmdDsKfQouaWVrYmNjYSB7CiAgY29sb3I6IGluaGVyaXQ7CiAgdGV4dC1kZWNvcmF0aW9uOiBub25lOwp9 */
[data-rk] .iekbcc0 {
  border: 0;
  box-sizing: border-box;
  font-size: 100%;
  line-height: normal;
  margin: 0;
  padding: 0;
  text-align: left;
  vertical-align: baseline;
  -webkit-tap-highlight-color: transparent;
}
[data-rk] .iekbcc1 {
  list-style: none;
}
[data-rk] .iekbcc2 {
  quotes: none;
}
[data-rk] .iekbcc2:before,
[data-rk] .iekbcc2:after {
  content: "";
}
[data-rk] .iekbcc3 {
  border-collapse: collapse;
  border-spacing: 0;
}
[data-rk] .iekbcc4 {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
[data-rk] .iekbcc5 {
  outline: none;
}
[data-rk] .iekbcc5::-moz-placeholder {
  opacity: 1;
}
[data-rk] .iekbcc5::placeholder {
  opacity: 1;
}
[data-rk] .iekbcc6 {
  background-color: transparent;
  color: inherit;
}
[data-rk] .iekbcc7:disabled {
  opacity: 1;
}
[data-rk] .iekbcc7::-ms-expand {
  display: none;
}
[data-rk] .iekbcc8::-ms-clear {
  display: none;
}
[data-rk] .iekbcc8::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
[data-rk] .iekbcc9 {
  background: none;
  cursor: pointer;
  text-align: left;
}
[data-rk] .iekbcca {
  color: inherit;
  text-decoration: none;
}

/* vanilla-extract-css-ns:src/css/sprinkles.css.ts.vanilla.css?source=#H4sIAAAAAAAAE6Vdy67rxhHc+yu0CWAvZOhJPbJJrp0gBhJkEQNZU+SQ4hFF6pDU6wT+90DiebCre2aavDtbXV3TNdMcFTm8Rz+/nOfB6jIZ/e+H0SjMs7QYZ4051ttRkpvbuG7CqvnzD3/88HOLm1lwpog7qAVHRaZoTNXBBE9MnNWnPLxvR0VZmE50TaO7vIwOnXBIw48SOtGIRrMizwi56ZRXmzyxaE1kGJWaMhBTun9CdmF0SKvyXMTjOnsz21FUXggsa2FlFZtqXIVxdq63o+mpK+xFggQEchBZJgSTi5g5wRwlzCWsfhyPq8Pzg2wcRk1WFt/OTVMWP3VyC0VuVBaFiRqeXCqSj6Y488yTJrOMw7yb9KpN+le5y3LTTa2k1NnyTx1ILUE2m82GzHXTRdXNPTfbUV3mWbfPzl3MNYub/XZEV/UiIGj7XAXEjCBuAmJBEPcnIjpXdVltR6cyg2Z/I3G4qqftNvOeNTYXUzQ1R01FVJjnXVC7Ex2zYrw3WbpvtqM1KXQ6Z4AFlTJtt6nnRR1nlXl283ZUldcuaCmCojI/H4surt3PkrJoxkl4zPJ7p40en9bjXRnfu/0zXX2ltFvC9Lkao9Fjv/qsegq61ixrrsjasKyFIitkWYGQNaONON2xrLWUBasRYVZL68mKWZY0GzN6wU3NV9b1ozkmky4i4YglRaQcEVDEniNWFJFxxJoi2i0/DU/bEfn88PU5vcin+VeEXtzT41eEbvbT4isC81t+RZY0cvqK0K+g6etXBPqp6lQNTVN3QlB30wlBeedOCKq4dEJQxrUzRVDGrROCse6dEBC+dWaWFj+bdEK0wtm0M+t0rNmsM7kQmn+FxnTpZ+2G9nkx0+CSBKHKgARhxBUJUumzNR0TeDd0UDrZs5BGYdgdjcK4EYnOgTmmUajK0CiMm9AoLFpKZwrG3dMoMGc0CopeSHQJuQcSDWDcHOYZwke6SJNJ16TMChI9hreHO2tMQYx/uxG8nOsmS+4fANtdwskBpv559ipDmYueVTKwPoWRGe9MczWm+4U8q1348OnEu/B2k2nMrRk/3fx2lJuEiDozBC/ywjBZsTdVRoja7ecYVmlWjHdl05RHurvPbhICrue7hIFGf5MwdO+fTyQMbb75VMLQ74P5TMLQi2c+lzD0MpgvRO20oedLEUTVzwMRBNJWIgjqXosgKHwjLggUHoogqGkngmC4SFxbmIJYBIE6I3YA1JSIywugVALBt9R83wU9LjLa/POMx4HhhSNA94EjoO1zjgAxR46Ali84Aqa25AhYxpOgFnrmVYCA3kqAgJxagEC1jQCBcs/C1EO5FwECtVwFCAx0E1YQRN8FCCh6E1aZ1rKYCIsIkCmHQFMvyO5Xtd+k3a5ezAUAcCwECJW8WAoQ2tiLQICAnpUAoa29WAsQOreLjQChi7gIJdG0XRY7CQOyIwkDomIJAyUbCQM1J9IqQM2phIF69hIGxsqk5QTtLxIGdB2kNYd6cmlFAXMUMNjpZNNrSrgxXZQsDPknBgDBrwwAHV4xAMioGQC6u2EAmNAzA8DKXbhM6JErR4DQG0eAkDtHQKFvHEErXU74fNNKl1OOoHUsZxwBo8z5olG1ywVHUC3LJV9XqCPg6waIFUNA/y4/drab/JB0ucE46AgxDhXsMA4zFbHxYYCYFQDrZRgASkgYAGpIEQD3z8s9A0CRGQNADS8MAKt9YPMINeQMAEMcGQBkFgiAm+pliQC4r16e+FoA4pUtJ727XlYIkG+wl++bVlZY+rLBOKzIGeOg9YJxmKwrGx8GuLECYCruDAAlvDEArSGYIAD6MpgyAC0ymDEArSGYMwDty2DB5hFqWDIADBEwAMhcIQD6MlgjAPoy2PC1AETIlpP2ZbBDgNyXQbtfPQ4rk7y8bkf7LI7Jk5ag3bBOYRxnRSo+0AiMCKEdHiQiCBY4FUHUIQR7EQSTnIkg6hSCFxEELXMQQbDouTwFsGxHGQWTUMgoEFjKKCj+JKOg+ld5baD6SkZBXbWMghEbeaFhJs4yCjRe5H6Auq7yWgPqJqLAZQR3guJPOYI3AUA5VhMBQuWvpgKEXgurmQChklZzAUKvg9VCgNBJXi0FCF3TVSCJpj20WkkYkL2WMCBqI2Gg5FDCQM07aRWg5kjCQD2xhIGxjLScoD2RMKArldYc6tlLKwqYTMBAp6/oDik8+lgdJASw5BIGlB8lDHR7IWFAVSlhoN9PEgZm+VXCwIpWonZon1oEgfpGBIG0swiCui8iCAq/igsChd9EENR0F0Ew3Ju4tnQK1hMRRNWtp2IH0JrWM3F5ATSXQND+a7oxsuch6yWPA0PAEaB7xRG07ddrjgAxG46gLb8OOQKmdscRdBnXkaCW9sw6FiCg1wgQkJMIEKg2FSBQ7l6Yeig3EyBQy4sAgYEOwgqC6FyAgKKjsMpQSyEsIkBKDsGmft/9yjprX3cKd3WZnxvyhuYrYJLsZronqusKAJXJwya7EJJ25xtfze6QNeNz/XgBzuQmavgboe3+J3y/rN8PZquw+Bhq8vN0tqxHJqwJxYUBn/+dlNXRltJug87C2k1QvGlf37sxWPC3boyu0WbSjdFe2kzJeJR0MyMD0l7ezEkQhlyQIIy57AbhpnwTkCAUtCJBGHNNgrTbNxsyPzBmSIJAuyNBkBJ1g3DjvYm7Qbjp3hg6txBNyLLQm+1N2g3KN9qbr/eE46o8jZMsb0zVeYtwl5+run0Z9d8XU+UheZtwk32mt68ZdzKjMi+rehxGjxcWfnn8D8l82e4ft/eD8w/bx5vA769VDyHI+2T+vaxMCyMcx/4iLEzFADkWqlLB8fUO9bfne7eE4KRW5aR51Uty8gwphL84vakHqxLImuHaBLZzL5r/mKgs4rC6f/tMIGyXAUJ9nNchen2kNy9blJe14S/db+5Kibb8N60cC0E46ZMpyw+n/UVYmGYD5Fio5n6O7j+isLAstNIUXEu1OAVZMJTlb1VFvz/C1fdp5ITr7xTKGTf9qH4rClNZJi4cotZFuBuk1sUY9aP63dwakh8PkchYzCBdjCbpn8/XPx2qiFPtB8viXH7T+E6SPRY8zqKwAQatefTxqE2kj8hvJuPyWuRlGH97Prv/JaxiSxtrPaWaUG0t1Yx+h/lB9Xt5cvBojaaOTe03dXT+sgzrbK3H5JlqQ8lT/e4xNYWpwpx761DrFe0Mamdop/D7QJL7a3Yk6Voz6CRRO0IXy85vCx//ivS3xhzlpttpPaGHRm0IPTx+N/h8MvDt/fEBydV6QDuD2vnZKfx+7zNXkK+1eC4OtatzkfiNXJvNrq2d1rfZ8tU2zUbgd2XPTDRAO60bk7PVLkxO97uvzzzcArSey0qgdlpWBr+/+kz9vEUnBFp75aFRuysPj99cnaoyyXLz16dDI7laN2VnUNsnO4XfL5HcfzwqJgRao+ShUTskD4+6EPkJ5U5rk9wsasvkpvHbp/YMxsT/Pj2fbfE9TuuivERqM+Vl8nuqugmLeEevNK2VknLVDkpIjt6NU/s3IJ449YP8iHimQQzULg2imPfLlXsxWgyRYuFaDhJlIQtULK7H+NGqhzYn0bqPMCfTZhAFf4Afhd+hTaDbfY9CgS/qSeR5cB/Fg+T6WM0w1T7aRMFnecwfpWqhNoa9XpSNIuuXa5mGlyFSLFyHQaIsZLmGxf9oPzrqBSrYih4SFXTlcB72/DQ6fa9STvn63XI5Z+8CHQ/3o3qYZhdlM1Czi/PclwxvPaPLMKGM5zpQHSO6DWHg3XAfrouTvX2HOMYWa8yn5wAg1ptQH1MPM+qj0phS7UP/WO9N1ZQ9LKqaU+NUVQcAsd6w6vh6+FYdoca+suOCWO9VeW4PY8qTNS7UekgQ6z2nnaOHw7STaPyk65Ag1ptKJ00PZ+nk0dhL9zFBrPeWHqIextLDpHGV1mODWO8l7Rw9HKSdROMbHQcHsd4qulh6uEMXjb4MftXp/Z+NoYfds1Fo3J14oBDrXZ2c38PNyQQaF2c7UIj13s1K0cOx2TiMxqe5jxKM3qZ5iHq4NA+TxqRZjxaM3pXZOXrYMDuJxne5jxWM3nB5iHo4LQ+TxmI5jxeM3m65eXpYLzeRxob5jheM3o15qXqYMi+XxpsJxw9Gb8mk7B5OTEr/MGC3cb0P48dfO/jMaj+Am1iSTK3XIAowXYM4cn9ynIV5mZKso7Z4IbdQVy0kl/6s94voV9OEWV4LG95JW7yX6VUtxUulKIdeRCS71kpycDRqMQ6Ssz77v2GeG+J1zKWvDIHj2luGQHLzZ1+fWf8s05Jk3rUSLPlv6vJlgqT1WpZdzHIImnTdVc9U4qd65s6VSfIXYrLoVbWFZNmvfgtL4E53HWYmK40MJ8NapcFJsemXy88qk3CIDIFnN0iMQBRpGTwHkUncT5mPzvQU6ONLXESWs8kk9Wuype4V9dtyM2WSRepLr6otJId+9VtYcme6/2QxOSq0KGgKjRoFTzmAgJ3IJKfBojjX63BlnExfkuOUMKl7ynNxNX3lucjOahZ8wJRcempiBNe+QhjDrVcqX9z7AAmc5W2IDkaTOg2Y5+AvVRgxH4XGkPk4nMZMe6KXKvyZmktj09RkTremOsJLFaZNR6Txbjomp4Vjp3qpwq/xJI0541lOJ2Y9sEsVvsuerHFZ9mynp3KdyqUKY+XM17grJ4HTYrkP31KFv/IwaMyVh8LprKwnbqnCT9mTNS7Knu30To6DtVRhl1zpGofkylcMzC8NhQeypWosjy3X6XDEo7NU4WzkRI2jkTOdTsZ2PpYq/Is1V+NabMl7p1dxH3/tFVbFw6BxKh4Kp1GxnnntFc7EnqyxIvZsp/dwH2rtFabDw6BxGx4Kp81wnmDtFZbDTaCxH24GpxXxHVPtFY7Ey6ExJl4Spz8Rzqr2ClsipWncSDfvL0cTZ+GojipjilFYxKMfO38zfBWsT7efnlzvA7R/nc7xW9Kj0R9f6LkV/fyZOIJdStiPn2AjyNU7En5dmmA2iHn/jWkC2iGo/aVpgokR8/F70w/UH/8HNiLX2mB7AAA= */
[data-rk] .ju367v0 {
  align-items: flex-start;
}
[data-rk] .ju367v2 {
  align-items: flex-end;
}
[data-rk] .ju367v4 {
  align-items: center;
}
[data-rk] .ju367v6 {
  display: none;
}
[data-rk] .ju367v8 {
  display: block;
}
[data-rk] .ju367va {
  display: flex;
}
[data-rk] .ju367vc {
  display: inline;
}
[data-rk] .ju367ve {
  align-self: flex-start;
}
[data-rk] .ju367vf {
  align-self: flex-end;
}
[data-rk] .ju367vg {
  align-self: center;
}
[data-rk] .ju367vh {
  background-size: cover;
}
[data-rk] .ju367vi {
  border-radius: 1px;
}
[data-rk] .ju367vj {
  border-radius: 6px;
}
[data-rk] .ju367vk {
  border-radius: 10px;
}
[data-rk] .ju367vl {
  border-radius: 13px;
}
[data-rk] .ju367vm {
  border-radius: var(--rk-radii-actionButton);
}
[data-rk] .ju367vn {
  border-radius: var(--rk-radii-connectButton);
}
[data-rk] .ju367vo {
  border-radius: var(--rk-radii-menuButton);
}
[data-rk] .ju367vp {
  border-radius: var(--rk-radii-modal);
}
[data-rk] .ju367vq {
  border-radius: var(--rk-radii-modalMobile);
}
[data-rk] .ju367vr {
  border-radius: 25%;
}
[data-rk] .ju367vs {
  border-radius: 9999px;
}
[data-rk] .ju367vt {
  border-style: solid;
}
[data-rk] .ju367vu {
  border-width: 0px;
}
[data-rk] .ju367vv {
  border-width: 1px;
}
[data-rk] .ju367vw {
  border-width: 2px;
}
[data-rk] .ju367vx {
  border-width: 4px;
}
[data-rk] .ju367vy {
  cursor: pointer;
}
[data-rk] .ju367vz {
  cursor: none;
}
[data-rk] .ju367v10 {
  pointer-events: none;
}
[data-rk] .ju367v11 {
  pointer-events: all;
}
[data-rk] .ju367v12 {
  min-height: 8px;
}
[data-rk] .ju367v13 {
  min-height: 44px;
}
[data-rk] .ju367v14 {
  flex-direction: row;
}
[data-rk] .ju367v15 {
  flex-direction: column;
}
[data-rk] .ju367v16 {
  font-family: var(--rk-fonts-body);
}
[data-rk] .ju367v17 {
  font-size: 12px;
  line-height: 18px;
}
[data-rk] .ju367v18 {
  font-size: 13px;
  line-height: 18px;
}
[data-rk] .ju367v19 {
  font-size: 14px;
  line-height: 18px;
}
[data-rk] .ju367v1a {
  font-size: 16px;
  line-height: 20px;
}
[data-rk] .ju367v1b {
  font-size: 18px;
  line-height: 24px;
}
[data-rk] .ju367v1c {
  font-size: 20px;
  line-height: 24px;
}
[data-rk] .ju367v1d {
  font-size: 23px;
  line-height: 29px;
}
[data-rk] .ju367v1e {
  font-weight: 400;
}
[data-rk] .ju367v1f {
  font-weight: 500;
}
[data-rk] .ju367v1g {
  font-weight: 600;
}
[data-rk] .ju367v1h {
  font-weight: 700;
}
[data-rk] .ju367v1i {
  font-weight: 800;
}
[data-rk] .ju367v1j {
  gap: 0;
}
[data-rk] .ju367v1k {
  gap: 1px;
}
[data-rk] .ju367v1l {
  gap: 2px;
}
[data-rk] .ju367v1m {
  gap: 3px;
}
[data-rk] .ju367v1n {
  gap: 4px;
}
[data-rk] .ju367v1o {
  gap: 5px;
}
[data-rk] .ju367v1p {
  gap: 6px;
}
[data-rk] .ju367v1q {
  gap: 8px;
}
[data-rk] .ju367v1r {
  gap: 10px;
}
[data-rk] .ju367v1s {
  gap: 12px;
}
[data-rk] .ju367v1t {
  gap: 14px;
}
[data-rk] .ju367v1u {
  gap: 16px;
}
[data-rk] .ju367v1v {
  gap: 18px;
}
[data-rk] .ju367v1w {
  gap: 20px;
}
[data-rk] .ju367v1x {
  gap: 24px;
}
[data-rk] .ju367v1y {
  gap: 28px;
}
[data-rk] .ju367v1z {
  gap: 32px;
}
[data-rk] .ju367v20 {
  gap: 36px;
}
[data-rk] .ju367v21 {
  gap: 44px;
}
[data-rk] .ju367v22 {
  gap: 64px;
}
[data-rk] .ju367v23 {
  gap: -1px;
}
[data-rk] .ju367v24 {
  height: 1px;
}
[data-rk] .ju367v25 {
  height: 2px;
}
[data-rk] .ju367v26 {
  height: 4px;
}
[data-rk] .ju367v27 {
  height: 8px;
}
[data-rk] .ju367v28 {
  height: 12px;
}
[data-rk] .ju367v29 {
  height: 20px;
}
[data-rk] .ju367v2a {
  height: 24px;
}
[data-rk] .ju367v2b {
  height: 28px;
}
[data-rk] .ju367v2c {
  height: 30px;
}
[data-rk] .ju367v2d {
  height: 32px;
}
[data-rk] .ju367v2e {
  height: 34px;
}
[data-rk] .ju367v2f {
  height: 36px;
}
[data-rk] .ju367v2g {
  height: 40px;
}
[data-rk] .ju367v2h {
  height: 44px;
}
[data-rk] .ju367v2i {
  height: 48px;
}
[data-rk] .ju367v2j {
  height: 54px;
}
[data-rk] .ju367v2k {
  height: 60px;
}
[data-rk] .ju367v2l {
  height: 200px;
}
[data-rk] .ju367v2m {
  height: 100%;
}
[data-rk] .ju367v2n {
  height: -moz-max-content;
  height: max-content;
}
[data-rk] .ju367v2o {
  justify-content: flex-start;
}
[data-rk] .ju367v2p {
  justify-content: flex-end;
}
[data-rk] .ju367v2q {
  justify-content: center;
}
[data-rk] .ju367v2r {
  justify-content: space-between;
}
[data-rk] .ju367v2s {
  justify-content: space-around;
}
[data-rk] .ju367v2t {
  text-align: left;
}
[data-rk] .ju367v2u {
  text-align: center;
}
[data-rk] .ju367v2v {
  text-align: inherit;
}
[data-rk] .ju367v2w {
  margin-bottom: 0;
}
[data-rk] .ju367v2x {
  margin-bottom: 1px;
}
[data-rk] .ju367v2y {
  margin-bottom: 2px;
}
[data-rk] .ju367v2z {
  margin-bottom: 3px;
}
[data-rk] .ju367v30 {
  margin-bottom: 4px;
}
[data-rk] .ju367v31 {
  margin-bottom: 5px;
}
[data-rk] .ju367v32 {
  margin-bottom: 6px;
}
[data-rk] .ju367v33 {
  margin-bottom: 8px;
}
[data-rk] .ju367v34 {
  margin-bottom: 10px;
}
[data-rk] .ju367v35 {
  margin-bottom: 12px;
}
[data-rk] .ju367v36 {
  margin-bottom: 14px;
}
[data-rk] .ju367v37 {
  margin-bottom: 16px;
}
[data-rk] .ju367v38 {
  margin-bottom: 18px;
}
[data-rk] .ju367v39 {
  margin-bottom: 20px;
}
[data-rk] .ju367v3a {
  margin-bottom: 24px;
}
[data-rk] .ju367v3b {
  margin-bottom: 28px;
}
[data-rk] .ju367v3c {
  margin-bottom: 32px;
}
[data-rk] .ju367v3d {
  margin-bottom: 36px;
}
[data-rk] .ju367v3e {
  margin-bottom: 44px;
}
[data-rk] .ju367v3f {
  margin-bottom: 64px;
}
[data-rk] .ju367v3g {
  margin-bottom: -1px;
}
[data-rk] .ju367v3h {
  margin-left: 0;
}
[data-rk] .ju367v3i {
  margin-left: 1px;
}
[data-rk] .ju367v3j {
  margin-left: 2px;
}
[data-rk] .ju367v3k {
  margin-left: 3px;
}
[data-rk] .ju367v3l {
  margin-left: 4px;
}
[data-rk] .ju367v3m {
  margin-left: 5px;
}
[data-rk] .ju367v3n {
  margin-left: 6px;
}
[data-rk] .ju367v3o {
  margin-left: 8px;
}
[data-rk] .ju367v3p {
  margin-left: 10px;
}
[data-rk] .ju367v3q {
  margin-left: 12px;
}
[data-rk] .ju367v3r {
  margin-left: 14px;
}
[data-rk] .ju367v3s {
  margin-left: 16px;
}
[data-rk] .ju367v3t {
  margin-left: 18px;
}
[data-rk] .ju367v3u {
  margin-left: 20px;
}
[data-rk] .ju367v3v {
  margin-left: 24px;
}
[data-rk] .ju367v3w {
  margin-left: 28px;
}
[data-rk] .ju367v3x {
  margin-left: 32px;
}
[data-rk] .ju367v3y {
  margin-left: 36px;
}
[data-rk] .ju367v3z {
  margin-left: 44px;
}
[data-rk] .ju367v40 {
  margin-left: 64px;
}
[data-rk] .ju367v41 {
  margin-left: -1px;
}
[data-rk] .ju367v42 {
  margin-right: 0;
}
[data-rk] .ju367v43 {
  margin-right: 1px;
}
[data-rk] .ju367v44 {
  margin-right: 2px;
}
[data-rk] .ju367v45 {
  margin-right: 3px;
}
[data-rk] .ju367v46 {
  margin-right: 4px;
}
[data-rk] .ju367v47 {
  margin-right: 5px;
}
[data-rk] .ju367v48 {
  margin-right: 6px;
}
[data-rk] .ju367v49 {
  margin-right: 8px;
}
[data-rk] .ju367v4a {
  margin-right: 10px;
}
[data-rk] .ju367v4b {
  margin-right: 12px;
}
[data-rk] .ju367v4c {
  margin-right: 14px;
}
[data-rk] .ju367v4d {
  margin-right: 16px;
}
[data-rk] .ju367v4e {
  margin-right: 18px;
}
[data-rk] .ju367v4f {
  margin-right: 20px;
}
[data-rk] .ju367v4g {
  margin-right: 24px;
}
[data-rk] .ju367v4h {
  margin-right: 28px;
}
[data-rk] .ju367v4i {
  margin-right: 32px;
}
[data-rk] .ju367v4j {
  margin-right: 36px;
}
[data-rk] .ju367v4k {
  margin-right: 44px;
}
[data-rk] .ju367v4l {
  margin-right: 64px;
}
[data-rk] .ju367v4m {
  margin-right: -1px;
}
[data-rk] .ju367v4n {
  margin-top: 0;
}
[data-rk] .ju367v4o {
  margin-top: 1px;
}
[data-rk] .ju367v4p {
  margin-top: 2px;
}
[data-rk] .ju367v4q {
  margin-top: 3px;
}
[data-rk] .ju367v4r {
  margin-top: 4px;
}
[data-rk] .ju367v4s {
  margin-top: 5px;
}
[data-rk] .ju367v4t {
  margin-top: 6px;
}
[data-rk] .ju367v4u {
  margin-top: 8px;
}
[data-rk] .ju367v4v {
  margin-top: 10px;
}
[data-rk] .ju367v4w {
  margin-top: 12px;
}
[data-rk] .ju367v4x {
  margin-top: 14px;
}
[data-rk] .ju367v4y {
  margin-top: 16px;
}
[data-rk] .ju367v4z {
  margin-top: 18px;
}
[data-rk] .ju367v50 {
  margin-top: 20px;
}
[data-rk] .ju367v51 {
  margin-top: 24px;
}
[data-rk] .ju367v52 {
  margin-top: 28px;
}
[data-rk] .ju367v53 {
  margin-top: 32px;
}
[data-rk] .ju367v54 {
  margin-top: 36px;
}
[data-rk] .ju367v55 {
  margin-top: 44px;
}
[data-rk] .ju367v56 {
  margin-top: 64px;
}
[data-rk] .ju367v57 {
  margin-top: -1px;
}
[data-rk] .ju367v58 {
  max-width: 1px;
}
[data-rk] .ju367v59 {
  max-width: 2px;
}
[data-rk] .ju367v5a {
  max-width: 4px;
}
[data-rk] .ju367v5b {
  max-width: 8px;
}
[data-rk] .ju367v5c {
  max-width: 12px;
}
[data-rk] .ju367v5d {
  max-width: 20px;
}
[data-rk] .ju367v5e {
  max-width: 24px;
}
[data-rk] .ju367v5f {
  max-width: 28px;
}
[data-rk] .ju367v5g {
  max-width: 30px;
}
[data-rk] .ju367v5h {
  max-width: 32px;
}
[data-rk] .ju367v5i {
  max-width: 34px;
}
[data-rk] .ju367v5j {
  max-width: 36px;
}
[data-rk] .ju367v5k {
  max-width: 40px;
}
[data-rk] .ju367v5l {
  max-width: 44px;
}
[data-rk] .ju367v5m {
  max-width: 48px;
}
[data-rk] .ju367v5n {
  max-width: 54px;
}
[data-rk] .ju367v5o {
  max-width: 60px;
}
[data-rk] .ju367v5p {
  max-width: 200px;
}
[data-rk] .ju367v5q {
  max-width: 100%;
}
[data-rk] .ju367v5r {
  max-width: -moz-max-content;
  max-width: max-content;
}
[data-rk] .ju367v5s {
  min-width: 1px;
}
[data-rk] .ju367v5t {
  min-width: 2px;
}
[data-rk] .ju367v5u {
  min-width: 4px;
}
[data-rk] .ju367v5v {
  min-width: 8px;
}
[data-rk] .ju367v5w {
  min-width: 12px;
}
[data-rk] .ju367v5x {
  min-width: 20px;
}
[data-rk] .ju367v5y {
  min-width: 24px;
}
[data-rk] .ju367v5z {
  min-width: 28px;
}
[data-rk] .ju367v60 {
  min-width: 30px;
}
[data-rk] .ju367v61 {
  min-width: 32px;
}
[data-rk] .ju367v62 {
  min-width: 34px;
}
[data-rk] .ju367v63 {
  min-width: 36px;
}
[data-rk] .ju367v64 {
  min-width: 40px;
}
[data-rk] .ju367v65 {
  min-width: 44px;
}
[data-rk] .ju367v66 {
  min-width: 48px;
}
[data-rk] .ju367v67 {
  min-width: 54px;
}
[data-rk] .ju367v68 {
  min-width: 60px;
}
[data-rk] .ju367v69 {
  min-width: 200px;
}
[data-rk] .ju367v6a {
  min-width: 100%;
}
[data-rk] .ju367v6b {
  min-width: -moz-max-content;
  min-width: max-content;
}
[data-rk] .ju367v6c {
  overflow: hidden;
}
[data-rk] .ju367v6d {
  padding-bottom: 0;
}
[data-rk] .ju367v6e {
  padding-bottom: 1px;
}
[data-rk] .ju367v6f {
  padding-bottom: 2px;
}
[data-rk] .ju367v6g {
  padding-bottom: 3px;
}
[data-rk] .ju367v6h {
  padding-bottom: 4px;
}
[data-rk] .ju367v6i {
  padding-bottom: 5px;
}
[data-rk] .ju367v6j {
  padding-bottom: 6px;
}
[data-rk] .ju367v6k {
  padding-bottom: 8px;
}
[data-rk] .ju367v6l {
  padding-bottom: 10px;
}
[data-rk] .ju367v6m {
  padding-bottom: 12px;
}
[data-rk] .ju367v6n {
  padding-bottom: 14px;
}
[data-rk] .ju367v6o {
  padding-bottom: 16px;
}
[data-rk] .ju367v6p {
  padding-bottom: 18px;
}
[data-rk] .ju367v6q {
  padding-bottom: 20px;
}
[data-rk] .ju367v6r {
  padding-bottom: 24px;
}
[data-rk] .ju367v6s {
  padding-bottom: 28px;
}
[data-rk] .ju367v6t {
  padding-bottom: 32px;
}
[data-rk] .ju367v6u {
  padding-bottom: 36px;
}
[data-rk] .ju367v6v {
  padding-bottom: 44px;
}
[data-rk] .ju367v6w {
  padding-bottom: 64px;
}
[data-rk] .ju367v6x {
  padding-bottom: -1px;
}
[data-rk] .ju367v6y {
  padding-left: 0;
}
[data-rk] .ju367v6z {
  padding-left: 1px;
}
[data-rk] .ju367v70 {
  padding-left: 2px;
}
[data-rk] .ju367v71 {
  padding-left: 3px;
}
[data-rk] .ju367v72 {
  padding-left: 4px;
}
[data-rk] .ju367v73 {
  padding-left: 5px;
}
[data-rk] .ju367v74 {
  padding-left: 6px;
}
[data-rk] .ju367v75 {
  padding-left: 8px;
}
[data-rk] .ju367v76 {
  padding-left: 10px;
}
[data-rk] .ju367v77 {
  padding-left: 12px;
}
[data-rk] .ju367v78 {
  padding-left: 14px;
}
[data-rk] .ju367v79 {
  padding-left: 16px;
}
[data-rk] .ju367v7a {
  padding-left: 18px;
}
[data-rk] .ju367v7b {
  padding-left: 20px;
}
[data-rk] .ju367v7c {
  padding-left: 24px;
}
[data-rk] .ju367v7d {
  padding-left: 28px;
}
[data-rk] .ju367v7e {
  padding-left: 32px;
}
[data-rk] .ju367v7f {
  padding-left: 36px;
}
[data-rk] .ju367v7g {
  padding-left: 44px;
}
[data-rk] .ju367v7h {
  padding-left: 64px;
}
[data-rk] .ju367v7i {
  padding-left: -1px;
}
[data-rk] .ju367v7j {
  padding-right: 0;
}
[data-rk] .ju367v7k {
  padding-right: 1px;
}
[data-rk] .ju367v7l {
  padding-right: 2px;
}
[data-rk] .ju367v7m {
  padding-right: 3px;
}
[data-rk] .ju367v7n {
  padding-right: 4px;
}
[data-rk] .ju367v7o {
  padding-right: 5px;
}
[data-rk] .ju367v7p {
  padding-right: 6px;
}
[data-rk] .ju367v7q {
  padding-right: 8px;
}
[data-rk] .ju367v7r {
  padding-right: 10px;
}
[data-rk] .ju367v7s {
  padding-right: 12px;
}
[data-rk] .ju367v7t {
  padding-right: 14px;
}
[data-rk] .ju367v7u {
  padding-right: 16px;
}
[data-rk] .ju367v7v {
  padding-right: 18px;
}
[data-rk] .ju367v7w {
  padding-right: 20px;
}
[data-rk] .ju367v7x {
  padding-right: 24px;
}
[data-rk] .ju367v7y {
  padding-right: 28px;
}
[data-rk] .ju367v7z {
  padding-right: 32px;
}
[data-rk] .ju367v80 {
  padding-right: 36px;
}
[data-rk] .ju367v81 {
  padding-right: 44px;
}
[data-rk] .ju367v82 {
  padding-right: 64px;
}
[data-rk] .ju367v83 {
  padding-right: -1px;
}
[data-rk] .ju367v84 {
  padding-top: 0;
}
[data-rk] .ju367v85 {
  padding-top: 1px;
}
[data-rk] .ju367v86 {
  padding-top: 2px;
}
[data-rk] .ju367v87 {
  padding-top: 3px;
}
[data-rk] .ju367v88 {
  padding-top: 4px;
}
[data-rk] .ju367v89 {
  padding-top: 5px;
}
[data-rk] .ju367v8a {
  padding-top: 6px;
}
[data-rk] .ju367v8b {
  padding-top: 8px;
}
[data-rk] .ju367v8c {
  padding-top: 10px;
}
[data-rk] .ju367v8d {
  padding-top: 12px;
}
[data-rk] .ju367v8e {
  padding-top: 14px;
}
[data-rk] .ju367v8f {
  padding-top: 16px;
}
[data-rk] .ju367v8g {
  padding-top: 18px;
}
[data-rk] .ju367v8h {
  padding-top: 20px;
}
[data-rk] .ju367v8i {
  padding-top: 24px;
}
[data-rk] .ju367v8j {
  padding-top: 28px;
}
[data-rk] .ju367v8k {
  padding-top: 32px;
}
[data-rk] .ju367v8l {
  padding-top: 36px;
}
[data-rk] .ju367v8m {
  padding-top: 44px;
}
[data-rk] .ju367v8n {
  padding-top: 64px;
}
[data-rk] .ju367v8o {
  padding-top: -1px;
}
[data-rk] .ju367v8p {
  position: absolute;
}
[data-rk] .ju367v8q {
  position: fixed;
}
[data-rk] .ju367v8r {
  position: relative;
}
[data-rk] .ju367v8s {
  -webkit-user-select: none;
}
[data-rk] .ju367v8t {
  right: 0;
}
[data-rk] .ju367v8u {
  transition: 0.125s ease;
}
[data-rk] .ju367v8v {
  transition: transform 0.125s ease;
}
[data-rk] .ju367v8w {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
[data-rk] .ju367v8x {
  width: 1px;
}
[data-rk] .ju367v8y {
  width: 2px;
}
[data-rk] .ju367v8z {
  width: 4px;
}
[data-rk] .ju367v90 {
  width: 8px;
}
[data-rk] .ju367v91 {
  width: 12px;
}
[data-rk] .ju367v92 {
  width: 20px;
}
[data-rk] .ju367v93 {
  width: 24px;
}
[data-rk] .ju367v94 {
  width: 28px;
}
[data-rk] .ju367v95 {
  width: 30px;
}
[data-rk] .ju367v96 {
  width: 32px;
}
[data-rk] .ju367v97 {
  width: 34px;
}
[data-rk] .ju367v98 {
  width: 36px;
}
[data-rk] .ju367v99 {
  width: 40px;
}
[data-rk] .ju367v9a {
  width: 44px;
}
[data-rk] .ju367v9b {
  width: 48px;
}
[data-rk] .ju367v9c {
  width: 54px;
}
[data-rk] .ju367v9d {
  width: 60px;
}
[data-rk] .ju367v9e {
  width: 200px;
}
[data-rk] .ju367v9f {
  width: 100%;
}
[data-rk] .ju367v9g {
  width: -moz-max-content;
  width: max-content;
}
[data-rk] .ju367v9h {
  -webkit-backdrop-filter: var(--rk-blurs-modalOverlay);
  backdrop-filter: var(--rk-blurs-modalOverlay);
}
[data-rk] .ju367v9i {
  background: var(--rk-colors-accentColor);
}
[data-rk] .ju367v9j:hover {
  background: var(--rk-colors-accentColor);
}
[data-rk] .ju367v9k:active {
  background: var(--rk-colors-accentColor);
}
[data-rk] .ju367v9l {
  background: var(--rk-colors-accentColorForeground);
}
[data-rk] .ju367v9m:hover {
  background: var(--rk-colors-accentColorForeground);
}
[data-rk] .ju367v9n:active {
  background: var(--rk-colors-accentColorForeground);
}
[data-rk] .ju367v9o {
  background: var(--rk-colors-actionButtonBorder);
}
[data-rk] .ju367v9p:hover {
  background: var(--rk-colors-actionButtonBorder);
}
[data-rk] .ju367v9q:active {
  background: var(--rk-colors-actionButtonBorder);
}
[data-rk] .ju367v9r {
  background: var(--rk-colors-actionButtonBorderMobile);
}
[data-rk] .ju367v9s:hover {
  background: var(--rk-colors-actionButtonBorderMobile);
}
[data-rk] .ju367v9t:active {
  background: var(--rk-colors-actionButtonBorderMobile);
}
[data-rk] .ju367v9u {
  background: var(--rk-colors-actionButtonSecondaryBackground);
}
[data-rk] .ju367v9v:hover {
  background: var(--rk-colors-actionButtonSecondaryBackground);
}
[data-rk] .ju367v9w:active {
  background: var(--rk-colors-actionButtonSecondaryBackground);
}
[data-rk] .ju367v9x {
  background: var(--rk-colors-closeButton);
}
[data-rk] .ju367v9y:hover {
  background: var(--rk-colors-closeButton);
}
[data-rk] .ju367v9z:active {
  background: var(--rk-colors-closeButton);
}
[data-rk] .ju367va0 {
  background: var(--rk-colors-closeButtonBackground);
}
[data-rk] .ju367va1:hover {
  background: var(--rk-colors-closeButtonBackground);
}
[data-rk] .ju367va2:active {
  background: var(--rk-colors-closeButtonBackground);
}
[data-rk] .ju367va3 {
  background: var(--rk-colors-connectButtonBackground);
}
[data-rk] .ju367va4:hover {
  background: var(--rk-colors-connectButtonBackground);
}
[data-rk] .ju367va5:active {
  background: var(--rk-colors-connectButtonBackground);
}
[data-rk] .ju367va6 {
  background: var(--rk-colors-connectButtonBackgroundError);
}
[data-rk] .ju367va7:hover {
  background: var(--rk-colors-connectButtonBackgroundError);
}
[data-rk] .ju367va8:active {
  background: var(--rk-colors-connectButtonBackgroundError);
}
[data-rk] .ju367va9 {
  background: var(--rk-colors-connectButtonInnerBackground);
}
[data-rk] .ju367vaa:hover {
  background: var(--rk-colors-connectButtonInnerBackground);
}
[data-rk] .ju367vab:active {
  background: var(--rk-colors-connectButtonInnerBackground);
}
[data-rk] .ju367vac {
  background: var(--rk-colors-connectButtonText);
}
[data-rk] .ju367vad:hover {
  background: var(--rk-colors-connectButtonText);
}
[data-rk] .ju367vae:active {
  background: var(--rk-colors-connectButtonText);
}
[data-rk] .ju367vaf {
  background: var(--rk-colors-connectButtonTextError);
}
[data-rk] .ju367vag:hover {
  background: var(--rk-colors-connectButtonTextError);
}
[data-rk] .ju367vah:active {
  background: var(--rk-colors-connectButtonTextError);
}
[data-rk] .ju367vai {
  background: var(--rk-colors-connectionIndicator);
}
[data-rk] .ju367vaj:hover {
  background: var(--rk-colors-connectionIndicator);
}
[data-rk] .ju367vak:active {
  background: var(--rk-colors-connectionIndicator);
}
[data-rk] .ju367val {
  background: var(--rk-colors-downloadBottomCardBackground);
}
[data-rk] .ju367vam:hover {
  background: var(--rk-colors-downloadBottomCardBackground);
}
[data-rk] .ju367van:active {
  background: var(--rk-colors-downloadBottomCardBackground);
}
[data-rk] .ju367vao {
  background: var(--rk-colors-downloadTopCardBackground);
}
[data-rk] .ju367vap:hover {
  background: var(--rk-colors-downloadTopCardBackground);
}
[data-rk] .ju367vaq:active {
  background: var(--rk-colors-downloadTopCardBackground);
}
[data-rk] .ju367var {
  background: var(--rk-colors-error);
}
[data-rk] .ju367vas:hover {
  background: var(--rk-colors-error);
}
[data-rk] .ju367vat:active {
  background: var(--rk-colors-error);
}
[data-rk] .ju367vau {
  background: var(--rk-colors-generalBorder);
}
[data-rk] .ju367vav:hover {
  background: var(--rk-colors-generalBorder);
}
[data-rk] .ju367vaw:active {
  background: var(--rk-colors-generalBorder);
}
[data-rk] .ju367vax {
  background: var(--rk-colors-generalBorderDim);
}
[data-rk] .ju367vay:hover {
  background: var(--rk-colors-generalBorderDim);
}
[data-rk] .ju367vaz:active {
  background: var(--rk-colors-generalBorderDim);
}
[data-rk] .ju367vb0 {
  background: var(--rk-colors-menuItemBackground);
}
[data-rk] .ju367vb1:hover {
  background: var(--rk-colors-menuItemBackground);
}
[data-rk] .ju367vb2:active {
  background: var(--rk-colors-menuItemBackground);
}
[data-rk] .ju367vb3 {
  background: var(--rk-colors-modalBackdrop);
}
[data-rk] .ju367vb4:hover {
  background: var(--rk-colors-modalBackdrop);
}
[data-rk] .ju367vb5:active {
  background: var(--rk-colors-modalBackdrop);
}
[data-rk] .ju367vb6 {
  background: var(--rk-colors-modalBackground);
}
[data-rk] .ju367vb7:hover {
  background: var(--rk-colors-modalBackground);
}
[data-rk] .ju367vb8:active {
  background: var(--rk-colors-modalBackground);
}
[data-rk] .ju367vb9 {
  background: var(--rk-colors-modalBorder);
}
[data-rk] .ju367vba:hover {
  background: var(--rk-colors-modalBorder);
}
[data-rk] .ju367vbb:active {
  background: var(--rk-colors-modalBorder);
}
[data-rk] .ju367vbc {
  background: var(--rk-colors-modalText);
}
[data-rk] .ju367vbd:hover {
  background: var(--rk-colors-modalText);
}
[data-rk] .ju367vbe:active {
  background: var(--rk-colors-modalText);
}
[data-rk] .ju367vbf {
  background: var(--rk-colors-modalTextDim);
}
[data-rk] .ju367vbg:hover {
  background: var(--rk-colors-modalTextDim);
}
[data-rk] .ju367vbh:active {
  background: var(--rk-colors-modalTextDim);
}
[data-rk] .ju367vbi {
  background: var(--rk-colors-modalTextSecondary);
}
[data-rk] .ju367vbj:hover {
  background: var(--rk-colors-modalTextSecondary);
}
[data-rk] .ju367vbk:active {
  background: var(--rk-colors-modalTextSecondary);
}
[data-rk] .ju367vbl {
  background: var(--rk-colors-profileAction);
}
[data-rk] .ju367vbm:hover {
  background: var(--rk-colors-profileAction);
}
[data-rk] .ju367vbn:active {
  background: var(--rk-colors-profileAction);
}
[data-rk] .ju367vbo {
  background: var(--rk-colors-profileActionHover);
}
[data-rk] .ju367vbp:hover {
  background: var(--rk-colors-profileActionHover);
}
[data-rk] .ju367vbq:active {
  background: var(--rk-colors-profileActionHover);
}
[data-rk] .ju367vbr {
  background: var(--rk-colors-profileForeground);
}
[data-rk] .ju367vbs:hover {
  background: var(--rk-colors-profileForeground);
}
[data-rk] .ju367vbt:active {
  background: var(--rk-colors-profileForeground);
}
[data-rk] .ju367vbu {
  background: var(--rk-colors-selectedOptionBorder);
}
[data-rk] .ju367vbv:hover {
  background: var(--rk-colors-selectedOptionBorder);
}
[data-rk] .ju367vbw:active {
  background: var(--rk-colors-selectedOptionBorder);
}
[data-rk] .ju367vbx {
  background: var(--rk-colors-standby);
}
[data-rk] .ju367vby:hover {
  background: var(--rk-colors-standby);
}
[data-rk] .ju367vbz:active {
  background: var(--rk-colors-standby);
}
[data-rk] .ju367vc0 {
  border-color: var(--rk-colors-accentColor);
}
[data-rk] .ju367vc1:hover {
  border-color: var(--rk-colors-accentColor);
}
[data-rk] .ju367vc2:active {
  border-color: var(--rk-colors-accentColor);
}
[data-rk] .ju367vc3 {
  border-color: var(--rk-colors-accentColorForeground);
}
[data-rk] .ju367vc4:hover {
  border-color: var(--rk-colors-accentColorForeground);
}
[data-rk] .ju367vc5:active {
  border-color: var(--rk-colors-accentColorForeground);
}
[data-rk] .ju367vc6 {
  border-color: var(--rk-colors-actionButtonBorder);
}
[data-rk] .ju367vc7:hover {
  border-color: var(--rk-colors-actionButtonBorder);
}
[data-rk] .ju367vc8:active {
  border-color: var(--rk-colors-actionButtonBorder);
}
[data-rk] .ju367vc9 {
  border-color: var(--rk-colors-actionButtonBorderMobile);
}
[data-rk] .ju367vca:hover {
  border-color: var(--rk-colors-actionButtonBorderMobile);
}
[data-rk] .ju367vcb:active {
  border-color: var(--rk-colors-actionButtonBorderMobile);
}
[data-rk] .ju367vcc {
  border-color: var(--rk-colors-actionButtonSecondaryBackground);
}
[data-rk] .ju367vcd:hover {
  border-color: var(--rk-colors-actionButtonSecondaryBackground);
}
[data-rk] .ju367vce:active {
  border-color: var(--rk-colors-actionButtonSecondaryBackground);
}
[data-rk] .ju367vcf {
  border-color: var(--rk-colors-closeButton);
}
[data-rk] .ju367vcg:hover {
  border-color: var(--rk-colors-closeButton);
}
[data-rk] .ju367vch:active {
  border-color: var(--rk-colors-closeButton);
}
[data-rk] .ju367vci {
  border-color: var(--rk-colors-closeButtonBackground);
}
[data-rk] .ju367vcj:hover {
  border-color: var(--rk-colors-closeButtonBackground);
}
[data-rk] .ju367vck:active {
  border-color: var(--rk-colors-closeButtonBackground);
}
[data-rk] .ju367vcl {
  border-color: var(--rk-colors-connectButtonBackground);
}
[data-rk] .ju367vcm:hover {
  border-color: var(--rk-colors-connectButtonBackground);
}
[data-rk] .ju367vcn:active {
  border-color: var(--rk-colors-connectButtonBackground);
}
[data-rk] .ju367vco {
  border-color: var(--rk-colors-connectButtonBackgroundError);
}
[data-rk] .ju367vcp:hover {
  border-color: var(--rk-colors-connectButtonBackgroundError);
}
[data-rk] .ju367vcq:active {
  border-color: var(--rk-colors-connectButtonBackgroundError);
}
[data-rk] .ju367vcr {
  border-color: var(--rk-colors-connectButtonInnerBackground);
}
[data-rk] .ju367vcs:hover {
  border-color: var(--rk-colors-connectButtonInnerBackground);
}
[data-rk] .ju367vct:active {
  border-color: var(--rk-colors-connectButtonInnerBackground);
}
[data-rk] .ju367vcu {
  border-color: var(--rk-colors-connectButtonText);
}
[data-rk] .ju367vcv:hover {
  border-color: var(--rk-colors-connectButtonText);
}
[data-rk] .ju367vcw:active {
  border-color: var(--rk-colors-connectButtonText);
}
[data-rk] .ju367vcx {
  border-color: var(--rk-colors-connectButtonTextError);
}
[data-rk] .ju367vcy:hover {
  border-color: var(--rk-colors-connectButtonTextError);
}
[data-rk] .ju367vcz:active {
  border-color: var(--rk-colors-connectButtonTextError);
}
[data-rk] .ju367vd0 {
  border-color: var(--rk-colors-connectionIndicator);
}
[data-rk] .ju367vd1:hover {
  border-color: var(--rk-colors-connectionIndicator);
}
[data-rk] .ju367vd2:active {
  border-color: var(--rk-colors-connectionIndicator);
}
[data-rk] .ju367vd3 {
  border-color: var(--rk-colors-downloadBottomCardBackground);
}
[data-rk] .ju367vd4:hover {
  border-color: var(--rk-colors-downloadBottomCardBackground);
}
[data-rk] .ju367vd5:active {
  border-color: var(--rk-colors-downloadBottomCardBackground);
}
[data-rk] .ju367vd6 {
  border-color: var(--rk-colors-downloadTopCardBackground);
}
[data-rk] .ju367vd7:hover {
  border-color: var(--rk-colors-downloadTopCardBackground);
}
[data-rk] .ju367vd8:active {
  border-color: var(--rk-colors-downloadTopCardBackground);
}
[data-rk] .ju367vd9 {
  border-color: var(--rk-colors-error);
}
[data-rk] .ju367vda:hover {
  border-color: var(--rk-colors-error);
}
[data-rk] .ju367vdb:active {
  border-color: var(--rk-colors-error);
}
[data-rk] .ju367vdc {
  border-color: var(--rk-colors-generalBorder);
}
[data-rk] .ju367vdd:hover {
  border-color: var(--rk-colors-generalBorder);
}
[data-rk] .ju367vde:active {
  border-color: var(--rk-colors-generalBorder);
}
[data-rk] .ju367vdf {
  border-color: var(--rk-colors-generalBorderDim);
}
[data-rk] .ju367vdg:hover {
  border-color: var(--rk-colors-generalBorderDim);
}
[data-rk] .ju367vdh:active {
  border-color: var(--rk-colors-generalBorderDim);
}
[data-rk] .ju367vdi {
  border-color: var(--rk-colors-menuItemBackground);
}
[data-rk] .ju367vdj:hover {
  border-color: var(--rk-colors-menuItemBackground);
}
[data-rk] .ju367vdk:active {
  border-color: var(--rk-colors-menuItemBackground);
}
[data-rk] .ju367vdl {
  border-color: var(--rk-colors-modalBackdrop);
}
[data-rk] .ju367vdm:hover {
  border-color: var(--rk-colors-modalBackdrop);
}
[data-rk] .ju367vdn:active {
  border-color: var(--rk-colors-modalBackdrop);
}
[data-rk] .ju367vdo {
  border-color: var(--rk-colors-modalBackground);
}
[data-rk] .ju367vdp:hover {
  border-color: var(--rk-colors-modalBackground);
}
[data-rk] .ju367vdq:active {
  border-color: var(--rk-colors-modalBackground);
}
[data-rk] .ju367vdr {
  border-color: var(--rk-colors-modalBorder);
}
[data-rk] .ju367vds:hover {
  border-color: var(--rk-colors-modalBorder);
}
[data-rk] .ju367vdt:active {
  border-color: var(--rk-colors-modalBorder);
}
[data-rk] .ju367vdu {
  border-color: var(--rk-colors-modalText);
}
[data-rk] .ju367vdv:hover {
  border-color: var(--rk-colors-modalText);
}
[data-rk] .ju367vdw:active {
  border-color: var(--rk-colors-modalText);
}
[data-rk] .ju367vdx {
  border-color: var(--rk-colors-modalTextDim);
}
[data-rk] .ju367vdy:hover {
  border-color: var(--rk-colors-modalTextDim);
}
[data-rk] .ju367vdz:active {
  border-color: var(--rk-colors-modalTextDim);
}
[data-rk] .ju367ve0 {
  border-color: var(--rk-colors-modalTextSecondary);
}
[data-rk] .ju367ve1:hover {
  border-color: var(--rk-colors-modalTextSecondary);
}
[data-rk] .ju367ve2:active {
  border-color: var(--rk-colors-modalTextSecondary);
}
[data-rk] .ju367ve3 {
  border-color: var(--rk-colors-profileAction);
}
[data-rk] .ju367ve4:hover {
  border-color: var(--rk-colors-profileAction);
}
[data-rk] .ju367ve5:active {
  border-color: var(--rk-colors-profileAction);
}
[data-rk] .ju367ve6 {
  border-color: var(--rk-colors-profileActionHover);
}
[data-rk] .ju367ve7:hover {
  border-color: var(--rk-colors-profileActionHover);
}
[data-rk] .ju367ve8:active {
  border-color: var(--rk-colors-profileActionHover);
}
[data-rk] .ju367ve9 {
  border-color: var(--rk-colors-profileForeground);
}
[data-rk] .ju367vea:hover {
  border-color: var(--rk-colors-profileForeground);
}
[data-rk] .ju367veb:active {
  border-color: var(--rk-colors-profileForeground);
}
[data-rk] .ju367vec {
  border-color: var(--rk-colors-selectedOptionBorder);
}
[data-rk] .ju367ved:hover {
  border-color: var(--rk-colors-selectedOptionBorder);
}
[data-rk] .ju367vee:active {
  border-color: var(--rk-colors-selectedOptionBorder);
}
[data-rk] .ju367vef {
  border-color: var(--rk-colors-standby);
}
[data-rk] .ju367veg:hover {
  border-color: var(--rk-colors-standby);
}
[data-rk] .ju367veh:active {
  border-color: var(--rk-colors-standby);
}
[data-rk] .ju367vei {
  box-shadow: var(--rk-shadows-connectButton);
}
[data-rk] .ju367vej:hover {
  box-shadow: var(--rk-shadows-connectButton);
}
[data-rk] .ju367vek:active {
  box-shadow: var(--rk-shadows-connectButton);
}
[data-rk] .ju367vel {
  box-shadow: var(--rk-shadows-dialog);
}
[data-rk] .ju367vem:hover {
  box-shadow: var(--rk-shadows-dialog);
}
[data-rk] .ju367ven:active {
  box-shadow: var(--rk-shadows-dialog);
}
[data-rk] .ju367veo {
  box-shadow: var(--rk-shadows-profileDetailsAction);
}
[data-rk] .ju367vep:hover {
  box-shadow: var(--rk-shadows-profileDetailsAction);
}
[data-rk] .ju367veq:active {
  box-shadow: var(--rk-shadows-profileDetailsAction);
}
[data-rk] .ju367ver {
  box-shadow: var(--rk-shadows-selectedOption);
}
[data-rk] .ju367ves:hover {
  box-shadow: var(--rk-shadows-selectedOption);
}
[data-rk] .ju367vet:active {
  box-shadow: var(--rk-shadows-selectedOption);
}
[data-rk] .ju367veu {
  box-shadow: var(--rk-shadows-selectedWallet);
}
[data-rk] .ju367vev:hover {
  box-shadow: var(--rk-shadows-selectedWallet);
}
[data-rk] .ju367vew:active {
  box-shadow: var(--rk-shadows-selectedWallet);
}
[data-rk] .ju367vex {
  box-shadow: var(--rk-shadows-walletLogo);
}
[data-rk] .ju367vey:hover {
  box-shadow: var(--rk-shadows-walletLogo);
}
[data-rk] .ju367vez:active {
  box-shadow: var(--rk-shadows-walletLogo);
}
[data-rk] .ju367vf0 {
  color: var(--rk-colors-accentColor);
}
[data-rk] .ju367vf1:hover {
  color: var(--rk-colors-accentColor);
}
[data-rk] .ju367vf2:active {
  color: var(--rk-colors-accentColor);
}
[data-rk] .ju367vf3 {
  color: var(--rk-colors-accentColorForeground);
}
[data-rk] .ju367vf4:hover {
  color: var(--rk-colors-accentColorForeground);
}
[data-rk] .ju367vf5:active {
  color: var(--rk-colors-accentColorForeground);
}
[data-rk] .ju367vf6 {
  color: var(--rk-colors-actionButtonBorder);
}
[data-rk] .ju367vf7:hover {
  color: var(--rk-colors-actionButtonBorder);
}
[data-rk] .ju367vf8:active {
  color: var(--rk-colors-actionButtonBorder);
}
[data-rk] .ju367vf9 {
  color: var(--rk-colors-actionButtonBorderMobile);
}
[data-rk] .ju367vfa:hover {
  color: var(--rk-colors-actionButtonBorderMobile);
}
[data-rk] .ju367vfb:active {
  color: var(--rk-colors-actionButtonBorderMobile);
}
[data-rk] .ju367vfc {
  color: var(--rk-colors-actionButtonSecondaryBackground);
}
[data-rk] .ju367vfd:hover {
  color: var(--rk-colors-actionButtonSecondaryBackground);
}
[data-rk] .ju367vfe:active {
  color: var(--rk-colors-actionButtonSecondaryBackground);
}
[data-rk] .ju367vff {
  color: var(--rk-colors-closeButton);
}
[data-rk] .ju367vfg:hover {
  color: var(--rk-colors-closeButton);
}
[data-rk] .ju367vfh:active {
  color: var(--rk-colors-closeButton);
}
[data-rk] .ju367vfi {
  color: var(--rk-colors-closeButtonBackground);
}
[data-rk] .ju367vfj:hover {
  color: var(--rk-colors-closeButtonBackground);
}
[data-rk] .ju367vfk:active {
  color: var(--rk-colors-closeButtonBackground);
}
[data-rk] .ju367vfl {
  color: var(--rk-colors-connectButtonBackground);
}
[data-rk] .ju367vfm:hover {
  color: var(--rk-colors-connectButtonBackground);
}
[data-rk] .ju367vfn:active {
  color: var(--rk-colors-connectButtonBackground);
}
[data-rk] .ju367vfo {
  color: var(--rk-colors-connectButtonBackgroundError);
}
[data-rk] .ju367vfp:hover {
  color: var(--rk-colors-connectButtonBackgroundError);
}
[data-rk] .ju367vfq:active {
  color: var(--rk-colors-connectButtonBackgroundError);
}
[data-rk] .ju367vfr {
  color: var(--rk-colors-connectButtonInnerBackground);
}
[data-rk] .ju367vfs:hover {
  color: var(--rk-colors-connectButtonInnerBackground);
}
[data-rk] .ju367vft:active {
  color: var(--rk-colors-connectButtonInnerBackground);
}
[data-rk] .ju367vfu {
  color: var(--rk-colors-connectButtonText);
}
[data-rk] .ju367vfv:hover {
  color: var(--rk-colors-connectButtonText);
}
[data-rk] .ju367vfw:active {
  color: var(--rk-colors-connectButtonText);
}
[data-rk] .ju367vfx {
  color: var(--rk-colors-connectButtonTextError);
}
[data-rk] .ju367vfy:hover {
  color: var(--rk-colors-connectButtonTextError);
}
[data-rk] .ju367vfz:active {
  color: var(--rk-colors-connectButtonTextError);
}
[data-rk] .ju367vg0 {
  color: var(--rk-colors-connectionIndicator);
}
[data-rk] .ju367vg1:hover {
  color: var(--rk-colors-connectionIndicator);
}
[data-rk] .ju367vg2:active {
  color: var(--rk-colors-connectionIndicator);
}
[data-rk] .ju367vg3 {
  color: var(--rk-colors-downloadBottomCardBackground);
}
[data-rk] .ju367vg4:hover {
  color: var(--rk-colors-downloadBottomCardBackground);
}
[data-rk] .ju367vg5:active {
  color: var(--rk-colors-downloadBottomCardBackground);
}
[data-rk] .ju367vg6 {
  color: var(--rk-colors-downloadTopCardBackground);
}
[data-rk] .ju367vg7:hover {
  color: var(--rk-colors-downloadTopCardBackground);
}
[data-rk] .ju367vg8:active {
  color: var(--rk-colors-downloadTopCardBackground);
}
[data-rk] .ju367vg9 {
  color: var(--rk-colors-error);
}
[data-rk] .ju367vga:hover {
  color: var(--rk-colors-error);
}
[data-rk] .ju367vgb:active {
  color: var(--rk-colors-error);
}
[data-rk] .ju367vgc {
  color: var(--rk-colors-generalBorder);
}
[data-rk] .ju367vgd:hover {
  color: var(--rk-colors-generalBorder);
}
[data-rk] .ju367vge:active {
  color: var(--rk-colors-generalBorder);
}
[data-rk] .ju367vgf {
  color: var(--rk-colors-generalBorderDim);
}
[data-rk] .ju367vgg:hover {
  color: var(--rk-colors-generalBorderDim);
}
[data-rk] .ju367vgh:active {
  color: var(--rk-colors-generalBorderDim);
}
[data-rk] .ju367vgi {
  color: var(--rk-colors-menuItemBackground);
}
[data-rk] .ju367vgj:hover {
  color: var(--rk-colors-menuItemBackground);
}
[data-rk] .ju367vgk:active {
  color: var(--rk-colors-menuItemBackground);
}
[data-rk] .ju367vgl {
  color: var(--rk-colors-modalBackdrop);
}
[data-rk] .ju367vgm:hover {
  color: var(--rk-colors-modalBackdrop);
}
[data-rk] .ju367vgn:active {
  color: var(--rk-colors-modalBackdrop);
}
[data-rk] .ju367vgo {
  color: var(--rk-colors-modalBackground);
}
[data-rk] .ju367vgp:hover {
  color: var(--rk-colors-modalBackground);
}
[data-rk] .ju367vgq:active {
  color: var(--rk-colors-modalBackground);
}
[data-rk] .ju367vgr {
  color: var(--rk-colors-modalBorder);
}
[data-rk] .ju367vgs:hover {
  color: var(--rk-colors-modalBorder);
}
[data-rk] .ju367vgt:active {
  color: var(--rk-colors-modalBorder);
}
[data-rk] .ju367vgu {
  color: var(--rk-colors-modalText);
}
[data-rk] .ju367vgv:hover {
  color: var(--rk-colors-modalText);
}
[data-rk] .ju367vgw:active {
  color: var(--rk-colors-modalText);
}
[data-rk] .ju367vgx {
  color: var(--rk-colors-modalTextDim);
}
[data-rk] .ju367vgy:hover {
  color: var(--rk-colors-modalTextDim);
}
[data-rk] .ju367vgz:active {
  color: var(--rk-colors-modalTextDim);
}
[data-rk] .ju367vh0 {
  color: var(--rk-colors-modalTextSecondary);
}
[data-rk] .ju367vh1:hover {
  color: var(--rk-colors-modalTextSecondary);
}
[data-rk] .ju367vh2:active {
  color: var(--rk-colors-modalTextSecondary);
}
[data-rk] .ju367vh3 {
  color: var(--rk-colors-profileAction);
}
[data-rk] .ju367vh4:hover {
  color: var(--rk-colors-profileAction);
}
[data-rk] .ju367vh5:active {
  color: var(--rk-colors-profileAction);
}
[data-rk] .ju367vh6 {
  color: var(--rk-colors-profileActionHover);
}
[data-rk] .ju367vh7:hover {
  color: var(--rk-colors-profileActionHover);
}
[data-rk] .ju367vh8:active {
  color: var(--rk-colors-profileActionHover);
}
[data-rk] .ju367vh9 {
  color: var(--rk-colors-profileForeground);
}
[data-rk] .ju367vha:hover {
  color: var(--rk-colors-profileForeground);
}
[data-rk] .ju367vhb:active {
  color: var(--rk-colors-profileForeground);
}
[data-rk] .ju367vhc {
  color: var(--rk-colors-selectedOptionBorder);
}
[data-rk] .ju367vhd:hover {
  color: var(--rk-colors-selectedOptionBorder);
}
[data-rk] .ju367vhe:active {
  color: var(--rk-colors-selectedOptionBorder);
}
[data-rk] .ju367vhf {
  color: var(--rk-colors-standby);
}
[data-rk] .ju367vhg:hover {
  color: var(--rk-colors-standby);
}
[data-rk] .ju367vhh:active {
  color: var(--rk-colors-standby);
}
@media screen and (min-width: 768px) {
  [data-rk] .ju367v1 {
    align-items: flex-start;
  }
  [data-rk] .ju367v3 {
    align-items: flex-end;
  }
  [data-rk] .ju367v5 {
    align-items: center;
  }
  [data-rk] .ju367v7 {
    display: none;
  }
  [data-rk] .ju367v9 {
    display: block;
  }
  [data-rk] .ju367vb {
    display: flex;
  }
  [data-rk] .ju367vd {
    display: inline;
  }
}

/* vanilla-extract-css-ns:src/css/touchableStyles.css.ts.vanilla.css?source=Ll8xMmNibzhpMywuXzEyY2JvOGkzOjphZnRlciB7CiAgLS1fMTJjYm84aTA6IDE7CiAgLS1fMTJjYm84aTE6IDE7Cn0KLl8xMmNibzhpMzpob3ZlciB7CiAgdHJhbnNmb3JtOiBzY2FsZSh2YXIoLS1fMTJjYm84aTApKTsKfQouXzEyY2JvOGkzOmFjdGl2ZSB7CiAgdHJhbnNmb3JtOiBzY2FsZSh2YXIoLS1fMTJjYm84aTEpKTsKfQouXzEyY2JvOGkzOmFjdGl2ZTo6YWZ0ZXIgewogIGNvbnRlbnQ6ICIiOwogIGJvdHRvbTogLTFweDsKICBkaXNwbGF5OiBibG9jazsKICBsZWZ0OiAtMXB4OwogIHBvc2l0aW9uOiBhYnNvbHV0ZTsKICByaWdodDogLTFweDsKICB0b3A6IC0xcHg7CiAgdHJhbnNmb3JtOiBzY2FsZShjYWxjKCgxIC8gdmFyKC0tXzEyY2JvOGkxKSkgKiB2YXIoLS1fMTJjYm84aTApKSk7Cn0KLl8xMmNibzhpNCwuXzEyY2JvOGk0OjphZnRlciB7CiAgLS1fMTJjYm84aTA6IDEuMDI1Owp9Ci5fMTJjYm84aTUsLl8xMmNibzhpNTo6YWZ0ZXIgewogIC0tXzEyY2JvOGkwOiAxLjE7Cn0KLl8xMmNibzhpNiwuXzEyY2JvOGk2OjphZnRlciB7CiAgLS1fMTJjYm84aTE6IDAuOTU7Cn0KLl8xMmNibzhpNywuXzEyY2JvOGk3OjphZnRlciB7CiAgLS1fMTJjYm84aTE6IDAuOTsKfQ== */
[data-rk] ._12cbo8i3,
[data-rk] ._12cbo8i3::after {
  --_12cbo8i0: 1;
  --_12cbo8i1: 1;
}
[data-rk] ._12cbo8i3:hover {
  transform: scale(var(--_12cbo8i0));
}
[data-rk] ._12cbo8i3:active {
  transform: scale(var(--_12cbo8i1));
}
[data-rk] ._12cbo8i3:active::after {
  content: "";
  bottom: -1px;
  display: block;
  left: -1px;
  position: absolute;
  right: -1px;
  top: -1px;
  transform: scale(calc((1 / var(--_12cbo8i1)) * var(--_12cbo8i0)));
}
[data-rk] ._12cbo8i4,
[data-rk] ._12cbo8i4::after {
  --_12cbo8i0: 1.025;
}
[data-rk] ._12cbo8i5,
[data-rk] ._12cbo8i5::after {
  --_12cbo8i0: 1.1;
}
[data-rk] ._12cbo8i6,
[data-rk] ._12cbo8i6::after {
  --_12cbo8i1: 0.95;
}
[data-rk] ._12cbo8i7,
[data-rk] ._12cbo8i7::after {
  --_12cbo8i1: 0.9;
}

/* vanilla-extract-css-ns:src/components/Icons/Icons.css.ts.vanilla.css?source=QGtleWZyYW1lcyBfMWx1dWxlNDEgewogIDAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpOwogIH0KICAxMDAlIHsKICAgIHRyYW5zZm9ybTogcm90YXRlKDM2MGRlZyk7CiAgfQp9Ci5fMWx1dWxlNDIgewogIGFuaW1hdGlvbjogXzFsdXVsZTQxIDNzIGluZmluaXRlIGxpbmVhcjsKfQouXzFsdXVsZTQzIHsKICBiYWNrZ3JvdW5kOiBjb25pYy1ncmFkaWVudChmcm9tIDE4MGRlZyBhdCA1MCUgNTAlLCByZ2JhKDcyLCAxNDYsIDI1NCwgMCkgMGRlZywgY3VycmVudENvbG9yIDI4Mi4wNGRlZywgcmdiYSg3MiwgMTQ2LCAyNTQsIDApIDMxOS44NmRlZywgcmdiYSg3MiwgMTQ2LCAyNTQsIDApIDM2MGRlZyk7CiAgaGVpZ2h0OiAyMXB4OwogIHdpZHRoOiAyMXB4Owp9 */
@keyframes _1luule41 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
[data-rk] ._1luule42 {
  animation: _1luule41 3s infinite linear;
}
[data-rk] ._1luule43 {
  background:
    conic-gradient(
      from 180deg at 50% 50%,
      rgba(72, 146, 254, 0) 0deg,
      currentColor 282.04deg,
      rgba(72, 146, 254, 0) 319.86deg,
      rgba(72, 146, 254, 0) 360deg);
  height: 21px;
  width: 21px;
}

/* vanilla-extract-css-ns:src/components/Dialog/Dialog.css.ts.vanilla.css?source=QGtleWZyYW1lcyBfOXBtNGtpMCB7CiAgMCUgewogICAgdHJhbnNmb3JtOiB0cmFuc2xhdGVZKDEwMCUpOwogIH0KICAxMDAlIHsKICAgIHRyYW5zZm9ybTogdHJhbnNsYXRlWSgwKTsKICB9Cn0KQGtleWZyYW1lcyBfOXBtNGtpMSB7CiAgMCUgewogICAgb3BhY2l0eTogMDsKICB9CiAgMTAwJSB7CiAgICBvcGFjaXR5OiAxOwogIH0KfQouXzlwbTRraTMgewogIGFuaW1hdGlvbjogXzlwbTRraTEgMTUwbXMgZWFzZTsKICBib3R0b206IC0yMDBweDsKICBsZWZ0OiAtMjAwcHg7CiAgcGFkZGluZzogMjAwcHg7CiAgcmlnaHQ6IC0yMDBweDsKICB0b3A6IC0yMDBweDsKICB0cmFuc2Zvcm06IHRyYW5zbGF0ZVooMCk7CiAgei1pbmRleDogMjE0NzQ4MzY0NjsKfQouXzlwbTRraTUgewogIGFuaW1hdGlvbjogXzlwbTRraTAgMzUwbXMgY3ViaWMtYmV6aWVyKC4xNSwxLjE1LDAuNiwxLjAwKSwgXzlwbTRraTEgMTUwbXMgZWFzZTsKICBtYXgtd2lkdGg6IDEwMHZ3Owp9 */
@keyframes _9pm4ki0 {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes _9pm4ki1 {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
[data-rk] ._9pm4ki3 {
  animation: _9pm4ki1 150ms ease;
  bottom: -200px;
  left: -200px;
  padding: 200px;
  right: -200px;
  top: -200px;
  transform: translateZ(0);
  z-index: 2147483646;
}
[data-rk] ._9pm4ki5 {
  animation: _9pm4ki0 350ms cubic-bezier(.15, 1.15, 0.6, 1.00), _9pm4ki1 150ms ease;
  max-width: 100vw;
}

/* vanilla-extract-css-ns:src/components/Dialog/DialogContent.css.ts.vanilla.css?source=Ll8xY2tqcG9rMSB7CiAgYm94LXNpemluZzogY29udGVudC1ib3g7CiAgbWF4LXdpZHRoOiAxMDB2dzsKICB3aWR0aDogMzYwcHg7Cn0KLl8xY2tqcG9rMiB7CiAgd2lkdGg6IDEwMHZ3Owp9Ci5fMWNranBvazMgewogIG1pbi13aWR0aDogNzIwcHg7CiAgd2lkdGg6IDcyMHB4Owp9Ci5fMWNranBvazQgewogIG1pbi13aWR0aDogMzY4cHg7CiAgd2lkdGg6IDM2OHB4Owp9Ci5fMWNranBvazYgewogIGJvcmRlci13aWR0aDogMHB4OwogIGJveC1zaXppbmc6IGJvcmRlci1ib3g7CiAgd2lkdGg6IDEwMHZ3Owp9CkBtZWRpYSBzY3JlZW4gYW5kIChtaW4td2lkdGg6IDc2OHB4KSB7CiAgLl8xY2tqcG9rMSB7CiAgICB3aWR0aDogMzYwcHg7CiAgfQogIC5fMWNranBvazIgewogICAgd2lkdGg6IDQ4MHB4OwogIH0KICAuXzFja2pwb2s0IHsKICAgIG1pbi13aWR0aDogMzY4cHg7CiAgICB3aWR0aDogMzY4cHg7CiAgfQp9CkBtZWRpYSBzY3JlZW4gYW5kIChtYXgtd2lkdGg6IDc2N3B4KSB7CiAgLl8xY2tqcG9rNyB7CiAgICBib3JkZXItYm90dG9tLWxlZnQtcmFkaXVzOiAwOwogICAgYm9yZGVyLWJvdHRvbS1yaWdodC1yYWRpdXM6IDA7CiAgICBtYXJnaW4tdG9wOiAtMjAwcHg7CiAgICBwYWRkaW5nLWJvdHRvbTogMjAwcHg7CiAgICB0b3A6IDIwMHB4OwogIH0KfQ== */
[data-rk] ._1ckjpok1 {
  box-sizing: content-box;
  max-width: 100vw;
  width: 360px;
}
[data-rk] ._1ckjpok2 {
  width: 100vw;
}
[data-rk] ._1ckjpok3 {
  min-width: 720px;
  width: 720px;
}
[data-rk] ._1ckjpok4 {
  min-width: 368px;
  width: 368px;
}
[data-rk] ._1ckjpok6 {
  border-width: 0px;
  box-sizing: border-box;
  width: 100vw;
}
@media screen and (min-width: 768px) {
  [data-rk] ._1ckjpok1 {
    width: 360px;
  }
  [data-rk] ._1ckjpok2 {
    width: 480px;
  }
  [data-rk] ._1ckjpok4 {
    min-width: 368px;
    width: 368px;
  }
}
@media screen and (max-width: 767px) {
  [data-rk] ._1ckjpok7 {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-top: -200px;
    padding-bottom: 200px;
    top: 200px;
  }
}

/* vanilla-extract-css-ns:src/components/MenuButton/MenuButton.css.ts.vanilla.css?source=LnY5aG9yYjA6aG92ZXIgewogIGJhY2tncm91bmQ6IHVuc2V0Owp9 */
[data-rk] .v9horb0:hover {
  background: unset;
}

/* vanilla-extract-css-ns:src/components/ChainModal/ChainModal.css.ts.vanilla.css?source=Ll8xOGRxdzl4MCB7CiAgbWF4LWhlaWdodDogNDU2cHg7CiAgb3ZlcmZsb3cteTogYXV0bzsKICBvdmVyZmxvdy14OiBoaWRkZW47Cn0KLl8xOGRxdzl4MSB7CiAgbWF4LWhlaWdodDogNDU2cHg7CiAgb3ZlcmZsb3cteTogYXV0bzsKICBvdmVyZmxvdy14OiBoaWRkZW47CiAgc2Nyb2xsYmFyLXdpZHRoOiBub25lOwp9Ci5fMThkcXc5eDE6Oi13ZWJraXQtc2Nyb2xsYmFyIHsKICBkaXNwbGF5OiBub25lOwp9 */
[data-rk] ._18dqw9x0 {
  max-height: 456px;
  overflow-y: auto;
  overflow-x: hidden;
}
[data-rk] ._18dqw9x1 {
  max-height: 456px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
[data-rk] ._18dqw9x1::-webkit-scrollbar {
  display: none;
}

/* vanilla-extract-css-ns:src/components/ModalSelection/ModalSelection.css.ts.vanilla.css?source=Lmc1a2wwbDAgewogIGJvcmRlci1jb2xvcjogdHJhbnNwYXJlbnQ7Cn0= */
[data-rk] .g5kl0l0 {
  border-color: transparent;
}

/* vanilla-extract-css-ns:src/components/ConnectOptions/DesktopOptions.css.ts.vanilla.css?source=Ll8xdnd0MGNnMCB7CiAgYmFja2dyb3VuZDogd2hpdGU7CiAgY29sb3I6IGJsYWNrOwp9Ci5fMXZ3dDBjZzIgewogIG1heC1oZWlnaHQ6IDQ1NHB4OwogIG92ZXJmbG93LXk6IGF1dG87Cn0KLl8xdnd0MGNnMyB7CiAgbWluLXdpZHRoOiAyODdweDsKfQouXzF2d3QwY2c0IHsKICBtaW4td2lkdGg6IDEwMCU7Cn0= */
[data-rk] ._1vwt0cg0 {
  background: white;
  color: black;
}
[data-rk] ._1vwt0cg2 {
  max-height: 454px;
  overflow-y: auto;
}
[data-rk] ._1vwt0cg3 {
  min-width: 287px;
}
[data-rk] ._1vwt0cg4 {
  min-width: 100%;
}

/* vanilla-extract-css-ns:src/components/ConnectOptions/MobileOptions.css.ts.vanilla.css?source=QGtleWZyYW1lcyBfMWFtMTQ0MTEgewogIDAlIHsKICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAwOwogIH0KICAxMDAlIHsKICAgIHN0cm9rZS1kYXNob2Zmc2V0OiAtMjgzOwogIH0KfQouXzFhbTE0NDEwIHsKICBvdmVyZmxvdzogYXV0bzsKICBzY3JvbGxiYXItd2lkdGg6IG5vbmU7CiAgdHJhbnNmb3JtOiB0cmFuc2xhdGVaKDApOwp9Ci5fMWFtMTQ0MTA6Oi13ZWJraXQtc2Nyb2xsYmFyIHsKICBkaXNwbGF5OiBub25lOwp9Ci5fMWFtMTQ0MTIgewogIGFuaW1hdGlvbjogXzFhbTE0NDExIDFzIGxpbmVhciBpbmZpbml0ZTsKICBzdHJva2UtZGFzaGFycmF5OiA5OCAxOTY7CiAgZmlsbDogbm9uZTsKICBzdHJva2UtbGluZWNhcDogcm91bmQ7CiAgc3Ryb2tlLXdpZHRoOiA0Owp9Ci5fMWFtMTQ0MTMgewogIHBvc2l0aW9uOiBhYnNvbHV0ZTsKfQ== */
@keyframes _1am14411 {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -283;
  }
}
[data-rk] ._1am14410 {
  overflow: auto;
  scrollbar-width: none;
  transform: translateZ(0);
}
[data-rk] ._1am14410::-webkit-scrollbar {
  display: none;
}
[data-rk] ._1am14412 {
  animation: _1am14411 1s linear infinite;
  stroke-dasharray: 98 196;
  fill: none;
  stroke-linecap: round;
  stroke-width: 4;
}
[data-rk] ._1am14413 {
  position: absolute;
}

/* vanilla-extract-css-ns:src/components/WalletButton/WalletButton.css.ts.vanilla.css?source=Ll8xeTJsbmZpMCB7CiAgYm9yZGVyOiAxcHggc29saWQgcmdiYSgxNiwgMjEsIDMxLCAwLjA2KTsKfQouXzF5MmxuZmkxIHsKICBtYXgtd2lkdGg6IGZpdC1jb250ZW50Owp9 */
[data-rk] ._1y2lnfi0 {
  border: 1px solid rgba(16, 21, 31, 0.06);
}
[data-rk] ._1y2lnfi1 {
  max-width: -moz-fit-content;
  max-width: fit-content;
}
/* src/styles/WelcomeModal.css (NUMARALANDIRMA SORUNU İÇİN KESİN ÇÖZÜM) */

.welcome-modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999; padding: 15px; box-sizing: border-box;
}

.welcome-modal-content {
  background-color: white; color: #34495e; padding: 30px; border-radius: 16px;
  max-width: 520px; width: 100%; text-align: center;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
  font-family: 'Poppins', sans-serif;
  animation: modal-fade-in 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  max-height: 90vh; overflow-y: auto;
}

@keyframes modal-fade-in {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.secure-icon { width: 55px; height: auto; margin-bottom: 15px; }
.welcome-modal-content h2 { font-size: 26px; font-weight: 700; margin: 0 0 12px 0; color: #2c3e50; }
.welcome-modal-content .intro-text { font-size: 15px; line-height: 1.6; margin-bottom: 25px; color: #555; }
.welcome-modal-content h3 { font-size: 22px; margin-top: 30px; margin-bottom: 20px; border-top: 1px solid #eaeaea; padding-top: 25px; }
.welcome-modal-content h4 { font-size: 16px; margin-top: 25px; margin-bottom: 10px; font-weight: 700; text-align: left; }

/* === NUMARALANDIRMA İÇİN KESİN ÇÖZÜM === */
.steps-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  counter-reset: welcome-modal-counter; /* Sayacı SIFIRLA ve özel bir isim ver */
}

.steps-list li {
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 18px;
  padding-left: 40px;
  position: relative;
  counter-increment: welcome-modal-counter 1; /* Sayacı HER ZAMAN 1 artır */
}

.steps-list li::before {
  content: counter(welcome-modal-counter); /* Özel sayaç ismini kullan */
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%; background-color: #3498db; color: white;
  font-weight: bold; display: flex; align-items: center; justify-content: center; font-size: 14px;
}
/* === /NUMARALANDIRMA ÇÖZÜMÜ === */

.steps-list strong { color: #2980b9; }

.important-note { font-size: 14px; background-color: #eaf5ff; border-left: 4px solid #3498db; padding: 12px 18px; border-radius: 8px; text-align: left; margin: 15px 0; }

.recommendations-section { margin-top: 30px; border-top: 1px solid #eaeaea; padding-top: 25px; text-align: center; }
.recommendation-item { background-color: #f8f9fa; border-radius: 12px; padding: 18px; margin-bottom: 18px; text-align: center; }
.recommendation-item h5 { font-size: 16px; font-weight: 700; margin: 0 0 10px 0; display: block; }
.recommendation-item p { font-size: 14px; line-height: 1.6; margin: 0; color: #555; }
.recommendation-item .recommendation-why { font-weight: bold; color: #34495e; }
.recommendation-subtitle { font-size: 18px; font-weight: 700; color: #3498db; margin: 5px 0 10px 0; }

.wallet-logos { display: flex; justify-content: center; align-items: center; gap: 30px; margin-top: 15px; padding: 10px 0; }
.wallet-logos img { height: auto; width: 50px; }
.wallet-logos .logo-trustwallet { width: 130px; }
.wallet-logos { transform: translateX(-14px); }

.modal-actions { margin-top: 30px; display: flex; flex-direction: column; gap: 18px; align-items: center; }
.checkbox-container { display: flex; align-items: center; justify-content: flex-start; gap: 12px; cursor: pointer; user-select: none; width: 170px; }
.checkbox-container .checkbox-label { font-size: 14px; color: #34495e; }
.checkbox-container input[type="checkbox"] { display: none; }
.checkbox-container .custom-checkbox {
  width: 22px; height: 22px; background-color: #ecf0f1; border: 2px solid #bdc3c7;
  border-radius: 6px; display: inline-block; position: relative; flex-shrink: 0;
  transition: all 0.2s ease-in-out;
}
.checkbox-container input[type="checkbox"]:checked + .custom-checkbox {
  background-color: #2ecc71; border-color: #27ae60;
  transform: scale(1.1);
}
.checkbox-container input[type="checkbox"]:checked + .custom-checkbox::after {
  content: ''; position: absolute; left: 7px; top: 2px;
  width: 6px; height: 12px; border: solid white;
  border-width: 0 3px 3px 0; transform: rotate(45deg);
}

.close-modal-btn { background-color: #27ae60; color: white; border: none; border-radius: 10px; padding: 14px 30px; font-size: 18px; font-weight: bold; cursor: pointer; transition: all 0.2s ease; width: 100%; max-width: 250px; }
.close-modal-btn:hover { background-color: #2ecc71; transform: translateY(-2px); box-shadow: 0 4px 15px rgba(46, 204, 113, 0.4); }
.close-modal-btn:disabled { background-color: #bdc3c7; cursor: not-allowed; transform: none; box-shadow: none; opacity: 0.8; }/* src/styles/CombinedSection.css */

/* --- TEMEL KART STİLLERİ --- */
.combined-hero-card .hero-content {
  padding-bottom: 2rem;
}

.hero-affiliation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 1.5rem;
  padding: 0.5rem 1rem;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  max-width: max-content;
  margin-left: auto;
  margin-right: auto;
  transition: background-color 0.3s, border-color 0.3s; /* Geçiş efekti eklendi */
}

.trustwallet-logo-container svg {
  width: 24px;
  height: 24px;
  color: #fff;
  transition: color 0.3s; /* Geçiş efekti eklendi */
}

.hero-affiliation span {
  font-size: 0.9rem;
  font-weight: 500;
  color: #e5e7eb;
  transition: color 0.3s; /* Geçiş efekti eklendi */
}

.hero-affiliation span strong {
  color: #ffffff;
  font-weight: 700;
}

/* --- YENİ KAYAN YAZI (SCROLLER/TICKER) STİLLERİ --- */

/* Genel animasyon */
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* Kayan yazıların genel dış kabı */
.scroller-container {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, white 20%, white 80%, transparent);
  mask-image: linear-gradient(to right, transparent, white 20%, white 80%, transparent);
}

/* Kayan yazıların animasyonlu iç kabı */
.scroller-content {
  display: flex;
  width: max-content;
  animation: scroll-left linear infinite;
}

/* 1. Strateji Açıklaması Kayan Yazısı */
.strategy-scroller {
  margin: 1rem 0;
  color: var(--text-secondary-dark);
}

.strategy-scroller .scroller-content {
  animation-duration: 45s;
}

.strategy-scroller p {
  margin: 0;
  padding: 0 2rem 0 0;
  white-space: nowrap;
}

/* 2. Kazananlar Listesi Kayan Yazısı */
.winners-ticker {
  margin-top: 2rem;
  padding: 1rem 0;
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: background-color 0.3s, border-color 0.3s; /* Geçiş efekti eklendi */
}

.winners-ticker .scroller-content {
  animation-duration: 180s;
}

.winner-ticker-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 1.5rem;
  white-space: nowrap;
}

.winner-address {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9rem;
  color: var(--text-secondary-dark); /* Koyu tema için varsayılan */
}

.winner-amount {
  font-weight: 600;
  font-size: 0.95rem;
  color: #4caf50;
  padding: 2px 6px;
  border-radius: 4px;
  background-color: rgba(76, 175, 80, 0.1);
}

.winner-amount.reward-amount {
  color: #ff9800;
  background-color: rgba(255, 152, 0, 0.1);
}

.scroller-container:hover .scroller-content {
  animation-play-state: paused;
}


/* =================================================================== */
/* ============= AÇIK TEMA (GÜNDÜZ MODU) İÇİN EKLENEN STİLLER ============= */
/* =================================================================== */

/* --- Açık Tema: "Powered by" Bölümü --- */
.light-theme .hero-affiliation {
  background-color: #e5e7eb; /* Daha belirgin bir açık gri arkaplan */
  border-color: #d1d5db; /* Arkaplana uygun bir çerçeve rengi */
}

.light-theme .trustwallet-logo-container svg {
  color: #1f2937; /* Koyu gri ikon rengi */
}

.light-theme .hero-affiliation span {
  color: #374151; /* Koyu gri metin rengi */
}

.light-theme .hero-affiliation span strong {
  color: #11182c; /* Siyaha yakın, daha vurgulu metin rengi */
}

/* --- Açık Tema: Strateji Açıklaması --- */
.light-theme .strategy-scroller {
    color: #4b5563; /* Açık temada okunabilir bir gri renk */
}


/* --- Açık Tema: Kazananlar Listesi --- */
.light-theme .winners-ticker {
  background-color: #f3f4f6; /* Çok açık gri bir arkaplan */
  border-color: #e5e7eb; /* Arkaplana uygun çerçeve rengi */
}

.light-theme .winner-address {
  color: #6b7280; /* Adresler için okunabilir bir gri tonu */
}

/* Miktar renkleri zaten belirgin, ancak arkaplanlarını biraz daha görünür yapabiliriz */
.light-theme .winner-amount {
  background-color: rgba(76, 175, 80, 0.15);
}

.light-theme .winner-amount.reward-amount {
  background-color: rgba(255, 152, 0, 0.15);
}

/* === YENİ EKLENEN KISIM: ANA "START MINING" BUTONUNU BÜYÜTME === */

/* Sadece ana sayfadaki "Start Mining" butonunu hedef alarak VoltageButton stilini eziyoruz. */
.hero-connect-button-wrapper .voltage-button button {
  /* Butonu büyütmek için padding ve font boyutunu artırıyoruz */
  padding: 0.9rem 2.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  
  /* Kenar kavisini diğer büyük butona benzetiyoruz */
  border-radius: 1rem; 
  
  /* Harf aralığı ile daha okunaklı hale getiriyoruz */
  letter-spacing: 0.04em;
  
  /* Mevcut kenarlık kalınlığını koruyalım veya biraz artıralım */
  border-width: 3px;
}

/* Büyüyen butona uyum sağlaması için SVG animasyonunun çerçevesini de ayarlıyoruz */
.hero-connect-button-wrapper .voltage-button svg {
    top: -0.8em;
    left: -0.3em;
    width: calc(100% + 0.6em);
    height: calc(100% + 1.6em);
}
/* Çekim Limiti Uyarısı İçin Sarı Renk Ayarı */
.user-feedback.show {
  background-color: rgba(255, 193, 7, 0.15); /* Sarı arkaplan, hafif transparan */
  color: #FFC107; /* Sarı metin rengi */
  border: 1px solid rgba(255, 193, 7, 0.4); /* Sarı kenarlık */
}/* src/styles/HeroStrategy.css */

/* === ANA BAŞLIK İÇİN BOŞLUK AYARI === */
.hero-headline {
  margin-top: 1rem;
  margin-bottom: 3rem;
}

/* === ADIM-ADIM SÜREÇ ALANI === */
.process-steps {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  width: 100%;
  max-width: 550px;
  margin: 1.5rem auto 2.5rem auto;
}
.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 0 1 auto;
  padding: 0 5px;
}

/* === YANAR DÖNER EFEKTLİ İKONLAR === */
.step-icon-wrapper {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.85rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border: 1px solid transparent;
}

/* HEM KOYU HEM AÇIK TEMA İÇİN ORTAK ANİMASYON VE RENKLER */
.step-icon-wrapper {
  color: #fff;
  background: linear-gradient(120deg, var(--logo-alpha), var(--logo-solano), var(--logo-alpha));
  background-size: 300% 300%;
  animation: shimmer 6s ease infinite;
}
.light-theme .step-icon-wrapper {
  box-shadow: 0 0 10px rgba(99, 102, 241, 0.3); /* Açık temada daha hafif parlama */
}
.dark-theme .step-icon-wrapper {
  box-shadow: 0 0 10px rgba(139, 92, 246, 0.4);
}

.step-icon-wrapper svg {
  width: 28px;
  height: 28px;
}

/* ORTAK HOVER EFEKTİ */
.step:hover .step-icon-wrapper {
  transform: translateY(-3px) scale(1.05);
  animation-duration: 4s;
}
.light-theme .step:hover .step-icon-wrapper {
  box-shadow: 0 0 20px rgba(99, 102, 241, 0.5);
}
.dark-theme .step:hover .step-icon-wrapper {
  box-shadow: 0 0 20px rgba(236, 72, 153, 0.6);
}
/* === İKON DÜZELTME SONU === */


/* Adım metinleri */
.step-text {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.3;
  color: inherit;
  opacity: 0.9;
}

/* Adımlar arası noktalı çizgi */
.step-connector {
  flex-grow: 1;
  height: 2px;
  margin-top: 28px;
  margin-left: 0.5rem;
  margin-right: 0.5rem;
  background-image: linear-gradient(to right, currentColor 33%, rgba(255,255,255,0) 0%);
  background-position: bottom;
  background-size: 4px 2px;
  background-repeat: repeat-x;
  opacity: 0.4;
}
.dark-theme .step-connector { color: rgba(255,255,255,0.4); }

/* === DAHA OKUNAKLI AÇIKLAMA METİNLERİ === */
.process-explanation { 
  margin: 0 auto 2.5rem auto; 
  text-align: center; 
  max-width: 650px;
}
.process-explanation h3 {
  font-size: clamp(1.4rem, 4vw, 1.6rem);
  font-weight: 700;
  margin: 0 0 1rem 0;
  color: inherit;
}
.process-explanation p { 
  font-size: clamp(1rem, 2.5vw, 1.1rem);
  line-height: 1.7; 
  margin: 0 auto;
  opacity: 1;
}
.light-theme .process-explanation p { color: #4b5563; }
.dark-theme .process-explanation p { color: #c7d2fe; }

/* === GÖZ ALICI VURGU BUTONLARI === */
.process-buttons { 
  display: flex; 
  justify-content: center; 
  gap: 1.5rem; 
  flex-wrap: wrap; 
  margin-bottom: 2.5rem; 
}
.highlight-button {
  padding: 1rem 2rem;
  font-size: 1.05rem;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  cursor: default;
  border-radius: 12px;
  border: 1px solid transparent;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  color: #ffffff; /* Yazı rengi her iki temada da beyaz olacak */
  background: linear-gradient(120deg, var(--logo-alpha), var(--logo-solano), var(--logo-alpha));
  background-size: 300% 300%;
  animation: shimmer 5s ease infinite;
}

.light-theme .highlight-button {
  box-shadow: 0 0 15px rgba(99, 102, 241, 0.4); /* Açık temada parlama */
}
.dark-theme .highlight-button { 
  box-shadow: 0 0 15px rgba(139, 92, 246, 0.4); /* Koyu temada parlama */
}

.highlight-button:hover { 
  transform: translateY(-3px) scale(1.03);
  animation-duration: 3s;
}
.light-theme .highlight-button:hover {
  box-shadow: 0 0 25px rgba(99, 102, 241, 0.6);
}
.dark-theme .highlight-button:hover {
  box-shadow: 0 0 25px rgba(236, 72, 153, 0.6);
}

@keyframes shimmer {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* === DÜZELTME SONU === */


/* Alt metin */
.process-footer-text { font-weight: 500; font-size: 0.9rem; opacity: 0.8; color: inherit; margin-top: 1rem; }

/* === MOBİL UYUMLULUK === */
@media (max-width: 600px) {
  .hero-headline { margin-bottom: 2rem; }
  .step-icon-wrapper { width: 48px; height: 48px; }
  .step-icon-wrapper svg { width: 22px; height: 22px; }
  .step-connector { margin-top: 24px; }
  .step-text { font-size: 0.75rem; }
}
@media (max-width: 480px) {
  .step-connector { display: none; }
  .process-steps { gap: 0.5rem; justify-content: space-evenly; }
}

/* === HERO'DAKİ BAĞLANTI BUTONU İÇİN SARMALAYICI === */
.hero-connect-button-wrapper {
  display: flex;
  justify-content: center;
  margin: 2.5rem 0 1.5rem 0;
}

.process-footer-text {
  margin-top: 0;
}/* src/styles/ReferralAnimation.css (YENİ DOSYA OLUŞTURUN) */

/* ==========================================================
   Referans Animasyon Stilleri
   Bu dosya, test.html'deki CSS kodlarını ve
   modal (popup) pencere stillerini içerir.
   ========================================================== */

/* === MODAL (POPUP) ÇERÇEVESİ === */
.referral-animation-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}

.referral-animation-overlay.visible {
  opacity: 1;
  visibility: visible;
}

/* Modal Kapatma Butonu (X) */
.referral-animation-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: background-color 0.2s, transform 0.2s;
  z-index: 2010; /* Konteynerin üzerinde kalması için */
}

.referral-animation-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}


/* === test.html'den Gelen Orijinal Stiller === */
/* Google Fonts import'u React'te genellikle index.html veya index.css'e eklenir,
   ancak burada olması bir sorun teşkil etmez. */


.animation-container-wrapper {
  font-family: 'Poppins', sans-serif;
  --bg-color: #10141f;
  --card-color: #1a202c;
  --border-color: #2d3748;
  --text-primary: #e2e8f0;
  --text-secondary: #a0aec0;
  --accent-green: #48bb78;
  --accent-blue: #4299e1;
  --accent-purple: #9f7aea;
  --accent-gold: #f6e05e;
  --shadow-color: rgba(0, 0, 0, .4);
}

/* KART / ÇERÇEVE */
.animation-container-wrapper .container {
  width: clamp(320px, 92vw, 390px);
  height: clamp(620px, 90vh, 800px); /* 92svh yerine 90vh kullandık */
  padding: 18px 14px;
  box-sizing: border-box;
  background: var(--card-color);
  border: 1px solid var(--border-color);
  border-radius: 20px;
  box-shadow: 0 10px 40px var(--shadow-color);
  display: flex;
  flex-direction: column;
  transform-origin: center center;
  will-change: transform;
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.referral-animation-overlay.visible .animation-container-wrapper .container {
    opacity: 1;
    transform: scale(1);
}

.animation-container-wrapper h2 {
  text-align: center;
  margin: 0 0 12px 0;
  font-size: clamp(18px, 3.8vw, 22px);
  font-weight: 700;
  flex-shrink: 0;
  color: var(--text-primary);
}

.animation-container-wrapper .animation-area {
  position: relative;
  flex: 1 1 auto;
  width: 100%
}

.animation-container-wrapper .stage-element {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding-bottom: 8px;
}

.animation-container-wrapper .stage-element.active {
  opacity: 1;
  visibility: visible
}

.animation-container-wrapper #step-text {
  position: absolute;
  top: 15px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  padding: 8px 10px;
  background: rgba(45, 55, 72, .6);
  border-radius: 10px;
  opacity: 0;
  transition: opacity .5s ease;
  z-index: 20;
  width: 92%;
  white-space: normal;
  color: var(--text-primary);
}

.animation-container-wrapper #step-text.visible {
  opacity: 1
}

/* STAGE-1 */
.animation-container-wrapper #stage-1 {
  gap: 22px
}

.animation-container-wrapper .ref-link-wrapper {
  display: flex;
  align-items: center;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding-block: 6px;
  padding-inline: 10px;
  width: calc(100% - 43px);
  margin-inline: auto;
  position: relative;
}

.animation-container-wrapper .ref-link-text {
  font-family: 'Roboto Mono', monospace;
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
  padding: 0 8px;
  line-height: 1.2;
}

.animation-container-wrapper #copy-button {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  background: var(--accent-blue);
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color .2s;
  flex-shrink: 0
}

.animation-container-wrapper #copy-button.copied {
  background: var(--accent-green)
}

.animation-container-wrapper #share-path {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 10px;
  color: var(--text-primary);
}

.animation-container-wrapper #share-icon {
  font-size: 34px;
  opacity: 0
}

.animation-container-wrapper #share-icon.animate {
  animation: share-move 1.5s cubic-bezier(.5, 0, .5, 1) forwards
}

@keyframes share-move {
  0% {
    transform: scale(.5) translateY(-40px);
    opacity: 0
  }
  40% {
    transform: scale(1.15) translateY(0);
    opacity: 1
  }
  100% {
    transform: scale(.5) translateY(35px);
    opacity: 0
  }
}

.animation-container-wrapper .actor {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px
}

.animation-container-wrapper .actor svg {
  width: 48px;
  height: 48px;
  fill: var(--text-secondary)
}

/* STAGE-2 */
.animation-container-wrapper .browser-window {
  width: 100%;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: 0 8px 30px var(--shadow-color);
  animation: fade-in-up .6s ease forwards
}

.animation-container-wrapper .browser-header {
  padding: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--border-color)
}

.animation-container-wrapper .browser-header span {
  width: 10px;
  height: 10px;
  border-radius: 50%
}

.animation-container-wrapper .browser-header .red {
  background: #ff5f56
}

.animation-container-wrapper .browser-header .yellow {
  background: #ffbd2e
}

.animation-container-wrapper .browser-header .green {
  background: #27c93f
}

.animation-container-wrapper .browser-address-bar {
  padding: 10px;
  font-family: 'Roboto Mono', monospace;
  font-size: 12px;
  background: #10141f;
  border-radius: 6px;
  margin: 10px;
  color: var(--text-secondary)
}

.animation-container-wrapper #address-bar-text {
  white-space: nowrap;
  overflow: hidden;
  border-right: 2px solid var(--text-secondary);
  animation: typing 2s steps(40, end), blink-caret .75s step-end infinite
}

@keyframes typing {
  from { width: 0 } to { width: 100% }
}

@keyframes blink-caret {
  from,
  to { border-color: transparent }
  50% { border-color: var(--text-secondary) }
}

/* STAGE-3 */
.animation-container-wrapper #friend-setup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 100%;
  animation: fade-in-up .6s ease forwards
}

.animation-container-wrapper .info-group {
  text-align: center;
  color: var(--text-primary);
}

.animation-container-wrapper .info-label {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 6px
}

.animation-container-wrapper .info-value {
  padding: 8px 12px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  font-size: 16px;
  font-weight: 700
}

.animation-container-wrapper .info-value.balance {
  color: var(--accent-blue)
}

.animation-container-wrapper .info-value.rate {
  color: var(--accent-purple)
}

.animation-container-wrapper .info-note {
  font-size: 11px;
  color: #4a5568;
  margin-top: 4px
}

/* STAGE-4 */
.animation-container-wrapper #stage-4 {
  gap: 10px;
  justify-content: space-around;
  padding: 8px 0
}

.animation-container-wrapper #reward-distribution {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  gap: 12px;
  color: var(--text-primary);
}

.animation-container-wrapper .reward-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  transform: scale(0);
  animation: pop-in .6s cubic-bezier(.175, .885, .32, 1.275) forwards
}

.animation-container-wrapper .reward-column:nth-child(1) {
  animation-delay: .2s
}

.animation-container-wrapper .reward-column:nth-child(2) {
  animation-delay: .4s
}

.animation-container-wrapper .reward-box {
  padding: 8px;
  background: var(--bg-color);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  text-align: center;
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center
}

.animation-container-wrapper .reward-label {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 500
}

.animation-container-wrapper .reward-calculation {
  font-family: 'Roboto Mono', monospace;
  font-size: 12px;
  color: var(--text-secondary);
  margin: 8px 0;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease
}

.animation-container-wrapper .reward-calculation.visible {
  opacity: 1;
  transform: translateY(0)
}

.animation-container-wrapper .reward-calculation span {
  color: var(--text-primary);
  font-weight: 700
}

.animation-container-wrapper .reward-amount {
  font-size: 15px;
  font-weight: 700
}

.animation-container-wrapper .your-reward .reward-amount {
  color: var(--accent-green)
}

.animation-container-wrapper .friend-reward .reward-amount {
  color: var(--accent-purple)
}

.animation-container-wrapper .reward-note {
  font-size: 11px;
  color: #4a5568;
  margin-top: 6px
}

.animation-container-wrapper #coin-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5
}

.animation-container-wrapper .coin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  background: var(--accent-gold);
  border-radius: 50%;
  box-shadow: 0 0 10px var(--accent-gold);
  opacity: 0
}

.animation-container-wrapper .coin.animate-to-friend {
  animation: coin-to-friend 1.5s forwards cubic-bezier(.2, .6, .7, 1)
}

.animation-container-wrapper .coin.animate-to-you {
  animation: coin-to-you 1.5s forwards cubic-bezier(.2, .6, .7, 1)
}

@keyframes coin-to-friend {
  from { transform: translate(-50%, -110px) scale(.5); opacity: 1 }
  to { transform: translate(-50%, 130px) scale(1); opacity: 0 }
}

@keyframes coin-to-you {
  from { transform: translate(-50%, -110px) scale(.5); opacity: 1 }
  to { transform: translate(-50%, -130px) scale(1); opacity: 0 }
}

/* El işaretçisi + buton animasyonları */
@keyframes fade-in-up {
  from { opacity: 0; transform: translateY(16px) }
  to { opacity: 1; transform: translateY(0) }
}

@keyframes pop-in {
  from { opacity: 0; transform: scale(.5) }
  to { opacity: 1; transform: scale(1) }
}

.animation-container-wrapper .hand-pointer {
  position: absolute;
  font-size: 28px;
  opacity: 0;
  transform: scale(.5);
  transition: all .5s cubic-bezier(.175, .885, .32, 1.275);
  z-index: 10
}

.animation-container-wrapper #copy-hand {
  right: 5px;
  top: 25px;
}

.animation-container-wrapper #mining-hand {
  left: 50%;
  transform: translateX(75px);
  bottom: 5px;
}

.animation-container-wrapper .hand-pointer.visible {
  opacity: 1;
  transform: scale(1)
}

.animation-container-wrapper .hand-pointer.clicked {
  animation: hand-click .4s ease
}

.animation-container-wrapper #start-button.clicked,
.animation-container-wrapper #copy-button.clicked {
  animation: button-click-effect .4s ease
}

@keyframes hand-click {
  50% { transform: scale(.9) translateY(4px) }
}

@keyframes button-click-effect {
  50% { transform: scale(.95) }
}

/* Orijinal Voltage Button Stilleri */
.animation-container-wrapper .voltage-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px
}

.animation-container-wrapper .voltage-button button {
  color: #fff;
  background: #0D1127;
  padding: .75rem 1.4rem;
  width: 210px;
  height: 50px;
  border-radius: 5rem;
  border: 3px solid #5978F3;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .075em;
  text-transform: uppercase;
  cursor: pointer
}

.animation-container-wrapper .voltage-button.active-animation svg,
.animation-container-wrapper .voltage-button.active-animation .dots {
  opacity: 1
}

.animation-container-wrapper .voltage-button svg {
  display: block;
  position: absolute;
  top: -.75em;
  left: -.25em;
  width: calc(100% + .5em);
  height: calc(100% + 1.5em);
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s;
  transition-delay: .1s
}

.animation-container-wrapper .voltage-button svg path {
  stroke-dasharray: 100;
  filter: url("#glow")
}

.animation-container-wrapper .voltage-button svg path.line-1 {
  stroke: #f6de8d;
  stroke-dashoffset: 0;
  animation: spark-1 3s linear infinite
}

.animation-container-wrapper .voltage-button svg path.line-2 {
  stroke: #6bfeff;
  stroke-dashoffset: 500;
  animation: spark-2 3s linear infinite
}

.animation-container-wrapper .voltage-button .dots {
  opacity: 0;
  transition: opacity .3s;
  transition-delay: .4s
}

.animation-container-wrapper .voltage-button .dots .dot {
  width: .5rem;
  height: .5rem;
  background: #fff;
  border-radius: 100%;
  position: absolute;
  opacity: 0
}

.animation-container-wrapper .voltage-button .dots .dot-1 {
  top: 0;
  left: 20%;
  animation: fly-up 3s linear infinite
}

.animation-container-wrapper .voltage-button .dots .dot-2 {
  top: 0;
  left: 55%;
  animation: fly-up 3s linear infinite;
  animation-delay: .5s
}

.animation-container-wrapper .voltage-button .dots .dot-3 {
  top: 0;
  left: 80%;
  animation: fly-up 3s linear infinite;
  animation-delay: 1s
}

.animation-container-wrapper .voltage-button .dots .dot-4 {
  bottom: 0;
  left: 30%;
  animation: fly-down 3s linear infinite;
  animation-delay: 2.5s
}

.animation-container-wrapper .voltage-button .dots .dot-5 {
  bottom: 0;
  left: 65%;
  animation: fly-down 3s linear infinite;
  animation-delay: 1.5s
}

@keyframes spark-1 { to { stroke-dashoffset: -1000 } }
@keyframes spark-2 { to { stroke-dashoffset: -500 } }
@keyframes fly-up {
  0% { opacity: 0; transform: translateY(0) scale(.2) }
  5% { opacity: 1; transform: translateY(-1rem) scale(.4) }
  10%, 100% { opacity: 0; transform: translateY(-2rem) scale(.2) }
}
@keyframes fly-down {
  0% { opacity: 0; transform: translateY(0) scale(.2) }
  5% { opacity: 1; transform: translateY(1rem) scale(.4) }
  10%, 100% { opacity: 0; transform: translateY(2rem) scale(.2) }
}

/* Responsive Düzenlemeler */
@media (max-width: 360px) {
  .animation-container-wrapper .container {
    padding: 14px 10px
  }
  .animation-container-wrapper .actor svg {
    width: 44px;
    height: 44px
  }
}/* =======================================
   ANALOG WHEEL COUNTER (ÖLÇEKLENEBİLİR NİHAİ VERSİYON)
   ======================================= */
.analog-wheel-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

.analog-wheel-counter {
  display: flex;
  gap: 4px;
  align-items: center; /* Dolar/nokta işaretini dikeyde ortalar */
}

/* Rakam olmayan karakterler için stil ($, .) */
.wheel-char {
  font-size: 2rem;
  font-weight: 500;
  color: #f0f0f0;
  opacity: 0.9;
}
.light-theme .wheel-char {
  color: #374151;
}

/* Her bir rakam tekerleğinin çerçevesi */
.digit-wheel {
  font-size: 1.6rem; /* ANA BOYUT buradan yönetilir */
  width: 0.9em;
  height: 1.5em; /* Yükseklik artık 'em' birimiyle orantılı */
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.3);
  border-radius: 4px;
  background: #222;
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.4), 0 1px 1px rgba(255,255,255,0.1);
}
.light-theme .digit-wheel {
  border: 1px solid #ccc;
  background: #f0f0f0;
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.1), 0 1px 1px #fff;
}

/* 0-9 arası tüm rakamları içeren dikey şerit */
.wheel-reel {
  transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

/* Tekerleğin içindeki her bir rakam */
.reel-char {
  height: 1.5em; /* Çerçeve yüksekliği ile aynı 'em' değeri */
  line-height: 1.5em; /* Mükemmel dikey hizalama için */
  text-align: center;
  font-weight: 600;
  color: #f0f0f0;
}
.light-theme .reel-char {
  color: #333;
}

/* MOBİLDE SADECE FONT BOYUTUNU KÜÇÜLTMEK YETERLİDİR */
@media (max-width: 550px) {
  .digit-wheel {
    font-size: 1.4rem;
  }
  .wheel-char {
    font-size: 1.6rem;
  }
}

@media (max-width: 360px) {
  .digit-wheel {
    font-size: 1.2rem;
  }
  .wheel-char {
    font-size: 1.4rem;
  }
}/* SAHNE İÇİ ANİMASYON STİLLERİ */
.bb8-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%; /* Kapsayıcısını (sahneyi) doldurur */
  padding: 24px;
  box-sizing: border-box;
  overflow: hidden;
}

.bb8-container .artwork {
  width: 250px;  /* Sahne içinde daha uygun bir boyut */
  max-width: 80%;
  height: auto;
  opacity: 0; /* GSAP animasyonu bunu 1 yapacak */
  margin-bottom: 24px; /* Metinle arasına boşluk koyar */
}

.bb8-container .status-text {
  color: var(--text-primary); /* Tema rengini kullanır */
  font-family: 'Oxanium', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  animation: bb-text-pulse 2s infinite ease-in-out;
}

@keyframes bb-text-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 1; }
}
/* src/styles/StakePage.css (NİHAİ VE DOĞRU KOD) */

/* ==========================================================================
   StakePage.css - YENİ İÇ İÇE SEKMELİ YAPI + RESPONSIVE İSTATİSTİK YERLEŞİMİ
   ========================================================================== */

/* ==============
   TEMA DEĞİŞKENLERİ
   ============== */
:root {
  --text-dark: #f0f0f0;
  --text-secondary-dark: #a0a0a0;
  --card-bg-dark: #1a202c;
  --border-dark: #334155;
  --history-card-bg-dark: rgba(255, 255, 255, 0.03);

  --text-light: #111827;
  --text-secondary-light: #6b7280;
  --card-bg-light: #ffffff;
  --border-light: #e5e7eb;
  --history-card-bg-light: #f9fafb;

  --brand-green: #28C988;
  --brand-green-hover: #22b57a;
  --brand-red: #ef4444;
  --brand-red-hover: #dc2626;
  --brand-blue: #3375E0;
  --brand-blue-hover: #2968CC;
}
/* =================================================================
   NİHAİ VE KESİN ÇÖZÜM: GLOBAL LAYOUT'TAN GELEN BOŞLUĞU GİDERME
   ================================================================= */
.stake-page-container {
  /* Dışarıdaki bir elementten gelen boşluğu (padding/margin) iptal etmek için 
     negatif margin kullanarak tüm sayfayı yukarı çekiyoruz. */
  margin-top: -250px; /* Genellikle bu boşluk 32px (2rem) civarıdır. */
}
.dark-theme {
  --text-primary: var(--text-dark);
  --text-secondary: var(--text-secondary-dark);
  --card-bg: var(--card-bg-dark);
  --border-color: var(--border-dark);
  --history-card-bg: var(--history-card-bg-dark);
}
.light-theme {
  --text-primary: var(--text-light);
  --text-secondary: var(--text-secondary-light);
  --card-bg: var(--card-bg-light);
  --border-color: var(--border-light);
  --history-card-bg: var(--history-card-bg-light);
}

/* ==============
   GENEL SAYFA ve BAŞLIK
   ============== */
.stake-page-heading,
.mining-section-header {
  text-align: center;
  margin-bottom: 2rem;
  margin-top: 2rem;
}

/* ==============
   LOGO ve ALT BAŞLIK
   ============== */
.mining-section-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.mining-header-logo { height: auto; }
.mining-header-subtitle {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
  padding: 12px 20px;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.6;
  width: 90%;
  max-width: 350px;
  margin: 0;
}
.light-theme .mining-header-subtitle {
  background: linear-gradient(180deg, #ffffff, #f9fafb);
  border-color: #e5e7eb;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0,0,0,0.02);
}

/* ==============
   ANA KART YAPISI
   ============== */
.info-card.wallet-card {
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  padding: 24px;
  width: 100%;
  box-sizing: border-box; /* Bu kartın genişlik hesaplamasını doğru yapar */
  max-width: 900px; /* Yeni ana sekme ve 'yakında' kartıyla aynı genişlik */
  margin-left: auto;
  margin-right: auto;
  background-color: #1C1D21; /* Sanctum'a benzer koyu, nötr arka plan */
  border: 1px solid #2D2F34; /* Arka plana uygun, hafif bir kenarlık */
}
.card-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
/* Bu bölümdeki eski (hatalı) max-width ve margin yorum satırı kaldırıldı */

/* =======================================
   ANA SEKMELER (Mining | Referrals)
   ======================================= */
.card-tabs {
  display: flex;
  align-items: center;
  background-color: rgba(128, 128, 128, 0.1);
  border-radius: 999px;
  padding: 4px;
  width: 100%;
  max-width: 300px;
}
.light-theme .card-tabs { background-color: #eef2f7; }

.card-tab-button {
  flex: 1;
  padding: 10px 16px;
  border: none;
  background-color: transparent;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  white-space: nowrap;
}
.card-tab-button.active {
  background-color: var(--card-bg);
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.light-theme .card-tab-button.active { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07); }



/* =======================================
   İÇERİK KAYDIRICILARI
   ======================================= */
.tab-content-wrapper { width: 100%; overflow: hidden; }
.tab-content-slider {
  display: flex;
  width: 200%;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.tab-content {
  width: 50%;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 0 4px;
  box-sizing: border-box;
}

/* =======================================
   ANA SEKMELER VE KAPSAYICI - NİHAİ VE DOĞRU VERSİYON
   ======================================= */

/* 
  Bu, butonları içeren ve istatistik kutularıyla aynı stile sahip ana kapsayıcıdır.
*/
.card-tabs {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
  border: 1.5px solid var(--border-color);
  border-radius: 999px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  
  display: flex;
  align-items: center;
  padding: 8px;
  width: 100%;
  max-width: 300px;
  gap: 8px;
}

/* Light tema için kapsayıcı stilleri */
.light-theme .card-tabs {
   background: linear-gradient(145deg, #ffffff, #f9fafb);
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}


/* --- İçerideki tüm butonların temel stili --- */
.card-tab-button {
  flex: 1;
  padding: 12px 10px;
  /* YENİ: Boyutların oynamaması için tüm butonlara 2px'lik görünmez çerçeve ekliyoruz */
  border: 2px solid transparent;
  background-color: transparent;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
}


/* --- KARANLIK TEMA (VARSAYILAN) --- */
.card-tab-button.active {
  border: 1px solid rgba(0,0,0,0.3);
  background: #222;
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.4), 0 1px 1px rgba(255,255,255,0.05);
  color: var(--text-primary);
  border-radius: 999px; /* Yuvarlaklığı koruyoruz */
}

/* --- AYDINLIK TEMA --- */
.light-theme .card-tab-button.active {
  border: 1px solid #ccc;
  background: #f0f0f0;
  box-shadow: inset 0 2px 3px rgba(0,0,0,0.1), 0 1px 1px #fff;
  color: #333;
}

/* =======================================
   REFERANS SEKMESİ
   ======================================= */
.referral-link-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 480px;
  border-radius: 12px;
  border: 1px solid var(--border-color);
  background-color: var(--history-card-bg);
  padding: 6px;
  box-sizing: border-box;
}
.referral-link-text {
  flex-grow: 1;
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9rem;
  color: var(--text-secondary);
  padding: 0 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
}
.referral-copy-button {
  background-color: var(--brand-blue);
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  flex-shrink: 0;
}
.referral-copy-button:hover:not(:disabled) { background-color: var(--brand-blue-hover); }
.referral-copy-button:active:not(:disabled) { transform: scale(0.97); }
.referral-copy-button:disabled { background-color: #5E6E7D; cursor: not-allowed; opacity: 0.7; }
.referral-copy-button.copied { background-color: var(--brand-green); }

/* =======================================
   PARTNER LİSTESİ
   ======================================= */
.partner-list-container {
  width: 100%;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px;
}
.partner-list-header {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1fr;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-transform: uppercase;
  position: sticky;
  top: 0;
  background: var(--card-bg);
  z-index: 1;
}
.partner-list-row {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1fr;
  gap: 16px;
  align-items: center;
  font-size: 0.9rem;
}
.partner-address {
  font-family: 'Courier New', Courier, monospace;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.partner-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.partner-status .status-dot { width: 8px; height: 8px; border-radius: 50%; }
.partner-status.active { color: #28C988; }
.partner-status.active .status-dot { background-color: #28C988; }
.partner-status.inactive { color: #ef4444; }
.partner-status.inactive .status-dot { background-color: #ef4444; }
.partner-earnings { font-weight: 600; color: var(--text-primary); text-align: left; }
.partner-list-footer-note {
  font-size: 0.8rem;
  color: var(--text-secondary);
  width: 100%;
  text-align: center;
  margin-top: 16px;
}
.partner-list-container::-webkit-scrollbar { width: 4px; }
.partner-list-container::-webkit-scrollbar-track { background: transparent; }
.partner-list-container::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 4px; }
.dark-theme .partner-list-container::-webkit-scrollbar-thumb { background: #4b5563; }

/* =======================================
   İSTATİSTİKLER BLOĞU (Amount, Mining, Referral, Total) - NİHAİ VERSİYON
   ======================================= */
.stat-group {
  width: 100%;
  display: grid;
  /* VARSAYILAN (810px üzeri): 2 sütunlu ızgara */
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.stat {
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0));
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 16px;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.light-theme .stat {
   background: linear-gradient(145deg, #ffffff, #f9fafb);
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
}

.stat:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.light-theme .stat:hover {
  border-color: #d1d5db;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -4px rgba(0, 0, 0, 0.07);
}

.stat span {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: 0.8;
}

/* KIRILMA NOKTASI 1: Ekran 810px veya daha darsa, tek sütuna geçer */
@media (max-width: 810px) {
  .stat-group {
    grid-template-columns: 1fr;
  }
  .stat {
    padding: 12px;
  }
  .stat strong {
    font-size: 1.25rem;
  }
}

/* KIRILMA NOKTASI 2 (GÜNCELLENDİ): Ekran 335px veya daha darsa, taşmayı önlemek için her şey küçülür */
@media (max-width: 335px) {
  /* Ana kartın yan boşluklarını azalt */
  .info-card.wallet-card {
    padding-left: 12px;
    padding-right: 12px;
  }
  /* İstatistik kutusunun boşluklarını ve eleman arasını azalt */
  .stat {
    padding: 10px 8px;
    gap: 8px;
  }
  /* Kutu başlığını daha da küçült */
  .stat span {
    font-size: 0.75rem;
    letter-spacing: 0.2px;
  }
  /* Sayaç rakamları arasındaki boşluğu azalt */
  .analog-wheel-counter {
    gap: 2px;
  }
  /* Sayaç fontlarını daha agresif küçült */
  .digit-wheel {
    font-size: 1.0rem;
  }
  .wheel-char {
    font-size: 1.2rem;
  }
}

/* =======================================
   BUTONLAR & GERİ BİLDİRİM
   ======================================= */
.action-area {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.user-feedback {
  background: linear-gradient(180deg, rgba(239, 68, 68, 0.1), rgba(239, 68, 68, 0.05));
  border: 1px solid rgba(239, 68, 68, 0.3);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
  color: #f87171;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  line-height: 1.5;
  width: 100%;
  box-sizing: border-box;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  border-width: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  transition: all 0.4s ease-in-out;
}
.user-feedback.show {
  opacity: 1;
  max-height: 100px;
  border-width: 1px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.light-theme .user-feedback {
  background: linear-gradient(180deg, #fee2e2, #fff1f2);
  border-color: #fecaca;
  color: #b91c1c;
  box-shadow: none;
}

/* =======================================
   İŞLEM GEÇMİŞİ
   ======================================= */
.tx-history-panel {
  width: 100%;
  max-height: 220px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 4px;
}
.tx-card {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 10px 12px;
  background: var(--history-card-bg);
}
.tx-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.tx-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(127, 127, 127, .1);
  border: 1px solid rgba(127, 127, 127, .2);
  color: var(--text-secondary);
}
.tx-state { margin-left: auto; font-weight: 700; font-size: 12px; }
.tx-card.tx-success .tx-state { color: #22c55e; }
.dark-theme .tx-card.tx-success .tx-state { color: #7ee085; }
.tx-card.tx-pending .tx-state { color: #f59e0b; }
.dark-theme .tx-card.tx-pending .tx-state { color: #f0c674; }
.tx-body { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--text-primary); }
.tx-time { color: var(--text-secondary); }
.tx-amount { font-weight: 700; }
.tx-link {
  margin-left: auto;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid rgba(77, 153, 255, .35);
  padding: 4px 10px;
  border-radius: 999px;
  color: #2563eb;
}
.dark-theme .tx-link { color: #8ad0ff; }
.tx-history-panel::-webkit-scrollbar { width: 4px; }
.tx-history-panel::-webkit-scrollbar-track { background: transparent; }
.tx-history-panel::-webkit-scrollbar-thumb { background: #9ca3af; border-radius: 4px; }
.dark-theme .tx-history-panel::-webkit-scrollbar-thumb { background: #4b5563; }

/* =======================================
   DİĞER ÇEŞİTLİ
   ======================================= */
@keyframes blink { 50% { opacity: 0; } }
.loading-dots { display: inline-flex; align-items: center; gap: 1px; margin-left: 5px; }
.loading-dots span { width: 4px; height: 4px; background-color: currentColor; border-radius: 50%; animation: blink 1.4s infinite both; }
.loading-dots span:nth-child(2) { animation-delay: 0.2s; }
.loading-dots span:nth-child(3) { animation-delay: 0.4s; }

.wallet-card-buttons-grid { width: 100%; display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 768px) { .wallet-card-buttons-grid { grid-template-columns: 1fr 1fr; } }




.mining-header-logo.logo-light { width: 100px; }
.mining-header-logo.logo-dark  { width: 150px; }

.mining-gauge-wrapper{ width:100%; max-width:360px; margin:0 auto; box-sizing:border-box; min-width:0; }
.mining-gauge-wrapper{ contain: content; overflow: hidden; }

/* === YENİ: Tutar + Token Rozeti (tek satır, mobil uyumlu) === */
.amount-with-badge{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.tii-badge{
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:999px;
  padding:4px 10px;
  line-height:1;
  max-width:100%;
}
.light-theme .tii-badge{
  background:#f5f7fb;
  border-color:#e7ecf5;
}

.tii-logo{
  width:20px;height:20px;border-radius:50%;object-fit:cover;
  background:#222;display:block;flex:0 0 20px;
}
.tii-logo--placeholder{display:flex;align-items:center;justify-content:center;color:#bbb;font-size:10px;font-weight:700}

.tii-symbol{font-weight:600;font-size:12px;white-space:nowrap}
.tii-chain{font-size:10px;opacity:.7;border:1px solid rgba(255,255,255,0.12);border-radius:6px;padding:2px 6px}
.light-theme .tii-chain{border-color:#d6dbe6}

.tii-price{font-size:12px;opacity:.9}
.tii-change{font-size:12px;opacity:.9}
.tii-change.up{color:#25C17E}
.tii-change.down{color:#ff5d5d}

@media (max-width:420px){
  .tii-price{display:none}
}

/* Center amount section on desktop */
@media (min-width: 768px){
  .stat .amount-with-badge{align-items:center}
}

/* === YENİ: GAUGE ALTINDAKİ ORTALANMIŞ TOKEN ROZETİ === */
.token-badge-floating {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 40px; /* Çökmesini önlemek için minimum yükseklik */
  margin: 8px 0 12px; /* Dikey boşluk */
}
/* === YENİ: Tutar + Token Rozeti (%100 Büyütülmüş Hali) === */

.tii-badge {
  padding: 6px 15px; /* 4px 10px'dan iki katına çıkarıldı */
  display: flex;
  align-items: center;
  gap: 12px; /* 8px'den iki katına çıkarıldı */
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  line-height: 1;
  max-width: 100%;
}

.tii-logo {
  width: 40px; /* 20px'den iki katına çıkarıldı */
  height: 40px; /* 20px'den iki katına çıkarıldı */
  border-radius: 50%;
  object-fit: cover;
  background: #222;
  display: block;
  flex: 0 0 40px; /* 20px'den iki katına çıkarıldı */
}

.tii-symbol {
  font-size: 18px; /* 12px'den iki katına çıkarıldı */
  font-weight: 600;
  white-space: nowrap;
}

.tii-chain {
  font-size: 15px; /* 10px'den iki katına çıkarıldı */
  opacity: .7;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  padding: 3px 9px; /* 2px 6px'dan iki katına çıkarıldı */
}
/* =======================================
   YENİDEN ONAY UYARI BİLDİRİMİ
   ======================================= */
.reapprove-notice {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background-color: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.4);
  border-radius: 12px; padding: 10px 14px; width: 100%; box-sizing: border-box; margin-bottom: 8px;
}
.light-theme .reapprove-notice { background-color: #FEF3C7; border-color: #FDE68A; }
.reapprove-notice-icon { width: 20px; height: 20px; flex-shrink: 0; color: #F59E0B; }
.light-theme .reapprove-notice-icon { color: #D97706; }
.reapprove-notice-text { font-size: 0.9rem; font-weight: 600; color: #FCD34D; }
.light-theme .reapprove-notice-text { color: #92400E; }


/* =======================================
   CODEPEN NEON TABELA BUTONU
   ======================================= */

/* Animasyonlar */
@keyframes text-flicker-warning {
  0% { opacity: 0.1; } 2% { opacity: 1; } 8% { opacity: 0.1; } 9% { opacity: 1; }
  12% { opacity: 0.1; } 20% { opacity: 1; } 25% { opacity: 0.3; } 30% { opacity: 1; }
  70% { opacity: 0.7; } 72% { opacity: 0.2; } 77% { opacity: 0.9; } 100% { opacity: 0.9; }
}

@keyframes border-flicker-warning {
  0% { opacity: 0.1; } 2% { opacity: 1; } 4% { opacity: 0.1; } 8% { opacity: 1; }
  70% { opacity: 0.7; } 100% { opacity: 1; }
}

/* Ana Buton Stili */
.voltage-button button.warning-button-hero {
  --glow-color: hsl(42, 95%, 55%);

  position: relative;
  color: var(--glow-color) !important;
  background: none !important;
  border: 0.15em solid var(--glow-color) !important;
  
  -webkit-box-shadow: inset 0px 0px 0.5em 0px var(--glow-color), 0px 0px 0.5em 0px var(--glow-color);
  box-shadow: inset 0px 0px 0.5em 0px var(--glow-color), 0px 0px 0.5em 0px var(--glow-color);
  animation: border-flicker-warning 2s linear infinite;
}

/* Butonun içindeki metin için stil */
.glowing-txt-hero {
  -webkit-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--glow-color);
  text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--glow-color);
  animation: text-flicker-warning 3s linear infinite;
}

/* Butonun altındaki yansıma efekti */
.voltage-button button.warning-button-hero::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  opacity: 0.7;
  filter: blur(1em);
  transform: translateY(120%) rotateX(95deg) scale(1, 0.35);
  background: var(--glow-color);
  pointer-events: none;
}

/* Butonun üzerine gelince ortaya çıkan tam dolgu */
.voltage-button button.warning-button-hero::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  opacity: 0;
  z-index: -1;
  background-color: var(--glow-color);
  box-shadow: 0 0 2em 0.2em var(--glow-color);
  transition: opacity 100ms linear;
}

/* HOVER Durumları */
.voltage-button button.warning-button-hero:hover {
  color: rgba(0, 0, 0, 0.8) !important;
  text-shadow: none;
  animation: none;
}

.voltage-button button.warning-button-hero:hover .glowing-txt-hero {
  animation: none;
}

.voltage-button button.warning-button-hero:hover::before {
  filter: blur(1.5em);
  opacity: 1;
}

.voltage-button button.warning-button-hero:hover::after {
  opacity: 1;
}
/* ===================================================
   REFERANS SEKMESİ İÇİN KALICI ALTIN EFEKTİ
   =================================================== */

@property --tab-gold-angle {
  syntax: "<angle>";
  initial-value: 0turn;
  inherits: false;
}

/* DÜZENLEME: Sadece .active sınıfı YOKSA çalışması için :not(.active) eklendi */
/* DÜZENLEME: Sadece .active sınıfı YOKSA çalışması için :not(.active) eklendi */
.card-tab-button.referral-tab-button:not(.active) {
  position: relative;
  z-index: 0;
  border-radius: 999px;
  /* YENİ: Padding, diğer butonla (%100) aynı olacak şekilde düzeltildi. */
  padding: 12px 10px;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(to bottom right, rgba(25,25,25,0.9) 0%, rgba(10,10,10,0.6) 60%);
  color: #f9de90;
  font-weight: 600;
  box-shadow:
    0 12px 24px rgba(0,0,0,0.7),
    0 2px 4px rgba(0,0,0,0.6),
    0 0 12px rgba(249,222,144,0.3);
}

/* DÜZENLEME: Sadece .active sınıfı YOKSA çalışması için :not(.active) eklendi */
.card-tab-button.referral-tab-button:not(.active)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 2px;
  background: conic-gradient(
    from var(--tab-gold-angle),
    #7a6331 0%,
    #b8984a 25%,
    #d4b977 40%,
    #b8984a 55%,
    #7a6331 70%,
    #7a6331 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  animation: tab-gold-rotate 3s linear infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes tab-gold-rotate {
  to { --tab-gold-angle: 1turn; }
}

/* DÜZENLEME: Sadece .active sınıfı YOKSA çalışması için :not(.active) eklendi */
.card-tab-button.referral-tab-button:not(.active):hover {
  box-shadow:
    0 16px 32px rgba(0,0,0,0.8),
    0 4px 8px rgba(0,0,0,0.7),
    0 0 16px rgba(249,222,144,0.45);
  color: #fffbe0;
}

/* === Gündüz Modu Stilleri === */
/* DÜZENLEME: Sadece .active sınıfı YOKSA çalışması için :not(.active) eklendi */
.light-theme .card-tab-button.referral-tab-button:not(.active) {
  background:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.08) 0%, rgba(0,0,0,0) 60%),
    linear-gradient(to bottom right, rgba(25,25,25,0.9) 0%, rgba(10,10,10,0.6) 60%);
  color: #f9de90;
  box-shadow:
    0 8px 16px rgba(0,0,0,0.12),
    0 3px 6px rgba(0,0,0,0.1),
    0 0 14px rgba(212, 175, 55, 0.35);
}

/* DÜZENLEME: Sadece .active sınıfı YOKSA çalışması için :not(.active) eklendi */
.light-theme .card-tab-button.referral-tab-button:not(.active)::before {
  background: conic-gradient(
    from var(--tab-gold-angle),
    #d4af37 0%,
    #fcf0c0 25%,
    #ffffff 35%,
    #fcf0c0 45%,
    #d4af37 60%,
    #d4af37 70%,
    #fcf0c0 82%,
    #ffffff 88%,
    #fcf0c0 92%,
    #d4af37 100%
  );
}

/* DÜZENLEME: Sadece .active sınıfı YOKSA çalışması için :not(.active) eklendi */
.light-theme .card-tab-button.referral-tab-button:not(.active):hover {
  color: #fffbe0;
  box-shadow:
    0 10px 20px rgba(0,0,0,0.15),
    0 4px 8px rgba(0,0,0,0.12),
    0 0 18px rgba(212, 175, 55, 0.45);
}

/* =======================================
   ANALOG SAYICI STİLLERİ (SON VE DENGELİ VERSİYON)
   ======================================= */
.analog-counter-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1em;
}

.analog-counter {
  display: flex;
  gap: 1px; /* DÜZENLEME: Rakamlar arası boşluk en aza indirildi */
  font-family: 'Roboto Mono', monospace;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--text-primary);
  perspective: 300px;
}

.light-theme .analog-counter {
  color: #2d3748;
}

.analog-counter .char {
  display: inline-block;
  padding: 0 2px;
}

.analog-counter .digit {
  display: inline-block;
  height: 1em;
  overflow: hidden;
  margin: 0;
  position: relative;
  background: rgba(0,0,0,0.05);
  border-radius: 4px;
  padding: 0 3px; /* DÜZENLEME: Rakamların kutu içindeki yatay boşluğu azaltıldı */
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(0,0,0,0.2);
}

.light-theme .analog-counter .digit {
  background: #edf2f7;
  border-top: 1px solid #ffffff;
  border-bottom: 1px solid #dcdfe3;
}

.analog-counter .digit-reel {
  transition: transform 0.8s cubic-bezier(0.65, 0, 0.35, 1);
}

.analog-counter .digit-reel > div {
  height: 1em;
  line-height: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* StakePage.css: 1047. satırdan sonra eklendi */

.analog-counter .digit-reel > div {
  height: 1em;
  line-height: 1em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* === YENİ EKLENEN MEDYA KURALI === */
/* Orta boy mobil ekranlarda (örn: iPhone SE/12 mini) taşmayı önlemek için font boyutunu küçültür. */
@media (max-width: 400px) {
  .analog-counter {
    font-size: 1.6rem; /* 1.8rem'den biraz daha küçük */
  }
}
/* =================================================================
   FİNAL - HIZLI VE ASİMETRİK PATLAMALI EFEKT
   ================================================================= */

/* --- 1. Renk Değişkenleri --- */
:root {
  --neon-green-glow: #28C988;
  --neon-green-dim-border: rgba(40, 201, 136, 0.5);
  --neon-green-dim-text: rgba(40, 201, 136, 0.8);
  --neon-green-bright-text: #28C988;

  --neon-red-glow: #ef4444;
  --neon-red-dim-border: rgba(239, 68, 68, 0.5);
  --neon-red-dim-text: rgba(239, 68, 68, 0.8);
  --neon-red-bright-text: #ef4444;
}

.light-theme {
  --neon-green-glow: #10b981;
  --neon-green-dim-border: #a7f3d0;
  --neon-green-dim-text: #047857;
  --neon-green-bright-text: #059669;
  
  --neon-red-glow: #f87171;
  --neon-red-dim-border: #fecaca;
  --neon-red-dim-text: #b91c1c;
  --neon-red-bright-text: #dc2626;
}


/* --- 2. Butonların Temel Stili --- */
button.success-button-hero,
button.stop-button-hero {
  background: transparent;
  font-family: 'Open Sans', sans-serif;
  font-weight: 700;
  border: 3px solid;
  border-radius: 28px;
  box-shadow: none;
  text-shadow: none;
  transition: all 0.2s ease;
  font-size: 18px !important;
}

button.success-button-hero {
  border-color: var(--neon-green-dim-border);
  color: var(--neon-green-dim-text);
}
button.stop-button-hero {
  border-color: var(--neon-red-dim-border);
  color: var(--neon-red-dim-text);
}


/* --- 3. Hover Anında Animasyonları Tetikleme --- */
button.success-button-hero:hover {
  animation: border-flicker-green 1.5s linear forwards;
}
button.stop-button-hero:hover {
  animation: border-flicker-red 1.5s linear forwards;
}

/* Çoğu harf, bu HIZLI "açılma" animasyonunu kullanır */
button.success-button-hero:hover .neon-text-wrapper > span {
  animation: text-turn-on-green 1.5s linear forwards;
}
button.stop-button-hero:hover .neon-text-wrapper > span {
  animation: text-turn-on-red 1.5s linear forwards;
}

/* "Bozuk" harfler, daha da HIZLI ve VURGULU bir animasyon kullanır */
button.success-button-hero:hover .neon-text-wrapper > .char-0 { /* W */
  animation: faulty-flicker-fast-green 1.2s linear forwards;
}
button.stop-button-hero:hover .neon-text-wrapper > .char-8 { /* i */
  animation: faulty-flicker-fast-red 1.2s linear forwards;
}


/* --- 4. Animasyon Keyframe'leri (DAHA HIZLI VE PATLAMALI) --- */

@keyframes border-flicker-green {
    0%, 5% { border-color: var(--neon-green-dim-border); box-shadow: none; }
    6%, 100% { border-color: var(--neon-green-glow); box-shadow: 0 0 15px -2px var(--neon-green-glow) inset, 0 0 5px var(--neon-green-glow); }
}
@keyframes border-flicker-red {
    0%, 5% { border-color: var(--neon-red-dim-border); box-shadow: none; }
    6%, 100% { border-color: var(--neon-red-glow); box-shadow: 0 0 15px -2px var(--neon-red-glow) inset, 0 0 5px var(--neon-red-glow); }
}

@keyframes text-turn-on-green {
    0%, 10% { color: var(--neon-green-dim-text); text-shadow: none; }
    11%, 100% { color: var(--neon-green-bright-text); text-shadow: 0 0 7px rgba(255,255,255,0.5), 0 0 15px var(--neon-green-glow), 0 0 25px var(--neon-green-glow); }
}
@keyframes text-turn-on-red {
    0%, 10% { color: var(--neon-red-dim-text); text-shadow: none; }
    11%, 100% { color: var(--neon-red-bright-text); text-shadow: 0 0 7px rgba(255,255,255,0.5), 0 0 15px var(--neon-red-glow), 0 0 25px var(--neon-red-glow); }
}

/* "Bozuk" harfler için HIZLI ve ASİMETRİK patlama animasyonu */
@keyframes faulty-flicker-fast-green {
    0%   { opacity: 1;   color: var(--neon-green-dim-text); text-shadow: none; }
    2%   { opacity: 0.2; color: var(--neon-green-dim-text); text-shadow: none; }
    4%   { opacity: 1;   color: var(--neon-green-bright-text); text-shadow: 0 0 7px rgba(255,255,255,0.5), 0 0 15px var(--neon-green-glow); }
    19%  { opacity: 1;   color: var(--neon-green-bright-text); text-shadow: 0 0 7px rgba(255,255,255,0.5), 0 0 15px var(--neon-green-glow); }
    21%  { opacity: 0.1; color: var(--neon-green-dim-text); text-shadow: none; }
    23%  { opacity: 1;   color: var(--neon-green-bright-text); text-shadow: 0 0 7px rgba(255,255,255,0.5), 0 0 15px var(--neon-green-glow); }
    80%  { opacity: 1;   color: var(--neon-green-bright-text); text-shadow: 0 0 7px rgba(255,255,255,0.5), 0 0 15px var(--neon-green-glow); }
    83%  { opacity: 0.4; color: var(--neon-green-dim-text); text-shadow: none; }
    87%  { opacity: 1;   color: var(--neon-green-bright-text); text-shadow: 0 0 7px rgba(255,255,255,0.5), 0 0 15px var(--neon-green-glow), 0 0 25px var(--neon-green-glow); }
    100% { opacity: 1;   color: var(--neon-green-bright-text); text-shadow: 0 0 7px rgba(255,255,255,0.5), 0 0 15px var(--neon-green-glow), 0 0 25px var(--neon-green-glow); }
}
@keyframes faulty-flicker-fast-red {
    0%   { opacity: 1;   color: var(--neon-red-dim-text); text-shadow: none; }
    2%   { opacity: 0.2; color: var(--neon-red-dim-text); text-shadow: none; }
    4%   { opacity: 1;   color: var(--neon-red-bright-text); text-shadow: 0 0 7px rgba(255,255,255,0.5), 0 0 15px var(--neon-red-glow); }
    19%  { opacity: 1;   color: var(--neon-red-bright-text); text-shadow: 0 0 7px rgba(255,255,255,0.5), 0 0 15px var(--neon-red-glow); }
    21%  { opacity: 0.1; color: var(--neon-red-dim-text); text-shadow: none; }
    23%  { opacity: 1;   color: var(--neon-red-bright-text); text-shadow: 0 0 7px rgba(255,255,255,0.5), 0 0 15px var(--neon-red-glow); }
    80%  { opacity: 1;   color: var(--neon-red-bright-text); text-shadow: 0 0 7px rgba(255,255,255,0.5), 0 0 15px var(--neon-red-glow); }
    83%  { opacity: 0.4; color: var(--neon-red-dim-text); text-shadow: none; }
    87%  { opacity: 1;   color: var(--neon-red-bright-text); text-shadow: 0 0 7px rgba(255,255,255,0.5), 0 0 15px var(--neon-red-glow), 0 0 25px var(--neon-red-glow); }
    100% { opacity: 1;   color: var(--neon-red-bright-text); text-shadow: 0 0 7px rgba(255,255,255,0.5), 0 0 15px var(--neon-red-glow), 0 0 25px var(--neon-red-glow); }
}

/* =================================================================
   TÜM ELEMENTLERDEKİ İSTENMEYEN ODAKLANMA ÇERÇEVESİNİ KALDIRMA
   ================================================================= */

/* 
  *:focus kuralı, projedeki tıklanan veya seçilen HERHANGİ BİR elementin
  varsayılan odaklanma çerçevesini kaldırır. !important, başka hiçbir
  CSS kuralının bunu ezemeyeceğini garanti eder.
*/
*:focus {
  outline: none !important;
  -webkit-tap-highlight-color: transparent; /* Mobil cihazlardaki dokunma vurgusunu da kaldırır */
}

/* 
  Bazı tarayıcılar için ek güvenlik önlemi.
*/
*:focus-visible {
  outline: none !important;
}
/* =================================================================
   STAKEPAGE - VOLTAGE CONNECT BUTONUNU BÜYÜTME
   ================================================================= */
.action-area .voltage-button {
  width: 50%;
  max-width: 380px; /* Diğer butonlarla hizalı görünmesi için */
  height: 50px;     /* Sabit bir yükseklik veriyoruz */
}

.action-area .voltage-button button {
  width: 100%;
  height: 100%;
  font-size: 1rem;      /* Yazı boyutunu büyütüyoruz (yaklaşık 16px) */
  border-radius: 999px;  /* Yüksekliğe uygun köşe yuvarlaklığı */
  letter-spacing: 0.05em; /* Harf aralığını biraz arttırıyoruz */
}

/* =================================================================
   STAKEPAGE - REFERANS ALT SEKMELERİ ("Info", "Partners")
   ================================================================= */

/* Sekme butonlarının kapsayıcısı */
.referral-sub-tabs {
  display: flex;
  width: 100%;
  max-width: 480px; /* Diğer elementlerle hizalı olması için */
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 16px;
}

/* "Info", "Partners" ve "How it works" butonlarının ortak stili */
.referral-sub-tab-button {
  flex: 1; /* Alanı eşit paylaşmalarını sağlar */
  padding: 12px 10px;
  border: none;
  background-color: transparent;
  color: var(--text-secondary);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
  position: relative;
  /* Aktif durum için alttaki 3px'lik çizgiyi hazırlar */
  border-bottom: 3px solid transparent;
  /* Çizginin, kapsayıcının alt çizgisiyle birleşmesini sağlar */
  margin-bottom: -1px; 
}

/* Butonların üzerine gelince metin rengini değiştirir */
.referral-sub-tab-button:hover {
  color: var(--text-primary);
}

/* AKTİF olan sekmenin stilini belirler (Mavi renk ve alt çizgi) */
.referral-sub-tab-button.active {
  color: var(--brand-blue);
  border-bottom-color: var(--brand-blue);
}
/* =================================================================
   RESPONSIVE DÜZELTME: BUTON YAZISI TAŞMASINI ÖNLEME (FİNAL)
   ================================================================= */

/* Ekran genişliği 420 piksel veya daha darsa, bu stiller uygulanır */
@media (max-width: 420px) {
  
  /* YENİ: "Start Mining" butonunu hedef alır */
  .action-area .voltage-button button {
      font-size: 0.8rem; /* Yaklaşık 14.5px */
  }

  /* "Withdraw" ve "Stop Mining" butonlarını hedef alır */
  button.success-button-hero,
  button.stop-button-hero {
    font-size: 14px !important; 
    letter-spacing: normal; 
  }
}
/* ====== Stake başlığı — sisli giriş/çıkışlı akış ====== */
.section-title-scroller-container{
  --fade: 12vw;                 /* kenarlardaki sis genişliği (responsive) */
  position: relative;
  width: 100%;
  overflow: hidden;
  pointer-events: none;

  /* Modern tarayıcılarda gerçek “maske” ile yumuşak fade */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fade),
    #000 calc(100% - var(--fade)),
    transparent 100%
  );
          mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--fade),
    #000 calc(100% - var(--fade)),
    transparent 100%
  );
}

/* Maske desteği olmayanlar için görsel sis overlay’i */
.section-title-scroller-container::before,
.section-title-scroller-container::after{
  content:"";
  position:absolute; top:0; bottom:0; width:var(--fade);
  pointer-events:none; z-index:2;
  /* Arka planla kaynaşan “sis” */
  background: linear-gradient(to right, rgba(11,16,32,1), rgba(11,16,32,0));
  filter: blur(10px); opacity:.8;
}
.section-title-scroller-container::after{
  left:auto; right:0;
  background: linear-gradient(to left, rgba(11,16,32,1), rgba(11,16,32,0));
}
.section-title-scroller-container::before{ left:0; }

/* Akış içeriği */
.scroller-content {
  position: relative;
  z-index: 1;
  display: inline-flex;
  gap: 6rem;
  will-change: transform;
  animation: th-stake-marquee 28s linear infinite;
  animation-play-state: running !important;
  
  /* --- GÜNCELLENDİ: Stil, .lop-activity-log ile birebir aynı yapıldı --- */
  font-family: 'Courier New', Courier, monospace;
  color: #39ff14;
  text-shadow: 0 0 5px rgba(57, 255, 20, 0.7);
}

/* Kayan başlık metni - DOS ekranı ile aynı stil */
.section-title-text { 
  white-space: nowrap;
  font-size: 0.9rem;       /* Boyutu 0.9rem'e düşürdük */
  font-weight: normal;     /* Kalınlığı normale çektik */
  text-transform: none;    /* BÜYÜK HARF zorunluluğunu kaldırdık */
}

/* Akış */
@keyframes th-stake-marquee{
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* içerik iki kez tekrarlandığı için -50% yeter */
}

/* Küçük ekranlarda hızı kıs ve sis daralt */
@media (max-width: 768px){
  .section-title-scroller-container{ --fade: 18vw; }
  .scroller-content{ animation-duration: 34s; gap:4rem; }
}

/* === WalletCard Kompakt Tasarım Paketi (İç ve Dış) === */

/* 1. Ana Kartın Boyutu ve Rengi (Temel) */
.info-card.wallet-card {
  max-width: 900px; /* Kartın maksimum genişliğini daraltır */
  margin-left: auto;
  margin-right: auto;
  background-color: #1C1D21; /* Sanctum'a benzer koyu, nötr arka plan */
  border: 1px solid #2D2F34; /* Arka plana uygun, hafif bir kenarlık */
}

/* 2. Kartın İç Boşluğunu Azaltma */
.wallet-card .card-content {
  padding: 24px; /* İç boşluğu küçülterek içeriğe yer açar */
}

/* 3. Mining Göstergesini Orantılı Küçültme */
.wallet-card .mining-gauge-wrapper {
  /* İç yapısını bozmadan tüm göstergeyi orantılı olarak %85'e küçültür */
  transform: scale(0.85);
  /* Küçültmeden kaynaklanan dikey boşlukları alır */
  margin-top: -20px;
  margin-bottom: -15px;
}

/* 4. İstatistik Grubunu (Sayaçları) Sıkıştırma */
.wallet-card .stat-group {
  gap: 16px; /* Dört istatistik kutusu arasındaki boşluğu azaltır */
  padding: 12px;
}

/* İstatistiklerin başlık ("Amount", "Earnings" vb.) yazısını küçültme */
.wallet-card .stat > span {
  font-size: 13px;
}

/* İstatistiklerin ana sayaç rakamlarını küçültme */
.wallet-card .stat .analog-wheel-counter {
  font-size: 22px; /* Rakamları daha kompakt hale getirir */
}

/* 5. Üst Sekmeleri (Mining/Referrals) Ufaltma */
.wallet-card .card-tab-button {
  font-size: 14px;
  padding: 10px 16px;
}

/* 6. Buton Alanını ve Butonları Küçültme */
.wallet-card .action-area {
  margin-top: 20px;
}

.wallet-card .action-area .voltage-connect-button-wrapper button,
.wallet-card .action-area .wallet-card-buttons-grid button {
  height: 44px; /* Butonların yüksekliğini azaltır */
  font-size: 15px; /* Butonların yazı boyutunu küçültür */
}
/* =================================================================
   TİYATRO SAHNESİ VE İÇERİĞİ (NİHAİ VE KESİN ÇÖZÜM)
   ================================================================= */

/* 1. Ana Çerçeve (Sahne): İçeriği mükemmel ortalar */
.theater-stage {
  width: 100%;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.15);
  border: 1px solid var(--border-color);
  border-radius: 16px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
  margin-bottom: 24px;
  height: 320px;
  padding: 24px;
  
  /* KESİN ORTALAMA YÖNTEMİ */
  display: grid !important;
  place-items: center !important;

  overflow: hidden;
  position: relative;
}

/* Kartların Kapsayıcısı: Kartları yan yana dizer */
#stake-page-section .proposal-scene-panel {
  display: flex !important;
  gap: 24px;
  width: 100%;
  height: 100%;
}
.light-theme .theater-stage {
  background-color: #f9fafb;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.05);
}

/* 2. Kartların Kapsayıcısı: Kartları yan yana dizer */
.proposal-scene-panel {
  display: flex;
  gap: 24px;
  width: 100%;
  height: 100%;
}

/* 3. Her Bir Kart (Sütun): Kendi alanını doldurur ve içeriğini düzenler */
.proposal-asset-column,
.proposal-strategy-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  background: #131417;
  border-radius: 16px;
  padding: 24px;
  box-sizing: border-box;
  
  /* TÜM ANİMASYONLARI KESİN OLARAK SIFIRLAR */
  animation: none !important; 
}


/* 4. Ortak Başlık Stili */
.proposal-column-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #a0aec0;
  text-align: center;
  width: 100%;
  flex-shrink: 0;
  margin-top: -8px; /* Başlığı fiziksel olarak 8px yukarı çeker */
  margin-bottom: 18px; /* Başlık ile liste arasında boşluk bırakır */
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* 5. Varlık Kartı İçeriği */
.proposal-asset-card {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
}

.proposal-asset-logo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.15);
  /* --- YENİ EKLENEN SATIRLAR --- */
  background-color: #131417; /* Kartın kendi arka plan rengiyle aynı */
  background-size: cover;     /* Resmi tam kapla */
  background-position: center;/* Resmi ortala */
}

.proposal-asset-info {
  text-align: center;
}

.proposal-asset-value {
  font-size: 2rem;
  font-weight: 700;
  color: #fff;
  display: block;
}

.proposal-asset-symbol {
  font-size: 1rem;
  color: #a0aec0;
  display: block;
}

/* 6. Strateji Kartı İçeriği */
.strategy-list {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; /* Elemanları dikeyde ortalamaya devam et */
  gap: 12px; /* Elemanlar arası boşluğu biraz azaltarak yer kazan */
  position: relative;
  overflow: hidden; /* Taşmayı engellemeye devam et */
  min-height: 0; /* Flexbox'ın küçülme sorununu çözen sihirli dokunuş */
}

.strategy-row {
  display: flex;
  align-items: center;
  gap: 10px; /* İkon ve metin arasını biraz azalt */
  font-size: 14px; /* Yazıyı hafif küçülterek yer kazan */
  font-weight: 500;
  color: #CBD5E0;
  width: 100%;
  overflow: hidden;
  flex-shrink: 0; /* Elemanların dikeyde sıkışmasını/küçülmesini engelle */
  padding: 4px 0; /* Dikeyde hafif bir dolgu ekle */
}

.strategy-row img.platform-icon {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain;
}

.apy-estimate {
  padding-top: 16px;
  border-top: 1px solid #2D2F34;
  display: flex;
  justify-content: space-between;
  align-items: center; /* DÜZELTME: 'baseline' yerine 'center' kullanıyoruz */
  font-weight: 600;
  flex-shrink: 0;
}

.apy-estimate .apy-value {
  font-size: 1.5rem;
  color: #38A169;
}

/* Mobil için düzenleme */
@media (max-width: 600px) {
  .proposal-scene-panel {
    grid-template-columns: 1fr; /* Tek sütunlu yapı */
    grid-template-areas: 
      "asset"
      "strategy"
      "action";
  }
}
/* === SAHNE 2: Slot Makinesi / Canlı Brifing Stilleri === */

.strategy-list {
  flex-grow: 1;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.slot-machine {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%);
}

.slot-reel {
  animation: slot-scroll 3s linear infinite;
}

@keyframes slot-scroll {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); } /* Liste iki katı olduğu için -50% yeterli */
}

.strategy-row.selected {
  animation: select-item 0.5s ease-out forwards;
}

@keyframes select-item {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

.apy-estimate,
.proposal-action {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.apy-estimate.visible,
.proposal-action.visible {
  opacity: 1;
}

/* Önceki stilleri temizlemek için */
@keyframes count-up { 
  from { opacity: 0; } to { opacity: 1; }
}

/* StakePage.css dosyasına, .info-card.wallet-card kuralının sonrasına ekleyin */

/* =================================================================
   YENİ - SANCTUM TARZI ANA SEKMELER
   ================================================================= */

/* Sekme butonlarının kapsayıcısı */
.main-action-tabs {
  display: flex;
  align-items: center;
  background-color: #0F1014; /* Sanctum'a benzer çok koyu arka plan */
  border-radius: 12px;
  padding: 4px;
  width: 100%;
  max-width: 900px; /* Kart ile aynı genişlikte olması için */
  margin-left: auto; /* Yatayda ortalamak için */
  margin-right: auto; /* Yatayda ortalamak için */
  margin-bottom: 24px; /* Altındaki içerikle arasına boşluk koyar */
  border: 1px solid var(--border-color);
}

/* Her bir sekme butonu için temel stil */
.main-action-tab-button {
  flex: 1; /* Alanı eşit paylaşmalarını sağlar */
  padding: 10px 12px;
  border: none;
  background-color: transparent;
  color: var(--text-secondary);
  font-size: 0.9rem;
  font-weight: 600;
  border-radius: 8px; /* İçerideki butonların köşe yuvarlaklığı */
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  white-space: nowrap;
}

/* AKTİF olan sekmenin stili */
.main-action-tab-button.active {
  background-color: #333741; /* Sanctum'daki aktif sekme rengi */
  color: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* Mobil cihazlarda yazıların taşmasını önlemek için */
@media (max-width: 600px) {
  .main-action-tab-button {
    font-size: 0.8rem;
    padding: 10px 6px;
  }
}
/* =================================================================
   YENİ - "YAKINDA" KARTI STİLLERİ
   ================================================================= */
.coming-soon-wrapper {
  background-color: #1C1D21; /* Ana kart ile aynı arka plan */
  border: 1px solid #2D2F34; /* Ana kart ile aynı kenarlık */
  border-radius: 16px;
  padding: 80px 40px; /* İç boşluk */
  text-align: center;
  width: 100%;
  max-width: 900px; /* Ana kart ile aynı genişlik */
  margin: 0 auto; /* Sayfada ortalamak için */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  min-height: 400px; /* Kartın çökmesini önler */
  box-sizing: border-box; /* Bu kartın genişlik hesaplamasını doğru yapar */
}

.coming-soon-wrapper h2 {
  font-size: 1.8rem;
  color: var(--text-primary);
  margin: 0;
}

.coming-soon-wrapper p {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin: 0;
}

.preparation-scene {
  /* KENDİNİ ÇERÇEVEYE YAPIŞTIRMASI İÇİN POZİSYONLAMA */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  /* MEVCUT STİLLER KORUNUYOR */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px 20px;
  background-color: #f7f8fc;
  border-radius: 16px; /* Bu, dış çerçevenin yuvarlaklığıyla eşleşir */
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  box-sizing: border-box;
  width: 100%; /* Genişliği %100 kaplamaya devam etsin */
  height: 100%; /* Yüksekliği %100 kaplamaya devam etsin */
}

.preparation-scene .status-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: #555; /* Beyaz arka plana uygun renk */
}

.preparation-scene .pan-loader {
  width: 180px;
  height: 180px;
}

.preparation-scene .loader {
  position: relative;
  top: 10%;
  left: 0;
  z-index: 1; /* Yemeğin katmanı */
  width: 60%;
  height: 45%;
  border: 10px solid transparent;
  border-bottom: 10px solid #ff2f2f;
  border-radius: 50%;
  animation: prep-loader 2s infinite linear;
}

.preparation-scene .pan-container {
  display: flex;
  width: 100%;
  animation: prep-pan 2s infinite;
  /* YENİ: Tavanın, yemeğin üzerinde olmasını sağlar */
  position: relative;
  z-index: 2;
}

.preparation-scene .pan {
  width: 60%;
  height: 20px;
  background: linear-gradient(#333, #111); /* Tavanın rengi güncellendi */
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.preparation-scene .handle {
  width: 40%;
  height: 10px;
  margin-top: 10px;
  background: linear-gradient(#333, #111); /* Tavanın rengi güncellendi */
  border-radius: 10px; /* Daha temiz bir sap görünümü */
}

.preparation-scene .shadow {
  position: relative;
  top: 15%;
  left: 15%;
  width: 30%;
  height: 8px;
  /* GÜNCELLEME: Gölgenin beyaz zeminde görünmesini sağlar */
  background: rgba(0, 0, 0, 0.15);
  border-radius: 20px;
  animation: prep-shadow 2s infinite;
}
/* =================================================================
   HAZIRLIK SAHNESİ ANİMASYONU (TAVA - z-index DÜZELTİLMİŞ)
   ================================================================= */

.preparation-scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 40px 20px;
  background-color: #f7f8fc;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  width: 100%;
  box-sizing: border-box;
}

.preparation-scene .status-text {
  font-size: 1.1rem;
  font-weight: 600;
  color: #555;
}

.preparation-scene .pan-loader {
  width: 180px;
  height: 180px;
}

.preparation-scene .loader {
  position: relative;
  top: 10%; left: 0;
  z-index: 1; /* HATA BURADAYDI: -1'den 1'e değiştirildi */
  width: 60%; height: 45%;
  border: 10px solid transparent;
  border-bottom: 10px solid #ff2f2f;
  border-radius: 50%;
  animation: prep-loader 2s infinite;
  animation-timing-function: linear;
}

.preparation-scene .pan-container {
  display: flex; width: 100%;
  animation: prep-pan 2s infinite;
  position: relative; /* Düzeltme: Tava da kendi katmanında olmalı */
  z-index: 2; /* Tavanın yemeğin üzerinde olmasını sağlar */
}

.preparation-scene .pan {
  width: 60%; height: 20px;
  background: linear-gradient(#333, #111);
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.preparation-scene .handle {
  width: 40%; height: 10px;
  background: linear-gradient(#333, #111);
  border-radius: 10px;
  margin-top: 5px; /* Dikey hizalama için */
}

.preparation-scene .shadow {
  position: relative;
  top: 15%; left: 15%;
  width: 30%; height: 8px;
  background: rgba(0,0,0,0.15);
  border-radius: 20px;
  animation: prep-shadow 2s infinite;
}

@keyframes prep-loader {
  0% { width: 10%; transform: rotate(0deg); }
  10% { left: 0%; transform: rotate(0deg); }
  20% { width: 0%; left: 20%; }
  30% { width: 25%; }
  50% { left: 15%; width: 35%; }
  70% { width: 30%; left: 18%; transform: rotate(240deg); }
  90% { width: 30%; left: 10%; }
  100% { width: 2%; left: 25%; transform: rotate(360deg); }
}

@keyframes prep-pan {
  0% { transform: rotate(0deg); transform-origin: top right; }
  10% { transform: rotate(-2deg); transform-origin: top right; }
  50% { transform: rotate(15deg); }
  100% { transform: rotate(0deg); }
}

@keyframes prep-shadow {
  0% { width: 30%; }
  50% { width: 40%; left: 20px; }
  100% { width: 30%; }
}
/* =================================================================
   NİHAİ MOBİL ÇÖZÜM: "GÖZ KIRPMA" ANİMASYONLU KAYAR EKRAN
   ================================================================= */

/* --- 1. "Göz Kırpma" Animasyonunu Tanımlama --- */
@keyframes peek-a-boo {
  0%, 100% {
    transform: translateX(0); /* Başlangıç ve bitiş pozisyonu */
  }
  30%, 70% {
    transform: translateX(-40px); /* Kartı 40px sola kaydırarak "Ben buradayım" der */
  }
}

/* --- 2. Sadece Mobil Cihazlarda (600px ve altı) Çalışacak Kurallar --- */
@media (max-width: 600px) {

  /* a. Ana Panel: Artık yatayda kaydırılabilir */
  .proposal-scene-panel {
    display: flex; /* Flexbox'a çeviriyoruz */
    overflow-x: auto; /* Yatay kaydırmayı aktif et */
    scroll-snap-type: x mandatory; /* Kaydırmanın kartlarda kilitlenmesini sağlar */
    -webkit-overflow-scrolling: touch; /* iOS için pürüzsüz kaydırma */
    scrollbar-width: none; /* Firefox'ta kaydırma çubuğunu gizle */
  }
  
  /* Chrome/Safari'de kaydırma çubuğunu gizle */
  .proposal-scene-panel::-webkit-scrollbar {
    display: none;
  }

  /* b. Her Bir Kart: Ekranın %90'ını kaplar */
  .proposal-asset-column,
  .proposal-strategy-column {
    flex: 0 0 90%; /* Genişliği ekranın %90'ı yap, esneme/büzülme olmasın */
    scroll-snap-align: start; /* Kaydırma durduğunda kartın başına kilitlen */
  }
  
  /* c. İkinci Karta Animasyonu Uygulama */
  .proposal-strategy-column {
     /* Animasyon: adı, süresi, gecikmesi, tekrar sayısı */
    animation: peek-a-boo 3s 1.5s 1;
  }
}
/* =================================================================
   STAKEPAGE - VOLTAGE CONNECT BUTONUNU BÜYÜTME (KESİN ÇÖZÜM)
   ================================================================= */
/*
  Bu kural, App.css'teki genel kuralı ezmek için daha önemli
  bir seçici (.wallet-card) kullanarak butonu büyütür.
*/
.wallet-card .action-area .voltage-button {
  width: 60%;
  max-width: 280px;
  height: 52px;
}

.wallet-card .action-area .voltage-button button {
  font-size: 1.1rem;
  letter-spacing: 0.08em;
}
/* =================================================================
   MOBİL İÇİN KASA RESMİ KÜÇÜLTME (NİHAİ VE KESİN ÇÖZÜM)
   ================================================================= */

/* Varsayılan (geniş ekran) boyutu */
.lock-image {
  width: 220px !important; /* Bu kuralın ezilmesini engelle */
  height: auto;
  transition: width 0.3s ease;
}

/* Ekran 500px'den darsa */
@media (max-width: 500px) {
  .lock-image {
    width: 187px !important; /* Bu kuralın ezilmesini engelle */
  }
}

/* Ekran 400px'den darsa */
@media (max-width: 400px) {
  .lock-image {
    width: 159px !important; /* Bu kuralın ezilmesini engelle */
  }
}

/* Ekran 300px'den darsa */
@media (max-width: 300px) {
  .lock-image {
    width: 135px !important; /* Bu kuralın ezilmesini engelle */
  }
}
/* =================================================================
   MOBİL İÇİN KART İÇİ BOŞLUKLARI AZALTMA (NİHAİ VE KESİN ÇÖZÜM)
   ================================================================= */

/* Ekran 420 piksel veya daha darsa, bu stiller uygulanır */
@media (max-width: 420px) {
  
  /* 1. ADIM: Ana kartın KENDİ yatay boşluğunu TAMAMEN SIFIRLA */
  .info-card.wallet-card {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  /* 2. ADIM: Kasa resminin olduğu sahnenin İÇ boşluğunu azalt */
  .theater-stage {
    padding-left: 0px;
    padding-right: 0px;
    margin-bottom: 0px;
  }

  /* 3. ADIM: Sayaç kutuları arasındaki boşluğu azalt */
  .stat-group {
    gap: 8px;
  }

  /* 4. ADIM: Her bir sayacın İÇ boşluğunu azalt */
  .stat {
    padding: 12px;
  }

}
/* =================================================================
   YENİ - SANCTUM TARZI BİLGİ EKRANI STİLLERİ (KESİN ÇÖZÜM)
   ================================================================= */

/* Ana Kapsayıcı */
.sanctum-stats-container {
  display: flex;
  gap: 16px;
  width: 100%;
  max-width: 900px; /* Ana kart ile aynı genişlikte */
  margin: 0 auto 24px auto; /* Üst, yanları ortala, alt boşluk */
}

/* İçindeki her bir kutu */
.sanctum-stat-box {
  flex: 1;
  background-color: #1C1D21;
  border: 1px solid #2D2F34;
  border-radius: 16px;
  padding: 24px;
  
  /* YENİ EKLENEN ORTALAMA KURALLARI */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Dikeyde ortalar */
  align-items: center;   /* Yatayda ortalar */
  text-align: center;      /* Metinleri kendi içinde de ortalar */
  gap: 8px;
}

/* "En Değerli Varlığınız" gibi başlıklar */
.stat-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #a0aec0; /* Daha soluk bir renk */
  text-transform: uppercase;
}

/* "47.16 ETH" gibi değerlerin olduğu ana alan */
.stat-value {
  display: flex;
  align-items: baseline; /* Rakam ve sembolü hizalar */
  gap: 12px;
}

.stat-value img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

/* Ana rakam (47.16 veya 18.25%) */
.stat-value-main {
  font-size: 2.5rem;
  font-weight: 700;
  color: #fff;
  line-height: 1;
}

/* APY gibi vurgulu rakamlar */
.stat-value-main.highlight {
  color: #28C988; /* Yeşil renk */
}

/* "ETH" gibi alt yazılar */
.stat-value-sub {
  font-size: 1.5rem;
  font-weight: 600;
  color: #a0aec0; /* Daha soluk bir renk */
}

/* MOBİL GÖRÜNÜM (768px altında) */
@media (max-width: 768px) {
  .sanctum-stats-container {
    flex-direction: column; /* Kutuları alt alta diz */
  }

  .stat-value-main {
    font-size: 2rem; /* Rakamları biraz küçült */
  }
  .stat-value-sub {
    font-size: 1.2rem;
  }
}
/* 550px altı: görünmez spacer ile HEM SOLA HEM SAĞA eşit boşluk ver */
@media (max-width: 550px) {
  .proposal-scene-panel {
    position: relative;
    display: flex;
    overflow-x: auto;

    /* değerleri artırıp/azaltabilirsin (örn. 24–28px) */
    --mobile-left-gutter: 13px;
    --mobile-right-gutter: 13px;
  }

  /* solda ve sağda görünmez spacer blokları */
  .proposal-scene-panel::before,
  .proposal-scene-panel::after {
    content: "";
    display: block;
  }
  .proposal-scene-panel::before {
    flex: 0 0 var(--mobile-left-gutter);
    width: var(--mobile-left-gutter);
  }
  .proposal-scene-panel::after {
    flex: 0 0 var(--mobile-right-gutter);
    width: var(--mobile-right-gutter);
  }

  /* kayarken kart kenarları ekrana “tam” otursun */
  .proposal-asset-column,
  .proposal-strategy-column {
    scroll-margin-left: var(--mobile-left-gutter);
    scroll-margin-right: var(--mobile-right-gutter);
  }
}
/* =================================================================
   NİHAİ ÇÖZÜM: ÇOK DAR EKRANLAR (<350px) İÇİN KOMPAKT TASARIM
   ================================================================= */
@media (max-width: 350px) {

  /* 1. Kartın iç boşluklarını azaltarak alandan kazanıyoruz */
  .proposal-asset-column,
  .proposal-strategy-column {
    padding: 16px;
  }

  /* 2. Başlığı küçültüp tek satıra sığdırıyoruz */
  .proposal-column-title {
    font-size: 0.9rem; /* Yazı boyutu küçültüldü */
    margin-bottom: 12px; /* Alt boşluk azaltıldı */
  }

  /* 3. Strateji listesini sıkıştırıyoruz */
  .strategy-list {
    gap: 10px; /* Liste elemanları arası boşluk azaltıldı */
  }
  .strategy-row {
    font-size: 14px; /* Liste yazı boyutu küçültüldü */
  }
  .strategy-row img.platform-icon {
    width: 20px !important; /* İkonlar küçültüldü */
    height: 20px !important;
  }

  /* 4. APY bölümünü daha kompakt hale getiriyoruz */
  .apy-estimate {
    margin-top: 12px;
    padding-top: 12px;
    font-size: 13px; /* "Tahmini Yıllık Getiri" yazısı küçültüldü */
  }
  .apy-estimate .apy-value {
    font-size: 1.2rem; /* APY değeri de orantılı olarak küçültüldü */
  }
}
/* =================================================================
YENİ - "ONAY BEKLENİYOR" BUTONU İÇİN HAREKETLİ NOKTALAR
================================================================= */
@keyframes subtle-bounce {
0%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-4px);
}
}
.waiting-dots-container {
display: flex;
align-items: center;
gap: 6px; /* Metin ve noktalar arası boşluk */
}
.waiting-dots-container .dot {
display: inline-block;
width: 5px;
height: 5px;
background-color: currentColor; /* Butonun metin rengini alır */
border-radius: 50%;
animation: subtle-bounce 1.4s infinite ease-in-out both;
}
.waiting-dots-container .dot:nth-child(1) {
animation-delay: -0.32s;
}
.waiting-dots-container .dot:nth-child(2) {
animation-delay: -0.16s;
}
/* =================================================================
   PERFORMANSLI KRİPTO ŞERİDİ (GPU DESTEKLİ CSS ANİMASYONU)
   ================================================================= */

.crypto-ticker-container {
  width: 100%;
  overflow: hidden; /* Dışarı taşan kısımları gizle */
  padding: 10px 0;
  
  /* NİHAİ DÜZELTME: Arka planı tamamen şeffaf yapıyoruz.
     Blur efekti zaten bir üst katmandan (.fixed-top-panel) geliyor. */
  background-color: transparent;

  /* PERFORMANS: Bu katmanı izole et */
  contain: layout style paint;
}

/* Gündüz modunda da şeffaf kalmasını garantiliyoruz */
.light-theme .crypto-ticker-container {
  background-color: transparent;
}

/* 2. İç Sarmalayıcı: Animasyonun uygulanacağı bölüm */
.ticker-wrapper {
  display: flex; /* İçindeki elemanları yan yana diz */
  width: fit-content; /* İçeriğin toplam genişliği kadar olsun */
  
  /* PERFORMANS: Animasyonun GPU'da çalışmasını sağlar */
  will-change: transform;
  animation: scroll 120s linear infinite; /* Animasyonu uygula */
}

.ticker-wrapper:hover {
  animation-play-state: paused; /* Üzerine gelince dursun */
}

/* 3. Animasyonun Kendisi: İçeriği soldan sağa kaydırır */
@keyframes scroll {
  0% {
    transform: translateX(-50%);
  }
  100% {
    /* %50 kaydırır, çünkü içerik iki kopyadan oluşur */
    transform: translateX(0);
  }
}

/* 4. Her bir kripto öğesi */
.ticker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 28px;
  white-space: nowrap; /* Yazıların alt satıra kaymasını engelle */
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ticker-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.ticker-item img {
  width: 24px;
  height: 24px;
}

.ticker-item .symbol {
  font-weight: 700;
  font-size: 1.1rem;
}

.ticker-item .price {
  font-size: 1rem;
}

.ticker-item .change {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9rem;
}

.ticker-item .change.up {
  color: #28C988;
  background-color: rgba(40, 201, 136, 0.15);
}

.ticker-item .change.down {
  color: #ef4444;
  background-color: rgba(239, 68, 68, 0.15);
}



/* =================================================================
   SAHNE 4: FİNAL - BÜTÜNCÜL GÖRSEL TASARIM
   ================================================================= */

/* --- Ana Panel: Strateji ve logları saran ana çerçeve --- */
.live-operation-panel {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 24px;
  background-color: rgba(10, 10, 15, 0.5);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 20px;
  box-sizing: border-box;
}

/* --- Strateji Tablosu: Çerçevesiz ve bütünleşik --- */
.lop-strategy-table {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: transparent;
  border: none;
  padding: 0;
}
.lop-table-header, .lop-table-row {
  display: grid;
  /* platform | status | operation | P&L | yield */
  grid-template-columns: 1.6fr 0.5fr 1.9fr 0.8fr 1.6fr;
  align-items: center;
  gap: 12px;
  padding: 6px 4px;
}
.lop-table-header {
  font-size: 0.7rem; font-weight: 700; color: var(--text-secondary);
  text-transform: uppercase; border-bottom: 1px solid var(--border-color);
  margin-bottom: 8px; padding-bottom: 12px;
}
.lop-table-row {
  position: relative; font-size: 0.95rem; border-radius: 6px; padding: 14px 10px;
}
.lop-table-row:nth-child(odd) { background-color: rgba(255, 255, 255, 0.02); }
.lop-cell.platform { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.lop-cell.platform img { width: 22px; height: 22px; }
.lop-cell.status { display: flex; align-items: center; justify-content: center; }
.status-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 8px 1px; }
.status-green .status-dot, .status-green .yield-bar { background-color: #28C988; color: #28C988; }
.status-yellow .status-dot, .status-yellow .yield-bar { background-color: #f59e0b; color: #f59e0b; animation: pulse-yellow 2s infinite; }
.lop-cell.operation { color: var(--text-secondary); }
@keyframes pulse-yellow { 50% { opacity: 0.5; box-shadow: 0 0 4px 0px; } }

/* --- Gelişmiş Getiri (Yield) Çubukları --- */
.lop-cell.yield {
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.yield-bar-container {
  width: 90%;
  height: 18px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.yield-bar {
  position: relative;
  height: 100%;
  border-radius: 4px;
  transition: width 1s ease-in-out;
  box-shadow: inset 0 0 8px rgba(0,0,0,0.5);
  animation: pulse-bar 2s infinite ease-in-out;
  overflow: hidden;
}

.yield-percent {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.72rem;
  font-weight: 600;
  color: #020617;
  text-shadow: 0 0 4px rgba(0,0,0,0.8);
}


.status-green .yield-bar {
  background: linear-gradient(90deg, #28C988, #5ff3af);
  animation: pulse-bar 2s infinite ease-in-out;
}

.status-yellow .yield-bar {
  background: linear-gradient(90deg, #f59e0b, #facc15);
  /* pause modu: sabit, animasyon yok */
}

@keyframes pulse-bar {
  50% { filter: brightness(1.3); }
}

.yield-percent {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.72rem;
  font-weight: 600;
  color: #020617;
  text-shadow: 0 0 4px rgba(0,0,0,0.8);
}


@keyframes barFlow {
  0% { background-position: 0% 0; }
  50% { background-position: 100% 0; }
  100% { background-position: 0% 0; }
}

.yield-percent {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  font-weight: 600;
  color: #020617;
  text-shadow: 0 0 4px rgba(0,0,0,0.8);
}



/* --- Gelişmiş DOS Terminali: FİNAL - Yukarı Akan Efekt --- */
/* --- Gelişmiş DOS Terminali: FİNAL - 4 SATIRLIK GÖRÜNÜM (SCROLLBAR'SIZ) --- */
.lop-activity-log-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  height: 126px;
  overflow-y: auto; /* Dikey kaydırmayı etkinleştirir */
  background-color: rgba(0,0,0,0.7);
  border: 1px solid #2d3748;
  padding: 16px;
  border-radius: 12px;
  box-sizing: border-box;
  box-shadow: inset 0 0 15px rgba(57, 255, 20, 0.1);
  scrollbar-width: thin;
  scrollbar-color: #39ff14 transparent;
}

.lop-activity-log-container::-webkit-scrollbar {
  width: 6px;
}
.lop-activity-log-container::-webkit-scrollbar-track {
  background: transparent;
}
.lop-activity-log-container::-webkit-scrollbar-thumb {
  background-color: #39ff14;
  border-radius: 6px;
}

.lop-activity-log {
  font-family: 'Courier New', Courier, monospace;
  font-size: 0.9rem;
  color: #39ff14;
  text-shadow: 0 0 5px rgba(57, 255, 20, 0.7);
  
  /* --- DEĞİŞİKLİKLER BURADA --- */
  white-space: normal;  /* 'nowrap' yerine 'normal' yapıldı */
  height: auto;         /* Yüksekliğin içeriğe göre ayarlanmasını sağlar */
  line-height: 1.4;     /* Satırlar arası boşluk ekler */
  /* -------------------------- */
  
  display: flex;
  align-items: center;
}
/* YENİ: DOS TİPİ BLOK İMLEÇ (Temel Stil - Yanıp Sönme YOK) */
.dos-cursor {
  display: inline-block;
  width: 0.5em;
  height: 1em;
  background-color: #39ff14;
  margin-left: 4px;
  box-shadow: 0 0 5px rgba(57, 255, 20, 0.7);
  /* 'animation' satırı buradan kaldırıldı */
}

/* YENİ: Sadece yazı bittiğinde yanıp sönmesini sağlayan sınıf */
.dos-cursor.blinking {
  animation: blink 1s step-end infinite;
}

@keyframes blink { 
  50% { opacity: 0; } 
}


/* --- Gelişmiş "Madeni Para" Animasyonu --- */
.harvest-particle {
  position: absolute;
  top: 50%;
  right: 15%;
  font-size: 20px;
  opacity: 0;
  animation: coin-to-counter 1.8s cubic-bezier(0.5, 0, 0.9, -0.2) forwards;
  z-index: 10;
  text-shadow: 0 0 10px #f9de90;
}
@keyframes coin-to-counter {
  0% { transform: translate(0, -50%) scale(0.6) rotate(0deg); opacity: 1; }
  30% { transform: translate(-80px, -120px) scale(1.2) rotate(360deg); }
  100% { transform: translate(-250px, 150px) scale(0) rotate(1080deg); opacity: 0; }
}

/* --- Mobil Uyum (HEPSİ BİR ARADA) --- */
@media (max-width: 600px) {

  /* ================================== */
  /* === STRATEJİ TABLOSU -> KARTLAR === */
  /* ================================== */

  /* 1. Masaüstü başlığını tamamen gizle */
  .lop-table-header {
    display: none;
  }

  /* 2. Her satırı bir "kart"a dönüştür */
  .lop-table-row {
    display: block; /* Grid yapısını iptal et */
    border: 1px solid var(--border-dark);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 12px; /* Kartlar arası boşluk */
    background-color: rgba(255, 255, 255, 0.03);
  }
  
  /* Çizgili görünümü mobilde iptal et */
  .lop-table-row:nth-child(odd) {
    background-color: rgba(255, 255, 255, 0.03);
  }

  /* 3. Hücreleri etiket-değer çiftlerine dönüştür */
  .lop-cell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.9rem;
    gap: 10px; /* <-- YENİ EKLENDİ: Başlık ve değer arasına boşluk koyar */
  }
  .lop-table-row .lop-cell:last-child {
    border-bottom: none; /* Son elemanın alt çizgisini kaldır */
  }

  /* 4. Etiketleri CSS ile otomatik olarak ekle */
  .lop-cell::before {
    content: attr(data-label);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    flex-shrink: 0; /* <-- YENİ EKLENDİ: Başlığın sıkışmasını engeller */
  }

  /* 5. Platform adını ve ikonunu özel olarak şekillendir */
  .lop-cell.platform {
    justify-content: flex-start; /* Sola yasla */
    font-size: 1.1rem;
    font-weight: 700;
    padding-top: 0;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border-dark); /* Daha belirgin ayırıcı */
  }
  .lop-cell.platform::before {
    display: none; /* Platform satırında etikete gerek yok */
  }
  .lop-cell.platform img {
    width: 28px;
    height: 28px;
  }

  /* 6. Gereksiz "operation" sütununu gizle */
  .lop-cell.operation {
    display: none;
  }

  /* 7. Yield bar'ı ayarla */
  .lop-cell.yield .yield-bar-container {
    width: 50%; /* Bar için sağda yer aç */
  }

  /* ================================== */
  /* === DOS EKRANI DÜZENLEMELERİ === */
  /* ================================== */

  /* Terminal kutusunun yüksekliğini ve iç boşluğunu ayarla */
  .lop-activity-log-container { 
    height: 110px; /* Yaklaşık 4-5 satır gösterecek kadar alan */
    padding: 12px 10px; /* Dikeyde aynı, yatayda biraz daha az boşluk */
  }

  /* Metnin alt satıra kaymasına izin ver (EN ÖNEMLİ KURAL) */
  .lop-activity-log { 
    font-size: 0.8rem;
    white-space: normal; /* Normal metinlerin kaymasını sağlar */
    height: auto;
    line-height: 1.5;
    
    /* YENİ EKLENDİ: Yükleme çubuğu satırlarının da kaymasını sağlar */
    display: block; 
    overflow-wrap: anywhere;
  }

  /* ================================== */
  /* === DİĞER MOBİL AYARLAR === */
  /* ================================== */
  
  /* Madeni para animasyonunun bitiş noktasını mobilde ayarla */
  @keyframes coin-to-counter {
    100% { transform: translate(-100px, 200px) scale(0) rotate(1080deg); opacity: 0; }
  }
}
/* --- BU BÖLÜMÜ SİLİN --- */

.progress-bar-log {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.progress-bar-track {
  width: 100%;
  height: 10px;
  background-color: rgba(57, 255, 20, 0.1);
  border-radius: 5px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background-color: #39ff14;
  border-radius: 5px;
  box-shadow: 0 0 8px rgba(57, 255, 20, 0.7);
  transition: width 0.1s linear;
}
/* YENİ EKLENDİ: Yükleme çubuğunu beyaza çevirir */
.lop-activity-log.progress-bar-log {
  color: #FFFFFF;
  text-shadow: 0 0 5px rgba(255, 255, 255, 0.4);
}
/* YENİ EKLENDİ: Swap Butonu ile Aynı Stile Sahip Ana Başlatma Butonu */
.action-button-gradient {
  width: 100%;
  padding: 16px 20px;
  border-radius: 8px; /* Köşe yuvarlaklığı */
  border: none;
  background: linear-gradient(90deg, #00c6ff 0%, #0072ff 100%); /* Mavi gradyan */
  color: white;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 4px 15px rgba(0, 150, 255, 0.2); /* Hafif bir parlama */
}

.action-button-gradient:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 150, 255, 0.3); /* Hover'da daha belirgin parlama */
  filter: brightness(1.1);
}

.action-button-gradient:disabled {
  background: #2D2F34; /* Devre dışı rengi */
  color: #6c7284;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
/* =================================================================
   FİNAL MOBİL DÜZELTMESİ (LIVE OPERATION PANEL + STRATEGY)
   ================================================================= */

/* --- 768px Altı (Tablet ve Mobil) --- */
@media (max-width: 768px) {

  /* 1. Ana panelin dışarı taşmasını engelle */
  .live-operation-panel {
    width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden; 
    padding: 12px 8px !important;
  }

  /* 2. Masaüstü başlığını gizle */
  .lop-table-header {
    display: none !important;
  }

  /* 3. Satırları Karta Dönüştür */
  .lop-table-row {
    display: flex !important;
    flex-direction: column !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 8px !important;
    padding: 10px !important;
    margin-bottom: 8px !important;
    gap: 8px !important;
  }

  /* 4. Hücreleri Satır Haline Getir (Etiket: Değer) */
  .lop-cell {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    font-size: 0.9rem !important;
    padding: 0 !important;
  }

  /* Etiketleri (Data-Label) Göster */
  .lop-cell::before {
    content: attr(data-label);
    font-weight: 600;
    color: #a0aec0;
    font-size: 0.8rem;
    text-transform: uppercase;
  }

  /* Platform Satırı (En Üstte, Etiketsiz) */
  .lop-cell.platform {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    margin-bottom: 4px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding-bottom: 8px !important;
  }
  .lop-cell.platform::before {
    display: none !important;
  }

  /* Gereksiz Operation Satırını Gizle */
  .lop-cell.operation {
    display: none !important;
  }

  /* Yield Barını Hizala */
  .yield-bar-container {
    width: 100px !important; 
  }
  
  /* Log Terminalini Düzenle */
  .lop-activity-log-container {
    height: 120px !important;
    margin-top: 10px !important;
  }
  
  .lop-activity-log {
    font-size: 0.8rem !important;
    white-space: normal !important;
  }
}

/* --- 600px Altı (Saf Mobil) --- */
@media (max-width: 600px) {
  /* Ana menü kapsayıcısını YATAY KAYDIRILABİLİR yap */
  .main-action-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: hidden !important; /* Scroll'u kesin kapat */
    justify-content: space-between !important;
    gap: 0 !important; /* Boşluğu tamamen kaldır */
    
    width: 100% !important;
    padding: 4px 3px !important; /* Kenar boşluklarını azalt */
    margin: 0 0 0px 0 !important;
    box-sizing: border-box;
  }

  .main-action-tab-button {
    flex: 0 0 auto !important;
    min-width: auto !important;
    
    font-size: 0.75rem !important;
    text-align: center !important;
    white-space: nowrap !important;
    
    /* --- GRİ KUTUNUN YÜKSEKLİĞİ VE GENİŞLİĞİ BURADAN AYARLANIR --- */
    /* İlk değer (5px) yüksekliği, ikinci değer (8px) genişliği belirler */
    padding: 9px 6px !important; 
  }
  
  /* --- TEK TEK BOŞLUK AYARLARI (Buradan Yönetin) --- */
  
  /* 1. Buton (Farm) */
  .main-action-tab-button:nth-child(1) {
    margin-right: 0px !important; 
  }

  /* 2. Buton (Stake) */
  .main-action-tab-button:nth-child(2) {
    margin-right: -3px !important;
    margin-left: -3px !important;
  }

  /* 3. Buton (Swap) */
  .main-action-tab-button:nth-child(3) {
    margin-right: -7px !important;
    margin-left: -7px !important;
  }

  /* 4. Buton (NFT) */
  .main-action-tab-button:nth-child(4) {
    margin-right: -0px !important;
    margin-left: -0px !important;
  }

  /* 5. Buton (Airdrop) */
  .main-action-tab-button:nth-child(5) {
    margin-right: -4px !important;
    margin-left: -4px !important;
  }

  /* 6. Buton (Unstake) - Sonuncuya sağ boşluk gerekmez */
  .main-action-tab-button:nth-child(6) {
    margin-left: -3px !important;
  }
}

  /* Başlangıç Stratejisi Paneli */
  .proposal-strategy-column {
    padding: 16px 12px !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between; 
    min-height: 280px; 
  }

  .proposal-column-title {
    font-size: 0.85rem !important;
    font-weight: 700;
    margin-bottom: 10px !important;
    margin-top: 0 !important;
    white-space: nowrap; 
    overflow: hidden;
    text-overflow: ellipsis; 
    flex-shrink: 0; 
  }

  .strategy-list {
    flex-grow: 1;
    gap: 8px !important; 
    justify-content: center;
    margin-bottom: 10px;
  }
  
  .strategy-row {
    font-size: 0.8rem !important;
    padding: 2px 0 !important;
    white-space: nowrap; 
  }
  
  .strategy-row img.platform-icon {
    width: 20px !important;
    height: 20px !important;
  }

  .apy-estimate {
    padding-top: 10px !important;
    margin-top: 0 !important;
    font-size: 0.75rem !important;
    white-spa
/* src/styles/PlatformStats.css */

.platform-stats-card {
  background-color: var(--card-bg-dark);
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  padding: 25px 30px;
  margin-bottom: 30px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  color: var(--text-primary-dark);
}

.light-theme .platform-stats-card {
  background-color: var(--card-bg-light);
  border-color: var(--border-light);
  color: var(--text-primary-light);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
}

.platform-stats-title {
  font-size: 1.8rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 30px;
  color: inherit;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* İki sütunlu yapı */
  gap: 25px 20px; /* Satır ve sütun aralıkları */
  text-align: center; /* İçerikleri ortala */
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
}

/* "Toplam Çıktı" için özel stil, tüm genişliği kaplasın */
.stat-item.large {
  grid-column: 1 / -1; /* İki sütunu da kapla */
  margin-bottom: 10px; /* Altındaki item'larla biraz boşluk */
}

.stat-label {
  font-size: 0.9rem;
  color: var(--text-secondary-dark);
  margin-bottom: 8px;
}

.light-theme .stat-label {
  color: var(--text-secondary-light);
}

.stat-value {
  font-size: 1.9rem;
  font-weight: 700;
  color: #3b82f6; /* Mavi tonu, ekran görüntüsüne benzer */
  line-height: 1.2;
}

.light-theme .stat-value {
   color: #2563eb; /* Gündüz modu için biraz daha koyu mavi */
}

.stat-value.fixed {
  /* Sabit değerler için özel bir renk istenirse (opsiyonel) */
  /* color: var(--text-primary-dark); */
}
.light-theme .stat-value.fixed {
  /* color: var(--text-primary-light); */
}


/* Yanıp Sönme Efekti */
.stat-value.pulsate {
  animation: pulse-effect 0.6s ease-out;
}

@keyframes pulse-effect {
  0% {
    transform: scale(1);
    opacity: 1;
    color: #3b82f6; /* Başlangıç rengi */
  }
  50% {
    transform: scale(1.08);
    opacity: 0.7;
    color: #f59e0b; /* Vurgu rengi (altın/turuncu) */
  }
  100% {
    transform: scale(1);
    opacity: 1;
    color: #3b82f6; /* Bitiş rengi */
  }
}

.light-theme .stat-value.pulsate {
  animation-name: pulse-effect-light; /* Açık tema için farklı animasyon adı */
}

@keyframes pulse-effect-light {
  0% {
    transform: scale(1);
    opacity: 1;
    color: #2563eb; 
  }
  50% {
    transform: scale(1.08);
    opacity: 0.7;
    color: #d97706; 
  }
  100% {
    transform: scale(1);
    opacity: 1;
    color: #2563eb;
  }
}


/* Mobil Cihazlar için Düzenleme */
@media (max-width: 768px) {
  .platform-stats-title {
    font-size: 1.5rem;
    margin-bottom: 20px;
  }
  .stats-grid {
    grid-template-columns: 1fr; /* Tek sütun */
    gap: 20px;
  }
  .stat-item.large {
    margin-bottom: 0; /* Tek sütunda gerek yok */
  }
  .stat-value {
    font-size: 1.6rem;
  }
  .platform-stats-card {
    padding: 20px;
  }
}/* src/styles/PartnersScroller.css */

/* ============================================= */
/* === LOGO BOYUTLARINI BURADAN TEK TEK AYARLA === */
/* ============================================= */

/* Varsayılan logo yüksekliği */
.logo-item .logo-image {
  max-height: 45px;
}

/* Özel Boyutlar */
.logo-pancakeswap .logo-image {
  max-height: 75px; 
}
.logo-nicehash .logo-image {
  max-height: 45px;
}
.logo-aave .logo-image {
  max-height: 80px;
}
.logo-defi .logo-image {
  max-height: 40px;
}
.logo-compound .logo-image {
  max-height: 45px;
}

/* ============================================= */
/* === ANA YAPI VE ANİMASYON === */
/* ============================================= */

.scroller-container {
  width: 100%;
  overflow-x: hidden;
  padding: 20px 0;
  margin-bottom: 30px;
  -webkit-mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
  mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
}

.scroller-inner {
  display: flex;
  align-items: center;
  width: fit-content;
  animation: scroll 40s linear infinite;
  will-change: transform;
  transform: translateZ(0); 
}

.scroller-container:hover .scroller-inner {
  animation-play-state: paused;
}

.logo-item {
  width: 200px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  box-sizing: border-box;
}

.logo-image {
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}

.logo-item:hover .logo-image,
.logo-item:hover .logo-text {
  transform: scale(1.1);
}

/* TEMA MANTIĞI: DİĞER LOGOLAR İÇİN */
.logo-dark { display: none; }
.logo-light { display: block; }

.dark-theme .logo-light { display: none; }
.dark-theme .logo-dark { display: block; }

/* DE.FI YAZISI İÇİN STİLLER */
.logo-text {
  font-size: 26px;
  font-weight: 700;
  margin-left: 10px;
  color: #1f2937;
  transition: transform 0.3s ease;
}

.dark-theme .logo-text {
  color: #FFFFFF;
}

@keyframes scroll {
  0% { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}/* src/styles/TwtWidget.css */

.twt-widget {
  background-color: var(--card-bg-dark);
  border: 1px solid var(--border-dark);
  color: var(--text-dark);
  border-radius: 16px;
  padding: 20px;
  font-family: 'Inter', sans-serif;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: background-color 0.3s, border-color 0.3s, color 0.3s;
}

.light-theme .twt-widget {
  background-color: var(--card-bg-light);
  border-color: var(--border-light);
  color: var(--text-light);
}

.twt-tooltip {
    background-color: rgba(20, 20, 20, 0.9);
    border: 1px solid var(--border-dark);
    padding: 4px 8px;
    border-radius: 6px;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
}

.twt-widget.loading, .twt-widget.error {
    justify-content: center;
    align-items: center;
    font-weight: 600;
}

.twt-widget.error {
    color: #F44336;
}

.widget-header {
  display: flex;
  align-items: center;
  gap: 15px;
}

/* === PNG LOGO İÇİN STİL GERİ GETİRİLDİ === */
.widget-header img {
  width: 40px;
  height: 40px;
}

.widget-title {
  flex-grow: 1;
}

.widget-title h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: inherit;
}

.widget-title .current-price {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 4px;
  display: block;
  color: inherit;
}

.price-change {
  font-weight: 700;
  font-size: 0.9rem;
  padding: 4px 8px;
  border-radius: 6px;
}

.price-change.up {
  color: #28C988;
  background-color: rgba(40, 201, 136, 0.1);
}

.price-change.down {
  color: #F44336;
  background-color: rgba(244, 67, 54, 0.1);
}

.widget-chart {
  margin-top: 15px;
  margin-left: -20px;
  margin-right: -20px;
  margin-bottom: -10px;
}/* --- BAŞLANGIÇ: src/styles/Footer.css (YENİDEN DÜZENLENDİ) --- */

.footer-container {
  width: 100%;
  padding: 3rem var(--content-padding-x-desktop) 1.5rem;
  margin-top: 10rem; 
  box-sizing: border-box;
  position: relative;
  /* DİKKAT: ARKA PLAN RENGİ TAMAMEN KALDIRILDI */
  background-color: transparent; 
  color: #d1d5db;
}
}

.footer-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--logo-solano) 0%, var(--logo-alpha) 100%);
  opacity: 0.8;
}
.footer-content {
  max-width: var(--site-max-width);
  margin: 0 auto;
}

/* YENİ FLEXBOX YAPISI: Tüm hizalama sorunlarını çözer. */
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start; /* Tüm elemanları dikeyde yukarıdan hizalar */
  gap: 2rem;
  padding-bottom: 0rem; /* Boşluk azaltıldı */
  margin-bottom: 0rem; /* Boşluk azaltıldı */
  /* GEREKSİZ ÇİZGİ KALDIRILDI */
  border-bottom: none; 
}

.footer-column.brand-column { flex: 2; }
.footer-column.legal-column { flex: 1; }
.footer-column.location-column { flex: 1.5; }
.footer-column.social-card-wrapper {
flex: 1.5;

margin-top: -3rem;
}

.footer-column .logo-container { margin-bottom: 1.25rem; }
.footer-description { color: #9ca3af; line-height: 1.7; font-size: 0.95rem; max-width: 380px; }
.footer-heading { color: #f9fafb; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; margin-bottom: 1.5rem; }
.footer-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; }
.footer-links a { text-decoration: none; font-size: 1rem; font-weight: 500; color: #d1d5db; transition: color 0.2s ease, transform 0.2s ease; display: inline-block; }
.footer-links a:hover { color: #ffffff; transform: translateX(4px); }

.footer-bottom {
display: flex;
justify-content: center; 
align-items: center;
padding-top: 0rem;

border-top: none;
}
.copyright-text { color: #9ca3af; font-size: 0.9rem; font-weight: 500; }

.footer-affiliation {
  margin-top: 0.75rem;
  margin-bottom: 1.5rem;
  padding: 0.5rem 0.75rem;
  background-color: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 0.9rem;
  color: #d1d5db;
  text-align: left; /* Metni sola hizala */
  max-width: 380px;
  line-height: 1.5;
}

.footer-affiliation strong {
  font-weight: 600;
  color: #ffffff;
}

.location-info-link {
  text-decoration: none;
  border-radius: 8px;
  padding: 0.5rem;
  margin: -0.5rem; 
  transition: background-color 0.2s ease;
  display: inline-block;
}
.location-info-link:hover {
  background-color: rgba(255, 255, 255, 0.05);
}
.location-info {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  cursor: pointer;
}
.location-icon {
  flex-shrink: 0;
  margin-top: 4px;
  color: #DC2626;
}
.location-text p,
.location-text span {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  font-weight: 500;
  color: #d1d5db;
}
.location-text span {
  font-size: 0.9rem;
  color: #9ca3af;
}

/* RESPONSIVE DÜZENLEMELER */
@media (max-width: 1024px) {
  .footer-top {
    flex-wrap: wrap; /* Sığmayan elemanları alt satıra at */
  }
  .footer-column.brand-column {
    flex-basis: 100%; /* Marka sütunu tam genişlik kaplasın */
  }
}

@media (max-width: 768px) {
  .footer-top {
    flex-direction: column;
    align-items: center; /* Mobilde her şeyi ortala */
    text-align: center;
  }
  .footer-column {
    width: 100%;
    align-items: center;
  }
  .brand-column .logo-container, .location-info { 
    justify-content: center; 
  }
  .footer-affiliation {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
  .footer-bottom {
    flex-direction: column;
    gap: 1.5rem;
  }
  .footer-links a:hover { transform: none; }
}

/* --- BİTİŞ: src/styles/Footer.css --- *//* src/styles/Modal.css */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(10, 10, 20, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  animation: fadeIn 0.3s ease;
}

.modal-content {
  background-color: var(--card-bg-dark);
  color: var(--text-dark);
  border: 1px solid var(--border-dark);
  border-radius: 16px;
  width: 90%;
  max-width: 700px;
  max-height: 85vh;
  display: grid; /* Flexbox yerine Grid kullanıyoruz */
  grid-template-rows: auto 1fr; /* Header'a kendi yüksekliğini, Body'ye kalan tüm alanı veriyoruz */
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  animation: slideIn 0.4s ease-out;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--border-dark);
}

.modal-title {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
}

.modal-close-button {
  background: none;
  border: none;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--text-secondary-dark);
  cursor: pointer;
  transition: color 0.2s, transform 0.2s;
}

.modal-close-button:hover {
  color: var(--brand-green);
  transform: rotate(90deg);
}

.modal-body {
  padding: 2rem; /* Üst padding'i tekrar ekleyerek daha dengeli bir görünüm sağladım */
  overflow-y: auto;
  line-height: 1.7;
  
  min-height: 0;     /* EKLENECEK: İçerik taşsa bile küçülmesine izin verir, bu da kaydırmayı tetikler */
}

.modal-body h4 {
  color: var(--brand-green);
  margin-top: 2rem;
  margin-bottom: 0.5rem;
}

.modal-body p, .modal-body li {
  color: #d1d5db; /* Açık gri tonu, daha okunabilir */
  font-size: 1rem;
}

.modal-body ul {
    padding-left: 20px;
}

/* === MODERN KAYDIRMA ÇUBUĞU === */
.modal-body::-webkit-scrollbar {
  width: 10px;
}

.modal-body::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

.modal-body::-webkit-scrollbar-thumb {
  background: var(--brand-blue);
  border-radius: 10px;
  border: 2px solid var(--card-bg-dark); /* Thumb'a track'ten boşluk hissi verir */
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background: var(--brand-blue-hover);
}


/* Animasyonlar */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideIn {
  from { transform: translateY(-50px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}/* src/styles/SupportForm.css */

.support-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.support-form-intro {
    font-size: 1rem;
    color: var(--text-secondary);
    margin: 0 0 0.5rem 0;
    line-height: 1.6;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 0.8rem 1rem;
    border-radius: 8px;
    font-size: 1rem;
    font-family: inherit;
    outline: none;
    border: 1px solid var(--ui-border);
    background-color: var(--bg-main);
    color: var(--text-primary);
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box; /* Önemli */
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(51, 133, 255, 0.2);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-submit-button {
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    background-color: var(--accent);
    color: white;
    transition: background-color 0.2s;
    align-self: flex-start; /* Butonu sola yaslar */
}

.form-submit-button:hover:not(:disabled) {
    background-color: #2968CC; /* Vurgu renginin koyu tonu */
}

.form-submit-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.support-form-feedback {
    text-align: center;
    padding: 2rem;
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-primary);
}.hybrid-display-container {
  position: relative;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.hybrid-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(40, 50, 70, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 8px 12px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
  font-family: monospace; /* Adreslerin daha iyi görünmesi için */
}

.hybrid-chip:hover {
  background: rgba(50, 60, 80, 0.9);
}

.chain-icon {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white; /* İkon yüklenemezse beyaz bir daire görünsün */
}

.chevron {
  font-size: 12px;
  transition: transform 0.2s ease;
  transform-origin: center;
  margin-left: 4px;
}
.chevron.down {
  transform: scaleY(1);
}
.chevron.up {
  transform: scaleY(-1);
}

.hybrid-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 320px;
  background: #1E293B; /* Koyu mavi-gri */
  border: 1px solid #334155; /* Biraz daha açık sınır */
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  z-index: 100;
  padding: 8px;
  color: #E2E8F0; /* Açık gri metin */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.dropdown-header {
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #94A3B8; /* Muted renk */
  border-bottom: 1px solid #334155;
  margin-bottom: 8px;
}

.chain-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #475569 #1E293B;
}
.chain-list::-webkit-scrollbar {
  width: 6px;
}
.chain-list::-webkit-scrollbar-track {
  background: #1E293B;
}
.chain-list::-webkit-scrollbar-thumb {
  background-color: #475569;
  border-radius: 6px;
}

.chain-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
}

.chain-details {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.chain-name {
  font-weight: 600;
  font-size: 15px;
  color: #F1F5F9; /* Neredeyse beyaz */
}

.chain-address {
  font-size: 13px;
  color: #94A3B8;
  font-family: monospace;
}

.disconnect-button {
  margin-top: 12px;
  padding: 12px;
  width: 100%;
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.4);
  color: #F87171;
  font-weight: 600;
  font-size: 15px;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.disconnect-button:hover {
  background: rgba(239, 68, 68, 0.4);
  color: #FECACA;
  border-color: rgba(239, 68, 68, 0.6);
}
.chain-item {
  position: relative;
  transition: background-color 0.2s ease;
}

.chain-item.clickable:hover {
  background-color: #334155; /* Hover rengi */
  cursor: pointer;
}

.chain-item.active {
  background-color: rgba(79, 70, 229, 0.2); /* Aktif zincir için vurgu rengi (Indigo) */
}

.chain-item.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.active-indicator {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: #4ADE80; /* Yeşil */
  border-radius: 50%;
  box-shadow: 0 0 8px #4ADE80;
}.hybrid-modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(8px);
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

.hybrid-modal-content {
  background: #1E293B; /* Koyu mavi-gri */
  border-radius: 24px;
  padding: 24px;
  width: 90%;
  max-width: 400px;
  border: 1px solid #334155;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  position: relative;
  color: #F1F5F9;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.hybrid-modal-close-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.1);
  border: none;
  border-radius: 50%;
  color: #94A3B8;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s, color 0.2s;
}

.hybrid-modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: white;
}

.hybrid-modal-header {
  text-align: center;
  padding-bottom: 16px;
  border-bottom: 1px solid #334155;
}

.hybrid-modal-header .main-address {
  font-size: 24px;
  font-weight: 600;
  font-family: monospace;
}

.hybrid-modal-header .chain-name {
  font-size: 14px;
  color: #94A3B8;
  margin-top: 4px;
}

.address-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.address-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #293548;
  padding: 12px 16px;
  border-radius: 12px;
}

.address-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.address-info .icon {
  width: 24px;
  height: 24px;
}

.address-info .details {
  display: flex;
  flex-direction: column;
}

.address-info .chain-title {
  font-weight: 600;
}

.address-info .address-text {
  font-size: 14px;
  color: #94A3B8;
  font-family: monospace;
}

.copy-button {
  background: transparent;
  border: 1px solid #475569;
  color: #94A3B8;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  transition: all 0.2s;
}

.copy-button:hover {
  background: #334155;
  color: white;
}

.copy-button.copied {
  background: #22C55E;
  border-color: #22C55E;
  color: white;
}/* =================================================================
   PERFORMANSLI KRİPTO ŞERİDİ (GPU DESTEKLİ CSS ANİMASYONU)
   ================================================================= */

.crypto-ticker-container {
  width: 100%;
  overflow: hidden; /* Dışarı taşan kısımları gizle */
  padding: 10px 0;
  
  /* NİHAİ DÜZELTME: Arka planı tamamen şeffaf yapıyoruz.
     Blur efekti zaten bir üst katmandan (.fixed-top-panel) geliyor. */
  background-color: transparent;

  /* PERFORMANS: Bu katmanı izole et */
  contain: layout style paint;
}

/* Gündüz modunda da şeffaf kalmasını garantiliyoruz */
.light-theme .crypto-ticker-container {
  background-color: transparent;
}

/* 2. İç Sarmalayıcı: Animasyonun uygulanacağı bölüm */
.ticker-wrapper {
  display: flex; /* İçindeki elemanları yan yana diz */
  width: fit-content; /* İçeriğin toplam genişliği kadar olsun */
  
  /* PERFORMANS: Animasyonun GPU'da çalışmasını sağlar */
  will-change: transform;
  animation: scroll 120s linear infinite; /* Animasyonu uygula */
}

.ticker-wrapper:hover {
  animation-play-state: paused; /* Üzerine gelince dursun */
}

/* 3. Animasyonun Kendisi: İçeriği soldan sağa kaydırır */
@keyframes scroll {
  0% {
    transform: translateX(-50%);
  }
  100% {
    /* %50 kaydırır, çünkü içerik iki kopyadan oluşur */
    transform: translateX(0);
  }
}

/* 4. Her bir kripto öğesi */
.ticker-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 28px;
  white-space: nowrap; /* Yazıların alt satıra kaymasını engelle */
  color: #fff;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ticker-item:hover {
  background-color: rgba(255, 255, 255, 0.05);
}

.ticker-item img {
  width: 24px;
  height: 24px;
}

.ticker-item .symbol {
  font-weight: 700;
  font-size: 1.1rem;
}

.ticker-item .price {
  font-size: 1rem;
}

.ticker-item .change {
  display: flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9rem;
}

.ticker-item .change.up {
  color: #28C988;
  background-color: rgba(40, 201, 136, 0.15);
}

.ticker-item .change.down {
  color: #ef4444;
  background-color: rgba(239, 68, 68, 0.15);
}.homepage-wrapper {
    position: relative;
    /* DÜZELTME: Gereksiz ve daha kötü görünen font-family kuralı kaldırıldı.
       Bu sayede bu bileşen, App.css'ten gelen modern ve net 'Inter' fontunu
       miras alacak ve uygulamanın geri kalanıyla tutarlı olacaktır. */
	color: white;
}

.animated-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    background: 
        radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 40%),
        radial-gradient(circle at 80% 30%, rgba(255, 119, 198, 0.3) 0%, transparent 40%),
        linear-gradient(180deg, #1a1a2e 40%, #0a0a0f 75%, #000000 100%);
    animation: hue-shift 20s infinite linear;
    contain: paint; /* PERFORMANS: Bu katmanı da izole ediyoruz. */
    will-change: filter; /* PERFORMANS: 'hue-rotate' filtresinin GPU ile yapılacağını belirtiyoruz. */
}

@keyframes hue-shift {
    to { filter: hue-rotate(360deg); }
}

@media (max-width: 768px) {
    .animated-background {
        /* DÜZELTME: Bu kural bloğu artık boş kalabilir veya tamamen silinebilir,
           çünkü masaüstü stilleri artık mobil için de geçerli olacak.
           Şimdilik, ileride mobil-özel bir stil gerekebileceği ihtimaline karşı boş bırakıyoruz.
           'animation: none;' kuralı kaldırıldığı için animasyonlar artık mobilde de çalışacak. */
    }
}

.particles-container {
  /* Tüm viewport’a sabitlenmiş; fakat tamamen akış DIŞINDA ve görsel olarak arkada */
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;             /* .animated-background ile aynı derinlikte geriye al */
  pointer-events: none;
  contain: paint;          /* PERFORMANS: Tarayıcıya bu katmanın sadece 'boyanacağını', layout'u etkilemeyeceğini söyler. */
  will-change: transform, opacity; /* PERFORMANS: Tarayıcıya bu katmanı GPU'ya taşıması için ipucu verir. */
}

.particle {
	position: absolute;
	width: 2px;
	height: 2px;
	background: #00f5ff;
	border-radius: 50%;
	opacity: 0.7;
	animation: float 20s infinite linear;
}

@keyframes float {
	0% { transform: translateY(100vh) translateX(0px); opacity: 0; }
	10% { opacity: 0.7; }
	90% { opacity: 0.7; }
	100% { transform: translateY(-10vh) translateX(100px); opacity: 0; }
}


.hero-container {
    position: relative;
    max-width: 1280px;
    margin: 0 auto;
    text-align: center;
    z-index: 2;
    padding-top: 160px;
    
    /* DÜZELTME: Tüm ekran boyutlarında geçerli olacak yatay boşluk eklendi.
       Bu, kartların kenarlara yapışmasını engeller ve onlara orantılı
       davranmaları için gerekli alanı sağlar. */
    padding-left: 24px;
    padding-right: 24px;
    box-sizing: border-box; /* Padding'in, max-width'ı aşmasını engeller */
}

.hero-content {
    text-align: center;
    /* DÜZELTME: Kartlarla arasındaki boşluk artırıldı. */
    margin-bottom: 120px;
    opacity: 1;
    animation: none;
    padding-top: 10px;
}

.hero-title {
	font-size: clamp(3rem, 8vw, 6rem);
	font-weight: 800;
	margin-bottom: 20px;
	line-height: 1.1;
    /* Bu renk, gradyan çalışmazsa metnin görünür kalmasını sağlar */
    color: white; 
}

/* KESİN ÇÖZÜM: Gradyan efekti, metni doğrudan içeren <span> etiketlerine uygulanır.
   Bu, metnin kaybolmasını kalıcı olarak engeller. */
.hero-title span {
	background: linear-gradient(135deg, #00f5ff, #ff00aa, #00f5ff);
	background-size: 200% 200%;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: gradientShift 3s ease-in-out infinite;
    display: inline-block; /* Animasyon ve gradyan için gereklidir */
}

@keyframes gradientShift {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

@keyframes fadeInUp {
	from { opacity: 0; transform: translateY(50px); }
	to { opacity: 1; transform: translateY(0); }
}

.hero-subtitle {
	font-size: clamp(1.2rem, 3vw, 1.8rem);
	color: #a0a0ff;
	margin-bottom: 15px;
	font-weight: 300;
}

.hero-description {
	font-size: clamp(1rem, 2vw, 1.2rem);
	color: #888;
	max-width: 600px;
	line-height: 1.6;
    margin: 0 auto;
}

.features-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/* DÜZELTME: Kartlar arasındaki boşluk artırıldı. */
	gap: 35px;
	max-width: 1400px;
	width: 100%;
	margin: 0 auto;
}

.hp-feature-card {
    position: relative;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25); /* Kenarlık biraz daha belirginleştirildi */
    /* DÜZELTME: Köşeler daha modern bir görünüm için netleştirildi. */
    border-radius: 24px;
    padding: 40px 30px;
    backdrop-filter: blur(15px);
    transform: perspective(1000px) rotateY(-90deg);
    opacity: 0;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    cursor: pointer;
    overflow: hidden;
    outline: none;
    /* YENİ EKLENDİ: Kartlara derinlik hissi veren ince bir gölge. */
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.hp-feature-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	/* DÜZELTME: Köşe yuvarlaklığı, ana kart ile aynı değere (24px) getirildi. */
	border-radius: 24px;
	padding: 2px;
	background: linear-gradient(135deg, transparent, rgba(0, 245, 255, 0.5), rgba(255, 0, 170, 0.5), transparent);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask-composite: exclude;
	-webkit-mask-composite: destination-out;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.hp-feature-card.animate-in { transform: perspective(1000px) rotateY(0deg); opacity: 1; }

/* İstenen Efekt: Bu kurallar hem masaüstü (hover) hem de mobil (tap) için geçerlidir */
.hp-feature-card:hover {
	transform: perspective(1000px) rotateY(0deg) translateY(-10px) scale(1.02);
	box-shadow: 0 20px 40px rgba(0, 245, 255, 0.2), 0 0 100px rgba(0, 245, 255, 0.1);
}

/* İstenmeyen Efekt: Bu kural SADECE fareli cihazlarla sınırlandırıldı */
@media (hover: hover) {
    .hp-feature-card:hover::before {
        opacity: 1;
    }
}

.hp-card-icon {
	width: 50px;
	height: 50px;
	border-radius: 20px;
	background: linear-gradient(135deg, #00f5ff, #ff00aa);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	margin-bottom: 25px;
	position: relative;
	overflow: hidden;
	margin-top: -15px;
}

.cta-section { 
    margin-top: 120px; 
    text-align: center; 
    opacity: 1;
    /* Footer ile rakamlar arasındaki boşluğu buradan artırıyoruz */
    margin-bottom: 150px; 
}
.cta-button {
	background: linear-gradient(135deg, #00f5ff, #ff00aa); border: none; color: white; padding: 18px 40px;
	font-size: 1.1rem; font-weight: 600; border-radius: 30px; cursor: pointer; position: relative;
	overflow: hidden; transition: all 0.3s ease; text-transform: uppercase; letter-spacing: 1px;
}
.cta-button:hover { transform: translateY(-3px); box-shadow: 0 15px 30px rgba(0, 245, 255, 0.4); }
.tech-stats { display: flex; justify-content: center; gap: 50px; margin-top: 40px; flex-wrap: wrap; }
.stat-item { 
    text-align: center; 
    /* DÜZELTME: Animasyon artık gereksiz. Opaklık 1 olarak ayarlandı. */
    opacity: 1;
}
.stat-number { font-size: 2.5rem; font-weight: 800; color: #00f5ff; display: block; }
.stat-label { color: #888; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; }

/* Daha küçük mobil cihazlar için ince ayarlar */
@media (max-width: 480px) {
    /* DÜZELTME: padding: 10px yerine yanlardan 24px boşluk verildi */
	.hero-container { padding: 120px 24px 60px 24px; } 
	.hp-feature-card { margin: 0; padding: 20px 15px; border-radius: 25px; } /* Margin 5px kaldırıldı */
	.features-grid { gap: 15px; }
	.tech-stats { flex-direction: column; gap: 20px; align-items: center; }
	.stat-item { min-width: 120px; }
	.cta-button { padding: 14px 30px; font-size: 0.95rem; }
}

/* Loading animasyonu */
.loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #0a0a0f; display: flex; align-items: center; justify-content: center; z-index: 1000; animation: fadeOut 1s ease-out 0.5s forwards; }
.loading-squircle { width: 60px; height: 60px; border-radius: 20px; background: linear-gradient(45deg, #00f5ff, #ff00aa); animation: loadingPulse 1.5s ease-in-out infinite; }
@keyframes loadingPulse { 0%, 100% { transform: scale(1) rotate(0deg); border-radius: 20px; } 50% { transform: scale(1.2) rotate(180deg); border-radius: 30px; } }
@keyframes fadeOut { to { opacity: 0; visibility: hidden; } }

/* ======================================================= */
/* === NİHAİ VE AKICI VAKUM EFEKTİ STİLLERİ === */
/* ======================================================= */

/* Kapsayıcıya .is-fading-out class'ı eklendiğinde... */
#vacuum-content.is-fading-out .vacuum-item {
    /* ...içindeki her bir .vacuum-item şeffaflaşsın ve 40px yukarı kaysın. */
    opacity: 0;
    transform: translateY(-40px);
}

/* .vacuum-item'ların genel stili ve geçiş (transition) ayarları */
.vacuum-item {
/ Değişikliklerin 0.5 saniye sürmesini ve yumuşak olmasını sağlar /
transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1);
display: inline-block; / Düzgün transform için gerekli */
will-change: transform, opacity;
}

/* --- Sıralı Animasyon için Gecikmeler --- */
/* Her bir .vacuum-item'a bir sonrakinden daha geç başlaması için gecikme verilir. */
#vacuum-content .vacuum-item:nth-of-type(1) { transition-delay: 0.0s; }
#vacuum-content .vacuum-item:nth-of-type(2) { transition-delay: 0.05s; }
#vacuum-content .vacuum-item:nth-of-type(3) { transition-delay: 0.1s; }
#vacuum-content .vacuum-item:nth-of-type(4) { transition-delay: 0.15s; }
#vacuum-content .vacuum-item:nth-of-type(5) { transition-delay: 0.2s; }

/* ================================================= */
/* === NİHAİ ANA SAYFA MOBİL DÜZELTMESİ (OVERRIDE) === */
/* ================================================= */

@media (max-width: 768px) {
  .hero-container {
    /* Kenar boşlukları ekle */
    padding: 120px 24px 60px 24px;
    box-sizing: border-box;
    width: 100%;
  }

  /* Başlık ve metinlerin boyutunu küçült */
  .hero-title {
    font-size: clamp(2.2rem, 10vw, 3rem);
    line-height: 1.25;
  }

  .hero-subtitle {
    font-size: clamp(1.1rem, 4vw, 1.2rem);
  }
  
  .hero-description {
    font-size: clamp(0.9rem, 3vw, 1rem);
  }
  
  /* DÜZELTME: Kartları tek sütuna zorlayan "grid-template-columns: 1fr;" kuralı kaldırıldı.
     Bu, 2 sütunlu düzenin daha dar ekranlara kadar korunmasını sağlar. */
  .features-grid {
    gap: 20px;
    width: 100%;
  
  }

  /* Kartların iç boşluğunu azalt */
  .hp-feature-card {
    padding: 30px 25px;
    height: auto !important; /* Yükseklik animasyonunu mobilde iptal et */
  }

  /* Kart açıklamaları mobilde her zaman görünsün */
  .hp-feature-card .card-description {
    opacity: 1;
    max-height: 200px;
    margin-top: 1rem;
  }
  
  /* Buton altındaki sayaçları alt alta diz */
  .tech-stats {
    flex-direction: column;
    gap: 30px;
  }

  .stat-number {
    font-size: 2rem;
  }
}

/* ========================================================= */
/* === "OXANIUM" FONT AYARLARI                        === */
/* ========================================================= */

/* Ana Başlık */
.hero-title {
    font-family: 'Oxanium', sans-serif;
    font-weight: 700; /* Bold */
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Alt Başlık */
.hero-subtitle {
    font-family: 'Oxanium', sans-serif;
    font-weight: 400; /* Regular */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Açıklama Metni */
.hero-description {
    font-family: 'Oxanium', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Kart Başlıkları */
.card-title {
    font-family: 'Oxanium', sans-serif;
    font-weight: 600; /* Semibold */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Kart Açıklamaları */
.card-description {
    font-family: 'Oxanium', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* === ANA SAYFA CTA — İçi de RGB gradyanlı, koyu dolgu yok === */
.homepage-cta-button {
  position: relative;
  display: inline-block;
  padding: 14px 40px;
  border-radius: 56px;
  color: #fff !important;
  text-decoration: none;
  font-family: 'Oxanium', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;

  /* İç dolgu + border aynı RGB gradyan — lacivert arka plan yok */
  background:
    linear-gradient(90deg, #00eaff 0%, #7b61ff 50%, #ff3bc3 100%) padding-box,
    linear-gradient(90deg, #00eaff 0%, #7b61ff 50%, #ff3bc3 100%) border-box !important;
  border: 1.5px solid transparent;
  background-color: transparent !important;

  box-shadow: 0 10px 30px rgba(0,0,0,.35), 0 0 18px rgba(138,43,226,.25);
  transition: box-shadow .25s ease, transform .25s ease, filter .25s ease;
}

.homepage-cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.45), 0 0 22px rgba(138,43,226,.35);
  filter: brightness(1.06);
}

/* Küçük ekran ayarı */
@media (max-width: 480px) {
  .homepage-cta-button {
    padding: 12px 26px;
    font-size: .95rem;
    letter-spacing: .03em;
  }
}

/* ======================================================
   NİHAİ (v3) - YUMUŞATILMIŞ VE ZARİF GLITCH EFEKTİ
   (CodePen Referansına Göre)
   ====================================================== */

.soft-glitch {
  position: relative;
  /* Orijinal metnin rengini ve pozisyonunu sabit tutuyoruz */
}

/* 
  Bu iki katman, CodePen'deki gibi metnin kırmızı ve cyan renkli
  "hayalet" kopyalarıdır. Sadece parazit anlarında belirirler.
*/
.soft-glitch::before,
.soft-glitch::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  clip-path: inset(50% 50% 50% 50%); /* Başlangıçta tamamen gizli */
}

/* Kırmızı kanalın hayaleti */
.soft-glitch::before {
  color: #ff003c;
  animation: soft-glitch-anim-1 2.5s infinite linear alternate;
}

/* Cyan kanalın hayaleti */
.soft-glitch::after {
  color: #00ffc8;
  animation: soft-glitch-anim-2 2s infinite linear alternate;
}


/* 
  Bu, tüm efekti yöneten anahtar animasyondur.
  Zamanın çoğunda (%0-%95) hiçbir şey yapmaz.
  Sadece son %5'lik dilimde anlık bir parazitlenme yaratır.
  "skew" (yamultma) yerine sadece "translate" (kaydırma) kullanır.
*/
@keyframes soft-glitch-anim-1 {
  0%, 95% {
    transform: translate(0, 0);
    clip-path: inset(50% 50% 50% 50%);
  }
  96% {
    transform: translate(-3px, -2px); /* SOLA ve YUKARI kaydır */
    clip-path: inset(20% 0 65% 0);   /* Metnin bir parçasını yırt */
  }
  97% {
    transform: translate(2px, 3px);  /* SAĞA ve AŞAĞI kaydır */
    clip-path: inset(80% 0 5% 0);
  }
  98% {
    transform: translate(-1px, 2px); /* HAFİF SOLA ve AŞAĞI kaydır */
    clip-path: inset(40% 0 33% 0);
  }
  99%, 100% {
    transform: translate(0, 0);
    clip-path: inset(50% 50% 50% 50%);
  }
}

/* İkinci hayalet için biraz daha farklı bir animasyon */
@keyframes soft-glitch-anim-2 {
  0%, 96% {
    transform: translate(0, 0);
    clip-path: inset(50% 50% 50% 50%);
  }
  97% {
    transform: translate(2px, 1px);    /* SAĞA ve AŞAĞI */
    clip-path: inset(90% 0 1% 0);
  }
  98% {
    transform: translate(-2px, -3px);  /* SOLA ve YUKARI */
    clip-path: inset(15% 0 70% 0);
  }
  99%, 100% {
    transform: translate(0, 0);
    clip-path: inset(50% 50% 50% 50%);
  }
}

/* TextGlitch component'ini ortalamak için */
.hero-title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2em;
}


/* src/components/TextGlitch.css DOSYASININ İÇERİĞİ */

.TextGlitch {
	--TextGlitch-blendSize: .08em;
	--TextGlitch-blendColorA: #77f8;
	--TextGlitch-blendColorB: #ff68;
	
	position: relative;
	line-height: 1em;
	letter-spacing: -.1ch;
    
    /* YENİ EKLENEN ANİMASYON: Metnin kendisini ara sıra hafifçe soldurur */
    animation: main-flicker 7s infinite;
}

.TextGlitch-clip {
	position: relative;
	display: flex;
	align-items: baseline;
}
.TextGlitch-clip + .TextGlitch-clip {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}
.TextGlitch:not( .TextGlitch-blended ) .TextGlitch-clip + .TextGlitch-clip {
	display: none;
}

.TextGlitch-word {
	margin: 0;
	white-space: nowrap;
    /* İÇİ KESİNLİKLE BOŞ OLMALI. 
       Tüm renk ve stilini dışarıdaki .hero-title'dan alacak. */
}

.TextGlitch-blend {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: .1s;
	transition-property: opacity;
}
.TextGlitch-blendA {
	color: var( --TextGlitch-blendColorA );
	margin: calc( var( --TextGlitch-blendSize ) * -1 ) 0 0 var( --TextGlitch-blendSize );
	mix-blend-mode: darken;
}
.TextGlitch-blendB {
	color: var( --TextGlitch-blendColorB );
	margin: var( --TextGlitch-blendSize ) 0 0 calc( var( --TextGlitch-blendSize ) * -1 );
	mix-blend-mode: color-burn;
}
.TextGlitch-blended .TextGlitch-blend {
	opacity: .4;
}
/* Ana metnin ara sıra hafifçe kaybolmasını sağlayan animasyon */
@keyframes main-flicker {
    /* Animasyonun %99'u boyunca metin tam görünür */
    0%, 98% {
        opacity: 1;
    }
    /* Sadece %1'lik bir anda çok kısa süreliğine soluklaşır */
    99% {
        opacity: 0.1;
    }
    100% {
        opacity: 1;
    }
}/* src/AppKitOverrides.css (Sadece Trust Wallet ve SafePal Gösterimi İçin Güncellendi) */

/*
  ANA MANTIK:
  1. Önce "All Wallets" görünümündeki TÜM cüzdanları gizliyoruz.
  2. Sonra, sadece Trust Wallet ve SafePal'i (eğer yüklüyse) görünür yapıyoruz.
  3. Sosyal medya, e-posta, "or" ayırıcı ve "All Wallets" butonu gibi diğer her şeyi gizliyoruz.
*/

/* 1. "Connect Wallet" (Ana) Ekranı Ayarları */

/* Sosyal Medya & E-posta Girişlerini Gizle */
w3m-modal-content w3m-social-login-widget,
w3m-modal-content w3m-email-login-widget {
  display: none !important;
}

/* "or" Ayıracını Gizle */
w3m-modal-content .w3m-separator {
  display: none !important;
}

/* "All Wallets" Butonunu Gizle */
w3m-modal-content button.w3m-button {
  display: none !important;
}

/* WalletConnect ve MetaMask'ı Ana Ekranda Gizle (Sadece Trust Wallet kalsın) */
w3m-modal-content w3m-wallet-button[name="WalletConnect"],
w3m-modal-content w3m-wallet-button[name="MetaMask"] {
    display: none !important;
}

/* 2. "All Wallets" (Tüm Cüzdanlar) Ekranı Ayarları */

/* Önce TÜM cüzdanları gizle */
w3m-modal-router ~ div w3m-wallet-button {
  display: none !important;
}

/* Şimdi SADECE Trust Wallet ve SafePal'i görünür yap */
w3m-modal-router ~ div w3m-wallet-button[name="Trust Wallet"],
w3m-modal-router ~ div w3m-wallet-button[name="SafePal"] {
  display: block !important;
}
/* ───────── WalletConnect QR kartı — sağdaki scrollbar fix ───────── */

/* Modal köklerini taşmadan göster: dikey scroll'u kapat */
.w3m-modal,
w3m-modal,
w3m-modal-content {
  overflow: hidden !important;
  -ms-overflow-style: none !important; /* IE/old Edge */
  scrollbar-width: none !important;    /* Firefox */
}

/* WebKit scroll barını tamamen gizle */
.w3m-modal::-webkit-scrollbar,
w3m-modal::-webkit-scrollbar,
w3m-modal-content::-webkit-scrollbar {
  display: none !important;
}

/* Kartın içini de taşırma yapmayacak şekilde sabitle */
w3m-modal-content .w3m-modal-card,
w3m-modal-content .w3m-modal-router,
w3m-modal-content .w3m-qrcode {
  overflow: hidden !important;
}

/* Güvenli boşluk: kartın dış kenarı taşmasın */
w3m-modal-content .w3m-modal-card {
  max-height: 100vh !important;
}

:root {
  --toastify-color-light: #fff;
  --toastify-color-dark: #121212;
  --toastify-color-info: #3498db;
  --toastify-color-success: #07bc0c;
  --toastify-color-warning: #f1c40f;
  --toastify-color-error: hsl(6, 78%, 57%);
  --toastify-color-transparent: rgba(255, 255, 255, 0.7);

  --toastify-icon-color-info: var(--toastify-color-info);
  --toastify-icon-color-success: var(--toastify-color-success);
  --toastify-icon-color-warning: var(--toastify-color-warning);
  --toastify-icon-color-error: var(--toastify-color-error);

  --toastify-container-width: fit-content;
  --toastify-toast-width: 320px;
  --toastify-toast-offset: 16px;
  --toastify-toast-top: max(var(--toastify-toast-offset), env(safe-area-inset-top));
  --toastify-toast-right: max(var(--toastify-toast-offset), env(safe-area-inset-right));
  --toastify-toast-left: max(var(--toastify-toast-offset), env(safe-area-inset-left));
  --toastify-toast-bottom: max(var(--toastify-toast-offset), env(safe-area-inset-bottom));
  --toastify-toast-background: #fff;
  --toastify-toast-padding: 14px;
  --toastify-toast-min-height: 64px;
  --toastify-toast-max-height: 800px;
  --toastify-toast-bd-radius: 6px;
  --toastify-toast-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
  --toastify-font-family: sans-serif;
  --toastify-z-index: 9999;
  --toastify-text-color-light: #757575;
  --toastify-text-color-dark: #fff;

  /* Used only for colored theme */
  --toastify-text-color-info: #fff;
  --toastify-text-color-success: #fff;
  --toastify-text-color-warning: #fff;
  --toastify-text-color-error: #fff;

  --toastify-spinner-color: #616161;
  --toastify-spinner-color-empty-area: #e0e0e0;
  --toastify-color-progress-light: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
  --toastify-color-progress-dark: #bb86fc;
  --toastify-color-progress-info: var(--toastify-color-info);
  --toastify-color-progress-success: var(--toastify-color-success);
  --toastify-color-progress-warning: var(--toastify-color-warning);
  --toastify-color-progress-error: var(--toastify-color-error);
  /* used to control the opacity of the progress trail */
  --toastify-color-progress-bgo: 0.2;
}

.Toastify__toast-container {
  z-index: var(--toastify-z-index);
  -webkit-transform: translate3d(0, 0, var(--toastify-z-index));
  position: fixed;
  width: var(--toastify-container-width);
  box-sizing: border-box;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.Toastify__toast-container--top-left {
  top: var(--toastify-toast-top);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--top-center {
  top: var(--toastify-toast-top);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.Toastify__toast-container--top-right {
  top: var(--toastify-toast-top);
  right: var(--toastify-toast-right);
  align-items: end;
}
.Toastify__toast-container--bottom-left {
  bottom: var(--toastify-toast-bottom);
  left: var(--toastify-toast-left);
}
.Toastify__toast-container--bottom-center {
  bottom: var(--toastify-toast-bottom);
  left: 50%;
  transform: translateX(-50%);
  align-items: center;
}
.Toastify__toast-container--bottom-right {
  bottom: var(--toastify-toast-bottom);
  right: var(--toastify-toast-right);
  align-items: end;
}

.Toastify__toast {
  --y: 0;
  position: relative;
  touch-action: none;
  width: var(--toastify-toast-width);
  min-height: var(--toastify-toast-min-height);
  box-sizing: border-box;
  margin-bottom: 1rem;
  padding: var(--toastify-toast-padding);
  border-radius: var(--toastify-toast-bd-radius);
  box-shadow: var(--toastify-toast-shadow);
  max-height: var(--toastify-toast-max-height);
  font-family: var(--toastify-font-family);
  /* webkit only issue #791 */
  z-index: 0;
  /* inner swag */
  display: flex;
  flex: 1 auto;
  align-items: center;
  word-break: break-word;
}

@media only screen and (max-width: 480px) {
  .Toastify__toast-container {
    width: 100vw;
    left: env(safe-area-inset-left);
    margin: 0;
  }
  .Toastify__toast-container--top-left,
  .Toastify__toast-container--top-center,
  .Toastify__toast-container--top-right {
    top: env(safe-area-inset-top);
    transform: translateX(0);
  }
  .Toastify__toast-container--bottom-left,
  .Toastify__toast-container--bottom-center,
  .Toastify__toast-container--bottom-right {
    bottom: env(safe-area-inset-bottom);
    transform: translateX(0);
  }
  .Toastify__toast-container--rtl {
    right: env(safe-area-inset-right);
    left: initial;
  }
  .Toastify__toast {
    --toastify-toast-width: 100%;
    margin-bottom: 0;
    border-radius: 0;
  }
}

.Toastify__toast-container[data-stacked='true'] {
  width: var(--toastify-toast-width);
}

.Toastify__toast--stacked {
  position: absolute;
  width: 100%;
  transform: translate3d(0, var(--y), 0) scale(var(--s));
  transition: transform 0.3s;
}

.Toastify__toast--stacked[data-collapsed] .Toastify__toast-body,
.Toastify__toast--stacked[data-collapsed] .Toastify__close-button {
  transition: opacity 0.1s;
}

.Toastify__toast--stacked[data-collapsed='false'] {
  overflow: visible;
}

.Toastify__toast--stacked[data-collapsed='true']:not(:last-child) > * {
  opacity: 0;
}

.Toastify__toast--stacked:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: calc(var(--g) * 1px);
  bottom: 100%;
}

.Toastify__toast--stacked[data-pos='top'] {
  top: 0;
}

.Toastify__toast--stacked[data-pos='bot'] {
  bottom: 0;
}

.Toastify__toast--stacked[data-pos='bot'].Toastify__toast--stacked:before {
  transform-origin: top;
}

.Toastify__toast--stacked[data-pos='top'].Toastify__toast--stacked:before {
  transform-origin: bottom;
}

.Toastify__toast--stacked:before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  transform: scaleY(3);
  z-index: -1;
}

.Toastify__toast--rtl {
  direction: rtl;
}

.Toastify__toast--close-on-click {
  cursor: pointer;
}

.Toastify__toast-icon {
  margin-inline-end: 10px;
  width: 22px;
  flex-shrink: 0;
  display: flex;
}

.Toastify--animate {
  animation-fill-mode: both;
  animation-duration: 0.5s;
}

.Toastify--animate-icon {
  animation-fill-mode: both;
  animation-duration: 0.3s;
}

.Toastify__toast-theme--dark {
  background: var(--toastify-color-dark);
  color: var(--toastify-text-color-dark);
}

.Toastify__toast-theme--light {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--default {
  background: var(--toastify-color-light);
  color: var(--toastify-text-color-light);
}

.Toastify__toast-theme--colored.Toastify__toast--info {
  color: var(--toastify-text-color-info);
  background: var(--toastify-color-info);
}

.Toastify__toast-theme--colored.Toastify__toast--success {
  color: var(--toastify-text-color-success);
  background: var(--toastify-color-success);
}

.Toastify__toast-theme--colored.Toastify__toast--warning {
  color: var(--toastify-text-color-warning);
  background: var(--toastify-color-warning);
}

.Toastify__toast-theme--colored.Toastify__toast--error {
  color: var(--toastify-text-color-error);
  background: var(--toastify-color-error);
}

.Toastify__progress-bar-theme--light {
  background: var(--toastify-color-progress-light);
}

.Toastify__progress-bar-theme--dark {
  background: var(--toastify-color-progress-dark);
}

.Toastify__progress-bar--info {
  background: var(--toastify-color-progress-info);
}

.Toastify__progress-bar--success {
  background: var(--toastify-color-progress-success);
}

.Toastify__progress-bar--warning {
  background: var(--toastify-color-progress-warning);
}

.Toastify__progress-bar--error {
  background: var(--toastify-color-progress-error);
}

.Toastify__progress-bar-theme--colored.Toastify__progress-bar--info,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--success,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--warning,
.Toastify__progress-bar-theme--colored.Toastify__progress-bar--error {
  background: var(--toastify-color-transparent);
}

.Toastify__close-button {
  color: #fff;
  position: absolute;
  top: 6px;
  right: 6px;
  background: transparent;
  outline: none;
  border: none;
  padding: 0;
  cursor: pointer;
  opacity: 0.7;
  transition: 0.3s ease;
  z-index: 1;
}

.Toastify__toast--rtl .Toastify__close-button {
  left: 6px;
  right: unset;
}

.Toastify__close-button--light {
  color: #000;
  opacity: 0.3;
}

.Toastify__close-button > svg {
  fill: currentColor;
  height: 16px;
  width: 14px;
}

.Toastify__close-button:hover,
.Toastify__close-button:focus {
  opacity: 1;
}

@keyframes Toastify__trackProgress {
  0% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(0);
  }
}

.Toastify__progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.7;
  transform-origin: left;
}

.Toastify__progress-bar--animated {
  animation: Toastify__trackProgress linear 1 forwards;
}

.Toastify__progress-bar--controlled {
  transition: transform 0.2s;
}

.Toastify__progress-bar--rtl {
  right: 0;
  left: initial;
  transform-origin: right;
  border-bottom-left-radius: initial;
}

.Toastify__progress-bar--wrp {
  position: absolute;
  overflow: hidden;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  border-bottom-left-radius: var(--toastify-toast-bd-radius);
  border-bottom-right-radius: var(--toastify-toast-bd-radius);
}

.Toastify__progress-bar--wrp[data-hidden='true'] {
  opacity: 0;
}

.Toastify__progress-bar--bg {
  opacity: var(--toastify-color-progress-bgo);
  width: 100%;
  height: 100%;
}

.Toastify__spinner {
  width: 20px;
  height: 20px;
  box-sizing: border-box;
  border: 2px solid;
  border-radius: 100%;
  border-color: var(--toastify-spinner-color-empty-area);
  border-right-color: var(--toastify-spinner-color);
  animation: Toastify__spin 0.65s linear infinite;
}

@keyframes Toastify__bounceInRight {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);
  }
  75% {
    transform: translate3d(10px, 0, 0);
  }
  90% {
    transform: translate3d(-5px, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutRight {
  20% {
    opacity: 1;
    transform: translate3d(-20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(2000px, var(--y), 0);
  }
}

@keyframes Toastify__bounceInLeft {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);
  }
  75% {
    transform: translate3d(-10px, 0, 0);
  }
  90% {
    transform: translate3d(5px, 0, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutLeft {
  20% {
    opacity: 1;
    transform: translate3d(20px, var(--y), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(-2000px, var(--y), 0);
  }
}

@keyframes Toastify__bounceInUp {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);
  }
  75% {
    transform: translate3d(0, 10px, 0);
  }
  90% {
    transform: translate3d(0, -5px, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes Toastify__bounceOutUp {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);
  }
}

@keyframes Toastify__bounceInDown {
  from,
  60%,
  75%,
  90%,
  to {
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
  }
  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);
  }
  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);
  }
  75% {
    transform: translate3d(0, -10px, 0);
  }
  90% {
    transform: translate3d(0, 5px, 0);
  }
  to {
    transform: none;
  }
}

@keyframes Toastify__bounceOutDown {
  20% {
    transform: translate3d(0, calc(var(--y) - 10px), 0);
  }
  40%,
  45% {
    opacity: 1;
    transform: translate3d(0, calc(var(--y) + 20px), 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);
  }
}

.Toastify__bounce-enter--top-left,
.Toastify__bounce-enter--bottom-left {
  animation-name: Toastify__bounceInLeft;
}

.Toastify__bounce-enter--top-right,
.Toastify__bounce-enter--bottom-right {
  animation-name: Toastify__bounceInRight;
}

.Toastify__bounce-enter--top-center {
  animation-name: Toastify__bounceInDown;
}

.Toastify__bounce-enter--bottom-center {
  animation-name: Toastify__bounceInUp;
}

.Toastify__bounce-exit--top-left,
.Toastify__bounce-exit--bottom-left {
  animation-name: Toastify__bounceOutLeft;
}

.Toastify__bounce-exit--top-right,
.Toastify__bounce-exit--bottom-right {
  animation-name: Toastify__bounceOutRight;
}

.Toastify__bounce-exit--top-center {
  animation-name: Toastify__bounceOutUp;
}

.Toastify__bounce-exit--bottom-center {
  animation-name: Toastify__bounceOutDown;
}

@keyframes Toastify__zoomIn {
  from {
    opacity: 0;
    transform: scale3d(0.3, 0.3, 0.3);
  }
  50% {
    opacity: 1;
  }
}

@keyframes Toastify__zoomOut {
  from {
    opacity: 1;
  }
  50% {
    opacity: 0;
    transform: translate3d(0, var(--y), 0) scale3d(0.3, 0.3, 0.3);
  }
  to {
    opacity: 0;
  }
}

.Toastify__zoom-enter {
  animation-name: Toastify__zoomIn;
}

.Toastify__zoom-exit {
  animation-name: Toastify__zoomOut;
}

@keyframes Toastify__flipIn {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }
  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }
  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }
  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }
  to {
    transform: perspective(400px);
  }
}

@keyframes Toastify__flipOut {
  from {
    transform: translate3d(0, var(--y), 0) perspective(400px);
  }
  30% {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;
  }
  to {
    transform: translate3d(0, var(--y), 0) perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;
  }
}

.Toastify__flip-enter {
  animation-name: Toastify__flipIn;
}

.Toastify__flip-exit {
  animation-name: Toastify__flipOut;
}

@keyframes Toastify__slideInRight {
  from {
    transform: translate3d(110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInLeft {
  from {
    transform: translate3d(-110%, 0, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInUp {
  from {
    transform: translate3d(0, 110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideInDown {
  from {
    transform: translate3d(0, -110%, 0);
    visibility: visible;
  }
  to {
    transform: translate3d(0, var(--y), 0);
  }
}

@keyframes Toastify__slideOutRight {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(110%, var(--y), 0);
  }
}

@keyframes Toastify__slideOutLeft {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(-110%, var(--y), 0);
  }
}

@keyframes Toastify__slideOutDown {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, 500px, 0);
  }
}

@keyframes Toastify__slideOutUp {
  from {
    transform: translate3d(0, var(--y), 0);
  }
  to {
    visibility: hidden;
    transform: translate3d(0, -500px, 0);
  }
}

.Toastify__slide-enter--top-left,
.Toastify__slide-enter--bottom-left {
  animation-name: Toastify__slideInLeft;
}

.Toastify__slide-enter--top-right,
.Toastify__slide-enter--bottom-right {
  animation-name: Toastify__slideInRight;
}

.Toastify__slide-enter--top-center {
  animation-name: Toastify__slideInDown;
}

.Toastify__slide-enter--bottom-center {
  animation-name: Toastify__slideInUp;
}

.Toastify__slide-exit--top-left,
.Toastify__slide-exit--bottom-left {
  animation-name: Toastify__slideOutLeft;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-right,
.Toastify__slide-exit--bottom-right {
  animation-name: Toastify__slideOutRight;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--top-center {
  animation-name: Toastify__slideOutUp;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

.Toastify__slide-exit--bottom-center {
  animation-name: Toastify__slideOutDown;
  animation-timing-function: ease-in;
  animation-duration: 0.3s;
}

@keyframes Toastify__spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
/* ===========================================
   1. ANA KAPLAYICI (LAYOUT) - HİZALAMA DÜZELTİLDİ
   =========================================== */
.nft-dashboard-container {
  display: block; /* Flex yerine Block yaparak genişliği garantiye alıyoruz */
  width: 100%;
  max-width: 900px !important; /* Üst menü ile birebir aynı sınır */
  margin: 0 auto;   /* Tam ortala */
  padding: 0;       /* İç boşluk yok, genişliği etkilemesin */
  box-sizing: border-box; /* Border ve padding genişliğe dahil */
  animation: fadeIn 0.5s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ===========================================
   2. KİLİTLİ EKRAN (LOCKED STATE)
   =========================================== */
.nft-locked-container {
  width: 100%;
  min-height: 420px; /* Yükseklik diğer sekmelerle dengelendi */
  background-color: #1C1D21; 
  border: 1px solid #2D2F34;
  border-radius: 16px;
  max-width: 900px;
  margin: 0 auto;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  
  padding: 40px 24px; /* İçerik kenarlara yapışmasın */
  box-sizing: border-box; /* Taşmayı engeller */
  
  position: relative;
  overflow: hidden; 
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.2);
}

/* İçerik Kutusu */
.nft-locked-content {
  z-index: 2;
  width: 100%;
  max-width: 480px; /* İçerik genişliği okunabilirlik için sınırlandı */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.nft-locked-content h2 {
  color: #fff;
  font-size: 1.6rem;
  margin: 0;
  font-weight: 700;
  line-height: 1.2;
}

.nft-locked-content p {
  color: #a0aec0;
  font-size: 1rem;
  line-height: 1.6;
  margin: 0 0 12px 0;
}

/* --- ELMAS İKONU --- */
.nft-3d-icon {
  font-size: 5rem; 
  margin-bottom: 12px;
  display: inline-block;
  /* Süzülme Animasyonu */
  animation: gem-float-glow 4s ease-in-out infinite;
}

/* BUTON AYARI */
.nft-locked-content button {
  margin-top: 12px;
  width: 100%;
  max-width: 300px; /* Butonun çok yayılmasını engeller */
}

@keyframes gem-float-glow {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
    filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.3));
  }
  50% {
    transform: translateY(-12px) rotate(5deg) scale(1.05);
    filter: drop-shadow(0 0 30px rgba(59, 130, 246, 0.6));
  }
  100% {
    transform: translateY(0) rotate(0deg) scale(1);
    filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.3));
  }
}

/* ===========================================
   3. İSTATİSTİK KUTULARI
   =========================================== */
.nft-stats-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  width: 100%;
  margin-bottom: 24px;
  box-sizing: border-box;
}

.nft-stat-box {
  background: #1C1D21;
  border: 1px solid #2D2F34;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.2s;
  box-sizing: border-box;
}

.nft-stat-box:hover {
  border-color: #4a5568;
  transform: translateY(-2px);
}

.nft-stat-box .label {
  color: #718096;
  font-size: 0.85rem;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.nft-stat-box .value {
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
}

.nft-stat-box .value.highlight {
  color: #28C988;
}

.nft-stat-box .value.badge {
  font-size: 1rem;
  background: rgba(255, 255, 255, 0.1);
  padding: 4px 12px;
  border-radius: 20px;
}

/* ===========================================
   4. NFT KARTLARI VE GRID
   =========================================== */
.nft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

.nft-card {
  background: #1C1D21;
  border: 1px solid #2D2F34;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  position: relative;
  box-sizing: border-box;
}

.nft-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
  border-color: #4a5568;
}

.nft-image-box {
  width: 100%;
  aspect-ratio: 1/1;
  position: relative;
  background: #000;
}

.nft-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.nft-card:hover .nft-image-box img {
  transform: scale(1.05);
}

.nft-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  border: 1px solid rgba(255,255,255,0.1);
}

.nft-info {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.collection {
  color: #a0aec0;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.name {
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.price-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.9rem;
  color: #cbd5e0;
  margin-bottom: 16px;
  padding-bottom: 16px;
  border-bottom: 1px solid #2d3748;
}

.nft-action-btn {
  width: 100%;
  padding: 12px;
  border-radius: 8px;
  border: none;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  margin-top: auto;
  transition: filter 0.2s, transform 0.1s;
}

.nft-action-btn:active { transform: scale(0.98); }

.nft-action-btn.stake {
  background: linear-gradient(90deg, #00c6ff 0%, #0072ff 100%);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 114, 255, 0.3);
}

.nft-action-btn.market {
  background: #2D2F34;
  color: #fff;
  border: 1px solid #4a5568;
}

.nft-action-btn:hover { filter: brightness(1.1); }
.nft-action-btn:disabled { opacity: 0.6; cursor: not-allowed; filter: grayscale(1); }

/* --- YÜKLEME VE UYARI DURUMLARI --- */
.nft-loading-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 20px;
  width: 100%;
  box-sizing: border-box;
}

.nft-skeleton {
  height: 380px;
  background: #1C1D21;
  border-radius: 16px;
  animation: pulse 1.5s infinite ease-in-out;
}

@keyframes pulse {
  0% { opacity: 0.5; }
  50% { opacity: 1; }
  100% { opacity: 0.5; }
}

.nft-notice {
  width: 100%;
  box-sizing: border-box;
  background: rgba(59, 130, 246, 0.1);
  border: 1px solid rgba(59, 130, 246, 0.3);
  color: #60a5fa;
  padding: 14px 20px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  font-size: 0.95rem;
  font-weight: 500;
}

/* ===========================================
   6. MOBİL UYUM (NETFLIX TARZI SLIDER)
   =========================================== */
@media (max-width: 768px) {
  .nft-dashboard-container {
    max-width: 100% !important; /* Mobilde ekranı doldursun */
  }
  
  /* Mobilde kilitli ekran yüksekliği daha az olabilir */
  .nft-locked-container {
    min-height: 350px;
  }

  .nft-stats-header {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  .nft-stat-box {
    flex-direction: row;
    justify-content: space-between;
    padding: 12px 16px;
  }

  /* Mobilde Grid -> Slider */
  .nft-grid, .nft-loading-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 16px;
    padding-bottom: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  
  .nft-grid::-webkit-scrollbar, .nft-loading-grid::-webkit-scrollbar { 
    display: none; 
  }

  .nft-card, .nft-skeleton {
    min-width: 280px;
    max-width: 280px;
    scroll-snap-align: center;
    flex-shrink: 0; /* Kartların büzülmesini engeller */
  }
  
  /* Sağda solda boşluk bırakmak için */
  .nft-grid::before, .nft-grid::after {
    content: "";
    min-width: 1px;
  }
}
/* ===========================================
   6. MOBİL UYUM (NETFLIX TARZI SLIDER - GÜÇLENDİRİLMİŞ)
   =========================================== */
@media (max-width: 768px) {
  .nft-dashboard-container {
    max-width: 100% !important;
    overflow: hidden; /* Sayfa taşmasını engelle */
  }
  
  .nft-locked-container {
    min-height: 380px;
  }

  .nft-stats-header {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0 10px; /* Kenarlardan hafif boşluk */
  }
  
  .nft-stat-box {
    flex-direction: row;
    justify-content: space-between;
    padding: 12px 16px;
  }

  /* --- KART SLIDER AYARLARI --- */
  .nft-grid, .nft-loading-grid {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory; /* Mıknatıs etkisi */
    gap: 16px; /* Kartlar arası boşluk */
    padding: 0 24px 20px 24px; /* Soldan/Sağdan boşluk bırak ki ilk/son kart yapışmasın */
    
    /* Kaydırma pürüzsüzlüğü */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; 
  }
  
  .nft-grid::-webkit-scrollbar, .nft-loading-grid::-webkit-scrollbar { 
    display: none; 
  }

  .nft-card, .nft-skeleton {
    /* ÖNEMLİ AYAR BURASI: */
    /* Kart genişliğini ekranın %85'i yapıyoruz. */
    /* Böylece kalan %15'lik boşlukta yandaki kartın ucu görünüyor. */
    min-width: 85vw; 
    max-width: 85vw;
    
    scroll-snap-align: center; /* Kartı ekranın ortasına kilitler */
    flex-shrink: 0;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5); /* Mobilde daha belirgin gölge */
  }
  
  /* Sağda solda ekstra boşluk için hayalet elementler */
  .nft-grid::before, .nft-grid::after {
    content: "";
    display: block;
    min-width: 1px;
  }
}
/* ===========================================
   7. MASAÜSTÜ / MOBİL GÖRÜNÜM AYARLARI
   =========================================== */

/* Varsayılan (Masaüstü): Izgara açık, Stack kapalı */
.nft-desktop-view { display: block; }
.nft-mobile-view { display: none; }

/* Mobil (768px altı): Izgara kapalı, Stack açık */
@media (max-width: 768px) {
  .nft-desktop-view { display: none; }
  .nft-mobile-view { display: block; }
  
  /* Mobilde istatistikleri sıkıştır */
  .nft-stats-header {
     grid-template-columns: 1fr;
     gap: 8px;
  }
  .nft-stat-box {
    flex-direction: row;
    justify-content: space-between;
    padding: 12px 16px;
  }
}
/* Masaüstü/Mobil Görünürlük Ayarları */
.nft-mobile-view { display: none; }
.nft-desktop-view { display: block; }

@media (max-width: 768px) {
  .nft-mobile-view { display: block; }
  .nft-desktop-view { display: none; }
}:root {
    /* --- VARSAYILAN (MOBİL) AYARLAR --- */
    /* Mobilde ekranın %70'ini kaplasın */
    --card-width: 70vw; 
    --card-height: 100vw; /* Mobilde biraz daha uzun dikey */
}

/* TABLET ve KÜÇÜK LAPTOP (600px üzeri) */
@media (min-width: 600px) {
    :root {
        --card-width: 320px;
        --card-height: 440px;
    }
}

/* STANDART MASAÜSTÜ / LAPTOP (1024px üzeri) */
@media (min-width: 1024px) {
    :root {
        --card-width: 360px; /* Kartları büyüttük */
        --card-height: 500px;
    }
}

/* GENİŞ EKRAN / 2K / 4K (1440px üzeri) */
@media (min-width: 1440px) {
    :root {
        --card-width: 420px; /* Dev ekranlar için dev kartlar */
        --card-height: 580px;
    }
}

/* --- SAHNE --- */
.scroll-card-container {
    position: relative;
    width: 100%;
    /* Konteyner yüksekliği kartın yüksekliğine göre otomatik ayarlanır (+60px gölge payı) */
    height: calc(var(--card-height) + 60px);
    margin: 0 auto;
    perspective: 1200px;
    perspective-origin: 50% 50%;
    overflow: hidden;
    /* Yükseklik değişirken animasyon olsun */
    transition: height 0.3s ease;
}

/* --- SCROLLER --- */
.scroller {
    position: absolute;
    inset: 0;
    overflow-x: auto;
    display: flex;
    align-items: center;
    scroll-snap-type: x mandatory;
    z-index: 9999;
    opacity: 0; /* Görünmez */
    
    /* --- MERKEZLEME SİHRİ --- */
    /* Ekranın yarısı - Kartın yarısı = Tam Orta */
    padding: 0 calc(50% - (var(--card-width) / 2));
    
    scroll-behavior: smooth;
}

.scroll-item {
    /* Genişliği CSS değişkeninden al */
    flex: 0 0 var(--card-width);
    width: var(--card-width);
    height: 100%;
    scroll-snap-align: center;
}

/* --- KART KATMANI --- */
.card-stack {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    transform-style: preserve-3d;
}

/* --- KART STİLİ --- */
.stack-card {
    position: absolute;
    /* Boyutlar responsive değişkenden gelir */
    width: var(--card-width);
    height: var(--card-height); 
    
    background-color: #1c1d21;
    border-radius: 24px;
    /* Kart büyüdükçe gölgesi de büyüsün */
    box-shadow: 0 25px 60px rgba(0,0,0,0.6);
    
    transform-origin: center center;
    will-change: transform;
    backface-visibility: hidden;

    /* --- MATEMATİK (DEĞİŞMEDİ) --- */
    --abs: max(var(--dist), var(--dist) * -1);

    transform: 
        /* 1. YATAY: Responsive genişliğe göre %85 kaydır */
        translateX(calc(var(--dist) * 85%))
        
        /* 2. DERİNLİK: Kartlar büyüdüğü için derinliği de artırdık (-500px) */
        translateZ(calc(var(--abs) * -500px))
        
        /* 3. DÖNME: */
        rotateY(calc(var(--dist) * 35deg))
        
        /* 4. ÖLÇEK */
        scale(calc(1 - (var(--abs) * 0.15)));
        
    opacity: calc(1 - (var(--abs) * 0.3));
    filter: brightness(calc(1 - (var(--abs) * 0.4)));
    
    /* Boyut değişimleri yumuşak olsun */
    transition: width 0.3s ease, height 0.3s ease, box-shadow 0.2s ease;
}

.stack-card img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 24px; display: block;
    background: #1c1d21;
}body {
  padding-right: 0 !important;
  overflow-y: scroll;
}
   

.light-theme {
  --bg-main: #f4f7fa;
  --text-primary: #1a202c;
  --text-secondary: #4a5568;
  --ui-surface: #ffffff;
  --ui-border: #e2e8f0;
  --ui-surface-hover: #f7fafc;
  --accent: #3385FF;
  --support-button-bg: var(--accent);
  --support-button-icon: #ffffff;
  --hash-color: #111;
  --card-bg-light: #FFFFFF;
  --border-light: #E8EAED;
  --header-bg-light: rgba(245, 245, 247, 0.8);
  --text-light: var(--brand-text-dark);
}

.dark-theme {
  --bg-main: #121827;
  --text-primary: #f7fafc;
  --text-secondary: #a0aec0;
  --ui-surface: #1a2233;
  --ui-border: #2d3748;
  --ui-surface-hover: #212b41;
  --accent: #3385FF;
  --support-button-bg: var(--accent);
  --support-button-icon: #ffffff;
  --hash-color: #fff;
  --card-bg-dark: #1F2229;
  --border-dark: #31353D;
  --header-bg-dark: rgba(24, 26, 32, 0.8);
  --text-dark: var(--brand-text-light);
}

:root {
  /* Marka Renkleri */
  --brand-blue: #3375E0;
  --brand-green: #28C988;
  --brand-blue-hover: #2968CC;
  --brand-text-dark: #050F19;
  --brand-text-light: #FFFFFF;

  /* Diğer Değişkenler */
  --logo-solano: var(--brand-blue);
  --logo-alpha: var(--brand-green);
  --cta-purple-bg: var(--brand-blue);
  --cta-purple-hover: var(--brand-blue-hover);
  --stat-yellow: var(--brand-green);

  /* Layout */
  --site-max-width: 1200px;
  --content-padding-x-desktop: 1.5rem;
  --content-padding-x-mobile: 1rem;
  --section-gap: 2.5rem;
}

/* ==================
   TEMEL STİLLER
   ================== */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  /* DÜZELTME: Uygulamanın ana fontu 'Oxanium' olarak değiştirildi. */
  font-family: 'Oxanium', sans-serif;
  color: var(--text-secondary);
  background-color: var(--bg-main);
  transition: background-color 0.3s, color 0.3s;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

main {
  width: 100%;
  box-sizing: border-box;
  /* flex-grow: 1; kaldırıldı. Artık Grid yapısı bu işi yapıyor. */
}

.main-content-wrapper {
  width: 100%;
  max-width: var(--site-max-width);
  /* YENİ DEĞER: 60px(header) + 48px(sabit ticker) = 108px */
  margin: 108px auto 0 auto; 
  padding: var(--section-gap) var(--content-padding-x-desktop);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--section-gap);
}

/* ==========================================================
   SABİT ÜST PANEL (Header + Ticker Kapsayıcısı)
   ========================================================== */
.fixed-top-panel {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;
  
  /* ŞEFFAFLIK STİLLERİ BURAYA TAŞINDI */
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
/* ==========================================================
   HEADER
   ========================================================== */

.header {
  height: 60px;
  /* position: fixed ve ilgili tüm kurallar kaldırıldı. Artık kavga etmeyecek. */
  transition: background-color 0.3s;
  box-sizing: border-box;
}

.header::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  z-index: 99;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: background-color 0.3s, backdrop-filter 0.3s;
}

.light-theme .header, .light-theme .header::before { background-color: var(--header-bg-light); }
.dark-theme .header, .dark-theme .header::before { background-color: var(--header-bg-dark); }

.app-layout.homepage-bg .header,
.app-layout.homepage-bg .header::before {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.app-layout.stake-page-bg .header,
.app-layout.stake-page-bg .header::before {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.app-layout.homepage-bg .footer-container {
  background: #1C1C1E !important; /* Stake gri zemini */
  border-top: none !important;
  position: relative; /* RGB çizgi için referans */
  padding-top: 110px;  /* Tüm footer içeriğini çizgiden aşağı indir */
}

.app-layout.homepage-bg .footer-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--logo-solano) 0%, var(--logo-alpha) 100%);
  opacity: 0.8;
}

.header-content {
  max-width: var(--site-max-width);
  margin: 0 auto;
  width: 100%;
  height: 100%;
  padding: 0 var(--content-padding-x-desktop);
  box-sizing: border-box;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
}



/* --- Logo (AKILLI KÜÇÜLME EKLENDİ) --- */
.logo-container { display: flex; align-items: center; gap: 0rem !important; }
.logo-img {
  height: 38px;
  width: 38px;
  border-radius: 50%;
  /* YENİ KURAL: Kalkanın esneyerek daralmasını ve bozulmasını engeller. */
  flex-shrink: 0;
}
.logo-text.trust-hash-wrapper { display: flex; align-items: flex-end; gap: 8px; }

.trust-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: clamp(24px, 10vw, 44px); /* Akıcı küçülme */
  letter-spacing: -1px;
  text-transform: lowercase;
  line-height: 1;
  display: inline-block;
  background: linear-gradient(90deg, #38F28B 0%, #2B6DEF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap; /* Asla alt satıra kaymaz */
}
.light-theme .trust-label {
  background: linear-gradient(270deg, #38F28B 0%, #2B6DEF 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}
.hash-label {
  font-family: 'Poppins', sans-serif;
  font-weight: 900;
  font-size: clamp(12px, 5vw, 22px); /* Akıcı küçülme */
  margin-bottom: 3px;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1;
  color: var(--hash-color);
  white-space: nowrap; /* Asla alt satıra kaymaz */
}
.footer-container .hash-label { color: #fff !important; }

/* --- Orta Navigasyon Menüsü --- */
.header-nav { display: flex; justify-content: center; align-items: center; gap: 0.5rem; }
.header-nav > .nav-link {
  padding: 10px 18px;
  border-radius: 12px;
  background-color: transparent;
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-secondary);
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
}
.header-nav > .nav-link.active,
.header-nav > .nav-link:hover {
  color: var(--text-primary);
  background-color: rgba(255, 255, 255, 0.1);
}
.light-theme .header-nav > .nav-link.active,
.light-theme .header-nav > .nav-link:hover {
  background-color: #e2e8f0;
}

/* --- Sağdaki Buton Grupları --- */
.header-actions { display: flex; align-items: center; gap: 1rem; }
.actions-group-desktop { display: flex; align-items: center; gap: 0.7rem; }
.actions-group-mobile { display: none; }

/* VOLTAGE CONNECT BUTTON ÖZGÜLLÜK (SPECIFICITY) DÜZELTMESİ */
/* Bu kural, genel 'button' stillerinin VoltageConnectButton'ı ezmesini engeller. */
.header-actions .voltage-button button {
  padding: 1rem 1.5rem;
  background: linear-gradient(180deg, #4A90E2 0%, #357ABD 100%);
  border: 1px solid #2A659A;
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), 0 2px 4px rgba(0,0,0,0.3);
  border-radius: 10px;
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  white-space: nowrap;
}

/* ==================
   HAMBURGER MENÜ & DİĞER BİLEŞENLER (Değişiklik Yok)
   ================== */
#menuToggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; }
#checkbox { display: none; }
.toggle { position: relative; width: 28px; height: calc(3px * 3 + 7px * 2); cursor: pointer; }
.bar { position: absolute; left: 0; right: 0; height: 3px; border-radius: calc(3px / 2); background: currentColor; transition: transform 0.35s cubic-bezier(.5,-0.35,.35,1.5); }
.bar--top { bottom: calc(50% + 7px + 3px/ 2); transition-property: bottom, transform; transition-delay: calc(0s + 0.35s), 0s; }
.bar--middle { top: calc(50% - 3px/ 2); transition-property: opacity; transition-delay: calc(0s + 0.35s * 1.3); }
.bar--bottom { top: calc(50% + 7px + 3px/ 2); transition-property: top, transform; }
#checkbox:checked + .toggle .bar--top { transform: rotate(45deg); bottom: calc(50% - 3px / 2); transition-delay: 0s, calc(0s + 0.35s * 1.3); }
#checkbox:checked + .toggle .bar--middle { opacity: 0; transition-delay: 0s; }
#checkbox:checked + .toggle .bar--bottom { transform: rotate(-45deg); top: calc(50% - 3px / 2); transition-delay: 0s, calc(0s + 0.35s * 1.3); }
.dropdown-menu { position: absolute; top: calc(100% + 12px); right: 0; background-color: var(--ui-surface); border: 1px solid var(--ui-border); border-radius: 0.75rem; padding: 0.75rem; min-width: 200px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); z-index: 100; }
.dropdown-menu a, .dropdown-menu .menu-support-button { display: block; width: 100%; padding: 0.75rem 1rem; color: var(--text-primary); text-decoration: none; font-weight: 500; border-radius: 0.5rem; transition: background-color 0.2s, color 0.2s; cursor: pointer; background: none; border: none; text-align: left; font-size: 1rem; font-family: inherit; box-sizing: border-box; }
.dropdown-menu a:hover, .dropdown-menu .menu-support-button:hover { background-color: var(--brand-blue); color: white; }
.dropdown-menu .menu-divider { height: 1px; margin: 8px 16px; background-color: var(--ui-border); }
.language-selector-container { position: relative; }
.language-selector-button { background-color: var(--ui-surface); color: var(--text-primary); border: 1px solid var(--ui-border); border-radius: 8px; padding: 8px 12px; font-size: 1rem; cursor: pointer; display: flex; align-items: center; gap: 5px; }
.language-selector-button:hover, .language-selector-button:focus { border-color: var(--brand-blue); }
/* Scroll ve Yükseklik Limiti Eklendi */
.language-selector-dropdown { 
  position: absolute; 
  top: 100%; 
  left: 0; 
  background-color: var(--ui-surface); 
  border: 1px solid var(--ui-border); 
  border-radius: 8px; 
  list-style: none; 
  padding: 4px; 
  margin-top: 5px; 
  min-width: 120px; 
  z-index: 1000; 
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  /* --- YENİ EKLENENLER --- */
  max-height: 300px;       /* Maksimum yükseklik */
  overflow-y: auto;        /* Dikey kaydırma çubuğu */
  overflow-x: hidden;      /* Yatay taşmayı engelle */
}

/* Scrollbar'ı güzelleştirelim */
.language-selector-dropdown::-webkit-scrollbar { width: 6px; }
.language-selector-dropdown::-webkit-scrollbar-thumb { background-color: var(--text-secondary); border-radius: 4px; }
.language-selector-item { color: var(--text-primary); padding: 10px 15px; cursor: pointer; border-radius: 6px; transition: background-color 0.2s ease, color 0.2s ease; }
.language-selector-item:hover { background-color: var(--brand-blue); color: #fff; }

/* ==================
   GENEL SAYFA İÇERİĞİ (Değişiklik Yok)
   ================== */
.section-title { width: 100%; text-align: center; margin-bottom: 2rem; font-size: 1.75rem; font-weight: 700; }
.features-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.list-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); }
.stake-page-container, .financial-sections-container { display: flex; flex-direction: column; gap: 2.5rem; }
.charts-container { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; }
[id^="rk-modal"] svg:not([width]):not([height]) { width: 24px; height: 24px; }


/* ==========================================================
   NİHAİ RESPONSIVE KURALLARI (SON DÜZELTME)
   ========================================================== */

/* --- 960px: Mobil Görünüme Geçiş (NİHAİ DÜZELTME) --- */
@media (max-width: 960px) {
  .header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.8rem;
    padding: 0 8px;
  }
  
  .logo-container {
    /* KESİN ÇÖZÜM 1/2: Logoya esnek büyüme/küçülme izni veriyoruz. */
    /* Bu, "Mümkün olan tüm alanı kullan, ama gerekirse küçül" demektir. */
    flex: 1 1 auto; 
    min-width: 0; /* Bu, metnin küçülürken taşmasını engellemek için HAYATİ ÖNEMDEDİR. */
    overflow: hidden;
  }

  .actions-group-mobile {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    /* KESİN ÇÖZÜM 2/2: Buton grubunu katı/sabit hale getiriyoruz. */
    /* Bu, "Asla büyüme, asla küçülme, kendi doğal boyutunda kal" demektir. */
    flex: 0 0 auto;
  }
  
  .logo-text.trust-hash-wrapper {
    /* BU KURAL SORUNU KESİN OLARAK ÇÖZER:
       Metin kabının, içeriğinden daha fazla küçülmesine izin verir.
       Bu, metnin ezilmesini ve garip bir şekilde alt satıra kaymasını engeller. */
    min-width: 0;
  }

  .header-nav,
  .actions-group-desktop {
    display: none;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .charts-section,
  .charts-container {
    grid-template-columns: 1fr;
  }
}

/* --- 610px: Logo Metinlerini Yatay Olarak Küçült --- */
@media (max-width: 610px) {
  /* Sadece yazı boyutlarını küçülterek logonun yatay kalmasını sağlıyoruz */
  .hash-label {
    font-size: clamp(16px, 4vw, 25px);
  }
  .trust-label {
    font-size: clamp(32px, 6vw, 40px);
  }
}

/* --- 580px: Logo Metinlerini Yatay Olarak Küçült --- */
@media (max-width: 580px) {
  /* Sadece yazı boyutlarını küçülterek logonun yatay kalmasını sağlıyoruz */
  .hash-label {
    font-size: clamp(14px, 4vw, 15px);
  }
  .trust-label {
    font-size: clamp(28px, 6vw, 30px);
  }
}
/* --- 550px: Kalkanı Oranlı Olarak Küçült (Güçlendirilmiş Kural) --- */
@media (max-width: 550px) {
  .logo-img {
    /* !important etiketi, bu kuralın diğer tüm boyut kurallarını ezmesini sağlar. */
    width: 44px !important;
    height: 44px !important;
  }
}

/* --- 540px: "HASH" Yazısını Gizle ve Sağdaki Buton Grubunu Orantılı Küçült --- */
@media (max-width: 540px) {
  .logo-text.trust-hash-wrapper {
    /* "HASH" yazısını "trust"ın altına almak için dikey hizalama */
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .hash-label {
    /* Yatay düzendeki alt boşluğu sıfırlıyoruz */
    margin-bottom: 0;
  }
  .trust-label {
    /* Dikey düzende yazının çok büyümesini engellemek için boyutu ayarlıyoruz */
    font-size: clamp(1.5rem, 8vw, 1.75rem); /* ~24px to 28px */
  }
}

/* --- 480px: Sadece Kalkanı Göster (YENİ KIRILMA NOKTASI) --- */
/* --- 480px: Sadece Kalkanı Göster (YENİ KIRILMA NOKTASI) --- */
@media (max-width: 460px) {
  .actions-group-mobile {
    /* DÜZELTME: 'transform: scale()' yerine 'zoom' kullanıldı.
       Bu, elementin görsel olarak küçülmesinin yanı sıra
       sayfa düzeninde kapladığı alanı da fiilen azaltır.
       Böylece logonun ezilmesi engellenir. */
    zoom: 0.8;
  }
}

/* YENİ KURAL: 390px altında logoyu dikey hizala, sola yasla ve küçült */
@media (max-width: 390px) {
  .hash-label {
    display: none;
  }

  .logo-container {
    /* KESİN ÇÖZÜM: Logonun gereksiz boşluk kaplayarak büyümesini engeller.
       Bu sayede header'ın en soluna yaslanması sağlanır. */
    flex-grow: 0;

    /* Logonun dikey hizalanması için yönü değiştiriyoruz */
    flex-direction: column;
    /* İçerik (kalkan ve yazı) sola yaslandı */
    align-items: flex-start;
    gap: 2px; /* Kalkan ve yazı arası dikey boşluk azaltıldı */
  }

  .logo-img {
    /* Kalkanın boyutu küçültüldü */
    width: 34px !important;
    height: 34px !important;
  }

  .trust-label {
    /* Yazının boyutu küçültüldü */
    font-size: clamp(1.1rem, 6vw, 1.2rem); /* ~17px to 19px */
  }

  .logo-text.trust-hash-wrapper {
    /* Hizalama artık .logo-container'dan geldiği için bu kuralı sıfırlıyoruz */
    align-items: flex-start;
  }
}

/* --- 480px: Dikey Logoyu Küçült --- */
@media (max-width: 480px) {
  .trust-label {
    /* Yazıyı orantılı olarak daha da küçültüyoruz */
    font-size: clamp(1rem, 7vw, 1.25rem); /* ~20px to 24px */
  }
  .hash-label {
    /* Yazıyı orantılı olarak daha da küçültüyoruz */
    font-size: clamp(0.6rem, 4vw, 0.65rem); /* ~11px to 12px */
  }
}

/* 350px Altında İkinci Aşama Küçültme */
@media (max-width: 350px) {
  .actions-group-mobile {
    /* Buton grubunun kapladığı alan küçültüldü */
    zoom: 0.7;
  }

  /* DÜZELTME: Logo da orantılı olarak daha fazla küçültüldü */
  .logo-img {
    width: 30px !important;
    height: 30px !important;
  }

  .trust-label {
    font-size: clamp(1rem, 5.5vw, 1.05rem); /* ~16px to 17px */
  }
}

/* --- Diğer Genel Mobil İyileştirmeler --- */
@media (max-width: 768px) {
  .main-content-wrapper { padding: var(--section-gap) var(--content-padding-x-mobile); }
  .list-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .features-grid { grid-template-columns: 1fr; }
  .main-content-wrapper { padding: var(--section-gap) var(--content-padding-x-mobile); }
}

@media (max-width: 299px) {
  /*
    Bu genişlikte tüm elemanların sığması fiziksel olarak imkansızdır.
    En kritik elemanlara (Wallet, Menu) yer açmak için,
    daha az kritik olan Tema ve Dil ikonlarını gizliyoruz.
    Bu, bozulmayı önleyen tek ve doğru yöntemdir.
  */
  
  .bb8-toggle {
    display: none;
  }
}

@media (max-width: 260px) {

	.language-selector-container {
    display: none;
  }
}

/* ==========================================================
   MOBİL İÇİN HIZLI SCROLL SORUNU ÇÖZÜMÜ ("ARKA PLAN KALKANI")
   ========================================================== */

/* Sadece 768px ve altındaki ekranlarda çalışır */
@media (max-width: 768px) {
  /* NİHAİ DÜZELTME 1/2: Header'ı ana sayfada kesin olarak şeffaf yap */
  .app-layout.homepage-bg .header,
  .app-layout.homepage-bg .header::before {
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* NİHAİ DÜZELTME 2/2: Arka Plan Kalkanı'nın arkaplanını,
     HomePage.css'teki .animated-background'ın masaüstü versiyonuyla
     aynı yaparak, onunla birlikte hareket etmesini sağla. */
  .header-vacuum-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 60px; 
    z-index: 90;
    
    background: 
        radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 40%),
        radial-gradient(circle at 80% 30%, rgba(255, 119, 198, 0.3) 0%, transparent 40%),
        linear-gradient(180deg, #1a1a2e 40%, #0a0a0f 75%, #000000 100%);
    
    animation: hue-shift 20s infinite linear;
    background-attachment: fixed;
    pointer-events: none;
  }
}
/* — AppKit / WalletConnect portalını kesin olarak en üste al — */
.wcm-modal,
.wcm-overlay,
[data-reown-modal],
[data-reown-modal] * {
  z-index: 2147483647 !important; /* en üst katman */
}

/* Overlay tam ekran ve tıklamayı modala yönlendirsin */
.wcm-overlay,
[data-reown-modal] .overlay {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.6) !important;
  pointer-events: auto !important;
}

/* — Sadece QR görselinin köşelerini düz yap (modalın geri kalanı bozulmasın) — */
.wcm-modal [class*="qr"] canvas,
.wcm-modal [class*="qr"] img,
[data-reown-modal] [class*="qr"] canvas,
[data-reown-modal] [class*="qr"] img {
  border-radius: 0 !important;   /* QR’ı yuvarlama */
  overflow: visible !important;
}

/* QR alanı küçük cihazlarda da rahat okunsun */
.wcm-modal [class*="qr"],
[data-reown-modal] [class*="qr"] {
  min-width: 260px;
  min-height: 260px;
}


/* >>> Reown/Web3Modal z-index’ini değişken üzerinden GLOBALE zorla (Shadow DOM içinden okunur) */
:root {
  --w3m-z-index: 2147483647 !important; /* modal her şeyin üstünde */
  /* Görünüm eski kalsın diye genel radius’u yine 16px tutuyoruz */
  --w3m-border-radius-master: 16px;
}

/* Sadece QR görselinin köşelerini düz yap (modalın geri kalanı etkilenmez) */
.wcm-modal [class*="qr"] canvas,
.wcm-modal [class*="qr"] img {
  border-radius: 0 !important;
}
/* RainbowKit ConnectButton — tek satır adres + düzgün hizalama */
.connect-button-wrapper button[data-testid="rk-connect-button"] {
  height: 40px;                 /* sabit yükseklik; kart şişmesin */
  align-items: center !important;
}

/* İç kolonları hizala (grid yerine satır) */
.connect-button-wrapper button[data-testid="rk-connect-button"] > div {
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  overflow: visible !important;  /* chevron kırpılmasın */
}

/* Adres metni: tek satır + ellipsis */
.connect-button-wrapper button[data-testid="rk-connect-button"] [data-testid="rk-address"] {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 90px;               /* gerekirse artır/azalt */
  display: inline-block;
}

/* Her ihtimale karşı ikincil satır vs. görünürse gizle */
.connect-button-wrapper button[data-testid="rk-connect-button"] > div > div:nth-child(2) > *:nth-child(2) {
  display: none !important;
}
/* Adres rozetini tek satırda tut (genel) */
.connect-button-wrapper [data-testid="rk-address"] {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 90px; /* desktop */
  display: inline-block;
}

@media (max-width: 768px) {
  /* Mobilde avatar/logoyu kaldır (sadece adres kalsın) */
  .connect-button-wrapper [data-testid="rk-account-avatar"] {
    display: none !important;
  }

  /* Mobilde adres daha kısa ve küçük olsun */
  .connect-button-wrapper [data-testid="rk-address"] {
    max-width: 72px;
    font-size: 12px;
  }

  /* Bazı temalarda network pill görünebiliyor—mobilde tamamen gizle */
  .connect-button-wrapper .rk-network-button,
  .connect-button-wrapper [data-testid="rk-network-button"] {
    display: none !important;
  }
}
/* — Desktop’ta avatar/logoyu geri aç — */
@media (min-width: 769px) {
  .connect-button-wrapper [data-testid="rk-account-avatar"] {
    display: inline-flex !important;
    align-items: center;
  }
}
/* ==========================================================
   SAYFA ARKA PLAN YÖNETİMİ (NİHAİ VE DOĞRU MİMARİ)
   ========================================================== */

/* Kural 1: Ana layout'u varsayılan olarak şeffaf yap */
.app-layout {
  background-color: transparent !important;
}

/* Kural 2: SADECE Stake sayfasındayken, header ve footer ARASINDAKİ ALANI
      doldurması için yeni sarmalayıcıya gri renk ve esneme özelliği ver. */
.stake-page-content-bg {
  background-color: #1C1C1E;
  flex-grow: 1; /* Bu, dikeyde tüm boş alanı kaplamasını sağlar */
  display: flex; /* İçindeki main'in düzgün çalışması için */
}

/* ==========================================================
   STAKE SAYFASI - FİNAL DOKUNUŞLAR
   ========================================================== */

/* 1. Stake sayfası ile footer arasındaki boşluğu azalt */
.app-layout.stake-page-bg .footer-container {
  margin-top: 4rem; /* 10rem'den daha makul bir değere çektik */
}

/* 2. Gri alanın altına RGB ayırıcı çizgiyi ekle */
.stake-page-content-bg {
  position: relative; /* Çizginin konumlanabilmesi için bu gerekli */
}

.stake-page-content-bg::after {
  content: '';
  position: absolute;
  bottom: 0; /* Gri alanın en altına hizala */
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--logo-solano) 0%, var(--logo-alpha) 100%);
  opacity: 0.8;
}
/* ==========================================================
   SAYFA ARKA PLAN YÖNETİMİ (GERÇEK FİNAL VE DOĞRU MİMARİ)
   ========================================================== */

/* 1. Tüm sayfa iskeleti HER ZAMAN şeffaftır. */
.app-layout {
  background-color: transparent;
}

/* 2. Stake sayfasının yeni sarmalayıcısı:
      - Gri rengi alır.
      - Tüm genişliği kaplar.
      - Header ve Footer arasındaki dikey boşluğu doldurur.
      - RGB çizgisi için pozisyonunu ayarlar. */
.stake-page-main-container {
  background-color: #131417;
  width: 100%;
  flex-grow: 1; /* Dikeyde esneyip boşluğu doldurur */
  position: relative;
  display: flex;
  justify-content: center; /* İçindeki .main-content-wrapper'ı ortalar */

  /* --- İSTEDİĞİN BOŞLUKLARI EKLEYEN SATIRLAR --- */
  padding-top: 20rem;    /* Üstten boşluk */
  padding-bottom: 10rem; /* Alttan boşluk */
  box-sizing: border-box; /* Padding'in yüksekliği bozmasını engeller */
}

/* 3. RGB çizgiyi gri alanın en altına ekle */
.stake-page-main-container::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--logo-solano) 0%, var(--logo-alpha) 100%);
  opacity: 0.8;
}

/* 4. Footer ile gri alan arasındaki boşluğu sıfırla */
.footer-container {
  margin-top: 0; /* Artık boşluğa gerek yok, çizgi ayırıyor */
}

/* ==========================================================
   VOLTAGE BUTTON - HEADER İÇİN FİNAL ANİMASYONLU STİLLER
   ========================================================== */
.header-actions .voltage-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px; /* Header yüksekliğine uygun */
}

.header-actions .voltage-button button {
  color: white;
  background: #0D1127;
  padding: 0 24px;
  height: 100%;
  border-radius: 5rem;
  border: 3px solid #5978F3;
  font-size: 1rem;
  line-height: 1em;
  letter-spacing: 0.075em;
  transition: background 0.3s;
  white-space: nowrap;
}

.header-actions .voltage-button button:hover {
  cursor: pointer;
  background: #0F1C53;
}

/* Aktifleşme ve animasyon tetikleyicileri */
.header-actions .voltage-button button:hover + svg, 
.header-actions .voltage-button button:hover + svg + .dots {
  opacity: 1;
}

.header-actions .voltage-button button:disabled + svg,
.header-actions .voltage-button button:disabled + svg + .dots {
    display: none;
}

.header-actions .voltage-button svg {
  display: block;
  position: absolute;
  top: -0.75em;
  left: -0.25em;
  width: calc(100% + 0.5em);
  height: calc(100% + 1.5em);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  transition-delay: 0.1s;
}

.header-actions .voltage-button svg path {
  stroke-dasharray: 100;
  filter: url("#glow");
}

.header-actions .voltage-button svg path.line-1 {
  stroke: #f6de8d;
  stroke-dashoffset: 0;
  animation: spark-1 3s linear infinite;
}

.header-actions .voltage-button svg path.line-2 {
  stroke: #6bfeff;
  stroke-dashoffset: 500;
  animation: spark-2 3s linear infinite;
}

.header-actions .voltage-button .dots {
  opacity: 0;
  transition: opacity 0.3s;
  transition-delay: 0.4s;
}

.header-actions .voltage-button .dots .dot {
  width: 0.5rem;
  height: 0.5rem;
  background: white;
  border-radius: 100%;
  position: absolute;
  opacity: 0;
}

.header-actions .voltage-button .dots .dot-1 {
  top: 0;
  left: 20%;
  animation: fly-up 3s linear infinite;
}

.header-actions .voltage-button .dots .dot-2 {
  top: 0;
  left: 55%;
  animation: fly-up 3s linear infinite;
  animation-delay: 0.5s;
}

.header-actions .voltage-button .dots .dot-3 {
  top: 0;
  left: 80%;
  animation: fly-up 3s linear infinite;
  animation-delay: 1s;
}

.header-actions .voltage-button .dots .dot-4 {
  bottom: 0;
  left: 30%;
  animation: fly-down 3s linear infinite;
  animation-delay: 2.5s;
}

.header-actions .voltage-button .dots .dot-5 {
  bottom: 0;
  left: 65%;
  animation: fly-down 3s linear infinite;
  animation-delay: 1.5s;
}

@keyframes spark-1 { to { stroke-dashoffset: -1000; } }
@keyframes spark-2 { to { stroke-dashoffset: -500; } }

@keyframes fly-up {
  0% { opacity: 0; transform: translateY(0) scale(0.2); }
  5% { opacity: 1; transform: translateY(-1.5rem) scale(0.4); }
  10%, 100% { opacity: 0; transform: translateY(-3rem) scale(0.2); }
}

@keyframes fly-down {
  0% { opacity: 0; transform: translateY(0) scale(0.2); }
  5% { opacity: 1; transform: translateY(1.5rem) scale(0.4); }
  10%, 100% { opacity: 0; transform: translateY(3rem) scale(0.2); }
}

/* ==========================================================
   NİHAİ VE BİREBİR AYNI BUTON STİLİ (TÜM SAYFALAR İÇİN)
   ========================================================== */

/* 1. ADIM: BUTONUN TEMEL GÖRÜNÜMÜNÜ TANIMLA (HER YERDE AYNI) */
.voltage-button button {
  /* Önceki tüm bozuk veya tarayıcı varsayılan stillerini sıfırla */
  all: unset; 
  
  /* Şimdi olması gereken temel görünümü yükle */
  width: 100%;
  height: 100%;
  color: white;
  background: #0D1127;
  border-radius: 5rem;
  border: 3px solid #5978F3;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  transition: background 0.3s;
  cursor: pointer;
  
  /* Metni dikey ve yatayda ortala */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box; /* Kenarlık ve padding'in boyutu bozmamasını sağla */
}

/* Hover (üzerine gelme) ve Disabled (devre dışı) durumları */
.voltage-button button:hover {
  background: #0F1C53;
}


/* 2. ADIM: BUTONLARIN DIŞ SARMALAYICISINI BOYUTLANDIR (BİREBİR AYNI) */
.header-actions .voltage-button,
.action-area .voltage-button {
  position: relative; /* SVG konumu için bu zorunludur */
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* HER İKİ BUTONU DA BİREBİR BU BOYUTLARA GETİR */
  height: 40px;
  width: 120px;
}


/* 3. ADIM: ANİMASYON KATMANINI VE EFEKTLERİ EKLE (HER YERDE AYNI) */
.voltage-button svg {
  display: block;
  position: absolute;
  /* Animasyonun çerçevenin DIŞINDA görünmesini sağlayan kilit kural budur */
  top: -0.75em;
  left: -0.25em;
  width: calc(100% + 0.5em);
  height: calc(100% + 1.5em);

  pointer-events: none; /* Tıklamayı engellememesi için */
  opacity: 0;
  transition: opacity 0.4s 0.1s;
}

/* Hover anında animasyonu görünür yap */
.voltage-button button:hover + svg {
  opacity: 1;
}

/* Devre dışıyken animasyonu gizle */
.voltage-button button:disabled + svg {
  display: none;
}

/* Animasyon yolları ve filtreleri */
.voltage-button svg path {
  stroke-dasharray: 100;
  filter: url("#glow"), url("#glow_mobile"), url("#glow-stake");
}

.voltage-button svg path.line-1 {
  stroke: #f6de8d;
  stroke-dashoffset: 0;
  animation: spark-1 3s linear infinite;
}

.voltage-button svg path.line-2 {
  stroke: #6bfeff;
  stroke-dashoffset: 500;
  animation: spark-2 3s linear infinite;
}

.voltage-button .dots {
  display: none; /* Nokta efektleri kapalı */
}

/* Animasyonun döngüsü için gereken keyframe'ler */
@keyframes spark-1 { to { stroke-dashoffset: -1000; } }
@keyframes spark-2 { to { stroke-dashoffset: -500; } }

/* =================================================================
   NİHAİ ÇÖZÜM: MOBİL CİHAZLARDAKİ TAŞMA SORUNU
   ================================================================= */

/*
  Bu kural, projedeki tüm ana içerik alanını sarmalayan
  .main-content-wrapper elementini hedefler.
*/
.main-content-wrapper {
  width: 100%;
  box-sizing: border-box; /* Padding'in genişliğe dahil edilmesini sağlar */

  /* Kenarlardan 1rem (yaklaşık 16px) boşluk bırakır */
  padding-left: 1rem;
  padding-right: 1rem;
}
/* =================================================================
   NİHAİ ÇÖZÜM: TÜM SAYFALARDA YATAY KAYDIRMAYI ENGELLEME
   ================================================================= */
/*
  Bu kural, projedeki en dış sarmalayıcıyı (.app-layout) hedefler
  ve içeriği ne olursa olsun sayfanın yana doğru kaymasını engeller.
*/
.app-layout {
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
}

/*
  Ayrıca, içeriğin kenarlara yapışmasını önlemek için
  .main-content-wrapper'a yatay padding veriyoruz.
*/
.main-content-wrapper {
  padding-left: 1rem;
  padding-right: 1rem;
  box-sizing: border-box;
}
/* --- GALAXY CARD (DENGELİ DAĞILIM - JITTERED GRID) --- */
.galaxy-card {
  position: relative;
  width: 100%;
  min-height: 120px; 
  margin-top: 50px; 
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
  
  border: none;
  box-shadow: none; 
  gap: 0.5em;
  z-index: 1;
  
  overflow: hidden; 
  isolation: isolate;
  
  background-color: transparent;
  
  /* --- YILDIZLAR (TÜM ALANA EŞİT YAYILMIŞ) --- */
  background-image: 
    /* 1. PARLAK YILDIZLAR (Ana Odaklar) */
    radial-gradient(white 1.5px, transparent 2px),
    radial-gradient(white 1.5px, transparent 2px),
    radial-gradient(white 1.5px, transparent 2px),
    radial-gradient(white 1.5px, transparent 2px),
    radial-gradient(white 1.5px, transparent 2px),
    radial-gradient(white 1.5px, transparent 2px),
    radial-gradient(white 1.5px, transparent 2px),
    radial-gradient(white 1.5px, transparent 2px),

    /* 2. ORTA YILDIZLAR (Dolgu) */
    radial-gradient(rgba(255,255,255,0.8) 1px, transparent 1.5px),
    radial-gradient(rgba(255,255,255,0.8) 1px, transparent 1.5px),
    radial-gradient(rgba(255,255,255,0.8) 1px, transparent 1.5px),
    radial-gradient(rgba(255,255,255,0.8) 1px, transparent 1.5px),
    radial-gradient(rgba(255,255,255,0.8) 1px, transparent 1.5px),
    radial-gradient(rgba(255,255,255,0.8) 1px, transparent 1.5px),
    radial-gradient(rgba(255,255,255,0.8) 1px, transparent 1.5px),
    radial-gradient(rgba(255,255,255,0.8) 1px, transparent 1.5px),
    radial-gradient(rgba(255,255,255,0.8) 1px, transparent 1.5px),
    radial-gradient(rgba(255,255,255,0.8) 1px, transparent 1.5px),

    /* 3. SÖNÜK YILDIZLAR (Derinlik) */
    radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1px),
    radial-gradient(rgba(255,255,255,0.4) 1px, transparent 1px),
    
    /* Tozlanma */
    radial-gradient(rgba(255, 255, 255, 0.15) 1px, transparent 1px);

  /* --- KOORDİNATLAR (IZGARA SİSTEMİYLE DAĞITILDI) --- */
  /* Sol-Sağ dengesi ve Yukarı-Aşağı dengesi hesaplandı */
  background-position: 
    /* Parlak (8 Adet) - Stratejik Noktalar */
    15% 5%,   85% 10%, 
    10% 80%, 90% 75%, 
    25% 25%, 37% 85%, 
    20% 60%, 80% 50%,

    /* Orta (10 Adet) - Ara Bölgeler */
    15% 20%, 35% 10%, 65% 5%, 85% 25%,
    10% 50%, 95% 50%,
    25% 75%, 45% 90%, 60% 80%, 75% 95%,

    /* Sönük (10 Adet) - Boşluk Doldurucular */
    2% 30%, 98% 40%,
    30% 40%, 70% 60%,
    40% 20%, 60% 10%,
    20% 95%, 80% 90%,
    45% 60%, 55% 30%,
    
    0 0; /* Toz */

  background-repeat: no-repeat;
  
  /* Boyutlandırma */
  background-size: 
    /* Parlak */
    4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px, 4px 4px,
    /* Orta */
    3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px,
    /* Sönük */
    2px 2px, 2px 2px, 2px 2px, 2px 2px, 2px 2px, 2px 2px, 2px 2px, 2px 2px, 2px 2px, 2px 2px,
    /* Toz */
    120px 120px; 
}

/* Yanıp Sönen Yıldızlar (HIZLI: 1s) */
.galaxy-card::before {
  content: "";
  position: absolute;
  inset: -50px;
  z-index: -1;
  pointer-events: none;
  background-image: 
    radial-gradient(white 2px, transparent 2.5px),
    radial-gradient(rgba(255,255,255,0.8) 1.5px, transparent 2px),
    radial-gradient(white 1.5px, transparent 2px);
  
  /* Bu yıldızlar da dengeli dağıtıldı */
  background-position: 25% 40%, 85% 20%, 50% 80%; 
  background-repeat: no-repeat;
  background-size: 6px 6px;
  
  /* Daha hızlı yanıp sönme */
  animation: galaxyTwinkle 1s ease-in-out infinite alternate;
}

/* Kayan Yıldız */
.galaxy-card::after {
  content: "";
  position: absolute;
  top: -50px; right: -50px; width: 150px; height: 1px;
  background: linear-gradient(90deg, transparent, #fff);
  transform: rotate(-65deg);
  z-index: -2; opacity: 0;
  animation: galaxyShootingStar 5s linear infinite; 
  animation-delay: 1s;
}

@keyframes galaxyTwinkle { 
  0% { opacity: 0.2; } 
  100% { opacity: 1; } 
}

@keyframes galaxyShootingStar { 
  0% { transform: translate(0, 0) rotate(-45deg); opacity: 1; } 
  10% { transform: translate(-350px, 350px) rotate(-45deg); opacity: 0; } 
  100% { transform: translate(-350px, 350px) rotate(-45deg); opacity: 0; } 
}

/* --- ASTRONOT (GÜÇLÜ SALINIM) --- */
.galaxy-astronaut {
  width: 9em; 
  height: auto; 
  z-index: 5;
  margin-top: 30px; /* Konum */
  will-change: transform;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.7));
  /* Salınım */
  animation: galaxyFloat 4s ease-in-out infinite;
}

@keyframes galaxyFloat { 
  0% { transform: translateY(0px) rotate(0deg); } 
  50% { transform: translateY(-25px) rotate(3deg); } 
  100% { transform: translateY(0px) rotate(0deg); } 
}

/* --- BAŞLIK VE İKONLAR --- */
.heading { 
  z-index: 6; 
  font-size: 1.1rem; 
  text-align: center; 
  /* Astronotun altına girmemesi için boşluk */
  margin-top: -10px; 
  letter-spacing: 0.5px; 
  position: relative;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.galaxy-icons { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 1.5rem; 
  z-index: 6; 
  margin-top: 1.5rem; 
  padding-bottom: -5px;
}

.galaxy-link {
  display: flex; 
  align-items: center; 
  justify-content: center;
  width: 40px; 
  height: 40px; 
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.1);
  color: #b0b0b0; 
  transition: all 0.3s;
  cursor: pointer;
  text-decoration: none;
  backdrop-filter: blur(4px);
}

.galaxy-link:hover { 
  transform: scale(1.15) translateY(-3px); 
  background: rgba(255, 255, 255, 0.2); 
  color: white; 
  box-shadow: 0 5px 15px rgba(0,0,0,0.5);
}

/* İkon Renkleri */
.instagram:hover { color: #E1306C; border-color: #E1306C; }
.x:hover { color: #ffffff; border-color: #ffffff; }
.telegram:hover { color: #24A1DE; border-color: #24A1DE; }

.galaxy-link svg { 
  width: 20px; 
  height: 20px; 
  fill: currentColor; 
}
.galaxy-link svg path { stroke: none; }/* Konum: src/styles/RewardModal.css */
.reward-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(15, 23, 42, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.reward-modal-content {
    background: var(--card-bg-dark);
    padding: 2.5rem;
    border-radius: 16px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    text-align: center;
    color: var(--text-dark);
    position: relative;
    border: 1px solid var(--border-dark);
    max-width: 90%;
    width: 500px;
    box-sizing: border-box;
    animation: zoomIn 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}

@keyframes zoomIn {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.light-theme .reward-modal-overlay {
    background: rgba(244, 246, 255, 0.7);
}
.light-theme .reward-modal-content {
    background: var(--card-bg-light);
    color: var(--text-light);
    border-color: var(--border-light);
}

.reward-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-muted);
    transition: all 0.2s;
    line-height: 1;
}
.reward-modal-close:hover {
    color: var(--logo-alpha);
    transform: rotate(90deg);
}

.reward-modal-content h3 {
    font-size: 2rem;
    color: var(--stat-yellow);
    margin-bottom: 1rem;
    text-shadow: 0 0 15px rgba(250, 204, 21, 0.5);
}
.light-theme .reward-modal-content h3 {
    color: var(--logo-solano);
    text-shadow: 0 0 10px rgba(99, 102, 241, 0.3);
}

.reward-modal-content p {
    font-size: 1.25rem;
    margin-bottom: 1.5rem;
}

.reward-modal-content p strong {
    font-weight: 700;
    color: white;
}
.light-theme .reward-modal-content p strong {
    color: var(--logo-solano);
}

p.second-chance-info {
    font-size: 0.9rem;
    color: var(--text-secondary);
    border: 1px dashed var(--border-dark);
    padding: 0.75rem;
    border-radius: 8px;
    margin-top: -0.5rem;
    margin-bottom: 1.5rem;
}
.light-theme p.second-chance-info {
    border-color: var(--border-light);
}


.reward-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: center;
}

.modal-action-btn {
    width: 100%;
    max-width: 300px;
    padding: 0.8rem 1.5rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

.modal-action-btn.claim {
    background: var(--logo-solano);
    color: white;
}
.modal-action-btn.claim:hover {
    background: #4f46e5;
    transform: translateY(-2px);
}

.modal-action-btn.second-chance {
    background: transparent;
    border: 2px solid var(--border-dark);
    color: var(--text-secondary);
}
.modal-action-btn.second-chance:hover {
    background: var(--card-bg-dark);
    border-color: var(--text-secondary);
}
.light-theme .modal-action-btn.second-chance {
    border-color: var(--border-light);
}
.light-theme .modal-action-btn.second-chance:hover {
    background: var(--theme-page-bg);
}/* src/styles/BB8Toggle.css */
/* From Uiverse.io by Galahhad */ 
/* REMASTERED */
/* RTX-ON */
/* completely redone toggle and droid */

.bb8-toggle {
  --toggle-size: 5px;
  /* finally I removed the scale now everything depends on the font-size */
  /* --margin-top-for-head: 1.75em; */
  /* it's just in case 👆 */
  --toggle-width: 10.625em;
  --toggle-height: 5.625em;
  --toggle-offset: calc((var(--toggle-height) - var(--bb8-diameter)) / 2);
  --toggle-bg: linear-gradient(#2c4770, #070e2b 35%, #628cac 50% 70%, #a6c5d4)
    no-repeat;
  --bb8-diameter: 4.375em;
  --radius: 99em;
  --transition: 0.4s;
  --accent: #de7d2f;
  --bb8-bg: #fff;
}

.bb8-toggle,
.bb8-toggle *,
.bb8-toggle *::before,
.bb8-toggle *::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.bb8-toggle {
  cursor: pointer;
  margin-top: var(--margin-top-for-head);
  font-size: var(--toggle-size);
}

.bb8-toggle__checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: none;
}

.bb8-toggle__container {
  width: var(--toggle-width);
  height: var(--toggle-height);
  background: var(--toggle-bg);
  background-size: 100% 11.25em;
  background-position-y: -5.625em;
  border-radius: var(--radius);
  position: relative;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: absolute;
  top: calc(var(--toggle-offset) - 1.688em + 0.188em);
  left: var(--toggle-offset);
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  z-index: 2;
}

.bb8__head-container {
  position: relative;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  z-index: 2;
  -webkit-transform-origin: 1.25em 3.75em;
  -ms-transform-origin: 1.25em 3.75em;
  transform-origin: 1.25em 3.75em;
}

.bb8__head {
  overflow: hidden;
  margin-bottom: -0.188em;
  width: 2.5em;
  height: 1.688em;
  background: -o-linear-gradient(
      transparent 0.063em,
      dimgray 0.063em 0.313em,
      transparent 0.313em 0.375em,
      var(--accent) 0.375em 0.5em,
      transparent 0.5em 1.313em,
      silver 1.313em 1.438em,
      transparent 1.438em
    ),
    -o-linear-gradient(45deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
          1.25em),
    -o-linear-gradient(135deg, transparent 0.188em, var(--bb8-bg) 0.188em 1.25em, transparent
          1.25em),
    -o-linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
  background: linear-gradient(
      transparent 0.063em,
      dimgray 0.063em 0.313em,
      transparent 0.313em 0.375em,
      var(--accent) 0.375em 0.5em,
      transparent 0.5em 1.313em,
      silver 1.313em 1.438em,
      transparent 1.438em
    ),
    linear-gradient(
      45deg,
      transparent 0.188em,
      var(--bb8-bg) 0.188em 1.25em,
      transparent 1.25em
    ),
    linear-gradient(
      -45deg,
      transparent 0.188em,
      var(--bb8-bg) 0.188em 1.25em,
      transparent 1.25em
    ),
    linear-gradient(var(--bb8-bg) 1.25em, transparent 1.25em);
  border-radius: var(--radius) var(--radius) 0 0;
  position: relative;
  z-index: 1;
  -webkit-filter: drop-shadow(0 0.063em 0.125em gray);
  filter: drop-shadow(0 0.063em 0.125em gray);
}

.bb8__head::before {
  content: "";
  position: absolute;
  width: 0.563em;
  height: 0.563em;
  background: radial-gradient(
      0.125em circle at 0.25em 0.375em,
      red,
      transparent
    ),
    radial-gradient(
      0.063em circle at 0.375em 0.188em,
      var(--bb8-bg) 50%,
      transparent 100%
    ),
    linear-gradient(45deg, #000 0.188em, dimgray 0.313em 0.375em, #000 0.5em);
  border-radius: var(--radius);
  top: 0.413em;
  left: 50%;
  -webkit-transform: translate(-50%);
  -ms-transform: translate(-50%);
  transform: translate(-50%);
  -webkit-box-shadow: 0 0 0 0.089em lightgray, 0.563em 0.281em 0 -0.148em,
    0.563em 0.281em 0 -0.1em var(--bb8-bg), 0.563em 0.281em 0 -0.063em;
  box-shadow: 0 0 0 0.089em lightgray, 0.563em 0.281em 0 -0.148em,
    0.563em 0.281em 0 -0.1em var(--bb8-bg), 0.563em 0.281em 0 -0.063em;
  z-index: 1;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8__head::after {
  content: "";
  position: absolute;
  bottom: 0.375em;
  left: 0;
  width: 100%;
  height: 0.188em;
  background: linear-gradient(
    to right,
    var(--accent) 0.125em,
    transparent 0.125em 0.188em,
    var(--accent) 0.188em 0.313em,
    transparent 0.313em 0.375em,
    var(--accent) 0.375em 0.938em,
    transparent 0.938em 1em,
    var(--accent) 1em 1.125em,
    transparent 1.125em 1.875em,
    var(--accent) 1.875em 2em,
    transparent 2em 2.063em,
    var(--accent) 2.063em 2.25em,
    transparent 2.25em 2.313em,
    var(--accent) 2.313em 2.375em,
    transparent 2.375em 2.438em,
    var(--accent) 2.438em
  );
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8__antenna {
  position: absolute;
  -webkit-transform: translateY(-90%);
  -ms-transform: translateY(-90%);
  transform: translateY(-90%);
  width: 0.059em;
  border-radius: var(--radius) var(--radius) 0 0;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8__antenna:nth-child(1) {
  height: 0.938em;
  right: 0.938em;
  background: linear-gradient(#000 0.188em, silver 0.188em);
}

.bb8__antenna:nth-child(2) {
  height: 0.375em;
  left: 50%;
  -webkit-transform: translate(-50%, -90%);
  -ms-transform: translate(-50%, -90%);
  transform: translate(-50%, -90%);
  background: silver;
}

.bb8__body {
  width: 4.375em;
  height: 4.375em;
  background: var(--bb8-bg);
  border-radius: var(--radius);
  position: relative;
  overflow: hidden;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  z-index: 1;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  background: linear-gradient(
      -90deg,
      var(--bb8-bg) 4%,
      var(--accent) 4% 10%,
      transparent 10% 90%,
      var(--accent) 90% 96%,
      var(--bb8-bg) 96%
    ),
    linear-gradient(
      var(--bb8-bg) 4%,
      var(--accent) 4% 10%,
      transparent 10% 90%,
      var(--accent) 90% 96%,
      var(--bb8-bg) 96%
    ),
    linear-gradient(
      to right,
      transparent 2.156em,
      silver 2.156em 2.219em,
      transparent 2.188em
    ),
    linear-gradient(
      transparent 2.156em,
      silver 2.156em 2.219em,
      transparent 2.188em
    );
  background-color: var(--bb8-bg);
}

.bb8__body::after {
  content: "";
  bottom: 1.5em;
  left: 0.563em;
  position: absolute;
  width: 0.188em;
  height: 0.188em;
  background: rgb(236, 236, 236);
  color: rgb(236, 236, 236);
  border-radius: 50%;
  box-shadow: 0.875em 0.938em, 0 -1.25em, 0.875em -2.125em, 2.125em -2.125em,
    3.063em -1.25em, 3.063em 0, 2.125em 0.938em;
}

.bb8__body::before {
  content: "";
  width: 2.625em;
  height: 2.625em;
  position: absolute;
  border-radius: 50%;
  z-index: 0.1;
  overflow: hidden;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border: 0.313em solid var(--accent);
  background: radial-gradient(
      1em circle at center,
      rgb(236, 236, 236) 50%,
      transparent 51%
    ),
    radial-gradient(1.25em circle at center, var(--bb8-bg) 50%, transparent 51%),
    linear-gradient(
      -90deg,
      transparent 42%,
      var(--accent) 42% 58%,
      transparent 58%
    ),
    linear-gradient(var(--bb8-bg) 42%, var(--accent) 42% 58%, var(--bb8-bg) 58%);
}

.artificial__hidden {
  position: absolute;
  border-radius: inherit;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.bb8__shadow {
  content: "";
  width: var(--bb8-diameter);
  height: 20%;
  border-radius: 50%;
  background: #3a271c;
  box-shadow: 0.313em 0 3.125em #3a271c;
  opacity: 0.25;
  position: absolute;
  bottom: 0;
  left: calc(var(--toggle-offset) - 0.938em);
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
  -webkit-transform: skew(-70deg);
  -ms-transform: skew(-70deg);
  transform: skew(-70deg);
  z-index: 1;
}

.bb8-toggle__scenery {
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  position: relative;
  border-radius: inherit;
}

.bb8-toggle__scenery::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 30%;
  bottom: 0;
  background: #b18d71;
  z-index: 1;
}

.bb8-toggle__cloud {
  z-index: 1;
  position: absolute;
  border-radius: 50%;
}

.bb8-toggle__cloud:nth-last-child(1) {
  width: 0.875em;
  height: 0.625em;
  filter: blur(0.125em) drop-shadow(0.313em 0.313em #ffffffae)
    drop-shadow(-0.625em 0 #fff) drop-shadow(-0.938em -0.125em #fff);
  right: 1.875em;
  top: 2.813em;
  background: linear-gradient(to top right, #ffffffae, #ffffffae);
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8-toggle__cloud:nth-last-child(2) {
  top: 0.625em;
  right: 4.375em;
  width: 0.875em;
  height: 0.375em;
  background: #dfdedeae;
  filter: blur(0.125em) drop-shadow(-0.313em -0.188em #e0dfdfae)
    drop-shadow(-0.625em -0.188em #bbbbbbae) drop-shadow(-1em 0.063em #cfcfcfae);
  -webkit-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
}

.bb8-toggle__cloud:nth-last-child(3) {
  top: 1.25em;
  right: 0.938em;
  width: 0.875em;
  height: 0.375em;
  background: #ffffffae;
  filter: blur(0.125em) drop-shadow(0.438em 0.188em #ffffffae)
    drop-shadow(-0.625em 0.313em #ffffffae);
  -webkit-transition: 0.8s;
  -o-transition: 0.8s;
  transition: 0.8s;
}

.gomrassen,
.hermes,
.chenini {
  position: absolute;
  border-radius: var(--radius);
  background: linear-gradient(#fff, #6e8ea2);
  top: 100%;
}

.gomrassen {
  left: 0.938em;
  width: 1.875em;
  height: 1.875em;
  box-shadow: 0 0 0.188em #ffffff52, 0 0 0.188em #6e8ea24b;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.gomrassen::before,
.gomrassen::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  box-shadow: inset 0 0 0.063em rgb(140, 162, 169);
  background: rgb(184, 196, 200);
}

.gomrassen::before {
  left: 0.313em;
  top: 0.313em;
  width: 0.438em;
  height: 0.438em;
}

.gomrassen::after {
  width: 0.25em;
  height: 0.25em;
  left: 1.25em;
  top: 0.75em;
}

.hermes {
  left: 3.438em;
  width: 0.625em;
  height: 0.625em;
  box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
  -webkit-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
}

.chenini {
  left: 4.375em;
  width: 0.5em;
  height: 0.5em;
  box-shadow: 0 0 0.125em #ffffff52, 0 0 0.125em #6e8ea24b;
  -webkit-transition: 0.8s;
  -o-transition: 0.8s;
  transition: 0.8s;
}

.tatto-1,
.tatto-2 {
  position: absolute;
  width: 1.25em;
  height: 1.25em;
  border-radius: var(--radius);
}

.tatto-1 {
  background: #fefefe;
  right: 3.125em;
  top: 0.625em;
  box-shadow: 0 0 0.438em #fdf4e1;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.tatto-2 {
  background: linear-gradient(#e6ac5c, #d75449);
  right: 1.25em;
  top: 2.188em;
  box-shadow: 0 0 0.438em #e6ad5c3d, 0 0 0.438em #d755494f;
  -webkit-transition: 0.7s;
  -o-transition: 0.7s;
  transition: 0.7s;
}

.bb8-toggle__star {
  position: absolute;
  width: 0.063em;
  height: 0.063em;
  background: #fff;
  border-radius: var(--radius);
  filter: drop-shadow(0 0 0.063em #fff);
  color: #fff;
  top: 100%;
}

.bb8-toggle__star:nth-child(1) {
  left: 3.75em;
  box-shadow: 1.25em 0.938em, -1.25em 2.5em, 0 1.25em, 1.875em 0.625em,
    -3.125em 1.875em, 1.25em 2.813em;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
}

.bb8-toggle__star:nth-child(2) {
  left: 4.688em;
  box-shadow: 0.625em 0, 0 0.625em, -0.625em -0.625em, 0.625em 0.938em,
    -3.125em 1.25em, 1.25em -1.563em;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s;
}

.bb8-toggle__star:nth-child(3) {
  left: 5.313em;
  box-shadow: -0.625em -0.625em, -2.188em 1.25em, -2.188em 0,
    -3.75em -0.625em, -3.125em -0.625em, -2.5em -0.313em, 0.75em -0.625em;
  -webkit-transition: var(--transition);
  -o-transition: var(--transition);
  transition: var(--transition);
}

.bb8-toggle__star:nth-child(4) {
  left: 1.875em;
  width: 0.125em;
  height: 0.125em;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

.bb8-toggle__star:nth-child(5) {
  left: 5em;
  width: 0.125em;
  height: 0.125em;
  -webkit-transition: 0.6s;
  -o-transition: 0.6s;
  transition: 0.6s;
}

.bb8-toggle__star:nth-child(6) {
  left: 2.5em;
  width: 0.125em;
  height: 0.125em;
  -webkit-transition: 0.7s;
  -o-transition: 0.7s;
  transition: 0.7s;
}

.bb8-toggle__star:nth-child(7) {
  left: 3.438em;
  width: 0.125em;
  height: 0.125em;
  -webkit-transition: 0.8s;
  -o-transition: 0.8s;
  transition: 0.8s;
}

/* actions */

.bb8-toggle__checkbox:checked
  + .bb8-toggle__container
  .bb8-toggle__star:nth-child(1) {
  top: 0.625em;
}

.bb8-toggle__checkbox:checked
  + .bb8-toggle__container
  .bb8-toggle__star:nth-child(2) {
  top: 1.875em;
}

.bb8-toggle__checkbox:checked
  + .bb8-toggle__container
  .bb8-toggle__star:nth-child(3) {
  top: 1.25em;
}

.bb8-toggle__checkbox:checked
  + .bb8-toggle__container
  .bb8-toggle__star:nth-child(4) {
  top: 3.438em;
}

.bb8-toggle__checkbox:checked
  + .bb8-toggle__container
  .bb8-toggle__star:nth-child(5) {
  top: 3.438em;
}

.bb8-toggle__checkbox:checked
  + .bb8-toggle__container
  .bb8-toggle__star:nth-child(6) {
  top: 0.313em;
}

.bb8-toggle__checkbox:checked
  + .bb8-toggle__container
  .bb8-toggle__star:nth-child(7) {
  top: 1.875em;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8-toggle__cloud {
  right: -100%;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .gomrassen {
  top: 0.938em;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .hermes {
  top: 2.5em;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .chenini {
  top: 2.75em;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container {
  background-position-y: 0;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .tatto-1 {
  top: 100%;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .tatto-2 {
  top: 100%;
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8 {
  left: calc(100% - var(--bb8-diameter) - var(--toggle-offset));
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8__shadow {
  left: calc(100% - var(--bb8-diameter) - var(--toggle-offset) + 0.938em);
  -webkit-transform: skew(70deg);
  -ms-transform: skew(70deg);
  transform: skew(70deg);
}

.bb8-toggle__checkbox:checked + .bb8-toggle__container .bb8__body {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(225deg);
}

.bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__head::before {
  left: 100%;
}

.bb8-toggle__checkbox:not(:checked):hover
  + .bb8-toggle__container
  .bb8__antenna:nth-child(1) {
  right: 1.5em;
}

.bb8-toggle__checkbox:hover
  + .bb8-toggle__container
  .bb8__antenna:nth-child(2) {
  left: 0.938em;
}

.bb8-toggle__checkbox:hover + .bb8-toggle__container .bb8__head::after {
  background-position: 1.375em 0;
}

.bb8-toggle__checkbox:checked:hover
  + .bb8-toggle__container
  .bb8__head::before {
  left: 0;
}

.bb8-toggle__checkbox:checked:hover
  + .bb8-toggle__container
  .bb8__antenna:nth-child(2) {
  left: calc(100% - 0.938em);
}

.bb8-toggle__checkbox:checked:hover + .bb8-toggle__container .bb8__head::after {
  background-position: -1.375em 0;
}

.bb8-toggle__checkbox:active + .bb8-toggle__container .bb8__head-container {
  -webkit-transform: rotate(25deg);
  -ms-transform: rotate(25deg);
  transform: rotate(25deg);
}

.bb8-toggle__checkbox:checked:active
  + .bb8-toggle__container
  .bb8__head-container {
  -webkit-transform: rotate(-25deg);
  -ms-transform: rotate(-25deg);
  transform: rotate(-25deg);
}

.bb8:hover .bb8__head::before,
.bb8:hover .bb8__antenna:nth-child(2) {
  left: 50% !important;
}

.bb8:hover .bb8__antenna:nth-child(1) {
  right: 0.938em !important;
}

.bb8:hover .bb8__head::after {
  background-position: 0 0 !important;
}/* src/styles/MiningGauge.css (TÜM DOSYAYI BUNUNLA GÜNCELLEYİN) */

.mining-gauge-container {
  position: relative;
  width: 100%; /* EKSİK OLAN EN ÖNEMLİ KURAL BU. Konteynerin, dış sarmalayıcının genişliğine uymasını sağlar. */
}

.daily-rate-badge {
  position: absolute;
  bottom: 12%; /* Konumu yüzdeli yaparak grafiğin boyutuna göre orantılı olmasını sağlıyoruz. */
  left: 50%;
  transform: translateX(-50%);
  
  background-color: rgba(40, 201, 136, .1);
  color: #28C988;
  
  padding: 5px 12px;
  border-radius: 999px;
  
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  
  border: 1px solid rgba(40, 201, 136, 0.2);
}

/* ===== Lightweight SVG Gauge ===== */
.gauge-root{
  position: relative;
  width: 100%;
  max-width: 280px;
  margin: 4px auto 0;
}

.gauge-svg{
  width: 100%;
  height: auto;
  display: block;
}

/* Track ve değer */
.g-track{
  fill: none;
  stroke: rgba(255,255,255,.10);
  stroke-width: 18;
  stroke-linecap: round;
}

.g-value{
  fill: none;
  stroke: url(#gaugeGrad);
  stroke-width: 18;
  stroke-linecap: round;
  transition: stroke-dasharray .45s ease;
  filter: drop-shadow(0 2px 8px rgba(34,211,238,.2));
}

/* Hafif iç parlama */
.g-gloss{
  fill: none;
  stroke: rgba(255,255,255,.06);
  stroke-width: 1;
}

/* Merkez yazıları */
.g-center{
  position: absolute;
  left: 50%; top: 64%;
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}
.g-val{
  font-weight: 800;
  font-size: 32px;
  line-height: 1;
  color: var(--gauge-main-text-color, #0f172a);
}
.g-unit{
  margin-top: 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--gauge-secondary-text-color, #64748b);
}

/* Mining durumunda barı biraz parlat */
.gauge-root[data-status="mining"] .g-value{
  filter: drop-shadow(0 0 10px rgba(34,211,238,.25));
}

/* Küçük ekranlar */
@media (max-width: 420px){
  .gauge-root{ max-width: 260px; }
  .g-val{ font-size: 28px; }
}
@media (max-width: 360px){
  .gauge-root{ max-width: 220px; }
  .g-val{ font-size: 26px; }
}/* SwapComponent.css (NİHAİ VE DÜZELTİLMİŞ VERSİYON) */

/* =======================================
   ANA DEĞİŞKENLER (AÇIK VE KOYU TEMA)
   ======================================= */
/* Koyu Tema (Varsayılan) */
:root, .dark-theme {
  --swap-text-primary: #ffffff;
  --swap-text-secondary: #a0a0a0;
  --swap-text-placeholder: #5a5a5a;
  --swap-card-bg: #1a1a1a;
  --swap-input-bg: #0c0c0c;
  --swap-border-color: #333333;
  --swap-button-secondary-bg: #2a2a2a;
  --swap-button-secondary-hover-bg: #383838;
  --swap-button-disabled-bg: #252525;
  --swap-button-disabled-text: #666666;
  --swap-brand-blue: #007bff;
}

/* Açık Tema */
.light-theme {
  --swap-text-primary: #0c0c0c;
  --swap-text-secondary: #5a5a5a;
  --swap-text-placeholder: #a0a0a0;
  --swap-card-bg: #ffffff;
  --swap-input-bg: #f5f5f5;
  --swap-border-color: #e0e0e0;
  --swap-button-secondary-bg: #eeeeee;
  --swap-button-secondary-hover-bg: #e0e0e0;
  --swap-button-disabled-bg: #f0f0f0;
  --swap-button-disabled-text: #aaaaaa;
  --swap-brand-blue: #007bff;
}

/* =======================================
   ANA YAPI
   ======================================= */
.swap-component-container {
  width: 100%;
  max-width: 480px;
  margin: 2rem auto;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

.swap-title {
  font-size: 2rem;
  font-weight: 600;
  color: var(--swap-text-primary);
  text-align: center;
}

.swap-card {
  width: 100%;
  background-color: var(--swap-card-bg);
  border-radius: 16px;
  padding: 1.25rem;
  border: 1px solid var(--swap-border-color);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.swap-input-group {
  background-color: var(--swap-input-bg);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.input-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.875rem;
  color: var(--swap-text-secondary);
}

.input-main {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.amount-input {
  background: transparent;
  border: none;
  font-size: 2.25rem;
  font-weight: 500;
  color: var(--swap-text-primary);
  width: 100%;
  padding: 0;
  outline: none;
}
.amount-input::placeholder { color: var(--swap-text-placeholder); }
.amount-input::-webkit-outer-spin-button, .amount-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.amount-input[type=number] { -moz-appearance: textfield; }

.token-selector-button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background-color: var(--swap-button-secondary-bg);
  border: 1px solid var(--swap-border-color);
  border-radius: 20px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background-color 0.2s ease;
  color: var(--swap-text-primary);
}
.token-selector-button:hover { background-color: var(--swap-button-secondary-hover-bg); }

.token-icon { width: 28px; height: 28px; }
.token-symbol { font-size: 1.125rem; font-weight: 600; }
.token-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;

  /* SVG ve kare logolar için zorunlu maske → bütün logolar %100 daire olur */
  -webkit-mask-image: radial-gradient(circle, white 100%, transparent 100%);
  mask-image: radial-gradient(circle, white 100%, transparent 100%);
}

.swap-direction-button-wrapper {
  display: flex;
  justify-content: center;
  margin: -0.75rem 0;
  position: relative;
  z-index: 2;
}
.swap-direction-button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--swap-button-secondary-bg);
  border: 3px solid var(--swap-card-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swap-text-secondary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.swap-direction-button:hover {
  transform: rotate(180deg);
  background-color: var(--swap-button-secondary-hover-bg);
  color: var(--swap-text-primary);
}

.swap-action-button {
  width: 100%;
  padding: 1rem;
  font-size: 1.125rem;
  font-weight: 600;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  background: linear-gradient(90deg, #00c2ff, #007bff);
  color: white;
  margin-top: 1.5rem;
}
.swap-action-button:hover:not(:disabled) {
  opacity: 0.9;
  box-shadow: 0 0 15px rgba(0, 194, 255, 0.5);
}
.swap-action-button:disabled {
  background: var(--swap-button-disabled-bg);
  color: var(--swap-button-disabled-text);
  cursor: not-allowed;
}

/* =======================================
   TOKEN SEÇİM MODALI
   ======================================= */
.swap-modal-backdrop {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000; animation: fadeIn 0.3s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.swap-modal-content {
  background-color: var(--swap-card-bg);
  border-radius: 16px; width: 90%; max-width: 420px;
  height: 70vh; max-height: 500px;
  display: flex; flex-direction: column;
  border: 1px solid var(--swap-border-color);
  animation: slideIn 0.3s ease-out;
}
@keyframes slideIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.swap-modal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.5rem; border-bottom: 1px solid var(--swap-border-color);
}
.swap-modal-header h2 {
  margin: 0;
  font-size: 1.125rem;
  color: var(--swap-text-primary);
  font-weight: 600; /* Yazıyı biraz incelterek daha okunaklı yapar */
  -webkit-font-smoothing: antialiased; /* Yazı kenarlarını yumuşatır (Chrome/Safari) */
  -moz-osx-font-smoothing: grayscale; /* Yazı kenarlarını yumuşatır (Firefox) */
}
.swap-modal-close {
  background: none; border: none; font-size: 2rem; line-height: 1;
  color: var(--swap-text-secondary); cursor: pointer; transition: color 0.2s ease;
}
.swap-modal-close:hover { color: var(--swap-text-primary); }
.swap-modal-search {
  padding: 1rem 1rem; /* Dikey boşluğu azaltarak daha dengeli hale getirir */
  border-bottom: 1px solid var(--swap-border-color);
}
.swap-modal-search input {
  width: 100%;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  padding-right: 1rem; 
  padding-left: 2.5rem; /* İkon için soldan boşluk (sabit) */
  background-color: var(--swap-input-bg);
  border: 1px solid var(--swap-border-color);
  border-radius: 8px;
  color: var(--swap-text-primary);
  font-size: 1rem;
  outline: none;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23808080" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>');
  background-repeat: no-repeat;
  background-position: 0.75rem center; /* İkonu sola yaklaştırdık */
  transition: border-color 0.2s ease;
  box-sizing: border-box; /* Padding'in genişliği etkilememesini sağlar */
}
.swap-modal-search input:focus { border-color: var(--swap-brand-blue); }

.swap-token-list {
  flex-grow: 1;
  overflow-y: auto;
  padding: 0.5rem;
}

/* --- CHROME/SAFARI İÇİN KAYDIRMA ÇUBUĞU --- */
.swap-token-list::-webkit-scrollbar {
  width: 6px;
}
.swap-token-list::-webkit-scrollbar-track {
  background: transparent;
}
.swap-token-list::-webkit-scrollbar-thumb {
  background-color: var(--swap-button-secondary-bg);
  border-radius: 20px;
  border: 2px solid var(--swap-card-bg); /* Kenar boşluğu efekti verir */
}
.swap-token-list::-webkit-scrollbar-thumb:hover {
  background-color: var(--swap-button-secondary-hover-bg);
}

/* --- FIREFOX İÇİN KAYDIRMA ÇUBUĞU --- */
.swap-token-list {
  scrollbar-width: thin;
  scrollbar-color: var(--swap-button-secondary-bg) var(--swap-card-bg);
}
.swap-token-list-item {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.75rem 1rem; cursor: pointer; border-radius: 8px;
  transition: background-color 0.2s ease;
}
.swap-token-list-item:hover { background-color: var(--swap-button-secondary-hover-bg); }
.swap-token-list-item .token-info { display: flex; flex-direction: column; }
.swap-token-list-item .token-symbol { font-weight: 600; color: var(--swap-text-primary); }
.swap-token-list-item .token-name { font-size: 0.875rem; color: var(--swap-text-secondary); }

/* =======================================
   RESPONSIVE AYARLARI
   ======================================= */
@media (max-width: 480px) {
  /* DÜZELTME: padding: 0 yerine yanlardan 24px boşluk verildi */
  .swap-component-container { padding: 0 24px; box-sizing: border-box; }
  .swap-title { font-size: 1.5rem; margin-bottom: 1rem; }
  .swap-card { padding: 16px; }
  .swap-input-group { padding: 12px; }
  .input-header { font-size: 0.75rem; }
  .input-main { gap: 10px; }
  .amount-input { font-size: 1.6rem; min-width: 0; }
  .token-selector-button { padding: 6px 10px; gap: 6px; flex-shrink: 0; }
  .token-icon { width: 22px; height: 22px; }
  .token-symbol { font-size: 0.95rem; }
  .swap-action-button { font-size: 1rem; padding: 12px; }
}