/* ══════════════════════════════════════════
   OYUNONE — Component Design System
   Button & UI component styles
══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════ */
:root {
    /* colors */
    --c-primary: #57b0ff;
    --c-primary-hover: #3d9cf0;
    --c-primary-active: #2b8ae0;
    --c-success: #34d399;
    --c-success-hover: #2abf89;
    --c-danger: #f87171;
    --c-danger-hover: #ef4444;
    --c-warning: #fbbf24;
    --c-warning-hover: #f59e0b;
    --c-gold: #ffd166;
    --c-gold-hover: #f0c050;
    --c-surface: #1a1e26;
    --c-surface-hover: #22272f;
    --c-border: rgba(255, 255, 255, 0.10);
    --c-border-hover: rgba(255, 255, 255, 0.18);
    --c-text: #fff;
    --c-text-muted: #8ba3c7;
    --c-text-subtle: #5a6b82;

    /* radius */
    --r-sm: 5px;
    --r-md: 12px;
    --r-lg: 9px;

    /* transitions */
    --tr: 160ms ease;
}

/* ══════════════════════════════════════════
   BASE BUTTON
══════════════════════════════════════════ */
.btn-o {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    outline: none;
    text-decoration: none;
    transition: background var(--tr), border-color var(--tr), color var(--tr), box-shadow var(--tr), transform var(--tr);
}
.btn-group-o .btn-o:active  {
    transform: scale(1);
}
.btn-o:active {
    transform: scale(0.97);
}

/* ── SIZES ── */
.btn-o--lg {
    font-size: 15px;
    padding: 13px 28px;
    border-radius: var(--r-lg);
}

.btn-o--md {
    font-size: 13px;
    padding: 10px 22px;
    border-radius: var(--r-md);
}

.btn-o--sm {
    font-size: 12px;
    padding: 7px 16px;
    border-radius: var(--r-sm);
}

.btn-o--xs {
    font-size: 11px;
    padding: 5px 12px;
    border-radius: var(--r-sm);
}

/* ── FULL WIDTH ── */
.btn-o--block {
    width: 100%;
}

/* ══════════════════════════════════════════
   SOLID FILL VARIANTS
══════════════════════════════════════════ */

/* Primary (mavi) */
.btn-o--primary {
    background: var(--c-primary);
    color: #0a0f18;
}

.btn-o--primary:hover {
    background: var(--c-primary-hover);
    color: #0a0f18;
}

.btn-o--primary:active {
    background: var(--c-primary-active);
}

/* Success (yeşil) */
.btn-o--success {
    background: var(--c-success);
    color: #0a1a14;
}

.btn-o--success:hover {
    background: var(--c-success-hover);
    color: #0a1a14;
}

/* Danger (kırmızı) */
.btn-o--danger {
    background: var(--c-danger);
    color: #1a0a0a;
}

.btn-o--danger:hover {
    background: var(--c-danger-hover);
    color: #1a0a0a;
}

/* Warning (sarı) */
.btn-o--warning {
    background: var(--c-warning);
    color: #1a1400;
}

.btn-o--warning:hover {
    background: var(--c-warning-hover);
    color: #1a1400;
}

/* Gold (altın) */
.btn-o--gold {
    background: var(--c-gold);
    color: #1a1400;
}

.btn-o--gold:hover {
    background: var(--c-gold-hover);
    color: #1a1400;
}

/* Dark / Surface */
.btn-o--dark {
    background: var(--c-surface);
    color: var(--c-text);
    border: 1px solid var(--c-border);
}

.btn-o--dark:hover {
    background: var(--c-surface-hover);
    border-color: var(--c-border-hover);
    color: var(--c-text);
}

/* ══════════════════════════════════════════
   OUTLINE VARIANTS
══════════════════════════════════════════ */
.btn-o--outline-primary {
    background: transparent;
    color: var(--c-primary);
    border: 1.5px solid var(--c-primary);
}

.btn-o--outline-primary:hover {
    background: rgba(87, 176, 255, 0.08);
    color: var(--c-primary);
}

.btn-o--outline-success {
    background: transparent;
    color: var(--c-success);
    border: 1.5px solid var(--c-success);
}

.btn-o--outline-success:hover {
    background: rgba(52, 211, 153, 0.08);
    color: var(--c-success);
}

.btn-o--outline-danger {
    background: transparent;
    color: var(--c-danger);
    border: 1.5px solid var(--c-danger);
}

.btn-o--outline-danger:hover {
    background: rgba(248, 113, 113, 0.08);
    color: var(--c-danger);
}

.btn-o--outline-warning {
    background: transparent;
    color: var(--c-warning);
    border: 1.5px solid var(--c-warning);
}

.btn-o--outline-warning:hover {
    background: rgba(251, 191, 36, 0.08);
    color: var(--c-warning);
}

.btn-o--outline-light {
    background: transparent;
    color: var(--c-text-muted);
    border: 1.5px solid var(--c-border);
}

.btn-o--outline-light:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--c-text);
    border-color: var(--c-border-hover);
}

/* ══════════════════════════════════════════
   GHOST VARIANTS (no border)
══════════════════════════════════════════ */
.btn-o--ghost {
    background: transparent;
    color: var(--c-text-muted);
    border: none;
}

.btn-o--ghost:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--c-text);
}

.btn-o--ghost-primary {
    background: transparent;
    color: var(--c-primary);
    border: none;
}

.btn-o--ghost-primary:hover {
    background: rgba(87, 176, 255, 0.08);
}

.btn-o--ghost-danger {
    background: transparent;
    color: var(--c-danger);
    border: none;
}

.btn-o--ghost-danger:hover {
    background: rgba(248, 113, 113, 0.08);
}

/* ══════════════════════════════════════════
   SOFT / TINTED FILL VARIANTS
══════════════════════════════════════════ */
.btn-o--soft-primary {
    background: rgba(87, 176, 255, 0.12);
    color: var(--c-primary);
    border: none;
}

.btn-o--soft-primary:hover {
    background: rgba(87, 176, 255, 0.20);
}

.btn-o--soft-success {
    background: rgba(52, 211, 153, 0.12);
    color: var(--c-success);
    border: none;
}

.btn-o--soft-success:hover {
    background: rgba(52, 211, 153, 0.20);
}

.btn-o--soft-danger {
    background: rgba(248, 113, 113, 0.12);
    color: var(--c-danger);
    border: none;
}

