:root {
  --fikoyt-hmi-baslik-maks-genislik: unset;
  --fikoyt-hmi-baslik-dis-bosluk-sag-sol: 0px;
  --fikoyt-hmi-baslik-ic-bosluk: 0px 5px 0px 0px;
  --fikoyt-hmi-baslik-radius: 0px;
  --fikoyt-hmi-baslik-yukseklik: 30px;
  --fikoyt-hmi-baslik-arka-renk: linear-gradient(0deg, rgb(22, 117, 119) 10%, rgba(255, 255, 255, 1) 150%);
  --fikoyt-hmi-baslik-golge: 0 1px 2px 0 rgba(34, 36, 38, .15);
  --fikoyt-hmi-baslik-sinir: 1px solid rgba(34, 36, 38, .15);
  --fikoyt-hmi-baslik-alt-baslik-yazi-boyutu: 0.75em;
}

fikoyt-hmi-baslik {

  display: flex;
  justify-content: center;
  width: 100%;
  height: var(--fikoyt-hmi-baslik-yukseklik);
  z-index: 100;

  .ana {
    width: 100%;
    background: var(--fikoyt-hmi-baslik-arka-renk);
    margin-left: var(--fikoyt-hmi-baslik-dis-bosluk-sag-sol);
    margin-right: var(--fikoyt-hmi-baslik-dis-bosluk-sag-sol);
    border-radius: var(--fikoyt-hmi-baslik-radius);
    box-shadow: var(--fikoyt-hmi-baslik-golge);
    border-bottom: var(--fikoyt-hmi-baslik-sinir);
    display: flex;
    align-items: center;
    padding: var(--fikoyt-hmi-baslik-ic-bosluk);
    max-width: var(--fikoyt-hmi-baslik-maks-genislik);
    position: relative;
    overflow: hidden;

    .kullanici-resmi {
      height: 24px;
      width: 24px;
      box-shadow: 0 1px 2px 0 rgba(34, 36, 38, .15);
      border: 1px solid rgba(34, 36, 38, .35);
      border-radius: 3px;
    }

    .baslik {
      flex: 1;
      background-color: white;
      align-self: stretch;
      margin: 2px 5px 2px 5px;
    }
  }

}