/* =========================================================
   PriceONN v2 · grafik motoru (.pc) ve tam ekran grafik sayfası (.cp)
   Tokenlar priceonn.css'ten; koyu tema varsayılan. Yazı boyutları 12 / 14 / 16 (12 px altı yok).
   Hareket: yalnız transform ve opacity; menü 150 ms, çekmece 300 ms, basma 120 ms (docs/TASARIM-YONU-v1esinli.md 7).
   ========================================================= */
:root{
  --pc-cross-bg:#3a4456; --pc-cross-ink:#ffffff; --pc-bg:var(--bg-canvas);
  --cp-bar:var(--bg-surface); --cp-line:var(--border-subtle); --cp-hover:rgba(11,18,32,.05); --cp-on:rgba(23,101,166,.10);
  --cp-ease:cubic-bezier(.23,1,.32,1); --cp-drawer:cubic-bezier(.32,.72,0,1);
}
:root[data-theme="dark"]{
  --pc-cross-bg:#2c3548; --pc-cross-ink:#f2f4f8;
  --cp-bar:#0d1220; --cp-hover:rgba(255,255,255,.05); --cp-on:rgba(77,163,230,.14);
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--pc-cross-bg:#2c3548;--pc-cross-ink:#f2f4f8;--cp-bar:#0d1220;--cp-hover:rgba(255,255,255,.05);--cp-on:rgba(77,163,230,.14)}}

/* ---------------- motor ---------------- */
.pc{position:relative;overflow:hidden;outline:none;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;contain:strict}
.pc:focus-visible{box-shadow:inset 0 0 0 2px var(--focus)}
.pc-cv{position:absolute;left:0;top:0;display:block;pointer-events:none}
.pc-legend{position:absolute;left:10px;top:8px;right:80px;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;pointer-events:none;
  font:500 12px/16px var(--font-num);font-feature-settings:var(--num-features);font-variant-numeric:tabular-nums;color:var(--text-secondary)}
.pc-lg-t{font:600 14px/20px var(--font-sans);color:var(--text-primary);letter-spacing:-.005em}
.pc-lg-t:empty{display:none}
.pc-lg-v{display:flex;flex-wrap:wrap;gap:2px 10px}
.pc-lg-v b{font-weight:500;color:var(--text-tertiary);margin-right:4px}
.pc-lg-v i{font-style:normal}
.pc-lg-v[data-dir="up"] i{color:var(--up)}
.pc-lg-v[data-dir="down"] i{color:var(--down)}
.pc-lg-chg.up{color:var(--up)}.pc-lg-chg.down{color:var(--down)}
.pc-live{position:absolute;left:0;top:0;width:7px;height:7px;margin:-3.5px 0 0 -3.5px;border-radius:50%;background:var(--pc-live,var(--up));pointer-events:none}
.pc-live::after{content:"";position:absolute;inset:0;border-radius:50%;background:inherit;animation:pc-ring 2.4s cubic-bezier(.16,1,.3,1) infinite}
@keyframes pc-ring{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(3);opacity:0}}
@media (prefers-reduced-motion:reduce){.pc-live::after{animation:none;opacity:0}}

/* ---------------- sayfa kabuğu ---------------- */
html.cp-html,html.cp-html body{height:100%;overflow:hidden;background:var(--bg-canvas)}
body.cp-page{margin:0;overscroll-behavior:none}
/* Tam ekran grafik sayfasının kabuğu. `.cp-page` ile SINIRLI: bu dosya ana sayfada da tembel yüklenir ve
   sınırsız haliyle oradaki `cp` sınıflı bölümlere 100dvh yükseklik veriyordu (piyasa pusulası kartı bir ekran
   boyuna uzuyor, komşusu performans tablosunda yüzlerce piksel ölü alan açılıyordu). */
