/* ==========================================================================
   Site extras on top of Bootstrap 5.3 (theme.css holds the shared brand colors)
   ========================================================================== */
:root { --pn-tabbar-h: 66px; --pn-safe-bottom: env(safe-area-inset-bottom, 0px); }
html { -webkit-tap-highlight-color: transparent; }
.site-navbar {
    padding-top: calc(env(safe-area-inset-top, 0px) + .5rem); padding-bottom: .5rem;
    background: rgba(var(--bs-body-bg-rgb), .9); border-bottom: 1px solid var(--bs-border-color); backdrop-filter: saturate(180%) blur(10px);
}
.site-navbar .navbar-brand { font-size: 1.05rem; }
.balance-pill { white-space: nowrap; font-weight: 600; }
body.has-tabbar .page-body { padding-bottom: calc(var(--pn-tabbar-h) + var(--pn-safe-bottom) + 12px); }
@media (pointer: coarse) { .form-control, .form-select { font-size: 16px; } } /* no iOS zoom on focus (phones only) */

/* ---------- Bottom tab bar (all screen sizes: the user side uses the mobile layout everywhere) ---------- */
.tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1030;
    height: calc(var(--pn-tabbar-h) + var(--pn-safe-bottom)); padding-bottom: var(--pn-safe-bottom);
    background: var(--bs-body-bg); border-top: 1px solid var(--bs-border-color);
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: center;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, .04);
}
.tabbar a, .tabbar button {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; height: 100%;
    color: var(--bs-secondary-color); text-decoration: none; font-size: .7rem; font-weight: 500; background: none; border: 0;
}
.tabbar i { font-size: 1.4rem; line-height: 1; }
.tabbar a.active { color: var(--bs-primary); }


