:root {
    --bg: #0f1115;
    --panel: #171a21;
    --border: #2a2e38;
    --text: #e6e6e6;
    --muted: #8b93a3;
    --green: #2ecc71;
    --green-strong: #17c964;
    --red: #ff5c5c;
    --red-strong: #ff2d2d;
    --yellow: #e8c547;
  }
  * { box-sizing: border-box; }
  html, body { height: 100%; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 14px;
    display: flex;
    flex-direction: column;
  }
  header {
    flex: 0 0 auto;
    padding: 14px 20px;
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
  }
  header h1 { font-size: 18px; margin: 0; }
  .header-title-group { display: flex; align-items: center; gap: 10px; }
  .app-logo { width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; }
  header .meta { color: var(--muted); font-size: 12px; }
  .warning { color: var(--yellow); font-size: 12px; margin-top: 4px; }
  #header-controls { display: flex; align-items: center; gap: 10px; }
  #search-wrap { position: relative; flex-shrink: 0; margin-left: 8px; }
  #search-input {
    width: 176px;
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    padding: 7px 30px 7px 10px;
    font-size: 13px;
    outline: none;
  }
  #search-input::placeholder { color: var(--muted); }
  #search-input:focus { border-color: var(--yellow); }
  #search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    cursor: pointer;
    font-size: 13px;
    display: none;
    user-select: none;
  }
  #search-clear:hover { color: var(--text); }
  .layout {
    display: flex;
    gap: 0;
    /* Sabit piksel hesaplari (calc(100vh - Xpx - Ypx)) yerine flex ile dolduruyor -
       header/footer gercek yuksekligi ne olursa olsun (arama kutusu satir
       kaydiginda, uyari mesaji goründugunde vb.) kalan alani otomatik ve
       dogru dolduruyor, footer asla viewport disina taşmiyor. */
    flex: 1 1 auto;
    min-height: 0;
  }
  #table-wrap {
    flex: 1 1 auto;
    overflow: auto;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
  }
  table { border-collapse: collapse; width: 100%; white-space: nowrap; }
  thead th {
    position: sticky; top: 0;
    background: var(--panel);
    text-align: right;
    padding: 8px 10px;
    font-size: 11px;
    color: var(--muted);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
  }
  thead th:hover { color: var(--text); }

  /* Sutun basligi hint'i: dogal tarayici title yerine tema ile uyumlu, ok
     isaretli ozel bir kucuk popup - hover'da th'nin hemen altinda belirir. */
  thead th[data-tip] { position: sticky; }
  thead th[data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: 220px;
    max-width: 60vw;
    white-space: normal;
    text-align: left;
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text);
    background: #1c2029;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.45);
    z-index: 60;
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease;
    pointer-events: none;
  }
  /* Tooltip metni her zaman DOM'da (view-source'tan gorulebilir, dusuk
     hassasiyetli icerik) ama GORSEL olarak sadece giris yapilmissa (body'de
     logged-in sinifi varsa) acilir - bkz. CLAUDE.md "Kullanici girisi". */
  body.logged-in thead th[data-tip]:hover::after {
    opacity: 1;
    visibility: visible;
  }
  /* En sagdaki sutunlarda popup ekran disina taşmasin diye saga yasla */
  thead th[data-tip]:nth-last-child(-n+3)::after {
    left: auto;
    right: 0;
    transform: translateY(4px);
  }
  thead th.left { text-align: left; }
  thead th.sorted { color: var(--text); }
  thead th .arrow { display: inline-block; width: 10px; font-size: 9px; color: var(--yellow); }
  tbody td { padding: 7px 10px; text-align: right; border-bottom: 1px solid #1d2029; }
  tbody td.left { text-align: left; font-weight: 600; }
  tbody tr { cursor: pointer; }
  /* (hover: hover) olmayan (dokunmatik) cihazlarda tiklama/secim sonrasi
     :hover sinifi gercek imlec olmadigi icin "yapismis" gorunuyordu - bu
     yuzden hover arka plani SADECE gercek imleci olan cihazlarda uygulanir
     (2026-11-02, kullanici bildirimiyle duzeltildi). */
  @media (hover: hover) and (pointer: fine) {
    tbody tr:hover { background: #1b1f29; }
  }
  tbody tr.selected { background: #2a2f45; box-shadow: inset 3px 0 0 var(--yellow); }
  /* tbody tr.selected ile tbody tr:hover AYNI ozguculukte (specificity) oldugu
     icin, .selected kaynak kodda SONRA geldigi icin HER ZAMAN kazaniyordu -
     secili bir satirin uzerine gelindiginde hover arka plani hic gorunmuyordu
     (2026-11-04, kullanici bildirimiyle bulundu/duzeltildi). Bu kural daha
     yuksek ozguculukle (class+pseudo-class) secili SATIRIN hover halini de
     AYRICA tanimliyor, boylece secim isareti (sari cizgi) kalirken arka plan
     da hover'da degisiyor. */
  @media (hover: hover) and (pointer: fine) {
    tbody tr.selected:hover { background: #333a56; }
  }
  .pos { color: var(--green); }
  .neg { color: var(--red); }
  .sym-AL { color: var(--green); }
  .sym-SAT { color: var(--red); }
  .sym-NOTR { color: var(--yellow); }
  .sym-GUCLU_AL { color: var(--green-strong); font-weight: 700; }
  .sym-GUCLU_SAT { color: var(--red-strong); font-weight: 700; }
  .sym-MUTLAK_AL { color: var(--green-strong); font-weight: 700; }
  .sym-MUTLAK_SAT { color: var(--red-strong); font-weight: 700; }
  .dash { color: var(--muted); }
  /* Skor hucresi (2026-11-06'da eklendi) - tiklanince Gunluk Skor Gecmisi
     popup'ini acar, satirin kendi tiklamasindan (hisse secimi) FARKLI bir
     hedef oldugu icin kullanici bunu HOVER ETMEDEN de anlamali - sadece
     ":hover" ile gosterilen bir ipucu (ilk tasarim) kesfedilebilir degildi,
     kullanici "tiklanabilir oldugu ANLASILMALI" diye bildirdi. Duzeltme:
     alt cizgi HER ZAMAN gorunur (link benzeri evrensel "tiklanabilir metin"
     kurali), hover'da ARKA PLAN vurgusu ile EK bir geri bildirim saglanir -
     satirin kendi hover'indan (tum satir rengi degisir) ayri, SADECE bu
     hucreye ozel oldugu belli olsun diye kendi arka plani var. */
  .score-cell {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
    border-radius: 3px;
  }
  .score-cell:hover { background: rgba(255, 255, 255, 0.12); }

  /* #table-wrap'in ICINDE, hisse tablosunun YERINE gecen bir goruntu (bkz.
     index.html #view-stocks / #view-paper-trading, showView()) - 2026-10-30'da
     ayri sayfadan buraya tasindi, bu yuzden eskisi gibi tablonun ALTINDA
     yapisan (sticky) degil, normal akista tam genislikte bir blok. */
  #paper-trading {
    margin: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
    padding: 16px 20px;
  }
  #paper-trading-header { margin-bottom: 4px; }
  #paper-trading h2 { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
  #paper-trading .sub { color: var(--muted); font-size: 12px; margin: 8px 0 12px; }
  #paper-summary { display: flex; gap: 28px; flex-wrap: wrap; margin-bottom: 16px; }
  #paper-summary .stat { font-size: 12px; color: var(--muted); }
  #paper-summary .stat b { display: block; font-size: 16px; color: var(--text); margin-top: 2px; }
  #paper-trading h3 { font-size: 13px; color: var(--muted); margin: 16px 0 8px; font-weight: 600; }
  /* Equity egrisi grafigi (2026-11-04'te eklendi) - #chart ile AYNI yukseklik
     mantigi (container'in GERCEK yuksekligi ResizeObserver ile grafige
     yansitilir), sadece ana grafikten daha kisa (ozet bir gosterge). */
  #paper-equity-chart { width: 100%; height: 160px; margin-bottom: 4px; }
  /* Panel darlastiginda (yukaridaki margin-right yuzunden) sutunlar
     sikismasin - tablo kendi min genisligini korur, tasarsa wrap yatay
     kaydirma sunar (ana tablonun #table-wrap'iyla AYNI desen). */
  #paper-positions-wrap, #paper-trades-wrap, #paper-watchlist-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #paper-trading table { border-collapse: collapse; width: 100%; min-width: 560px; }
  #paper-trading th { text-align: right; padding: 6px 10px; font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--border); white-space: nowrap; }
  #paper-trading th.left { text-align: left; }
  #paper-trading td { padding: 6px 10px; text-align: right; border-bottom: 1px solid #1d2029; font-size: 13px; white-space: nowrap; }
  #paper-trading td.left { text-align: left; }
  #paper-empty, #paper-trades-empty, #paper-watchlist-empty { color: var(--muted); font-size: 13px; padding: 8px 0; }

  /* --- Nakit duzenleme + manuel al-sat butonlari/input'lari --- */
  #paper-cash-edit { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
  #paper-cash-input, .paper-amount-input {
    width: 140px; background: var(--bg); border: 1px solid var(--border); color: var(--text);
    border-radius: 6px; padding: 6px 8px; font-size: 12px; outline: none;
  }
  #paper-cash-input:focus, .paper-amount-input:focus { border-color: var(--yellow); }
  #paper-cash-save, .paper-action-btn {
    background: var(--yellow); color: #1a1a1a; border: none; border-radius: 6px;
    padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
  }
  #paper-cash-save:hover, .paper-action-btn:hover { opacity: 0.85; }
  .paper-action-btn-muted { background: none; border: 1px solid var(--border); color: var(--muted); margin-left: 6px; }
  .paper-action-btn-muted:hover { color: var(--text); border-color: var(--yellow); }
  #paper-cash-msg { font-size: 12px; color: var(--muted); }

  /* --- Ayarlar ekrani (otomatik al/sat + Telegram kriterleri, 2026-11-06'da
     ayri bir goruntuye/dosyaya tasindi, bkz. CLAUDE.md) - #paper-trading
     panel goruntusuyle (yukarida) AYNI kutu/baslik stili, #indicator-toggles
     (_view_graphic.html) ile AYNI checkbox deseni. */
  #settings-panel {
    margin: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 8px;
    padding: 16px 20px;
  }
  #settings-header { margin-bottom: 4px; }
  #settings-panel h2 { margin: 0; font-size: 13px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
  #settings-panel .sub { color: var(--muted); font-size: 12px; margin: 8px 0 12px; }
  #criteria-edit { display: flex; flex-direction: column; gap: 6px; }
  .criteria-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
  .criteria-label { color: var(--muted); min-width: 150px; }
  .criteria-group label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
  .criteria-group input[type="checkbox"] { cursor: pointer; accent-color: var(--yellow); }
  #criteria-msg { font-size: 12px; color: var(--muted); }

  #watchlist-toggle {
    background: var(--yellow); border: none; color: #1a1a1a;
    border-radius: 6px; padding: 8px 14px; font-size: 13px; font-weight: 700;
    cursor: pointer; margin: 4px 0 10px;
  }
  #watchlist-toggle:hover { opacity: 0.85; }
  #watchlist-toggle.in-watchlist { background: none; border: 1px solid var(--red); color: var(--red); }
  #watchlist-toggle.in-watchlist:hover { background: rgba(255, 92, 92, 0.12); }

  #side {
    width: 420px;
    flex: 0 0 420px;
    border-left: 1px solid var(--border);
    padding: 16px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  #side h2 { margin: 0 0 4px; font-size: 16px; }
  #side .sub {
    color: var(--text); font-size: 12px; font-weight: 600; margin-bottom: 12px;
    cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    background: var(--panel); border: 1px solid var(--border); border-radius: 6px;
    padding: 6px 10px;
  }
  #side .sub:hover { color: var(--yellow); border-color: var(--yellow); }
  #side .sub::after { content: '⤢'; font-size: 13px; }
  #chart { width: 100%; height: 280px; position: relative; }
  .chart-status {
    position: absolute; inset: 0; z-index: 10;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; background: rgba(23, 26, 33, 0.88);
    font-size: 12px; color: var(--muted); text-align: center; padding: 16px;
  }
  /* "display: flex" yukarida, yazar stil sayfasi olarak tarayicinin
     varsayilan "[hidden] { display: none }" kuralini her zaman ezer -
     hidden ozelligi olsa bile div flex kutusu olarak render edilip koyu
     arka plani grafigin ustunde gorunur kalirdi. Bu kural ozgunlukle
     kazanip hidden iken gercekten gizler. */
  .chart-status[hidden] { display: none; }
  .chart-status.error { color: var(--red); }
  #indicator-toggles {
    display: flex; flex-wrap: wrap; gap: 10px;
    margin-bottom: 8px; font-size: 11px; color: var(--muted);
  }
  #indicator-toggles label { display: flex; align-items: center; gap: 4px; cursor: pointer; }
  #indicator-toggles input { cursor: pointer; accent-color: var(--yellow); }
  /* Mum/MACD/RSI uzerine gelince (crosshair) o anin tum indikator degerlerini
     gosteren canli bilgi satiri - bkz. index.html wireCrosshairSync(). Bos
     (fare grafikten cekilince) sabit yukseklik korunur, altindaki grafik
     ani bir sicrama yapmaz. */
  #chart-legend {
    display: flex; flex-wrap: wrap; gap: 10px;
    font-size: 11px; color: var(--muted); min-height: 15px; margin-bottom: 4px;
  }
  #chart-legend .legend-date { color: var(--text); font-weight: 600; }
  #macd-chart, #rsi-chart { width: 100%; height: 110px; margin-top: 6px; }
  #score-history { /*margin-top: 14px;*/ }
  #score-history h3 {
    font-size: 13px; color: var(--muted); margin: 0 0 8px; text-transform: uppercase; letter-spacing: .04em;
    cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
  }
  #score-history h3:hover { color: var(--text); }
  #score-history h3::after { content: '⤢'; font-size: 11px; text-transform: none; letter-spacing: normal; }

  /* Grafik/Skor Gecmisi basliklarina tiklaninca acilan buyutulmus goruntu -
     ilgili DOM dugumleri (chart-group / score-history) oldugu gibi buraya
     tasinir (kopyalanmaz), boylece lightweight-charts orneklerini yeniden
     olusturmaya gerek kalmaz - mevcut ResizeObserver'lar konteynerin
     buyudugunu algilayip grafigi otomatik yeniden boyutlandirir. */
  .modal-overlay {
    position: fixed; inset: 0; z-index: 100;
    background: rgba(0, 0, 0, 0.7);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
  }
  .modal-overlay[hidden] { display: none; }
  .modal-box {
    background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
    width: min(900px, 100%); max-height: 90vh; overflow-y: auto;
    padding: 24px 20px 20px; position: relative;
  }
  .modal-close-btn {
    position: absolute; top: 16px; right: 10px;
    background: none; border: none; color: var(--muted);
    font-size: 26px; line-height: 1; cursor: pointer; padding: 6px;
  }
  .modal-close-btn:hover { color: var(--text); }
  /* "biraz buyutulmus" - 60vh gibi asiri bir yukseklik modal-box'in
     max-height:90vh sinirini asip kaydirma gerektiriyor, kutu ekranda
     duzgun ortalanmis gorunmuyordu. Sabit, olculu bir boyut (280px'lik
     yan panel goruntusune gore belirgin ama makul bir buyume) hem
     ortalanmayi hem de tek bakista tum grafigin (MACD/RSI dahil)
     kaydirmadan gorunmesini saglar. */
  .modal-chart #chart { width: 100%; height: 440px; }
  .modal-chart #macd-chart, .modal-chart #rsi-chart { width: 100%; height: 140px; }
  #market-tabs {
    display: flex; gap: 6px; padding: 10px 20px;
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
  }
  .market-tab-btn {
    padding: 6px 16px;
    background: var(--panel);
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
  }
  .market-tab-btn:hover { color: var(--text); }
  .market-tab-btn.active { color: var(--text); border-color: var(--yellow); background: #1f2330; }
  .market-tab-btn:disabled { opacity: 0.4; cursor: default; }

  /* Hisse tablosunun sayfalama cubugu (2026-11-03'te eklendi) - #table-wrap
     (overflow:auto) icinde "sticky" ile her zaman alt kenarda kalir, tabloyu
     sona kadar kaydirmaya gerek kalmadan erisilebilir olsun diye. */
  #pager {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 14px;
    background: var(--panel);
    border-top: 1px solid var(--border);
  }
  #pager-page-indicator { color: var(--muted); font-size: 12px; white-space: nowrap; }
  #pager-controls { display: flex; gap: 6px; flex-wrap: wrap; }

  /* Kapanan Islemler (Sanal Al-Sat) sayfalama cubugu (2026-11-05'te eklendi) -
     #pager ile AYNI tasarim/desen (ayri id'ler, kendi JS state'i - bkz.
     _view_paper_trading.html), kapanan islemler artik hesap sifirlanirken
     SILINMEDIGI icin (bkz. CLAUDE.md) zamanla buyuyen bir liste oluyor. */
  #paper-trades-pager {
    position: sticky;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    padding: 8px 14px;
    margin-top: 8px;
    background: var(--panel);
    border-top: 1px solid var(--border);
  }
  #paper-trades-pager-page-indicator { color: var(--muted); font-size: 12px; white-space: nowrap; }
  #paper-trades-pager-controls { display: flex; gap: 6px; flex-wrap: wrap; }
  .paper-note-input {
    width: 160px; background: var(--bg); border: 1px solid var(--border); color: var(--text);
    border-radius: 6px; padding: 6px 8px; font-size: 12px; outline: none; margin-right: 6px;
  }
  .paper-note-input:focus { border-color: var(--yellow); }
  #market-ticker {
    display: flex; gap: 18px; align-items: center;
    margin-left: 14px; padding-left: 14px;
    border-left: 1px solid var(--border);
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    flex: 1 1 auto; min-width: 0;
  }
  .ticker-item { display: flex; flex-direction: column; gap: 1px; flex-shrink: 0; }
  .ticker-item .ticker-label { font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
  .ticker-item .ticker-value { font-size: 12px; white-space: nowrap; }
  .ticker-item .ticker-pct { margin-left: 5px; }
  .tabs { display: flex; gap: 4px; margin-bottom: 10px; }
  .tab-btn {
    flex: 1;
    padding: 6px 4px;
    background: var(--panel);
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 11px;
    cursor: pointer;
  }
  .tab-btn:hover { color: var(--text); }
  .tab-btn.active { color: var(--text); border-color: var(--yellow); }
  .tab-panel { max-height: 320px; overflow-y: auto; }
  .hist-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0; border-bottom: 1px solid #1d2029; font-size: 12px; gap: 8px;
  }
  .hist-row .hist-label { color: var(--text); white-space: nowrap; }
  .hist-row .hist-score { min-width: 30px; text-align: center; color: var(--muted); }
  .hist-row .hist-price { color: var(--muted); white-space: nowrap; }
  .sig-empty { color: var(--muted); font-size: 12px; }
  .placeholder { color: var(--muted); font-size: 13px; margin-top: 40px; text-align: center; }

  footer {
    flex: 0 0 auto;
    min-height: 37px;
    box-sizing: border-box;
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 0 16px;
    color: var(--muted);
    font-size: 11px;
    text-align: center;
  }
  footer .dot { color: var(--border); }
  footer a { color: var(--muted); }
  footer a:hover { color: var(--text); }

  /* --- Tablet: yan panel daralir, tablo hala yatayda oturuyor --- */
  @media (max-width: 1024px) {
    #side { width: 300px; flex: 0 0 300px; padding: 12px; }
    #chart { height: 240px; }
  }

  /* --- Mobil: panel tablonun altina iner, her ikisi de kendi icinde
     kaydirilir; tablo genisligi korunur (yatay kaydirma), boylece
     sutunlar sikismaz/okunmaz hale gelmez --- */
  @media (max-width: 720px) {
    body { font-size: 13px; }
    header { padding: 10px 14px; }
    header h1 { font-size: 16px; }
    header .meta, .warning { font-size: 11px; }
    #market-tabs { padding: 8px 14px; flex-wrap: wrap; row-gap: 8px; }
    .market-tab-btn { flex: 1; padding: 6px 4px; font-size: 12px; }
    #market-ticker { flex: 1 1 100%; margin-left: 0; padding-left: 0; border-left: none; }
    #header-controls { width: 100%; }
    #search-wrap { width: 100%; margin-left: 0; flex: 1 1 100%; }
    #search-input { width: 100%; }
    .layout {
      flex-direction: column;
      flex: 0 0 auto;
    }
    #table-wrap {
      flex: none;
      max-height: 55vh;
      -webkit-overflow-scrolling: touch;
    }
    thead th { padding: 7px 8px; font-size: 10px; }
    tbody td { padding: 6px 8px; font-size: 12px; }
    #side {
      width: 100%;
      flex: none;
      border-left: none;
      border-top: 1px solid var(--border);
      max-height: none;
      padding: 14px;
    }
    #chart { height: 220px; }
    .hist-row { font-size: 11px; }

    /* Pager (2026-11-03'te eklendi): ustteki genel ".market-tab-btn {flex:1}"
       kurali BURADA 6 kucuk butonu (25/50/100/Tumu/Onceki/Sonraki) esit
       genislikte uzatip satir basina kac tane sigdigina gore duzensiz
       gorunmesine yol acardi - pager butonlari kendi dogal genisliginde
       kalip gerektiginde satir atlasin diye ozellestirildi. */
    #pager { padding: 8px 10px; }
    #pager-controls .market-tab-btn { flex: 0 0 auto; padding: 5px 9px; font-size: 11px; }
    #pager-page-indicator { font-size: 11px; width: 100%; }
    /* Kapanan Islemler pager'i - #pager ile AYNI mobil duzeltme (bkz. yukarida
       "Pager" yorumu) - genel ".market-tab-btn {flex:1}" kurali bunun 6 kucuk
       butonunu da esit genislikte uzatirdi, ayni sebeple ozellestirildi. */
    #paper-trades-pager { padding: 8px 10px; }
    #paper-trades-pager-controls .market-tab-btn { flex: 0 0 auto; padding: 5px 9px; font-size: 11px; }
    #paper-trades-pager-page-indicator { font-size: 11px; width: 100%; }

    /* Ayarlar ekrani kriter checkbox'lari (2026-11-07'de duzeltildi) -
       masaustunde etiket (min-width:150px) ile checkbox'lar AYNI satirda
       sigiyordu, mobilde sigmayinca checkbox'lar duzensiz/kademeli satirlara
       bolunuyordu (etiketin genisligi her grupta FARKLI oldugu icin ikinci
       satirdan itibaren checkbox'lar hizasiz baslıyordu). Etiketi KENDI
       satirina zorlayip (flex-basis:100%) checkbox'larin HER ZAMAN bir
       sonraki satirdan, sol kenardan baslamasini sagliyoruz. */
    .criteria-label { flex: 1 1 100%; min-width: 0; }
  }

  @media (max-width: 420px) {
    thead th, tbody td { padding: 5px 6px; }
    #chart { height: 190px; }
    #pager-controls { gap: 4px; }
    #pager-controls .market-tab-btn { padding: 5px 7px; font-size: 10px; }
    #paper-trades-pager-controls { gap: 4px; }
    #paper-trades-pager-controls .market-tab-btn { padding: 5px 7px; font-size: 10px; }
    .paper-note-input { width: 110px; }
  }

  /* --- Giris/Cikis linki (header) --- */
  #auth-link {
    background: var(--panel);
    border: 1px solid var(--border);
    color: var(--muted);
    border-radius: 6px;
    padding: 7px 10px;
    font-size: 12px;
    text-decoration: none;
  }
  #auth-link:hover { color: var(--text); border-color: var(--yellow); }

  /* --- Giris sayfasi (login.html) --- */
  #login-wrap {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding: 20px;
  }
  #login-box {
    width: min(340px, 100%);
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 28px 24px;
    display: flex; flex-direction: column; gap: 10px;
  }
  #login-box h1 { margin: 0 0 10px; font-size: 18px; text-align: center; }
  #login-box label { font-size: 12px; color: var(--muted); }
  #login-box input {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: 6px;
    padding: 9px 10px;
    font-size: 14px;
    outline: none;
  }
  #login-box input:focus { border-color: var(--yellow); }
  #login-box button {
    margin-top: 10px;
    background: var(--yellow);
    color: #1a1a1a;
    border: none;
    border-radius: 6px;
    padding: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
  }
  #login-box button:hover { opacity: 0.9; }
  .login-error {
    background: rgba(255, 92, 92, 0.12);
    border: 1px solid var(--red);
    color: var(--red);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 13px;
  }