.btn-o--soft-danger:hover {
    background: rgba(248, 113, 113, 0.20);
}

.btn-o--soft-warning {
    background: rgba(251, 191, 36, 0.12);
    color: var(--c-warning);
    border: none;
}

.btn-o--soft-warning:hover {
    background: rgba(251, 191, 36, 0.20);
}

.btn-o--soft-gold {
    background: rgba(255, 209, 102, 0.12);
    color: var(--c-gold);
    border: none;
}

.btn-o--soft-gold:hover {
    background: rgba(255, 209, 102, 0.20);
}

/* ══════════════════════════════════════════
   ICON-ONLY SQUARE BUTTONS
══════════════════════════════════════════ */
.btn-o--icon {
    justify-content: center;
    gap: 0;
    padding: 0;
}

.btn-o--icon.btn-o--lg {
    width: 48px;
    height: 48px;
    border-radius: var(--r-lg);
    font-size: 18px;
}

.btn-o--icon.btn-o--md {
    width: 40px;
    height: 40px;
    border-radius: var(--r-md);
    font-size: 16px;
}

.btn-o--icon.btn-o--sm {
    width: 34px;
    height: 34px;
    border-radius: var(--r-sm);
    font-size: 14px;
}

.btn-o--icon.btn-o--xs {
    width: 28px;
    height: 28px;
    border-radius: var(--r-sm);
    font-size: 12px;
}

/* ══════════════════════════════════════════
   DISABLED STATE
══════════════════════════════════════════ */
.btn-o:disabled,
.btn-o.is-disabled {
    opacity: 0.35;
    pointer-events: none;
    cursor: not-allowed;
}

/* ══════════════════════════════════════════
   LOADING STATE
══════════════════════════════════════════ */
.btn-o.is-loading {
    pointer-events: none;
    position: relative;
    color: transparent !important;
}

.btn-o.is-loading::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    border-top-color: #fff;
    border-radius: 50%;
    animation: btn-spin .6s linear infinite;
}

.btn-o--primary.is-loading::after,
.btn-o--success.is-loading::after,
.btn-o--warning.is-loading::after,
.btn-o--gold.is-loading::after,
.btn-o--danger.is-loading::after {
    border-color: rgba(0, 0, 0, 0.2);
    border-top-color: rgba(0, 0, 0, 0.7);
}

@keyframes btn-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ══════════════════════════════════════════
   BUTTON GROUP (steppers, etc.)
══════════════════════════════════════════ */
.btn-group-o {
    display: inline-flex;
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    overflow: hidden;
}

.btn-group-o .btn-o {
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--c-border);
}

.btn-group-o .btn-o:last-child {
    border-right: none;
}

/* Stepper buttons (auto-classed by stepper.js) */
.btn-group-o--stepper .btn-o {
    background: var(--c-surface);
    color: var(--c-text);
    width: 38px;
    height: 38px;
    padding: 0;
    font-size: 16px;
}

.btn-group-o--stepper .btn-o .material-symbols-outlined {
    font-size: 18px;
    vertical-align: 0;
}

.btn-group-o--stepper .btn-o:hover {
    background: var(--c-surface-hover);
}

.btn-group-o--stepper .btn-o:active {
    transform: none !important;
    background: #151922;
    color: var(--c-text);
    box-shadow:
        inset 0 3px 8px rgba(0, 0, 0, .55),
        inset 0 -1px 0 rgba(255, 255, 255, .05);
}

/* Group input (for qty stepper) */
.btn-group-o__input {
    width: 48px;
    height: 38px;
    text-align: center;
    background: transparent;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    font-weight: 700;
    border: none;
    border-right: 1px solid var(--c-border);
    outline: none;
    -moz-appearance: textfield;
    appearance: textfield;
}

.btn-group-o__input::-webkit-inner-spin-button,
.btn-group-o__input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Size variant: lg */
.btn-group-o--lg .btn-o { width: 46px; height: 46px; font-size: 18px; }
.btn-group-o--lg .btn-group-o__input { width: 56px; height: 46px; font-size: 16px; }

/* Size variant: sm */
.btn-group-o--sm .btn-o { width: 28px; height: 28px; font-size: 13px; padding: 0; }
.btn-group-o--sm .btn-group-o__input { width: 38px; height: 28px; font-size: 12px; }

/* Stepper animated display overlay */
.btn-group-o { position: relative; }

