#admin-user-detail > .flex { flex-wrap: wrap; }
#admin-user-detail > .flex h1 { overflow-wrap: anywhere; min-width: 0; }
#admin-user-detail .grid > .glass-card { min-width: 0; }
#admin-user-detail .glass-card .flex > span { overflow-wrap: anywhere; min-width: 0; }
#ud-tabs > button { flex-shrink: 0; white-space: nowrap; }

/* =====================================================================
   RADOS MEDYA V2 — DESIGN SYSTEM  (UI Stage 1)
   =====================================================================
   Loaded AFTER style.css, so it refines the existing dark theme instead of
   replacing it. Purely additive: no existing selector is deleted, so any
   screen not yet migrated keeps working exactly as before.

   Contents
     1. Design tokens
     2. Typography & base
     3. Buttons
     4. Surfaces / cards
     5. Status badges
     6. Forms & inputs
     7. Tables
     8. Skeletons & empty states
     9. App shell (sidebar / topbar / content)
    10. Mobile navigation
    11. Dashboard
    12. Utilities
   ===================================================================== */

/* ---------------------------------------------------------------
   1. DESIGN TOKENS
   Purple is the BRAND ACCENT only — surfaces stay neutral graphite.
   --------------------------------------------------------------- */
:root {
  /* --- brand --- */
  --rm-brand:          #7C6BFF;
  --rm-brand-hover:    #6B58F5;
  --rm-brand-active:   #5C48E8;
  --rm-brand-soft:     rgba(124, 107, 255, 0.12);
  --rm-brand-border:   rgba(124, 107, 255, 0.30);
  --rm-brand-text:     #A99DFF;
  /* Filled-button background. --rm-brand is the identity colour and is correct for
     borders, icons and tints, but WHITE TEXT ON IT IS 3.89:1 — below the 4.5:1 AA
     floor for normal-size text, and button labels are normal size. This one step
     darker is 4.84:1 and is the same hue, so the brand does not change; only the
     surface that carries white text does. Hover goes darker still (5.92:1). */
  --rm-brand-cta:      #6B58F5;
  --rm-brand-cta-hover:#5C48E8;

  /* --- neutral surfaces (dark, default) --- */
  --rm-bg:             #0B0D14;   /* page background — deep navy/graphite */
  --rm-surface:        #12141D;   /* cards */
  --rm-surface-2:      #171A25;   /* nested / secondary surface */
  --rm-surface-hover:  #1C1F2C;
  --rm-border:         rgba(255, 255, 255, 0.07);
  --rm-border-strong:  rgba(255, 255, 255, 0.12);

  /* --- text --- */
  /* Contrast verified against --rm-surface / --rm-surface-2 / --rm-bg:
     text 15.2:1+, secondary 6.9:1+, muted 4.67:1+ — all pass WCAG AA for
     normal text. Do not darken --rm-text-muted below #7B8598. */
  --rm-text:           #EEF0F6;
  --rm-text-secondary: #9AA3B8;
  --rm-text-muted:     #7B8598;

  /* --- semantic --- */
  --rm-success:        #22C55E;
  --rm-success-soft:   rgba(34, 197, 94, 0.12);
  --rm-warning:        #F59E0B;
  --rm-warning-soft:   rgba(245, 158, 11, 0.12);
  --rm-danger:         #EF4444;
  --rm-danger-soft:    rgba(239, 68, 68, 0.12);
  --rm-info:           #38BDF8;
  --rm-info-soft:      rgba(56, 189, 248, 0.12);
  --rm-neutral:        #8792A8;
  --rm-neutral-soft:   rgba(135, 146, 168, 0.12);
  /* Grafik (2026-10-01): dataviz doğrulayıcısından geçti — koyu yüzey #12141D, CVD ΔE ≥ 9,4, kontrast ≥ 3:1 */
  --rm-chart-1:        #3987e5;
  --rm-chart-2:        #d95926;
  --rm-chart-3:        #199e70;
  --rm-chart-grid:     rgba(255, 255, 255, 0.07);
  --rm-chart-axis:     #7B8598;

  /* --- shape & motion --- */
  --rm-radius-sm:  8px;
  --rm-radius:    10px;
  --rm-radius-lg: 12px;
  --rm-shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --rm-shadow:    0 4px 16px rgba(0,0,0,.35);
  --rm-shadow-lg: 0 12px 32px rgba(0,0,0,.45);
  --rm-t:         160ms cubic-bezier(.4,0,.2,1);

  /* --- layout ---
     sidebar width matches the legacy .main-content margin so screens that are
     not yet migrated stay perfectly aligned during the transition. */
  --rm-sidebar-w:  250px;
  --rm-topbar-h:   60px;

  /**
   * MOBILE BOTTOM NAVIGATION — ONE SOURCE OF GEOMETRY.
   *
   * The bar's height, the space every page reserves for it, and anything that has to
   * sit above it were three separate hardcoded numbers (58px, 64px, 5.5rem). They
   * disagreed: the bar is 58px PLUS the safe-area inset — ~92px on a notched phone —
   * while pages reserved a flat 64px, leaving content underneath a fixed element,
   * where a tap hits the navigation instead of the card.
   *
   * --rm-bottomnav-h is the BAR ITSELF. --rm-bottomnav-space is what everything else
   * must clear: the bar, the inset, and breathing room. Nothing may hardcode either.
   */
  --rm-bottomnav-h:     58px;
  --rm-bottomnav-space: calc(var(--rm-bottomnav-h) + env(safe-area-inset-bottom) + 6px);
}

/* AÇIK TEMA (2026-09-23 — artık gerçekten açılıyor).
   Eskiden burada "tanımlı ama açılamaz" yazıyordu: legacy ekranlar koyu değerleri
   gömüyordu. O köprü tamamlandı (rados-bridge.css legacy adları V2 tokenlarına
   bağlıyor), bu yüzden bu blok artık tüm paneli çevirir.

   Kontrast notu — hepsi ölçüldü (tests/security/theme_light_test.php):
     metin #1B1F2A  → beyaz üstünde 14,8:1
     ikincil #4A5468 → beyaz üstünde 8,0:1
     soluk #656E82   → beyaz üstünde 5,4:1 (AA normal metin için 4,5 eşiği)
   Koyu temada soluk metin #7B8598'in altına inilmiyor; açıkta da #6B7386'in
   ÜSTÜNE çıkılmaz — ikisi de aynı sebeple: okunmayan gri bir etiket bilgi değildir.

   [data-theme="light"] ana seçicidir; [data-rm-theme="light"] eski adı korur. */
[data-theme="light"],
[data-rm-theme="light"] {
  --rm-bg:             #F4F5F8;
  --rm-surface:        #FFFFFF;
  --rm-surface-2:      #F7F8FB;
  --rm-surface-hover:  #EDEFF4;
  --rm-border:         rgba(15, 20, 35, 0.10);
  --rm-border-strong:  rgba(15, 20, 35, 0.18);
  --rm-text:           #1B1F2A;
  --rm-text-secondary: #4A5468;
  --rm-text-muted:     #656E82;

  /* Marka: mor kimlik aynı kalır. Açık zeminde İNCE tint ve METİN tonu değişir —
     #A99DFF beyaz üstünde 2,1:1 okunmaz, bir markanın adı okunmuyorsa marka değildir. */
  --rm-brand-text:     #5B49E0;
  --rm-brand-soft:     rgba(124, 107, 255, 0.10);
  --rm-brand-border:   rgba(124, 107, 255, 0.34);

  /* Semantik metin renkleri: koyu temadaki parlak tonlar beyaz üstünde düşüyor
     (#22C55E 2,3:1 → #0F5C2B 7,1:1 (yalnız 4,6 olan #15803D, kendi rozet zemininde 4,39 ile eşiğin altında kalıyordu); #F59E0B 2,1:1 → #B45309 4,7:1;
      #38BDF8 1,9:1 → #0369A1 5,5:1; #EF4444 3,8:1 → #C01B1B 5,5:1).
     Rozet ZEMİNLERİ (soft) aynı hue'da kalır, yalnız opaklık düşürülür. */
  --rm-success:        #0F5C2B;
  --rm-success-soft:   rgba(21, 128, 61, 0.10);
  --rm-warning:        #B45309;
  --rm-warning-soft:   rgba(180, 83, 9, 0.10);
  --rm-danger:         #C01B1B;
  --rm-danger-soft:    rgba(192, 27, 27, 0.09);
  --rm-info:           #0369A1;
  --rm-info-soft:      rgba(3, 105, 161, 0.09);
  --rm-neutral:        #5C6579;
  --rm-neutral-soft:   rgba(92, 101, 121, 0.10);
  /* Grafik — açık yüzey #FFFFFF; slot 3 kontrastı 2,8:1 → etiket/tablo görünümü şart (var) */
  --rm-chart-1:        #2a78d6;
  --rm-chart-2:        #eb6834;
  --rm-chart-3:        #1baf7a;
  --rm-chart-grid:     rgba(11, 11, 11, 0.08);
  --rm-chart-axis:     #656E82;

  --rm-shadow-sm: 0 1px 2px rgba(15,20,35,.06);
  --rm-shadow:    0 4px 16px rgba(15,20,35,.08);
  --rm-shadow-lg: 0 12px 32px rgba(15,20,35,.12);
}

/* Bridge: re-point the legacy variables at the V2 palette so screens that are
   still on the old markup inherit the new colours instead of clashing. */
:root {
  --bg-dark:      var(--rm-bg);
  --bg-card:      var(--rm-surface);
  --bg-card-2:    var(--rm-surface-2);
  --bg-input:     var(--rm-surface-2);
  --bg-hover:     var(--rm-surface-hover);
  --text-primary: var(--rm-text);
  --text-secondary: var(--rm-text-secondary);
  --text-muted:   var(--rm-text-muted);
  --border:       var(--rm-border);
  --border-subtle:var(--rm-border);
  --sidebar-bg:   var(--rm-surface);
  --card-bg:      var(--rm-surface);
  --navbar-bg:    color-mix(in srgb, var(--rm-bg) 88%, transparent);
  --primary:      var(--rm-brand);
  --primary-dark: var(--rm-brand-hover);
}

/* ---------------------------------------------------------------
   2. TYPOGRAPHY & BASE
   --------------------------------------------------------------- */
body {
  background: var(--rm-bg);
  color: var(--rm-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'cv02','cv03','cv04','ss01';
  -webkit-font-smoothing: antialiased;
}
.rm-h1 { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; color: var(--rm-text); line-height: 1.25; }
.rm-h2 { font-size: 1.0625rem; font-weight: 650; letter-spacing: -.01em; color: var(--rm-text); }
.rm-h3 { font-size: .9375rem; font-weight: 600; color: var(--rm-text); }
.rm-sub      { font-size: .8125rem; color: var(--rm-text-secondary); line-height: 1.5; }
.rm-muted    { font-size: .75rem;   color: var(--rm-text-muted); }
.rm-eyebrow  { font-size: .6875rem; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--rm-text-muted); }
.rm-num      { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }
/* MONEY AND COUNTS ARE ONE TOKEN. The dashboard regression the owner photographed
   was "₺742,20" broken character by character down a card. The cause was an
   `overflow-wrap: anywhere` on the value, but the invariant that prevents the whole
   class of bug is stated here once: a formatted number never wraps, anywhere in the
   product. Form controls are excluded — a textarea must still wrap. */
.rm-num:not(input):not(textarea) { white-space: nowrap; }
.rm-balance-val, .rm-total-val, .rm-pay-balance-val, .rm-svc-price-val,
.rm-orow-charge b, .rm-txrow-side b, .rm-subrow-side b { white-space: nowrap; }

/* ---------------------------------------------------------------
   3. BUTTONS  — Primary / Secondary / Ghost / Danger
   --------------------------------------------------------------- */
.rm-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  height: 38px; padding: 0 .875rem;
  border-radius: var(--rm-radius); border: 1px solid transparent;
  font-size: .8125rem; font-weight: 600; line-height: 1; white-space: nowrap;
  cursor: pointer; transition: background var(--rm-t), border-color var(--rm-t), color var(--rm-t), opacity var(--rm-t);
  text-decoration: none;
}
.rm-btn:focus-visible { outline: 2px solid var(--rm-brand); outline-offset: 2px; }
.rm-btn[disabled], .rm-btn.is-loading { opacity: .55; cursor: not-allowed; pointer-events: none; }
.rm-btn i { font-size: .8125rem; }

.rm-btn-primary   { background: var(--rm-brand-cta); color: #fff; }
.rm-btn-primary:hover  { background: var(--rm-brand-cta-hover); }
.rm-btn-primary:active { background: var(--rm-brand-active); }

.rm-btn-secondary  { background: var(--rm-surface-2); color: var(--rm-text); border-color: var(--rm-border-strong); }
.rm-btn-secondary:hover { background: var(--rm-surface-hover); border-color: var(--rm-brand-border); }

.rm-btn-ghost  { background: transparent; color: var(--rm-text-secondary); }
.rm-btn-ghost:hover { background: var(--rm-surface-hover); color: var(--rm-text); }

.rm-btn-danger { background: var(--rm-danger-soft); color: var(--rm-danger); border-color: rgba(239,68,68,.28); }
.rm-btn-danger:hover { background: var(--rm-danger); color: #fff; }

.rm-btn-sm  { height: 32px; padding: 0 .625rem; font-size: .75rem; }
.rm-btn-lg  { height: 44px; padding: 0 1.125rem; font-size: .875rem; }
.rm-btn-block { width: 100%; }

/* ---------------------------------------------------------------
   4. SURFACES / CARDS
   --------------------------------------------------------------- */
.rm-card {
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-lg);
  box-shadow: var(--rm-shadow-sm);
}
.rm-card-pad    { padding: 1rem; }
.rm-card-header {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  padding: .875rem 1rem; border-bottom: 1px solid var(--rm-border);
}
.rm-card-body   { padding: 1rem; }
.rm-card-hover  { transition: border-color var(--rm-t), background var(--rm-t); }
.rm-card-hover:hover { border-color: var(--rm-brand-border); background: var(--rm-surface-2); }

/* ---------------------------------------------------------------
   4b. DASHBOARD ONBOARDING — "Başlarken (2/3)"
   The markup existed (panel.js rmRenderOnboarding) but NO stylesheet ever defined
   these classes, so it rendered as raw block elements: the title, then the close
   button on its own line, then three links run together. Three steps, each a
   compact pill, the done ones quietened; one header row with the count and the
   dismiss control. Nothing here promises anything — it only shows real-fact flags.
   --------------------------------------------------------------- */
.rm-onboarding { padding: .875rem 1rem; border-color: var(--rm-brand-border); }
.rm-onboarding-head {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  margin-bottom: .625rem;
}
.rm-onboarding-title {
  margin: 0; display: inline-flex; align-items: center; gap: .5rem;
  font-size: .875rem; font-weight: 700; color: var(--rm-text);
}
.rm-onboarding-title i { color: var(--rm-brand-text); }
.rm-onboarding-tasks { display: flex; flex-wrap: wrap; gap: .5rem; }
.rm-onboarding-task {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .75rem; border-radius: 10px;
  background: var(--rm-surface-2); border: 1px solid var(--rm-border);
  color: var(--rm-text); font-size: .8125rem; font-weight: 600; text-decoration: none;
  transition: border-color var(--rm-t), background var(--rm-t);
}
.rm-onboarding-task:hover { border-color: var(--rm-brand-border); background: var(--rm-brand-soft); }
.rm-onboarding-check { display: inline-flex; font-size: .875rem; color: var(--rm-text-muted); }
.rm-onboarding-task.is-done { color: var(--rm-text-muted); font-weight: 500; }
.rm-onboarding-task.is-done .rm-onboarding-check { color: var(--rm-success); }
.rm-onboarding-task.is-done > span:last-child { text-decoration: line-through; text-decoration-color: var(--rm-border-strong); }
@media (max-width: 640px) {
  .rm-onboarding-tasks { flex-direction: column; }
  .rm-onboarding-task { width: 100%; }
}

/* ---------------------------------------------------------------
   4c. REFERRAL PROGRAMME (/referans)
   Rebuilt on the V2 shell (2026-09-16); the page had been left on the legacy
   .main-content theme with no invitee detail at all. One link card with the
   three tier rates beside it, the shared stat tiles, and the invitee table on
   .data-table so it inherits the same one-token cell rules as every other list.
   --------------------------------------------------------------- */
.rm-aff-link { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 1.25rem; padding: 1.125rem 1.25rem; border-color: var(--rm-brand-border); }
.rm-aff-link-label { margin: 0 0 .5rem; font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-text-muted); }
.rm-aff-link-row { display: flex; gap: .5rem; align-items: center; }
.rm-aff-link-input { flex: 1 1 auto; min-width: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; cursor: text; }
.rm-aff-link-hint { margin: .5rem 0 0; font-size: .75rem; color: var(--rm-text-muted); }
.rm-aff-link-hint code { color: var(--rm-brand-text); font-weight: 700; }
.rm-aff-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.rm-aff-tiers > div {
  display: flex; flex-direction: column; gap: .125rem; padding: .625rem .75rem;
  background: var(--rm-surface-2); border: 1px solid var(--rm-border); border-radius: 10px; min-width: 0;
}
.rm-aff-tier-k { font-size: .625rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-text-muted); }
.rm-aff-tiers b { font-size: 1.25rem; font-weight: 700; color: var(--rm-brand-text); font-variant-numeric: tabular-nums; }
.rm-aff-tier-s { font-size: .6875rem; color: var(--rm-text-secondary); line-height: 1.3; }
.rm-aff-user { display: inline-flex; align-items: center; gap: .375rem; font-weight: 600; color: var(--rm-text); white-space: nowrap; }
.rm-aff-user i { color: var(--rm-text-muted); }
.rm-aff-note { margin: 0; padding: .75rem 1rem; font-size: .75rem; line-height: 1.5; color: var(--rm-text-secondary); border-top: 1px solid var(--rm-border); }
.rm-aff-note i { color: var(--rm-brand-text); margin-right: .25rem; }
.rm-aff-steps { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.rm-aff-steps li { display: flex; gap: .625rem; align-items: flex-start; min-width: 0; }
.rm-aff-steps b {
  flex: 0 0 28px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--rm-brand-soft); color: var(--rm-brand-text); font-size: .8125rem; font-weight: 700;
}
.rm-aff-steps strong { display: block; font-size: .8125rem; color: var(--rm-text); }
.rm-aff-steps span { display: block; margin-top: .125rem; font-size: .75rem; line-height: 1.45; color: var(--rm-text-secondary); }
@media (max-width: 1023px) {
  .rm-aff-link { grid-template-columns: 1fr; }
  .rm-aff-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .rm-aff-link-row { flex-direction: column; align-items: stretch; }
  .rm-aff-tiers { grid-template-columns: 1fr; }
  .rm-aff-steps { grid-template-columns: 1fr; }
}

/* Stat tile — compact, no giant empty space */
.rm-stat { padding: .875rem 1rem; display: flex; flex-direction: column; gap: .3rem; min-width: 0; }

/* Dashboard account insights (status mix, average order, platform mix). Bars are plain
   divs with an inline width percentage — no chart library, nothing to load. */
