/* =====================================================================
   modal-m8.css — M8 ("Ice basilmis secim") EKLERI, modal.css'ten SONRA
   ---------------------------------------------------------------------
   1) Pencere jetonlari yesil -> mavi (Confirm-in-game ikonu dahil her yer)
   2) Sol panel v3: zaman cizelgesi + adim animasyonlari
   3) Kullanici adi kutusu (dolu, odakta mavi halka)
   4) Sol panel icin 10 varyant:  ?m=8&sp=1..10  (menu.js body'ye sp-N koyar)
   Isaretleme partials/sell-modal-addacc.php: aside.aa3-side > h4 + ul > li
   (.is-on / .is-done) > span(numara|tik) + metin. Adim kapsayicilari
   #as-addacc-step-0 (yontem), -a (kullanici adi), -b (dogrula).
   ===================================================================== */

/* ---------- 1) JETONLAR: yesil yok --------------------------------- */
body.m-8 .aa2-back,
[data-theme="dark"] body.m-8 .aa2-back {
  --aa-acc: #2563EB; --aa-acc-h: #1D4ED8; --aa-acc-tx: #1D4ED8;
  --aa-acc-bg: rgba(37, 99, 235, .10); --aa-on-acc: #FFFFFF;
}
/* "Kolay" secenegin ikonu da digerleriyle AYNI ton (olculdu: oncekinde iki farkli mavi vardi) */
body.m-8 .aa3-card .aa2-opt.is-main .aa2-opt-ic { background: var(--buz, #E7EFFB); color: var(--mavi-koyu, #1D4ED8); }
body.m-8 .aa3-card .aa2-opt.is-main:not(.is-locked):hover .aa2-opt-ic { background: var(--mavi, #2563EB); color: #fff; }

/* ---------- 2) SOL PANEL v3 ------------------------------------------ */
body.m-8 .aa3-side {
  padding: 30px 26px 26px; gap: 0; isolation: isolate;
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(255,255,255,.16), transparent 55%),
    radial-gradient(90% 60% at 100% 100%, rgba(147,197,253,.28), transparent 60%),
    linear-gradient(160deg, #1E40AF 0%, #1D4ED8 42%, #2563EB 78%, #3B82F6 100%);
}
/* zincir filigrani — sag altta saydam ikon (sabit; 2026-10-12 geri getirildi) */
body.m-8 .aa3-side::after {
  content: "\f0c1"; position: absolute; right: -34px; bottom: -30px; z-index: -1;
  font: 900 190px/1 "Font Awesome 6 Free"; color: rgba(255,255,255,.075);
  transform: rotate(-14deg); pointer-events: none;
}
@media (max-width: 760px) {
  body.m-8 .aa3-side::after { font-size: 120px; right: -22px; bottom: -34px; }
}
body.m-8 .aa3-img { display: none; }
/* 2. ve 3. adimda sagda en ustte "Geri" satiri var (ust kenar 26px): sol panel
   ayni cizgiden baslasin. Olculdu: once 130 vs 126, 4px kayikti. */
body.m-8 #as-addacc-step-a .aa3-side,
body.m-8 #as-addacc-step-b .aa3-side { padding-top: 26px; }
body.m-8 .aa3-side h4 {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  margin: 0 0 24px; color: #fff;
  font-size: 23px; font-weight: 800; line-height: 1.15; letter-spacing: -.03em;
}
body.m-8 .aa3-side h4::before {
  content: "\f0c1"; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 12px;
  font: 900 16px/1 "Font Awesome 6 Free"; color: #fff;
  background: rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 6px 16px -6px rgba(15,23,80,.55);
}
body.m-8 .aa3-side ul { gap: 0; }
body.m-8 .aa3-side li {
  position: relative; gap: 13px; padding: 9px 0; min-height: 50px;
  font-size: 14px; font-weight: 600; line-height: 1.25; letter-spacing: -.01em;
  color: rgba(255,255,255,.62);
}
body.m-8 .aa3-side li:not(:last-child)::after {
  content: ""; position: absolute; left: 15px; top: 41px; bottom: -9px;
  width: 2px; border-radius: 2px; background: rgba(255,255,255,.18);
  transform-origin: top center;
}
body.m-8 .aa3-side li span {
  position: relative; width: 32px; height: 32px; border-radius: 10px;   /* karemsi (kullanici istegi) */
  display: grid; place-items: center;
  background: transparent; color: rgba(255,255,255,.78);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.34);
  font-size: 13px; font-weight: 800; line-height: 1;
}
body.m-8 .aa3-side li.is-done { color: rgba(255,255,255,.88); }
body.m-8 .aa3-side li.is-done span { background: rgba(255,255,255,.22); color: #fff; box-shadow: none; font-size: 12px; }
body.m-8 .aa3-side li.is-done::after { background: rgba(var(--kd-cam, 255,255,255), .55); }
/* tik: glifin kendi bosluklari yuzunden sola-yukari kayikti; blok + 1px pay = optik orta */
body.m-8 .aa3-side li.is-done span i { display: block; font-size: 13px; line-height: 1; margin: 1px 0 0 1px; }
body.m-8 .aa3-side li.is-on { color: #fff; font-weight: 700; }
body.m-8 .aa3-side li.is-on span {
  background: var(--kd-yuzey, #fff); color: var(--mavi-koyu, #1D4ED8);
  box-shadow: 0 0 0 4px rgba(255,255,255,.20), 0 6px 14px -6px rgba(15,23,80,.6);
}
body.m-8 .aa3-side li.is-on span::after {          /* nabiz halkasi */
  content: ""; position: absolute; inset: -4px; border-radius: 13px;
  border: 2px solid var(--kd-kenar, rgba(255,255,255,.55)); opacity: 0; pointer-events: none;
}

/* --- animasyonlar: adim her gorundugunde (display:none -> grid) bastan --- */
@keyframes m8In    { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
@keyframes m8Up    { from { opacity: 0; transform: translateY(8px); }  to { opacity: 1; transform: none; } }
@keyframes m8Fill  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes m8Pop   { 0% { transform: scale(.45); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
@keyframes m8Ring  { 0% { transform: scale(1); opacity: .65; } 100% { transform: scale(1.55); opacity: 0; } }
@keyframes m8Float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes m8Drift { 0%, 100% { transform: rotate(-14deg) translate(0, 0); } 50% { transform: rotate(-9deg) translate(-8px, -6px); } }

/* --- ADIM GECISI v2 (2026-10-12, "ekran beyazlasiyor" sikayeti) -------
   ESKISI: sell-modal-addacc-v4.css'teki aa2StepIn adimin TAMAMINI (mavi panel
   dahil) opacity 0'dan getiriyordu -> panel bir an saydam, arkadaki BEYAZ kart
   gorunuyordu. Ustune sol paneldeki her satir .7 sn'ye kadar gecikmeyle
   yeniden giriyordu; yavas makinede saniyelerce bos/beyaz kaliyordu.
   SIMDI: kapsayici ve sol panel ASLA solmaz. Solda yalniz yeni aktif nokta
   (opacity'siz, olcekle) ve dolan cizgi oynar, gecikmesiz. Sag taraf (form)
   kisa ve kademeli, yone gore kayarak gelir (data-yon: addacc-gecis.js).
   Toplam sure .3 sn'nin altinda. Boy gecisi de addacc-gecis.js'te. */
@keyframes m8Main   { from { opacity: 0; transform: translateX(18px); }  to { opacity: 1; transform: none; } }
@keyframes m8MainG  { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes m8Dot    { 0% { transform: scale(.72); } 65% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes m8Tik    { from { transform: scale(.4) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }

body.m-8 .aa2-back.is-open .aa2-step:not([hidden]) { animation: none; }
body.m-8 .aa2-back.is-open .aa2-step:not([hidden]) .aa3-main > * { animation: m8Main .26s cubic-bezier(.2,.8,.2,1) both; }
body.m-8 .aa2-back.is-open[data-yon="geri"] .aa2-step:not([hidden]) .aa3-main > * { animation-name: m8MainG; }
body.m-8 .aa2-back.is-open .aa2-step:not([hidden]) .aa3-main > :nth-child(2) { animation-delay: .025s; }
body.m-8 .aa2-back.is-open .aa2-step:not([hidden]) .aa3-main > :nth-child(3) { animation-delay: .05s; }
body.m-8 .aa2-back.is-open .aa2-step:not([hidden]) .aa3-main > :nth-child(4) { animation-delay: .075s; }
body.m-8 .aa2-back.is-open .aa2-step:not([hidden]) .aa3-main > :nth-child(n+5) { animation-delay: .1s; }

body.m-8 .aa2-back.is-open .aa2-step:not([hidden]) .aa3-side h4::before { animation: m8Float 4.5s ease-in-out .6s infinite; }
body.m-8 .aa2-back.is-open .aa2-step:not([hidden]) .aa3-side li.is-done::after { animation: m8Fill .3s cubic-bezier(.4,0,.2,1) both; }
body.m-8 .aa2-back.is-open .aa2-step:not([hidden]) .aa3-side li.is-done span i { display: inline-block; animation: m8Tik .26s cubic-bezier(.2,.9,.3,1.3) both; }
body.m-8 .aa2-back.is-open .aa2-step:not([hidden]) .aa3-side li.is-on span { animation: m8Dot .32s cubic-bezier(.2,.9,.3,1.2) both; }
/* nabiz halkasi ("dalga") KALDIRILDI — 2026-10-12, kullanici istegi */
body.m-8 .aa3-side li.is-on span::after { content: none; display: none; animation: none; }

@media (max-width: 760px) {
  body.m-8 .aa3-side { padding: 18px 56px 18px 18px; align-items: center; }
  body.m-8 .aa3-side h4 { flex-direction: row; align-items: center; gap: 12px; margin: 0; padding: 0; font-size: 18px; }
  body.m-8 .aa3-side h4::before { width: 34px; height: 34px; border-radius: 10px; font-size: 14px; flex: none; }
}

/* ---------- 3) KULLANICI ADI KUTUSU ---------------------------------- */
body.m-8 .aa2-input {
  display: flex; align-items: center; gap: 11px;
  height: 50px; padding: 0 16px;
  /* "Search items" kutusuyla ayni: ince cizgi, odakta hale yok (app.css .ara input) */
  border: 1px solid var(--cizgi, rgba(15,42,86,.10)); border-radius: 12px; background: var(--inci, var(--kd-yuzey, #fff));
  box-shadow: none; outline: 0;
  transition: border-color .15s ease;
}
body.m-8 .aa2-input:focus-within { border-color: var(--cizgi-2, rgba(15,42,86,.17)); box-shadow: none; outline: 0; }
body.m-8 .aa2-input i { width: 16px; text-align: center; font-size: 14px; color: var(--ink-3, #8EA2C0); flex: none; }
body.m-8 .aa2-input:focus-within i { color: var(--ink-3, #8EA2C0); }
body.m-8 .aa2-input input:focus, body.m-8 .aa2-input input:focus-visible { outline: 0; box-shadow: none; }
body.m-8 .aa2-input input {
  flex: 1; min-width: 0; height: 100%; padding: 0;
  border: 0; outline: 0; background: transparent; box-shadow: none;
  font: 500 14.5px/1 var(--yazi, inherit); letter-spacing: -.005em; color: var(--ink, var(--kd-yazi, #0F2A56));
}
body.m-8 .aa2-input input::placeholder { color: var(--ink-3, #8EA2C0); font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
  body.m-8 .aa3-side, body.m-8 .aa3-side * { animation: none !important; }
  body.m-8 .aa3-main > * { animation: none !important; }
  body.m-8 .aa3-side::after, body.m-8 .aa3-side li::after, body.m-8 .aa3-side h4::before,
  body.m-8 .aa3-side li span::after { animation: none !important; }
}

/* =====================================================================
   4) SOL PANEL — 10 VARYANT  (?m=8&sp=N)
   sp-1 = yukaridaki v3 (zaman cizelgesi), ek kural yok.
   ===================================================================== */

/* --- sp-2 Ilerleme halkasi: buyuk halka "1/3", altinda sade liste --- */
body.m-8.sp-2 #as-addacc-step-0 .aa3-side { --p: 33.4%; --pt: "1/3"; }
body.m-8.sp-2 #as-addacc-step-a .aa3-side { --p: 66.7%; --pt: "2/3"; }
body.m-8.sp-2 #as-addacc-step-b .aa3-side { --p: 100%;  --pt: "3/3"; }
body.m-8.sp-2 .aa3-side h4::before {
  content: var(--pt, "1/3"); width: 66px; height: 66px; border-radius: 50%;
  font: 800 16px/1 var(--yazi, inherit); letter-spacing: -.02em; color: #fff;
  background:
    radial-gradient(closest-side, #1F48C9 78%, transparent 79% 100%),
    conic-gradient(var(--kd-yuzey, #fff) var(--p, 33.4%), rgba(var(--kd-cam, 255,255,255), .2) 0);
  box-shadow: 0 10px 24px -12px rgba(15,23,80,.7);
}
body.m-8.sp-2 .aa3-side li::after { display: none; }
body.m-8.sp-2 .aa3-side li { min-height: 40px; padding: 6px 0; }
body.m-8.sp-2 .aa3-side li span { width: 10px; height: 10px; font-size: 0; box-shadow: none; background: rgba(255,255,255,.3); }
body.m-8.sp-2 .aa3-side li span i { display: none; }
body.m-8.sp-2 .aa3-side li.is-done span { background: rgba(var(--kd-cam, 255,255,255), .75); }
body.m-8.sp-2 .aa3-side li.is-on span { background: var(--kd-yuzey, #fff); box-shadow: 0 0 0 4px rgba(255,255,255,.22); }
body.m-8.sp-2 .aa3-side li.is-on span::after { inset: -6px; }

/* --- sp-3 Cam kartlar: her adim ayri cam kart, aktif beyaz --------- */
body.m-8.sp-3 .aa3-side ul { gap: 8px; }
body.m-8.sp-3 .aa3-side li::after { display: none; }
body.m-8.sp-3 .aa3-side li {
  min-height: 0; padding: 11px 12px; border-radius: 12px;
  background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
body.m-8.sp-3 .aa3-side li span { width: 28px; height: 28px; border-radius: 8px; }
body.m-8.sp-3 .aa3-side li.is-done { background: rgba(255,255,255,.14); }
body.m-8.sp-3 .aa3-side li.is-on {
  background: var(--kd-yuzey, #fff); color: var(--mavi-koyu, #1D4ED8);
  box-shadow: 0 10px 24px -12px rgba(15,23,80,.7);
}
body.m-8.sp-3 .aa3-side li.is-on span { background: var(--mavi, #2563EB); color: #fff; box-shadow: none; border-radius: 8px; }
body.m-8.sp-3 .aa3-side li.is-on span::after { display: none; }

/* --- sp-4 Dev numara: konturlu "01", altta bolumlu cubuk ------------ */
body.m-8.sp-4 #as-addacc-step-0 .aa3-side { --n: "01"; }
body.m-8.sp-4 #as-addacc-step-a .aa3-side { --n: "02"; }
body.m-8.sp-4 #as-addacc-step-b .aa3-side { --n: "03"; }
body.m-8.sp-4 .aa3-side h4 { gap: 6px; }
body.m-8.sp-4 .aa3-side h4::before {
  content: var(--n, "01"); width: auto; height: auto; border-radius: 0; background: none; box-shadow: none;
  font: 800 76px/0.9 var(--yazi, inherit); letter-spacing: -.06em;
  color: transparent; -webkit-text-stroke: 1.6px rgba(255,255,255,.62);
}
body.m-8.sp-4 .aa3-side ul { flex-direction: row; gap: 6px; margin-top: auto; }
body.m-8.sp-4 .aa3-side li { flex: 1; min-height: 0; height: 5px; padding: 0; border-radius: 3px; font-size: 0; background: rgba(255,255,255,.22); overflow: hidden; }
body.m-8.sp-4 .aa3-side li::after, body.m-8.sp-4 .aa3-side li span { display: none; }
body.m-8.sp-4 .aa3-side li.is-done, body.m-8.sp-4 .aa3-side li.is-on { background: var(--kd-yuzey, #fff); }
body.m-8.sp-4 .aa3-side li.is-on { box-shadow: 0 0 12px var(--kd-halka, rgba(255,255,255,.6)); }

/* --- sp-5 Gece mavisi: koyu lacivert, mavi isiklar ------------------- */
body.m-8.sp-5 .aa3-side {
  background:
    radial-gradient(90% 60% at 0% 0%, rgba(59,130,246,.35), transparent 60%),
    radial-gradient(80% 60% at 100% 100%, rgba(37,99,235,.30), transparent 60%),
    linear-gradient(170deg, #0B1530 0%, #0F1E45 60%, #13275A 100%);
}
body.m-8.sp-5 .aa3-side::after { color: rgba(96,165,250,.10); }
body.m-8.sp-5 .aa3-side h4::before { background: rgba(59,130,246,.22); color: #93C5FD; }
body.m-8.sp-5 .aa3-side li.is-on span { background: #3B82F6; color: #fff; box-shadow: 0 0 0 4px rgba(59,130,246,.25), 0 0 18px rgba(59,130,246,.55); }
body.m-8.sp-5 .aa3-side li.is-on span::after { border-color: rgba(96,165,250,.7); }
body.m-8.sp-5 .aa3-side li.is-done span { background: rgba(59,130,246,.3); }
body.m-8.sp-5 .aa3-side li.is-done::after { background: rgba(96,165,250,.6); }

/* --- sp-6 Acik buz: acik zemin, koyu yazi ---------------------------- */
body.m-8.sp-6 .aa3-side {
  background:
    radial-gradient(100% 60% at 0% 0%, rgba(var(--kd-cam, 255,255,255), .9), transparent 60%),
    linear-gradient(165deg, var(--kd-mavi, #EEF4FD) 0%, var(--kd-mavi, #E3ECFA) 100%);
  box-shadow: inset -1px 0 0 var(--kd-halka, #DCE6F4);
}
body.m-8.sp-6 .aa3-side::after { color: rgba(37,99,235,.07); }
body.m-8.sp-6 .aa3-side h4 { color: var(--ink, var(--kd-yazi, #0F2A56)); }
body.m-8.sp-6 .aa3-side h4::before { background: var(--kd-yuzey, #fff); color: var(--mavi, #2563EB); box-shadow: 0 6px 16px -8px rgba(15,42,86,.35); }
body.m-8.sp-6 .aa3-side li { color: #7D90AE; }
body.m-8.sp-6 .aa3-side li::after { background: var(--kd-mavi, #D3DEEE); }
body.m-8.sp-6 .aa3-side li span { color: #7D90AE; box-shadow: inset 0 0 0 1.5px #C9D6EA; background: var(--kd-yuzey, #fff); }
body.m-8.sp-6 .aa3-side li.is-on { color: var(--ink, var(--kd-yazi, #0F2A56)); }
body.m-8.sp-6 .aa3-side li.is-on span { background: var(--mavi, #2563EB); color: #fff; box-shadow: 0 0 0 4px rgba(37,99,235,.15); }
body.m-8.sp-6 .aa3-side li.is-on span::after { border-color: rgba(37,99,235,.45); }
body.m-8.sp-6 .aa3-side li.is-done { color: var(--ink-2, #5A7196); }
body.m-8.sp-6 .aa3-side li.is-done span { background: var(--mavi-sis, rgba(37,99,235,.12)); color: var(--mavi, #2563EB); }
body.m-8.sp-6 .aa3-side li.is-done::after { background: var(--mavi, #2563EB); }
@media (max-width: 760px) { body.m-8.sp-6 .aa3-card > .aa2-x { color: var(--ink-2, #5A7196); background: rgba(15,42,86,.06); } }

/* --- sp-7 Dikey cubuk: solda dolan kalin cubuk, numara yok ----------- */
body.m-8.sp-7 #as-addacc-step-0 .aa3-side { --f: .334; }
body.m-8.sp-7 #as-addacc-step-a .aa3-side { --f: .667; }
body.m-8.sp-7 #as-addacc-step-b .aa3-side { --f: 1; }
body.m-8.sp-7 .aa3-side ul { position: relative; padding-left: 22px; }
body.m-8.sp-7 .aa3-side ul::before,
body.m-8.sp-7 .aa3-side ul::after { content: ""; position: absolute; left: 0; top: 4px; width: 5px; border-radius: 3px; }
body.m-8.sp-7 .aa3-side ul::before { bottom: 4px; background: rgba(255,255,255,.18); }
body.m-8.sp-7 .aa3-side ul::after {
  height: calc((100% - 8px) * var(--f, .334)); background: var(--kd-yuzey, #fff);
  box-shadow: 0 0 14px var(--kd-halka, rgba(255,255,255,.55));
  transform-origin: top; animation: m8Fill .7s .25s cubic-bezier(.4,0,.2,1) both;
}
body.m-8.sp-7 .aa3-side li::after, body.m-8.sp-7 .aa3-side li span { display: none; }
body.m-8.sp-7 .aa3-side li { min-height: 44px; font-size: 15px; }
body.m-8.sp-7 .aa3-side li.is-on { font-size: 17px; font-weight: 800; }

/* --- sp-8 Adim etiketi: "STEP 1" ust etiket, ince ayirici ------------ */
body.m-8.sp-8 .aa3-side ul { counter-reset: m8s; }
body.m-8.sp-8 .aa3-side li {
  counter-increment: m8s; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px;
  min-height: 58px; padding: 10px 0; border-top: 1px solid var(--kd-kenar, rgba(255,255,255,.14));
}
body.m-8.sp-8 .aa3-side li:last-child { border-bottom: 1px solid var(--kd-kenar, rgba(255,255,255,.14)); }
body.m-8.sp-8 .aa3-side li::after, body.m-8.sp-8 .aa3-side li span { display: none; }
body.m-8.sp-8 .aa3-side li::before {
  content: "STEP " counter(m8s); font-size: 10.5px; font-weight: 800; letter-spacing: .14em; color: rgba(255,255,255,.45);
}
body.m-8.sp-8 .aa3-side li.is-on { font-size: 15.5px; }
body.m-8.sp-8 .aa3-side li.is-on::before { color: #fff; }
body.m-8.sp-8 .aa3-side li.is-done::before { content: "STEP " counter(m8s) "  \2713"; color: rgba(255,255,255,.7); }

/* --- sp-9 Minimal: tek ton, ikon kutusu yok, ince rakamlar ----------- */
body.m-8.sp-9 .aa3-side { background: #1D4ED8; }
body.m-8.sp-9 .aa3-side::after { display: none; }
body.m-8.sp-9 .aa3-side h4 { font-size: 20px; font-weight: 700; margin-bottom: 30px; }
body.m-8.sp-9 .aa3-side h4::before { display: none; }
body.m-8.sp-9 .aa3-side li::after { display: none; }
body.m-8.sp-9 .aa3-side li { min-height: 40px; padding: 6px 0; font-weight: 500; }
body.m-8.sp-9 .aa3-side li span {
  width: 24px; height: auto; border-radius: 0; background: none; box-shadow: none;
  justify-content: start; font-size: 12px; font-weight: 700; color: rgba(255,255,255,.4); font-variant-numeric: tabular-nums;
}
body.m-8.sp-9 .aa3-side li.is-on span { background: none; color: #fff; box-shadow: none; }
body.m-8.sp-9 .aa3-side li.is-on span::after { display: none; }
body.m-8.sp-9 .aa3-side li.is-on { font-weight: 700; }
body.m-8.sp-9 .aa3-side li.is-on::before {
  content: ""; position: absolute; left: -26px; top: 50%; width: 3px; height: 22px; margin-top: -11px;
  border-radius: 0 3px 3px 0; background: var(--kd-yuzey, #fff);
}

/* --- sp-10 Desenli: nokta deseni + parlak serit + buyuk filigran ----- */
body.m-8.sp-10 .aa3-side {
  background:
    radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.6px) 0 0 / 14px 14px,
    linear-gradient(115deg, transparent 40%, rgba(255,255,255,.10) 50%, transparent 60%),
    linear-gradient(160deg, #1E40AF 0%, #1D4ED8 45%, #2563EB 100%);
}
body.m-8.sp-10 .aa3-side::after { font-size: 240px; right: -50px; bottom: -48px; color: rgba(255,255,255,.10); }
body.m-8.sp-10 .aa3-side li span { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22); }
body.m-8.sp-10 .aa3-side li.is-on span { background: var(--kd-yuzey, #fff); }

/* mobil: varyantlarin cogu yatay seritte liste GOSTERMIYOR (base kurali) */
@media (max-width: 760px) {
  body.m-8.sp-2 .aa3-side h4::before { width: 40px; height: 40px; font-size: 12px; }
  body.m-8.sp-4 .aa3-side h4::before { font-size: 40px; }
  body.m-8.sp-4 .aa3-side h4 { flex-direction: row; align-items: center; gap: 12px; }
}

/* ---------- KOSE SACAGI (2026-10-12) ---------------------------------
   Kartin beyaz zemini yuvarlak kenarda mavi panelin altindan sizip koseye
   beyazimsi bir hale veriyordu. Zemin karttan alindi, yalniz sag sutuna
   verildi: mavi kosenin altinda artik beyaz yok. */
body.m-8 .aa2.aa3-card { background: transparent; }
body.m-8 .aa2.aa3-card .aa3-main { background: var(--aa-bg, var(--kd-yuzey, #fff)); }
body.m-8 .aa2.aa3-card .aa3-side { background-clip: padding-box; }
/* zemin saydam oldugu icin sutun arasi bosluk ARKAYI gosteriyordu: kapat */
/* 14px'i sell-modal-addacc.css'teki #as-addacc-step-a veriyor (ID secicisi) -> ID'lerle ez */
body.m-8 .aa2.aa3-card .aa2-step.aa3,
body.m-8 .aa2.aa3-card #as-addacc-step-0.aa3,
body.m-8 .aa2.aa3-card #as-addacc-step-a.aa3,
body.m-8 .aa2.aa3-card #as-addacc-step-b.aa3 { gap: 0; column-gap: 0; row-gap: 0; }

/* ---------- KOYU TEMA (2026-10-14) ------------------------------------
   Pencerenin kendi koyu tonu mm2.cash'in [data-theme="dark"] secicisine bagliydi; mm2.money
   html[data-tema="koyu"] kullaniyor -> --aa-bg BEYAZ kaliyor, yazilar koyu.css'ten acik renge
   geciyordu (beyaz zeminde gorunmez baslik, simsiyah secenek kartlari; olculdu). Jetonlar
   sitenin koyu tonlarina baglandi, butun data-kt varyantlariyla calisir. */
html[data-tema="koyu"] body.m-8 .aa2-back {
  --aa-bg: var(--k-pencere, #111); --aa-soft: var(--k-girdi, #0F0F0F); --aa-soft-2: var(--k-kabarik, #181818);
  --aa-ink: var(--ink); --aa-ink-2: var(--ink-2); --aa-ink-3: var(--ink-3);
  --aa-acc: var(--mavi); --aa-acc-h: var(--mavi-koyu); --aa-acc-tx: var(--mavi-koyu); --aa-acc-bg: var(--mavi-sis); --aa-on-acc: #fff;
  --aa-err: #F87171; --aa-err-bg: rgba(248,113,113,.10); --aa-warn: #FBBF24; --aa-warn-bg: rgba(251,191,36,.10);
  background: rgba(0,0,0,.66);
}
html[data-tema="koyu"] body.m-8 .aa2.aa3-card { box-shadow: 0 30px 80px -24px rgba(0,0,0,.85), 0 0 0 1px var(--cizgi); }
html[data-tema="koyu"] body.m-8 .aa3-side {
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(255,255,255,.10), transparent 55%),
    radial-gradient(90% 60% at 100% 100%, rgba(96,165,250,.20), transparent 60%),
    linear-gradient(160deg, #172E73 0%, #1A3C9E 45%, #1F4FC4 80%, #2A62D8 100%);
}
html[data-tema="koyu"] body.m-8 .aa3-side li.is-on span { background: #fff; color: #1D4ED8; }
html[data-tema="koyu"] body.m-8 .aa2-opt { background: var(--k-kabarik, #181818); box-shadow: inset 0 0 0 1px var(--cizgi); }
html[data-tema="koyu"] body.m-8 .aa2-opt:not(.is-locked):hover { background: var(--k-cip, #1E1E1E); box-shadow: inset 0 0 0 1px var(--mavi-ln); }
html[data-tema="koyu"] body.m-8 .aa2-opt-ic,
html[data-tema="koyu"] body.m-8 .aa3-card .aa2-opt.is-main .aa2-opt-ic { background: var(--mavi-sis); color: var(--mavi-koyu); }
html[data-tema="koyu"] body.m-8 .aa2-opt.is-locked { background: transparent; box-shadow: inset 0 0 0 1px var(--cizgi); }
html[data-tema="koyu"] body.m-8 .aa2-opt.is-locked .aa2-opt-ic { background: var(--k-girdi, #0F0F0F); color: var(--ink-3); }
html[data-tema="koyu"] body.m-8 .aa2-tag { background: var(--mavi-sis); color: var(--mavi-koyu); }
html[data-tema="koyu"] body.m-8 .aa2-opt.is-main .aa2-tag:first-of-type { background: var(--mavi); color: #fff; }
html[data-tema="koyu"] body.m-8 .aa2-x:hover { background: var(--k-kabarik, #181818); }
html[data-tema="koyu"] body.m-8 .aa2-input { background: var(--k-girdi, #0F0F0F); border-color: var(--cizgi-2); }
html[data-tema="koyu"] body.m-8 .aa2-note { background: var(--k-kabarik, #181818); }
html[data-tema="koyu"] body.m-8 .aa2-btn:not(.is-primary) { background: var(--k-kabarik, #181818); color: var(--ink); }