.btn-group-o__input { color: transparent !important; caret-color: #fff; }
.btn-group-o__input:focus { color: #fff !important; }
.btn-group-o__input:focus + .stepper-display { opacity: 0; pointer-events: none; }

.stepper-display {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    font-family: "Inter", sans-serif;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
}
.stepper-display span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Artış: eski aşağı düşer, yeni yukarıdan gelir */
.stepper-display span.stepper-out-down { animation: stepperSlideOutDown .2s ease-in forwards; }
.stepper-display span.stepper-in-down  { animation: stepperSlideInFromTop .25s ease-out forwards; }

/* Azalış: eski yukarı çıkar, yeni aşağıdan gelir */
.stepper-display span.stepper-out-up { animation: stepperSlideOutUp .2s ease-in forwards; }
.stepper-display span.stepper-in-up  { animation: stepperSlideInFromBottom .25s ease-out forwards; }

@keyframes stepperSlideOutDown {
    0%   { opacity: 1; transform: translate(-50%, -50%); }
    100% { opacity: 0; transform: translate(-50%, 80%); }
}
@keyframes stepperSlideInFromTop {
    0%   { opacity: 0; transform: translate(-50%, -180%); }
    100% { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes stepperSlideOutUp {
    0%   { opacity: 1; transform: translate(-50%, -50%); }
    100% { opacity: 0; transform: translate(-50%, -180%); }
}
@keyframes stepperSlideInFromBottom {
    0%   { opacity: 0; transform: translate(-50%, 80%); }
    100% { opacity: 1; transform: translate(-50%, -50%); }
}

/* ══════════════════════════════════════════
   UPLOAD ZONE — .upload-o
══════════════════════════════════════════ */
.upload-o {
    border: 2px dashed rgba(255, 255, 255, .1);
    border-radius: var(--r-md);
    padding: 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color .2s, background .2s;
}

.upload-o:hover {
    border-color: rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .02);
}

.upload-o__icon {
    font-size: 32px;
    color: rgba(255, 255, 255, .25);
    display: block;
    margin-bottom: 6px;
}

.upload-o__text {
    margin: 0 0 4px;
    font-size: 13px;
    color: #fff;
}

.upload-o__hint {
    margin: 0;
    font-size: 11px;
    color: rgba(255, 255, 255, .35);
}

.upload-o__link {
    color: var(--c-primary);
    cursor: pointer;
}

/* Upload preview grid */
.upload-o-preview {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 12px;
}

/* ══════════════════════════════════════════
   FILE INPUT — .input-o-file
══════════════════════════════════════════ */
.input-o-file {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 20px 16px;
    border: 2px dashed rgba(255, 255, 255, .1);
    border-radius: var(--r-md);
    background: transparent;
    cursor: pointer;
    text-align: center;
    transition: border-color .2s, background .2s;
}

.input-o-file:hover {
    border-color: rgba(255, 255, 255, .2);
    background: rgba(255, 255, 255, .02);
}

.input-o-file__icon {
    font-size: 28px;
    color: rgba(255, 255, 255, .3);
    transition: color .2s;
}

.input-o-file:hover .input-o-file__icon {
    color: var(--c-primary);
}

.input-o-file__text {
    font-size: 13px;
    font-weight: 500;
    color: #fff;
}

.input-o-file__hint {
    font-size: 11px;
    color: rgba(255, 255, 255, .35);
}

/* Dosya seçili durumu */
.input-o-file--has-file {
    border-color: rgba(87, 176, 255, .25);
    background: rgba(87, 176, 255, .04);
}

.input-o-file--has-file .input-o-file__icon {
    color: var(--c-primary);
}

.input-o-file--dragover {
    border-color: var(--c-primary);
    background: rgba(87, 176, 255, .06);
}

/* ══════════════════════════════════════════
   FILE INPUT (inline) — .input-o-fileinput
══════════════════════════════════════════ */
.input-o-fileinput {
    display: flex;
    align-items: center;
    width: 100%;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color .2s;
}

.input-o-fileinput:hover {
    border-color: rgba(255, 255, 255, .2);
}

.input-o-fileinput--focus {
    border-color: rgba(87, 176, 255, .6);
}

.input-o-fileinput__btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 16px;
    background: rgba(255, 255, 255, .06);
    border-right: 1px solid rgba(255, 255, 255, .1);
    font-size: 13px;
    font-weight: 500;
    font-family: "Inter", sans-serif;
    color: #fff;
    white-space: nowrap;
    transition: background .2s;
}

.input-o-fileinput:hover .input-o-fileinput__btn {
    background: rgba(255, 255, 255, .08);
}

.input-o-fileinput__btn .material-symbols-outlined {
    font-size: 18px;
}

.input-o-fileinput__text {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    font-size: 13px;
    font-family: "Inter", sans-serif;
    color: #64748b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.input-o-fileinput__text--active {
    color: #fff;
}

.input-o-fileinput__remove {
    flex-shrink: 0;
    display: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-right: 4px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: rgba(255, 255, 255, .35);
    cursor: pointer;
    transition: color .2s, background .2s;
}

.input-o-fileinput__remove:hover {
    color: #ef4444;
    background: rgba(239, 68, 68, .1);
}

.input-o-fileinput--has-file .input-o-fileinput__remove {
    display: inline-flex;
}

.input-o-fileinput--has-file {
    border-color: rgba(87, 176, 255, .25);
}

/* ══════════════════════════════════════════
   CHECKBOX — .check-o
══════════════════════════════════════════ */
.check-o {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: #fff;
}

.check-o input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.check-o__box {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, .2);
    border-radius: 5px;
    background: rgba(255, 255, 255, .04);
    transition: background .2s, border-color .2s, box-shadow .2s;
}

.check-o__box svg {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 12px;
    height: 12px;
    fill: none;
    stroke: #fff;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 20;
    stroke-dashoffset: 20;
    transition: stroke-dashoffset .3s cubic-bezier(.4, 0, .2, 1);
}

/* Checked */
.check-o input:checked ~ .check-o__box {
    background: var(--c-primary);
    border-color: var(--c-primary);
}

.check-o input:checked ~ .check-o__box svg {
    stroke-dashoffset: 0;
}

/* Focus */
.check-o input:focus-visible ~ .check-o__box {
    box-shadow: 0 0 0 3px rgba(87, 176, 255, .3);
}

/* Hover */
.check-o:hover .check-o__box {
    border-color: rgba(255, 255, 255, .35);
}

.check-o input:checked + .check-o__box:hover,
.check-o:hover input:checked ~ .check-o__box {
    border-color: var(--c-primary);
}

/* Disabled */
.check-o input:disabled ~ .check-o__box {
    opacity: .4;
    cursor: not-allowed;
}

.check-o input:disabled ~ .check-o__label {
    opacity: .4;
    cursor: not-allowed;
}

.check-o__label {
    line-height: 1.3;
}

/* ══════════════════════════════════════════
   RADIO — .radio-o
══════════════════════════════════════════ */
.radio-o {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: #fff;
}

.radio-o input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.radio-o__circle {
    position: relative;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, .2);
    border-radius: 50%;
    background: rgba(255, 255, 255, .04);
    transition: border-color .2s, box-shadow .2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.radio-o__circle::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--c-primary);
    transform: scale(0);
    transition: transform .25s cubic-bezier(.4, 0, .2, 1);
}

/* Selected */
.radio-o input:checked ~ .radio-o__circle {
    border-color: var(--c-primary);
}

.radio-o input:checked ~ .radio-o__circle::after {
    transform: scale(1);
}

/* Bounce */
@keyframes radioBounce {
    0%   { transform: scale(0); }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.radio-o input:checked ~ .radio-o__circle::after {
    animation: radioBounce .35s cubic-bezier(.4, 0, .2, 1) forwards;
}

/* Focus */
.radio-o input:focus-visible ~ .radio-o__circle {
    box-shadow: 0 0 0 3px rgba(87, 176, 255, .3);
}

/* Hover */
.radio-o:hover .radio-o__circle {
    border-color: rgba(255, 255, 255, .35);
}

.radio-o:hover input:checked ~ .radio-o__circle {
    border-color: var(--c-primary);
}

/* Disabled */
.radio-o input:disabled ~ .radio-o__circle {
    opacity: .4;
    cursor: not-allowed;
}

.radio-o input:disabled ~ .radio-o__label {
    opacity: .4;
    cursor: not-allowed;
}

.radio-o__label {
    line-height: 1.3;
}

/* SWITCH - .switch-o */
.switch-o {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    color: #fff;
}

.switch-o input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.switch-o__track {
    position: relative;
    width: 42px;
    height: 24px;
    flex-shrink: 0;
    border: 2px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    background: rgba(255, 255, 255, .06);
    transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.switch-o__thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .72);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .28);
    transition: transform .22s cubic-bezier(.4, 0, .2, 1), background .2s ease;
}

