/* ================================================================
   sell-modal-addacc.css — v3 PREMIUM
   ================================================================
   Add-Account verify modal (Roblox username + code paste).

   • 2-step wizard with animated stepper
   • Emerald gradient title with icon halo
   • Username input with @ prefix, focus glow
   • Profile preview card with avatar reveal
   • Code card with copy-to-clipboard, shimmer effect
   • Animated step list with circle indicators
   • Mobile responsive

   Selectors covered:
     .as-addacc-back  (legacy backdrop)
     .as-addacc-card  (legacy card)
     plus all .as-addacc-* inner elements
   ================================================================ */


/* =====================================================
   01. BACKDROP & CARD
   ===================================================== */
.as-addacc-back {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    animation: addaccFadeIn 0.20s var(--sl-ease, cubic-bezier(.4,0,.2,1));
}
.as-addacc-back[hidden] { display: none !important; }

@keyframes addaccFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.as-addacc-card {
    width: 100%;
    max-width: 460px;
    background: var(--bg-card, var(--kd-yuzey, #ffffff));
    border: 1px solid var(--border-1, var(--kd-kenar, #e5e7eb));
    border-radius: 22px;
    padding: 32px 28px 24px;
    position: relative;
    box-shadow:
        0 32px 80px -16px rgba(0, 0, 0, 0.32),
        0 4px 12px -2px rgba(0, 0, 0, 0.10);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    animation: addaccPop 0.30s var(--sl-ease, cubic-bezier(.34,1.56,.64,1));
}
[data-theme="dark"] .as-addacc-card {
    background: #1a1d24;
    border-color: var(--kd-kenar, rgba(255, 255, 255, 0.08));
    box-shadow:
        0 32px 80px -16px rgba(0, 0, 0, 0.70),
        0 6px 16px -2px rgba(0, 0, 0, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

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


/* =====================================================
   02. CLOSE BUTTON
   ===================================================== */
.as-addacc-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 0;
    background: var(--bg-soft, var(--kd-basik, #f5f5f5));
    color: var(--text-3, #6b7280);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.15s var(--sl-ease, cubic-bezier(.4,0,.2,1));
    z-index: 2;
}
.as-addacc-close:hover {
    background: rgba(239, 68, 68, 0.10);
    color: #DC2626;
    transform: rotate(90deg);
}
[data-theme="dark"] .as-addacc-close {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.65);
}
[data-theme="dark"] .as-addacc-close:hover {
    background: rgba(239, 68, 68, 0.18);
    color: #FCA5A5;
}


/* =====================================================
   03. STEP CONTAINER
   ===================================================== */
.as-addacc-step {
    display: flex;
    flex-direction: column;
    gap: 16px;
    animation: addaccStepFade 0.22s var(--sl-ease, cubic-bezier(.4,0,.2,1));
}
.as-addacc-step[hidden] { display: none; }

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


/* =====================================================
   04. ICON HALO (Step A)
   ===================================================== */
.as-addacc-ic {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.18), rgba(5, 150, 105, 0.06));
    color: var(--mint-500, #10B981);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin: 0 auto 4px;
    position: relative;
}
.as-addacc-ic::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 22px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.12), transparent 70%);
    z-index: -1;
}
[data-theme="dark"] .as-addacc-ic {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.22), rgba(5, 150, 105, 0.08));
    color: #34D399;
}
[data-theme="dark"] .as-addacc-ic::before {
    background: radial-gradient(circle, rgba(52, 211, 153, 0.18), transparent 70%);
}


/* =====================================================
   05. TITLE + TEXT
   ===================================================== */
.as-addacc-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    font-weight: 800;
    color: var(--text-1, var(--kd-yazi, #0f172a));
    text-align: center;
    margin: 0;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
[data-theme="dark"] .as-addacc-title { color: #fff; }

.as-addacc-text {
    font-size: 13px;
    color: var(--text-3, #6b7280);
    text-align: center;
    margin: 0;
    font-weight: 500;
    line-height: 1.5;
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}


/* =====================================================
   06. INPUT WRAP
   ===================================================== */
.as-addacc-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 16px;
    background: var(--bg-soft, var(--kd-basik, #f8fafc));
    border: 1.5px solid var(--border-1, var(--kd-kenar, #e5e7eb));
    border-radius: 14px;
    transition: all 0.18s var(--sl-ease, cubic-bezier(.4,0,.2,1));
    cursor: text;
}
.as-addacc-input-wrap:focus-within {
    background: var(--bg-card, var(--kd-yuzey, #fff));
    border-color: var(--mint-500, #10B981);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.10);
}
[data-theme="dark"] .as-addacc-input-wrap {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--kd-kenar, rgba(255, 255, 255, 0.10));
}
[data-theme="dark"] .as-addacc-input-wrap:focus-within {
    background: rgba(255, 255, 255, 0.06);
    border-color: #34D399;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.14);
}

.as-addacc-input-wrap i {
    color: var(--text-3, #6b7280);
    font-size: 14px;
    transition: color 0.15s;
}
.as-addacc-input-wrap:focus-within i {
    color: var(--mint-500, #10B981);
}
[data-theme="dark"] .as-addacc-input-wrap:focus-within i {
    color: #34D399;
}

.as-addacc-input-wrap input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-1, var(--kd-yazi, #0f172a));
    min-width: 0;
    letter-spacing: -0.01em;
}
[data-theme="dark"] .as-addacc-input-wrap input { color: #fff; }
.as-addacc-input-wrap input::placeholder {
    color: var(--text-3, #9ca3af);
    font-weight: 500;
    opacity: 0.7;
}
@supports (-webkit-touch-callout: none) {
    .as-addacc-input-wrap input { font-size: 16px; }
}


/* =====================================================
   07. ERROR MESSAGE
   ===================================================== */
.as-addacc-err {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.22);
    border-radius: 10px;
    color: #DC2626;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.4;
    margin-top: -6px;
}
.as-addacc-err::before {
    content: '\f071';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    font-size: 12px;
    flex-shrink: 0;
    margin-top: 1px;
}
[data-theme="dark"] .as-addacc-err {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.30);
    color: #FCA5A5;
}


/* =====================================================
   08. PRIMARY BUTTON (CTA)
   ===================================================== */
/* Buton fontu masayla AYNI olmali. Space Grotesk + 800 burada
   yamali ve fazla kalin duruyordu; Rubik 600 sayfanin geri
   kalaniyla ayni sesle konusuyor. */
.as-addacc-btn {
    height: 48px;
    border: 0;
    border-radius: 12px;
    font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.18s var(--sl-ease, cubic-bezier(.4,0,.2,1));
    letter-spacing: -0.005em;
    line-height: 1;
    padding: 0 18px;
}
.as-addacc-btn i { font-size: 12px; }
.as-addacc-btn:active:not(:disabled) { transform: scale(0.97); }
.as-addacc-btn:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

/* Masadaki SAT butonuyla ayni dil: soldan saga gradyan, koyu yazi */
.as-addacc-btn-primary {
    background: linear-gradient(to right, var(--mm2-cta-a), var(--mm2-cta-b));
    color: var(--mm2-cta-tx);
    font-family: var(--mm2-cta-font);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.24);
    width: 100%;
    position: relative;
    overflow: hidden;
}
.as-addacc-btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.45);
}
.as-addacc-btn-primary::after {
    /* shimmer sweep */
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 30%, rgba(var(--kd-cam, 255,255,255), 0.20) 50%, transparent 70%);
    transform: translateX(-100%);
    transition: transform 0.6s var(--sl-ease, cubic-bezier(.4,0,.2,1));
    pointer-events: none;
}
.as-addacc-btn-primary:hover:not(:disabled)::after {
    transform: translateX(100%);
}

.as-addacc-btn-ghost {
    background: var(--bg-soft, var(--kd-basik, #f5f5f5));
    color: var(--text-2, var(--kd-yazi, #374151));
    border: 1px solid var(--border-1, var(--kd-kenar, #e5e7eb));
    width: 50px;
    min-width: 50px;
    padding: 0;
}
.as-addacc-btn-ghost:hover:not(:disabled) {
    background: var(--bg-card, var(--kd-yuzey, #fff));
    border-color: var(--text-3, #6b7280);
    color: var(--text-1, var(--kd-yazi, #0f172a));
    transform: translateX(-2px);
}
[data-theme="dark"] .as-addacc-btn-ghost {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.78);
    border-color: var(--kd-kenar, rgba(255, 255, 255, 0.10));
}
[data-theme="dark"] .as-addacc-btn-ghost:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border-color: var(--kd-kenar, rgba(255, 255, 255, 0.20));
}


/* =====================================================
   09. USER PREVIEW CARD (Step B)
   ===================================================== */
.as-addacc-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.06), var(--bg-soft, var(--kd-basik, #f8fafc)) 70%);
    border: 1px solid rgba(16, 185, 129, 0.20);
    border-radius: 14px;
    animation: addaccUserSlide 0.30s var(--sl-ease, cubic-bezier(.4,0,.2,1));
}
@keyframes addaccUserSlide {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
[data-theme="dark"] .as-addacc-user {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.10), rgba(var(--kd-cam, 255,255,255), 0.02) 70%);
    border-color: rgba(52, 211, 153, 0.28);
}

.as-addacc-avatar {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    object-fit: cover;
    background: var(--bg-soft);
    border: 2px solid var(--kd-kenar, #fff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}
[data-theme="dark"] .as-addacc-avatar {
    border-color: var(--kd-kenar, rgba(255, 255, 255, 0.10));
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.32);
}

.as-addacc-user-info { min-width: 0; flex: 1; line-height: 1.2; }
.as-addacc-user-name {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-1, var(--kd-yazi, #0f172a));
    letter-spacing: -0.01em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
[data-theme="dark"] .as-addacc-user-name { color: #fff; }
.as-addacc-user-handle {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--text-3, #6b7280);
    font-weight: 600;
    margin-top: 2px;
}


/* =====================================================
   10. CODE CARD — copy-to-verify
   ===================================================== */
.as-addacc-code-card {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.08), rgba(5, 150, 105, 0.02));
    border: 1px solid rgba(16, 185, 129, 0.28);
    border-radius: 14px;
    padding: 16px 16px 14px;
    position: relative;
    overflow: hidden;
}
[data-theme="dark"] .as-addacc-code-card {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.12), rgba(5, 150, 105, 0.04));
    border-color: rgba(52, 211, 153, 0.32);
}
.as-addacc-code-card::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -10%;
    width: 200px;
    height: 200px;
    background: radial-gradient(circle, rgba(16, 185, 129, 0.16), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.as-addacc-code-lbl {
    position: relative;
    z-index: 1;
    font-size: 10px;
    font-weight: 800;
    color: var(--mint-500, #10B981);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
[data-theme="dark"] .as-addacc-code-lbl { color: #34D399; }

.as-addacc-code-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: space-between;
}

/* Kod: 800 agirlik mono'da tikanik goruluyordu. 600 + genis harf
   araligi hem okunakli hem kopyalanabilir duruyor. */
.as-addacc-code-val {
    font-family: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
    font-size: 21px;
    font-weight: 600;
    color: var(--text-1, var(--kd-yazi, #0f172a));
    letter-spacing: 0.08em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    user-select: all;
    -webkit-user-select: all;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
[data-theme="dark"] .as-addacc-code-val { color: #fff; }

.as-addacc-code-copy {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.10);
    color: var(--mint-500, #10B981);
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.15s var(--sl-ease, cubic-bezier(.4,0,.2,1));
    flex-shrink: 0;
}
.as-addacc-code-copy:hover {
    background: var(--mm2-disc-a);
    color: var(--mm2-disc-tx);
    transform: scale(1.05);
    border-color: var(--mint-500, #10B981);
}
.as-addacc-code-copy:active { transform: scale(0.94); }
.as-addacc-code-copy.is-copied {
    background: var(--mm2-disc-a);
    color: var(--mm2-disc-tx);
}
[data-theme="dark"] .as-addacc-code-copy {
    color: #34D399;
    border-color: rgba(52, 211, 153, 0.40);
    background: rgba(52, 211, 153, 0.12);
}
[data-theme="dark"] .as-addacc-code-copy:hover {
    background: var(--mm2-cta-a);
    color: var(--mm2-cta-tx);
}


/* =====================================================
   11. STEP LIST
   ===================================================== */
.as-addacc-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    counter-reset: addacc-step;
}
.as-addacc-steps li {
    counter-increment: addacc-step;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 14px;
    background: var(--bg-soft, var(--kd-basik, #f8fafc));
    border: 1px solid var(--border-1, var(--kd-kenar, #e5e7eb));
    border-radius: 11px;
    font-size: 12.5px;
    color: var(--text-2, var(--kd-yazi, #374151));
    font-weight: 600;
    line-height: 1.5;
    position: relative;
    transition: all 0.18s var(--sl-ease, cubic-bezier(.4,0,.2,1));
}
.as-addacc-steps li::before {
    content: counter(addacc-step);
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.18), rgba(5, 150, 105, 0.06));
    color: var(--mint-500, #10B981);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
[data-theme="dark"] .as-addacc-steps li {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--kd-kenar, rgba(255, 255, 255, 0.06));
    color: rgba(255, 255, 255, 0.85);
}
[data-theme="dark"] .as-addacc-steps li::before {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.22), rgba(5, 150, 105, 0.08));
    color: #34D399;
}


.as-addacc-link {
    color: var(--mint-500, #10B981);
    text-decoration: none;
    margin-left: 6px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    transition: opacity 0.15s;
    font-size: 11px;
}
.as-addacc-link:hover { opacity: 0.7; text-decoration: underline; }
[data-theme="dark"] .as-addacc-link { color: #34D399; }


/* =====================================================
   12. TIMER
   ===================================================== */
.as-addacc-timer {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: var(--bg-soft, var(--kd-basik, #f8fafc));
    border: 1px solid var(--border-1, var(--kd-kenar, #e5e7eb));
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-3, #6b7280);
    align-self: center;
    line-height: 1;
}
.as-addacc-timer i {
    font-size: 11px;
    color: var(--mint-500, #10B981);
}
.as-addacc-timer b {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    color: var(--text-1, var(--kd-yazi, #0f172a));
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
}
[data-theme="dark"] .as-addacc-timer {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--kd-kenar, rgba(255, 255, 255, 0.08));
    color: rgba(255, 255, 255, 0.65);
}
[data-theme="dark"] .as-addacc-timer i { color: #34D399; }
[data-theme="dark"] .as-addacc-timer b { color: #fff; }


/* =====================================================
   13. ACTIONS ROW (Step B - back + verify)
   ===================================================== */
.as-addacc-actions-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}


/* =====================================================
   14. STEP A vs STEP B padding adjustments
   ===================================================== */
#as-addacc-step-a { gap: 14px; }
#as-addacc-step-b { gap: 14px; }


/* =====================================================
   15. LEGACY .as-add-modal-* SUPPORT
   (Aliases for sell-modal-add-account.php which uses different prefix)
   ===================================================== */
.as-add-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    animation: addaccFadeIn 0.20s var(--sl-ease, cubic-bezier(.4,0,.2,1));
}
.as-add-modal[hidden] { display: none !important; }

.as-add-modal-card {
    width: 100%;
    max-width: 470px;
    background: var(--bg-card, var(--kd-yuzey, #ffffff));
    border: 1px solid var(--border-1, var(--kd-kenar, #e5e7eb));
    border-radius: 24px;
    padding: 32px 28px 24px;
    position: relative;
    box-shadow:
        0 32px 80px -16px rgba(0, 0, 0, 0.32),
        0 4px 12px -2px rgba(0, 0, 0, 0.10);
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    animation: addaccPop 0.30s var(--sl-ease, cubic-bezier(.34,1.56,.64,1));
}
/* Koyu zemin artik satis masasinin paletinden — modal ayri bir
   dunyaymis gibi durmasin. */
[data-theme="dark"] .as-add-modal-card {
    background: #0C0F15;
    border-color: var(--kd-kenar, rgba(255, 255, 255, 0.06));
    box-shadow:
        0 32px 80px -16px rgba(0, 0, 0, 0.70),
        0 6px 16px -2px rgba(0, 0, 0, 0.40),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.as-add-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: 0;
    background: var(--bg-soft, var(--kd-basik, #f5f5f5));
    color: var(--text-3, #6b7280);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all 0.15s;
    z-index: 2;
}
.as-add-modal-close:hover {
    background: rgba(239, 68, 68, 0.10);
    color: #DC2626;
    transform: rotate(90deg);
}
[data-theme="dark"] .as-add-modal-close {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.65);
}
[data-theme="dark"] .as-add-modal-close:hover {
    background: rgba(239, 68, 68, 0.18);
    color: #FCA5A5;
}

.as-add-modal-ic {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.18), rgba(5, 150, 105, 0.06));
    color: var(--mint-500, #10B981);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin: 0 auto 12px;
}
[data-theme="dark"] .as-add-modal-ic {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.22), rgba(5, 150, 105, 0.08));
    color: #34D399;
}

.as-add-modal-title {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 20px;
    font-weight: 800;
    text-align: center;
    margin: 0 0 6px;
    letter-spacing: -0.02em;
    color: var(--text-1, var(--kd-yazi, #0f172a));
}
[data-theme="dark"] .as-add-modal-title { color: #fff; }

.as-add-modal-text {
    font-size: 13px;
    color: var(--text-3, #6b7280);
    text-align: center;
    margin: 0 0 18px;
    font-weight: 500;
    line-height: 1.5;
}

/* Wizard inner steps */
.as-noacc-wiz {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.as-noacc-wiz[hidden] { display: none; }

.as-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 52px;
    padding: 0 16px;
    background: var(--bg-soft, var(--kd-basik, #f8fafc));
    border: 1.5px solid var(--border-1, var(--kd-kenar, #e5e7eb));
    border-radius: 14px;
    transition: all 0.18s var(--sl-ease);
    cursor: text;
}
.as-input-wrap:focus-within {
    background: var(--bg-card, var(--kd-yuzey, #fff));
    border-color: var(--mint-500, #10B981);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.10);
}
[data-theme="dark"] .as-input-wrap {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--kd-kenar, rgba(255, 255, 255, 0.10));
}
[data-theme="dark"] .as-input-wrap:focus-within {
    background: rgba(255, 255, 255, 0.06);
    border-color: #34D399;
    box-shadow: 0 0 0 4px rgba(52, 211, 153, 0.14);
}
.as-input-wrap i { color: var(--text-3, #6b7280); font-size: 14px; }
.as-input-wrap:focus-within i { color: var(--mint-500, #10B981); }
.as-input-wrap input {
    flex: 1;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-1, var(--kd-yazi, #0f172a));
    min-width: 0;
}
[data-theme="dark"] .as-input-wrap input { color: #fff; }
@supports (-webkit-touch-callout: none) {
    .as-input-wrap input { font-size: 16px; }
}

.as-input-err {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.22);
    border-radius: 10px;
    color: #DC2626;
    font-size: 12.5px;
    font-weight: 600;
}
[data-theme="dark"] .as-input-err {
    background: rgba(239, 68, 68, 0.14);
    border-color: rgba(239, 68, 68, 0.30);
    color: #FCA5A5;
}

.as-cta {
    height: 50px;
    border: 0;
    border-radius: 13px;
    font-family: var(--mm2-cta-font);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    background: linear-gradient(135deg, var(--mm2-cta-a), var(--mm2-cta-b));
    color: var(--mm2-cta-tx);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.32);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.18s;
    width: 100%;
    letter-spacing: -0.005em;
}
.as-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(16, 185, 129, 0.45);
}
.as-cta:active { transform: scale(0.97); }

.as-noacc-user {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.06), var(--bg-soft) 70%);
    border: 1px solid rgba(16, 185, 129, 0.20);
    border-radius: 14px;
}
[data-theme="dark"] .as-noacc-user {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.10), rgba(var(--kd-cam, 255,255,255), 0.02) 70%);
    border-color: rgba(52, 211, 153, 0.28);
}
.as-noacc-avatar {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    object-fit: cover;
    border: 2px solid var(--kd-kenar, #fff);
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
[data-theme="dark"] .as-noacc-avatar {
    border-color: var(--kd-kenar, rgba(255,255,255,0.10));
}
.as-noacc-user-info { flex: 1; min-width: 0; line-height: 1.2; }
.as-noacc-user-name {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 15px;
    font-weight: 800;
    color: var(--text-1);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
[data-theme="dark"] .as-noacc-user-name { color: #fff; }
.as-noacc-user-handle {
    font-family: 'JetBrains Mono', monospace;
    font-size: 11.5px;
    color: var(--text-3);
    font-weight: 600;
    margin-top: 2px;
}

.as-code-card {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.08), rgba(5, 150, 105, 0.02));
    border: 1px solid rgba(16, 185, 129, 0.28);
    border-radius: 14px;
    padding: 16px;
    position: relative;
    overflow: hidden;
}
[data-theme="dark"] .as-code-card {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.12), rgba(5, 150, 105, 0.04));
    border-color: rgba(52, 211, 153, 0.32);
}
.as-code-lbl {
    font-size: 10px;
    font-weight: 800;
    color: var(--mint-500);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    margin-bottom: 6px;
}
[data-theme="dark"] .as-code-lbl { color: #34D399; }
.as-code-row { display: flex; align-items: center; gap: 8px; }
.as-code-val {
    flex: 1;
    font-family: 'JetBrains Mono', monospace;
    font-size: 22px;
    font-weight: 800;
    color: var(--text-1);
    user-select: all;
    -webkit-user-select: all;
    overflow: hidden;
    text-overflow: ellipsis;
}
[data-theme="dark"] .as-code-val { color: #fff; }
.as-code-copy {
    width: 38px;
    height: 38px;
    border: 1px solid rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.10);
    color: var(--mint-500);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.15s;
    flex-shrink: 0;
}
.as-code-copy:hover {
    background: var(--mint-500);
    color: #fff;
    transform: scale(1.05);
}

.as-noacc-steps {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    counter-reset: noacc-step;
}
.as-noacc-steps li {
    counter-increment: noacc-step;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 14px;
    background: var(--bg-soft, var(--kd-basik, #f8fafc));
    border: 1px solid var(--border-1);
    border-radius: 11px;
    font-size: 12.5px;
    color: var(--text-2);
    font-weight: 600;
    line-height: 1.5;
}
.as-noacc-steps li::before {
    content: counter(noacc-step);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.18), rgba(5, 150, 105, 0.06));
    color: var(--mint-500);
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 800;
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}
[data-theme="dark"] .as-noacc-steps li {
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--kd-kenar, rgba(255, 255, 255, 0.06));
    color: rgba(255, 255, 255, 0.85);
}
[data-theme="dark"] .as-noacc-steps li::before {
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.22), rgba(5, 150, 105, 0.08));
    color: #34D399;
}

.as-link {
    color: var(--mint-500);
    margin-left: 6px;
    text-decoration: none;
    font-size: 11px;
}
.as-link:hover { opacity: 0.7; }
[data-theme="dark"] .as-link { color: #34D399; }

.as-noacc-timer {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 14px;
    background: var(--bg-soft, var(--kd-basik, #f8fafc));
    border: 1px solid var(--border-1);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-3);
    align-self: center;
    line-height: 1;
}
.as-noacc-timer i { font-size: 11px; color: var(--mint-500); }
.as-noacc-timer b {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 800;
    color: var(--text-1);
    font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .as-noacc-timer {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--kd-kenar, rgba(255, 255, 255, 0.08));
    color: rgba(255, 255, 255, 0.65);
}
[data-theme="dark"] .as-noacc-timer i { color: #34D399; }
[data-theme="dark"] .as-noacc-timer b { color: #fff; }

.as-noacc-actions {
    display: flex;
    gap: 10px;
    align-items: stretch;
}
.as-pill.ghost {
    background: var(--bg-soft);
    color: var(--text-2);
    border: 1px solid var(--border-1);
    width: 50px;
    min-width: 50px;
    height: 50px;
    border-radius: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.as-pill.ghost:hover {
    background: var(--bg-card);
    color: var(--text-1);
    transform: translateX(-2px);
}
[data-theme="dark"] .as-pill.ghost {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.78);
    border-color: var(--kd-kenar, rgba(255, 255, 255, 0.10));
}
[data-theme="dark"] .as-pill.ghost:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}


/* =====================================================
   16. MOBILE
   ===================================================== */
@media (max-width: 480px) {
    .as-addacc-card,
    .as-add-modal-card {
        padding: 26px 20px 20px;
        border-radius: 18px;
    }
    .as-addacc-title,
    .as-add-modal-title {
        font-size: 18px;
    }
    .as-addacc-code-val,
    .as-code-val {
        font-size: 19px;
    }
    .as-addacc-steps li,
    .as-noacc-steps li {
        font-size: 12px;
    }
}

/* End of sell-modal-addacc.css v3 */

/* Dekoratif kalkan rozeti kaldirildi — baslik zaten ne oldugunu soyluyor. */
.as-add-modal-ic { display: none; }

/* Alan etiketi + Enter ipucu */
.as-field-lbl {
    display: block; margin: 0 0 7px;
    font-size: 11.5px; font-weight: 500;
    color: var(--text-3, #6b7280);
}
.as-enter-hint {
    display: flex; align-items: center; gap: 7px;
    margin: 9px 0 14px;
    font-size: 11.5px; color: var(--text-4, #9ca3af);
}
.as-enter-hint kbd {
    display: inline-grid; place-items: center;
    min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 5px;
    border: 1px solid var(--border-2, #d1d5db);
    background: var(--bg-soft, var(--kd-basik, #f3f4f6));
    font-family: inherit; font-size: 11px; color: var(--text-3, #6b7280);
}
[data-theme="dark"] .as-enter-hint kbd {
    border-color: var(--kd-kenar, rgba(255, 255, 255, 0.13));
    background: rgba(255, 255, 255, 0.05);
    color: #9BA0A9;
}


/* ================================================================
   HESAP EKLEME KUTUSU — v8
   ----------------------------------------------------------------
   Satis masasiyla ayni dunya: yesile calan koyu zemin, cerceve
   yerine derinlik, tek vurgu. Basliktan butona kadar tek ritim.
   ================================================================ */
[data-theme="dark"] .as-add-modal-card {
    background: #0A0D11;
    border-color: var(--kd-kenar, rgba(255, 255, 255, 0.06));
    box-shadow:
        0 40px 90px -20px rgba(0, 0, 0, 0.80),
        0 8px 20px -4px rgba(0, 0, 0, 0.50);
}
[data-theme="dark"] .as-add-modal { background: rgba(3, 5, 8, 0.74); }

[data-theme="dark"] .as-add-modal-title { color: #F2F4F7; }
[data-theme="dark"] .as-add-modal-text  { color: #98A1AC; }
[data-theme="dark"] .as-field-lbl       { color: #98A1AC; }

/* giris alani */
[data-theme="dark"] .as-input-wrap {
    background: #101318;
    border-color: var(--kd-kenar, rgba(255, 255, 255, 0.07));
}
[data-theme="dark"] .as-input-wrap:focus-within {
    border-color: #10B981;
    background: #0C1015;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
}
[data-theme="dark"] .as-input-wrap input { color: #F2F4F7; }
[data-theme="dark"] .as-input-wrap > i   { color: #656E79; }

/* dogrulama kodu karti */
[data-theme="dark"] .as-code-card {
    background: #101318;
    border-color: var(--kd-kenar, rgba(255, 255, 255, 0.07));
}
[data-theme="dark"] .as-code-val { color: #34D399; }

/* secili hesap onizlemesi */
[data-theme="dark"] .as-noacc-user {
    background: #101318;
    border-color: var(--kd-kenar, rgba(255, 255, 255, 0.07));
}

/* kapat butonu */
[data-theme="dark"] .as-add-modal-close {
    background: transparent; color: #656E79;
}
[data-theme="dark"] .as-add-modal-close:hover {
    background: rgba(255, 255, 255, 0.06); color: #F2F4F7;
}

/* birincil buton — masadaki SAT butonuyla ayni dil */
[data-theme="dark"] .as-cta {
    background: linear-gradient(to right, var(--mm2-cta-a), var(--mm2-cta-b));
    border: 1px solid rgba(52, 211, 153, 0.55);
    color: var(--mm2-cta-tx);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.24);
}
[data-theme="dark"] .as-cta:hover:not(:disabled) { filter: brightness(1.07); }
[data-theme="dark"] .as-cta:disabled {
    background: #101318; border-color: transparent;
    color: #656E79; box-shadow: none;
}


/* ================================================================
   v9 — SATIS MASASIYLA AYNI DUNYA
   ----------------------------------------------------------------
   NOT: Daha once yanlislikla `.as-add-modal` (olu markup)
   giydirilmisti; canlida acilan modal BU (.as-addacc-*), sell.js
   7065. satirda aciyor.

   Palet notr ve koyu — masadakiyle birebir:
     ortu  rgba(3,5,8,.76)   kart #0A0D11   yuzey #101318
     metin #F2F4F7  ikincil #98A1AC  ucuncul #656E79
   Yesil YALNIZ birincil butonda ve dogrulama kodunda.
   ================================================================ */

/* ---- ortu: bulaniklastirip arkayi geri cekiyoruz ---- */
[data-theme="dark"] .as-addacc-back {
    background: rgba(3, 5, 8, 0.76);
    backdrop-filter: blur(6px) saturate(0.85);
    -webkit-backdrop-filter: blur(6px) saturate(0.85);
    animation: addacc-fade 0.18s ease;
}
@keyframes addacc-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- kart ---- */
[data-theme="dark"] .as-addacc-card {
    background: #0A0D11;
    border: 1px solid var(--kd-kenar, rgba(255, 255, 255, 0.06));
    border-radius: 22px;
    box-shadow:
        0 40px 90px -20px rgba(0, 0, 0, 0.82),
        0 8px 20px -4px rgba(0, 0, 0, 0.52);
    animation: addacc-rise 0.26s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes addacc-rise {
    from { opacity: 0; transform: translateY(14px) scale(0.975); }
    to   { opacity: 1; transform: none; }
}

/* ---- dekoratif kalkan rozeti yerine sade daire ---- */
[data-theme="dark"] .as-addacc-ic {
    background: rgba(16, 185, 129, 0.12);
    color: #34D399;
    border: 0;
    box-shadow: none;
}

[data-theme="dark"] .as-addacc-title { color: #F2F4F7; }
[data-theme="dark"] .as-addacc-text  { color: #98A1AC; }

/* ---- giris alani ---- */
[data-theme="dark"] .as-addacc-input-wrap {
    background: #101318;
    border: 1px solid var(--kd-kenar, rgba(255, 255, 255, 0.07));
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
[data-theme="dark"] .as-addacc-input-wrap:focus-within {
    background: #0C1015;
    border-color: #10B981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.14);
}
[data-theme="dark"] .as-addacc-input-wrap input { color: #F2F4F7; }
[data-theme="dark"] .as-addacc-input-wrap input::placeholder { color: #656E79; }
[data-theme="dark"] .as-addacc-input-wrap > i { color: #656E79; }

/* ---- birincil buton: masadaki SAT butonuyla ayni dil ---- */
[data-theme="dark"] .as-addacc-btn-primary {
    background: linear-gradient(to right, var(--mm2-cta-a), var(--mm2-cta-b));
    border: 1px solid rgba(52, 211, 153, 0.55);
    color: var(--mm2-cta-tx);
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.24);
    transition: filter 0.15s ease, transform 0.09s ease;
}
[data-theme="dark"] .as-addacc-btn-primary:hover:not(:disabled) { filter: brightness(1.07); }
[data-theme="dark"] .as-addacc-btn-primary:active:not(:disabled) { transform: scale(0.985); }
[data-theme="dark"] .as-addacc-btn-primary:disabled {
    background: #101318; border-color: transparent; color: #656E79; box-shadow: none;
}

/* ---- hesap onizlemesi ---- */
[data-theme="dark"] .as-addacc-user {
    background: #101318;
    border: 1px solid var(--kd-kenar, rgba(255, 255, 255, 0.07));
}
[data-theme="dark"] .as-addacc-user-name  { color: #F2F4F7; }
[data-theme="dark"] .as-addacc-user-handle { color: #656E79; }

/* ---- dogrulama kodu ---- */
[data-theme="dark"] .as-addacc-code-card {
    background: #101318;
    border: 1px dashed rgba(52, 211, 153, 0.30);
}
[data-theme="dark"] .as-addacc-code-lbl { color: #98A1AC; }
[data-theme="dark"] .as-addacc-code-val { color: #34D399; letter-spacing: 0.06em; }
[data-theme="dark"] .as-addacc-code-copy {
    background: rgba(255, 255, 255, 0.05); color: #98A1AC; border: 0;
    transition: background 0.13s ease, color 0.13s ease;
}
[data-theme="dark"] .as-addacc-code-copy:hover { background: rgba(16, 185, 129, 0.16); color: #34D399; }

/* ---- adim listesi: numaralar daire icinde ---- */
[data-theme="dark"] .as-addacc-steps { counter-reset: aa; color: #98A1AC; }
[data-theme="dark"] .as-addacc-steps li { position: relative; }
[data-theme="dark"] .as-addacc-link { color: #34D399; }

/* ---- kapat ---- */
[data-theme="dark"] .as-addacc-close {
    background: transparent; color: #656E79; border: 0;
    transition: background 0.13s ease, color 0.13s ease;
}
[data-theme="dark"] .as-addacc-close:hover { background: rgba(255, 255, 255, 0.06); color: #F2F4F7; }

/* ---- adim gecisi ---- */
.as-addacc-step:not([hidden]) { animation: addacc-step 0.24s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes addacc-step {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: none; }
}

[data-theme="dark"] .as-addacc-err { color: #FCA5A5; }

@media (prefers-reduced-motion: reduce) {
    [data-theme="dark"] .as-addacc-back,
    [data-theme="dark"] .as-addacc-card,
    .as-addacc-step:not([hidden]) { animation: none; }
}


/* alan etiketi + Enter ipucu (gercek modal) */
.as-addacc-lbl {
    display: block; margin: 0 0 7px;
    font-size: 11.5px; font-weight: 500; text-align: left;
    color: var(--text-3, #6b7280);
}
[data-theme="dark"] .as-addacc-lbl { color: #98A1AC; }

.as-addacc-enter {
    display: flex; align-items: center; gap: 7px;
    margin: 9px 0 14px;
    font-size: 11.5px; color: var(--text-4, #9ca3af);
}
.as-addacc-enter kbd {
    display: inline-grid; place-items: center;
    min-width: 20px; height: 20px; padding: 0 5px;
    border-radius: 5px;
    border: 1px solid var(--border-2, #d1d5db);
    background: var(--bg-soft, var(--kd-basik, #f3f4f6));
    font-family: inherit; font-size: 11px; color: var(--text-3, #6b7280);
}
[data-theme="dark"] .as-addacc-enter { color: #656E79; }
[data-theme="dark"] .as-addacc-enter kbd {
    border-color: var(--kd-kenar, rgba(255, 255, 255, 0.12));
    background: rgba(255, 255, 255, 0.05);
    color: #98A1AC;
}


/* ================================================================
   v10 — ROBLOX MARKASI + BASLIK SERIDI
   Kalkan ikonu "guvenlik" cagrisimi yapiyordu ama kullanici burada
   Roblox hesabini bagliyor; marka dogrudan Roblox olmali.
   ================================================================ */
.as-rbx-mark { width: 1em; height: 1em; display: block; flex-shrink: 0; }

/* baslik seridi: marka + baslik yan yana, altinda ayrac */
.as-addacc-head {
    display: flex; align-items: center; justify-content: center; gap: 11px;
    padding: 0 0 16px;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--border-1, var(--kd-kenar, #e5e7eb));
}
[data-theme="dark"] .as-addacc-head { border-bottom-color: var(--kd-kenar, rgba(255, 255, 255, 0.07)); }

/* marka kutusu: artik kare degil, sadece logo */
.as-addacc-ic {
    width: auto; height: auto;
    margin: 0; padding: 0;
    background: none;
    border-radius: 0;
    font-size: 22px;
    color: var(--text-3, #6b7280);   /* notr gri — kirmizi dikkat cekiyordu */
    display: inline-flex; align-items: center;
}
[data-theme="dark"] .as-addacc-ic { color: #98A1AC; }

.as-addacc-title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -0.01em; }
.as-addacc-text  { margin: 0 0 18px; text-align: left; font-size: 13px; line-height: 1.55; }

/* giris alanindaki marka — ayni gri */
.as-addacc-input-wrap .as-rbx-mark { font-size: 16px; color: var(--text-4, #9ca3af); }
[data-theme="dark"] .as-addacc-input-wrap .as-rbx-mark { color: #656E79; }

/* input kabini tasip kirpilmasin */
.as-addacc-input-wrap { overflow: visible; }
.as-addacc-input-wrap input { min-width: 0; flex: 1 1 auto; }
.as-addacc-lbl { line-height: 1.5; }

/* Enter ipucu artik yok — kalan stilleri etkisizlestir */
.as-addacc-enter { display: none; }
.as-addacc-lbl { text-align: left; }


/* ================================================================
   YONTEM SECICI — "Roblox ile baglan" / "Kod ile dogrula"
   ================================================================ */
.as-pick{
    display:flex;align-items:center;gap:14px;width:100%;
    padding:15px;margin-bottom:9px;
    border:1px solid var(--border-1,var(--kd-kenar, #e5e7eb));border-radius:14px;
    background:var(--bg-card,var(--kd-yuzey, #fff));
    text-align:left;text-decoration:none;color:inherit;cursor:pointer;
    transition:border-color .15s ease,background .15s ease,transform .1s ease;
}
.as-pick:hover{border-color:var(--mint-500,#10B981);background:rgba(16,185,129,.04)}
.as-pick:active{transform:scale(.99)}

/* birincil secenek: dolu zemin, gozle secilir */
.as-pick-main{
    border-color:rgba(16,185,129,.35);
    background:linear-gradient(180deg,rgba(16,185,129,.09),rgba(16,185,129,.03));
}
.as-pick-main:hover{border-color:var(--mint-500,#10B981);background:rgba(16,185,129,.11)}

.as-pick-ic{
    width:44px;height:44px;flex-shrink:0;border-radius:12px;
    display:grid;place-items:center;font-size:19px;
    /* Roblox kirmizisi ekranda cok bagiriyordu; marka koyu zeminde
       beyaz olarak duruyor — Roblox'un kendi koyu logosu gibi. */
    background:#15181C;color:#FFFFFF;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
.as-pick-ic .as-rbx-mark{width:22px;height:22px}
.as-pick-ic-alt{background:var(--bg-soft,var(--kd-basik, #f3f4f6));color:var(--text-3,#6b7280);font-size:16px}

.as-pick-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.as-pick-tx b{
    display:flex;align-items:center;gap:8px;flex-wrap:wrap;
    font-size:14.5px;font-weight:600;color:var(--text-1,var(--kd-yazi, #111827));
}
.as-pick-tx small{font-size:12px;line-height:1.5;color:var(--text-3,#6b7280)}

.as-pick-tag{
    font-style:normal;padding:2px 7px;border-radius:5px;
    background:rgba(16,185,129,.16);color:#059669;
    font-size:9.5px;font-weight:700;letter-spacing:.09em;
}
.as-pick-tag-mut{background:var(--bg-soft,var(--kd-basik, #f3f4f6));color:var(--text-4,#9ca3af);letter-spacing:.02em}

.as-pick-go{flex-shrink:0;font-size:12px;color:var(--text-4,#9ca3af);transition:transform .15s ease}
.as-pick:hover .as-pick-go{transform:translateX(3px);color:var(--mint-500,#10B981)}

.as-pick-note{
    display:flex;align-items:flex-start;gap:8px;
    margin:14px 0 0;font-size:11.5px;line-height:1.55;
    color:var(--text-4,#9ca3af);
}
.as-pick-note i{margin-top:2px;font-size:11px;flex-shrink:0}

/* kod adimindaki "diger yontem" baglantisi */
.as-addacc-backlink{
    display:inline-flex;align-items:center;gap:7px;
    margin:0 0 14px;padding:0;border:0;background:none;
    font-family:inherit;font-size:12px;color:var(--text-3,#6b7280);cursor:pointer;
    transition:color .13s ease;
}
.as-addacc-backlink:hover{color:var(--text-1,var(--kd-yazi, #111827))}
.as-addacc-backlink i{font-size:10px}

/* ---- koyu tema ---- */
[data-theme="dark"] .as-pick{background:#101318;border-color:var(--kd-kenar, rgba(255,255,255,.07))}
[data-theme="dark"] .as-pick:hover{border-color:rgba(16,185,129,.5);background:rgba(16,185,129,.06)}
[data-theme="dark"] .as-pick-main{
    border-color:rgba(16,185,129,.32);
    background:linear-gradient(180deg,rgba(16,185,129,.10),rgba(16,185,129,.03));
}
[data-theme="dark"] .as-pick-tx b{color:#F2F4F7}
[data-theme="dark"] .as-pick-tx small{color:#98A1AC}
[data-theme="dark"] .as-pick-ic-alt{background:#1A1F26;color:#98A1AC}
[data-theme="dark"] .as-pick-tag{background:rgba(16,185,129,.18);color:#34D399}
[data-theme="dark"] .as-pick-tag-mut{background:#1A1F26;color:#656E79}
[data-theme="dark"] .as-pick-go{color:#656E79}
[data-theme="dark"] .as-pick-note{color:#656E79}
[data-theme="dark"] .as-addacc-backlink{color:#98A1AC}
[data-theme="dark"] .as-addacc-backlink:hover{color:#F2F4F7}

@media(max-width:480px){
    .as-pick{padding:13px;gap:11px}
    .as-pick-ic{width:38px;height:38px;border-radius:10px}
    .as-pick-tx b{font-size:13.5px}
}


/* ================================================================
   v11 — YAN YANA SECENEKLER + BASLIK ROZETI + KAPANIS ANIMASYONU
   ================================================================ */

/* --- iki secenek yan yana --- */
.as-pick-row{ display:flex; gap:10px; align-items:stretch; }
.as-pick-row .as-pick{
    flex:1 1 0; min-width:0;
    flex-direction:column; align-items:flex-start; gap:11px;
    margin-bottom:0; padding:16px 14px;
}
.as-pick-row .as-pick-tx b{ font-size:13.5px; }
.as-pick-row .as-pick-tx small{ font-size:11.5px; }
.as-pick-row .as-pick-go{ display:none; }

/* --- baslik ikonu artik ROZET (zeminli kare) --- */
.as-addacc-head .as-addacc-ic{
    width:38px; height:38px; border-radius:11px;
    background:var(--bg-soft,var(--kd-basik, #f3f4f6));
    color:var(--text-3,#6b7280);
    font-size:15px;
    display:inline-grid; place-items:center;
}
[data-theme="dark"] .as-addacc-head .as-addacc-ic{
    background:#161B22; color:#98A1AC;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);
}

/* --- ACILIS + KAPANIS: animation degil TRANSITION.
       Boylece kapanirken de yumusak gider (JS 220ms bekliyor). --- */
.as-addacc-back{
    opacity:0; visibility:hidden;
    transition:opacity .2s ease, visibility 0s linear .2s;
}
.as-addacc-back.is-open{
    opacity:1; visibility:visible;
    transition:opacity .2s ease;
}
.as-addacc-card{
    animation:none !important;              /* eski giris animasyonu */
    transform:translateY(14px) scale(.975);
    opacity:0;
    transition:transform .26s cubic-bezier(.22,1,.36,1), opacity .2s ease;
}
.as-addacc-back.is-open .as-addacc-card{
    transform:none; opacity:1;
}

@media(max-width:520px){
    .as-pick-row{ flex-direction:column; }
    .as-pick-row .as-pick{ flex-direction:row; align-items:center; padding:13px; }
}
@media (prefers-reduced-motion: reduce){
    .as-addacc-back, .as-addacc-card{ transition:none; }
}


/* ===================================================================
   DOGRULAMA METNI — KOD DEGIL, CUMLE                  (2026-08-27)
   -------------------------------------------------------------------
   Dogrulama dizesi "MM2-7K3X9P" (10 karakter) iken 12 kelimelik bir
   ifadeye donustu (~75 karakter) — sebep lib/verify_phrase.php'de:
   kisa kod gorunumlu dizeleri Roblox'un profil filtresi yildizliyor.

   Eski stil TEK SATIR icin yazilmisti ve
       overflow: hidden; text-overflow: ellipsis
   iceriyordu: yeni ifade EKRANDA KESILIR, kullanici ne yapistirdigini
   goremezdi. (Kopyalama dugmesi yine calisirdi ama korlemesine.)
   Punto kucultuldu, sarma acildi, kesme kaldirildi.
   =================================================================== */
.as-addacc-code-row {
    /* Kopyalama dugmesi cok satirli metnin USTUNE hizalansin,
       ortasina degil. */
    align-items: flex-start;
}
.as-addacc-code-val {
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    line-height: 1.55;
    /* KESME YOK — metnin tamami gorunmeli */
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;      /* kelimeler ortadan bolunmesin */
    padding-top: 2px;
}


/* ================================================================
   KILITLI SECENEK — "Roblox ile baglan" bakimda
   ----------------------------------------------------------------
   Roblox uygulamasi YAYINLANMAMIS oldugu surece yalnizca 10 kullanici
   yetkilendirebiliyor (Creator Hub uyarisi) ve o kota 30 Agustos
   2026'da doldu. Secenek gizlenmiyor, KILITLENIYOR: varligi belli
   olsun, neden calismadigi okunsun, kullanici calisan yola gitsin.

   Kart tiklanamaz bir <div> (bkz. partials/sell-modal-addacc.php);
   buradaki kurallar yalnizca onu OYLE GOSTERIYOR. pointer-events
   ayrica kapatiliyor ki tiklanabilir bir sey oldugu izlenimi
   vermesin -- imlec bile degismiyor.

   SIRA: kod secenegi calisan yol, o yuzden listede ONE aliniyor
   (order). Isaretlemede sira degistirilmedi -- ekran okuyucu ve
   klavye sirasi da gorsel sirayla ayni kalsin diye kilitli kart
   zaten etkilesime kapali.
   ================================================================ */
.as-pick-locked{
    order:2;
    cursor:default;
    pointer-events:none;
    opacity:.62;
    border-style:dashed;
    /* Zemin palete BAGIMLI DEGIL: --bg-soft bazi sayfalarda nane
       tonlu ve kilitli kart o zaman "aktif" gorunuyordu. Notr bir
       gri katman her temada sonuk okunuyor. */
    background:rgba(120,130,140,.06);
}
.as-pick-row .as-pick-locked{ order:2; }
.as-pick-row #as-pick-code{ order:1; }

/* Marka isareti soluyor: kilitli bir secenek gozu ilk cekmemeli. */
.as-pick-locked .as-pick-ic{
    position:relative;
    background:var(--bg-soft,var(--kd-basik, #eef0f2));
    color:var(--text-4,#9ca3af);
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);
}
/* Kilit rozeti ikonun kosesinde — "bu kapali" tek bakista okunsun. */
.as-pick-lockbadge{
    position:absolute; right:-4px; bottom:-4px;
    width:18px; height:18px; border-radius:50%;
    display:grid; place-items:center;
    font-size:8.5px;
    background:var(--bg-card,var(--kd-yuzey, #fff));
    color:var(--text-3,#6b7280);
    box-shadow:0 1px 3px rgba(0,0,0,.16), inset 0 0 0 1px rgba(0,0,0,.07);
}
/* "BAKIMDA" etiketi: yesil degil notr — bu bir OZELLIK degil, bir
   DURUM bildirimi. */
.as-pick-tag-lock{
    background:var(--bg-soft,var(--kd-basik, #eceef0)) !important;
    color:var(--text-3,#6b7280) !important;
    letter-spacing:.06em;
}

[data-theme="dark"] .as-pick-locked{
    background:rgba(255,255,255,.025);
    border-color:var(--kd-kenar, rgba(255,255,255,.09));
}
[data-theme="dark"] .as-pick-locked .as-pick-ic{
    background:#161A20; color:#6B7480;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
[data-theme="dark"] .as-pick-lockbadge{
    background:#101318; color:#98A1AC;
    box-shadow:0 1px 3px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.09);
}
[data-theme="dark"] .as-pick-tag-lock{
    background:#1A1F26 !important; color:#98A1AC !important;
}