.cp-page .cp{display:flex;flex-direction:column;height:100vh;height:100dvh;background:var(--bg-canvas);padding-top:env(safe-area-inset-top,0px)}
.cp-top{display:flex;align-items:center;gap:4px;height:52px;flex:none;padding:0 8px 0 calc(8px + env(safe-area-inset-left,0px));border-bottom:1px solid var(--cp-line);background:var(--cp-bar);position:relative;z-index:5}
/* priceonn.css ile sınıf çakışması: orada `.cp` bir kart (dolgu, kenarlık, köşe) ve 900-1199 px arasında `body` yan
   menü için 72 px sol dolgu alıyor. Ayrı pencere tam bu aralıkta (1180 px) açıldığı için grafik soldan 87 px
   içeride, çerçeveli bir kutu gibi duruyordu (1 Ekim 2026). Grafik sayfasında ikisi de sıfırlanır. */
body.cp-page{padding:0}
.cp-page .cp{padding:env(safe-area-inset-top,0px) 0 0;border:0;border-radius:0;gap:0;min-width:0}

/* Marka başlığı: tek satır, 40 px. Logo + ".com", bağlam etiketi, sağda tema, dil bayrağı, kullanıcı ya da giriş. */
.cp-brand{display:flex;align-items:center;gap:6px;height:40px;flex:none;padding:0 calc(10px + env(safe-area-inset-right,0px)) 0 calc(12px + env(safe-area-inset-left,0px));
  border-bottom:1px solid var(--cp-line);background:var(--bg-canvas);font:500 12px/16px var(--font-sans)}
.cp-bl{display:flex;align-items:center;gap:1px;height:40px;color:var(--text-tertiary);text-decoration:none;flex:none}
.cp-bl .lk-full{height:19px;width:auto;display:block}
.cp-dom{font:600 12.5px/1 var(--font-sans);color:var(--text-tertiary);transform:translateY(2px);letter-spacing:.01em}
.cp-bl:hover .cp-dom{color:var(--text-secondary)}
.cp-bt{margin-left:10px;padding-left:12px;border-left:1px solid var(--cp-line);color:var(--text-tertiary);white-space:nowrap}
.cp-bb{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:0;border-radius:var(--r-md);background:transparent;color:var(--text-secondary);cursor:pointer;flex:none}
.cp-bb:hover{background:var(--cp-hover);color:var(--text-primary)}
.cp-bb>svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.cp-bb>svg.flag{width:28px;height:19px;border-radius:2px;fill:none;stroke:none;display:block}
.cp-user,.cp-login{display:inline-flex;align-items:center;gap:8px;height:30px;margin-left:4px;padding:0 10px 0 4px;border-radius:15px;text-decoration:none;flex:none;
  font:500 13px/16px var(--font-sans);color:var(--text-primary);background:var(--cp-hover);border:1px solid var(--cp-line)}