.switch-o input:checked ~ .switch-o__track {
    border-color: var(--c-primary);
    background: var(--c-primary);
}

.switch-o input:checked ~ .switch-o__track .switch-o__thumb {
    transform: translateX(18px);
    background: #fff;
}

.switch-o input:focus-visible ~ .switch-o__track {
    box-shadow: 0 0 0 3px rgba(87, 176, 255, .3);
}

.switch-o:hover .switch-o__track {
    border-color: rgba(255, 255, 255, .35);
}

.switch-o:hover input:checked ~ .switch-o__track {
    border-color: var(--c-primary);
}

.switch-o input:disabled ~ .switch-o__track {
    opacity: .45;
    cursor: not-allowed;
}

.switch-o input:disabled ~ .switch-o__label {
    opacity: .4;
    cursor: not-allowed;
}

.switch-o__label {
    line-height: 1.3;
}

/* ══════════════════════════════════════════
   TAG / CHIP BUTONLAR
══════════════════════════════════════════ */
.btn-tag-o {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    font-family: "Inter", sans-serif;
    color: var(--c-text-muted);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--c-border);
    border-radius: 100px;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--tr);
}

.btn-tag-o:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--c-text);
    border-color: var(--c-border-hover);
}

.btn-tag-o.is-active,.btn-tag-o.active {
    background: rgba(87, 176, 255, 0.12);
    color: var(--c-primary);
    border-color: rgba(87, 176, 255, 0.3);
}

/* ══════════════════════════════════════════
   TAB / SEGMENTED CONTROL
══════════════════════════════════════════ */
.tab-group-o {
    display: inline-flex;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    padding: 3px;
    gap: 2px;
}

.tab-group-o__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    font-size: 12px;
    font-weight: 600;
    font-family: "Inter", sans-serif;
    color: var(--c-text-muted);
    background: transparent;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: all var(--tr);
}

.tab-group-o__btn:hover {
    color: var(--c-text);
    background: rgba(255, 255, 255, 0.04);
}

.tab-group-o__btn.is-active {
    color: #fff;
    background: rgba(87, 176, 255, 0.15);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ══════════════════════════════════════════
   CONFIRM DIALOG
══════════════════════════════════════════ */
.confirm-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 250ms ease, visibility 250ms ease;
}

.confirm-overlay.is-active {
    opacity: 1;
    visibility: visible;
}

.confirm-dialog {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 28px 24px 24px;
    width: 90%;
    max-width: 400px;
    transform: translateY(0px) scale(0.97);
    transition: transform 250ms ease;
}

.confirm-overlay.is-active .confirm-dialog {
    transform: translateY(0) scale(1);
}

.confirm-dialog__icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 16px;
}

.confirm-dialog__icon--warning {
    background: rgba(251, 191, 36, 0.12);
    color: var(--c-warning);
}

.confirm-dialog__icon--danger {
    background: rgba(248, 113, 113, 0.12);
    color: var(--c-danger);
}

.confirm-dialog__icon--info {
    background: rgba(87, 176, 255, 0.12);
    color: var(--c-primary);
}

.confirm-dialog__title {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    margin: 0 0 6px;
}

.confirm-dialog__msg {
    color: var(--c-text-muted);
    font-size: 13px;
    line-height: 1.55;
    margin: 0 0 22px;
}

.confirm-dialog__actions {
    display: flex;
    gap: 10px;
}

.confirm-dialog__actions .btn-o {
    flex: 1;
}

/* ══════════════════════════════════════════
   MODAL COMPONENT — .modal-o
══════════════════════════════════════════ */
.modal-o-overlay {
    position: fixed;
    inset: 0;
    z-index: 9998;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.65);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
    transition: opacity 250ms ease;
    padding: 24px;
}

.modal-o-overlay.is-active {
    display: flex;
}

.modal-o-overlay.is-show {
    opacity: 1;
}

.modal-o {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    transform: translateY(20px) scale(0.97);
    transition: transform 250ms ease;
    overflow: visible;
}

.modal-o-overlay.is-show .modal-o {
    transform: translateY(0) scale(1);
}

/* Modal içindeki <form>, flex zincirini kırmasın; aksi halde body scroll
   edemez ve içerik uzunsa footer modalın dışına taşar. */
.modal-o > form {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
}

.modal-o--sm { max-width: 400px; }
.modal-o--md { max-width: 560px; }
.modal-o--lg { max-width: 760px; }
.modal-o--xl { max-width: 960px; }

.modal-o__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid var(--c-border);
    flex-shrink: 0;
}

