@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

/* assets/app.css */
:root { --brand-accent: #0dcaf0; }
[data-bs-theme="dark"] { --brand-accent: #66d9ef; }


/* ---- Tema bazlı logo renkleri ---- */
:root{
  --logo-color: #2a2e37;        /* light: yeşil (emerald-500) */
  --logo-color-hover: #2a2e37;  /* light hover: emerald-600 */
}
[data-bs-theme="dark"]{
  --logo-color: #e5e7eb;        /* dark: kırmızı (red-500) */
  --logo-color-hover: #e5e7eb;  /* dark hover: red-600 */
}

.login-box {
  border: 1px solid var(--border-color, #0f1115); 
  /* eğer --border-color tanımlı değilse fallback olarak siyah (#000000) kullanır */
}

[data-bs-theme="dark"] {
  --border-color: #cbd5e1;
}


/* ---- Logo linki: büyük ve orantılı ---- */
/* font-size'ı container'a veriyoruz; ikon & yazı em ile ölçeklenir */
.brand-logo-link{
  color: var(--logo-color);
  line-height: 1;
  gap: .5rem;
  text-rendering: optimizeLegibility;
  /* mobilde büyük, masaüstünde daha büyük: */
  font-size: clamp(1.8rem, 1.1rem + 1.5vw, 2rem);
}
.brand-logo-link:hover{ color: var(--logo-color-hover); text-decoration: none; }

/* ikon metinle aynı renkten beslensin ve metinden biraz büyük görünsün */
.brand-logo-link .brand-icon{
  color: currentColor;          /* önceki renk kurallarını override eder */
  font-size: 1.1em;             /* yazıdan %10 büyük */
}

/* yazı ağırlığı ve hafif sıkılık */
.brand-logo-link .brand-text{
  font-weight: 800;
  letter-spacing: .25px;
}



/* --- iOS tarzı tema anahtarı --- */
.theme-toggle{
  display:flex; align-items:center; gap:.6rem; position:relative;
}
.theme-toggle-input{
  position:absolute; opacity:0; width:0; height:0; pointer-events:none;
}

/* Simgelerin yerleşimi: sol güneş, orta anahtar, sağ ay */
.theme-icon-sun{ order:0; font-size:1.1rem; transition:opacity .2s, transform .2s; }
.ios-switch   { order:1; }
.theme-icon-moon{ order:2; font-size:1.1rem; transition:opacity .2s, transform .2s; }

/* iOS switch gövdesi */
.ios-switch{
  width:54px; height:30px; border-radius:999px; position:relative; cursor:pointer;
  background: var(--toggle-track, #CBD5E1);
  transition: background .2s, box-shadow .2s;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.ios-switch::after{
  content:""; position:absolute; top:3px; left:3px;
  width:24px; height:24px; border-radius:50%;
  background: var(--toggle-knob, #fff);
  box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.15);
  transition: transform .22s cubic-bezier(.2,.6,.2,1), background .2s;
}

/* Checked durumunda track ve knob */
.theme-toggle-input:checked + .ios-switch{
  background: var(--brand-accent, #0dcaf0);
}
.theme-toggle-input:checked + .ios-switch::after{
  transform: translateX(24px);
}

/* Tema rengine göre track/knob varyasyonları */
:root{
  --toggle-track: #CBD5E1;    /* light: slate-300 */
  --toggle-knob: #FFFFFF;
}
[data-bs-theme="dark"]{
  --toggle-track: #334155;    /* dark: slate-700 */
  --toggle-knob: #0b0b0c;
}

/* Aktif simge vurgusu */
.theme-toggle-input:not(:checked) ~ .theme-icon-sun{ opacity:1; transform:scale(1.05); }
.theme-toggle-input:not(:checked) ~ .theme-icon-moon{ opacity:.45; }
.theme-toggle-input:checked ~ .theme-icon-sun{ opacity:.45; }
.theme-toggle-input:checked ~ .theme-icon-moon{ opacity:1; transform:scale(1.05); }

/* Hover/focus küçük dokunuşlar */
.ios-switch:hover{ box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.ios-switch:focus-visible{ outline: 2px solid var(--brand-accent, #0dcaf0); outline-offset: 2px; }


/* --- ikon buton (ghost/pill) --- */
.icon-btn{
  width:38px; height:38px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:999px; text-decoration:none;
  border:1px solid var(--icon-btn-border);
  background: var(--icon-btn-bg);
  color: var(--icon-btn-fg);
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  box-shadow: var(--icon-btn-shadow);
  line-height:1;
}
.icon-btn:hover{
  transform: translateY(-1px);
  background: var(--icon-btn-bg-hover);
  box-shadow: var(--icon-btn-shadow-hover);
}
.icon-btn:active{ transform: translateY(0); }

/* --- arama kutusu (pill) --- */
.searchbar{
  position:relative;
}
.searchbar > .bi-search{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  opacity:.6; pointer-events:none; font-size:1rem;
}
.searchbar .form-control{
  padding-left: 2.25rem; /* ikon boşluğu */
  border-radius: 999px;
  background: var(--search-bg);
  border:1px solid var(--search-border);
  box-shadow: var(--search-shadow);
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.searchbar .form-control:focus{
  border-color: var(--brand-accent, var(--bs-primary));
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .15);
}

/* --- iOS tarzı tema anahtarı (mevcutla uyumlu) --- */
.theme-toggle{ display:flex; align-items:center; gap:.6rem; position:relative; }
.theme-toggle-input{ position:absolute; opacity:0; width:0; height:0; pointer-events:none; }
.theme-icon-sun{ order:0; font-size:1.1rem; transition:opacity .2s, transform .2s; }
.ios-switch{ order:1; }
.theme-icon-moon{ order:2; font-size:1.1rem; transition:opacity .2s, transform .2s; }

.ios-switch{
  width:54px; height:30px; border-radius:999px; position:relative; cursor:pointer;
  background: var(--toggle-track, #CBD5E1);
  transition: background .2s, box-shadow .2s;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.05);
}
.ios-switch::after{
  content:""; position:absolute; top:3px; left:3px;
  width:24px; height:24px; border-radius:50%;
  background: var(--toggle-knob, #fff);
  box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 2px 8px rgba(0,0,0,.15);
  transition: transform .22s cubic-bezier(.2,.6,.2,1), background .2s;
}
.theme-toggle-input:checked + .ios-switch{ background: var(--brand-accent, #0dcaf0); }
.theme-toggle-input:checked + .ios-switch::after{ transform: translateX(24px); }

.theme-toggle-input:not(:checked) ~ .theme-icon-sun{ opacity:1; transform:scale(1.05); }
.theme-toggle-input:not(:checked) ~ .theme-icon-moon{ opacity:.45; }
.theme-toggle-input:checked ~ .theme-icon-sun{ opacity:.45; }
.theme-toggle-input:checked ~ .theme-icon-moon{ opacity:1; transform:scale(1.05); }

/* --- tema-uyumlu değişkenler --- */
:root{
  /* önceki brand-accent varsa korunur */
  --icon-btn-bg:#ffffff;
  --icon-btn-bg-hover:#f8fafc;
  --icon-btn-border:#e5e7eb;
  --icon-btn-fg:#111827;
  --icon-btn-shadow:0 1px 2px rgba(0,0,0,.08);
  --icon-btn-shadow-hover:0 2px 6px rgba(0,0,0,.12);

  --search-bg:#ffffff;
  --search-border:#e5e7eb;
  --search-shadow:0 1px 2px rgba(0,0,0,.06);

  --toggle-track:#cbd5e1;
  --toggle-knob:#ffffff;
}

[data-bs-theme="dark"]{
  --icon-btn-bg:#0f1115;
  --icon-btn-bg-hover:#141821;
  --icon-btn-border:#2a2e37;
  --icon-btn-fg:#e5e7eb;
  --icon-btn-shadow:0 1px 2px rgba(0,0,0,.4);
  --icon-btn-shadow-hover:0 2px 6px rgba(0,0,0,.5);

  --search-bg:#0f1115;
  --search-border:#2a2e37;
  --search-shadow:0 1px 2px rgba(0,0,0,.45);

  --toggle-track:#334155;
  --toggle-knob:#0b0b0c;
}

/* küçük dokunuşlar */
header hr{ opacity:.15; }

/* --- Login ikonunu "avatar + key" rozetiyle göster --- */
.icon-btn-login{ position:relative; }
.icon-btn-login > .bi-person-circle{ font-size:1.15rem; }

/* --- Retro Wall-Street Ticker --- */
.ticker{
  --ticker-height: 40px;
  --ticker-speed: 75s;             /* hız: kısalt = hızlanır */
  --ticker-gap: 2.5rem;
  --ticker-bg: #2a2e37;            /* koyu bant */
  --ticker-border: rgba(255,255,255,.08);
  background: var(--ticker-bg);
  border-top: 1px solid var(--ticker-border);
  border-bottom: 1px solid var(--ticker-border);
  position: relative;
}

/* 1) Yazıyı keskinleştir: gölgeleri kapat, harf aralığını sıkılaştır, font smoothing aç */
.ticker__item,
.ticker__item .sym,
.ticker__item .price,
.ticker__item .change{
  font-weight: 700;                /* 600–700 arası deneyebilirsin */
  text-shadow: none !important;    /* pseudo-bold gölgesini tamamen kapat */
  letter-spacing: .1px;            /* .0–.15 arası en net */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


[data-bs-theme="light"] .ticker{
  /* light temada da retro hissi için koyu bant bırakıyoruz */
  --ticker-border: rgba(0,0,0,.08);
}

.ticker__viewport{
  height: var(--ticker-height);
  overflow: hidden;
  position: relative;
  display: flex;           /* eklendi */
  align-items: center;     /* eklendi: yazı tam ortada */
}

.ticker__track{
  display: inline-flex;
  align-items: center;
  gap: var(--ticker-gap);
  white-space: nowrap;
  transform: translate3d(0,0,0);   /* subpixel bulanıklığını azaltır */
  will-change: transform;
  animation: ticker-scroll var(--ticker-speed) linear infinite;
  padding-left: var(--ticker-gap);
}

/* imleçle üzerine gelince duraklat */
.ticker:hover .ticker__track{ animation-play-state: paused; }

/* hareket */
@keyframes ticker-scroll{
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); } /* içerik iki kez yüklendiği için -50% ile kusursuz döngü */
}

/* madde görünümü */
.ticker__item{
  display: inline-flex;
  align-items: baseline;
  gap: .5rem;
  font-family: 'DotGothic16', ui-monospace, monospace; /* dot-matrix vibe */
  letter-spacing: .5px;
  text-transform: uppercase;
  font-size: clamp(1.3rem, .95rem + .55vw, 1.3rem);
  color: #ffffff;
  position: relative;
}

/* küçük ayırıcı noktalar (retro hissi) */
.ticker__item::after{
  content: '•';
  opacity: .35;
  margin-left: 1.8rem;
}

/* sembol, fiyat, değişim */
.ticker__item .sym{ opacity:.9; }
.ticker__item .price{ opacity:.95; }
.ticker__item .change{
  font-weight: 700;
}

/* renkler: artı yeşil, eksi kırmızı */
.ticker__item .change.up{   color: #00cf79; }  /* emerald-500 */
.ticker__item .change.down{ color: #fa0000; }  /* red-500  */

/* nokta vuruş dokusu (ince) */
.ticker::after{
  content:'';
  position:absolute; inset:0;
  pointer-events:none;
  background-image: radial-gradient(rgba(255,255,255,.025) 1px, transparent 1.9px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  opacity:.15;
}

/* erişilebilirlik: hareket azaltma */
@media (prefers-reduced-motion: reduce){
  .ticker__track{ animation: none; }
}

/* Varsayılan ölçüler (istersen değiştir) */
:root{
  --ticker-height: 36px;       /* bant yüksekliği; sende neyse onu kullan */
  --ticker-meta-size: .50rem;  /* küçük metin boyutu */
}

/* ── Ticker altındaki mini etiket (dışarıda, sağda) ───────────────── */
.ticker{
  /* sadece burada kullanmak için bir boyut değişkeni tanımlıyoruz */
  --ticker-meta-size: .72rem; /* ihtiyacına göre .65rem, .8rem, 12px... */
}

/* .ticker öğesinden SONRA gelen kardeş <small class="ticker__meta"> hedeflenir */
.ticker + .ticker__meta{
  display: block;
  margin-top: .30rem;         /* bant ile etiket arasına küçük boşluk */
  text-align: right;          /* sağa hizala */
  font-size: var(--ticker-meta-size);
  line-height: 1;
  /* sade ve net tipografi; istersen DotGothic yerine sistem font kullanıyoruz */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, ui-monospace, monospace;
  opacity: .9;
  pointer-events: none;
  user-select: none;
  color: #2a2e37;                /* açık tema: siyah */
}

/* koyu tema: beyaz */
[data-bs-theme="dark"] .ticker + .ticker__meta{
  color: #e5e7eb;
}


/* ─── Footer mini abonelik formu ───────────────────────────────── */
.footer-miniform{
  position: relative;
  display: flex;
  align-items: center;
  gap: .5rem;
  border-radius: 999px;
  padding: .35rem .4rem .35rem 2rem;
  background: var(--footer-mini-bg, #fff);
  border: 1px solid var(--footer-mini-border, #e5e7eb);
  box-shadow: var(--footer-mini-shadow, 0 1px 2px rgba(0,0,0,.06));
}
.footer-miniform .form-control{
  border: 0; background: transparent; outline: none; box-shadow: none; padding: 0;
}
.footer-miniform .form-control::placeholder{ opacity: .6; }
.footer-miniform-icon{
  position: absolute; left: .75rem; top: 50%; transform: translateY(-50%);
  opacity: .7; font-size: 1rem;
}
.footer-miniform-btn{
  width: 34px; height: 34px; border-radius: 999px;
  border: 1px solid var(--icon-btn-border);
  background: var(--icon-btn-bg);
  color: var(--icon-btn-fg);
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: var(--icon-btn-shadow);
  transition: transform .15s, box-shadow .2s, background .2s, border-color .2s;
}
.footer-miniform-btn:hover{ transform: translateY(-1px); box-shadow: var(--icon-btn-shadow-hover); }
.footer-miniform-btn i{ font-size: 1rem; line-height: 1; }

/* Tema varyasyonları (varsa mevcut değişkenlerle uyumlu) */
:root{
  --footer-mini-bg:#ffffff;
  --footer-mini-border:#e5e7eb;
}
[data-bs-theme="dark"]{
  --footer-mini-bg:#0f1115;
  --footer-mini-border:#2a2e37;
}

/* Küçük ekranlarda alt boşluk dengesi */
.footer .icon-btn{ margin-left: auto; } /* md altı sağa itmeye yardımcı */


/* ── Signals: ortak ───────────────────────────────────────────── */
.signals-card { border: 1px solid var(--bs-border-color); }
.signals-card .img-cover { width: 100%; height: 100%; object-fit: cover; border-radius: .5rem; }
.signals-img img { border-radius: .5rem; }

/* 52x52 kaynak küçük logolar için görünür render (değiştirilebilir) */
.signals-logo {
  --signals-logo-size: 32px; /* istersen 28 / 32 / 36 yap */
  width: var(--signals-logo-size);
  height: var(--signals-logo-size);
  border-radius: 8px;
  object-fit: cover;
  background: var(--bs-body-bg);
  border: 1px solid var(--bs-border-color);
}

/* GRID başlık ve altındaki sinyal satırı */
.signals-head { text-align: center; }
.signals-head .signals-head-inner { max-width: 100%; }
.signals-head .text-truncate { max-width: 100%; }
.signals-signal { font-weight: 600; }

/* LİSTE metin boşluğu */
.signals-row .small { color: var(--bs-secondary-color); }

/* KV listesi */
.signals-kv { list-style: none; padding: 0; margin: 0; }
.signals-kv li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem 0;
}
.signals-kv .kv-label { min-width: 80px; color: var(--bs-secondary-color); }
.signals-kv .kv-bar { flex: 1 1 auto; height: 1px; background: var(--bs-border-color); display: inline-block; }
.signals-kv .kv-val { min-width: 72px; text-align: right; font-variant-numeric: tabular-nums; }

/* LİSTE görünümü */
.signals-row { border: 1px solid var(--bs-border-color); background: var(--bs-body-bg); }
.signals-thumb { width: 140px; height: 78px; object-fit: cover; border-radius: .5rem; border: 1px solid var(--bs-border-color); }
.signals-inline-kv {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  font-variant-numeric: tabular-nums;
}
.inline-kv .kv-sep { opacity: .4; margin: 0 .25rem; }

/* Skeleton */
.skeleton-card, .skeleton-row {
  background: linear-gradient(90deg,
    rgba(125,125,125,.08) 25%,
    rgba(125,125,125,.16) 37%,
    rgba(125,125,125,.08) 63%);
  background-size: 400% 100%;
  animation: skeleton 1.2s ease-in-out infinite;
  border-radius: .75rem;
  border: 1px solid var(--bs-border-color);
}
.skeleton-card { height: 280px; }
.skeleton-row { height: 84px; }
@keyframes skeleton {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* Toolbar ufak sıkılaştırma */
.signals-toolbar .btn { min-width: 100px; }
#btn-view-grid, #btn-view-list { min-width: 0; width: 44px; }

/* Konteyner modları (seçili görünüm class'ı zaten JS ile toggle ediliyor) */
.signals-grid .signals-row { display: none; } /* grid modunda list item görünmez */
.signals-list .signals-card { display: none; } /* list modunda card görünmez */
.signals-grid .signals-kv,
.signals-grid .signals-inline-kv { display: none !important; }

/* Liste görünümünde başlık satırının taşmasını önlemek için
   mevcut text-truncate zaten var; istersen 2 satır kısma: */
/* .text-truncate-1 yerine tek satır ellipsis kullanılacağı için
   ekstra bir şeye gerek yok; ama garantilemek istersen: */
.signals-row .text-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* Liste görünümünde image_url'yi sadece md ve üstü ekranlarda göster */
@media (max-width: 767.98px) {
  .signals-thumb {
    display: none;
  }
}

/* Liste görünümünde (en küçük ekranlarda) pivotlar (R2, R1, P, S1, S2) tek satıra hizalanacak */
.signals-inline-kv {
  display: flex;
  flex-wrap: nowrap; /* Sadece tek satırda olacak şekilde hizala */
  gap: 1rem;
  font-variant-numeric: tabular-nums;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Mobilde (sm ve altı) pivotlar küçülecek (yazı boyutu azalacak) */
@media (max-width: 767.98px) {
  .signals-inline-kv .kv-l,
  .signals-inline-kv .kv-v {
    font-size: 0.75rem; /* küçük ekranlarda daha az yazı büyüklüğü */
    white-space: nowrap;
  }

  .signals-inline-kv .kv-sep {
    display: none; /* Çizgiler yok olacak */
  }
}

/* Yazı boyutları ve görünüm için tek satırda düzenleme */
.signals-inline-kv {
  align-items: center;
}

/* Daha büyük ekranlar için normal boyut */
@media (min-width: 768px) {
  .signals-inline-kv .kv-l,
  .signals-inline-kv .kv-v {
    font-size: 1rem;
  }
}

/* Liste görünümünde company_name'in taşmasını engelleme ve kısaltma */
.signals-row .text-truncate {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* sm ve md ekranlar için company_name 25 karakterle sınırlı */
@media (max-width: 767.98px), (min-width: 768px) and (max-width: 991.98px) {
  .signals-row .text-truncate {
    display: block;
    max-width: 25ch; /* 25 karakterle sınırlı */
    white-space: nowrap;
  }
}

/* lg ekranlar için company_name 35 karakterle sınırlı */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .signals-row .text-truncate {
    display: block;
    max-width: 35ch; /* 35 karakterle sınırlı */
    white-space: nowrap;
  }
}

/* xl ve xxl ekranlar için company_name 50 karakterle sınırlı */
@media (min-width: 1200px) {
  .signals-row .text-truncate {
    display: block;
    max-width: 50ch; /* 50 karakterle sınırlı */
    white-space: nowrap;
  }
}

/* Liste görünümünde R2, R1, P, S2, S1 bilgilerini `|` yerine `:` ile değiştirelim */
.signals-inline-kv .kv-sep {
  display: none; /* Çizgi | görünmesin */
}

/* R2, R1, P, S2, S1 kısmı "R2: 123" gibi olacak, sağda boşluk */
.signals-inline-kv .kv-l,
.signals-inline-kv .kv-v {
  display: inline-block;
}

.signals-inline-kv .kv-l:after {
  content: ": "; /* ":" ekleyelim */
}

/* Mobilde (sm ve altı) de aynı şekilde olacak */
@media (max-width: 767.98px) {
  .signals-inline-kv .kv-l {
    font-size: 0.75rem; /* Küçültme */
  }
}