.cp-user:hover{border-color:var(--border-strong,var(--cp-line));background:var(--cp-on)}
.cp-av{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--action-bg);color:var(--on-action);font:600 10px/1 var(--font-sans);letter-spacing:.02em}
.cp-un{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-login{padding:0 14px;background:var(--action-bg);border-color:transparent;color:var(--on-action);font-weight:600}
.cp-login:hover{filter:brightness(1.08)}
.cp-bb:focus-visible,.cp-user:focus-visible,.cp-login:focus-visible,.cp-bl:focus-visible,.cp-fb:focus-visible{outline:2px solid var(--focus-ring,#4da3e6);outline-offset:2px}
.cp-sep{width:1px;height:24px;background:var(--cp-line);margin:0 4px;flex:none}
.cp-grow{flex:1;min-width:8px}

.cp-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:44px;min-width:44px;padding:0 10px;border:0;border-radius:var(--r-md);background:transparent;color:var(--text-secondary);
  font:500 14px/20px var(--font-sans);cursor:pointer;white-space:nowrap;flex:none;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease),transform 120ms var(--cp-ease)}
.cp-btn:active{transform:scale(.97)}
.cp-btn svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.cp-btn[aria-expanded="true"],.cp-btn[aria-pressed="true"]{color:var(--text-primary);background:var(--cp-on)}
@media (hover:hover) and (pointer:fine){.cp-btn:hover{background:var(--cp-hover);color:var(--text-primary)}}
.cp-ib{padding:0;width:44px}

.cp-sym{gap:8px;padding:0 10px 0 8px;color:var(--text-primary);max-width:46vw}
.cp-sym b{font:600 16px/20px var(--font-sans);letter-spacing:-.01em}
.cp-sym small{font:400 14px/20px var(--font-sans);color:var(--text-tertiary);overflow:hidden;text-overflow:ellipsis;min-width:0}
.cp-sym .chev{width:16px;height:16px;color:var(--text-tertiary)}

.cp-quote{display:flex;align-items:baseline;gap:8px;padding:0 8px;min-width:0;overflow:hidden;font-family:var(--font-num);font-feature-settings:var(--num-features);font-variant-numeric:tabular-nums;white-space:nowrap}
.cp-px{font-weight:600;font-size:16px;line-height:20px;color:var(--text-primary);position:relative}
.cp-chg{font-size:14px;line-height:20px}
.cp-chg.up{color:var(--up)}.cp-chg.down{color:var(--down)}
.cp-st{font:500 12px/16px var(--font-sans);color:var(--warn);padding:2px 6px;border-radius:var(--r-sm);background:var(--warn-tint)}
.cp-st:empty{display:none}

/* zaman dilimi seçici */
.cp-tfs{display:flex;align-items:center;gap:2px;padding:0 4px}
.cp-tf{height:32px;min-width:36px;padding:0 8px;border:0;border-radius:var(--r-sm);background:transparent;color:var(--text-secondary);
  font:500 14px/20px var(--font-num);font-feature-settings:var(--num-features);cursor:pointer;transition:background-color var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.cp-tf[aria-checked="true"]{background:var(--cp-on);color:var(--action-text);font-weight:600}
@media (hover:hover) and (pointer:fine){.cp-tf:hover{background:var(--cp-hover);color:var(--text-primary)}.cp-tf[aria-checked="true"]:hover{background:var(--cp-on);color:var(--action-text)}}
.cp-tfm{font-family:var(--font-num);font-weight:600;color:var(--action-text);min-width:52px}

/* açılır menü */
.cp-menu{position:relative;flex:none}
.cp-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:20;min-width:232px;padding:6px;border-radius:var(--r-lg);background:var(--bg-raised);border:1px solid var(--border-strong);box-shadow:var(--shadow-2);
  transform-origin:top left;opacity:0;transform:scale(.96) translateY(-4px);visibility:hidden;transition:opacity 150ms var(--cp-ease),transform 150ms var(--cp-ease),visibility 0s linear 150ms}
.cp-pop.r{left:auto;right:0;transform-origin:top right}
.cp-pop.open{opacity:1;transform:none;visibility:visible;transition:opacity 150ms var(--cp-ease),transform 150ms var(--cp-ease),visibility 0s}
.cp-pop h3{margin:6px 10px 4px;font:600 12px/16px var(--font-sans);color:var(--text-tertiary);letter-spacing:.04em;text-transform:uppercase}
.cp-opt{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:0 10px;border:0;border-radius:var(--r-md);background:transparent;color:var(--text-primary);font:400 14px/20px var(--font-sans);text-align:left;cursor:pointer}
.cp-opt svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;color:var(--text-secondary)}
.cp-opt .ck{margin-left:auto;width:16px;height:16px;color:var(--action-text);opacity:0}
.cp-opt[aria-checked="true"] .ck{opacity:1}
.cp-opt[aria-checked="true"]{font-weight:600}
.cp-opt kbd{margin-left:auto;font:500 12px/16px var(--font-num);color:var(--text-tertiary)}
@media (hover:hover) and (pointer:fine){.cp-opt:hover{background:var(--cp-hover)}}
.cp-opt:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}
.cp-hr{height:1px;margin:6px 4px;background:var(--cp-line);border:0}