.modal-o__title {
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.modal-o__title .material-symbols-outlined {
    font-size: 20px;
    color: var(--c-primary);
}

.modal-o__close {
    background: none;
    border: none;
    color: var(--c-text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.modal-o__close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

.modal-o__body {
    padding: 22px;
    overflow: visible;
    flex: 1;
    color: var(--c-text-muted);
    font-size: 13px;
    line-height: 1.6;
}

/* Uzun içerikli modal'lar için scroll gerekirse bu modifier kullanılır.
   min-height: 0 olmadan flex child içerik boyuna kadar büyür ve footer'ı taşırır. */
.modal-o__body--scroll {
    overflow-y: auto;
    min-height: 0;
}

/* Choices.js dropdown modal içinde kırpılmasın */
.modal-o__body .o-choices.is-open {
    overflow: visible;
}
.modal-o__body .o-choices .choices__list--dropdown,
.modal-o__body .o-choices .choices__list[aria-expanded] {
    z-index: 9999 !important;
}

.modal-o__footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid var(--c-border);
    flex-shrink: 0;
}

.modal-o__footer--between {
    justify-content: space-between;
}

/* ══════════════════════════════════════════
   INPUT COMPONENT — .input-o
══════════════════════════════════════════ */
.input-o {
    width: 100%;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    padding: 11px 14px;
    transition: border-color .2s;
    outline: none;
}

.input-o:focus {
    border-color: rgba(87, 176, 255, .6);
}

.input-o::placeholder {
    color: #64748b;
}

.input-o:disabled {
    opacity: .45;
    cursor: not-allowed;
}

.input-o--sm {
    padding: 8px 12px;
    font-size: 13px;
}

.input-o--lg {
    padding: 14px 16px;
    font-size: 15px;
}

/* Doğrulama kodu (OTP) girişi — büyük, ortalı, aralıklı */
.input-o--code {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .5em;
    text-indent: .5em;
    padding-top: 12px;
    padding-bottom: 12px;
}

/* Dosya yükleme input'u — native file butonunu tema ile uyumlu hale getirir */
.input-o[type="file"] {
    padding: 8px 12px;
    cursor: pointer;
    line-height: 1.6;
}

.input-o[type="file"]::file-selector-button {
    margin-right: 12px;
    padding: 6px 12px;
    border: none;
    border-radius: 6px;
    background: rgba(87, 176, 255, .15);
    color: #57b0ff;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background .15s;
}

.input-o[type="file"]::file-selector-button:hover {
    background: rgba(87, 176, 255, .25);
}

.input-o-wrap {
    position: relative;
    width: 100%;
}

.input-o-wrap .input-o {
    padding-left: 40px;
}

.input-o-wrap__icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #64748b;
    pointer-events: none;
}

.input-o-wrap--right .input-o {
    padding-left: 14px;
    padding-right: 40px;
}

.input-o-wrap--right .select-o {
    padding-right: 40px;
}

.input-o-wrap--right .input-o-wrap__icon {
    left: auto;
    right: 12px;
}

.input-o-wrap__icon--brand {
    font-size: 20px;
    font-weight: 700;
    color: #fff !important;
}

.input-o-wrap__icon--brand .si {
    font-size: 20px;
}

/* input-o-wrap with icon → Choices.js inner padding */
.input-o-wrap .o-choices .choices__inner {
    padding-left: 40px !important;
}

/* Seçim yapılınca wrap ikonu gizle, seçenek ikonu göster */
.input-o-wrap.has-selection > .input-o-wrap__icon {
    display: none;
}

/* Seçim yapılınca inner padding'i kaldır (seçenek ikonundan gelecek) */
.input-o-wrap.has-selection .o-choices .choices__inner {
    padding-left: 14px !important;
}

/* ══════════════════════════════════════════
   INPUT GROUP — .input-group-o
   Input + bitişik aksiyon butonu (ör. arama)
══════════════════════════════════════════ */
.input-group-o {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 460px;
}

/* Input (veya ikonlu sarmalayıcı) esner, buton sabit kalır */
.input-group-o > .input-o-wrap,
.input-group-o > .input-o {
    flex: 1 1 auto;
    min-width: 0;
}

/* Bitişik kenarlar düz: input sağ köşeleri kare, buton sol köşeleri kare */
.input-group-o > .input-o,
.input-group-o > .input-o-wrap > .input-o {
    height: 100%;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.input-group-o > .btn-o {
    flex-shrink: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* İkon buton: sabit width/height yerine input yüksekliğine uyan kare */
.input-group-o > .btn-o--icon {
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
}

/* Focus'taki input butonun arkasında kalmasın (border-color görünür olsun) */
.input-group-o > .input-o-wrap:focus-within,
.input-group-o > .input-o:focus {
    position: relative;
    z-index: 1;
}

/* Choices.js — option icon support */
.o-choices__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    vertical-align: middle;
    flex-shrink: 0;
}

.o-choices__icon .si {
    font-size: 18px;
}

/* Dropdown & selected item icon alignment */
.o-choices .choices__list--single .choices__item,
.o-choices .choices__list--dropdown .choices__item,
.o-choices .choices__list[aria-expanded] .choices__item {
    display: flex;
    align-items: center;
}

/* Price Input — icon left + inline TL suffix */
.input-o-wrap--price .input-o {
    padding-left: 40px;
    padding-right: 14px;
}

/* Inline suffix — metnin hemen peşinde */
.o-price-suffix {
	position: absolute;
	top: 50%;
	left: 0;
	transform: translateY(-50%);
	font-size: inherit;
	font-weight: 700;
	color: var(--c-primary);
	pointer-events: none;
	white-space: nowrap;
	transition: opacity 120ms ease;
	z-index: 2;
	line-height: 1;
	font-size: 70%;
}

/* Türkçe metin — devre dışı */
.o-price-text {
	display: none !important;
	font-size: 0.78rem;
	color: rgb(87, 176, 255);
	font-style: italic;
	margin-top: 4px;
	min-height: 1.1em;
	padding-left: 24px;
	position: absolute;
	/* bottom: -30px; */
	/* inset: inherit; */
	transform: translateX(0px) translateY(53px);
	background: rgb(40, 43, 49);
	border: 1px solid rgba(255, 255, 255, .1);
	border-radius: 0px 0px 7px 7px;
	padding: 0px 10px;
	border-top: 0px;
	
}
.o-price-text.is-focus {

	border-color: rgba(87, 176, 255, .6);
	
	
}
.o-price-text::before {
	content: "";
	position: absolute;
	background-color: rgb(40, 43, 49);
	width: 2px;
	height: 10px;
	inset: -1px 100%;
}
.o-price-text small {
    font-size: 0.85em;
    color: white;
    opacity: 0.6;
}

.o-price-text__label,
.o-price-text__icon {
    opacity: 0.5;
    font-style: normal;
    font-weight: 600;
}

.o-price-text__icon {
    font-size: 14px;
    vertical-align: -2px;
    margin-right: 2px;
}

.input-o-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.input-o-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, .4);
    text-transform: uppercase;
    letter-spacing: .4px;
}

.input-o-hint {
    font-size: 11px;
    color: var(--c-text-subtle);
}

.input-o-hint--error {
    color: var(--c-danger);
}

.input-o--error {
    border-color: var(--c-danger) !important;
}

.input-o--success {
    border-color: var(--c-success) !important;
}

textarea.input-o {
    resize: vertical;
    min-height: 80px;
}

/* ══════════════════════════════════════════
   SELECT COMPONENT — .select-o
══════════════════════════════════════════ */
.select-o {
    width: 100%;
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 8px;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    padding: 11px 14px;
    appearance: auto;
    transition: border-color .2s;
    outline: none;
}

.select-o--sm {
    padding: 8px 12px;
    font-size: 13px;
}