/* ---------- Photo count chip (photo managers) ---------- */
.photo-count { position: absolute; right: 8px; bottom: 8px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: rgba(15, 16, 32, .65); color: #fff; font-size: .75rem; font-weight: 600; }

/* ---------- Deposit ---------- */
.amount-input { position: relative; }
.amount-input input { font-size: 2rem !important; font-weight: 700; text-align: center; padding: .9rem 3rem .9rem 1rem; height: auto; }
.amount-input .suffix { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-size: 1.4rem; font-weight: 700; color: var(--bs-secondary-color); }
.coin { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: .7rem; font-weight: 700; }
.coin-USDT { background: #26a17b; }
.coin-TRX { background: #eb0029; }
/* Number fields without up/down arrows (age / height / weight): more room for the value on phones */
.no-spin { -moz-appearance: textfield; appearance: textfield; }
.no-spin::-webkit-outer-spin-button, .no-spin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ---------- Payment screen ---------- */
.pay-amount { font-size: 1.75rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.15; }
.pay-countdown { font-variant-numeric: tabular-nums; font-weight: 700; }
.pay-progress { height: 4px; border-radius: 0; background: var(--bs-border-color); }
.pay-progress .progress-bar { transition: width 1s linear; }
.pay-urgent .pay-countdown { color: var(--bs-danger); }
.qr-box { background: #fff; padding: 8px; border-radius: var(--bs-border-radius-lg); display: inline-block; border: 1px solid var(--bs-border-color); }
.qr-box img { width: 168px; height: 168px; display: block; }
.copy-row { display: flex; align-items: center; gap: 8px; padding: 10px 10px 10px 14px; border-radius: var(--bs-border-radius); background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); }
.copy-row .copy-value { flex: 1; min-width: 0; word-break: break-all; }


/* ---------- Panel: "Arkadaşını davet et" hero ---------- */
.invite-hero { position: relative; overflow: hidden; padding: 16px; border-radius: var(--bs-border-radius-lg); background: var(--pn-gradient); color: #fff; }
.invite-hero::after { content: ""; position: absolute; width: 180px; height: 180px; right: -60px; top: -80px; border-radius: 50%; background: radial-gradient(circle, rgba(251, 191, 36, .45), transparent 70%); pointer-events: none; }
.invite-hero > * { position: relative; z-index: 1; }
.invite-hero-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .18); font-size: 1.4rem; }
.invite-hero-title { font-weight: 700; font-size: 1rem; line-height: 1.3; }
.invite-hero-amounts { font-size: .78rem; font-weight: 600; color: rgba(255, 255, 255, .95); margin-top: 1px; }
.invite-hero-sub { color: rgba(255, 255, 255, .85); font-size: .8rem; text-decoration: none; }
.invite-hero-sub:hover { color: #fff; }
.invite-hero-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.invite-hero-actions .btn { color: var(--bs-primary); font-weight: 600; border: 0; }

/* ---------- İlanlarım: compact rows (small 3:4 cover + details) ---------- */
.ad-row { padding: 12px 14px; }
.ad-row[hidden], .ad-rows-empty[hidden] { display: none !important; }
.ad-thumb { position: relative; flex-shrink: 0; width: 72px; aspect-ratio: 3 / 4; border-radius: var(--bs-border-radius); overflow: hidden; background: var(--pn-gradient); display: block; }
.ad-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-thumb-empty { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .75); font-size: 1.4rem; }
.ad-thumb-count { position: absolute; left: 4px; bottom: 4px; display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border-radius: 999px; background: rgba(15, 16, 32, .65); color: #fff; font-size: .65rem; font-weight: 600; }
.ad-row-title { font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; }
.ad-row-chips .badge { font-size: .68rem; padding: 2px 6px; }
.ad-row-meta { font-size: .75rem; color: var(--bs-secondary-color); }
.ad-row-actions { display: flex; gap: 6px; margin-top: 10px; }
.ad-row-actions .btn:not(.btn-icon) { flex: 1 1 0; }
.ad-filter .btn.active, .seg-tabs .btn.active { background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); border-color: rgba(var(--bs-primary-rgb), .35); }

/* ---------- İlan fotoğrafları (kullanıcı paneli): 3:4 kutular, sürükleyerek sıralama ---------- */
.photo-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: photo; }
.photo-list:empty { display: none; }
.photo-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; counter-increment: photo; }
.photo-thumb {
    position: relative; display: block; width: 100%; aspect-ratio: 3 / 4; border-radius: var(--bs-border-radius-lg); overflow: hidden;
    background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color);
    cursor: grab; touch-action: manipulation; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.photo-badge {
    position: absolute; left: 6px; top: 6px; display: none; align-items: center; gap: 4px;
    font-size: .72rem; font-weight: 600; padding: 3px 8px; border-radius: 999px; background: var(--bs-primary); color: #fff;
}
.photo-card:first-child .photo-badge { display: inline-flex; }
.photo-no {
    position: absolute; right: 6px; top: 6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px;
    display: inline-grid; place-items: center; font-size: .72rem; font-weight: 600; background: rgba(15, 16, 32, .6); color: #fff;
}
.photo-no::before { content: counter(photo); }
.photo-drag {
    position: absolute; left: 50%; bottom: 6px; transform: translateX(-50%); padding: 2px 10px; border-radius: 999px;
    background: rgba(15, 16, 32, .55); color: #fff; font-size: 1rem; line-height: 1.2;
}
.photo-list:has(.photo-card:only-child) .photo-drag { display: none; }
.photo-ghost .photo-thumb { opacity: .35; border: 2px dashed var(--bs-primary); }
.photo-chosen .photo-thumb { box-shadow: 0 12px 28px rgba(var(--bs-primary-rgb), .35); cursor: grabbing; }
.photo-name { font-size: .72rem; color: var(--bs-secondary-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.photo-sort-status { font-size: .82rem; font-weight: 600; color: var(--bs-success); margin: 8px 0 0; min-height: 1.2em; }
.photo-sort-status:empty { display: none; }
.photo-sort-status.is-error { color: var(--bs-danger); }
.photo-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.photo-actions form { margin: 0; min-width: 0; }
.photo-actions .btn { width: 100%; height: 34px; padding: 0 6px; gap: 4px; font-size: .8rem; white-space: nowrap; }
.photo-card:first-child .photo-btn-cover { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; pointer-events: none; }

/* ---------- Admin photo manager: photos + "Fotoğraf ekle" box in one grid, drop files anywhere ---------- */
.photo-manager { position: relative; }
.photo-add[hidden] { display: none; }
.photo-add-btn {
    width: 100%; aspect-ratio: 3 / 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    border: 2px dashed var(--bs-border-color); border-radius: var(--bs-border-radius-lg); background: var(--bs-tertiary-bg);
    color: var(--bs-secondary-color); padding: 8px; text-align: center; transition: border-color .15s, background .15s, color .15s;
}
.photo-add-btn:hover, .photo-add-btn:focus-visible { border-color: var(--bs-primary); color: var(--bs-primary); background: rgba(var(--bs-primary-rgb), .05); outline: 0; }
.photo-add-icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-size: 1.5rem; background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); }
.photo-add-title { font-weight: 600; color: var(--bs-body-color); }
.photo-add-hint { font-size: .75rem; }
.photo-help { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 12px; font-size: .78rem; color: var(--bs-secondary-color); }
.photo-pending, .photo-new { min-width: 0; }
.photo-pending .photo-thumb { cursor: default; }
.photo-pending .photo-thumb::after { content: ""; position: absolute; inset: 0; background: rgba(15, 16, 32, .45); }
.photo-pending-label { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; padding: 10px; text-align: center; color: #fff; font-size: .8rem; font-weight: 600; }
.photo-progress { position: absolute; left: 12px; right: 12px; bottom: 14px; z-index: 1; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.photo-progress > span { display: block; width: 0; height: 100%; border-radius: inherit; background: #fff; transition: width .2s; }
.photo-pending.is-error .photo-thumb::after { background: rgba(214, 57, 57, .7); }
.photo-remove {
    position: absolute; right: 6px; top: 6px; z-index: 2; width: 30px; height: 30px; border: 0; border-radius: 50%;
    display: grid; place-items: center; background: rgba(15, 16, 32, .7); color: #fff; font-size: 1rem;
}
.photo-remove:hover { background: var(--bs-danger); }
.photo-new .photo-thumb { cursor: default; }
.photo-new-tag { position: absolute; left: 6px; right: 6px; bottom: 6px; padding: 3px 8px; border-radius: 999px; background: rgba(15, 16, 32, .6); color: #fff; font-size: .7rem; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.photo-card.is-busy { opacity: .55; pointer-events: none; }
.photo-card.is-removing { opacity: 0; transform: scale(.92); transition: opacity .18s, transform .18s; }
.photo-drop-overlay {
    position: absolute; inset: 0; z-index: 5; display: none; place-items: center; pointer-events: none;
    border: 2px dashed var(--bs-primary); border-radius: inherit; background: rgba(var(--bs-primary-rgb), .08); color: var(--bs-primary); font-weight: 600;
}
.photo-drop-overlay > div { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 24px; border-radius: var(--bs-border-radius-lg); background: var(--bs-body-bg); box-shadow: 0 8px 24px rgba(0, 0, 0, .12); }
.photo-drop-overlay i { font-size: 2.2rem; }
.photo-manager.is-dragover .photo-drop-overlay { display: grid; }


/* Compact boxes: 3 per row on phones, more on wider screens; icon-only buttons so small boxes stay tidy */
.photo-card { gap: 6px; }
.photo-actions { gap: 4px; }
.photo-actions .btn { height: 30px; padding: 0; font-size: 1rem; }
.photo-actions .btn span { display: none; }
.photo-badge { left: 4px; top: 4px; padding: 2px 6px; font-size: .62rem; }
.photo-no { right: 4px; top: 4px; min-width: 18px; height: 18px; padding: 0 5px; font-size: .62rem; }
.photo-drag { bottom: 4px; padding: 0 8px; font-size: .85rem; }
.photo-add-btn { gap: 4px; padding: 6px; }
.photo-add-icon { width: 36px; height: 36px; font-size: 1.15rem; }
.photo-add-title { font-size: .78rem; line-height: 1.2; }
.photo-add-hint { display: none; }
.photo-remove { right: 4px; top: 4px; width: 26px; height: 26px; font-size: .9rem; }
.photo-new-tag { left: 4px; right: 4px; bottom: 4px; padding: 2px 4px; font-size: .58rem; }
.photo-pending-label { font-size: .68rem; padding: 6px; }
.photo-progress { left: 8px; right: 8px; bottom: 8px; height: 5px; }
.photo-list { grid-template-columns: repeat(3, 1fr); }
@media (min-width: 576px) { .photo-list { grid-template-columns: repeat(4, 1fr); gap: 10px; } }
@media (min-width: 992px) { .photo-list { grid-template-columns: repeat(6, 1fr); } .photo-add-hint { display: block; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }


/* ---------- App feel (users are on phones) ---------- */
body { overscroll-behavior-y: none; }
a, button, .btn { touch-action: manipulation; }
.tabbar, .site-navbar, .app-sheet .list-group-item { -webkit-user-select: none; user-select: none; }
/* Back button left of the title on sub pages */
.app-back { display: inline-grid; place-items: center; width: 36px; height: 36px; margin: 0 2px 0 -8px; border-radius: 50%; color: var(--bs-body-color); font-size: 1.5rem; }
.app-back:active { background: var(--bs-tertiary-bg); }
/* Bottom tabs: the active tab gets a soft pill behind its icon */
.tabbar .tab-ic { display: grid; place-items: center; width: 52px; height: 28px; border-radius: 8px; transition: background .2s; }
.tabbar a.active .tab-ic { background: rgba(var(--bs-primary-rgb), .12); }
.tabbar a, .tabbar button { transition: transform .1s; }
.tabbar a:active, .tabbar button:active { transform: scale(.94); }
/* Pressed state on buttons and list rows, like a native app */
.btn:active { transform: scale(.98); }
.list-group-item-action:active { background: var(--bs-tertiary-bg); }
/* Menu sheet: rounded top, drag handle, safe area at the bottom */
.app-sheet { border-top-left-radius: 14px; border-top-right-radius: 14px; border: 0 !important; padding-bottom: env(safe-area-inset-bottom, 0px); box-shadow: 0 -10px 40px rgba(0, 0, 0, .15); }
.app-sheet .sheet-handle { width: 40px; height: 5px; border-radius: 999px; background: var(--bs-border-color); margin: 8px auto 0; }
.app-sheet .offcanvas-header { padding-top: .75rem; }
.app-sheet .list-group-item { padding: .9rem 1rem; border-left: 0; border-right: 0; }

/* ==========================================================================
   Mobile app type scale (user side only; everyone uses a phone)
   Light and compact: body 14 · secondary 12-13 · title 18 · nav title 16 · tabs 11
   Weights: 400 text, 500 emphasis, 600 only for titles. Tap targets 42 / 36px.
   ========================================================================== */
:root { --bs-body-font-size: .875rem; --bs-body-line-height: 1.45; }
b, strong, .fw-bold { font-weight: 500 !important; }
.fw-semibold { font-weight: 500 !important; }
.small, small, .text-secondary.small { font-size: .78rem; }

/* Top bar */
.site-navbar .navbar-brand { font-size: 1rem; font-weight: 600 !important; letter-spacing: -.01em; }
.balance-pill { font-size: .78rem; font-weight: 500; height: 30px; padding: 0 .7rem; border-radius: 6px; }
.balance-pill .fw-normal { opacity: .8; }

/* Page titles */
.page-title { font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; }
.page-title + .text-secondary, .page-header .text-secondary { font-size: .8125rem; margin-top: 1px; }
.card-title, .card-header .card-title { font-size: .9375rem; font-weight: 600; }
.card-header { padding: .75rem 1rem; }
.card-body { padding: 1rem; }
h1, .h1 { font-size: 1.375rem; font-weight: 600; } h2, .h2 { font-size: 1.125rem; font-weight: 600; } h3, .h3 { font-size: 1rem; font-weight: 600; }

/* Buttons: big enough for a thumb, not heavy */
.btn { --bs-btn-font-size: .875rem; --bs-btn-font-weight: 500; --bs-btn-padding-y: .45rem; --bs-btn-padding-x: .9rem; min-height: 42px; border-radius: 8px; }
.btn-sm { --bs-btn-font-size: .8125rem; --bs-btn-padding-y: .3rem; --bs-btn-padding-x: .7rem; min-height: 36px; border-radius: 6px; }
.btn-lg { --bs-btn-font-size: .9375rem; min-height: 48px; border-radius: 10px; }
.btn-icon { min-width: 42px; } .btn-icon.btn-sm { min-width: 36px; }
.photo-actions .btn { min-height: 0; border-radius: 6px; }
.photo-add-btn, .photo-remove { min-height: 0; }
.btn-close { min-height: 0; }
.balance-pill.btn { min-height: 0; }

/* Segmented controls (ad filter, Ödemeler / Bakiye) */
.ad-filter .btn, .seg-tabs .btn { min-height: 38px; font-size: .8125rem; font-weight: 500; border-radius: 0; }
.ad-filter .btn:first-child, .seg-tabs .btn:first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.ad-filter .btn:last-child, .seg-tabs .btn:last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }

/* Forms */
.form-label { font-size: .8125rem; font-weight: 500; margin-bottom: .3rem; }
.form-control, .form-select { font-size: 16px; min-height: 44px; border-radius: 8px; }
textarea.form-control { min-height: 90px; }
.input-group > .form-control, .input-group > .input-group-text { min-height: 44px; }
.input-group-text { font-size: .8125rem; }
.input-group > :first-child { border-top-left-radius: 8px; border-bottom-left-radius: 8px; }
.input-group > :last-child { border-top-right-radius: 8px; border-bottom-right-radius: 8px; }
.form-text, .form-hint, .invalid-feedback { font-size: .75rem; }
.form-check-label { font-size: .875rem; }

/* Cards, lists, badges, alerts */
.card { --bs-card-border-radius: 10px; --bs-card-inner-border-radius: 9px; }
.ad-rows > .ad-row:last-of-type { border-bottom-width: 0; }
.list-group-item { font-size: .875rem; }
.badge { font-size: .6875rem; font-weight: 500; padding: .3em .55em; border-radius: 4px; }
.alert { font-size: .8125rem; border-radius: 8px; padding: .75rem .9rem; }

/* İlan rows */
.ad-row { padding: 12px 14px; }
.ad-row-title { font-size: .9375rem; font-weight: 500; }
.ad-row-meta { font-size: .75rem; }
.ad-row-chips .badge { font-size: .6875rem; padding: 2px 7px; }
.ad-row-actions { gap: 8px; margin-top: 10px; }

/* Bottom tabs */
.tabbar a, .tabbar button { font-size: .6875rem; font-weight: 400; }
.tabbar a.active { font-weight: 500; }
.tabbar i { font-size: 1.375rem; }

/* Menu sheet rows */
.app-sheet .list-group-item { font-size: .9375rem; min-height: 50px; display: flex; align-items: center; }
.app-sheet .list-group-item .icon { font-size: 1.25rem; }
.app-sheet .fw-bold { font-weight: 600 !important; }

/* Big numbers (payment amount, deposit input) a bit lighter too */
.pay-amount { font-size: 1.5rem; font-weight: 600; }
.amount-input input { font-weight: 600; }
.coin { font-weight: 600; }

/* Calmer corners overall: Bootstrap radius tokens for anything else (thumbs, hero, copy row, option cards) */
:root { --bs-border-radius: 6px; --bs-border-radius-sm: 4px; --bs-border-radius-lg: 8px; --bs-border-radius-xl: 10px; }
.ad-thumb { border-radius: 6px; }

/* Header balance: plain text in the body color (black; white in dark mode), no background */
.balance-pill, .balance-pill:hover, .balance-pill:focus { color: var(--bs-body-color); background: none; border: 0; padding: 0; height: auto; text-decoration: none !important; font-size: .875rem; font-weight: 600; white-space: nowrap; }
.balance-pill .fw-normal { font-weight: 400 !important; color: var(--bs-secondary-color); }
.balance-pill:active { opacity: .6; }

/* ---------- Form buttons at the end of the page (ad edit / new), not sticky ---------- */
.form-actions { display: flex; align-items: center; gap: 8px; margin-top: 16px; }
.form-actions .btn { min-height: 40px; font-size: .875rem; }
.sticky-balance { display: flex; flex-direction: column; line-height: 1.2; font-weight: 600; white-space: nowrap; }
.sticky-balance .subheader { font-size: .65rem; }

/* ---------- Ad card: calm empty photo, time bar colors ---------- */
.ad-thumb.is-empty { background: var(--bs-tertiary-bg); border: 1px dashed var(--bs-border-color); }
.ad-thumb.is-empty .ad-thumb-empty { color: var(--bs-secondary-color); flex-direction: column; gap: 2px; display: flex; align-items: center; justify-content: center; }
.ad-thumb.is-empty .ad-thumb-empty i { font-size: 1.5rem; }
.ad-thumb.is-empty .ad-thumb-empty span { font-size: .62rem; font-weight: 500; text-align: center; line-height: 1.15; padding: 0 4px; }
.ad-time { background: var(--bs-secondary-bg); }
.ad-time.is-ending { --bs-progress-bar-bg: #f59f00; }
.ad-time.is-expired { --bs-progress-bar-bg: var(--bs-danger); opacity: .35; }

/* ---------- Panel: waiting payment row ---------- */
.pending-pay {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; text-decoration: none !important;
    background: var(--bs-body-bg); border: 1px solid rgba(245, 159, 0, .45); box-shadow: inset 3px 0 0 #f59f00; color: var(--bs-body-color);
}
.pending-pay:active { background: var(--bs-tertiary-bg); }
.pending-pay-icon { width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; background: rgba(245, 159, 0, .14); color: #d48a00; font-size: 1.1rem; }
.pending-pay-title { display: block; font-weight: 500; line-height: 1.25; }
.pending-pay-sub { display: block; font-size: .75rem; color: var(--bs-secondary-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pending-pay-time { font-variant-numeric: tabular-nums; font-weight: 600; font-size: .9rem; color: #c27c00; }
.pending-pay-time.is-over { color: var(--bs-danger); font-weight: 500; font-size: .75rem; }
.pending-pay-go { display: inline-flex; align-items: center; gap: 2px; padding: 6px 10px; border-radius: 6px; background: var(--bs-primary); color: #fff; font-size: .8125rem; font-weight: 500; white-space: nowrap; }

/* ---------- Top bar title (page name) and the small intro line under it ---------- */
.app-title { margin: 0 auto 0 0; min-width: 0; font-size: 1rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-navbar .container-fluid { flex-wrap: nowrap; gap: 8px; }
.page-sub { font-size: .8125rem; color: var(--bs-secondary-color); }
.page-body { padding-top: .75rem; }

/* ---------- Bottom toasts (flash messages) ---------- */
.toast-stack {
    position: fixed; left: 12px; right: 12px; z-index: 1090; pointer-events: none;
    bottom: calc(12px + var(--pn-safe-bottom)); display: flex; flex-direction: column; gap: 8px; align-items: center;
}
body.has-tabbar .toast-stack { bottom: calc(var(--pn-tabbar-h) + var(--pn-safe-bottom) + 10px); }
.app-toast.alert {
    pointer-events: auto; width: 100%; max-width: 480px; margin: 0; display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 10px 12px 14px; border: 0; border-radius: 10px; font-size: .875rem; line-height: 1.4;
    background: #1f2328; color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    animation: toast-in .28s cubic-bezier(.2, .8, .2, 1);
}
[data-bs-theme="dark"] .app-toast.alert { background: #f1f3f5; color: #1f2328; }
.app-toast-icon { font-size: 1.2rem; line-height: 1.15; flex-shrink: 0; }
.app-toast.alert-success .app-toast-icon { color: #40c463; }
.app-toast.alert-danger .app-toast-icon { color: #ff6b6b; }
.app-toast.alert-warning .app-toast-icon { color: #ffb020; }
.app-toast.alert-info .app-toast-icon { color: #74c0fc; }
.app-toast-text { flex: 1; min-width: 0; padding-top: 1px; }
.app-toast-close { flex-shrink: 0; width: 28px; height: 28px; margin: -4px -2px -4px 0; border: 0; border-radius: 6px; background: transparent; color: inherit; opacity: .6; display: grid; place-items: center; }
.app-toast-close:active { opacity: 1; background: rgba(255, 255, 255, .12); }
.app-toast.is-leaving { animation: toast-out .22s ease-in forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toast-out { to { opacity: 0; transform: translateY(12px); } }

/* ---------- Loading state on a submitted button (also blocks a second tap) ---------- */
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading > * { visibility: hidden; }
.btn.is-loading::after {
    content: ""; position: absolute; left: 50%; top: 50%; width: 1.1rem; height: 1.1rem; margin: -.55rem 0 0 -.55rem;
    border: 2px solid currentColor; border-color: var(--bs-btn-color, #fff); border-right-color: transparent; border-radius: 50%;
    animation: btn-spin .6s linear infinite;
}
.btn-primary.is-loading::after { border-color: #fff; border-right-color: transparent; }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---------- Top bar: same height on every page (title, brand or back button never change it) ---------- */
:root { --pn-header-h: 52px; }
.site-navbar { padding: env(safe-area-inset-top, 0px) 0 0 !important; min-height: 0; }
.site-navbar > .container-fluid { height: var(--pn-header-h); flex-wrap: nowrap; align-items: center; }
.site-navbar .navbar-brand, .site-navbar .app-title { padding: 0; margin-top: 0; margin-bottom: 0; line-height: 1.2; }
.site-navbar .app-back { flex-shrink: 0; }
.site-navbar .navbar-nav { flex-shrink: 0; }
.site-navbar .navbar-nav .btn { min-height: 36px; }

/* ---------- Header balance: label over amount + a small "+" (top up) ---------- */
.balance-pill { display: inline-flex !important; align-items: center; gap: 8px; color: var(--bs-body-color) !important; }
.balance-text { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; }
.balance-label { font-size: .625rem; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--bs-secondary-color); }
.balance-amount { font-size: .9375rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.balance-add { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--bs-primary); color: #fff; font-size: .95rem; flex-shrink: 0; }
.balance-pill.is-empty .balance-amount { color: var(--bs-secondary-color); }
.balance-pill:active .balance-add { transform: scale(.92); }

/* ==========================================================================
   Type scale (user side) — one place, 7 sizes, 3 weights. Everything snaps to these.
   11 overline/badges/tabs · 12 meta/help · 13 secondary/labels/small buttons · 14 body/buttons
   16 titles (top bar, cards, rows) · 20 page title/prices · 28 big amounts
   400 text · 500 controls & names · 600 titles & amounts (no 700)
   ========================================================================== */
:root {
    --fs-11: .6875rem; --fs-12: .75rem; --fs-13: .8125rem; --fs-14: .875rem;
    --fs-16: 1rem; --fs-20: 1.25rem; --fs-28: 1.75rem;
    --bs-body-font-size: var(--fs-14);
}
b, strong, .fw-bold, .fw-semibold, .fw-bolder { font-weight: 600 !important; }

/* 11 — overlines, badges, tab labels */
.subheader, .page-pretitle, .datagrid-title, .balance-label, .sticky-balance .subheader { font-size: var(--fs-11) !important; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; }
.badge, .ad-row-chips .badge { font-size: var(--fs-11); font-weight: 500; }
.tabbar a, .tabbar button { font-size: var(--fs-11); }
.ad-thumb.is-empty .ad-thumb-empty span, .coin { font-size: var(--fs-11); }

/* 12 — meta and help text */
.small, small, .text-secondary.small, .ad-row-meta, .form-text, .form-hint, .invalid-feedback, .photo-help, .pending-pay-sub, .help-text { font-size: var(--fs-12) !important; }

/* 13 — secondary lines, labels, segmented controls, small buttons */
.page-sub, .page-header .text-secondary, .form-label, .input-group-text, .ad-filter .btn, .seg-tabs .btn, .btn-sm, .alert, .photo-add-title, .balance-topup { font-size: var(--fs-13) !important; }
.photo-add-title, .balance-topup { font-weight: 500; }
.btn-sm { --bs-btn-font-size: var(--fs-13); }

/* 14 — body text, buttons, list rows */
body, .list-group-item, .form-check-label, .empty-subtitle, .app-toast.alert, .pending-pay-title { font-size: var(--fs-14); }
.btn, .btn-lg, .form-actions .btn { --bs-btn-font-size: var(--fs-14); --bs-btn-font-weight: 500; }

/* 16 — titles: top bar, cards, ad names, empty states, prices in lists */
.app-title, .site-navbar .navbar-brand, .site-navbar .navbar-brand .fw-bold, .card-title, .card-header .card-title, .empty-title, .balance-amount, h3, .h3, h4, .h4 { font-size: var(--fs-16) !important; font-weight: 600 !important; }
.ad-row-title, .invite-hero-title { font-size: var(--fs-16); font-weight: 500; }
.form-control, .form-select { font-size: 16px; } /* 16px also stops iPhone zoom */

/* 20 — page title (greeting), balance on buy pages */
.page-title, h1, .h1, h2, .h2, .amount-input .suffix { font-size: var(--fs-20) !important; font-weight: 600 !important; }
.amount-input .suffix { font-weight: 500 !important; color: var(--bs-secondary-color); }

/* 28 — the money amounts people must read exactly */
.pay-amount, .amount-input input { font-size: var(--fs-28) !important; font-weight: 600 !important; letter-spacing: -.02em; }
.pay-amount .fs-3 { font-size: var(--fs-20) !important; font-weight: 500 !important; }

/* ---------- Page head row (Panel, İlanlarım): one standard ---------- */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; min-height: 36px; }
.page-head .page-title { font-size: var(--fs-16) !important; font-weight: 600 !important; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.page-head .page-sub { margin-top: 1px; }
.page-head .btn { flex-shrink: 0; }

/* Page title + description stacked under the top bar, same size on every page */
.page-title { font-size: var(--fs-16) !important; font-weight: 600 !important; line-height: 1.3; margin: 0; }
.page-sub { margin-top: 2px; }

/* ---------- Header top strip: "Canlı Destek" ---------- */
.site-navbar { flex-direction: column; align-items: stretch; }
.site-navbar.has-top { padding-top: 0 !important; }
.header-top {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    height: calc(30px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px);
    background: #111418; color: #fff !important; font-size: var(--fs-12); font-weight: 500; letter-spacing: .01em; text-decoration: none !important;
}
.header-top .ti { font-size: .95rem; }
.header-top-arrow { opacity: .6; font-size: .8rem !important; margin-left: -2px; }
.header-top-dot { width: 7px; height: 7px; border-radius: 50%; background: #2fb344; box-shadow: 0 0 0 3px rgba(47, 179, 68, .25); }
.header-top:active { background: #000; }
[data-bs-theme="dark"] .header-top { background: #000; }
.site-navbar > .container-fluid { width: 100%; }
/* Support strip colours by channel (white text stays readable on these darker brand tones) */
.header-top.is-whatsapp { background: #128C7E; }
.header-top.is-whatsapp:active { background: #0e7266; }
.header-top.is-telegram { background: #1b8ac4; }
.header-top.is-telegram:active { background: #16719f; }
.header-top.is-whatsapp .header-top-dot, .header-top.is-telegram .header-top-dot { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); }
[data-bs-theme="dark"] .header-top.is-whatsapp { background: #0e7266; }
[data-bs-theme="dark"] .header-top.is-telegram { background: #16719f; }
/* More breathing room in the support strip */
.header-top { height: auto; min-height: 0; padding: calc(9px + env(safe-area-inset-top, 0px)) 16px 9px; gap: 8px; font-size: var(--fs-13); }
.header-top .ti { font-size: 1.05rem; }
/* Support strip: always green, whatever the link is (icon still follows the link) */
.header-top, .header-top.is-whatsapp, .header-top.is-telegram, .header-top.is-other { background: #128C7E; }
.header-top:active { background: #0e7266 !important; }
.header-top .header-top-dot { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .3); }
[data-bs-theme="dark"] .header-top { background: #0e7266 !important; }

/* Header balance, compact: one line "Bakiye 450.00 $" + small "+" */
.balance-pill { gap: 6px; }
.balance-text { flex-direction: row; align-items: baseline; gap: 4px; line-height: 1; }
.balance-label { font-size: var(--fs-12) !important; text-transform: none; letter-spacing: 0; font-weight: 400; }
.balance-amount { font-size: var(--fs-14) !important; font-weight: 600 !important; }
.balance-add { width: 22px; height: 22px; font-size: .8rem; }
.balance-pill { padding: 11px 0 11px 8px !important; margin: -11px 0 !important; } /* bigger tap area, same look */

/* ---------- Menü sheet: profile, balance card, grouped rows ---------- */
.app-sheet { background: var(--pn-page-bg); max-height: 88vh; overflow-y: auto; padding: 0 12px calc(12px + env(safe-area-inset-bottom, 0px)); }
.app-sheet .sheet-handle { margin: 8px auto 4px; }
.sheet-head { display: flex; align-items: center; gap: 12px; padding: 8px 4px 12px; }
.sheet-avatar { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--pn-gradient); color: #fff; font-weight: 600; font-size: var(--fs-16); }
.sheet-name { font-size: var(--fs-16); font-weight: 600; line-height: 1.25; }
.sheet-meta { font-size: var(--fs-12); color: var(--bs-secondary-color); }
.sheet-close { width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--bs-body-bg); color: var(--bs-secondary-color); display: grid; place-items: center; font-size: 1.1rem; box-shadow: var(--pn-shadow); }
.sheet-close:active { background: var(--bs-secondary-bg); }
.sheet-balance { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; margin-bottom: 12px; border-radius: 10px; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); color: var(--bs-body-color) !important; text-decoration: none !important; }
.sheet-balance-label { display: block; font-size: var(--fs-12); color: var(--bs-secondary-color); }
.sheet-balance-amount { display: block; font-size: var(--fs-20); font-weight: 600; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.sheet-group { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.sheet-row { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 10px 12px; color: var(--bs-body-color) !important; text-decoration: none !important; }
.sheet-row + .sheet-row { border-top: 1px solid var(--bs-border-color-translucent); }
.sheet-row:active { background: var(--bs-tertiary-bg); }
.sheet-ic { width: 34px; height: 34px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; font-size: 1.15rem; }
.sheet-ic.is-primary { background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary); }
.sheet-ic.is-green { background: rgba(var(--pn-green-rgb), .14); color: rgb(var(--pn-green-rgb)); }
.sheet-ic.is-orange { background: rgba(var(--pn-orange-rgb), .14); color: rgb(var(--pn-orange-rgb)); }
.sheet-ic.is-blue { background: rgba(var(--pn-blue-rgb), .12); color: rgb(var(--pn-blue-rgb)); }
.sheet-ic.is-teal { background: rgba(18, 140, 126, .14); color: #128C7E; }
.sheet-ic.is-red { background: rgba(var(--pn-red-rgb), .12); color: rgb(var(--pn-red-rgb)); }
.sheet-row-title { display: block; font-size: var(--fs-14); font-weight: 500; line-height: 1.3; }
.sheet-row-sub { display: block; font-size: var(--fs-12); color: var(--bs-secondary-color); line-height: 1.3; }
.sheet-row-arrow { color: var(--bs-secondary-color); opacity: .6; font-size: 1rem; }
.sheet-row.is-danger .sheet-row-title { color: rgb(var(--pn-red-rgb)); }

/* ---------- Hareketler: summary, day groups, rows ---------- */
.tx-summary { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 10px; }
.tx-summary > div { padding: 12px; min-width: 0; }
.tx-summary > div + div { border-left: 1px solid var(--bs-border-color-translucent); }
.tx-summary-label { display: block; font-size: var(--fs-12); color: var(--bs-secondary-color); }
.tx-summary-value { display: block; font-size: var(--fs-14); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-summary-value.is-in, .tx-amount.is-in { color: rgb(var(--pn-green-rgb)); }
.day-header { font-size: var(--fs-12); font-weight: 500; color: var(--bs-secondary-color); margin: 14px 4px 6px; }
.tab-pane > .day-header:first-child { margin-top: 0; }
.tx-group { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 10px; overflow: hidden; }
.tx-row { display: flex; align-items: center; gap: 12px; padding: 12px; min-height: 60px; color: var(--bs-body-color) !important; text-decoration: none !important; }
.tx-row + .tx-row { border-top: 1px solid var(--bs-border-color-translucent); }
a.tx-row:active { background: var(--bs-tertiary-bg); }
.tx-row.is-open { background: rgba(245, 159, 0, .06); box-shadow: inset 3px 0 0 #f59f00; }
.tx-ic, .tx-coin { width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; font-size: 1.1rem; }
.tx-coin { border-radius: 50%; font-size: var(--fs-13) !important; }
.tx-title { font-size: var(--fs-14); font-weight: 500; line-height: 1.3; }
.tx-sub { font-size: var(--fs-12); color: var(--bs-secondary-color); line-height: 1.35; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tx-amount { font-size: var(--fs-14); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tx-countdown { display: block; font-size: var(--fs-13); font-weight: 600; color: #c27c00; font-variant-numeric: tabular-nums; }
.tx-countdown.is-over { color: var(--bs-danger); font-weight: 500; font-size: var(--fs-12); }
.tx-pay { display: inline-flex; align-items: center; gap: 2px; margin-top: 2px; padding: 3px 8px; border-radius: 6px; background: var(--bs-primary); color: #fff; font-size: var(--fs-12); font-weight: 500; }

/* ---------- İlan cards: one card per profile, spaced ---------- */
.ad-rows { display: flex; flex-direction: column; gap: 10px; }
.ad-row { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 10px; box-shadow: var(--pn-shadow); }
.ad-rows > .ad-row:last-of-type { border-bottom-width: 1px; }
.ad-row[data-ending="1"] { border-color: rgba(245, 159, 0, .45); }
.ad-filter .btn { padding-left: .4rem; padding-right: .4rem; gap: 4px; }
.ad-filter .badge { margin-left: 0 !important; }

/* ---------- Panel: sections ---------- */
.section-title { font-size: var(--fs-13); font-weight: 600; color: var(--bs-body-color); margin: 4px 2px 8px; }
.section-link { font-size: var(--fs-12); font-weight: 500; text-decoration: none !important; display: inline-flex; align-items: center; gap: 2px; }
.att-thumb { width: 40px; height: 52px; flex-shrink: 0; border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.att-thumb.is-empty { border: 1px dashed var(--bs-border-color); }
.att-thumb img { width: 100%; height: 100%; object-fit: cover; }
.att-warning { color: #b06f00; } .att-danger { color: var(--bs-danger); } .att-primary { color: var(--bs-primary); }
.tx-more { display: flex; align-items: center; justify-content: center; gap: 2px; padding: 10px; border-top: 1px solid var(--bs-border-color-translucent); font-size: var(--fs-13); font-weight: 500; text-decoration: none !important; }
.all-good { display: flex; align-items: center; gap: 12px; padding: 12px; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 10px; }
.all-good-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--pn-green-rgb), .14); color: rgb(var(--pn-green-rgb)); font-size: 1.2rem; }
/* Getting started */
.steps-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 10px; overflow: hidden; }
.step-row { display: flex; align-items: center; gap: 12px; padding: 12px; }
.step-row + .step-row { border-top: 1px solid var(--bs-border-color-translucent); }
.step-no { width: 28px; height: 28px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-13); font-weight: 600; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.step-row.is-current .step-no { background: var(--bs-primary); color: #fff; }
.step-row.is-done .step-no { background: rgba(var(--pn-green-rgb), .15); color: rgb(var(--pn-green-rgb)); }
.step-title { font-size: var(--fs-14); font-weight: 500; }
.step-row.is-done .step-title { color: var(--bs-secondary-color); text-decoration: line-through; }
.step-sub { font-size: var(--fs-12); color: var(--bs-secondary-color); }
.att-success { color: rgb(var(--pn-green-rgb)); }
.recent-tx > .day-header:first-child { margin-top: 0; }

/* ---------- Bakiye yükle ---------- */
.dep-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 10px; padding: 14px; }
.dep-chips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.dep-chip { height: 36px; border: 1px solid var(--bs-border-color); border-radius: 8px; background: var(--bs-body-bg); color: var(--bs-body-color);
    font-size: var(--fs-13); font-weight: 500; font-variant-numeric: tabular-nums; transition: background .15s, border-color .15s, color .15s; }
.dep-chip.active { background: rgba(var(--bs-primary-rgb), .1); border-color: rgba(var(--bs-primary-rgb), .5); color: var(--bs-primary); }
.dep-chip:active { transform: scale(.96); }
.dep-hint { margin-top: 10px; text-align: center; font-size: var(--fs-12); color: var(--bs-secondary-color); }
.dep-hint.is-error { color: var(--bs-danger); font-weight: 500; }
.dep-currencies { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.dep-currency { position: relative; display: block; margin: 0; cursor: pointer; }
.dep-currency input { position: absolute; opacity: 0; pointer-events: none; }
.dep-currency-body { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--bs-border-color); border-radius: 10px; background: var(--bs-body-bg); transition: border-color .15s, box-shadow .15s; }
.dep-currency .coin { width: 32px; height: 32px; font-size: var(--fs-13); flex-shrink: 0; }
.dep-currency-name { display: block; font-size: var(--fs-14); font-weight: 600; line-height: 1.2; }
.dep-currency-sub { display: block; font-size: var(--fs-12); color: var(--bs-secondary-color); }
.dep-check { width: 20px; height: 20px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--bs-border-color); display: grid; place-items: center; color: transparent; font-size: .75rem; }
.dep-currency input:checked + .dep-currency-body { border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .12); }
.dep-currency input:checked + .dep-currency-body .dep-check { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.dep-currency input:focus-visible + .dep-currency-body { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.dep-steps { display: flex; flex-direction: column; gap: 12px; }
.dep-steps > div { display: flex; gap: 10px; align-items: flex-start; }
.dep-steps > div > span { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); font-size: var(--fs-12); font-weight: 600; }
.dep-steps b { display: block; font-size: var(--fs-13); font-weight: 500 !important; line-height: 1.3; }
.dep-steps small { display: block; font-size: var(--fs-12) !important; color: var(--bs-secondary-color); line-height: 1.35; }
.dep-submit { min-height: 48px; }

/* ---------- Ödeme ekranı ---------- */
.pay-card { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 10px; padding: 14px; }
.pay-muted { font-size: var(--fs-12); color: var(--bs-secondary-color); }
.pay-timer .pay-countdown { font-size: var(--fs-20); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--bs-body-color); }
.pay-timer.pay-urgent .pay-countdown { color: var(--bs-danger); }
.pay-progress { height: 6px; border-radius: 999px; background: var(--bs-secondary-bg); }
.pay-progress .progress-bar { border-radius: 999px; }
.pay-coin { width: 40px; height: 40px; font-size: var(--fs-14) !important; flex-shrink: 0; }
.pay-amount { font-size: var(--fs-28) !important; line-height: 1.1; }
.pay-amount-cur { font-size: var(--fs-16); font-weight: 500; color: var(--bs-secondary-color); }
.pay-copy { flex-shrink: 0; }
.qr-box { padding: 10px; border-radius: 10px; }
.qr-box img { width: 180px; height: 180px; }
.pay-address { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 6px; margin: 12px 0; padding: 10px 12px; border-radius: 8px; background: var(--bs-tertiary-bg);
    font-family: var(--bs-font-monospace); font-size: var(--fs-14); font-weight: 500; letter-spacing: .02em; }
.pay-network { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; font-size: var(--fs-12); color: #8a5a00; background: rgba(245, 159, 0, .1); border-radius: 8px; padding: 8px 10px; }
[data-bs-theme="dark"] .pay-network { color: #ffc14d; }
.pay-network .ti { font-size: 1rem; margin-top: 1px; }
.pay-wait { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 10px; background: rgba(var(--bs-primary-rgb), .06); font-size: var(--fs-13); }
.pay-wait-dot { width: 10px; height: 10px; margin-top: 4px; flex-shrink: 0; border-radius: 50%; background: var(--bs-primary); position: relative; }
.pay-wait-dot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: inherit; animation: pn-pulse 1.4s ease-out infinite; }
.pay-done { text-align: center; padding: 28px 16px; }
.pay-done-icon { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--pn-green-rgb), .15); color: rgb(var(--pn-green-rgb)); font-size: 2rem; }
.pay-done-title { font-size: var(--fs-16); font-weight: 600; }
.pay-done-amount { font-size: var(--fs-28); font-weight: 600; color: rgb(var(--pn-green-rgb)); margin-top: 4px; font-variant-numeric: tabular-nums; }
.pay-tx { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: var(--fs-12); text-decoration: none !important; }

/* Bakiye yükle v2: preview, flow, safety note */
.dep-preview { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--bs-border-color); }
.dep-preview span { display: block; font-size: var(--fs-12); color: var(--bs-secondary-color); }
.dep-preview b { font-size: var(--fs-14); font-weight: 600 !important; font-variant-numeric: tabular-nums; }
.dep-preview b.is-in { color: rgb(var(--pn-green-rgb)); }
.dep-preview > .ti { color: var(--bs-secondary-color); }
.dep-safe { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 10px; font-size: var(--fs-12); color: var(--bs-secondary-color); }
.dep-safe .ti { color: rgb(var(--pn-green-rgb)); font-size: 1rem; }

/* Bakiye yükle: framed amount field */
.dep-field { display: flex; align-items: center; gap: 10px; height: 64px; padding: 0 16px; margin-bottom: 12px; cursor: text;
    border: 1.5px solid var(--bs-border-color); border-radius: 10px; background: var(--bs-body-bg); transition: border-color .15s, box-shadow .15s; }
.dep-field:focus-within { border-color: var(--bs-primary); box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .12); }
.dep-field-pre { font-size: 1.5rem; font-weight: 500; color: var(--bs-secondary-color); }
.dep-field input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; padding: 0; color: var(--bs-body-color);
    font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.dep-field input::placeholder { color: var(--bs-border-color); }
.dep-field input::-webkit-outer-spin-button, .dep-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.dep-field-suf { font-size: var(--fs-12); font-weight: 600; padding: 4px 8px; border-radius: 6px; background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); letter-spacing: .03em; }
.dep-card:has(.dep-hint.is-error) .dep-field { border-color: var(--bs-danger); box-shadow: 0 0 0 4px rgba(var(--bs-danger-rgb), .1); }

/* Ödeme ekranı: slim timer, step numbers, notes */
.pay-strip { padding: 10px 14px; border-radius: 10px; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); font-size: var(--fs-13); }
.pay-strip .pay-countdown { font-size: var(--fs-14); font-weight: 600; font-variant-numeric: tabular-nums; }
.pay-strip.pay-urgent { border-color: rgba(var(--bs-danger-rgb), .4); }
.pay-strip.pay-urgent .pay-countdown, .pay-strip.pay-urgent .ti-clock { color: var(--bs-danger); }
.pay-strip .pay-progress { height: 4px; }
.pay-step { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 6px; border-radius: 50%; background: var(--bs-primary); color: #fff; font-size: var(--fs-11); font-weight: 600; vertical-align: 1px; }
.pay-note { display: flex; gap: 6px; align-items: flex-start; margin-top: 10px; font-size: var(--fs-12); color: var(--bs-secondary-color); }
.pay-note .ti { font-size: .95rem; margin-top: 1px; }

/* Ödeme ekranı: ring countdown */
.pay-clock { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 10px; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); transition: border-color .3s, background .3s; }
.pay-ring { position: relative; width: 64px; height: 64px; flex-shrink: 0; }
.pay-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.pay-ring circle { fill: none; stroke-width: 5; }
.pay-ring-track { stroke: var(--bs-secondary-bg); }
.pay-ring-fill { stroke: var(--bs-primary); stroke-linecap: round; transition: stroke-dashoffset 1s linear, stroke .3s; }
.pay-ring .pay-countdown { position: absolute; inset: 0; display: grid; place-items: center; font-size: var(--fs-14); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.pay-clock-title { font-size: var(--fs-14); font-weight: 600; margin-bottom: 2px; }
.pay-clock.pay-urgent { border-color: rgba(var(--bs-danger-rgb), .45); background: rgba(var(--bs-danger-rgb), .04); }
.pay-clock.pay-urgent .pay-ring-fill { stroke: var(--bs-danger); }
.pay-clock.pay-urgent .pay-countdown, .pay-clock.pay-urgent .pay-clock-title { color: var(--bs-danger); }
.pay-clock.pay-urgent .pay-ring { animation: pay-beat 1s ease-in-out infinite; }
@keyframes pay-beat { 50% { transform: scale(1.05); } }

/* Ödeme ekranı: tappable amount + breakdown */
.pay-net-chip { font-size: var(--fs-11); font-weight: 600; padding: 2px 7px; border-radius: 4px; background: rgba(var(--pn-red-rgb), .1); color: rgb(var(--pn-red-rgb)); }
.pay-amount-box { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; padding: 16px 12px 12px; border: 1.5px dashed rgba(var(--bs-primary-rgb), .35);
    border-radius: 10px; background: rgba(var(--bs-primary-rgb), .04); color: var(--bs-body-color); transition: background .15s, border-color .15s; }
.pay-amount-box:active { background: rgba(var(--bs-primary-rgb), .1); }
.pay-amount-box .pay-amount { font-size: 2rem !important; line-height: 1.1; }
.pay-amount-copy { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-12); font-weight: 500; color: var(--bs-primary); }
.pay-amount-box.is-copied { border-style: solid; border-color: rgb(var(--pn-green-rgb)); background: rgba(var(--pn-green-rgb), .06); }
.pay-amount-box.is-copied .pay-amount-copy { color: rgb(var(--pn-green-rgb)); }
.pay-rows { margin-top: 12px; }
.pay-rows > div { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0; font-size: var(--fs-13); }
.pay-rows > div + div { border-top: 1px solid var(--bs-border-color); }
.pay-rows span { color: var(--bs-secondary-color); }
.pay-rows b { font-weight: 600 !important; font-variant-numeric: tabular-nums; }
.pay-rows b.is-in { color: rgb(var(--pn-green-rgb)); }

/* Ödeme ekranı: address card */
.pay-addr-ic { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); font-size: .85rem; }
.pay-qr { text-align: center; }
.pay-qr-frame { position: relative; display: inline-block; padding: 10px; border-radius: 10px; background: #fff; border: 1px solid var(--bs-border-color); }
.pay-qr-frame img { display: block; width: 168px; height: 168px; }
/* corner marks, like a scanner viewfinder */
.pay-qr-frame::before { content: ""; position: absolute; inset: -7px; border-radius: 12px; opacity: .8; pointer-events: none;
    background:
        linear-gradient(var(--bs-primary), var(--bs-primary)) top left / 18px 2px no-repeat, linear-gradient(var(--bs-primary), var(--bs-primary)) top left / 2px 18px no-repeat,
        linear-gradient(var(--bs-primary), var(--bs-primary)) top right / 18px 2px no-repeat, linear-gradient(var(--bs-primary), var(--bs-primary)) top right / 2px 18px no-repeat,
        linear-gradient(var(--bs-primary), var(--bs-primary)) bottom left / 18px 2px no-repeat, linear-gradient(var(--bs-primary), var(--bs-primary)) bottom left / 2px 18px no-repeat,
        linear-gradient(var(--bs-primary), var(--bs-primary)) bottom right / 18px 2px no-repeat, linear-gradient(var(--bs-primary), var(--bs-primary)) bottom right / 2px 18px no-repeat; }
.pay-or { display: flex; align-items: center; gap: 10px; margin: 14px 0 10px; font-size: var(--fs-12); color: var(--bs-secondary-color); }
.pay-or::before, .pay-or::after { content: ""; flex: 1; height: 1px; background: var(--bs-border-color); }
.pay-addr-box { padding: 12px; }
.pay-addr-box .pay-address { margin: 0; padding: 0; background: none; font-size: var(--fs-14); gap: 2px 6px; color: var(--bs-body-color); }
.pay-check { display: flex; gap: 6px; align-items: flex-start; margin-top: 10px; font-size: var(--fs-12); color: var(--bs-secondary-color); }
.pay-check .ti { color: rgb(var(--pn-green-rgb)); font-size: .95rem; margin-top: 1px; }
.pay-check b { font-family: var(--bs-font-monospace); color: var(--bs-body-color); font-weight: 600 !important; }

/* Ödeme ekranı: waiting card (scan line, dots, live pill) */
.pay-wait-card { position: relative; overflow: hidden; text-align: center; padding-top: 22px; margin-bottom: 4px;
    background: linear-gradient(180deg, rgba(var(--bs-primary-rgb), .07), var(--bs-body-bg) 70%); }
.pay-scan { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(var(--bs-primary-rgb), .12); overflow: hidden; }
.pay-scan::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--bs-primary), transparent); animation: pay-scan 1.6s ease-in-out infinite; }
@keyframes pay-scan { from { left: -40%; } to { left: 100%; } }
.pay-dots { display: inline-flex; gap: 6px; margin-bottom: 10px; }
.pay-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--bs-primary); opacity: .3; animation: pay-dot 1.2s ease-in-out infinite; }
.pay-dots span:nth-child(2) { animation-delay: .2s; }
.pay-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes pay-dot { 0%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-4px); } }
.pay-wait-title { font-size: var(--fs-16); font-weight: 600; }
.pay-live { display: inline-flex; align-items: center; gap: 6px; margin-top: 8px; padding: 4px 10px; border-radius: 999px;
    background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); font-size: var(--fs-12); color: var(--bs-secondary-color); }
.pay-live-dot { width: 7px; height: 7px; border-radius: 50%; background: rgb(var(--pn-green-rgb)); box-shadow: 0 0 0 0 rgba(var(--pn-green-rgb), .5); animation: pay-live 1.6s ease-out infinite; }
@keyframes pay-live { 70% { box-shadow: 0 0 0 6px rgba(var(--pn-green-rgb), 0); } 100% { box-shadow: 0 0 0 0 rgba(var(--pn-green-rgb), 0); } }
/* after "Ödemeyi gönderdim": green, faster */
.pay-wait-card.is-checking { border-color: rgba(var(--pn-green-rgb), .45); background: linear-gradient(180deg, rgba(var(--pn-green-rgb), .08), var(--bs-body-bg) 70%); }
.pay-wait-card.is-checking .pay-scan { background: rgba(var(--pn-green-rgb), .15); }
.pay-wait-card.is-checking .pay-scan::after { background: linear-gradient(90deg, transparent, rgb(var(--pn-green-rgb)), transparent); animation-duration: 1s; }
.pay-wait-card.is-checking .pay-dots span { background: rgb(var(--pn-green-rgb)); animation-duration: .8s; }

/* ---------- Yeni ilan ---------- */
.section-hint { font-size: var(--fs-12); font-weight: 400; color: var(--bs-secondary-color); margin-left: 6px; }
.pkg-list { display: flex; flex-direction: column; gap: 8px; }
.pkg-card { position: relative; display: block; margin: 0; cursor: pointer; }
.pkg-card input { position: absolute; opacity: 0; pointer-events: none; }
.pkg-body { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--bs-border-color); border-radius: 10px; background: var(--bs-body-bg); transition: border-color .15s, box-shadow .15s; }
.pkg-ic { width: 36px; height: 36px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary); font-size: 1.1rem; }
.pkg-name { display: block; font-size: var(--fs-14); font-weight: 600; }
.pkg-sub { display: block; font-size: var(--fs-12); color: var(--bs-secondary-color); }
.pkg-price { font-size: var(--fs-16); font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pkg-card input:checked + .pkg-body { border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .12); }
.pkg-card input:checked + .pkg-body .pkg-ic { background: var(--bs-primary); color: #fff; }
.pkg-card input:checked + .pkg-body .dep-check { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.pkg-card input:focus-visible + .pkg-body { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.buy-summary { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: 10px; padding: 4px 14px; }
.buy-summary > div { display: flex; justify-content: space-between; gap: 8px; padding: 9px 0; font-size: var(--fs-13); }
.buy-summary > div + div { border-top: 1px solid var(--bs-border-color); }
.buy-summary span { color: var(--bs-secondary-color); }
.buy-summary b { font-weight: 600 !important; font-variant-numeric: tabular-nums; }
.buy-total b { font-size: var(--fs-14); }
.buy-short { display: flex; align-items: center; gap: 6px; margin: 0 -14px -4px; padding: 10px 14px; border-top: 1px solid rgba(var(--bs-danger-rgb), .25); border-radius: 0 0 10px 10px;
    background: rgba(var(--bs-danger-rgb), .06); color: var(--bs-danger) !important; font-size: var(--fs-13); text-decoration: none !important; }
.buy-short span { color: inherit; }
.buy-short[hidden] { display: none; }
.btn.is-short { opacity: .65; }
.ad-new-form .photo-manager > .card-header { display: none; } /* the step title already says "Fotoğraflar" */

/* ---------- İlanı düzenle ---------- */
.edit-photos .photo-manager > .card-header { display: none; } /* the step title shows "Fotoğraflar" and the count */
.edit-status { padding: 12px 14px; border-radius: 10px; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); }
.edit-status.is-ending { border-color: rgba(245, 159, 0, .5); }
.edit-status.is-expired { border-color: rgba(var(--bs-danger-rgb), .35); }
.edit-status-name { font-size: var(--fs-16); font-weight: 600; }
.buy-end b { color: var(--bs-primary); font-size: var(--fs-14); }

/* ---------- Bottom tab bar v2: frosted bar, filled active pill, badges ---------- */
.tabbar { background: rgba(var(--bs-body-bg-rgb), .88); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--bs-border-color); box-shadow: 0 -6px 20px rgba(0, 0, 0, .05); }
.tabbar a, .tabbar button { color: var(--bs-secondary-color); gap: 3px; }
.tabbar .tab-ic { position: relative; width: 56px; height: 30px; border-radius: 999px; transition: background .2s, color .2s; }
.tabbar a.active, .tabbar button.active, .tabbar .tab-menu[aria-expanded="true"] { color: var(--bs-primary); font-weight: 600; }
.tabbar a.active .tab-ic, .tabbar button.active .tab-ic { background: var(--bs-primary); color: #fff; box-shadow: 0 4px 10px rgba(var(--bs-primary-rgb), .3); }
.tab-badge { position: absolute; top: -4px; right: 6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; display: grid; place-items: center;
    background: #f59f00; color: #fff; font-size: 10px; font-weight: 700; line-height: 1; border: 2px solid var(--bs-body-bg); }
.tab-dot { position: absolute; top: 2px; right: 14px; width: 10px; height: 10px; border-radius: 50%; background: #f59f00; border: 2px solid var(--bs-body-bg); }

/* ---------- Hareketler v2 ---------- */
/* iOS-like segmented control */
.seg-ios { padding: 3px; gap: 3px; background: var(--bs-secondary-bg); border-radius: 10px; }
.seg-ios .btn { border: 0 !important; border-radius: 8px !important; min-height: 34px; background: transparent; color: var(--bs-secondary-color); box-shadow: none; }
.seg-ios .btn.active { background: var(--bs-body-bg) !important; color: var(--bs-body-color) !important; box-shadow: 0 1px 3px rgba(0, 0, 0, .12) !important; }
.seg-ios .btn .badge { background: transparent !important; color: inherit !important; opacity: .6; padding: 0; }
/* cancelled / expired payments step back */
.tx-row.is-muted .tx-title, .tx-row.is-muted .tx-coin { opacity: .55; }
.tx-row.is-muted .tx-coin { filter: grayscale(1); }
/* summary icons */
.tx-summary-label .ti { font-size: .9rem; vertical-align: -1px; }
.tx-summary-label .is-primary { color: var(--bs-primary); }
.tx-summary-label .is-in { color: rgb(var(--pn-green-rgb)); }
.tx-summary-label .is-out { color: rgb(var(--pn-red-rgb)); }

/* ---------- Hareketler: list items v3 ---------- */
.tx-group .tx-row { position: relative; padding: 12px 14px; min-height: 64px; gap: 12px; }
.tx-group .tx-row + .tx-row { border-top: 0; }
.tx-group .tx-row + .tx-row::before { content: ""; position: absolute; top: 0; left: 62px; right: 0; height: 1px; background: var(--bs-border-color); } /* inset divider */
.tx-ic, .tx-coin { width: 36px; height: 36px; border-radius: 50% !important; }
.tx-title { font-size: var(--fs-14); font-weight: 500; }
.tx-right { flex-shrink: 0; text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.tx-amount { font-size: var(--fs-14); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--bs-body-color); }
.tx-amount small { font-size: var(--fs-11); font-weight: 500; color: var(--bs-secondary-color); }
.tx-amount.is-in { color: rgb(var(--pn-green-rgb)); }
.tx-code { font-family: var(--bs-font-monospace); font-size: var(--fs-11); padding: 1px 5px; border-radius: 4px; background: var(--bs-tertiary-bg); color: var(--bs-body-color); }
.tx-status { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-12); color: var(--bs-secondary-color); }
.tx-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.tx-status.is-confirmed { color: rgb(var(--pn-green-rgb)); }
.tx-status.is-pending { color: #c27c00; }
.tx-pay-cta { display: inline-flex; align-items: center; gap: 2px; padding: 2px 8px; border-radius: 6px; background: var(--bs-primary); color: #fff; font-size: var(--fs-12); font-weight: 500; font-variant-numeric: tabular-nums; }
.tx-row.is-muted .tx-amount { color: var(--bs-secondary-color); font-weight: 500; }
.tx-row.is-muted .tx-title { opacity: .7; }
/* Hareketler: real coin logos */
.tx-coin { display: grid; place-items: center; flex-shrink: 0; }
.tx-coin .coin-logo { display: block; width: 36px; height: 36px; }
.tx-row.is-muted .tx-coin .coin-logo { filter: grayscale(1); opacity: .5; }
/* Hareketler tabs: count pill */
.seg-ios .btn { gap: 6px; }
.seg-count { min-width: 20px; height: 18px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center;
    background: rgba(var(--bs-secondary-rgb), .15); color: var(--bs-secondary-color); font-size: var(--fs-11); font-weight: 600; font-variant-numeric: tabular-nums; transition: background .15s, color .15s; }
.seg-ios .btn.active .seg-count { background: var(--bs-primary); color: #fff; }

/* Unfinished payment: a small orange dot (Ödemeler tab and bottom bar) with a soft, slow ring */
.seg-dot { width: 8px; height: 8px; border-radius: 50%; background: #f59f00; flex-shrink: 0; animation: pn-soft-ring 2.4s ease-out infinite; }
.tab-dot { animation: pn-soft-ring 2.4s ease-out infinite; }
@keyframes pn-soft-ring { 0% { box-shadow: 0 0 0 0 rgba(245, 159, 0, .35); } 70% { box-shadow: 0 0 0 5px rgba(245, 159, 0, 0); } 100% { box-shadow: 0 0 0 0 rgba(245, 159, 0, 0); } }
@media (prefers-reduced-motion: reduce) { .seg-dot, .tab-dot { animation: none !important; } }
/* Panel: pending payment with coin logo; filter counts */
.pending-pay-logo { display: grid; place-items: center; flex-shrink: 0; }
.pending-pay-logo .coin-logo { display: block; }
.seg-count.is-warn { background: rgba(245, 159, 0, .18); color: #b06f00; }
.seg-ios .btn.active .seg-count.is-warn { background: #f59f00; color: #fff; }
.ad-filter.seg-ios .btn { padding-left: .35rem; padding-right: .35rem; }
/* Bakiye yükle: quick amounts as a segmented control, coin logos */
.dep-chips.seg-chips { gap: 3px; padding: 3px; border-radius: 10px; background: var(--bs-secondary-bg); }
.seg-chips .dep-chip { height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--bs-secondary-color); }
.seg-chips .dep-chip.active { background: var(--bs-body-bg); color: var(--bs-body-color); font-weight: 600; box-shadow: 0 1px 3px rgba(0, 0, 0, .12); }
.dep-currency .coin-logo { display: block; flex-shrink: 0; }

/* Bakiye yükle: amount field v2 (label inside, bigger value, clear button) */
.dep-field { flex-direction: column; align-items: stretch; justify-content: center; gap: 2px; height: auto; padding: 10px 14px 8px; border-radius: 12px; }
.dep-field-top { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-12); color: var(--bs-secondary-color); }
.dep-field-row { display: flex; align-items: center; gap: 6px; height: 48px; }
.dep-field-pre { font-size: 1.75rem; font-weight: 600; color: var(--bs-primary); line-height: 1; }
.dep-field input { font-size: 2.25rem; font-weight: 700; letter-spacing: -.03em; height: 48px; }
.dep-field-suf { font-size: var(--fs-11); padding: 2px 7px; }
.dep-field-clear { width: 28px; height: 28px; flex-shrink: 0; border: 0; border-radius: 50%; display: none; place-items: center;
    background: var(--bs-secondary-bg); color: var(--bs-secondary-color); font-size: .9rem; }
.dep-field.has-value .dep-field-clear { display: grid; }
.dep-field-clear:active { background: var(--bs-border-color); }
.dep-field:focus-within .dep-field-top > span:first-child { color: var(--bs-primary); }
/* centered amount: label, "$ 100 USD" in the middle, × on the right edge */
.dep-field { position: relative; align-items: center; padding: 10px 44px 10px; }
.dep-field-top { justify-content: center; }
.dep-field-row { justify-content: center; max-width: 100%; }
.dep-field input { flex: 0 1 auto; width: 3em; max-width: 100%; text-align: center; }
.dep-field-suf { align-self: center; }
.dep-field-clear { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }

/* Ödeme ekranı v3: label over the amount, copy chips, status dot */
.pay-amount-label { font-size: var(--fs-12); color: var(--bs-secondary-color); margin-bottom: -2px; }
.pay-chip { padding: 4px 10px; border-radius: 999px; background: rgba(var(--bs-primary-rgb), .1); }
.pay-amount-box.is-copied .pay-chip { background: rgba(var(--pn-green-rgb), .12); }
.pay-status { padding: 4px 10px; border-radius: 999px; background: var(--bs-body-bg); border: 1px solid var(--bs-border-color); font-weight: 500; }
.pay-status.is-pending::before { animation: pn-soft-ring 2.4s ease-out infinite; }
/* Section titles: quiet grey labels, not attention-grabbing */
.section-title { color: var(--bs-secondary-color); font-weight: 500; font-size: var(--fs-13); }
.section-title .section-link { font-weight: 500; }

/* Yeni ilan / düzenle: quiet group label inside the profile card, character counter */
.form-group-label { display: flex; align-items: center; gap: 6px; margin: 4px 0 12px; padding-top: 14px; border-top: 1px solid var(--bs-border-color);
    font-size: var(--fs-12); font-weight: 500; color: var(--bs-secondary-color); }
.form-group-label .ti { font-size: .95rem; }
.field-counter { text-align: right; font-size: var(--fs-11); color: var(--bs-secondary-color); margin-top: 4px; }

/* İlanı düzenle: bigger cover in the status card, unsaved-changes note */
.edit-thumb { width: 48px; height: 64px; border-radius: 8px; }
.save-note { display: flex; align-items: center; justify-content: center; gap: 2px; margin-top: 14px; font-size: var(--fs-12); font-weight: 500; color: #b06f00; }
.save-note[hidden] { display: none; }
.save-note .ti { font-size: 1rem; }
.btn.is-dirty { box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .2); }

/* Süre uzat: before → after end date */
.renew-timeline { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--bs-border-color); }
.renew-timeline span { display: block; font-size: var(--fs-11); color: var(--bs-secondary-color); }
.renew-timeline b { font-size: var(--fs-13); font-weight: 600 !important; font-variant-numeric: tabular-nums; white-space: nowrap; }
.renew-timeline b.is-new { color: var(--bs-primary); }
.renew-arrow { display: flex !important; flex-direction: column; align-items: center; gap: 0; color: var(--bs-primary) !important; }
.renew-arrow > span { font-size: var(--fs-11); font-weight: 600; padding: 1px 7px; border-radius: 999px; background: rgba(var(--bs-primary-rgb), .1); color: var(--bs-primary) !important; }

/* ---------- İlan formu: professional outlined inputs (white field, thin border, crisp focus ring) ---------- */
.pretty-fields .form-label { font-size: var(--fs-13) !important; font-weight: 500; color: var(--bs-body-color); margin-bottom: 6px; }
.pretty-fields .form-label.required::after { color: var(--bs-secondary-color); content: "*"; }
.pretty-fields .form-control, .pretty-fields .form-select {
    min-height: 44px; padding: 10px 12px; border: 1px solid #d0d5dd; border-radius: 8px; background-color: var(--bs-body-bg);
    font-size: 16px; font-weight: 400; color: var(--bs-body-color); box-shadow: 0 1px 2px rgba(16, 24, 40, .05);
    transition: border-color .15s, box-shadow .15s;
}
[data-bs-theme="dark"] .pretty-fields .form-control { border-color: #3a3f46; }
.pretty-fields .form-control::placeholder { color: #98a2b3; }
.pretty-fields .form-control:focus, .pretty-fields .form-select:focus {
    border-color: rgba(var(--bs-primary-rgb), .7); box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 0 0 4px rgba(var(--bs-primary-rgb), .12);
}
.pretty-fields textarea.form-control { min-height: 104px; line-height: 1.5; resize: vertical; }
/* errors */
.pretty-fields .form-control.is-invalid { border-color: #fda29b; box-shadow: 0 1px 2px rgba(16, 24, 40, .05); background-image: none; }
.pretty-fields .form-control.is-invalid:focus { box-shadow: 0 0 0 4px rgba(240, 68, 56, .12); }
.pretty-fields .invalid-feedback { font-size: var(--fs-13) !important; color: #d92d20; margin-top: 6px; }
.pretty-fields .form-text { margin-top: 6px; color: var(--bs-secondary-color); }
.pretty-fields .mb-3 { margin-bottom: 1rem !important; }
/* features (Tom Select) to match */
.pretty-fields .ts-wrapper .ts-control { min-height: 44px; border: 1px solid #d0d5dd; border-radius: 8px; background: var(--bs-body-bg); box-shadow: 0 1px 2px rgba(16, 24, 40, .05); padding: 7px 10px; }
.pretty-fields .ts-wrapper.focus .ts-control { border-color: rgba(var(--bs-primary-rgb), .7); box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), .12); }
.ad-facts { margin: 2px 0 6px; font-size: var(--fs-13); color: var(--bs-secondary-color); font-variant-numeric: tabular-nums; }

/* ---------- Bottom tab bar v3: floating island, soft active pill ---------- */
:root { --pn-tabbar-gap: 10px; }
.tabbar {
    left: 12px; right: 12px; bottom: calc(var(--pn-tabbar-gap) + var(--pn-safe-bottom));
    height: 64px; padding: 0 6px; border-radius: 20px;
    border: 1px solid var(--bs-border-color); background: rgba(var(--bs-body-bg-rgb), .9);
    box-shadow: 0 8px 28px rgba(16, 24, 40, .12), 0 2px 6px rgba(16, 24, 40, .06);
}
[data-bs-theme="dark"] .tabbar { box-shadow: 0 8px 28px rgba(0, 0, 0, .45); }
body.has-tabbar .page-body { padding-bottom: calc(64px + var(--pn-tabbar-gap) + var(--pn-safe-bottom) + 20px); }
body.has-tabbar .toast-stack { bottom: calc(64px + var(--pn-tabbar-gap) + var(--pn-safe-bottom) + 10px); }
.tabbar a, .tabbar button { gap: 2px; font-size: var(--fs-11); font-weight: 500; color: var(--bs-secondary-color); }
.tabbar .tab-ic { width: 52px; height: 30px; border-radius: 12px; transition: background .2s, transform .2s; }
.tabbar .tab-ic .ti { font-size: 1.3rem; }
.tabbar a.active, .tabbar button.active { color: var(--bs-primary); font-weight: 600; }
.tabbar a.active .tab-ic, .tabbar button.active .tab-ic { background: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary); box-shadow: none; }
.tabbar a.active .tab-ic .ti { transform: translateY(-1px); }
.tab-badge, .tab-dot { border-color: var(--bs-body-bg); }

/* Tab bar: active state, simple (small solid capsule, no animation) */
.tabbar .tab-ic { width: 44px; height: 28px; border-radius: 10px; transition: none; }
.tabbar .tab-ic .ti { font-size: 1.25rem; }
.tabbar a.active .tab-ic, .tabbar button.active .tab-ic { background: var(--bs-primary); color: #fff; box-shadow: none; }
.tabbar a.active .tab-ic .ti, .tabbar button.active .tab-ic .ti { transform: none; color: #fff; }
/* Tab bar active: no background, primary icon + label with a short underline */
.tabbar a.active .tab-ic, .tabbar button.active .tab-ic { background: transparent; color: var(--bs-primary); box-shadow: none; }
.tabbar a.active .tab-ic .ti, .tabbar button.active .tab-ic .ti { color: var(--bs-primary); }
.tabbar a.active::after, .tabbar button.active::after { content: ""; position: absolute; bottom: 6px; left: 50%; width: 18px; height: 3px; margin-left: -9px; border-radius: 999px; background: var(--bs-primary); }
.tabbar a, .tabbar button { position: relative; } /* anchor for the active underline */
.tabbar a.active::after, .tabbar button.active::after { bottom: 0; width: 32px; margin-left: -16px; height: 3px; border-radius: 3px 3px 0 0; } /* indicator on the bottom edge of the bar */
.tabbar a.active::after, .tabbar button.active::after { bottom: 2px; border-radius: 999px; } /* fully rounded ends */
.tabbar a.active::after, .tabbar button.active::after { bottom: 0; border-radius: 999px; } /* on the very bottom edge, rounded ends */

/* ---------- Header v2: round back button, crisper title, shadow only after scrolling ---------- */
.site-navbar { border-bottom: 1px solid transparent; box-shadow: none; transition: border-color .2s, box-shadow .2s; }
.site-navbar.is-scrolled { border-bottom-color: var(--bs-border-color); box-shadow: 0 4px 16px rgba(16, 24, 40, .06); }
.site-navbar .navbar-brand, .site-navbar .navbar-brand .fw-bold { font-size: .9375rem !important; font-weight: 600 !important; letter-spacing: -.01em; }
.app-back { width: 36px; height: 36px; margin: 0 4px 0 -4px; border-radius: 50%; background: var(--bs-tertiary-bg); font-size: 1.25rem; }
.app-back:active { background: var(--bs-secondary-bg); }
.balance-pill { gap: 8px; align-items: center !important; }
.balance-text { align-items: baseline; }
.balance-add { width: 26px; height: 26px; font-size: .85rem; box-shadow: 0 2px 6px rgba(var(--bs-primary-rgb), .3); }
/* Support strip: compact (less padding, no extra dot) */
.header-top { padding: calc(5px + env(safe-area-inset-top, 0px)) 16px 5px; gap: 6px; font-size: var(--fs-12); line-height: 1.2; }
.header-top .header-top-dot { display: none; }
.header-top .ti { font-size: .95rem; }
.header-top-arrow { font-size: .75rem !important; margin-left: 0; }
/* Support strip: middle ground (~32px) */
.header-top { padding: calc(7px + env(safe-area-inset-top, 0px)) 16px 7px; font-size: var(--fs-13); }
.header-top .ti { font-size: 1.05rem; }

/* Menü sheet v3: round icons, inset dividers, quiet logout */
.sheet-ic { border-radius: 50% !important; }
.sheet-row { position: relative; min-height: 58px; }
.sheet-row + .sheet-row { border-top: 0 !important; }
.sheet-row + .sheet-row::before { content: ""; position: absolute; top: 0; left: 58px; right: 0; height: 1px; background: var(--bs-border-color); }
.sheet-logout { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 4px 0 2px; padding: 12px; border-radius: 10px;
    color: rgb(var(--pn-red-rgb)) !important; font-size: var(--fs-14); font-weight: 500; text-decoration: none !important; }
.sheet-logout:active { background: rgba(var(--pn-red-rgb), .08); }
.sheet-balance { border-radius: 12px; }
.ad-more { display: flex; align-items: center; justify-content: center; gap: 2px; padding: 12px; border-radius: 10px; border: 1px dashed var(--bs-border-color);
    font-size: var(--fs-13); font-weight: 500; text-decoration: none !important; color: var(--bs-primary) !important; }
.ad-more:active { background: var(--bs-tertiary-bg); }

/* ---------- Şifre değiştir: show/hide button inside the field ---------- */
.pw-wrap { position: relative; }
.pretty-fields .pw-wrap .form-control { padding-right: 46px; }
.pw-toggle { position: absolute; top: 0; right: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
    border: 0; background: none; color: var(--bs-secondary-color); font-size: 1.15rem; border-radius: 8px; }
.pw-toggle:active, .pw-toggle.is-on { color: var(--bs-primary); }

/* ---------- Header v3: frosted glass when scrolled ---------- */
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    .site-navbar > .container-fluid { transition: background-color .2s; }
    .site-navbar.is-scrolled { background: rgba(255, 255, 255, .82) !important; -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); }
    [data-bs-theme="dark"] .site-navbar.is-scrolled { background: rgba(21, 31, 44, .82) !important; }
}

/* Header title swap: "Yönetim Paneli" → page title after the in-page title scrolls away */
.site-navbar .navbar-brand { min-width: 0; flex: 0 1 auto; overflow: hidden; }
.brand-swap { display: grid; min-width: 0; overflow: hidden; }
.brand-app, .brand-page { grid-area: 1 / 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: opacity .2s ease, transform .2s ease; }
.brand-page { opacity: 0; transform: translateY(8px); }
.site-navbar.show-page-title .brand-app { opacity: 0; transform: translateY(-8px); }
.site-navbar.show-page-title .brand-page { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .brand-app, .brand-page { transition: none; } }

/* ---------- İlanlarım polish: dot status, bold time left, quieter expired cards ---------- */
.ad-status { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; margin-top: 2px; font-size: var(--fs-12); font-weight: 500; white-space: nowrap; }
.ad-status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ad-status.is-live { color: #079455; }
.ad-status.is-live::before { box-shadow: 0 0 0 3px rgba(7, 148, 85, .15); }
.ad-status.is-ending { color: #b54708; }
.ad-status.is-ending::before { box-shadow: 0 0 0 3px rgba(247, 144, 9, .2); }
.ad-status.is-expired { color: var(--bs-secondary-color); }
.ad-row-meta b { font-weight: 600; color: var(--bs-body-color); }
.ad-row-meta.text-warning-emphasis b { color: inherit; }
.ad-row-meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.ad-row[data-status="passive"] { background: var(--bs-tertiary-bg); box-shadow: none; }
.ad-row[data-status="passive"] .ad-thumb, .ad-row[data-status="passive"] .ad-facts { opacity: .55; }
.ad-row[data-status="passive"] .ad-thumb img { filter: grayscale(1); }
.ad-row[data-status="passive"] .ad-row-meta.text-danger { color: var(--bs-secondary-color) !important; }
.ad-row[data-status="passive"] .ad-time.is-expired .progress-bar { background: var(--bs-border-color) !important; }

/* Canlı Destek strip: the site's own chat uses the same green; unread replies as a small white pill */
.header-top.is-chat { background: #128C7E; }
.header-top-count { margin-left: 2px; padding: 1px 7px; border-radius: 999px; background: #fff; color: #0e7266; font-size: var(--fs-11); font-weight: 600; line-height: 1.5; }

/* ---------- Giriş / kayıt: centered mobile card, outlined inputs ---------- */
.auth { max-width: 400px; margin: 0 auto; padding: 12px 0 24px; }
.auth-head { text-align: center; margin: 8px 0 20px; }
.auth-title { font-size: var(--fs-20) !important; font-weight: 600 !important; margin: 0 0 4px; letter-spacing: -.01em; }
.auth-sub { margin: 0; font-size: var(--fs-14); color: var(--bs-secondary-color); }
.auth-card { border-radius: 12px; }
.auth-card .card-body { padding: 20px 16px; }
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 2px 0 18px; font-size: var(--fs-13); }
.auth-row .form-check-label { font-size: var(--fs-13); }
.auth-submit { min-height: 44px; font-weight: 600; }
.auth-alert { display: flex; align-items: flex-start; gap: 8px; border-radius: 10px; font-size: var(--fs-13); }
.auth-alert .ti { font-size: 1.1rem; margin-top: 1px; }
.auth-foot { margin: 16px 0 0; text-align: center; font-size: var(--fs-14); color: var(--bs-secondary-color); }
.auth-foot a { font-weight: 600; text-decoration: none; }
/* Giriş: only the card, no site header; vertically centered */
body.auth-page .site-navbar { display: none !important; }
body.auth-page .page-body { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; padding: calc(16px + env(safe-area-inset-top, 0px)) 0 calc(16px + env(safe-area-inset-bottom, 0px)) !important; }
body.auth-page .page-body > .container-fluid { width: 100%; }
body.auth-page .auth { padding: 0; }