/* orta alan: araç rayı yeri, grafik, sağ panel yeri */
.cp-mid{display:flex;flex:1;min-height:0}
.cp-rail{width:48px;flex:none;border-right:1px solid var(--cp-line);background:var(--cp-bar)}
.cp-side{width:320px;flex:none;border-left:1px solid var(--cp-line);background:var(--cp-bar)}
.cp-main{position:relative;flex:1;min-width:0;display:flex;flex-direction:column}
.cp-chart{flex:1;min-height:0}
.cp-state{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;pointer-events:none;
  font:500 14px/20px var(--font-sans);color:var(--text-secondary);opacity:0;transition:opacity 200ms var(--cp-ease)}
.cp-state.on{opacity:1}
.cp-state.err{pointer-events:auto}
.cp-state .cp-btn{background:var(--action-bg);color:var(--on-action);height:40px;padding:0 16px}
.cp-foot{display:flex;align-items:center;gap:16px;height:28px;flex:none;padding:0 12px;border-top:1px solid var(--cp-line);background:var(--cp-bar);
  font:400 12px/16px var(--font-sans);color:var(--text-tertiary);white-space:nowrap;overflow:hidden}
.cp-foot .num{font-family:var(--font-num)}
.cp-foot>span:last-child{overflow:hidden;text-overflow:ellipsis;min-width:0}
.cp-foot a{color:var(--text-tertiary)}
.cp-foot .cp-fb{color:var(--text-secondary);font-weight:600;text-decoration:none;flex:none}
.cp-foot .cp-fb:hover{color:var(--text-primary)}

/* çekmece (telefon) ve arama */
.cp-scrim{position:fixed;inset:0;z-index:30;background:var(--scrim);opacity:0;transition:opacity 240ms var(--cp-ease)}
.cp-scrim.show{opacity:1}
.cp-drawer{position:fixed;left:0;right:0;bottom:0;z-index:31;max-height:86dvh;overflow:auto;padding:8px 16px calc(16px + env(safe-area-inset-bottom,0px));
  border-radius:var(--r-xl) var(--r-xl) 0 0;background:var(--bg-raised);border-top:1px solid var(--border-strong);box-shadow:var(--shadow-2);
  transform:translateY(100%);transition:transform 300ms var(--cp-drawer)}
.cp-drawer.show{transform:none}
.cp-grab{width:36px;height:4px;margin:4px auto 8px;border-radius:2px;background:var(--border-control)}
.cp-drawer h3{margin:14px 0 8px;font:600 12px/16px var(--font-sans);color:var(--text-tertiary);letter-spacing:.04em;text-transform:uppercase}
.cp-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.cp-grid .cp-tf{height:44px;background:var(--cp-hover)}
.cp-grid.types{grid-template-columns:repeat(2,1fr)}
.cp-grid.types .cp-opt{background:var(--cp-hover);min-height:44px}
.cp-grid .cp-hr{grid-column:1/-1;margin:2px 0;background:transparent}
.cp-row{display:flex;flex-wrap:wrap;gap:8px}
.cp-row .cp-btn{background:var(--cp-hover);color:var(--text-primary);flex:1 1 40%}

.cp-search{position:fixed;left:50%;top:10vh;z-index:31;width:min(560px,calc(100vw - 32px));max-height:70vh;display:flex;flex-direction:column;
  border-radius:var(--r-lg);background:var(--bg-raised);border:1px solid var(--border-strong);box-shadow:var(--shadow-2);
  opacity:0;transform:translateX(-50%) scale(.97);transition:opacity 180ms var(--cp-ease),transform 180ms var(--cp-ease)}