.select-o--lg {
    padding: 14px 16px;
    font-size: 15px;
}

.select-o:focus {
    border-color: rgba(87, 176, 255, .5);
}

.select-o option {
    background: #1a1d24;
    color: #fff;
}

.select-o-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.select-o-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, .4);
    text-transform: uppercase;
    letter-spacing: .4px;
}

/* ══════════════════════════════════════════
   CHOICES.JS — .o-choices
══════════════════════════════════════════ */
.o-choices .choices__inner {
    display: flex !important;
    align-items: center !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, .04) !important;
    border: 1px solid rgba(255, 255, 255, .1) !important;
    border-radius: 8px !important;
    min-height: 0 !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
    color: #fff !important;
}
.o-choices .choices__list--single {
    padding: 0 16px 0 0 !important;
}
.o-choices .choices__list--single .choices__item {
    color: #e2e8f0 !important;
    font-size: 14px;
}
.o-choices .choices__list--single .choices__placeholder {
    color: #64748b !important;
    opacity: 1 !important;
}

/* — Size: sm — */
.o-choices--sm .choices__inner {
    padding: 8px 12px !important;
    font-size: 13px !important;
}
.o-choices--sm .choices__list--single .choices__item {
    font-size: 13px !important;
}
.o-choices--sm .choices__list--dropdown .choices__item,
.o-choices--sm .choices__list[aria-expanded] .choices__item {
    font-size: 12px !important;
    padding: 8px 12px !important;
}
.o-choices--sm::after {
    right: 12px !important;
}

/* — Size: lg — */
.o-choices--lg .choices__inner {
    padding: 14px 16px !important;
    font-size: 15px !important;
}
.o-choices--lg .choices__list--single .choices__item {
    font-size: 15px !important;
}
.o-choices--lg .choices__list--dropdown .choices__item,
.o-choices--lg .choices__list[aria-expanded] .choices__item {
    font-size: 14px !important;
    padding: 12px 16px !important;
}
.o-choices--lg::after {
    right: 16px !important;
}

.o-choices.is-open.is-flipped .choices__inner {
    border-color: rgba(87, 176, 255, 0.4) !important;
    border-radius: 0 0 8px 8px !important;
}
.o-choices.is-open .choices__inner {
    border-color: rgba(87, 176, 255, 0.4) !important;
    border-radius: 8px 8px 0 0 !important;
}

.o-choices .choices__list--dropdown,
.o-choices .choices__list[aria-expanded] {
    background: #1a1d24 !important;
    border: 1px solid rgba(87, 176, 255, 0.4) !important;
    border-top: none !important;
    border-radius: 0 0 8px 8px !important;
    z-index: 100;
    word-break: break-word;
}
.o-choices.is-flipped .choices__list--dropdown
 {
    background: #1a1d24 !important;
    border: 1px solid rgba(87, 176, 255, 0.4) !important;
    border-bottom: none !important;
    border-radius: 8px 8px 0 0 !important;
    z-index: 100;
    word-break: break-word;
}

.o-choices .choices__list--dropdown .choices__item,
.o-choices .choices__list[aria-expanded] .choices__item {
    color: #cbd5e1 !important;
    font-size: 13px !important;
    padding: 10px 14px !important;
}

.o-choices .choices__list--dropdown .choices__item--selectable.is-highlighted,
.o-choices .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: rgba(87, 176, 255, 0.12) !important;
    color: #57b0ff !important;
}

.o-choices .choices__list--dropdown .choices__item--selectable.is-selected {
    color: #57b0ff !important;
    font-weight: 600;
}

.o-choices::after {
    border-color: #64748b transparent transparent !important;
    right: 14px !important;
}

.o-choices.is-open::after {
    border-color: transparent transparent #57b0ff !important;
}

/* ══════════════════════════════════════════
   O-PAGINATION Component
══════════════════════════════════════════ */
.o-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin-top: 20px;
    flex-wrap: wrap;
}

.o-pagination__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: var(--r-sm);
    border: 1px solid var(--c-border);
    background: transparent;
    color: var(--c-text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--tr);
}

.o-pagination__btn:hover {
    border-color: var(--c-primary);
    color: var(--c-primary);
    background: rgba(87, 176, 255, 0.08);
}

.o-pagination__btn.is-active {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: #fff;
    font-weight: 700;
}

.o-pagination__btn:disabled,
.o-pagination__btn.is-disabled {
    opacity: .35;
    pointer-events: none;
}

.o-pagination__btn .material-symbols-outlined {
    font-size: 18px;
}

.o-pagination__ellipsis {
    color: var(--c-text-subtle);
    padding: 0 4px;
    font-size: 13px;
}

.o-pagination__info {
    font-size: 12px;
    color: var(--c-text-subtle);
    margin-top: 8px;
    text-align: center;
}

/* ══════════════════════════════════════════
   AVATAR FRAME — kişiselleştirme paneli (avatar_frame)
   Tek kaynak: data-avatar-frame özniteliği taşıyan her avatar
   (img veya sarmalayıcı) site genelinde aynı çerçeveyi alır.
   box-shadow kullanıldığı için layout kaymaz ve öğenin kendi
   border-radius'ünü takip eder (yuvarlak/kare avatar fark etmez).
══════════════════════════════════════════ */
/* none/boş değer için kural yok: öğe kendi varsayılan stilini (ör. floating
   avatarın mavi halkası) korur. Yalnızca gerçek çerçeveler box-shadow'u ezer.
   !important: hedef avatarların kendi box-shadow kuralları (ör.
   .floating-header__avatar img, .ph-hero__avatar) daha yüksek özgüllükte
   olduğu için çerçevenin her zaman uygulanmasını garantiler. */