.rm-insight-grid { display: grid; gap: 1.25rem; padding: 0 1rem 1rem; grid-template-columns: 1fr; }
@media (min-width: 720px)  { .rm-insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .rm-insight-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rm-insight { min-width: 0; }
.rm-insight-title { font-size: .8125rem; font-weight: 600; color: var(--rm-text-secondary); margin-bottom: .75rem; }
.rm-insight-big { font-size: 1.75rem; font-weight: 800; letter-spacing: -.02em; }
.rm-insight-note { font-size: .6875rem; color: var(--rm-text-muted); margin-top: .5rem; }
.rm-insight-bars { display: flex; flex-direction: column; gap: .625rem; }
.rm-insight-bar-head { display: flex; justify-content: space-between; gap: .75rem; font-size: .75rem; margin-bottom: .25rem; }
.rm-insight-bar-head span:first-child { color: var(--rm-text-secondary); overflow-wrap: anywhere; }
.rm-insight-bar-head span:last-child { color: var(--rm-text-muted); flex-shrink: 0; }
.rm-insight-track { height: 6px; border-radius: 999px; background: var(--rm-surface-2, rgba(255,255,255,.06)); overflow: hidden; }
.rm-insight-fill { display: block; height: 100%; border-radius: 999px; background: var(--rm-brand); }
.rm-insight-fill.is-success { background: #34d399; }
.rm-insight-fill.is-warning { background: #fbbf24; }
.rm-insight-fill.is-danger  { background: #f87171; }
.rm-insight-fill.is-info    { background: var(--rm-brand); }
.rm-insight-fill.is-neutral { background: var(--rm-text-muted); }
.rm-stat-label { font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-text-muted); }
.rm-stat-value { font-size: 1.375rem; font-weight: 700; letter-spacing: -.02em; color: var(--rm-text); font-variant-numeric: tabular-nums; }
.rm-stat-foot  { font-size: .6875rem; color: var(--rm-text-secondary); }
.rm-stat-foot a { color: var(--rm-brand-text); text-decoration: none; }
.rm-stat-foot a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------
   5. STATUS BADGES — icon + text, never colour alone
   --------------------------------------------------------------- */
.rm-badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .1875rem .5rem; border-radius: 999px;
  font-size: .6875rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
  border: 1px solid transparent;
}
.rm-badge i { font-size: .625rem; }
.rm-badge-neutral { background: var(--rm-neutral-soft); color: var(--rm-neutral); border-color: rgba(135,146,168,.24); }
.rm-badge-info    { background: var(--rm-info-soft);    color: var(--rm-info);    border-color: rgba(56,189,248,.24); }
.rm-badge-brand   { background: var(--rm-brand-soft);   color: var(--rm-brand-text); border-color: var(--rm-brand-border); }
.rm-badge-success { background: var(--rm-success-soft); color: var(--rm-success); border-color: rgba(34,197,94,.24); }
.rm-badge-warning { background: var(--rm-warning-soft); color: var(--rm-warning); border-color: rgba(245,158,11,.24); }
.rm-badge-danger  { background: var(--rm-danger-soft);  color: var(--rm-danger);  border-color: rgba(239,68,68,.24); }

/* ---------------------------------------------------------------
   6. FORMS
   --------------------------------------------------------------- */
.rm-field { display: block; margin-bottom: .875rem; }
.rm-label { display: block; font-size: .75rem; font-weight: 600; color: var(--rm-text-secondary); margin-bottom: .375rem; }
.rm-input, .rm-select, .rm-textarea {
  width: 100%; height: 38px; padding: 0 .75rem;
  background: var(--rm-surface-2); color: var(--rm-text);
  border: 1px solid var(--rm-border-strong); border-radius: var(--rm-radius);
  font-size: .8125rem; font-family: inherit;
  transition: border-color var(--rm-t), background var(--rm-t);
}
.rm-textarea { height: auto; padding: .625rem .75rem; min-height: 92px; resize: vertical; }
.rm-input::placeholder, .rm-textarea::placeholder { color: var(--rm-text-muted); }
.rm-input:focus, .rm-select:focus, .rm-textarea:focus {
  outline: none; border-color: var(--rm-brand); background: var(--rm-surface);
  box-shadow: 0 0 0 3px var(--rm-brand-soft);
}
.rm-search { position: relative; }
.rm-search .rm-input { padding-left: 2.125rem; }
.rm-search-icon { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: var(--rm-text-muted); font-size: .8125rem; pointer-events: none; }

/* ---------------------------------------------------------------
   7. TABLES
   --------------------------------------------------------------- */
.rm-table-wrap { width: 100%; overflow-x: auto; }
.rm-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .8125rem; }
/* 2026-10-08: thead had `position: sticky; top: 0` — it never stuck: every table sits in
   .rm-table-wrap (overflow-x: auto, which makes the wrapper a scroll container on both axes),
   and no table scrolls vertically inside it. Removed rather than left as a rule that looks
   like it works; a table that needs a pinned header must give its wrapper a max-height. */
.rm-table thead th {
  background: var(--rm-surface-2); color: var(--rm-text-muted);
  font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  text-align: left; padding: .625rem .75rem; white-space: nowrap;
  border-bottom: 1px solid var(--rm-border);
}
.rm-table tbody td { padding: .6875rem .75rem; border-bottom: 1px solid var(--rm-border); color: var(--rm-text-secondary); vertical-align: middle; }
.rm-table tbody tr:last-child td { border-bottom: 0; }
.rm-table tbody tr { transition: background var(--rm-t); }
.rm-table tbody tr:hover { background: var(--rm-surface-2); }
.rm-table .rm-cell-strong { color: var(--rm-text); font-weight: 600; }

/* ---------------------------------------------------------------
   8. SKELETONS & EMPTY STATES
   --------------------------------------------------------------- */
.rm-skel {
  background: linear-gradient(90deg, var(--rm-surface-2) 25%, var(--rm-surface-hover) 37%, var(--rm-surface-2) 63%);
  background-size: 400% 100%; border-radius: var(--rm-radius-sm);
  animation: rm-shimmer 1.4s ease infinite;
}
@keyframes rm-shimmer { 0% { background-position: 100% 50% } 100% { background-position: 0 50% } }
@media (prefers-reduced-motion: reduce) { .rm-skel { animation: none } }

.rm-empty { text-align: center; padding: 2.5rem 1.25rem; }
.rm-empty-icon {
  width: 44px; height: 44px; margin: 0 auto .75rem; border-radius: var(--rm-radius-lg);
  display: flex; align-items: center; justify-content: center;
  background: var(--rm-surface-2); border: 1px solid var(--rm-border);
  color: var(--rm-text-muted); font-size: 1rem;
}
.rm-empty-title { font-size: .875rem; font-weight: 600; color: var(--rm-text); margin-bottom: .25rem; }
.rm-empty-text  { font-size: .8125rem; color: var(--rm-text-secondary); margin-bottom: 1rem; }

/* ---------------------------------------------------------------
   9. APP SHELL
   --------------------------------------------------------------- */
body.rm-v2 { background: var(--rm-bg); }

/* --- Topbar --- */
.rm-topbar {
  position: fixed; inset: 0 0 auto 0; height: var(--rm-topbar-h); z-index: 1000;
  display: flex; align-items: center; gap: .75rem; padding: 0 .875rem;
  background: var(--rm-surface); border-bottom: 1px solid var(--rm-border);
}
.rm-topbar-left  { display: flex; align-items: center; gap: .625rem; min-width: 0; }
.rm-topbar-right { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.rm-topbar-title { font-size: .9375rem; font-weight: 650; color: var(--rm-text); letter-spacing: -.01em;
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-iconbtn {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: var(--rm-radius);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid transparent; color: var(--rm-text-secondary);
  cursor: pointer; transition: background var(--rm-t), color var(--rm-t), border-color var(--rm-t); position: relative;
}
.rm-iconbtn:hover { background: var(--rm-surface-hover); color: var(--rm-text); }
.rm-iconbtn:focus-visible { outline: 2px solid var(--rm-brand); outline-offset: 2px; }
.rm-dot {
  position: absolute; top: 5px; right: 5px; min-width: 15px; height: 15px; padding: 0 3px;
  border-radius: 999px; background: var(--rm-danger); color: #fff;
  font-size: .5625rem; font-weight: 700; line-height: 15px; text-align: center;
  border: 2px solid var(--rm-surface);
}

/* Balance pill — visible but not dominant */
.rm-balance {
  display: inline-flex; align-items: center; gap: .4rem; height: 34px; padding: 0 .625rem;
  background: var(--rm-surface-2); border: 1px solid var(--rm-border-strong); border-radius: var(--rm-radius);
}
.rm-balance i { color: var(--rm-brand-text); font-size: .75rem; }
.rm-balance-val { font-size: .8125rem; font-weight: 700; color: var(--rm-text); font-variant-numeric: tabular-nums; }
.rm-balance select {
  background: transparent; border: 0; color: var(--rm-text-muted); font-size: .75rem;
  cursor: pointer; padding: 0 0 0 .125rem; outline: none;
  align-self: stretch;   /* the pill is 34px; the select's own 18px was the only place the pointer could hit */
}
.rm-balance select option { background: var(--rm-surface); color: var(--rm-text); }

/* User chip */
.rm-userchip {
  display: inline-flex; align-items: center; gap: .5rem; height: 36px; padding: 0 .5rem 0 .375rem;
  background: transparent; border: 1px solid transparent; border-radius: var(--rm-radius);
  cursor: pointer; transition: background var(--rm-t), border-color var(--rm-t);
}
.rm-userchip:hover { background: var(--rm-surface-hover); border-color: var(--rm-border); }
.rm-avatar {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rm-brand); color: #fff; font-size: .6875rem; font-weight: 700;
}
.rm-avatar-lg { width: 34px; height: 34px; flex-basis: 34px; border-radius: 9px; font-size: .8125rem; }

/* --- Sidebar --- */
.rm-sidebar {
  position: fixed; top: var(--rm-topbar-h); bottom: 0; left: 0; width: var(--rm-sidebar-w); z-index: 990;
  display: flex; flex-direction: column;
  background: var(--rm-surface); border-right: 1px solid var(--rm-border);
  transition: transform var(--rm-t);
}
.rm-sidebar-scroll { flex: 1 1 auto; overflow-y: auto; padding: .75rem .625rem; scrollbar-width: thin; }
.rm-sidebar-scroll::-webkit-scrollbar { width: 6px; }
.rm-sidebar-scroll::-webkit-scrollbar-thumb { background: var(--rm-border-strong); border-radius: 3px; }
.rm-navgroup { margin-bottom: .875rem; }
.rm-navgroup-label { padding: 0 .625rem; margin-bottom: .3rem; font-size: .625rem; font-weight: 700;
                     letter-spacing: .09em; text-transform: uppercase; color: var(--rm-text-muted); }
.rm-navlink {
  display: flex; align-items: center; gap: .625rem; height: 36px; padding: 0 .625rem;
  border-radius: var(--rm-radius-sm); color: var(--rm-text-secondary);
  font-size: .8125rem; font-weight: 500; text-decoration: none;
  transition: background var(--rm-t), color var(--rm-t); position: relative;
}
.rm-navlink i { width: 17px; text-align: center; font-size: .8125rem; color: var(--rm-text-muted); transition: color var(--rm-t); }
.rm-navlink:hover { background: var(--rm-surface-hover); color: var(--rm-text); }
.rm-navlink:hover i { color: var(--rm-text-secondary); }
.rm-navlink.is-active { background: var(--rm-brand-soft); color: var(--rm-text); font-weight: 600; }
.rm-navlink.is-active i { color: var(--rm-brand-text); }
.rm-navlink.is-active::before {
  content: ''; position: absolute; left: -.625rem; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; border-radius: 0 3px 3px 0; background: var(--rm-brand);
}
.rm-navlink-badge {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--rm-danger); color: #fff; font-size: .625rem; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.rm-navlink-ext { margin-left: auto; font-size: .625rem; color: var(--rm-text-muted); }
.rm-navlink-admin.is-active, .rm-navlink-admin:hover { color: var(--rm-warning); }
.rm-navlink-admin i { color: var(--rm-warning); }

/* Sidebar footer: identity + balance + logout */
.rm-sidebar-foot { flex: 0 0 auto; border-top: 1px solid var(--rm-border); padding: .625rem; }
.rm-userbox { display: flex; align-items: center; gap: .5rem; padding: .375rem; border-radius: var(--rm-radius-sm); }
.rm-userbox-name { font-size: .8125rem; font-weight: 600; color: var(--rm-text); line-height: 1.2;
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-userbox-meta { font-size: .6875rem; color: var(--rm-text-muted); }
.rm-balancerow {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-top: .5rem; padding: .5rem .625rem;
  background: var(--rm-surface-2); border: 1px solid var(--rm-border); border-radius: var(--rm-radius-sm);
}
.rm-balancerow-label { font-size: .6875rem; color: var(--rm-text-muted); }
.rm-balancerow-val { font-size: .875rem; font-weight: 700; color: var(--rm-text); font-variant-numeric: tabular-nums; }

/* --- Content area --- */
.rm-main { padding-top: var(--rm-topbar-h); padding-left: var(--rm-sidebar-w); min-height: 100vh; }
/* max-width without auto margins pinned every panel screen to the left edge and left a
   growing empty strip on the right as the viewport widened (1920px → ~520px of nothing).
   .rm-main already reserves the sidebar with padding-left, so centring here centres the
   column inside the space that is actually left over, not inside the whole viewport. */
/* min-height: 0 — style.css still carries the old public-page `.rm-page { min-height: 100vh }`.
   Inside the shell .rm-main is already 100vh and carries the topbar padding, so a second
   100vh made every short page (/siparislerim …) scroll by the topbar + bottom-nav height. */
.rm-page { padding: 1.25rem; max-width: 1400px; margin-inline: auto; min-height: 0; }
.rm-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }

/* Dropdown panel */
.rm-menu {
  position: fixed; min-width: 214px; z-index: 1100;
  background: var(--rm-surface); border: 1px solid var(--rm-border-strong);
  border-radius: var(--rm-radius-lg); box-shadow: var(--rm-shadow-lg); overflow: hidden;
}
.rm-menu-head { padding: .75rem .875rem; border-bottom: 1px solid var(--rm-border); }
.rm-menu-item {
  display: flex; align-items: center; gap: .625rem; padding: .5625rem .875rem;
  font-size: .8125rem; color: var(--rm-text-secondary); text-decoration: none;
  background: none; border: 0; width: 100%; text-align: left; cursor: pointer;
  transition: background var(--rm-t), color var(--rm-t);
}
.rm-menu-item i { width: 15px; text-align: center; font-size: .75rem; }
.rm-menu-item:hover { background: var(--rm-surface-hover); color: var(--rm-text); }
.rm-menu-item.is-danger { color: var(--rm-danger); }
.rm-menu-item.is-danger:hover { background: var(--rm-danger-soft); }
.rm-menu-sep { height: 1px; background: var(--rm-border); }

/* ---------------------------------------------------------------
   10. MOBILE NAVIGATION
   --------------------------------------------------------------- */
.rm-bottomnav { display: none; }

@media (max-width: 1023px) {
  /**
   * BOTTOM CLEARANCE MUST MATCH THE BAR, INCLUDING THE SAFE AREA.
   *
   * The bar is `height: 58px` PLUS `padding-bottom: env(safe-area-inset-bottom)`, so
   * on a notched phone it occupies ~92px. This reserved a flat 64px, leaving roughly
   * 28px of content underneath a `position: fixed` element at z-index 990 — and a tap
   * in that band hits the navigation, not the card beneath it.
   *
   * That is mobile-only by construction: the bar does not exist above 1023px, which
   * is exactly why selecting a service works on desktop and can fail on a phone when
   * the card sits near the bottom of the viewport.
   */
  .rm-main { padding-left: 0; padding-bottom: var(--rm-bottomnav-space); }
  .rm-sidebar { transform: translateX(-100%); box-shadow: var(--rm-shadow-lg); width: 272px; }
  .rm-sidebar.open { transform: translateX(0); }

  /* Bottom tab bar — thumb-reachable core actions */
  /* Layering: bottom nav (990) sits under the scrim (994) and the drawer (996),
     so an open sidebar covers it instead of being cut off by it. */
  .rm-bottomnav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 990;
    height: var(--rm-bottomnav-h); padding-bottom: env(safe-area-inset-bottom);
    background: var(--rm-surface); border-top: 1px solid var(--rm-border);
  }
  .rm-bottomnav a {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: .625rem; font-weight: 600; color: var(--rm-text-muted); text-decoration: none;
    transition: color var(--rm-t); min-width: 0;
  }
  .rm-bottomnav a i { font-size: 1rem; }
  .rm-bottomnav a.is-active { color: var(--rm-brand-text); }
  .rm-bottomnav a span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  /* The CTA icon is lifted 10px above the bar for emphasis. `overflow: visible` on the
     bar lets it draw there, but the anchor's box — and therefore its hit area — stays
     inside the bar. Nothing here may grow the bar's clickable region. */
  .rm-bottomnav-cta { position: relative; }
  .rm-bottomnav-cta i {
    width: 34px; height: 34px; border-radius: 10px; background: var(--rm-brand); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; margin-top: -10px;
    box-shadow: 0 4px 12px var(--rm-brand-soft);
  }
  .rm-page { padding: 1rem .875rem; }
  .rm-topbar-title { display: none; }
}

/* Desktop keeps the sidebar permanently visible, so the hamburger is hidden.
   No !important needed: rados-v2.css is the last stylesheet, so it wins ties. */
@media (min-width: 1024px) { .rm-sidebar-toggle { display: none; } }

@media (max-width: 400px) {
  .rm-stat-value { font-size: 1.1875rem; }
  .rm-page { padding: .875rem .75rem; }
}

/* ---------------------------------------------------------------
   11. DASHBOARD
   --------------------------------------------------------------- */
.rm-statgrid { display: grid; gap: .75rem; grid-template-columns: repeat(2, minmax(0,1fr)); margin-bottom: 1rem; }
@media (min-width: 768px)  { .rm-statgrid { grid-template-columns: repeat(4, minmax(0,1fr)); } }

.rm-quick { display: grid; gap: .75rem; grid-template-columns: 1fr; margin-bottom: 1rem; }
@media (min-width: 640px) { .rm-quick { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.rm-grid-2 { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 1024px) { .rm-grid-2 { grid-template-columns: 1.6fr 1fr; align-items: start; } }

/* Compact order row used on the dashboard and as the mobile card elsewhere */
.rm-orderrow {
  display: flex; align-items: center; gap: .75rem; padding: .6875rem 1rem;
  border-bottom: 1px solid var(--rm-border); transition: background var(--rm-t); min-width: 0;
}
.rm-orderrow:last-child { border-bottom: 0; }
.rm-orderrow:hover { background: var(--rm-surface-2); }
.rm-orderrow-main { min-width: 0; flex: 1 1 auto; }
.rm-orderrow-title { font-size: .8125rem; font-weight: 600; color: var(--rm-text);
                     white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-orderrow-meta  { font-size: .6875rem; color: var(--rm-text-muted); margin-top: .125rem; }
.rm-orderrow-side  { text-align: right; flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; }
.rm-orderrow-amount{ font-size: .8125rem; font-weight: 700; color: var(--rm-text); font-variant-numeric: tabular-nums; }

/* Service chip (favourites / popular). Scoped to .rm-chiplist: a bare .rm-chip rule here
   used to collide with the unrelated small hero-badge <span class="rm-chip"> (style.css,
   loaded earlier) used on the homepage, /yorumlar and every public info page — equal
   specificity + later stylesheet meant this list-row styling (width:100%, cursor:pointer,
   bottom-border-only, transparent background) was winning and stretching that badge across
   ~85% of the hero instead of the small rounded pill it's supposed to be. Confirmed in a
   real browser before the fix. Every real .rm-chip service-row is already rendered inside
   a .rm-chiplist wrapper (panel.js), so this scoping changes nothing for it. */
.rm-chiplist { display: flex; flex-direction: column; }
.rm-chiplist .rm-chip {
  display: flex; align-items: center; gap: .625rem; padding: .5625rem 1rem;
  border-bottom: 1px solid var(--rm-border); cursor: pointer; transition: background var(--rm-t);
  background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left;
}
.rm-chiplist .rm-chip:last-child { border-bottom: 0; }
.rm-chiplist .rm-chip:hover { background: var(--rm-surface-2); }
.rm-chip-ico { width: 26px; height: 26px; flex: 0 0 26px; border-radius: 7px;
               display: inline-flex; align-items: center; justify-content: center;
               background: var(--rm-surface-2); font-size: .6875rem; }
.rm-chip-main { min-width: 0; flex: 1 1 auto; }
.rm-chip-name { font-size: .78125rem; font-weight: 600; color: var(--rm-text);
                white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rm-chip-meta { font-size: .6875rem; color: var(--rm-text-muted); }

/* Announcement strip — restrained, no emoji dependency */
.rm-notice {
  display: flex; align-items: flex-start; gap: .625rem; padding: .75rem .875rem;
  border-radius: var(--rm-radius); border: 1px solid var(--rm-border);
  background: var(--rm-surface); margin-bottom: .5rem;
}
.rm-notice-ico { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 6px;
                 display: inline-flex; align-items: center; justify-content: center; font-size: .6875rem; }
.rm-notice.is-info    { border-left: 3px solid var(--rm-info); }
.rm-notice.is-info    .rm-notice-ico { background: var(--rm-info-soft); color: var(--rm-info); }
.rm-notice.is-success { border-left: 3px solid var(--rm-success); }
.rm-notice.is-success .rm-notice-ico { background: var(--rm-success-soft); color: var(--rm-success); }
.rm-notice.is-warning { border-left: 3px solid var(--rm-warning); }
.rm-notice.is-warning .rm-notice-ico { background: var(--rm-warning-soft); color: var(--rm-warning); }
.rm-notice-title { font-size: .8125rem; font-weight: 600; color: var(--rm-text); }
.rm-notice-text  { font-size: .75rem; color: var(--rm-text-secondary); margin-top: .1875rem; line-height: 1.5;
                   white-space: pre-wrap; word-break: break-word; }

/* ---------------------------------------------------------------
   11c. NEW ORDER (/siparis)
   --------------------------------------------------------------- */
.rm-order-search { margin-bottom: .75rem; }
.rm-order-search .rm-input { height: 46px; font-size: .9375rem; padding-left: 2.5rem; padding-right: 2.5rem; }
.rm-order-search .rm-search-icon { left: .9375rem; font-size: .875rem; }
.rm-search-clear {
  position: absolute; right: .5rem; top: 50%; transform: translateY(-50%);
  width: 30px; height: 30px; border-radius: var(--rm-radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; color: var(--rm-text-muted); cursor: pointer;
}
.rm-search-clear:hover { background: var(--rm-surface-hover); color: var(--rm-text); }
/* Tailwind's `.hidden` loads BEFORE this file, so `.rm-search-clear { display: inline-flex }` won and the
   ✕ showed over an empty search box. Same specificity, later wins → raise it by one class. */
.rm-search-clear.hidden { display: none; }
/* `.rm-btn.hidden sm:inline-flex` (topbar "Bakiye yükle"): on a phone `.rm-btn { display: inline-flex }`
   beat `.hidden`. Only below 640px, where `sm:inline-flex` is not in play — at ≥640px the Tailwind
   variant (and .rm-btn itself) already make it a flex box. A global `.hidden { display: none !important }`
   would break the deliberately faded #sidebar-overlay.rm-scrim.hidden. */
@media (max-width: 639px) { .rm-btn.hidden { display: none; } }

/* Platform chips — horizontally scrollable on mobile */
/* Platform filter. The row scrolls INSIDE ITSELF; min-width:0 is what stops a long
   chip list from forcing its grid/flex parent wider and taking the whole page with
   it. Chips keep flex:0 0 auto and nowrap below, so labels never compress to an
   unreadable width — the row scrolls instead. */
.rm-chiprow {
  display: flex; gap: .375rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: .875rem;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  min-width: 0; max-width: 100%;
}
.rm-chiprow::-webkit-scrollbar { display: none; }
/* On a mouse-driven screen a hidden-scrollbar strip has NO affordance: nothing hints
   that Discord, Threads, Snapchat, Pinterest, Reddit… sit off to the right, and a wheel
   does not scroll sideways. So the chips looked like the complete list when they were
   its first third ("bazı uygulamalar eksik", 2026-09-16). Where there is room, show
   them all; the swipe strip stays for phones, where it is the natural gesture. */
@media (min-width: 1024px) {
  .rm-chiprow { flex-wrap: wrap; overflow-x: visible; padding-bottom: 0; row-gap: .375rem; }
}

/* Sort + filter bar under the platform chips (New Order). Two groups on one
   line, the count on the left; wraps to its own line on narrow screens. Small
   chips so the bar reads as a control strip, not as a second set of platforms. */
.rm-order-tools { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; min-width: 0; }
.rm-order-sort, .rm-order-filters { display: flex; gap: .3rem; flex-wrap: wrap; }
.rm-order-filters { padding-left: .625rem; border-left: 1px solid var(--rm-border); }
.rm-chipbtn-sm { height: 28px; padding: 0 .5625rem; font-size: .6875rem; gap: .3rem; }
.rm-order-kind { display: inline-flex; align-items: center; }
.rm-select-sm { height: 28px; padding: 0 1.75rem 0 .5625rem; font-size: .6875rem; font-weight: 600; border-radius: 999px; min-width: 7.5rem; }
@media (pointer: coarse) { .rm-select-sm { height: 36px; } }
.rm-chipbtn-sm i { font-size: .625rem; opacity: .85; }
.rm-chipbtn-filter.is-active { background: var(--rm-brand-soft); border-color: var(--rm-brand-border); color: var(--rm-brand-text); }
@media (max-width: 640px) {
  .rm-order-filters { padding-left: 0; border-left: 0; }
}
.rm-chipbtn {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: .375rem;
  height: 32px; padding: 0 .6875rem; border-radius: 999px;
  background: var(--rm-surface); border: 1px solid var(--rm-border);
  color: var(--rm-text-secondary); font-size: .75rem; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: background var(--rm-t), border-color var(--rm-t), color var(--rm-t);
}
.rm-chipbtn:hover { background: var(--rm-surface-hover); color: var(--rm-text); }
.rm-chipbtn.is-active { background: var(--rm-brand-soft); border-color: var(--rm-brand-border); color: var(--rm-text); }
.rm-chipbtn i { font-size: .75rem; }
.rm-chipbtn-count { color: var(--rm-text-muted); font-variant-numeric: tabular-nums; font-weight: 500; }

.rm-order-layout { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .rm-order-layout { grid-template-columns: minmax(0,1.9fr) minmax(320px,1fr); } }
.rm-order-listhead { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: .5rem; min-height: 18px; }
.rm-order-results { display: flex; flex-direction: column; gap: .5rem; }
.rm-order-more { margin-top: .75rem; }
@media (min-width: 1024px) { .rm-order-side { position: sticky; top: calc(var(--rm-topbar-h) + 1rem); } }

/* Service result row */
.rm-svc {
  display: flex; align-items: stretch; gap: 0;
  background: var(--rm-surface); border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-lg); overflow: hidden;
  transition: border-color var(--rm-t), background var(--rm-t);
}
.rm-svc:hover { border-color: var(--rm-brand-border); }
.rm-svc.is-selected { border-color: var(--rm-brand); background: var(--rm-surface-2); }
.rm-svc-main {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: .75rem;
  padding: .75rem .875rem; background: none; border: 0; text-align: left; cursor: pointer; color: inherit;
}
.rm-svc-ico {
  width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--rm-radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rm-surface-2); font-size: .875rem;
}
.rm-svc-body { min-width: 0; flex: 1 1 auto; display: block; }
.rm-svc-top { display: flex; align-items: baseline; gap: .5rem; min-width: 0; }
.rm-svc-id { font-size: .6875rem; font-weight: 700; color: var(--rm-brand-text); flex: 0 0 auto; }
.rm-svc-name {
  font-size: .8125rem; font-weight: 600; color: var(--rm-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.rm-svc-meta { display: flex; flex-wrap: wrap; gap: .625rem; margin-top: .1875rem; font-size: .6875rem; color: var(--rm-text-muted); }
/* When two rows in the SAME result set share a title, the line that DOES tell them
   apart stops being an aside and becomes the thing to read. Weight and colour only —
   no badge, no box, and the row itself is unchanged. */
/* The provider's own title, shown only on rows whose cleaned name is shared with another
   row. Deliberately quieter than the Rados name: it disambiguates, it does not headline. */
.rm-svc-raw {
  display: block; margin-top: .25rem; font-size: .6875rem; line-height: 1.35;
  color: var(--rm-text-muted); opacity: .85; overflow-wrap: anywhere;
}
/* The distinguishing detail, inline with the title. It is the reason this row is
   not the row above it, so it reads as part of the name — brand colour, not a
   badge, so a list of ten does not turn into a wall of chips. The name itself
   clips with an ellipsis, so this must not shrink away before the name does. */
.rm-svc-variant {
  margin-left: .375rem; font-weight: 600; font-size: .75rem;
  color: var(--rm-brand-text); white-space: nowrap;
}
/* The provider's own quality claim, carrying its attribution in the text. Quieter
   than everything Rados asserts itself, because it is someone else's promise. */
/* The title tail: refill term + speed, part of the title line but a step quieter than
   the name, so the eye reads "Instagram Takipçi — Türkiye · Telafi 30 gün · 150K/gün"
   as one statement of what is being bought. Never wraps on its own; the name clips. */
.rm-svc-tail { font-weight: 500; color: var(--rm-text-secondary); white-space: nowrap; }
/* The joint between name and tail is CSS, so the phone layout can drop it. */
.rm-svc-tail::before { content: ' · '; }
.rm-order-selected-name .rm-svc-tail { font-size: .8125rem; }

/* The provider's account-quality label beside the title: an outlined, muted chip —
   visibly a tag, never part of the name. Its tooltip names the source. */
.rm-svc-tag {
  display: inline-block; margin-left: .375rem; padding: 0 .375rem; vertical-align: 1px;
  font-size: .625rem; font-weight: 600; line-height: 1.15rem; white-space: nowrap;
  color: var(--rm-text-muted); border: 1px solid var(--rm-border-strong); border-radius: 999px;
}
/* Rados's own Turkish description of the selected service: prose the customer is
   meant to read before ordering, so it gets body weight, not aside weight. */
.rm-svc-desc {
  margin: .625rem 0 0; font-size: .75rem; line-height: 1.55;
  color: var(--rm-text-secondary);
}
/* Phone/desktop-only helpers for content that belongs in different places by width. */
@media (max-width: 767px) { .rm-desk-only { display: none !important; } }
@media (min-width: 768px) { .rm-phone-only { display: none !important; } }
/* The supplier's original sentence. Attribution is part of the content, not just
   the styling, but the styling reinforces it: quieter, and never mistaken for ours. */
.rm-provider-note {
  margin: .5rem 0 0; font-size: .6875rem; line-height: 1.5;
  color: var(--rm-text-muted); overflow-wrap: anywhere;
}
.rm-provider-note-src { font-weight: 600; opacity: .9; }
/* The untranslated provider prose is one click away, never the default view. */
.rm-provider-orig { margin-top: .375rem; }
.rm-provider-orig summary { cursor: pointer; font-size: .6875rem; color: var(--rm-text-muted); text-decoration: underline; text-underline-offset: 2px; }
.rm-provider-orig[open] summary { margin-bottom: .25rem; }
.rm-svc-meta.is-key { color: var(--rm-text-secondary); font-weight: 600; }
.rm-svc-meta.is-key .rm-svc-id { color: var(--rm-brand-text); }
.rm-svc-badges { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .375rem; }
.rm-svc-badges:empty { display: none; }
.rm-svc-price { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; align-items: flex-end; }
.rm-svc-price-val { font-size: .875rem; font-weight: 700; color: var(--rm-text); }
.rm-svc-price-unit { font-size: .625rem; color: var(--rm-text-muted); }
.rm-svc-fav {
  flex: 0 0 42px; background: none; border: 0; border-left: 1px solid var(--rm-border);
  color: var(--rm-text-muted); cursor: pointer; font-size: .8125rem;
  transition: color var(--rm-t), background var(--rm-t);
}
.rm-svc-fav:hover { background: var(--rm-surface-hover); color: var(--rm-warning); }
.rm-svc-fav.is-on { color: var(--rm-warning); }
/* Stage 4.2 — clean presenter names may wrap to two lines instead of being cut. */
.rm-svc-body .rm-svc-name {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  white-space: normal; overflow: hidden; line-height: 1.35;
}
/* Phone: the tail is its own line under "name + chip", wrapping freely. Kept inline it
   pushed "Instagram" onto a line of its own and clipped both the rate and the chip.
   Declared after the clamp rule above because it shares its specificity. */
@media (max-width: 767px) {
  .rm-svc-body .rm-svc-tail { display: block; white-space: normal; margin-top: .125rem; font-size: .75rem; }
  .rm-svc-body .rm-svc-tail::before { content: ''; }
  /* In the order summary the tail stays inline but may wrap with the prose. */
  .rm-order-selected-name .rm-svc-tail { white-space: normal; }
  /* No clamp on a phone. The title column is ~144px wide at 360px, so a long name, the
     chip and a wrapped tail can need five lines, and the clamp cut the rate — the most
     useful fact — off the end (measured 2026-09-16). Names are already capped at 90
     characters by the presenter, so there is nothing to guard against. */
  .rm-svc-body .rm-svc-name { -webkit-line-clamp: unset; }
}
.rm-svc-meta .rm-svc-id { color: var(--rm-brand-text); font-weight: 700; }
.rm-svc-price { min-width: 4.5rem; }
.rm-svc-price-unit { white-space: nowrap; }
/* Both the desktop summary AND the phone slot: on a phone rmSelectService() scrolls
   #rm-order-mobile-form, and without this margin its first row — the "Servis
   listesine dön" button — landed under the fixed topbar, unreachable (2026-09-16). */
#rm-order-summary { scroll-margin-top: calc(var(--rm-topbar-h) + .75rem); }
#rm-order-mobile-form { scroll-margin-top: calc(var(--rm-topbar-h) + .25rem); }
#rm-order-summary .rm-card-header .rm-h2 { flex: 1 1 auto; }
.rm-order-selected {
  display: flex; gap: .625rem; align-items: flex-start; margin-bottom: .75rem;
  padding: .625rem .75rem; border: 1px solid var(--rm-border-strong);
  border-radius: 12px; background: var(--rm-surface-2);
}
.rm-order-selected-name { font-size: .9375rem; font-weight: 650; color: var(--rm-text); line-height: 1.35; overflow-wrap: anywhere; }
.rm-dl { display: grid; gap: .25rem; margin: .25rem 0 .5rem; font-size: .75rem; }
.rm-dl > div { display: flex; gap: .75rem; justify-content: space-between; }
.rm-dl dt { color: var(--rm-text-muted); flex: 0 0 auto; }
.rm-dl dd { color: var(--rm-text-secondary); text-align: right; overflow-wrap: anywhere; min-width: 0; }
.rm-qty-presets { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: .5rem; }
/* PHONE HEIGHT BUDGET. With a coarse pointer every chip is 40px tall and the seven
   presets wrap to two rows; the form then runs past one 844px screen and the submit
   button's centre lands under the bottom nav's raised "+" (tap.mjs, 2026-09-16).
   One swipeable row keeps every preset reachable and gives the row back. */
@media (max-width: 767px) {
  .rm-qty-presets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: .125rem; }
  .rm-qty-presets::-webkit-scrollbar { display: none; }
  .rm-qty-presets .rm-chipbtn { flex: 0 0 auto; }
}
.rm-order-warn {
  margin-top: .5rem; padding: .5rem .625rem; border-radius: 10px;
  background: var(--rm-warning-soft); color: var(--rm-warning); font-size: .75rem;
}
.rm-order-warn a { color: inherit; font-weight: 700; }
.rm-order-back { display: none; }
@media (max-width: 1023px) {
  .rm-order-back { display: inline-flex; }
  /* A chosen service opens the form in place of the long list — tablet only. */
  .rm-order-layout.is-form-open > section { display: none; }
}

/* Search V3.1: weaker matches stay hidden until the customer asks for them. */
.rm-order-results:not(.show-weak) .rm-svc.is-weak { display: none; }
.rm-order-weaknote { color: var(--rm-text-muted); font-weight: 400; }

/* Order summary */
.rm-summary-name { margin-bottom: .625rem; line-height: 1.35; }
.rm-summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .5rem; margin-bottom: .25rem; }
.rm-summary-grid > div { display: flex; flex-direction: column; gap: .125rem; }
.rm-summary-grid span { font-size: .625rem; }
.rm-summary-grid b { font-size: .78125rem; color: var(--rm-text); }
.rm-details { margin: .625rem 0; }
.rm-details > summary {
  cursor: pointer; font-size: .75rem; font-weight: 600; color: var(--rm-brand-text);
  list-style: none; padding: .375rem 0;
}
.rm-details > summary::-webkit-details-marker { display: none; }
.rm-details > summary::before { content: '▸ '; color: var(--rm-text-muted); }
.rm-details[open] > summary::before { content: '▾ '; }
.rm-details > p { font-size: .75rem; color: var(--rm-text-secondary); line-height: 1.6; white-space: pre-wrap; }
/* F39 (Faz 3): contextual help tips — a lighter-weight variant of .rm-details for a short inline hint, not a content section. */
.rm-help-tip { margin: .375rem 0; }
.rm-help-tip > summary { font-size: .6875rem; font-weight: 500; color: var(--rm-text-muted); }
.rm-help-tip > summary i { margin-right: .25rem; }
.rm-drip { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; padding-top: .375rem; }
.rm-total {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: .875rem; padding: .75rem .875rem;
  background: var(--rm-surface-2); border: 1px solid var(--rm-border); border-radius: var(--rm-radius);
}
.rm-total-val { font-size: 1.125rem; font-weight: 700; color: var(--rm-text); }
.rm-total-note { margin-top: .375rem; text-align: center; }
/* Kademe indirimi satırı (2026-09-21). 22.09: sahibin bildirdiği üzere üstü çizili LİSTE
   FİYATI okunmuyordu — rakamlar soluk renkteydi ve çizgi tam basamakların üstünden geçince
   ₺882,46 ile ₺802,46 ayırt edilemiyordu. Para rakamı yanlış okunursa müşteri yanılır, o yüzden:
   liste fiyatının üstü ARTIK ÇİZİLMİYOR. Anlamı 'indirimi' kelimesi ve eksi tutar zaten taşıyor;
   çizgi yalnızca basamakları kapatıyordu. Rakam okunur renkte, satır büyütüldü. */
.rm-order-discount { color: var(--rm-success, #34d399); font-size: .8125rem; line-height: 1.6; }
.rm-order-discount .rm-listprice {
  color: var(--rm-text-secondary);
  font-variant-numeric: tabular-nums;
  text-decoration: none;   /* üstü çizili DEĞİL: çizgi basamakların üstünden geçiyordu */
}

/* Admin dashboard (2026-09-21): today's registrations beside the total, one-line context under each metric */
.admin-metric strong .rm-metric-delta { display: inline-block; margin-left: .35rem; font-size: .8125rem; font-weight: 700; font-style: normal; color: var(--rm-success, #22C55E); vertical-align: middle; }
.admin-metric small { display: block; margin-top: .25rem; font-size: .75rem; color: var(--rm-text-muted); }
.rm-finance-table td:first-child { color: var(--rm-text-muted); white-space: nowrap; }
.rm-finance-table td, .rm-finance-table th { padding: .5rem .75rem; }
/* Sistem sağlık kontrolü */
.rm-health-summary { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .75rem; }
.rm-health-pill { font-size: .75rem; font-weight: 700; padding: .2rem .6rem; border-radius: 999px; background: var(--rm-surface-2, rgba(255,255,255,.06)); }
.rm-health-pill.is-fail { color: #f87171; } .rm-health-pill.is-warn { color: #fbbf24; } .rm-health-pill.is-ok { color: #34d399; }
.rm-health-group { font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--rm-text-muted); margin: .875rem 0 .375rem; }
.rm-health-rows { display: grid; gap: .25rem; }
.rm-health-row { display: flex; gap: .625rem; align-items: flex-start; padding: .5rem .625rem; border-radius: 10px; border: 1px solid var(--rm-border); background: var(--rm-surface); font-size: .8125rem; }
.rm-health-row > div { min-width: 0; } .rm-health-row span { color: var(--rm-text-muted); margin-left: .25rem; } .rm-health-row em { display: block; font-style: normal; color: var(--rm-text-muted); font-size: .75rem; margin-top: .125rem; }
.rm-health-row.is-fail { border-color: rgba(248,113,113,.45); } .rm-health-row.is-warn { border-color: rgba(251,191,36,.35); }
.rm-health-badge { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 800; }
.rm-health-badge.is-ok { background: rgba(52,211,153,.15); color: #34d399; } .rm-health-badge.is-warn { background: rgba(251,191,36,.15); color: #fbbf24; } .rm-health-badge.is-fail { background: rgba(248,113,113,.18); color: #f87171; }
/* /destek: the ticket call-to-action sits first */
.rm-support-cta { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.rm-support-cta .rm-h2 { margin: 0 0 .25rem; } .rm-support-cta .rm-sub { margin: 0; }
.rm-support-cta .rm-btn { flex: 0 0 auto; min-height: 44px; }
@media (max-width: 767px) { .rm-support-cta { flex-direction: column; align-items: stretch; } }

@media (max-width: 1023px) {
  .rm-svc-price-val { font-size: .8125rem; }
  .rm-order-side { margin-top: .25rem; }
}

/**
 * PHONE ORDER LAYOUT (<= 767px) — deliberately plain.
 *
 * The desktop aside is REMOVED from the layout, not hidden with dimensions intact:
 * an empty element that still occupies space is exactly the kind of thing that can
 * sit over a result card and swallow a tap. `display: none` takes it out of layout
 * and out of hit testing.
 *
 * Everything else is normal flow: results are relative, unlayered and tappable, and
 * the form appears above them in the same column. No overlay, no fixed pane, no
 * transform, no off-canvas, no z-index stack to reason about.
 */
@media (max-width: 767px) {
  .rm-order-side { display: none; }
  .rm-order-layout { display: block; }
  .rm-order-layout > section { display: block; }
  .rm-order-results { position: relative; z-index: auto; pointer-events: auto; }
  .rm-svc, .rm-svc-main { pointer-events: auto; }
  .rm-order-mobile-form { margin-bottom: .75rem; }
  .rm-order-mobile-form .rm-card { border-color: var(--rm-brand-border); }
}
@media (max-width: 430px) {
  .rm-svc-main { padding: .625rem .75rem; gap: .625rem; }
  .rm-svc-meta { gap: .5rem; }
  .rm-summary-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}

/* ---------------------------------------------------------------
   11b. LEGACY COMPATIBILITY LAYER
   style.css styles the shell through ID selectors (#navbar, #sidebar,
   #sidebar-overlay), which out-specify the .rm-* classes above. These rules
   raise specificity to match, WITHOUT editing or deleting anything in
   style.css — so unmigrated screens keep their existing behaviour.
   --------------------------------------------------------------- */
#navbar.rm-topbar {
  height: var(--rm-topbar-h);
  background: var(--rm-surface);
  border-bottom: 1px solid var(--rm-border);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  padding: 0 .875rem;
  display: flex; align-items: center; gap: .75rem;
  /* style.css still carries an OLD homepage header under the same class name:
     `.rm-topbar { max-width: 1120px; margin: 0 auto; width: var(--rm-container) }` and, under
     900px, `width: min(96vw, 680px)`. On a phone that made the panel bar 96vw wide and centred
     (a visible inset), and in a 700-900px window a 680px bar floating in the middle with the
     avatar off-screen (owner's screenshot, 2026-09-20). The bar is the viewport, full stop. */
  width: auto; max-width: none; margin: 0; left: 0; right: 0;
}
#navbar.rm-topbar.scrolled { box-shadow: var(--rm-shadow-sm); }

#sidebar.rm-sidebar {
  width: var(--rm-sidebar-w);
  top: var(--rm-topbar-h); bottom: 0; min-height: 0;
  background: var(--rm-surface);
  border-right: 1px solid var(--rm-border);
  z-index: 990; padding-bottom: 0;
  overflow: hidden;                     /* inner .rm-sidebar-scroll scrolls instead */
  display: flex; flex-direction: column;
}
#sidebar-overlay.rm-scrim { display: none; background: rgba(0,0,0,.55); z-index: 985; }

/* Pages still on the legacy .main-content wrapper: realign to the V2 shell.
   padding-top needs !important only because the legacy rule already uses it. */
.main-content {
  margin-left: var(--rm-sidebar-w);
  padding-top: calc(var(--rm-topbar-h) + 1rem) !important;
}

/* Same centring problem as .rm-page, different mechanics: these legacy screens reserve
   the sidebar with margin-left, so a max-width alone cannot centre them. Reserving the
   sidebar with padding instead lets margin-inline:auto centre the column inside the
   leftover space. Below 1024px the sidebar is off-canvas and this must not apply. */
@media (min-width: 1024px) {
  .main-content {
    margin-inline: auto;
    /* + the page's own gutter: this rule outranks the legacy .p-6, and reserving exactly the
       sidebar width left every legacy admin screen flush against the sidebar edge. */
    padding-left: calc(var(--rm-sidebar-w) + 1.5rem);
    max-width: calc(1400px + var(--rm-sidebar-w));
  }
}

@media (max-width: 1023px) {
  #sidebar.rm-sidebar { width: 272px; transform: translateX(-100%); box-shadow: var(--rm-shadow-lg); z-index: 996; }
  #sidebar.rm-sidebar.open { transform: translateX(0); }
  #sidebar-overlay.rm-scrim { display: block; opacity: 0; pointer-events: none; transition: opacity var(--rm-t); z-index: 994; }
  #sidebar-overlay.rm-scrim:not(.hidden) { opacity: 1; pointer-events: auto; }
  .main-content { margin-left: 0; padding-bottom: 72px; }
}

/* 2026-10-03 (sahip kararı): Arapça panel — kenar çubuğu RTL'de sağa aynalanır.
   rados-i18n.js LANG=ar iken <html dir="rtl"> koyar; üst çubuk flex olduğu için yönü kendiliğinden
   döner, yalnız fiziksel left/right ile kurulan kabuk (sabit kenar çubuğu, ana alan boşluğu,
   telefon çekmecesi — yukarıdaki kuralların aynası, yeni katman değil) burada aynalanır.
   dir="rtl" yokken hiçbir kural etkilenmez. */
[dir="rtl"] .rm-sidebar,
[dir="rtl"] #sidebar.rm-sidebar { left: auto; right: 0; border-right: 0; border-left: 1px solid var(--rm-border); }
[dir="rtl"] .rm-main { padding-left: 0; padding-right: var(--rm-sidebar-w); }
[dir="rtl"] .rm-main.rm-nosidebar { padding-right: 0; }
[dir="rtl"] .main-content { margin-left: 0; margin-right: var(--rm-sidebar-w); }
@media (min-width: 1024px) {
  [dir="rtl"] .main-content { margin-inline: auto; padding-left: 1.5rem; padding-right: calc(var(--rm-sidebar-w) + 1.5rem); }
}
@media (max-width: 1023px) {
  [dir="rtl"] .rm-main { padding-right: 0; }
  [dir="rtl"] .main-content { margin-right: 0; }
  [dir="rtl"] .rm-sidebar,
  [dir="rtl"] #sidebar.rm-sidebar { transform: translateX(100%); }
  [dir="rtl"] .rm-sidebar.open,
  [dir="rtl"] #sidebar.rm-sidebar.open { transform: translateX(0); }
}
/* RTL aynası sonu */

/* ---------------------------------------------------------------
   12. UTILITIES
   --------------------------------------------------------------- */
.rm-divider { height: 1px; background: var(--rm-border); margin: .625rem 0; }
.rm-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.rm-scrim { position: fixed; inset: 0; z-index: 985; background: rgba(0,0,0,.55); backdrop-filter: blur(2px); }
body.no-scroll { overflow: hidden; }
.rm-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
         clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------
   14. STAGE 4 — DASHBOARD V3
   --------------------------------------------------------------- */

/* Header: greeting left, primary actions right; stacks on mobile. */
.rm-dash-head {
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
  gap: .75rem; margin-bottom: 1rem;
}
.rm-dash-greet { min-width: 0; }
.rm-dash-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
@media (max-width: 639px) {
  .rm-dash-head { flex-direction: column; align-items: stretch; }
  .rm-dash-actions { width: 100%; }
  /* Both primary actions stay reachable with a thumb, side by side. */
  .rm-dash-actions .rm-btn { flex: 1 1 0; min-width: 0; justify-content: center; }
}

/* Analytics V2: scoped controls, same existing palette. */
#analytics-tabs button { flex: 0 0 auto; }
.rm-analytics-toolbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; align-items: center; }
.rm-analytics-toolbar > select { grid-column: 1 / -1; }
@media (min-width: 720px) {
  .rm-analytics-toolbar { grid-template-columns: minmax(160px, 1fr) minmax(160px, 1fr) minmax(160px, 1fr) auto; }
  .rm-analytics-toolbar > select { grid-column: auto; }
}
/*
 * Stat cards. Every child is block-level and explicitly so: the reported
 * "BAKİYE₺742,20" defect is what happens when a label and a value are inline
 * siblings and the flex container is disturbed. These cannot collapse.
 */
.rm-stat-top   { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.rm-stat-label { display: block; }
.rm-stat-value { display: block; line-height: 1.2; }
.rm-stat-foot  { display: block; }
.rm-stat-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px; flex: 0 0 26px;
  background: var(--rm-surface-2); color: var(--rm-text-muted); font-size: .75rem;
}

/* Quick service search */
.rm-quicksearch { padding: .875rem 1rem; margin-bottom: 1rem; position: relative; }
.rm-quicksearch-label {
  display: block; font-size: .75rem; font-weight: 600;
  color: var(--rm-text-secondary); margin-bottom: .5rem;
}
.rm-quicksearch-row { position: relative; }
.rm-quicksearch-ico {
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  color: var(--rm-text-muted); font-size: .8125rem; pointer-events: none;
}
.rm-quicksearch-input { padding-left: 2.25rem; width: 100%; }
/* RESULTS SURFACE.
   This was a transparent stack of rows sitting directly on the form card, so on
   Subscriptions and Bulk Order the suggestions blended into the page and did not read
   as a thing you could choose from. It is now a real elevated panel: a lighter
   surface than the card behind it, a border you can actually see, and a shadow that
   says it floats above the form.
   Scrolling stays INSIDE the panel — a dropdown must never become page-tall. */
.rm-quicksearch-results {
  margin-top: .5rem; display: flex; flex-direction: column; gap: .125rem;
  max-height: 320px; overflow-y: auto;
  background: var(--rm-surface-2);
  border: 1px solid var(--rm-border-strong);
  border-radius: var(--rm-radius-lg);
  box-shadow: var(--rm-shadow-lg);
  padding: .375rem;
  position: relative; z-index: 40;
}
/* An empty/loading/error message needs the same padding as a row so the panel does
   not collapse to a sliver. */
.rm-quicksearch-results .rm-quicksearch-empty { padding: .625rem .5rem; margin: 0; }
/* flex-shrink:0 is load-bearing. The results panel is a flex column capped at
   320px. An explicit min-height on the item REPLACES the default `min-height:auto`
   that would otherwise stop a flex item shrinking below its content — so with a
   dozen results the items were squeezed to exactly min-height, and a two-line row
   (name + descriptor) spilled over the row beneath it. That is the overlapping
   dropdown on Toplu Sipariş. Items keep their size; the panel scrolls. */
.rm-quicksearch-item {
  flex-shrink: 0;
  display: flex; align-items: center; gap: .625rem; width: 100%;
  padding: .5rem .625rem; border-radius: 10px; border: 1px solid transparent;
  background: transparent; text-align: left; cursor: pointer; min-height: 44px;
}
.rm-quicksearch-item:hover,
.rm-quicksearch-item.is-active,
.rm-quicksearch-item:focus-visible {
  background: var(--rm-surface-2); border-color: var(--rm-border);
}
.rm-quicksearch-item-ico { flex: 0 0 20px; text-align: center; font-size: .9375rem; }
.rm-quicksearch-item-main { display: flex; flex-direction: column; min-width: 0; gap: .0625rem; }
.rm-quicksearch-item-name {
  font-size: .8125rem; font-weight: 600; color: var(--rm-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rm-quicksearch-item-price {
  flex: 0 0 auto; margin-left: auto; padding-left: .5rem;
  font-size: .75rem; font-weight: 700; color: var(--rm-text); white-space: nowrap;
}
.rm-quicksearch-item-meta { font-size: .6875rem; color: var(--rm-text-muted); }
.rm-quicksearch-empty { font-size: .8125rem; color: var(--rm-text-secondary); padding: .5rem .25rem; }
.rm-quicksearch-empty a { color: var(--rm-brand-text); }

/* ---------------------------------------------------------------
   15. STAGE 4 — TRANSACTION SEMANTICS
   --------------------------------------------------------------- */

/*
 * The amount tone is driven by the OUTCOME, not by the money direction.
 * `.is-neutral` and `.is-muted-danger` exist so an unsettled or failed credit
 * is never painted with the success colour.
 */
.rm-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rm-amount.is-success      { color: var(--rm-success); }
.rm-amount.is-danger       { color: var(--rm-danger); }
.rm-amount.is-neutral      { color: var(--rm-text-secondary); }
.rm-amount.is-muted-danger { color: var(--rm-text-secondary); text-decoration: line-through; text-decoration-thickness: 1px; }

/* Transaction rows: desktop row, mobile card. */
.rm-txlist { display: flex; flex-direction: column; }
.rm-txrow {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .75rem .25rem; border-bottom: 1px solid var(--rm-border);
}
.rm-txrow:last-child { border-bottom: 0; }
.rm-txrow.is-unsettled { opacity: .92; }
.rm-txrow-ico {
  flex: 0 0 32px; width: 32px; height: 32px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center; font-size: .75rem;
  background: var(--rm-surface-2); color: var(--rm-text-secondary);
}
.rm-txrow-ico.is-success { background: var(--rm-success-soft); color: var(--rm-success); }
.rm-txrow-ico.is-danger  { background: var(--rm-danger-soft);  color: var(--rm-danger); }
.rm-txrow-ico.is-warning { background: var(--rm-warning-soft, var(--rm-surface-2)); color: var(--rm-warning, var(--rm-text-secondary)); }
.rm-txrow-main  { flex: 1 1 auto; min-width: 0; }
.rm-txrow-title { font-size: .8125rem; font-weight: 600; color: var(--rm-text); }
.rm-txrow-desc  { font-size: .75rem; color: var(--rm-text-secondary); overflow-wrap: anywhere; }
.rm-txrow-meta  { font-size: .6875rem; color: var(--rm-text-muted); margin-top: .125rem; }
.rm-txrow-side  { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; flex: 0 0 auto; }

@media (max-width: 639px) {
  /* Card layout: the amount and badge move under the title instead of being
     squeezed into a narrow right-hand column. */
  .rm-txrow {
    flex-wrap: wrap; gap: .5rem .75rem;
    padding: .75rem; margin-bottom: .5rem; border: 1px solid var(--rm-border);
    border-radius: 12px; background: var(--rm-surface);
  }
  .rm-txrow-main { flex: 1 1 100%; order: 2; }
  .rm-txrow-ico  { order: 1; }
  .rm-txrow-side {
    order: 3; flex: 1 1 auto; flex-direction: row; align-items: center;
    justify-content: space-between; width: 100%;
  }
  .rm-txrow .rm-iconbtn { order: 1; margin-left: auto; }
}

/* ---------------------------------------------------------------
   16. STAGE 4 — SERVICE PICKER, SUBSCRIPTIONS
   --------------------------------------------------------------- */
.rm-field { margin-bottom: .75rem; min-width: 0; }
.rm-field-wide { grid-column: 1 / -1; }
.rm-label {
  display: block; font-size: .75rem; font-weight: 600;
  color: var(--rm-text-secondary); margin-bottom: .3125rem;
}

/* The chosen service, shown as a confirmed selection rather than a raw ID. */
.rm-selected-service {
  display: flex; align-items: center; gap: .625rem; margin-top: .5rem;
  padding: .625rem .75rem; border: 1px solid var(--rm-border-strong);
  border-radius: 12px; background: var(--rm-surface-2);
}
.rm-selected-main { display: flex; align-items: center; gap: .625rem; min-width: 0; flex: 1 1 auto; }
.rm-selected-ico  { flex: 0 0 22px; text-align: center; font-size: 1rem; }
.rm-selected-text { min-width: 0; }
.rm-selected-name {
  font-size: .8125rem; font-weight: 600; color: var(--rm-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rm-selected-meta { font-size: .6875rem; color: var(--rm-text-muted); }

.rm-subform { padding: 1.125rem; margin-bottom: 1.25rem; max-width: 42rem; }
.rm-subform-grid { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .rm-subform-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Estimated cost — always labelled as an estimate. */
.rm-estimate {
  border: 1px dashed var(--rm-border-strong); border-radius: 12px;
  padding: .75rem; background: var(--rm-surface-2);
}
.rm-estimate-row {
  display: flex; justify-content: space-between; gap: .75rem;
  font-size: .8125rem; color: var(--rm-text-secondary); padding: .125rem 0;
}
.rm-estimate-row strong { color: var(--rm-text); }
.rm-estimate-note { font-size: .6875rem; color: var(--rm-text-muted); margin-top: .375rem; }

/* Stage 4.2 — subscriptions: numbered steps, form beside the list on desktop. */
.rm-subs-layout { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1200px) { .rm-subs-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.rm-subs .rm-subform { max-width: none; margin-bottom: 0; }
.rm-substeps { list-style: none; margin: .875rem 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .875rem; }
.rm-substep { min-width: 0; }
.rm-substep-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .375rem; }
.rm-substep-head .rm-label { margin: 0; }
.rm-substep-hint { margin-top: .25rem; }
.rm-subs-listtitle { margin-bottom: .625rem; }
.rm-subform-note { margin-top: .5rem; text-align: center; }
.rm-estimate-empty { font-size: .8125rem; color: var(--rm-text-muted); }
.rm-estimate-warn { font-size: .75rem; color: var(--rm-warning); margin-top: .25rem; }

.rm-sublist { display: flex; flex-direction: column; }
.rm-subrow {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .75rem .25rem; border-bottom: 1px solid var(--rm-border);
}
.rm-subrow:last-child { border-bottom: 0; }
.rm-subrow-main  { flex: 1 1 auto; min-width: 0; }
.rm-subrow-title { font-size: .8125rem; font-weight: 600; color: var(--rm-text); }
.rm-subrow-meta  { font-size: .6875rem; color: var(--rm-text-muted); margin-top: .125rem; }
.rm-subrow-warn  { color: var(--rm-warning); font-weight: 600; }

/* F06 (Faz 3): evidence-based quality card — New Order form */
.rm-order-quality:empty { display: none; }
.rm-order-quality { margin: .5rem 0; padding: .625rem .75rem; border-radius: .625rem; background: var(--bg-input); }
.rm-order-quality-row { font-size: .75rem; color: var(--rm-text); margin: 0; }
.rm-order-quality-row + .rm-order-quality-row { margin-top: .375rem; }

/* F18 (Faz 3): period statement summary — Hareketler ("Dönem ekstresi") */
.rm-bhstatement { display: flex; flex-wrap: wrap; gap: 1.5rem; padding: .875rem 1rem; margin-bottom: 1rem; }
.rm-bhstatement-row { display: flex; flex-direction: column; gap: .125rem; font-size: .75rem; color: var(--rm-text-muted); }
.rm-bhstatement-row strong { font-size: .9375rem; color: var(--rm-text); }
.rm-subrow-side  { display: flex; flex-direction: column; align-items: flex-end; gap: .375rem; flex: 0 0 auto; }
.rm-subrow-actions { display: flex; align-items: center; gap: .375rem; }

@media (max-width: 639px) {
  .rm-subrow {
    flex-direction: column; align-items: stretch;
    padding: .75rem; margin-bottom: .5rem;
    border: 1px solid var(--rm-border); border-radius: 12px; background: var(--rm-surface);
  }
  .rm-subrow-side { flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
}

/* ---------------------------------------------------------------
   22. STAGE 4.2 — FULL MOBILE PASS
   Acceptance at 360 / 390 / 430: document.documentElement.scrollWidth
   <= viewport width, except intentional internal scrollers (chip rows,
   .table-wrapper). These rules fix causes; the overflow clip at the end
   is a safety net, not a substitute.
   --------------------------------------------------------------- */

/* Topbar: the bottom nav already has "Menü", so the hamburger is redundant
   wherever the bottom nav exists. Admin pages have no bottom nav and keep it. */
@media (max-width: 1023px) {
  body:has(#rm-bottomnav) .rm-sidebar-toggle { display: none; }
}
@media (max-width: 480px) {
  .rm-topbar { gap: .375rem; padding: 0 .625rem; }
  .rm-topbar-left img { height: 22px !important; }
  .rm-balance { padding: 0 .5rem; gap: .3rem; }
  .rm-balance select { display: none; }          /* currency switch stays on wider screens */
  #user-menu-chevron { display: none; }
  .rm-userchip { padding: 0 .25rem; }
}

/* Inputs: at 16px iOS does not zoom the page when a field gets focus. */
@media (max-width: 1023px) {
  .rm-input, .rm-select, .rm-textarea,
  .input-field, select.input-field, textarea.input-field { font-size: 16px; }
}

/* Touch: primary targets of roughly 44px wherever the pointer is a finger. */
@media (pointer: coarse) {
  .rm-btn { min-height: 44px; }
  .rm-btn-sm { min-height: 40px; }
  .rm-iconbtn { width: 44px; height: 44px; flex-basis: 44px; }
  .rm-chipbtn { min-height: 40px; }
  .rm-input, .rm-select { height: 44px; }
  .rm-menu-item { min-height: 44px; }
  .rm-quicksearch-item { min-height: 48px; }
  .rm-navlink { height: 44px; }
}

/* Page heads: action buttons share the width instead of overflowing. */
@media (max-width: 639px) {
  .rm-page-head { flex-direction: column; align-items: stretch; }
  .rm-page-head .rm-dash-actions { width: 100%; }
  .rm-page-head .rm-dash-actions .rm-btn { flex: 1 1 auto; justify-content: center; }
}

/**
 * TOASTS — AND THE BUG THAT MADE THE WHOLE PANEL UNTAPPABLE ON A PHONE.
 *
 * #toast-container is a fixed, permanently-present, EMPTY and fully transparent
 * element. Its geometry was set by two rules that disagreed:
 *
 *   style.css   @media (max-width: 640px)   bottom: 12px !important;
 *                                           left: 0 !important; right: 0 !important;
 *   rados-v2.css @media (max-width: 1023px) top: calc(topbar + .5rem); bottom: auto;
 *
 * Same specificity (#id), but the legacy declarations carry !important, so at 640px
 * and below the element ended up with BOTH a top AND a bottom — which, on a fixed
 * element, does not mean 'anchored twice'. It means STRETCHED. The container became
 * a full-screen box at z-index 60 with pointer-events: auto, sitting over every page
 * in the panel, and it swallowed every tap: service cards, buttons, links.
 *
 * It is invisible (empty, no background), which is why it never appeared in a
 * screenshot and why three rounds of reading the order page found nothing wrong with
 * the order page. Nothing was wrong with the order page. Above 640px the legacy rule
 * stops applying, 'bottom: auto' wins, the box collapses to zero height and the same
 * markup works — which is exactly the breakpoint difference the owner measured.
 *
 * Two independent guarantees, because one of them failing is what caused this:
 *
 *   1. GEOMETRY. bottom is forced back to auto so the container is only ever as tall
 *      as the toasts inside it. !important here answers !important there; it is not
 *      decoration.
 *   2. HIT TESTING. The container never takes a pointer event at any width, ever.
 *      Only the toasts themselves do. Even if a future rule breaks the geometry
 *      again, a transparent container can no longer intercept a tap.
 */
#toast-container { pointer-events: none; }
#toast-container .toast,
#toast-container > * { pointer-events: auto; }

@media (max-width: 1023px) {
  #toast-container {
    top: calc(var(--rm-topbar-h) + .5rem);
    bottom: auto !important;          /* answers style.css's 'bottom: 12px !important' */
    left: .75rem; right: .75rem; width: auto; max-width: none; padding-right: 0;
    flex-direction: column;
    height: auto;
  }
  #toast-container .toast { min-width: 0; max-width: none; }
}

/* Legacy modal (/hizmetler order modal): fits a 360px screen. */
@media (max-width: 640px) {
  .modal-overlay { padding: .75rem; }
  .modal { padding: 1.25rem; border-radius: 16px; max-height: calc(100dvh - 1.5rem); }
}

/* Legacy screens still on .main-content (profile, support, API, referral):
   flex children may shrink, long tokens wrap, tables scroll inside their box. */
.main-content .flex-1 { min-width: 0; }
.main-content .font-mono, .main-content code { overflow-wrap: anywhere; }
.main-content pre { white-space: pre-wrap; overflow-wrap: anywhere; }
/* …EXCEPT inside a table cell. The rule above is the dashboard regression documented
   below, wearing a different hat: `anywhere` sets a cell's MIN-CONTENT width to one
   character, and an auto-layout table at width:100% shrinks its narrowest columns
   to exactly that. So "#165" became a four-line column and a payment reference hash
   came down one character per row (admin/siparişler, admin/ödemeler, 2026-09-16).
   In a table an id, a hash, a number or a badge is ONE token: it never wraps, and if
   the table is genuinely too wide the wrapper scrolls — that is what .table-wrapper
   {overflow-x:auto} is for. A long hash is clipped with an ellipsis at a sane width
   rather than dictating the layout; the full value is still in the DOM to copy. */
.data-table td.font-mono, .data-table td .font-mono, .data-table td code,
.data-table td .rm-num, .data-table td .badge, .data-table td .rm-badge,
.data-table td .status-badge {
  overflow-wrap: normal; white-space: nowrap;
}
.data-table td .font-mono:not(a), .data-table td.font-mono {
  max-width: 16rem; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom;
}
.data-table td .font-mono:not(a) { display: inline-block; }
/* A select-and-button action cell must not stack into a sliver either. */
.data-table td > select, .data-table td .input-field { min-width: 7.5rem; }
.data-table td { vertical-align: middle; }
.rm-page > *, .rm-card { min-width: 0; }

/* Safety net: nothing inside the app shell can widen the page. `clip` (unlike
   `hidden`) creates no scroll container, so position: sticky keeps working. */
.rm-main, .main-content { overflow-x: clip; }

/* The `hidden` attribute must win over any author `display`. The UA sheet's
   `[hidden]{display:none}` has lower priority than a class rule, so every element
   this stylesheet gives `display:flex/grid` kept rendering while hidden — an empty
   bordered strip under "Hızlı Sipariş" (the quicksearch results box, waiting for
   input), and the same for the bulk-order chosen/preview panels and the payment
   result card. One rule, highest sensible specificity, closes the whole class. */
[hidden]:not([hidden="until-found"]) { display: none !important; }

/* ---------------------------------------------------------------
   21. STAGE 4.2 — DASHBOARD V3 FINAL
   Label → value → one action, each on its own line and clearly ranked.
   --------------------------------------------------------------- */
/* ROOT CAUSE OF THE DASHBOARD REGRESSION — `overflow-wrap: anywhere` on the value.
   It was added to stop a long value overflowing its card. It does far worse than that:
   unlike `break-word`, `anywhere` IS taken into account when the browser computes a
   box's MIN-CONTENT size. So the value's min-content width became one character, the
   grid track `minmax(0, 1fr)` was free to shrink to almost nothing, and "₺742,20"
   broke character by character down the card. Everything the owner photographed
   followed from that single declaration: the stacked value, the label colliding with
   it, the action pill squeezed into a tiny vertical stack, and content trapped in a
   narrow inner column.

   The fix is the opposite instruction: a monetary value is ONE unbreakable token.
   It never wraps; if a card is genuinely too narrow for it, the value scrolls inside
   its own box rather than dictating the width of the grid. */
/* DASHBOARD STAT CARD — three zones, nothing else.
   ┌──────────────────────────┐
   │ Bakiye                ◉  │   label + optional icon
   │ ₺742,20                  │   value
   │ Bakiye Yükle          →  │   one action
   └──────────────────────────┘
   The card SURFACE is the container. No panel behind the label, no box behind
   the value, no pill around the action — every one of those was a box inside a
   box, and boxes inside boxes are what collapsed into vertical slivers when the
   column narrowed.

   Height comes from content: three short lines plus padding is ~140px. There is
   no min-height and no space-between, which is what created the empty middle. */
.rm-statgrid-dash .rm-stat {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .5rem;
  padding: 1rem;
  min-width: 0;
  background: var(--rm-surface);
  border: 1px solid var(--rm-border);
  border-radius: var(--rm-radius-lg);
}

/* Label row. The label takes the space, the icon keeps its 26px and never
   competes for it — the label was being squeezed into a 45px column and clipped
   to "BAKİ…". */
.rm-statgrid-dash .rm-stat-top {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  min-height: 26px; background: none; border: 0; padding: 0;
}
.rm-statgrid-dash .rm-stat-label {
  flex: 1 1 auto; min-width: 0;
  font-size: .6875rem; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--rm-text-muted);
  /* A label is words, not a number: if it ever does not fit it wraps rather than
     losing letters. "BAKİ…" told the customer nothing. */
  white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25;
}
.rm-statgrid-dash .rm-stat-ico {
  flex: 0 0 26px; width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--rm-surface-2);
  color: var(--rm-text-muted); font-size: .75rem;
}

/* A MONEY VALUE IS NEVER ABBREVIATED — see the note kept from ffbc99e.
   "₺124.582,90" as "₺124.5…" is not a shortened number, it is a different one.
   It stays whole and the type adapts instead. */
.rm-statgrid-dash .rm-stat-value {
  font-size: clamp(1.125rem, 1.05rem + .55vw, 1.625rem);
  font-weight: 750; letter-spacing: -.02em; line-height: 1.15;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  color: var(--rm-text);
  background: none; border: 0; padding: 0;
  min-width: 0;
}

/* One action, as text. margin-top:auto pins it to the bottom so four cards of
   slightly different content still line their actions up. */
.rm-statgrid-dash .rm-stat-foot {
  margin-top: auto; min-width: 0;
  background: none; border: 0; padding: 0;
  font-size: .8125rem; color: var(--rm-text-secondary);
}
.rm-statgrid-dash .rm-stat-action {
  display: inline-flex; align-items: center; gap: .375rem;
  padding: 0; border: 0; background: none; border-radius: 0;
  color: var(--rm-brand-text); font-size: .8125rem; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: color var(--rm-t);
}
.rm-statgrid-dash .rm-stat-action:hover { color: var(--rm-text); text-decoration: underline; }
.rm-statgrid-dash .rm-stat-action i { font-size: .625rem; transition: transform var(--rm-t); }
.rm-statgrid-dash .rm-stat-action:hover i { transform: translateX(2px); }
.rm-statgrid-dash .rm-stat-note { font-size: .8125rem; color: var(--rm-text-muted); }

/* The balance card is marked by its border only. A translucent gradient laid over
   the surface is what read as "decorative boxes overlapping real content". */
.rm-stat-brand { border-color: var(--rm-brand-border); }

/* Grid: four across only where four money values genuinely fit. */
.rm-statgrid-dash { display: grid; gap: .75rem; margin-bottom: 1rem;
                    grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1280px) { .rm-statgrid-dash { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 479px) {
  .rm-statgrid-dash { grid-template-columns: minmax(0, 1fr); }
  .rm-statgrid-dash .rm-stat { padding: .875rem; }
}
/* Quick order search — the most prominent control on the dashboard. */
.rm-quicksearch-lg { padding: 1rem 1.125rem; border-color: var(--rm-brand-border); }
.rm-quicksearch-lg .rm-quicksearch-label { font-size: .8125rem; color: var(--rm-text); }
.rm-quicksearch-lg .rm-quicksearch-input { height: 48px; font-size: 1rem; padding-left: 2.5rem; }
.rm-quicksearch-lg .rm-quicksearch-ico { left: .9375rem; font-size: .9375rem; }
.rm-quicksearch-hint { font-size: .6875rem; color: var(--rm-text-muted); margin-top: .375rem; }

/* ---------------------------------------------------------------
   20. STAGE 4.2 — BULK ORDER V2 (/toplu-siparis)
   --------------------------------------------------------------- */
.rm-seg { display: inline-flex; gap: .25rem; padding: .25rem; margin-bottom: .75rem;
  border: 1px solid var(--rm-border-strong); border-radius: var(--rm-radius-lg); background: var(--rm-surface); }
.rm-seg-btn { display: inline-flex; align-items: center; gap: .375rem; min-height: 40px; padding: 0 .875rem;
  border: 0; border-radius: var(--rm-radius); background: transparent; color: var(--rm-text-secondary);
  font-size: .8125rem; font-weight: 600; cursor: pointer; }
.rm-seg-btn.is-active { background: var(--rm-brand-soft); color: var(--rm-text); box-shadow: 0 0 0 1px var(--rm-brand-border) inset; }
.rm-seg-btn:focus-visible { outline: 2px solid var(--rm-brand); outline-offset: 2px; }
.rm-bulk-balance { font-size: .875rem; }
.rm-bulk-panel { padding: 1rem; margin-bottom: .75rem; }
.rm-bulk-colhead, .rm-bulk-row {
  display: grid; gap: .5rem; align-items: start;
  grid-template-columns: 1.75rem minmax(0, 2.2fr) minmax(0, 2fr) 7.5rem 2.75rem;
}
.rm-bulk-colhead { font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--rm-text-muted); padding: 0 0 .375rem; }
.rm-bulk-row { padding: .5rem 0; border-top: 1px solid var(--rm-border); }
.rm-bulk-row:first-child { border-top: 0; }
.rm-bulk-rowno { font-size: .75rem; font-weight: 700; color: var(--rm-text-muted); padding-top: .6875rem; text-align: center; }
.rm-bulk-svc, .rm-bulk-field { min-width: 0; position: relative; }
.rm-bulk-svc .rm-quicksearch-results {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin-top: .25rem; padding: .25rem;
  background: var(--rm-surface); border: 1px solid var(--rm-border-strong); border-radius: 12px; box-shadow: var(--rm-shadow-lg);
}
.rm-bulk-chosen { display: flex; align-items: center; gap: .5rem; padding: .375rem .5rem;
  border: 1px solid var(--rm-border-strong); border-radius: var(--rm-radius); background: var(--rm-surface-2); min-height: 38px; }
.rm-bulk-chosen-main { min-width: 0; flex: 1 1 auto; }
.rm-bulk-chosen-name { font-size: .78125rem; font-weight: 600; color: var(--rm-text); overflow-wrap: anywhere; line-height: 1.3; }
.rm-bulk-chosen-meta { font-size: .6875rem; color: var(--rm-text-muted); }
.rm-bulk-del { margin-top: 1px; }
.rm-bulk-format { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem;
  padding: .25rem .5rem; border-radius: 6px; background: var(--rm-surface-2); color: var(--rm-text); margin: .25rem 0 .625rem; }
.rm-bulk .rm-textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; margin-bottom: .375rem; }
.rm-bulk-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .625rem; margin: .75rem 0 1rem; }
.rm-bulk-preview { margin-bottom: 1rem; scroll-margin-top: calc(var(--rm-topbar-h) + .75rem); }
.rm-bulk-preview-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; justify-content: space-between; margin-bottom: .75rem; }
@media (min-width: 1024px) { .rm-statgrid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.rm-stat.is-ok .rm-stat-value { color: var(--rm-success); }
.rm-stat.is-bad .rm-stat-value { color: var(--rm-danger); }
.rm-stat.is-warn .rm-stat-value { color: var(--rm-warning); }
.rm-bulk-plist { padding: .25rem 0; margin: .75rem 0; }
.rm-bulk-prow { display: grid; grid-template-columns: 1.75rem 1.5rem minmax(0, 1fr) auto; gap: .5rem;
  align-items: start; padding: .625rem .875rem; border-bottom: 1px solid var(--rm-border); }
.rm-bulk-prow:last-child { border-bottom: 0; }
.rm-bulk-prow-no { font-size: .75rem; color: var(--rm-text-muted); font-weight: 700; padding-top: .0625rem; }
.rm-bulk-prow-ico { padding-top: .0625rem; }
.rm-bulk-prow.is-ok  .rm-bulk-prow-ico { color: var(--rm-success); }
.rm-bulk-prow.is-bad .rm-bulk-prow-ico { color: var(--rm-danger); }
.rm-bulk-prow.is-warn .rm-bulk-prow-ico { color: var(--rm-warning); }
.rm-bulk-prow-name { font-size: .8125rem; font-weight: 600; color: var(--rm-text); overflow-wrap: anywhere; }
.rm-bulk-prow-meta { font-size: .6875rem; color: var(--rm-text-muted); overflow-wrap: anywhere; }
.rm-bulk-prow-charge { font-size: .8125rem; font-weight: 700; color: var(--rm-text); white-space: nowrap; }
.rm-bulk-errs { margin: .25rem 0 0 1rem; list-style: disc; font-size: .75rem; color: var(--rm-danger); }
.rm-bulk-dupnote { font-size: .75rem; color: var(--rm-warning); margin-top: .125rem; }
.rm-bulk-dup { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--rm-text-secondary); min-height: 44px; }
.rm-bulk-result { padding: 1rem; display: flex; flex-direction: column; gap: .625rem; align-items: flex-start; }
.rm-bulk-result-title { font-weight: 650; color: var(--rm-text); }
.rm-bulk-result-title i { color: var(--rm-success); }

/* Confirmation dialog (shared component) */
.rm-modal-backdrop { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(0,0,0,.6); }
.rm-modal { width: 100%; max-width: 28rem; max-height: calc(100vh - 2rem); overflow: auto; padding: 1.25rem;
  background: var(--rm-surface); border: 1px solid var(--rm-border-strong); border-radius: var(--rm-radius-lg); box-shadow: var(--rm-shadow-lg); }
.rm-modal-text { font-size: .875rem; color: var(--rm-text-secondary); margin: .625rem 0; line-height: 1.55; }
.rm-modal-actions { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }

@media (max-width: 767px) {
  .rm-bulk-colhead { display: none; }
  .rm-bulk-row {
    grid-template-columns: 1.5rem minmax(0, 1fr) 2.75rem;
    grid-template-areas: "no svc del" "no link link" "no qty qty";
    padding: .75rem 0;
  }
  .rm-bulk-rowno { grid-area: no; }
  .rm-bulk-svc { grid-area: svc; }
  .rm-bulk-field:not(.rm-bulk-qty) { grid-area: link; }
  .rm-bulk-qty { grid-area: qty; }
  .rm-bulk-del { grid-area: del; width: 44px; height: 44px; flex-basis: 44px; }
  .rm-seg { display: flex; }
  .rm-seg-btn { flex: 1 1 0; justify-content: center; padding: 0 .5rem; font-size: .75rem; white-space: nowrap; }
  .rm-seg-btn i { display: none; }   /* three labels fit a 375px control only without their icons */
  .rm-bulk-actions .rm-btn-lg { flex: 1 1 100%; }
  .rm-modal-actions .rm-btn { flex: 1 1 0; height: 44px; }
}

/* ---------------------------------------------------------------
   19. STAGE 4.2 — ORDERS V2 (/siparislerim)
   Desktop: aligned rows. Phones: cards — never a squeezed table.
   --------------------------------------------------------------- */
.rm-ofilters { display: grid; gap: .625rem; grid-template-columns: 1fr 1fr; padding: .875rem; margin-bottom: .75rem; }
.rm-ofilters .rm-field { margin: 0; min-width: 0; }
.rm-ofilters-q { grid-column: 1 / -1; }
.rm-ofilters-clear { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 1024px) {
  .rm-ofilters { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) auto; align-items: end; }
  .rm-ofilters-q, .rm-ofilters-clear { grid-column: auto; }
}
.rm-orders-count { margin: 0 0 .5rem; min-height: 1em; }
/* /hareketler uses the same filter grid: type, status, from, to, go. */
.rm-bhfilters .rm-field:first-child { grid-column: auto; }
@media (min-width: 1024px) { .rm-bhfilters { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; } }
@media (max-width: 1023px) { .rm-bhfilters-go { grid-column: 1 / -1; } }
.rm-olist-card { padding: 0; overflow: hidden; }
.rm-olist { display: flex; flex-direction: column; }
.rm-olist-head, .rm-orow {
  display: grid; gap: .75rem; align-items: center;
  /* Actions hold Tekrarla + Detay + a copy icon ≈ 13rem. At 9rem, justify-content:flex-end
     pushed the overflow LEFT, straight over the status badge ("Tamaml…" + Tekrarla on
     top of each other, 2026-09-16). Sized for its content now, and it wraps as a last resort. */
  grid-template-columns: 5.75rem minmax(0, 2.4fr) 6.5rem 6.5rem 7.5rem 8.25rem 13rem;
}
@media (min-width: 1024px) and (max-width: 1279px) {
  /* Not enough width for seven columns: actions take their own line under the row. */
  .rm-olist-head, .rm-orow { grid-template-columns: 5.75rem minmax(0, 1fr) 6rem 6rem 7rem 8.25rem; }
  .rm-olist-head > :last-child { display: none; }
  .rm-orow-actions { grid-column: 1 / -1; justify-content: flex-end; padding-top: .25rem; }
}
.rm-olist-head {
  padding: .5rem 1rem; background: var(--rm-surface-2); border-bottom: 1px solid var(--rm-border);
  font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-text-muted);
}
.rm-orow { padding: .75rem 1rem; border-bottom: 1px solid var(--rm-border); min-width: 0; }
.rm-orow:last-child { border-bottom: 0; }
.rm-orow:hover { background: var(--rm-surface-2); }
.rm-orow > * { min-width: 0; }
.rm-orow-id { display: flex; align-items: center; gap: .125rem; font-size: .8125rem; font-weight: 700; color: var(--rm-brand-text); }
.rm-orow-name { font-size: .8125rem; font-weight: 600; color: var(--rm-text); line-height: 1.35; overflow-wrap: anywhere; }
.rm-orow-meta { font-size: .6875rem; color: var(--rm-text-muted); margin-top: .125rem; }
.rm-orow-link {
  display: inline-block; max-width: 100%; margin-top: .25rem; font-size: .6875rem; color: var(--rm-brand-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; text-decoration: none;
}
.rm-orow-link:hover { text-decoration: underline; }
.rm-orow-qty, .rm-orow-charge, .rm-orow-date { font-size: .8125rem; color: var(--rm-text-secondary); display: flex; flex-direction: column; gap: .125rem; }
.rm-orow-charge b { color: var(--rm-text); }
.rm-orow-k { display: none; }
.rm-orow-sub { font-size: .625rem; color: var(--rm-text-muted); }
.rm-orow-progress { height: 5px; margin-top: .25rem; }
/* Explanatory copy for the two operational dispatch states (rm_order_status_note).
   Warning-toned, never danger: dispatch_unknown is not a failure, and painting it
   red would tell the customer their order is lost when it may well be running. */
.rm-orow-note {
  margin-top: .375rem; max-width: 22rem;
  font-size: .6875rem; line-height: 1.45; color: var(--rm-text-secondary);
  border-left: 2px solid var(--rm-warning); padding-left: .5rem;
}
/* Admin variant: same shape, operational wording, brand-neutral. */
.rm-admin-opnote {
  display: inline-block; margin-top: .25rem;
  font-size: .6875rem; line-height: 1.45; color: var(--rm-warning);
}
.rm-orow-actions { display: flex; align-items: center; justify-content: flex-end; gap: .25rem; flex-wrap: wrap; }
.rm-orow-status .rm-badge, .rm-orow-status .badge { white-space: nowrap; }
/* Faz 2-C: per-order timeline + cancellation/compensation request, toggled by "Detay". */
.rm-orow-detail {
  padding: .75rem 1rem; font-size: .75rem; color: var(--rm-text-secondary);
  background: var(--rm-surface-2); border-bottom: 1px solid var(--rm-border);
}
.rm-orow-detail:empty { display: none; }
.rm-otimeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
.rm-otimeline li { display: flex; align-items: baseline; gap: .625rem; flex-wrap: wrap; }
.rm-otimeline-date { flex: 0 0 auto; font-size: .6875rem; color: var(--rm-text-muted); white-space: nowrap; }
.rm-otimeline-label { color: var(--rm-text); }
.rm-orow-request { margin-top: .625rem; display: flex; flex-direction: column; gap: .5rem; max-width: 26rem; }
.rm-orow-request textarea { resize: vertical; min-height: 2.5rem; font-size: .75rem; }
.rm-orow-request-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.rm-orow-request-status { margin-top: .625rem; color: var(--rm-success); }
/* 2026-09-20: tracking code + review invitation rows in the order detail (rados-orders.js) */
.rm-orow-track, .rm-orow-review { margin-top: .625rem; display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .5rem; font-size: .8125rem; }
.rm-orow-track code { padding: .15rem .5rem; border-radius: 8px; background: var(--rm-bg-input, rgba(255,255,255,.06)); border: 1px solid var(--rm-border, rgba(255,255,255,.1)); letter-spacing: .04em; }
.rm-orow-request-note { margin-top: .375rem; font-size: .8125rem; }
/* Phase 2C — Rados Score badge (customer) + compare tag */
.rm-score-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; font-weight: 600; padding: .15rem .5rem; border-radius: 999px; border: 1px solid var(--rm-border); background: var(--rm-surface-2, rgba(255,255,255,.04)); }
.rm-score-badge.is-success { color: var(--rm-success); border-color: rgba(52,211,153,.35); }
.rm-score-badge.is-neutral { color: var(--rm-text); }
.rm-score-badge.is-muted { color: var(--rm-muted); font-weight: 500; }
.rm-compare-score { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .25rem 0; }
.rm-compare-tag { font-size: .75rem; font-weight: 600; padding: .15rem .5rem; border-radius: 999px; background: var(--rm-primary-soft, rgba(139,92,246,.15)); color: var(--rm-primary, #a78bfa); }
/* 2026-10-01 mobil denetimi — telefon bölümünün (12. PHONE PASS) önünde durur: orası sabit katman almaz;
   bu çubuk görünür ve yalnız müşteri servis seçince oluşur. */
/* Karşılaştırma çubuğu: hiç kuralı yoktu → <body> sonuna düz blok olarak düşüyor, telefonda uzun
   listenin dibinde ve sabit alt menünün ALTINDA kalıyordu; "Karşılaştır"a ulaşılamıyordu. */
.rm-compare-bar { position: fixed; left: .75rem; right: .75rem; bottom: calc(var(--rm-bottomnav-space) + .5rem); z-index: 985;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .5rem .75rem;
  background: var(--rm-surface); border: 1px solid var(--rm-border-strong); border-radius: var(--rm-radius-lg); box-shadow: var(--rm-shadow-lg); }
.rm-compare-bar .rm-num { margin-right: auto; font-size: .875rem; font-weight: 600; color: var(--rm-text); }
body:has(#rm-compare-bar) .rm-main { padding-bottom: calc(var(--rm-bottomnav-space) + 4.5rem); }
@media (min-width: 1024px) {
  .rm-compare-bar { left: auto; right: 1.5rem; bottom: 1.5rem; }
  body:has(#rm-compare-bar) .rm-main { padding-bottom: 5rem; }
}
.rm-compare-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.rm-orow-request-status .rm-link { margin-left: .375rem; text-decoration: underline; }
.rm-pager { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 1rem; }

@media (max-width: 1023px) {
  .rm-olist-card { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .rm-olist-head { display: none; }
  .rm-orow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "id id status" "svc svc svc" "qty charge date" "actions actions actions";
    gap: .625rem .75rem; padding: .875rem; margin-bottom: .625rem;
    border: 1px solid var(--rm-border); border-radius: var(--rm-radius-lg); background: var(--rm-surface);
  }
  .rm-orow:last-child { border-bottom: 1px solid var(--rm-border); }
  .rm-orow-id { grid-area: id; }
  .rm-orow-status { grid-area: status; justify-self: end; }
  .rm-orow-svc { grid-area: svc; }
  .rm-orow-qty { grid-area: qty; }
  .rm-orow-charge { grid-area: charge; }
  .rm-orow-date { grid-area: date; }
  .rm-orow-k { display: block; font-size: .625rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--rm-text-muted); }
  .rm-orow-actions { grid-area: actions; justify-content: flex-start; border-top: 1px solid var(--rm-border); padding-top: .625rem; }
  .rm-orow-actions .rm-btn { flex: 1 1 auto; height: 44px; }
  .rm-orow-actions .rm-iconbtn, .rm-orow-id .rm-iconbtn { width: 44px; height: 44px; flex-basis: 44px; }
  .rm-orow-name { font-size: .875rem; }
  .rm-orow-detail {
    margin: -.625rem 0 .625rem; border: 1px solid var(--rm-border); border-radius: var(--rm-radius-lg);
  }
}

/* ---------------------------------------------------------------
   18. STAGE 4.2 — ADD FUNDS V2 (/bakiye)
   AMOUNT → METHOD → SUMMARY → PAY. One column on phones.
   --------------------------------------------------------------- */
.rm-step-no {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 24px;
  width: 24px; height: 24px; border-radius: 999px; font-size: .75rem; font-weight: 700;
  background: var(--rm-brand-soft); color: var(--rm-brand-text); border: 1px solid var(--rm-brand-border);
}
.rm-pay-head { display: grid; gap: .75rem; margin-bottom: 1rem; }
@media (min-width: 768px) { .rm-pay-head { grid-template-columns: 1fr minmax(260px, 340px); align-items: center; } }
.rm-pay-balance { padding: .875rem 1rem; }
.rm-pay-balance-val { font-size: 1.625rem; font-weight: 750; letter-spacing: -.02em; color: var(--rm-text); line-height: 1.2; margin: .125rem 0; }
.rm-pay-balance-sub { display: flex; flex-wrap: wrap; gap: .25rem .875rem; font-size: .6875rem; color: var(--rm-text-muted); }
.rm-pay-balance-sub b { color: var(--rm-text-secondary); font-weight: 600; }

.rm-pay-layout { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; margin-bottom: 1rem; }
@media (min-width: 1024px) {
  .rm-pay-layout { grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); }
  .rm-pay-side { position: sticky; top: calc(var(--rm-topbar-h) + 1rem); }
}
.rm-pay-steps { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.rm-pay-step, .rm-pay-summary { padding: 1rem; }
.rm-pay-step-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .875rem; }

.rm-pay-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-bottom: .875rem; }
.rm-pay-preset {
  min-height: 48px; border-radius: var(--rm-radius); border: 1px solid var(--rm-border-strong);
  background: var(--rm-surface-2); color: var(--rm-text); font-size: .9375rem; font-weight: 650; cursor: pointer;
  transition: border-color var(--rm-t), background var(--rm-t), box-shadow var(--rm-t);
}
.rm-pay-preset:hover { border-color: var(--rm-brand-border); }
.rm-pay-preset.is-active { background: var(--rm-brand-soft); border-color: var(--rm-brand); box-shadow: 0 0 0 1px var(--rm-brand) inset; }
.rm-pay-preset:focus-visible, .rm-pay-method:focus-visible { outline: 2px solid var(--rm-brand); outline-offset: 2px; }
.rm-pay-amount { position: relative; margin-bottom: .375rem; }
.rm-pay-amount span { position: absolute; left: .875rem; top: 50%; transform: translateY(-50%); color: var(--rm-text-muted); font-weight: 600; }
.rm-pay-amount .rm-input { height: 48px; padding-left: 2rem; font-size: 1rem; font-weight: 600; }

.rm-pay-methods { display: grid; gap: .5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .rm-pay-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rm-pay-method {
  display: flex; align-items: flex-start; gap: .75rem; width: 100%; text-align: left; cursor: pointer;
  min-height: 64px; padding: .75rem .875rem; border-radius: var(--rm-radius-lg);
  border: 1px solid var(--rm-border-strong); background: var(--rm-surface-2); color: inherit;
  transition: border-color var(--rm-t), background var(--rm-t);
}
.rm-pay-method:hover { border-color: var(--rm-brand-border); }
.rm-pay-method.is-selected { border-color: var(--rm-brand); background: var(--rm-brand-soft); }
.rm-pay-method.is-unavailable { opacity: .6; }
.rm-pay-method-ico {
  flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; display: inline-flex;
  align-items: center; justify-content: center; background: var(--rm-surface); color: var(--rm-brand-text);
}
.rm-pay-method-main { display: flex; flex-direction: column; gap: .25rem; min-width: 0; flex: 1 1 auto; }
.rm-pay-method-name { font-size: .875rem; font-weight: 650; color: var(--rm-text); }
.rm-pay-method-tags { display: flex; flex-wrap: wrap; gap: .25rem; }
.rm-pay-method-limits { font-size: .6875rem; color: var(--rm-text-muted); }
.rm-pay-method.is-selected .rm-pay-method-limits { color: var(--rm-text-secondary); }   /* muted on the brand tint measured 4.33:1 */
.rm-pay-method-avail { font-size: .6875rem; }
.rm-pay-method-avail.is-ok { color: var(--rm-success); }
.rm-pay-method-avail.is-no { color: var(--rm-warning); }
.rm-pay-method-radio {
  flex: 0 0 18px; width: 18px; height: 18px; margin-top: .125rem; border-radius: 999px;
  border: 2px solid var(--rm-border-strong);
}
.rm-pay-method.is-selected .rm-pay-method-radio { border-color: var(--rm-brand); box-shadow: inset 0 0 0 4px var(--rm-brand); }

.rm-pay-coupon { padding: .75rem 1rem; }
.rm-pay-coupon > summary { cursor: pointer; font-size: .8125rem; font-weight: 600; color: var(--rm-brand-text); min-height: 32px; display: flex; align-items: center; }
.rm-pay-coupon-row { display: flex; gap: .5rem; margin: .5rem 0 .375rem; }
.rm-pay-coupon-row .rm-input { flex: 1 1 auto; min-width: 0; }

.rm-pay-lines { display: flex; flex-direction: column; margin-bottom: .875rem; }
.rm-pay-lines > div { display: flex; justify-content: space-between; gap: .75rem; padding: .4375rem 0; font-size: .875rem; }
.rm-pay-lines dt { color: var(--rm-text-secondary); }
.rm-pay-lines dd { color: var(--rm-text); font-weight: 600; text-align: right; }
.rm-pay-lines .is-total { border-top: 1px solid var(--rm-border-strong); margin-top: .25rem; padding-top: .625rem; }
.rm-pay-lines .is-total dt, .rm-pay-lines .is-total dd { color: var(--rm-text); font-weight: 750; font-size: 1rem; }
.rm-pay-lines .is-credit dd { color: var(--rm-success); }
.rm-pay-lines.is-compact > div { padding: .25rem 0; font-size: .8125rem; }
.rm-pay-empty { font-size: .8125rem; color: var(--rm-text-secondary); padding: .5rem 0 1rem; }
.rm-pay-problem { margin-top: .5rem; font-size: .75rem; color: var(--rm-warning); }
.rm-pay-note { margin-top: .5rem; text-align: center; }
.rm-pay-method-note { margin: -.375rem 0 .75rem; }
.rm-pay-result { padding: 1rem; margin-top: 1rem; display: flex; flex-direction: column; gap: .625rem; }
.rm-pay-result h3 i { color: var(--rm-success); }
.rm-pay-result.is-error { border-color: rgba(239,68,68,.35); color: var(--rm-danger); }
.rm-pay-ref { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .625rem .75rem;
  border-radius: 10px; background: var(--rm-warning-soft); color: var(--rm-warning); font-size: .75rem; }
.rm-pay-ref b { font-size: 1rem; color: var(--rm-text); }
/* ── Shopier ödeme talimatı: TAM EKRAN ────────────────────────────────────────
   Siparişi hesaba bağlayan tek şey müşterinin Shopier'de yazdığı e-posta. Bu bilgi
   yan sütundaki özet kartında gözden kaçıyordu; pencere artık ekranı kaplıyor ve
   müşteri okuduğunu işaretlemeden devam düğmesi etkinleşmiyor.
   Not: .rm-noscroll pencere açıkken arkadaki sayfanın kaymasını engeller. */
.rm-noscroll { overflow: hidden; }
.rm-handoff-backdrop {
  position: fixed; inset: 0; z-index: 1300; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(5, 7, 12, .78); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  overflow-y: auto; overscroll-behavior: contain;
}
.rm-handoff {
  width: 100%; max-width: 44rem; margin: auto;
  background: var(--rm-surface); border: 1px solid var(--rm-brand-border);
  border-radius: var(--rm-radius-lg); box-shadow: var(--rm-shadow-lg);
}
.rm-handoff-head {
  position: relative; padding: 1.5rem 1.5rem 1.125rem; text-align: center;
  border-bottom: 1px solid var(--rm-border); background: var(--rm-brand-soft);
  border-radius: var(--rm-radius-lg) var(--rm-radius-lg) 0 0;
}
.rm-handoff-ico {
  width: 56px; height: 56px; margin: 0 auto .75rem; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--rm-surface); border: 1px solid var(--rm-brand-border);
  color: var(--rm-brand-text); font-size: 1.5rem;
}
.rm-handoff-title { margin: 0; font-size: 1.375rem; font-weight: 800; color: var(--rm-text); letter-spacing: -.01em; }
.rm-handoff-sub { margin: .5rem auto 0; max-width: 34rem; font-size: .9375rem; line-height: 1.55; color: var(--rm-text-secondary); }
.rm-handoff-sub b { color: var(--rm-text); }
.rm-handoff-x {
  position: absolute; top: .75rem; right: .75rem; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: var(--rm-radius); cursor: pointer;
  color: var(--rm-text-muted); font-size: 1.125rem;
}
.rm-handoff-x:hover { background: var(--rm-surface-hover); color: var(--rm-text); }
.rm-handoff-body { padding: 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }

/* E-posta: sayfadaki en dikkat çeken öğe olmalı. */
.rm-handoff-mail {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  padding: .875rem 1rem; border-radius: var(--rm-radius-lg);
  background: var(--rm-surface-2); border: 1px solid var(--rm-brand-border);
}
.rm-handoff-mail-main { flex: 1 1 14rem; min-width: 0; }
.rm-handoff-mail-label { display: block; font-size: .75rem; color: var(--rm-text-muted); margin-bottom: .125rem; }
.rm-handoff-mail-value { display: block; font-size: 1.0625rem; font-weight: 700; color: var(--rm-text); overflow-wrap: anywhere; }

.rm-handoff-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .75rem; }
.rm-handoff-steps li { display: flex; gap: .75rem; align-items: flex-start; }
.rm-handoff-step-no {
  flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--rm-brand-soft); color: var(--rm-brand-text);
  font-size: .8125rem; font-weight: 800; border: 1px solid var(--rm-brand-border);
}
.rm-handoff-steps b { display: block; font-size: .9375rem; color: var(--rm-text); font-weight: 650; }
.rm-handoff-steps p { margin: .25rem 0 0; font-size: .8125rem; line-height: 1.55; color: var(--rm-text-secondary); }

.rm-handoff-facts { display: grid; gap: .5rem; padding: .875rem 1rem; border-radius: var(--rm-radius-lg);
  background: var(--rm-surface-2); border: 1px solid var(--rm-border); }
.rm-handoff-facts > div { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; align-items: baseline; }
.rm-handoff-facts dt { font-size: .8125rem; color: var(--rm-text-muted); }
.rm-handoff-facts dd { margin: 0; font-size: .9375rem; font-weight: 650; color: var(--rm-text); text-align: right; }
.rm-handoff-facts dd.is-credit { color: var(--rm-success); font-size: 1.0625rem; font-weight: 800; }

.rm-handoff-warn {
  display: flex; gap: .75rem; padding: .875rem 1rem; border-radius: var(--rm-radius-lg);
  background: var(--rm-warning-soft); border: 1px solid rgba(245, 158, 11, .3);
}
.rm-handoff-warn > i { color: var(--rm-warning); font-size: 1.0625rem; margin-top: .125rem; }
.rm-handoff-warn > div > b { display: block; font-size: .875rem; color: var(--rm-text); }
.rm-handoff-warn p b { color: var(--rm-text); }
.rm-handoff-warn p { margin: .25rem 0 0; font-size: .8125rem; line-height: 1.55; color: var(--rm-text-secondary); }
.rm-handoff-warn code { font-weight: 700; color: var(--rm-text); }

.rm-handoff-check {
  display: flex; gap: .625rem; align-items: flex-start; padding: .875rem 1rem;
  border-radius: var(--rm-radius-lg); background: var(--rm-surface-2);
  border: 1px solid var(--rm-border-strong); cursor: pointer; font-size: .9375rem; color: var(--rm-text);
}
.rm-handoff-check input { width: 20px; height: 20px; flex: 0 0 auto; margin-top: .0625rem; accent-color: var(--rm-brand); }

.rm-handoff-actions {
  display: flex; flex-wrap: wrap; gap: .625rem; justify-content: flex-end;
  padding: 1rem 1.5rem 1.25rem; border-top: 1px solid var(--rm-border);
}
/* Onaylanmadan geçilemez: görünür biçimde de sönük durur. */
.rm-handoff-go[aria-disabled="true"] { opacity: .45; cursor: not-allowed; }

@media (max-width: 767px) {
  .rm-handoff-backdrop { padding: 0; align-items: stretch; }
  .rm-handoff { max-width: none; min-height: 100%; border: 0; border-radius: 0; display: flex; flex-direction: column; }
  .rm-handoff-head { border-radius: 0; padding: 1.25rem 1rem 1rem; }
  .rm-handoff-title { font-size: 1.1875rem; }
  .rm-handoff-body { padding: 1rem; flex: 1 1 auto; }
  .rm-handoff-mail-value { font-size: 1rem; }
  /* Telefonda düğmeler ekranın altında, tam genişlikte ve parmak boyunda. */
  .rm-handoff-actions { padding: .875rem 1rem calc(.875rem + env(safe-area-inset-bottom)); }
  .rm-handoff-actions .rm-btn { flex: 1 1 100%; min-height: 48px; justify-content: center; }
}

/* ---------------------------------------------------------------
   9. YÖNETİM EKRANLARI — OKUNABİLİRLİK VE TELEFON (2026-09-22)
   Sahibin bildirdiği sorun: "bazı yerlerin erişimi zor, bazı yazıların
   okunması, bazı ayarların değiştirilmesi." Ölçüm (tests/browser/audit_all.mjs):
   tablo başlıkları 11,52px, durum rozetleri 10,88px, kenar çubuğu grup
   etiketleri 10px, onay kutuları masaüstünde 13×13, ve 7 ekranda tablo
   375px'lik ekranda 424–846px genişliğe çıkıp taşıyordu.
   --------------------------------------------------------------- */

/* 9a. Okunabilirlik: 12px altı metin bırakılmıyor. */
.data-table th { font-size: .75rem; letter-spacing: .04em; }
.data-table td { font-size: .8125rem; color: var(--rm-text-secondary); }
.status-badge, .badge { font-size: .75rem; }
.admin-hero p { font-size: .75rem; }

/* 9a-2. Masaüstünde sığma: kullanıcı tablosu 1015px iken kabı 932px idi, yani
   İŞLEM sütunu (yönetimin asıl düğmeleri) ekranın dışında kalıyordu. Dolgu biraz
   daraltılıp başlıkların sarmasına izin verilince aynı sütunlar sığıyor. Yine de
   sığmayan bir tabloda .table-wrapper kaydırmaya devam eder (yedek yol).
 */
.data-table th, .data-table td { padding: .625rem .75rem; }
.data-table th { white-space: normal; }

/* 9b. Dokunma/tıklama hedefleri. Onay kutusu 13×13 ile tıklanmıyordu. */
.data-table input[type="checkbox"],
.admin-check input[type="checkbox"],
.glass-card input[type="checkbox"],
.glass-card input[type="radio"] { width: 18px; height: 18px; accent-color: var(--rm-brand); }
@media (pointer: coarse) {
  .data-table input[type="checkbox"],
  .glass-card input[type="checkbox"],
  .glass-card input[type="radio"] { width: 22px; height: 22px; }
}

/* 9c. TELEFONDA TABLO → KART
   <td>'lerin data-label'ı panel.js'deki rmStampTableLabels() tarafından <th>'den
   yazılır. Burada satır bir karta, hücreler "etiket — değer" satırlarına döner;
   böylece yatay kaydırma tamamen kalkar. */
@media (max-width: 767px) {
  .table-wrapper { overflow-x: visible; border: 0; border-radius: 0; background: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table thead { display: none; }          /* başlıklar artık her hücrenin yanında */
  .data-table tr {
    border: 1px solid var(--rm-border); border-radius: var(--rm-radius-lg);
    background: var(--rm-surface-2); padding: .625rem .75rem; margin-bottom: .625rem;
  }
  .data-table tr:hover td, .data-table tbody tr:hover { background: none; }
  .data-table td {
    display: flex; gap: .75rem; align-items: flex-start; justify-content: space-between;
    padding: .375rem 0; border: 0; border-bottom: 1px solid var(--rm-border);
    text-align: right; overflow-wrap: anywhere;
  }
  .data-table tr td:last-child { border-bottom: 0; }
  .data-table td::before {
    content: attr(data-label);
    flex: 0 0 auto; max-width: 45%; text-align: left;
    color: var(--rm-text-muted); font-size: .6875rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .04em; padding-top: .125rem;
  }
  /* Etiketsiz hücre (seçim kutusu, işlem düğmeleri) tam genişlik kullanır. */
  .data-table td:not([data-label]) { justify-content: flex-start; text-align: left; }
  .data-table td:not([data-label])::before { content: none; }
  /* İşlem sütunu: düğmeler alt alta sıkışmasın, sarsın. */
  .data-table td .flex, .data-table td .space-x-2 { flex-wrap: wrap; justify-content: flex-end; }
  .data-table td .btn-sm { min-height: 36px; }
  /* "Kayıt yok" gibi tek hücreli boş durum satırı kart görünmesin. */
  .data-table tr:has(> td:only-child) { background: none; border: 0; padding: 0; text-align: center; }
  .data-table tr:has(> td:only-child) td { justify-content: center; text-align: center; }
}

/* Yönetim filtre şeritleri telefonda: yatay kaydırmada sondaki seçenekler ekran
   dışında kalıyor ve bulunamıyordu (ölçüm: /admin/odemeler 5, /admin/destek 2 taşma).
   Sarmak hepsini görünür kılar. Tablo saran düz .overflow-x-auto kapsayıcılar (flex
   değil) etkilenmez — orada kaydırma bilinçli. */
@media (max-width: 767px) {
  .main-content .flex.overflow-x-auto { flex-wrap: wrap; overflow-x: visible; }
}
/* Bronz rozeti koyu zeminde 4,49:1 ölçüldü (AA 4,5 ister). Tonu bir tık açıldı. */
.tier-bronze { color: #E0A46A; border-color: rgba(224, 164, 106, .38); }
/* ── Yönetim kabuğu okunabilirlik + dokunma (2026-09-22) ─────────────────────
   Ölçüm (tests/browser/audit_all.mjs): kenar çubuğu grup etiketleri 10px, bakiye
   etiketi 11px, üst çubuktaki logo bağlantısı 57×22, üyelik rozeti 67×15 idi.
   Bunlar .rm-* bileşenleri olduğu için köprüde değil BURADA düzeltilir. */
.rm-navgroup-label { font-size: .75rem; letter-spacing: .06em; }
.rm-balancerow-label { font-size: .75rem; }
.rm-topbar-left > a { display: inline-flex; align-items: center; min-height: 44px; }
.rm-userbox-meta { min-height: 32px; }
@media (max-width: 767px) { .data-table td .rm-btn-sm { min-height: 36px; } }

/* 9d. Ayar bölümleri telefonda: yatay kayan şeritte sekme aramak yerine
   iki grup alt alta, dokunulabilir satırlar. */
@media (max-width: 767px) {
  .rm-set-nav { flex-direction: column; overflow-x: visible; gap: .5rem; }
  .rm-set-navgroup { flex-direction: row; flex-wrap: wrap; gap: .375rem; }
  .rm-set-navgroup .rm-navgroup-label { display: block; width: 100%; margin: .25rem 0 0; }
  .rm-set-tab { flex: 1 1 calc(50% - .1875rem); min-height: 44px; justify-content: flex-start; }
}

/* Shopier yönetimi (admin) — sipariş kartları, paket satırları, abonelikler. */
/* .rm-card kendi başına padding taşımaz (padding .rm-card-pad / .rm-card-header / .rm-card-body
   ile gelir). Bu ekranın bölümleri düz .rm-card olduğu için padding burada, kapsam içinde verilir
   — global .rm-card'a dokunmak paneldeki her kartı bozardı. */
#shopier-admin > .rm-card { padding: 1rem; margin-bottom: .875rem; }
#shopier-admin > .rm-card > .rm-h2 { margin: 0 0 .5rem; }
#shopier-admin .rm-card-header { padding: 0; margin-bottom: .5rem; }
/* Uzun durum metni ('Kapalı — Ayarlar → Ödeme API') satırı taşırmasın: değer küçülebilsin. */
#shopier-admin .rm-dl dd { flex: 1 1 auto; }
#shopier-admin .rm-dl { font-size: .8125rem; }
.rm-shopier-order { padding: .75rem .875rem; margin-bottom: .625rem; }
.rm-shopier-order-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .375rem; }
.rm-shopier-order-head b { margin-left: auto; font-size: 1rem; color: var(--rm-text); }
.rm-shopier-order .rm-muted { margin: .125rem 0; font-size: .75rem; overflow-wrap: anywhere; }
.rm-shopier-assign { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .625rem; }
.rm-shopier-assign .rm-input { flex: 1 1 14rem; min-width: 0; }
.rm-shopier-pkg { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; align-items: center; }
.rm-shopier-pkg .rm-input:first-child { flex: 0 0 7rem; }
.rm-shopier-pkg .rm-input:nth-child(2) { flex: 1 1 18rem; min-width: 0; }
.rm-shopier-pkg-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.rm-shopier-hook { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .5rem 0; border-top: 1px solid var(--rm-border); }
.rm-shopier-hook b { color: var(--rm-text); }
.rm-shopier-hook button { margin-left: auto; }
.rm-shopier-hook-new { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
@media (max-width: 767px) {
  .rm-shopier-order-head b { margin-left: 0; flex-basis: 100%; }
  .rm-shopier-pkg .rm-input:first-child { flex: 1 1 6rem; }
}
/* 2026-09-24 — sekmeli Shopier defteri: durum şeridi, sekmeler (+ sayı), arama, bekleyen
   sipariş kartı (alıcı | olası sahip), sonuç tablosu. Tablo telefonda rmStampTableLabels
   ile karta döner; burada ek iş yok. */
#shopier-admin > .rm-shp-section { padding: 1rem; margin-bottom: .875rem; }
#shopier-admin .rm-shp-section > .rm-h2 { margin: 0 0 .5rem; }
.rm-shp-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem 1rem; padding: .625rem .875rem; margin-bottom: .75rem;
  border: 1px solid var(--rm-border); border-radius: var(--rm-radius-lg); background: var(--rm-surface); font-size: .8125rem; }
.rm-shp-stat { white-space: nowrap; }
.rm-shp-strip-actions { display: flex; flex-wrap: wrap; gap: .375rem; margin-left: auto; }
.rm-shp-ok { color: var(--rm-success); }
.rm-shp-bad { color: var(--rm-danger); }
.rm-shp-warn { color: var(--rm-warning); }
.rm-shp-tabs { display: flex; flex-wrap: wrap; max-width: 100%; }
.rm-shp-count { display: inline-block; min-width: 1.375rem; padding: 0 .375rem; border-radius: 999px; text-align: center;
  font-size: .6875rem; line-height: 1.25rem; background: var(--rm-surface-2); color: var(--rm-text-secondary); }
.rm-shp-count.is-warn { background: var(--rm-warning-soft); color: var(--rm-warning); font-weight: 700; }
.rm-shp-toolbar { margin-bottom: .75rem; }
.rm-shp-toolbar .rm-input { width: 100%; max-width: 32rem; }
.rm-shp-lead { margin: 0 0 .75rem; font-size: .8125rem; }
.rm-shp-total { text-align: center; font-size: .75rem; margin-top: .75rem; }
.rm-shp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; margin-top: .5rem; }
.rm-shp-h3 { margin: 0 0 .375rem; font-size: .8125rem; font-weight: 700; color: var(--rm-text); }
.rm-shp-h3 .rm-muted { font-weight: 500; font-size: .75rem; }
.rm-shp-dl { font-size: .8125rem; }
.rm-shp-dl dd { text-align: left; flex: 1 1 auto; }
.rm-shp-dl dt { flex: 0 0 7.5rem; }
.rm-shp-note { font-style: italic; color: var(--rm-text); }
.rm-shp-contact { display: flex; flex-wrap: wrap; gap: .375rem; margin-top: .5rem; }
.rm-shp-candlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.rm-shp-cand { padding: .625rem .75rem; border: 1px solid var(--rm-border); border-radius: var(--rm-radius); background: var(--rm-surface); }
.rm-shp-cand-head { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; font-size: .8125rem; }
.rm-shp-cand-meta { margin: .25rem 0; font-size: .75rem; overflow-wrap: anywhere; }
.rm-shp-reasons { margin: .25rem 0 .5rem; padding-left: 1.1rem; font-size: .75rem; color: var(--rm-text-secondary); }
.rm-shp-reasons li { margin: .125rem 0; }
.rm-shp-tablecard { padding: 0; overflow: hidden; }
.rm-shp-table td { vertical-align: top; font-size: .8125rem; overflow-wrap: anywhere; }
.rm-shp-err { font-size: .6875rem; }
@media (max-width: 1023px) {
  .rm-shp-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .rm-shp-strip-actions { margin-left: 0; width: 100%; }
  .rm-shp-tabs .rm-seg-btn { flex: 1 1 calc(50% - .25rem); justify-content: center; min-height: 44px; }
  .rm-shp-dl dt { flex-basis: 6rem; }
  .rm-shp-tablecard { background: none; border: 0; box-shadow: none; overflow: visible; }
}
/* Shopier teslim kartı: müşteri Shopier'e gitmeden ÖNCE hangi e-postayı yazacağını görür.
   Eşleştirmenin tek dayanağı o e-posta olduğu için kart uyarı tonunda, gömülü değil. */
.rm-pay-handoff { padding: .875rem; border: 1px solid var(--rm-brand-border); border-radius: var(--rm-radius-lg);
  background: var(--rm-brand-soft); display: flex; flex-direction: column; gap: .625rem; }
.rm-pay-handoff-lead { margin: 0; font-size: .875rem; color: var(--rm-text); line-height: 1.5; }
.rm-pay-handoff-lead i { color: var(--rm-brand-text); margin-right: .25rem; }
.rm-pay-handoff .rm-pay-ref { background: var(--rm-surface); color: var(--rm-text-secondary); }
.rm-pay-handoff .rm-pay-ref b { overflow-wrap: anywhere; }
.rm-pay-handoff .rm-muted { margin: 0; font-size: .75rem; }
.rm-pay-bank { padding: .625rem .75rem; border: 1px solid var(--rm-border); border-radius: 10px; }
.rm-pay-bank-name { font-weight: 650; color: var(--rm-text); margin-bottom: .25rem; }
.rm-pay-recent { margin-bottom: 1rem; }
.rm-pay-tier { padding: .75rem 1rem; }
.rm-pay-tier > summary { cursor: pointer; font-size: .8125rem; font-weight: 600; color: var(--rm-text-secondary); min-height: 32px; display: flex; align-items: center; }
.rm-pay-tier-body { display: flex; flex-direction: column; gap: .5rem; padding-top: .5rem; align-items: flex-start; }
.rm-progress { width: 100%; height: 8px; border-radius: 999px; background: var(--rm-surface-2); overflow: hidden; }
/* A V2 page shown to a GUEST (no sidebar): the main column must not reserve the sidebar. */
.rm-main.rm-nosidebar { padding-left: 0; }
/* ── /uyelik ─────────────────────────────────────────────────────────── */
.rm-tier-me { margin-bottom: 1rem; }
.rm-tier-me-head { display: flex; align-items: center; gap: .875rem; flex-wrap: wrap; margin-bottom: .75rem; }
.rm-tier-me-label { font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-text-muted); margin: 0 0 .125rem; }
.rm-tier-me-spent { margin-left: auto; text-align: right; font-size: .8125rem; color: var(--rm-text-muted); }
.rm-tier-me-spent b { display: block; font-size: 1.125rem; color: var(--rm-text); }
.rm-tier-me-next { margin: .625rem 0 0; font-size: .875rem; color: var(--rm-text-secondary); }
.rm-tier-me-next i { color: var(--rm-warning); }
.rm-tier-me-guest { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.rm-tier-me-cta { display: flex; gap: .5rem; flex-wrap: wrap; }
.rm-tier-ico { font-size: 1.75rem; line-height: 1; }
/* The ladder: one row per tier, lowest first. */
.rm-ladder-card { margin-bottom: 1rem; }
.rm-ladder-head { margin-bottom: .75rem; }
.rm-ladder-head .rm-sub { margin-top: .125rem; }
.rm-ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
.rm-ladder-row {
  display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto auto 2.5rem; align-items: center; gap: .75rem;
  padding: .625rem .75rem; border-radius: var(--rm-radius-sm); background: var(--rm-surface-2); border: 1px solid var(--rm-border);
  font-size: .875rem; min-height: 48px;
}
.rm-ladder-ico { font-size: 1.25rem; line-height: 1; text-align: center; }
.rm-ladder-name { font-weight: 700; color: var(--rm-text); }
.rm-ladder-req { color: var(--rm-text-secondary); white-space: nowrap; }
.rm-ladder-disc { font-weight: 700; color: var(--rm-brand-text); white-space: nowrap; }
.rm-ladder-disc.is-zero { color: var(--rm-text-muted); font-weight: 500; }
.rm-ladder-state { text-align: right; }
.rm-ladder-mark { color: var(--rm-success); }
.rm-ladder-row.is-current { border-color: var(--rm-brand); box-shadow: 0 0 0 3px var(--rm-brand-soft); }
.rm-ladder-row.is-ahead { opacity: .7; }
@media (max-width: 639px) {
  .rm-ladder-row { grid-template-columns: 1.75rem minmax(0, 1fr) auto; grid-template-areas: "ico name state" "ico req disc"; row-gap: .125rem; }
  .rm-ladder-ico { grid-area: ico; } .rm-ladder-name { grid-area: name; } .rm-ladder-state { grid-area: state; }
  .rm-ladder-req { grid-area: req; font-size: .8125rem; white-space: normal; } .rm-ladder-disc { grid-area: disc; font-size: .8125rem; }
}
.rm-tier-how { margin-bottom: 1rem; }
.rm-tier-how .rm-h2 { margin-bottom: .5rem; }
.rm-tier-rules { margin: 0; padding-left: 1.125rem; display: flex; flex-direction: column; gap: .5rem; font-size: .875rem; line-height: 1.55; color: var(--rm-text-secondary); }
.rm-tier-rules b { color: var(--rm-text); }
.rm-tier-rules a { color: var(--rm-brand-text); text-decoration: none; }
.rm-tier-rules a:hover { text-decoration: underline; }
.rm-tier-cta { display: flex; gap: .625rem; flex-wrap: wrap; justify-content: center; margin: 1.25rem 0 .5rem; }
.rm-dash-tier { text-decoration: none; display: inline-flex; }
/* ── /api-docs ───────────────────────────────────────────────────────── */
.rm-apidocs code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; background: var(--rm-surface-2); padding: .1rem .35rem; border-radius: 6px; color: var(--rm-text); overflow-wrap: anywhere; }
.rm-api-section { margin-bottom: 1rem; }
.rm-api-section .rm-h2 { margin-bottom: .625rem; }
.rm-api-dl { margin: 0; display: flex; flex-direction: column; }
.rm-api-dl > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: .75rem; padding: .625rem 0; border-top: 1px solid var(--rm-border); font-size: .875rem; line-height: 1.55; }
.rm-api-dl > div:first-child { border-top: 0; padding-top: 0; }
.rm-api-dl dt { color: var(--rm-text-muted); font-weight: 600; }
.rm-api-dl dd { margin: 0; color: var(--rm-text-secondary); min-width: 0; }
.rm-api-dl dd a { color: var(--rm-brand-text); }
@media (max-width: 639px) { .rm-api-dl > div { grid-template-columns: 1fr; gap: .25rem; } }
.rm-api-table td:first-child { white-space: nowrap; }
/* `.rm-apidocs code` is (0,1,1): a bare `.rm-api-action` (0,1,0) lost to it on every <code class="rm-api-action"> */
.rm-apidocs .rm-api-action { color: var(--rm-brand-text); background: none; padding: 0; }
.rm-api-examples { margin-top: .75rem; border-top: 1px solid var(--rm-border); padding-top: .625rem; }
.rm-api-examples summary { cursor: pointer; font-weight: 600; color: var(--rm-text); font-size: .875rem; min-height: 32px; display: flex; align-items: center; gap: .5rem; list-style: none; }
.rm-api-examples summary::-webkit-details-marker { display: none; }
.rm-api-examples summary::before { content: '+'; color: var(--rm-text-muted); font-weight: 500; }
.rm-api-examples[open] summary::before { content: '–'; }
.rm-api-ex-label { margin: .75rem 0 .25rem; font-size: .75rem; color: var(--rm-text-muted); }
.rm-api-ex-label code { background: none; padding: 0; color: var(--rm-brand-text); }
.rm-api-code { display: block; margin: 0; padding: .625rem .75rem; border-radius: var(--rm-radius-sm); background: var(--rm-surface-2); border: 1px solid var(--rm-border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8125rem; line-height: 1.5; color: var(--rm-text); white-space: pre-wrap; overflow-wrap: anywhere; }
.rm-api-code-muted { color: var(--rm-text-secondary); }
.rm-api-params { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 1100px) { .rm-api-params { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rm-api-h3 { margin: 0 0 .5rem; font-size: .9375rem; font-weight: 700; }
.rm-api-req { margin-left: .375rem; font-size: .6875rem; font-weight: 600; color: var(--rm-brand-text); }
.rm-api-note { margin: .75rem 0 0; font-size: .8125rem; line-height: 1.5; color: var(--rm-text-secondary); }
.rm-api-note i { color: var(--rm-brand-text); margin-right: .25rem; }
/* Account and documentation pages share the panel's spacing and content width. */
.rm-tiers, .rm-apidocs, .rm-profile { max-width: 1180px; min-width: 0; }
.rm-tiers > .rm-card, .rm-apidocs > .rm-card { padding: clamp(1rem, 2.5vw, 1.5rem); }
.rm-tiers .rm-page-head, .rm-apidocs .rm-page-head, .rm-profile .rm-page-head { margin-bottom: 1.5rem; }
.rm-tiers .rm-page-head > div, .rm-apidocs .rm-page-head > div { min-width: 0; }
.rm-page-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.rm-page-links a { display: inline-flex; align-items: center; min-height: 44px; padding: .5rem .875rem;
  border: 1px solid var(--rm-border); border-radius: var(--rm-radius-sm); color: var(--rm-text-secondary);
  background: var(--rm-surface); font-size: .8125rem; font-weight: 600; text-decoration: none; }
.rm-page-links a:hover { color: var(--rm-brand-text); border-color: var(--rm-brand); }
.rm-profile [id], .rm-apidocs section[id] { scroll-margin-top: calc(var(--rm-topbar-h) + 1rem); }
.rm-profile-grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 1.25rem; margin-bottom: 1.25rem; }
.rm-profile-grid > *, .rm-profile .flex > *, .rm-profile .grid > * { min-width: 0; }
.rm-profile-card-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.rm-profile .glass-card { overflow-wrap: anywhere; }
.rm-profile .glass-card > .flex.justify-between { flex-wrap: wrap; gap: .75rem; }
.rm-profile .space-y-3 > .flex { gap: .75rem; align-items: baseline; }
.rm-profile .space-y-3 > .flex > :first-child { flex-shrink: 0; }
.rm-profile .space-y-3 > .flex > :last-child { text-align: right; overflow-wrap: anywhere; }
.rm-profile .rm-num, .rm-profile .text-accent, .rm-profile .text-yellow-400 { overflow-wrap: normal; }
.rm-profile .w-16.h-16 { flex-shrink: 0; }
.rm-profile #sessions-area .flex, .rm-profile #webhook-section .flex { flex-wrap: wrap; gap: .75rem; }
.rm-apidocs .rm-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
.rm-apidocs .rm-table { min-width: 480px; }
.rm-apidocs .rm-api-code { margin-top: .75rem; }
.rm-api-params > div { min-width: 0; }
.rm-ladder-row { grid-template-columns: 2rem minmax(5rem, 1fr) minmax(10rem, 1.3fr) minmax(5rem, .7fr) 4.5rem; }
.rm-ladder-req { white-space: normal; }
.rm-ladder-state .rm-badge { white-space: nowrap; }
@media (min-width: 1200px) { .rm-profile-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
@media (max-width: 767px) {
  .rm-ladder-row { grid-template-columns: 1.5rem minmax(0, 1fr) auto;
    grid-template-areas: "ico name state" ". req req" ". disc disc"; gap: .375rem .625rem; padding: .875rem; }
  .rm-ladder-ico { grid-area: ico; } .rm-ladder-name { grid-area: name; }
  .rm-ladder-state { grid-area: state; } .rm-ladder-req { grid-area: req; }
  .rm-ladder-disc { grid-area: disc; }
}
@media (max-width: 480px) {
  .rm-profile .glass-card.p-6 { padding: 1rem; }
  .rm-profile .grid-cols-3 { grid-template-columns: minmax(0, 1fr); }
  .rm-profile .grid-cols-3 > div { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
  .rm-profile-card-head > .btn-secondary { width: 100%; justify-content: center; white-space: normal; }
  .rm-tier-me-spent { margin-left: 0; text-align: left; flex-basis: 100%; }
  .rm-tier-me-cta { width: 100%; } .rm-tier-me-cta a { flex: 1; }
}
/* Foreign-currency display: the one sentence that keeps "$1,20" honest. */
.rm-currency-note { margin: .5rem 0 0; font-size: .75rem; line-height: 1.45; color: var(--rm-text-secondary); }
.rm-currency-note i { color: var(--rm-brand-text); margin-right: .25rem; }
.rm-progress > span { display: block; height: 100%; border-radius: 999px; background: var(--rm-brand); }

/* Mobile: the payable total and the button stay visible above the bottom nav. */
.rm-pay-bar { display: none; }
@media (max-width: 1023px) {
  /* Same rule as .rm-main: the pay bar sits ABOVE the bottom nav, so the clearance has
   to cover both plus the safe area, not a flat 88px. */
/* The pay bar sits above the nav, so this clears BOTH plus its own height. */
.rm-pay { padding-bottom: calc(var(--rm-bottomnav-space) + 4rem); }
  .rm-pay-bar {
    display: flex; align-items: center; gap: .75rem; position: fixed; left: 0; right: 0;
    bottom: var(--rm-bottomnav-space); z-index: 980;
    padding: .625rem .875rem; background: var(--rm-surface); border-top: 1px solid var(--rm-border-strong);
    box-shadow: 0 -8px 24px rgba(0,0,0,.35);
  }
  .rm-pay-bar-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; line-height: 1.2; }
  .rm-pay-bar-label { font-size: .625rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-text-muted); }
  .rm-pay-bar-main b { font-size: 1.0625rem; color: var(--rm-text); }
  .rm-pay-bar-main small { font-size: .6875rem; color: var(--rm-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .rm-pay-bar .rm-btn { height: 44px; min-width: 7.5rem; }
}
@media (max-width: 380px) { .rm-pay-presets { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------------------------------------------------------------
   24. STAGE 4.2 — ADMIN BLOG EDITOR
   --------------------------------------------------------------- */
.rm-blog-layout { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1100px) { .rm-blog-layout { grid-template-columns: minmax(0, 1fr) minmax(320px, 380px); } .rm-blog-side { position: sticky; top: calc(var(--rm-topbar-h) + 1rem); } }
.rm-blog-main, .rm-blog-side { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.rm-blog-title { height: 48px; font-size: 1.0625rem; font-weight: 650; }
.rm-blog-slug { display: flex; align-items: center; gap: .375rem; }
.rm-blog-slug > span { font-size: .8125rem; color: var(--rm-text-muted); flex: 0 0 auto; }
.rm-blog-htmltoggle { display: inline-flex; align-items: center; gap: .5rem; font-size: .75rem; color: var(--rm-text-secondary); min-height: 32px; }
.rm-blog-toolbar { display: flex; flex-wrap: wrap; gap: .25rem; padding: .5rem 1.125rem; border-top: 1px solid var(--rm-border); border-bottom: 1px solid var(--rm-border); background: var(--rm-surface-2); }
.rm-blog-tool { min-width: 36px; height: 36px; padding: 0 .5rem; border-radius: 8px; border: 1px solid transparent;
  background: transparent; color: var(--rm-text-secondary); font-size: .8125rem; font-weight: 700; cursor: pointer; }
.rm-blog-tool:hover { background: var(--rm-surface-hover); color: var(--rm-text); }
.rm-blog-tool:focus-visible { outline: 2px solid var(--rm-brand); outline-offset: 2px; }
.rm-blog-toolsep { width: 1px; height: 24px; margin: 6px .25rem; background: var(--rm-border-strong); }
.rm-blog-editor { min-height: 22rem; padding: 1.125rem; font-size: .9375rem; line-height: 1.75; color: var(--rm-text); outline: none; overflow-wrap: anywhere; }
.rm-blog-editor:focus { box-shadow: inset 0 0 0 2px var(--rm-brand-soft); }
.rm-blog-editor h2 { font-size: 1.25rem; font-weight: 700; margin: 1.25rem 0 .5rem; }
.rm-blog-editor h3 { font-size: 1.0625rem; font-weight: 700; margin: 1rem 0 .5rem; }
.rm-blog-editor p { margin: 0 0 .875rem; }
.rm-blog-editor ul, .rm-blog-editor ol { margin: 0 0 .875rem 1.25rem; }
.rm-blog-editor blockquote { margin: 1rem 0; padding: .5rem .875rem; border-left: 3px solid var(--rm-brand); background: var(--rm-surface-2); }
.rm-blog-editor img { max-width: 100%; height: auto; border-radius: 10px; }
.rm-blog-editor figure { margin: 1rem 0; }
.rm-blog-editor figcaption { font-size: .75rem; color: var(--rm-text-muted); text-align: center; margin-top: .375rem; }
.rm-blog-editor a { color: var(--rm-brand-text); text-decoration: underline; }
.rm-blog-source { margin: 0 1.125rem 1.125rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; }
.rm-blog-cover { height: 140px; border-radius: var(--rm-radius); border: 1px solid var(--rm-border-strong);
  background: var(--rm-surface-2) center / cover no-repeat; margin-bottom: .625rem; }
.rm-blog-coverbtns { display: flex; flex-wrap: wrap; gap: .5rem; }
.rm-blog-locked { display: flex; align-items: flex-start; gap: .375rem; padding: .5rem .625rem; border-radius: 8px;
  background: var(--rm-surface-2); border: 1px dashed var(--rm-border-strong); }
.rm-blog-checks { display: flex; flex-direction: column; gap: .375rem; margin-bottom: 1rem; }
.rm-blog-check { display: flex; align-items: flex-start; gap: .5rem; font-size: .75rem; color: var(--rm-text-secondary); }
.rm-blog-check .rm-badge { flex: 0 0 auto; }
.rm-blog-check-label small { display: block; color: var(--rm-text-muted); font-size: .6875rem; }
.rm-blog-head { grid-template-columns: minmax(0, 2fr) 7rem 8rem 9rem 11rem; }
.rm-blog-row { grid-template-columns: minmax(0, 2fr) 7rem 8rem 9rem 11rem; }
@media (max-width: 1023px) {
  .rm-blog-row { grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: "svc svc status" "qty date date" "actions actions actions"; }
}
.rm-media-modal { max-width: 44rem; }
.rm-media-upload { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: .75rem 0 1rem; }
.rm-media-grid { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); max-height: 320px; overflow-y: auto; }
.rm-media-item { padding: 0; border: 1px solid var(--rm-border); border-radius: 10px; overflow: hidden; background: var(--rm-surface-2); cursor: pointer; }
.rm-media-item:hover { border-color: var(--rm-brand); }
.rm-media-item img { display: block; width: 100%; height: 84px; object-fit: cover; }

/* ---------------------------------------------------------------
   23. STAGE 4.2 — ADMIN SİTE AYARLARI V2 (shared with the blog editor)
   --------------------------------------------------------------- */
.rm-set-layout { display: grid; gap: 1rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 1024px) { .rm-set-layout { grid-template-columns: 220px minmax(0, 1fr); } .rm-set-nav { position: sticky; top: calc(var(--rm-topbar-h) + 1rem); } }
.rm-set-nav { display: flex; flex-direction: column; gap: .75rem; }
.rm-set-navgroup { display: flex; flex-direction: column; gap: .125rem; }
.rm-set-tab {
  display: flex; align-items: center; gap: .625rem; min-height: 40px; padding: 0 .75rem; border-radius: var(--rm-radius);
  border: 1px solid transparent; background: transparent; color: var(--rm-text-secondary); font-size: .8125rem; font-weight: 600;
  text-align: left; cursor: pointer;
}
.rm-set-tab i { width: 16px; text-align: center; color: var(--rm-text-muted); }
.rm-set-tab:hover { background: var(--rm-surface-hover); color: var(--rm-text); }
.rm-set-tab.is-active { background: var(--rm-brand-soft); border-color: var(--rm-brand-border); color: var(--rm-text); }
.rm-set-tab.is-active i { color: var(--rm-brand-text); }
@media (max-width: 1023px) {
  .rm-set-nav { flex-direction: row; overflow-x: auto; gap: .375rem; padding-bottom: .25rem; scrollbar-width: none; }
  .rm-set-nav::-webkit-scrollbar { display: none; }
  .rm-set-navgroup { flex-direction: row; gap: .375rem; }
  .rm-set-navgroup .rm-navgroup-label { display: none; }
  .rm-set-tab { flex: 0 0 auto; border-color: var(--rm-border); background: var(--rm-surface); white-space: nowrap; }
}
.rm-set-body { min-width: 0; display: flex; flex-direction: column; gap: 1rem; }
.rm-set-card { padding: 0; }
.rm-set-card-head { padding: 1rem 1.125rem .25rem; }
.rm-set-card-head .rm-sub { margin-top: .25rem; }
.rm-set-card-body { padding: .75rem 1.125rem 1.125rem; }
.rm-set-grid { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .rm-set-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rm-set-hint { font-size: .6875rem; color: var(--rm-text-muted); margin-top: .3125rem; line-height: 1.5; }
.rm-set-count { font-size: .6875rem; color: var(--rm-text-muted); margin-top: .3125rem; display: flex; align-items: center; gap: .375rem; }
.rm-input.is-invalid, .rm-textarea.is-invalid { border-color: var(--rm-danger); box-shadow: 0 0 0 3px var(--rm-danger-soft); }
.rm-set-toggles { display: grid; gap: .5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .rm-set-toggles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rm-set-toggle { display: flex; gap: .625rem; align-items: flex-start; padding: .625rem .75rem; min-height: 44px;
  border: 1px solid var(--rm-border); border-radius: var(--rm-radius); background: var(--rm-surface-2); cursor: pointer; }
.rm-set-toggle input { width: 18px; height: 18px; margin-top: .125rem; accent-color: var(--rm-brand); flex: 0 0 auto; }
.rm-set-toggle b { display: block; font-size: .8125rem; color: var(--rm-text); }
.rm-set-toggle small { display: block; font-size: .6875rem; color: var(--rm-text-muted); line-height: 1.45; }
.rm-set-image-row { display: flex; gap: .875rem; align-items: flex-start; flex-wrap: wrap; }
.rm-set-image-prev { width: 150px; height: 84px; border-radius: var(--rm-radius); border: 1px solid var(--rm-border-strong);
  background: var(--rm-surface-2) center / contain no-repeat; flex: 0 0 auto; }
.rm-set-image-actions { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; min-width: 0; flex: 1 1 12rem; }
.rm-set-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; }
.rm-set-chip { display: inline-flex; align-items: center; gap: .5rem; max-width: 100%; padding: .25rem .25rem .25rem .75rem;
  border-radius: 999px; border: 1px solid var(--rm-border-strong); background: var(--rm-surface-2); font-size: .75rem; }
.rm-set-chip b { font-weight: 600; color: var(--rm-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.rm-set-chip small { color: var(--rm-text-muted); }
.rm-set-faq { display: flex; gap: .5rem; align-items: flex-start; padding: .625rem 0; border-bottom: 1px solid var(--rm-border); }
.rm-set-faq-fields { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .375rem; }
#set-faq-list { margin-bottom: .75rem; }
.rm-set-save { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
@media (max-width: 639px) { .rm-set-save .rm-btn { flex: 1 1 100%; } }
/* Search-result preview (a preview, not a promise) */
.rm-serp { margin-top: .75rem; padding: .875rem 1rem; border-radius: var(--rm-radius); background: #fff; color: #202124; max-width: 38rem; }
.rm-serp-note { font-size: .625rem; color: #5f6368; margin-bottom: .375rem; text-transform: uppercase; letter-spacing: .05em; }
.rm-serp-url { font-size: .75rem; color: #202124; overflow-wrap: anywhere; }
.rm-serp-title { font-size: 1.125rem; color: #1a0dab; line-height: 1.3; margin: .125rem 0; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.rm-serp-desc { font-size: .8125rem; color: #4d5156; line-height: 1.5; overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ---------------------------------------------------------------
   17. STAGE 4.2 — ADMIN PRESENTATION QUALITY
   --------------------------------------------------------------- */
@media (min-width: 1024px) { .rm-statgrid-6 { grid-template-columns: repeat(6, minmax(0,1fr)); } }
@media (min-width: 640px) and (max-width: 1023px) { .rm-statgrid-6 { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.rm-quality-raw { max-width: 32rem; font-size: .75rem; color: var(--rm-text-muted); overflow-wrap: anywhere; }
.rm-table tr.rm-row-muted td { opacity: .55; }

/* ---------------------------------------------------------------
   SERVICE DISCOVERY (/hizmetler)
   A few good entry points instead of the whole catalogue. Sections that have no
   real data are hidden by the module rather than shown empty, so this grid never
   has to fill space it does not have.
   --------------------------------------------------------------- */
.rm-disc-section { margin-bottom: 1.5rem; }
.rm-disc-head { margin-bottom: .75rem; }
.rm-disc-head .rm-sub { margin-top: .125rem; }

/* auto-fit + minmax: one real result renders as ONE card, not a lonely item in a
   four-column grid. The layout follows the data instead of the other way round. */
.rm-disc-grid {
  display: grid; gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.rm-disc { display: flex; flex-direction: column; gap: .625rem; padding: .875rem; min-width: 0; }
.rm-disc-top { display: flex; align-items: flex-start; gap: .625rem; min-width: 0; }
.rm-disc-ico {
  flex: 0 0 34px; width: 34px; height: 34px; border-radius: var(--rm-radius-sm);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--rm-surface-2); font-size: .9375rem;
}
.rm-disc-main { min-width: 0; flex: 1 1 auto; }
.rm-disc-name {
  font-size: .875rem; font-weight: 650; color: var(--rm-text); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
  -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.rm-disc-meta { margin-top: .25rem; font-size: .6875rem; color: var(--rm-text-muted); line-height: 1.45; }
.rm-disc-count { margin-top: .375rem; font-size: .75rem; font-weight: 600; color: var(--rm-brand-text); }
.rm-disc-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  margin-top: auto; padding-top: .5rem; border-top: 1px solid var(--rm-border);
}
/* Money never wraps and never loses digits — the product-wide rule. */
.rm-disc-price { font-size: .9375rem; font-weight: 700; color: var(--rm-text); white-space: nowrap; }

/* A platform card is one link: the whole card is the target. */
.rm-disc-plat {
  flex-direction: row; align-items: center; text-decoration: none;
  transition: border-color var(--rm-t), background var(--rm-t);
}
.rm-disc-plat:hover { border-color: var(--rm-brand-border); background: var(--rm-surface-2); }
.rm-disc-go { flex: 0 0 auto; color: var(--rm-text-muted); font-size: .75rem; }

/* ---- Admin destek: değerli müşteri (VIP) önceliği ----
   API listeyi zaten VIP-önce sıralıyor; rozet + soluk satır arka planı NEDEN öne
   geldiğini söyler. Uyarı tonu (altın), tehlike değil — dikkat, alarm değil. */
.rm-vip-badge {
  display: inline-flex; align-items: center; gap: .25rem;
  padding: .0625rem .4375rem; border-radius: 999px;
  font-size: .6875rem; font-weight: 700; letter-spacing: .01em; line-height: 1.5;
  background: var(--rm-warning-soft); color: var(--rm-warning);
  border: 1px solid rgba(245,158,11,.28); white-space: nowrap;
}
.data-table tr.rm-ticket-vip > td { background: rgba(245,158,11,.05); }
.data-table tr.rm-ticket-vip > td:first-child { box-shadow: inset 3px 0 0 var(--rm-warning); }

/* ---- Admin analitik: tarih aralığı filtresi ----
   .input-field genel olarak width:100% — flex satırında her tarih kutusu tam satırı
   kaplayıp alt alta sarıyordu (sol taraftaki dönem sekmesi ortada asılı kalıyordu).
   Burada kutu içerik kadar; dar ekranda ikisi yan yana eşit paylaşır. */
.analytics-daterange .input-field { width: auto; flex: 0 1 auto; min-width: 0; }
.analytics-daterange > .btn-primary { flex: 0 0 auto; }
@media (max-width: 720px) {
  /* minmax(0,1fr): date input'un içsel min genişliği (~150px) yoksa 1fr'yi taşırır ve
     tüm çubuğu ekran dışına iter. */
  .analytics-daterange { display: grid; grid-template-columns: auto minmax(0,1fr) auto minmax(0,1fr); align-items: center; }
  .analytics-daterange .input-field { width: 100%; }
  .analytics-daterange > .btn-primary { grid-column: 1 / -1; justify-content: center; }
}

/* ---- Referans: kademeler (davet sayısına göre), ilerleme ve paylaşım (2026-09-18) ----
   The three level tiles now carry STATE: done / current / locked. The current one is
   the only brand-tinted tile, so the eye lands on "where am I" before "what are the
   rates". The progress bar answers the second question a referrer has: how far to the
   next rate. */
.rm-aff-levels { display: flex; flex-direction: column; gap: .625rem; min-width: 0; }
.rm-aff-tiers > div.is-current { background: var(--rm-brand-soft); border-color: var(--rm-brand-border); box-shadow: 0 0 0 1px var(--rm-brand-border) inset; }
.rm-aff-tiers > div.is-current .rm-aff-tier-k { color: var(--rm-brand-text); }
.rm-aff-tiers > div.is-current .rm-aff-tier-k em { font-style: normal; font-weight: 700; }
.rm-aff-tiers > div.is-done b { color: var(--rm-success); }
.rm-aff-tiers > div.is-done .rm-aff-tier-s::before { content: '✓ '; color: var(--rm-success); }
.rm-aff-tiers > div.is-locked { opacity: .72; }
.rm-aff-tiers > div.is-locked b { color: var(--rm-text-secondary); }
.rm-aff-progress { display: flex; flex-direction: column; gap: .375rem; }
.rm-aff-progress-bar { height: 8px; border-radius: 999px; background: var(--rm-surface-2); border: 1px solid var(--rm-border); overflow: hidden; }
.rm-aff-progress-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--rm-brand), #A78BFA); transition: width .4s ease; }
.rm-aff-progress-text { margin: 0; font-size: .75rem; color: var(--rm-text-secondary); line-height: 1.4; }
.rm-aff-progress-text b { color: var(--rm-text); }

.rm-aff-share { margin-top: 1rem; padding-top: .875rem; border-top: 1px solid var(--rm-border); }
.rm-aff-share-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.rm-aff-share-btn {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 36px; padding: 0 .75rem;
  border-radius: 999px; border: 1px solid var(--rm-border); background: var(--rm-surface-2);
  color: var(--rm-text); font-size: .75rem; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: border-color var(--rm-t), background var(--rm-t), transform var(--rm-t);
}
.rm-aff-share-btn i { font-size: .875rem; }
.rm-aff-share-btn:hover { transform: translateY(-1px); border-color: var(--rm-brand-border); }
.rm-aff-share-btn:focus-visible { outline: 2px solid var(--rm-brand); outline-offset: 2px; }
/* Brand hues on the icon only — the buttons stay one family, the network is still recognisable. */
.rm-aff-share-btn.is-x i        { color: var(--rm-text); }
.rm-aff-share-btn.is-facebook i { color: #1877F2; }
.rm-aff-share-btn.is-whatsapp i { color: #25D366; }
.rm-aff-share-btn.is-telegram i { color: #26A5E4; }
.rm-aff-share-btn.is-linkedin i { color: #0A66C2; }
.rm-aff-share-btn.is-email i    { color: var(--rm-warning); }
.rm-aff-share-btn.is-copy, .rm-aff-share-btn.is-native { border-style: dashed; }
.rm-aff-share-preview { margin: .625rem 0 0; font-size: .75rem; line-height: 1.5; color: var(--rm-text-secondary); font-style: italic; }
@media (max-width: 640px) {
  .rm-aff-share-btn span { display: none; }           /* icons only — six labels do not fit a phone row */
  .rm-aff-share-btn { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .rm-aff-share-btn.is-copy span, .rm-aff-share-btn.is-native span { display: inline; }
  .rm-aff-share-btn.is-copy, .rm-aff-share-btn.is-native { width: auto; padding: 0 .75rem; }
}

/* ---- /api-docs v2 (2026-09-18): facts strip, per-action cards, status/error dictionaries,
   language tabs. One rhythm: label → table → code; request and response side by side on
   desktop so a developer reads "what I send" and "what I get" without scrolling. ---- */
.rm-api-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .625rem; margin-bottom: 1.25rem; }
.rm-api-facts > div { display: flex; flex-direction: column; gap: .25rem; min-width: 0; padding: .75rem .875rem; border: 1px solid var(--rm-border); border-radius: var(--rm-radius); background: var(--rm-surface); }
.rm-api-fact-k { font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-text-muted); }
.rm-api-fact-k i { color: var(--rm-brand-text); margin-right: .25rem; }
.rm-api-facts > div > code, .rm-api-facts > div > b { font-size: .8125rem; color: var(--rm-text); overflow-wrap: anywhere; }
.rm-api-facts > div > code { background: none; padding: 0; }
.rm-api-fact-s { font-size: .75rem; color: var(--rm-text-secondary); }
.rm-api-fact-s code { font-size: .75rem; }

.rm-api-steps { list-style: none; margin: .5rem 0 1rem; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .875rem; }
.rm-api-steps li { display: flex; gap: .625rem; align-items: flex-start; min-width: 0; }
.rm-api-steps b { flex: 0 0 28px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--rm-brand-soft); color: var(--rm-brand-text); font-size: .8125rem; font-weight: 700; }
.rm-api-steps strong { display: block; font-size: .875rem; color: var(--rm-text); }
.rm-api-steps span { display: block; margin-top: .125rem; font-size: .8125rem; line-height: 1.5; color: var(--rm-text-secondary); }
.rm-api-steps a { color: var(--rm-brand-text); }
.rm-api-callout { display: flex; gap: .75rem; align-items: flex-start; padding: .75rem .875rem; margin-top: .625rem; border-radius: var(--rm-radius-sm); background: var(--rm-surface-2); border: 1px solid var(--rm-border); font-size: .8125rem; line-height: 1.55; color: var(--rm-text-secondary); }
.rm-api-callout > i { flex: 0 0 auto; margin-top: .2rem; color: var(--rm-brand-text); }
.rm-api-callout b { color: var(--rm-text); }

.rm-api-section-head { margin-bottom: .75rem; }
.rm-api-section-head .rm-sub { margin-top: .125rem; }
.rm-api-index { margin-bottom: .875rem; }
.rm-api-index a { text-decoration: none; }
.rm-api-ep { margin-bottom: .875rem; padding: clamp(1rem, 2.5vw, 1.5rem); }
.rm-api-ep-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.rm-api-ep-title { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; min-width: 0; }
.rm-api-ep-title .rm-api-action { font-size: 1rem; font-weight: 700; }
.rm-api-ep-title .rm-h3 { margin: 0; color: var(--rm-text-secondary); font-weight: 500; }
.rm-api-ep-meta { display: flex; gap: .375rem; flex-wrap: wrap; }
.rm-api-ep-desc { margin: .5rem 0 .875rem; font-size: .875rem; line-height: 1.55; color: var(--rm-text-secondary); }
.rm-api-ep-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.rm-api-ep-left, .rm-api-ep-right { min-width: 0; }
.rm-api-ep-label { margin: .875rem 0 .375rem; font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-text-muted); }
.rm-api-ep-left .rm-api-ep-label:first-child, .rm-api-ep-right .rm-api-ep-label:first-child { margin-top: 0; }
.rm-api-ep-none { margin: 0; font-size: .8125rem; color: var(--rm-text-secondary); }
.rm-apidocs .rm-api-ptable { min-width: 420px; }   /* scrolls inside .rm-table-wrap on a phone instead of crushing the last column */
.rm-api-ptable td:first-child { white-space: nowrap; }
.rm-api-ptable td { font-size: .8125rem; line-height: 1.5; vertical-align: top; }
.rm-api-errs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
.rm-api-errs li { display: flex; gap: .5rem; align-items: flex-start; font-size: .8125rem; line-height: 1.5; color: var(--rm-text-secondary); min-width: 0; }
.rm-api-errs li code { overflow-wrap: anywhere; }
.rm-api-http { flex: 0 0 auto; min-width: 2.75rem; text-align: center; padding: .05rem .375rem; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .75rem; font-weight: 700; background: var(--rm-danger-soft); color: #F87171; }   /* lighter red: --rm-danger on its own tint is 4.37:1 */
.rm-api-errs-wide li { padding: .5rem 0; border-top: 1px solid var(--rm-border); }
.rm-api-errs-wide li:first-child { border-top: 0; }
.rm-api-errs-wide li:first-child .rm-api-http { background: var(--rm-success-soft); color: var(--rm-success); }

.rm-api-codewrap { position: relative; }
/* pre-wrap: a long curl/JSON line wraps instead of growing a horizontal scrollbar under every sample. */
.rm-api-codewrap .rm-api-code { margin-top: 0; padding-top: 2rem; max-height: 26rem; overflow: auto; font-size: .78125rem; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.rm-api-copy { position: absolute; top: .375rem; right: .375rem; display: inline-flex; align-items: center; gap: .3rem; min-height: 26px; padding: 0 .5rem; border-radius: 6px; border: 1px solid var(--rm-border); background: var(--rm-surface); color: var(--rm-text-secondary); font-size: .6875rem; font-weight: 600; cursor: pointer; }
.rm-api-copy:hover { color: var(--rm-brand-text); border-color: var(--rm-brand-border); }
.rm-api-code[data-lang]::before { content: attr(data-lang); position: absolute; top: .5rem; left: .75rem; font-size: .625rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--rm-text-muted); }

.rm-api-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .75rem; }
.rm-api-status { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto; gap: .625rem; align-items: center; padding: .625rem .75rem; border: 1px solid var(--rm-border); border-radius: var(--rm-radius-sm); background: var(--rm-surface-2); font-size: .8125rem; color: var(--rm-text-secondary); }
.rm-api-status code { background: none; padding: 0; font-weight: 700; color: var(--rm-text); }
.rm-api-status em { font-style: normal; font-size: .6875rem; font-weight: 600; padding: .1rem .45rem; border-radius: 999px; background: var(--rm-info-soft); color: var(--rm-info); white-space: nowrap; }
.rm-api-status.is-final em { background: var(--rm-success-soft); color: var(--rm-success); }

.rm-api-tabs { display: flex; gap: .375rem; flex-wrap: wrap; margin: .75rem 0; }
.rm-api-tabpanel[hidden] { display: none; }

@media (max-width: 1023px) {
  .rm-api-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rm-api-ep-body { grid-template-columns: 1fr; }
  .rm-api-steps { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  .rm-api-facts { grid-template-columns: 1fr; }
  .rm-api-status-grid { grid-template-columns: 1fr; }
  .rm-api-status { grid-template-columns: 1fr; gap: .25rem; }
  .rm-api-status em { justify-self: start; }
}

/* ---- Dashboard "Hesap Analizi" v2 (2026-09-18) ----
   It used to butt against the two-column grid above it (no top margin) and read as
   three bare columns of thin bars. Now: breathing room above, each insight in its
   own tile, one stacked status bar with a legend, a headline average with three mini
   stats, and platform rows led by their icon. Same data, same class hooks the
   browser test reads (.rm-insight-title / .rm-insight-fill / .rm-insight-big). */
#dash-insights { margin-top: 1rem; }
.rm-insights .rm-card-header { align-items: flex-start; }
.rm-insights .rm-card-header > div { min-width: 0; }
.rm-insights-sub { margin: .125rem 0 0; font-size: .8125rem; }
.rm-insights .rm-insight-grid { padding: 1rem; gap: .875rem; }
.rm-insights .rm-insight {
  display: flex; flex-direction: column; gap: .5rem; padding: .875rem 1rem;
  border: 1px solid var(--rm-border); border-radius: var(--rm-radius-sm); background: var(--rm-surface-2);
}
.rm-insights .rm-insight-title { display: flex; align-items: center; gap: .5rem; margin: 0; color: var(--rm-text); font-weight: 650; }
.rm-insights .rm-insight-title i { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: var(--rm-brand-soft); color: var(--rm-brand-text); font-size: .75rem; }
.rm-insight-lead { margin: 0; font-size: .8125rem; color: var(--rm-text-secondary); }
.rm-insight-lead b { font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em; color: var(--rm-text); margin-right: .25rem; }
.rm-insight-stack { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--rm-surface); border: 1px solid var(--rm-border); }
.rm-insight-stack .rm-insight-fill { height: 100%; border-radius: 0; min-width: 2px; }
.rm-insight-stack .rm-insight-fill + .rm-insight-fill { border-left: 1px solid var(--rm-surface-2); }
.rm-insight-legend { list-style: none; margin: .125rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.rm-insight-legend li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto 2.75rem; gap: .5rem; align-items: center; font-size: .75rem; }
.rm-insight-legend-label { color: var(--rm-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-insight-legend-n { color: var(--rm-text); font-weight: 600; }
.rm-insight-legend-pct { color: var(--rm-text-muted); text-align: right; }
.rm-insight-dot { width: 10px; height: 10px; border-radius: 999px; background: var(--rm-text-muted); }
.rm-insight-dot.is-success { background: #34d399; }
.rm-insight-dot.is-warning { background: #fbbf24; }
.rm-insight-dot.is-danger  { background: #f87171; }
.rm-insight-dot.is-info    { background: var(--rm-brand); }
.rm-insights .rm-insight-big { margin: 0; line-height: 1.1; }
.rm-insights .rm-insight-note { margin: 0; }
.rm-insight-minis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .375rem; padding-top: .625rem; border-top: 1px solid var(--rm-border); }
.rm-insight-minis > div { display: flex; flex-direction: column; gap: .125rem; min-width: 0; }
.rm-insight-mini-k { font-size: .625rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--rm-text-muted); }
.rm-insight-minis b { font-size: .875rem; color: var(--rm-text); overflow-wrap: anywhere; }
.rm-insight-plat { display: flex; gap: .625rem; align-items: center; }
.rm-insight-plat-ico { flex: 0 0 30px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; background: var(--rm-surface); border: 1px solid var(--rm-border); font-size: .875rem; }
.rm-insight-plat-main { flex: 1 1 auto; min-width: 0; }
@media (max-width: 479px) { .rm-insight-minis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- SEO tools (2026-09-18): page list rows with inline editors, section/FAQ editors ---- */
.rm-seo-list { display: flex; flex-direction: column; gap: .5rem; }
.rm-seo-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .75rem; padding: .75rem .875rem; border: 1px solid var(--rm-border); border-radius: var(--rm-radius-sm); background: var(--rm-surface-2); }
.rm-seo-row[hidden] { display: none; }
.rm-seo-row-main { min-width: 0; }
.rm-seo-row-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .875rem; }
.rm-seo-route { color: var(--rm-text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .75rem; text-decoration: none; }
.rm-seo-route:hover { color: var(--rm-brand-text); }
.rm-seo-route i { font-size: .625rem; }
.rm-seo-row-title { margin: .25rem 0 0; font-size: .8125rem; color: var(--rm-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-seo-row-desc { margin: .125rem 0 0; font-size: .75rem; color: var(--rm-text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rm-seo-row-actions { align-self: start; }
.rm-seo-editor { grid-column: 1 / -1; margin-top: .5rem; padding-top: .75rem; border-top: 1px dashed var(--rm-border); }
.rm-seo-editor[hidden] { display: none; }
.rm-seo-sub { margin-top: 1rem; padding-top: .75rem; border-top: 1px solid var(--rm-border); }
.rm-seo-section { padding: .625rem; margin-top: .5rem; border: 1px solid var(--rm-border); border-radius: var(--rm-radius-sm); background: var(--rm-surface); }
.rm-seo-section .rm-field { margin-bottom: .5rem; }
@media (max-width: 639px) { .rm-seo-row { grid-template-columns: 1fr; } .rm-seo-row-actions { justify-self: start; } }

/* ── Blog editörü v3 (2026-10-08) — telefon bölümünün (12. PHONE PASS) ÖNÜNDE: yapışkan çubuk burada ─
   Sahip: "blog yazı yaz kısmı hâlâ çok kullanışlı değil ve biraz zor." Tek sütun, yazı önce;
   üstte yapışkan işlem çubuğu (Taslağı kaydet / Yayınla), altta katlanır bölümler. */
.rm-bed { max-width: 860px; margin: 0 auto; display: flex; flex-direction: column; gap: .875rem; }
.rm-bed-bar { position: sticky; top: var(--rm-topbar-h); z-index: 20; display: flex; align-items: center; flex-wrap: wrap; gap: .5rem .625rem;
  margin: 0 -.25rem; padding: .625rem .25rem; background: var(--rm-bg); border-bottom: 1px solid var(--rm-border); }
.rm-bed-h1 { font-size: 1.0625rem; font-weight: 700; margin: 0; color: var(--rm-text); }
.rm-bed-dirty { font-size: .8125rem; color: var(--rm-text-muted); }
.rm-bed-dirty.is-dirty { color: var(--rm-warning); font-weight: 600; }
.rm-bed-actions { margin-left: auto; display: flex; flex-wrap: wrap; gap: .5rem; }
.rm-bed-restore { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; padding: .75rem 1rem; border-radius: var(--rm-radius);
  border: 1px solid var(--rm-brand-border); background: var(--rm-brand-soft); font-size: .875rem; color: var(--rm-text); }
.rm-bed-restore span { flex: 1 1 16rem; }
.rm-bed-paper { padding: 1.25rem 1.25rem 1rem; display: flex; flex-direction: column; gap: .625rem; }
.rm-bed-langrow { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem .625rem; }
.rm-bed-langrow .rm-label { margin: 0; }
.rm-bed-langsel { width: auto; min-width: 10rem; height: 36px; }
.rm-bed-langrow .rm-set-hint { flex: 1 1 100%; margin: 0; }
.rm-bed-title { width: 100%; border: 0; background: transparent; color: var(--rm-text); font-size: 1.75rem; font-weight: 750;
  line-height: 1.25; padding: .25rem 0; outline: none; border-bottom: 2px solid var(--rm-border); }
.rm-bed-title:focus { border-bottom-color: var(--rm-brand); }
/* the phone rule that sets every input to 16px (12px-zoom guard) is more specific than a class */
#bf-title.rm-bed-title { font-size: 1.75rem; }
.rm-bed-title::placeholder { color: var(--rm-text-muted); font-weight: 600; }
.rm-bed-addr { display: flex; align-items: center; gap: .375rem; font-size: .8125rem; color: var(--rm-text-muted); flex-wrap: wrap; }
.rm-bed-addr-k { font-weight: 600; color: var(--rm-text-secondary); }
.rm-bed-addr .rm-input { flex: 1 1 14rem; height: 34px; font-size: .8125rem; min-width: 0; }
.rm-bed-cover { display: flex; flex-direction: column; gap: .5rem; }
.rm-bed-cover .rm-blog-cover { height: 180px; }
.rm-bed-toolbar { position: sticky; top: calc(var(--rm-topbar-h) + 3.75rem); z-index: 10; margin: .25rem -1.25rem 0; padding: .375rem 1.25rem;
  flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
.rm-bed-toolbar .rm-blog-tool { flex: 0 0 auto; font-size: .8125rem; font-weight: 600; }
.rm-bed-editor { min-height: 26rem; padding: 1rem .125rem; font-size: 1rem; line-height: 1.8; }
.rm-bed-editor:focus { box-shadow: none; }
.rm-bed-editor:empty::before { content: attr(data-placeholder); color: var(--rm-text-muted); pointer-events: none; }
.rm-bed-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; padding-top: .5rem;
  border-top: 1px solid var(--rm-border); font-size: .8125rem; }
.rm-bed-sec { padding: 0; }
.rm-bed-sec-head { display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .75rem; padding: .875rem 1.25rem; cursor: pointer; list-style: none; min-height: 52px; }
.rm-bed-sec-head::-webkit-details-marker { display: none; }
.rm-bed-sec-title { font-weight: 700; font-size: .9375rem; color: var(--rm-text); }
.rm-bed-sec-sub { font-size: .8125rem; color: var(--rm-text-muted); display: inline-flex; gap: .375rem; flex-wrap: wrap; }
.rm-bed-chev { margin-left: auto; color: var(--rm-text-muted); transition: transform var(--rm-t); }
.rm-bed-sec[open] .rm-bed-chev { transform: rotate(180deg); }
.rm-bed-sec-body { padding: 0 1.25rem 1.25rem; display: flex; flex-direction: column; gap: .875rem; }
.rm-bed-sec-body .rm-serp { margin-top: 0; }
.rm-bed-opt { font-weight: 400; color: var(--rm-text-muted); margin-left: .25rem; }
.rm-bed-count { font-weight: 500; color: var(--rm-text-muted); margin-left: .375rem; }
.rm-bed-count.is-warn { color: var(--rm-warning); }
.rm-bed-checkhead { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: baseline; padding-top: .5rem; border-top: 1px solid var(--rm-border); font-size: .875rem; }
.rm-bed-grid { display: grid; gap: .875rem 1rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.rm-bed-danger { display: flex; flex-wrap: wrap; gap: .5rem; padding-top: .875rem; border-top: 1px solid var(--rm-border); }
.rm-bed-del { color: var(--rm-danger); margin-left: auto; }
.rm-bed-show-sm { display: none; }
@media (max-width: 639px) {
  .rm-bed-hide-sm { display: none; }
  .rm-bed-show-sm { display: inline; }
  .rm-bed-bar { flex-wrap: nowrap; gap: .375rem; }
  .rm-bed-actions { flex-wrap: nowrap; gap: .375rem; }
  .rm-bed-actions .rm-btn { padding-left: .75rem; padding-right: .75rem; }
  .rm-bed-h1 { display: none; }
  .rm-bed-paper { padding: 1rem .875rem .875rem; }
  #bf-title.rm-bed-title { font-size: 1.375rem; }
  /* the address field: the phone pass forces every input to 16px (iOS focus-zoom) — here that is intended,
     so say it (the 13px/34px desktop rule above no longer looks like an accident) and give it a thumb-sized box */
  #bf-slug.rm-input, .rm-bed-addr .rm-input { font-size: 16px; height: 44px; }
  .rm-bed-toolbar { margin: .25rem -.875rem 0; padding: .375rem .875rem; position: static; }
  .rm-bed-sec-head { padding: .75rem .875rem; }
  .rm-bed-sec-body { padding: 0 .875rem 1rem; }
  .rm-bed-cover .rm-blog-cover { height: 140px; }
}


/* ── Yapışkan kayıt çubuğu (2026-10-08) — telefon bölümünün ÖNÜNDE ───────────────────────────────────
   Uzun bir ayar sekmesinin Kaydet düğmesi ekranın çok altındaydı. `rm-savebar` (rados-site-settings.js,
   `rm-set-save rm-savebar`) sayfa kabının altına yapışır. Alt menü (#rm-bottomnav) fixed ve z-index 990
   olduğu için telefonda çubuk onun ÜSTÜNDE durur: bottom = --rm-bottomnav-space. Yapışkan olması için
   hiçbir ata `overflow: hidden/auto` olmamalı (html/body için `overflow-x: clip` dosya sonunda). */
.rm-savebar {
  position: sticky; bottom: 0; z-index: 15;
  margin-top: 1rem; padding: .75rem 1rem;
  background: var(--rm-surface); border-top: 1px solid var(--rm-border-strong);
  border-radius: var(--rm-radius-lg) var(--rm-radius-lg) 0 0;
  box-shadow: 0 -8px 20px rgba(0, 0, 0, .18);
}
@media (max-width: 1023px) { body:has(#rm-bottomnav) .rm-savebar { bottom: var(--rm-bottomnav-space); } }
@media (max-width: 639px) { .rm-savebar { padding: .625rem .75rem; } }

/* ---------------------------------------------------------------
   12. PHONE PASS (2026-09-20) — 65% of visitors buy on a phone.
   Every rule here is additive and scoped to ≤ 767px or a coarse pointer; nothing
   changes the desktop. Layering rules from §"PHONE ORDER LAYOUT" still hold:
   no new fixed layers, no transforms over content.
   --------------------------------------------------------------- */
@media (max-width: 767px) {
  /* 12a. Forms never trigger the iOS focus-zoom: every text control is at least 16px.
     (WebKit zooms the page when a focused control renders text below 16px.) */
  .rm-input, .rm-select, .rm-textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select, textarea { font-size: 16px; }
  .rm-select-sm { font-size: 14px; }   /* the sort/kind pill is a chip, not a text field */

  /* 12b → 12i. New Order tools on a phone: two labelled native pickers on one row
     (Sıralama | Tür — panel.js rmRenderOrderTools renders the sort as a <select> for phones)
     and the three capability chips under them. No swipe strip, nothing hidden off-screen. */
  .rm-order-tools { flex-wrap: wrap; gap: .5rem .5rem; margin: .25rem 0 .5rem; overflow: visible; }
  .rm-order-selwrap { flex: 1 1 calc(50% - .25rem); min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: .2rem; }
  .rm-order-sellabel { font-size: .6875rem; font-weight: 600; letter-spacing: .02em; color: var(--rm-text-muted); }
  .rm-order-selwrap .rm-select-sm { width: 100%; min-width: 0; height: 44px; font-size: 16px; border-radius: 12px; padding: 0 2rem 0 .75rem; }
  .rm-order-filters { flex: 1 1 100%; flex-wrap: wrap; padding-left: 0; border-left: 0; gap: .375rem; }
  .rm-order-tools .rm-chipbtn-sm { height: 36px; padding: 0 .75rem; font-size: .75rem; }

  /* 12c. Readable minimums: nothing a buyer must read is below 12px. */
  .rm-svc-meta, .rm-svc-tail, .rm-summary-grid span, .rm-dl, .rm-order-warn, .rm-details > p, .rm-help-tip > summary { font-size: .75rem; }
  .rm-summary-grid b { font-size: .875rem; }
  .rm-bottomnav a { font-size: .6875rem; }

  /* 12d. Tap targets: 40px minimum on the small links the dashboard and profile
     carry (stat actions, tier chip, profile links) — padding, not layout changes. */
  .rm-statgrid-dash .rm-stat-action, .rm-dash-tier, .rm-userbox-meta, .rm-text-link, .rm-link-sm {
    min-height: 40px; display: inline-flex; align-items: center; padding-top: .25rem; padding-bottom: .25rem;
  }
  input[type="checkbox"], input[type="radio"] { width: 20px; height: 20px; }
  /* :where() = specificity 0 (a bare `label:has(> input)` is (0,1,2) and, even inside @media, beat every
     (0,1,0) component class: .rm-set-toggle 44→40 + align-items, .rm-rf-check inline-flex→flex). A label that
     styles itself keeps its own display/min-height/gap; a plain label still gets the 40px thumb row. */
  :where(label:has(> input[type="checkbox"]), label:has(> input[type="radio"])) { min-height: 40px; display: flex; align-items: center; gap: .5rem; }

  /* 12e. Order form: the total and the button are the last thing on the sheet — keep
     them clear of the bottom nav when the form is the last block on screen. */
  .rm-order-mobile-form .rm-card { padding-bottom: .5rem; }
  .rm-order-mobile-form .rm-total { margin-top: 1rem; }
  .rm-order-mobile-form .rm-btn-block, .rm-order-mobile-form .rm-btn-lg { min-height: 48px; font-size: 1rem; }
  .rm-order-back { min-height: 44px; }

  /* 12f. Topbar: at 375px the bar is full with balance + bell + avatar. The language
     select mounts into the account menu instead (rados-i18n.js); the currency picker
     hides under 400px (the balance stays in TL either way). */
  .rm-topbar-right { gap: .375rem; }
  .rm-topbar-right .rm-lang-select { display: none; }
  .rm-menu .rm-lang-select { display: block; width: calc(100% - 1.5rem); margin: .375rem .75rem .5rem; height: 40px; font-size: 14px; }
}
@media (max-width: 400px) {
  .rm-balance select, #nav-currency { display: none; }
  .rm-balance { padding-right: .625rem; }
}
@media (pointer: coarse) {
  .rm-chipbtn { min-height: 36px; }
  .rm-svc-fav, .rm-svc-cmp { min-width: 44px; }
  .rm-iconbtn { min-width: 44px; min-height: 44px; }
}
/* 12g. The "back to the list" control on a phone is a labelled pill, not a bare arrow:
   an icon-only 44px square next to the "Sipariş Özeti" heading read as decoration. */
.rm-order-back-label { display: none; }
@media (max-width: 767px) {
  .rm-order-back { flex: 0 0 auto; width: auto; padding: 0 .875rem 0 .625rem; gap: .5rem; border-radius: 999px; font-size: .8125rem; font-weight: 600; }
  .rm-order-back-label { display: inline; }
}

/* 12h. PHONE PASS, second round (owner's screenshots, 2026-09-20 evening).
   (1) The topbar overflowed at ≤ 360px: balance chip + "Yükle" + bell + avatar were wider
       than the bar, the avatar fell off the right edge. Under 420px "Yükle" is icon-only,
       the wallet icon goes, the balance chip may shrink with an ellipsis.
   (2) The service card: with the price column and two 44px action buttons beside it, the
       text column was ~100px wide and a card ran to nine lines. On a phone the card is
       three rows: icon + text (full width), the price, then favourite/compare as a
       40px bottom strip. Same DOM, same tap targets, nothing layered. */
@media (max-width: 420px) {
  .rm-topbar { gap: .25rem; padding: 0 .5rem; }
  .rm-topbar-right { gap: .25rem; min-width: 0; }
  .rm-balance { min-width: 0; overflow: hidden; padding: 0 .5rem; }
  .rm-balance i { display: none; }
  .rm-balance-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 6.5rem; }
  .rm-topbar-right > a.rm-btn-secondary { width: 36px; min-width: 36px; padding: 0; justify-content: center; font-size: 0; gap: 0; }
  .rm-topbar-right > a.rm-btn-secondary i { font-size: .875rem; }
  .rm-topbar .rm-iconbtn { min-width: 36px; width: 36px; }
}
@media (max-width: 767px) {
  .rm-svc { flex-wrap: wrap; }
  .rm-svc-main { flex: 1 1 100%; flex-wrap: wrap; align-items: flex-start; gap: .625rem; padding: .625rem .75rem .375rem; }
  .rm-svc-ico { margin-top: .125rem; }
  .rm-svc-body { flex: 1 1 0; min-width: 0; }
  .rm-svc-price { flex: 1 0 100%; flex-direction: row; justify-content: flex-end; align-items: baseline; gap: .3rem; margin-top: .25rem; }
  .rm-svc-price-val { font-size: 1rem; }
  .rm-svc-price-unit { font-size: .75rem; }
  .rm-svc-fav, .rm-svc-cmp { flex: 1 1 50%; min-height: 40px; border-left: 0; border-top: 1px solid var(--rm-border); font-size: .9375rem; }
  .rm-svc-cmp { border-left: 1px solid var(--rm-border); }
}
/* 12i (desktop side): the pickers' captions exist for the phone layout only. */
@media (min-width: 768px) { .rm-order-sellabel { display: none; } }
/* 12j. No horizontal page scroll on a phone, ever: any element that overflows the viewport is
   clipped instead of widening the layout viewport (Android Chrome then stretches every fixed
   bar to the wider layout — the topbar ran past the screen on the owner's iPhone SE test,
   2026-09-20). `clip` does not create a scroll container, so sticky/fixed behave as before. */
@media (max-width: 1023px) {
  html, body { overflow-x: clip; }
  .rm-main, .rm-page { min-width: 0; max-width: 100vw; overflow-x: clip; }
  .rm-topbar-right { min-width: 0; flex-shrink: 1; }
}

/* Support: our channels row (2026-09-20). Large targets, four per row on a phone. */
.rm-support-channels { margin: 1.25rem 0; }   /* the block now closes /destek, under the ticket grid */
.rm-support-channels .rm-card-header { display: block; }
.rm-support-channels .rm-sub { margin-top: .25rem; }
.rm-support-channel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: .5rem; padding: .875rem; }
.rm-support-channel {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .375rem;
  min-height: 64px; padding: .5rem .25rem; border-radius: 12px; border: 1px solid var(--rm-border);
  background: var(--rm-surface-2); color: var(--rm-text); text-decoration: none; font-size: .75rem; font-weight: 600;
  transition: border-color var(--rm-t), background var(--rm-t);
}
.rm-support-channel i { font-size: 1.375rem; }
.rm-support-channel:hover { border-color: var(--rm-brand-border); background: var(--rm-surface-hover); }
@media (max-width: 767px) { .rm-support-channel-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .375rem; padding: .75rem; } .rm-support-channel { font-size: .6875rem; } }

/* Blog SEO kontrol listesi özeti (2026-09-22): liste artık eksikleri en üste alıyor ve
   kaç eksik olduğunu tek satırda söylüyor — on bir rozeti okuyup saymak gerekmesin. */
.rm-blog-check-sum { margin: 0 0 .5rem; font-size: .8125rem; color: var(--rm-text-secondary); }
.rm-blog-check-sum b { color: var(--rm-danger); }
.rm-blog-check-sum.is-clear { color: var(--rm-success); }

/* ── Blog editörü: okunabilirlik ve erişilebilirlik (2026-09-22) ───────────────
   Sahibin şikâyeti: "blog kısmına ciddi revize gerekiyor, tasarım kötü ve kullanışsız."
   Ölçüm (tests/browser/page_audit.js, editör açıkken 1280px): 9 adet 12px altı metin,
   13×13 onay kutusu ve yan sütun 1686px — yapışkan olduğu için ALT KISMINA HİÇ
   ULAŞILAMIYORDU: SEO kontrol listesi ve arama önizlemesi orada duruyor. */
.rm-set-hint { font-size: .75rem; }
.rm-serp-note { font-size: .75rem; letter-spacing: .04em; }
.rm-blog-check { font-size: .8125rem; }
.rm-blog-check-label small { font-size: .75rem; }
.rm-blog-check .rm-badge { font-size: .75rem; }
.rm-blog-htmltoggle input { width: 18px; height: 18px; accent-color: var(--rm-brand); flex: 0 0 auto; }

/* Yapışkan yan sütun kendi içinde kayar: içeriği ekrandan uzunsa alt ucu artık
   erişilebilir. Yapışkanlığı kaldırmak yerine bu seçildi — yazı yazarken SEO
   listesinin gözden kaybolmaması zaten kolonun varlık sebebi. */
@media (min-width: 1100px) {
  .rm-blog-side {
    max-height: calc(100vh - var(--rm-topbar-h) - 2rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: .25rem;
  }
}
@media (pointer: coarse) {
  .rm-blog-htmltoggle input { width: 22px; height: 22px; }
}

/* ── Yönetim liste ekranlarının başlığı ve filtre şeridi (2026-09-22) ──────────
   Sahibin şikâyeti: "siparişler kısmı çok dağınık... aynısı kullanıcılar için de".
   Ölçülen sebep: başlık satırında arama kutusu ile dört işlem düğmesi yan yanaydı,
   hemen altındaki dokuz filtre kutusu da aynı ağırlıkta duruyordu — hangisinin
   gezinme, hangisinin işlem olduğu okunmuyordu. Artık üç kat var: başlık + arama,
   filtre şeridi (gezinme), işlemler (ikincil). */
.rm-adminhead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(200px, 340px);
  align-items: center;
  gap: .75rem 1rem;
  margin-bottom: 1rem;
}
.rm-adminhead > h1 { margin: 0; }
.rm-adminhead-search { width: 100%; }
.rm-adminhead-ops {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  padding-top: .625rem; border-top: 1px solid var(--rm-border);
}
.rm-adminhead-opslabel { font-size: .75rem; color: var(--rm-text-muted); }
@media (max-width: 767px) {
  .rm-adminhead { grid-template-columns: 1fr; }
}

.rm-orderfilters {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: .375rem .5rem; margin-bottom: 1rem;
}
.rm-orderfilters-group { display: flex; flex-wrap: wrap; gap: .375rem; }
.rm-orderfilters-sep { width: 1px; height: 22px; background: var(--rm-border); }
.rm-orderchip {
  display: inline-flex; align-items: center; gap: .375rem;
  min-height: 36px; padding: .25rem .5rem .25rem .375rem;
  border: 1px solid var(--rm-border); border-radius: 999px;
  background: var(--rm-surface-2); cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.rm-orderchip:hover { border-color: var(--rm-brand-border); }
.rm-orderchip.is-active { border-color: var(--rm-brand); background: var(--rm-brand-soft); }
/* Sayı, kutunun kendisi kadar önemli: yönetici hangi kutuda iş olduğunu okumadan görsün. */
.rm-orderchip-n {
  min-width: 1.5rem; padding: 0 .375rem;
  font-size: .75rem; font-weight: 700; color: var(--rm-text);
  text-align: center;
}
.rm-orderchip-n:empty { display: none; }
.rm-orderchip.is-empty { opacity: .55; }
.rm-orderchip .status-badge { pointer-events: none; }
@media (max-width: 767px) {
  .rm-orderfilters-sep { display: none; }
  .rm-orderfilters-group { width: 100%; }
}

/* Telefonda dokuz filtre kutusu 204px yer kaplıyordu (ölçüldü, 375px) — listenin
   kendisi ekranın altına iniyordu. Telefonda tek satır select, masaüstünde kutular.
   Panelin telefon düzeni zaten bu yolu kullanıyor (sıralama da select'e dönüyor). */
.rm-filterselect { display: none; }
@media (max-width: 767px) {
  .rm-filterselect {
    display: flex; align-items: center; gap: .5rem;
    margin-bottom: 1rem;
  }
  .rm-filterselect > span { font-size: .75rem; color: var(--rm-text-muted); flex: 0 0 auto; }
  .rm-filterselect select { flex: 1 1 auto; min-height: 44px; font-size: 16px; }
  .rm-orderfilters { display: none; }
}

/* Seviye rozeti 11,52px ölçüldü (kullanıcı tablosu ve kenar çubuğu, 375 ve 1280) — panelin
   12px tabanının altında. Yönetici tabloda satır satır seviye okuyor, bu yazı okunur olmalı. */
.tier-badge { font-size: .75rem; }
/* Kullanıcı tablosundaki düzenle düğmesi 30×15 ölçüldü: tıklanacak bir hedef değil. */
.data-table td .btn-sm,
.data-table td .rm-btn-sm { min-height: 32px; display: inline-flex; align-items: center; justify-content: center; }

/* ═══════════════════════════════════════════════════════════════════════════
   AÇIK TEMA — ROZETLER VE KALAN GÖMÜLÜ RENKLER (2026-09-23)
   Ölçüm: tests/browser/audit_all.mjs --theme=light, 110 sayfa yüklemesi.
   Bu blok, ölçümde AA eşiğinin altında kalan her rozet için açık tema karşılığı
   verir. Renk KİMLİĞİ korunur (altın altın, bronz bronz kalır); değişen, açık
   zeminde okunmayan parlak tonun bir basamak koyulaşmasıdır.
   ═══════════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .status-pending,
[data-theme="light"] .status-maintenance { background: rgba(180,83,9,.10);  color: #92400E; }
[data-theme="light"] .status-processing  { background: rgba(29,78,216,.09);  color: #1D4ED8; }
[data-theme="light"] .status-completed   { background: rgba(21,128,61,.10);  color: #0F5C2B; }
[data-theme="light"] .status-partial     { background: rgba(194,65,12,.10);  color: #9A3412; }
[data-theme="light"] .status-cancelled,
[data-theme="light"] .status-failed      { background: rgba(220,38,38,.10);  color: #B91C1C; }

[data-theme="light"] .tier-bronze   { background: rgba(184,115,51,.14); color: #8A5A2B; border-color: rgba(184,115,51,.38); }
[data-theme="light"] .tier-silver   { background: rgba(138,145,153,.16); color: #5A6068; border-color: rgba(138,145,153,.38); }
[data-theme="light"] .tier-gold     { background: rgba(201,162,39,.14); color: #6E5500; border-color: rgba(201,162,39,.40); }
[data-theme="light"] .tier-reseller { background: rgba(155,89,182,.14); color: #6B2FA0; border-color: rgba(155,89,182,.38); }
[data-theme="light"] .tier-vip      { background: rgba(155,89,182,.14); color: #6B2FA0; border-color: rgba(155,89,182,.38); }

/* API dokümanındaki HTTP hata kodu #F87171 gömülüydü: açık zeminde 2,38:1. */
[data-theme="light"] .rm-api-http { color: #B91C1C; }

/* Logo ve tema (2026-09-23).
   Ölçüm: mevcut rados-logo-horizontal.png'nin arka planı ŞEFFAF DEĞİL — köşe pikseli
   rgb(10,15,31), alfa 255. Beyaz üst çubukta koyu bir dikdörtgen olarak görünüyor.
   Marka varlığı sahibinindir: filtre uygulayıp "düzeltmek" markayı bozmaktır. Bunun
   yerine iki yol açık:
     1) Admin → Ayarlar → Marka → "Logo (açık tema)" alanına koyu yazılı bir sürüm
        yüklenirse açık temada O kullanılır (aşağıdaki .is-light kuralları);
     2) yüklenmediyse logo açık temada bilinçli bir koyu rozet içinde durur —
        kaza gibi değil, marka kilidi gibi okunur. */
.rm-logo-light, .rp-logo-light { display: none; }
[data-theme="light"] .rm-logo-dark:has(~ .rm-logo-light),
[data-theme="light"] .rp-logo-dark:has(~ .rp-logo-light) { display: none; }
[data-theme="light"] .rm-logo-light,
[data-theme="light"] .rp-logo-light { display: block; }
/* Yedek rozet: yalnız koyu logo varsa (kardeş açık logo yoksa). */
[data-theme="light"] .rm-topbar-left > a:not(:has(.rm-logo-light)),
[data-theme="light"] .rp-brand:not(:has(.rp-logo-light)) {
  background: #0B0D14; border-radius: 10px; padding: .25rem .5rem;
}

/* Ayarlar: birleşik başlığın iç menüsü (2026-09-23).
   Yan menü 16 satırdan 10'a indi; birleşen işler kaybolmadı, seçilen başlığın içinde
   tek satırlık küçük bir menü olarak duruyor. */
.rm-set-subnav {
  display: flex; flex-wrap: wrap; gap: .25rem;
  margin-bottom: 1rem; padding-bottom: .75rem;
  border-bottom: 1px solid var(--rm-border);
}
.rm-set-subtab {
  min-height: 34px; padding: 0 .75rem; border-radius: 999px; cursor: pointer;
  border: 1px solid transparent; background: transparent;
  color: var(--rm-text-secondary); font-size: .8125rem; font-weight: 600;
}
.rm-set-subtab:hover { color: var(--rm-text); background: var(--rm-surface-2); }
.rm-set-subtab.is-active { background: var(--rm-brand-soft); border-color: var(--rm-brand-border); color: var(--rm-brand-text); }

/* Profil sekmeleri (2026-09-23) — altı bölüm tek sütunda 2.549px sürüyordu. */
.rm-profile-tabs { display: flex; flex-wrap: wrap; gap: .375rem; margin-bottom: 1.25rem; }
.rm-profile-tab {
  min-height: 38px; padding: 0 .875rem; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rm-border); background: var(--rm-surface-2);
  color: var(--rm-text-secondary); font-size: .8125rem; font-weight: 600;
}
.rm-profile-tab:hover { color: var(--rm-text); border-color: var(--rm-brand-border); }
.rm-profile-tab.is-active { background: var(--rm-brand-soft); border-color: var(--rm-brand); color: var(--rm-brand-text); }
.rm-profile-tab[hidden] { display: none; }
@media (max-width: 767px) { .rm-profile-tab { flex: 1 1 calc(50% - .1875rem); } }

/* ── Yönetim özet şeridi (2026-10-01) — panel.js rmInsights* ──────────────────
   Her yönetim sayfasının başlığının altındaki kartlar. Değişim oku + yazı birlikte
   (renk tek başına anlam taşımaz); durum tonu yalnız kenarlık + simge. */
.rm-insights { margin: 0 0 1.25rem; }
.rm-ins-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; }
.rm-ins-card {
  position: relative; min-width: 0; display: flex; flex-direction: column; gap: .2rem;
  background: var(--rm-surface); border: 1px solid var(--rm-border); border-radius: var(--rm-radius-lg);
  padding: .8rem .95rem .7rem;
}
.rm-ins-card.is-warn   { border-color: rgba(245, 158, 11, .45); box-shadow: inset 3px 0 0 var(--rm-warning); }
.rm-ins-card.is-danger { border-color: rgba(239, 68, 68, .45);  box-shadow: inset 3px 0 0 var(--rm-danger); }
.rm-ins-card.is-muted .rm-ins-value { color: var(--rm-text-secondary); }
.rm-ins-label { margin: 0; font-size: .75rem; font-weight: 600; color: var(--rm-text-secondary); line-height: 1.3; }
.rm-ins-label i { margin-right: .3rem; }
.rm-ins-card.is-warn .rm-ins-label i   { color: var(--rm-warning); }
.rm-ins-card.is-danger .rm-ins-label i { color: var(--rm-danger); }
.rm-ins-value { margin: 0; font-size: 1.45rem; font-weight: 800; color: var(--rm-text); line-height: 1.15; overflow-wrap: anywhere; }
.rm-ins-delta { margin: 0; font-size: .75rem; font-weight: 600; color: var(--rm-text-secondary); }
.rm-ins-delta i { margin-right: .15rem; }
.rm-ins-delta.is-good { color: var(--rm-success); }
.rm-ins-delta.is-bad  { color: var(--rm-danger); }
.rm-ins-delta-label { font-weight: 500; color: var(--rm-text-muted); }
.rm-ins-sub { margin: 0; font-size: .72rem; color: var(--rm-text-muted); line-height: 1.35; overflow-wrap: anywhere; }
.rm-ins-spark { display: block; width: 100%; height: 30px; margin-top: .35rem; overflow: visible; }
.rm-ins-spark-line { fill: none; stroke: var(--rm-chart-1); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rm-ins-spark-area { fill: var(--rm-chart-1); opacity: .12; stroke: none; }
.rm-ins-spark-dot  { fill: var(--rm-chart-1); stroke: var(--rm-surface); stroke-width: 2; }
.rm-ins-foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .5rem; font-size: .72rem; color: var(--rm-text-muted); }
.rm-ins-refresh { background: none; border: 0; padding: .25rem .35rem; color: var(--rm-brand-text); font-weight: 600; font-size: .75rem; cursor: pointer; border-radius: var(--rm-radius-sm); }
.rm-ins-refresh:hover { background: var(--rm-brand-soft); }
.rm-ins-error { margin: 0; font-size: .8rem; color: var(--rm-text-muted); }
.rm-ins-skel { min-height: 96px; background: linear-gradient(90deg, var(--rm-surface) 0%, var(--rm-surface-hover) 50%, var(--rm-surface) 100%); background-size: 200% 100%; animation: rm-ins-shimmer 1.4s ease-in-out infinite; }
@keyframes rm-ins-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .rm-ins-skel { animation: none; } }
.rm-insights .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
/* 2026-10-08 — the strip took 41% of a phone screen (315px of 812: 4 cards in two rows + a full-width button +
   the footer) and 372px of 900 on a desktop (12 cards in three rows) before the page's own content started.
   Phone  : one row of swipeable cards (~152px each, snap) + ONE line holding "Tümünü göster" and "Yenile"; the
            open state is the old two-column grid.
   Desktop: only the first grid row until "Tümünü göster" (rows 2+ get a 0px track and are clipped, so the
            number of cards that fit a row never has to be known here). Same button, same `.is-open` class
            (panel.js rmInsightsHtml) — the markup did not change. The user dashboard's own
            `.rm-card.rm-insights` has no data-page and is untouched. */
.rm-insights[data-page] { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; }
.rm-insights[data-page] > .rm-ins-grid, .rm-insights[data-page] > .rm-ins-error { flex: 1 1 100%; min-width: 0; }
.rm-insights[data-page] > .rm-ins-foot { flex: 1 1 16rem; margin-top: 0; }
.rm-ins-more {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 .875rem;
  border: 1px solid var(--rm-border); border-radius: var(--rm-radius); background: var(--rm-surface);
  color: var(--rm-brand-text); font-weight: 600; font-size: .8rem; cursor: pointer;
}
.rm-ins-more:hover { background: var(--rm-surface-hover); }
@media (min-width: 640px) {
  .rm-insights:not(.is-open) .rm-ins-grid.is-collapsible { grid-template-rows: auto; grid-auto-rows: 0; row-gap: 0; overflow: hidden; }
}
@media (max-width: 639px) {
  .rm-insights[data-page] { gap: .375rem .5rem; margin-bottom: 1rem; }
  .rm-ins-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .rm-ins-card { padding: .65rem .7rem .6rem; }
  .rm-ins-value { font-size: 1.2rem; }
  .rm-insights:not(.is-open) .rm-ins-grid {
    display: flex; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .rm-insights:not(.is-open) .rm-ins-grid::-webkit-scrollbar { display: none; }
  .rm-insights:not(.is-open) .rm-ins-card { flex: 0 0 9.5rem; scroll-snap-align: start; padding: .55rem .65rem .5rem; }
  .rm-insights:not(.is-open) .rm-ins-spark { display: none; }
  .rm-insights:not(.is-open) .rm-ins-sub, .rm-insights:not(.is-open) .rm-ins-delta-label { display: none; }
  .rm-insights:not(.is-open) .rm-ins-value { font-size: 1.1rem; }
  .rm-insights:has(> .rm-ins-more):not(.is-open) > .rm-ins-foot > span { display: none; }
  .rm-insights[data-page] > .rm-ins-foot { flex: 1 1 auto; justify-content: flex-end; }
  .rm-ins-more { min-height: 44px; }
  .rm-ins-refresh { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; padding: 0 .75rem; }
}

/* ── Analitik sayfası (2026-10-01) — assets/js/rados-analytics.js ─────────────
   Grafikler SVG/HTML, renkler --rm-chart-* (iki temada doğrulandı). Metin her zaman
   metin tokenlarında; seri rengi yalnız işarette (çizgi, çubuk, lejant karesi). */
.rm-an-head { margin-bottom: .75rem; }
.rm-an-lead { margin: .25rem 0 0; font-size: .85rem; color: var(--rm-text-muted); max-width: 70ch; }
.rm-an-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem; margin-bottom: .5rem; }
.rm-an-periods { display: inline-flex; flex-wrap: wrap; gap: .25rem; padding: .25rem; background: var(--rm-surface); border: 1px solid var(--rm-border); border-radius: var(--rm-radius); }
.rm-an-period { border: 0; background: none; color: var(--rm-text-secondary); font-weight: 600; font-size: .8rem; padding: .4rem .7rem; border-radius: var(--rm-radius-sm); cursor: pointer; min-height: 34px; }
.rm-an-period:hover { color: var(--rm-text); background: var(--rm-surface-hover); }
.rm-an-period.is-active { background: var(--rm-brand-soft); color: var(--rm-brand-text); box-shadow: inset 0 0 0 1px var(--rm-brand-border); }
.rm-an-custom { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; color: var(--rm-text-muted); }
.rm-an-custom .rm-input { width: auto; min-height: 36px; padding: .35rem .5rem; }
.rm-an-window { margin: 0 0 1rem; font-size: .78rem; color: var(--rm-text-muted); }
.rm-an-tabs { display: flex; gap: .25rem; overflow-x: auto; border-bottom: 1px solid var(--rm-border); margin-bottom: 1.1rem; scrollbar-width: thin; }
.rm-an-tab { flex: 0 0 auto; border: 0; background: none; color: var(--rm-text-secondary); font-weight: 600; font-size: .85rem; padding: .6rem .8rem; border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; }
.rm-an-tab:hover { color: var(--rm-text); }
.rm-an-tab.is-active { color: var(--rm-brand-text); border-bottom-color: var(--rm-brand); }
.rm-an-kpis { margin-bottom: 1rem; }
.rm-an-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.rm-an-panel { min-width: 0; background: var(--rm-surface); border: 1px solid var(--rm-border); border-radius: var(--rm-radius-lg); padding: 1rem 1.1rem; }
.rm-an-panel.is-wide { grid-column: 1 / -1; }
.rm-an-panel-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; }
.rm-an-panel-head h2 { margin: 0; font-size: .95rem; font-weight: 700; color: var(--rm-text); }
.rm-an-panel-lead { margin: 0 0 .5rem; font-size: .75rem; color: var(--rm-text-muted); }
.rm-an-h2 { margin: 1.25rem 0 .6rem; font-size: 1rem; font-weight: 700; color: var(--rm-text); }
.rm-an-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.rm-an-sort { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--rm-text-secondary); }
.rm-an-note { font-size: .75rem; color: var(--rm-text-muted); margin: .5rem 0 0; }
.rm-an-empty { margin: .5rem 0; font-size: .85rem; color: var(--rm-text-muted); }
.rm-an-error { padding: 1.25rem; border: 1px solid rgba(239, 68, 68, .35); border-radius: var(--rm-radius-lg); color: var(--rm-text); background: var(--rm-danger-soft); }
.rm-an-pager { display: flex; align-items: center; gap: .6rem; margin-top: .75rem; font-size: .85rem; color: var(--rm-text-secondary); }
.rm-an-chips { display: flex; flex-wrap: wrap; gap: .4rem; }
.rm-an-tableview { margin-top: .6rem; font-size: .8rem; }
.rm-an-tableview summary { cursor: pointer; color: var(--rm-brand-text); font-weight: 600; width: max-content; }
.rm-an-tableview .table-wrapper { margin-top: .5rem; max-height: 320px; overflow: auto; }
.rm-an .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* grafikler */
.rm-ch { position: relative; min-height: 60px; }
.rm-ch svg { display: block; overflow: visible; }
.rm-ch-grid { stroke: var(--rm-chart-grid); stroke-width: 1; }
.rm-ch-axis { fill: var(--rm-chart-axis); font-size: 11px; font-variant-numeric: tabular-nums; }
.rm-ch-line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.rm-ch-line.is-s1 { stroke: var(--rm-chart-1); }
.rm-ch-line.is-prev { stroke: var(--rm-chart-axis); stroke-dasharray: 5 4; opacity: .85; }
.rm-ch-area { fill: var(--rm-chart-1); opacity: .10; }
.rm-ch-cross { stroke: var(--rm-chart-axis); stroke-width: 1; stroke-dasharray: 3 3; }
.rm-ch-dot { stroke: var(--rm-surface); stroke-width: 2; }
.rm-ch-dot.is-s1 { fill: var(--rm-chart-1); }
.rm-ch-dot.is-prev { fill: var(--rm-chart-axis); }
.rm-ch-bar { fill: var(--rm-chart-1); }
.rm-ch-bar.is-hot { fill: var(--rm-chart-2); }
.rm-ch-legend { display: inline-flex; flex-wrap: wrap; gap: .75rem; font-size: .75rem; color: var(--rm-text-secondary); }
.rm-ch-key { display: inline-flex; align-items: center; gap: .35rem; }
.rm-ch-swatch { display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: var(--rm-chart-1); vertical-align: middle; }
.rm-ch-swatch.is-prev { background: repeating-linear-gradient(90deg, var(--rm-chart-axis) 0 5px, transparent 5px 8px); }
.rm-ch-tip {
  position: absolute; z-index: 5; pointer-events: none; min-width: 140px; max-width: 260px;
  display: flex; flex-direction: column; gap: .15rem; padding: .5rem .65rem; font-size: .75rem; color: var(--rm-text);
  background: var(--rm-surface-2, var(--rm-surface)); border: 1px solid var(--rm-border-strong); border-radius: var(--rm-radius-sm); box-shadow: var(--rm-shadow);
}
.rm-ch-tip[hidden] { display: none; }
.rm-ch-tip span { display: flex; align-items: center; gap: .35rem; color: var(--rm-text-secondary); }
.rm-ch-tip b { color: var(--rm-text); }
.rm-ch-tip small { color: var(--rm-text-muted); }

/* yatay çubuklar */
.rm-hb { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .55rem; }
.rm-hb-row { display: grid; grid-template-columns: minmax(90px, 32%) minmax(0, 1fr) auto; align-items: center; gap: .6rem; font-size: .8rem; }
.rm-hb-label { color: var(--rm-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rm-hb-track { height: 10px; border-radius: 4px; background: var(--rm-surface-hover); overflow: hidden; }
.rm-hb-fill { display: block; height: 100%; border-radius: 0 4px 4px 0; background: var(--rm-chart-1); }
.rm-hb-row.is-good .rm-hb-fill { background: var(--rm-success); }
.rm-hb-row.is-warn .rm-hb-fill { background: var(--rm-warning); }
.rm-hb-row.is-bad .rm-hb-fill  { background: var(--rm-danger); }
.rm-hb-row.is-info .rm-hb-fill { background: var(--rm-info); }
.rm-hb-val { color: var(--rm-text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.rm-hb-val b { color: var(--rm-text); }
.rm-hb-val small { color: var(--rm-text-muted); margin-left: .2rem; }

@media (max-width: 767px) {
  .rm-an-grid { grid-template-columns: minmax(0, 1fr); }
  .rm-an-panel { padding: .85rem .8rem; }
  .rm-hb-row { grid-template-columns: minmax(80px, 36%) minmax(0, 1fr); }
  .rm-hb-val { grid-column: 2; }
  .rm-an-custom { width: 100%; }
}

/* ── Trafik / Dönüşüm: ayrıntılı kaynak (2026-10-09) — sabit/yapışkan katman YOK ──── */
.rm-an-group { margin: 0 0 .6rem; background: var(--rm-surface); border: 1px solid var(--rm-border); border-radius: var(--rm-radius-lg); }
.rm-an-group > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; padding: .7rem .9rem; cursor: pointer; font-size: .9rem; color: var(--rm-text); list-style-position: inside; }
.rm-an-group > summary > span { font-size: .78rem; color: var(--rm-text-muted); }
.rm-an-group[open] > summary { border-bottom: 1px solid var(--rm-border); }
.rm-an-group > .table-wrapper, .rm-an-group > .rm-an-empty { margin: .5rem .6rem .7rem; }
.rm-an-camps { margin-top: .3rem; font-size: .75rem; color: var(--rm-text-muted); }
.rm-an-camps summary { cursor: pointer; color: var(--rm-brand-text); width: max-content; }
.rm-an-camps ul { margin: .3rem 0 0; padding-left: 1rem; }
.rm-an-hint { margin: 0 0 1rem; padding: .7rem .9rem; font-size: .8rem; line-height: 1.5; color: var(--rm-text-secondary); background: var(--rm-surface); border: 1px solid var(--rm-border); border-left: 3px solid var(--rm-warning); border-radius: var(--rm-radius-lg); }
.rm-an-hint b { color: var(--rm-text); }
.rm-an-linkgen { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .6rem .75rem; align-items: end; }
.rm-an-linkgen label { display: grid; gap: .25rem; font-size: .75rem; color: var(--rm-text-muted); min-width: 0; }
.rm-an-linkgen .rm-input, .rm-an-linkgen .rm-select { width: 100%; min-width: 0; }
.rm-an-linkout { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.rm-an-linkout .rm-input { flex: 1 1 240px; min-width: 0; }

/* ── İade & Kalite (2026-10-01) — rados-admin-refunds.js ─────────────────────
   Otomatik iade inceleme listesi, iade defteri, geçmiş iadesizler, Kalite Kilidi. */
#refunds-admin .rm-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.rm-rf-card { padding: .875rem; margin-bottom: .875rem; }
.rm-rf-note { margin: 0 0 .75rem; font-size: .8125rem; line-height: 1.5; color: var(--rm-text-secondary); }
.rm-rf-note b { color: var(--rm-text); }
.rm-rf-cell { min-width: 0; }
.rm-rf-actions { display: flex; flex-wrap: wrap; gap: .375rem; }
.rm-rf-actions .rm-btn { white-space: nowrap; }
.rm-rf-bulk { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .75rem; }
.rm-rf-check { display: inline-flex; align-items: center; gap: .5rem; min-height: 40px; font-size: .875rem; color: var(--rm-text); cursor: pointer; }
.rm-rf-check input { width: 18px; height: 18px; accent-color: var(--rm-brand); }
.rm-rf-h2 { margin: 1rem 0 .5rem; font-size: 1rem; }
.rm-rf-rule { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.rm-rf-rule > div { flex: 1 1 320px; min-width: 0; }
.rm-rf-rule p { margin: 0 0 .375rem; font-size: .8125rem; line-height: 1.5; color: var(--rm-text-secondary); }
.rm-rf-rule-title { font-weight: 700; color: var(--rm-text) !important; }
.rm-rf-rule-title i { color: var(--rm-brand-text); margin-right: .25rem; }
.rm-rf-meter { display: inline-block; vertical-align: middle; width: 72px; height: 8px; margin-right: .5rem; border-radius: 999px; background: var(--rm-surface-2); overflow: hidden; }
.rm-rf-meter span { display: block; height: 100%; border-radius: 999px; background: var(--rm-warning); }
.rm-rf-meter span.is-over { background: var(--rm-danger); }
.rm-rf-settings .rm-field { display: block; max-width: 360px; margin: .5rem 0; }
.rm-rf-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 360px)); gap: .25rem 1rem; }
.rm-rf-settings .rm-rf-actions { margin-top: 1rem; }
@media (max-width: 767px) {
  .rm-rf-card { padding: .75rem; }
  .rm-rf-actions { justify-content: flex-end; }
  .data-table td .rm-rf-actions .rm-btn { height: auto; min-height: 40px; }   /* .data-table td .rm-btn-sm (0,2,1) 32px idi */
  .rm-rf-bulk .rm-btn { width: 100%; min-height: 44px; }
}

/* ── Yeni Sipariş: sunucu bilgisi (2026-10-01) — panel.js rmSvcPerfHtml / rmServersHtml ──
   Her kartta son 90 günün tamamlanma payı + ortanca süre + sipariş sayısı; seçili serviste
   aynı ürünü veren diğer sunucuların karşılaştırması. Ton yalnız destek: yüzde metni hep yazılı. */
.rm-svc-perf { display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin-top: .375rem; font-size: .75rem; color: var(--rm-text-secondary); }
.rm-svc-perf i { margin-right: .2rem; font-size: .6875rem; }
.rm-svc-perf .rm-perf-rate { font-weight: 700; color: var(--rm-text); }
.rm-svc-perf.is-good .rm-perf-rate, .rm-perf-good { color: var(--rm-success); font-weight: 700; }
.rm-svc-perf.is-low .rm-perf-rate, .rm-perf-low { color: var(--rm-warning); font-weight: 700; }
.rm-svc-perf .rm-perf-n { color: var(--rm-text-muted); }
.rm-svc-perf.is-thin { color: var(--rm-text-muted); }

.rm-order-servers:empty { display: none; }
.rm-servers { margin: .625rem 0 .75rem; padding: .75rem; border: 1px solid var(--rm-border); border-radius: var(--rm-radius-lg); background: var(--rm-surface-2); }
.rm-servers-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .25rem .75rem; margin-bottom: .5rem; }
.rm-servers-title { margin: 0; font-size: .875rem; font-weight: 700; color: var(--rm-text); }
.rm-servers-title i { margin-right: .3rem; color: var(--rm-brand-text); }
.rm-servers-head .rm-muted { font-size: .75rem; }
.rm-servers-sort { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .5rem; }
.rm-servers-list { list-style: none; margin: 0 0 .375rem; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
.rm-server { display: flex; align-items: center; gap: .625rem; padding: .5625rem .625rem; border: 1px solid var(--rm-border); border-radius: var(--rm-radius); background: var(--rm-surface); }
.rm-server.is-current { border-color: var(--rm-brand-border); box-shadow: inset 3px 0 0 var(--rm-brand); }
.rm-server-main { flex: 1 1 auto; min-width: 0; }
.rm-server-name { margin: 0; font-size: .8125rem; font-weight: 600; color: var(--rm-text); line-height: 1.35; overflow-wrap: anywhere; }
.rm-server-id { font-size: .75rem; font-weight: 500; color: var(--rm-text-muted); }
.rm-server-facts { display: flex; flex-wrap: wrap; gap: .2rem .7rem; margin: .25rem 0 0; font-size: .75rem; color: var(--rm-text-secondary); }
.rm-server-facts i { margin-right: .2rem; font-size: .65rem; }
.rm-server-facts b { color: var(--rm-text); }
.rm-server-pick { flex: 0 0 auto; white-space: nowrap; }
.rm-servers-note { margin: .375rem 0 0; font-size: .75rem; }
.rm-order-guarantee { display: flex; gap: .5rem; align-items: flex-start; margin: .75rem 0 0; padding: .5625rem .6875rem; border-radius: var(--rm-radius);
  background: var(--rm-success-soft); color: var(--rm-text-secondary); font-size: .75rem; line-height: 1.45; }
.rm-order-guarantee i { color: var(--rm-success); margin-top: .15rem; }
.rm-order-guarantee b { color: var(--rm-text); }
@media (max-width: 767px) {
  .rm-server { gap: .5rem; padding: .5rem .5625rem; }
  .rm-server-pick { min-height: 40px; min-width: 64px; }
  .rm-servers-sort .rm-chipbtn { min-height: 36px; }
}
/* İade & Kalite tablosundaki durum rozetleri telefonda kart zemininin (surface-2) üstünde
   duruyor: ölçüm koyu "İptal" 4,11:1, açık "Kısmi" 4,14:1 (AA 4,5). Yalnız bu tabloda ton koyulaştı/açıldı. */
.rm-rf-table .rm-badge-danger  { color: #F87171; }
.rm-rf-table .rm-badge-warning { color: #FBBF24; }
[data-theme="light"] .rm-rf-table .rm-badge-danger  { color: #991B1B; }
[data-theme="light"] .rm-rf-table .rm-badge-warning { color: #92400E; }
/* Siparişlerim → detay: otomatik / yönetici iadesi (2026-10-01). */
.rm-orow-refund { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; margin: .5rem 0; padding: .5rem .625rem; border-radius: var(--rm-radius);
  background: var(--rm-success-soft); color: var(--rm-text); font-size: .8125rem; }
.rm-orow-refund i { color: var(--rm-success); }

/* ── Mobil denetim düzeltmeleri (2026-10-01, 375px) ────────────────────────────────────────── */
/* iOS 16px altındaki alanda odaklanınca sayfayı yakınlaştırır. Bu iki kural genel 16px kuralını
   özgüllükle eziyordu: toplu sipariş metin kutusu (13px) ve iptal/telafi notu (12px). */
@media (max-width: 1023px) {
  .rm-bulk .rm-textarea { font-size: 16px; }
  .rm-orow-request textarea { font-size: 16px; }
  .rm-menu .rm-lang-select { font-size: 16px; }
}
/* Dokunmatikte .rm-input { height: 44px } metin kutularını da 44px'e sabitliyordu (rows yok sayılıyor). */
@media (pointer: coarse) { textarea.rm-input { height: auto; min-height: 4.5rem; } }

/* 100vh mobil tarayıcı çubuğu görünürken ekrandan uzundur: pencerenin Kapat/Onayla düğmeleri
   alt çubuğun altında kalabiliyordu. dvh görünen yüksekliktir; desteklemeyen tarayıcı vh'de kalır. */
.rm-modal { max-height: calc(100dvh - 2rem); }
.rm-main { min-height: 100dvh; }

/* ── Kullanıcı Düzenle penceresi (2026-10-03) — panel.js editUser / rmUserEditHtml ──────
   Dört bölüm, her biri kendi düğmesiyle: ayarlar · bakiye ekle/düş · şifre · kullanıcı
   adına sipariş (servis adla aranır ya da #ID ile sunucuda çözülür, tutar önizlemesi). */
.rm-uedit { max-width: 560px; }
.rm-uedit-who { margin: 0 0 .75rem; font-size: .8125rem; line-height: 1.5; color: var(--rm-text-secondary); overflow-wrap: anywhere; }
.rm-uedit-who b { color: var(--rm-text); }
.rm-uedit-sec { margin-top: .875rem; padding: .875rem; border: 1px solid var(--rm-border); border-radius: var(--rm-radius-lg); background: var(--rm-surface-2); }
.rm-uedit-h { margin: 0 0 .625rem; font-size: .9375rem; font-weight: 700; color: var(--rm-text); }
.rm-uedit-h i { margin-right: .375rem; color: var(--rm-brand-text); }
.rm-uedit-seg { display: inline-flex; gap: .25rem; padding: .25rem; margin-bottom: .5rem; border: 1px solid var(--rm-border-strong); border-radius: var(--rm-radius); background: var(--rm-surface); }
.rm-uedit-seg label { display: inline-flex; align-items: center; gap: .375rem; min-height: 36px; padding: 0 .75rem; border-radius: var(--rm-radius-sm); font-size: .8125rem; font-weight: 600; color: var(--rm-text-secondary); cursor: pointer; }
.rm-uedit-seg label:has(input:checked) { background: var(--rm-brand-soft); color: var(--rm-text); }
.rm-uedit-note { margin: .375rem 0 0; font-size: .8125rem; line-height: 1.45; color: var(--rm-text-secondary); }
.rm-uedit-note.is-bad, .rm-uedit-svc .is-bad { color: var(--rm-danger); }
.rm-uedit-picker { position: relative; }
.rm-uedit-svc { margin-top: .5rem; padding: .5rem .625rem; border-radius: var(--rm-radius); border: 1px solid var(--rm-brand-border); background: var(--rm-surface); }
.rm-uedit-svc p { margin: 0; font-size: .8125rem; line-height: 1.45; overflow-wrap: anywhere; }
.rm-uedit-svc-name { font-weight: 700; color: var(--rm-text); }
.rm-uedit-svc-meta { color: var(--rm-text-secondary); }
.rm-uedit-pay { margin: .625rem 0 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: .25rem; }
.rm-uedit-pay label { display: flex; align-items: center; gap: .5rem; min-height: 32px; font-size: .8125rem; color: var(--rm-text); cursor: pointer; }
.rm-uedit-pay input, .rm-uedit-seg input { accent-color: var(--rm-brand); }
@media (max-width: 639px) {
  .rm-uedit-sec { padding: .75rem; }
  .rm-uedit-pay label { min-height: 40px; }
}

/* ── 12k. Dokunma hedefleri, ikinci tur (2026-10-08) — kök denetimi, 375px ölçümü ─────────────────────
   Görünümü büyütmek yerine hedef: ya gerçek kutu (kart düzenindeki telefon tabloları, sekmeler),
   ya da `::after` ile genişletilmiş tıklama alanı (kutusu başka bir şeye sıkışan küçük ögeler).
   Bu bölüm sticky/fixed içermez (mobile_pass_2026_09_20_test). Hâlâ 40px olanlar bilerek: .rm-btn-sm,
   onay kutusu/radyo satırları (:where label 40px), yoğun kimlik listeleri. */
@media (max-width: 767px) {
  /* yönetim: .btn-sm (36/32), Onayla/Reddet (32), simge düğmeleri (30 geniş). Tablolar bu genişlikte karttır. */
  /* rados-bridge.css (loaded AFTER this file) has `.btn-sm { min-height: 36px }` in (pointer: coarse): one element name more wins */
  html .btn-sm, .data-table td .btn-sm { min-height: 44px; min-width: 44px; }
  select:not([class*="rm-"]):not(.input-field) { min-height: 44px; }
  .rm-uedit-seg label, .rm-blog-htmltoggle { min-height: 44px; }
  .rm-bed-langsel { height: 44px; }
  .rm-svc-fav, .rm-svc-cmp { min-height: 44px; }
  .data-table td select { min-height: 44px; }
  /* ödeme / destek / kullanıcı-ayrıntı sekmeleri: Tailwind `px-4 py-2` (30-38px) */
  button.transition-all.flex-shrink-0 { min-height: 44px; }
  .chip-quick { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  /* sipariş / kullanıcı kimliği bağlantıları (14×16, 26×20, 80×16): kutu aynı kalır, tıklama alanı 44'e çıkar */
  .data-table td a.hover\:underline, .rm-table td a.hover\:underline { position: relative; }
  .data-table td a.hover\:underline::after, .rm-table td a.hover\:underline::after { content: ""; position: absolute; inset: -14px -15px; }
  /* düzenleme / servis penceresi ✕ (w-8 h-8 = 32px) */
  button.w-8.h-8[onclick*="_rmClose"] { width: 44px; height: 44px; }
  /* kullanıcı: kod bloğundaki Kopyala (63×26, kodun üstüne biniyor → alan büyür, kutu değil) */
  .rm-api-copy::after { content: ""; position: absolute; inset: -9px -4px; }
  .rm-search-clear::after { content: ""; position: absolute; inset: -7px; }
  .rm-orow-link { display: inline-flex; align-items: center; min-height: 44px; }
  .rm-chipbtn, .rm-chipbtn-sm { min-height: 44px; }
  .rm-order-tools .rm-chipbtn-sm { height: 44px; }
  .rm-servers-sort .rm-chipbtn { min-height: 44px; }
  .rm-profile-tab { min-height: 44px; }
  .rm-aff-share-btn { width: 44px; height: 44px; }
  .rm-onboarding-task { min-height: 44px; }
  /* <summary> (SSS, "Bakiye nasıl yüklenir"): display'i değiştirmeden dikey doldurma — işaretçi kalır */
  details > summary:not([class*="rm-"]) { padding-block: .5rem; }
  .rm-details > summary { display: flex; align-items: center; min-height: 44px; }   /* marker is already hidden; ::before is the arrow */
  .rm-pay-coupon > summary, .rm-pay-tier > summary, .rm-api-examples summary { min-height: 44px; }
  .rm-bed-toolbar .rm-blog-tool { min-height: 44px; min-width: 44px; }
}

/* 2026-10-08 — yapışkan (sticky) öğeler masaüstünde hiç yapışmıyordu: style.css `html, body
   { overflow-x: hidden }` diyor; `hidden` body'yi bir kaydırma kabı yapar (overflow-y: auto
   hesaplanır), sayfayı ise kök kaydırır → sticky, hiç kaymayan body'ye göre konumlanır.
   Etkilenenler: sipariş ve ödeme yan sütunları, ayarlar menüsü, blog editörü çubuğu.
   Telefonda 12j bunu `clip` ile çözmüştü; aynı kural artık her genişlikte. `clip` kaydırma
   kabı oluşturmaz; desteklemeyen eski tarayıcıda bildirim yok sayılır, eski davranış kalır. */
html, body { overflow-x: clip; }

/* 2026-10-08 — body.no-scroll (menü / pencere açıkken arka planı kilitler) hiçbir şey kilitlemiyordu:
   html'de overflow: visible yok (yukarıdaki clip), bu yüzden body'nin overflow'u görünüm penceresine
   taşınmıyor ve sayfa menü açıkken 400px kayıyordu (ölçüldü). Kilit anında html kaydırmayı keser;
   clip kuralından SONRA durur ki yalnız kilit sınıfı varken onu ezsin. */
html:has(> body.no-scroll), html:has(> body.rm-noscroll) { overflow: hidden; }

/* 2026-10-08 denetim düzeltmeleri — kullanıcı panelinin yeni parçaları (sticky/fixed YOK). */
.rm-order-done > div { padding: .3125rem 0; border-bottom: 1px solid var(--rm-border); }
.rm-order-done > div:last-child { border-bottom: 0; }
.rm-order-done dt { color: var(--rm-text-muted); font-weight: 500; flex: 0 0 auto; }
.rm-order-done dd { margin: 0; color: var(--rm-text); min-width: 0; }
.rm-txrow-actions { display: flex; flex-wrap: wrap; gap: .375rem .5rem; margin-top: .5rem; }
.rm-tx-modal { max-width: 32rem; width: calc(100% - 2rem); }
.rm-support-faq > summary { list-style: none; display: flex; align-items: center; min-height: 44px; }
.rm-support-faq > summary::-webkit-details-marker { display: none; }
.rm-support-faq > summary::after { content: '\25BE'; margin-left: auto; color: var(--rm-text-muted); }
.rm-support-faq[open] > summary::after { content: '\25B4'; }
.rm-bulk-ids { margin-top: .5rem; font-size: .8125rem; overflow-wrap: anywhere; }

/* 2026-10-08 destek listesi: müşteri yanıtı bekleyen talep satırı ve filtre sayıları (sticky/fixed YOK). */
.rm-ticket-waiting td { background: rgba(239, 68, 68, .06); }
.rm-ticket-waiting td:first-child { box-shadow: inset 3px 0 0 var(--rm-danger); }
.rm-tk-waiting-label { margin-top: .125rem; font-size: .6875rem; font-weight: 700; color: var(--rm-danger); }
.rm-tk-count { margin-left: .25rem; font-variant-numeric: tabular-nums; opacity: .8; }
.rm-tk-bulk .btn-sm[disabled] { opacity: .5; cursor: not-allowed; }

/* 2026-10-09 ek alan isteyen hizmetler (yorum / kullanıcı adı metni): sipariş formu, sipariş ayrıntısı, toplu sipariş uyarısı.
   Telefon bölümünden sonra yapışkan/sabit/transform yok; metin kutusu tam genişlik, 16px (telefon bölümü textarea'ya zaten 16px verir). */
.rm-extra-ta { min-height: 9rem; line-height: 1.5; resize: vertical; width: 100%; }
.rm-extra-count { margin-top: .3125rem; font-size: .75rem; color: var(--rm-text-secondary); font-variant-numeric: tabular-nums; }
.rm-extra-help { margin-top: .25rem; font-size: .75rem; }
.rm-extra-status { margin: .25rem 0 .5rem; font-size: .8125rem; line-height: 1.45; color: var(--rm-danger); }
.rm-extra-status:empty { display: none; }
.rm-extra-status.is-hint { color: var(--rm-text-muted); }
.rm-extra-block { display: flex; gap: .5rem; align-items: flex-start; padding: .625rem .75rem; margin-bottom: .75rem;
  border: 1px solid var(--rm-danger); border-radius: var(--rm-radius); background: var(--rm-danger-soft); color: var(--rm-text); font-size: .8125rem; line-height: 1.45; }
.rm-extra-detail { margin-top: .5rem; display: grid; gap: .375rem; font-size: .8125rem; }
.rm-extra-row summary { cursor: pointer; font-weight: 600; min-height: 32px; display: flex; align-items: center; gap: .375rem; }
.rm-extra-view { margin: .25rem 0 0; padding: .5rem .625rem; max-height: 14rem; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: inherit; font-size: .8125rem; line-height: 1.5; background: var(--rm-surface-2); border: 1px solid var(--rm-border); border-radius: var(--rm-radius); }
.rm-extra-val { overflow-wrap: anywhere; }
.rm-orow-extra { margin: .5rem 0; }
.rm-uedit-extra .input-field { width: 100%; }
.rm-bulk-extra-warn, .rm-bulk-extra-link { flex-basis: 100%; margin: .375rem 0 0; font-size: .8125rem; line-height: 1.45; color: var(--rm-danger); }
.rm-bulk-extra-warn a, .rm-bulk-extra-link a { font-weight: 700; text-decoration: underline; }
.rm-bulk-chosen:has(.rm-bulk-extra-warn) { flex-wrap: wrap; }

/* 2026-10-09 — "neden başarısız?" (yönetim sipariş listesi + Audit penceresi) */
.rm-failwhy { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; max-width: 14rem; margin-top: 2px; padding: 0; border: 0; background: none; text-align: left;
  color: var(--rm-danger, #ef4444); font: inherit; font-size: 12px; line-height: 1.35; cursor: pointer; white-space: normal; }
.rm-failwhy:hover, .rm-failwhy:focus-visible { text-decoration: underline; }
.rm-failcard { border-left: 3px solid var(--rm-danger, #ef4444); }
.rm-failcard code, .rm-failresp code { font-size: 12px; word-break: break-word; white-space: pre-wrap; }
.rm-failresp { display: flex; flex-direction: column; gap: 2px; padding: 6px 0; border-top: 1px solid var(--border-subtle); }

/* 2026-10-09 — sipariş listesi: satıştan kalkmış / gönderilemeyen hizmete çalışan alternatif önerisi */
.rm-orow-alt { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 6px; padding: 8px 10px;
  border-radius: 8px; background: var(--rm-brand-soft, rgba(124, 92, 255, .08)); border: 1px solid var(--border-subtle);
  font-size: 12px; line-height: 1.4; color: var(--text-primary); max-width: 22rem; }
.rm-orow-alt b { font-weight: 600; }