/* =====================================================================
   sell-modal-addacc-v4.css — HESAP BAGLA PENCERESI (2026-09-15)
   partials/sell-modal-addacc.php. Eski .as-addacc-* siniflari artik
   kullanilmiyor (sell-modal-addacc.css yalnizca eski/yan ekranlar icin).
   Cerceve, ic cizgi, gradyan, parlama YOK. Rubik. Kareye yakin koseler.
   Acilis animasyonu yok; telefonda alttan sayfa.
   ===================================================================== */
.aa2-back {
    --aa-bg: #FFFFFF; --aa-soft: #F3F6F5; --aa-soft-2: #E9EEEC; --aa-ink: #0E1A16;
    --aa-ink-2: #4C5A55; --aa-ink-3: #6A7873; --aa-acc: #059669; --aa-acc-h: #047857;
    --aa-acc-tx: #047857; --aa-acc-bg: rgba(5, 150, 105, .10); --aa-on-acc: #FFFFFF;
    --aa-err: #DC2626; --aa-err-bg: rgba(220, 38, 38, .08); --aa-warn: #B45309; --aa-warn-bg: rgba(180, 83, 9, .10);
    --font-display: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    position: fixed; inset: 0; z-index: 10060;
    display: none; align-items: flex-start; justify-content: center;
    padding: max(24px, 8vh) 20px 24px; overflow-y: auto; overscroll-behavior: contain;
    background: rgba(5, 8, 12, .62);
    font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--aa-ink);
}
[data-theme="dark"] .aa2-back {
    --aa-bg: #0D1116; --aa-soft: #151A21; --aa-soft-2: #1C222B; --aa-ink: #F2F4F7;
    --aa-ink-2: #A3ACB7; --aa-ink-3: #7A838E; --aa-acc: #10B981; --aa-acc-h: #34D399;
    --aa-acc-tx: #34D399; --aa-acc-bg: rgba(16, 185, 129, .12); --aa-on-acc: #04231A;
    --aa-err: #F87171; --aa-err-bg: rgba(248, 113, 113, .10); --aa-warn: #FBBF24; --aa-warn-bg: rgba(251, 191, 36, .10);
}
.aa2-back.is-open { display: flex; }
.aa2-back[hidden] { display: none !important; }

.aa2 {
    position: relative; width: 100%; max-width: 440px;
    padding: 26px 24px 22px; border-radius: 20px;
    background: var(--aa-bg);
    box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .55);
}
.aa2 *, .aa2 *::before, .aa2 *::after { box-sizing: border-box; }
.aa2 h3 { font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }

.aa2-x {
    position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
    display: grid; place-items: center; border: 0; border-radius: 10px;
    background: transparent; color: var(--aa-ink-3); font-size: 16px; cursor: pointer;
}
.aa2-x:hover { background: var(--aa-soft); color: var(--aa-ink); }

.aa2-step { display: flex; flex-direction: column; gap: 14px; }
.aa2-step[hidden] { display: none !important; }

/* baslik */
.aa2-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 4px 18px 2px; }
.aa2-hero.is-left { align-items: flex-start; text-align: left; padding: 0; }
.aa2-hero-ic {
    width: 52px; height: 52px; margin-bottom: 6px; border-radius: 15px;
    display: grid; place-items: center; background: var(--aa-acc-bg); color: var(--aa-acc-tx); font-size: 20px;
}
.aa2-title { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; color: var(--aa-ink); }
.aa2-sub { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--aa-ink-3); }

/* ust satir: geri + ilerleme */
.aa2-top { display: flex; align-items: center; justify-content: space-between; min-height: 34px; padding-right: 40px; }
.aa2-back-btn {
    display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px 0 8px;
    border: 0; border-radius: 9px; background: transparent; color: var(--aa-ink-2);
    font: 600 13px/1 'Rubik', sans-serif; cursor: pointer;
}
.aa2-back-btn:hover { background: var(--aa-soft); color: var(--aa-ink); }
.aa2-back-btn i { font-size: 12px; }
.aa2-prog { display: inline-flex; align-items: center; gap: 4px; }
.aa2-prog i { width: 22px; height: 5px; border-radius: 3px; background: var(--aa-soft-2); }
.aa2-prog i.is-on { background: var(--aa-acc); }
.aa2-prog em { margin-left: 6px; font-style: normal; font-size: 12px; font-weight: 600; color: var(--aa-ink-3); font-variant-numeric: tabular-nums; }