[data-avatar-frame] { --avatar-ring: 2px; }
[data-avatar-frame="gold"]     { box-shadow: 0 0 0 var(--avatar-ring) #ffd700, 0 0 12px rgba(255,215,0,.45) !important; }
[data-avatar-frame="silver"]   { box-shadow: 0 0 0 var(--avatar-ring) #c0c0c0, 0 0 10px rgba(192,192,192,.40) !important; }
[data-avatar-frame="bronze"]   { box-shadow: 0 0 0 var(--avatar-ring) #cd7f32, 0 0 10px rgba(205,127,50,.40) !important; }
[data-avatar-frame="gradient"] { box-shadow: 0 0 0 var(--avatar-ring) #57b0ff, 0 0 0 calc(var(--avatar-ring) * 2) #a04bff, 0 0 14px rgba(87,176,255,.45) !important; }
[data-avatar-frame="neon"]     { box-shadow: 0 0 0 var(--avatar-ring) #00ffaa, 0 0 14px rgba(0,255,170,.50) !important; }
[data-avatar-frame="verified"] { box-shadow: 0 0 0 var(--avatar-ring) #1da1f2, 0 0 12px rgba(29,161,242,.48) !important; }

/* Büyük hero avatarında daha kalın halka */
.ph-hero__avatar[data-avatar-frame] { --avatar-ring: 3px; }

/* ══════════════════════════════════════════
   EMPTY STATE — genel boş durum bileşeni
   profile.css'ten taşındı; global yüklendiği için profil dışı
   sayfalarda da (ör. satıcı profili /satici/*) çalışır.
══════════════════════════════════════════ */
.empty-state {
    min-height: 164px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 32px 20px;
    border: 1px dashed rgba(255, 255, 255, .12);
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, .58);
    text-align: center;
}

.empty-state--compact {
    min-height: 112px;
    padding: 24px 16px;
}

.empty-state--inline {
    min-height: 0;
    padding: 32px 0;
    border: 0;
    border-radius: 0;
}

.empty-state__icon {
    width: 48px;
    height: 48px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .42);
    font-size: 24px;
    flex-shrink: 0;
}

.empty-state--inline .empty-state__icon {
    width: auto;
    height: auto;
    display: block;
    margin-bottom: 12px;
    background: transparent;
    font-size: 40px;
    opacity: .42;
}

.empty-state__title {
    margin: 0;
    max-width: 420px;
    color: rgba(255, 255, 255, .72);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.45;
}

.empty-state__desc {
    margin: 0;
    max-width: 520px;
    color: rgba(255, 255, 255, .45);
    font-size: 13px;
    line-height: 1.55;
}

.empty-state__actions {
    display: inline-flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

/* ══════════════════════════════════════════
   ALERT COMPONENT — .alert-o
   Sayfa içi bilgilendirme / uyarı kutuları
══════════════════════════════════════════ */
.alert-o {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--r-lg);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text-muted);
    font-size: 13px;
    line-height: 1.55;
    overflow: hidden;
}

.alert-o__icon {
    flex-shrink: 0;
    font-size: 20px;
    color: var(--alert-c, var(--c-primary));
}

.alert-o__content {
    flex: 1;
    min-width: 0;
}

.alert-o__title {
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 2px;
}

.alert-o__text {
    margin: 0;
    color: var(--c-text-muted);
}

.alert-o__text a {
    color: var(--alert-c, var(--c-primary));
    text-decoration: none;
    font-weight: 600;
}

.alert-o__text a:hover {
    text-decoration: underline;
}

.alert-o__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.alert-o__close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--c-text-subtle);
    cursor: pointer;
    padding: 2px;
    margin: -2px -4px -2px 0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background var(--tr), color var(--tr);
}

.alert-o__close .material-symbols-outlined {
    font-size: 18px;
}

.alert-o__close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

/* ── Kapanma animasyonu (JS ile) ── */
.alert-o.is-hiding {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease, max-height 0.25s ease,
        margin 0.25s ease, padding 0.25s ease;
    max-height: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0;
    padding-bottom: 0;
    border-width: 0;
}

/* ── Kompakt varyant ── */
.alert-o--sm {
    padding: 9px 12px;
    gap: 9px;
    font-size: 12px;
}

.alert-o--sm .alert-o__icon {
    font-size: 17px;
}

/* ── Renk Varyasyonları (hafif gradient) ── */
.alert-o--primary {
    --alert-c: var(--c-primary);
    background: linear-gradient(135deg, rgba(87, 176, 255, 0.16), rgba(87, 176, 255, 0.04));
    border-color: rgba(87, 176, 255, 0.24);
}

.alert-o--success {
    --alert-c: var(--c-success);
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.16), rgba(52, 211, 153, 0.04));
    border-color: rgba(52, 211, 153, 0.24);
}

.alert-o--danger {
    --alert-c: var(--c-danger);
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.16), rgba(248, 113, 113, 0.04));
    border-color: rgba(248, 113, 113, 0.24);
}

.alert-o--warning {
    --alert-c: var(--c-warning);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.16), rgba(251, 191, 36, 0.04));
    border-color: rgba(251, 191, 36, 0.24);
}

.alert-o--gold {
    --alert-c: var(--c-gold);
    background: linear-gradient(135deg, rgba(255, 209, 102, 0.16), rgba(255, 209, 102, 0.04));
    border-color: rgba(255, 209, 102, 0.24);
}

/* Nötr (renksiz) varyant */
.alert-o--neutral {
    --alert-c: var(--c-text-subtle);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01));
    border-color: var(--c-border);
}

/* ══════════════════════════════════════════
   CONFIRM DIALOG — ek ikon/renk varyantları (son-tasarim ile senkron)
══════════════════════════════════════════ */
/* ── Ek ikon tipleri (success / gold) ── */
.confirm-dialog__icon--success {
    background: rgba(52, 211, 153, 0.12);
    color: var(--c-success);
}

.confirm-dialog__icon--gold {
    background: rgba(255, 209, 102, 0.12);
    color: var(--c-gold);
}

/* ── Hafif renkli gradient dialog gövdeleri (opsiyonel: dialogClass) ── */
.confirm-dialog--primary {
    background: linear-gradient(160deg, rgba(87, 176, 255, 0.16), rgba(87, 176, 255, 0.02) 70%), var(--c-surface);
    border-color: rgba(87, 176, 255, 0.24);
}

.confirm-dialog--success {
    background: linear-gradient(160deg, rgba(52, 211, 153, 0.16), rgba(52, 211, 153, 0.02) 70%), var(--c-surface);
    border-color: rgba(52, 211, 153, 0.24);
}

.confirm-dialog--danger {
    background: linear-gradient(160deg, rgba(248, 113, 113, 0.16), rgba(248, 113, 113, 0.02) 70%), var(--c-surface);
    border-color: rgba(248, 113, 113, 0.24);
}

.confirm-dialog--warning {
    background: linear-gradient(160deg, rgba(251, 191, 36, 0.16), rgba(251, 191, 36, 0.02) 70%), var(--c-surface);
    border-color: rgba(251, 191, 36, 0.24);
}

