/* NumberOne Risk Desk — mobil duzen.
   TUM kurallar medya sorgusu icinde: masaustu gorunumu hic etkilenmez.
   Kirilma noktasi 820px. Sol menu cekmeceye doner (n1-mobile.js), izgaralar tek/iki kolona iner,
   tablolar yatay kaydirilir, kaplama ve modallar tam ekran olur. */

@media (max-width: 820px) {

  /* --- temel --- */
  html.n1-shell[data-theme] body, html[data-theme] body { min-width: 0 !important; }
  html[data-theme] body { font-size: 13.5px; }

  /* --- mobil ust bar (n1-mobile.js ekler) --- */
  .n1-mbar {
    position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 1200; box-sizing: border-box;
    display: flex; align-items: center; gap: 10px; padding: 0 12px;
    background: var(--n1-side, #111315); border-bottom: 1px solid var(--border, rgba(255,255,255,.08));
  }
  .n1-mbar .n1-burger {
    width: 38px; height: 38px; flex: 0 0 38px; padding: 0 !important; border-radius: 8px !important;
    border: 1px solid var(--border, rgba(255,255,255,.08)) !important; background: var(--panel, #1b1e22) !important;
    display: inline-flex !important; align-items: center; justify-content: center;
  }
  .n1-mbar .n1-burger i { display: block; position: relative; width: 18px; height: 2px; background: var(--text, #e8eaed); }
  .n1-mbar .n1-burger i::before, .n1-mbar .n1-burger i::after { content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: var(--text, #e8eaed); }
  .n1-mbar .n1-burger i::before { top: -6px; } .n1-mbar .n1-burger i::after { top: 6px; }
  .n1-mbar .ttl { font-size: 15px; font-weight: 700; color: var(--text, #e8eaed); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* --- sol menu -> cekmece --- */
  /* NOT: n1-theme.css <=1050px'de .page-head'i "position: static" yapiyor. Oyle birakirsak
     cekmece kayinca bile akista yer kaplar ve icerigi asagi iter (ekran bos gorunur). */
  html.n1-shell[data-theme] .n1-side, html[data-theme] .page-head {
    position: fixed !important; top: 0 !important; left: 0 !important; bottom: 0 !important;
    width: 268px !important; max-width: 84vw !important; padding: 16px 12px 24px !important;
    border-right: 1px solid var(--border) !important; border-bottom: none !important;
    transform: translateX(-102%); transition: transform .18s ease;
    z-index: 1300 !important; overflow-y: auto !important; overflow-x: hidden !important;
  }
  html.n1-drawer .n1-side, html.n1-drawer .page-head { transform: translateX(0) !important; box-shadow: 0 0 40px rgba(0,0,0,.6) !important; }
  .n1-drawer-back { position: fixed; inset: 0; z-index: 1250; background: rgba(0,0,0,.5); display: none; }
  html.n1-drawer .n1-drawer-back { display: block; }
  /* dar ekran ikon modu mobilde iptal: cekmecede tam metin gorunsun */
  html.n1-shell[data-theme] .n1-side-link { justify-content: flex-start !important; padding: 10px 12px !important; font-size: 13.5px !important; }
  html.n1-shell[data-theme] .n1-side-label { font-size: 11.5px !important; padding: 10px 10px 4px !important; }
  html.n1-shell[data-theme] .n1-side-foot { font-size: 13px !important; }
  html[data-theme] .nav-btn { padding: 10px 12px !important; font-size: 13.5px !important; }

  /* --- icerik alani: menu payi sifir, ust bar payi 52px --- */
  html.n1-shell[data-theme] body.n1-shell-body > .wrap,
  html.n1-shell[data-theme] body.n1-shell-body > main.wrap,
  html.n1-shell[data-theme] body.n1-shell-body > main.main,
  html.n1-shell[data-theme] body.with-nav .wrap,
  html.n1-shell[data-theme] body[data-n1-page="pnl"] .wrap,
  html[data-theme] .wrap, html[data-theme] main.main {
    margin: 0 !important; max-width: 100% !important; padding: 62px 10px 40px !important;
  }
  html.n1-shell[data-theme] body.n1-shell-body > header.header { margin: 0 !important; padding: 56px 10px 0 !important; }
  html.n1-shell[data-theme] body.n1-shell-body > header.header + main.main { padding-top: 8px !important; }

  /* god-mode 12 kolonlu izgara -> tek kolon.
     Sarmalayicilar masaustunde oldugu gibi "display: contents" kalir; boylece paneller .wrap'in
     dogrudan flex ogesi olur ve asagidaki "order" ile telefonda anlamli siraya dizilir
     (DOM sirasi: topbar, hazine, exposure, P&L... - telefonda P&L en ustte olmali). */
  html[data-theme] .wrap { display: flex !important; flex-direction: column !important; }
  html[data-theme] .god-layout, html[data-theme] .column, html[data-theme] .split-panels, html[data-theme] .n1-dash-row { display: contents !important; }
  html[data-theme] .n1-topbar        { order: 0 !important; }
  html[data-theme] .pnl-panel        { order: 1 !important; }
  html[data-theme] .n1-dash-treasury { order: 2 !important; }
  html[data-theme] .n1-dash-day      { order: 3 !important; }
  html[data-theme] .n1-dash-sym      { order: 4 !important; }
  html[data-theme] .company-panel    { order: 5 !important; }
  html[data-theme] .margin-panel     { order: 6 !important; }
  html[data-theme] .blotter-panel    { order: 7 !important; }
  html[data-theme] .n1-dash-flow     { order: 8 !important; }
  html[data-theme] .pnl-panel, html[data-theme] .n1-dash-treasury, html[data-theme] .company-panel, html[data-theme] .n1-dash-sym,
  html[data-theme] .n1-dash-day, html[data-theme] .blotter-panel, html[data-theme] .margin-panel, html[data-theme] .n1-dash-flow {
    grid-area: auto !important; height: auto !important; max-height: none !important; margin-bottom: 10px !important;
  }
  html[data-theme] .n1-topbar { grid-area: auto !important; display: flex !important; justify-content: flex-end; margin-bottom: 10px !important; }
  html[data-theme] .pnl-panel { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  html[data-theme] .pnl-panel .panel-header { min-width: 0 !important; }

  /* --- izgaralar --- */
  /* KPI kartlari 2 kolon */
  html[data-theme] .pnl-cards, .n1-kpis, .cards, .pos-kpis, .cash-kpis, .kpi-grid, .stats-grid, .overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important;
  }
  /* Formlar ve genel iki-kolon kaplar TEK kolon: telefonda alanlar ust uste biniyordu */
  .grid, .n1-cols, .form-row { grid-template-columns: 1fr !important; gap: 8px !important; }
  /* Hazine kartlari tek kolon: 2 kolonda ictek 3-lu satirlar daralip deger "..." ile kisaliyordu */
  .n1-treasury { grid-template-columns: 1fr !important; }
  .n1-tre-row { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  .n1-tre-kv .k, .n1-tre-kv .v, .n1-tre-main .k { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; }
  .n1-acc-grid, .n1-heat-grid { grid-template-columns: 1fr !important; }
  .form-row { display: grid !important; }
  .form-row label { min-width: 0 !important; }

  /* sayilar kirpilmasin (mobilde "+70.622..." oluyordu) */
  html[data-theme] .pnl-card .value, .n1-kpi .v, .pos-kpi .v, .cash-kpi .v, html[data-theme] .card .value,
  .kpi-value, .n1-tre-main .v, .stat-value {
    font-size: 17px !important; line-height: 1.2 !important;
    white-space: normal !important; overflow: visible !important; text-overflow: clip !important; word-break: normal; overflow-wrap: break-word;
  }
  html[data-theme] .pnl-card, .n1-kpi, .pos-kpi, .cash-kpi, html[data-theme] .card { min-width: 0 !important; padding: 10px !important; }
  html[data-theme] .panel { padding: 12px !important; }
  html[data-theme] .panel-header { flex-wrap: wrap !important; }
  html[data-theme] .panel-actions, .toolbar, .n1-sheet-tools, .header-right, .actions { flex-wrap: wrap !important; }

  /* --- tablolar: yatay kaydirma --- */
  .n1-scrollx { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  .n1-scrollx > table { min-width: max-content !important; width: auto !important; }
  html.n1-shell[data-theme] th, html.n1-shell[data-theme] td, html[data-theme] th, html[data-theme] td { padding: 7px 9px !important; font-size: 12px !important; }
  html[data-theme] .blotter-table, html[data-theme] .company-table { min-width: 0 !important; }

  /* --- uyari seridi: icerigin ustune binmesin --- */
  .n1-alertbar {
    position: static !important; left: 0 !important; right: auto !important; top: auto !important;
    margin: 0 0 8px !important; border-radius: 8px; padding: 8px 10px !important;
    flex-wrap: wrap !important; align-items: flex-start !important; box-shadow: none !important;
  }
  .n1-alertbar .msg { white-space: normal !important; }
  .n1-alertbar .sep { display: none; }

  /* --- kaplama gorunumler ve modallar: tam ekran --- */
  .n1-overlay .n1-sheet, .sheet-chart, .modal-box, .rsi-sheet, .volume-sheet, .bot-scanner-sheet,
  .sheet-sym, .sheet-hedge, .login-detail-sheet, .order-tick-sheet {
    width: 100vw !important; max-width: 100vw !important; min-width: 0 !important;
    height: 100vh !important; max-height: 100vh !important;
    border-radius: 0 !important; padding: 12px !important; overflow-y: auto !important;
  }
  .n1-sheet-head, .chart-modal-header, .rsi-header, .volume-header { flex-wrap: wrap !important; gap: 8px !important; }
  .n1-accchart-inner { height: 300px !important; }
  .chart-modal-body, .chart-details { max-height: none !important; min-height: 0 !important; }
  canvas { max-width: 100% !important; }
  .n1-cal { width: min(300px, 94vw) !important; }

  /* --- bildirim karti / toast --- */
  .n1-notif { position: fixed !important; top: 58px !important; left: 8px !important; right: 8px !important; width: auto !important; max-height: 72vh; overflow-y: auto; }
  .n1-toasts { left: 8px !important; right: 8px !important; bottom: 8px !important; top: auto !important; width: auto !important; }

  /* --- mobilde gereksizler --- */
  .n1-palette-btn, #n1RightToggle, .n1-focus-chip { display: none !important; }
}

/* Cok dar ekran (kucuk telefon) */
/* Kucuk telefon (<=480px): formlar ve iki-kolon kaplar tek kolon KALIR, ama KPI kartlari
   2 kolon kalsin - 360px'te bile rahat siginiyor (340px / 2 ≈ 166px) ve tek kolonda
   sayfa gereksiz uzuyordu. */
@media (max-width: 480px) {
  .n1-treasury, .n1-cols, .grid, .form-row { grid-template-columns: 1fr !important; }
  .n1-tre-row { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .n1-mbar .ttl { font-size: 14px; }
}
/* Cok dar (<=340px): her sey tek kolon */
@media (max-width: 340px) {
  html[data-theme] .pnl-cards, .n1-kpis, .cards, .pos-kpis, .cash-kpis, .kpi-grid, .stats-grid, .overview-grid,
  .n1-tre-row { grid-template-columns: 1fr !important; }
}

/* ---------------------------------------------------------------------------
   Mobil: modallarin IC yerlesimi (Trend Analizi / Hacim / hesap detayi).
   Tam ekran kurali yukarida; burada ic izgaralari tek kolona indiriyoruz.
   Trend Analizi'nde baslik satiri (3 nabiz kutusu + tarih + Yenile) telefonda
   ust uste biniyordu.
   --------------------------------------------------------------------------- */
@media (max-width: 820px) {
  html[data-theme] .rsi-header, html[data-theme] .volume-header, html[data-theme] .bot-scanner-header { padding: 10px 12px !important; }
  html[data-theme] .rsi-actions, html[data-theme] .volume-actions { margin-left: 0 !important; flex-wrap: wrap !important; }

  /* Gun ici sekmesi */
  html[data-theme] .intraday-header { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  html[data-theme] .intraday-current-values { grid-template-columns: 1fr !important; gap: 8px !important; }
  html[data-theme] .intraday-date, html[data-theme] .intraday-refresh { width: 100% !important; justify-content: space-between !important; }
  html[data-theme] #rsiIntradayContent { grid-template-columns: 1fr !important; }
  html[data-theme] .intraday-chart-main { height: 260px !important; grid-column: 1 !important; padding: 10px !important; }
  html[data-theme] .intraday-snapshots { height: auto !important; max-height: 300px !important; grid-column: 1 !important; }
  html[data-theme] .intraday-legend { gap: 8px !important; font-size: 11.5px !important; }

  /* Gunluk sekmesi ve diger grafikler */
  html[data-theme] .rsi-charts { grid-template-columns: 1fr !important; padding: 10px !important; gap: 10px !important; }
  html[data-theme] .rsi-stats, html[data-theme] .vol-stats { flex-wrap: wrap !important; }
  html[data-theme] .pnl-chart-main canvas { height: 220px !important; max-height: 220px !important; }
  html[data-theme] .rsi-chart-secondary canvas { height: 140px !important; max-height: 140px !important; }
  html[data-theme] .vol-stat-card, html[data-theme] .bot-stat-card { min-width: 0 !important; }

  /* Hesap detayi */
  html[data-theme] .login-detail-summary { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  html[data-theme] .login-detail-body { padding: 10px !important; }
}

@media (max-width: 820px) {
  /* Analitik: musteri secim kutusu 260px sabitti, dar ekrana sigmiyordu */
  html.n1-shell[data-theme] body[data-n1-page="analytics"] .client-select,
  html.n1-shell[data-theme] .client-select { min-width: 0 !important; width: 100% !important; }
  html.n1-shell[data-theme] .client-selector { width: 100% !important; flex-wrap: wrap !important; }
  html.n1-shell[data-theme] .n1-select-btn { max-width: 100% !important; }
}

/* ============================================================================
   GERCEK CIHAZ DUZELTMELERI (390px iPhone / 360px Android'de olculdu)
   ============================================================================ */

/* Android Chrome "font boosting": genis bloklarda yaziyi kendiliginden buyutup
   duzeni bozuyordu. Kapatiyoruz. (Masaustunu etkilemez, html geneli guvenli.) */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

@media (max-width: 820px) {
  /* --- YATAY TASMA: kaplar icerige gore buyumesin ---
     Flex/grid ogelerinin varsayilan min-width:auto degeri, icindeki genis tablo yuzunden
     kabin kucumesini engelliyor ve sayfa yatay tasiyordu (P&L 485px, Muhasebe 436px). */
  html[data-theme] .panel, html[data-theme] .card, html[data-theme] .section, html[data-theme] .box,
  html.n1-shell[data-theme] .panel, html.n1-shell[data-theme] .card,
  .grid > *, .n1-cols > *, .cards > *, .n1-dash, .table-wrap, .scrollbox, .table-shell {
    min-width: 0 !important; max-width: 100% !important;
  }
  .n1-scrollx { max-width: 100% !important; }

  /* Ozel secim kutusu: JS genisligi yerli select'ten aliyor, dar ekranda tasiyordu */
  .n1-select, .n1-select-btn { max-width: 100% !important; width: auto !important; }
  .n1-select-menu { max-width: calc(100vw - 16px) !important; }

  /* --- DOKUNMA HEDEFLERI (>=44px) --- */
  .n1-mbar { height: 56px !important; padding-top: env(safe-area-inset-top, 0px) !important; height: calc(56px + env(safe-area-inset-top, 0px)) !important; }
  .n1-mbar .n1-burger { width: 44px !important; height: 44px !important; flex: 0 0 44px !important; }
  html[data-theme] button:not(.n1-side-link):not(.n1-link):not(.n1-burger),
  html.n1-shell[data-theme] button:not(.n1-side-link):not(.n1-link):not(.n1-burger),
  html[data-theme] .btn, html.n1-shell[data-theme] .btn,
  .n1-select-btn, .n1-date-btn {
    min-height: 40px !important; height: auto !important;
  }
  html[data-theme] .n1-side-link, html.n1-shell[data-theme] .n1-side-link { min-height: 44px !important; }

  /* --- iOS: 16px alti girdilerde odaklaninca sayfa buyuyor (duzen bozuluyor) --- */
  html[data-theme] input, html[data-theme] select, html[data-theme] textarea,
  html.n1-shell[data-theme] input, html.n1-shell[data-theme] select, html.n1-shell[data-theme] textarea {
    font-size: 16px !important;
  }
  html[data-theme] input[type="checkbox"], html.n1-shell[data-theme] input[type="checkbox"] { min-height: 0 !important; }

  /* --- iOS centik / guvenli alan --- */
  html[data-theme] .wrap, html[data-theme] main.main,
  html.n1-shell[data-theme] body.n1-shell-body > .wrap,
  html.n1-shell[data-theme] body.n1-shell-body > main.main,
  html.n1-shell[data-theme] body.with-nav .wrap {
    padding-top: calc(66px + env(safe-area-inset-top, 0px)) !important;
    padding-left: calc(10px + env(safe-area-inset-left, 0px)) !important;
    padding-right: calc(10px + env(safe-area-inset-right, 0px)) !important;
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0px)) !important;
  }
  html.n1-shell[data-theme] .n1-side, html[data-theme] .page-head {
    padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
    padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* --- iOS: 100vh adres cubugunu saymaz, kaplamalar tasar. dvh varsa onu kullan --- */
  .n1-overlay .n1-sheet, .sheet-chart, .modal-box, .rsi-sheet, .volume-sheet, .bot-scanner-sheet,
  .sheet-sym, .sheet-hedge, .login-detail-sheet, .order-tick-sheet {
    height: 100dvh !important; max-height: 100dvh !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .n1-overlay { height: 100dvh !important; }

  /* Dokunmatik kaydirma akiciligi */
  .n1-scrollx, .n1-select-list, .n1-sheet-body, .chart-details, .n1-notif { -webkit-overflow-scrolling: touch; }
}

@media (max-width: 820px) {
  /* Excel/PDF dugmeleri baslik satirina sigmiyordu (P&L'de sayfa 485px'e tasiyordu):
     mobilde kendi satirina alip sarmasini sagla */
  .n1-export { display: flex !important; flex-wrap: wrap !important; width: 100% !important; margin: 6px 0 0 !important; gap: 6px !important; }

  /* Retail: hizli istatistik seridi ve oran kutulari sabit genislikteydi, sarmiyordu */
  #quickStats { display: flex !important; flex-wrap: wrap !important; max-width: 100% !important; gap: 8px !important; }
  .ratio-item, .ratio-item > * { min-width: 0 !important; max-width: 100% !important; }
  .ratio-item strong, .ratio-item small, #quickStats strong, #quickStats small {
    white-space: normal !important; overflow-wrap: anywhere !important;
  }
}

@media (max-width: 820px) {
  /* Dugmeleri tasiyan satir sarmali (P&L'de Excel/PDF satira sigmayip 7px tasiriyordu).
     :has() Chrome/Android ve iOS 16.4+ tarafindan destekleniyor; desteklenmezse
     .n1-export zaten %100 genislikte ve sarmali. */
  *:has(> .n1-export) { flex-wrap: wrap !important; min-width: 0 !important; }
  .n1-export { flex: 1 0 100% !important; }
}

@media (max-width: 820px) {
  /* Izgara/flex ogelerinin varsayilan min-width:auto degeri hucresinden tasmaya yol aciyordu
     (Retail'de #quickStats 6px tasiyordu) */
  #quickStats, .ratio-item, .grid > *, .grid-2 > *, .grid-3 > *, [class*="grid"] > * { min-width: 0 !important; }
}

@media (max-width: 820px) {
  /* --- KAPLAMA GORUNUMLER (Hazine ozeti, Hesap kartlari, Isi haritasi ...) ---
     Eski hali: .n1-overlay'in 28px/24px dolgusu duruyordu ve kaydirma .n1-sheet'in
     kendisindeydi. Bu yuzden telefonda kaplama pop-up gibi sabit duruyor, parmak
     hareketi arkadaki sayfaya gecip degerler kayiyor gibi gorunuyordu.
     Yeni hali: kaplama ekrani tam doldurur, baslik sabit kalir, SADECE govde kayar
     ve overscroll-behavior ile kaydirma arkaya sizmaz. (Gerisi n1-mobile.js'teki
     gövde kilidi ile tamamlaniyor.) */
  .n1-overlay {
    padding: 0 !important;
    overflow: hidden !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overscroll-behavior: contain !important;
  }
  .n1-overlay .n1-sheet {
    width: 100vw !important; max-width: 100vw !important; min-width: 0 !important;
    height: 100dvh !important; max-height: 100dvh !important;
    border: 0 !important; border-radius: 0 !important; box-shadow: none !important;
    padding: 0 !important;
    display: flex !important; flex-direction: column !important;
    overflow: hidden !important;
  }
  .n1-overlay .n1-sheet-head {
    flex: 0 0 auto !important;
    padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px !important;
  }
  .n1-overlay .n1-sheet-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
    padding: 12px 12px calc(28px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Govde kilitliyken arkadaki sayfa hic kaymasin. */
  html.n1-locked, html.n1-locked body { overflow: hidden !important; overscroll-behavior: none !important; }
}