/* secenekler */
.aa2-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.aa2-opt {
    display: flex; align-items: center; gap: 14px; width: 100%;
    padding: 14px; border: 0; border-radius: 14px;
    background: var(--aa-soft); color: var(--aa-ink); text-align: left; text-decoration: none;
    font: inherit; cursor: pointer; transition: background .15s ease;
}
.aa2-opt:hover { background: var(--aa-soft-2); color: var(--aa-ink); }
.aa2-opt-ic {
    flex: none; width: 42px; height: 42px; border-radius: 12px;
    display: grid; place-items: center; background: var(--aa-bg); color: var(--aa-ink-2); font-size: 16px;
}
.aa2-opt.is-main .aa2-opt-ic { background: var(--aa-acc); color: var(--aa-on-acc); }
.aa2-opt-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.aa2-opt-tx b { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 15px; font-weight: 700; }
.aa2-opt-tx small { font-size: 12.5px; line-height: 1.4; color: var(--aa-ink-3); }
.aa2-opt-go { flex: none; font-size: 12px; color: var(--aa-ink-3); }
.aa2-opt.is-locked { cursor: default; opacity: .7; }
.aa2-opt.is-locked:hover { background: var(--aa-soft); }
.aa2-tag {
    display: inline-flex; align-items: center; gap: 5px; height: 20px; padding: 0 7px; border-radius: 6px;
    background: var(--aa-acc-bg); color: var(--aa-acc-tx);
    font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .01em;
}
.aa2-tag.is-mut { background: var(--aa-soft-2); color: var(--aa-ink-3); }
.aa2-tag i { font-size: 9px; }
.aa2-rbx { width: 18px; height: 18px; }

.aa2-note {
    display: flex; gap: 10px; align-items: flex-start; margin: 2px 0 0; padding: 12px 14px;
    border-radius: 12px; background: var(--aa-soft); color: var(--aa-ink-2); font-size: 12.5px; line-height: 1.5;
}
.aa2-note i { margin-top: 2px; color: var(--aa-acc-tx); }

/* girdi */
.aa2-input {
    display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 16px;
    border-radius: 13px; background: var(--aa-soft); color: var(--aa-ink-3); cursor: text;
    transition: background .15s ease, box-shadow .15s ease;
}
.aa2-input:focus-within { background: var(--aa-soft-2); color: var(--aa-acc-tx); }
.aa2-input input {
    flex: 1; min-width: 0; height: 100%; border: 0 !important; outline: 0 !important; box-shadow: none !important;
    background: transparent !important; color: var(--aa-ink);
    font: 500 15.5px/1 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.aa2-input input::placeholder { color: var(--aa-ink-3); font-weight: 400; }
@supports (-webkit-touch-callout: none) { .aa2-input input { font-size: 16px; } }

.aa2-err {
    display: flex; gap: 9px; align-items: flex-start; padding: 11px 13px; border-radius: 11px;
    background: var(--aa-err-bg); color: var(--aa-err); font-size: 13px; font-weight: 500; line-height: 1.45;
}
.aa2-err::before { content: "\f06a"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-top: 1px; }
.aa2-err[hidden] { display: none !important; }

/* dugmeler */
.aa2-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 9px;
    width: 100%; height: 50px; padding: 0 18px; border: 0; border-radius: 13px;
    font: 700 15px/1 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    cursor: pointer; transition: background .15s ease;
}
.aa2-btn i { font-size: 13px; }
.aa2-btn.is-primary { background: var(--aa-acc); color: var(--aa-on-acc); }
.aa2-btn.is-primary:hover:not(:disabled) { background: var(--aa-acc-h); }
.aa2-btn:disabled { opacity: .55; cursor: default; }

