/* Kozmetik Radar eki. stil.css eveline-panel/public/stil.css'in değişmemiş kopyasıdır; sunucudan gelen sayfaya
   özgü küçük farklar (bağlantı, form, sayfalama) burada. */
a { color: inherit; text-decoration: none; }
.bas a, .not a, .uyar a, a.dis { text-decoration: underline; text-underline-offset: 2px; }
td.ad > a:hover { text-decoration: underline; text-underline-offset: 2px; }
.ust .cikis { display: inline-flex; align-items: center; min-height: 34px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: #1c1c1c; font-size: 13px; font-weight: 600; }
.bas { display: block; }
.bas h1 { overflow-wrap: anywhere; }
.izg > .uyar { margin: 0; box-shadow: var(--cam-parlak); }
.dip { color: #fff; font-size: 12px; margin: 14px 4px 0; text-shadow: 0 1px 10px rgba(40, 26, 14, .4); }

/* tablo dolu kartlarda soluk yazı turuncu zeminde kayboluyor; koyulaştırılır */
.kart { --yazi-soluk: #544d46; --yazi-silik: #5f5850; }

/* sekme: Eveline'de button, burada sayfa bağlantısı */
.tab a { color: #fff; font-size: 13px; font-weight: 600; padding: 9px 14px; border-radius: 999px; white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center; transition: background .2s, color .2s; }
.tab a.on { background: #fff; color: #151515; box-shadow: 0 4px 14px -6px rgba(0, 0, 0, .3); }

/* sıralama: Eveline'de th button, sayfalı veride sıralamayı sunucu yapar */
th a { font-weight: 600; display: inline-flex; gap: 3px; align-items: center; }
th a::after { content: "↕"; opacity: .35; font-size: 10px; }
th a[data-yon="-1"]::after { content: "↓"; opacity: 1; }

/* KPI: büyük toplam iki sütun kaplar, aralıklar sığsın diye satır kırar */
.kp.hero { grid-column: span 2; }
.kp.uzun .d { font-size: 26px; white-space: normal; overflow-wrap: anywhere; }
.ust-bosluk { margin-top: 12px; }

/* tablo */
td.gorsel { padding-right: 0; width: 48px; }
td.gorsel img { width: 44px; height: 44px; object-fit: cover; border-radius: 10px; background: var(--cam-ic); display: block; }
td.urun { min-width: 230px; max-width: 420px; }
.ust-bilgi { display: flex; flex-wrap: wrap; gap: 3px 6px; align-items: center; margin-top: 3px; font-weight: 400; }
td.uzun { white-space: normal; min-width: 240px; }
.cubuk { display: grid; grid-template-columns: 90px 44px; gap: 8px; align-items: center; }
.cubuk .c { height: 10px; border-radius: 99px; background: rgba(60, 40, 25, .08); overflow: hidden; }
.cubuk .c i { display: block; height: 100%; border-radius: 99px; background: var(--s-ty); }
.metin p { margin-bottom: 10px; }
.metin p:last-child { margin-bottom: 0; }

/* form ve sayfalama */
.filt.ayrac { margin-bottom: 12px; }
.filt input:not([type="hidden"]), .filt select { border: 0; background: transparent; outline: 0; color: var(--yazi); min-width: 0; }
.filt input[name="ara"] { width: 150px; }
.filt input[type="number"] { width: 64px; }
.filt label:focus-within { box-shadow: 0 0 0 1.5px #151515; }
.dug.kucuk { min-height: 32px; padding: 0 16px; font-size: 13px; }
.sayfalar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: 12px; }
a.kucuk-dug { display: inline-flex; align-items: center; }
.kart .not + .tk, .kart > .not { margin-top: 10px; }
.giris input { display: block; }

@media (max-width: 520px) {
  td.urun { min-width: 170px; }
  .kp.uzun .d { font-size: 21px; }
  .filt input:not([type="hidden"]), .filt select { font-size: 16px; }
  .filt label:has(input[name="ara"]) { flex: 1 1 100%; }
  .filt input[name="ara"] { width: 100%; flex: 1; }
  .ust .canli { display: none; }
}