@view-transition { navigation: auto; types: grAdim; }

.grBody {
  --grR: calc(16px * var(--kYaricap, 1));
  --grR2: calc(10px * var(--kYaricap, 1));
  --grEase: cubic-bezier(.16, 1, .3, 1);
  --grMor: color-mix(in srgb, var(--kBirincil) 45%, #A855F7);
  --grDolgu: color-mix(in srgb, var(--kBirincil) 88%, #000);
  --grDolguH: color-mix(in srgb, var(--kBirincil) 80%, #000);
  --grZemin: #F3F4F9;
  --grZeminGrad: radial-gradient(110% 70% at 50% -5%, #FFFFFF 0%, rgba(255, 255, 255, 0) 62%), linear-gradient(180deg, #F6F7FB 0%, #EDEFF6 100%);
  --grMetin: #111228;
  --grMetin2: #41425C;
  --grSoluk: #67688A;
  --grSoluk2: #9193AC;
  --grKart: #FFFFFF;
  --grKartBg: #FFFFFF;
  --grKartCizgi: rgba(17, 18, 40, .08);
  --grKartUst: rgba(255, 255, 255, 1);
  --grKartGolge: 0 0 0 1px rgba(17, 18, 40, .02), 0 1px 2px rgba(17, 18, 40, .05), 0 8px 16px -8px rgba(17, 18, 40, .08), 0 24px 48px -16px rgba(17, 18, 40, .14), 0 56px 112px -40px color-mix(in srgb, var(--kBirincil) 34%, transparent);
  --grAyrac: rgba(17, 18, 40, .07);
  --grGirdi: #FFFFFF;
  --grGirdiOdak: #FFFFFF;
  --grOtoDolgu: color-mix(in srgb, var(--kBirincil) 5%, #FFFFFF);
  --grGirdiCizgi: #D8DAE6;
  --grGirdiCizgiH: #BCBFD3;
  --grGirdiGolge: 0 1px 2px rgba(17, 18, 40, .05);
  --grHalka: color-mix(in srgb, var(--kBirincil) 20%, transparent);
  --grOdakCizgi: var(--kBirincil);
  --grOdakEtiket: color-mix(in srgb, var(--kBirincil) 82%, #000);
  --grHover: rgba(17, 18, 40, .04);
  --grA1: color-mix(in srgb, var(--kBirincil) 22%, transparent);
  --grA2: color-mix(in srgb, var(--kIkinci) 20%, transparent);
  --grA3: color-mix(in srgb, var(--grMor) 14%, transparent);
  --grHavuz: rgba(255, 255, 255, .85);
  --grGren: .035;
  --grIsikRenk: color-mix(in srgb, var(--kBirincil) 6%, transparent);
  --grKenarIsik: color-mix(in srgb, var(--kBirincil) 45%, transparent);
  --grUstCizgi: color-mix(in srgb, var(--kBirincil) 50%, transparent);
  --grMarkaBg: linear-gradient(180deg, #FFFFFF, #F3F4FA);
  --grAnahtar: #D5D7E5;
  --grBtnBg: rgba(255, 255, 255, .75);
  --grBtnCizgi: rgba(17, 18, 40, .09);
  --grTehlike: #D63A47;
  --grTehlikeMetin: #B3232F;
  --grTehlikeZemin: #FFF3F4;
  --grTehlikeCizgi: rgba(214, 58, 71, .22);
  --grAmber: #C77F06;
  --grAmberMetin: #8F5A05;
  --grAmberZemin: #FFF8EA;
  --grAmberCizgi: rgba(217, 142, 16, .3);
  --grBasari: #179F69;
  --grBasariMetin: #0F7A50;
  margin: 0; height: auto; min-height: calc(100vh / var(--kOlcekV, 1)); min-height: calc(100svh / var(--kOlcekV, 1));
  overflow-x: hidden; color: var(--grMetin); background: var(--grZemin);
  font-family: "Sofia Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
html[data-tema="dark"] .grBody {
  --grZemin: #08091A;
  --grZeminGrad: radial-gradient(90% 60% at 50% -10%, color-mix(in srgb, var(--kBirincil) 16%, transparent) 0%, transparent 65%), linear-gradient(180deg, #0A0B1F 0%, #06070F 100%);
  --grMetin: #F3F4FA;
  --grMetin2: #C7C9DE;
  --grSoluk: #9698B6;
  --grSoluk2: #6D7092;
  --grKart: #121429;
  --grKartBg: linear-gradient(180deg, #161833 0%, #10122A 100%);
  --grKartCizgi: rgba(255, 255, 255, .085);
  --grKartUst: rgba(255, 255, 255, .07);
  --grKartGolge: 0 0 0 1px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .3), 0 24px 56px -16px rgba(0, 0, 0, .7), 0 64px 140px -48px color-mix(in srgb, var(--kBirincil) 40%, transparent);
  --grAyrac: rgba(255, 255, 255, .07);
  --grGirdi: rgba(255, 255, 255, .03);
  --grGirdiOdak: rgba(255, 255, 255, .05);
  --grOtoDolgu: color-mix(in srgb, var(--kBirincil) 12%, #14162F);
  --grGirdiCizgi: rgba(255, 255, 255, .12);
  --grGirdiCizgiH: rgba(255, 255, 255, .2);
  --grGirdiGolge: inset 0 1px 1px rgba(0, 0, 0, .18);
  --grHalka: color-mix(in srgb, var(--kBirincil) 32%, transparent);
  --grOdakCizgi: color-mix(in srgb, var(--kBirincil) 72%, #fff);
  --grOdakEtiket: color-mix(in srgb, var(--kBirincil) 45%, #fff);
  --grHover: rgba(255, 255, 255, .05);
  --grA1: color-mix(in srgb, var(--kBirincil) 30%, transparent);
  --grA2: color-mix(in srgb, var(--kIkinci) 15%, transparent);
  --grA3: color-mix(in srgb, var(--grMor) 24%, transparent);
  --grHavuz: color-mix(in srgb, var(--kBirincil) 10%, transparent);
  --grGren: .055;
  --grIsikRenk: color-mix(in srgb, var(--kBirincil) 12%, transparent);
  --grKenarIsik: color-mix(in srgb, var(--kBirincil) 65%, #fff);
  --grUstCizgi: color-mix(in srgb, var(--kBirincil) 65%, #fff);
  --grMarkaBg: linear-gradient(180deg, #252950, #16182F);
  --grAnahtar: rgba(255, 255, 255, .16);
  --grBtnBg: rgba(255, 255, 255, .06);
  --grBtnCizgi: rgba(255, 255, 255, .1);
  --grTehlike: #F26B75;
  --grTehlikeMetin: #FCA5AC;
  --grTehlikeZemin: rgba(242, 107, 117, .1);
  --grTehlikeCizgi: rgba(242, 107, 117, .26);
  --grAmber: #F0B44C;
  --grAmberMetin: #F7CD82;
  --grAmberZemin: rgba(240, 180, 76, .1);
  --grAmberCizgi: rgba(240, 180, 76, .28);
  --grBasari: #34C98E;
  --grBasariMetin: #6EE0B2;
}

.gr { position: relative; min-height: calc(100vh / var(--kOlcekV, 1)); min-height: calc(100svh / var(--kOlcekV, 1)); }

.grArka { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; background: var(--grZeminGrad); }
.grArka i { position: absolute; display: block; }
.grAurora { border-radius: 50%; will-change: transform; animation: 40s ease-in-out var(--grFaz, 0s) infinite alternate; }
.grA1 { width: 64vmax; height: 64vmax; left: -22vmax; top: -30vmax; background: radial-gradient(closest-side, var(--grA1), transparent); animation-name: grSuz1; }
.grA2 { width: 58vmax; height: 58vmax; right: -24vmax; top: 4vmax; background: radial-gradient(closest-side, var(--grA2), transparent); animation-name: grSuz2; animation-duration: 50s; }
.grA3 { width: 60vmax; height: 60vmax; left: 6vmax; bottom: -38vmax; background: radial-gradient(closest-side, var(--grA3), transparent); animation-name: grSuz3; animation-duration: 60s; }
@keyframes grSuz1 { to { transform: translate3d(8vmax, 5vmax, 0) scale(1.08); } }
@keyframes grSuz2 { to { transform: translate3d(-7vmax, 6vmax, 0) scale(.94); } }
@keyframes grSuz3 { to { transform: translate3d(9vmax, -5vmax, 0) scale(1.07); } }
.grHavuz { left: 50%; top: 50%; width: min(1100px, 150vw); height: min(820px, 120vh); transform: translate(-50%, -50%); background: radial-gradient(closest-side, var(--grHavuz), transparent); }
.grGren { inset: 0; opacity: var(--grGren);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 160px 160px; }

.grUst { position: fixed; z-index: 20; top: max(16px, calc(env(safe-area-inset-top, 0px) + 8px)); right: max(16px, calc(env(safe-area-inset-right, 0px) + 8px)); }
.grTemaBtn { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: var(--grR2); border: 1px solid var(--grBtnCizgi); background: var(--grBtnBg); color: var(--grMetin2); cursor: pointer;
  box-shadow: 0 1px 2px rgba(17, 18, 40, .06), inset 0 1px 0 var(--grKartUst); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%);
  -webkit-tap-highlight-color: transparent; transition: background-color .2s, color .2s, border-color .2s, transform .15s var(--grEase); }
.grTemaBtn:hover { color: var(--grMetin); border-color: color-mix(in srgb, var(--kBirincil) 35%, var(--grBtnCizgi)); }
.grTemaBtn:active { transform: scale(.95); }
.grTemaBtn:focus-visible { outline: none; border-radius: var(--grR2); box-shadow: 0 0 0 3px var(--grHalka), 0 0 0 1px var(--kBirincil); }
.grTemaBtn svg { width: 18px; height: 18px; overflow: visible; }
.grGunes { transform-box: fill-box; transform-origin: center; transform: scale(.56); transition: transform .5s var(--grEase); }
.grAyKes { transform-box: fill-box; transform-origin: center; transform: translate(10px, -10px); transition: transform .5s var(--grEase); }
.grIsinlar { transform-box: fill-box; transform-origin: center; transition: transform .5s var(--grEase), opacity .3s; }
html[data-tema="dark"] .grGunes { transform: scale(1); }
html[data-tema="dark"] .grAyKes { transform: translate(0, 0); }
html[data-tema="dark"] .grIsinlar { transform: rotate(-60deg) scale(.4); opacity: 0; }

.grSahne { position: relative; z-index: 1; display: grid; place-items: center;
  min-height: calc(100vh / var(--kOlcekV, 1)); min-height: calc(100svh / var(--kOlcekV, 1));
  padding: max(72px, calc(env(safe-area-inset-top, 0px) + 64px)) 16px max(64px, calc(env(safe-area-inset-bottom, 0px) + 56px)); }
.grKartSar { position: relative; width: min(400px, 100%); }
.grKartIc { position: relative; animation: grGir .38s cubic-bezier(.2, .7, .2, 1) backwards; }
html:active-view-transition-type(grAdim) .grKartIc { view-transition-name: grKart; }
::view-transition-group(grKart) { animation-duration: .4s; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
@keyframes grGir { from { opacity: 0; transform: translate3d(0, 8px, 0); } }
.grDevam .grKartIc { animation: none; }

.grYuzey { position: absolute; inset: 0; border-radius: var(--grR); overflow: hidden; background: var(--grKartBg); border: 1px solid var(--grKartCizgi); box-shadow: var(--grKartGolge), inset 0 1px 0 var(--grKartUst); }
.grYuzey::before { content: ""; position: absolute; top: 0; left: 16%; right: 16%; height: 1px; background: linear-gradient(90deg, transparent, var(--grUstCizgi) 35%, color-mix(in srgb, var(--kIkinci) 65%, transparent) 65%, transparent); }
.grIsik { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; background: radial-gradient(360px circle at var(--grX, 50%) var(--grY, 0%), var(--grIsikRenk), transparent 62%); }
.grKenar { position: absolute; inset: 0; border-radius: var(--grR); padding: 1px; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(220px circle at var(--grX, 50%) var(--grY, 0%), var(--grKenarIsik), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.grKartSar.grIsikAcik .grIsik, .grKartSar.grIsikAcik .grKenar { opacity: 1; }

.grKart { position: relative; z-index: 1; padding: 40px 32px 32px; }

.grBas { margin-bottom: 32px; text-align: center; }
.grMarka { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 24px; border-radius: var(--grR); border: 1px solid transparent;
  background: var(--grMarkaBg) padding-box, linear-gradient(150deg, color-mix(in srgb, var(--kBirincil) 50%, transparent), color-mix(in srgb, var(--kIkinci) 30%, transparent) 45%, var(--grKartCizgi) 80%) border-box;
  box-shadow: inset 0 1px 0 var(--grKartUst), 0 1px 2px rgba(17, 18, 40, .08), 0 8px 24px -8px color-mix(in srgb, var(--kBirincil) 45%, transparent); }
.grLogo { display: block; width: 40px; height: 40px; object-fit: contain; -webkit-user-drag: none; user-select: none; }
.grRozet { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; margin-bottom: 16px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--grBasariMetin);
  background: color-mix(in srgb, var(--grBasari) 10%, transparent); border: 1px solid color-mix(in srgb, var(--grBasari) 26%, transparent); }
.grRozet i { font-size: 11px; }
.grKart h1 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 700; letter-spacing: -.025em; color: var(--grMetin); }
.grAlt { margin: 8px auto 0; max-width: 312px; font-size: 14px; line-height: 20px; color: var(--grSoluk); }

.grUyari { display: flex; align-items: flex-start; gap: 8px; padding: 12px 16px; margin: -8px 0 24px; border-radius: var(--grR2); font-size: 13.5px; line-height: 20px; font-weight: 500;
  color: var(--grTehlikeMetin); background: var(--grTehlikeZemin); border: 1px solid var(--grTehlikeCizgi); }
.grUyari.grUyariSinir { color: var(--grAmberMetin); background: var(--grAmberZemin); border-color: var(--grAmberCizgi); }
.grUyari .grIkon { flex: none; width: 16px; margin-top: 2px; font-size: 14px; text-align: center; }

.grAlan { position: relative; margin-bottom: 16px; }
.grAlan input { display: block; width: 100%; height: 56px; margin: 0; padding: 24px 16px 8px 44px; border: 1px solid var(--grGirdiCizgi); border-radius: var(--grR2); outline: none;
  color: var(--grMetin); background: var(--grGirdi); font-family: inherit; font-size: 16px; font-weight: 500; line-height: 20px; letter-spacing: -.005em; caret-color: var(--kBirincil);
  -webkit-appearance: none; appearance: none; box-shadow: var(--grGirdiGolge); transition: border-color .15s, box-shadow .15s, background-color .15s; }
.grAlanSifre input { padding-right: 56px; }
.grAlan input::-ms-reveal, .grAlan input::-ms-clear { display: none; }
.grAlan input:hover { border-color: var(--grGirdiCizgiH); }
.grAlan input:focus { border-color: var(--grOdakCizgi); background: var(--grGirdiOdak); box-shadow: 0 0 0 4px var(--grHalka); }
.grAlan label { position: absolute; left: 44px; top: 18px; max-width: calc(100% - 64px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 15px; line-height: 20px; font-weight: 500;
  color: var(--grSoluk); pointer-events: none; transform-origin: 0 0; transition: transform .18s var(--grEase), color .15s; }
.grAlan input:focus + label, .grAlan input:not(:placeholder-shown) + label { transform: translate3d(0, -10px, 0) scale(.8); }
.grAlan input:-webkit-autofill + label { transform: translate3d(0, -10px, 0) scale(.8); }
.grAlan input:focus + label { color: var(--grOdakEtiket); }
.grAlan input:-webkit-autofill, .grAlan input:-webkit-autofill:hover { -webkit-text-fill-color: var(--grMetin); caret-color: var(--grMetin); box-shadow: 0 0 0 100px var(--grOtoDolgu) inset; transition: background-color 600000s 0s, border-color .15s; }
.grAlan input:-webkit-autofill:focus { -webkit-text-fill-color: var(--grMetin); box-shadow: 0 0 0 100px var(--grOtoDolgu) inset, 0 0 0 4px var(--grHalka); }
.grAlan .grIkon { position: absolute; left: 16px; top: 20px; width: 16px; font-size: 14px; line-height: 16px; text-align: center; color: var(--grSoluk2); pointer-events: none; transition: color .15s; }
.grAlan input:focus ~ .grIkon { color: var(--kBirincil); }
.grAlan.grGecersiz input { border-color: var(--grTehlike); }
.grAlan.grGecersiz input:focus { border-color: var(--grTehlike); box-shadow: 0 0 0 4px color-mix(in srgb, var(--grTehlike) 18%, transparent); }
.grAlan.grGecersiz input:not(:focus) + label, .grAlan.grGecersiz .grIkon { color: var(--grTehlike); }
.grHataMetin { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 13px; line-height: 16px; font-weight: 500; color: var(--grTehlikeMetin); }
.grHataMetin i { width: 16px; font-size: 12px; text-align: center; }

.grGoz { position: absolute; right: 6px; top: 6px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: calc(8px * var(--kYaricap, 1)); background: transparent; color: var(--grSoluk2);
  cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; transition: background-color .15s, color .15s; }
.grGoz:hover { background: var(--grHover); color: var(--grMetin2); }
.grGoz:focus-visible { outline: none; border-radius: calc(8px * var(--kYaricap, 1)); color: var(--kBirincil); box-shadow: 0 0 0 2px var(--kBirincil); }
.grGoz i { grid-area: 1 / 1; font-size: 15px; transition: opacity .15s; }
.grGozKapa, .grGoz[aria-pressed="true"] .grGozAc { opacity: 0; }
.grGoz[aria-pressed="true"] .grGozKapa { opacity: 1; }

.grCaps { display: inline-flex; align-items: center; gap: 8px; height: 24px; padding: 0 10px; margin: -8px 0 16px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--grAmberMetin); background: var(--grAmberZemin); border: 1px solid var(--grAmberCizgi); }
.grCaps .grIkon { font-size: 11px; }

.grSatir { display: flex; align-items: center; justify-content: space-between; margin: -4px 0 24px; }
.grBeni { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--grMetin2); user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
.grBeni input { position: absolute; left: 0; top: 50%; width: 36px; height: 20px; margin: -10px 0 0; opacity: 0; cursor: pointer; }
.grAnahtar { position: relative; flex: none; width: 36px; height: 20px; border-radius: 999px; background: var(--grAnahtar); transition: background-color .2s var(--grEase), box-shadow .15s; }
.grAnahtar::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(17, 18, 40, .28), 0 0 0 .5px rgba(17, 18, 40, .06); transition: transform .25s var(--grEase); }
.grBeni input:checked + .grAnahtar { background: var(--grDolgu); }
.grBeni input:checked + .grAnahtar::after { transform: translateX(16px); }
.grBeni input:focus-visible + .grAnahtar { box-shadow: 0 0 0 3px var(--grHalka), 0 0 0 1px var(--kBirincil); }

.grOtp { display: none; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin-bottom: 16px; }
.grOtpAktif .grOtp { display: grid; }
.grOtpAktif .grKodAlan { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.grOtp input { width: 100%; min-width: 0; height: 56px; padding: 0; text-align: center; border: 1px solid var(--grGirdiCizgi); border-radius: var(--grR2); outline: none; color: var(--grMetin); background: var(--grGirdi);
  font-family: inherit; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; caret-color: var(--kBirincil); -webkit-appearance: none; appearance: none; box-shadow: var(--grGirdiGolge); transition: border-color .15s, box-shadow .15s; }
.grOtp input:nth-child(3) { margin-right: 4px; }
.grOtp input:nth-child(4) { margin-left: 4px; }
.grOtp input:hover { border-color: var(--grGirdiCizgiH); }
.grOtp input:focus { border-color: var(--grOdakCizgi); background: var(--grGirdiOdak); box-shadow: 0 0 0 4px var(--grHalka); }
.grOtp input.grDolu { border-color: color-mix(in srgb, var(--kBirincil) 45%, var(--grGirdiCizgi)); }
.grOtp.grGecersiz input { border-color: var(--grTehlike); }
.grBagla { display: none; width: 100%; min-height: 40px; margin: -8px 0 16px; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--grOdakEtiket); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.grOtpVar .grBagla { display: block; }
.grBagla:hover { text-decoration: underline; text-underline-offset: 3px; }
.grBagla:focus-visible { outline: 2px solid var(--kBirincil); outline-offset: 2px; }

.grGonder { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; padding: 0 24px;
  border: 0; border-radius: var(--grR2); background: var(--grDolgu); color: #fff; font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.005em; cursor: pointer; -webkit-tap-highlight-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(0, 0, 0, .14), 0 1px 2px rgba(17, 18, 40, .14), 0 8px 20px -8px color-mix(in srgb, var(--kBirincil) 70%, transparent);
  transition: transform .15s var(--grEase), background-color .15s, box-shadow .2s; }
.grGonder::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 55%); pointer-events: none; }
.grGonder:hover { background: var(--grDolguH); }
.grGonder:active { transform: scale(.98); }
.grGonder:focus-visible { outline: none; border-radius: var(--grR2); box-shadow: 0 0 0 2px var(--grKart), 0 0 0 4px var(--kBirincil); }
.grOk { font-size: 14px; transition: transform .2s var(--grEase), opacity .15s; }
.grGonder:hover .grOk { transform: translateX(2px); }
.grGonderMetin { transition: opacity .15s; }
.grDon { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .32); border-top-color: #fff; opacity: 0; transition: opacity .15s; }
.grGonder.grYukleniyor .grDon { opacity: 1; animation: grDon .7s linear infinite; }
@keyframes grDon { to { transform: rotate(360deg); } }
.grTik { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; opacity: 0; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; transition: opacity .15s; }
.grTik path { stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .4s var(--grEase) .05s; }
.grGonder.grYukleniyor, .grGonder.grBasarili { pointer-events: none; }
.grGonder.grYukleniyor .grGonderMetin, .grGonder.grYukleniyor .grOk, .grGonder.grBasarili .grGonderMetin, .grGonder.grBasarili .grOk { opacity: 0; }
.grGonder.grBasarili { background: color-mix(in srgb, var(--grBasari) 90%, #000); }
.grGonder.grBasarili .grTik { opacity: 1; }
.grGonder.grBasarili .grTik path { stroke-dashoffset: 0; }

.grGeri { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 48px; margin-top: 8px; padding: 0 16px; border: 1px solid var(--grGirdiCizgi); border-radius: var(--grR2);
  background: transparent; color: var(--grMetin2); font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color .15s, color .15s, border-color .15s, transform .15s var(--grEase); }
.grGeri i { font-size: 13px; }
.grGeri:hover { background: var(--grHover); color: var(--grMetin); border-color: var(--grGirdiCizgiH); }
.grGeri:active { transform: scale(.98); }
.grGeri:focus-visible { outline: none; border-radius: var(--grR2); box-shadow: 0 0 0 3px var(--grHalka), 0 0 0 1px var(--kBirincil); }

.grIpucu { display: flex; align-items: flex-start; gap: 8px; margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--grAyrac); font-size: 12px; line-height: 18px; color: var(--grSoluk); }
.grIpucu i { flex: none; width: 16px; margin-top: 2px; font-size: 12px; text-align: center; color: var(--grSoluk2); }

.grCihaz { --grDurumRenk: var(--grAmber); --grDurumMetin: var(--grAmberMetin); }
.grCihaz-onayli, .grCihaz.grOnaylandi { --grDurumRenk: var(--grBasari); --grDurumMetin: var(--grBasariMetin); }
.grCihaz-reddedildi { --grDurumRenk: var(--grTehlike); --grDurumMetin: var(--grTehlikeMetin); }
.grCihaz .grBas { margin-bottom: 24px; }
.grDurum { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 auto 24px; border-radius: 50%; font-size: 22px; color: var(--grDurumRenk);
  background: color-mix(in srgb, var(--grDurumRenk) 12%, var(--grKart)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--grDurumRenk) 26%, transparent), 0 0 0 8px color-mix(in srgb, var(--grDurumRenk) 6%, transparent);
  transition: color .3s, background-color .3s, box-shadow .3s; }
.grDurum i { grid-area: 1 / 1; transition: opacity .25s, transform .3s var(--grEase); }
.grDurumTik, .grOnaylandi .grDurumIkon { opacity: 0; transform: scale(.6); }
.grOnaylandi .grDurumTik { opacity: 1; transform: none; }
.grBilgi { margin: 0 0 16px; padding: 0 16px; border-radius: var(--grR2); border: 1px solid var(--grKartCizgi); background: var(--grHover); }
.grBilgi > div { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 48px; padding: 8px 0; font-size: 13.5px; }
.grBilgi > div + div { border-top: 1px solid var(--grAyrac); }
.grBilgi dt { display: inline-flex; align-items: center; gap: 8px; color: var(--grSoluk); }
.grBilgi dt i { width: 16px; text-align: center; font-size: 12.5px; color: var(--grSoluk2); }
.grBilgi dd { margin: 0; min-width: 0; font-weight: 600; color: var(--grMetin); text-align: right; overflow-wrap: anywhere; }
.grPil { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--grDurumMetin); background: color-mix(in srgb, var(--grDurumRenk) 13%, transparent); }
.grPil::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.grNot { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 24px; font-size: 12.5px; line-height: 18px; color: var(--grSoluk); text-align: left; }
.grNot i { flex: none; width: 16px; margin-top: 2px; font-size: 12.5px; text-align: center; color: var(--grSoluk2); }

body.grBody .kImza { right: max(16px, calc(env(safe-area-inset-right, 0px) + 8px)) !important; bottom: max(16px, calc(env(safe-area-inset-bottom, 0px) + 8px)) !important; top: auto !important; opacity: .85 !important;
  background: var(--grBtnBg) !important; border-color: var(--grBtnCizgi) !important; color: var(--grSoluk) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

@media (max-width: 600px) {
  .grSahne { padding: max(72px, calc(env(safe-area-inset-top, 0px) + 64px)) 16px max(56px, calc(env(safe-area-inset-bottom, 0px) + 48px)); }
  .grKart { padding: 32px 24px 24px; }
  .grBas { margin-bottom: 24px; }
  .grMarka { width: 48px; height: 48px; margin-bottom: 16px; border-radius: calc(14px * var(--kYaricap, 1)); }
  .grLogo { width: 34px; height: 34px; }
  .grOtp { gap: 6px; }
  .grOtp input { height: 52px; font-size: 20px; }
  .grOtp input:nth-child(3) { margin-right: 2px; }
  .grOtp input:nth-child(4) { margin-left: 2px; }
  .grA1 { width: 110vmax; height: 110vmax; left: -55vmax; top: -60vmax; }
  .grA2 { width: 90vmax; height: 90vmax; right: -50vmax; top: 20vmax; }
  .grA3 { width: 100vmax; height: 100vmax; left: -20vmax; bottom: -64vmax; }
  body.grBody .kImza { left: 0 !important; right: 0 !important; width: max-content !important; margin: 0 auto !important; }
}
@media (max-height: 620px) {
  .grSahne { padding-top: max(64px, calc(env(safe-area-inset-top, 0px) + 56px)); padding-bottom: 40px; }
  .grMarka { display: none; }
  .grBas { margin-bottom: 24px; }
}
@media (hover: none), (pointer: coarse) {
  .grIsik, .grKenar { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .grAurora, .grKartIc { animation: none !important; }
  .grIsik, .grKenar { display: none; }
}
html[data-hareket="az"] .grAurora, html[data-hareket="az"] .grKartIc { animation: none !important; }
html[data-hareket="az"] .grIsik, html[data-hareket="az"] .grKenar { display: none; }

/* powered by lov3yp */

/* ===== Şifremi unuttum ===== */
.sfLink { font-size: 13.5px; font-weight: 600; color: var(--grOdakEtiket); text-decoration: none; }
.sfLink:hover, .sfLink:focus-visible { text-decoration: underline; }
.sfKart a.grGeri { text-decoration: none; color: inherit; }
.sfUyari { display: flex; align-items: flex-start; gap: 8px; padding: 12px 16px; margin: -8px 0 24px; border-radius: var(--grR2); font-size: 13.5px; line-height: 20px; font-weight: 500;
  color: var(--grTehlikeMetin); background: var(--grTehlikeZemin); border: 1px solid var(--grTehlikeCizgi); text-align: left; }
.sfUyari .grIkon { flex: none; width: 16px; margin-top: 2px; font-size: 14px; text-align: center; }
.sfDurum { display: flex; align-items: flex-start; gap: 10px; padding: 14px 16px; margin: -8px 0 20px; border-radius: var(--grR2); border: 1px solid var(--grGirdiCizgi); text-align: left; font-size: 13.5px; line-height: 19px; }
.sfDurum > i { flex: none; margin-top: 2px; font-size: 16px; }
.sfDurum b { display: block; margin-bottom: 2px; }
.sfDurum span { color: var(--grSoluk); }
.sfDurumBekle > i { color: var(--grAmberMetin); }
.sfDurumOnay > i { color: #16a34a; }
.sfDurumRed > i { color: var(--grTehlikeMetin); }
.sfIcGonder { margin-top: 12px; }
.sfKodKutu { margin: -8px 0 20px; padding: 14px 16px; border-radius: var(--grR2); border: 1px dashed var(--grOdakEtiket); text-align: left; font-size: 13.5px; }
.sfKodBas { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sfKodKutu p { margin: 0 0 10px; color: var(--grSoluk); line-height: 19px; }
.sfKodListe { margin: 0; padding-left: 22px; display: grid; gap: 4px; }
.sfKodListe code { font-size: 15px; font-weight: 700; letter-spacing: .06em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.sfKodEylem { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sfKodEylem .grGeri { margin-top: 10px; }