/* adim B: kullanici */
.aa2-user { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; border-radius: 14px; background: var(--aa-soft); }
.aa2-user-av { flex: none; width: 46px; height: 46px; border-radius: 12px; object-fit: cover; background: #000; }
.aa2-user-av:not([src]), .aa2-user-av[src=""] { visibility: hidden; }
.aa2-user-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.aa2-user-tx b { font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aa2-user-tx b i { font-size: 12px; color: #3B82F6; }
.aa2-user-tx small { font-size: 12.5px; color: var(--aa-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.aa2-timer {
    flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px;
    border-radius: 9px; background: var(--aa-bg); color: var(--aa-ink-2); font-size: 12.5px;
}
.aa2-timer b { font-weight: 700; color: var(--aa-ink); font-variant-numeric: tabular-nums; }
.aa2-timer i { font-size: 11px; }

/* kod */
.aa2-code { display: flex; flex-direction: column; gap: 8px; }
.aa2-code-lbl { font-size: 12.5px; font-weight: 600; color: var(--aa-ink-2); }
.aa2-code-row { display: flex; align-items: stretch; gap: 6px; padding: 6px; border-radius: 14px; background: var(--aa-acc-bg); }
.aa2-code-val {
    flex: 1; min-width: 0; padding: 9px 10px; align-self: center;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; font-weight: 600; line-height: 1.5;
    color: var(--aa-ink); overflow-wrap: anywhere; user-select: all;
}
.aa2-code-copy {
    flex: none; width: 46px; border: 0; border-radius: 10px;
    background: var(--aa-acc); color: var(--aa-on-acc); font-size: 15px; cursor: pointer;
    display: grid; place-items: center; transition: background .15s ease;
}
.aa2-code-copy:hover { background: var(--aa-acc-h); }

/* talimatlar */
.aa2-steps { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.aa2-steps li { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 8px 6px 6px; border-radius: 12px; }
.aa2-n {
    flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
    background: var(--aa-soft); color: var(--aa-ink-2); font-size: 12.5px; font-weight: 700;
}
.aa2-steps-tx { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.4; color: var(--aa-ink); }
.aa2-mini {
    flex: none; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px;
    border-radius: 9px; background: var(--aa-soft); color: var(--aa-ink) !important;
    font-size: 12.5px; font-weight: 700; text-decoration: none; transition: background .15s ease;
}
.aa2-mini:hover { background: var(--aa-soft-2); }
.aa2-mini i { font-size: 10px; color: var(--aa-ink-3); }

.aa2-foot { margin: -4px 0 0; text-align: center; font-size: 12px; color: var(--aa-ink-3); }

/* telefon: alttan sayfa, animasyonsuz */
@media (max-width: 600px) {
    .aa2-back { align-items: flex-end; padding: 0; }
    .aa2 {
        max-width: none; max-height: 92vh; overflow-y: auto;
        padding: 22px 16px calc(18px + env(safe-area-inset-bottom));
        border-radius: 20px 20px 0 0;
    }
    .aa2-title { font-size: 18px; }
    .aa2-hero { padding: 4px 8px 0; }
}

/* =====================================================================
   IKI SUTUN (v5, 2026-09-15 — addacc-lab #3)
   Solda koyu yesil panel: adim listesi + adima ozel maskot. Sagda form.
   ===================================================================== */
.aa2.aa3-card { max-width: 740px; padding: 0; overflow: hidden; }
.aa2-step.aa3 { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 0; min-height: 440px; }
.aa2-step.aa3[hidden] { display: none !important; }
.aa3-side {
    position: relative; display: flex; flex-direction: column; gap: 16px;
    padding: 26px 22px 0; background: #0B3B2C; color: #fff; overflow: hidden;
}
.aa3-side h4 {
    margin: 0; font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -.01em; color: #fff;
}
.aa3-side ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.aa3-side li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: rgba(255, 255, 255, .55); }
.aa3-side li span {
    flex: none; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center;
    background: rgba(255, 255, 255, .10); color: rgba(255, 255, 255, .75); font-size: 12px; font-weight: 700;
}
.aa3-side li.is-done { color: rgba(255, 255, 255, .85); }
.aa3-side li.is-done span { background: rgba(52, 211, 153, .22); color: #6EE7B7; }
.aa3-side li.is-on { color: #fff; font-weight: 600; }
.aa3-side li.is-on span { background: #34D399; color: #04231A; }
.aa3-img {
    display: block; width: 250px; max-width: none; height: auto; margin: auto -16px 0 -14px;
    user-select: none; -webkit-user-drag: none; pointer-events: none;
}
.aa3-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding: 26px 26px 24px; }
.aa3-main .aa2-top { padding-right: 40px; min-height: 32px; }
.aa3-main .aa2-top:has(> span:only-child:empty) { display: none; }
.aa3-main .aa2-hero.is-left { padding-right: 36px; }
#as-addacc-step-0 .aa3-main { padding-top: 30px; }
.aa3-push { margin-top: auto; }
.aa3-lock { margin: auto 0 0; font-size: 12.5px; color: var(--aa-ink-3); display: flex; align-items: center; gap: 8px; }
.aa3-lock i { font-size: 11px; }
.aa3-card .aa2-opt.is-main .aa2-opt-ic { background: var(--aa-acc-bg); color: var(--aa-acc-tx); }
.aa3-card .aa2-opt-go { color: var(--aa-acc-tx); }
.aa3-card .aa2-opt.is-locked small i { font-size: 10px; }
[data-theme="dark"] .aa3-side { background: #0A2F23; }

@media (max-width: 760px) {
    .aa2.aa3-card { max-width: 440px; }
    .aa2-step.aa3 { grid-template-columns: 1fr; min-height: 0; }
    .aa3-side { flex-direction: row; align-items: flex-end; gap: 12px; padding: 18px 18px 0; min-height: 0; }
    .aa3-side ul { display: none; }
    .aa3-side h4 { flex: 1; padding-bottom: 18px; font-size: 17px; padding-right: 30px; }
    .aa3-img { width: 132px; margin: 0 -6px 0 0; }
    .aa3-main { padding: 18px 18px 20px; }
    .aa3-card > .aa2-x { color: #fff; }
    .aa3-card > .aa2-x:hover { background: rgba(255, 255, 255, .12); color: #fff; }
}
@media (max-width: 600px) {
    .aa2.aa3-card { max-width: none; padding: 0; overflow-y: auto; }
    .aa3-main { padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
}
.aa3-card > .aa2-x { z-index: 3; }
@media (max-width: 760px) {
    .aa3-card > .aa2-x { background: rgba(0, 0, 0, .22); }
    .aa3-img { margin-right: 26px; }
}

/* =====================================================================
   ORTALAMA + ANIMASYON (2026-09-15, istek)
   - Masaustunde pencere dikeyde ORTADA. margin:auto kullaniliyor ki
     pencere ekrandan uzunsa ustu kesilmesin (align-items:center keserdi).
   - Acilis: arka plan yumusakca kararir, pencere hafifce buyuyerek ve
     yukari kayarak gelir. Kapanis ters yonde. sell.js 'is-open' sinifini
     ekleyip kaldiriyor ve kapatirken 220 ms sonra 'hidden' yapiyor.
   - Adim degisince icerik yumusak belirir.
   - Telefonda (alttan sayfa) ve "hareketi azalt" tercihinde animasyon yok.
   ===================================================================== */
.aa2-back { display: flex; align-items: flex-start; opacity: 0; pointer-events: none; transition: opacity .2s ease; }
.aa2-back.is-open { opacity: 1; pointer-events: auto; }
.aa2-back > .aa2 {
    margin: auto;
    transform: translateY(14px) scale(.97);
    transition: transform .26s cubic-bezier(.2, .9, .3, 1.15), opacity .2s ease;
    opacity: 0;
}
.aa2-back.is-open > .aa2 { transform: none; opacity: 1; }
.aa2-back.is-open .aa2-step:not([hidden]) { animation: aa2StepIn .22s ease both; }
@keyframes aa2StepIn { from { opacity: 0; } to { opacity: 1; } }
.aa2-back.is-open .aa2-step:not([hidden]) .aa3-img { animation: aa3ImgIn .34s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes aa3ImgIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

@media (max-width: 600px) {
    .aa2-back, .aa2-back > .aa2 { transition: none; }
    .aa2-back > .aa2 { margin: auto 0 0; transform: none; opacity: 1; }
    .aa2-back.is-open .aa2-step:not([hidden]),
    .aa2-back.is-open .aa2-step:not([hidden]) .aa3-img { animation: none; }
}
@media (prefers-reduced-motion: reduce) {
    .aa2-back, .aa2-back > .aa2 { transition: none; }
    .aa2-back > .aa2 { transform: none; }
    .aa2-back.is-open .aa2-step:not([hidden]),
    .aa2-back.is-open .aa2-step:not([hidden]) .aa3-img { animation: none; }
}
@media (min-width: 601px) { .aa2-back { padding: 24px 20px; } }

/* =====================================================================
   ROBLOX'TA ONAYLA (dogrulama oyunu) — 2026-09-15
   ===================================================================== */
.aa2-game { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 14px; background: var(--aa-acc-bg); }
.aa2-game-hd { display: flex; align-items: flex-start; gap: 12px; }
.aa2-game-ic {
    flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
    background: var(--aa-acc); color: var(--aa-on-acc); font-size: 17px;
}
.aa2-game-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.aa2-game-tx b { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 15px; font-weight: 700; color: var(--aa-ink); }
.aa2-game-tx small { font-size: 12.5px; line-height: 1.45; color: var(--aa-ink-2); }
.aa2-game .aa2-tag { background: var(--aa-bg); }
.aa2-game-join { height: 46px; text-decoration: none; }
.aa2-game-join span { color: inherit; }
.aa2-game-wait { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; color: var(--aa-acc-tx); }
.aa2-game-wait[hidden] { display: none; }
.aa2-game-age {
    display: flex; gap: 8px; align-items: flex-start; margin: 0; padding: 9px 11px; border-radius: 10px;
    background: var(--aa-warn-bg); color: var(--aa-warn); font-size: 12px; line-height: 1.45;
}
.aa2-game-age i { margin-top: 2px; }
.aa2-or { display: flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; color: var(--aa-ink-3); }
.aa2-or::before, .aa2-or::after { content: ""; flex: 1; height: 1px; background: var(--aa-soft-2); }

/* =====================================================================
   UC SECENEK (2026-09-15): oyun / profil metni / Roblox girisi.
   Secilen yonteme gore 2. adimda yalnizca o yontem gorunur
   (#as-addacc-back[data-mode], addacc-game.js ayarliyor).
   ===================================================================== */
.aa2-tag.is-age { background: var(--aa-warn-bg); color: var(--aa-warn); }
.aa2-switch {
    align-self: center; display: inline-flex; align-items: center; gap: 7px; margin-top: 2px; padding: 6px 10px;
    border: 0; border-radius: 8px; background: transparent; color: var(--aa-ink-2);
    font: 600 12.5px/1.3 'Rubik', sans-serif; cursor: pointer; text-align: center;
}
.aa2-switch:hover { background: var(--aa-bg); color: var(--aa-ink); }
.aa2-switch i { font-size: 10px; }
.aa2-back:not([data-mode="game"]) .aa2-switch { display: none; }
.aa2-back[data-mode="game"] .aa2-codepart,
.aa2-back[data-mode="game"] .aa2-codepart-btn,
.aa2-back[data-mode="game"] .aa2-or { display: none !important; }
.aa2-back[data-mode="code"] #aa2-game,
.aa2-back[data-mode="code"] .aa2-or { display: none !important; }
.aa2-back[data-mode="game"] #aa2-game { margin-top: 2px; }