.confirm-dialog--gold {
    background: linear-gradient(160deg, rgba(255, 209, 102, 0.16), rgba(255, 209, 102, 0.02) 70%), var(--c-surface);
    border-color: rgba(255, 209, 102, 0.24);
}

/* ══════════════════════════════════════════
   INTL PHONE INPUT — .intl-phone
   Bayraklı (SVG) ülke seçici + ülkeye özel maske
══════════════════════════════════════════ */
.intl-phone {
    position: relative;
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 360px;
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    transition: border-color .2s;
}

.intl-phone:focus-within {
    border-color: rgba(87, 176, 255, .6);
}

/* ── Sol taraftaki bayrak + alan kodu butonu ── */
.intl-phone__toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 0 10px 0 12px;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--c-border);
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px 0 0 8px;
    transition: background .15s;
}

.intl-phone__toggle:hover {
    background: rgba(255, 255, 255, .04);
}

.intl-phone__flag {
    width: 22px;
    height: 22px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
    display: block;
}

.intl-phone__dial {
    font-size: 14px;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.intl-phone__caret {
    font-size: 18px;
    color: var(--c-text-subtle);
    transition: transform .18s;
}

.intl-phone.is-open .intl-phone__caret {
    transform: rotate(180deg);
}

/* ── Numara inputu ── */
.intl-phone__input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: none;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 14px;
    letter-spacing: .3px;
    padding: 11px 14px;
    font-variant-numeric: tabular-nums;
}

.intl-phone__input::placeholder {
    color: #64748b;
    letter-spacing: normal;
}

/* ── Açılır ülke listesi ── */
.intl-phone__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 50;
    width: 100%;
    min-width: 280px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
    overflow: hidden;
}

.intl-phone__dropdown[hidden] {
    display: none;
}

.intl-phone__search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--c-border);
}

.intl-phone__search-wrap .material-symbols-outlined {
    font-size: 18px;
    color: var(--c-text-subtle);
}

.intl-phone__search {
    flex: 1;
    background: transparent;
    border: 0;
    outline: none;
    color: #fff;
    font-family: "Inter", sans-serif;
    font-size: 13px;
}

.intl-phone__search::placeholder {
    color: #64748b;
}

.intl-phone__list {
    list-style: none;
    margin: 0;
    padding: 6px;
    max-height: 260px;
    overflow-y: auto;
}

.intl-phone__list::-webkit-scrollbar {
    width: 8px;
}

.intl-phone__list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .12);
    border-radius: 8px;
}

.intl-phone__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--r-sm);
    cursor: pointer;
    transition: background .12s;
}

.intl-phone__item[hidden] {
    display: none;
}

.intl-phone__item:hover {
    background: rgba(255, 255, 255, .05);
}

.intl-phone__item.is-active {
    background: rgba(87, 176, 255, .14);
}

.intl-phone__opt-flag {
    width: 24px;
    height: 24px;
    object-fit: cover;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
    flex-shrink: 0;
}

.intl-phone__opt-name {
    flex: 1;
    font-size: 13px;
    color: var(--c-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.intl-phone__opt-dial {
    font-size: 13px;
    color: var(--c-text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

.intl-phone__empty {
    padding: 18px 12px;
    text-align: center;
    font-size: 13px;
    color: var(--c-text-subtle);
}

.intl-phone__empty[hidden] {
    display: none;
}

/* ══════════════════════════════════════════
   TOAST NOTIFICATION — .toast-o
   Köşede beliren, otomatik kapanan bildirimler
══════════════════════════════════════════ */
.toast-o-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 360px;
    max-width: calc(100vw - 40px);
    pointer-events: none;
}

.toast-o-container--bottom {
    top: auto;
    bottom: 20px;
}

.toast-o-container--left {
    right: auto;
    left: 20px;
}

.toast-o {
    position: relative;
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--r-lg);
    border: 1px solid var(--c-border);
    background: var(--c-surface);
    color: var(--c-text-muted);
    font-size: 13px;
    line-height: 1.5;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    opacity: 0;
    transform: translateX(120%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

.toast-o-container--left .toast-o {
    transform: translateX(-120%);
}

.toast-o.is-show {
    opacity: 1;
    transform: translateX(0);
}

.toast-o.is-hide {
    opacity: 0;
    transform: translateX(120%);
}

.toast-o-container--left .toast-o.is-hide {
    transform: translateX(-120%);
}

.toast-o__icon {
    flex-shrink: 0;
    font-size: 20px;
    color: var(--toast-c, var(--c-primary));
}

.toast-o__content {
    flex: 1;
    min-width: 0;
}

.toast-o__title {
    color: #fff;
    font-weight: 600;
    margin: 0 0 2px;
}

.toast-o__text {
    margin: 0;
    color: var(--c-text-muted);
}

.toast-o__close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: var(--c-text-subtle);
    cursor: pointer;
    padding: 2px;
    margin: -2px -4px -2px 0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: background var(--tr), color var(--tr);
}

.toast-o__close .material-symbols-outlined {
    font-size: 18px;
}

.toast-o__close:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}

/* İlerleme çubuğu (otomatik kapanma süresi) */
.toast-o__progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    transform-origin: left;
    transform: scaleX(1);
    background: var(--toast-c, var(--c-primary));
    opacity: 0.55;
}

/* ── Toast Renk Varyasyonları (yüzey üzerine hafif gradient) ── */
.toast-o--primary {
    --toast-c: var(--c-primary);
    background: linear-gradient(135deg, rgba(87, 176, 255, 0.13), rgba(87, 176, 255, 0)) , var(--c-surface);
}

.toast-o--success {
    --toast-c: var(--c-success);
    background: linear-gradient(135deg, rgba(52, 211, 153, 0.13), rgba(52, 211, 153, 0)) , var(--c-surface);
}

.toast-o--danger {
    --toast-c: var(--c-danger);
    background: linear-gradient(135deg, rgba(248, 113, 113, 0.13), rgba(248, 113, 113, 0)) , var(--c-surface);
}

.toast-o--warning {
    --toast-c: var(--c-warning);
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.13), rgba(251, 191, 36, 0)) , var(--c-surface);
}

.toast-o--gold {
    --toast-c: var(--c-gold);
    background: linear-gradient(135deg, rgba(255, 209, 102, 0.13), rgba(255, 209, 102, 0)) , var(--c-surface);
}