/* --- Ticker (mobile-first) --- */
.krticker{
  margin:0;
  padding:0;
  list-style:none;
  display:grid;
  gap:4px;
  grid-template-columns: 1fr;
}

.krticker__item{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title price"
    "change range";
 /* gap:6px 10px;
    padding:10px 12px; */
  gap:3px 5px;
  padding:4px 6px;
  
  align-items:center;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  background:#fff;
}

.krticker__title{
  grid-area:title;
  font-size:13px;
  font-weight:500;
  letter-spacing:.4px;
  text-transform:uppercase;
  opacity:.75;
  line-height:1.2;
}

.krticker__price{
  grid-area:price;
  font-size:18px;
  font-weight:700;
  line-height:1.1;
  text-align:right;
  font-variant-numeric: tabular-nums;
}

.krticker__meta{
  font-size:12px;
  line-height:1.2;
  opacity:.9;
  font-variant-numeric: tabular-nums;
}

.krticker__item{
  grid-template-columns: minmax(0, 1fr) auto; 
}
.krticker__meta--change{ min-width: 0; }

.krticker__meta--change{ grid-area:change; }


.krticker__meta--range{
  grid-area:range;
  opacity:.7;
  display:flex;
  justify-content:flex-end;
  gap:6px;
  white-space:nowrap;
}




/* Change chip look (works with your existing dynamic classes like up/down etc.) */
.krticker__meta--change > span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.10);
  background:rgba(0,0,0,.03);
  font-weight:600;
}

/* If your dynamic classes are like "up/down/yesil/kirmizi" etc. add these aliases */
.krticker__meta--change .up,
.krticker__meta--change .positive,
.krticker__meta--change .yesil{
  border-color: rgba(16,185,129,.35);
  background: rgba(16,185,129,.10);
}

.krticker__meta--change .down,
.krticker__meta--change .negative,
.krticker__meta--change .kirmizi{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.10);
}

/* --- Desktop layout --- */
@media (min-width: 768px){
  .krticker{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap:12px;
  }
  .krticker__item{
    padding:12px 14px;
    gap:8px 12px;
  }
  .krticker__price{ font-size:20px; }
}

@media (min-width: 1100px){
  .krticker{
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
  .krticker__item{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "price"
      "change"
      "range";
    gap:8px;
    align-items:flex-start;
  }
  .krticker__price{ text-align:left; font-size:20px; }
  .krticker__meta--range{ text-align:left; }
}