.cp-search.show{opacity:1;transform:translateX(-50%)}
.cp-sin{display:flex;align-items:center;gap:8px;padding:0 8px 0 14px;border-bottom:1px solid var(--cp-line)}
.cp-sin svg{width:20px;height:20px;color:var(--text-tertiary);fill:none;stroke:currentColor;stroke-width:1.75;flex:none}
.cp-sin input{flex:1;min-width:0;height:52px;border:0;background:transparent;color:var(--text-primary);font:400 16px/24px var(--font-sans);outline:none}
.cp-sl{list-style:none;margin:0;padding:6px;overflow:auto}
.cp-sl li{display:flex;align-items:center;gap:12px;min-height:48px;padding:0 10px;border-radius:var(--r-md);cursor:pointer}
.cp-sl li b{font:600 14px/20px var(--font-sans);min-width:88px}
.cp-sl li span{font:400 14px/20px var(--font-sans);color:var(--text-secondary);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cp-sl li small{font:500 12px/16px var(--font-sans);color:var(--text-tertiary)}
.cp-sl li[aria-selected="true"]{background:var(--cp-on)}
.cp-sl .none{color:var(--text-secondary);font:400 14px/20px var(--font-sans);cursor:default}

/* yerleşim: telefon < 720, tablet 720-1179, masaüstü >= 1180 */
.cp-d{display:none!important}
@media (max-width:719px){
  .cp-t,.cp-tfs,.cp-top .cp-menu{display:none!important}
  .cp-foot{height:24px;gap:10px;padding:0 calc(12px + env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) calc(12px + env(safe-area-inset-left,0px));font-size:12px}
  .cp-foot .cp-fs{display:none}
  .cp-bt,.cp-un{display:none}
  .cp-user{padding:0 4px}
  .cp-login{padding:0 10px}
  .cp-top{height:48px;gap:2px}
  .cp-sym small{display:none}
  .cp-quote{padding:0 4px;gap:6px;flex:0 1 auto;overflow:hidden}
  .cp-px{font-size:14px}.cp-chg{font-size:12px}
  .cp-st{display:none}
  /* Grafik kaydırma düğmesine yer: ayarlar çekmecesini zaman dilimi çipi de açar (aynı çekmece), kaydırıcı ikonu gizli */
  .cp-top .cp-dm{display:none!important}
}
@media (min-width:720px){.cp-m{display:none!important}}
@media (min-width:720px) and (max-width:1179px){
  .cp-quote,.cp-sym small,.cp-t2{display:none!important}
}
@media (min-width:1180px){.cp-d{display:inline-flex!important}.cp-dm{display:none!important}}
/* 1180-1535 px: üst çubuk dolu (G2-G4 düğmeleri ve grafik kaydırma); sembolün uzun adı gizlenir, fiyat ve değişim sığar */
@media (min-width:1180px) and (max-width:1535px){.cp-sym small{display:none}}
@media (pointer:fine) and (min-width:720px){.cp-btn{height:36px;min-width:36px}.cp-ib{width:36px}.cp-top{height:48px}}

:fullscreen .cp,.cp:fullscreen{height:100vh}
@media (prefers-reduced-motion:reduce){.cp-pop,.cp-drawer,.cp-search,.cp-scrim,.cp-state{transition:none}}

/* ---------------- /dev/chart ---------------- */
.dv{display:flex;flex-direction:column;gap:12px;padding:16px;min-height:100vh;background:var(--bg-canvas);color:var(--text-primary);font:400 14px/20px var(--font-sans)}
.dv-bar{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center}
.dv-bar label{display:flex;gap:6px;align-items:center;color:var(--text-secondary)}
.dv-bar select{height:32px;border-radius:var(--r-sm);border:1px solid var(--border-control);background:var(--bg-surface);color:var(--text-primary);font:inherit}
.dv-box{border:1px solid var(--cp-line);background:var(--bg-canvas);flex:none}
.dv-out{font:400 12px/16px var(--font-num);color:var(--text-secondary);white-space:pre-wrap}